Anchors

Anchors can be added to any element on your site so that you can link directly to them. You can link elements such as buttons to anchors so visitors are redirected to another location on a site, or create anchor menus to help users navigate longer pages.

Adding an anchor

You can add an anchor to any element on a site, including sections and containers. Start by selecting the element you want to add an anchor to. From the Inspector panel under Anchor, turn the toggle on. Once it’s enabled, name the anchor so you can identify it.

Linking to an anchor

Once you’ve added an anchor, you can link elements such as buttons, images or text to it. When visitors click on the linked element, they’re redirected to where the relevant anchor is on the site.

To link an element to an anchor, select it and choose the Link option from the floating action bar. Choose the anchor option from the list. Then select which page the anchor is on from the dropdown. In the second dropdown that appears, find the name of the anchor you created and select it.

Note: You can link elements on one page to anchors on a different one.

Adding an anchor menu

Anchors can be displayed in an anchor menu that remains fixed in view as visitors scroll down a page. If you have a particularly long page with a lot of sections, anchor menus are useful for helping visitors navigate more easily.

You can add an anchor menu from the Add panel. Choose from several pre-designed options under Menu & Search, and drag one onto the canvas. Note that the Position type of the anchor menu is automatically set to Pinned, so it remains in the viewport as you scroll through the page.

Managing an anchor menu

With the anchor menu selected, choose Manage Menu from the floating action bar. From there you can control which anchors to display in the menu, and rename them as needed. There’s also a pre-made option to link to the top of the page.

Designing an anchor menu

You can control the menu’s appearance from the Design tab in the Inspector panel. From there you can adjust the style, color, fonts and more of the menu items in both the regular and clicked states. Change the text alignment by clicking on the Layout icon from the floating menu while the menu is selected.

Follow these steps in the editor

Open exercise template →

Add a button. Drag a new button from the Add panel into the first section and position it inside the stack above the other button. Choose Change Text and change the new button’s text to “Register now.”
Add an anchor. Scroll to the bottom of the page and select the last section above the footer. From the Inspector panel, enable the anchor toggle and name it “Register.” The section will automatically be added to the anchor menu on the page.
Link to the anchor. Go back up and select the “Register now” button you added. Click the Link icon from the floating menu and choose the anchor option. Choose the home page from the first dropdown, and the “Register” anchor from the second one.
Review the final result. Preview the site and click on the “Register now” button. You will be redirected to the relevant section.

Transcript

Let’s see how to work with anchors on Editor X.

You can add an anchor to any site element to link right to it. This way you can, as an example, link a button that redirects visitors to information somewhere else on a site. Or, you can display an anchor menu to help visitors navigate one long page, like we have here. We’ll take a look at how to add anchors, link to them, and how to create an anchor menu.

Let’s dive in.

We can add anchors to any element including sections, containers and images.

Then we can link right to them. We’ll link this button to an anchor on the page so visitors can click and be redirected to a section with more information. Let’s go to the section we’re linking to.

It’s this one here. We’ll select it, and over here we’ll toggle the anchor option on.

Let’s give it a clear name so we can tell which anchor we’re linking to later.

And the new anchor is created…now back up to the button where we’ll link to it. The anchor is on the homepage, but if we wanted to we could link to one on a different page. We’ll choose our anchor from the dropdown here.

And done. Let’s see how it’s working…click the button, and we’re redirected to the section we added the anchor to. Next let’s check out how to create an anchor menu.

So, to make this page a little easier to navigate we’ll add an anchor menu like this to the left side of the page that lets people click through the different sections.

To do that, first we need to add anchors to the different places we want to link to. Here we want one for each section.

And we’ll name each one to identify the sections.

Okay, they’re all added so we can go ahead and bring in an anchor menu from here in the Add panel.

The anchors are listed already. With our menu selected, let’s go to Manage Menu.

And we can select which anchors we want to display. There’s also an anchor here by default that links us back to the top of the page.

We can also rename them from here. Maybe we’ll change up this one.

Nice. Our menu is all set up. Next let’s design and position it how we want.

First let’s align the text to the left. Then we’ll change the height to make more space between each item. We’ll adjust its position. And see how the position type here is set so it’s pinned to the page?

That’ll make sure this menu stays fixed in the viewport as we scroll up and down the page. Then we’ll change the text color…font…and then give the item that’s clicked a different color.

Looks good, so we’ll preview. As we click on each menu item, the link takes us down to the section and we can see the color changes to show us where we are on the page. And there we go–that’s how to add anchors to elements, link to them and how to create an anchor menu to help visitors navigate a site.

Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.