The "page.multi-column" template is included in all of our themes. This template allows you to create a page with multiple columns--such as 2, 3 or even 4 columns--without having to use any complicated HTML.
First, you'll want to change your page template to page.multi-column. This will allow you to take advantage of the multiple columns.
Please note, you'll need to have your theme published for the template options to appear. The templates from which you can select are limited to the templates available in your currently published theme. When installing a new theme or updating your current theme, new templates may become available, however, these templates are only visible when your theme has been published.
To create the columns, add your content to your page, then click on the "< >" button in the upper right corner of the description box, to enter the HTML Rich Text Editor (RTE).
To create the columns, add the following code between where you want the previous column to end and next one to begin:
<!-- split -->
If you want two columns, you'd add the split tag (<!-- split -->) once. For three columns, add it twice. Lastly, for four columns, you'll have the split tag three times.
For example, for two columns, your text would look like the following:
<p>Column 1</p> <!-- split --> <p>Column 2</p>
For three columns, it'd look like this:
<p>Column 1</p> <!-- split --> <p>Column 2</p> <!-- split --> <p>Column 3</p>
Then lastly, four columns:
<p>Column 1</p> <!-- split --> <p>Column 2</p> <!-- split --> <p>Column 3</p> <!-- split --> <p>Column 4</p>
For more advanced column layouts, you can write some custom HTML as outlined here.
END Of Video::............
My Add on:
This is for one column of text followed by a placeholder followed by text followed be a placeholder
SPLIT:
Text text text text
<!--split-->
Placeholder:
<imgsrc="http://via.placeholder.com/600?text=%20placeholder"/><!--split>
SPLIT:
Text text text text
<!--split-->
Placeholder:
<imgsrc="http://via.placeholder.com/600?text=%20placeholder"/><!--split>
Multi Column using
1. wrap content in: <div>TEXT text text</div>
2. add class="columns" & allocate # of columns
3. add alpha to leftmost element
4. add omega to rightmost element
THEREFORE:
<div class="eight columns alpha"> TEXT TEXT TEXT <div class="eight columns">
OR
<div class="nine columns omega"> TEXT TEXT TEXT <div class="seven columns">