Launch Adobe Muse, and open the site that you want to configure.
In-browser Editing using Business Catalyst
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.
Which content is editable using In-Browser Editing?
|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|
Setting up In-Browser Editing
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.
Click File > Site Properties. Click the Advanced tab and verify that the Enable In-Browser Editing option is enabled.
If not, enable the Enable In-Browser Editing checkbox.
Click OK to close the Site Properties dialog box.
From the Adobe Muse top navigation bar, click Publish > Business Catalyst.
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.Note:
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.
You can either click the Add In-Browser Editing Users link, or simply click OK to close the dialog box.
For this example, click OK.
If you click the link to Add In-Browser Editing Users, you'll see the same interface as described in step 9.
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.Note:
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.
On the Business Catalyst user interface, from the left navigation pane, click Site Settings > Admin Users.
Click Invite Admin User.
The Admin Users section updates with a new interface.
In the fields that appear, enter the new user's email address, first name, and last name. You can optionally enter their cell phone number if desired. Set the User Roles menu to Users.
Click Invite to add the new user to your Adobe Muse site.Note:
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.
Update a site using In-Browser Editing
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.
Open a browser and type one of the following:
- my-site.businesscatalyst.com/admin (trial site)
- my-site.com/admin (live site)
Enter the email address and password to log into Business Catalyst.
You would have received the login details in your email.
Click the Edit button to see your site in the editing interface.
The Home page of the site loads in the In-Browser Editing interface.
Edit text using In-Browser Editing
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.
If you are not happy with your changes, and want to revert to the original text, click the Undo icon on top of the page.
When you are finished editing the text, click Publish.
The changes you make in the editing interface are not applied to the live website until you click the Publish button at the top of the page. If you decide not to make any changes, close the browser window.
Edit images that are placed or pasted onto a page
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.
Select the image that you want to edit.
You will notice an Edit Image button next to the image.
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.If you choose the Upload Photo option, the image you select on your computer will be uploaded to the site automatically.
The file you select is uploaded to the same web servers that host the website.
If desired, you can enter a tooltip in the Image Tooltip field. This practice is recommended because it helps improve Search Engine Optimization and also helps ensure that the site is more accessible.
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.
Once you're done with all the changes, click Publish to push the changes live.
Edit images placed inside text frames
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.
Edit Shared Content
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.
Following links on the Home page to edit other site pages
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.
Preview the changes in In-Browser Editing
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:
Make the required changes to your site content.
Notice the breakpoint at 1200px, where you have updated the content. Preview the change at this breakpoint.
From the dropdown, choose the other breakpoints and preview the change at each breakpoint.
If you have created your site using alternate layout, choose the device from the dropdown and preview the changes.
Sync the edits to the .Muse file
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.
Launch Muse and open the site's .muse file.
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.Note:
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.
Click Review to review the changes.
The Review and Merge Changes window appears.
Use the interface to review each change. The changes for each edit are highlighted. New content is highlighted in green, and Items that have been deleted are marked in red, so you can see at a glance what was added or deleted.
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 don't merge the changes, you will overwrite the changes applied to the live site the next time you publish the .muse file. This behavior helps you fix typos and other site issues that may occur when people edits the site with In-Browser Editing.
To compare the live website version of the text and images with the local .muse file, enable and disable the Preview on Page checkbox.
Once you are finished syncing and editing the .muse file, publish it to push your changes live. Any changed items marked as Don't Merge are overwritten by the current design of the .muse file when you publish the site again.
Save published iterations of the website
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.