Skip to main content

Section Block

Introduction

A Section Block is like a big container or a “room” on your web page. It helps organize content and keeps everything neat. But here’s an important thing: before you add text, images, or buttons, you should add columns inside the section first.

Think of it like setting up shelves in a room before placing your items—without shelves (columns), your content can be messy or hard to manage.

1. Adding a Section Block

  1. Open the Components Panel on the left side of the editor.
  2. Look for Section in the list of blocks.
  3. Click and drag it onto the canvas.
  4. Drop it wherever you want a new section to appear.

2. Add Columns Inside the Section

Before putting any content inside a section, you need to choose a column layout:

  1. Select the section you just added.
  2. Choose a single column, two columns, or more, depending on the layout you want.
  3. Drag the column block(s) into the section.

Why columns first?
Columns act like shelves in your section. They help organize content neatly side by side. If you add blocks directly into the section without columns, your page might look messy, and moving or styling the content later becomes difficult.

3. Adding Blocks Inside Columns

Now that your section has columns, you can safely add content:

  • Drag text, images, buttons, or other blocks into the columns.
  • Each column acts as a separate space, so content stays organized and easy to style.
  • You can have different content in each column, like text on the left and an image on the right.

4. Styling a Section Block

Sections are perfect for customizing the look of a page:

  1. Background Colors: Choose any color to make the section stand out.
  2. Background Images: Add a picture behind your content.
  3. Spacing (Padding & Margin):
    • Padding = space inside the section around the content
    • Margin = space outside the section between other sections
  4. Borders & Shadows: Make sections more defined or add depth.

Tip: Padding is like personal space inside a room; margin is the space between rooms.

5. Tips for Using Sections and Columns

  1. Always add columns first—this keeps your content neat and easy to manage.
  2. Use multiple sections to separate headers, features, or footers.
  3. Keep layouts balanced—too many columns or uneven content can look messy.
  4. Reuse styled sections and columns to save time.
Table of Contents