Videotutorial with ENG subtitles
The anchor works as a link within a single page. You do not see a different page (web) through the link, but you will be taken to another place on the page you are currently viewing. Anchor formation (tabs) is divided into two parts:
- You first create a bookmark, so a place that appears when you click the link.
2. Then you set a link that moves you to the tab (anchor).
The anchor is set by Webnode using HTML code. You can insert the HTML code on Webnode pages using this manual.
#Step n.1 Creating an anchor
Add a bookmark to the desired location on your site. Each tab needs to be named exactly – names can not be repeated within one site. You can use this HTML code to create anchor:
Instead of XXXXXXX enter the name of the anchor eg. anchor1
#Step n.2 Set a link
By clicking on the link, you will be redirected to the anchor – the link is usually set to normal text, but it can be, for example, also set to an image or button, etc. Use the following code to insert a regular text link:
Instead of #XXXXXXX enter the anchor name from point 1
Example:
The “Click on this text” below is the anchor that is set at the beginning of this article. At the beginning of this article is an embedded HTML code in the form of:
The text you click on is embedded with HTML code that is in the form of:
You can try it out and click the “Click on this text” below.
TIP:
You can also set the anchor in the Webnode as scroll to top button, for example: “To the top”.
1. Firstly insert to your website the code from point 1. Enter the code where you want to redirect the visitor.
2. Then on the webinsert button that you can name eg: Top
3. Finally set a link to button in form of
1 |
http://www.mywebsite.com/#anchor-name |
BEST TIP: Insert scroll to top button using pre-prepared code 🙂 Just copy and paste it. Read more here: How to add a Scroll to Top button to website in Webnode?
More awesome tutorials
7 new WEBNODE templates for creating a company website
Have you seen 7 new Webnode templates for creating a company website in 2023?In our Webnode News, we have already discussed a few interesting things about the Webnode editor. Have you read the article about 5 new awesome features of the NEW e-commerce Premium Plan...
Webnode Review: How to create a website/e-shop for free (Webnode review 2023 +SEO TIPS)
Have you ever wanted to create your own website from scratch? Do you want to create a website or e-shop and make it visible on the Internet? Get started right now and learn how to easily create your first custom website.Creating a website with Webnode is so simple...
How to add a playlist or album from Spotify to the Webnode website?
In the tutorial "3 easy ways to embed an online MP3 player on the web", I showed you very simple way to embed a music player on your Webnode website. Let's take a look at your other options together.Do you LIKE Spotify?Simply embed your Spotify playlist / album to...
How to redirect “Continue shopping” button in cart in Webnode e-shop to OWN URL?
Would you like to set a specific URL in your Webnode e-shop for the "Continue shopping" button in your cart?In the Webnode e-shop editor, the "Continue shopping" button in the cart is predefined to redirect the visitor of your e-shop to the last visited page. Webnode...
How to add a top bar to WEBNODE website (with contact information and social icons)
You can easily add top bar with contact information, social networks icons or a currency switcher (in the e-shop) or a website language switcher (flags).In our Webnode Free News i was talking about 5 new features of the NEW Premium Business Package and 6 best WEBNODE...
How to rename “Add to cart” button in Webnode e-shop?
Would you like to rename the "Add to cart" button in Webnode?In tutorial "How to rename" CART in the menu in the WEBNODE e-shop?" i showed u how to rename CART in the menu. Let's take a look at your other options. Webnode for e-shops is a great choice for your online...