{"id":24870,"date":"2021-04-19T10:03:24","date_gmt":"2021-04-19T08:03:24","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=24870"},"modified":"2023-01-28T11:40:24","modified_gmt":"2023-01-28T10:40:24","slug":"how-to-use-and-style-the-divi-dot-navigation","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/","title":{"rendered":"How To Use And style The Divi Dot Navigation"},"content":{"rendered":"\n<p>The Divi dot navigation is a floating navigation bar with<a href=\"https:\/\/www.markhendriksen.com\/divi-anchor-links-tutorial\/\"> anchor links<\/a>. You can use the dot navigation bar to easily scroll down to certain sections of your page. This is a nice feature for long pages.<\/p>\n\n\n\n<p>In this tutorial I will be covering the following:<\/p>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><a href=\"#enable-dot\">How to enable the Divi dot navigation bar<\/a><\/li><li><a href=\"#style-dot\">How to customize the Divi dot navigation bar<\/a><\/li><li><a href=\"#exclude-dot\">How to exclude a section from the navigation bar<\/a><\/li><li><a href=\"#label-dot\">How to create a navigation bar with labels<\/a><\/li><\/ul>\n\n\n\n<p>Each dot in the floating navigation bar stands for a section on your page.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"323\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/Divi-dot-navigation-example.jpg\" alt=\"Divi dot navigation example\" class=\"wp-image-24873\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Divi-dot-navigation-example.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Divi-dot-navigation-example-380x181.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Divi-dot-navigation-example-300x143.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Divi-dot-navigation-example-510x242.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Divi-dot-navigation-example-126x60.jpg 126w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Divi-dot-navigation-example-189x90.jpg 189w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure><\/div>\n\n\n\n<p>In the example above you can see on the right how the dot navigation looks when you enable it. In my example, I have 9 sections so I will get 9 dots. When I click on a dot it will bring me to that section of the page.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-8cb819f6 gb-headline-text\" id=\"enable-dot\">How To Enable The Divi Dot Navigation<\/h2>\n\n\n\n<p>Open the page for which you want to enable the dot navigation. In the right column open the Divi Page Settings tab by clicking on the little arrow. Under Dot Navigation you can enable this. Under hiding Nav Before Scroll, you can turn on or off the dot navigation before you start scrolling.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"295\" height=\"205\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/Enable-Divi-Dot-Navigation.jpg\" alt=\"Enable Divi dot navigation\" class=\"wp-image-24872\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Enable-Divi-Dot-Navigation.jpg 295w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Enable-Divi-Dot-Navigation-86x60.jpg 86w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Enable-Divi-Dot-Navigation-130x90.jpg 130w\" sizes=\"(max-width: 295px) 100vw, 295px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"gb-headline gb-headline-571fe929 gb-headline-text\" id=\"style-dot\">How To Style The Divi Dot Navigation Bar<\/h2>\n\n\n\n<p>By default, there are no customization options for the dot navigation bar. So we have to use some CSS code to style it. You can use the below snippet for changing the:<\/p>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li>Dot navigation background-color<\/li><li>Active dot color<\/li><li>Inactive dot color<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"184\" height=\"297\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/styling-dot-navigation-bar.jpg\" alt=\"Styling the dot navigation bar\" class=\"wp-image-24875\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/styling-dot-navigation-bar.jpg 184w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/styling-dot-navigation-bar-37x60.jpg 37w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/styling-dot-navigation-bar-56x90.jpg 56w\" sizes=\"(max-width: 184px) 100vw, 184px\" \/><\/figure><\/div>\n\n\n\n<p>Place the following CSS snippet in Divi &gt; Theme Options &gt; CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Background color bar *\/\nul.et_pb_side_nav {\n    background: #da181f;\n}\n\n\/* Active dot color *\/\nul.et_pb_side_nav .side_nav_item a.active {\n    background-color: #000000!important;\n}\n\n\/* Inactive dot color *\/\nul.et_pb_side_nav .side_nav_item a {\n    background-color: #e4e4e4;\n}<\/code><\/pre>\n\n\n\n<p>You can change the color codes for your design.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-85316417 gb-headline-text\" id=\"exclude-dot\">How To Exclude A Section From The Navigation Bar<\/h2>\n\n\n\n<p>Sections are automatically added to the dot navigation bar. If you want to exclude some sections from the navigation bar you can use the following snippets:<\/p>\n\n\n\n<p>If you want to remove the first dot from the navigation use this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Exclude a section from the navigation bar *\/\nul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0 {\n\tdisplay: none !important;\n}<\/code><\/pre>\n\n\n\n<p>Each dot has its unique ID number starting with 0. In the above snippet, you see id_0 in the CSS code. This is the first dot.<\/p>\n\n\n\n<p>If I would like the remove the 5th dot in the navigation I would need to change the ID number of the CSS snippet like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Exclude a section from the navigation bar *\/\nul.et_pb_side_nav .side_nav_item a#side_nav_item_id_4 {\n\tdisplay: none !important;\n}<\/code><\/pre>\n\n\n\n<p>I changed the ID to 4 this will remove the 5th dot (remember we are starting with 0).<\/p>\n\n\n\n<p>If you would like to remove multiple dots, for example, dot 1, 4, and 7 the CSS snippet will look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Exclude a section from the navigation bar *\/\nul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0,\nul.et_pb_side_nav .side_nav_item a#side_nav_item_id_3,\nul.et_pb_side_nav .side_nav_item a#side_nav_item_id_6 {\n\tdisplay: none !important;\n}<\/code><\/pre>\n\n\n\n<p><strong>Note:<\/strong> after id_0 and 3 I place a comma. This means we start with a new line.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-26972cac gb-headline-text\" id=\"label-dot\">How To Create A Navigation Bar With Labels<\/h2>\n\n\n\n<p>Instead of the dots, we can make labels with text to make it more descriptive.<\/p>\n\n\n<div class=\"gb-button-wrapper gb-button-wrapper-bb493263\">\n\n<a class=\"gb-button gb-button-5c69db8f gb-button-text demo-button-free-layouts\" href=\"https:\/\/www.demo.markhendriksen.com\/divi-dot-navigation\/\" target=\"_blank\" rel=\"noopener noreferrer\">See Demo<\/a>\n\n<\/div>\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"351\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/Divi-dot-navigation-with-labels.jpg\" alt=\"Divi dot navigation with labels\" class=\"wp-image-24948\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Divi-dot-navigation-with-labels.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Divi-dot-navigation-with-labels-380x196.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Divi-dot-navigation-with-labels-300x155.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Divi-dot-navigation-with-labels-510x263.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Divi-dot-navigation-with-labels-116x60.jpg 116w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Divi-dot-navigation-with-labels-174x90.jpg 174w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Place the following CSS code in Divi &gt; Theme Options &gt; CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Name label 1 *\/\nul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0:before {\n\tcontent: \"About us\";\n}\n\n\/* Name label 2 *\/\nul.et_pb_side_nav .side_nav_item a#side_nav_item_id_1:before {\n\tcontent: \"What we do\";\n}\n\n\/* Name label 3 *\/\nul.et_pb_side_nav .side_nav_item a#side_nav_item_id_2:before {\n\tcontent: \"Faq\";\n}\n\n\/* Name label 4 *\/\nul.et_pb_side_nav .side_nav_item a#side_nav_item_id_3:before {\n\tcontent: \"Services\";\n}\n\n\/* Name label 5 *\/\nul.et_pb_side_nav .side_nav_item a#side_nav_item_id_4:before {\n\tcontent: \"Blog\";\n}\n\n\/* Name label 6 *\/\nul.et_pb_side_nav .side_nav_item a#side_nav_item_id_5:before {\n\tcontent: \"Contact\";\n}\n\n\/* Inactive label background color *\/\nul.et_pb_side_nav li.side_nav_item a {\n\tcolor: #da181f !important;\n\tbackground-color: #da181f;\n}\n\n\/* Active label background color *\/\nul.et_pb_side_nav li.side_nav_item a.active {\n\tcolor: #000000 !important;\n\tbackground-color: #000000 !important;\n}\n\n\/* Label text color *\/\nul.et_pb_side_nav li.side_nav_item a:before {\n\tpadding: 12px !important;\n\tcolor: #fff !important;\n}\n\n\/* Label styling *\/\nul.et_pb_side_nav li.side_nav_item {\n\tmargin-top: 5px;\n\ttext-align: right;\n}\n \nul.et_pb_side_nav li.side_nav_item a {\n\t-webkit-box-shadow: 0px 0px 18px 0px rgba(23, 22, 22, .5);\n\t-moz-box-shadow: 0px 0px 18px 0px rgba(23, 22, 22, .5);\n\tbox-shadow: 0px 0px 18px 0px rgba(23, 22, 22, .5);\n\tpadding-top: 10px;\n\tpadding-bottom: 10px;\n\tfont-weight: bold;\n\tfont-size: 18px;\n\tdisplay: inline !important;\n\tborder-radius: 5px;\n}\n \nul.et_pb_side_nav li.side_nav_item a:before {\n\tpadding: 12px !important;\n}\n \nul.et_pb_side_nav {\n\twidth: auto;\n\tbackground: none;\n\ttop: 50%;\n}<\/code><\/pre>\n\n\n\n<p>CSS explained below.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-57a0f2ec gb-headline-text\">Change label names<\/h3>\n\n\n\n<p>You can change the content of each label for your needs. If you need more labels then copy\/paste this one and change the ID number to 6 and onwards.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Name label 1 *\/\nul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0:before {\n\tcontent: \"About us\";\n}<\/code><\/pre>\n\n\n\n<h3 class=\"gb-headline gb-headline-ab97aedb gb-headline-text\">Change the colors<\/h3>\n\n\n\n<p>Below this comment in the snippet &#8220;Inactive label background color&#8221; you can change the background color of the inactive labels. This is the red color in the demo.<\/p>\n\n\n\n<p>Below this comment in the snippet &#8220;Active label background color&#8221; you can change the background color of the active label. This is the black color in the demo.<\/p>\n\n\n\n<p>Below this comment in the snippet &#8220;Label color&#8221; you can change the text color of the labels.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-cb310efd gb-headline-text\">You Might Also Like&#8230;<\/h3>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\">\n<li><a href=\"https:\/\/www.markhendriksen.com\/wordpress-speed-optimization-guide\/\">How To Speed Up Your Divi Website (Guide)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.markhendriksen.com\/divi-child-theme-essential-guide\/\">How to Make a Divi Child Theme<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.markhendriksen.com\/how-to-make-a-website-with-wordpress-and-divi-theme\/\">How to Make a Website With Divi Theme in 2024<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.markhendriksen.com\/best-divi-plugins\/\">The Best Divi Plugins For 2024<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.markhendriksen.com\/best-divi-child-themes\/\">The Best Divi Child Themes For 2024<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.markhendriksen.com\/10-divi-woocommerce-layouts\/\">The Best Divi WooCommerce Layouts For 2024<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.markhendriksen.com\/how-to-choose-the-best-hosting-for-your-divi-website\/\">How To Choose The Best Divi Hosting In 2024<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The Divi dot navigation is a floating navigation bar with anchor links. You can use the dot navigation bar to easily scroll down to certain sections of your page. This is a nice feature for long pages. In this tutorial I will be covering the following: How to enable the Divi dot navigation bar How [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":24884,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-24870","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How To Use And style The Divi Dot Navigation | MarkHendriksen.com<\/title>\n<meta name=\"description\" content=\"With the Divi dot navigation your visitors can easily scroll through your page. You can style this with labels for better navigating.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Use And style The Divi Dot Navigation | MarkHendriksen.com\" \/>\n<meta property=\"og:description\" content=\"With the Divi dot navigation your visitors can easily scroll through your page. You can style this with labels for better navigating.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/\" \/>\n<meta property=\"og:site_name\" content=\"Mark Hendriksen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/madebymarkhendriksen\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-19T08:03:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-28T10:40:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/How-to-use-and-style-the-Divi-dot-navigation.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mark Hendriksen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mark Hendriksen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How To Use And style The Divi Dot Navigation\",\"datePublished\":\"2021-04-19T08:03:24+00:00\",\"dateModified\":\"2023-01-28T10:40:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/\"},\"wordCount\":580,\"commentCount\":10,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/How-to-use-and-style-the-Divi-dot-navigation.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/\",\"url\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/\",\"name\":\"How To Use And style The Divi Dot Navigation | MarkHendriksen.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/How-to-use-and-style-the-Divi-dot-navigation.jpg\",\"datePublished\":\"2021-04-19T08:03:24+00:00\",\"dateModified\":\"2023-01-28T10:40:24+00:00\",\"description\":\"With the Divi dot navigation your visitors can easily scroll through your page. You can style this with labels for better navigating.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/How-to-use-and-style-the-Divi-dot-navigation.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/How-to-use-and-style-the-Divi-dot-navigation.jpg\",\"width\":720,\"height\":400,\"caption\":\"How To Use And style The Divi Dot Navigation\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markhendriksen.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Divi tutorials\",\"item\":\"https:\/\/www.markhendriksen.com\/divi-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How To Use And style The Divi Dot Navigation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markhendriksen.com\/#website\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"name\":\"Mark Hendriksen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markhendriksen.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\",\"name\":\"Mark Hendriksen\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"width\":354,\"height\":40,\"caption\":\"Mark Hendriksen\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/madebymarkhendriksen\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\",\"name\":\"Mark Hendriksen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"caption\":\"Mark Hendriksen\"},\"url\":\"https:\/\/www.markhendriksen.com\/author\/twopixels\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Use And style The Divi Dot Navigation | MarkHendriksen.com","description":"With the Divi dot navigation your visitors can easily scroll through your page. You can style this with labels for better navigating.","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:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/","og_locale":"en_US","og_type":"article","og_title":"How To Use And style The Divi Dot Navigation | MarkHendriksen.com","og_description":"With the Divi dot navigation your visitors can easily scroll through your page. You can style this with labels for better navigating.","og_url":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2021-04-19T08:03:24+00:00","article_modified_time":"2023-01-28T10:40:24+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/How-to-use-and-style-the-Divi-dot-navigation.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How To Use And style The Divi Dot Navigation","datePublished":"2021-04-19T08:03:24+00:00","dateModified":"2023-01-28T10:40:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/"},"wordCount":580,"commentCount":10,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/How-to-use-and-style-the-Divi-dot-navigation.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/","url":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/","name":"How To Use And style The Divi Dot Navigation | MarkHendriksen.com","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/How-to-use-and-style-the-Divi-dot-navigation.jpg","datePublished":"2021-04-19T08:03:24+00:00","dateModified":"2023-01-28T10:40:24+00:00","description":"With the Divi dot navigation your visitors can easily scroll through your page. You can style this with labels for better navigating.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/How-to-use-and-style-the-Divi-dot-navigation.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/How-to-use-and-style-the-Divi-dot-navigation.jpg","width":720,"height":400,"caption":"How To Use And style The Divi Dot Navigation"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/how-to-use-and-style-the-divi-dot-navigation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markhendriksen.com\/"},{"@type":"ListItem","position":2,"name":"Divi tutorials","item":"https:\/\/www.markhendriksen.com\/divi-tutorials\/"},{"@type":"ListItem","position":3,"name":"How To Use And style The Divi Dot Navigation"}]},{"@type":"WebSite","@id":"https:\/\/www.markhendriksen.com\/#website","url":"https:\/\/www.markhendriksen.com\/","name":"Mark Hendriksen","description":"","publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markhendriksen.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.markhendriksen.com\/#organization","name":"Mark Hendriksen","url":"https:\/\/www.markhendriksen.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","width":354,"height":40,"caption":"Mark Hendriksen"},"image":{"@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/madebymarkhendriksen"]},{"@type":"Person","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765","name":"Mark Hendriksen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","caption":"Mark Hendriksen"},"url":"https:\/\/www.markhendriksen.com\/author\/twopixels\/"}]}},"_links":{"self":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/24870","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/comments?post=24870"}],"version-history":[{"count":3,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/24870\/revisions"}],"predecessor-version":[{"id":28218,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/24870\/revisions\/28218"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/24884"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=24870"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=24870"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=24870"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}