Creating a Multi-Column Layout with Subtemplates

What You’ll Learn

How to use the Column subtemplates to create a multi-column layout and organize your content into a cleaner, more balanced format.

Why It Matters

Multi-column layouts help break up long pages and make content easier to read. They’re great for displaying features side-by-side, listing services, or structuring visual content more effectively.

---

Step-by-Step Instructions

1. Add the Subtemplate Widget

1. Log in and go to the page you want to edit.
2. Drag and drop the Subtemplate widget into the section where you want the columns to appear.

---

2. Select a Column Layout

1. In the Subtemplate window, look at the left sidebar under Categories.
2. Select the Columns category to view available column layouts.
3. Choose a layout based on how many columns you need—2, 3, or more—depending on your design goals.

---

3. Customize the Column Layout

1. On the right side of the Subtemplate window, adjust layout options such as:
2. Column spacing (gap)
3. Alignment (left, center, right)
4. Under the Advanced tab, you can adjust the Mobile Breakpoint to control how the columns behave on smaller screens.
   (Note: Available options may vary depending on your website’s template.)
5. When you're finished, click the green checkmark in the bottom-right corner to add the column layout to the page.

---

4. Add Content to Each Column

1. Drag content widgets (text, images, buttons, etc.) into any of the column sections.
2. Style and adjust the content as needed to match your design.

---

Troubleshooting Tips

• I don’t see the Column category in the Subtemplate window.

  Double-check that you are using the correct Subtemplate widget and that your website template supports column layouts.

• My columns don’t look right on mobile devices.

  Try adjusting the Mobile Breakpoint settings under the Advanced tab to improve responsiveness.

---