The DiviFlash Table of Contents module organizes content hierarchies by automatically generating a dynamic outline from headings, simplifying navigation.
Content
Content
- Title: Input the title for the table of contents.
- Title Tag: Choose the HTML tag for the title of the table of contents.
- Select Heading Tags: Choose which heading tags you want to include in the table of contents.
- Exclude Heading Based on Class: Assign a CSS class to a heading and input the CSS class here to exclude it from the table of contents.
- Exclude Container Based on Class: Assign a CSS class to a module in the content and input that specific CSS class here to exclude the headings in that module from the table of contents.
- Hide Module: Choose if you want to hide the table of contents module if it doesn’t have enough headings.
- Heading Top Offset: Adjust the vertical spacing between the top of the page and the content heading.
Content Settings
- Hierarchical View: Enable this option to maintain a hierarchical view between the headings on the table of contents.
- Highlight Active Link: Enable this option to highlight the active heading link.
- Marker: Choose what kind of marker you want to use to list all the headings.
Title Settings
- Enable Full Header: Enable this option to make the table of contents title’s container full width.
- Collapsible TOC: Enable this option to make the table of contents collapsible.
- Title Icon: Enable this option to use an icon with the title of the table of contents.
- Gap Between Icon: Adjust the gap between the title and the icon.
- Expand/Collapse Speed in ms: Adjust the speed at which the table of contents will expand or collapse.
- Default Stage: Choose if the table of contents will be expanded or collapsed by default.
- Collapse When Sticky: Enable this option to keep the title of the table of contents fixed at the top of the page when it is collapsed.
- Expand Icon: Choose an icon for the title of the table of contents when it is expanded.
- Expand Icon Color: Choose the color for the title icon when the table of contents is expanded.
- Expand Icon Size: Adjust the size of the title icon when the table of contents is expanded.
- Collapse Icon: Choose an icon for the title of the table of contents when it is collapsed.
- Collapse Icon Color: Choose the color for the title icon when the table of contents is Collapsed.
- Collapse Icon Size: Adjust the size of the title icon when the table of contents is collapsed.
- Space Between Icon and Title: Adjust the gap between the title of the table of contents and the collapse icon.
- Icon Only: Enable this option to only display the collapse icon when the table of contents is collapsed.
Marker Settings
This is a conditional setting depends on what you choose as marker.
- If Number is choosed as marker you will typgraphy settings for the marker from H1 to H6
- If Icon is choosed as marker You get an icon selection option, adjust its size, change its color, and adjust the gap between the icon and the headings. You can choose different icons for different heading tags and apply different settings.
Background
Add a background color, gradient, image, and more to the module.
Admin Label
Change the module name or label if required which will only be visible to you.
Design
Header
Color, spacing, and border options for the title of the table of contents.
Header Title
Typography options for the title of the table of contents.
Heading Style
Typography and spacing options for all the heading tags in the table of contents.
Content Style
- Enable Content Height: Enable this option to customize the height of the table of contents and make it scrollable.
- Content Height: Adjust the height of the table of contents.
- Content Background Color: Pick a color for the background of the table of contents.
- Active Link Color: Pick a color to denote the active heading link color.
The rest of the options are for spacing and border of the table of contents.
Sizing
Adjust the width, height, and alignment of the entire module.
Spacing
Add custom margin and padding to the entire module’s container.
Border
Border customization options for the whole module’s container. You have the option to style each border individually or all the borders together.
Filters
Add color filters to all the module items.
Transform
Make changes to the scale and position of the module.
Animation
Apply a reveal animation effect to the module and customize the delay, duration, repeat, etc. of the animation.
Advanced
The default tab for all Divi modules to add custom CSS code, conditions, visibilities, etc.
Do You Still Have Questions?
If you still have questions, then contact our support team at support@diviflash.com
