< Toggle Sidebar > Toggle Sidebar

Breadcrumb Module - Layout Options

Base Styles and Layout Options for your Breadcrumb Header

Here are our base styles that are used for the Breadcrumbs and we cover how to use each area further down in this document.

We have 4 main styles for the Divi Breadcrumb Module:

Left Aligned

This is when all the main content for the product is Left Aligned. See the Screenshot below.

Left Aligned Breadcrumb Header
Left Aligned Breadcrumb Header

Center Aligned

The center aligned version of the breadcrumb has all the content in a center alignment setup.

Center Aligned Breadcrumb Header
Center Aligned Breadcrumb Header

Right Aligned

This is when we have all of the content over to the right hand side of the breadcrumb.

Right Aligned Breadcrumb Header
Right Aligned Breadcrumb Header

Title Left and Breadcrumb Right

This is when you have your breadcrumb over on the left side of the page and the breadcrumb to the right. The subtitle will also be left aligned with the page title.

Title Left Breadcrumb Right Header
Title Left Breadcrumb Right Header

The CSS Classes

The CSS that makes this all happen is pasted below.

We include a specific style sheet with the module to help you make it work well. If you are wanting to overwrite anything you can see the class names and targets we have used. This should be helpful for the coders out there.

Breadcrumb Header for Divi Builder

Breadcrumb Module

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