Table of Contents
- How to set up the eCards plugin
- How to customize the eCards appearance
- How to use IDs for specific eCard images
- How to use eCard collections
- How to set up a paywall for eCards
How to set up the eCards plugin
Installation
- Upload the
/ecards/folder to your/wp-content/plugins/directory - Activate the plugin via the Plugins menu in WordPress
- Create and publish a new post/page, attach an image or more and add the
[ecard]shortcode - Note that there is no way to attach images only in the block editor — if this is the case, use the image IDs (see below)
- A new eCards menu will appear below WordPress Posts
Email Deliverability
If you are using an email delivery solution, skip to Step 2.
Step 1
Set up your email delivery solution — SendGrid, Brevo, Mailgun, Gmail or custom SMTP — and use an SMTP plugin to link it to your WordPress site. Add the selected email address inside the Email Options tab, in the eCards Settings section.
Step 2
Create a dedicated email address to use for sending eCards and prevent your messages landing in Spam/Junk folders. Use noreply@yourdomain.com, ecards@yourdomain.com or something similar. You will not receive any emails at this address, as it is only used for sending. Use your cPanel or Plesk panel to create an empty mailbox. Add this email address inside the Email Options tab, in eCards settings.
Go to the Diagnostics tab and check if your mail sending function is working.
Settings
Go to the Labels tab and configure (or translate) the strings as necessary.
The plugin is configured to use the best settings for your site, but you might want to check all the tabs — Settings, Email Options, Restrictions, and Labels — and change the options as necessary.
Usage
Adding eCards to a post or a page is accomplished by uploading one or more images for the [ecard] shortcode.
Images can be uploaded directly to the post or page where the shortcode is present, not attached from the Media Library. Inserting the images is not necessary, as the plugin creates the eCard automatically and displays all uploaded/attached images.
If your images are already uploaded, and they are present in your Media Library, use their IDs to display them:
[ecard id="1, 2, 3, 4, 78"]
The IDs correspond to images in your Media Library. This feature eliminates the need to manually attach images and also eliminates the need to upload the same image multiple times, just to have it attached to different posts or pages.
Add the [ecard] shortcode to a post or a page, or call the function from a template file:
<?php
if ( function_exists( 'wp_ecard_display_ecards' ) ) {
echo wp_ecard_display_ecards();
}Remember: If you use WordPress 4.9 or lower or ClassicPress, use the Add Images button to upload images to your post or page. Do not insert them into the page, as the plugin does it automatically.
Note: When an eCard is sent, it uses the large version of the image, as the maximum allowed email width is 600px.
How to customize the eCards appearance
Recently added in our eCards plugin, a new set of options to customize the appearance of eCard thumbnails is now available.
In eCards Settings → Settings tab, check out the options below:
Card Grid
This is the number of eCards per row. The grid uses the CSS Grid Layout Module, so it works with any page builder out there.
Card Image Size
This is the size of the eCard thumbnail and, depending on your theme design, it can be square, portrait or landscape.
Card Design
This is a set of options, including box shadow, box highlighting and border radius. Note that a border can also be applied using the Custom CSS tab. An example of a black border with a white highlight is below:
.ecard-grid-item label {
border: 3px solid #000000;
}
.ecard-grid-item label:hover {
border: 3px solid #ffffff;
}
Card Colour Scheme
The colour scheme can be either light or dark, and it should match the overall theme of your website.
Card Accent Colour
The accent colour applies to the eCard radio boxes and the highlight border (if enabled).
Experiment with these settings to find the best design for your eCards pages.
How to design and style an eCard email
The eCards plugin features an email designer section, with a legacy (classic) editor and the new block editor. The plugin uses a Pattern for the email template.
As the classic editor will soon be obsolete, we will focus on designing a template using the block editor.
Quick Notes
Note #1: This option will override the classic editor eCard Designer.
Note #2: Some block editor styles will not be available inside your email client (e.g. columns, buttons and so on).
What are Patterns?
Block Patterns are predefined block layouts, available from the patterns tab of the block inserter. Once inserted into content, the blocks are ready for additional or modified content and configuration.
Patterns | Block Editor Handbook | WordPress Developer Resources
Here’s an example of a Pattern. Use the following template as a starting point for your own:
You have received an eCard!
[name] sent you an eCard!
[image]
[ecard-message]
Check your eCard here: [ecard-link]
Check your eCard here (direct link): [ecard-url]You can also download this template and import it into your Pattern section, as a JSON file:
How to use IDs for specific eCard images
Sometimes you have images attached to different posts or images already existing in your Media Library. Attaching them to an eCard form is easy.
Use the desired image IDs to create a custom eCard form:
[ecard id="1, 2, 3, 4, 5"]
Requirements
- eCards plugin (latest version)
How to use eCard collections
Sometimes you want to create a specific eCard collection to use on one or multiple pages. Creating an eCard collection is easy.
First, create a collection by going to the eCard Collections menu item in your WordPress dashboard and selecting Add New.
Create a gallery block and add as many images as you want. You don’t need to worry about the gallery settings, as the eCard will automatically detect the image IDs inside the gallery.
Next, in your eCard form page, use the collection ID shortcode:
[ecard collection="123"]
Requirements
- eCards plugin (latest version)
- A gallery block or a gallery shortcode
How to set up a paywall for eCards
The eCards plugin does not have any payment gateways included. The only restriction it has is a member-only restriction.
There are other methods, however, to add an eCard page behind a paywall.
Here are 3 methods:
Paid Memberships Pro
Use the Paid Memberships Pro plugin to create various subscription plans (or tiers), and then restrict the page (or the post) for users with a specific plan (or tier).
Restrict Content Pro
Use the Restrict Content Pro plugin to create various subscription plans (or tiers), and then restrict the page (or the post) for users with a specific plan (or tier).
Gravity Forms + Gravity Forms Stripe
Use the Gravity Forms plugin plus the Gravity Forms Stripe add-on to create a payment form and then set up a confirmation (or “Thank You”) page with the desired eCards.
Note that there are more membership plugins out there, or even payment gateway plugins, that can be integrated with our eCards plugin.