How to make a persuasive sales page
(that’s FAST and EASY to manage)
even if you’re a non-techie!

Video Transcript

Ladies and gentlemen, I am back with another one of my favorite kind of videos called “How’d They Do That?” And this is where I take you behind the scenes of a cool page, like a sales page, home page, whatever it is, and I show you how the creator of this page made it with the Focus WordPress theme and some other components that I sell for Focus, all right?

So, today we’re gonna take a look at a page that I really like. It’s a sales page for something called Trailer Cash Academy, which covers mobile home investing, coaching, and course. But really it’s just a sales page, like I said.

So, I’m gonna show you all the formatting, like how to get your page to look like this using the components built into the Focus WordPress theme, and I will take you behind the scenes and show you exactly how it’s done so you can do this yourself. You see, one of the beliefs that a lot of people have is that if you’re gonna have a sales page, a robust sales page with every element that you might want on it –

[00:01:00]

Your buttons, these cool sorts of focus cards are what these are called, these types of elements, clickable presentable, I guess, headlines, an image out here just to the side, these full width sections with color behind them, which are called bleeds, we’ll go over all of these things. But most people think when they see these types of elements that they need a WordPress plug-in or something, some other add-on for the website to be able to do this. And the reality is, you don’t need all this stuff to run an extremely successful e-commerce website, and in fact, you will have the best results if you stick to the guardrails that I’ve set up for you with the Focus WordPress theme.

You can do it all with Focus, and you can do it all from the comfort of your WordPress admin, and I’m gonna show you how to do that right now. All right?

So, let’s just scan this page really quickly to identify which elements are going on with it, and this will kind of give you a hint as to what we’ll be looking at in just a few minutes. All right? So, we got a basic headline here. Nothing too special

[00:02:00]

We’ve got a drop cap. I’ll show you how to make this. We’ve got a button here. We’ve got a full width bleed section with six focus cards presented in it, and notice this little, I call it kinetic hover behavior, so I’ll show you how to do this stuff as well. We’ve got another section here with an image that’s kicked out to the right a little bit. It chokes the copy up here. This is a smart tactic for getting people to continue to read or to engage them with a little section of content.

So, we’ve got a lot of just little details going on here with this sales page that make it really effective. We’ve got another full width bleed section. Some different types of cards here to explain like kinda testimonials, or social proof, if you will. We’ve got a video here, and the video is big. You’ll notice it’s wider than the column of content that’s up here. This video is really wide. I’ll show you how to do that. So, this video is high impact video. If you’re scrolling this page, you’re probably certainly clicking on this.

[00:03:00]

We’ve got another headline. We’ve got a subheadline, actually is what we call this. We’ve got a block quote. We have another drop cap. And then finally at the very bottom, we’ve got one more full width bleed section. This one has a different color. And then we’ve got a button in it, and that’s the sales page.

So, here we go. I’m gonna show you how to make this sales page with the Focus WordPress theme right now. Let’s do it.

Okay, so I’ve set up a page that mimics this page on Trailer Cash Academy. Now, the first thing we want to do is start matching the looks. So, you’ll notice on Trailer Cash Academy the fonts are different. This font for headlines is actually called Montserrat. It’s a Google font, and this font in the body copy is known as Libre Baskerville. So, the first thing we want to do is set up our Focus environment to look like that with the fonts. So, we’ll dive into the design options and do just that. All right. Here in the design options, we can define our base fonts.

[00:04:00]

Font number one, we are gonna want to be Libre Baskerville. We’ll find that. You have like 170-something fonts available in Focus now. These are all the Google fonts that have 400 – that’s considered normal, that’s the normal weight, normal size font – 400, 400 italics, a normal italic, and bold. 700 bold. Every Google font that contains those three faces is included for use in Focus, and you can select them from these font drop-down menus.

