Toolset features a handy front-end editor for quick and convenient editing of existing layouts and their content. It can be used from any front-end page.

You can edit most of the elements from the front-end editor, but there are some that will require editing from the WordPress back-end. For example, you can edit the basic options of the Widget Area cell from the front-end but you can only insert and remove specific widgets from it by going to the Appearance -> Widgets page in the back-end.

The following table features the basic editing steps when editing a page on the front-end.

1. Open the front-end editor by clicking the “Front-end Layouts Editor” button in the top admin bar.2. Elements on the page are highlighted as you hover over them.3. Use the “pen” tool to edit an element. The cell editing dialog is shown.4. Use the “wrench” tool to see the position of the current layout in the hierarchy. Click any item in the list to edit it.

Easily edit any element on a page

When you edit a page on the front-end, you are actually editing layouts on several levels, as displayed in the following image.

Different levels of layouts that render a single page.The “wrench” tool lists all the items related to the one you highlighted.

As you can see, the “wrench” tool helps you to see the full grid structure, decide which element you want to style, and quickly reach its cell editor.

Note that the above screenshots are from a site with a fully-integrated theme. Normal themes only operate on the content area of the page, so there would be no parent layout as shown in the screenshot, with that part of the page generated by the theme itself.

Editing layouts on the backend

While editing post or a page on the front-end, you can easily edit any of the layouts used to render the page.

To do this, click the Edit layout on back-end button. If only one layout is used to render the page, you will be taken directly to that layout’s editing page. If more than one layout is used to render the page, a drop-down list of these layouts will appear. Click the one you wish to edit and you will be taken to that layout’s editing page.

Drop-down menu with links to the back-end editor of any of the layouts used to render the page
Drop-down menu with links to the back-end editor of any of the layouts used to render the page

User permissions for front-end editing

While editing of layouts is mostly reserved for users with administrator privileges, front-end editing can also be performed by the users with editor permissions.

Editors can only edit part of the pages that are coming from the content layout. The rest of the design is only editable by administrators.

Please note that if your page already uses a template layout, users with editor permissions need to edit the main content (body) from the WordPress administration area, as they will not be able to do it from the front-end.