Content Toggle Documentation
# 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 |
|---|---|
| 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 Class | Add the particle css class here to Toggle between the content. |
| 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. |
| 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. |
| CSS Classes | CSS class name for the particle. |
Tab Switcher
| Settings | Description |
|---|---|
| Toggle Settings | Common settings for Toggle |
| 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. |
| 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 |
| Style | Select a predefined Content text style, including color, size and font-family. |
| 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. |
| 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. |
Toggle Between Particles
You can use the Switcher mode to toggle between two particles, here the tutorial to create a toggle switcher between two particles.
Step 1 Drag Content Toggle particle and two particles to toggle between into a section, for this case, I will create a toggle between two Pricing Table particles.
Step 2 Open Content Toggle particle -> select Switcher mode then define the CSS selector for the toggle target to, i.e: toggle-pricing
Step 3 Open the first Pricing Table particle → Block → CSS Classes → then add toggle-pricing into CSS Classes textbox
Step 4 Open the second Pricing Table particle → Block → CSS Classes → then add the same toggle-pricing css class
Important For second Pricing Table, We will add a Tag Attributes key hidden with Empty value to set it invisible by default. The second Pricing Table only visible when clicking on Toggle button. See screenshot below:
Save and check the page result. Please note that you need to add the sample data for your pricing tables in order to see the result when toggling.
General, Parallax and Parallax Background tab
Please take a look the documentation here for more detail about these tabs settings
Comments