Button Particle Documentation

  • Tony
  • 7 April 2020
  • 2 Comments
  • Docs
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

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

Comments

  1. GUSTAVO PARRA ROJAS

    Hola, como puedo cambiar el color del boton, quiero ponerle un color naranja (Orange)

    Hi, How I can to change the button colour? I want a button colour orange. Can you help me

Leave a Reply

You must be logged in to post a comment.

JoomLead Gantry5 Particles 2.2.10 released, new features, bug fixes and more Learn more
Flash Sale. Get Up to 25% Off - Coupon: FLASH25 Shop Now