Pages divided into columns
1/3rd 2/3rds split
This is an example showing you what it looks like when we divide the page into two columns spaced at 1/3rd and 2/3rds the page width
Background colours
You can also set a background colour to any block, including the columns block, or even individual columns like I’ve done here for the purpose of demonstrating the boundary of this column. It’s also not a bad design feature 🙂
Other column layouts
Here are some more column layouts. If you are viewing on mobile, columns are probably converted into a single column (which is good, because otherwise they’ll display too small on a mobile screen)
Column 1
Column 2
Column 3
Column 1
Column 1
Column 1
Buttons are interesting too
Instead of having plain old links to other pages on your site, add buttons which can be coloured and styled however you like.
I haven’t linked these buttons to anything, but they look great, right!?
Tabbed content is pretty cool too
Try a tabbed content block and hide/reveal content by clicking the tabs!
Again, using columns to create a layout within another block type is totally something we can do
Like this is a “Columns” layout within a tab
And this one is just a heading
With a bunch of text underneath that I’ll copy paste to make look more. With a bunch of text underneath that I’ll copy paste to make look more. With a bunch of text underneath that I’ll copy paste to make look more. With a bunch of text underneath that I’ll copy paste to make look more.
With a bunch of text underneath that I’ll copy paste to make look more.With a bunch of text underneath that I’ll copy paste to make look more.
With a bunch of text underneath that I’ll copy paste to make look more.With a bunch of text underneath that I’ll copy paste to make look more. With a bunch of text underneath that I’ll copy paste to make look more.