All right. Font number two we’re gonna call Montserrat, very quick. And we’re gonna save it, all right? So, there we go, and now when we refresh the page, we’ll see that everything is actually in Libre Baskerville. All we have to do is go in and refine which fonts we apply to which elements. So, now we’re going to apply font two, which is Montserrat, to all headline elements. Heading two and heading three, that will be sufficient. We’ll do heading four, too, just for completeness.

[00:05:00]

Okay. And then now we want to do one more thing. We also want to turn our buttons, our button font, to be Montserrat also. So, font two, we’ll select it. We are saving. There we go. Now, when we hold shift and click refresh to view this page, we’ve got Montserrat for our headlines and we’ve got Libre Baskerville for our body copy. We’re already making headway here.

But if you notice on Trailer Cash Academy, all the headlines are in bold. Again, this is a very easy fix. We’ll just go in headlines. We are gonna make that font style bold. We’ll do it with heading two, heading three, and heading four. Boom. We’ll make all those bolds. We will hold shift and click refresh, and now we are very much looking like the Trailer Cash Academy homepage.

Okay. So, we’ve done the basics. We’ve gotten the environment set up, we’re using the right fonts and everything.

[00:06:00]

Now we’re gonna go in and do some actual formatting to turn this bland page of content into an engaging sales page with some visual elements that will keep you moving down the page and keep you engaged with what’s happening.

All right, so we’re gonna edit this guy, and we’re gonna go to the visual editor because that’s what most of you like to use. I like to use the text, but for demonstration purposes, I think this is powerful here in the visual editor. So, that’s what we will use.

So, first we want to create a drop cap. We’ve got the Y here is a drop cap, so we’re gonna highlight the Y. We’re gonna go over here to Focus Content Styles. This is your super powerful sales page extravaganza formatting element here that Focus gives you. We’re gonna click on this, and then we’re gonna go to a drop cap. Boom. All right. We got a drop cap.

And now what’s next? We got a button, and it’s a green button. In a default Focus installation, a green button is known as a save button, so what we’re gonna do is we’re gonna highlight. So, in order to have a button, it’s important to note, you have to have a link first.

[00:07:00]

So, you create a link. I’ve already created a link to save time. And then we’ll highlight our link, and we’re gonna go up here to Focus content styles, and we can turn a link into a button. In this case we’ll make it a save button. Boom, now it’s green. And there it is. So, now we have this.

So, now our top section is looking very similar, and the button spacing is a little different, but that’s because the button spacing has been modified on this particular website to make the buttons really stand out. We might do that at the very end just for completeness. But for now, the next thing we want to do is implement a bleed section, like this. But before we do the bleed, I actually want to render these cards and this button.

So, we’ve got our headline here already. This Could Be You. And we’ve got our button link at the bottom. Let’s go ahead and turn that button link into a save link. Okay, we’ve done that. Now, after the headline, we want to show some cards to really –

[00:08:00]

You know, this is a super attractive element. Cards are like interactive. These have this kinetic cover behavior that I mentioned earlier. These are really good interactive elements that really grab the user’s attention, and so we are gonna add those in here.

Now, I have already set up all these cards. It takes some preliminary work to set up your cards if you want to do this. I’ve already done that here, and we’re gonna do a card group, and this is a special short code that you get if you’ve installed Focus Cards, and we’re gonna do card group, and I think we do group equals TCA demo top. We’ll see if this works. We’ll update our post. Let’s take a look, see what it looks like now.

Okay. So, here is our cards, but they don’t look very good. They’re not presented in the same way that the other ones are, are they? These look really nice and they’re presented in a grid, so how can we do that? So, we’re gonna dive back into our post.

[00:09:00]

And we’re gonna add a parameter, a grid parameter, grid equals three, and that will give us three cards across. We’ll hit update, we’ll see what happens now. Ah, there it is. So, now we have our cards looking the same as we have over here on Trailer Cash Academy. Obviously some font differences, which we could smooth out later if we want, but that’s not what I want to focus on for now. What I want to focus on for now is the kinetic cover behavior. We don’t have that here. But on this page we do, and that kinda, you know, if somebody’s just browsing and reading, this is actually a powerful element, and I want to explain why really quickly.

