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.
Creating an Editable Site
Before you begin, it is important that you make a settings within Adobe Muse to enable In-browser editing on your site.
1. Be sure that your site has In-Browser Editing enabled in the Muse site properties.
Choose File > Site Properties. Click the Content tab and verify that the In-Browser Editing option is enabled.
2. Be sure that your content is editable using In-Browser Editing.
In-Browser Editing allows you to edit text content and replace all images, except as noted below.
The following items are not editable:
- Master page content
- Vertically oriented text
- Images set as background fills in rectangles, image frames, and widgets
- Slideshow counters
- Form submit buttons
- Dynamically generated menu labels (in Menu widgets not set to Manual)
- Rasterized page items: This includes images with rounded corners, beveled edges, inner glow, or rotation applied, text frames using system fonts, and rotated text frames with effects applied.
Although text content is editable, the formatting of that text cannot be changed. Images can only be replaced, not added or removed.
3. Upload to FTP Host
Use the built-in Upload to FTP Host feature in Muse by choosing File > Upload to FTP Host. For instructions, see Uploading to FTP Host.
Note: Be sure to save your Muse file after uploading to FTP to ensure that your site can later be synced with any changes made using In-Browser Editing.
Updating a website using In-browser Editing
The following section lists the steps that anyone can follow to update a Muse site using In-Browser Editing, once they've been granted access.
To make changes to editable items using In-Browser Editing follow these steps:
- Visit https://inbrowserediting.adobe.com and enter the domain name (i.e. URL) of the site you wish to make edits to.
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.
- 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.
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.
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.
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.
You can insert links in to some common web elements such as text, shape, and images using In-Browser Editing.
On the Insert Link dialog, choose to add any of the following types of targets to the link:
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.
- 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.
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.
- Tooltip: Provide a meaningful description of the destination page.
- Open in a new window: Enable opening the link in a window, if needed.
Follow steps 1 to 4 to edit external hyperlinks applied to text, text within nested text frames, labels within slideshow widgets, custom links, images, and more.
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.
You can upload files via In-Browser Editing. It is a common web design practice to link to downloadable files, such as PDFs, Installers, Videos, Audio files, and more.
Using In-Browser Editing, you can set a file as target for a Hyperlink that can be in the form of text, shape, or image on your Muse site. Take note that the maximum file size allowed is 50MB.
When you upload a file, it is necessary that the file name is unique. If you upload a file with name same as one that already exists on the site, you will be prompted to rename the file.
Syncing In-Browser Edits in Adobe Muse
After changes are made to the live site using In-Browser editing, your local .muse file no longer contains the same content as the live site.
Follow these steps to sync your In-Browser Editing changes with your Muse File.
- Launch Muse and open the site’s .muse file.
- 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.