How to format columns with a horizontal design?

Here you will learn how to format an editable page so that your text and images are stacked in two columns format.

                                                    Horizontal Design

Wide vs. Vertical Design:

Stacking your columns vertically when the window is too small to display both columns side by side. This is usually the case when you plan to display the information in a format that can be viewed on an iPhone/iPad screen. 

As an example, let’s try to recreate the following basic Wide Design:

Setting Up Side-by-Side Columns:

(Wide Format)

The code to enable dual columns is as follows: 

(you will need to copy and paste this to your editable page on your platform)

<div class="hv_flex_container"> <div class="left_col" style="background-color: white;">Left Column Example Text</div> <div class="right_col" style="background-color: white;">Right Column Example Text</div> </div> 

Everything between the > and < stating “Left Column Example Text” will be what displays in your left column 

Everything between the > and < stating “Right Column Example Text” will be what displays in your right column. 

💡Note:
When using the text editor, use “shift” for double spacing, and “shift+enter” for single spacing.

Uploading your Code:

Step 1: To apply the new code, find the editable pages menu under admin → Settings → Editable Pages

Step 2: Select “ New Editable Page” red button at the bottom of the page 

Step 3: Click on <> symbol and insert the code provided above in the source code box.

Step 4: Using the text editor, insert an image and title for each column and your text. If you know how to code, you can go back and forth between source code and the text editor to achieve the look you want.

For additional aid, watch our video tutorial: VIDEO TUTORIAL