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