Jen Kramer demonstrates how to fix HTML that isn't working correctly in MailChimp.
- [Instructor] As a marketer, you probably work with all kinds of different websites on a regular basis and one of the things that you're likely responsible for is sending out email campaigns and there are a ton of tools for doing this, but one of the most commonly used, especially with small businesses is Mailchimp and on occasion, you will be working on an email campaign or a landing page in the Mailchimp interface and you may run into a problem with your text formatting and it tends to get you a little bit wound up because it's very frustrating and you can't really see what's wrong with it so I wanted to address that because believe it or not, you now have enough HTML knowledge that you can fix these kinds of problems when they arise.
If you're not familiar with MailChimp, there are lots of courses in the library where you can learn more about this. Have a look for the course Learning Mailchimp and it will walk you through the whole process of working with Mailchimp. Meanwhile where I'm starting is after you've logged into Mailchimp, you're looking at your control panel here. You may already have a campaign set up and so I'm going to go ahead to the campaign tab here to take a look at those and so here's an email that I've been putting together about the ice sculpture and it's still in draft format.
One of the problems I've been having with this as I click on this and I go into the screen, things are looking pretty good, but I don't have the content quite right yet so I'm going to go ahead and edit this. Click the edit design button and this is going to put me into my email, which is looking pretty good here. I've got a nice layout, I've got a great photo, but you see here, down at the bottom that I have this title. Join us on Tuesday at the Roux Academy Contemporary Art Conference followed by the descriptive text, which looks exactly the same as that heading.
So if I go into edit this particular bit of content here, I have a little content box over on the side where I do that editing. I'm going to go ahead and highlight this text here because this is what I want to have smaller and I'm going to go into the styles over here on the side and I'm going to choose the default text style. And you'll notice that nothing changes here on the screen. Default text would be the right size, sort of the general paragraph kind of thing. But it still looks exactly the same as the headings here.
So there's something wrong with my formatting. What you should do next is look for a button in the interface here that looks like this. It's got the two angular brackets pointing at each other. You'll see a button similar to this in all kinds of different applications like WordPress, for example. You might be doing a lot of stuff in WordPress. It'll have a similar kind of button, which will allow you then to access the HTML. So you can come over here and look at the HTML and then it becomes pretty clear what's going on. We start with a H3 up here on line one.
We have a double line break and then we end with a heading three down here all the way at the end of the paragraph. That's totally not what we want for the content. So we can just edit this knowing a little bit of HTML that we have learned here in this course. So at the top after the end of the heading here, that's where we'll end our H3 and so you can watch the way the text is displaying over here on the side. If you like it anywhere along the way, you can end there. If you want a little bit more space though, set up this second round of text inside of a paragraph and you know how to put in that paragraph tag already.
So that will allow you to jump into all those little formatting problems that you might encounter along the way. If you encounter any tags that you're not familiar with, you can always just pop that tag right on into Google. One of the things, I don't have it right here in this example, but one of the things that I've seen before, if I go to Google.com is a character called ampersand NBSP and you'll see this on occasion. Maybe you don't know what this is.
If you just drop this onto google and do a search, it will give you the answers. NBSP stands for non-breaking space and as it says here, with HTML, the non-breaking space allows you to create multiple spaces that are visible on a webpage and not only in the source code. How cool is that? So you can continue your learning just by taking any HTML tags that you run into that you don't know what they do. Just copy and paste 'em into Google and it will give you more information about what you're looking at.
- Working with head and body tags
- Nesting one list inside of another
- Creating links within a page
- Linking to PDF files
- Quoting and citing text
- Fixing HTML in MailChimp