We’ll be showcasing 2 things; grid and content separators.
Both is available via built-in shortcodes and you just gonna be amazed how easy is to work with!
[separator style=»regular»]
[row equal_height=»false»]
[column col=»6″]
[awesome_icon icon=»fa fa-star» icon_size=»16″]I’m one half. Great!
Pellentesque dapibus posuere mi sed molestie. Proin iaculis nisl facilisis lacus rhoncus condimentum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
[/column]
[column col=»6″]
[awesome_icon icon=»fa fa-signal» icon_size=»16″]I’m the second half
Pellentesque dapibus posuere mi sed molestie. Proin iaculis nisl facilisis lacus rhoncus condimentum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
[/column]
[/row]
[separator style=»dbl-strike»]
[row equal_height=»true»]
[column col=»4″]
[awesome_icon icon=»fa fa-power-off» icon_size=»16″]Whoah, I became a first!
Proin cursus risus lectus, vitae tincidunt metus laoreet semper. Vivamus ipsum turpis, tristique sit amet tortor sit amet, lobortis imperdiet tortor. Praesent vel blandit lorem.
[/column]
[column col=»4″]
[awesome_icon icon=»fa fa-tag» icon_size=»16″]I have a bunch of text
Proin cursus risus lectus, vitae tincidunt metus laoreet semper. Vivamus ipsum turpis, tristique sit amet tortor sit amet, lobortis imperdiet tortor. Praesent vel blandit lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus.
[/column]
[column col=»4″]
[awesome_icon icon=»fa fa-rocket» icon_size=»16″]I’m the last kid
Proin cursus risus lectus, vitae tincidunt metus laoreet semper. Vivamus ipsum turpis, tristique sit amet tortor sit amet, lobortis imperdiet tortor. Shit.
[/column]
[/row]
[separator style=»dotted»]
[row equal_height=»true»]
[column col=»3″]
[awesome_icon icon=»fa fa-apple» icon_size=»16″]Getting narrower…
Vestibulum est velit, dapibus vestibulum neque sed, tincidunt vestibulum quam. Curabitur fringilla volutpat sem, eu elementum turpis eleifend id.
[/column]
[column col=»3″]
[awesome_icon icon=»fa fa-barcode» icon_size=»16″]Stretched totally
Proin iaculis nisl facilisis lacus rhoncus condimentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc cursus neque at malesuada tempor. Proin cursus risus lectus, vitae tincidunt metus laoreet semper.
[/column]
[column col=»3″]
[awesome_icon icon=»fa fa-video-camera» icon_size=»16″]Shorter one…
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc cursus neque at malesuada tempor.
[/column]
[column col=»3″]
[awesome_icon icon=»fa fa-leaf» icon_size=»16″]Golden middle
Vestibulum est velit, dapibus vestibulum neque sed, tincidunt vestibulum quam. Curabitur fringilla volutpat sem, eu elementum turpis eleifend id malesuada tempor.
[/column]
[/row]
[separator style=»dashed»]
[row equal_height=»false»]
[column col=»4″]
[awesome_icon icon=»fa fa-gift» icon_size=»16″]It’s like 1/3
Vestibulum est velit, dapibus vestibulum neque sed, tincidunt vestibulum quam. Curabitur fringilla volutpat sem, eu elementum turpis eleifend id malesuada tempor.
[/column]
[column col=»8″]
[awesome_icon icon=»fa fa-shopping-cart» icon_size=»16″]…and 2/3 bro
Vestibulum est velit, dapibus vestibulum neque sed, tincidunt vestibulum quam. Curabitur fringilla volutpat sem, eu elementum turpis eleifend id malesuada tempor. Vestibulum est velit, dapibus vestibulum neque sed, tincidunt vestibulum quam. Curabitur fringilla volutpat sem, eu elementum turpis eleifend id malesuada tempor.
[/column]
[/row]
[separator style=»zigzag»]
[row equal_height=»false»]
[column col=»9″]
[awesome_icon icon=»fa fa-filter» icon_size=»16″]Wider 2/3 col
Vestibulum est velit, dapibus vestibulum neque sed, tincidunt vestibulum quam. Curabitur fringilla volutpat sem, eu elementum turpis eleifend id malesuada tempor. Vestibulum est velit, dapibus vestibulum neque sed, tincidunt vestibulum quam. Curabitur fringilla volutpat sem, eu elementum turpis eleifend id malesuada tempor.
[/column]
[column col=»3″]
[awesome_icon icon=»fa fa-wrench» icon_size=»16″]…and 1/3 bro
Vestibulum est velit, dapibus vestibulum neque sed, tincidunt vestibulum quam. Curabitur fringilla volutpat sem, eu elementum turpis eleifend id malesuada tempor.
[/column]
[/row]
[separator style=»fatty»]
Holy guacamole, but that’s not all! You can create custom rows and columns, with an offset, nested, equal height content blox, nice and tidy. Shortcodes? Of course.
[separator style=»regular»]
[row equal_height=»true»]
[custom_column col=»3″ offset=»0″]
[awesome_icon icon=»fa fa-money» icon_size=»24″]3 cols wide
Duis sodales eget nisl vitae lobortis. Nunc auctor nec nulla eget mattis. Phasellus ultrices libero id sapien congue aliquam. Aliquam elementum lacinia massa eu rhoncus. Maecenas a vehicula magna. Fusce nec felis consectetur, eleifend nibh at, iaculis odio.
[/custom_column]
[custom_column col=»7″ offset=»0″]
[awesome_icon icon=»fa fa-legal» icon_size=»24″]7 cols wide
Duis sodales eget nisl vitae lobortis. Nunc auctor nec nulla eget mattis. Phasellus ultrices libero id sapien congue aliquam. Aliquam elementum lacinia massa eu rhoncus. Sed faucibus ligula id sollicitudin lobortis. Mauris cursus gravida lacus, et congue eros. Quisque neque neque, rutrum vitae augue id, tincidunt euismod lectus.
Morbi eu felis lectus. Ut quis enim ut arcu ultricies sollicitudin. Proin lorem arcu, ullamcorper eu mollis sit amet, vestibulum blandit nisi libero id sapien congue aliquam.
[/custom_column]
[custom_column col=»2″ offset=»0″]
[awesome_icon icon=»fa fa-truck» icon_size=»24″]2 cols wide
Duis sodales eget nisl vitae lobortis. Nunc auctor nec nulla eget mattis. Phasellus ultrices libero id sapien congue aliquam. Aliquam elementum lacinia massa eu rhoncus.
[/custom_column]
[/row]
[separator style=»regular»]
[row equal_height=»true»]
[custom_column col=»5″ offset=»0″]
[awesome_icon icon=»fa fa-eye» icon_size=»24″]Damn, I’m 5 cols wide!
Vestibulum est velit, dapibus vestibulum neque sed, tincidunt vestibulum quam. Curabitur fringilla volutpat sem, eu elementum turpis eleifend id malesuada tempor.
[/custom_column]
[custom_column col=»5″ offset=»2″]
[awesome_icon icon=»fa fa-umbrella» icon_size=»24″]5 cols wide too + 2 cols offset
Vestibulum est velit, dapibus vestibulum neque sed, tincidunt vestibulum quam. Curabitur fringilla volutpat sem, eu elementum turpis eleifend id malesuada tempor.
[/custom_column]
[/row]
[separator style=»regular»]
[row equal_height=»false»]
[custom_column col=»6″ offset=»3″ textalign=»text-center»]
[awesome_icon icon=»fa fa-camera» icon_size=»32″]
Whoah, look at me!
I’m 6 columns wide with an offset of 3 which makes me totally centered.
Fusce et tincidunt lorem, non mattis lacus. Phasellus nunc felis, rhoncus quis gravida quis, laoreet id odio. Donec ultrices vel lorem nec congue. Morbi est mi, rutrum ut augue at, tincidunt fermentum felis. Integer odio eros, pulvinar quis suscipit nec, commodo ut ligula. Suspendisse imperdiet felis non semper suscipit. Fusce est augue, lobortis sit amet sagittis quis, bibendum et tortor. Nullam elementum neque felis, eu malesuada mauris vulputate luctus.
[/custom_column]
[/row]
[separator style=»regular»]
[row equal_height=»true»]
[custom_column col=»3″ offset=»0″ textalign=»text-left»]
I’m 3 cols wide
Fusce est augue, lobortis sit amet sagittis quis, bibendum et tortor. Nullam elementum neque felis, eu malesuada mauris vulputate luctus.
[/custom_column]
[custom_column col=»4″ offset=»1″ textalign=»text-center»]
And I’m 4
Integer odio eros, pulvinar quis suscipit nec, commodo ut ligula. Suspendisse imperdiet felis non semper suscipit. Fusce est augue, lobortis sit amet sagittis quis, bibendum et tortor. Nullam elementum neque felis, eu malesuada mauris vulputate luctus.
[/custom_column]
[custom_column col=»3″ offset=»1″ textalign=»text-right»]
The rest is 3 again
Donec ultrices vel lorem nec congue. Morbi est mi, rutrum ut augue at, tincidunt fermentum felis. Integer odio eros, pulvinar quis suscipit nec, commodo ut ligula.
[/custom_column]
[/row]