Working with the image element

A picture is worth a thousand words. Images make your content vibrant, easier to consume, and more engaging. In this article, we share how you can use the image element to spruce up your content.

How to add an image to your page

Images are a great way to make your content stand out. With the image element, you can add images to a column. This also allows you to insert animations in the GIF format.

In the elements tab on the left-hand side of the editor, you can drag the image element into a column.

The media library pop-up will appear, where you can select the image you want to add to your column. After you've selected the right image, click on select media to insert the image into your column.

You will then be directed back to your column, where you can find your image. The size of the image element can be adjusted by dragging the white square on the bottom right corner of the element. The size also depends on the settings of the block, column, and spacing.

When adjusting the size of an image, a maximize icon appears when you hover over it. Clicking this icon will restore the image to its original size, fitting the column's layout.

How to add a new image to the media library

You can add images to the media library, which you can later use on your pages in an image element. Click on the upload button in the top-right corner of your screen.

The media library supports a variety of image formats to be uploaded. Below you can find a list of supported file types:

• .jpg - Maximum file size 20MB and 72 DPI.

• .png - Maximum file size 20MB and 72 DPI.

• .svg - Without additional formatting.

• .gif - Maximum file size 2MB.

When you’re editing your images with software such as Adobe Photoshop, make sure you save the image for the web.

How to replace an image

You can replace an image via the replace icon in the blue element bar. This will open up the media library, where you can select and choose a new image.

Element settings

In the element settings of your image element, you can style your image the way you want to. Hover over the image and click on the cogwheel icon. A pop-up with the element settings will appear. We will go over each of the element settings below.

• General settings

  In the general settings, you can link the image to – for example – an external URL or a different page. Click edit link to choose where you want to link to. Your audience will then be taken to this place when they click on the image.

  

   

• Border
  The border option allows you to create a full border or a border on specific sides of your element. all sides at once is selected by default, which means that when you increase the border thickness, the same amount of border will appear on all sides at the same time.

  When all sides at once is deselected, the option to increase the amount of the border for each side will appear. It's also possible to add more than one border. Every border will have the same color that is selected at the border color picker.

  

   

• Shadow

  You can add a shadow to most of the elements. Choose the shadow color with the color picker. After selecting the color, you can choose the horizontal position and vertical position. The blur radius can be used to make the shadow less harsh and a bit more faded.

  

   

• Spacing

  Spacing can be increased to create more space between the border of the element and the content within the element.

  

   

• Alignment

  With this option, you can change the alignment of the content within the element itself. The content can be aligned left, center, or right.

  

• Visibility

  With this option, it's possible to choose in which view modes the image is visible. This allows you to show certain elements on desktop but hide them on mobile, or the other way around.

  

   

• Animation

  The entrance animation of the element can be selected in the drop-down menu. This animation will show once when the page is opened.