Media - Image

Use the Image content type to add a JPG, GIF, or PNG image to the Page Builder stage. In addition to the default desktop image, you can specify a secondary image for mobile devices. You can also add a caption that appears below the image and link the image to any URL, product, category, or page.

TIP

You can use the Adobe Stock Integration to find and save an appropriate asset from among the millions provided by Adobe Stock. See Using Adobe Stock Images for details about how to search, refine, and save Adobe Stock assets into your gallery.

NOTE

If you are making significant changes to Page Builder content, it is recommended that you increase the Admin Session Lifetime to prevent the session from timing out while you work.

Image toolbox

The image toolbox appears when you hover over the image container.

Image toolbox

Tool Icon Description
Move Move icon Moves the image to another position on the stage.
(label) Image Identifies the current content container as an image. Hover over the image container to see the toolbox.
Settings Settings icon Opens the Edit Image page, where you can change the properties of the image and container.
Hide Hide icon Hides the current image.
Show Show icon Shows the hidden image.
Duplicate Duplicate icon Makes a copy of the image.
Remove Remove icon Deletes the image from the stage.
Upload New Image Uploads an image from your local file system to the gallery.
Select from Gallery Chooses an existing image from the gallery.

Add an image

  1. In the Page Builder panel, expand Media and drag an Image placeholder to the target container.

    You can add an image to a row, column, or tab. In the following example, the image is dragged to an empty column.

    Dragging an image content type to the stage

  2. Use one of the following methods to add the image asset:

    Upload Image or Select from Gallery tools on the stage

    NOTE

    The maximum file size is 4 MB. Supported file types are JPG, GIF, and PNG.

    • Upload a new image: Use this method to upload a new image file from your system.

      • Click Upload Image.

      • Locate and choose the image to add it to the gallery and target container.

      As an alternative, you can also drag an image file from your system and drop it on the Camera (Camera Icon) icon.

    • Select an existing asset: Use this method to select an existing image asset from the media storage/gallery.

      • Click Select from Gallery.

      • Use the tree to navigate to the image.

      • Click the thumbnail and click Add Selected.

        Adding a selected image

    • Search and select an Adobe Stock image: Use this method to find an image from Adobe Stock.

      NOTE

      This method requires an Adobe Stock integration configured for your Admin.

      • Click Search Adobe Stock and search for an image.

      • Save the preview or licensed image to the gallery.

        See Using Adobe Stock Images for more information about working with Adobe Stock assets.

      • Select the asset thumbnail in the gallery and click Add Selected.

    The image appears in the target container at the placeholder location. Unlike a background image, you can move the image to a different position within the current container or to a different container.

    NOTE

    The Banner and Slider content types also include Upload Image and Select from Gallery options for adding images.

    Image in a column

