skip to main content

Column Content Examples

This theme has a few different ways of displaying content in columns.

Columned Content

This component allows you to have a content grid up to 4 columns wide with a heading on the top, content, and an optional button to get more details. The text of each button can be different. The size of each column is automatically set based on the number of columns. If you have more than 4 columns then they will automatically wrap to another line.

Columned Content

One Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra varius mi, eu ultricies ante adipiscing ac. Phasellus tincidunt feugiat risus, et lacinia purus ornare eu. Nullam viverra porttitor velit, non accumsan felis commodo at. 

Learn More

Two Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra varius mi, eu ultricies ante adipiscing ac. Phasellus tincidunt feugiat risus, et lacinia purus ornare eu. Nullam viverra porttitor velit, non accumsan felis commodo at. 

Learn More

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra varius mi, eu ultricies ante adipiscing ac. Phasellus tincidunt feugiat risus, et lacinia purus ornare eu. Nullam viverra porttitor velit, non accumsan felis commodo at. 

Button Text

Three Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra varius mi, eu ultricies ante adipiscing ac. Phasellus tincidunt feugiat risus, et lacinia purus ornare eu. Nullam viverra porttitor velit, non accumsan felis commodo at. 

Learn More

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra varius mi, eu ultricies ante adipiscing ac. Phasellus tincidunt feugiat risus, et lacinia purus ornare eu. Nullam viverra porttitor velit, non accumsan felis commodo at. 

Button Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra varius mi, eu ultricies ante adipiscing ac. Phasellus tincidunt feugiat risus, et lacinia purus ornare eu. Nullam viverra porttitor velit, non accumsan felis commodo at. 

Other Button Text

Four Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra varius mi, eu ultricies ante adipiscing ac. Phasellus tincidunt feugiat risus, et lacinia purus ornare eu. Nullam viverra porttitor velit, non accumsan felis commodo at. 

Learn More

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra varius mi, eu ultricies ante adipiscing ac. Phasellus tincidunt feugiat risus, et lacinia purus ornare eu. Nullam viverra porttitor velit, non accumsan felis commodo at. 

Button Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra varius mi, eu ultricies ante adipiscing ac. Phasellus tincidunt feugiat risus, et lacinia purus ornare eu. Nullam viverra porttitor velit, non accumsan felis commodo at. 

Other Button Text
Column Heading 4

No button here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra varius mi, eu ultricies ante adipiscing ac. Phasellus tincidunt feugiat risus, et lacinia purus ornare eu. Nullam viverra porttitor velit, non accumsan felis commodo at. 

Columned Images

The Columned Images component lets you add images in a grid along with a title that can link to another page. The title can be displayed above the image, below the image, on top of the image at the top, centered on the image, or on top of the image at the bottom.

Title Above Image

Lego Crowd
Lego Crowd
Duck Cleaning
Duck Cleaning

Title Below Image

Title Top of Image

Lego Crowd
Lego Crowd
Duck Cleaning
Duck Cleaning

Title Centered on Image

Title Bottom of Image

Lego Crowd
Lego Crowd
Duck Cleaning
Duck Cleaning

Image Grid With Content

The Image Grid With Content component is similar to the Image Grid component except that it allows you to include text content with the image. 

The text content can either show below the image, behind the image and be displayed when you hover over the image, or show over the image.

Title on Top of Image and Content Behind Image

Storm Troopers
Storm Troopers
Storm Troopers

Cheese strings smelly cheese cheeseburger. Jarlsberg stilton st. agur blue cheese parmesan pepper jack cheddar cheese and biscuits everyone loves. 

Title Below Image and Content Behind Image

Storm Troopers
Storm Troopers
Storm Troopers

Cheese strings smelly cheese cheeseburger. Jarlsberg stilton st. agur blue cheese parmesan pepper jack cheddar cheese and biscuits everyone loves. 

Title Below Image and Content Below Image

Duck Doing Duck Stuff
Duck Doing Duck Stuff

Hard cheese blue castello when the cheese comes out everybody's happy who moved my cheese when the cheese comes out everybody's happy cheese and wine mascarpone feta.

Cute Duck
Cute Duck

Blue castello lancashire manchego. When the cheese comes out everybody's happy bavarian bergkase cheesecake cream cheese cheese and wine feta croque monsieur ricotta. Boursin halloumi manchego mozzarella bavarian bergkase roquefort fromage stilton

Title Above Image and Content Below Image

Duck Doing Duck Stuff
Duck Doing Duck Stuff

Hard cheese blue castello when the cheese comes out everybody's happy who moved my cheese when the cheese comes out everybody's happy cheese and wine mascarpone feta.

Cute Duck
Cute Duck

Blue castello lancashire manchego. When the cheese comes out everybody's happy bavarian bergkase cheesecake cream cheese cheese and wine feta croque monsieur ricotta. Boursin halloumi manchego mozzarella bavarian bergkase roquefort fromage stilton

Content over Image

Duck Doing Duck Stuff
Duck Doing Duck Stuff

Hard cheese blue castello when the cheese comes out everybody's happy who moved my cheese when the cheese comes out everybody's happy cheese and wine mascarpone feta.

Cute Duck
Cute Duck

Blue castello lancashire manchego. When the cheese comes out everybody's happy bavarian bergkase cheesecake cream cheese cheese and wine feta croque monsieur ricotta. Boursin halloumi manchego mozzarella bavarian bergkase roquefort fromage stilton

 

Columned Feature

Another columned component that allows up to four columns of headings, images, text, and a link button.

One Column

Ornare arcu dui vivamus arcu felis bibendum ut. Suspendisse in est ante in nibh. At varius vel pharetra vel. In pellentesque massa placerat duis ultricies lacus sed turpis.

Learn More
Two Column

Ornare arcu dui vivamus arcu felis bibendum ut. Suspendisse in est ante in nibh. At varius vel pharetra vel. In pellentesque massa placerat duis ultricies lacus sed turpis.

Do More
Three Column

Ornare arcu dui vivamus arcu felis bibendum ut. Suspendisse in est ante in nibh. At varius vel pharetra vel. In pellentesque massa placerat duis ultricies lacus sed turpis.

Be More

Image Beside Content

The Image Beside Content component makes it easier to have an image show next to next to some content without having the content wrap around the image.

Hand Crafted

Hand Crafted

Hand Crafted

Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus. Massa vitae tortor condimentum lacinia quis vel. Fringilla ut morbi tincidunt augue interdum velit euismod. Semper risus in hendrerit gravida rutrum. Viverra vitae congue eu consequat ac felis. Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus.

Hand Crafted

Hand Crafted

Hand Crafted

Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus. Massa vitae tortor condimentum lacinia quis vel. Fringilla ut morbi tincidunt augue interdum velit euismod. Semper risus in hendrerit gravida rutrum. Viverra vitae congue eu consequat ac felis. Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus.