Introduction
The AB Tasty widgets are among the most visual features on the platform and can have a strong visual impact on your website for your visitors. Their global dimensions and their relation with the existign elements in the page are key factors whatever the goals you are trying to reach. Under the "Layout" tab, for each widget, you will find different options to give the widget:
- a global shape
- a position in the page
For some widgets, their shape is defined by their name. For example, the Image Pop-in widget is only available as a pop-in (a modal), not as a banner. Nevertheless, in the "Layout" tab, if you can't change their shape, you may find a way to change their dimensions.
Most frequent layouts
The four most frequent layouts among the widgets are:
Modal
This layout offers a centered modal (pop-in) which comes with an underlay (that you can darken or make fully transparent). In some widgets, you can change its dimensions. For others, its dimensions adapt on the content it contains (whether it is text only or images). And for some the two possibilities exist. The modal layout can see its container (border, background (color/image), drop shadow, underlay...) being customized in colors in the "Style" tab.
Top banner
Bottom banner
These two layouts offer a sticky full-width banner which can be placed at the top or at the bottom of the page. The banner layouts can see their container (border, background (color/image)...) being customized in colors in the "Style" tab.
Free placement
This option allows you to place a widget in the flow of the page between already existing elements.
It is not the easiest layout to set and you may need to know a little the existing structure of the elements of the page before using but it is the best layout to make the experience "seamless". We highly recommend it for widgets such as Social Proof or Promotional Banner. It is the default layout for the Progress Bar widget.
We will see below, in details, the four different sub-options you need to understand when using this layout: Before, At the beginning, At the end, After.
The free placement layout can see its container (border, background (color/image), drop shadow, underlay...) being customized in colors in the "Style" tab.
Let's recap all four with the Countdown widget in a simple gif:
Other layouts
In other widgets, such as Image Pop-in or Video Pop-in, you may find other layouts:
Fundamentally they are "modal“ layouts. Depending on the layout you select, you may have different sub-options. You will learn more about their subtleties on their respective documentations: Image Pop-in & Video Pop-in.
Some widgets don't even have a "Layout" tab such as Social Sharing Buttons or Christmas Hat.
"Free Placement" explained
Some widgets (like NPS, Social Proof, Promotional Banner...) offer the "free placement" layout. This option enables you to position the widget wherever you want onto the page (or almost).
Pre-requisites: it has to be position in relation with the existing elements of the page (<div>, <p>, <h2>, <section>...)
Once you've selected the element the widget will positioned in relation with, you have to define the relative position to it
- Click Select element.
- In the page, select the element on which you want to hook the widget.
- Select the option to position the widget Before, At the beginning, At the end or After the element.
- Before: Places the widget before the selected element.
- At the beginning: Places the widget at the beginning of the selected element (and therefore may inherit of the element existing styling).
- At the end: Places the widget at the end of the selected element (and therefore may inherit of the element existing styling).
- After: Places the widget after the selected element.
By default, the selected element is <body> and the option "At the beginning" which makes the widget visible at the top of the page and (if the body element is not very much styled) you can see the widget without too much inherited style.
Now, let's take an example with this HTML code:
<div class="myDiv" style="border:1px solid #393939; padding:2rem;">
<h2 style="color:blue; font-size:2rem;">Title</h2>
<p style="color:teal; font-size:0.8rem;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed elit cursus, facilisis magna et, molestie felis. Nunc fermentum quam felis, id finibus nunc sodales ac. Duis sagittis egestas mi, non auctor magna efficitur venenatis. Donec mollis risus nec urna fringilla, eu cursus risus aliquet. Suspendisse aliquam a tellus in malesuada.</p>
</div>
And see how the widget reacts depending on if I select the <div>, the <h2> or the <p> and if I select: Before, At the beginning, At the end or After on each one of them.
Comments
0 comments
Article is closed for comments.