Introducing Divi Signatures
1. Design your Signature
Start designing from scratch, take advantage of premade layouts, and customize every detail!
2. Setup your Signature
Click the “Copy” button and paste it into the signature editor at your Email Client!
3. Create Team Signatures
Use the Members Directory and design quickly signatures with common elements!
Installation
In order to use Divi Signatures you must first install and activate the Divi Theme. Then please follow these steps:
I have purchased through Elegant Themes Marketplace
Products purchased from The Divi Marketplace will work under your current Divi License, so no additional license is required. Just install your plugin, activate it and start using it!
The only difference between the “Divi Marketplace” version and the “DonDivi version” on our site is the License key.
Nothing to worry about!
I have purchased through DonDivi
If you have purchased this product at DonDivi, you will receive an email with the download link and your license key.
- Install the ZIP file into your website and Activate it.
- Introduce your License Key at DonDivi > Licenses and Activate it.
- Use the Check License button whenever you want to check the status of your License.
Once the plugin is installed, a new module is added to the Divi Builder called DiviSignatures.
Overview
This module allows you to create Mail Signatures using the Divi Builder.
Creating a signature is quite straightforward and only requires three simple steps.
1. DESIGN. Design your signature by using the Divi Builder.
2. COPY. Copy your signature to the clipboard by clicking the Copy Button.
3. PASTE. Paste it into your email client.
It’s that easy!
Getting Started
1. Click the Divi Signatures module in order to create your signatures.

2. Click “Add New Member”. This way a dummy signature template will be available for you.

3. That’s it! Start editing the signature template by using the module fields described below!

Email Clients
Most of email clients support HTML and CSS. Thanks to that we can use our signatures in emails.
Unfortunately, email clients don’t support all CSS styles. Furthermore, every email client supports different CSS subsets.
And not only that, some of them strip out the styles and CSS classes they don’t support and create their own ones.
That’s why we use tables and restrict the CSS styles and family fonts.
Supported Fonts
- Arial
- Arial Black
- Book Antiqua
- Century Gothic
- Charcoal
- Comic Sans
- Geneva
- Helvetica
- Impact
- Lucida Sans
- Lucido Grande
- Lucida Sans Unicode
- Monaco
- Tahoma
- Trebuchet MS
- Verdana
- Courier
- Courier New
- Georgia
- Lucida Console
- MS Serif
- New York
- Palatino
- Palatino Linotype
- Times
- Times New Roman
Supported Clients
This plugin has been designed to work for the majority of email clients and has been fully tested on the following ones:
- Apple Mail
- Microsoft Outlook
- Mail for Windows
- Outlook.com
- Gmail
- Gmail App (Android, iOS)
- Thunderbird
How to paste your Signature:
Important notes on email clients
Due to the email clients limitations when it comes to styles, we have create a help guide taking into account some problems we can come across.
Blue links
Links can be turned blue and underlined. Especially in Gmail emails and outgoing Microsoft Outlook emails.
Images not showing in email
Signature images (photo, logo and social icons) might fail to load and be attached to the email instead. Especially when sending or forwading from Gmail App.
Again, this is normal behavior of emaill clients and these issues have nothing to do with Divi Signatures.
Troubleshooting
Apple Mail: Images not visible when Installing an Email Signature
When installing your email signature, please ensure you untick the box at the bottom of the signature preview window which says “Always match my default message font” as this will turn your email signature into plain text format, instead of keeping the HTML format of the signature.

Thunderbird: Images not visible when Installing an Email Signature
When pasting your email signature into the Signature editor, it will be added into HTML format, so please ensure you check the box: “Signature text: Use HTML”

Advanced
Understanding Divi Signatures Tables
Divi Signatures are made with tables in order for the signatures to be rendered correctly in the email clients (we discussed earlier about the email clients limitations).
We offer two different layouts. Check out the images below to better understand how the tables are being affected by the user settings.
1 Column Layout
When you choose a Layout from the dropdown under Layouts > Sections, you are actually reordering the rows from a table, as explained below. “Name” includes “Member” & “Contact”:
- Photo + Logo + Name
- Photo + Name + Logo
- Logo + Photo + Name
- Logo + Name + Photo
- Name + Photo + Logo
- Name + Logo + Photo
2 Columns Layout
When you choose a Layout from the dropdown under Layouts > Sections, you are actually reordering the cells “Photo” and “Logo” from a 2 rows table, as explained below:
- Photo + Logo
- Logo + Photo
When you choose one of these Layouts, you are actually using these 1 row table:
- Photo
- Logo
Understanding the footer field
The footer field is a text editor field. Unlike the other module fields, which are passed to the Divi Signatures shortcode as attributes, the text editor is actually the shortcode content.
[divisignatures att1="value1" att2="value2" attN="valueN"] FOOTER [/divisignatures]
However, we want the content to be the module items (i.e. the signatures we add), not the footer. Therefore, we cannot use the footer as the parent content, but the children (module items).
[divisignatures
att1="value1"
att2="value2"
attN="valueN"]
[divisignatures_item
att1="value1"
att2="value2"
attN="valueN"]
FOOTER
[/divisignatures_item]
[divisignatures_item
att1="value1"
att2="value2"
attN="valueN"]
FOOTER
[/divisignatures_item]
[/divisignatures]
That’s why we only offer footer fields in single signatures.
Filter Hooks
As of Divi Signatures 1.1 you can use filter hooks to customize the signature output.
Are you having trouble adding them or need help? Please visit this helpful resource from Elegant Themes.
Customizing the icons image Url
Even though we are offering different icon shapes and styles, you might want to use a different one.
You can update the image url for a social icon by using the divi_signatures_social_icon_url filter hook, where social is the social network name:
behance, facebook, github, instagram, linkedin, pinterest, skype, spotify, twitter, vimeo, whatsapp, youtube
Example usage for the facebook image url:
function custom_facebook_icon($icon_url) { $icon_url = "your image url here"; return $icon_url; } add_filter('divi_signatures_facebook_icon_url', 'custom_facebook_icon');
Customizing the phone labels
Likewise you can change the default phone labels (T / M / F) by using these filter hooks:
divi_signatures_phone_label_t
divi_signatures_phone_label_m
divi_signatures_phone_label_f
Example usage for displaying PH rather than T as the phone label in the signature:
function custom_phone_label($phone_label) { $phone_label = 'PH'; return $phone_label; } add_filter('divi_signatures_phone_label_t', 'custom_phone_label');
Social
Here you can add social icons to all the signatures / specific signatures. Those icons will link to the member social profiles.
In order to add a social icon to the signature, just input the social URL (username, email, phone or otherwise, depending on the social profile) and make sure the entered value is correct. For example:
Facebook
dondiviplugins (invalid URL) -> should be: https://facebook.com/dondiviplugins
WhatsApp
612345677 (invalid number) -> should include the country code: 34612345677
Same for Behance, GitHub, Instagram, LinkedIn, Pinterest, Skype, Spotify, Twitter, Vimeo and YouTube.
Of course, you can style these icons, choose their shape and even their colors. Watch video 1. Design your Signature (min. 1:50″)