Breadcrumb element is one of the frequently requested elements that is being added to Jupiter X Core since version 1.6. It allows you to add a Breadcrumbs element to your pages or title bar templates. In fact, you can use it in any template you want, but the best place you can use it is in the Title Bar section.
Breadcrumbs are being used to show your users where they are on your website. It shows an inline hierarchy with the page links up to your homepage so your viewers understand where they are. Although you could use the default BreadCrumb in the Page Title settings in the Customizer in Jupiter X lately (please refer to this article), introducing the Page Title templates required the breadcrumbs element for the sake of customizability. In this article, we will overview the BreadCrumbs element and see how we can use it in a Custom Page Title template.
Note: You need the latest version of the Jupiter X Core plugin to be able to use the BreadCrumbs element.
Adding a Custom Page Title Template
1 – From the WordPress side dashboard click on the Jupiter X -> Customize.
2 – In the customizer, navigate to Title Bar and then choose the Custom type. Then click on New or chose from one of the old title bar templates if you have any. You can also add a Section template in Elementor -> Templates -> Saved Templates and then choose it from the Customizer -> Title Bar -> Custom type.
3 – In the Elementor editor, drag a BreadCrumb element into the template.
4 – Configure the BreadCrumb as you like, style it and then save your template.
5 – You can also add or edit any other content as you wish. As an example, we will add a Heading element and set it’s content to be fetched dynamically on each page.
Note: If you wish to have a different page title template for the pages, archive pages or post types, you should use the Jupiter X Customizer Conditions. So, if you wish to create a page title bar template and have different page titles for archive or individual pages, simply chose a condition and then create the template based on your selection.
6 – Save the customizer and refresh your website to see the bread crumb is taking effect on the new page title template.
Configuring the BreadCrumb
Breadcrumb element has 3 content options:
Alignment
You can set different alignment for different devices. Just choose from the right, left or center options and if you wish to set a different alignment for the mobile or tablets, chose the device icon and then set the alignment.
HTML Tag
You can wrap the breadcrumb in different HTML tags. Choose wisely based on your SEO requirements. Default is “div” but you can select the “nav” if it’s your main navigation element.
Breadcrumbs Type
This is the most important configuration for the breadcrumbs element. It gives you enough flexibility to customize the way you would like to show your breadcrumb hierarchy. By default, it is using a breadcrumbs hierarchy which is provided exclusively by Jupiter X, but if you wish to use other methods and configure them in a way you wish, you can choose different types such as YOAST SEO breadcrumbs or BreadCrumb NavXT. These are the two most popular breadcrumb plugins and have their own configurations. You would need to install them to be able to use this feature.
As soon as you choose a different breadcrumb type, you will be able to configure it in the plugin setting. For YOAST breadcrumb settings, please refer to this and for the NavXT breadcrumb, check this article.
Styling the BreadCrumb
There are a couple of styling options you can set for the breadcrumbs element, no matter what type of breadcrumbs you are using.
Text Color
The text color for the simple texts in your breadcrumbs. Usually, it will be your last item in the hierarchy and it is not a link.
Typography
The font and typography settings for your breadcrumbs. Some of the options are possible to have different values on different devices.
Separator Color
It is all about the separator color. Usually, the separator is the > character, but if you changed it in the YOAST or NavXT options, you will have a different sign as the separator. You can change the color of it anyway.
Background Color
You can set a background color for your breadcrumb element using this option.
Link Color
The link color can be changed from here. You can set the different colors for the Normal state or Hover state.
Some other styling options such as margins, paddings, borders, and even custom positioning are available in the Advanced tab, however, the advance tab is actually available for all of the other elements as well.
