FAQ Particle Documentation

  • JoomLeadTeam
  • 2 November 2016
  • No comments
  • Docs
Add an easy-to-create, stylish FAQ section to your website. Display your frequently asked questions in your sites easily without any kind of coding. See how FAQ can be designed beautifully on Demo Page.

# FAQ Package contents

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

Settings

Items You can add new items to the collection using the plus + icon

Settings Description
Title Customize the Title.
Content Customize the content.
Image An image field with an image picker.
Image ALT Enter the image’s alt attribute.
Link Specify the button link.
Link Text Specify the button label.
Tags Enter a comma-separated list of tags, for example: blue, white, black.

Filter Common settings for Filter

Settings Description
Filter Style Select the filter navigation style. The pill and divider styles are only available for horizontal Subnavs.
Reverse order Enable tags reverse order.
ALL Label Replace the All label tag
Position Position the filter navigation at the top, left or right. A larger style can be applied to left and right navigations.
Primary navigation The Primary navigation is not available for tab filter style and top filter position.
Animation Select an animation that will be applied to the content items when toggling between them.
Alignment Align the filter controls. The Alignment styles are only available for TOP filter position.
Margin Set the vertical margin.
Grid Width Define the width of the filter navigation. Choose between percent and fixed widths or expand columns to the width of their content.
Grid Column Gap Set the size of the gap between between the filter navigation and the content.
Grid Breakpoint Set the breakpoint from which the filter navigation and grid will stack.

Behavior Common settings for Behavior

Settings Description
Allow multiple open items Allow multiple open items on click.
Allow all items to be closed Allow all items to be closed on click.
Show Tooltip Use this option to show tags tooltip info.
Tooltip Position Choose one of these options to adjust the tooltip’s alignment.
CSS Classes CSS class name for the particle.

Tab Style

Settings Description
Title Style Settings Common settings for Title Style
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.
Content Style Settings Common settings for Content Style
Style Select a predefined text style, including color, size and font-family.
Predefined Color Select the predefined meta color.
Content Color Customize the content color instead using predefined text color.
You need to set the predefined color to None to use the customize color option.
Font Size Customize the content text font size.
Transform The following options will transform text into uppercased, capitalized or lowercased characters.
Margin Top Set the top margin.
Link Style Settings Common settings for Link Style
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.

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.