Button Particle Documentation

Display one or multiple buttons aligned horizontally. See how Buttons can be designed beautifully on Demo Page.

# Button Package contents

Files Description
jlbutton.yaml Contains the Button particle settings.

jlbutton.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 Button particle 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 Button particle (i.e: Home) -> Layout tab -> Drag and drop the Button Particle from Particles panel (left corner) to the section you want to display the particle.


Settings Description
Items List Button items to show. You can add new items to the collection using the plus + icon
Button Size Set the button size.
Full Width Button Set Full Width Button
Column Gap Set the size of the column gap between multiple buttons.
Row Gap Set the size of the row gap between multiple buttons.
CSS Classes CSS class name for the particle.

Items You can add new items to the collection using the plus + icon

Settings Description
Button Label Specify the button label.
Link Specify the link for button.
Link Title Enter an optional text for the title attribute of the link, which will appear on hover.
Target Open the link in a same or new window.
Icon Pick an optional icon.
Icon Alignment Choose the icon position.
Style Set the button style.

General, Parallax and Parallax Background tab

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


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>