Using The Front-End Editor

Artisan Themes come packed with a Front-End Editor to let you build your modular pages while looking at them at the same time, without switching tabs.

With the Front-End Editor you can…

  • Edit modules already in use on a modular page
  • Create and add new modules to a modular page
  • Add existing modules to a modular page
  • Arrange or remove modules from a modular page

How do I access the Front-End Editor?

There are three available ways of accessing the Front-End Editor while using the theme, depending of where are you on the WordPress Dashboard:

1. On the Edit Page Screen: Once you select the Modular Page template for a page and publish it, you will see the Front-End Editor button in blue color. Click on it and you will be in Front-End Editor mode.

2. On the Pages List Screen: While hovering with the mouse over any modular page (pages that have selected the Modular Page template for them) you will see a new added link for the editor.

3. On the Front-End Toolbar: If you use the WordPress Toolbar while browsing the site you will see a Front-End Editor link on it too. Clicking on it will activate the editing mode and will add a green button next to it to indicate you are editing that page.

Once you are on the Front-End Editor mode, navigating your site through the navigation menu will keep you on the editor mode. You have to manually exit it to stop editing.

How to use the Front-End Editor?

To edit a specific module: Hovering with the mouse over a specific module will enable a colored overlay to indicate there’s a module to edit. You will see a “Edit This Module” button on the top-left corner on the module. Clicking on it will bring up the module controls lightbox.

The Front-End Editor Toolbox

While editing a page you will see a wrench button on the lower-right corner of the screen. Moving the mouse over it will expand a set of tools.

Add New Module: Opens the Module Creation lightbox and lets you create and add new modules to a Modular Page.

Arrange Modules: Opens the arranging lightbox, where you can re-order any modules on the page, remove any modules you don’t want there anymore, and add existing modules to the page that you might have created before (like modules you created for another page, for example).

Exit Front-End Editor: Exits the editor mode and reloads the same page you were editing.


Note: To use the Front-End Editor you have to be -of course- logged into your site. WordPress might log you out after a certain amount of time without activity so, if you were using the editor and after a while you don’t see its controls anymore, that’s probably your site that logged you out.