Divider Particle Documentation

  • Tony
  • 3 October 2018
  • 2 Comments
  • Docs
Create dividers to separate content and apply different styles to them. See how Divider can be designed beautifully on Demo Page.

# Divider Package contents

Files Description
jldivider.yaml Contains the Divider particle settings.
jldivider.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 Divider 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 Divider particle (i.e: Home) -> Layout tab -> Drag and drop the Divider Particle from Particles panel (left corner) to the section you want to display the Divider.

Settings

Settings Description
Style Choose a divider style.
HTML Element Choose the divider element to fit your semantic structure. Use the hr element for a thematic break and the div element for decorative reasons.
Alignment/Alignment Breakpoint/Alignment Fallback Center, left and right alignment may depend on a breakpoint and require a fallback. These options won’t have any effect unlessSmall divider style is selected.
Border Width Customize the border top width.
Border Color Customize the divider color.
CSS Classes CSS class name for the particle.

General, Parallax and Parallax Background tab

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

Comments

Leave a Reply

You must be logged in to post a comment.