Facebook Pixel Offset Two Column Snippets | Western Kentucky University Skip to main content

Offset Two Column Snippet


This snippet is similar to the Equal-Width Column Snippets, however there are some extra options that allow you to control which column is the widest as well as the size of the wider column.  There is also an option to alternate the widest column every other row. This allows you to create more dynamic and custom layouts inside of the new templates.

Use this snippet purely for layout purposes.  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.

 

Available Settings

SIZE
Controls the size of the wider of the two columns.  (Options: SMALL, MEDIUM, LARGE)

  • SMALL - Creates a 60% / 40% layout
  • MEDIUM - Creates a 66.6% / 33.3% layout (Default
  • LARGE - Creates a 75% / 25% layout

WIDER-COLUMN
Controls the location of the wider of the two columns. (Options: LEFT, RIGHT)

ALTERNATE-ROWS
If your snippet has multiple rows, this setting controls the alternating position of the wider column starting with the WIDER-COLUMN option first. (Options: YES, NO)

Ex - If the first row is wider on the left, the next row will be wider on the right, then return to wider on the left next row and so on.

ALIGN-CENTER
Controls if the columns are vertically centered within each column comared to the height of the other columns. (Options: YES, NO)

 

 


 

 

Example #1  - Basic Offset Columns

This example uses the default options.  The wider column is to the left and the smaller to the right.  There is less content in the right column and the text is smaller to convey less emphasis than the content in the left column.

 

Wider Column

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider. Tree exotic monkey funny monkeys endangered capuchin spider rainforest baby space monkey howler zoo primate banana arboreal. Funny monkeys primate banana endangered zoo monkey capuchin exotic arboreal baby tree rainforest spider howler space monkey. Funny monkeys arboreal zoo monkey tree exotic space monkey spider banana capuchin baby endangered rainforest primate howler.

Spider tree rainforest arboreal primate banana zoo capuchin endangered funny monkeys monkey baby exotic space monkey howler.

Smaller Column

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider.

Spider tree rainforest arboreal primate banana zoo capuchin endangered funny monkeys monkey baby exotic space monkey howler.

Offset Two Column Snippet
SIZE MEDIUM
WIDER-COLUMN LEFT
ALTERNATE-ROWS NO
ALIGN-CENTER NO
Wider Column

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider. Tree exotic monkey funny monkeys endangered capuchin spider rainforest baby space monkey howler zoo primate banana arboreal. Funny monkeys primate banana endangered zoo monkey capuchin exotic arboreal baby tree rainforest spider howler space monkey. Funny monkeys arboreal zoo monkey tree exotic space monkey spider banana capuchin baby endangered rainforest primate howler.

Spider tree rainforest arboreal primate banana zoo capuchin endangered funny monkeys monkey baby exotic space monkey howler.

Smaller Column

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider.

Spider tree rainforest arboreal primate banana zoo capuchin endangered funny monkeys monkey baby exotic space monkey howler.

 

 


 

 

Example #2  - Larger and Wider on the Right

This example uses the LARGE size wider column and has the WIDER-COLUMN set to the right. This creates a 25% / 75% column layout. You can swap the location of the wider column in combination with any of the available sizes.

 

Smaller Column

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider.

Spider tree rainforest arboreal primate banana zoo capuchin endangered funny monkeys monkey baby exotic space monkey howler.

Wider Column

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider. Tree exotic monkey funny monkeys endangered capuchin spider rainforest baby space monkey howler zoo primate banana arboreal. Funny monkeys primate banana endangered zoo monkey capuchin exotic arboreal baby tree rainforest spider howler space monkey. Funny monkeys arboreal zoo monkey tree exotic space monkey spider banana capuchin baby endangered rainforest primate howler.

Spider tree rainforest arboreal primate banana zoo capuchin endangered funny monkeys monkey baby exotic space monkey howler.

Offset Two Column Snippet
SIZE LARGE
WIDER-COLUMN RIGHT
ALTERNATE-ROWS NO
ALIGN-CENTER NO
Smaller Column

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider.

Spider tree rainforest arboreal primate banana zoo capuchin endangered funny monkeys monkey baby exotic space monkey howler.

Wider Column

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider. Tree exotic monkey funny monkeys endangered capuchin spider rainforest baby space monkey howler zoo primate banana arboreal. Funny monkeys primate banana endangered zoo monkey capuchin exotic arboreal baby tree rainforest spider howler space monkey. Funny monkeys arboreal zoo monkey tree exotic space monkey spider banana capuchin baby endangered rainforest primate howler.

Spider tree rainforest arboreal primate banana zoo capuchin endangered funny monkeys monkey baby exotic space monkey howler.

 

 


 

 

Example #3  - Multiple Rows with Images

This example uses the SMALL size option and contains images in the smaller column to the left. It also uses the ALIGN-CENTER option to keep the images vertically aligned with the text.

 

Wider Column 1

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider. Tree exotic monkey funny monkeys endangered capuchin spider rainforest baby space monkey howler zoo primate banana arboreal. Funny monkeys primate banana endangered zoo monkey capuchin exotic arboreal baby tree rainforest spider howler space monkey. Funny monkeys arboreal zoo monkey tree exotic space monkey spider banana capuchin baby endangered rainforest primate howler.

Spider tree rainforest arboreal primate banana zoo capuchin endangered funny monkeys monkey baby exotic space monkey howler.

Wider Column 2

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider. Tree exotic monkey funny monkeys endangered capuchin spider rainforest baby space monkey howler zoo primate banana arboreal. Funny monkeys primate banana endangered zoo monkey capuchin exotic arboreal baby tree rainforest spider howler space monkey. Funny monkeys arboreal zoo monkey tree exotic space monkey spider banana capuchin baby endangered rainforest primate howler.

Spider tree rainforest arboreal primate banana zoo capuchin endangered funny monkeys monkey baby exotic space monkey howler.

Wider Column 3

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider. Tree exotic monkey funny monkeys endangered capuchin spider rainforest baby space monkey howler zoo primate banana arboreal. Funny monkeys primate banana endangered zoo monkey capuchin exotic arboreal baby tree rainforest spider howler space monkey. Funny monkeys arboreal zoo monkey tree exotic space monkey spider banana capuchin baby endangered rainforest primate howler.

Spider tree rainforest arboreal primate banana zoo capuchin endangered funny monkeys monkey baby exotic space monkey howler.

Offset Two Column Snippet
SIZE SMALL
WIDER-COLUMN RIGHT
ALTERNATE-ROWS NO
ALIGN-CENTER YES
Wider Column 1

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider. Tree exotic monkey funny monkeys endangered capuchin spider rainforest baby space monkey howler zoo primate banana arboreal. Funny monkeys primate banana endangered zoo monkey capuchin exotic arboreal baby tree rainforest spider howler space monkey. Funny monkeys arboreal zoo monkey tree exotic space monkey spider banana capuchin baby endangered rainforest primate howler.

Spider tree rainforest arboreal primate banana zoo capuchin endangered funny monkeys monkey baby exotic space monkey howler.

Wider Column 2

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider. Tree exotic monkey funny monkeys endangered capuchin spider rainforest baby space monkey howler zoo primate banana arboreal. Funny monkeys primate banana endangered zoo monkey capuchin exotic arboreal baby tree rainforest spider howler space monkey. Funny monkeys arboreal zoo monkey tree exotic space monkey spider banana capuchin baby endangered rainforest primate howler.

Spider tree rainforest arboreal primate banana zoo capuchin endangered funny monkeys monkey baby exotic space monkey howler.

Wider Column 3

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider. Tree exotic monkey funny monkeys endangered capuchin spider rainforest baby space monkey howler zoo primate banana arboreal. Funny monkeys primate banana endangered zoo monkey capuchin exotic arboreal baby tree rainforest spider howler space monkey. Funny monkeys arboreal zoo monkey tree exotic space monkey spider banana capuchin baby endangered rainforest primate howler.

Spider tree rainforest arboreal primate banana zoo capuchin endangered funny monkeys monkey baby exotic space monkey howler.

 

 


 

 

Example #4  - Alternating Rows

This example has multiple rows of content, but uses the ALTERNATE-ROWS option to change the wider column every other row. The wider column will start with WIDER-COLUMN option, then switch as rows are added.

 

Wider Column

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider. Tree exotic monkey funny monkeys endangered capuchin spider rainforest baby space monkey howler zoo primate banana arboreal. Funny monkeys primate banana endangered zoo monkey capuchin exotic arboreal baby tree rainforest spider howler space monkey.

Smaller Column

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider.

Smaller Column

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider.

Wider Column

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider. Tree exotic monkey funny monkeys endangered capuchin spider rainforest baby space monkey howler zoo primate banana arboreal. Funny monkeys primate banana endangered zoo monkey capuchin exotic arboreal baby tree rainforest spider howler space monkey.

Wider Column

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider. Tree exotic monkey funny monkeys endangered capuchin spider rainforest baby space monkey howler zoo primate banana arboreal. Funny monkeys primate banana endangered zoo monkey capuchin exotic arboreal baby tree rainforest spider howler space monkey.

Smaller Column

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider.

Offset Two Column Snippet
SIZE MEDIUM
WIDER-COLUMN LEFT
ALTERNATE-ROWS YES
ALIGN-CENTER NO
Wider Column

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider. Tree exotic monkey funny monkeys endangered capuchin spider rainforest baby space monkey howler zoo primate banana arboreal. Funny monkeys primate banana endangered zoo monkey capuchin exotic arboreal baby tree rainforest spider howler space monkey.

Smaller Column

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider.

Smaller Column

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider.

Wider Column

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider. Tree exotic monkey funny monkeys endangered capuchin spider rainforest baby space monkey howler zoo primate banana arboreal. Funny monkeys primate banana endangered zoo monkey capuchin exotic arboreal baby tree rainforest spider howler space monkey.

Wider Column

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider. Tree exotic monkey funny monkeys endangered capuchin spider rainforest baby space monkey howler zoo primate banana arboreal. Funny monkeys primate banana endangered zoo monkey capuchin exotic arboreal baby tree rainforest spider howler space monkey.

Smaller Column

Funny monkeys exotic monkey rainforest arboreal howler tree banana primate endangered capuchin space monkey zoo baby spider.


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

 Last Modified 4/26/18