Image

This component allows you to display an image, differentiated for desktop and mobile devices, with some options to define how it looks:

Image

Here you can upload the main image to be displayed in the component.

Once done, a second option will become visible so you can upload an image specifically for mobile devices. If you don’t upload an image here, the first one will be used on all devices.

---

Width

This option allows you to define how the image will behave, which will be directly related to what’s defined at the Maximum container width option in Theme settings > Design > Theme styles.

Grid width

Sets the image to stretch to the maximum available, when Maximum container width it’s any other than Browser width.

Small

Sets the image width to 50% of the available space.

Medium

Sets the image width to approximately 66% of the available space.

Large

Sets the image width to approximately 83% of the available space.

Full width

Sets the image width to occupy the full browser width, regardles of what’s defined at Maximum container width.

---

Horizontal position

This option allows to define the position of the image in the horizontal axis. Will only become visible and available to be used when the Width option is Small, Medium or Large.

---

Appearance

This group contains the following options to customize the component:

• Top margin: allows to control the upper margin of the section.
• Bottom margin: allows to control the lower margin of the section.
• Content colors: allows to choose the Color Pack for the component.

---

Animations

The Customize options allows to adjust the animations for this specific component. You can read which ones are available in this page.