Using anchors in Avada is a great way to direct your user』s attention to important information at the click of a link. The intention is that when a user clicks the anchor link they will be scrolled smoothly to the information further up/down the page. If the action is not smooth, this means that the JavaScript code isn』t firing and the anchor isn』t set up correctly. Please continue reading below to learn how to set up anchors properly.
Adding Anchor IDs To Sections
Adding Anchor LinksLinking To A Section On Another PageAnchor Linking To A Specific Toggle Or FAQ ItemWhy Underscores are added to anchor link addresses and how to remove itAdding Anchor IDs To SectionsBefore we can talk about Anchor Scrolling, you must first set up your Anchor IDs. Anchor IDs allow you to specifically target a section of a page by adding them to the start of those sections. There are 2 common ways of adding Anchor IDs depending on the section you』d like to target. To learn about these two methods and when to use each one, continue reading below.
『Name Of Menu Anchor』 Option In ContainersThe first method of adding Anchor IDs is to use the 『Name Of Menu』 option located in Container elements. This option lets you add an Anchor ID into the Container itself. When using this method, the user will scroll to the beginning of the Container. If you just want to generally point your users to a section, then use this method.
Step 1 – Create a new page or post, or edit an existing one.
Step 2 – Add your content by adding Containers and selecting your desired column layouts, then adding the Elements into the columns. Keep going until you』ve added all your desired content.
Step 3 – Now determine which Containers you』d like to target. On your chosen Container, click the 『Container Settings』 icon to bring up it』s options window.
Step 4 – Under the 『General』 tab, locate the 『Name of Menu Anchor』 option. In the text field, enter a unique Anchor ID. For example, aboutsection.
Step 5 – Once finished, click 『Save』. Repeat steps 3-4 for all the different Containers you』d like to target.
Menu Anchor ElementThe second method of adding Anchor IDs is to use the Menu Anchor element, this allows you to target a specific section. For example, if you』d like to target specific content, then you would place a Menu Anchor element directly above it. That way, the user scrolls directly to the content you』d like them to see rather than just the beginning of the section it』s part of.
Step 1 – Create a new page or post, or edit an existing one.
Step 2 – Add your content as normal then determine the content on the page you』d like to target.
Step 3 – Now we need to add the Menu Anchor element. To do this, add a 『1/1』 Column directly above the content you』re targeting by clicking the 『+ Columns』 button on the lower right side of the Container.
Step 4 – Once you』ve added the 『1/1』 column, click the 『+ Elements』 button to bring up the Elements window. Locate the 『Menu Anchor』 element and click it to bring up it』s options window.
Step 5 – In the 『Name』 field, enter a unique Anchor ID. For example, aboutme.
Step 6 – Once finished, click 『Save』. Repeat steps 3-5 for all the different content you』d like to target.
Adding Anchor LinksOnce you』re finished adding your Anchor IDs, it』s time to add your Anchor links. There are multiple ways to add Anchor Links into your content depending on where you』d like to place them. Continue reading below to learn more about each method, and when to use them.
Adding Anchor Links in Menu Items
One Page Text Link ElementAdding Anchor Links As ClassesAdding Anchor Links in Menu ItemsWhen you use anchors on your menu items, it will always automatically scroll to the corresponding section. To learn how to create one page websites or how to use anchors on your menus correctly, please read our Setting Up One Page article. If you want to use anchor links as well as normal links on your site, please read our One Page Menu With Multi-Page Links article.
One Page Text Link ElementYou can add anchor links using the One Page Text Link Element. This element is an Inline Element and can be inserted via the WordPress Content Editor. It can be used with any basic HTML elements like plain text and images. Continue reading below to learn how to add a One Page Text Link element.
Step 1 – Set up your Menu Anchors as instructed in the area 『Adding Anchor IDs To Sections』 above.
Step 2 – Add any element that allows for regular text to be inserted via the WordPress Content Editor. For example, the Text Block element.
Step 3 – Click the 『Settings』 icon on the Text Block element to bring up the Element Settings window.
Step 4 – Locate the WordPress content editor field. On the toolbar, you』ll find the Element Generator icon which looks like the Fusion Builder logo. Click the Element Generator to bring up the selection window.
Step 5 – Locate the 『One Page Text Link』 element, then click it to bring up it』s options window.
Step 6 – In the 『Name Of Anchor』 option, enter the anchor name of the section you』d like to link to with a hashtag ( # ). For example, if your anchor is aboutme, then you』ll need to enter #aboutme.
Step 7 – Once finished, click 『Insert』. You can then add content into the Text Block element as normal. Once you』re done, click 『Save』 to save your changes.
Adding Anchor Links As ClassesWhen you』re not using menu items or can』t use a One Page Text Link element, then you can try adding a custom class to the anchor itself. There are two classes you can add for different circumstances. These two classes are
Copy to Clipboardfusion-one-page-text-link 1fusion-one-page-text-linkOR
Copy to Clipboardfusion-menuxxxxxxxxxx1 1fusion-menuContinue reading below to learn when to use each one.
You can add the
Copy to Clipboardfusion-one-page-text-linkxxxxxxxxxx1 1fusion-one-page-text-linkclass to any link you add to Text Block elements, Checklist elements, Slider elements, etc. Basically, anytime you add a
Copy to Clipboardxxxxxxxxxx1 1 tag, you can also add
Copy to Clipboardclass="fusion-one-page-text-link"xxxxxxxxxx1 1class="fusion-one-page-text-link" into the
Copy to Clipboardxxxxxxxxxx1 1 tag. For example:
Copy to ClipboardClick Me!xxxxxxxxxx1 1Click Me!You can use the
Copy to Clipboardfusion-menuxxxxxxxxxx1 1fusion-menuclass if you』re adding anchor links to elements that has a 『Link』 option available. For example, elements such as Image Frames, Countdowns, Image Carousels, Content Boxes and etc. To set this up, insert the anchor link into the 『Link URL』 option then the
Copy to Clipboardfusion-menuxxxxxxxxxx1 1fusion-menu class in the 『Class』 option. To illustrate, refer to the image to the left.,Linking To A Section On Another PageIf you』re linking to a specific section of a page, from one page to another, you』ll need to use an Absolute Link rather than just a Relative Link. Continue reading below to learn how to correctly link to a section on another page.
Step 1 – Set up your Menu Anchors as instructed in the area 『Adding Anchor IDs To Sections』 above. This is where your menu item will scroll to.
Step 2 – You』ll need to use an Absolute Link to navigate to a different page as well as the element』s ID that you want to navigate to. That will look like http://yoursite.com#aboutme
This will direct you to your homepage, then your browser will 「look」 for the #aboutme ID and scroll to that location.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Anchor Linking To A Specific Toggle Or FAQ ItemIf you want to link to a specific toggle or FAQ item, this is now possible with Avada 7.2.1 and up.
Step 1 – Load page (for example, https://avada.theme-fusion.com/financial-advisor/)
Step 2 – Scroll to toggles and right click on specific toggle item, as seen in the screenshot below (eg.How do I Get Started)
Step 3 – Select copy link address to get URL (eg https://avada.theme-fusion.com/financial-advisor/#97a77b7a2579a33f8)
Step 4 – You can then use that link directly as part of a Button Element etc.
IMPORTANT NOTE: This method this will work on page load or linking from a different page, but will not work on the same page, for example, through a button click. Also, If linking from an external source, you can add an underscore after the hash, as explained in the following section.,Underscore In The Anchor Link AddressLinking from one page to another while using anchor scrolling, will cause Avada to add an underscore character between the # character and the actual target ID (the anchor name). This can cause problems in some uses, but is required for triggering the theme』s smooth scrolling script.
There are instances where users may want the ability to remove the default underscore from the URL. (eg. when linking to a non-Avada area of your site; like a specific location in a PDF document OR off your site entirely.) When that is needed, you can add the class
Copy to Clipboard avada-noscroll xxxxxxxxxx1 1 avada-noscroll to the element or link.,Methods You Can Use To Add This Class To Your LinksWhen adding to an element, you can add the class to the Custom CSS area.When adding the link as a direct text link in the default editor, you can add it through a class attribute.If you』re adding your link through a Custom Link WordPress menu item, you can add it to the Custom Class field for the menu item.Note: If you do remove the underscore from the URL, it will disabling smooth scrolling for that link. So it shouldn』t be used unless you』re not intending on navigating with smooth scrolling.