Design editor guide: design your site step by step

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

1. Open the editor

Websites at the bottom left → Manage on the site card → Design → Edit Design. → Getting started with the design editor

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

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

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
• 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

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

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

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.