How to add a Hyperlink in Elementor

Share This Post

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp

Table of Contents

Elementor Logo

In this WPDesigns article, we will discuss how to add a hyperlink in Elementor.  Hyperlinks can link to pages and files on the web; they can be on the same site (internal) or another (external).  Both types of links are important for navigation purposes and help travelers find what they’re looking for. Both internal and external hyperlinks assist in the Search Engine Optimization (SEO) of the website, making it more accessible. Links are the backbone of the internet, so they are essential and should not be underestimated.

Many websites on the internet are linked together, which is why the terms “Web” and “World Wide Web” were introduced in the first place. These are the text, buttons, and other items you press to navigate from one page to the next or from one website to the next. Consider going to a website with no links for you to click on, you’ll have no choice but to use the browser’s back button, and it would be hard to get anywhere without knowing what you need beforehand; even site menus are links to other pages.  Links on individual websites guide visitors to where they can find more content and help everyone navigate around.

How to Add a Hyperlink in Elementor Using the Text Editor

In the Elementor editor, choose Page to include a hyperlink in the text editor. Then, to add a hyperlink, add a text editor widget. The interface will look similar to this.

Find The Text You Would Like To Add The Hyperlink To
Find the text you would like to add the hyperlink to
Adding Hyperlink
Insert the link you want to connect the highlighted text to

Then, from the text editing options, select the text to add the hyperlink and then choose the insert link option from the list. After that, you’ll get the option to add a link; paste or type the link into the box and then press the arrow button.

If you want to send the visitor to a new tab when someone clicks on the link just click on the setting cog icon beside the arrow icon. Then you will get the checkbox to open in a new tab. Just check the box and click on add link.

To Open The Link In A New Tab
Click the cog for more options
Open Hyperlink In New Tab
Here you can tell the link to open in a new tab
Add Link To Heading In Elementor
Add your link into this box to link the header

How to Add a Hyperlink in Elementor Using a Heading

Find the heading you want to add the hyperlink to.  Click the heading, and on the left-hand side of the page, you will see the link field under the content tab.  Write or paste the link you want to use, make sure it is prefixed with HTTP or preferably HTTPS.  If you want visitors to be redirected to a new tab on click, press the setting icon next to the link field. Then there is a checkbox that says “Open link in a new tab.” If you want to open the link in a new browser tab, check this box. Then tap Update.

How to Add a Hyperlink in Elementor Using a Button

To add a hyperlink to a button, simply drag and drop the button widget onto the page, and the link field will appear under content tab. Simply paste the link into this box and press the update button. Press the setting icon next to the link field if you want visitors to be directed to a new tab when they open the link. Then there’s the “Open in new tab” checkbox. Check the box if you want to open the connection in a new window.

How To Add Hyperl;Ink In Elementor Button Widget
Adding a link to a button goes in this box
How To Add Hyperlink In Elementor Icon Widget
Add your link into this box to link your icon

How to Add a Hyperlink in Elementor Using an Icon

To create an icon linkable, use the Elementor widget search bar to find the icon widget. Then, using your cursor, drag and drop it onto the page. The content tab will appear in front of you after that. Then, from here, find the link field. Copy and paste the link you want to add. If you want to open the link in a new window, go to the setting icon next to the link box and check the open in new window tab and then press update. Your icon is now linkable.

Using Hyperlink Page Anchors to Navigate the Page

Page anchors are a type of hyperlink that allow you to navigate around the page and essentially navigate to a certain image on a page, they can be used on single page websites, to go to a certain place or even to direct attention to a certain area.  Read our in-depth post on Elementor Page Anchors where we explain how they work using the Elementor widget and the CSS ID for each individual widget.

Menu Anchors In Elementor
Menu anchor widget in Elementor


Social Media

Recent Posts


Typically replies in minutes

Hi there,

Feel free to message me if you have any questions.