Aedify documentation / Elements

Style and Advanced settings

The Style and Advanced settings every Aedify element has: margins and padding, background, text colour, font size and weight, borders, corner radius, minimum height and custom CSS, what happens to your theme's styles when you set one, and Hide on storefront, CSS classes and anchor IDs.

Last updated October 20, 20265 min read

Below an element's own settings, every element has two more sections: Style, for spacing, colours and borders, and Advanced, for hiding the element, adding CSS classes and giving it an anchor ID to link to. Open an element's Settings on the canvas and expand either one.

New to the builder? Start with Using the builder.

Style

Every Style setting starts empty. Empty means the element keeps its default look, which for text, headings and buttons is your theme's.

Margins and padding

The box at the top of Style is two boxes, one inside the other:

Margin (the outer box) is space outside the element, between it and its neighbours.
Padding (the inner box) is space inside the element, between its edge and its content. It's what makes a background colour reach past the text.

Each has a field for every side: top, right, bottom and left. A field reads Default while it's empty. Type any CSS length, such as 16px, 1.5rem or 5%. A plain number is pixels: 24 becomes 24px when you leave the field.

The other Style settings

Setting	Example	What it does
Background	#f6f1e9	A colour behind the element. For a row's background image, use the row's own settings (see Rows and columns)
Text color	#1a1a1a	The colour of the element's text
Font size	18px	Any CSS size
Font weight	600	Default, 300, 400, 500, 600, 700 or 800
Border width	1px	How thick the border is
Border style	solid	None (default), solid, dashed or dotted. A border shows only once you pick a style
Border color	#d0d0d0	The border's colour
Border radius	8px	Rounds the corners
Minimum height	300px	The element is at least this tall, and grows with its content
Custom CSS	letter-spacing:1px	Extra CSS declarations, separated by semicolons, for anything not listed above

The colour fields take any CSS colour, such as #1a1a1a.

Custom CSS applies to the element itself, as inline styles. Write declarations only, such as letter-spacing:1px; text-transform:uppercase, not selectors or { } blocks.

Your theme's styles, and custom styles

Until you set a Style value, Style says Using your theme's styles. Setting any value below switches this element to custom styles. Once you set one, it says Custom styles are on: this element no longer inherits your theme's styles.

What that means depends on the element:

Text, headings, buttons, dividers and HTML code drop your theme's styles for that element, such as its heading sizes, spacing and button design, and use only Aedify's basic styles plus the values you set. The font and text colour still follow the page, unless you set them.
Other elements, such as images, banners, rows and columns, keep their look and add your values.

Reset to theme styles, at the bottom of Style, clears every Style value and puts the element back on your theme's styles.

Placed templates

A template placed on a page has no Style section. It's locked, and its look is set in the template editor. See Templates.

Advanced

Setting	Default	What it does
Hide on storefront	Off	Keeps the element in the page, but doesn't show it to shoppers. Not on columns
CSS classes	Empty	Your own class names, separated by spaces, for styling with your theme's CSS
Anchor ID	Empty	A name for this spot on the page, so links can jump to it

Hide on storefront

Hidden elements stay on the canvas, dimmed and striped, so you can still edit them. On your storefront they're not shown. It's the same as Hide on storefront in the element's hover toolbar.

Use it for content you switch on and off, such as a holiday banner or a sold-out notice.

CSS classes

Add class names your theme already styles, or ones you've added to your theme's CSS. Separate several with spaces, such as my-callout wide. Aedify keeps its own classes, which start with ae-, separately, so your classes don't affect how Aedify reads the page.

Anchor ID

Give an element an anchor ID, such as faq, and links can jump straight to it:

From the same page: a button or text link to #faq.
From anywhere: the page's address plus the ID, such as /pages/about#faq.

Use lowercase letters, numbers and hyphens, with no spaces, and give each element on a page a different ID.

If a link to an anchor doesn't scroll to the right place, your theme is probably still showing its own copy of the page text. Remove your theme's Content block from the page template, if your theme lets you; see Getting started.

Tips

Space with margins on the outside. To put space between two sections, set a bottom margin on the upper row rather than padding on every element in it.
Style once, then duplicate. Style one element, then use Duplicate in its toolbar. The copy keeps every Style and Advanced setting.
Check contrast. A text colour on a background you picked isn't checked for you. Aim for 4.5:1, the WCAG AA level for body text.
Keep the theme where you can. Elements without Style values change with your theme, so a new theme or new brand colours carry through without editing every page.