Columns

Columns and grid

  • The grid that we use is made with 12 cells that you can use to organize your content.
  • The grid works with or without a sidebar
  • all the [cell] shortcodes have to be in a [row] shortcode

Here are the 12 cells:

Full width

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe appetere an quo. Ferri everti vim ad. Eirmod salutatus ei pro. Appetere pertinacia ei has. Ad quando habemus expetenda mea, vel ex antiopam definitiones. Ut legendos deserunt vulputate quo, hinc labore vivendum no nam. Cum ea cibo aperiri constituam. An possit efficiendi sit, eu nec tritani intellegam. Per in deserunt antiopam, nec dicunt convenire et. Ex partem conclusionemque qui.

Code[row][cell12] ... [/cell12][/row]

1/2 width

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe appetere an quo. Ferri everti vim ad. Eirmod salutatus ei pro. Appetere pertinacia ei has. Ad quando habemus expetenda mea, vel ex antiopam definitiones.

1/2 width

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe appetere an quo. Ferri everti vim ad. Eirmod salutatus ei pro. Appetere pertinacia ei has. Ad quando habemus expetenda mea, vel ex antiopam definitiones.

Code[row][cell6] ... [/cell6][cell6] ... [/cell6][/row]

1/3 width

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe appetere an quo. Ferri everti vim ad. Eirmod salutatus.

1/3 width

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe appetere an quo. Ferri everti vim ad. Eirmod salutatus.

1/3 width

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe appetere an quo. Ferri everti vim ad. Eirmod salutatus.

Code[row][cell4] ... [/cell4][cell4] ... [/cell4][cell4] ... [/cell4][/row]

1/4 width

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe appetere an quo. Ferri everti vim ad.

1/4 width

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe appetere an quo. Ferri everti vim ad.

1/4 width

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe appetere an quo. Ferri everti vim ad.

1/4 width

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe appetere an quo. Ferri everti vim ad.

Code[row][cell3] ... [/cell3][cell3] ... [/cell3][cell3] ... [/cell3][cell3] ... [/cell3][/row]

1/6 width

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe quo.

1/6 width

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe quo.

1/6 width

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe quo.

1/6 width

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe quo.

1/6 width

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe quo.

1/6 width

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe quo.

Code[row][[cell2] ... [/cell2][cell2] ... [/cell2][cell2] ... [/cell2][cell2] ... [/cell2][cell2] ... [/cell2][cell2] ... [/cell2][/row]

Mixed columns example

1/4 width

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe appetere an quo. Ferri everti vim ad. Eirmod salutatus ei pro.

3/4 width

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe appetere an quo. Ferri everti vim ad. Eirmod salutatus ei pro. Appetere pertinacia ei has. Ad quando habemus expetenda mea, vel ex antiopam definitiones. Lorem ipsum dolor sit amet, ex mea quod graeco, saepe appetere an quo. Ferri everti vim ad. Eirmod salutatus ei pro. Appetere pertinacia ei has. Ad quando habemus expetenda mea, vel ex antiopam definitiones.

Code[row][[cell3] ... [/cell3][cell9] ... [/cell9][/row]

1/3 width

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe appetere an quo.

2/3 width

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe appetere an quo. Ferri everti vim ad. Eirmod salutatus ei pro. Appetere pertinacia ei has.

Code[row][[cell4] ... [/cell4][cell8] ... [/cell8][/row]

Not centered title

This content is not centered on tablet. Also have padding to align the content and custom color background. Nulla pulvinar velit sit amet sem adipiscing et pulvinar ante vestibulum. Cras eget vulputate risus. Ut turpis massa, condimentum tempus cursus nec, malesuada et turpis. Duis nec velit odio, sit amet imperdiet lectus. Vivamus diam felis, iaculis quis viverra et, interdum quis nunc.

Centered title

This content is centered on tablet to look awesome. Also have padding to align the content and custom color background. Nulla pulvinar velit sit amet sem adipiscing et pulvinar ante vestibulum. Cras eget vulputate risus. Ut turpis massa, condimentum tempus cursus nec, malesuada et turpis. Duis nec velit odio, sit amet imperdiet lectus. Vivamus diam felis, iaculis quis viverra et, interdum quis nunc.

Get the code

[cell6 responsive=”center”] … content here … [/cell6]

Cell with custom background color

Nulla pulvinar velit sit amet sem adipiscing et pulvinar ante vestibulum. Cras eget vulputate risus. Ut turpis massa, condimentum tempus cursus nec, malesuada et turpis. Duis nec velit odio, sit amet imperdiet lectus. Vivamus diam felis, iaculis quis viverra et, interdum quis nunc.

Lorem ipsum dolor sit amet, ex mea quod graeco, saepe appetere an quo. Ferri everti vim ad. Eirmod salutatus ei pro. Appetere pertinacia ei has. Ad quando habemus expetenda mea, vel ex antiopam definitiones.

Get the code

[row responsive=”center”][cell12 bg_color=”#F0F0F0″ padding=”20px”] … content here … [/cell12][/row]

Customization options for row

Parameter Description
responsive empty or center the content on tablet
padding padding for content in cell
space small, medium or big space between rows 24px/48px/72px

Customization options for cell

Parameter Description
responsive empty or center the content on tablet
padding padding for content in cell
bg_color use color profile OR custom #color
text_color use color profile OR custom #color
top top margin for cell
right right margin for cell
bottom bottom margin for cell
left left margin for cell

Color profiles

gray black lime green emerald teal cyan cobalt blue indigo violet pink magenta crimson red orange amber yellow brown olive steel mauve taupe