🎁 Get Up To 70% Off During Divi Summer Sale! Get Divi

How to Create an Email Button in Divi

Blog, Divi Tutorial | 2 comments

In this tutorial I will share the steps to create an email button in the Divi theme. When you click the button it will open the default email program on the computer with predefined content filled in.

If an email program is not setup then the user will see a popup to setup a mail program such as Outlook on Windows.

Basic

To setup a button with the TO field already filed out add the following in the Button Link URL

mailto:help@learnhowwp.com

Here is a screenshot to help you find where to add it in the Button Module Settings. You can replace help@learnhowwp.com with your own email address.

Adding Email Link on Divi Button

Adding Subject to Mail Link

To setup the Subject of the email and the To field you have to add the below code. It has an extra parameter in the code with the name of subject you can change the text assigned to subject and add your own text.

Using the below code will add Mail from Our Site to the subject of the email.

mailto:help@learnhowwp.com?subject=Mail from Our Site

Adding Body Text to Mail Link

To take it a step further and add a predefined Body text you can use the code below.

You will notice that it has an extra body parameter which contains the body text.

mailto:help@learnhowwp.com?subject=Mail from Our Site&body=This is the body text

Adding Multiple Emails

You can add multiple emails in the TO field or the CC and BCC fields by separating them by a comma

mailto:help@learnhowwp.com,info@learnhowwp.com

Adding CC and BCC

To create an email with To, Subject, CC, BCC and Body already filled out the below code should work.

mailto:help@learnhowwp.com?cc=info@learnhowwp.com&bcc=another@learnhowwp.com&subject=Mail from Our Site&body=This is the body text

Adding Email Link on Another Module

The links can also be added on any other modules in Divi. For example they can be added on a Blurb Module, a Person Module or others.

You just to have to add the code in a Link URL field. It is found under Module Settings > General > Link

For example in the Blurb Module it could be added to the Title Link URL or the Module Link URL.

Adding Email Link Blurb Module Divi

Next you can checkout another Divi tutorial.

  1. Change Number of Columns in Divi Portfolio Module
  2. Change Icon in Divi Toggle or Accordion Module
  3. Add Labels Above Input Fields In The Divi Contact Form

Leave a comment below if you found this helpful or have any questions. Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.

About the Author

The author of learnhowwp.com is a WordPress expert with over a decade of experience, specializing in Divi. Since 2014, they have built numerous WordPress sites and developed 8 Divi plugins with over 30,000 active installations. A former support team member at Elegant Themes, they launched learnhowwp.com in 2020 to share their in-depth knowledge of Divi. Now home to over 65+ articles dedicated to Divi tutorials and insights

2 Comments

  1. smohamad

    Hey! Do you know if they make any plugins to protect against
    hackers? I’m kinda paranoid about losing everything I’ve
    worked hard on. Any tips?

    Reply
    • Megidoflame

      I think using the All-In-One WP migration plugin would help. You can export your website onto your computer.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Our Plugins Are Already Being Used On 30,000+ Amazing Websites.

We offer a 30 Day Money Back Guarantee on all plugins, so joining is Risk-Free!