When designing websites for site owners, one of the primary requests involves setting up a system so they can update their own site content. It's also very helpful to have a way to make changes on the fly when you're away from your workstation and you want to make revisions to a site.
Muse now includes a feature called In-Browser Editing, which allows you, site owners, and your team members to change text and image content with the Business Catalyst Administrator interface. Editors using In-Browser Editing don't need to install Adobe Muse.
In-Browser Editing is also easy to use. People with no prior web design experience can make changes because editing takes place in a web browser ― once they've been granted editing access.
In this article, you'll learn how you can set up an Adobe Muse site to enable In-Browser Editing so that invited site users can update an Adobe Muse site. You'll get an overview of the steps to follow when using the In-Browser Editing interface, so you can help others learn how to use it to make changes. And finally, you'll see how to sync your .muse file with the current version after changes have been applied to the live site using the In-Browser Editing interface.
|Image - Background fill (Rectangles, Image frames, and Widgets)||No||No|
|Form submit buttons||No||No|
|Dynamic menu labels (Menu widgets not set to Manual)||No||No|
|Rasterized page items (rounded corners, beveled edges, inner glow, or rotation applied, text frames using system fonts, and rotated text frames with effects applied)||No||No|
|Text Labels - Accordion widgets||Yes||Yes|
|Text Labels - Tabbed Panel widgets||Yes||Yes|
|Text Labels - Manual Menu widgets||Yes||Yes|
Buttons - Slideshow widgets
|Buttons - Composition widgets||Yes||Yes|
Slideshow thumbnail images
|Text and image frames inside "trigger" areas of Composition widgets||Yes||Yes|
The process of setting up the In-Browser Editing feature is in two parts. First, you enable the setting in the Site Properties and publish the site to the Adobe hosting servers. Next, you can invite new users to the site, so that they can log in using any browser to make changes.
As mentioned previously, background images cannot be edited with In-Browser Editing. If the site contains images that are critical to the design that you do not want the site owner to change, make sure that they are added as background images before enabling In-Browser Editing and granting editing access.
To use In-Browser Editing, the trial or live website must be hosted on the Adobe Business Catalyst hosting servers.
Choose the desired options in the Publish dialog box, and then click Publish to upload all of the site files to the Adobe Business Catalyst hosting server.
You can create a new trial site or upload a live site that uses a custom domain name. In-Browser Editing works for both trial and live sites, as long as they are hosted on the Adobe web servers.
After the publish operation is finished, the Publish dialog box updates to ask if you'd like to add an In-Browser Editing user to the site.
You need to add In-Browser Editing users to your site to allow them to edit your live site. You'll use the Admin Users interface to create an account for the users, after which they can log in and start editing your site.
In Adobe Muse, either click the Add In-Browser Editing Users link described in step 5, or select File > Manage Business Catalyst Site.
The site's Business Catalyst interface opens in a new browser window.
You can also click the Manage button once you've published a site, and then invite an Admin User while making other updates to manage the site.
After submitting the information, the system automatically sends the login information to the person you've invited in an email message. They receive the email and then click the link to set up a unique password of their choosing. Once they've created a password for their account, they can log into the site-editing feature using any web browser.
This section lists the steps that anyone can follow to update an Adobe Muse site, once they've been granted access. If you'd like to send them a copy of the steps, you can download these instructions.
When making changes to a site, remember that you are working within a browser window. It is important to publish the changes you make before leaving the current page or closing the browser window, unless you change your mind and decide to discard the changes.
Follow these steps to edit text content on your site:
When you login to your site using Business Catalyst, you can see a blue overlay around your text. Select or delete the text, and start typing your content.
As you hover over the text in a text box, In-Browser Editing displays the formatting that is applied to the text. By default, the same formatting will be applied to any text you type in the text box.
Using In-Browser Editing, you can edit some of the images on the site, as long as they are inserted as foreground images. If images on the site are set as a background image, they are not editable. If you encounter non-editable images that you want to change, contact the person who designed your site.
Click Edit Image.
A pop-up appears, which contains all the assets that are used in your project. Either choose an image from the existing assets, or upload a new image from your computer using the Upload Photo button.
Perform one of the following actions:
- Click the tick mark to save the changes.
- Click the cross symbol to cancel the update.
When you replace an image, the new image that you select is clipped to fit if it has a different aspect ratio than the original image. 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 you plan on changing a specific image periodically, you can ask the person who initially created the site to upload several different images that are the same size, so you can choose an image that already exists on the site. For example, the web designer could upload four images of the same dimensions for Spring, Summer, Fall, and Winter. As time passes, you could choose the From Site option and then swap the image out to reflect the current season.
If an image on the page is pasted inside a text frame, you can still edit it.
- Select the text frame. Then, select the image inside the text frame.
The Edit Image button appears next to the selected image.
- Click Edit Image. Choose from one of the existing assets, or click Upload Photo to upload a new image from your computer.
- Once you're done with all the changes, click Publish to push the changes live.
Some content on the site might be added to a master page when the site was designed. When elements are added to the master page, they are displayed on all of the other site pages that are linked to that master. This means if you change an element on one page, you will update all of the other instances of that content.
When you select an element for editing that is shared, the item is displayed in the Edit Shared Image window.
Be careful when you see this window, because it means that other pages in the website may also be updated automatically when you make changes. It's best to proceed with caution, by clicking Cancel. Visit the live site in a new browser window and review the pages, to see where the element appears. Confirm that you want to change all iterations of the element before returning to the In-Browser Editing interface to update it.
For information on Editing Hyperlinks, see Editing Hyperlinks.
When you first log into your account, you are presented with an editable version of the site's Home page. After you are finished making changes to the Home page, you can visit other linked pages in the site so you can edit them too.
- If links appear outside a text frame, simply click the link to jump to the linked page in the site. External links (to web pages that are not in the current site) will not load in the editing interface because you cannot use In-Browser Editing to edit pages in other websites.
- If links appear inside text frames, hover your cursor over them to see a button. Click the button to jump to the linked web page. For example, click the Home button to go to the Home page of your site.
- If a link is applied to an entire text frame, click the entire frame to see the button that contains link or the anchor tag.
When you finish editing each page of the site, be sure to click Publish if you want to save the changes. When you are finished editing the entire site, close the browser window.
In-Browser Editing supports responsive layout. That is, you can directly preview your changes and how they look at each breakpoint. On the other hand, if you have used alternate layouts for your site, you can use the dropdown and preview your changes for each device.
To preview your changes:
After In-Browser Editing occurs, your local .muse file no longer contains the same content as the live site. In this section, you'll learn how you can approve or decline the changes they made to update the .Muse file to match the current site design.
An alert message appears, indicating that the published site has changed.
In addition to seeing a message when you first open a .muse file, a message is also displayed when you begin publishing a .muse file that is out of sync with the live website, reminding you to review the changes before publishing the site again.
At any time, you can also choose File > Sync with Adobe Business Catalyst Site to see an interface that lets you review the differences between the .muse file and the live site.
Use the drop-down menu options (Don’t Merge or Merge into Muse) to decline or accept the specific change or all changes.
To compare the live website version of the text and images with the local .muse file, enable and disable the Preview on Page checkbox.
Since other people may make changes to the live site as you are also making changes to the .muse file, it is recommended that you save copies of the site after you sync the changes and publish the newest version.
Immediately after publishing the site, choose File > Save Site As and save a copy of your .muse file. If desired, you can include the current date in the file name when you create new copies. This practice makes it easy to locate the .muse file that you published on a specific date.
For example, you can create a folder that contains your newest working copy of the .muse file and several other archived versions that contain previously published iterations of the site design. The list of files in the folder might look like this:
In addition to making it easier to revert to previous site designs, this practice helps Muse accurately determine which (if any) changes have been made to the website using In-Browse Editing. Saving backup versions of a site also makes it easier to check if your current .muse file and the live website are still in sync.