how to create section links in elementor

How to Link to a Section in Elementor On the Same Page (Anchor or Jump Links)

Facebook
Twitter
LinkedIn

Without Elementor, you would have to insert HTML code in the section you want to link to. With Elementor it is very easy to create links that jump to a section on the same page. These links are called anchor links or jump links. 

Creating jump links in Elementor is a two-part process that is really easy.

Part 1 – Creating the CSS ID In the Section You Want To Link to

Follow the steps below to create a CSS ID for the section you wish to link to.

1 – Go to the section which you wish the link to jump to and right-click and select “Edit”

2 – When the left Elementor pane opens up, click the “Advanced” tab of the edit section

3 – Add a CSS ID to the section. You can add anything in here to identify the section. 

Do not use the # character in this section. So for instance, you want to identify a call to action section on the page, then you would simply call the CSS ID call-to-action or calltoaction. 

Part 2 – Linking to the CSS ID

1 – After adding a CSS ID to the section you want to link to, go to the section on your page where you want to place the link, such as a button,  image, or link of text.

2 – Right-click on whichever element you want to use as the link.

3 – Under Content tab, look for the Link field, add the “#” and the CSS ID you added from the previous section. So if I named the CSS ID of the section I wanted to link to call-to-action, then I would enter in #call-to-action in the link field.

Note: If you want to use plain text as a hyperlink, all you need to do is highlight the text on the page when you have your Elementor editor open, and then click on the link icon.

After that you would do the same thing when the link field pops up you put in #call-to-action, exactly the same as above.

Share on Facebook
Tweet this article
Share on LinkedIn
Email this article

More to explorer

Beaver Builder Review

Beaver Builder is a WordPress plugin that simplifies page design through a user-friendly drag-and-drop interface. Without Coding, users can create professional-looking pages