On this page
The Design editor controls everything about your site's look that is not tied to a single page: logo, colors, fonts, header, menus, footer, headings and a few extras. You change a setting on the left and watch the whole site update in the preview on the right.
Open the Design editor
- Open your site in the dashboard.
- Choose Design in the sidebar, under Appearance.
- Pick a panel from the list. Each panel opens as its own sheet; Back to Design returns you to the list.
Tip: From the page editor, hover the header, logo, menu or footer in the canvas and click the small button that appears (Header design, Logo & favicon settings, Edit navigation, Footer design). It jumps straight to the matching panel.
The panels
| Panel | What it controls |
|---|---|
| Logo & Favicon | Logo image, browser-tab icon, site name and its styling |
| Colors | The site palette, menu colors and color presets |
| Fonts | Body, heading and menu fonts |
| Global Styling | Content width, heading and body text size and weight, button, card and form corners, shadows |
| Header | Header template and its options |
| Desktop Menu and Mobile Menu | Menu templates and layout (with a top header) |
| Navigation Menu | Menu template and layout (with a side header) |
| Footer | Footer template, about text, copyright line, social icons |
| Page Heading and Section Heading | The template for page banners and section titles, their size, weight, colors and spacing, and breadcrumbs |
| Back to Top | The scroll-to-top button: style, shape, icon, position, size, colors and how it appears |
| Preloader | An optional loading screen shown while a page loads |
Details for the first few panels are in their own articles: logo and favicon, colors, fonts, header, footer and menus and page and section headings. The floating scroll button has its own article too: the back to top button.
The live preview
The preview shows your real site. Colors, fonts, logo and most sliders update the preview instantly. Picking a different header, footer or menu template reloads the preview, because it swaps the markup.
- Use Desktop and Mobile above the preview to check both sizes.
- The preview has no page dropdown - your site itself is the navigation. Click any link (a menu item, the logo, a button, a portfolio project) to preview that page, or use the back, forward and reload buttons and the address bar at the top of the frame.
How changes save
Every change saves automatically a moment after you make it. There is no Save button in the Design editor.
Saving is not the same as publishing to visitors. When a change affects the live site, an Update live site button appears in the top bar; click it when you are ready. See why your changes do not show on the live site yet.
Undo and redo
Each panel has its own undo and redo buttons in its title row, and its own history. Undoing in Colors never touches what you did in Fonts. Hover a button to see what it does, for example Undo color change.
A slider drag, or opening and closing a color picker, counts as one step. The history is kept in your browser, so another device starts fresh. Back to Top and Preloader only show undo buttons while the feature is switched on.
Note: Switching to a different header, footer or menu template resets that template's options to its defaults. If you switch back, use the panel's undo button to get your earlier options back rather than re-entering them.
Global Styling
This panel sets a few site-wide rules that every section follows:
- Full-width content, or a Maximum content width when it is off.
- Heading font size and Heading font weight, Body font size and Body font weight. Sizes are a percentage change from the default, so
0keeps the default. - Button corners, Card corners and Form corners in pixels.
- Shadows on or off.
Individual sections can override some of these from their own settings in the page editor. See section settings.