The Table of Contents block automatically generates a clickable navigation menu based on the headings in your page content. This block helps visitors quickly scan and navigate to specific sections of your page, improving user experience and making long-form content more accessible.
Table of Contents blocks are especially useful for detailed guides, tutorials, product documentation, blog posts, and any page with multiple sections that users may want to jump to directly.
Adding the Table of Contents Block to Your Pages
Follow these steps to add a Table of Contents block to your SeedProd page:
Step 1: Add the Block
Under Design > Blocks, drag and drop the Table of Contents block into the desired section of your page. This block is typically placed near the top of your page content, after the introduction but before the main sections begin.
Step 2: Configure Content Settings
Once added, click on the Table of Contents block to open its settings. In the Content tab, you’ll find several options to customize how your table of contents works:
General Settings:
- Show Title: Toggle whether to display a title above your table of contents (e.g., “Table of Contents” or “On This Page”)
- Title Text: Customize the text that appears as the title
- Title Tag: Choose the HTML heading tag for the title (H2, H3, H4, or DIV)
- Include Headings: Specify which heading levels to include in your table of contents using a comma-separated list (e.g., h2,h3,h4). This determines which headings from your page will appear as links
- Content Container: Enter the CSS selector for the container where SeedProd should scan for headings. Leave blank to scan the entire page
- Exclude Selectors: Add CSS selectors for any headings you want to exclude from the table of contents (comma-separated)
Display Options:
- Show Numbers: Add automatic numbering to your table of contents items (e.g., 1, 2, 3)
- Hierarchical Numbering: Use nested numbering for sub-headings (e.g., 1.1, 1.2, 2.1)
- Smooth Scroll: Enable smooth scrolling animation when users click on table of contents links
- Scroll Offset: Set the number of pixels to offset the scroll position, useful when you have a fixed header
- List Style: Choose the bullet style for your table of contents (None, Disc, Circle, Square, or Decimal)
Additional Options:
- Minimize Box: Allow users to collapse and expand the table of contents with a toggle button
Step 3: Customize the Design
In the Advanced tab, you can customize the visual appearance of your table of contents:
Title Styles:
- Title Typography: Adjust font family, size, weight, and line height for the title
- Title Color: Set the color of the title text
- Title Spacing: Control the spacing around the title
Link Styles:
- Link Typography: Customize font settings for the table of contents links
- Link Color: Set the default color for links
- Link Hover Color: Choose the color when users hover over links
- Item Spacing: Adjust the space between each table of contents item
- List Indent: Control the indentation for nested heading levels
Container Styles:
- Background Color: Set the background color for the table of contents container
- Container Width: Adjust the width in pixels or percentage
- Container Padding: Add internal spacing within the container
- Border: Add and customize borders around the table of contents
- Border Radius: Create rounded corners for the container
You can also access advanced options for spacing, custom CSS classes, positioning, device visibility, and entrance animations to create exactly the look and behavior you want.
Step 4: Save Your Changes
Once you have finished configuring the Table of Contents block and customizing its appearance, make sure to save your work.
Popular Table of Contents Uses
Table of Contents blocks work great for organizing various types of content:
- Long-Form Blog Posts: Help readers navigate detailed articles and guides
- Tutorial Pages: Let users jump directly to specific steps or sections
- Product Documentation: Provide quick access to different features or topics
- Sales Pages: Allow prospects to skip to sections most relevant to them
- Landing Pages: Improve navigation on single-page designs with multiple sections
- Resource Guides: Make comprehensive resources easier to browse and reference
Tips for Effective Table of Contents
Use Descriptive Headings: Your table of contents is only as good as your headings. Write clear, descriptive headings that accurately describe each section’s content.
Keep It Simple: Don’t include too many heading levels. Typically, including H2 and H3 headings is sufficient. Going deeper can make your table of contents cluttered and hard to scan.
Place It Strategically: Position your table of contents where users will find it useful—typically after a brief introduction but before diving into the main content.
Consider Sticky Positioning: For very long pages, consider making the table of contents “sticky” so it remains visible as users scroll down the page.
Test Smooth Scrolling: Enable smooth scroll for a more polished user experience, but make sure to set an appropriate scroll offset if you have a fixed header that might cover your content.
Use the Minimize Option for Mobile: On mobile devices where screen space is limited, enabling the minimize option allows users to collapse the table of contents when they don’t need it.
Maintain Consistent Heading Structure: Use heading tags in the proper hierarchical order (H2, then H3, then H4) to ensure your table of contents displays with correct nesting.
Troubleshooting
Table of contents is empty? Make sure you have headings on your page that match the heading levels specified in your “Include Headings” setting. The block can only display headings that exist in your content.
Links not working? Verify that your headings have proper IDs generated. If you’re using a custom content container, make sure the CSS selector is correct.
Smooth scroll not working? Check that smooth scrolling is enabled in your settings. Also verify that your scroll offset is set appropriately for your page layout.
Wrong headings appearing? Use the “Exclude Selectors” option to remove specific headings from your table of contents, or adjust your “Include Headings” setting to only show the levels you want.
Styling conflicts? If your table of contents doesn’t look right, check for CSS conflicts from your theme. You may need to add custom CSS classes or adjust your container styles.
You’ve successfully added a Table of Contents block to your page! This powerful navigation tool helps visitors find exactly what they’re looking for, improving engagement and user experience. Experiment with different styles and settings to create a table of contents that matches your brand and serves your audience.