Badge Webflow Award Winner 2023

Creating a link to a section of another page | Webflow tutorial

Published on 
21/12/2021
-
Amended on 
27/3/2023
Reading time: 5 min
#webflowtuto with link settings webflow
Written by
Florian Bodelot with a T-shirt Digidop

Florian Bodelot

Co-founder

In this tutorial, we explain how, in 3 steps, to create a link to a section of any page of your Weblow site.

Key points to remember

In webflow you can natively add a link to a section of your page with the link option "Page section -> Choose a page section". This feature works very well for setting up a link on a single page but does not work for redirecting your link to a section of another page on your website.

In this tutorial, we explain how to create a link to a section of any page of your Weblow site in 3 steps.

Video Tutorial : How to create a link section other web page?

Text and image tutorial

1. Give your section a name

First step, click on your target section and give it an "ID" name. Example in the gif: example-section

Giving a name (ID) to a section in Webflow

2. Create a link

Second step, create a link or go to the settings ⚙️ of an existing link

3. Set up the link to the section of your site

Third and final stage 🏁

Add the /#ID element after the url in the links settings of the Webflowf designer
  • Set up the link to a URL (as an external link)
  • Insert the url of your target page
  • Add to the end of your url www.exemple.com/#ID-section

⚠️ Se ction-ID should be replaced by the name of your section! example-section in the GIF above for example.

⚠️ Add /# after your url

This would give for example www.mon-site.fr/#exemple-section

We hope you found our tutorial useful! If you want to discover other tutorials on Webflow, have a look at our youtube channel 🍿

Flomodia by Digidop
Coudac project by Digidop
project Heka by DigidopFlaw by project DigidopMorfo project by Digidop