The Settings Panel Controls Explained

Where to Find This

Services → Website Editor tab → click any element on the page

When you select something on your page, the panel on the right fills up with settings. The labels — Padding, Flex, Justify Content — can look technical, but they're simpler than they sound. This is your crib sheet: what each control means, in everyday words.

The good news: these sections are almost identical for every element. Learn them once here and they make sense everywhere.

Opening the settings

1. Click any element on your page — a heading, an image, a button, or a box.
2. A blue tag appears above it — or just inside its top edge if the element sits right at the top of the page — and the right-hand panel (the Properties panel) fills with its settings.
3. If the panel is empty, nothing is selected yet — click an element first.

Each setting lives in a titled section you can open and close by clicking its heading.

Jargon at a glance

The words that trip people up most, one line each. Everything below is explained in more detail further down.

Size & Layout — how big it is

Where this element sits

Under the size boxes you'll find a small diagram: a dashed box stands for whatever holds this element, the solid block is This element, and the faded blocks are each a Sibling element — the key underneath uses exactly those two words. The diagram stacks or lines up to match how the container actually arranges things, so it previews your real page rather than a generic one.

Below the diagram are the position buttons. Which buttons you get depends on the container, because that's what decides which direction this element can actually move in:

• If the container lines items up across the page, you get Up and down — Auto, Top, Middle, Bottom, Match tallest. A note underneath says that left-and-right position is set on the container, not here.
• If the container stacks items down the page, you get Left and right — Auto, Left, Middle, Right, Match widest, with the matching note about up-and-down position.
• If the container is a grid, you get both a Left and right row and an Up and down row.
• If the container doesn't arrange its contents at all, a note says so: these settings won't change anything yet.

Match tallest / Match widest is the one to reach for when a row of cards should all be the same size — it makes this element as tall (or as wide) as the biggest sibling element next to it.

Content Layout — how the things inside a box line up

This section only appears on containers, rows and other boxes that hold content — and it's the most useful one to understand. It decides how the items inside sit together.

• Direction – Row → lays the items out left-to-right in a line; Column ↓ stacks them top-to-bottom.
• Justify Content – how the items are spread along that line: Start, Center, End, or spaced apart with Between, Around or Evenly.
• Align Items – how the items line up across the line (the other direction): Start, Center, End, or Stretch to match heights.

Spacing — breathing room (padding vs margin)

The Spacing section has two controls, each shown as a small box with four inputs for the four sides (top, right, bottom, left):

• Padding (marked P) – space inside the element, between its edge and its content. Add padding so text and images don't feel cramped against the edges.
• Margin (marked M) – space outside the element that pushes its neighbours away. Add margin to create gaps between blocks.

The link button (Link all sides / Unlink sides) lets you change all four sides together, or set each one separately. The preset buttons 0, 8, 16, 24 and 32 are quick amounts — the bigger the number, the more space.

Typography — styling your text

Colours, Background & Border

• Colors – three swatches: Background (the fill behind), Text Color, and Border Color (the outline).
• Background – switch between Color and Image. Image mode fills the box with a photo behind your content.
• Border – a tabbed control:
  • Width – how thick the outline is (presets 0, 1, 2, 4).
  • Color – the outline colour.
  • Radius (shown as Corner Radius) – how rounded the corners are. The ● preset makes a full pill shape.
  • Style – solid, dashed or dotted.

Advanced sections you can leave alone

Further down the panel you'll see a few more sections. They're for fine-tuning and are safe to ignore while you're finding your feet — nothing breaks by not touching them:

• Effects – shadows and transparency.
• Animation – movement as the element scrolls into view (Fade, Up, Left, Right, Scale), with a delay and trigger point.
• Position & Layer – precise placement and which element sits in front.
• CSS Inspector – a read-out of the underlying styling, for reference only.

Selecting the right element

Many settings — spacing, centring, background — belong on the box around your content rather than the text itself. When an element is selected, the blue tag above it gives you three controls:

• Grip handle (the dotted icon) – press and drag to move the element.
• Up arrow – selects the box around this one (its parent), which is often what you actually want to style.
• Cross (✕) – deletes the selected element.

Related guides

• Understanding the Editor Interface
• Adding Components to Your Page
• Customising Styles and Themes