Image Pop-in Widget

 

The Image Pop-in widget is part of the Promotional Content widget category. For more information on the widgets, please refer to Widgets Set-up Guide.

 

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.

55.png    56.png57.png

 

Layout tab

58.png

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.

59.png

60.png

61.png

62.png

63.png

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.

64.gif

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.

65.gif

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. 

66.gif

Layer

Layer Position (z-index)

67.png

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

68.png

Upload an image

As this widget is an image pop-in, the first thing you will be asked to do is upload an image or paste the image path.

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.

 

69.gif

 

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

70.png

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.

Image Pop-in widget Styling Specificities

Align text & button

In the "Text" collapsible group, in the "Style" tab, defining the alignment will impact both message and button.

71.gif

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 Promotional Banner widget.

Was this article helpful?

/