How to Use the Button Widget in Elementor

Button Widget in Elementor
Share with friends

Table of Contents

Web Hosting from £19.95
Hosting plans come with enhanced server security and 24h automatic backups. Lightening fast speeds with SSL certificates included free with all our plans.
Written by Simon

Last Updated 29/12/2023

Using the Button Widget in Elementor

This article will guide you through using the Button Widget in Elementor. Using buttons to link to other sections of your website can be a powerful tool. It can guide users to a specific page on your site, or help your visitors navigate with ease. Let’s look at how to set up this important feature for your website.

Why Buttons and Page Linking is Important

There’s an obvious reason why buttons are useful, they can help visitors navigate through to your website. However, there’s another reason to create these internal pathways through your site and that’s to help search engines like Google index your site. Google “crawls” the pathways you’ve created on your website like your visitors do!

“A web crawler…indexes content from all over the Internet. The goal of such a bot is to learn what (almost) every webpage on the web is about, so that the information can be retrieved when it’s needed.”  – Cloudflare

Link to article: cloudflare.com

As Google’s crawlers begin indexing your site it follows these internal pathways you’ve created, flowing from one page to another. The more meaningful links it follows that land it on a specific page, the higher importance it will give this page. As a result, it will be more likely to offer this page to its users.

How to Link a Button Widget in Elementor to a URL

Open Elementor Page Builder and drag and drop a button widget from the editor’s sidebar. Under Content in the side panel, you will see a “Link” input field with a hashtag. Here is where you add the page URL you wish the button to send a user to. 

  1. Open a new window and search for the website’s page you wish to link to
  2. Copy the page’s URL
  3. Open your page with the Elementor Editor
  4. Select or add a “Button Widget”
  5. In the Elementor editor’s box under “Link” paste the URL
  6. Click “Update” or “Preview Changes”
  7. Test your button works on the live version of your website.
Button Widget in Elementor

Recommended Reading: Elementor Side Bar Editor

Linking to internal Pages/Blogs (Shortcut)

Another quick way to link to a page or blog on your website is to type the title of the blog or page in the “Link” input field. As you begin typing, a dropdown will appear. Select the page you need from this list.

Alternatively, if your website has many similar named pages you can copy the link by right-clicking on the “View” link on the page and clicking “Copy Link (Address)”.

Linking to your website pages - Shortcut

Recommended Reading: How to Create a New Page/Blog

Linking a Button to a Specific Widget or Container

We’ve just demonstrated how to link a button to a specific page, but what if we need to link halfway down the page rather than at the top of that page? This is done through CSS ID. 

CSS ID allocates that Widget or Container a name or ID. Once the element has been labelled, it can be referenced at any time. To add a CSS ID:

  1. Select the Widget or Container
  2. In the Elementor sidebar editor, Select the “Advanced” tab
  3. You will now see the CSS ID field.

Here you want to give the CSS ID a name. In the example screenshot below, we included the word “Banner”.

Linking buttons using CSS ID

Once the element has been given a CSS ID, there are 2 ways to link a button to it:

  1. A button that is located on the same page as the element
  2. A button that is located on a different page to the element

Same Page Button

If you are linking a button to an element on the same page, you need to type # followed by the element CSS ID. This will need to be added to the button’s “Link” field. So for our example, it would be #banner.

External Page Button

To link to a specific element on an external page, the steps are very similar. Label your CSS ID on another page and publish. Head back to your button and in the “Link” section type the full URL then /#banner. This is how it would appear if we were trying to link to a specific element on the PODTech website: https://podtech.co.uk/#banner.

Web Hosting

From £19.95 /mo