With DiviSignatures, creating elegant, responsive HTML email signatures has never been easier. Design in Divi, copy to clipboard, and paste into any email client in seconds.
Installation
Install and activate the Divi Theme.
Go to WordPress Dashboard → Plugins.
Click on the Add New Plugin button.
Click on the Upload Plugin button.
Choose the DiviSignatures zip file.
Click on the Install Now button.
After installation, a new module named DiviSignatures will appear in the Divi Builder.
Overview
DiviSignatures allows you to design and export fully responsive, HTML-based email signatures using the Divi Builder.
Only 3 steps are required:
Design – Create your signature with Divi’s Visual Builder.
Copy – Click the Copy button to copy the HTML to your clipboard.
Paste – Paste the signature into your email client.
That’s it; no need to download or export HTML manually (though you can).
Getting Started
Add the DiviSignatures module to your layout.
Click Add New Member to start with a ready-to-edit template.
Customize each section (Member info, contact, social icons, etc.).
Signatures
Members Directory - Choose whether to show all signatures at once or display just one per member using a filterable directory with a search bar. Using, you can choose whether to display all signatures at once or just one per member.
Copy Button - Click this to copy the signature to your clipboard and paste it directly into your email client.
Download Button - Allows you to download the signature as an HTML file. Useful for backup or advanced editing, but not required.
Guide - A visual helper indicates the actual width of the signature in email clients.
Pro Tip:
Avoid images wider than 300px.
Member Fields
Member - Each member includes:
Name
Position
Company
You can hide the name/photo to create a common signature shared by multiple team members.
The Name field is also used to identify the signature in the Members Directory.Design - Design fields in this module are limited to styles that are widely supported in email clients.
Photos and Logos
Use JPG or PNG formats.
GIFs have partial support.
SVG and WebP are not fully supported and should be avoided.
You can include a photo for each member and a logo globally or per signature.
Design settings for images are available under the Design tab.
Contact Information:
Address (multiple lines supported)
Phone Numbers (with labels like T, M, F or icons)
Email
Website
Labels - Choose to show:
Text labels (T, M, F)
DiviSignatures icons (since 1.4)
Custom icons (since 1.6)
None
Inherited (from parent)
Contact Fields Order - Rearrange the contact information using a drag-and-drop interface.
Design - Design and style all contact fields using the Design tab (font, spacing, colors, etc.).
Social Icons - Add social icons to each signature, linking to member profiles. Supported networks include Facebook, Instagram, Twitter, LinkedIn, WhatsApp, Pinterest, YouTube, Vimeo, Spotify, Skype, Behance, GitHub, Telegram, Reddit, Email, etc.
Ensure links are valid (e.g., WhatsApp numbers should include country code). You can style:
Icon shape
Color
Size
Footer - Add a footer note or disclaimer. This field is editable per member and appears below the contact section.
Layouts - Choose from 1-column or 2-column layouts. You can also:
Reorder elements (photo, name, logo, etc.).
Apply layout settings globally or per signature..
Layout variations include:
1 Column
2 Columns → 2 Rows
2 Columns → 1 Row (no spacing between member and contact blocks)
See all the layouts in action on the demo page.
Understanding DiviSignatures Tables
DiviSignatures are made with tables in order for the signatures to be rendered correctly in the email clients (we discussed earlier the email clients' limitations).
Note:
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 menu under Layouts → Sections, the information is rendered in a table as follows:
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.
2 Columns - 2 Rows Layout
When you choose a Layout from the dropdown menu under Layouts → Sections, the information is rendered in a two-row table as follows:
2 Rows Layout (Photo and Logo)
2 Rows Layout (only Photo)
2 Rows Layout (Logo and Photo)
2 Rows Layout (only Logo)
2 Columns - 1 Row Layout
When you choose a Layout from the dropdown under Layouts → Sections, the information is rendered in a one-row table as follows:
1 Row Layout (Photo and logo)
1 Row Layout (only Photo)
1 Row Layout (Logo + Photo)
1 Row Layout (only Logo)
Note:
Choose this layout if you don’t want any space between the Member and the Contact information.
Email Clients Support
DiviSignatures uses HTML tables and safe CSS to ensure compatibility.
Tested Clients
Apple Mail
Microsoft Outlook
Mail for Windows
Outlook.com
Gmail (Desktop + App)
Thunderbird
Supported Fonts
Arial, Helvetica, Tahoma, Times, Verdana, Courier, Georgia, Lucida Sans, Palatino, and other system-safe fonts.
Supported Image Formats
JPG, PNG (and partial support for GIFs). Avoid SVG and WebP.
How to Paste Your Signature
Instructions for:
Note:
Each email client may render images or styles differently.
Known Issues and Fixes
Outlook 2024 – Formatting Issues
Cause: A bug in Outlook’s editor.
Solution:
Try pasting it into Word first, then back into Outlook.
Check for updates or visit Microsoft forums for workarounds.
DiviSignatures generates valid HTML—this issue is on Outlook’s end.
Apple Mail – Images Not Visible
Uncheck “Always match my default message font” during signature installation.
Thunderbird – Images Not Visible
Check “Use HTML” when editing your signature.
Images Not Downloading
Email clients may block external images by default.
Apple Mail: Enable Load remote content in Preferences → Viewing. For more details, see the Change Privacy settings in Mail on Mac article.
Outlook: File → Options → Trust Center → Automatic Download Settings. For mode details, see the Cannot see images in Outlook emails article.
Gmail: Ensure images are enabled in your settings. For more details, see the Turn images on or off in Gmail article.
Replies Lose Formatting
When replying to plain text emails, your HTML signature may lose formatting.
Apple Mail Fix:
Go to Preferences → Composing and uncheck Use same message format as original option.
Go to Preferences → Signatures and check the Place signature before quoted text option.
Advanced Options
Sign-Off Message: In any email client, you can manually prepend a sign-off (e.g., "Kind regards,") above your signature.
Custom Signature URLs: Use query parameters to display a single signature from a page with multiple:
https://mywebsite.com/signatures-page/?signature=Nick
Note:
The query parameter is case-insensitive and spacing-insensitive. For example, john doe, johndoe, NiCK, etc.
Shortcode Structure
Parent module:
[divisignatures]Member item:
[divisignatures_item]
Note:
The Footer must be placed inside each item, not the parent shortcode.
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 (for example, 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
Customize output via the following WordPress hooks:
Social Icons:
add_filter('divi_signatures_facebook_icon_url', function($url) {
return 'https://yourdomain.com/custom-facebook-icon.png';
});For more details, check the DiviSignatures - Using Custom Social Icons video.
Phone Labels:
add_filter('divi_signatures_phone_label_t', function($label) {
return 'PH';
});
For more details on how to use WordPress Hooks, check out the Learning To Use WordPress Hooks article.