{"id":1541,"date":"2021-06-17T12:49:09","date_gmt":"2021-06-17T12:49:09","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1541"},"modified":"2023-02-22T09:38:35","modified_gmt":"2023-02-22T09:38:35","slug":"how-to-use-the-menu-anchor-widget-in-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-the-menu-anchor-widget-in-elementor\/","title":{"rendered":"How to Use the Menu Anchor Widget in Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1541\" class=\"elementor elementor-1541\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-38d6d964 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"38d6d964\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-798c7bf3\" data-id=\"798c7bf3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6ec2868e elementor-widget elementor-widget-video\" data-id=\"6ec2868e\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=nnOxYEtdZkQ&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6d92ca66 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6d92ca66\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1522c6e2\" data-id=\"1522c6e2\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-cddf11a elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"cddf11a\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-2151\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-2151\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-2152\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2152\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-2151\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2151\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2151\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, we learn how to use the Menu Anchor Widget. This helpful widget allows you to create pages with internal smooth scrolling.<\/p><p>This tutorial will cover:<\/p><p>\u2714 How to insert the Menu Anchor widget into your website<br \/>\u2714 Linking to a Menu Anchor from a button<br \/>\u2714 Linking to a Menu Anchor from a menu<br \/>\u2714\ufe0e And much more!<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2152\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2152\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2152\" tabindex=\"0\" hidden=\"hidden\"><p>Hey there, it&#8217;s Ash from Elementor.<\/p><p>In this tutorial, we will learn how to use the Menu Anchor Widget. A useful widget which provides the ability to create a smooth scrolling section within your page.<\/p><p>This feature is really useful when creating one page websites or if you just need a visually pleasing way to navigate to another section within your page.<\/p><p>So, if you\u2019re ready, let\u2019s get started.<\/p><p>In this video on how to use the Menu Anchor Widget I will demonstrate two use cases. The first we\u2019ll link to the anchor widget from a button within the page and the second we\u2019ll link to it from the menu.<br \/>To get started let\u2019s search for the menu anchor widget.<\/p><p>Scrolls to section&#8230;<\/p><p>We would like our page to scroll to this section, so this is where we\u2019re going to drop our widget.<\/p><p>Notice how a grey box appears. It\u2019s important to note that on our live website this element has no styling applied, meaning it has no height and will not be seen. The grey box you can see is for editing purposes only.<\/p><p>With the Menu Anchor selected you can see we only have one option available, the ID.<\/p><p>The ID of the Menu Anchor allows us to specify a unique name for the widget.<\/p><p>It\u2019s a good idea to name your Menu Anchor something that is relevant to the section you are applying it to. In our instance we\u2019re going to call it \u201cdonate\u201d.<br \/>Now that we have inserted our Menu Anchor Widget into our page we are ready to link to it.<\/p><p>Scroll to the top of the page and locate the button. Let\u2019s select the button and in the Link field we are going to type<\/p><p>#donate<\/p><p>If we now save and preview our page you can see the Menu Anchor Widget in action.<\/p><p>Shows demo of anchor widget working&#8230;<br \/>The next step is to apply the same action to our menu.<\/p><p>Let\u2019s switch back to our dashboard and head over to the WordPress menu area.<\/p><p>Type CMD + E on Mac, or CTRL + E on Windows to bring up the Elementor finder.<\/p><p>In the field, type \u201cmenu\u201d and select.<\/p><p>Ensure you have the correct menu selected and then navigate your way to \u2018Custom Links\u2019.<\/p><p>In the URL field we\u2019ll type #donate<\/p><p>And in the Link Text field we\u2019ll type \u201cDonate\u201d.<\/p><p>Now, let\u2019s add this new link to your menu and move it to the required position.<\/p><p>When finished, save your menu and head back to the Elementor editing screen for your page.<\/p><p>Again, we can use the Elementor keyboard shortcut here by typing CMD + E on Mac or CTRL + E on Windows.<\/p><p>You\u2019ll now see that the new menu item has appeared, and if we preview our page and select \u2018donate\u2019 in the menu, it will automatically scroll to the desired section.<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tutorial, we learn how to use the Menu Anchor Widget. This helpful widget allows you to create pages with internal smooth scrolling. This tutorial will cover: \u2714 How to insert the Menu Anchor widget into your website \u2714 Linking to a Menu Anchor from a button \u2714 Linking to a [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":3376,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-1541","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use the Menu Anchor Widget in Elementor - Academy<\/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:\/\/elementor.com\/academy\/how-to-use-the-menu-anchor-widget-in-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use the Menu Anchor Widget in Elementor - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, we learn how to use the Menu Anchor Widget. This helpful widget allows you to create pages with internal smooth scrolling. This tutorial will cover: \u2714 How to insert the Menu Anchor widget into your website \u2714 Linking to a Menu Anchor from a button \u2714 Linking to a [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-the-menu-anchor-widget-in-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-17T12:49:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:38:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Menu-Anchor-Widget.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use the Menu Anchor Widget in Elementor - Academy","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:\/\/elementor.com\/academy\/how-to-use-the-menu-anchor-widget-in-elementor\/","og_locale":"en_US","og_type":"article","og_title":"How to Use the Menu Anchor Widget in Elementor - Academy","og_description":"Overview Transcript Overview In this tutorial, we learn how to use the Menu Anchor Widget. This helpful widget allows you to create pages with internal smooth scrolling. This tutorial will cover: \u2714 How to insert the Menu Anchor widget into your website \u2714 Linking to a Menu Anchor from a button \u2714 Linking to a [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-the-menu-anchor-widget-in-elementor\/","og_site_name":"Academy","article_published_time":"2021-06-17T12:49:09+00:00","article_modified_time":"2023-02-22T09:38:35+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Menu-Anchor-Widget.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-menu-anchor-widget-in-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-menu-anchor-widget-in-elementor\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Use the Menu Anchor Widget in Elementor","datePublished":"2021-06-17T12:49:09+00:00","dateModified":"2023-02-22T09:38:35+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-menu-anchor-widget-in-elementor\/"},"wordCount":570,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-menu-anchor-widget-in-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Menu-Anchor-Widget.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-menu-anchor-widget-in-elementor\/","url":"https:\/\/elementor.com\/academy\/how-to-use-the-menu-anchor-widget-in-elementor\/","name":"How to Use the Menu Anchor Widget in Elementor - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-menu-anchor-widget-in-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-menu-anchor-widget-in-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Menu-Anchor-Widget.jpg","datePublished":"2021-06-17T12:49:09+00:00","dateModified":"2023-02-22T09:38:35+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-menu-anchor-widget-in-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-the-menu-anchor-widget-in-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-menu-anchor-widget-in-elementor\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Menu-Anchor-Widget.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Menu-Anchor-Widget.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-menu-anchor-widget-in-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Use the Menu Anchor Widget in Elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=1541"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1541\/revisions"}],"predecessor-version":[{"id":9590,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1541\/revisions\/9590"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/3376"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}