So, maybe you do this, maybe you don’t, but an extremely high percentage of people who read internet on a desktop or laptop computer engage in some behavior. It’s like reflexive highlighting behavior. They will highlight text while they read. I do this. I’m one of the weirdos who does this. But a lot of people do it. It’s a real thing.

[00:10:00]

We are interacting with the text on the page as we read. So, when we have an element such as these that reacts to our presence, it’s actually kind of a trigger, an attention trigger that keeps us engaged with what’s going on. So, this is just a little ninja psychological hack you can throw into your pages with Focus Cards, and all you have to do is go to your Focus Cards setup page and then give it some slightly raised card behavior on hover. So we’ll save, we’re gonna go back here, and now we have our kinetic hover behavior. It’s a real savvy little trick, especially on sales pages. If you want to keep people engaged, go ahead and have your cards have a kinetic cover behavior.

This is really important. It’s most useful if people can click on your cards. Now, not every card has a link associated with it and can be clicked. We’ll see that in just a little bit. But for ones that do, this kinetic cover behavior is extremely potent, okay? All right. So, there’s our kinetic cover behavior.

[00:11:00]

The next thing we need to do is turn this section into a bleed. On Trailer Cash Academy, this has got a green background, and it really sets this section apart and focuses your attention squarely on it as you browse the page. So, we want to do that right now, and I’ll show you how to achieve that.

So, what you do, bleeds are very interesting. They are a different element than – they’re similar to this card short code except for they are a tag style short code. So, the way that works, it works like this. We’re gonna turn this back into a paragraph. It works like this. We say bleed to open our bleed. We also say style equals. We’ll say lime. That may not be correct, but that’s for the color, the background color that we want to use. And then we go to the end of our content, and then we close the bleed tag. So, we opened it up, and then we close it, and let’s see what the results are. And we open it above what we want and we close it underneath the little section we want to offset.

[00:12:00]

And we’re gonna hit update, take a look. And boom, we’ve got a lime green background. Is that the same color? It is. But you’ll notice the cards have a light green background as well. I may change this default card behavior in a future update, just a note, but for now, if you want your cards to have a different background color than the rest of your – than the background behind them, if you want them to have – the interior of the cards, if you want it to be white, for example, like they are on Trailer Cash Academy, we’re gonna need to make one little tweak. Let’s see if we can do it.

We can do it here in the – so, I already added this option to Focus Cards. Here we go. We already got this in the bag. So, we’re just gonna make it FFFFF. That is white. You can see the background turn white there. So, we’ll hit save, and we’ll hold shift, click refresh, and now our cards are white. Boom. They pop off of this section, and there we go. Now we have a really cool interstitial section on this page with our Focus Cards.

[00:13:00]

And that is an attention grabber right there. Okay. Moving on. Now we have the next section with Jay and Samara here, and as I mentioned, so first we’ve got a drop cap, which we can do very quickly, and then we’ve got a button, and then we’ve got this image of Jay and Samara that’s pushed off to the side. You’ll notice it sticks out beyond the edge of the content, and it also chokes the copy here just a little bit, which as I mentioned on the first run-through here is a hack for getting people’s attention focused on text and getting them reading before they even have a chance to think about what they’re doing.

So, lots of little psychological things happening here with this sales page. You probably wouldn’t even know if you didn’t know. But I’m gonna show you how to achieve all of these things. And so now we’re gonna add this image, just like this. So, we’re gonna go down to – here’s the image. For now, the image is just sitting here on top.

[00:14:00]

