Adding Breadcrumbs To Divi Theme Builder Page With Breadcrumbs Module

WordPress Schema Plugin For Divi, Gutenberg & Shortcodes plugin adds Breadcrumb Module into the Divi Builder.

It generates breadcrumb trails for the current page. Styling options for breadcrumb trail links and separator icons are available.

Breadcrumbs are beneficial for the following reasons :-

  • It improves UX and UI experience of your user
  • It shows your user where they are within the navigation hierarchy.
  • It helps build interest and keeps visitors on your site longer.
  • It reduces bounce rates. It’s an important signal for search engines to increase page rank.
  • It helps transfer link juice from long tail pages to higher ones.
  • Breadcrumbs schema data communicates with search engines in a language they understand.

If you want to increase web traffic to your website, breadcrumbs is a MUST!!!

Pre-requisites

  1. A WordPress website
  2. WordPress Schema Plugin plugin
  3. Divi / Extra Theme by Elegant Themes

Tools

  1. Computer

Total Duration : 5 minutes

FREE DOWNLOAD

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 1 - Install & Activate Schema 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 & setup the default taxonomies for a post type.
  3. Validate Schema using Google's structured data testing tool.
FREE DOWNLOAD

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 2 - Insert Breadcrumb Module On Divi Page

Insert <strong>Breadcrumb Module</strong> On Divi Page
  1. Edit a page in Divi's Visual Builder
  2. Click + icon to add a divi module
  3. A grid list modal window pops up.
  4. Select the Breadcrumb Module
FREE DOWNLOAD

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 3 - Breadcrumb Settings

Breadcrumb Settings
  1. For Breadcrumb Settings select the Content tab in breadcrumb divi module.
  2. The following at the options
    • Show Home Link Toggle ON to show the Home breadcrumb at the start of the breadcrumb trail. Set OFF to remove the home breadcrumb
    • Home Item Title - Setting is available when Show Home Link is ON. This is the title for the first breadcrumb. Default is set to Home
    • Is Last Item A Link? - Shows the last item of the breadcrumb as a link or static text when toggled ON and OFF respectively.
    • Minimum Items - Set the minimum number of items that need to be on the breadcrumb trail for the breadcrumb to show up. Default is 2.
FREE DOWNLOAD

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 4 - Breadcrumb Design

Breadcrumb Design
  1. For Breadcrumb design settings select the Design tab in breadcrumb divi module.
    • Alignment - One can align the breadcrumb trail to be left, center or right aligned. Default is left.
FREE DOWNLOAD

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 5 - Breadcrumb Link

Breadcrumb Link
  1. For Breadcrumb Link design settings select the Design tab in breadcrumb divi module.
  2. This section styles the links present on a breadcrumb trail.
    • Set styles for font, font weight, font style, text alignment, color, font size, letter spacing, line height etc
FREE DOWNLOAD

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 6 - Breadcrumb Last Item

Breadcrumb Last Item
  1. For Breadcrumb Last Item design settings select the Design tab in breadcrumb divi module.
  2. This section styles the last item on a breadcrumb trail.
    • Set styles for font, font weight, font style, text alignment, color, font size, letter spacing, line height etc
FREE DOWNLOAD

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 7 - Breadcrumb Separator

Breadcrumb Separator
  1. For Breadcrumb Separator design settings select the Design tab in breadcrumb divi module.
  2. This section, helps you choose an icon for the breadcrumb separator. One can set the font size and color for the icon
FREE DOWNLOAD

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 8 - Breadcrumb Item Spacing

Breadcrumb Item Spacing
  1. For Breadcrumb Item Spacing design settings select the Design tab in breadcrumb divi module.
  2. Set the margin and padding for each of the breadcrumb item including separator.
FREE DOWNLOAD

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 9 - Custom CSS

Custom CSS
  1. Custom CSS section is available in the Advanced tab of the breadcrumb divi module.
  2. One can add custom css for
    • Main Element
    • Breadcrumb List element
    • Breadcrumb item including last child
    • Breadcrumb item excluding last child
    • Last child breadcrumb item
    • Breadcrumb Separator
FREE DOWNLOAD

Start your FREE trial. You can cancel your trial anytime within the trial period.