How to Use Image Element with PageFly?

1. About Image ElementClick to copy

1.1. What is Image Element?Click to copy

Images are one of the most useful visual clues to convey your ideas to your website’s viewers.

The Image Element allows you to optimize your page, to increase conversion rate by adding diverse and descriptive meaningful images to the written contents.

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 simply decorate your page.

Note that PageFly supports many different image types such as PNG, JPG, SVG, etc.

If you find yourself confused between the Image Element and Background Image, please check out the video tutorial below:


1.2. Where I can find Image Element?Click to copy

To access the Image element:

Step 1: Click on the Plus icon which is the Add element function

Step 2: Click on the Image element in the dropdown menu

Step 3: Drag and drop the element you want into the page editor and then start using it.

image element

Image element has 2 options for you to select, they are:

  • Image Ratio: Original
  • Image Ratio: Quare

image element

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.

2. Image Element ConfigurationClick to copy

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.

image element

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

General settingsClick to copy

You can read more here for more details on how to use the image manager to upload images.


2.1. Image SourceClick to copy

Image source: Upload your image from 3 sources: From Media manager, From Legacy images and From Internet by URL.

image element

2.2. Legacy ImagesClick to copy

Legacy images: You can find all the latest and greatest news about Legacy Image here.

image element

2.3. Enable Full WidthClick to copy

Enable Full Width: Make the Image to fit with the width of its container (example: column).

image element

2.4. Image WidthClick to copy

Image Width: You can adjust Image Width when turning Enable Full Width off.

image element

2.5. Image Ratio

There are three types for you to choose:

Original : Image will show in original size

image element

Square : Image will show in square shape

image element

Custom : You can adjust height of the image

image element

2.6. Image HeightClick to copy

Image Height: You can adjust Image Height when selecting Custom in Image Ratio.

image element

2.7. Image Object FitClick to copy

Image Object Fit: In Square and Custom type, you can resize image to fit its container

Cover: Image will stretch to fit with the container

image element

Contain: Image will squeeze to stay inside its container

image element

2.8. Image PositionClick to copy

Image Position: In Square and Custom type, you can select specify the position for the image inside its container.

image element

If the image fit with its container, the Image position will show like this

image element

You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters here

3. Styling settingsClick to copy

Choose to style for the image in Global Style with 6 variants image element

You can check more information about the Styling tab here

You can use Image to create stunning Layout in PageFly page by following this video tutorial:

4. Important NoteClick to copy

4.1. Use One Image for All DevicesClick to copy

You can only use one image on different devices, if you want to change the image, you need to go to the “All Devices” view and reselect the image you want in the CONTENT parameter.

image element

4.2. Use ‘Hide’ to Show the Image on Different DevicesClick to copy

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

image element

5. Key TakeawaysClick to copy

Image Element is one of the visual clues to convey your ideas to your website’s viewers.

The Image Element allows you to optimize your page, to increase conversion rate by adding diverse and descriptive meaningful images to the written contents.

Check this video if you want to show, hide, and create different images for various devices. Plus, we’ve included some pro tips to optimize your Shopify store’s performance:

6. Frequently Asked QuestionsClick to copy

6.1. OverviewClick to copy

How many images should be included in 200 words? 3-4
Image Supported Formats? PNG, JPG, SVG…

6.2. Why do I need Images for written contents?Click to copy

People are visual, they get ideas from images better than reading long texts, and contents need descriptive images to describe situation as well.

6.3. Can I Crop Images in PageFly Page Editing Dashboard?Click to copy

No, you can. There are only 2 options to of image ratio is (1) Original and (2) Square.

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
Discover essential strategies and tips to boost your sales in all ecommerce events. Check now!