Call To Action Particle

  • Tony
  • 6 April 2020
  • 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.

# Call To Action Package contents

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

Settings

Settings Description
Title Customize the title text
Content Customize the content.
Link Specify the button link.
Scroll smoothly added automatically to internal link that contains a URL fragment to add the smooth scrolling behavior.
Link Text Specify the button label.
Layout Settings Common settings for Button Layout
Button Alignment Align the button to the top, left, right or place it between the title and the content.
Grid Width Define the width of the button within the grid. Choose between percent and fixed widths or expand columns to the width of their content.

This option won’t have any effect unless Button Alignment is set to Left or Right

Grid Column Gap Set the size of the gap between the button and the content.

This option won’t have any effect unless Button Alignment is set to Left or Right

Grid Breakpoint Set the breakpoint from which grid cells will stack.

This option won’t have any effect unless Button Alignment is set to Left or Right

Vertical Alignment Vertically center grid cells.

This option won’t have any effect unless Button Alignment is set to Left or Right

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.
Color Customize the title color.
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.
Margin Top Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.
Description Settings Common settings for Description
Style Select a predefined description text style, including color, size and font-family.
Color Customize the description color.
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.
Link Settings Common settings for Link
Target Target browser window when item is clicked.
Style Set the button style.
Button Size Set the button size.
Margin Top Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.

This option won’t have any effect unless Button Alignment is set to Bottom or Between

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.