All Collections
Zipify Pages - Tutorials & Documentation
Page Block Elements
The Image Element [Zipify Pages]
The Image Element [Zipify Pages]
Ezra Firestone avatar
Written by Ezra Firestone
Updated over a week ago

Blocks which contain the Image Element can be found in the "Images" section of the page blocks library: 

Adding an Image

Click on the Image (1) element or on the blue pencil icon (2) to open up the Image Library where you can either select an existing image from your library, upload a new one from your computer or by using a URL or use an image from the Unsplash image library.

📝 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, 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 Label (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 block.

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 coordinates

  • Blur - 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 block 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 Block Appearance setting's Layout tab, toggle on the "Full Width" option:

4. In the Block Appearance setting's Spacing tab, set the left/right padding values to 0:
​

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

Did this answer your question?