Pages consist of three types of layered elements–sections, columns, and components.

  • Sections are always full-width and are the bottom layer of the page. Multiple sections can be added to a page.
  • Columns are the next layer and go inside a section to create the layout structure for the page. Choose from a single full-width layout or options that divide the section into up to four side-by-side columns.
  • Components go inside the columns and are the individual content elements that make up the page, such as text boxes, images, or checkout modules. Components are the top layer in the page elements.

Customize any of the layers to create the design you want.

To learn about page structure, complete this exercise to create a blank page:

  1. Go to Pages
  2. Click the blue + Page icon
  3. Click the blue Blank page button in the top right corner of the template catalog

In the Page Builder:

  1. Click + Add section
  2. In the menu, select Empty Section in the sidebar, then click the empty section block
  3. In the left menu, click Components
  4. Select Columns
  5. Click and drag any column layoutinto the page canvas
    • Move your cursor to the “Drop Here” indicator in the canvas. When it turns green, drop the column element
    • Add as many column layouts to the section as you want
  6. In the left menu, click Components
  7. Browse the component options and click one
  8. Click and drag the componentinto the page canvas
    • Move your cursor to the “Drop Here” indicator in the canvas. When it turns green, drop the component element
    • Add as many components to the columns as you want
    • The maximum width of the component is restricted by the width of the column you place it inside

Watch these steps in action:

Pro tip

  • To change the type of element available for editing, toggle Edit columns on or off in the top builder menu.
    Edit columns on toggle
    1. Hover over the element you want to edit and a mini-menu will appear
    2. Edit columns ON: Column areas are outlined in blue and green
    3. Edit columns OFF: Components are outlined in orange
  • To edit the bottom section layer, click the gear icon on the right edge to open the section menu.
    • Warning: Deleting a section will delete everything inside it – all columns and components.
  • The maximum size of a component is controlled by the width of the column it is nested inside.
    • For example, the same image component placed in two columns with different widths will be different sizes.

Columns control the maximum size of a component