The Before-After Image widget is part of the Special widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.
Introduction
The Before & After widget enables you to display 2 images and compare them side by side.
This can be useful:
- If you want your visitors to be presented with or a product
- To compare a product (before using the product and after)
- To test a new way of displaying images on your product pages
-
To showcase an offer (“Drag to discover your bonus”)
Good to know 💡
An informative message is displayed if you try to create a widget when one has already been configured for that variation or scenario. Once closed, it won’t be displayed again. However, this doesn’t prevent you from creating another widget if necessary.
Configuration
Layout tab
The Before-After image widget has two available layouts:
Modal
This option enables you to display the widget as a window that appears on top of the main screen. In the layout section, select where you want your modal to be placed on the screen (9 available options).
Free placement
This option enables you to position the widget in a specific place in relation to an existing HTML element:
- Click Select element.
- On the page, select the element on which you want to hook the widget.
- Select the appropriate option to position the widget Before, At the Start, At the End, or After the element.
|
Before |
Fix the widget before a specific element of the page |
|
After |
Fix the widget after a specific element of the page |
|
At the Start |
Place the widget in the HTML code, at the start of the element definition |
|
At the end |
Place the widget in the HTML code, at the end of the element definition |
Good to know 💡
When using the At the Start or At the End options, the widget may inherit the CSS styles of the selected element.
Next, select a presentation among these three options: separated by a slider, next to each other, or on top of each other.
Content tab
Required options
|
Option |
Usage |
|
Select the first image |
Select the desired image by uploading it from your browser or by entering the image path. You must add two images. |
|
Select the second image |
Optional options
|
Option |
Usage |
|
Display a title |
Enter a title common to both your images that will be displayed above the first image (depending on the chosen configuration) and above your message (if any). |
|
Display a message |
Enter a message common to both your images that will be displayed above the first image (depending on the chosen configuration). |
|
Display image captions |
Enter a caption for both your imported images. This caption will be displayed below each image. |
Widget link type
You can decide whether your widget should contain a clickable button (to close or redirect), whether it should be entirely clickable (to close or redirect) or whether it should have no link at all.
- "The button is a link": you will need to specify a button URL and a button text. The widget will display a button.
- "A click on the button closes the widget": you will need to specify a button text. The widget will display a button.
- "The whole widget is a link": you will need to specify a URL. The widget will not display a button.
- "A click on the whole widget closes the widget": you won't need to add anything. The widget will not display a button.
-
"None": the widget will not be clickable.
If you use a background image which looks like a "big ad", we recommend selecting "The whole widget is a link" and removing the paragraph with the editor once the widget is set.
Second CTA/link option
If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one.
Style tab
Select the style options (Container, Border, Close button) you want to apply to your widget.
From here, you can configure the size and layout of your modal.
Conditions tab
Select the Triggering and Recurrence options you want to apply to your widget.