{"id":9284,"date":"2019-06-14T09:24:17","date_gmt":"2019-06-14T09:24:17","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=9284"},"modified":"2023-04-14T15:11:07","modified_gmt":"2023-04-14T15:11:07","slug":"how-to-customize-breadcrumbs-path","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-customize-breadcrumbs-path\/","title":{"rendered":"How to Customize Breadcrumbs Path"},"content":{"rendered":"\n<p>The <a href=\"https:\/\/crocoblock.com\/widgets\/breadcrumbs\/\" target=\"_blank\" rel=\"noreferrer noopener\">Breadcrumbs widget<\/a> of the <em>JetBlocks<\/em> plugin allows you to add the trail the visitor has gone to reach a particular page. It\u2019s convenient for the visitor as well for you as a creator. <a href=\"https:\/\/crocoblock.com\/blog\/wordpress-website-breadcrumbs\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Breadcrumbs<\/strong> <\/a>can also help search engines get your site to the first positions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"breadcrumbs-addition\"><strong>Breadcrumbs Addition<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Navigate to the WordPress Dashboard. Here you should scroll to the bottom and proceed to <strong><em>Crocoblock &gt; Theme Builder<\/em><\/strong>.<\/p>\n\n\n<p>note text=&#8217;This path is available only when the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-listing-grid-widget-overview\/\" target=\"_blank\" rel=\"noopener\"><strong>JetThemeCore<\/strong><\/a> plugin is installed and activated.&#8217;<\/p>\n\n\n\n<p>Open the <strong>Header<\/strong> tab. Here choose the header you want to edit (you may have several of them, so select the one you want to be showcased on your site with breadcrumbs). Or, build a new one by pressing the \u201c<strong>Add New<\/strong>\u201d button.<\/p>\n\n\n\n<p>Click on the \u201c<strong>Edit with Elementor<\/strong>\u201d link next to the header you want to modify and press the \u201c<strong>Edit Header<\/strong>\u201d button.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/03\/crocoblock-theme-builder-header.png\" alt=\"crocoblock theme builder header\"\n\n\n\n<p>Look for the <strong>Breadcrumbs<\/strong> widget and drop it to the desired place on the header section.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/03\/breadcrumbs-widget.png\" alt=\"breadcrumbs widget\">\n\n\n\n<p>Navigate to the <strong>Content <\/strong>and open its<strong> General<\/strong> <strong>Settings <\/strong>tab. Here you can work on the following fields:<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/03\/breadcrumbs-general-settings-tab.png\" alt=\"breadcrumbs general settings\" >\n\n\n\n<ul>\n<li><strong>Show on Front Page <\/strong>\u2014 enable to display <strong>Breadcrumbs <\/strong>on the front page of the WordPress website;<\/li>\n\n\n\n<li><strong>Show Page Title <\/strong>\u2014 switch on to show the current page&#8217;s title. Once enabled, you can select the <strong>Title HTML Tag<\/strong>;<\/li>\n\n\n\n<li><strong>Show Prefix <\/strong>\u2014 toggle to \u201cYes\u201d if you want to specify the <strong>Prefix for the breadcrumb path<\/strong>;<\/li>\n\n\n\n<li><strong>Custom Home Page Label <\/strong>\u2014 activate to change the default \u201cHome\u201d <strong>Label for home page <\/strong>into your option;<\/li>\n\n\n\n<li><strong>Custom post type link <\/strong>\u2014 this toggle should be left disabled to remove the link to custom post types in breadcrumbs;&nbsp;<\/li>\n\n\n\n<li><strong>Separator Type <\/strong>\u2014 select the default \u201cIcon\u201d option to choose and display the icon between the page title or \u201cCustom\u201d to set the text value that will separate items instead of the icons;<\/li>\n\n\n\n<li><strong>Icon Separator <\/strong>\u2014 appears when the \u201cIcon\u201d option is selected in the previous field. Hover over it to see two \u201c<strong>Icon Library<\/strong>\u201d and \u201c<strong>Upload SVG<\/strong>\u201d buttons. By pushing the first button, the Elementor Icon Library opens so that you can select the desired icon here. Once the second button is clicked, you can insert the SVG file directly to the WordPress Media Library by selecting the added files or adding new icons.<\/li>\n\n\n\n<li><strong>Path type <\/strong>\u2014 choose the \u201cFull\u201d option to display all the pages user has opened before the current one in the <strong>Breadcrumbs<\/strong>. Or pick the \u201cMinified\u201d option to show only the initial and current page;<\/li>\n\n\n\n<li><strong>Alignment <\/strong>\u2014 set the position of the <strong>Breadcrumbs<\/strong>;<\/li>\n\n\n\n<li><strong>Order <\/strong>\u2014 define whether you want to display the page title first and then breadcrumbs items or vice versa.<\/li>\n<\/ul>\n\n\n\n<p> Go to the <strong>Style<\/strong> tab and set the one you like the most. Right here, you can change the <strong>Normal, Hover, <\/strong>and <strong>Current<\/strong> type of presentation.<\/p>\n\n\n\n<p>Once all the changes have been implemented, press the \u201c<strong>Update<\/strong>\u201d button.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/03\/breadcrumbs-style-settings.png\" alt=\"breadcrumbs style settings\">\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"breadcrumbs-path-customization\"><strong>Breadcrumbs Path Customization<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Along with the settings that we\u2019ve previously applied, there are those to widen the <strong>Breadcrumbs<\/strong> widget\u2019s possibilities. You can customize the trial shown in the breadcrumbs.&nbsp;<\/p>\n\n\n\n<p>Proceed to the WordPress Dashboard, and go to <strong><em>Crocoblock &gt; JetPlugins Settings<\/em><\/strong>.&nbsp;<\/p>\n\n\n\n<p>On the following screen, you should select the <strong>JetBlocks <\/strong>tab on the sidebar and proceed to the <strong>General Settings<\/strong>.<\/p>\n\n\n\n<p>Here, you can set the <strong>Editor Load Level<\/strong> to optimize the Elementor editor performance and define which taxonomy is preferable to be showcased within the breadcrumbs for the post type you\u2019ve chosen. It can be post types, saved templates, etc.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/03\/jetblocks-general-settings.png\" alt=\"jetblocks general settings\">\n\n\n\n<p>All in all, there aren\u2019t any difficulties with adding the breadcrumbs using <strong>JetBlocks<\/strong> functionality.&nbsp;<\/p>\n\n\n\n<p>Let\u2019s check the result by proceeding to the front end, where the header is located. Initially, hover over the breadcrumbs active item to see the appeared link.<\/p>\n\n\n\n<p>Mind that if the \u201cFull\u201d option is selected in the <strong>Path type<\/strong> field of the <strong>Breadcrumbs <\/strong>widget\u2019s <strong>General <\/strong>tab, you will also see the <strong>Custom Post Type <\/strong>title.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/03\/breadcrumbs-on-the-front-end-with-link.png\"  alt=\"breadcrumbs on the front end with link\">\n\n\n\n<p>However, if the \u201cCustom post type link\u201d option is disabled, you will not see the link once hovering over the <strong>Custom Post Type<\/strong> title.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/03\/breadcrumbs-on-the-front-end-1024x584.png\" alt=\"breadcrumbs on the front end\">\n<\/div><\/div>\n\n\n\n<p>That\u2019s it; now you know how to customize a WordPress header easily with the <strong>JetBlocks Breadcrumbs <\/strong>feature.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Reading this tutorial will help you add breadcrumbs to the header built with Elementor and display the breadcrumbs path with the JetBlocks plugin.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[466],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Customize Breadcrumbs Path | Crocoblock<\/title>\n<meta name=\"description\" content=\"Find out how to add breadcrumbs to the header created in Elementor. Use the JetBlocks plugin to customize the breadcrumbs path.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-customize-breadcrumbs-path\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Customize Breadcrumbs Path | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Find out how to add breadcrumbs to the header created in Elementor. Use the JetBlocks plugin to customize the breadcrumbs path.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-customize-breadcrumbs-path\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-14T15:11:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/03\/crocoblock-theme-builder-header.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-customize-breadcrumbs-path\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-customize-breadcrumbs-path\/\",\"name\":\"How to Customize Breadcrumbs Path | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-06-14T09:24:17+00:00\",\"dateModified\":\"2023-04-14T15:11:07+00:00\",\"description\":\"Find out how to add breadcrumbs to the header created in Elementor. Use the JetBlocks plugin to customize the breadcrumbs path.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-customize-breadcrumbs-path\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-customize-breadcrumbs-path\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-customize-breadcrumbs-path\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Customize Breadcrumbs Path\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Customize Breadcrumbs Path | Crocoblock","description":"Find out how to add breadcrumbs to the header created in Elementor. Use the JetBlocks plugin to customize the breadcrumbs path.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-customize-breadcrumbs-path\/","og_locale":"en_US","og_type":"article","og_title":"How to Customize Breadcrumbs Path | Crocoblock","og_description":"Find out how to add breadcrumbs to the header created in Elementor. Use the JetBlocks plugin to customize the breadcrumbs path.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-customize-breadcrumbs-path\/","og_site_name":"Help Center","article_modified_time":"2023-04-14T15:11:07+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/03\/crocoblock-theme-builder-header.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-customize-breadcrumbs-path\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-customize-breadcrumbs-path\/","name":"How to Customize Breadcrumbs Path | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-06-14T09:24:17+00:00","dateModified":"2023-04-14T15:11:07+00:00","description":"Find out how to add breadcrumbs to the header created in Elementor. Use the JetBlocks plugin to customize the breadcrumbs path.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-customize-breadcrumbs-path\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-customize-breadcrumbs-path\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-customize-breadcrumbs-path\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Customize Breadcrumbs Path"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/9284"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=9284"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=9284"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=9284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}