Editing Adobe Muse site content using In-browser Editing

Search
Adobe Muse User Guide

On this page

Applies to: Adobe Muse

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

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.

What can I edit using In-Browser Editing?

In-Browser Editing allows you to edit text content and replace all images, except the following items:

  • 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.

Note:

Although text content is editable, the formatting of that text cannot be changed. Images can only be replaced, not added or removed.

Enable In-Browser editing in Adobe Muse

Before you begin, ensure that your site has In-Browser Editing enabled in the Site Properties window.

  1. Click FIle > Site Properties. Click the Advanced tab and ensure that the Enable In-Browser Editing option is enabled.

    Site Properties

  2. Upload your site to an FTP Host.

    Use the built-in Upload to FTP Host feature in Adobe Muse by choosing File > Upload to FTP Host. For instructions, see Uploading to FTP Host.

    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.

Sign in to In-Browser Editing

The following section lists the steps that you can follow to update an Adobe Muse site using In-Browser Editing.

Read on to know how you can edit the content of an Adobe Muse website using In-Browser Editing.  

  1. Visit https://inbrowserediting.adobe.com and enter the domain name (URL) of the site that you want to edit.

    In-Browser Editing

    Note:

    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 through a secured connection.

  2. Login using your hosting credentials.

    Sign-in window

    Once you’re signed in, you’ll see the site’s home page as well as the In-Browser Editing navigation bar on top.  

    In-Browser Editing home page
    Sign in to In-Browser Editing to see the home page

Edit text content and images using In-Browser Editing

You can directly edit text on the browser using In-Browser Editing. You can also edit images, images within text, and hyperinks in addition to text.

Read on to know how to quickly edit the content of an Adobe Muse website.

Edit text

You can easily edit text right on the browser using In-Browser Editing. After you log in to In-Browser Editing, simply select the text that you want to delete, and start typing your new text.

When you're done, you can immediately see how your changes appear on the same browser. If your site is responsive, preview the changes at all the breakpoints. If your site was created using alternate layouts, preview the change for each of the devices.

Edit text in-line
Edit text in-line using In-Browser Editing

Edit images and images within text

  1. Click the image that you want to edit, or click the text frame and then the image within that you want to edit.

  2. Click Edit Image.

    Edit images using In-Browser Editing
    Edit images using In-Browser Editing

    Edit images within text
    Edit images within text frame

  3. From the pop-up box that opens, choose an existing file that is associated with your site. Else, you can upload an image from your computer by click Upload Photo.

    Choose an image to upload
    Select an image to replace

    This dialog also gives you the option to add or edit tooltip text associated with the image.

  4. Click after selecting your photo.

    The old image is replaced with the image that you chose.

    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. This 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.

Insert and edit hyperlinks in your Adobe Muse site

You can edit several kinds of hyperlinks on a web page, including external links, mail-tos, links to other pages of the website, downloadable files, and more. Read on to know more about editing hyperlinks using In-Browser Editing.

Insert links using In-Browser Editing

You can add or insert hyperlinks using the Add Link button in In-Browser Editing. Follow this procedure to insert as well as update links for your Adobe Muse site.

  1. Click on the text where you want to add the link.

  2. Click Add Link.

    Insert Link option
    Insert hyperlinks using In-Browser Editing

  3. On the Insert Link dialog, choose to add any of the following types of targets to the link:

    • Pages: Select the Pages tab, and from the Select a Page drop-down list, select the page you want to link to.
    • External: Select the External tab, and provide a functional URL in the External Link field.
    • Phone Number: Select the Phone Number tab, and enter the Phone Number.
    • Files: Select the Files tab, and choose an existing file or browse to the file that you want to upload.
    • E-mail Address: Select the E-mail Address tab, and enter the target Email Address.
    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.
    Insert link dialog box
    Insert Link dialog box in In-Browser Editing

  4. Click OK to insert the hyperlink.

  1. Click on the hyperlink that you want to edit.

  2. From the pop-up, click the Pen symbol.

    Edit Link button
    Edit external links in In-Browser Editing.

  3. On the Edit Link dialog, select the External tab. Provide a fully functional URL. Ensure that the URL is not broken and that the destination web page is publicly accessible.

    Edit Link dialog External tab
    Provide the new link in the Edit Hyperlink dialog box.

  4. You can optionally provide the following details:

    • Tooltip: Provide a meaningful description of the destination page.
    • Open in a new window: Enable opening the link in a window, if needed.

  5. Click OK to finish.

    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.

