Facebook Pixel Equal-Width Column Snippets | Western Kentucky University Skip to main content

Equal-Width Column Snippets


This snippet is purely used for layout purposes. When content is placed in one of the Column Snippets, it will display that content into the number of columns that the table displays. By using these snippets, the layout also becomes responsive for different screen sizes; the columns will stack one under the other, starting with the first column on the left, and moving to the right. You can easily nest other snippets within the Column Snippet to create more dynamic and appealing content throughout your site.

 

Two Column Offset Snippet

Create a two-column layout where one column is wider than the other.

Offset Columns

 

Advanced Columns Snippet

Create more advanced column layouts, HTML experience highly recommended.

Advanced Columns

 

 

Snippet Options


ALIGN-CENTER

Controls if the columns are vertically aligned center within each column compared to the height of the other columns.

  • YES
  • NO

 

 

Snippet Columns


Column Content

Each column of the snippet table under Columns represents the content area of that column.

 Please Note: Do not alter the number of columns on this snippet, it will not transform as you would expect it to. Select the appropriate number of columns snippet for your needs. For example, if you currently have a Three Column snippet and need a fourth column, you should add the Four Column Snippet using the wysiwyg, then move your content to it.

 WYSIWYG content, nested snippets, components, and assets allowed.

 

 

Examples


Two Column Snippet

Create two equal-width responsive columns. This example is not aligned center.

 

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed.

Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque.

Column 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque.

Two Column Snippet
Options
ALIGN-CENTER NO
Columns

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed.

Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque.

Column 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque.

 

 

Aligned Center

This example has less content in the second column to demonstrate aligning center.

 

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed.

Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque.

Column 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Two Column Snippet
Options
ALIGN-CENTER YES
Columns

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed.

Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque.

Column 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

 

 

Three Column Snippet

Create three equal-width responsive columns.

 

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed.

Column 2

Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque.

Column 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed.

Three Column Snippet
Options
ALIGN-CENTER NO
Columns

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed.

Column 2

Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque.

Column 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed.

 

 

Four Column Snippet

Create four equal-width responsive columns.

 

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed.

Column 2

Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque.

Column 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed.

Column 4

Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque.

Four Column Snippet
Options
ALIGN-CENTER NO
Columns

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed.

Column 2

Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque.

Column 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed.

Column 4

Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque.

 

 

Five Column Snippet

Create five equal-width responsive columns.

 

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Column 2

Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat.

Column 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Column 4

Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat.

Column 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Five Column Snippet
Options
ALIGN-CENTER NO
Columns

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Column 2

Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat.

Column 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Column 4

Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat.

Column 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

 

Six Column Snippet

Create five equal-width responsive columns.

 

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column 2

Semper auctor neque vitae tempus quam pellentesque nec.

Column 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column 4

Semper auctor neque vitae tempus quam pellentesque.

Column 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column 6

Semper auctor neque vitae tempus quam pellentesque nec nam aliquam.

Six Column Snippet
Options
ALIGN-CENTER NO
Columns

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column 2

Semper auctor neque vitae tempus quam pellentesque nec.

Column 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column 4

Semper auctor neque vitae tempus quam pellentesque.

Column 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column 6

Semper auctor neque vitae tempus quam pellentesque nec nam aliquam.

 

 




Need Assistance?

The WKU ITS Service Desk is here to help. Give us a call, chat with a representative online, use the Self-Help Knowledge Base and more.

Get Help



Some of the links on this page may require additional software to view.

 Last Modified 11/6/20