Sections which contain the Image Element can be found in the "Images" category of the page sections library:
Adding an Image
Click on the Image (1) element directly or on the ✏️ button (2) to access the Image element settings in the sidebar of the builder.
Next, click the "Choose Image" button in the sidebar to open up the Image Library where you can either select an existing image, upload a new one from your computer or by using a URL or use an image from the Unsplash image library:
A new image element can also be added to any existing section on the page by clicking on the "add element" button above/below an existing element and selecting the "Image" element:
📝 The image element supports the following image types only:
JPG / JPEG
PNG
WebP
GIF
The MAX file size supported for Images is 5 Mb and for GIFs is 15 mb.
📝 Larger image/gif file sizes may decrease page load speed. It's recommended to use light-weight images when possible.
Main Image Settings
Once your image is selected, the following options and settings become available in the Main tab (1) of the sidebar:
Your image's file name and original dimensions (2) will be displayed.
You can crop the image (3) or choose a different image (4) by clicking on the corresponding button options.
Alt text (5) can also be added for the image.
A Destination (6) can be set for the image to make it clickable and redirect to another webpage. Destination options for images are the same as for the standard button element.
A Hover State (7) effect can be set by clicking on the "Choose Image" button located there.
A Badge (8) can also be enabled for the image to add an additional visual cue or call-to-action overlay on top of the image
📝 Images added to your pages from the Image Library employ a Lazy Loading technique which defers the loading of off-screen images resulting in improved page load speed.
Crop & Rotate
Click the "Crop Image" button if you'd like to crop or rotate the image prior to adding it to your page:
Presets for common aspect ratios (16:9, 4:3, 2:3, etc.) are included as well as a "Free" mode to crop it the way you'd like to. You can also Rotate the image clockwise or counterclockwise as you see fit.
Change Image
Click the "Change Image" button to be taken back to your Image Library to select a different image or upload a new one instead:
Click the "Confirm" button once you're satisfied with the image appearance to add it to the image element included in the section.
Alt Text
Alt text provides a textual description of an image, which is displayed when the image cannot be loaded or when it is being accessed by screen readers or other assistive technologies.
Search engines rely heavily on textual information to index and understand web content, so including relevant and descriptive "alt" text helps search engines comprehend the image's content, improving the chances of the image being properly indexed and appearing in relevant search results.
Hover State
The hover state setting for images is a great way to make the images featured on your page more dynamic. Choose between:
None (default)
Hover Image - Show an alternate image when hovered over
Color Overlay - Show a color overlay when hovered over
Change Opacity - Change the opacity of the image when hovered over
If "Hover Image" is chosen, click the "Choose Image" button to select the image you'd like shown when the image is hovered over on Desktop computers. For best results, use an image that has the same or similar image ratio to the original image (1:1, 2:3, 4:3, 16:9, etc)
Additional Image Options
The following Tabs are also available for Image settings in the sidebar of the builder, allowing for further customization of the image's styles:
📝Choose the device type you'd like to edit the image styles on from the "Edit on" section, prior to making changes. All settings are available in Desktop edit mode, while only style edits for Spacing, Alignment, Size and Visibility are available in Tablet/Mobile modes.
1. In the "Background" tab you can edit the image's:
Background Color - Set a background color for the image
Background Image (Coming Soon!) - Set a background image for the image
2. In the "Shape" tab you can edit the image's:
Shape - The shape you'd like used for the image
3. In the "Border" tab you can edit the image's:
Border Style - None, solid, dotted or dashed
Border Size - How thick you want the border to be
Border Color - The color you'd like used for the border
4. In the "Box Shadow" tab you can edit the image's:
Color - The color of the shadow
X offset - The horizontal distance of the shadow. You can use positive values to push the shadow rightwards and negative values to push it leftwards
Y offset - The vertical distance of the shadow. Positive values will push the shadow downwards, while negative values will push it upwards
📝 X and Y offsets can also be set using the pin in the square to the right of the offset fields. The pin can be dragged to set coordinatesBlur - The blurriness of the shadow. Higher values create a more blurred shadow, while lower values create a sharper shadow
Spread - The size of the shadow. Range of allowed values is 0 - 20
5. In the "Spacing" tab you can edit the image's:
Padding - Top/Bottom and Left/Right in px. Padding is the space between the content of the element and its border
Margin - Top/Bottom and Left/Right in px. Margin is the space outside the border of the element
6. In the "Alignment" tab you can edit the image's:
Alignment - Left/Center/Right
7. In the "Size" tab you can edit the image's:
Size - The size of the image with presets for S/M/L/XL provided. You can use the slider to set a Custom size as well.
Max Width - The maximum width that the image can have on the page. Presets of None/S/M/L/XL are provided. You can use the text box to set a Custom size in px as well.
The Max Width property for the image which defines the maximum width of the image.
If the image is larger than the maximum width, it will automatically change the height of the image.
If the image is smaller than the maximum width, the max width property has no effect.
📝 This prevents the value of the width property of the image from becoming larger than the max width. The value of the max width property overrides the width property I.e. you can upload a 4K image (3,840 x 2,160 pixels) and limit its max width to FullHD (1,920 x 1,080 pixels).
8. In the "Visibility" tab you can choose which device(s) to show the image on:
Show on Desktop
Show on Tablet
Show on Mobile
Full-width Image ("Image" section only)
To have your image appear full-width on most device types, it's recommended to use an image that has at least 1920 px width. For 4K screens, a minimum of 2560 px width for the image is required, but 3840 px is recommended.
You must also:
1. Set the "Image Size" setting to 100%
2. Set the "Max Width" setting to None
3. In the Section Appearance setting's Layout tab, toggle on the "Full Width" option:
4. In the Section Appearance setting's Spacing tab, set the left/right padding values to 0 on all device types where the image should be full width:
📝 In some cases if you have enabled the "Theme header/footer" feature for your page, it's possible your theme styles that are included for the page with that feature enabled will prevent the image from going full-width. If that is the case, try the following as well:
1. Add the following CSS code to your page as a Local script to the Header section:
<style>
.zpa-plain-image-001-v2.zpa-block-full-width .xs-12 {
padding: 0;
}
</style>
2. Save the script and then Update the page.
📝 The Image will only appear full-width on the live/published page and not in the in-app builder or built-in preview modes since additional code added doesn't execute or apply in those locations. Check the published page on your storefront to see the result, where the additional code is executed upon page load.