What we’re gonna do, we’re gonna click on it. We’re gonna click over to the text editor to do a little ninja trick here. So, there’s different styles you can apply to images, and it’s not always necessary to go over here to the text editor. To get this exact look, it is gonna be necessary. We’re going to extend this to the right, okay? But there’s other styles you could apply, known as breakouts and pullouts, which have videos on these topics. It enables you to present images in a little bit different manner. So, you got lots of options here. Depending on the type of sales page you have and the context you have, you can use these tools to get perfect outcomes to put your images exactly where they need to be to have the highest impact and to help you out the most.

But for now, like I said, we’re just gonna do extend right on this one. Go back to the visual editor. We’ll turn this F into a drop cap, which we’ve already seen. Easy peasy. And we’re gonna hit save, see what the results are. Boom. Jay and Samara are off to the right here.

[00:15:00]

We’ve got out text choked, just like we want, to keep these attention triggers flowing as we go down the page. And now we need to turn this guy into a button. Looks like I have not linked that button, but I will do that now. We will copy link address, we will go back over here, we will turn this into a link, boom, boom, boom. And now we’ll highlight it again and we’ll turn it into a button. Again, we’re gonna make it a save button for now. We’re gonna go back through and edit these at the end to make one little optimization, I think.

So, anyway, we’ll save it, make sure that button is there. Looking good. There it is, I love it. Now what’s next? We have another bleed section here with another grid of six. These are different focus cards. These do have the kinetic cover behavior. All the cards are gonna have it, based on our setting in the back end. But these don’t have a title. This little thing is known as a title.

[00:16:00]

These cards don’t have a title, they don’t have a button. They just have some text to show you they’re like case studies, or testimonial kind of things. Social proof that whatever they’re selling on this page actually works for people. So, we can add this easily as well. I’ve already set up the cards to do it.

So, here’s our section. So, first thing we’re gonna do, we’re gonna add a bleed. Bleed type equals lime, or style equals lime, sorry. Lime, and then we’re gonna put it at the bottom. There’s our bleed. We’re gonna turn this into a button. Save button, easy. And then in between here, we’re gonna put another card group. Group equals TCA demo bottom, and then we’re going to give it a grid equals three because we want that three across presentation, like we had above. We’re gonna update it.

[00:17:00]

And look at this. Here it is. Easy peasy. Now, I set up these cards before filming this video. It doesn’t take long at all. Very easy to do with Focus Cards. I’ve got tons of documentation on that. Probably the most well documented thing in all of the Focus ecosystem. But anyhow, that was very easy to do. We’ve got our button, we’ve got another full width bleed section that’s really gonna grab people’s attention, and that is beautiful.

Up next we have this big video. How can we do that? Well, within the Focus ecosystem, you can purchase – it’s a one-time purchase fee add-on. It’s only $17 at the time of filming here. It’s called the YouTube box, and it’s perfect for including videos in your web pages. And you might ask, “Well, why do I need the YouTube box? I can just slap a YouTube embed on any page and it just works.” You’re right, except for every YouTube embed you add to your page adds about 500 kilobytes to the total page weight, which is a ton.

[00:18:00]

And it slows down your page load times by like up to 1.8 seconds a single video. So, you don’t want to do that. What you’d rather do is to load your videos in the most high performance manner, which basically is a loading on demand kind of situation, and the YouTube box from DIY Themes is the easiest way to achieve that with your WordPress website.

So, on this page, Nabil Aziz, the man who made this page, he’s Dubai’s highest paid copywriter, he uses Focus because he knows he has all the elements he needs to make amazing sales pages. He can get right to the point, and he also knows I provide all these tools, such as the YouTube box, to make his pages as fast as possible. And pretty much the number one controlling variable in any sales page, besides like what you’ve actually presented on the page, is how fast the dang page loads. So, it’s critical that we achieve high performance and speed whenever possible, all the time. There are no excuses to not have speed, really. And the YouTube box is how we’re gonna do it here. So, we’ll flip back over. We’re gonna find that video.

[00:19:00]

