The Image Pop-in widget is part of the Promotional Content widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.
Introduction
The Image Pop-in widget lets you display a pop-in containing an image.
This widget can be useful if you want to catch your visitor’s attention on a specific offer, give more details on a specific option, item, or accessory by clicking on a button/link on a product page, or before leaving a page/website in order to retain your visitor. It can also be used for special events.
.
Configuration
Layout tab
Layout
We have five different layouts: four with text (image on the right, image on the left, image below, image above) and one without text (image only). By default, the "image only" layout contains a button, but you can remove it.
Image over text ratio
For the "image on the left" and "image on the right", you can choose the image over text ratio. By sliding the cursor on the axis, you can configure the image to take up 20% to 80% of the available width.
Dimensions
Widget dimensions based on content
By default, the "Widget dimensions based on content" toggler is toggled. This saves you from having to worry about the modal’s dimensions. If you upload a very large image, your pop-in will adapt accordingly based on the image (and text) ratio (length).
Other options:
If you untoggle the toggler, you will be able to define both the width and the height of the pop-in.
These can be configured (independently) in several dimensional units:
- px (pixels)
- % (percentage)
- em (element, which actually means that it is based on the size of the text in the element: if your font size is 18 px, then 1 em = 18 px)
- vw (1/100th of the window's (or viewport) width)
- vh (1/100th of the window's (or viewport) height)
- vmin (whichever is the smallest of vw or vh)
- vmax (whichever is the highest of vw or vh)
Depending on what you want to achieve and how responsive your pop-in needs to be, you may select one unit or another.
If you're digging the dimensional units in CSS, we strongly recommend reading this W3C article.
Preserve ratio (automatic height)
By default, the height toggler of the modal is enabled and set to "Preserve ratio (automatic height)". This way, you don't have to set a height, it takes what the modal needs and can even reach 100% of the available height in the viewport.
If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll down to read everything.
Known issue: the widget configuration form not overlapping the website
Once you're finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is resized to the available viewport/window's width.
Layer
Layer Position (z-index)
Suppose you've selected the "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget’s position: above everything, below everything, or precisely fine-tuned.
For more information, please read the dedicated article on z-index.
Content tab
Upload an image
As this widget is an image pop-in, the first thing you will be asked to do is add an image. By clicking "Select an asset from the Assets Library", you can either select an existing asset or upload an image from your computer.
Title
For the first four layouts (image on the right, image on the left, image below, image above), you can choose whether to display a title. Maximum length is 255 characters.
Message (text or HTML)
For the first four layouts (image on the right, image on the left, image below, image above), the message is mandatory. You must fill in the text area.
If you don't want to display a text, there are two options: use the "image only" layout or type a message in the text area, save the widget, and hide the element in the editor.
The text area supports multi-line messages. You can use HTML markup to add ordered or unordered lists. All the other styling aspects should be configured through the "Style" tab.
You can add also emojis. Click here to learn how.
Select 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 have 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 have to specify a button text. The widget will display a button.
- "The whole widget is a link": you will have to specify a URL. The widget will not display a button.
- "A click on the whole widget closes the widget": you won't have anything to add. The widget will not display a button.
- "None": the widget will not be clickable.
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 (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.
Background can be set up with an image using the image-fitting policy
4 options are provided:
- "Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container.
- "Contains": the image is resized keeping the aspect ratio so that the whole image is included in the background container (no overflow)
- "Fill": the image is resized to fill the background container without keeping the aspect ratio
- "None": the image is left unchanged.
Align text & button
In the "Text" collapsible group, in the "Style" tab, defining the alignment will impact both message and button.
Image Rounded Corners
If you apply a large border radius to the pop-in, it will impact the image and will round the two corners affected by the setting.
If you want to round the two remaining "square" corners of the image, you will have to do so in the editor (select Element, Edit Style, Border tab, and enter the same border radius value).
Round Pop-in
To display a round pop-in, use one of two options:
1) Set your widget up, save it, open variation menus in the editor, click on "Add CSS" and add:
.ab_widget_container_popin-image_content {border-radius: 50% !important;}
2) Select the "image only" layout, upload a "round image" with transparent background, and use a transparent background color in the "Container" group in the "Style" tab.
Conditions tab
Select the Triggering and Recurrence options you want to apply to the Image pop-in widget.