Using The Front-End Editor
The front-end editor is where you build and change your modular pages while looking at them. You click a module on the page, its options open beside it, and you see your changes as you make them.
It’s the main way of working with an Artisan theme, so this article walks through the whole of it: opening the editor, what’s in the toolbar, editing and adding modules, moving things around, and how your work reaches your visitors.
Opening the editor on a new modular page
Go to Pages » New Modular Page, enter a title for the page and then click Edit with Front-End Editor right below the page title.
Opening the editor on an existing modular page
Visit any page’s edit screen in the backend, and click the Front-End Editor button that you’ll see below the page title.
Or, from Pages, hover over any modular page in the list and use the Front-End Editor link that appears alongside Edit, Quick Edit, Trash and View.
Or, if you’re logged in and use the admin toolbar visible on the site, visit any page built with the Modular template and click Front-End Editor in the admin bar.
You’ll get your page as your visitors see it, with a toolbar across the top and every module now clickable. That’s the idea behind editing this way: you work on the real page, looking at the real design, instead of filling in fields and imagining the result.
The toolbar
The toolbar holds everything that affects the page as a whole, in three groups: the tools for building on the left, the screen sizes in the centre, and your page’s status and publishing on the right.
- Add puts a new module on the page.
- Modules Navigator opens the list view of how the page is built and lets you bring in existing modules.
- Artisan Pages opens our catalogue of ready-made page designs.
- Module Presets opens our catalogue of ready-made modules.
- Page Settings holds the settings belonging to the page.
- Preview changes shows your draft as an ordinary page.
- The responsive preview buttons switch between screen sizes.
- Exit leaves the editor.
Editing a module
Hover over any module and its controls appear: a handle for dragging, then Edit, Duplicate and Remove. A module sitting inside another gets its own set. Between modules you’ll find a + for adding something at exactly that point.
Click Edit and the module’s panel opens on the left, showing the module’s name and ID, with tabs for its Options, its Style, an Advanced tab, and a history tab.
Change something and you’ll see it on the page as you go.
The Advanced tab is worth knowing about early. It holds spacing, backgrounds, shaped edges between sections, which screen sizes the module appears on, and custom CSS. See Advanced Styles for what’s in there.
Adding modules
There are four routes, and they differ in how much is done for you:
- Create New Module gives you an empty module of the type you choose, ready to fill in.
- Add Existing Module places a module you’ve already built elsewhere. It stays one module shared between pages, so editing it later changes it everywhere it appears.
- Module Presets imports a ready-made module design, images and all.
- Artisan Pages brings in a whole page layout at once.
Moving modules around
Drag a module and drop it where you want it. As you drag you’ll see where it’s going to land, and you can move modules into and out of containers like Columns and Tabs.
On a long page, or for anything nested a few levels down, the Modules Navigator is the easier tool. It lists the page as a structure, shows which column each nested module sits in, and lets you reorder from the list or duplicate several modules at once.
Undo and redo
Press Cmd-Z on a Mac or Ctrl-Z on Windows to undo, and Cmd-Shift-Z or Ctrl-Shift-Z to redo.
Keep pressing and you’ll step back through everything you did this session, in the order you did it, including changes to different modules along the way.
Checking other screen sizes
Click Desktop, Tablet or Phone to resize the preview without leaving the editor, and carry on editing in any of them.
In Phone preview you’ll see your mobile menu rather than your desktop one, so you can check your mobile navigation while you’re there.
Going back to an earlier version
Every module keeps its own history. Open a module, choose the History tab, and you’ll find its earlier versions with the date and who saved each one.
Preview this version shows you what it looked like before you commit to anything, and Restore this version brings it back. Restoring is recorded too, so you can change your mind again.
By default, you’ll find the last 15 versions of each module, kept for 90 days, but you can change that in Appearance » Theme Options » General, where you can also turn history off.
Saving and publishing
All the changes you make in the editor are kept as drafts, and you decide when they reach your visitors, either one module at a time or the whole page at once.
This is worth reading properly if you’re new to it: see Saving your work in the front-end editor.