{"id":1063,"date":"2023-01-31T11:04:54","date_gmt":"2023-01-31T11:04:54","guid":{"rendered":"https:\/\/oceanthemes.net\/docs\/sandbox\/?p=1063"},"modified":"2023-08-30T08:55:17","modified_gmt":"2023-08-30T08:55:17","slug":"4-create-a-one-page-website-on-wordpress-with-elementor","status":"publish","type":"post","link":"https:\/\/docs.oceanthemes.site\/techwind\/2023\/01\/31\/4-create-a-one-page-website-on-wordpress-with-elementor\/","title":{"rendered":"3. Create a One-Page Website on WordPress with Elementor"},"content":{"rendered":"\n<p><strong>1. Create a new page is onepage and Building Page Structure<\/strong><\/p>\n\n\n\n<p>We\u2019ll create our page in the simplest, most efficient way possible, by clicking on&nbsp;<strong>New<\/strong>&nbsp;on the WordPress dashboard and selecting the&nbsp;<strong>Page<\/strong>&nbsp;option.&nbsp;<\/p>\n\n\n\n<p>Once your page has opened, select the&nbsp;<strong>Edit in Elementor<\/strong>&nbsp;option.<\/p>\n\n\n\n<p>To create a one-page website, you first need to add all the sections and block contents to the home page.<br>You can add new sections by simply clicking on the \u201c<strong>+<\/strong>\u201d icon in the Elementor editor.<\/p>\n\n\n\n<p>After adding sections, you\u2019ll find three tabs in the edit section:<strong>&nbsp;Layout<\/strong>,<strong>&nbsp;Style<\/strong>, and&nbsp;<strong>Advanced.<\/strong><\/p>\n\n\n\n<p>Navigate to the advanced tab and add a&nbsp;<strong>unique CSS ID<\/strong>. I\u2019ll prefer to name it sequentially to make it easy to remember.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"503\" src=\"https:\/\/oceanthemes.net\/docs\/sandbox\/wp-content\/uploads\/sites\/10\/2023\/01\/create-onepage-1024x503.png\" alt=\"\" class=\"wp-image-1064\" srcset=\"https:\/\/docs.oceanthemes.site\/techwind\/wp-content\/uploads\/sites\/9\/2023\/01\/create-onepage-1024x503.png 1024w, https:\/\/docs.oceanthemes.site\/techwind\/wp-content\/uploads\/sites\/9\/2023\/01\/create-onepage-300x147.png 300w, https:\/\/docs.oceanthemes.site\/techwind\/wp-content\/uploads\/sites\/9\/2023\/01\/create-onepage-768x377.png 768w, https:\/\/docs.oceanthemes.site\/techwind\/wp-content\/uploads\/sites\/9\/2023\/01\/create-onepage-1536x755.png 1536w, https:\/\/docs.oceanthemes.site\/techwind\/wp-content\/uploads\/sites\/9\/2023\/01\/create-onepage.png 1907w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/powerpackelements.com\/wp-content\/uploads\/2019\/05\/css-id-2.jpg\" alt=\"\" class=\"wp-image-130237\"\/><\/figure>\n\n\n\n<p><strong>Note:<\/strong>&nbsp;Each section on the page needs a unique CSS ID and then we use this css id to link to each navigation menu item<\/p>\n\n\n\n<p><strong>2. Create Menu One page<\/strong><\/p>\n\n\n\n<p>Use the Finder tool (cmnd or ctrl + E) to get to the Menus options on the WordPress dashboard (you can also find the Menus options in the Appearance section on the WordPress dashboard). We\u2019ll name our menu \u201cOne Page Menu\u201d, and click&nbsp;<strong>Create Menu<\/strong>.<\/p>\n\n\n\n<p>Now we can begin adding the menu items to our new menu.&nbsp;<\/p>\n\n\n\n<p>To add Menu items, click on the Custom Links button, and in the URL field, enter the website\u2019s URL followed by a hash sign (#) and the appropriate CSS ID to create the slug for each section. In the Link Text field, enter the menu title as you would like it to appear on your website.&nbsp;<\/p>\n\n\n\n<p>Ex: <\/p>\n\n\n\n<p>URL<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>#features<\/li>\n\n\n\n<li>#about<\/li>\n\n\n\n<li>#ceo<\/li>\n\n\n\n<li>#destinations<\/li>\n\n\n\n<li>#photos<\/li>\n\n\n\n<li>#subscribe<\/li>\n\n\n\n<li>#contact<\/li>\n<\/ul>\n\n\n\n<p>Link Text<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Features<\/li>\n\n\n\n<li>About<\/li>\n\n\n\n<li>CEO<\/li>\n\n\n\n<li>Destinations<\/li>\n\n\n\n<li>Photos<\/li>\n\n\n\n<li>Subscribe<\/li>\n\n\n\n<li>Contact Us<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/elementor\/thumbs\/Menu-Editor-obh0ojgjuba6vsbdc68rkey19hnf3cdex2zwbr9aee.jpg\" alt=\"Navigation Menu Editor\" title=\"Navigation Menu Editor\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>1. Create a new page is onepage and Building Page Structure We\u2019ll create our page in the simplest, most efficient way possible, by clicking on&nbsp;New&nbsp;on the WordPress dashboard and selecting the&nbsp;Page&nbsp;option.&nbsp; Once your page has opened, select the&nbsp;Edit in Elementor&nbsp;option. To create a one-page website, you first need to add all the sections and block [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-1063","post","type-post","status-publish","format-standard","hentry","category-06-header"],"_links":{"self":[{"href":"https:\/\/docs.oceanthemes.site\/techwind\/wp-json\/wp\/v2\/posts\/1063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.oceanthemes.site\/techwind\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.oceanthemes.site\/techwind\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.oceanthemes.site\/techwind\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.oceanthemes.site\/techwind\/wp-json\/wp\/v2\/comments?post=1063"}],"version-history":[{"count":2,"href":"https:\/\/docs.oceanthemes.site\/techwind\/wp-json\/wp\/v2\/posts\/1063\/revisions"}],"predecessor-version":[{"id":1169,"href":"https:\/\/docs.oceanthemes.site\/techwind\/wp-json\/wp\/v2\/posts\/1063\/revisions\/1169"}],"wp:attachment":[{"href":"https:\/\/docs.oceanthemes.site\/techwind\/wp-json\/wp\/v2\/media?parent=1063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.oceanthemes.site\/techwind\/wp-json\/wp\/v2\/categories?post=1063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.oceanthemes.site\/techwind\/wp-json\/wp\/v2\/tags?post=1063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}