An Introduction to In-Browser Editing in Adobe Muse
If you host your website with Adobe (via Adobe Business Catalyst), a new feature in Adobe Muse CC called In-Browser Editing allows you (and others you invite) to make simple text and image edits to the live site, using nothing more than a browser and login information. You can then incorporate those changes back into the original Muse site file, if you want. This can be a great way for your web clients to make those simple text and image changes, like editing a headline, without you having to fire up Adobe Muse.
In this article, we’ll explore how to set up a site to use In-Browser Editing, invite a user, explore how site changes can be made, and then see how to incorporate those changes back into your .muse site file.
Setting up In-Browser Editing
The first step is to enable In-Browser editing for a site, and then publish the site using Adobe Business Catalyst as the host. Then, you can invite users to edit the site.
1. With a site file open in Adobe Muse CC, choose File > Site Properties. In the Site Properties dialog box, select the Content options and ensure that Enable In-Browser Editing is selected. Click OK.
Now you need to publish it as a temporary or paid site to begin editing in the browser.
2. Choose File > Publish (if the site is not already published). In the Publish dialog box, enter a name for the temporary site. Click OK to publish the site.
Once the site is published, the Publish dialog box in Muse will show a few links, one of them being a link to “Add In-Browser Editing Users.” At this point you could either click that link to continue the process or simply click OK and access the link in the File menu later.
With the site published, you can now invite users to make simple edits using their browser.
1. With the published .muse site file still open in Muse, choose File > Add In-Browser Editing User.
Your default browser should open and the Business Catalyst Admin area should open showing the Admin Users area.
2. Click the Invite Admin User button.
3. Fill out the Invite Admin User form that appears for each user. Choose User from the User Roles menu. Click Invite to automatically send the invitee an email with instructions on how to join and edit the site.
A User role allows users to edit the site content, but they cannot edit other options in the admin area. If you were to choose Admin from the User Roles menu, they would be able to edit other options.
Editing the site with In-Browser Editing
The user you invite to edit the site will receive an email that contains a link.
They can follow the link and sign up to access the site, creating a unique login.
Now let's see how an invited user can edit the site after they create a login.
- After the user is logged in, they can click the Edit link along the top of the page to begin editing.
Note: A Device menu will appear if the site has more than one layout (Desktop, Tablet, Phone). You can switch between layouts to make edits to each, independently.
Moving the pointer around the home page content will show blue overlays over content that can be edited. Options also appear as buttons below each overlay.
Here’s how we can edit the content:
- With the pointer over text, you can either click the text or click the “Edit” button to edit that text in the Edit Content dialog box. When finished, you can either accept the changes or cancel to reject them.
- Clicking the “Edit” button when the pointer is over an image allows you to swap the selected image with another and/or change the tooltip text that appears.
Note: If the image or text is on a master page, the dialog box that opens when you click to edit would be called the “Edit Shared Image” or “Edit Shared Content” and the edited content will update on each page that the master is applied to.
- If a web link is applied to the content (text or image), a Click button also appears beneath the blue overlay. If clicked, the link will be followed to its destination.
Clicking the Publish button accepts and applies the changes to the live site.
Syncing the .Muse file to match the live site
The changes made in the browser can then be incorporated back into the .muse file. Now, let's see how to update the .muse file to mirror the changes made to the live site.
1. Back in Adobe Muse, with the site open, choose File > Sync With Adobe Business Catalyst Site.
The .muse site content is checked to see if it matches the live site. If there were changes made and published, the Review And Merge Changes dialog box allows you to review each change. The changes are highlighted in the dialog box—new content is highlighted in green, and items that have been deleted are marked in red. You can also select Preview On Page to see the changes in Design mode.
For each change, you can choose either Don’t Merge or Merge into Muse to decline or accept the specific change or all changes.
Note: If you don't merge the changes, you will overwrite the changes applied to the live site the next time you publish the .muse file.
2. When you're finished reviewing the changes, you can click Done.
Once you are finished, you can publish the site again. Any changed items marked as Don't Merge are overwritten by the current design of the .muse file when you publish the site again.
Well there you have it. I do find it helpful to set editing expectations for users (what can and cannot be edited) and put someone in charge of the .muse file to ensure that changes are brought back into the site. Otherwise, working with In-Browser Editing can be a pretty straightforward process, and a great way to allow your clients and others without access to Adobe Muse to make simple site changes.
Liked This? Read These!
The coolest features of Adobe Muse are right at your fingertips with the help of this handy keyboard shortcut guide. Read More
Six quick tips to get the most out of Adobe Muse, and build awesome websites without worrying about code. Read More
Press Release Read More
Last week I wrote about two upcoming products that can be downloaded from Adobe Labs — Muse and Edge. While Edge is still very much in development, Muse is now available for purchase. Muse is a... Read More