9.5 Building Page Structure (Sections, Rows, Columns)

Close Master pages are built using a standard hierarchical structure of containers. Understanding this structure is key to creating well-organized and responsive layouts.

  1. Sections (Typically Green Outline):
    • These are the largest containers, spanning the full width of the page. They act as horizontal bands down the page.
    • Purpose: Hold Rows and define the overall background and vertical spacing for a major content block (e.g., a hero banner section, a features section, a testimonial section, a footer section).
    • Adding: Click + Add Section on the canvas or drag a Full Width layout block from the Elements Panel. You can also drag Global Sections.
    • Styling: Select the section. Use the Settings Sidebar to set Background (color, image, video), Padding (space inside the section), Margins (space outside the section), and Borders.
    • Sticky Sections: Use Advanced > Sticky > Stick to Top or Stick to Bottom options to create headers or footers that remain fixed while the user scrolls.
  2. Rows (Typically Blue Outline):
    • Rows live inside Sections.
    • Purpose: Define the horizontal column structure within a section. You choose how many columns a row should have (e.g., 1 column, 2 columns, 3 columns, 1/3 + 2/3 split, etc.).
    • Adding: Click + Add Row inside a section or drag a multi-column layout block from the Elements Panel into a section.
    • Styling: Select the row. Use the Settings Sidebar to set row Width, Background, Padding/Margins, and adjust spacing between the columns within that row.
  3. Columns (Typically Purple/Pink Outline):
    • Columns live inside Rows. Each row contains one or more columns based on the layout you chose.
    • Purpose: Act as the direct containers for your actual content Elements (text, images, buttons, etc.).
    • Adding Content: Click + Add Element inside a column or drag Elements from the panel directly into a column.
    • Styling: Select the column. Use the Settings Sidebar to set column Background, Padding, Margins, Borders, and control Vertical Alignment of content within the column.
    • Resizing: You can often click and drag the vertical divider line between columns within a row to adjust their relative widths visually.

Think of it as nesting boxes: The Page contains Sections. Sections contain Rows. Rows contain Columns. Columns contain Elements.