Popover Particle Documentation

Create beautiful, responsive and professional marker icon that can be displayed on top of images. See how Popover can be designed beautifully on Demo Page.

# Popover Package contents

Files Description
jlpopover.yaml Contains the Popover particle settings.

jlpopover.html.twig The Twig file to pull information, settings.

Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.

Requirements Popover requires Uikit 3 for Gantry 5 Atom to be installed and enabled in your theme layout settings.

Go to Template/Theme Settings > select the Layout to add Popover particle (i.e: Home) -> Layout tab -> Drag and drop the Popover Particle from Particles panel (left corner) to the section you want to display the Popover.

Settings

Settings Description
Image An image field with an image picker.
Image ALT Enter the image’s alt attribute.
Image Width Enter the popover image’s width.
Image Height Enter the popover image’s height.
Items List marker items on image. You can add new items to the collection using the plus + icon. Here the tutorial using Using particle collections.
CSS Classes CSS class name for the particle.

Items Click Items field to enable it, then you can add new items to the collection using the plus + icon

Settings Description
Left Enter the horizontal and vertical position of the marker in percent.
Top Enter the horizontal and vertical position of the marker in percent.
Title A text field for headings
Meta A text field for meta text like the author or published date.
Content A text area for the main text
Image An image field which opens the image picker.
Image ALT Enter the image’s alt attribute.
Link Text Specify the button text.
Link Specify the link for button.
Note: Scroll smoothly added automatically to internal link that contains a URL fragment to add the smooth scrolling behavior.
Position Select a different position for this item.

Style Tab

Settings Description
Mode Display the popover on click or hover.
Position Select the popover’s alignment to its marker. If the popover doesn’t fit its container, it will flip automatically.
Width Enter a width for the popover in pixel.
Style Select a card style.
Animation Select animation on hover/click.
Size Define the card’s size by selecting the padding between the card and its content.
Title/Meta/Content Settings Common settings for title/meta/content (provide multiple options for designing.)
Image Settings Common settings for image.
Width Enter the image’s width
Height Enter the image’s height
Remove Padding Align image without padding.
Border Select the image’s border style. This option won’t have any effect if Padding is enabled

General, Parallax and Parallax Background tab

Please take a look the documentation here for more detail about these tabs settings

Video Tutorial

Comments

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>