Creating your own template from scratch using basic blocks.

Video transcript:

In this video we want to show you guys how to create a message that looks great when you start from scratch. So to do that let’s go ahead and go to Messages, Create Newsletter. Then we’re going to choose the New Email Creator, give your message the name or the subject, just for example. Moving onto the Next Step, and we’re going to scroll down until we get to the start from scratch option and choose a blank template.

So we’re starting totally blank and we’re going to be able to create a message totally from scratch with everything that you want and need, and it’s a great idea to go ahead and start with the layout first, go ahead and set the layout that you want. You will do this just by using the basic blocks here and be able to add over all the elements that you want. I am going to do that now, just as an example.

I would like to have a pre-header, I want then an image and text block, then I think I want an image, then another image and text block and yet another and I am just double-clicking because right now I am going to double click because it just adds every element underneath each other which is what I want to actually do. Then I think I want actually a button here, so I am actually dragging and dropping the button for each of these, then I want a ruler, I believe, or maybe the ruler can go in between. That looks good, now an image and one more text block.

I think that looks good, that is definitely what I would like for my message layout to look like, okay. So now that I like the layout this is what I’m going to start working with. I can for example choose my background, what the total background of the message should be. So actually I know I am probably going to base it off of my logo, which is orange, which you’ll see in just a second, so I kind of want like a light soft blue kind of thing for the background so we’ll see if that looks really good when we add in our logo.

For a pre-header also I want to give it some more space from everything else, so I am just going to select the pre-header, the spacing here, and I actually want a little bit more space from the pre-header and the rest of the content, so that looks pretty good. I might even change the font color to something a little bit darker grey.

I think that looks a little bit better, now I am going to go ahead and start to add my logos and add my image, so I am pulling up the My Images tab, and I have lots of images here so bear with me while I find my logo here. There it is, there’s my logo, I am going to make it a little bit bigger like that. Resize the frame a little bit and actually I will probably decrease the spacing on the bottom so it can really show all of it, that looks good. Now I am actually going to delete this text, and justify it to the right, go down, and I am just going to call this Newsletter-1.

I will make this a bit bigger, maybe like 18 bold and I am going to change the color to that darker grey that I was using, maybe even a little bit wider. Something like that looks pretty good, it looks good to have it in the center of your text block here, so that looks pretty good. I may actually change my mind about the background just to make it a little bit more blue-grey, okay I like that.

That part looks pretty good so far, just my logo looks nice and basically Newsletter-1 looks pretty good, so now I’m going to add an image, again just clicking on the image content block, now let me find the one I know I like to use. Again just scrolling through the My Images through things that are available through iStock photo and that I have already uploaded into the Multimedia of my account.

This is going to be for our Holiday announcement so I am going to try to find some nice beach theme, like this. Okay, so that’s pretty big so I’m actually going to just resize – maybe I’ll leave it like this actually, have it fill the frame but I don’t want it to actually be that big so I’m going to resize it like this changing the size of the actual block and then I can move the image to make kind of more of what I wanted to show available, like just the beach. I am actually also going to get rid of some spacing so it totally fills the frame. I think that looks nice so far, so we’ve got the header here that looks nice, we’ve got an image to kind of get people interested, and actually I might change the spacing just a bit on the bottom so there’s a little bit more distance.

Something like that, I think that looks okay. So now I’ve got these two blocks here that are going to be like for some offers like a product or a trip. So I am going to add the images that I have already loaded from my two trips that I am offering up this time. Morocco, so again just fill the frame how you would like, that looks good, and then this is just filler text, okay. So this text that you see here is just showing you what it looks like with text, so you will of course customize this with your own, but for our example I am just going to leave it here so you can see what it looks like and you’ll just type whatever it is that you want your subscribers to be reading from you. But I am just showing kind of how to format it, make it look nice, the line spacing looks good to be able to have a bit more space between the lines. And I am going to lighten up the color just a little bit. There that looks good.

And so this button also actually I want to have a text block that is kind of like a headline as well, this could be introducing the new trips and I want this to be actually kind of like the color of my logo. I am going to try to match that as close as I can – kind of a red-orange, okay that looks good. So I’ll make that a bit bigger and bold, so this could be for example introducing the trips that I have below here, like to Morocco for example.

Now my button for example would be leading to a link, let’s give the button a URL like I’m just going to use Google as an example, but this would be the link to your trip where they could purchase it or to your homepage. I also want the button to be the same color of my logo and I want it to be aligned to the right, but I need to add some spacing as well because it’s a little too close to the text for my liking so I am just going to kind of guess here, I think it probably looks good at about 17.

I also want it to be a little bit further from the edge so I am going to increase the spacing from the right side, and I believe about 35 looks good. So there, that looks pretty nice. This could be for example a description about the trip, just kind of letting people know about what is available within it, for example just a description and then this can actually bring them to the actual URL where they could purchase the trip or learn even more. And to type on the button you just need to click on it and you’ll be able to edit it – see there we go, just for example that is how you can actually change it.

Okay, so now I’ve got this little ruler in between the two offers just to kind of separate them so I am just going to click on it and all I really need to do is again, I like to give it the same color as the logo, it just looks really good, it kind of helps with the flow of the message itself and it kind of makes everything look familiar, so I think that looks pretty nice actually.

Now I am going to again, I’ve got another trip that I’m going to be offering for my subscribers, and let me find that one now, that image that I want to share. Okay, finally there it is, Caribbean.

So, kind of make it match the size of my other trip, okay that looks nice, and very similar to what we did above, I’m going to get rid of some text, going to increase some spacing, change the color to just a little bit lighter, and make my button a different color, align it to the right and change some spacing again. This was like 17, and then to the right was about 35 or so, so yeah, I think that looks good. I might actually make the button a little bit smaller which I can do by making the font a little bit smaller, maybe like 16. There, I like that better, and again make the font a little bit smaller, just for example. Okay, so that looks pretty good. Again, we’ve got a nice pre-header there, we’ve got the header here, information about our logo, a nice image, we’ve got a couple of offers we’re going to be offering to our subscribers via this newsletter and now I’m just going to go ahead and add kind of a closer image, so to say.

Find one more nice one that really gets everyone in the mood for a beach vacation, no not that one, sorry about that. There we go, a larger one, so again I am going to change the text block, excuse me the image block to be a bit smaller and move the image like that. That looks nice, and then this is going to be my footer, so I just want to leave a couple lines of text actually, you know, footer information that you would just provide on different messages for example, usually kind of the same information. I am going to center it, make it about 12 point and even a bit lighter, like that. So this could be your information, your company address, any closing information that you’d like to add to your messages, it’s totally up to you.

There is our overall look, and I think it looks very nice, so you could certainly play around more with spacing and with colors and all your specific preferences, but now that I’m giving it another look I think it looks nice and then you could begin to customize your content, and I can also show you how to hyperlink if you would like to hyperlink some text. Let’s pretend this is visit our website or click here to buy, just for example. To hyperlink you just need to highlight the text, choose this link here and then again just using GetResponse for example this time, put the proper URL, click okay and you can see this text is now hyperlinked as well. So that’s how you can hyperlink within the message if you’re interested in that.

I think that’s a great way to build from scratch, these are some good tips for kind of what looks nice within the message editor and create something that really has a nice flow for your subscribers and is pretty simple to do even when you’re starting from scratch.

p style=”text-align: justify;”