And for this, all we have to do, I’ll just make it a short code. You say YouTube ID equals, this is the ID of the video when we visit YouTube. We’re also gonna add a wrapper, though. We’re gonna say wrap equals extend. That is how we’re gonna make the video huge. Like, I’ll show you first without it. So, here it is without it. We’re gonna update. So, if we don’t wrap it, it just is the width of your content on the page. But that’s not big enough. I want a high impact video that really just stands out, and I want people to watch this.

So, to do that, we’re gonna say wrap equals extend. We’ll update. We’ll hit refresh, and now we have a huge video. This thing is gonna grab your attention, I’m quite confident, and this is great.

Now, one thing that is not on this home page that I think would be really smart to add is a caption underneath this video. The reason why is because people read headlines and captions and bold text while scanning.

[00:20:00]

That’s the number one thing they read. Now, we know that they will also read things like these focus cards, which is exactly why elements like this exist. We know people read buttons, so that’s another reason they put stuff like that in there. Drop caps focus people’s attention. There’s lots of little attention grabbing elements in play here that you finally start to notice if you know what you’re looking for.

However, there are still other things we could add to make this page even more persuasive. So, I would suggest that Nabil add a caption underneath this video, and I’ll show you how to do that, too. So, we can say, “This video is super compelling. You won’t be able to unsee what you learn from watching it.” Okay. So, we’re gonna highlight this and we’re gonna turn this into a caption. Boop. We can do all that from Focus Styles. You’ll see how it changed right there. Let’s update, let’s see what that looks like with our video. Oh, boom, there it is, perfect.

[00:21:00]

Perfect formatting. It’s pulled up against the – pulled up close to the video so you know it’s associated with it. This is great. This is another attention grabbing element, another chance to say something persuasive to a visitor on this web page. This is really good stuff.

These are the ninja tools you need to be a great salesperson online. Focus has them all built in. There are some other add-ons you can get to really ninjify your stuff, but the bottom line is this ecosystem has it all. You don’t have to add other stuff. And the best part of it all is that it’s all designed to be super fast and super easy to manage, which just crushes everything else that’s ever existed in WordPress.

Anyway, back at it. Let’s see what we have after this video. We have a block quote here, and then also a drop cap. So, we will set off this little passage of text with both of those items. So, we’re gonna scroll down to our block quote. Block quotes are super easy. You highlight the text you want to be a block quote. What’s up with the cursor there?

[00:22:00]

And we’re gonna turn that into a block quote. Whoops, it did too much. We’ll turn that into a block quote. There it is. We will highlight this letter. We will make it a drop cap, and that’s easy. Do we have a button? Do we have a button? We do not have a button, so we’ll save this, take a look, make sure it’s cool. There it is. We’ve got our block quote.

Ah, but look. This block quote is in the other font, Montserrat, and it’s italicized. We can do that really easily with Focus, too. We’re gonna hop into the design options. We’re gonna to go content elements. We’re gonna go to block quotes. We’re gonna select font two, which is Montserrat. We’re gonna make it italic. We’re gonna hit save. Look how easy this is. Hold shift, click refresh. Oh, there it is. Now it looks just like Trailer Cash Academy. Let’s go.

Okay, one more element and we’re done with this whole page. I will have made this entire thing for you in just a few minutes.

[00:23:00]

All right? This is too good, really. So, we need one more bleed. It’s got a yellow background. Style equals yellow. That’s really good typing right there. And we’re gonna go to the bottom, we’re gonna close off that bleed. We’re gonna turn this into a button, a save button. And we’re gonna update it.

Boom. Look at this. There it is. Oh, this one’s centered. Actually this whole bottom section is centered, and we haven’t done that here, so let’s see how we can do that. Why don’t we go in, we’ll highlight the entire bottom section. We’ll see if we can center it this way. And I actually don’t even know if this will work, but we’re gonna find out. So, we’re gonna update. Oh, look at that. That’s exactly what we wanted. Great. Okay.

