# Getting started with the design editor

> Open the design editor; learn the top bar, the Page Structure panel, the preview and the settings panel. Save a draft and publish.

*Help Center / Design · Updated: 2026-10-15 · 5 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

1. Go to **Websites** at the bottom left and click **Manage** on the site card.
2. Open **Design** in the site menu. You’ll see your site’s preview and number of sections.
3. 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](https://ulakom.com/md/en/help/design/branding.md). |
| 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](https://ulakom.com/md/en/help/design/page-templates.md). |
| 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](https://ulakom.com/md/en/help/design/header-editor.md).
- **Template — Home Page** (or the page you chose): That page’s numbered sections. See [home page sections](https://ulakom.com/md/en/help/design/home-sections.md).
- **Footer — 4 layers:** The bottom area shared by all pages: footer logo, corporate links, categories, social media and copyright. See [editing the footer](https://ulakom.com/md/en/help/design/footer-editor.md).

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

1. When you make a change, an **Unsaved changes** label appears at the top.
2. **Save Draft** keeps the changes without applying them to your site; you can continue any time.
3. 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](https://ulakom.com/md/en/learn/design-guide.md).

## Related articles

- [Changing the logo, site icon and colors](https://ulakom.com/md/en/help/design/branding.md)
- [Editing the header: layers and blocks](https://ulakom.com/md/en/help/design/header-editor.md)
- [Home page sections: adding, ordering and settings](https://ulakom.com/md/en/help/design/home-sections.md)
- [Page templates: story, category, author and other pages](https://ulakom.com/md/en/help/design/page-templates.md)
- [Editing the footer](https://ulakom.com/md/en/help/design/footer-editor.md)

---

Source page: https://ulakom.com/en/help/design/design-editor