How to format columns with a horizontal design? – HELPFUL VILLAGE

This guide explains how to format an editable page so that your text and images are displayed in two columns.

Horizontal Design

Wide vs. Vertical Design

A wide design displays two columns side by side, while a vertical design stacks the columns one above the other when the screen is too narrow to display both columns side by side.

The vertical layout is particularly useful for smaller screens, such as iPhones and iPads, where displaying two columns side by side may not provide the best viewing experience.

As an example, we will recreate the following basic wide design:

Setting Up Side-by-Side Columns

Wide Format

The following code creates a two-column layout. Copy and paste this code into the Source Code section of your editable page:

<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>

You can replace the example text with your own content:

The text between > and < after left_col will appear in the left column.
The text between > and < after right_col will appear in the right column.

💡 Note:
When using the Text Editor, press Enter for double spacing and Shift + Enter for single spacing.

Adding the Code to Your Editable Page

Step 1: Open Editable Pages

Go to:

Admin → Settings → Editable Pages

Step 2: Create or Edit a Page

Click the red New Editable Page button at the bottom of the page, or select an existing editable page that you would like to modify.

Step 3: Open the Source Code

Click the <> icon and paste the two-column code provided above into the Source Code box.

Step 4: Add Your Content

Use the Text Editor to add an image, title, and text to each column.

If you are familiar with HTML, you can switch between the Source Code and Text Editor to further customize the layout and achieve the desired design.

Additional Training

For a step-by-step demonstration, see our VIDEO TUTORIAL.