How to Use Image Element with PageFly?

1. About Image Element

1.1. What is Image Element?

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.

1.2. Where I can find Image Element?

To access the Image element:

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

Step 2: Click on the Soundcloud 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 has 2 options for you to select, they are:

• Image Ratio: Original
• Image Ratio: Quare

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

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

General settings

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

CONTENT
2.1. Image Source Image source: Upload your image from 3 sources: From Media manager, From Legacy images and From Internet by URL.
2.2. Legacy Images Legacy images: You can find all the latest and greatest news about Legacy Image here.
2.3. Enable Full Width Enable Full Width: Make the Image to fit with the width of its container (example: column).
2.4. Image Width Image Width: You can adjust Image Width when turning Enable Full Width off.
2.5. Image Ratio There are three types for you to choose:	Original : Image will show in original size Square : Image will show in square shape Custom : You can adjust height of the image
2.6. Image Height Image Height: You can adjust Image Height when selecting Custom in Image Ratio.
2.7. Image Object Fit 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 Contain: Image will squeeze to stay inside its container
2.8. Image Position Image Position: In Square and Custom type, you can select specify the position for the image inside its container.	If the image fit with its container, the Image position will show like this

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

3. Styling settings

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

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 Note

4.1. Use One Image for All Devices

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.

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

5. Key Takeaways

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 Questions

6.1. Overview

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?

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?

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