How to Build a Conversion Focused Website From Scratch In 55 Minutes | Thrive Theme Builder Tutorial

in this video we'll walk through how to build a conversion focused WordPress website starting from zero and before I go into WordPress and start building pages and stuff let me just quickly define what I mean by conversion focus because this is the differentiating factor here this is what makes this tutorial different you see most websites and most website building tutorials most themes and and WordPress plugins and so on are basically concerned with making a website that looks nice but a website that looks nice that's really secondary of course we want our website to look nice but the real job of our website is to convert visitors so the website serves some kind of a business goal maybe you want to build a mailing list of subscribers maybe you want to get customers for your product members for your membership site coaching clients whatever it is the website has some kind of a goal some kind of a conversion goal that a good website does a good job of moving people towards that conversion goal and most websites quite frankly do a terrible job of doing this so in this tutorial we're not just talking about how to make a website period and we're not talking about how to make a website that looks nice we're talking about primarily how to make a website actually serves your business and we will pass four different conversion checkpoints these are like the main checkpoints that we will pass and sometimes revisit as we go through the site those four points are first of all clarity readability and structure so your website has to be clear and easy to understand people have to be able to easily read the text on your website and understand what can they get where can they navigate to to get what they're looking for and so on that is clarity readability and structure and right there that's where most websites already fail so we'll make sure that we have that the second point is speed optimization nobody likes using a slow website so we'll take a look at how to make our website as fast as possible the third point is calls to action we want to have explicit calls to action throughout our pages throughout our content to basically tell people hey sign up to my newsletter or hey check this thing out you know call me to shed you a coaching call or something like we want to call people to take a conversion focused action and finally we have what we call conversion pages where the entire page has the purpose of driving people towards a conversion goal such as a sales page to sell your product and we will hit on all of these points in rapid succession in this tutorial now let's get started with that I am in my wordpress dashboard and as you can see this is basically empty is nothing going on here yet and we will start with some very basics one thing in the basic settings that I would recommend you check is go into permalinks that's settings permalinks I recommend using the post name permalink so that is when your URLs will simply be your website comport slash post name instead of having dates and categories and so on and there as well or IDs or something like that those are basically the neatest nicest looking URLs that is one factor that can make your website a little more user friendly in general good news is in WordPress basically all the basic settings are good and you don't have to worry about tweaking things very much next let's look at plugins so if we go to plugins right here you can see I've already installed the Thrive product manager which we'll get back to later but there's nothing else and we can go on add a new and here we can add some plugins now here are some recommendations first of all don't install too many plugins right that's one of the mistakes that a lot of WordPress users make is they fall in love with you oh I can add this thing I can add that thing and so on in the end you've got 50 plugins and your site is super slow and breaks all the time that's not a good idea so try to keep your plug-in list lean but here are just a couple of simple recommendations if you're going to have blog posts with comments active I recommend this plug-in right here the Akismet anti-spam plugin so you can install that directly from here and then also activate it from here another plugin i recommend is an SEO plugin of some sort and the recommendations there are either Yoast SEO or SEO press so if we go here and we type Yoast for example this will show us the search results and this is the one plug-in I recommend and the other one is SEO press and both of these are very very similar but you should have one of these two plugins which will take care of your site's SEO settings and give you a better chance of ranking in search results and then one of the things we're going to do is we're going to build the basic structure of our website right away so before we start fiddling with themes and pages and so on we will build the basic structure of the website and here's something that can help you do that first if you type in faker press you see that there is a plug-in called faker press and you can use this plug-in to generate some dummy posts so if you have a completely new installation with no content yet it can be difficult to work with your theme design with your website design because there's no example content you can look at the get an idea of what does a blog post look like this here is the solution on a brand new website install faker press and generate 10 to 12 blog posts they'll just have like dummy content and some random featured image and you can use that to make it easier to design your website before you have any content another thing I recommend is if you type in privacy policy you'll see that there are various plugins that can help you generate legal pages such as privacy policy disclaimer page Terms of Service and so on and one that I can recommend here is this one here although I'm sure I haven't tested all of them right probably many of them are good but this is one that you can use to generate your basic pages that you have to have on your website such as privacy policy disclaimer and so on so that is another step install one of these plugins generate the basic legal pages that you need on your website and then let's go into pages so for this I'm going to go to pages and add new and here we can add pages I'm going to create a page called about and we're just going to give that the title about and then I'm going to go ahead and publish this page this empty page right away so I just want to have that page because I know that eventually I'm gonna make it about our page I'm gonna fill this with content but I want to have it already and I'm gonna continue adding some pages like that I can make this bit easier for myself by unchecking the full screen mode here so I get my menu back here that makes the whole thing a bit user friendly so I'm gonna click on add new again and I'm going to create another page that I will call lead gen page and in this case what I'm going to do is we just save the draft here and go to document permalink I'll call this something else I'll call this free guide so as you can see here this changes what the actual URL of this page will be and I don't want that to say lead gen page so free guide is better again I'll go ahead and publish that so I want to have a page where I simply send people to my mailing list give them a people give them a reason to sign up to my mailing list then once more let's hack hit add new again and I'm gonna call this the sales page and same idea I'm gonna save the draft that gives me a permalink setting here and I want to give this a nicer URL as well now the demo site I'm gonna build here is gonna be a photography themed website so on a photography themed website maybe I'm selling something like a photography course or something like Lightroom presets filters things like that so I'll just call this Lightroom presets and again publish this page now once we've done all that if I go to all pages right here you can see we have about disclaimer Lee Chan previously polished sales page and the sample page is the one that was already there in the new WordPress installation this is a very basic structure of the website the other thing that I have here that you can create using faker press is a bunch of posts so as you can see I've made some photography themed posts here to match the the demo of the site this is what I start with this gives me kind of the skeleton of the site that we're gonna start to build now the next step is I'm going to be using thrive theme builder and thrive architect as the plugins for building the theme and for creating conversion focused pages and to do this let's go into plugins and I'm gonna activate my thrive product manager plug-in so at this step you would want to log into your thrive themes account download the thrive product manager and install it and then activate it as I just did when you click on drive product manager once you've activated it you will be asked to connect it to your thrive themes account and that will then automatically give you access to all of the thrive themes products you can access and like I said what we want is thrive architects I'll check this and the shape shift theme which is the first thrive theme builder theme so I'll install this and simply wait for this process to finish and then I get this success message right here and I click on the blue button go to theme builder dashboard this takes me to the beginning of the thrive theme builder setup process and we'll walk through this together and another now you can see here in the sidebar we have thrive dashboard that is added once you install a thrive themes product so that's how you can get back here it's thrive dashboard thrive theme builder now this here's the good news this is a setup wizard that walks you through step by step everything you need to build your website so really you can just run through this wizard and without even me explaining anything about it you'll end up with a pretty good website but as we go through this I will add some notes with the idea of conversion focus in mind so let's get started so I click on get started and it asks me to upload a logo for my demo site I've already uploaded one here you can simply upload any kind of logo image file and that will be used in the header and everywhere else on your site where the logo make sense so I'll click on choose and continue the next question is what is your main brand color now don't worry about this if you don't already have a specific brand color you want to use you can use anything you can keep this blue and decide later you can always change this later and you can also kind of just wing it so I'll just go with you know some kind of an orange tone because again doesn't matter that much I can always change that later so I'll just go with this choosing continue and you see right away why it asked me about the brand color first because as we go into the setup wizard you can see that for example this button is already using this orange brown color that selected so as we build outside we already see our own colors applied now what you can do here is basically we're gonna start choosing components of the sides step by step and there's two things you can do you can either use your keyboard keys left and right to scroll through different examples or you can click here to load different header examples in this case or you can click on this item here to open a whole menu of or a gallery that you can choose from and as you can see there's all kinds of different headers here that we can choose from I'm gonna go with one that's pretty simple we'll click on that it gives me an idea of what it actually looks like that looks good I'll click on choose and continue that moves us down to the footer where the same rules apply I can scroll through different examples or footers and see them loaded in like this or I can click here to see a gallery now for my footer I want something really simple to begin with I don't have that many pages or anything you know at some later point if I have a website with loads of pages maybe I want to have one like this with lots of links and things but right now I want something very simple for example this here so let's insert that choose and continue and now we get to the home page and this is one of our first really important conversion checkpoints so by default in WordPress your home page will simply show a list of blog posts with the latest one at the top and then going down in chronological order and you can still have that you can choose this option here to get that but from a conversion standpoint that is not a good idea because really you should think of your home page is an important landing page on your website and if you think about what does the home page need to do it should communicate what your website is about and who it's for and what to do next and if you simply show your latest blog posts it's very hit and miss kind of depends on what the last thing you published is someone could land on your home page and see something they're really interested in and then there's a chance that they become you know they read your post they learn more about you they become a future customer but there's also a chance that the latest few posts just don't appeal to them that much and then you've lost them forever that's really not a good kind of roulette to play on your home page so instead we should have a specific landing page as our home page that's independent of the blog page and that's what we're gonna do so in thrive the milder we can generate a home page and it gives us the same approach right here so I can scroll through different home page layouts and here this this is really handy because I can actually see directly what this home page layout looks like with demo content right there so we can scroll through these different options and see what we have and as you can see this is the kind of home page you're talking about at a home page where you can clearly communicate with text and imagery and these elements like this grid here you can communicate what your website is about who it's for and give people a clear thing to do next and also we can click here to see a whole gallery here of available pre-made layouts and again you can edit all of this later so I'm gonna go with this personal branding home page to start with and here again you can see that it's using my brand color right it's using this orange that I chose for the icons for the text highlights and everything like that so that's really cool all right let's stick with this for the moment and click on choose and continue next up the single blog post so here when you write a blog post you publish a blog post the question is what does that look like when someone lands on that individual blog post and same idea right you get it by now we can choose from different pre-made layouts and I'm going to choose one of these more or less at random because we're gonna get back to this let me just choose this one maybe and that looks good enough let's choose and continue then we come to the blog post list so this is what does the page look like that lists all of your blog posts and again we can choose from different layouts right here now in terms of conversion focus and in terms of clarity and making your website easy to navigate here's a simple rule you can follow we have some layouts with with kind of a great layout that tend to show a lot of posts on very little space so here as you can see if I scroll down a bit basically seeing nine posts all at once and this can be great if for a website where I publish frequently this kind of layout can make sense if I only publish like once or twice a week then most of the times if someone comes to this page they're seeing the same thing again so having a layout like this is probably less ideal so for a slower publishing schedule or also if you think about if you if you write loads of little news articles then a great layout is a good idea if you write epic posts every once in a while then a layout like this might make more sense which kind of gives every single post a bit more weight I'm gonna go with this click on choose and continue and then we finally have the page layout so that is what does a page not a blog post look like and once again same idea we click here and we choose a layout that we like I'm gonna keep this very simple I just have a page with content and we'll get back to that later all right choose and continue and then finally we have the question of menus so if we have existing menus already on our site we can choose which one is the header menu which one's the footer menu but in this case we don't have menus yet so I'm gonna continue without choosing a menu and that concludes our run-through the initial setup wizard so right now if we actually just go and look at the website as you can see this is already coming together we have a home page where we can start editing the content we have a blog page and we have basically all our basic templates set up so that's a pretty good start now let's continue down the side here so we've completed the basic setup wizard we also have a branding tab right here we can change a few things we have already set a color but you can always come back here and change that color and that will just kind of change the color accent across your whole website we have a logo option and here as you can see we can actually see this in our footer here this logo here doesn't look quite right because it's on a dark background and while this one looks fine because it's our light background and we actually have a function for this so we have a dark version and a light version of the logo so click on this here and I can choose a light version of the logo that's made to look good on dark backgrounds and then that will be automatically used in places like this so that's one of the things we can do in branding plus you can upload a favicon and the favicon is the little icon that you see next to the browser tab in a browser so you can upload an image it should be a small square image and the most important thing is it has to be scalable so you can upload an image that's let's say 200 by 200 pixels but it should have ideally a transparent background you could use a PNG for this and you have to make sure that it looks good at a very small size because again just look at how small the icon next to a browser tab is that's at that size and she still needs to be recognizable so you can't have a text logo or something like that basically won't be readable at that size but here is where you can upload that next we have typography and this is one of the ways in which you can change the overall look and feel of your website let me just quickly show you how this works so we have this set here we can expand this this gives us an idea of what the typography looks like across our whole website and I can go ahead and edit this and editing typography works in groups so I can click on any individual typography element and create a rule that basically says the h1 heading looks like this on my website or the paragraph text the default paragraph text looks like this on my website but I can also edit this in groups so if I click here for example you can see that there's a breadcrumb navigation that says heading one is part of all headings this group here and that is part of all elements all right so let's do all headings and here I can change what I want this to be so I can choose let's say open sounds and I can choose what the regular font weight is and what the bold font weight is so maybe I want the bowl to be a bit bolder and then apply that and as you can see this has changed all of my headings all at once so I don't have to click through each one if I want to update this font in general and this is how we control the fonts on our way sighs I'm just gonna go ahead and save this change I just made and then head back here so this is how you can change the typography across your entire website next we have templates and we will get back to this in a bit this is where you can control and edit all of the templates we've already chosen and created so far and next let's go into site speed as I said the speed of your site is a pretty significant factor for conversions because if your site is slow people generally won't stick around now speed optimization on website is massively complicated and technical and we have made this as easy as possible for you so we have these three steps available let's just start with the first one unification and caching we have two caching plugins that we recommend and directly integrate with with recommended configurations this is going to do a lot of the technical heavy lifting to make your site faster so the way this works is we can choose one for example WP fastest cache install this activate it and then once its installed and activated it says configure for optimal caching with thrive simply click on this click on yes and this will Auto configure the plug-in to work as perfectly as possible with thrive theme builder that's it your whole caching and this right here usually takes easily half an hour or longer but it's done your caching setup done next up we have image optimization so images on your website generally would slow down a page much more than other elements because you know a bunch of text is very small in terms of file size but an image can easily be half a megabyte or and megabyte or even more so how do we fix that again we have two recommended solutions one is optimal which is an advanced image optimization plugin for WordPress which we recommend it has a free plan but for a certain amount of visitors or a certain amount of usage you will have to pay and it's worth paying for this it's a really good solution if you want to keep your budget lower and not pay for a solution we have Smosh as the alternative this is a free plugin that you can use completely for free so that's the alternative but I recommend that you activate one of these two I'm gonna go ahead with optimal again basically the same thing we made it as easy as possible I'm gonna install this this will send you to the optimal page where you can either register if you don't have an account yet or if you already have an account you enter your key we can register directly inside the interface here we'll get an email with an API key which we enter here and then we click on connect and then once we've done that we see a status update here it starts optimizing the images on the website and before you start fiddling with the settings here let's go straight back to thrive dashboard and thrive theme builder so once we've made this connection let's go back here and go back into side speed and image optimization so this is where we started and here once again once the plug-in is actually installed and activated you can see that there's a button that says configure for optimal use I click that click yes and we're done ok so again we've done all the work for you here that's possible to do to get image optimization set up as perfectly as possible and finally we have accelerated mobile pages as I'm recording this this is in beta this is a way for you to have a special amp version of things like blog posts which are basically more speed optimized buzz but have fewer features it's kind of a restricted but even faster way to build pages and we have amp features you can click on this link to learn more about it and decide whether you want to activate this on your site or not ok there's one more kind of basic structural step that we need to do before we go into further details let's talk about menus we can go to appearance and menus right here because in the wizard as you remember we skipped that step and what WordPress does is it generates a menu automatically which just has all your pages and that's not great obviously so we're going to edit this I'm going to call this main menu and we'll change the label of the generated homepage that's the home page is thrive theme builder generator for us we'll change that to then blog is good about is good disclaimer doesn't belong here let's remove that lead gen page here let's also remove that previously policy let's move that sample page we don't want to remove that sales page yes why not but let's change this to you know a call to action get my thing by now app whatever so I'm gonna call this again Lightroom presets if we assume that's my product let's just call it that and then I'll click on create menu so now I've got a menu called main menu with these four menu items let's create a second menu create a new menu menu name footer menu and here I'll click on create here we want basically disclaimer privacy policy and that's it these two pages we want in here we can rearrange them like this let's save that and there we go okay so now we have these menus generated and with this we have all the basics on our website so we have taken care of readability clarity and structure with the menus as well and readability and clarity by the way a lot of that is already baked into everything that you find and thrive theme builder so everything we do especially when it comes to typography and readability everything is already optimized to be as clear and readable as possible and then the other aspect of clarity is gonna be your messaging the actual words you use on the pages now let's move into the next level of conversion optimization which is about calls to action and lead generation and things like that now to do that let's go into the Thrive dashboard and set some things up here here one of the most important things you can set up is you can go to API connections and you can connect your website to different email marketing services and other marketing services so for example if I go into add new connection you can search for things by name or you can scroll through all the services we integrate with and as you can see there's a lot of them so if I type in MailChimp I can choose MailChimp and I can add my API key here and connect to the service and this is all I need to do to now start connecting my opt-in forms on my website to my mailing lists in MailChimp and the same goes for many other apps so if you use a webinar app like webinarjam and you want to use forms on your site to sign people up to your webinar events you can do that and as you can see here we have we integrate with all kinds of marketing solutions so that's a thing to do right away whatever marketing tools you use integrate with them on this page then let's go back to these five dashboard and another useful thing to do is to go into analytics and scripts we want to manage our scripts right here so here we can add things like tracking scripts analytics scripts and so on for example Google Analytics tells us that we should add the script they give us a tracking script and they say that we should add this script to the before the head before the end of the head section as you can see as soon as I pasted this script in here it recognizes this is Google Analytics it knows where to put it and I can say I want to insert this in thrive themes and in landing pages and I click on continue and that adds my script here and similarly you can add any script you want so that can be tracking scripts like hot jar it can be Facebook pixels anything like that that you need you can add them here if a script isn't automatically recognized you can just use manual settings and one of the great advantages of using this is that at any point you can also just turn them on and off so if you have a certain script that you maybe want to use to do heat maps you can turn it on for a while but you don't have to add up running all the time so you can just come in here and sleep it off and the great thing about that is that you don't have to then you know delete the script and the next time you want to create a heat map you have to come back and you have to find the script again and paste it again and so on you just sleep a switch on and off and then one final thing in the Thrive dashboard is let's go to a smart site where here we can have some central settings that can be useful all across the website for example for your company you can you can set your company name address and so on you can automatically fill those in in certain places if you need to you can link to your privacy and other legal pages and you can set your social links so for example just to show how this works I can go YouTube that would be the link text and then the link to the channel save that and now the the great advantage of this is that whenever I want to link to my YouTube channel or my social account or whatever it is I can use the dynamic link feature to do that and in the future if at any point that link changes if I change the URL of my YouTube channel or something like that instead of having to go down hunt down every single link on my website I just come here change it here and we're done so that is the purpose of the global fields settings here in the smart site settings now with that that is basically as you can see there's more that we can do here that there's more powerful features to choose from here but those are the basics with that let's go back into thrive theme builder and start making some more detailed edits to our website so so far we have all the basics now let's look at how you can tweak more it is in a more granular way so this is everything that we've already set up in the wizard as we went through and let's go and look at how to edit templates so here we can see these labels says this is the homepage the default post video post audio post we have an error 404 page default page and then archives so let's go into the default post let's click on this I'll just click on edit and this will open up in the thrive team builder editor here's what the default blog post looks like right now and this is a drag-and-drop editor where you can basically change and edit anything you want and we've tried to make this as intuitive as possible so the rule that we use for editing is what we call click to edit so if you see this image here when you want to change something about you can click on it and then you'll see a range of options for this so I can change the size of this and I can do all kinds of things I can change where it links to I can also just delete it if I don't want it that's the basic idea I just click on something and I see the options I have and you always have extensive options for whatever you want to change about anything you see so let's say these sharing buttons here maybe I don't like these we just get rid of them and I can also add new elements so you can add anything to the page that you want including dynamic elements for example what we have up here is the post title this will be filled out with whatever the current posts title is and if I don't want it up here I can get rid of it here and if I want it somewhere else I can grab the post title element and I can bring that in wherever I want now it was definitely better before so I'll put it back up here and what we can also see is this will dynamically change so I can choose my content here I can say I want the I want some other post content to preview my layout and this will switch to a different post and show me what this looks like this also means we can change things like the sidebar we can also change the proportions between the sidebar and the post content by just clicking and dragging and here's another element of calls to action so in the sidebar here we have an example call to action where we can just change the text and we can change where this button links to and this is one of the ways in which instead of just having people consume our content we can think about well how do we want to let people know about offers that we have about our mailing list about coaching calls whatever it is and the sidebar of a blog post will be one of those places where you can decide here I'm gonna make sure that everyone who reads one of my blog posts will see a call to action that leads them towards my conversion goal now an important thing to understand here is that what we see here in this box here this is the post content and this is dynamic so this will be for the specific post I'm looking at this is the text that will or the text and content and the images and so on that will appear here what's important to realize is that everything I did here on the template level this is the post template this will appear on all my blog posts so for example if I say you know what I don't want this call to action here in the sidebar I can delete it but I haven't just deleted it on this Eric post with this title I have deleted it on all posts so if I change to a different post here you can see that it loads different content it loads a different title different featured image and so on but the call to action thing is still missing so that's something to be aware of and as we do the editing here we are changing a template that effects many pages we also have some global elements such as the header and the footer and we can also edit these and get them to look different across our whole website so if I click on edit section right here the changes I make to the header now are going to affect everywhere where they had with where this header is showing which is currently if we were on my website now what I want to do is the menu here I want to change this menu so if I click into a menu item again we have the breadcrumbs that help us navigate through elements we can see that this menu item is part of the custom menu element that we have here and I want to change the menu source because right now this isn't the real menu so since we have now created a menu in the last step I can change this to my main menu and now it goes home blog about and Lightroom presets now this is great I can I can change the templates as well so I can change the the entire template of this menu here and we have various templates to choose from and of course you can also always click on something so let's say I want to click on this here and I can go to something like borders and corners maybe I want this to have rounded corners so I can click and drag here to change the bottom corners the rounding so I can make it a pill shape button or a square button I could change whatever I want here but the important thing is what I would recommend you do is that in your menu keep it simple we want we don't wanna have an overloaded menu with tons of things we want to make it easy for people to make a choice and so few menu items is one way to do that and also highlighting a menu item is again a conversion focused thing to do so instead of just saying hey here are four equal options I say this one is important check out my product right I want to drive people towards my conversion goal so with that update done I'm gonna click on and that will update the header with the new menu across my whole website and we can do the same with the footer so let's just edit the section again and when you have this orange frame here that tells you that you're editing something that will have an effect on more than in more than one place or you're editing like a global element and right now I can't edit anything outside of it right I'm basically in footer editing mode that's it so we're going to custom menu again main options menu source footer menu now we change that save that there we go let's look at another important conversion element that will be on our website which is what we call the bottom section and right here you can always see this overview over kind of the basic structure of a page right we have a header we have a top section we have the content and sidebar we have the bottom section and we can also edit right from here so if I click on the sidebar I can untuk all the visibility and I can have a full width blog post but again this effects all blog posts that use this template so always be careful about changes like that that you make and the same is for the bottom section so I can say hey I don't need the bottom section let's just get rid of it no problem but we can also bring it back so here you can see this eye here can click on that and that brings the bottom section back and I can choose different templates here so if I click on replace here this brings me a gallery of bottom sections I can choose from and as you can see we have bottom sections for different purposes for example we have ones that link to other posts where the main goal is ok you've read this article go read another one we have ones that are with a contact form where we want people to contact us we have ones that have an opt-in form and ones that advertise and offer so we can use all kinds of different calls to action and all kinds of different ways of trying to drive people towards a conversion goal here I'm going to choose a very simple opt-in form here and because I want to demonstrate how to actually get people on your mailing list so let's say someone comes with this blog post they read all the way down here we write something that convinces them to get on our mailing list you know maybe we say get my free report whatever by signing up and then we have the lead generation element and here's how we connect this to our mailing list when I click on the lead generation element you can see that there's the option here add connection and from here I can choose what I've integrated with in this case MailChimp so I choose MailChimp and then it gives me a couple of options that are taken from my MailChimp account so I can choose which mailing list to add someone to and I can also add things like groups and choose whether it's single or double up then I can add tags so it's not tag one like this and apply basically choose what exactly happens when someone signs up on this form I can also change the form fields and add form fields I can add hidden fields and we have other tutorials that show you all the advanced lead generation features for now one more thing that's important is we can choose to either send people to a URL so when they've signed up we sent them to another page that says thank you here's your report or we can choose to show a success notification so I can just keep people on the same page and I can say you've been successfully signed up check your inbox okay and I can preview that here this is what it looks like when someone signs up there we go again here we're taking something that can often be quite complicated and we're making it as easy as possible right we're taking the idea of how do I get an opt-in form onto my website that looks good that matches the design of my website and that you know tags people correctly and so on all this can usually be so complicated and we've made it as easy as possible for you to get this important conversion element onto your website so let's leave it at that for now I'll save my work here this is my default post and then of course we can do the exact same thing for all the other layouts the other thing I want to show here is the list templates so you basically have two of these templates one is the blog page and another is any category page at hag page anything like that even a search results page will have a certain look where it lists multiple posts so that is the blog page and default archive is category search results and so on here's an important thing to note how to edit so if we go into our archive page for example here's what that looks like and as you can see we have a search bar at the top and we have a list of posts here and like with everything you can always edit something by clicking on it so you want to edit the search bar you want to hit it what it looks like what it searches how big it is and so on you can do all of that here and with the post list so at least a post that is actually a super powerful element that we have and thrive theme builder and thrive architect and you can change a lot about what exactly this looks like first of all we can go in here and we can go to the template and again we have a gallery of a huge number of templates here to choose from the right way we can make all kinds of changes and we can do something like this that's let's change its choosing on here this is like a simple post layout so we can take this and even here I can go into edit design and I can make further changes so if I want to bring back the featured image I can bring that in here I could say okay let's add a featured image here and that will dynamically add the featured image to each one I can choose this text here I'll go to text in the breadcrumbs I can make this larger I can go to layout position and change the alignment of everything so everything you see again everything you see is fully editable and you can make this page look any way you want so another thing you can do one more thing I want to show that we haven't really looked at is you can also use dynamic images as backgrounds so if this is too big for me I can go in here and I can go to I'm going to search for content box let me insert a content box here and I can give this a certain height and in background style for the box I can go to image and I can say I want this to be the featured image of the post alright and I can even choose the alignment of this so maybe I want to see like the top left or the middle or the bottom of that image to change that and apply this and now I have a way to show my featured image but I can choose how tall this is so I can make it use up less space so as you can see it's quite difficult for me to actually even give you a good overview of all the things you can do here because there's so much to cover and I don't want this video to go on for hours and hours but I think you get the idea by going into our templates here and by clicking on edit and by just basically clicking around and looking at the options you can see how you can usually find new templates to choose and you can basically edit every single detail of every template in every page on your website with drag-and-drop simplicity so with that let's go to the final component of a conversion optimized website which is to have specific conversion pages we're actually going to start with the home page the home page like I mentioned before let's click on edit here like I mentioned before the home page think of your home page is an important conversion page on your website now when I'm editing a page like this and this is important to realize now I'm editing the content of this page so the home page is a landing page and we can also see up here this is the Thrive architect simple drive architect is there to edit the content of a page and thrive theme builder is there to edit everything around the content okay so everything we've looked at before a header or footer side bar bottom section top section all this stuff this is what's around the content of a page or post but now on the home page we're editing the actual content of this individual unique page that is thrive architect and that gives us similar options to edit anything we see but here I'm only editing this one individual page what's already happened here is that we have the header with the changes we made the footer with the changes mean we made which is not surprising right because as we were editing this we knew this is going to affect the entire site so this is a home page layout that we can use to to make a really nice kind of neat short and conversion focused home page obviously I changed this in this case it doesn't even need to be like a personal branding thing so I can choose an image like this here and put that in and I can maybe change the size disappear I can also go into portals and corners maybe round this off a bit and then I would here want to write about okay what's my website about so I could say something like learn how to create kick-ass pictures using cheap camera gear and then maybe I wanna give this bit more space for the text here but as you can see it's all just like drag and drop I also want to go into my columns here and maybe central-line this and then let's see there's basically too much space here somewhere this here's too much let's get rid of that and let's go into this page section let's add a bit of a bottom padding here there we go so that could be my basic setup here we have an email opt-in form that's a good idea to have let's connect this to our MailChimp again and again I'm not going to go through this again you already know how this works so I connect this form it's another form here I'd also connect this to my MailChimp here we have another author image I could replace that with an image with me like this one another powerful thing we can do here is we can actually extend this page with what we call page blocks so in between the sections of the page you can see this plus icon appearing and it says plus page block when I click on this it gives me a whole gallery of elements that I can choose to insert for sales pages landing pages of home pages so on and it's also easy to navigate through these so as you can see maybe I have a product highlight section where I want to get people to buy my ebook so how about this one I insert this and it gives me this pre-designed section plus it uses my brand colors automatically and then the rest of this job is really just I go in and I click and I change the text right I change the text to match my brand and my product here we have a post based we've already seen that I can choose if I want to show different posts here I can go into filter posts I can say you know what instead of showing just the latest posts I want to create a rule and I want to create a rule that says I want to only show posts that are in a specific category such as photography tutorials saving clothes and then it will show the latest posts from this category and it does that automatically so I have dynamically updated post lists on my homepage and again with the so you know maybe I don't like this section here so I can get rid of it and I can click on the plus here and I can simply insert a different section that I think is more fitting for my business so again whatever that is you can very rapidly customize exactly what you want to see on your homepage using these features for now let's leave it at that and save our work here the important thing on the homepage is again communicate clearly what your website is about so we're using text and a picture to say here's what this is about and call people to action and give people an easy way to navigate to the important parts of your website so this here is a bit of a mess here but the idea behave check out these posts these are the important posts and check out my ebook right this kind of thing makes for a conversion focused homepage next let's build a sales page so we already have the page right if we go into our pages here we have currently a empty sales page if I go here and I click on edit with thrive architect it will load up thrive architect can start building this page now I've got good news and bad news bad news is if you want to sell your product you need a great sales page and it's really difficult to make a good sales page the good news is we've also solved this problem for you one of the ways in which you can do this is if you load up this page here and you click on this cloud icon you can choose a template and I'm using the shape shift C theme and as you'll see I can get a couple of pre-made pages here and I can also use a blank page and I can even use all of these other pages so all of these other page templates so I can either create a sales page that uses the exact same design language and style and so on from the rest of my website or I can even say me I want to have a different kind of template for my sales page and we have all kinds of templates to choose from and we have all the features you've already seen on these templates as well so if I click on this one here for example we have a sales page example here so let's choose that and right here first of all I can go into this tab here and let's change the accent color to our theme color it so right away the entire sales page is updated to match our theme color and this sales page here there's two things first of all this is a tutorial on sales page so the sales page itself will explain what you should write where and how you should use these different sections kind of the do's and don'ts of you know how to write testimonials how to structure your sales page where to put what so it's almost like a fill in the blank go through this to create an awesome sales page and it also has the page blocks feature so if you go through this and you think okay this is good but I want a different way to show my product you click on plus and you'll have all these different page blocks to choose from which also follow the same idea that if I insert anything here this automatically takes on the font and brand color settings and so on for the rest of the page and so very rapidly you can mix and such an effective sales page and of course you can simply follow the template and it will tell you put this here right fill in testimonial here do an about the author section here and so on this is all this is not arbitrary this is based on our experience of how to make a high converting sales page so this is the easiest way to get a high converting sales page for your product and then one more page that is a must-have on any conversion focused website is a lead generation page so again we have an empty page here and the lead generation page is simply a page that is there to advertise your newsletter or to advertise a free product that people get in return for signing up to your newsletter and again you can use all these features that we looked at to very quickly make an effective lead generation page so if we use our theme templates here I can choose a blank page I can also choose a premade already conversion optimized lead generation page template of course or I could use this blank page which actually in this case shows the header and footer I don't want to show the header because this is a fully conversion optimized page I don't want navigation on here just have the message that tells people get on my mailing list so we would have probably some kind of a hero area that explains here's why you need to get on my mailing list so perhaps this one here this looks nice and simple here I can change this image to something that represents my free guide or something like that and then we already have this background section that has like an arrow pointing down so maybe we can add a second section here with a lead generation element that looks maybe something like this and that's clicking this that I think the background should just be white and then since the arrow kind of this this subtle background our seems to point the wrong way now and what we can do here is we can go to this section and we have what's called decorations and we can choose the different decoration so we can choose what that what that bottom looks like and as you can see we have many shapes choose from and we could go with this one here and we can also change the height of this so now this kind of more naturally points towards our email form and again I'd connect this with MailChimp and then we're good to go we save this we have got a functional and nice-looking lead generation page on our website alright so that's it as quick as possible tour to help you get from zero to a functioning conversion optimized website as you can see these tools for our theme builder and thrive architect are massively powerful and it's quite difficult for me to give a tutorial where I'm even just scratching the surface of what you can do without it going on for too long but here's the thing don't be intimidated by all the things that can be done with these tools as you can see we've made this as easy as possible to get started and I highly encourage that you start simple I don't worry too much about all the little details starting out walk through the wizard and you'll be amazed at how great your website already looks just by the end of that and then one by one you can start building out these pages you can make your home page you can make your lead generation page or sales page or about page and so on and take it step by step and as your website grows and as your business grows you will encounter new needs you will see like oh can I also do this can I also do that and more often than not you'll find that the answer is yes indeed you can do this with rival architect with thrive theme builder or with one of the other plugins in the thrive themes suite so don't be afraid of of overwhelm you don't have to do everything all at once get started we've made this as easy as possible and enjoy the process of building out your website and making it better and better over time thank you for watching this tutorial I hope you've enjoyed it and I hope you'll build something truly awesome with our tools

Channel: Thrive Themes

Views: 26,550

Keywords: how to build a website from scratch, how to build a website with wordpress, how to build a website, how to build a website from scratch using wordpress, how to build a website from scratch wordpress, how to build a wordpress website from scratch, how to build a wordpress website from scratch 2020, how to build a wordpress website from scratch for beginners, building a wordpress website 2020, building a wordpress website from scratch, thrive themes, thrive theme builder

Id: cN8MUhT9HtU

Length: 54min 58sec (3298 seconds)

Published: Mon May 04 2020