< Toggle Sidebar > Toggle Sidebar

Breadcrumb Module - Theme Customiser

The Theme Customiser and your Breadcrumb Header Module

In this document we will go over how to use the Theme Customiser to style your Breadcrumb Header Module. This will set a global default for your element in a similar way to any other Divi Theme element.

How to Access the Customiser

In your WordPress Dashboard look on your left hand side bar menu for Appearance. When you mouse over Appearance you will see a menu item called Customise.

Appearance and Customise menu
Appearance and Customise Menu

Click on the Customise Menu Item. This will take you directly to the Customise Interface.

On the left you have the Customise menu and on the right you have your WordPress website showing the selected theme on the homepage.

Note: You can also access your Customise interface from the Divi Menu in your WordPress Dashboard. Your Menu may have different items in it according to which plugins you have.

Divi and Customise Menu
Divi and Customise Menu

The DF Breadcrumb V2 Panel

DF – Breadcrumb V2 Divi Module defaults can be customized in the “DF Breadcrumb V2” panel of the Theme Customizer. Go to Divi > Theme Customizer > DF Breadcrumb V2.

Breadcrumb Theme Customise Panel
Breadcrumb Theme Customise Panel

Sections

Click on DF Breadcrumbs V2 panel link. There will be section options for

  • General
  • Title
  • Sub Title
  • Breadcrumb Links
  • Breadcrumb Separator
  • Breadcrumb Last
Breadcrumb Theme Customise Sections
Breadcrumb Theme Customise Sections

General Section

General section handles defaults for Text Orientation and Default Background Color.

  • Text Orientation : Text orientation handles the orientation of the title, sub-title and the breadcrumbs. There are 4 options.
    • Left : Aligns title, sub-title and breadcrumbs to the left
    • Right : Aligns title, sub-title and breadcrumbs to the right
    • Center : Aligns title, sub-title and breadcrumbs to the center
    • Title to the left, breadcrumbs to the right : Aligns title and sub-title to the left and breadcrumbs to the right.
  • Background Color: Sets the background color of the entire breadcrumb. Setting this value will render a background color for the Divi module even if the background color is not select in the module options.
General Section for Text Orientation Settings
General Section for Text Orientation Settings

Title Section

Title section handles defaults for styling the breadcrumb title. Options are:

  • Font
  • Text Size
  • Font Style
  • Color
  • Letter Spacing
  • Line Height
Breadcrumb Title Options
Breadcrumb Title Options

Sub Title Section

Sub Title section handles defaults for styling the breadcrumb sub title. Options are:

  • Font
  • Text Size
  • Font Style
  • Color
  • Letter Spacing
  • Line Height
Breadcrumb Sub Title Options
Breadcrumb Sub Title Options

Breadcrumb Link Section

Breadcrumb link section handles defaults for styling the breadcrumb links. Options are:

  • Font
  • Text Size
  • Font Style
  • Color
  • Letter Spacing
  • Line Height
Breadcrumb Link Options
Breadcrumb Link Options

Breadcrumb Separator Section

Breadcrumb separator section handles color styling option of the breadcrumb separator.

Breadcrumb Separator Options
Breadcrumb Separator Options

Breadcrumb Last Section

Breadcrumb last section handles defaults for styling the breadcrumb last text (text without a link). Options are:

  • Font
  • Text Size
  • Font Style
  • Color
  • Letter Spacing
  • Line Height
Breadcrumb Last Options
Breadcrumb Last Options
Breadcrumb Header for Divi Builder

Breadcrumb Module

Adds a new clean header with breadcrumbs powered by the Yoast SEO plugin. 
Learn More