Did you know you can use Mailto link in Elementor to enable your website visitors to send you emails using their favorite email client? 

brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Add Elementor Mailto Link Tutorial

In this tutorial, I’ll show you 3 different ways to use Elementor Mailto Link to prompt your website visitors to open their preferred email client on their computer to send you an email.

Note that this (below) is what a typical Mailto HTML link looks like. 

However, you’re going to see as we continue, that when you’re using mailto in Elementor you’re going to need to make some changes for it to work.

With your Elementor page opened up, let’s get started.

1. Adding Elementor Mailto Link in a Text Widget

In your widgets area, drag a text editor widget to your section (00:51).

Select your text widget and in the Edit Text Editor area on the left, you can type in “Email: your email” for example Email: [email protected]. 

Highlight your email, then click on the insert link option/icon (01:18).

When you do this, the Elementor text editor widget automatically adds the mailto HTML tag to your email. However, the link is without the ‘href’ prefix (01:29). If you add the href prefix it will not work.

Just click apply (↩), then click the update button at the bottom. 

And with this, your website visitor can just click on the email link and they’ll be able to send you an email using their email client (01:40).

To Read: 3 Ways to Add a Click To Call in Elementor (No Other Plugin)

2. Adding Elementor Email Link to an Icon Box

Another way to prompt your website visitor to send you an email is by adding a mailto link in your icon box.

To use an icon box, go to your widgets area, search for the icon box widget, and drag it to your section. In the edit icon box area, you can add your icon from your icon library, then you can add your email under Title and Description, and on the Link option is where you add the mailto link (remember, add the link without the href prefix) (02:13).

Also Read: Make an Awesome Website Preloader in Elementor Pro v3.6

3. Adding Mailto Link to a Header

In case you want to add a mailto link to a header that wasn’t created with Elementor, for example, one that was made using the Astra theme like in this case:

Go to your WordPress dashboard > Appearance > Customize, click on the Header option, go to Above Header. Here, you have the option to add Text/HTML, that’s where you add your mailto link.

The difference here is; unlike when using Elementor, here you have to add the mailto link with the href prefix, otherwise, the link simply will not work. 

So you have to open up the html tag, add your mailto link, then type in your link text, for example ‘send email’ in this case, then of course don’t forget to close off the tags (04:30)

That way when someone clicks on send email, they’re instantly taken to their favorite email client where they can send you their email.

To Read: 2 Amazing Ways To Install Cloudflare Free SSL in WordPress

In Closing

That’s how you can get your website visitors to send you an email using their email addresses and on their email client. I hope you found value in this tutorial.

If you have any comments or questions, let me know below. And for more tips and tutorials, make sure you subscribe to my youtube channel and newsletter