About Image ElementClick to copy

Summary: Image Element The Image Element is a powerful tool that enables you to enhance your webpage’s effectiveness by incorporating diverse and descriptive images alongside written content.

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.

Whether you’re creating a new webpage or optimizing an existing one, the Image Element can be seamlessly integrated to elevate your page’s performance.

Note that PageFly supports many different image types such as PNG, JPG, SVG, etc.

If you find yourself confused between the Image Element and Background Image, please check out the video tutorial below:

How To Access Image ElementClick to copy

To 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 PageFly

Image element has 2 options for you to select, they are:

  • Image Ratio: Original
  • Image Ratio: Quare

Image PageFly

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.

How To Configure (Setting) For Image ElementClick 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 PageFly

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

General SettingsClick to copy

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

Image Source

Image source: Upload your image from 3 sources: From Media manager, From Legacy images and From Internet by URL.

Image PageFly
Legacy images

Legacy images: You can find all the latest and greatest news about Legacy Image here.

Image PageFly
Enable Full Width

Enable Full Width: Make the Image to fit with the width of its container (example: column).

Image PageFly
Image Width

Image Width: You can adjust Image Width when turning Enable Full Width off.

Image PageFly
Image Ratio

There are three types for you to choose:

  1. Original : Image will show in original size

Image PageFly

  1. Square : Image will show in square shape

Image PageFly

  1. Custom : You can adjust height of the image

Image PageFly

Image Height

Image Height: You can adjust Image Height when selecting Custom in Image Ratio.

Image PageFly
Image Object Fit

Image Object Fit: In Square and Custom type, you can resize the image to fit its container.

  1. Cover: Image will stretch to fit with the container

Image PageFly

  1. Contain: Image will squeeze to stay inside its container

Image PageFly

Image Position

Image Position: In Square and Custom type, you can select specify the position for the image inside its container.

Image PageFly

If the image fit with its container, the Image position will show like this

Image PageFly

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

Styling SettingsClick to copy

Choose to style for the image in Global Style with 6 variantsImage PageFly

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

Use One Image For All DevicesClick to copy

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.

Image PageFly

Use ‘hide’ To Show The Image On Different DevicesClick to copy

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

Image PageFly

Frequently Asked QuestionsClick to copy

How many images should be included in 200 words?Click to copy

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. The supported image formats include PNG, JPG, and SVG.

Why Do I Need Images For Written Contents?Click to copy

Incorporating images is crucial because people grasp ideas better visually than through lengthy text alone. Descriptive images help illustrate situations effectively, making your content easier to understand and remember.

Can I Crop Images In PageFly Page Editing Dashboard?Click to copy

No, you cannot. The dashboard only offers two options for image ratio: Original and Square.

Additional ResourcesClick to copy

PageFly Element Styling | Ultimate Guide to Edit Effectively

How to Build a Section with Image and Text

Navigate this category

PreviousPrevious article

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us