a
M
DonDivi Builder logo

DonDivi Builder

The #1 Collection of Premium Divi Modules!

DonDivi Builder Modules:

Content Toggle

DonDivi Gallery - Icon White

Gallery

DonDivi Grid - Icon White

Grid

DonDivi Hotspots - Icon White

Hotspots

DonDivi Nav Menu - Icon White

Nav Menu

DonDivi Popup - Icon White

Popup

DonDivi Tabs - Icon White

Tabs

DonDivi Timeline - Icon White

Timeline

DiviMenus

DiviMenus

The #1 Menu Builder!

DiviMenus Extra Add-ons:

Floating

Floating

Sharing

Sharing

On Media

On Media

DiviMenus Family

DiviMenus & Family

Special Bundle!

DiviSignatures

DiviSignatures

Sign Emails with Divi!

DiviPasswords

DiviPasswords

Protect any Content!



Layouts

Get inspired and download them from your account.



Log In

Access your Account.
Not a member? → Sign up


Extra Tools

DonDivi plugins also include Exclusive Extra Tools.

i

Documentation

Learn and get the most of our plugins.

About Us

We create premium tools for improving your creativity.



FAQ & Support

How can we help you? Check our FAQ or submit a ticket.

DiviSignatures Documentation

DiviSignatures
CDocumentation
Installation
Overview
Getting Started
Signatures
Email Clients
Troubleshooting
Advanced
Videos

DiviSignatures

Design Email Signatures with Divi and paste them into your Mail Settings!

Installation

In order to use DiviSignatures 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 DiviSignatures 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!

Signatures

Members Directory

Here you can choose whether you prefer to display all the signatures in a row, or by the contrary, you prefer to display a single signature per member (by choosing the Members Directory option).

In case you want to use the directory, this module ships with a search bar to filter members by their name.

Copy Button

This button copies the the signature to the clipboard so that you can paste it directly on your email client. 

Download Button

This button downloads the signature as a HTML file

Unlike other tools, you don’t need to do that to paste the signature to the email client. You can just use the copy button and voilà!

Guide

This module comes with a rule to help us to determine the actual signature width when on a email client.

This is important when using large images or long words, to ensure that the signature width is smaller than the screen size.

We recommend you not to include images bigger than 300px width.

Member

Here you can add to the signature the member information, such as their name, position or company. Take into account that you can add the position and the company for all the members from the main module; the name was added when creating new members.

You can also hide the member name and their photo. That way we create common signatures.

A common signature can be used by member that work in the same company (coworkers), it can be also be used by members who belong to an university deparment (professors). Those are some examples of use of the common signatures.

The value entered in the field Name will be displayed in the Members Directory to identify the common signature template.

Member Design

You can style the member fields from the design tab. Please note that we only offer the design fields that are fully supported by the email clients.

Photo and Logo

Here you can add the member(s) logo to all the signatures / specific signatures.

The member photo must be added inside the member signature.

The supported image file formats for email clients are PNG and JPG.

GIF images have a good support as well, but it is not fully supported by all email clients.

The SVG and webP formats are not supported by some email clients, so we recommend that you don’t use them.

Photo and Logo Design

You can style these fields from the design tab. Please note that we only offer the design fields that are fully supported by the email clients.

Contact

Here you can add the member(s) contact information to all the signatures / specific signatures.

Display Contact Labels

Enable this field to add labels before your contact information. You can choose between these options:

  • Text labels (for example T for a telephone number or E for an email address)
  • Icon labels (since DiviSignatures 1.4)
  • None (do not show label for this contact information)
  • Inherit (available in single / specific signatures: use the parent label for this contact information)

Address

Here you can add the signature address. You can add as many lines as you need. You can also leave empty lines to display several addresses.

Phone Numbers

Here you can add the phone numbers. If the Display Contact Labels field is enabled, you can choos to also display the following labels: T, M, F, telephone icon, mobile icon and fax icon.

Email

Here you can add an email address to the signature and the email label.

Website

Here you can add a website address to the signature and the website label.

Contact Fields Order

This field offers a list with all the above fields so you can drag them and change the display order in the signature.

Contact Design

You can style the above fields (both contact labels and contact information) from the Design tab. Please note that we only offer the design fields that are fully supported by the email clients.

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″)

Supported Social Networks
  • Behance
  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Pinterest
  • Skype
  • Spotify
  • Twitter
  • Vimeo
  • WhatsApp
  • YouTube

Footer

Here you can add a default footer for specific members. 

Take into account that a dummy name and footer is added when creating a signature, so you will have to remove or update those fields.

Layout

Here you can choose between one-column and two-column layouts.

Regardless of your choice, you will be able to choose the signature elements order

Just like other fields, you can choose all the signatures layout from the parent and change a signature layout from that signature itself.

> See all the Layouts in action here!

> Understanding DiviSignatures Tables

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 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
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 Image File Formats
  • JPG
  • PNG

How to paste your Signature:

  • Apple Mail
  • Outlook
  • Gmail
  • Thunderbird

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 attached in email

Signature images (photo, logo and social icons) might fail to load and be attached to the email instead. Especially when sending or forwarding from Gmail App.

