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.
Image toolbox
The image toolbox appears when you hover over the image container.
img-md |
---|
w-25 |
img-md |
---|
w-25 |
img-md |
---|
w-25 |
img-md |
---|
w-25 |
img-md |
---|
w-25 |
img-md |
---|
w-25 |
Add an image
-
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.
img-md w-600 modal-image -
Use one of the following methods to add the image asset:
img-md w-500 modal-image note note 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 (+------------------------+ | img-md | +========================+ | w-20 | +------------------------+ | | +------------------------+) 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.
img-md w-600 modal-image
-
-
Search and select an Adobe Stock image: Use this method to find an image from Adobe Stock.
note note 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 note NOTE The Banner and Slider content types also include Upload Image and Select from Gallery options for adding images. img-md w-500 modal-image -
Change image settings
-
Hover over the image container to display the tool box and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | | +--------------------------+) icon.
The file name, dimensions, and file size appear below the current image.img-md w-600 modal-image -
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.
img-md w-600 modal-image
-
-
Search and select an Adobe Stock image: Use this method to find an image from Adobe Stock.
note note 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.
-
-
-
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.
img-md w-600 modal-image -
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.
-
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.
img-md w-600 modal-image -
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.
img-md w-600 modal-image -
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.
img-md w-600 modal-image
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.
-
-
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.
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>
-
Update any of the other settings as needed:
-
When complete, click Save to apply the settings and return to the Page Builder workspace.
Move an image
-
Hover over the image container to display the toolbox and choose the Move (+----------------------+ | img-md | +======================+ | w-20 | +----------------------+ | | +----------------------+) icon.
img-md w-500 modal-image -
Select and drag the image to the new position, just below the red guideline.
img-md w-500 modal-image
Remove an image
-
Hover over the image container to display the toolbox and choose the Remove (+------------------------+ | img-md | +========================+ | w-20 | +------------------------+ | | +------------------------+) icon.
-
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 theimage
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 theimage
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.
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto 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:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto 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:img-md w-600 modal-image table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto 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.
table 0-row-2 1-row-2 2-row-2 layout-auto 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.