+7 347 294 97 98

Columns

Some info before you go on

The column template is based on percentages. Meaning that no matter where you put a one-half column, it will always be half of that total width.

Take some time to read these 4 blocks of information.


Size

The column shortcode has only one base shortcode, but many attributes. You will always use the shortcode «column», but changing the attribute size=»».


Last Columns

Whenever you’re setting a group of columns, the last one that closes the whole block, will need the last attribute. For example, when we have 3 columns with size one-third, the third column will have the attribute last=»true»


Columns Inside Columns

You are most welcome to put columns inside columns. A one-half column inside a one-half column will consequently give you a one-fourth column. Just keep in mind that this may cause troubles, so add a _ sign in front of the shortcode


For example. If you have a one-half inside a one-half, The child column, instead of being [column size="one-half] it will be [_column size="one-half]. You can add up to 5 _ signs.



one-half

Aenean ac felis sit amet nisi vestibulum accumsan. Aenean bibendum ultrices felis, at tincidunt dui fermentum sit amet. Praesent risus neque, mollis ut volutpat eget, ornare sed velit. Vivamus eu ipsum sapien. Aliquam id lacus eu orci accumsan pellentesque. Cras laoreet velit at quam tempus pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Suspendisse in consequat orci.

[sourcecode language=»plain»][column size="one-half"]
<p> … </p>
[/column][/sourcecode]


one-half Last

Aenean ac felis sit amet nisi vestibulum accumsan. Aenean bibendum ultrices felis, at tincidunt dui fermentum sit amet. Praesent risus neque, mollis ut volutpat eget, ornare sed velit. Vivamus eu ipsum sapien. Aliquam id lacus eu orci accumsan pellentesque. Cras laoreet velit at quam tempus pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Suspendisse in consequat orci.

[sourcecode language=»plain»][column size="one-half" last="last"]
<p> … </p>
[/column][/sourcecode]



two-thirds Last

Aenean ac felis sit amet nisi vestibulum accumsan. Aenean bibendum ultrices felis, at tincidunt dui fermentum sit amet. Praesent risus neque, mollis ut volutpat eget, ornare sed velit. Vivamus eu ipsum sapien. Aliquam id lacus eu orci accumsan pellentesque. Cras laoreet velit at quam tempus pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Suspendisse in consequat orci. Suspendisse potenti. Suspendisse in consequat orci. Suspendisse potenti. Suspendisse in consequat orci.

[sourcecode language=»plain»][column size="two-thirds" last="last"]
<p> … </p>
[/column][/sourcecode]



one-fourth

Aenean ac felis sit amet nisi vestibulum accumsan. Aenean bibendum ultrices felis, at tincidunt dui fermentum sit amet. Praesent risus neque, mollis ut volutpat eget.

[sourcecode language=»plain»][column size="one-fourth"]
<p> … </p>
[/column][/sourcecode]


three-fourths Last

Aenean ac felis sit amet nisi vestibulum accumsan. Aenean bibendum ultrices felis, at tincidunt dui fermentum sit amet. Praesent risus neque, mollis ut volutpat eget, ornare sed velit. Vivamus eu ipsum sapien. Aliquam id lacus eu orci accumsan pellentesque. Cras laoreet velit at quam tempus pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Suspendisse in consequat orci. Suspendisse potenti. Suspendisse in consequat orci. Cras laoreet velit at quam tempus pellentesque. Suspendisse potenti. Suspendisse in consequat orci.

[sourcecode language=»plain»][column size="three-fourths" last="last"]
<p> … </p>
[/column][/sourcecode]



four-fifths

Aenean ac felis sit amet nisi vestibulum accumsan. Aenean bibendum ultrices felis, at tincidunt dui fermentum sit amet. Praesent risus neque, mollis ut volutpat eget, ornare sed velit. Vivamus eu ipsum sapien. Aliquam id lacus eu orci accumsan pellentesque. Cras laoreet velit at quam tempus pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Suspendisse in consequat orci. Suspendisse potenti. Suspendisse in consequat orci. Cras laoreet velit at quam tempus pellentesque. Suspendisse potenti. Suspendisse in consequat orci.

[sourcecode language=»plain»][column size="four-fifths"]
<p> … </p>
[/column][/sourcecode]


one-fifth Last

Aenean ac felis sit amet nisi vestibulum accumsan. Aenean bibendum ultrices felis.

[sourcecode language=»plain»][column size="one-fifth" last="last"]
<p> … </p>
[/column][/sourcecode]



two-fifths

Aenean ac felis sit amet nisi vestibulum accumsan. Aenean bibendum ultrices felis, at tincidunt dui fermentum sit amet. Praesent risus neque, mollis ut volutpat eget, ornare sed velit. Vivamus eu ipsum sapien. Aliquam id lacus eu orci accumsan pellentesque. Cras laoreet velit at quam tempus pellentesque. Lorem ipsum dolor sit amet, consectetur.

[sourcecode language=»plain»][column size="two-fifths"]
<p> … </p>
[/column][/sourcecode]


three-fifths last

Aenean ac felis sit amet nisi vestibulum accumsan. Aenean bibendum ultrices felis, at tincidunt dui fermentum sit amet. Praesent risus neque, mollis ut volutpat eget, ornare sed velit. Vivamus eu ipsum sapien. Aliquam id lacus eu orci accumsan pellentesque. Cras laoreet velit at quam tempus pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Suspendisse in consequat orci. Suspendisse potenti. Suspendisse in consequat orci. Cras laoreet velit at quam tempus pellentesque. Suspendisse potenti. Suspendisse in consequat orci.

[sourcecode language=»plain»][column size="three-fifths" last="last"]
<p> … </p>
[/column][/sourcecode]



one-sixth

Aenean ac felis sit amet nisi vestibulum accumsan.

[sourcecode language=»plain»][column size="one-sixth"]
<p> … </p>
[/column][/sourcecode]


five-sixths last

Aenean ac felis sit amet nisi vestibulum accumsan. Aenean bibendum ultrices felis, at tincidunt dui fermentum sit amet. Praesent risus neque, mollis ut volutpat eget, ornare sed velit. Vivamus eu ipsum sapien. Aliquam id lacus eu orci accumsan pellentesque. Cras laoreet velit at quam tempus pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Suspendisse in consequat orci. Suspendisse potenti. Suspendisse in consequat orci. Cras laoreet velit at quam tempus pellentesque. Suspendisse potenti. Suspendisse in consequat orci.

[sourcecode language=»plain»][column size="five-sixths" last="last"]
<p> … </p>
[/column][/sourcecode]