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
- Click any element on your page — a heading, an image, a button, or a box.
- A blue tag appears above it, and the right-hand panel (the Inspector) fills with its settings.
- 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
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.
Select the box that holds your content, then set Justify Content to Center and Align Items to Center. That places the contents right in the middle.
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.
A simple way to remember: padding puffs a box out from the inside; margin pushes other things away from the outside. If two blocks are too close together, add margin. If the text is jammed against the edge of its box, add padding.
Typography — styling your text
Use only one H1 on each page (usually your headline). Use H2 for sections and H3 for subsections. This helps Google understand your page.
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.
Most beautiful pages only ever use Spacing, Typography, Colors and Content Layout. Start there and add the rest as you get comfortable.
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.
Open the Navigator tab in the left panel for an outline list of everything on the page. Click a row to select it, use the eye icon to hide it, or drag rows to reorder. It's the easiest way to grab a box that's hard to click on the page.