This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
Welcome back to Part 4 of Lesson 14 of the Build Your Own E-Commerce Website tutorial series. In this part of the lesson we are going to create a broadcast newsletter that is based on an AWeber template for our WordPress business website.
Go to the Home page on the AWeber site and get rid of this list name here. Come over to Create and Manage Lists and then hit Deactivate and that will get rid of that default list bringing us back to having only our byobtut customer list. Return to Home again and we have selected our list right here. With this list selected in AWeber, we’ll create a message and that is going to be a Broadcast message .
What is a Broadcast Message?
A broadcast message is simply a newsletter or some kind of email that you send to everyone. You can set these newsletters up in advance and then they can be published the first of each month. You have all kinds of options with this.
Select a Template for the Newsletter
We’re going to create a new newsletter for our WordPress business website. We’ll begin at the AWeber Templates here first; under Templates there are a lot of different onse to choose from. This is a basic one that is a plain, white HTML page. There’s one called Bakery and you can see it’s got this cute little layout and it has a variety of different colors and schemes. They have a variety of colors for each of these and I’m going to show you how we can change those from the defaults. Go ahead and explore the list to see what each of them has to offer.
We’ll use the AWeber Clean Room template, green and blue option. Select Load Templates here and that shows up. What you have here is a sample of the template with stuff all filled in. We’re going to go about the process of changing that to create our newsletter.
Add a Logo to the Newsletter
First we’ll add our header image to this section up here and I want you to notice that this is the HTML version of that page and it uses all tables, and table rows and that sort of thing for formatting. You probably are not really familiar with this because it’s no longer good practice on a webpage but it still works on an email like this.
There are three different views of this AWeber template: the Design view where we can work, the Source view where if you need tweak the code you can do it here, and a Preview which shows us what it’s going to look like when it’s done. Go to the Source view and you can see that this table is 546 pixels wide. So that’s how big we want our image to be. We’re going to replace this text called Logo with that image. Select the Logo; come up to the Insert Image button and we’re going to put the URL of the webpage logo there.
Come back here again, right click on this and copy the image URL and then I’m going to come back to this insert image section and paste that. Now it shows up and it says the Width is 745 pixels and the Height is 200. We saw that this width is actually 546, so that’s what we want to change this to. Because this is checked as Constrain, the 200 pixels will automatically become 147 pixels and now it’s going to fit in that space. Say Insert and now if we take a look you can see that our heading is there.
But interestingly enough so is that background image, that green bamboo. So we’re going to put our cursor right beside our image and then come over to Table. Hit Table properties, because we’ve just put ourselves inside of a table cell and that table cell has a background image property which want to eliminate. Come over here to Cell, look down here at Options and you can see that there’s its background image. We’re going to delete that, hit Apply and now the background image went away and what you see behind it is a blue background color. Say Apply to that and Close.
We want to get rid of this bit of space here. Let’s look at the Source view and look at where this image is, you can see that I put this image there. It has no alt text which probably doesn’t matter in email but there is the address of the graphic with its width and its height and its title. Scroll back over here and you can see there is a piece of code that says padding-left, 10 pixels and that is what is causing this space to exist. We’re going to go back to that and delete it. So padding-left 10 pixels, we’re just going to cut that out with a delete. Go back to the Design view, scroll up to the top and you can see that it’s now gone. Let’s look at a Preview of this; there’s our image sitting right there on top.
Change a Color in the Newsletter
Return to Design and go to Mission Statement, In this case instead of Mission Statement I’m going to create an email that I’ll be sending out at soon as I’m finished with this. So it’s going to be a real email. Say Lots of New Videos This Month. This is not one of my colors so I want to pick one of mine instead. So select this and then go to Font color here and paste our font color which in this case is 640E27.
Add text to the Newsletter
We’re going to take this text here and paste new text for the newsletter in its place. I have some pre-written text to use from our WordPress business website. We could just start typing but in order to speed this process up I’ve created some text. Select the text to be replaced and go to the Paste button and paste it in like that. Hit Insert and now we have the new text added.
Come down here to Section 1 and I’ll rename it Member Dashboard and under About I’ll call it Forum. Under Section 2 I’ll call that Latest Videos, and then for this text I’ll replace that again by copying and pasting. Hit Insert. Under Latest Videos I’ll replace it with more text and I’m going to make those bulleted points, and I’m going to change the bullets to square. Finally, we’ll change Forum. So we will pick all this here, hit Paste, hit Insert.
Customize the Colors
We have quite a bit of this newsletter finished for our WordPress business website although these are still the wrong colors. Come into this cell and go to table properties. For that cell we’ll select Options and for this color select the green color off of our site and put that in here and then eliminate the background image all together and hit Apply.
We’re going to do the same thing here. Again, table properties, go over to cell and Options, delete that, change the color, delete that, Apply. Then we’re going to change this Forum from this image to our blue. Put the cursor in the cell and select table properties, select the cell, go to Options, change the option, delete the background image, hit Apply and close.
Add Links to the Newsletter
Now we have reformatted this newsletter in our own colors. Take a look at the Preview and now you see our colors and image at the top. Now we’re going to add some links to our WordPress business website. Go back to Design and first select the text we want to add the link to. Select this link, come back to our site because this is the page we actually want to link to and copy that URL, and then open that link dialogue back up, and the URL is here. Open it up in a new window rather than the same window. Hit Insert and now you can see that there is a link set up there. Hit Preview and you can see we’ve got a link there to go to.
Personalize the Subject Line
I’m going to do that for each of these links here so people can just automatically go to that section of the site. We’ve converted each of these to a list and we are just about ready to publish it. But before we do that we need to put in a subject but we want to personalize that subject. Select Personalize and you can see that we have these choices– and I am going to put in firstname and then space and then I’m going to call this Check Out the New Videos at BYOBwebsite.com.
Create a Plain Text Version
Next we want to add a plain text version of this because some email clients don’t display HTML-based emails and we want this to look decent in plain text as well. We’re going to put the same information here. Notice now that I have pasted my text in here that some of it extends beyond the recommended width. Use the Enter button to cause a line break.
Now I want to make some of these show like headers. To do put a couple asterisks in on either side of this and Member Dashboard and Latest Videos – that’s fine. Forum Posts – before each one of these though I am going to put an asterisk so they can tell it’s bulleted. What we’ve done is given it a little bit of styling with Headings, and bulleted lists and we are ready to send.
Schedule the Email to be Sent Later
We’re going to set up the newsletter to send later. We’re going to send this on Tuesday, October 12th and we’re going to send it early in the morning at 5:00 a.m., Eastern Standard Time. We’ve got the newsletter scheduled to send and it will go to all of our subscribers. We’re not going to Include or Exclude other Lists or use Social Media/Sharing, we’ve got some QuickStats Notifications, we are going to save the message and then hit Test. Say send the test, close the dialogue and then open up our email.
We’ll open our email box and right here you can see from me to rick “Check Out New Videos at BYOBwebsite.com”. If we open that up you’ll see that nothing displays here right now because I don’t have images turned on. But if I display the images below then my image shows up here and the text and the links and the newsletter email for our WordPress business website looks great.
That wraps up Part 4 of Lesson 14 of the Build Your Own E-Commerce Website tutorial series.