Flexible Column Layouts

Blog > Flexible Column Layouts

1/2 Column


Nulla aliquam, lacusquis

1Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condimentum ultrices consequateu, vehicula ac mauris. Lorem vehicula ac mauris. Ut adipiscing, leo nec ipsum dolor sit amet, consectetur adipiscing elit. A ultrices consequateu, vehicula ac mauris. Lorem ipsum dolor sit amet, consectetur adipiscing consectetur consectetur elit. 
//one half column

[one_half]text[/one_half]

Nulla aliquam, lacusquis

2Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condimentum ultrices consequateu, vehicula ac mauris. Lorem vehicula ac mauris. Ut adipiscing, leo nec ipsum dolor sit amet, consectetur adipiscing elit. A ultrices consequateu, vehicula ac mauris. Lorem ipsum dolor sit amet, consectetur adipiscing consectetur consectetur elit. 
//one half last column

[one_half_last]text[/one_half_last]

1/3 Column


Nulla aliquam, lacusquis

1Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condimentum ultrices consequateu, vehicula ac mauris. Lorem vehicula ac mauris. Ut adipiscing, leo nec ipsum dolor sit amet, consectetur adipisci 
//one third column

[one_third]
text
[/one_third]

Nulla aliquam, lacusquis

2Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condimentum ultrices consequateu, vehicula ac mauris. Lorem vehicula ac mauris. Ut adipiscing, leo nec ipsum dolor sit amet, consectetur adipisci 
//one third column

[one_third]
text
[/one_third]

Nulla aliquam, lacusquis

3Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condimentum ultrices consequateu, vehicula ac mauris. Lorem vehicula ac mauris. Ut adipiscing, leo nec ipsum dolor sit amet, consectetur adipisci 
//one third last column

[one_third_last]
text
[/one_third_last]

Icon Columns


Quis autem vel

Quis autem vel

Neque porro quisquam est

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Quis autem vel

Quis autem vel

Neque porro quisquam est

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Quis autem vel

Quis autem vel

Neque porro quisquam est

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 


//Icon columns. Icons should be 48x48 pixels.

[icon_column
icon_url48x48 = "www.example.com/icon.jpg"
title = "Quis autem vel"
subtitle = "Neque porro quisquam est"]
Text
[/icon_column]

2/3 Column


Nulla aliquam, lacusquis

1Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condimentum ultrices consequateu, vehicula ac mauris. Lorem vehicula ac mauris. Ut adipiscing, leo nec ipsum dolor sit amet, consectetur adipiscing elit. A ultrices consequateu, vehicula ac mauris. Lorem ipsum dolor sit amet, consectetur adipiscing consectetur consectetur elit. Lorem ipsum dolor sit amet, consectetur adipiscing consectetur consectetur elit. Lorem ipsum dolor sit amet, consectetur adipiscing consectetur consectetur elit. Lorem ipsum dolor sit amet, consectetur adipiscing consectetur consectetur elit. 
//two thirds column

[two_thirds]
text
[/two_thirds]

Nulla aliquam, lacusquis

2Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condimentum ultrices consequateu, vehicula ac mauris. Lorem vehicula ac mauris. Ut adipiscing. 
//one third last column

[one_third_last]
text
[/one_third_last]

Nulla aliquam, lacusquis

1Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condimentum ultrices consequateu, vehicula ac mauris. Lorem vehicula ac mauris. Ut adipiscing. 
//one third column

[one_third]text[/one_third]

Nulla aliquam, lacusquis

2Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condimentum ultrices consequateu, vehicula ac mauris. Lorem vehicula ac mauris. Ut adipiscing, leo nec ipsum dolor sit amet, consectetur adipiscing elit. A ultrices consequateu, vehicula ac mauris. Lorem ipsum dolor sit amet, consectetur adipiscing consectetur consectetur elit. Lorem ipsum dolor sit amet, consectetur adipiscing consectetur consectetur elit. Lorem ipsum dolor sit amet, consectetur adipiscing consectetur consectetur elit. Lorem ipsum dolor sit amet, consectetur adipiscing consectetur consectetur elit. 
//two thirds last column

[two_thirds_last]text[/two_thirds_last]

1/4 Column


Nulla aliquam

1Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci. 
//one fourth column

[one_fourth]
text
[/one_fourth]

Nulla aliquam

2Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci. 
//one fourth column

[one_fourth]
text
[/one_fourth]

Nulla aliquam

3Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci. 
//one fourth column

[one_fourth]
text
[/one_fourth]

Nulla aliquam

4Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci. 
//one fourth last column

[one_fourth_last]
text
[/one_fourth_last]

1/4 Column & 1/2 Column


Nulla aliquam, lacusquis

1Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condimentum ultrices consequateu, vehicula ac mauris. Lorem vehicula ac mauris. Ut adipiscing, leo nec ipsum dolor sit amet, consectetur adipiscing elit. A ultrices consequateu, vehicula ac mauris. Lorem ipsum dolor sit amet, consectetur adipiscing consectetur consectetur elit. 
//one half column

[one_half]
text
[/one_half]

Nulla aliquam

2Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
//one fourth column

[one_fourth]
text
[/one_fourth]

Nulla aliquam

3Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
//one fourth last column

[one_fourth_last]
text
[/one_fourth_last]

Nulla aliquam

1Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
//one fourth column

[one_fourth]
text
[/one_fourth]

Nulla aliquam

2Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
//one fourth column

[one_fourth]
text
[/one_fourth]

Nulla aliquam, lacusquis

3Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condimentum ultrices consequateu, vehicula ac mauris. Lorem vehicula ac mauris. Ut adipiscing, leo nec ipsum dolor sit amet, consectetur adipiscing elit. A ultrices consequateu, vehicula ac mauris. Lorem ipsum dolor sit amet, consectetur adipiscing consectetur consectetur elit. 
//one half last column

[one_half_last]
text
[/one_half_last]

3/4 Column


Nulla aliquam

1Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices cons equat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condimentum ultrices consequateu, vehicula ac mauris. Lorem vehicula ac mauris. Ut adipiscing, leo nec ipsum dolor sit amet, consectetur adipiscing elit. A ultrices consequateu, vehicula ac mauris. Lorem ipsum dolor sit amet, consectetur adipiscing consectetur consectetur elit. Lorem vehicula ac mauris. Ut adipiscing, leo nec ipsum dolor sit amet, consectetur adipiscing elit. A ultrices consequateu, vehicula ac mauris. Lorem ipsum dolor sit amet, consectetur adipiscing consectetur consectetur elit. A ultrices consequateu, vehicula ac mauris. Lorem ipsum dolor sit amet, consectetur adipiscing consectetur consectetur elit. 
//three fourths column

[three_fourths]
text
[/three_fourths]

Nulla aliquam

2Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
//one fourth last column

[one_fourth_last]
text
[/one_fourth_last]

Nulla aliquam

1Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
//one fourth column

[one_fourth]
text
[/one_fourth]

Nulla aliquam

2Lorem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices cons equat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condimentum ultrices consequateu, vehicula ac mauris. Lorem vehicula ac mauris. Ut adipiscing, leo nec ipsum dolor sit amet, consectetur adipiscing elit. A ultrices consequateu, vehicula ac mauris. Lorem ipsum dolor sit amet, consectetur adipiscing consectetur consectetur elit. Lorem vehicula ac mauris. Ut adipiscing, leo nec ipsum dolor sit amet, consectetur adipiscing elit. A ultrices consequateu, vehicula ac mauris. Lorem ipsum dolor sit amet, consectetur adipiscing. 
//three fourths last column

[three_fourths_last]
text
[/three_fourths_last]