Again, this is normal behavior of email clients and these issues have nothing to do with DiviSignatures.

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”

Images not downloading in incoming messages

By default, some email clients will not download images from emails that are received externally. This is normal behavior of email clients and have nothing to do with DiviSignatures.

In order to automatically download all images from incoming emails please follow this steps:

Apple Mail

You must allow Apple Mail to load external content by going to Preferences, clicking on the Viewing tab and make sure that the “Load remote content in messages” option is checked.

If you are using macOs Monterey, you will need to change the privacy preferences in order to load external images:

https://support.apple.com/en-bh/guide/mail/mlhlae4a4fe6/mac

Microsoft Outlook

Go to File > Options > Security Trust >  Change Automatic Download Settings > and then uncheck “Don’t download pictures or other content automatically in HTML e-mail”, and also uncheck “Warn me before downloading content when editing, forwarding, or replying to email”.

Cannot see images in Outlook emails?

Gmail

Turn images on or off

Images not visible when replying to an email

When replying to emails, your email signature loses its formatting. This happens when someone sends you a plain text email, and you reply to it.

Apple Mail

By default, Apple Mail will use the format which the email was created with when responding to emails.

To fix this problem:

Step 1

Open Apple Mail > Preferences:

Go to Composing tab, and ensure that “Use the same message format as the original message” is unticked.

Step 2

Open Apple Mail > Preferences:

Go to Signatures tab, and ensure that “Place the signature before the quoted email” is ticked.

 

Learn more: Reply to or forward emails in Mail on Mac

Advanced

Prepending a sign-off message to the signature

You can prepend a sign-off line before pasting the signature in the email client.

In the following screenshot we demonstrate how to prepend “kind regards,” in Apple Mail, but of course you can also do it the same way on Microsoft Outlook, Gmail or Thunderbird.

Custom signature URLs

This module allows you to share an URL that only displays a single signature, regardless of the number of signatures that URL contains.

For example, let’s assume we have a post / page (signatures-page) with several signatures.

Let’s assume these signature names:

John Doe
Jane Doe
Nick
Andy

You can add an existing signature name to the URL this way:

https://mywebsite.com/signatures-page/?signature=Nick

As a result, the post / page will only render the Nick signature and the remaining ones will be omitted.

Please notice that the signature name that you add to the URL is case insensitive, so these URLs will work:

https://mywebsite.com/signatures-page/?signature=nick

https://mywebsite.com/signatures-page/?signature=NiCK

https://mywebsite.com/signatures-page/?signature=john doe

https://mywebsite.com/signatures-page/?signature=JOHN DOE

Also, in newest versions of DiviSignatures, you can omit the spaces within the name. As a result, these both URLs will render the John Doe signature:

https://mywebsite.com/signatures-page/?signature=john doe

https://mywebsite.com/signatures-page/?signature=johndoe

Understanding DiviSignatures Tables

DiviSignatures 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.

 

> See all the Layouts in action here!

1 Column Layout

When you choose a Layout from the dropdown under Layouts > Sections, we are actually rendering the table rows as following.

  • Photo + Logo + Name
  • Photo + Name + Logo
  • Logo + Photo + Name
  • Logo + Name + Photo
  • Name + Photo + Logo
  • Name + Logo + Photo

The Name row includes the member and contact information as you can see in the image below.

2 Columns - 2 Rows Layout

When you choose a Layout from the dropdown under Layouts > Sections, we are rendering the information in a two-row table.

Please notice in the images below how you can differentiate the two rows.

2 Columns - 1 Row Layout

When you choose a Layout from the dropdown under Layouts > Sections, we are rendering the information in a one-row table.

Please, choose this layout if you don’t want any space between the Member and the Contact information.

Understanding the footer field

The footer field is a text editor field. Unlike the other module fields, which are passed to the DiviSignatures 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 DiviSignatures 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 Social 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');

Videos

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!

Documentation

Access all the detailed information about our plugins and get the most out of them!

DonDivi Builder logo

DonDivi Builder

Content Toggle

DonDivi Gallery - Icon White

Gallery

DonDivi Grid - Icon White

Grid

DonDivi Hotspots - Icon White

Hotspots

DonDivi Nav Menu - Icon White

Nav Menu

DonDivi Popup - Icon White

Popup

DonDivi Tabs - Icon White

Tabs

DonDivi Timeline - Icon White

Timeline

DiviMenus

DiviMenus

Floating

Floating

Sharing

Sharing

On Media

On Media

DiviSignatures

DiviSignatures

DiviPasswords

DiviPasswords

Be Creative

Get inspired and create the coolest designs!

YouTube Channel

Layouts

Documentation

Join our Newsletter!

Thanks and Stay Tuned

Join


CONTACT US.

7 + 14 =






PLUGINS

DonDivi Builder
DiviMenus
Floating
Sharing
On Media
DiviSignatures
DiviPasswords

DONDIVI

DonDivi
About us
Layouts
Extra Tools
Documentation
FAQ

MEMBERS

Your Account
Affiliates
Changelog
License Renewal
Refund Request

Privacy & Terms

© DonDivi | From Spain with ♥