Skip to content
Skip to main contentWhere does your team stand on AI adoption?
CONTACT SALESSTART BUILDING

Create a full-width two-column section

Align blocks next to one another with the Section and Columns blocks.

Overview

  • Use the Columns block to align items next to one another.
  • Use alignment and Section blocks to center blocks within your content entry.

Final product

This tutorial results in a full-width Section with two blocks aligned next to one another, using the Columns block. The video below demonstrates the full process of completing this task.

Get started

To complete this tutorial, you need:

  • A content entry such as a Page or Section.
  • Two blocks already on the page, such as an Image block and a Text block.

Step 1: Set wrapping container to full-width

To create a full-width Section:

  1. Add a Section block to the content entry
  2. Place both of your existing elements within it
  3. Go to the Style tab
  4. In the Layout panel, change the Width to Full page width

Then, place your two elements within the section.

Step 2: Add columns

To align your blocks side-by-side:

  1. Add Columns to the content entry
  2. Add the Columns inside of your Section block
  3. Drag and drop each of the two blocks you'd like next to one another to each space within the Columns

Adjust styling and alignment as needed.

What's next

Learn more about the Insert and Style tabs within the Visual Editor to get the most out of your content entries. Or, learn how to Create and edit content with Visual Copilot, leveraging Builder's AI to generate designs for you.

Was this article helpful?