How to add and use an anchor element

In this tutorial, we will guide you on how to add and use an anchor element.

Note: This feature is particularly useful for single-page websites or long pages.

Step 1 - Open "Add Element" Menu

To add a new element to the page, you have two options:

1. Right-click anywhere on the page and select "Add Element".

2. In the "Section" menu on the right side of the section where you want to add the element, click the "+" button.

Step 2 - Add Anchor Element

In the "Add Element" menu, click on the "Anchor" element.

The anchor element is only visible in Edit Mode. In Preview Mode as well as on the published site, it remains invisible.

Step 3 - Open Anchor Settings

You can open the anchor settings in two ways:

1. Double-click on the element.
2. Hover over the element and click on "Edit Anchor".

Step 3.1 - Setting Up the Anchor ID

For the anchor to function properly, you must enter a valid Anchor ID in the "Anchor ID" input field.

Note: Only alphanumeric characters, hyphens (-), and underscores (_) are allowed.

The ID is case-sensitive.

Warning: IDs must be unique on the page.

Step 3.2 - Copy ID

After adding the Anchor ID, click on the "Copy" button.

Step 4 - Linking to an Anchor

Once you’ve copied the ID, open the settings of the element where you want to add the anchor link.

In the element’s settings, click the "Link to" button.

Step 4.1 - Select Type "Anchor"

In the "Link To" menu, click the "Select Type" dropdown and choose "Anchor".

Step 4.2 - Enter Anchor ID

After selecting "Anchor", paste the copied ID (or write it) in the "Anchor ID" input field.

Info: If you add an anchor in the navigation menu, the link text will reset.

Step 5 - Preview

You're all set. Preview the website / page to see how it all works.

• Related Articles

• How to add a new element to the website

  You need to think about Aphyo’s templates like a starting point for your website. Even if you have found the aesthetic that you like and matches your brand’s imagery, you still need to make some changes. So here’s how to add a new element to your ...

• How to edit an element

  There are two ways you can edit an element. 1. You can hover the element you want to edit and use the small toolbar that allows you to edit or delete the element. 2. Double click the element to open its editor. We recommend that before you start ...

• How to edit contact forms and add new form fields

  In this guide, you will learn how to edit the Form element, manage form fields, and configure various settings to customize your form. Step 1 - open editor Open the "Form Settings" editor. Click "Edit Form" on the hover menu or double-click on the ...

• How to add and edit links for: buttons, images, etc

  This tutorial will guide you on how to change the link for the following elements: button, image, box, text, navigation, logo. Step 1 Open the "Settings" editor for the element you want to add a link (shown in screenshot: button settings). Click ...

• How to add brand colors

  This tutorial will guide you on how to add a new color palette. Step 1 - Open Website Styles Click on the "Website Pages" button. Step 2 - Open Colors In the "Website Look & Feel" menu, select "Colors". Step 3 - Add Color Click on the "Add" button. ...