If you talk to any website owner, they'll tell you that launching their site was only the first step to creating an online presence. Maintaining a site with fresh content is the key to remaining relevant on the web. This is typically accomplished in one of two ways: Site owners try to change the code themselves (with varying degrees of success), or they pay a web producer to do it. Adobe Muse CC offers a third option: The designer sets up the Muse site so that the site owner can make the changes without touching a single line of code.
In this article, you'll learn about In-Browser Editing, a feature in Adobe Muse that lets you and your clients make changes to pages without writing HTML or installing web design software. You'll see how to set up In-Browser Editing in Adobe Muse and learn how site content can be edited without web design expertise. All your client needs is a browser and an Internet connection.
If you'd like to follow along, download the sample file (ZIP, 2.1 MB) and save the expanded folder to your desktop. And if you haven't already installed Adobe Muse, you can download the free 30-day trial to check it out. Visit the live site to see the sample project online.
The In-Browser Editing feature lets you protect clients from themselves. When you're designing a site to make content editable, graphics that you set as background images can't be changed via In-Browser Editing. Use the Fill menu to set logos and other critical site graphics as background images to ensure that clients can't edit them. Construct pages so that the images you want to be editable are either placed or pasted into the layout.
If you're updating an older .muse file to set up editing functionality, choose File > Site Properties and verify that Enable In-Browser Editing is selected (see Figure 1). This setting is enabled by default in sites built using the current version of Adobe Muse.
Another caveat is that a site must be hosted on Adobe hosting servers to use In-Browser Editing. Any trial or live site that you upload via the Publish dialog box in Adobe Muse is supported, even if you set up a custom domain name for the live site. If you're following along, you can publish the provided sample file project as a free trial site to see how the browser-based editing system works.
This tutorial uses a completed site design with the In-Browser Editing option already enabled in the Site Properties. In this section, you'll see how to publish the trial website and invite a user to edit it. Follow these steps:
The Publish dialog box updates when the upload process is complete.
Note: You can choose File > Add In-Browser Editing User to accomplish this at any time after publishing a site.
The Admin Users interface loads in a new browser window.
Note: If you're following along and want to invite yourself as a new user to see how the invitation process works, type your own valid email address. However, if you published a trial site, you're automatically an admin user — so you can skip this step and still edit the pages using In-Browser Editing.
Submitting the form automatically generates an email message to the person you invited with details about creating his or her account. The recipient clicks a link in the email message to log into the Admin area for the first time and set a password.
The trial site is now configured for In-Browser Editing. Any user with an active admin account can log in with browser and update the site.
If you invited yourself as a user, check your inbox to get the email message with the invitation. Click the link in the message to access the login information. The Admin area prompts you to update your password. Be sure to make a note of this email address and password for future use.
Each trial or live Adobe Muse site has its own unique URL. When you create a trial site, the URL follows this format:
In the example above, replace the words "trial-site" with the site name you entered when you published the trial.
trial-site.businesscatalyst.com/admin (trial site)
custom-domain-name.com/admin (live site)
Bookmark this page to make it easier to access later.
Note: The sample site contains both a desktop and a phone layout. You use the Devices menu to choose the layout you want to edit. For this example, edit the Desktop layout.
You're now logged in and ready to make changes to the live site.
You'll begin by editing the mailing address located near the bottom of the left sidebar. Follow these steps:
The non-styled text content appears in the Edit Content window.
Note: In Step 2, you added text to a master page, so the changes you make are shared across all instances on the site. If you change your mind, click Cancel to close the Edit Content window without making any changes.
Once you click Update and close the Edit Content window, you'll see an accurate preview of the styled text, as it will appear to visitors if you publish the page.
While images set as background images can't be edited using In-Browser Editing, you can edit images that are placed or pasted into pages. In this section, you'll edit the image wrapped inside a text frame on the Home page.
When you replace an image, the new image is clipped to fit if it has a different aspect ratio. For best results, swap images with the same dimensions.
Links to other pages in the Adobe Muse site work within the editing interface. They appear in several forms, depending on the type of link. You can navigate the pages of an editable site just as you would browse pages in a live site. For example, you can jump to pages by clicking the links in Menu widgets.
The About page loads in the browser. Along the top is a row of social network icons that link to external websites.
The same buttons appear when a link is applied to an entire text frame.
Since the Twitter website can't be edited, the Twitter Home page doesn't load. However, if a page of the Adobe Muse site is linked, the page loads as expected.
All internal site links are clickable, including text links and image links; text and image links inside Composition widgets; thumbnail links in Slideshow widgets; and the labels, tabs, and buttons in manual Menu widgets, Composition widgets, and Slideshows.
When a link is applied to a portion of text within a text frame, you can hover your cursor over the link to bring up a small arrow icon. While the arrow is displayed, click the text link to jump to the linked page in the site (see Figure 12).
In addition to updating text and images, you can also change elements within widgets using In-Browser Editing. The About page contains a Composition widget with two containers. You can click the orange buttons to see the nested content. In this section, you'll learn how to update images in widgets.
In-Browser Editing works just as you'd expect, even when you're drilling down into sub-elements within nested widgets. Experiment with uploading other images from your computer to see how easy it is to swap out graphic assets.
The changes you make using In-Browser Editing are not live until you publish them. The editing interface updates to let you see the result of your changes, but if you don't click the Publish button before you leave the page or quit the browser, the changes you make will be discarded.
When you've finished updating each page, click Publish (see Figure 15).
If you decide not to commit the changes, click Discard Changes.
Later, when you open the .muse file in the Adobe Muse workspace, the changes are highlighted. At that time, you can choose to accept the changes (which updates the .muse file, to keep it in sync) or discard the changes. When you publish the .muse file again, any discarded changes are overridden on the live website.
To learn more about editing Adobe Muse sites in a browser, watch this overview video, Discover In-Browser Editing in Adobe Muse CC.