Frontend Live Editor

Overview

The Frontend Live Editor (Admin → System → Frontend) lets you re-word, re-colour, and re-arrange your public marketing website — the Home, Features, and Pricing pages — without touching any code. You edit a live preview of the real site, and your visitors see nothing until you press Publish.

It is built as a draft → publish system. Every change you make is saved as a draft that only you (a signed-in admin previewing the page) can see. The public always sees the last published version, and any value you have never edited falls back to the copy the theme shipped with — so a brand-new install looks exactly as designed.

Who can use it: the editor and all of its save actions are restricted to platform admin accounts. The preview's editing mode also re-checks that you are an admin, so the draft content can never leak to a visitor who guesses the URL.

The editor at a glance

The screen is split into a live preview on the left and a control panel on the right, with a toolbar across the top.

Area	What it does
Page tabs (top-left)	Switch the preview between Home, Features, and Pricing.
Device switcher	Preview the page at Desktop, Tablet, or Mobile width.
Saved status	A live "Saving… / All changes saved" indicator next to your edits.
Drafts badge	Shows how many unpublished changes are waiting. Hidden when there are none.
Full screen	Expand-arrows icon — hides the admin chrome so the editor fills the screen.
View live	Opens the real public page in a new tab (what visitors currently see).
Discard drafts	Throws away every unpublished change and returns to what is currently live.
Publish	Makes all your drafts public in one click.
Preview (left)	The actual website, where you click to edit text.
Control panel (right)	Inspector, Sections, Theme colours, and Reset tools.

Editing text

Any editable piece of text shows a dashed outline when you hover over it in the preview, with a small tag naming the field.

Click the text to start editing it in place.
Type your change. Press Enter to save, or Esc to cancel and restore the original.
Clicking away also saves. A brief green flash confirms the save.

Headlines, paragraphs, button labels, FAQ questions and answers, testimonials, and footer text are all editable this way. Rich-text areas (those that allow bold/italic formatting) keep their formatting; for those, use Shift+Enter for a line break.

Tip: If you clear a field completely and save, WaDesk keeps the original shipped wording rather than showing a blank — use Reset this field in the Inspector if you truly want to revert it.

Bold & italic

On rich-text areas (headlines and body copy that support styling), select the words you want to emphasise and a small floating toolbar appears above the selection with B (bold), I (italic), and clear (remove formatting). It works just like a word processor — no HTML knowledge needed.

Device preview & full screen

The top bar has a Desktop / Tablet / Mobile switcher. Click a device to instantly resize the preview to that screen width so you can check how your headlines wrap and how sections stack on phones before publishing. Your edits apply to every size — the switcher only changes what you are previewing.

The full-screen button (the expand-arrows icon, next to View live) hides the admin sidebar and header so the editor fills the whole screen — the most room for editing. Click it again, or press Esc, to return to the normal admin view.

Editing link targets

Navigation and footer links can point anywhere you like. When you click a link in the preview, the Inspector (top of the right panel) shows a Link target box pre-filled with the link's current address.

Edit the link's text inline, just like any other text.
Change where it points by typing a new URL in the Link target box and pressing Set.

This lets you, for example, point the nav "Product" link at a custom landing page, or send a footer link to your own help desk.

Brand presets (one click)

At the top of the Theme panel is a row of brand presets — ready-made palettes (Emerald, Ocean, Forest, Royal, Sunset, Slate). Click one and the whole site re-skins instantly to that colour family. It is the fastest way to match the site to your brand; you can still fine-tune individual colours afterwards.

Theme colours

The Theme colours panel exposes the whole palette the public site is built from, grouped into WhatsApp, Ink (text), Paper (backgrounds), and Accent shades. Click any colour swatch, pick a new colour, and the preview re-themes instantly.

Because the entire site shares these tokens, changing one colour updates every place it is used — buttons, highlights, badges, gradients — consistently. Use Reset all colours at the bottom of the panel to return the palette to the shipped theme.

Note: colour values are validated as hex codes before they are saved, so a typo can never break the site's styling.

Reordering, showing & hiding sections

The Sections panel lists every block on the current page. You can rearrange and toggle them:

Reorder — grab a section by its drag handle (the dotted grip on the left) and drop it above or below another section. The preview updates and the new order is saved as a draft. Drag is the fastest way to, say, move the FAQ above the pricing cards.
Show / hide — each removable block has a Shown / Hidden toggle. Hiding a section removes it from the public page without deleting anything, so you can bring it back any time.
Jump to — click a section's name to scroll the preview to it and flash it.

The page's hero (the top banner) is marked fixed — it always stays at the top and can't be hidden, since every page needs a top. Everything below it can be reordered or turned off freely.

Each page is independent. Order, visibility, and text are stored per page, so rearranging or rewriting a shared block (like the FAQ) on the Home page does not change it on Features or Pricing. The one intentional exception is the pricing cards, which stay in sync between Home and Pricing because they describe the same plans.

Publishing, discarding & resetting

Nothing you do in the editor is visible to the public until you publish. Three controls manage that lifecycle:

Control	Where	What it does
Publish	Toolbar	Promotes every draft (text, colours, links, section visibility) to live in one step.
Discard drafts	Toolbar	Throws away unpublished edits and snaps back to whatever is currently published. Anything already live is untouched.
Reset this field	Inspector	Returns the selected text/link to the theme's original shipped value.
Reset all colours	Theme panel	Restores the full colour palette to the shipped theme.
Reset this page	Reset panel	Clears every customisation on the current page back to defaults.
Reset entire site	Reset panel	Clears every customisation across all pages and colours.

Difference between Discard and Reset: Discard drafts keeps your published site and only drops unsaved edits. Reset goes further — it removes the customisation entirely and brings back the shipped theme default, even if you had previously published a change. Reset asks for confirmation first.

A typical workflow

Open the editor (Admin → System → Frontend) and pick the page you want to change with the top tabs.
Click headlines, paragraphs, and buttons in the preview to rewrite them; press Enter to save each.
Adjust brand colours in the Theme panel and watch the preview update.
Hide any sections you do not need from the Sections panel.
Use View live in a separate tab to compare against what is currently public.
When you are happy, press Publish. If you changed your mind, press Discard drafts instead.

Every change is recorded in the platform Audit Log (saving a draft, hiding a section, publishing, and resetting all leave an entry), so you always have a trail of who changed the marketing site and when.

System Settings — the site name, logo, and favicon used across the app and marketing pages.
Security & Audit Log — where editor actions are recorded.
Customization Guide — deeper, code-level theming for developers.