Couple other tweaks we can make to make it look just like Trailer Cash Academy.

[00:24:00]

These buttons have a lot more padding. They’re bigger. So, we’ll head back into the Focus design options. We’ll go to site elements, which is where we control buttons. And we will add more horizontal padding. How much do we need? Quite a bit. It’s probably at least – we’ll say it’s X2 on horizontal and X3 on vertical. This is just a guess. Boom. Okay, there it is. Yep, we’ve got the same size buttons on both of these pages now. Amazing.

So, I just want to go back over this whole page. We’ll compare. Here’s our headline, here’s our headline, and you know, it’s the same. It’s the same exact page. I just recreated it for you in this context. Now, there is one thing I would recommend to do here.

[00:25:00]

Because the accent colors on this page, there’s a lot of green. There’s green in these images, there’s green in this background, there’s green in the buttons. You know, it’s kind of green. The page is green, right? Probably gets you thinking about money. I think this is smart. But with buttons, I think contrast makes a big difference here. Everything here is green. We’re kind of drowning in green. I would like to see some blue to offset that, and actually we can do this really easily. We’ll turn our buttons from save buttons into action buttons, and that will set them off even better because this blue is a very complementary color to the green that we see elsewhere on the page.

And so we’re really just, I mean, optimizing the heck out of this sales page, and look how fast it is. It’s so easy. It’s effortless. I just use these tools built into Focus, make my selections how I want, review the results. If I want to change them, it’s easy. I mean, this is the way to do it, people.

[00:26:00]

I don’t know if you’re using plug-ins and having to like add stuff into your pages and click on a bunch of different things and use all these tools in a million different places, but that’s nonsense. This is the way to do it right here.

Look at this. Now I think this is really saucy. Really saucy. I would actually like to see these buttons be green. We could make that change within Focus Cards separately. This is also super easy to do. You do it exactly the same way as I’ve showed you here, just when you’re editing a Focus card instead. That’s a topic for another day. I’ve got videos on that, separate videos on that already if you want to go watch them.

But there it is. There it is. We’ve just recreated this sales page. We’ve got all these elements that I explained the purpose of them and the effectiveness that we can expect from them. This is how you do it, folks. This is how you make sales pages, landing pages, any pages that work on the internet now in 2021.

Here’s the thing. Here’s thing. The internet has changed. We don’t go to websites and just browse around anymore. We don’t do that. We go to websites with a specific purpose in mind.

[00:27:00]

That purpose is usually a promise that we have read in an email, in a social media post, something like this. Maybe a text message that somebody has sent us. Say, “Hey, go check this out.” We go to web pages with something in mind already, a promise, and we want – it’s called an information gap in psychology. The promise establishes an information gap and when you land on the page, you are trying to satisfy that information gap as quickly as possible. That means you don’t have any nonsense on the page. We get right to the point. We use attention grabbing elements. We use the elements that we know work psychologically for sales and for attention.

And these elements are already all built in to Focus, and the more advanced ones, like Focus Cards here, are things that you can buy as an add-on for Focus and really get the whole suite of stuff that you need to be effective. All right?

So, Focus Cards and the YouTube box are the two add-ons that are in play here. I sell other add-ons as well. You can check those out separately.

[00:28:00]

But I mean, really this is such a low – like, this page didn’t require a lot to build, you know? It has all these awesome tools, all the elements you need to be incredibly effective online, and this is so cheap and fast and lightweight compared to everything else you can possibly use in the WordPress ecosystem. This beats everything by a zillion miles. In fact, there is no comparison anymore. This is the ultimate sales tool, this is the future of the internet.

I just showed you how to make your pages. Come join us in the Focus ecosystem. Come learn how to do this stuff for yourself. Come interact with other people who are doing this, and we will all be absolute experts at using these tools to create the most effective pages on the internet today.

All right. Thank you for watching. I’ll see you in the next “Behind the Scenes” video. All right. Take it easy.