Image element

Images are one of the most useful visual clues to convey your ideas to your website’s viewers. In this article, you will learn how to use the Image element.

About Image element

The Image element allows you to add images to your page in order to increase your conversion rate. You can use this element to make a banner image for your page, to add additional visual proof for something you are talking about on the page or to simply decorate your page.

pagefly image element 1

In the latest update, the Image element has only one design option, however, bear in mind that you can customize this element more precisely by using General and Styling tabs.

Drag a variation to the layout and see how it can be configured.

Image element configuration

The Image element comes with plenty of parameters of settings allowing you to fine-tune content appearance to reach the best possible conversion rate.

Select the element in the layout to see its parameters.

pagefly image element 2

The parameters in the General and Styling tabs are specific for this element

General tab’s parameters

General tab’s parameters
  • You can upload an image from 3 sources:
    • From Computer
    • From Internet
    • From Image Manager
2. ACTION Aside from 5 click actions as other elements (read more here), Image element has one special click action named Open Lightbox which allows user to show full size image.
3. TRACKING This is a place to set up:

  • Google Analytics event to your GA account. You can find out how to set it up here.
  • Facebook Pixel when a customer clicks on the element. You can read more here.
4. ATTRIBUTES This is a parameter that all elements have. You can read more here.
5. VISIBILITY This is a parameter that all elements have. You can read more here.
6. ANIMATION This is a parameter that all elements have. You can read more here.

Important note 1: Use only one image for all devices

From PageFly 2.8.0 version, you can only use one image on different devices. To change the image, you need to go to the “All Devices” view and reselect the image you want in the CONTENT parameter.

If you are using the old image elements in your pages created with the previous PageFly versions, you can still change the images for different devices as you wish.
You just need to switch to each device view and reselect the image in the CONTENT parameter of the General tab.

Important notes 2: Use ‘Hide’ to show the image on different devices

When you need to show different images for different devices, please follow the steps below:

  • In the All devices view, add the images that you want to show on different devices.
  • Select each image, and in the General tab, you will see the VISIBILITY parameter.
  • To show it on a specific device, simply hide it on other devices.
  • Click the Save and the Publish buttons, and you will see different images on each device.

You can look at this image as an illustration:

This is how it looks on the Laptop device:

This is how it looks on the Mobile device

Styling tab’s parameters

Styling tab’s parameters
You can choose to style for the image in Style Presets with 4 variants
1. SPACING You can read about the SPACING parameter here.
2. TYPOGRAPHY You can read about the TYPOGRAPHY parameter here.
3. BACKGROUND You can read about the BACKGROUND parameter here.
4. BORDER You can read about the BORDER parameter here.
5. DISPLAY You can read about the DISPLAY parameter here.
6. CUSTOM CSS You can read about the CUSTOM CSS parameter here.

Was this helpful?

Start your free 14-day trial
of PageFly
Don’t have Shopify store yet? Create store