How to create an image element

How to create an image element

Images are vital for your website. You can easily add images to your site with the image element. 

To create a new image element, navigate to the Pages section from the sidebar menu of your admin panel under Website. 
  • Create a new page or edit an existing one. You can refer to our documentation about How to create a Page for more information. 
  • From the Content tab select the container and column you would like to place the image. 
  • Click the Add element button.
  • Select Image from the library.  

Section Details
Image. Upload an image to display
Image link: Alternatively, you can choose to add a link of an image you have uploaded elsewhere.

Alternative name. Use an alternative text to describe the appearance and function of your image for SEO purposes and better user experience. 


Object fit. This setting defines how an element responds to the height and width of its content box.

Maintain aspect ratio and clip protrusions. The image keeps its aspect ratio, but is resized to fit within the given dimension. 

Maintain aspect ratio. This value increases or decreases the size of the image to fill the box while preserving its aspect-ratio.

Fill by stretching. This value stretches the image to fit the content box, regardless of its aspect-ratio.

Auto. The image is not resized. 


Width. This setting specifies the width of your image. 
Height. This setting specifies the height of your image. 

Margin & Padding 
Margin. This setting allows you to control the space around the image's border by changing the top, bottom, left and right values. 
Padding. This setting allows you to control the space between the content and borders of the image by changing the top, bottom, left and right values. 


Border style. This property sets the line style for all four sides of the image's border. Choose between none, solid, dotted, double or dashed option.  

Border radius top left and right. This setting allows you to set the border radius in the top left and right corner of the image. 

Border radius bottom left and right. This setting allows you to set the border radius in the bottom left and right corner of the image. 

These values can be set as a percentage or a specific size in pixels.

Border width. This property allows you to set the width of your image's border. It can be set as a specific size in pixels. 
Border color. This setting allows you to set the color of your image's border and create the look you want. 

Link. In this section you can add a hyperlink to your image. 
Link target. Set how the link opens. Choose between "Open link in same tab" for the same window or "Open link in new tab" for a new tab. 
Once you have created your image click the "Apply" button at the bottom right of your screen. 

    • Related Articles

    • How to create a product element

      Reactive allows you to add products into your content. You have full control over which products display, and how they are presented. To create a product element, navigate to the Pages section from the sidebar menu of your admin panel under Website. ...
    • How to create a slider element

      Reactive allows you to add multiple slides to your website that work perfectly, without a fuss. To create a slider element, visit the admin panel and click the Pages section under Website. Create a new page or edit an existing one. You can refer to ...
    • How to create a product list element

      Reactive allows you to present a list of products on your pages. To create a product list, navigate to the Pages section from the sidebar menu of your admin panel under Website. Create a new page or edit an existing one. You can refer to our ...
    • How to create a Google Map element

      The Google Map element allows you to add customized maps anywhere on your site. To create a new Google Map element, navigate to the Pages section from the sidebar menu of your admin panel under Website. Create a new page or edit an existing one. You ...
    • How to create a Code Block element

      The code block element is very useful. This allows you to embed the custom code that you want onto your page. To create a code block element, navigate to the Pages section from your Reactive admin under Website. Create a new page or edit an existing ...