Popover Widget
With this widget you can position each item through coordinates on top of a main image and display content inside a dropdown. The main image is chosen in the widget settings.
Toggle Icon
The Popover widget provides different toggle icons. You also have the option to display the panel on hover or click.
Panels and Positions
You can choose between different panel styles for the dropdown. The Popover widget also allows you to align the dropdown to the top, bottom, right or left.
Flagship Store
300 Huaihaizo
Shani 200021
China
Shani 200021
China
Store
96 Hauptstraße
21376 Berlin
Germany
21376 Berlin
Germany
Store
436 Franklin Street
Los Angeles
90003 USA
Los Angeles
90003 USA
-
Flagship Store
300 Huaihaizo
Shani 200021
China -
Store
96 Hauptstraße
21376 Berlin
Germany -
Store
436 Franklin Street
Los Angeles
90003 USA
Popover Options
| Layout Options | Settings | Description |
|---|---|---|
| Width | [Number] | Define the popover width. |
| Image | [Image URL] | Select the main image and define the width and height. |
| Popover Position | Top, Bottom, Left, Right | Define the alignment of the dropdown. |
| Mode | Click, Hover | Alignment of the navigation. |
| Toggle Icon | Eye, Info, Info Circle, Search, Search Plus, Plus, Plus Square, Plus Square Outlined, Plus Circle | Choose your toggle icon. |
| Color | Use a high-contrast color inside the overlay. | |
| Panel | Box, Box Primary, Box Secondary | Select the Panel. |
| Media Options | Settings | Description |
|---|---|---|
| Media Display | Display the image or video of all items. | |
| Media Image | [Number] | Set the width and height of the image in pixels. |
| Media Alignment | Above Title, Below Title, Left, Right | Define the image alignment. |
| Media Border | None, Circle, Rounded | The appearance of the images inside the Popover. |
| Overlay | None, Link, Icon, Image | Define what will be displayed inside the overlay or hide the overlay. |
| Overlay Animation | Fade, Slide Top, Slide Bottom, Slide Left, Slide Right | The animation that will be applied to the overlay when being displayed on hover. |
| Overlay Image Animation | None, Fade, Scale, Spin, Grayscale | The animation that will be applied to the image on hover. |
| Content Options | Settings | Description |
|---|---|---|
| Text Display | Show or hide title and content. | |
| Text Title Size | Default, H1, H2, H3, H4, Extra Large | Define the font size of the title. |
| Text Alignment | Left, Right, Center | Define the text alignment. |
| Link Display | Display the Read More link. The link URL is added to each item in the Content Manager. | |
| Link Style | Text, Button, Button Primary, Button Large, Button Large Primary | Set the style of the Read More link. |
| Link Text | [Text] | Define the link text. |
| General Options | Settings | Description |
|---|---|---|
| Custom HTML Class | [Text] | Set a custom HTML class that will be added to the widget element in the rendered output. |
| Link Target | Open all links in a new window. |