About Image Element
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 initially has only one design option, 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.
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 the General tab, you will find these settings:
You can get further information about ATTRIBUTES, VISIBILITY, and ANIMATION parameters here.
Styling Settings
Select the image element, and 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:
- Add Images: In the All Devices view, add the images you want to display on different devices.
- Set Visibility: Select each image and go to the General tab to find the VISIBILITY parameter.
- 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.
Version Updates
With the release of PageFly version 4.15, we have enhanced the Media Manager to offer an improved experience. Key features include:
- Access to Shopify’s free image library, eliminating the need for extensive searches to find the perfect image.
- Streamlined management of your uploaded media, enabling you to easily organize and track all images and videos in one centralized location.
- An optimized image selection process with a more user-friendly modal interface, ensuring a smoother and more efficient workflow.