In this tutorial, we’ll be creating countdown timers in Sendtric and NiftyImages, adding them to an email template in Postcards, and changing the size of the counter using code.
Prerequisites
- A Designmodo account
- A Sendtric account
- A NiftyImages account
Video Version
Steps
1. Create an email template in Postcards with a text field
The first thing we need is an email template in Postcards. Create a template in the Postcards app and make sure you have a UI piece that has a text field in it. The text field is important because this is where we’ll be adding code.
The template I created is just a “Content 6” piece:
If you click the middle template image, that’ll open the customization options for the template element. In it, we want to customize the “Post Text” option like in this image:
2. Create a countdown timer in NiftyImages
Go to NiftyImages and after you’re logged in, go to create a new image and select “Countdown Timer” like in this image:
Choose any timer you want and then it’ll take you to a page that looks like this:
After you’re done customizing your timer options, press “Save” and then name your timer. When you’re done you should see a page that looks like this:
The “img” element is the countdown timer that we’ll be adding into our Postcards template.
But first let’s create another timer using Sendtric.
3. Create a countdown timer in Sendtric
Go to Sendtric and on the home page you should see a form to create a free timer.
Fill out the form and then press “Generate.” You’ll see your timer on the same page like this:
Now we have both timers to add to our Postcards template.
4. Add the img elements to the Postcards template
Back in the Postcards app, click the “Post Text” and then “Tools” and then “Source Code” like below:
That’ll open up a text editor where you can add HTML code to it. Replace the contents with either of the timers you just created (they’ll both work in the same way) and then press save.
Your screen should look like this:
Then your template should look something like this:
And there you go! You just added a countdown timer into your Postcards app.
5. Edit the code to change the size of the timer
If you want to change the size of the timer you just have to add in some CSS code to the img element.
Currently, the img element looks something like this:
<img src="https://img1.niftyimages.com/38c/53wh/dfao" />
We have to add a “style” attribute with some CSS properties to it, namely: display, width, and height.
Display should be set to “block.”
Height should be set to “auto.”
Width should be set to whatever you want your width to be. You can set the exact pixel width like “500px” or set a percentage like “50%.” Experiment with different width settings until you’re satisfied.
The new img element should look something like:
<img style="display: block; width: 50%; height: auto;" src="https://img1.niftyimages.com/38c/53wh/dfao" />
With whatever width setting you choose.
What we covered
- How to create a template in Postcards.
- How to create a countdown timer in Sendtric and NiftyImages.
- How to add the img element in a Postcards template.
- How to edit the img element to change the size.