Alternating Template Backgrounds

Alternative Template Backgrounds

Next, we'll cover adding alternative backgrounds to a template. That'll help make the data and demos a tutorial a little more meaningful because you can manipulate backgrounds there as well.

It's really important to note two things before you add additional background or background images, plural, to a template. One is the design decisions that are, are already made. In the case of this template, we've got a text block top left in white and it goes just about halfway, almost halfway across the image. If I add an alternative background that's really light colored, that white text is going to be problematic. So I want to pay attention to that. Likewise, if I add an alternative background that's got a high amount of detail or something important in subject matter in top, in the top left of the image, that's going to be problematic as well. The other thing to take note of is the actual size which is noted.

Bottom left in this case 700 by four slash 67. So I'm going to click add background, big blue cross, it's called background to call it whatever you want. And I'm going to grab a previously downloaded unsplash photo. This control didn't allow us to preset this size. It does lock in the image dimensions. So as I resize this, it's going to stick to the correct height by width parameters. So there I am at 700 by 467.  If I wanted to get a different section of this, I might have to use photoshop or an image editor first to a pre crop and in play with a different differently. I'd love to have a little girl and the horses had, but that's tricky to do, with this set of controls. However, if I went ahead and grabbed that right there,

I'll show you why in a second. I've still got some space reserved top left where that white text block is going to sit, so now we're uploading the image in the background and you'll see it down there and I exceeded 10 characters, which is not your problem and there's, there's what that looks like as an alternative background. I'm in the template. We'll show you how to use alternative backgrounds in your email campaigns in the tutorial on data and demos. I can just toggle between them here and you'll notice that in the image source there, I've got a tag that says my background Mibg, my bg, my bg equals background. So if I wanted to use this background in half of the, half of the sands in my campaign, I might add that my bg parameter to the beach version of an email campaign. So one group gets the lady and the tiger and the other gets the girl in the horse.

We didn't limit the number of alternative backgrounds. Obviously it could get a little bit tricky to manage. You do have the option to control them via schedule as well, and we'll cover that in the data and demos tutorial.

Quick recap.

To add a background, click on the backgrounds tab, take note of the layout of your template. Take note of the size because we're going to force it to that size. Finally, and then click the big blue add background name, it grabbed the file, crop it so it fits your design, and then it'll be added and usable in the dropdown there.