Section link

Set an element ID and use it to create an anchor link that takes you to a section on a page.

elements
 
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

Section links or anchor links allow you to link to specific sections or elements in your website. To create an anchor link for a section, you'll first need to set an element ID on that section.

Note: An element ID can also be used in custom code to point to a style in a style sheet or to manipulate a specific element with JavaScript. However, the most common use for an ID is in section links or anchor links to different sections on a page.

In this lesson, you’ll learn:

  1. How to set an element ID
  2. How to configure a section link
  3. How to link to a section on another page
  4. How to link to a section on the homepage

How to set an element ID

You can assign an ID to any selected element.

  1. Select the element that should be assigned to the ID
  2. Open Element settings panel and type a unique ID in the ID field
Note: An element ID must contain at least one character and cannot contain any space characters. Also, an element ID should be unique for each element. Learn more about how to fix duplicate element IDs.
An example ID named "Magic-section" is added to the Section's settings in the Element settings panel.

How to configure a section link

  1. Select the link element that you want to take you to a section on your page
  2. Open Element settings panel > Link settings
  3. Click the Page section button
  4. Click the Section dropdown menu and choose the ID you just created (e.g., “Magic-section”)
The "Magic-section" example ID is a choice in the Section dropdown in the Link settings section of the Element settings panel.

How to link to a section on another page

If you want a link element, such as a button, to link to a section on another page (excluding the homepage):

  1. Open Element settings panel > Link settings
  2. Choose the URL link type
  3. Enter the URL of the page where the section exists followed by “#” and the element ID you assigned to that section

Here's what your anchor links would look like:

  • a page in your current site: site.com/page#section-ID
  • if your page is nested in a folder: site.com/folder/page#section-ID
  • an anchor link on another website: site.com/folder/page#section-id
  • a homepage anchor link would look like: site.com/#section-id

Examples

On this page, we have 4 section links that link to the 4 article sections on this page.

  1. How to set an element ID
  2. How to configure a section link
  3. How to link to a section on another page
  4. How to link to a section on the homepage

To link to the last section of this page, the URL is: https://university.webflow.com/lesson/section-link#how-to-link-to-a-section-on-the-homepage

An example URL for a button is set to "site.com/page#Section-ID" in the Link settings section of the Element settings panel.

How to link to a section on the homepage

To link to a section on your homepage, the page name is not needed in the anchor link URL. Instead, type the homepage domain followed by “#” and then the section ID. (e.g., A homepage anchor link would look like: site.com/#section-id)

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?