Elementor is one of the most popular WordPress page builders that allows users to create stunning and functional websites without needing to write any code. One of the most useful features of Elementor is its ability to easily add clickable links, including email links, to your website. A clickable email link allows visitors to easily send you an email by simply clicking on it, which can be especially helpful for contact forms, support emails, or business inquiries.
In this article, we’ll show you how to add a clickable email in Elementor, step-by-step.
Steps to Add a Clickable Email in Elementor
1. Open Your Page in Elementor
- Start by logging into your WordPress dashboard.
- Go to the page or post where you want to add the clickable email link.
- Click on Edit with Elementor to open the Elementor editor.
2. Drag and Drop the Text Widget
- In Elementor’s left panel, search for the Text Editor widget.
- Drag and drop the Text Editor widget to the section of your page where you want to add the email link.
3. Enter Your Text
- Once the Text Editor widget is added, click on it to open the text editor panel.
- Type in the text that you want to display as the clickable email link (for example, “Contact Us” or “Email Us”).
4. Create the Email Link
- Highlight the text you just typed.
- In the text editor toolbar, click on the Link icon (it looks like a chain link).
- A pop-up will appear where you can enter the link.
- Type your email address prefixed with mailto:. For example, if your email address is
example@example.com, you will enter:mailto:example@example.com - Press Enter or click the Apply button.
5. Style the Link (Optional)
- After adding the clickable email link, you may want to style it to make it stand out.
- Under the Style tab of the Text Editor widget, you can adjust the typography (font size, color, etc.), add hover effects, or change the text alignment to suit your design.
6. Preview and Save
- Once you’re happy with the text and the style, click the Preview button to see how it looks.
- If everything looks good, click Update to save your changes.
Using Other Widgets for Email Links
Besides the Text Editor widget, you can also use other widgets to create clickable email links in Elementor:
Button Widget
- Instead of using text, you can use a button to make the email link more noticeable.
- Add the Button widget to your page.
- In the Link field, enter the email address in the same format:
mailto:example@example.com. - Style the button as needed.
Icon Widget
- If you prefer using an email icon, drag the Icon widget onto your page.
- Choose an envelope icon or any other email-related icon.
- Under the Link field, enter the email address in the format
mailto:example@example.com. - Adjust the icon’s size and style in the Style tab.
Best Practices for Adding Clickable Emails
- Use a Contact or Email Section: If you’re adding multiple email links, it’s a good idea to organize them in a dedicated section for better user experience.
- Add a Call to Action (CTA): Instead of just displaying your email, provide a CTA that encourages users to reach out, such as “Have questions? Email us!”
- Spam Prevention: To prevent email scraping bots from harvesting your email address, consider using a contact form plugin instead. Alternatively, obfuscating your email address or adding JavaScript-based email protection can help reduce spam.
FAQ: Frequently Asked Questions
1. How do I ensure my email link works on all devices?
The mailto: link will work on most devices, including desktops, tablets, and smartphones, as long as the user has an email client set up on their device. However, be sure to test it yourself to ensure compatibility.
2. Can I add a subject or body to the email link?
Yes, you can pre-fill the subject and body of the email using the mailto: link. For example:
mailto:example@example.com?subject=Inquiry&body=Hello,%20I%20have%20a%20question.
This will open the user’s email client with a pre-filled subject line and body.
3. Can I add a clickable email link using Elementor Pro?
Yes, you can add a clickable email link using both Elementor free and Elementor Pro. The process is the same for both versions.
4. What if I want to use an email icon instead of text?
You can use the Icon widget in Elementor to add a clickable email icon. Just set the link to mailto:example@example.com and style the icon accordingly.
5. How do I avoid spam when displaying an email address?
To reduce spam, consider using a contact form plugin or obfuscating your email address with JavaScript. You can also use email protection services or hide your email behind a “Contact Us” form to prevent bots from scraping it.
By following these simple steps, you can easily add a clickable email link in Elementor and make it easier for your website visitors to contact you. Whether you’re using a text link, button, or icon, Elementor offers a user-friendly way to integrate email links seamlessly into your design.