{"id":753,"date":"2017-05-05T11:39:10","date_gmt":"2017-05-05T18:39:10","guid":{"rendered":"https:\/\/www.blocksylaunch.click\/documentation\/?p=753"},"modified":"2021-03-30T09:36:47","modified_gmt":"2021-03-30T16:36:47","slug":"one-page-website","status":"publish","type":"post","link":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/one-page-website\/","title":{"rendered":"How To Create One-Page Websites With Divi"},"content":{"rendered":"<p><iframe loading=\"lazy\" class=\"youtube-player\" type=\"text\/html\"  title=\"How To Create One Page Websites With Divi\" width=\"920\" height=\"518\" src=\"https:\/\/www.youtube.com\/embed\/Es1i0armAD4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h2>Divi&#8217;s Single Page Sidebar Navigation Makes It Easy<\/h2>\n<p>When you create a new page, you can easily enable Divi&#8217;s Single Page navigation option, giving your visitors a visual and clickable representation of their progress on the page. You can also use custom anchor links and Section ID&#8217;s to create one-page menus for the complete One-Page package. <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/one-4.jpg\" alt=\"docs image\" \/><\/p>\n<p><a target=\"_blank\" href=\"https:\/\/www.blocksylaunch.click\/preview\/Divi\/\" style=\"margin-top: 0px; margin-bottom: 80px;\" class=\"button inline-button primary-button view-button\" rel=\"noopener\">View A Live Demo Of This Feature<\/a><\/p>\n<h2>Enabling Single Page Navigation<\/h2>\n<p>Enabling Single Page Navigation is easy, and it can be done on a per-page basis. Whenever you create or edit a page, look for the &#8220;Divi Settings&#8221; box to the right of your text editor. Within this box you will see the <strong>Dot Navigation<\/strong> option. Select &#8220;On&#8221; from the dropdown menu, and then save the page. You will now notice that a floating navigation bar has been added to the right side of your page. The Dot Navigation bar automatically adds a clickable link to each section on your page. When you add a new section, a new circle link (or dot) will be added automatically to your floating side nav. Users can click the dots to skip to different sections on the page. It also makes it easier to identify where the visitor is on the page, making long-format pages easier to understand and navigate.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/one-1.jpg\" alt=\"docs image\" \/><\/p>\n<h2>Create Custom Menu Links For One-Page Websites<\/h2>\n<p>In addition to side navigation, it&#8217;s also possible to transform your main header navigation into one-page navigation. If you are creating a one-page website, then you don&#8217;t want your menu links to point to separate pages. Instead, these links can point to relevant sections on the same page. When clicked, they can take you to the relevant section on the page using a smooth scrolling effect. This can be accomplished using custom ID&#8217;s. Any element on the page that is built with the builder can be assigned an ID. You can assign an ID to a section by clicking on the section settings icon, and looking for the &#8220;CSS ID&#8221; setting. Once an ID has been assigned, you can then link to it from the navigation menu. For example, let&#8217;s say you have a section called &#8220;About Us&#8221; and you want it to link to the part of your page that describes your company. Edit the section that contains your About Us content, and enter &#8220;aboutus&#8221; into the &#8220;CSS ID&#8221; field and click &#8220;Save.&#8221; Now that an ID has been assigned, we can point a link to it. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/aboutus.png\" alt=\"\" width=\"434\" height=\"600\" class=\"aligncenter size-full wp-image-1437\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/aboutus.png 434w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/aboutus-217x300.png 217w\" sizes=\"auto, (max-width: 434px) 100vw, 434px\" \/><\/p>\n<h2>Pointing A Menu Link To An ID<\/h2>\n<p>To create a custom menu link, you will need to add a new link to your menu using the &#8220;Appearances > Menus&#8221; tab in your WordPress Dashboard. If you are unfamiliar with the Menus system, check out <a href=\"http:\/\/codex.wordpress.org\/Appearance_Menus_Screen\">this great tutorial<\/a>. Once you have created a new menu and assigned it to the Main Navigation location, you can start adding links to your header. In this case, we will be creating a custom link by clicking the &#8220;Link&#8221; tab on the left hand side of the page. Once clicked, you will be given two fields (URL and Link Text). For the &#8220;Link Text,&#8221; simply enter the text that you would like to show up in your menu (For example, &#8220;About Us&#8221;). For the URL, we need to link to the ID that we assigned to our section earlier. In this case, we added the id &#8220;aboutus&#8221; but you can add any ID name that you like. Since we used the ID &#8220;aboutus,&#8221; we can link to that ID by creating a URL pointing to &#8220;\/#aboutus&#8221;. You can use this same method to create as many custom links as you want. Simply enter a URL of &#8220;\/#&#8221; followed by the ID that you want to target.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/sing-page-link.png\" alt=\"\" width=\"880\" height=\"573\" class=\"alignnone size-full wp-image-1613\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/sing-page-link.png 880w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/sing-page-link-300x195.png 300w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/sing-page-link-768x500.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Divi makes it easy to create beautiful one-page websites.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,14],"tags":[],"class_list":["post-753","post","type-post","status-publish","format-standard","hentry","category-divi","category-other"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Elegant Themes Documentation<\/title>\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.blocksylaunch.click\/documentation\/divi\/one-page-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Create One-Page Websites With Divi - Elegant Themes Documentation\" \/>\n<meta property=\"og:description\" content=\"Divi makes it easy to create beautiful one-page websites.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.blocksylaunch.click\/documentation\/divi\/one-page-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Elegant Themes Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-05T18:39:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-03-30T16:36:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/one-4.jpg\" \/>\n<meta name=\"author\" content=\"admindocumentation\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admindocumentation\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/one-page-website\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/one-page-website\\\/\"},\"author\":{\"name\":\"admindocumentation\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/1a5d1f17110e347e68b57af08f2b5268\"},\"headline\":\"How To Create One-Page Websites With Divi\",\"datePublished\":\"2017-05-05T18:39:10+00:00\",\"dateModified\":\"2021-03-30T16:36:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/one-page-website\\\/\"},\"wordCount\":637,\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/one-page-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/one-4.jpg\",\"articleSection\":[\"Divi Theme Documentation\",\"Other Features\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/one-page-website\\\/\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/one-page-website\\\/\",\"name\":\"How To Create One-Page Websites With Divi - Elegant Themes Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/one-page-website\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/one-page-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/one-4.jpg\",\"datePublished\":\"2017-05-05T18:39:10+00:00\",\"dateModified\":\"2021-03-30T16:36:47+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/1a5d1f17110e347e68b57af08f2b5268\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/one-page-website\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/one-page-website\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/one-page-website\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/one-4.jpg\",\"contentUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/one-4.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/one-page-website\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Create One-Page Websites With Divi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\",\"name\":\"Elegant Themes Documentation\",\"description\":\"Just another WordPress site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/1a5d1f17110e347e68b57af08f2b5268\",\"name\":\"admindocumentation\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g\",\"caption\":\"admindocumentation\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elegant Themes Documentation","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.blocksylaunch.click\/documentation\/divi\/one-page-website\/","og_locale":"en_US","og_type":"article","og_title":"How To Create One-Page Websites With Divi - Elegant Themes Documentation","og_description":"Divi makes it easy to create beautiful one-page websites.","og_url":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/one-page-website\/","og_site_name":"Elegant Themes Documentation","article_published_time":"2017-05-05T18:39:10+00:00","article_modified_time":"2021-03-30T16:36:47+00:00","og_image":[{"url":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/one-4.jpg","type":"","width":"","height":""}],"author":"admindocumentation","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admindocumentation","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/one-page-website\/#article","isPartOf":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/one-page-website\/"},"author":{"name":"admindocumentation","@id":"https:\/\/www.blocksylaunch.click\/documentation\/#\/schema\/person\/1a5d1f17110e347e68b57af08f2b5268"},"headline":"How To Create One-Page Websites With Divi","datePublished":"2017-05-05T18:39:10+00:00","dateModified":"2021-03-30T16:36:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/one-page-website\/"},"wordCount":637,"image":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/one-page-website\/#primaryimage"},"thumbnailUrl":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/one-4.jpg","articleSection":["Divi Theme Documentation","Other Features"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/one-page-website\/","url":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/one-page-website\/","name":"How To Create One-Page Websites With Divi - Elegant Themes Documentation","isPartOf":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/one-page-website\/#primaryimage"},"image":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/one-page-website\/#primaryimage"},"thumbnailUrl":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/one-4.jpg","datePublished":"2017-05-05T18:39:10+00:00","dateModified":"2021-03-30T16:36:47+00:00","author":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/#\/schema\/person\/1a5d1f17110e347e68b57af08f2b5268"},"breadcrumb":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/one-page-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.blocksylaunch.click\/documentation\/divi\/one-page-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/one-page-website\/#primaryimage","url":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/one-4.jpg","contentUrl":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/one-4.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/one-page-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.blocksylaunch.click\/documentation\/"},{"@type":"ListItem","position":2,"name":"How To Create One-Page Websites With Divi"}]},{"@type":"WebSite","@id":"https:\/\/www.blocksylaunch.click\/documentation\/#website","url":"https:\/\/www.blocksylaunch.click\/documentation\/","name":"Elegant Themes Documentation","description":"Just another WordPress site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.blocksylaunch.click\/documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.blocksylaunch.click\/documentation\/#\/schema\/person\/1a5d1f17110e347e68b57af08f2b5268","name":"admindocumentation","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g","caption":"admindocumentation"}}]}},"_links":{"self":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/753","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/comments?post=753"}],"version-history":[{"count":13,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/753\/revisions"}],"predecessor-version":[{"id":3233,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/753\/revisions\/3233"}],"wp:attachment":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/media?parent=753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/categories?post=753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/tags?post=753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}