# Design editor guide: design your site step by step

> Every screen of the design editor, from changing the logo and header color to home page sections, the story page layout and the footer.

*Guides · Updated: 2026-10-15 · 15 min read*

This guide edits a sample news site in the design editor from start to finish. Each step tells you what to click and where the setting is. Detailed articles are linked at the end of each section.

## Editor map

| Area | Contents |
| --- | --- |
| Top bar | × · General Settings · page picker (Home Page ▾) · light/dark preview · desktop/tablet/mobile · View Site · Undo · Save Draft · Publish |
| Left panel (Page Structure) | Header layers · Template — Home Page sections · Footer layers |
| Middle | Live preview; click an item to select it |
| Right panel | Settings of the selected item |

## 1. Open the editor

**Websites** at the bottom left → **Manage** on the site card → **Design** → **Edit Design**. → [Getting started with the design editor](https://ulakom.com/md/en/help/design/design-editor.md)

## 2. Change your logo

1. In the left panel, click the first row under **Header → Main Bar** (your site’s name), or click the logo in the preview.
2. **Site Logo & Title** opens on the right. Choose **Display mode: Image only**.
3. Click **Upload** next to **Logo (light mode)** to upload your logo, or pick it from **Library**. Add your white logo under **Logo (dark mode)** for the dark theme.
4. If needed, set the size with **Width / Height** and **Max width / Max height**, and keep the ratio with **Image fit: contain**.
5. Enter your site’s name in **Image alt text**.

The footer logo is separate: **Footer → Main Body → Logo & About**. → [Changing the logo](https://ulakom.com/md/en/help/design/branding.md)

## 3. Set the header color and layers

- Click a layer’s name (e.g. **Main Bar**); under **Bar color & design**, choose the background color for **Light mode** and **Dark mode** or type a color code.
- Switch off a layer you don’t want with **Enable layer** (e.g. the Top Bar if you don’t want the rates ticker).
- To keep the menu fixed at the top of the screen, turn on **Fixed / Sticky bar** in the Nav Bar.
- Use **Region width split** to set the widths of the left/center/right regions with ready layouts (e.g. 70/30) or sliders.

→ [Editing the header](https://ulakom.com/md/en/help/design/header-editor.md)

## 4. Edit the search, sign-in and theme buttons

- **Search box:** Appearance (Filled, Outlined, Transparent, Icon only…), size, placeholder text and colors.
- **Dark / Light button:** Lets visitors switch the theme.
- **Sign In:** Button text, Icon + Text / Icon only layout, button design (Filled, Gradient, Neon…) and colors.

## 5. Menu and breaking news ticker

- In the **Navigation & Category** block, choose the menu’s **Hover effect** (underline, pill, square brackets…) and toggle **UPPERCASE**.
- The menu’s categories themselves are edited on **Manage → Menu**. → [Categories and menu](https://ulakom.com/md/en/help/publishing/categories-menu.md)
- In the **BREAKING NEWS** block, set the badge text, flow style (Bottom to top, Scrolling band, Fade) and story change interval.

## 6. Edit the home page sections

1. Click **+ Add Section Here** in the preview and pick a headline, category showcase, market ticker, video or authors section from the **Add Section** panel.
2. Select the section and set its title, title style, categories, number of stories and colors on the right.
3. Drag rows in the left list or use the **↑ / ↓** arrows to reorder; click the bin to delete.

→ [Home page sections](https://ulakom.com/md/en/help/design/home-sections.md)

## 7. Edit the story, category and author pages

- Choose **Story Detail** in the top bar’s page picker. In **Page layout and settings** choose With sidebar / Single column / Magazine, the sidebar position and its width.
- Click blocks such as Story title, Author & info bar, Feature image and Story text to configure them; reorder with the arrows or move them with **→ Page Top / → Sidebar / → Page Bottom**.
- On the **Category Page**, choose the story list layout (Card grid, Editorial list, Mosaic grid…) and the showcase at the top.
- Edit the **Author Page**, **Contact**, **Video Gallery** and **Search** templates the same way.

→ [Page templates](https://ulakom.com/md/en/help/design/page-templates.md)

## 8. Edit the footer

- **Logo & About:** Footer logo and intro text.
- **Corporate** and **Categories:** Choose the menu to show (custom links or the Main Menu).
- **Social media icons:** Display style and the accounts to show (addresses come from **Manage → General**).
- **Copyright:** Dynamic year and copyright text.

→ [Editing the footer](https://ulakom.com/md/en/help/design/footer-editor.md)

## 9. Choose the site-wide colors and font

**General Settings** in the top bar → **Colors, Typography, Appearance**. These settings affect all pages; reset them with **Restore default settings**.

## 10. Check and publish

1. Switch to **mobile** and **tablet** in the top bar to check; try the **dark theme** with the sun/moon icon too.
2. Save your progress with **Save Draft**.
3. When you’re ready, click **Publish** and open your live site with **View Site**.

> **Tip:** To move a design you like to another site, use **Manage → Import/Export → Design and settings**. Don’t want to deal with all this? The [setup service](https://ulakom.com/md/en/help/sites/setup-service.md) designs your site for you.

---

Source page: https://ulakom.com/en/learn/design-guide