Rows and columns

Every Aedify page is a stack of rows. Each row is split into columns, and the columns hold your elements: text, images, buttons, products and so on. This page covers how to add and arrange them, and every setting they have.

If you're new to the builder, start with Using the builder.

How rows and columns fit together

• The page holds rows, top to bottom.
• A row holds one or more columns, side by side.
• A column holds elements, one under another.

Each row is divided into 12 equal parts, and each column takes a number of them. Two halves are 6 + 6, three equal columns are 4 + 4 + 4, and a wide column with a sidebar is 8 + 4.

You don't need to add a row before an element. Drop or click an element onto an empty part of the page and Aedify puts it in a new one-column row for you. Drag an element out of a column onto the page and the same thing happens.

Adding a row

Drag Row from the Layout group of the palette onto the canvas, or click it to add it after the selected row. A new row has 2 columns (½ ½).

Choosing columns

Open the row's Settings and pick a layout under Columns:

If you change to fewer columns, nothing is lost: the elements from the columns that go away move into the last remaining column.

When you've set column widths yourself, the menu shows Custom.

Changing columns one at a time

Hover over a column to see its toolbar:

• Duplicate splits the column in two. A 6 becomes 3 + 3, and the copy has the same elements. A 1/12 column can't be split further.
• Delete removes the column and gives its width to the column next to it. Deleting a row's only column deletes the row.
• Settings sets the column's own width (see Column settings).
• Alt + ← / → moves the selected column left or right.

Columns can't be hidden on their own. To hide everything in a column, hide its elements, or hide the whole row.

Row settings

Width

Use Full width for colored bands and banner-style sections where the text should still line up with the rest of the page. Use Full bleed for images and maps that should touch both sides of the screen.

Vertical alignment

When columns have different amounts of content, Vertical alignment decides where the shorter ones sit:

• Stretch: every column is as tall as the tallest one. Use it when columns have backgrounds or borders that should line up.
• Top, Middle, Bottom: the shorter columns sit at that height. Middle works well for an image beside a block of text.

Column settings

Columns always stack full width on phones.

On tablets and phones

Columns respond to how wide the row is, not just the screen, so they behave the same on a full-width page as in a narrow theme layout:

If the tablet widths in a row add up to more than 12, the extra columns wrap onto a new line. For example, a 4-column row (3 + 3 + 3 + 3) reads better on tablets with each column set to 6 on tablet: two columns per line, two lines.

Check each width with Preview → Tablet and Mobile before you save.

Row backgrounds

Open Background in the row's settings.

Size, position, attachment, repeat and parallax appear once the row has an image.

Overlays and readable text

With white text on a background image, add a dark Overlay color and raise Overlay opacity. From 50% up, the settings show the contrast of white text on your overlay, for example White text on this overlay: 7.12:1 (passes AA). Aim for at least 4.5:1.

Parallax

Parallax speed sets how the image moves as the page scrolls:

Parallax runs without any script. Shoppers whose browsers don't support it, and shoppers who've asked their device to reduce motion, see a still image instead.

Style settings on rows and columns

Rows and columns also have the Style and Advanced sections every element has: margins and padding, a background color, borders, corner radius, minimum height and custom CSS. Use a column's Style → Background and Padding to make a card, for example.

A row with no background image can still have a plain color: set it under Style → Background.

Rows are spaced 1.5rem (24px) apart by default. To change the space under one row, set its bottom Margin in Style.

Tips

• Start with the layout. Add rows and pick columns first, then fill them. It's quicker than rearranging later.
• Use Templates for repeated rows. A row you use on many pages, like a shipping banner, belongs in a template: edit it once and every page updates.
• Mind the order on phones. Columns stack left to right, top to bottom. If an image should come after its text on phones, put it in the right-hand column.