Image element

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 elementClick to copy

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

image element

In the latest update,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.

You can watch this video tutorial below about managing images:

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 tab’s parametersClick to copy

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

CONTENT
Image source: Upload your image from 3 sources: From Computer, From Internet by URL, From Image Manager.image source
Image Manager: You can find all the latest and greatest news about Image Manager media here.image
Enable Full Width: Make the Image to fit with the width of its container (example: column).
Image Width: You can adjust Image Width when turning Enable Full Width off.
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

Image Height : You can adjust Image Height when selecting Custom in Image Ratio.
Image Object Fit: In Square and Custom type, you can resize image to fit its containerCover: Image will stretch to fit with the container

Contain: Image will squeeze to stay inside its container

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

Important noteClick to copy

Note 1:  Use only 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.

image

Note 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:

Styling configuration

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

You can check more information about the Styling tab here

Navigate this category

PreviousPrevious article

Next articlePrevious

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese, French and Japanese. Please check the flags on the page header.

I got it!
Discover the Shopify Invoice Generator by PageFly, a seamless solution for invoicing in your online store. Try it now!