Before & After

This component it’s ideal to make a comparison between two images, like perhaps you might have seen on stores that sell cosmetic products, where they show how the skin improves after applying a face cream compared to how it was before. It can also be used for example to showcase how a living room wall looks without a painting or not, among other cases.

When adding it you will find several options to customize it, which are explained next.

Width

Allows to define the maximum width that the component will stretch to the browser window.

You can read more about how this option will affect the component on this page.

---

Left and right space

This option will become visible if what you have defined at the Spacing option within Theme settings > Design > Theme styles is different than None.

It will allow you to remove the left and right space of the component, so it sticks to the browser edges.

---

Rounded corners

This option will become visible if what you have defined at the Rounded corners option within Theme settings > Design > Theme styles is different than None.

It will allow you to remove the rounded corners from the component, making it display rectangular edges.

---

Desktop images

Within this group of options you can upload the Before and After images for the component.

The After image will be positioned on the “back” of the section, while the Before image will be placed on top.

You will see a draggable element (handler) with which users will be able to uncover the After when moving it to the left side, or see the Before when moving the handler to the right side of the browser.

Note: Both images are mandatory for this to work properly.

---

Mobile images

This group of options will become visible and appear only when you upload both images on the previous group.

These options allow you to upload a different set of images for mobile devices. For this case as well both images are mandatory, meaning, if one of them it’s missing the Desktop images will be used for all devices.

---

Heading options

By enabling this, a Heading section will be displayed before the component’s content. You can find the list of options on this page.

---

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. This will affect the color of the titles if Overlap titles is disabled.

---

Animations

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