Skip to content

Adding Breadcrumbs To Divi Theme Builder Page With Breadcrumbs Module

The WordPress Schema Plugin For Divi, Gutenberg & Shortcodes adds a dedicated Breadcrumb Module directly into the Divi Builder.

It automatically generates dynamic breadcrumb navigation trails for your pages, providing full styling controls for links, active items, and separator icons.

Key business and SEO benefits of adding breadcrumb trails include:

  • Enhanced User Experience (UX): Improves website layout and visual clarity for visitors.
  • Clear Site Hierarchy: Displays the visitor’s exact location within your site’s navigation structure.
  • Increased Visitor Engagement: Helps users browse related sections, increasing time spent on site.
  • Lower Bounce Rates: Offers easy navigation back to parent categories, keeping visitors on your site.
  • Optimized Internal Link Distribution: Distributes internal link authority from individual blog posts or product pages up to core category pages.
  • Rich Search Engine Snippets: Generates structured Breadcrumb Schema data, allowing Google to display breadcrumb navigation paths directly in search results.

Breadcrumb navigation is an essential feature for improving search engine visibility and site usability.

Pre-Requisites

Section titled “Pre-Requisites”

Install Plugin & Enable Breadcrumbs Schema

Section titled “Install Plugin & Enable Breadcrumbs Schema”

Install & Activate Schema Plugin. Enable Breadcrumbs Schema

  1. Install and activate the WordPress Schema Plugin For Divi, Gutenberg & Shortcodes plugin.

  2. Enable Breadcrumbs Schema and set up the default categories/taxonomies for your post types.

  3. Validate Schema using Google’s structured data testing tools.

  4. For a comprehensive step-by-step setup guide, visit the Breadcrumb Schema Documentation Guide.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Insert the Breadcrumb Module on a Divi Page

Section titled “Insert the Breadcrumb Module on a Divi Page”

Insert Breadcrumb Module On Divi Page

  1. Edit any page or template in Divi’s Visual Builder.

  2. Click the gray + icon to insert a new Divi module.

  3. The module selection modal window will open.

  4. Search for and select the Breadcrumb Module.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Breadcrumb Content Settings

Section titled “Breadcrumb Content Settings”

Breadcrumb Settings

  1. To configure breadcrumb behavior, open the Content tab in the Divi Breadcrumb Module settings.

  2. Available content options:

    • Show Home Link: Toggle ON to display the Home link at the beginning of the breadcrumb trail. Toggle OFF to hide it.
    • Home Item Title: Available when Show Home Link is ON. Customize the title for the first breadcrumb item (default is Home).
    • Is Last Item A Link?: Choose whether the current/last page in the breadcrumb trail appears as a clickable link (ON) or static text (OFF).
    • Minimum Items: Specify the minimum number of items required in a navigation path for the breadcrumb trail to display (default is 2).

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial
Section titled “Breadcrumb Container Design”

Breadcrumb Design

  1. To adjust overall container layout, open the Design tab in the Divi Breadcrumb Module settings:

    • Alignment: Align the breadcrumb trail to the Left, Center, or Right (default is Left).

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial
Section titled “Breadcrumb Link Styling”

Breadcrumb Link

  1. Open the Design tab and select the Breadcrumb Link section.

  2. Customize font family, font weight, text style, color, font size, letter spacing, and line height for all clickable breadcrumb links.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial
Section titled “Breadcrumb Last Item Styling”

Breadcrumb Last Item

  1. Open the Design tab and select the Breadcrumb Last Item section.

  2. Customize typography and colors specifically for the active/current page item at the end of the breadcrumb trail.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial
Section titled “Breadcrumb Separator Options”

Breadcrumb Separator

  1. Open the Design tab and select the Breadcrumb Separator section.

  2. Select a custom icon (e.g., angle right, arrow, slash) as the separator between breadcrumb items, and adjust icon size and color.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial
Section titled “Breadcrumb Item Spacing”

Breadcrumb Item Spacing

  1. Open the Design tab and select the Breadcrumb Item Spacing section.

  2. Adjust margin and padding around individual breadcrumb items and separators for precise layout control.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Custom CSS Controls

Section titled “Custom CSS Controls”

Custom CSS

  1. For advanced styling, open the Advanced tab in the Divi Breadcrumb Module settings and select Custom CSS.

  2. Add custom CSS rules targeting specific breadcrumb elements:

    • Main Element
    • Breadcrumb List wrapper
    • Breadcrumb item (including last item)
    • Breadcrumb item (excluding last item)
    • Last child breadcrumb item
    • Breadcrumb Separator

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial