Content Toggle Documentation
Hide, switch or change the appearance of different contents/particles through a toggle. See how Content Toggle can be designed beautifully on Demo Page.
# Content Toggle Package contents
| Files | Description |
|---|---|
| jlcontenttoggle.yaml | Contains the Content Toggle particle settings. |
| jlcontenttoggle.html.twig | The Twig file to pull information, settings. |
| _jltoggle.scss | The custom Toggle style sheet. Use @import "jltoggle"; in your custom.scss file to import it. Gantry will automatically pick it up and compile it properly. |
Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.
Requirements Content Toggle 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 Content Toggle particle (i.e: Home) -> Layout tab -> Drag and drop the Content Toggle Particle from Particles panel (left corner) to the section you want to display the particle.
Settings
| Settings | Description |
|---|---|
| Content Before | Common settings for Content before |
| Title | Customize the title. |
| Content | Customize the content. |
| Process Twig | Enable Twig template processing in the content before. Twig will be processed before shortcodes. |
| Process shortcodes | Enable shortcode processing / filtering in the content before. |
| Module ID | Instead using custom content, you can use this option to pick up a Joomla module and use it when toggling the content. |
| Content After | Common settings for Content After |
| Title | Customize the title after. |
| Content | Customize the content after. |
| Process Twig | Enable Twig template processing in the content after. Twig will be processed before shortcodes. |
| Process shortcodes | Enable shortcode processing / filtering in the content after. |
| Module ID | Instead using custom content, you can use this option to pick up a Joomla module and use it when toggling the content. |
| Common settings | Common settings for button |
| Alignment | Center, left and right alignment may depend on a breakpoint and require a fallback. |
| Alignment Breakpoint | Define the device width starting from which the alignment will apply. |
| Alignment Fallback | Define an alignment fallback for device widths below the breakpoint. |
| CSS Classes | CSS class name for the particle. |
Tab Behavior
| Settings | Description |
|---|---|
| Type | Select toggle type: Switcher or Unfold
Switcher mode: Dynamically transition through different contents using the tabbed navigation. Unfold mode: Hide big chunks of content and show them on demand to your users. |
| Toggle Switcher | Common settings for Toggle Switcher |
| Color | Customize the toggle color. |
| Border Radius | Customize the border radius for circle border in percent(%). |
| Background | Customize the toggle background color. |
| Slider Border Radius | Customize the border radius for slider in px. |
| Margin Top | Set the top margin. Note that the margin will only apply if the content field immediately follows another content field. |
| Unfold Settings | Common settings for Title Style |
| Button Style | Set the button style. |
| Button Size | Set the button size. |
| Margin Top | Select the margin top. |
Tab Style
| 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. |
| Margin Top | Set the top margin. Note that the margin will only apply if the content field immediately follows another content field. |
| Content Settings | Common settings for Content. Please note: Dropcap, Columns, Show dividers and Columns Breakpoint options for the Custom Content ONLY. |
| Style | Select a predefined Content text style, including color, size and font-family. |
| Dropcap | Add dropcap for custom content |
| Columns | Set the number of list columns for custom content. |
| Show dividers | Show a divider between list columns. |
| Columns Breakpoint | Set the device width from which the list columns should apply. |
| Predefined Color | Select the text color. |
| Custom Color | Customize the content color. Set Predefined Color to None before using this feature. |
| Font Size | Customize the content text font size. |
| Margin Top | Set the top margin. Note that the margin will only apply if the content field immediately follows another content field. |
| Card Style Settings | Common settings for Card Style |
| Card | Select one of the boxed card styles or a blank card. |
| Size | Define the card’s size by selecting the padding between the card and its content. |
| 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