Confirm Byline Template with airSlate SignNow

Confirm byline template

you [Music] in this course we're going to show you how to take one of the 182 campaign monitor compatible templates on in photo elements and use a combination of a visual template builder and a tiny bit of code customization to convert this template into this custom template inside campaign monitor system when you finish this course you should feel confident to take any template that you want to work with and customize it in the way that you need for your email campaigns so let's go ahead and use a custom elements template with campaign monitor I'll see you in the first lesson hey this is case for tots plus welcome to use a custom elements template with campaign monitor so before we get into actually working with a template we're gonna have a couple of little things that we need to do to get started so the first thing you're gonna need to do is head over to campaign monitor and get yourself an account URL is campaign monitor comm and to follow along with this course you don't actually need to pay anything for campaign monitor you can grab an account you can log in and when you do you'll see this area here where you can start setting up campaigns and you can work with templates and you can get everything tweaked and set up just how you need it and you don't actually have to pay until you start sending out emails so if you haven't already go ahead and grab yourself a campaign monitor account now and then we'll move on next up you're going to want to go to elements invite Oh calm and this is where we're going to be finding an email template to use so finding templates that work with campaign monitoring here is pretty straightforward what you need to do is go up to the search bar at the top and just search for campaign monitor and you get a bunch of results down here some of them are categorized into different categories don't worry about these categories down the bottom the only category you need to worry about when you're looking for email templates is this here web templates so all of these results here are going to give you email templates that can be used with campaign monitor so you can click see more here and then you've got all these different templates that you can choose from for the purposes of this course we're going to be using this notify two email template and I'll include a link to this in the notes below this video so you can go ahead and download it so this gives us six separate little templates that we can work with and these are designed to just send out little notifications to your subscribers just little snippets of news if you want to take a closer look at these there's a live preview and this shows us each one of these little templates and incidentally this also happens to be their provided theme builder and we're going to go through how you can use this to customize some of the elements of your template so that's all you need to get started just grab that campaign monitor account jump into invited elements and get yourself a copy of this template and then across the next two lessons we're going to be customizing this part here of the template then we're going to take that into campaign monitor and we're going to modify the content of the template in there and then you'll have a campaign that's ready to be sent out and you'll also know how to work with templates like this and with campaign monitor to create your own customized email campaigns so first up we're gonna start with the process of customizing the actual template and we're going to be doing that in the next lesson I'll see you there hey welcome back to use a custom elements template with campaign monitor in this lesson we're gonna go through and customize the template that we downloaded in the last lesson we're gonna swap out some images for new images we're gonna add a link and we're also going to add in our own custom font so when you download the template you should get a zip like this go ahead and extract it so I have done that here and then jump inside here and all of the files and everything that you get with the template are inside this folder we're going to be using the theme builder that comes with this template a lot of templates do come with theme builders which help you along with the process of modifying your themes so the theme builder for this you need to access by going into this folder and then in here you're gonna find a rich text document that you can open up and there'll be a link in there that will give you access as a verified producer of this template to the theme builder online it says that you can use the theme builder in both Firefox and Chrome but my experience has been it works a little better in Chrome than in Firefox so we're going to be working in Chrome for this lesson alright so here's the theme builder and here is the section that we want to work with we don't actually want to work with any of these other sections so the first thing we're going to do is just delete them all so if you hover over the section you'll see this little X button show up so just hit X and that's going to get rid of each of the superfluous sections all right so now just got this one section here the images that you see here we've got two we've got a background image and we've got this thumbnail image in the foreground those aren't actually going to be present when you export this template you're going to need to add your own images and that's something that you have to do before you put a template up into campaign monitors collection of templates because it doesn't give you any facility to add images or to modify images so we're going to put our images in the background here and in the foreground now another thing to consider is that when you're sending out an email campaign you can't attach the images to the email itself you need to upload them somewhere ideally to your own web hosting space so that when a reader opens the email the images are going to be loaded from your hosting space for the sake of demonstration I'm just gonna be using imager to put up our new images now back inside the files that you get when you download this template if you go back up to the top level here you can also see in here that we have a Photoshop file this is going to give you a nice mock-up of all six email templates and you can use that to check on the alternate images that you want to put into your template to make sure they're still looking good another thing to be aware of is if you have a look inside this folder offline templates we've got all six of our templates here we're gonna be working with the second one and the campaign monitor version and in this images folder we can get a reference for the size that we need each of our images to be so this one here is the thumbnail image that we need to replace and this one here is the background image that we need to replace so we can see there that our background image needs to be 900 pixels by 874 pixels and that our thumbnail image needs to be 400 pixels by 156 pixels and we can also see there that this is a PNG with a transparent background so that is how this background color is able to show through so we want to make sure that we let this background be transparent in the image that we create to replace it so this is the PSD that comes along with this template I actually work with affinity designer instead of Photoshop so if you're not wanting to be on a monthly subscription to Photoshop check out affinity designer it's a one-time purchase and it's a really good alternative so we've got all six of our templates here and then this is the one that we're going to work with so I've put together a new background image a new foreground image for that thumbnail and I'm switching this over to have a camping gear theme instead of a technology theme like in the original template and I have changed up the mock-up I've deleted all the other templates that we don't need and this is the modified version that I'm working with so that's got the new thumbnail in the foreground the new background image here and I just added in some different text so that instead of saying introducing our UI project it says introducing our camp kit that's just got an imaginary camping product in there additionally I've also changed this background color here and this one here so now what we're going to do is get our template to look like this instead of like this so I've already uploaded these two images to imager and I have their URLs I'll also provide these images to you in some files will be associated with this course so you can just use these for practice if you like so first up I'm going to change the background image which is actually located under this top section here that says header images for whatever reason it it actually refers to background images not header images so I've got my URL for this background here and I'm gonna put it in to the second slot because this is our second template I'll just click somewhere else to activate it alright so there's our new background that's all good now for the thumbnail image you don't actually need to work in this sidebar section you can work over here so you hover over the image and then press this little pen icon to edit it now this is the URL for the placeholder image so we're going to select that and delete it and put in our own new URL alright so there we've got thumbnail is and then now all we need to do is change up these colors and to do that we're going to go into the notification - section on the left these two other colors that we need to change and then we're gonna grab the color code for a green here which is this number five one five e for three and we're just going to paste it right here into this slot alright so now we've got the green that we're looking for everything's looking quite nice and most of this text we're going to be able to edit once we get into the campaign monitor editor however if you want to add any links to your template that's something that you need to do before you upload your template into campaign monitor we know we definitely are going to want some type of link on this button this might be a button that's supposed to take you through to an order page for example so what we're going to do is hover over the text click the little icon to edit it and we're just going to add in Google's address just for us something to have in there and if you do edit page template in order to put a link in you need to make sure that your link text is updated at the same time because you're not going to be able to edit link text inside of campaign monitor you can edit all the other text but this you might be able to so we're going to change this one so it says place your order now and it's safe alright so that is everything that we need to do in here and speaking of links you might also be wondering about the unsubscribe link down here you don't actually have to change anything with the unsubscribe link this is formatted in such a way as campaign monitor is going to recognize it as being an unsubscribe link and it's going to automatically add in the appropriate URL as part of its processing so you don't need to touch this part and that is everything that we need to do to customize the template and now we're ready to export it so down here in the sidebar hit export layout and obviously working with campaign monitor so we want to hit this button here it's going to generate a zip file for you so go ahead and save that now you want to extract the zip that you've downloaded and then inside you'll find this index file so go ahead and open that up in a browser to check on it and make sure it all looks right all right so here is our template and everything is looking just fine now button link is working we've got our images in and that's all looking good however you might notice there's one thing that's not quite right in the demo of this theme we saw a nice thin text here a nice non default text however in this exported version we're just seeing default text so to do that we're gonna jump into the HTML that we just exported and we're gonna make a couple of little tweaks you can't edit this HTML in any type of text editor that you want just notepad if you want but it'll be easier if you go and download the atom editor from awesome IO because atom is going to help you along by giving you nice formatting and color coding that just makes the HTML a lot more easy to read I said here's the HTML that we just exported if you look here there are actually a whole bunch of custom fonts that are already available but they're not actually used in the template for whatever reason I don't know but we're not going to be loading these fonts in any way these are coming from the rocket web website it's really not necessary for us to load in fonts from their site so what we're gonna do is delete all of that code and we're going to work with a Google front instead now in my mock-up here I used the montserrat font from google fonts by default the font that's used in this particular template is a paid font so I'm just going to go the free one to make it a little bit easier so this is the monster upfront and what we're gonna do is hit select this fun and then we'll open up this little panel and this gives us the code that we need in order to make the code accessible in our template so we'll copy that and now up here before our style tags open just going to paste in that line and that gives us access to the montserrat fun now we're going to copy this font name and all of the front families that are set in this template are actually done in line so we're going to say ctrl F for find and they're going to search for front - family and that's going to give us every instance of where a font is declared so for some reason in this particular template it's specifying open sans which is not a font that's available in this code it must be a legacy code I'm not sure either way we're going to delete that mention of open sans and replace it with Montserrat we'll find the next one and we're just going to go through there are seven instances of this that we're going to need to replace this one's got a little bit funny make sure you both rounds of this orange text here where it says ampersand quot semicolon and then replace that and almost there all right so now we've gotten one set font in place for all of those or save this out now let's have a look at a preview all right so there we go now that's much nicer so I've got a template fully customized we've got our own images in here we've got our own colors and we've also got a link on the button here now the template is ready for us to upload to campaign monitor we'll give it another check through and make sure everything is in order and then it's going to be ready for use in an email campaign so we're going to go through that process of getting it onto campaign monitor in the next lesson I'll see you there hey you walking back to use a custom elements template with campaign monitor in the last lesson we used the theme builder that came along with our template to customize our design and now we're ready to import that template into campaign monitor so I'm signed in to my campaign monitor account here and what you want to do is come up to the top right corner where your profile is and hit the down arrow and then here you'll see my template so go ahead and click that you got three options yet we want to go with upload your own HTML and now we're just going to browse for the index file that we were just working on in the last lesson so we're going to go into our HTML export folder into that folder and then we're going to grab this index file now we need to give our template a name just got anything you want my custom template that'll do and we're going to hit add template and we're not gonna wait for it to generate a screenshot it takes a little while but that template is good to go so you can either make a new campaign by going into the main section here and hitting create new campaign or you can hit this little gear icon and you can choose create campaign here using the template that you just uploaded so we're just going to fill this in with anything for now because we're just testing you campaign right subject line it's coming from not a real email and now here we get to have a look at how a template is come out so you can see now that this button is no longer editable so that's why we had to change the text here but everything else can be edited so we'll go ahead and edit the text up here now we're going to change that to introducing our camp kit and we'll save the changes and we can do the same thing here change this to anything that we need the camp theme essential say about changes and basically it's the same thing with all of this text you can go through and customize that to be anything that you need it to be so that's something that's really cool about this whole process is once your template is ready you can reuse this over and over again if you need to so if you need to put out another notification about this particular product using this particular template you can change all the text to anything that you need as and when you need it so now let's go ahead and make sure that everything is looking right by clicking this preview button and sure enough everything is looking perfect so we've got everything in there that we added then during our customization process all of our text is looking just fine we can check on our button and make sure that the link is working you can see down on the bottom left the URL that this actually has applied to it even though that doesn't say google.com that's actually going to still take us to Google your else like that just exists to help track what response you're getting to your email so you'll know if people have clicked on this link or that link and if we click it though it opens up this separate window that redirects to Google so that's everything everything is perfect everything is working just as wouldn't we've got our customers template for a singular notification we've got our custom images got our custom colors and we've got our custom links and text content oh by the way if you decide that you need more room to say whatever it is that you need to say in your email then you can duplicate any of these sections while you're inside the template builder so if I want to have another paragraph of text all I need to do is hit this little button here and then that gives me another paragraph of text to work with and if I want to delete it again I can just hit the little X and that puts me back to where I started so there's a whole bunch of stuff that you can do within this customization process here and then subsequently when you're actually inside campaign monitor and you're wanting to make your changes here so that wraps up the process of getting a template into campaign monitor and this probably just one more thing that's really just one more thing that you need to be aware of if you do need to change your template again you want to go into my templates choose the template hit the little gear here and hit edit and then after you've modified your index dot HTML template either using the template builder or by custom editing the code just come into this page re-upload that file hit update template and then it'll apply the changes that you've made to your template all right so just got one more video to go through really quickly in this course I'm just going to give you a really quick bullet point breakdown of a process so you can refer to that video whenever you need a refresher on how to go through and set up a custom template with campaign monitor I'll see you in the final video hey welcome to the final video in user custom elements template lose campaign monitor in this last video we're just going to have a really quick summary of this whole process you can come back to this video anytime you just need a refresher on how to go about doing all of this so step one is to make any new graphics that you're going to need to replace the existing graphics in your template ideally put that together in a mock-up if you can and then export each of the individual images that you're going to need and then upload them to your hosting space assuming that the template you're working with has a theme builder jump into that theme builder and replace the images with the new images that you've created make any color tweaks that you need to do and make any changes to links that you need to do if you don't have a theme builder with your template then you'll just need to do these steps in HTML directly when you're done export the layout for campaign monitor and if at that time you need to make any edits to HTML go ahead and do that when your HTML page is already make sure that you preview in a normal browser so that it's all looking as you're expected to then jump into the my templates section of campaign monitor and upload the template that you created when you've done that you'll be ready to create a campaign using that template and from there you can edit any of the text that still needs editing and then your email campaign with your custom template is going to be ready to send socially that helps demonstrate that it's pretty approachable to get into these templates and make changes to suit what you need for your campaigns and don't forget there are more than just one template that you can work with on in vital elements there's lots and lots of templates and it's fairly common for these two have builders so definitely jump into invited elements have a browse through see which templates work best for what you're trying to do and then you can go through the same process that we just went through to use these templates in your own campaigns so thanks so much for taking this course and I will see you in the next one you