Heading Particle Documentation

  • JoomLeadTeam
  • 2 November 2016
  • No comments
  • Docs
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.
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.
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

Leave a Reply

You must be logged in to post a comment.