Getting started with the design editor
Updated Oct 15, 20265 min read
Available to: Site admins
Plans: All plans
Your site’s whole look (logo, header, menu, home page sections, story page, footer) is edited in one visual editor. You don’t need to code; every change shows instantly in the preview.
Opening the design editor
- Go to Websites at the bottom left and click Manage on the site card.
- Open Design in the site menu. You’ll see your site’s preview and number of sections.
- Click Edit Design (or Open Design in Visual Editor over the preview). The editor opens full screen.
The top bar
| Item | What it does |
|---|---|
| × and site name | Closes the editor. “… — Design Editor” is shown next to it. |
| General Settings | Colors, typography (font) and appearance for all pages. See general settings. |
| Unsaved changes | A yellow label shown when you have changes you haven’t saved. |
| Page picker (e.g. Home Page ▾) | Switches the template you’re editing: Home Page, Story Detail, Column Article, Category Page, Author Page, Contact, Video Gallery and more. See page templates. |
| Sun / moon icon | Previews the light or dark theme. |
| Desktop / tablet / mobile | The preview’s screen width. |
| View Site | Opens your live site in a new tab. |
| Undo | Undoes the last change. |
| Save Draft | Saves changes without applying them to your site. |
| Publish | Publishes the changes on your live site. |
Left panel: Page Structure
The PAGE STRUCTURE panel on the left is your page’s skeleton. It has three main parts:
- Header — Modular: The top area shared by all pages. It has four layers (Top Bar, Main Bar, Nav Bar, Bottom Bar) plus the Mobile Menu Drawer. The logo, search, menu and breaking news ticker are here. See editing the header.
- Template — Home Page (or the page you chose): That page’s numbered sections. See home page sections.
- Footer — 4 layers: The bottom area shared by all pages: footer logo, corporate links, categories, social media and copyright. See editing the footer.
Clicking a row selects that item and opens its settings on the right. The ↑ / ↓ arrows change the order, the bin deletes; the Left / Center / Right tag shows the item’s position within its layer.
Middle: live preview
- Clicking an item in the preview also selects it. The selected item gets a red outline and a small toolbar: the item’s name, Left / Center / Right alignment, arrow buttons and delete.
- Header layers show their name and width ratios (e.g. “Main Bar (17.2% / 13.8%)”) with a + Add Block button at the top right.
- There are + Add Section Here buttons between sections.
Right panel: settings
All settings of the selected item open in the right panel. When nothing is selected it says “Select a section from the left panel”. The download / upload icons at the top export or import that item’s settings as a file. At the bottom is a remove button (e.g. Delete this header block, Remove this section).
Saving and publishing
- When you make a change, an Unsaved changes label appears at the top.
- Save Draft keeps the changes without applying them to your site; you can continue any time.
- When you’re ready, click Publish. The new design goes live.
Tip
Design and content are separate: change the design as often as you like and your stories stay put. Before publishing, check the preview in mobile view and in the dark theme too.
Tip
For a hands-on, step-by-step walkthrough see the design editor guide.
Related articles
Was this article helpful?
Let us know so we can improve our content.
Still need help?
Ulakom support is here for you every weekday