Front-End Editing - Editing content easily while viewing it from the public perspective

Easily edit your site page's content while browsing your site live via the 'front-end'.  This will save you time and increase your efficiency and productivity by not having to edit the page content within your admin area (the 'back-end') and flipping windows or tabs from the admin area to live view [unless you want to of course].

What is Front End Editing?

As a SiteWrench Editor, you are accustomed to logging into SiteWrench and managing your content on the “back end,” or administrative side, of your site. With Front End Editing, you can stay on the “front end,” or public facing side of your site, and still update your content. Let’s take a look and see how this works.

Turn on Front End Editing for your Site

1. Go to your Site Settings tab on SiteWrench
2. Click on General at the top
3. Select the checkbox where it says “Allow Front End Editing”
4. Save

Activate Front End Editing Via SiteWrench Administrator

1. Each administrator will need to log into their own profile.
2. Select the avatar at the top right of the site
3. Select “Front End Editing”
4. The toggle will appear blue when front end editing is enabled. 

Go to the Public Side of your Site and Start Editing!

Make sure you are logged into SiteWrench as an editor. Otherwise, you will not see your editing avatar. View a public page on your site to get started. You will see your avatar on the bottom right side of the page with a little pencil beside it. You are able to move this editing bar to the right or left on your browser if you find it is in your way. Simply click and drag it left or right to move it.

When the pencil is visible, that means you are not in edit mode. Click the pencil to enable front end editing. The editing bar will look like this when you are in edit mode.

When you move your cursor over the various parts of the page, the cursor will highlight the editable areas. Here are a few examples:

You can click on those areas to edit, and a pop up box within your browser will show up like the following:

This is essentially showing you the admin view that you are used to without taking you away from the public page. From here, you can fully edit this content, then select “Save” at the bottom. When you are done saving, or if you decide not to edit at all, go ahead and click the little X symbol in the top right hand corner. This will close the window, reload the page and show the changed content on the page. 

Shortcut to Edit the Entire Page

If you find you would rather edit the whole page or go to this page’s admin side on SiteWrench, select the “Manage Page” link in your editing bar. It will open up this page on SiteWrench in a new browser tab, so that you can edit right away without having to hunt for the page within SiteWrench. This “Manage Page” link is only visible when the editing bar is in the edit mode and the pencil icon is visible on the left.

See the Saved Content

To see the content you just saved, you will want to select the "eye" symbol to preview without being in editing mode. Otherwise, whenever you hover over your content, you will get that big gray bar that says “Edit.”

When you select the eye symbol to preview, your editing bar will turn back into that familiar view with your avatar and the pencil icon. To edit again later, select the pencil icon and repeat all the steps.

Shortcut Keystrokes

Type these letters on your keyboard to work with various front end functionality. You do not need to use a command button or control button or F, just start typing!

• admin - If you are not logged in, this will begin the login process to access front end editing.
• f - Toggles between "edit" and "preview" modes.
• h - Hides all parts of the front end editing.

Take a look at our little video to see how it’s done in action!

With front end editing, your team can edit content faster without having to hunt to find content on SiteWrench. Get started today for quick and easy editing!

Back to top