CubeSites Help
The editor

The editor

Change a section look

Use the Design tab for tone, spacing and styles, without touching the rest of the website.

  • 2 minute read
  • 2 interactive walkthroughs
  • For everyone editing a page

Where the design settings live#

With a section selected, the inspector has two tabs. Content changes what the section says; Design changes how it looks. The Simple and All options switch decides how many of the design controls are shown at once.

The same design work is also in the Design panel of the Add rail, where it applies to the whole website, theme, fonts, corners and spacing. If a change belongs to one section, do it here; if it belongs to every page, do it there.

Website editor
Back to the websiteYour CompanyDraftPreviewPublish
AddNavigatorDesign
Your CompanyServicesAboutContact
Hero
Your CompanyHeating and plumbing you can rely onGet a quote
Boilers
Repairs
Call-outs
ContentDesignSimpleAll options
HeadingHeating and plumbing you can rely on
ButtonGet a quoteWhere the button leads.
Duplicate

Step 1 of 4

Content and Design

The inspector has two tabs: what a section says, and how it looks. Design is the right-hand one.

Reduced motion is on, so the walkthrough waits for you. Use the arrows or pick a step.

  1. 1Select a section and open the Design tab.
  2. 2Change one thing at a time and watch the canvas.
  3. 3Switch to All options when Simple hides something you need.

Tone, styles and spacing#

Tone picks the colours for the section from the website palette: main colour, accent or a quiet surface. Styles offer whole layouts for the same content, for example a card with an image or a plain list, and spacing decides how much air sits above and below.

Because every change is made from the same palette, a section you change still matches the rest of the site. The Theme panel is where the palette itself lives, with a contrast read-out that tells you when text is getting hard to read.

Website editor
Your CompanyServicesAboutContact
Your CompanyHeating and plumbing you can rely onGet a quote
Boilers
Repairs
Call-outs
ContentDesign

Tone

Spacing

CompactComfortableSpacious

Styles

Card with imagePlain with linesSoft panel
All options

Step 1 of 3

Pick a tone

Main colour, accent or a quiet surface. One step is usually all a section needs.

Reduced motion is on, so the walkthrough waits for you. Use the arrows or pick a step.

Good to know: A section that looks wrong often needs one tone step and one spacing step rather than a new layout.

Common questions

Can I style one card in a row?

Yes. Alt+Click the card to select the part, then style this part from the right-click menu.

Why can I not change a font for one section?

Fonts belong to the website theme on purpose. One page with its own fonts is the usual way a site starts to look untidy.

Something here out of date, or a step that did not match what you see? Tell us and we will correct the guide. Never send a password or an API token.