Image

About Image Element

Summary: The Image Element in PageFly is a powerful tool that allows you to add and customize images on your store pages effortlessly. It supports various image formats, including JPG, PNG, and GIF, making it easy to showcase your products or enhance your page design.

This guide will walk you through the steps to effectively use the Image Element in PageFly. If you find yourself confused between the Image Element and Background Image, please check out the video tutorial below:

How To Access Image Element

To access the Image element in PageFly, follow these simple steps:

• Step 1: Click the “Element” button on the left menu and pay attention to the PageFly tab
• Step 2: Select “Image” element from the dropdown menu. It’s under the Media category.
• Step 3: Drag and drop the variant you want into the page canvas and start using it.

The Image element offers two variants for you to choose from: Original Image Ratio and Square Image Ratio.

While the Image element has only one design option initially, you can further customize it using the General and Styling tabs. Drag a variant to the layout and see how it can be configured to suit your needs.

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

How To Configure For Image Element

The Image element in PageFly offers a variety of settings to help you fine-tune its appearance in the General and Styling tabs for the best possible conversion rate. Here’s how to configure it:

General Settings

Select the image element and navigate to General tab, you will find these settings:

Select Image: Choose where to add your image: Upload an image from your device by clicking on the  “Add images” button. Select an image from the Media Manager by click on the “Go to media files” button Use an image URL from the internet by hitting “Add image from URL”. Select “Done” after adding your image. Here is an example of uploading an image:
Alt Text and Title Text: These texts help Improve SEO and accessibility. Add alt text for search engines and screen readers. Add a title text for additional context.
Enable Full Width: Enable this to make the image fit the width of its container (e.g., a column).
Image Width: Customize the width of your image. This setting is available when “Enable Full Width” is disabled.
Image Ratio: Determine the shape and size of your image. There are three types for you to choose: Original: The image displays in its original size. Square: The image displays as a square. Custom: Adjust the image height to your preference.
Image Height: Adjust the height of your image. This setting is available when the image ratio is set to “Custom“.
Image Object Fit: Control how the image fits within its container. In Square and Custom type, you can resize the image to fit its container: Cover: The image stretches to fill the container. Contain: The image fits inside the container without stretching.
Image Position: Position your image within its container (in Square and Custom image ratio types)
Image loading: Optimize how and when images load: Lazy Loading: Images load only when visible in the viewport, improving PageSpeed. Preload: Images load as soon as the page loads, improving LCP (Largest Contentful Paint). Standard: Balances loading time and user experience.

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

Styling Settings

Select the image element, switch to the Styling tab to access styling options.

• Choose global styles for the image: Select from 6 variants, including options with or without frames, square, circle, etc.

• For further details on the Styling tab, please refer to this link.

To create stunning layouts in your PageFly page, you can utilize images by following the instructions provided in this video tutorial:

Common Cases

Use One Image For All Devices

Use the Image element if you want the same image to appear on all devices. If you want to display different images on different devices, use the Background image element instead.

Use ‘Hide’ To Show The Image On Different Devices

If you need to display different images on various devices, follow these steps:

1. Add Images: In the All Devices view, add the images you want to display on different devices.
2. Set Visibility: Select each image and go to the General tab to find the VISIBILITY parameter.
3. Adjust Visibility: To show an image on a specific device, hide it on the other devices. Now, different images will be displayed on each device

Refer to the illustration below for a visual guide:

Frequently Asked Questions

1. How many images should be included in 200 words?

It’s ideal to include around 3 to 4 images. This allows for a balanced presentation, ensuring that each image receives sufficient attention without overwhelming the reader.

2. How to optimize images for use on PageFly?

To optimize images for use on PageFly, it’s recommended to keep the file size under 1MB. This helps improve page loading times and ensures a smoother user experience. Use image compression tools to reduce file size without compromising quality.

Additional Resources

• PageFly Element Styling | Ultimate Guide to Edit Effectively
• How to Build a Section with Image and Text