Change image settings

  1. Hover over the image container to display the tool box and choose the Settings (Settings icon ) icon.
    The file name, dimensions, and file size appear below the current image.

    Current image

  2. To change the current Image, do one of the following:

    • Upload a new image: Use this method to upload a new image file from your system.

      • Click Upload Image.

      • Locate and choose the image to add it to the gallery and target container.

    • Select an existing asset: Use this method to select an existing image asset from the media storage/gallery.

      • Click Select from Gallery.

      • Use the tree to navigate to the image.

      • Click the thumbnail and click Add Selected.

        Adding a selected image

    • Search and select an Adobe Stock image: Use this method to find an image from Adobe Stock.

      NOTE

      This method requires an Adobe Stock integration configured for your Admin.

      • Click Search Adobe Stock and search for an image.

      • Save the preview or licensed image to the gallery.

        See Using Adobe Stock Images for more information about working with Adobe Stock assets.

      • Select the asset thumbnail in the gallery and click Add Selected.

  3. To add a Mobile Image, use the same methods described in the previous step to select an image to be used for display on mobile devices.

    Mobile image

  4. If needed, specify a Link for the image.

    The link is the destination page that appears when the customer clicks the image. You can use one of three link types:

    • URL - Links to either a relative or fully qualified URL.

      Link to a URL

    • Product - Identifies the destination page based on the product name or SKU. Search for the product by name based on either a partial or full name. Choose the product from the search results list.

      Choosing a product to link

    • Category - Identifies the destination page as a specific category or subcategory in the category tree. Search for the category based on either a partial or full name. Choose the category from the expanded section of the displayed tree.

      Choosing a category to link

    • Page - Identifies the destination page as a specific content page. Search for the page based on either a partial or full name. Choose the page from the search results list.

      Choosing a page to link

    If you want to prevent the visitor from navigating away from your store, select the Open in new tab checkbox. When the checkbox is cleared, the linked destination opens in the same browser tab, which could effectively navigate the visitor away from your store.

  5. To add an Image Caption, enter the text that you want to appear below the image.

    The format of the caption is determined by the stylesheet that is associated with the current theme.

    Image caption

    The caption typically appears below the image, and provides information about the image for visitors and search engines. If your site is available in multiple languages, you might use the same image, but translate the caption. In HTML, the <figcaption> tag is a subset of the <figure> tag. <figcaption>This is the image caption</figcaption>

  6. Update any of the other settings as needed:

  7. When complete, click Save to apply the settings and return to the Page Builder workspace.

Move an image

  1. Hover over the image container to display the toolbox and choose the Move (Move icon) icon.

    Moving an image

  2. Select and drag the image to the new position, just below the red guideline.

    Using the red guideline to position the image

Remove an image

  1. Hover over the image container to display the toolbox and choose the Remove (Remove icon) icon.

  2. When prompted to confirm, click OK.

Search Engine Optimization

Text for these settings is visible to search engines and improves the way the page is indexed.

  • For Alternative Text, enter an alt text description for digital accessibility tools to display.

    The use of alt text is an accessibility best practice, and is required by law in some locales. In HTML, the alt attribute is a subset of the image tag: <image title="tooltip" alt="description" src="image.jpg">.

  • For Title Attribute, enter the text to display as a tooltip on mouseover.

    As a best practice, choose a descriptive, keyword-rich title to improve the way the image is indexed by search engines. In HTML, the title attribute is a subset of the image tag: <image title="tooltip" alt="description" src="image.jpg">.

Advanced

  • To control the horizontal positioning of the images added to the container, choose an Alignment.

    Option Description
    Default Applies the alignment default setting that is specified in the style sheet of the current theme.
    Left Aligns the image content along the left border of the image container, with allowance for any padding that is specified.
    Center Aligns the image content in the center of the image container, with allowance for any padding that is specified.
    Right Aligns the image content along the right border of the image container, with allowance for any padding that is specified.
  • Set the Border style applied to all four sides of the image container:

    Option Description
    Default Applies the default border style that is specified by the associated style sheet.
    None Does not provide any visible indication of the container borders.
    Dotted The container border appears as a dotted line.
    Dashed The container border appears as a dashed line.
    Solid The container border appears as a solid line.
    Double The container border appears as a double line.
    Groove The container border appears as a grooved line.
    Ridge The container border appears as a ridged line.
    Inset The container border appears as an inset line.
    Outset The container border appears as an outset line.
  • If you set a border style other than None, complete the border display options:

    Border Color

    Option Description
    Border Color Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.
    Border Width Enter the number of pixels for the border line width.
    Border Radius Enter the number of pixels to define the size of the radius that is used to round each corner of the border.
  • (Optional) Specify the names of CSS classes from the current style sheet to apply to the image container.

    Separate multiple class names with a space.

  • Enter values, in pixels, for the Margins and Padding to specify the outer margins and inner padding of the image container.

    Enter each corresponding value in the image container diagram.

    Container area Description
    Margins The amount of blank space that is applied to the outside edge of all sides of the container.
    Padding The amount of blank space that is applied to the inside edge of all sides of the container.

On this page