Heading Particle Documentation
Extend the design of the advanced heading particle with different styles for headings to create beautiful typography. See how Heading can be designed beautifully on Demo Page.
# Heading Package contents
| Files | Description |
|---|---|
| jlheading.yaml | Contains the Heading particle settings. |
| jlheading.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 Heading 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 Heading particle (i.e: Home) -> Layout tab -> Drag and drop the Heading Particle from Particles panel (left corner) to the section you want to display the particle.
Settings
| Settings | Description |
|---|---|
| Title | Customize the heading title text |
| Description | Customize the description. |
| Link | Specify the link for heading. Scroll smoothly added automatically to internal link that contains a URL fragment to add the smooth scrolling behavior. |
| Target | Open the link in a same or new window. |
| Link Hover Effect | Show Link hover effect if linked. |
| CSS Classes | CSS class name for the particle. |
Style Tab
| Settings | Description |
|---|---|
| Title Style Settings | Common settings for Title Style |
| Style | Heading styles differ in font-size but may also come with a predefined color, size and font. |
| Decoration | Decorate the headline with a divider, bullet or a line that is vertically centered to the heading. |
| Predefined Color | Select a predefined text color. |
| Custom Color | Customize the title color instead using predefined title color mode. You need to set the predefined color to None to use the customize color option. |
| Font Size | Customize the title text font size. |
| Transform | The following options will transform text into uppercased, capitalized or lowercased characters. |
| Font weight | Use this option to modify the font weight of your text. |
| HTML Element | Choose one of the elements to fit your semantic structure. |
| Description Settings | Common settings for Description |
| Style | Select a predefined description text style, including color, size and font-family. |
| Predefined Color | Select the predefined description color. |
| Custom Color | Customize the description color. Set Predefined Color for Meta to None before using this feature. |
| Font Size | Customize the description text font size. |
| Transform | The following options will transform text into uppercased, capitalized or lowercased characters. |
| Font weight | Use this option to modify the font weight of your text. |
| Margin Top | Set the top margin. Note that the margin will only apply if the content field immediately follows another content field. |
General, Parallax and Parallax Background tab
Please take a look the documentation here for more detail about these tabs settings
Comments