Edit an internal link to point to another page or an anchor

  1. Click on the hyperlink that you want to edit.

  2. From the pop-up that appears over the link, click the Pen symbol.

    Edit internal links
    Edit internal link to point to another page

  3. On the Edit Link dialog, select the Pages tab. From the Select a Page or Anchor drop-down list, select the internal page or anchor to which you want to link.

    Edit Link dialog with Pages selected
    Edit internal links to pages

    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.

  4. You can optionally provide the following details:

    • Tooltip: Provide a meaningful description of the destination page.
    • Open in a new window: Enable opening the link in a window, if needed.

  5. Click OK to finish.

Edit hyperlink to change phone number

  1. Click the link that you want to edit.

  2. From the pop-up that appears over the link, click the Pen symbol.

    Click the Pen symbol
    Click the Pen symbol

  3. On the Edit Link dialog box, select the Phone Number tab. Specify the new phone number in the Phone Number field.

    Select Phone Number
    Edit links to Phone Number

  4. You can optionally provide the following details:

    • Tooltip: Provide a meaningful description for the tooltip.
    • Open in a new window: Enable opening the link in a window, if needed.

  5. Click OK to finish.

Edit hyperlink to update email address

  1. Click the hyperlink that you want to edit, a pop-up indicating that the link is editable is displayed.

  2. Click the Pen symbol.

    Click the Pen symbol
    Click the Pen symbol.

  3. On the Edit Link dialog box, select the E-mail Address tab. Specify the new email address in the E-mail Address field.

    Select Email Address
    Edit hyperlinks to email

  4. You can optionally provide the following details:

    • Tooltip: Provide a meaningful description for the tooltip.
    • Open in a new window: Enable opening the link in a window, if needed.

  5. Click OK to finish.

Edit downloadable files using In-Browser Editing

It is a common web design practice to link to downloadable files, such as PDFs, Installers, Videos, Audio files, and more.

You can use In-Browser Editing to set a file as a target for a hyperlink that can be in the form of text, shape, or image on your Adobe Muse site. Ensure that the maximum file size does not exceed 50MB.

You can upload files using In-Browser Editing. When you upload a file, it is necessary that the filename is unique. If you upload a file that has the same name as an existing file, you will be prompted to rename the file.

  1. Click the link that you want to edit.

  2. From the pop-up that appears, click the Pen symbol.

    Click the Pen symbol
    Click the Pen symbol

  3. On the Edit Link dialog, select the File tab.

    Edit Link dialog with File selected
    Upload and update downloadable files

  4. Either choose an existing file from the drop-down list, or click Browse to navigate and open a file on your computer.

  5. You can choose to provide the following details:

    • Tooltip: Provide a meaningful description for the tooltip.
    • Open in a new window: Enable opening the link in a window, if needed.

  6. Click OK to finish.

Undo or redo your changes

Everytime you make an update to your content, images, or links, you can immediately undo or redo the changes.

  • To undo your change, click .
  • To redo your change, click

If youre sure of all your changes, go ahead and preview your changes at other breakpoints or device views.

Preview and publish your changes

As you work on your edits using In-Browser Editing, you can preview your changes on the browser. It is important for you to preview your changes before you Publish your changes.

If your site was created using responsive layout, you can preview your changes using the drop-down list for breakpoints.

In-Browser Editing for responsive layout
In-Browser Editing preview for responsive layouts

You can select each breakpoint and preview your changes at that breakpoint. This is how your updated layout will appear at the corresponding browser widths.

On the other hand, if the site was created using alternate layouts, you can preview your changes using the device drop-down list. From the drop-down list, select the device for which you want to preview your changes.

See the device preview for alternate layouts
In-Browser Editing preview for alternate layouts

After you are sure of all your changes, go ahead and click Publish on the top navigation bar to commit the changes, and view them on your live site. If you are not satisfied with the changes you’ve made, you can always discard the changes. This will reset your site’s content to what it was the last time you published.

Syncing in-browser edits

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.

  1. Launch Adobe Muse and open the site’s .muse file.

  2. An alert message indicating that the live site has changed appears. Click Review to bring up the Review and Merge Changes window.

  3. 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 check box.

  4. Use the drop-down list 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.

Troubleshoot In-Browser Editing issues

If you experience issues related to In-Browser Editing, check the list of Common issues. If you continue to experience the issue, contact us.