In-browser Editing of websites using Third-party Hosting Service Providers

Applies to

In-Browser Editing makes it easy to update your site’s content from a web browser. Whether you need to make a change to your website on the go, or you want to allow clients and other site contributors the ability to easily edit their content, In-Browser editing can make the process go smoothly.

It is recommended that you access the in-browser editing site via HTTPS protocol only (and not HTTP). This ensures that you provide credentials, log in, and use in-browser editing to modify your websites via a secured connection.

Login with your hosting credentials.

Once you’re signed in, you’ll see the site’s homepage as well as the In-Browser Editing top and bottom navigation bars. If the site contains alternate layouts for devices, you can toggle between layouts using the device dropdown menu. To see what’s editable, hover over content. Editable content will react on hover and an edit button will appear.

If this content contains a link, the interface will give users the option to either edit the content or click to follow the link.

Make changes to your content.

Editing Text

To edit text simply hover over an area on your site that contains text, and click the edit button. An unformatted text edit window will appear over your site where you can make changes to the copy. After the desired changes have been made, click Update to see what your text changes look like formatted on the page, or click cancel to close the edit window without saving changes.

Editing Images

To edit an image, hover over an image on the page, and click the Edit button. A dialog will appear that allows you to choose a different image from your site, or upload an image from your computer. This dialog also gives you the option to add or edit tooltip text associated with the image. Click Update to see what your image changes look like on the page.

When you replace an image, the new image that you select will be sized to fit the area that the previous image took up. If the new image has a different aspect ratio than the original image, it will not fill the entire area of the previous image and may affect the visual layout of your page. For this reason, it is recommended that you only replace an existing image with another image of the same dimensions or a larger image with the same width and height ratio.

If your site resolution is set to HiDPI, and the replacement image holds enough data to be 2x, then In-Browser editing will save both 1x and 2x versions of the image to display on HiDPI screens. To learn more about creating assets for HiDPI visit Creating HiDPI Websites in Muse.

Editing Images within Text

If an image on the page lives within a body of text, you can still edit it. Hover over the body of text and click edit. When the text edit window appears click on the image to open the image editor. Click update to see what your changes look like on the page.

Editing Hyperlinks

You can edit several kinds of Hyperlinks on a web page, including external, mail-to, links to other pages of the website, anchors on the same page, downloadable files, and more. Hover over a Hyperlink, and click Edit Link to proceed. For more information, see Edit Hyperlinks and Upload Files.

Once the changes to your site are complete, hit publish to commit the changes and view them on your live site. If however you are unhappy with the changes you’ve made, you can always discard changes. This will reset your site’s content to what it was the last time that you published.

Edit Hyperlinks

Inserting links

You can insert links in to some common web elements such as text, shape, and images using In-Browser Editing.

Hover over text or any design element you want to insert a link in to.

Click the Edit button.

On the Insert Link dialog, choose to add any of the following types of targets to the link:

External link: Select External on the left pane, and provide a functional URL in the Link field.

Internal link to another page on the website: Select Pages on the left pane, and select the page you want to link to from the drop-down.

Internal link to an anchor: Select Pages on the left pane, and select the anchor you want to link to from the drop-down. You can link to both an anchor on the same page, as well as, one on a different page in the website.

Phone Number: Select Phone Number from the left pane, and enter the Phone Number.

Email Address: Select Email Address from the left pane, and enter the Email Address.

Files: Select File from the left pane, and browse-to the file you want to upload or select an existing file. For more information, see Upload Files.

Optionally, you can choose to enter a Tooltip for each of the target types, as well as, allow users to open the link in a new window.

Click Insert Link to finish.

Edit an external link

Hover over the hyperlink you want to edit, a pop-up indicating that the link is editable is displayed.

Click the Edit Link button.

On the Edit Link dialog, select External on the left pane.

On the Edit Link dialog, with External selected on the left pane, provide the following details:

Link: Provide a fully functional URL. Ensure that the URL is not broken and that the destination web page is publicly accessible.

Edit an internal link to point to another page on the website

Hover over the hyperlink you want to edit, a pop-up indicating that the link is editable is displayed.

Click the Edit Link button.

On the Edit Link dialog, select Pages on the left pane.

Provide the following details:

Page: Select the page you want to link to from the drop-down.

Tooltip: Provide a meaningful description of the destination page.

Open in a new window: Enable opening the link in a window, if needed.

Click Update to finish.

Edit an internal link to point to an anchor on the page

Hover over the hyperlink you want to edit, a pop-up indicating that the link is editable is displayed.

Click the Edit Link button.

On the Edit Link dialog, select Pages on the left pane.

Provide the following details:

Page: Select the anchor you want to link to from the drop-down. Anchors are indicated by the word "Anchor" after the page name. You could link to an Anchor on the same page or another page on the website.

Tooltip: Provide a meaningful description of the destination.

Open in a new window: Enable opening the link in a window, if needed.

Click Update to finish.

Edit hyperlink to change Phone Number

Hover over the hyperlink you want to edit, a pop-up indicating that the link is editable is displayed.

Click the Edit Link button.

On the Edit Link dialog, select Phone Number on the left pane.

Provide the following details:

Tel: Enter a phone number.

Tooltip: Provide a meaningful description for the tooltip.

Open in a new window: Enable opening the link in a window, if needed.

Click Update to finish.

Edit hyperlink to update Email address

Hover over the hyperlink you want to edit, a pop-up indicating that the link is editable is displayed.

An alert message indicating that the live site has changed will appear. Click review to bring up the review and merge changes window.

The review and merge changes interface highlights and allows you to review each change. New content is highlighted in green, and items that have been deleted are marked in red. To compare the live site’s changes to the local .muse file, enable and disable the Preview on Page checkbox.

Use the drop down menu options (Don’t Merge or Merge into Muse) to decline or accept the specific change or all changes.

Note: If you choose “don’t merge,” you will overwrite the changes applied to the live site the next time you upload the .muse file.

Twitter™ and Facebook posts are not covered under the terms of Creative Commons.