Columns Snippets

Our website is built with many column options to help display content better. When creating a new page, the default will be one column so to break content into more than one column, you'll use snippets.

Note: This tutorial is for those that already understand the basics of the OU content management system.

• Two Columns
• Three Columns
• Four Columns
• 2/3 Columns
• Column Float

---

 

Two Columns

1. Place your cursor in the place where you want the snippet to go.

2. Click the snippet button

3. Click "Column - Two" and pressed the blue "Insert" button.

4. These columns can be filled with text, photos, and other snippets like a quote snippet.

Save and publish the page. The table look will go away. Here is what the above will output.

---

 

Three Columns

1. Place your cursor in the place where you want the snippet to go.

2. Click the snippet button

3. Click "Column - Three" and pressed the blue "Insert" button.

4. These columns can be filled with text, photos, and other snippets.

Save and publish the page. The table look will go away. Here is what the above will output.

---

 

Four Columns

1. Place your cursor in the place where you want the snippet to go.

2. Click the snippet button

3. Click "Column - Four" and pressed the blue "Insert" button.

4. These columns can be filled with text, photos, and other snippets.

5. Save and publish the page. The table look will go away. Here is what the above will output.

---

 

1/3 - 2/3 Columns or 2/3 - 1/3 Columns

1. Place your cursor in the place where you want the snippet to go.

2. Click the snippet button 

3. Click "Column - 1/3 - 2/3" or "Column - 2/3 - 1/3" and pressed the blue "Insert" button. "Column - 1/3 - 2/3" will have the smaller column first and "Column - 2/3 - 1/3" will have the wide column first.

4. These columns can be filled with text, photos, and other snippets.

5. Save and publish the page. The table look will go away. Here is what the above will output.

---

 

Float Columns

1. Place your cursor in the place where you want the snippet to go.

2. Click the snippet button 

3. Click "Column - Float" and pressed the blue "Insert" button.

4. These columns can be filled with text, photos, and other snippets like a quote snippet.

• Float Direction: Choose if you want the floating column to go left or right
• Max-Width: Enter a number with "px" at the end, meaning pixels. Default is 300px which will take about 1/3 of the width.
• Light Blue box: This is where you can add text, a photo, or another snippet. The content outside and below the table will wrap around this floating column.

 

Save and publish the page. The table look will go away. Here is what the above will output.

Sed venenatis tortor in nibh cursus rutrum. Nam mi quam, consectetur eu metus sit amet, dictum eleifend dui. Curabitur non malesuada velit. Aenean eget pharetra velit. Phasellus hendrerit diam leo, at feugiat risus egestas et. Pellentesque lobortis libero et volutpat posuere. Nulla sed neque a arcu ultrices posuere in sit amet mi. Mauris justo tortor, blandit eu lacinia eu, tincidunt sed elit. Vivamus id posuere urna, vel hendrerit est.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a ipsum interdum, posuere nibh vitae, mollis erat. Fusce aliquam, sem non egestas aliquet, ex velit condimentum mauris, non tristique quam lacus vitae tortor. Curabitur commodo aliquam sem, eget sodales nunc pulvinar quis.

Morbi suscipit commodo eros sagittis dapibus. Praesent egestas magna eget nulla fringilla, ut commodo nisi interdum. Nullam mollis sagittis lobortis. Integer volutpat nibh ultricies posuere ullamcorper.

​