Styling overview

Styling is changing how something looks without changing what it is — the color of a button, the size of a heading, the space around a section. In Webpress you do all of it visually, with controls that update the page live as you click.

This page is the map for the whole Styling & Design section. Each control gets its own detailed guide; here's how the pieces fit together.

Where styling happens

1. Select an element on the canvas (or in Layers).
2. Open the Customize tab in the right panel.
3. Change the controls — the canvas updates instantly.

Simple mode vs Pro mode

The Customize tab has two modes, and you can switch with the toggle at the top.

Simple mode covers most needs. Reach for Pro mode when you want precise control or a property Simple mode doesn't show. Your choice is remembered, so if you like Pro mode you'll stay in it.

What your next edit changes — the scope banner

At the top of the Customize tab is a small banner that tells you what your next change will affect. This is important, so it's worth a moment:

• "Editing this element" — your change affects only the element you selected. This is the default and the safe choice.
• "Editing all .classname" — your change affects every element that shares that class across your site. Great for changing all buttons at once; surprising if you didn't mean to.

The banner may also show where a style is coming from — for example, a pill noting the style is from the template. The full story is in Understanding classes & states.

Greyed-out (ghosted) values

Sometimes a control shows a value in grey. That means the value isn't set on this element directly — it's inherited from a parent or comes from the template. It's showing you the effective value so you're not editing blind. The moment you change it, the value becomes your own override (and turns solid).

In short: black/solid value = set here; grey value = coming from somewhere else, shown for reference.

Styling is per-device

Any style you set applies to the screen size you're currently viewing. Editing on Desktop sets the base for every size; editing on Tablet or Mobile overrides just that size and smaller. See Responsive design.

Reset a style

Most controls have a small reset affordance that clears a property back to its default (or back to the template/inherited value). Use it when an experiment didn't work out.

The rest of this section