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 and some common issues related to images on your page.
You can watch this video about creating the basic layouts with the Image element first
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.
Note that PageFly supports many different image types such as PNG, JPG, SVG, etc.
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.
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.
The parameters in the General and Styling tabs are specific for this element
General tab’s parameters
You can read more here for more details on how to use the image manager to upload images.
| General tab’s parameters | |
| 1. CONTENT |
You can read more here for more details on how to use the image manager to upload images.
|
| 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 screen image.
|
| 3. TRACKING | This is a place to set up:
|
| 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
The video below will describe the detail about this “Hide” function
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. |
Some common issues with images
Images are not full-width on the mobile devices
In many cases, when you add images on your page and see they are full-width on the desktop device but when viewing on the mobile phones, they are smaller and not full-width.
Explain for this issue is because the images on the mobile device have padding-left or padding-right from All devices and they are not set up full width – 100% option.
To fix this issue, you need to check the padding of the image by switching to the mobile device and replace the current padding to 0px in the Styling tab or set it Full width – 100% option in the General tab like the image below:
Remember to Publish and go to the Live view to see the result:
In case you tried these ways but they still do not work, please do not hesitate to contact us via the Live chat window so we can help you immediately.
Some images do not display on the Safari browser
In many cases, the images on your pages do not display on the Safari browser but they still work on the Chrome browser.
One of the most popular reasons is that the images that you are using are the webp format. In this case, Safari does not support this format.
You can see this image for example:
However, if you check on the Chrome browser, the image is displayed:
If you still want the image to be displayed on the Safari, you need to convert the image into JPG or PNG format. In this case, the image was converted to JPG and it works on the Safari:
We highly recommend you to use only Chrome for the best experience. You can check this article to know PageFly works best with the latest version of the Google Chrome browser.
Make sure you are do not use the webp format if you want the image to be displayed on the Safari. If you convert the image into JPG already but the issue still is there, please do not hesitate to contact us via the Live chat window so we can help you solve the problem.
Want to overlay the text over the image
In case you want the text overlay the image, please use the Image with text overlay element (the pre-made section):
Read more here for more details.
You can watch this video tutorial below about common problems of the Image element
And a video about managing images
For further discussion, please join our ever-growing Facebook Group to get exclusive content and promotion!
