Need help? We've got your back.

EzyCourse email builder makes it extremely easy to design stunning emails. In this article, you will learn to create an email template and design it.

To create a new template, head over to your EzyCourse dashboard and navigate to Marketing & Contacts -> Templates -> and click the Create Template button on the top right corner.

So, there’s the editor in the middle of the screen. On the right, you have Content, Blocks, and Body. You’ll learn more about these as we go forward into designing. On the top left, there's a field where you give your template a name.

Notice that there’s already a section added in the editor. So, we are ready to go and add some Content. Let’s add a logo which is in fact an image. Drag and drop the image content into the editor, after selecting the section.

Now, you can upload the image from the right sidebar. Turn the auto width off to adjust the size of the logo to your taste.

Now, we want to add another image that will work like an email banner. Remember the default rule is Column first and then comes the Content. So, let’s add a Column and then drag an Image content into it.

Like before, upload the image and set the width as you need. But, this time, we will add a link to our image which will take the user to the home page of our website when they click on the image. 

Okay, we’ve got our logo and banner done. What could be next? Some text, right? A header sounds better at this stage. A nice big text to grab readers’ attention.

Before adding the header, how about we do some styling on the background of this section. Remember it’s always Column first and then comes Content into the Column. So, after adding the Column, let’s change the background color.

Now, drag and drop a Heading content inside the Column section.

For a Heading content, you can set the font settings, alignment, adjust the line-height, etc. 

The other thing you can do is give some spacing with paddings so that the section doesn’t look congested.

To be honest, it still looks a bit congested. Maybe if we increase the width of the email body, we could gain some extra space. To do that, click Body from the right sidebar and increase the width to 600px. You can also write the Preheader Text here.

Yep! Looks better now. But, the banner image kind of looks narrowed now, isn’t it? And have you noticed there seems to be an unwanted space between the banner and our header section? How to remove that and have a seamless transition between the sections? 

Select the banner image, scroll down to find the General settings, and make the padding for all sides 0px.

And look at that! No space anymore. You can try this same trick every time you see some spaces in-between sections.

Now, let’s add another section which will work as the introduction to the email. But, it’s just another text section and we don't really wanna change anything of the background color. So, wouldn't it be nice to just use the section we already have instead of all the dragging and dropping? Maybe copy the section?

Yes! To copy a section, select it and you’ll see the copy icon. You can also drag and move sections up and down as necessary.

Here are the settings for the new section. Everything’s cool, but you must be thinking what’s that curly brace doing there? Well, it’s how you add merge tags in your email.

The next three sections of this email: a Heading, a Text, and a Button. If you are out of rows then just select the editor body (gray-color background) and click the Add Row (+) button.

Once a row is added, let’s add a background color to this section before adding a Heading content.

Now, we can drag and add the Heading content. As we have already added a Heading content before, let’s not waste time on it. That includes the next section which is a Text content.

So, this is what we have after adding the Heading and Text content.

Now it's time to add the button. Again, if you are out of space then click the (+) icon to add a row. Let’s keep the background color the same as the above section. Our email builder keeps track of the colors you’ve already used and shows all the template colors so that you can easily maintain cohesion.

Drag and drop the Button content into the empty space.

Before styling the Button, let’s give the URL where this button will take the users once clicked. And make sure it opens in a new tab.

What's the next thing we need to fix? Well, the width seems lacking. So, we’ll first disable the auto width option and adjust the width as necessary.

Okay, this looks better. But, the obvious fix that’s needed is the button’s color, right? Well, let’s change the background color and the button text color. Also, make the button a bit bigger by increasing the font-size and the line-height.

You can also adjust the padding and the borders. What would go best here is rounded borders.

Let’s add another section mainly for CTA purposes. This section will contain a Heading and then two Button content, side by side. Since we’ve already shown how to add a Heading content before, why don’t you go on and add the Heading content yourself.

After the Heading, add a new row and select it. You should see the different column layouts on the right sidebar. Select the one where we can have two Content side by side.

When you have multiple content side by side like this, you’ll have to adjust the settings for each one separately including the background color. Under the Column Properties section, you’ll see each of the columns you have.

Change the background color for each one separately. And then drag and drop the Button content in each of the two columns, after clicking the Add Content buttons.

After adding the buttons, you can design by selecting each content on the editor. Change the color, font, border, etc.

[Note: When you have contents side by side, they will stack on mobile view. For responsive design, read: How to make responsive email templates.]

Now that we have the CTA section done, let’s wrap up this email design with a footer. Our footer will consist of a social media section, a Divider, and then the company address.

For the social media section, we’ll simply add Image contents and link them appropriately. So, let’s add a row and then select a three-column layout design.  

Now, drag and drop the Image content into the three columns, one after the other. 

Upload the image and turn the auto width option off so that you can adjust the width/size of the image as necessary. And of course, give the appropriate image link. Do these for each of the image content.

This concludes our social media section of the footer. Now, add a row and drag a Divider content into place. 

Increase the width and change the color of the Divider, if you want.

To finish the footer, we’ll use a Text content to provide our address. 

So, at the end of it all, here’s the final view of what we have crafted using the EzyCourse email builder.

So, good luck and design beautiful templates today to elevate your email campaigns.