Build Your Own Website in Just 5 Hours [Even Beginners] | Chris Towland | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Build Your Own Website in Just 5 Hours [Even Beginners]

teacher avatar Chris Towland, Local Marketing Specialist & Entrepreneur

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

55 Lessons (5h 20m)
    • 1. Introduction

      1:38
    • 2. Example Sites

      7:41
    • 3. Costs

      4:33
    • 4. Will I Be Able To Do This?

      1:30
    • 5. How to Buy a Domain Name

      14:22
    • 6. Opening a Web Hosting Account

      6:53
    • 7. Point the Domain at your Web Host

      5:06
    • 8. Extra Step for 2nd Domain Name

      3:10
    • 9. Installing Wordpress

      8:27
    • 10. Email Forwarding

      3:03
    • 11. Install Security Plugin

      7:43
    • 12. Initial Settings

      4:11
    • 13. Choosing a Theme

      13:38
    • 14. The Best Theme To Use

      7:13
    • 15. Installing Our Theme

      4:49
    • 16. Choosing a Template

      15:48
    • 17. Making Our Home Page Unique - Part 1

      13:59
    • 18. Making Our Home Page Unique - Part 2

      16:29
    • 19. Making A New Page Your Home Page

      2:39
    • 20. Creating A Page Template

      24:20
    • 21. Creating a Page Menu

      12:19
    • 22. Creating Your Website Pages

      4:39
    • 23. Responsive Options

      7:34
    • 24. Individual Blocks Intro

      1:41
    • 25. Paragraph Text Block

      1:15
    • 26. Heading Block

      1:18
    • 27. Images

      3:21
    • 28. Buttons

      2:49
    • 29. Columns

      3:33
    • 30. Background Sections

      3:26
    • 31. Content Boxes

      7:15
    • 32. Content Templates

      2:56
    • 33. Click To Tweet

      3:22
    • 34. Content Reveal Boxes

      4:25
    • 35. Countdown Timers

      6:12
    • 36. Credit Cards

      2:06
    • 37. Custom HTML

      1:13
    • 38. Dividers

      2:07
    • 39. Fill Counters

      3:06
    • 40. Google Maps

      2:20
    • 41. Icons

      2:30
    • 42. Lead Generation

      4:36
    • 43. Progress Bars

      2:57
    • 44. Social Share Buttons

      4:45
    • 45. Star Ratings

      2:04
    • 46. Styled Lists

      4:01
    • 47. Tables

      5:44
    • 48. Tabs

      5:24
    • 49. Testimonials

      2:22
    • 50. Toggles

      3:29
    • 51. Video

      3:19
    • 52. Updating Wordpress And Plugins

      4:26
    • 53. Blog Setup

      15:20
    • 54. Adding Blog Posts

      5:27
    • 55. Displaying Blog Posts

      9:12
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

191

Students

--

Projects

About This Class

acfeff82

A unique course that shows you step-by-step how to create stunning, professional Wordpress websites in less than 5 hours

I'm Chris Towland and over the years I've created many websites for my own online businesses and for my clients. With this course, you'll be able to watch over my shoulder to see everything I do, and then copy me to create your own, great looking website!

The course takes you step by step, from start to finish through everything you need... choosing a domain name, opening a web hosting account, installing Wordpress and then creating a website design that you'll be proud of.

The course is ideal for anyone who wants to quickly create professional looking websites.

Whether you want a website for an offline business, to sell products or services online or for any other reason, this course will help you to build exactly the site you want. 

In fact, this course is perfect for you if you want to create a website for...

  • Your offline bricks and mortar business such as a restaurant or beauty salon
  • Offline service such as an electrician, gardener or plumber
  • Online service such as social media marketing or SEO
  • Promoting your MLM or Networking Marketing program
  • Promoting your band
  • Starting your own web design business!

Even if you're a complete beginner and have never built any sort of website before... I guarantee that when you follow along with the course, you'll have a superb website in no time.

Meet Your Teacher

Teacher Profile Image

Chris Towland

Local Marketing Specialist & Entrepreneur

Teacher

"Chris Towland is a local marketing expert and author who has worked (both directly and indirectly) with hundreds of small businesses across the UK to help them improve their marketing and boost their profits.

Chris was recently called an "internet marketing expert" by former Dragon's Den star Rachel Elnaugh who was so impressed with Chris's SEO DVD's that she recorded a video recommendation of it.

He is also the author of a number of popular business books, DVD's, online courses and audio-books.

Chris helps his clients, who are primarily small business owners, to attract new customers as well as make more sales to their existing customers.

Two of his main focuses for this are Email Marketing and Twitter.

Email Marketing

Many of Chris' ... See full profile

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: if you want a website that looks like you've paid a Web designer thousands. But in fact, you've built it yourself in WordPress in around five hours, and for just a few dollars or pounds than this course is for you. I'm Chris Toland. On over the years, I've created many websites for my own online businesses on for my clients. With this course, you'll be able tow watch over my shoulder to see everything I do and then copy me to create your own great looking website. The course takes you step by step from start to finish through everything you need. Choosing a domain name, opening your Web hosting account. Installing WordPress on, then creating a website design that you'll be proud off the course is ideal for anyone who wants to quickly create professional looking websites. Whether you want a website for enough line business to sell products or services online or for any other reason, this course will help you to build exactly the site you want. Even if you're a complete beginner and have never built any sort of website before. I guarantee that when you follow along with the course, you'll have a superb website in no time. And just in case you need me, I'm always available in the course for further help, advice and support. If you'd like to see more info about the course, take a look at the free preview lectures, alternatively and roll. Now let's get started on creating an amazing website for you. Remember, I'm here to help you succeed, so I look forward to seeing you inside. 2. Example Sites: before you get started with the course, I'm sure you'd like to know what sort of websites you'll be able to create. So in this video will have a look at just some of the different sites within the theme that I recommend to you in the course. They're all over 100 templates built in each one is a different looking website on just with the press of one button, you can actually change the look of your site entirely. So what you can do is look through all of the Templars on. Just see which one suits your business and suits the type of site that you want to create the most. What you then do is install the template. I, of course, will show you entirely how to do this within the course. It's really quick of really easy, but you start with the template such as the one you see here on this one, of course, is you'll see, is built as a template for a restaurant. But it's very easy to look for a template that you just like the look off and you like the overall style of it on. Then change it for your particular business. So here, for example, you see, it is quite a lot to this site, and we'll go down to the second. But if you were a different type of business and not a restaurant, you could change the image. You could change the wording. You could change the colors. You could change the logo. You might not want some of the sections you might not want some of the buttons on. As you'll see, it's very, very easy to remove them, to change them, to move them around, to do whatever you want to them. So as you see here, this particular site has got different sections with different photos. There is a menu there for this restaurant that testimonials from some of the customers there is a contact US area. There is a map. There is a footer there at the bottom, so just the overall look of this. He's very professional. I'm sure you'll agree on. It's just one of the templates that you could choose on. Went too quickly. Now show you just some of the other templates. As you say, there are over 100 off them, and you can use any of those to create exactly the site that you want. Here's another of the templates within the system. This one is obviously set up for a yoga studio at the moment. But of course you could amend it to have you wanted large photo ahead of at the top, a sign of box here. Some more information. Photos with links to different pages and different sections come down the page. There some good looking photos in circles there with a little bit more information, benefits boxes, more testimonials on links to all the pages there at the bottom. So that is another off the templates, more of a sales page template. Now this one has got a bright red at the top again, if you see any of these, and you like the look of it. But you want to change the colors, the color of the background color for the text, the funds of the text, the size of the text. Anything you want to change is very, very easy. Within the system, I'll be showing you this site at the moment has a video here at the top. Andi, as you see product information headlines, different columns, different boxes different images. Testimonials again. So again, a professional looking site, this one here has got frequently asked questions at the bottom, which look quite call when you click on their Each box opens up with those questions. So again it's professional little touches that make your website look unique on look very professional. All these are very, very easy to do, and you'll be seeing all of these things within the course. This template e set up to give away free book with logo header on Sign Up boxes here below on then Mawr Information. Details about the author, the usual testimonials, silent boxes, things like that there. So again, a very different type of site. This template E is quite a large sales page. Head of at the top. Some bullet points there. Lots of different sections on headers. Andi Info boxes on a few different icons here. As you say, I'll just come down this quite quickly, but you bear to see there's quite a lot to this page, and you could use any of these bits that you particularly want to. There is a pros and cons list, for example, product images buy now buttons guarantees on again some of these F A Q boxes at the bottom . If you've seen enough of the templates now, you could just move to the next video on Let's carry on with the course, but it will carry on on Just show a fume or of the templates here. It's worth noting that all of the templates I've shown you in this video to change from one to another has taken me about 10 seconds each time. It literally is a case of finding a template on pressing a button on that will be there live on your website. So this new template here is a website at the moment to sell a video course, so it's got a big image at the back here. Header buy now button on. Then, as you see l come down it quite quickly again. Lots of benefits and details of the course details of the author or testimonials. Who's it for? Who's not? For guarantee bonus sections, choose your package. Buy now Buttons F ake Use lots of different information on there. This template is a very short but professional looking template. It only comes down this far. That's the bottom of the page, but it set up to display on APP on, as You see here images Putin's to request access buttons to go to all the pages to learn mawr on some of the highlights here at the bottom. This template is set up as a demo to sell a book on amazon dot com. So information on the book on an image at the top download a free sample here, a link to buy from amazon dot com on different details about the book Underneath it Here on We'll finish now with just one more example of one more of the templates. This one is set up as a car service center website again. You could change it to whatever you wanted to. But this has logo on various details of the company here at the top, a large, relevant image in the background buttons to request appointments and details of their services. Him at the bottom with some useful images, again buttons to request an appointment, testimonials from customers on a large map here at the bottom. As I mentioned at the start of this video, this is only a few off the templates available to you within the theme that I recommend in this course to create your own website that looks just as good as these templates that we've been looking at. All you need to do is follow along with the course on. Then take action yourself. So let's move on to the next video now where we'll look it, how much your website will cost. 3. Costs: in this short video, we're going to have a quick look at how much your website will cost. Now I'm going to start by saying straight away that this is not a free option. It is not a free website. There are some free website builders available on the Internet, but generally you get what you pay for. Either The quality of the sites is very poor or they're not very professional. You can't have your own domain name. I'm very often from day one there, then just promoting other products and services to you just to get you to buy other things from them. What I am going to show you in this course, though, is how you can create a very professional WordPress website at a very, very low cost on. I think you'll be quite impressed with how low the costs saw. So let's have a look firstly at the amount that you'll need to spend in the very first month, and this is because there are a couple of things you need to purchase when you're getting started on building your website, then we'll also look at the ongoing costs, which again are very low. So for our first month costs, there were three items that we need to take into consideration. The 1st 1 is our domain name. So this is the www dot that people will type into their browser to get to your website again. Every professional website will have one of these, so you do need to buy one for your site on. The cost of This will be around $9 for a year, So this is an amount you need to spend at the very start to buy your domain name. But then after then it will simply cost you $9 per year to keep that domain name. The second item you need to pay for is your web hosting. This is the space on the Internet where your website actually sits. On day, you will need tohave were posting to put your website live on the Internet. If you decide to use the Web host that I am recommending the course, your first month for your Web hosting will cost you simply one cent. That's because there is a special offer on introductory offer for that first month, and as you'll see in a moment the ongoing costs are very high either On the third and final item that you need to pay for is the theme that is the actual overall Look off your website . Now I do show you in the course how you can actually get these themes for free, so they wouldn't cost you anything at all. However, the one that I actually use in the course and the one that I use myself on, the one that I've used in the demo video above is a template that you need to pay for on the cost for this is a total of $67 on that is to actually purchase the software. So that's a one off cost. So overall, our first month cost on our total cost to create our website is $76 on one cent. If you're in the UK than this, would convert toe about £55. So overall that $76 toe have a really great professional looking website that will be promoting your business, whatever your business is, 24 hours a day, seven days a week. I'm just moving on quickly now to the ongoing costs on the ongoing cost for your website are simply your Web hosting. Your Web hosting is something that you will pay for on a monthly basis because you need your website to stay live all the time, so you need your Web hosting to be live all the time on the cost. For this is at the very most $11 on 94 cents per month if you use the Web host that I recommend within the course. So just to quickly recap your entire cost for creating a professional website are $76.1 for the first month on, then a maximum of $11.94 per month ongoing. 4. Will I Be Able To Do This?: in this video, I'm going to answer the question that you may be asking if you're a beginner to creating websites and that is, will I be able to do this on? The simple answer is yes. I've designed this course so that anyone, including complete beginners, will be able to follow along, watch over my shoulder and copy what I do to create your own superb website. I actually began working on this course over six months ago, but stopped because I couldn't find a system that could create really good looking websites , but was simple for anyone to do. If you've heard of WordPress, you may know that it needs a theme to give the sightings overall design, but none of the themes I found could be edited to produce lots of different types of website at the same time as being beginner friendly. Recently, though, a fun of brand new way of creating superb sites in WordPress on I've been amazed at the hundreds of different sites it can create how easy it is to use onder how great they look. I'm now using it to create my own on my client's websites on I can't wait to show you how to use it in the course. I can guarantee that you'll be impressed with how easy it is to create exactly the website that you've been hoping for. So let's move on to the next video now and start building your new website. 5. How to Buy a Domain Name: in this video, we're going to have a look at domain names, including how to choose one on where to buy it. I expect that everybody watching this video will know exactly what to domain name is. But just in case anyone doesn't, the divine name is an identify for a particular website on the Internet. So google dot com or you to me dot com is a domain name on entering that into your browser will actually take you to that specific website. When you're setting up a website, you will need a domain name so that people will be able to actually go to and see your website. So let's have a look first at where to buy your domain name. There are, in fact, dozens and dozens of websites that you can go to to buy a domain name. I'm going to show you the one that I particularly use, but you can go to any of your own choosing. There is no real benefit for going to this one. I've just found them to be reliable. Their prices, a good cause. Prices of domain names do difficult a lot, so it's just the one that I've used and really, what you start using one. It makes sense to stay with the same company just because you have a dashboard that you can log into of your own account on all of your domain. Names will be stored in there. So when you need to manage some of them and do anything with them, this is if you have more than one domain name. Of course, you'll be able to do it all within one log in, so it does make sense to do it that way. On Dhere, we are at the website of the company I use on their called name Cheap, and you'll find them at name cheap dot com. So what we need to do here on the name Cheat website is do a search for a domain name that we want to see if it's available on by available. I mean, obviously one particular name can only be used once. So if you wanted to google dot com, for example of obviously named cheap dot com, those have already gone. Somebody is already using that domain name for website, so you need to find something that is completely unique. And he's not used by anyone anywhere in the world, which can sometimes be quite difficult. But what you need to do is just have a search and see if the name you want is available. So you may be wondering, What should you actually search for? This may be obvious. You may, for example, have a particular company name. So if you were Smith's plumbers, for example, you may want to just search for Smith's plumbers and see what names are available. Another alternative would be a domain name that includes keywords so things that people may search on. So, for example, this could include your area. So how about Chinese restaurant Denver or hairdresser Manchester? So there's different options that you could actually search for. So what I suggest is that you just have a play around with this section here on. All you need to do is type whatever you want to try and search for in this box and just see what comes up. So let's have a for an example. Let's suggest we are a marketing company on were called Tortoise Marketing. We just type in this box what we want to search for Andi. Click here on What will happen is all of the options will come up here that are available now. At this point, we need to talk about domain suffixes. Now the suffix is what comes at the very end off the domain name. So, for example, named cheap dot com, the suffix is dot com on When you buy into May name, you have a big choice off the suffix that you prefer as you'll see here. From this example, we could have tortoise marketing dot store dot world dot shop dot life dot online dot design dot tech etcetera. No, you could choose any of thes. They will work perfectly well with your website. However, I would fully recommend that you only choose one of two options for your domain suffix. The first is dot com, and that is because that is well established. Andi used worldwide. The second option is the suffix for your own country, so I'm in the UK on Dhere. The main suffix for this country is dot co dot UK. If you're in different countries, there will be a specific suffix for your country, so that is an option that you could use for your country. The reason I suggest you state with those two particular options is that when your website is live on, do your company and your domain name is known by people. The will be the occasion when somebody, for example, knows that you are tortoise marketing, and they want to find your website what people will usually search on Will Bay either a dot com dot co dot UK off a country specific domain. But of course, if you are something strange or unusual, such as dot store or DOT World, they won't search for that. They'll say I'll try tortoise marketing dot com or tortas marketing dot co dot UK on. If they do that, they will find your website if they search for tortures. Marketing dot com on ur dot shop They may not find your website now. You could come up in the Google search rankings and the results anyway, but it is less likely. So I really would suggest that you stick to one of those two options for your domain name. Now I find sometimes when you do a search in name cheap, they'll come up straight away with this popular tab on. Don't you see? We don't have doctors dot UK or doctor calm down there, so I find that the best way to find that is to go for the suggestions tab here on. As you see here, we've come up with doc co dot UK on dot com. Both of those are available, and so we could actually get those there if we wanted to. Now, if you search for something that isn't available, let me just copy that because we'll come back to that in a moment. But if I was looking for google dot com, for example, obviously it's not available and he comes up with a cross there. The only option you would have would be to make it offer. But I have a feeling google dot com or google dot co dot UK probably wouldn't want to sell their two main name to you. So if it comes up with something like that that isn't available, you do need to think again because you won't be able to buy that. Let's have a look at the options you've got if you search for your domain name and it's not available, so let's look at an example. Let's say we search for Jones plumbers because that is your business name. Onda. We are in the UK we wanted Jones plumbers dot co dot UK or maybe dot com on both of those are taken so they're not available. You could actually make an offer, but normally that's it's not an easy way to go about this. We're trying to find an easier way, so let's have a look what we could do. Firstly, if your business covers a specific area. So, for example, you are a plumber in Denver, Colorado, or you or you are a plumber in Manchester, in the UK What you could do is actually add the name off the city or town. So, for example, if I could spell, we could add Manchester in there and they see if we were Jones plumbers in Manchester that is now available as a dot co dot UK, and it is available as a dot com. So either of those would get us the domain name that we're actually looking for. If you don't just do business with a particular area and you couldn't use that, you'd have to ever think is, too. What else would make sense for you? to add there. So could you be Jones the plumbers? Or is there something else that you could add at the start of that or at the end just to make it a unique domain name? So just to recap everything that we're looking to do, we are arriving on the name cheap website. Here we are looking for a potential domain name. We're doing a search in the box here. So I'm searching for tortoise marketing. I'm clicking on the button. It's coming up with the suggestions with lots of different suffixes. We only want to keep it to dot com or the suffix for our particular country. So dot co dot UK my case. We click on suggestions they will normally come up here. If they don't and you want to actually look for a particular suffix, you could actually just put it in the actual search box at the top there and search on it on. It will then always come up at the top. But as you see in my suggestions here, I've got the dot co dot UK is available on the dot com is available so I could have either of those and as you see, this says $7.50 80 year for the duct co doctor UK on $10.69 per year for the dot com. So if I decided to buy any of those, all you do is actually click on the purchase button and it will add it into your cart here . So when you've done that, you've chosen the one you want to go to. We just go to view cart, and that will show you everything you've got here. We can just leave everything as it is you can buy for more than one year if you want to on the price, obviously just change for that period of time. But if you're just having your first website and you want to keep the costs low, you can just have it for one particular year. Now, the next thing I'm going to show you is if we want to make a saving on this, there is somewhere that we can actually get a discount for our purchase within name cheap. And so I'm going to show you that now. And to find the discount, I've come back here to Google on what you need to do is do a search for name cheap coupons . When you do that search, you'll get obviously a number of results. The one we're looking for here at the moment on my search at least is the 3rd 1 down on it . Says name cheap coupons. Cheapest offers on our products on it is actually on the name cheat website itself. So you're not tricking anybody here? This is enough. Offer that name cheap make on a regular basis. What you need to do is actually click on this one and go to this page on. As you see, it is named cheap and it is their monthly coupons. Now, this will change every month. So you will not need to look at the coupon. I'm showing you here. The coupon code this month is warm up. But this is only until June the 30th 2000 and 17. Assuming you're looking at this in a different month, the June 2017 it will be a different code. But you just follow that. Come to this page and there will be a coupon here. All you do is copy that particular code there. Then we come straight back to where we were. So if you remember, we got $10.87 for our domain name. But what we're gonna do is paste the code. We've just got into that box and hit the apply button. And as you see entering, that brings us up. This ever message here on that is because if we using the site for the first time, we do need to create a free account with them. Or if you've already got an account, you log into your account. First, to create a free account or you need to do is click on this button here, and that's actually opens up a form like this. And all you do is create a user name, a password, anti first name, last name in your email address. Andi created account. They will then send you an email. You'll need to click on a link in that email just to confirm your account on. Then you'll have the logging details. So what you then do is come back here and click the log in button on, actually log into your account. I'm just going to do that now and obviously not let you watch me log in. And so I've logged into my account now, and what has happened is we've now got the promo code in there Has bean accepted domain coupon for June 2070 on the sub total has dropped to $9.84. So it's not a massive saving, but it will take you about two minutes to get that saving. So why not save any money that you can? So at this point, all you need to do is click the Confirm Order button, which would nt to a payment page where you make payment by a credit card or by PayPal on this domain name would then just be added to your account within name cheap. Now, I'm not going to do that because this was just an example. Don't actually want to buy tortoise marketing, but you've seen now the full process on selecting and purchasing a domain name on having it added to your name. Cheap account in a later video will then use this domain name and point it toe are hosting account so we can create our website. But for this video, that is everything that we need to cover with finding and buying a domain name 6. Opening a Web Hosting Account: in this video, we're going to have a look at setting up your Web. Hosting your Web host is the space on the Internet where your website will actually live. We, of course, want to set up your website on a quality where post, which means that your website will be available 24 hours a day when anybody from anywhere in the world wants to actually access it and see what is on that website. As you probably expect, there are hundreds and hundreds of options off Web hosting companies. Some will be more expensive than others. Some will offer a few more bells and whistles and others, but I'm going to show you the one that I use on. The reason I use this one is for several reasons. One, it has proved over many years to be very reliable. It's got very good up time, which means the website is available for the vast, vast majority of time. That might be the odd occasion when it goes down, but that will happen with all Web host. But the up time stats for this company are very good. It is also very inexpensive. There are somewhere posting companies that will charge an absolute fortune. This one is very well prized. It's also very easy to use. And as you'll see, I will show you all of the set up that we need to do for our website so you'll see that it is a nisi company, an easy Web host to use. Also in the resources lecture below. I have included a link for this Web host so that you can actually get your first month of hosting for just one cent. So quite a nice little saving when you're starting out. So that link, as I say, is in the resources lecture. So when you click on the Link in the Resources lecture, this is the page that you'll come to. As you see, the house that I use is called House Gator Onda, as you also see from this page, get online for just one cent so effectively your first month is one cent. And then after that you choose on the options that you want for how much you'll pay on an ongoing basis. So what do you do when you come to this Page is click Start your site now so that then brings us to this order for So let's have a look. What we need to complete here. What we want to do is say you've got registered domain and I already owned this domain. Of course, we have already bought at the main name. So let's click on here. You would then enter the domain name that you've just purchased in this box. Then we come down to choose ah hosting plan. Now the first thing is you want to look at the package type that you want the ones that suggest you consider our hatchling on baby Now the only real difference. It's important to us between these two. If you only ever intend having one website on this hosting account, then go for hatchling because it is the cheapest. So if the Web site that we're creating now is the only one you'll ever need, you might as well go for hatchling if you want tohave other domain names and you can put them all along your same web hosting account. So if you want different websites, you would want to go for baby because that will allow more than one website just so I can show you the difference in price between these. If you're paying for a month at a time, this is after your first month of one cent. Of course, hatchling, where you can only have one website is $10.94 per month. The baby Pro the baby plan is $11.94 so it's very little extra. But it just depends if you're only every contender in this one website and no other, you might want to go for the hatchling but will suggest most people may want to have more than one website over time. So you, in that case, would want to go for the baby plan. You then again got several options, and if you click here, you'll see if you want to just go for one month at a time, then you'll be charged to your credit card $11.94 per month. Now, obviously, this price could change over time. This is at the time of recording this lecture, but as you see, that could have caused change over time. But if you click on here, it gives you different options. If, for example, you're happy to pay for three months at a time. Then you get a 25% discount, so it's only $8.96 per month. If you wanted to pay for 12 months at a time, then there's a 60% discount. So it's only $4.78 so less than $5 per month for your Web hosting, which, in my view is it is an excellent price. So you'll need to decide on whichever these you want to go for will suggest you're still staying with monthly there. You then create your own user name. This is just the user name that you're used to log into your hosting account so it could be whatever you like. As you say it will tell you there what you can and what you can't include. You then just need a pin number off between four and eight digits, something obviously that you'll be able to remember. And it can only be numbers. You then just enter your billing information. Here you have seen forms like this A doesn't if not 100 times before, So fill in all the details there payment details on this side. It then offers you additional services. I would. Don't take that because I don't think you want it. You probably want to one. Take that as well. Unless you did want automatic backups of your website every single month. Then you could go for that is $1.67 per month and that's your choice. If you want to go for that coupon code will already be entered in there, which is what gets you your first month for one cent. Andi at the bottom here it says amount due for this month is one cent. So all you do is say you've agreed to turn the conditions and you press the check out. Now, button that will set up your account. Will of the charge you one cent now on. We'll set up the recurring billing for other months as well, and you will then receive an email from Host Gator with all the details of your new account on how you log in to be able to set things up in what is called your C panel. When you've received your email from her skater in the next video, I'm going to show you what we need to do with the information from that email so that we can go back to your domain name that we actually bought in name cheap on, then point that domain name to your new hosting account. 7. Point the Domain at your Web Host: in this video, we're going to move on to our next step, which is pointing at domain name at our new Web hosting account. To do this, you need to log into the website from where you purchased your domain name. In our example, it was named cheap dot com. So view did the same. You'll need to firstly go to name cheap dot com and then actually log into the site. The log in details would have been sent to you in the email from name cheap at the time when you purchase your domain name. So I'm now going to get to my account at name cheap dot com. So here I am inside my account name Cheap. Andi, you will see a screen something like this. If you don't, we actually want to be at the dashboard. So one of the ways to find dashboard used to hover over account on, then click dashboard there, and it will bring you to this screen on what you should be seeing here is the list off any domain names that you've got in your accounts? Of course, if you just open your account and you've just bought the one domain name will just be one listed here. Another way of looking at these You can click on domain list and it will show you all the domains that you purchased in there. The woman went to use for example. Website for this course is this domain name here which I've actually just bought as a sample domain on it's his birthday club marketing dot co dot UK. So what you need to do is find the domain name that you want to work with on that you want to point to your Web hosting, and then you need to come to the right hand side of it and click on the manage booted, which I'm going to do here, and that led brings you to this screen. The things that we need to amend on this screen are very, very simple. It is just one of these categories here that we need to change, but for that you'll need some of the information that would have been sent to you in the email when you opened your Web hosting account. So in our example, we opened account with host Gator, and they would have sent your welcome email with a certain amount of information in it. Now let me to show you the information that we would have had. There we go. There would've been more information than this. But this is the pertinent information that we need to use for this section. So I've just shrunk that information so that it fits here on the screen. As I say, there will be more information than this in your email. But what we need to look for is this in particular where it's his first name server and second name server. Now, this is what I've had from Ho Skater. If you're using a different hosting company, it will be different to this on. Of course, Mind says N s 6083 Yours will be different from that. So don't copy what I've got here. You'll need to get your own information from your own email. So what you need to do is this little bit here. That is the first name server we need to copy that. We then need to come here to name cheap where it says within the domain name that we are changing. Name service. Onda, we need to click on here where it's his name. Cheap, basic DNS and click on Custom DNs. And that will open up this here at the bottom. What we then need to dio is based in what we've just copied the name server from a document from my email. I don't want to come back to that again and copy the next one. The 2nd 1 then come into name service to, and I paste that in there. So then we just checked what we are correct and they're six or 83 and six or 84 And then all we do is click this little tick here to save it. That's it on the top here. This might just be off your screen, but it says DNS Server update may take up to 48 hours to take effect, and it says, please allow X number of seconds before switching your name servers again. But you don't need to do that, and that is all we need to do. This domain name is now pointing at your new Web hosting account. Now, as it said, this needs to propagate through the Internet and so it can take a while. It says it could take up to 48 hours. In my experience, it normally is done within a couple of hours, so you can always have a look at the next stage anyway and see whether that will actually work. But the may be a delay at some point, but I'll show you where that delay will be when we get to it. But for now, that is all you need to do in pointing your domain name at your Web host. 8. Extra Step for 2nd Domain Name: in this video, we're going to look at a very quick, extra step you need to take if you are using an existing Web hosting account that has already got one website or more than one Web site on it. In other words, if you've just opened a brand new Web hosting account for this particular website, and so it's a new hosting account with no websites on it at all, then you don't need to take this step so you can just move onto the next video. But if you have a hosting account that has already got some websites on it, and you want to add a another website, then please carry on watching this video. So the information we need first of all to go to a Web hosting account will be in the email that has been sent to us by host Gator or whichever Web hosting company you're using. So here is some of the information that would be in that email on. What we need to do is see where it says your control panel. Andi effectively, you'll have a link there, and you just need to click on that link, go to the control panel on. Then your email will have your user name and your log in details for that control panel. So you need to go to that on, actually log into it. So I'm going to go and log into my control panel now. So here I am, in the control panel of my web hosting account on what we're having to do because, as you remember, this video is for people who have already got a website on their hosting account. So we need to add a second domain name to this hosting account. So to do that, we need to click on here where it says popular links add on domains. We click on there, and that brings us to this screen here, and we need to create an add on domain on. So here we need to put the domain name that we have just purchased. So in my instance, that domain name is birthday club marketing dot co dot UK. Now you don't need anything at the start of that. No, Www etcetera. You can just leave it as it is and then come down to the next box which will automatically fill. And this is just the sub domain is going to be on your hosting account. So whatever it comes up with, that will be great. Birthday club marketing in this instance, that is fine. And then document root is another description of where it will actually be within your hosting account. On what I would suggest you do there is that she just get rid off the dot co dot UK or the dot com, whatever it is in your instance, so it just says. But they love marketing, and that is all you would need to do there and you just click Add domain and that's it. As you see it says Birthday clown Marketing. Doctored at UK has Bean added to your account, and that's it. That's all we need to do for this quick, extra step. So will now move on to the next video, where we'll look at setting up WordPress 9. Installing Wordpress: in this video, we're going to log into our new Web hosting account on to create the basics of our website with WordPress. To do this, you'll need to find the email that was sent to you by your Web hosting company when you open the Web hosting account. Here is some of the information that you would have received within that email on what we need to actually do. There will be a link at some point that says your control panel on. We'll have a link similar to this. What we need to do is go to this Web page on the will. Also be the details of your user name and your password within that email, so you'll need to use those. So go to this link on, then log in using your user name and password. I'm going to log into my account now on, then show you the control panel that we see inside. So here I am, within the control panel of my new host Gator Web hosting account. Now this account is actually not nukes. It's one I've had for some time, and it's got quite a few websites on it, but you will still see the same thing if you just opened up a brand new hosting account. Of course, if you've decided to go for a different company for your Web hosting, then what you see inside your control panel may be similar. Or it may actually have a different format toe what you see here. So let's get on with installing our website within our hosting account. Now we're going to use a format for our website called WordPress. WordPress is very, very popular. It's used by millions of different Web sites throughout the world. On one of the best things I think about WordPress is that firstly, it's constantly updated. It's completely free on. Also, there are hundreds and hundreds, if not thousands, of plug ins available that will help you do lots of different things on the website. And so, for May, it is the ideal format to useful. Website is also very simple to create and to install WordPress website as you'll see here. So what we're looking for is popular links and then just WordPress 1-click installation, and so we're going to click on there. That then brings us into a page like this that says select domain for installation. Onda we need to do is click on here and then select the new domain name that we have just purchased. If you're hosting your county's new when you click on here, the only domain that you see will be the one that you have used to create this hosting account. If you have followed the previous video on did you've actually got several websites already in this hosting account, there obviously will be a choice there and you'll need to choose the right one. So, as you see, I've chosen the one that we're using for this demonstration. So birthday club marketing dot co dot UK. Now, if the domain that you want to have your website on doesn't appear in this list, then you need to go back to the previous videos because you've obviously missed out to step somewhere. So you need to go back there and actually correct that. But if you followed all the steps to this point, then it will be in there. So just select that one from the drop down. Then in here in works is directory. You could add something in there, but that's only if you want your website to be outside. Birthday club marketing dot co dot UK ford slash something or other. Usually you will want your website to just be on the domain name itself. So you want that to be completely clear? So all you need to do is select the name that you want in there. Don't touch the box says directory. Don't add anything in there. You can leave it saying directory, cause that's not going to come up at the same directory on then All we do is click the next button on this page with, then just got some very simple boxes to fill in. So the 1st 1 being blocked title so that normally will actually be your domain name. All of these could be changed later, or this could be changed later. So you can actually put something in there and change it at the later stage if you want to . But for May, I'm just going to actually put the name of the domain birthday club marketing admin user, This is going to be your main log in name for your website. The one thing you must not use here is the word admin and I thoroughly suggests that because most hacking attacks on website will initially try the name admin first, and we'll try and break into a website using the user name admin. That's because some programs that create websites will automatically create the website with an admin news name off admin. And so do not use that. I'd suggest you use maybe your own name or it could be something to do with the site itself . I would make it something that's not obvious. So, for example, for mine, I could have something like V Day Club. So birthday club. But it's not anything obvious from there. It's not my name or anything like that, and most importantly, not the word admin. Now you will need to remember these things. Example. Here you will need to remember this user name, so please do make a note of it so that you will be able to log into that later. Then the other fields are quite simple. It is literally your first name, or it could be anybody's first name on your last name. Andi, your email address. So that will just be your own email address that you actually want to receive an email about the log in details off your website. Then leave this tick that says automatically create a new database for this installation. You'll then finally need to click on, agree the terms of service and then we come over here and hit the install button. We can then just leave it to work. It says it is installing. So we'll just wait a short while until that's complete on. After just a few seconds, we get the notice that says installation complete on then here importantly, are your installation details. So what you want to do because you they got obviously the website address. You've got the user name that you just created on. Then there will be a password or two massive created on. It will be quite a difficult passwords because obviously we don't want one that anybody can guess. So, like, here, you can see what that one is there Now what you want to do is actually copy that Andi paste it somewhere to another document so that you've got access to those details because you will obviously need to use those to log into your website. So once you've got those copied, what you can then do is click on the log in button here to take you to where we can actually log in to the website. But that's it for this video will be looking at logging in and doing the various things on that site very shortly. But for now we have created the website. In fact, we could even go and have a look at it. If you click on here and go to birthday club marketing the website. This is your actual website. At the moment it's a page that says website coming soon, but as you can see, that is it. You have a website up and running on your new domain name. If, for any reason this comes up with an error message at this point, this will be because if you remember, when we actually set up the domain name, it said this can take a while to propagate up to 48 hours on. It will just be that that propagation has not happened yet, so you will just need to leave it for a few hours and then try again, and eventually this will all come into place and you will come up with a page that says exactly what you see here. When it comes up with that, everything is working and ready and we can move on to the next video. 10. Email Forwarding: in this video, we're going to look at setting up email forwarding in your new Web hosting account. Email forwarding means that we'll be able tohave une mail address for our brand new domain name. So with my new domain name being birthday club marketing dot co dot UK, I can actually have Chris at birthday club, marketing dot co dot UK or admin at or info Atal Whatever I wanted and what I'm going to do . He set that up so that if anybody e mails that particular email address, then it will just be sent to my normal email address on so I'll receive it within my existing Gmail account, for example. So it's just a very simple way of being able to look professional. So if you were having business cards, for example, you could have Chris at birthday Club marketing dr dot UK on when anybody emails that it comes to your existing normal email account. So to do that, we need to again log into the sea panel. The control panel of your Web hosting account on DWI looked at how to get into that in the last video on it will just be from the email that was sent to you by host Gator or whichever hosting company you've used. So when you've loved into the control panel will have a look at what we need to do their. So I log into my control panel now. So here we are on Do you remember from the last video that your control panel looks just like this this time? What we want to do is click on here where it says forwarders, and that brings us to this page here. If you've already got an email forward is set up, then they will appear below at the bottom of this page. But if you haven't, all we're going to do is click on here on go to add forwarder. So what we need to do here is click on where it says domain on. If you've got a number of domains on this hosting account, you need to choose the correct one. That may only be one on there if this is your first domain name on this hosting account. But when you've selected the correct one, you then just need to put what is the start of the email address that you're wanting to create. So my example. I was thinking of having Chris at birthday club marketing dot co dot UK. But that could be anything you like. It could be your name. It could be info, etcetera. So that goes in there and then at the bottom, you just add in where you want it to be forwarded to. So this will be your existing email address. So if it's your own Gmail address or another email address that you've already got, so you just enter your normal email dressing there and then you click at forward and that's it. That's all the rays in that set of it says all emails sent to that email address will now be copied over to my own email address on that is it we have now set up on email forwarder . 11. Install Security Plugin: in this video, we're going to log into our newly created website and start some customization, beginning with installing a very important security plug in. When you installed the version of WordPress on our new site, you should have made a note off the user name and password for logging into that site. You will have also received from Host Gator a shooting you're using. Ho skater. You would have received an email with the longing details. So let me just bring up my copy of that email. Now on. Here it is. Obviously, this is for the site I've set up. Your details will be different. But what it's telling me here is that birthday club marketing is actually where the website is. Birthday club marketing doctor, that UK ford slash WP admin is where we actually log in to make any changes to the website . And that's what we're going to use in a second on it then has the user name that you set up and it has given you a password for the website. So what we're going to do now is actually click on this link here on, Then we're going to log in to the website, so you'll need to do that with the details you've had on your own email. I'll go and log in to my dashboard now on getting so that you'll be able to see what we need to do next. On. Here we are. I've logged into the site, which is called Birthdate of Marketing. On the first place I come to is here, which is the dashboard. The first thing you may notice when you log in and it's not showing here, but it may do on your site the maybe a line across the top, which actually says, Do you want to show the live version of the site? Because at the moment, as you saw in the last couple of videos, we are at the moment showing a holding page for your website on it says Click here. If you want to show the live site so you can click that because what will happen then is will always show the live version of your site that we're working on. The first thing we're going to do is to add a plug in to this site. It's a free plug in, and it's one that will increase the security of your site. You have probably seen in the news lots of occasions where websites are being hacked into on. Sometimes it's even big organizations like hospitals and government sites and big banks and all the likes of that. So you can't ever completely guarantee you can stop people hacking into your site. But of course, what we can do is add plug ins that will actually help to increase the security of reduced the likelihood that your site could get hacked. So to do this, we need to mouse over to wait, says plug ins, and then come here and click on Add New. That opens up this page here on in the right hand side, where it says keywords, You need to type the word fire wall on what happens there is all of these plug ins come appear. There's lots of these that are probably very, very good plug ins, as you can see, some of them have That's had half a 1,000,000 installs. 50,000 installs that lots of people use these plug ins. The one that I tend to use is this one here all in one WP security and firewall so all you do to install that on your site is click Install now that says it's now installed with their need to activate it by clicking the button so that plug in is now activated on your site. On If you look down this left hand column now you'll see a new option has appeared called WP Security on what I want to do. His mouse over that on Come appear to the one that says Dashboard and click on there. This now is the dashboard. For this particular security plug in Andi, it will show you the strength of the security on your site. So at the moment, out of a total 480 we've got 40 points. And that's just by installing the plug in on its basic options. There are lots of options. You can go down here, Andi, change all these or actually activate the different sections. I'm not going to go through all of them here because it would take quite a while, but I'll show you some of the main ones that I would go in and change before we go any further. So firstly, what we're going to do is click on the one that say's firewall, and that brings you into here on. All we're going to do is click this to enable the basic firewall settings, and you can see here this is going to give us another 15 points. So to activate that, we need to come here, save basic firewall settings that's now giving us an extra 15 points for doing that. So there are other things you can look up and read on these and see if you want to install these, but again will carry on with some of the basic ones. Next, we're going to go to the option called User Log in on here. There were 20 points available on what we're going to do here is make it more difficult for people to have lots of attempts at logging in and guessing the log in details. So we want to enable the lock down feature on what was then here is there are a maximum number of attempts that somebody can try to log in to your website before they are stopped . So what I normally say is allowed to attempts in total, and then how long are you saying before they can actually try again. If they fail, I usually change that 15 minutes on. Then if they're locked out, as in, they have too many attempts and it stops them coming in again. How long are they locked out for? On sixties normally, Quite a good one for that, Andi. Instantly lockout invalid user names. So if your user name too long in is B'Day Club such as mine was here and somebody actually tries to log in under the name of ad men, which is obviously not the user name we've got, they would get locked out immediately, so I would normally select that you could also, if you wanted to be notified by email. If anybody does get locked out, you can click this here and you would be emailed. So I'll just save the settings on that. That, as you see, has given us another 20 points. If you just come back to the dashboard now, you'll see that our strength on the meter here has actually increased now up to 75 out of 480. Well, then move on quickly to use a registration on this congest detect and save the settings. This means that if anybody knew, wants to register to use the website. They need to be manually approved by you on then will come down to spam prevention on enable capture on comment forms and also below that block spam bots from posting comments. So this just means if anybody's going to comment on anything on your website, there will be a real person rather than about so we'll save those. Just have a quick look at the dashboard again. You see, we're now 125 so we're increasing the strength off the security on our website. That's all I'm going to go through on this video. Just keep it short. There are the other options you could go through and look at if you wanted to, but we'll leave that for now. But what we've done there is very nicely improved the strength of the security on our website. 12. Initial Settings: in this video, we're going to have a look at some of the initial WordPress set up that we need to do. On in particular, we're going to change some of the general settings. So to do this, we need to again log into WordPress Dashboard. Andi, you may already be there if you've just followed the previous video. But if not, please log in on. Get yourself to the dashboard. I went toe. Move over now to my site on Here we are. I've loved back into birthday club marketing on all we need to do. I'm on the dashboard, but it doesn't matter. It'll way you are within your own WordPress site. What we need to do is come down the left here to settings, and then we're going to go to General, and that brings us into this page here. There's just a couple of things that were changing your site title. The name of your site should be at the top there. There's then a tagline. So it's just a few words explaining about your site at the moment, it will say just another WordPress site, but you can actually get rid of that or if There's a few words you want to. I didn't there. You're welcome to do that. The next thing I want to do is where it's got the WordPress address. Here. Yours will be a H T T p Colon, Ford's first ford slash your website name. What I want us to do is add in their www dot and we want to do that on both of these lines here. This just makes the site available. If anybody types in the www version or just the http version itself, so when you've done that, other than that, there shouldn't be anything else. You need to change on this page here unless we come down. Look at the bottom here. You've got date format in time format. If this is not in a version that you would particularly like because dependent on your country, you may prefer a different version. So if there is a different version you prefer, then just obviously choose that one off the date and the time for math on Also, the week starts on a particular day. I always like my weeks to start on one day, but you could change it to Sunday, for example, Some people think that their week starts on a Sunday. So when you've done that, we then just click save changes. Now what does happen then is because you've changed that www part, you will be kicked out of your website on. You will then need to log in again. That's quite normal. You only need to do it this once because we've changed over to that www format, so I've never know. Just pulls the video and just logged back in again. There we go. I've logged back into the dashboard. Now the other thing we're going to do is again come down to the Settings tab here, and this time we're going to go to the bottom one, which is Perma links on all we need to do here in the common settings at the top, there are a number of options. We just want to come down to the one that says Post name on Click on that. What this means is, when you create a new post on your site or a new page, it will actually have the u. R L that people go to To get to that page will be the name of that particular post. So, for example, it would be birthday club marketing dot co dot UK forward slash the name of that particular post. Where is the version it was? Choosing force was the plain version, which would be birthday Kilmartin, Doctor, that you gave Ford slash and then the question mark and actually a a number of a page, so it doesn't look very attractive. And he's not very good for so changing optimization purposes or anything like that. So we're going to choose the Post name one, and then you can just come to the bottom there save changes and that he saved his post name on. That is all we need to do for this section, which is your initial set up in the next section. We're going to look at actually having a particular look toe our sites and choosing a theme for our site. 13. Choosing a Theme: We've now finished all of the basic settings that we need for our new website. And so now we're going to have a look at how we create a specific look on a specific field toe. Our website Andi in WordPress. This is done with what are called themes. So, firstly, let's have a look at what our website looks like at this moment in time. Obviously, we've only doing the very basic settings. But of course there is a website that he's actually there and he's actually viewable on. We can see this by just hovering over where it has the name of your site here. And then there's a button that says visit site. So if I click on that, that then opens up this here. So this is our website at the moment. Obviously, these air just stock images that were part off the theme that's automatically installed. So what you've got is the name that we put their money very cleverly scrolls over that photo, and then this is what else is there. You've just got a basic first post that he's automatically included in WordPress to shape what one of those looks like. He's just got a few things down the right hand side, so we have a website on. If this is how you want it to look, you could just add all your content here and that's it. It's perfect and it's done for you. But for most people, you won't want to photo with a cactus in the background here. Andi, you'll want your website to look different toe how this one looks so as I say this is doing with what are called themes. So let me come back to the dashboard here. So there are thousands and thousands of these different themes available, each one giving a completely different look to your website. So if you can see any website that you like on the Internet, you'll be able to get a theme that could make your site look pretty much like that website that you like. There are lots of lots of themes for WordPress that are completely free. Andi. There are also some others that are paid themes for WordPress. Now I'll be showing you the theme that I personally use very shortly, and I'll show you how you can actually get older that but I want to show you some of the free options that you can actually have and how you actually find them. So the first method we're going to use here is within a dashboard again within our website were going to come down to appearance on. Then we're going to click on themes that then opens up this page here. Andi, within your dashboard. Already there are three different themes. The one that is here that says it active is the one that's obviously give on your site at the moment. And that's the one that has the characters in the background. There are two others one called 2015 1 called 2016 that have automatically installed Andi. You can see just from the image here what the site will actually look like. If you wanted to come over here and click on live preview, that would actually show you what a large version off that site looks like just so you can see if that's something that you would like to use. For most people, though, the three build in themes are a little bit too basic and won't give them the website that they're actually looking for. So let's have a look at how we can actually find some other themes and how we can install these onto our website. So the first way would be again within your website to just click on add new theme and that will actually load up lots and lots of different theme options. I'll just scroll down a few there, and you see it is just a few of them end up section, you click on popular, and that will actually bring a lot more different ones up there. You can even look at latest. You could look at favorites or you can actually search themes. It is a particular type of theme you're looking for. Then you can actually search on that here. So what I suggest you do in this section is just have a scroll down and see if you think there's an overall look that would make sense mean depend on what type of business you're in. Obviously, some of these will suit your business on some certainly won't mean there's one there that is for a magazine type of look to the website, so that would suit some businesses. I'm not sue till this. There's one here that says it's a one page site. If you see one that you think you might like the look off. What you can actually do is just click on it and it will open up then a preview of that website so you can actually scroll through and see what it looks like and see if that is something that you want to use on your site when you find a particular look and feel that you like. So if it was one of these different themes here, for example, all you do is hover over it and click on the install bottom that installs that theme for you. You then click on the activate button to activate that on your site. I think that brings us to hear Onda. We can then click on the button here, Andi, view the site so it's now changed. So instead of the look at the back of it with the cactus, we've now got this. So it's still a fairly similar one this offseason, one I would want to use for my website, but that was just really to show you how you find one on your then activate it, and that is now active within my WordPress. Of course, if you wanted to change back, you could just come over here. Andi, activate the live preview on a cactus one, for example, so you can change those quite easily on you can obviously play around with a few of these on have a look and see which one makes your website look just how you want it to look. Another way to find good free WordPress themes is just to do a search in Google, so you'll see here. I've done a search for free WordPress themes. Andi, there's lots of options that come up here. A word you'll notice here, which is worth looking out for, is responsive on. What we want is a theme that is responsive on what that means is it will respond to the size off the browser that the website is being viewed through, and it will also respond to the particular device. It is being used to look at the website. So, for example, if your website is being viewed by somebody on a large computer monitor, then it will show them the whole of your website. If though they were looking at your website on a mobile phone. Then everything would re size so that it looks good on looks proper on that mobile phone. Some unresponsive websites could look absolutely dreadful. You've probably looked yourself on a mobile phone at websites where everything is absolutely tiny because it's not re sizing properly to be looked at on a phone or a tablet . So we obviously don't want that to happen. We want if somebody is looking at your website on a mobile phone, we want them to be able to find all of the information they're looking for. We want the website still to look good on DSO. That is why we need to choose a theme that is responsive. So in this particular search here, there are lots of sites that is showing the 50 best free, responsive themes the 40 best of 65 plus except etcetera. So we need to do is just have a look at some of these on C. If they give you further examples, that's just have a look at the top one, for example, on what they're doing here. This is just somebody's blawg, and they've actually gone through and chose on what they think are some of the best versions off themes that you could use for your website now. Some of these, of course, will be doing this to promote paid themes, so you'll have to have a look for in just see which are actually free and which are paid. But it's another great way of getting some ideas off the different looks of websites and finding one that would be right for your own website. So up until now, I've shown you have to find free themes for your website. But as you would expect, there are also paid themes that you can get on. I personally always use a paid thieve. Andi. There are a few reasons to that one. Is there obviously had more time spent on them on day? Ah, lot more effort have gone into them because the person creating them knows they're going to get paid for that theme. So generally the themes will be better, a better quality and a better look to them. The other thing is that if it's a paid theme, it will normally be updated on a regular basis. So if there are any security issues with a WordPress or anything like that, then the theme can automatically be updated to the latest version so that effectively you're getting an improved version for no extra costs. Because wouldn't you bought the theme on the lot of themes could be available When I'm talking about paid themes. They could be $10 up to $50 or maybe $100 for a theme. So it's not exactly very expensive. It's quite a low cost right. You get a website that is perfect for what you're looking for. So it's an example of one of the websites that I've bought themes from before in the past. I've done a search here for theme forest. All one word on the options we come up with here is theme for his dot net. So you could, of course, go straight to theme for his start net. I'm just showing you how to find it through Google so you can actually just search on that and then click on it. And as you see, there are 35,000 website templates on here from $2. The one we want to look at is we need to click here for WordPress because obviously we want to theme for WordPress on There are now 9980 to WordPress themes. If you then look on here down the side, you can click on categories on, so there are different versions here, so one of these may fit your particular website type. So depending on your business type, you might want to click. And just look at the corporate themes. For example, on that again will never These down that's now narrowed that down to 2200 of the corporate themes on what you can do here. There are other options that you can put filters in here so you could put a price. For example, so few as you see down the side here is $59.29 dollars, $39 etcetera, so you could put a price bracket in there if you wanted to. But if you come down here, if there's one, if you just mouse over the name on this block here on the left, it will give you a brief look of what that website looks like so you can come down quite a few of these on just get annoyed idea of what a particular theme Looks like So if, for example, you thought this taxi one here was going to be good, you could then click on it and it will open up a larger version off that on. There's then a live preview button so you could click on that and we'll actually open up are full version off that website, so you can actually have a look at it and see whether that is the type of site that would be good for you. Now, of course, with any of these themes, we're not expecting to take this website and use it as is because these images and might not be what you want. Obviously, the phone number won't be your phone number. So what we're looking for is just a no overall look of a website. We will then either purchase that or activate the free version. If it's a free site on, then what we're gonna do is change these details to make them your own, to make it your own unique website. But the idea of looking for a theme at this stage is to just find a theme that works for Wilson that we like Onda we use that as a starting point for our own website. So that's the taxi one there. If you wanted that, that would be $56. For example. Let me just come back to that search page. So as you see, you can just go down absolutely loads of these on. Just find one that is good for you. Open till now, we've had a look at how to find free WordPress themes on. We've also had a look. It had to find some paid WordPress themes. But in the next video, I'm going to show you a completely different way to create superb websites with WordPress. And this is actually by not to using a theme at all, but by actually using a plug in. 14. The Best Theme To Use: as I mentioned at the end of the last video we're going to now look, it's a completely different way to create absolutely superb sites in WordPress and instead of actually using a theme, this is actually by using a plug in called Thrive Architect in the Resources Lecture. At the very end of this course, I've included the link that will ensure that you can get thrive, architect of the very cheapest price possible. But first, let's have a look at why this is the very best way to create your website. The first thing that makes Thrive architect superb is, as it says here in the middle, the landing page templates. There are already over 170 different designs within this software on that is being added to all the time. So what you can do is actually have a look, and we'll do this as we move through this course because you'll see me using thrive Architect. You can just choose a particular look that you'd like for your website Press one button and that will appear on your website. You can still change obviously, those elements around to make them as you want them But it's a really good starting point for the sort of website that you want tohave on. It makes it very easy. It's a one button press to just install those on your pages. The second big difference with Thrive architect as you see him on the right hand side, is that it is actually built by marketers. It's all well and good having a beautiful looking website. But for all of us, we need a website that does a job for us. It needs to sell our business. It needs to sell our product. It needs to sell our service on. Many websites just don't have the proper marketing elements in place that will help you to do that. Thrive architect is actually made by marketers. And so, as it says here, there are lots of conversion focused elements, so things that will actually help you to bring customers to your business that will help you to grow your email list will help you to actually make sales depend on what your business does. But those were actually built into this software, and they're so easy to actually include on your website. Andi actually make your website sell for you and again we'll have a look at some of those as we move through this course. The third and possibly most important element that makes Thrive architect different is the drag and drop editing. This is a true front end editor on. I'll show you what that means. Now here is an example that is the same in many different themes that you will get for WordPress. If you have a particular part of your Web page that you want to change, you need to do this. You need to come to this section. You need to click on it to change it. That opens up a different element. You then have to change what you want to in there. You then have to save it a new, then have to actually save the web pages. Well, obviously, that is something that can take a period of time. But let me move down the page and just show you how thrive architect actually does this on . Here's what happens with thrive. Architect on As you see, it is really front end editing so effectively, you actually see the page as it will appear on your website on If you want to change something, you just choose the element that you want to change on. Then you can change the wording directly on the page. And if you want to change any spacing, size ings or anything like that, change the font. It's done here on the left and automatically changes on the right hand side, so you see exactly how it ends up on your website. So this is what is called true front end editing. As you see, it means you can see exactly what your site will look like on. It makes it far easier, far quicker to design the ideal website for you. There are a lot Mawr super features of Thrive architect that you'll see me demonstrate as we go through this course and you'll see us actually create a website with Thrive architect . But before we move on, let's just have a look at the pricing for Thrive architect because it is a paid theme. Or actually, it's a paid plug in. But as you'll see, it is a very, very reasonable cost. Now these are current prices. Of course, these may change it sometime in the future, but at the time of making this video. These are the current prices. So if all you want to do is use thrive architect to make one single website, then you'll need this single license, which is $67. So that is actually a really good price for the the quality off the plug in that you're going to get with five architect, So it will mean it cost you $67 to create your website. If, however, you want to create mawr than one website, then there are two of the packs that are of interest. The five license pack is $97 so that will enable you to create five completely different websites with thrive architect. So that actually equals less than $20 per site at that price on, if you want even more than that, you can go for a 15 license pack which will obviously let you do up to 15 websites with five architect on that will cost $147 which then means that each website will cost you less than $10 per site. So excellent value. But obviously you can decide at this point whether you just want to go for the single license, the five or the 15 on. All you do is click the Abdic cart button on Make your purchase Now, as I mentioned earlier. If you have look in the Resources section, which is the very last lecture in this course, then I've put a link in there to get Thrive architect at the very best possible price on. So if there are any discounts available or any sales on at the time, then that link will bring you straight to the page. That will get you the best price possible. So just pop down there on Click Through to the Link to see Thrive Architect. And there's a lot more information. I mean, there's a lot more detail here on the sales page that will show you a lot more about this particular plugging at the top of the page. There is a video as well, where they show you exactly what thrive architect can do. So if you make your purchase of that, then we'll move on into the next video and see how we actually add this to WordPress and then how we start creating our website with thrive. Architect 15. Installing Our Theme: assuming you've now purchase your thrive architect, Plug in. We enter now. Have a look at how to install architect on your WordPress website. So here I am within thrive themes. Dashboard. So this is the actual Thrive Themes website, where I have purchased my product on Daz. You'll see you'll come to an area in the dashboard where it says access your products on. The first thing you need to do is click here to actually download the Thrive product manager plug in. So all you do is click on here and then actually save that to somewhere, actually on your own computer. So I'm going to do that now on. I'll pause this just while I do it. I'll just save that to a relevant place that I can find it on my computer. And then once that's done, you need to come to your WordPress dashboard in your own website. So let me move over there. Now, Here I am, on the dashboard off this website on what we need to do is actually install that plug in that we just downloaded. And to do that, we come down the left hand side here and go to plug ins and then to add new. We just click on there that brings us into here on. We then want to upload a plug it. So we're going to click on here on it, then says, choose a file. So you they need to find the file on your computer. So I'll just click on here, and I will now actually find that file. So here it is. It's this thrive product manager. I just click on there and then I open it. And then I click the button here on the right hand side that says, Install. Now this could take a minute. Ill. So there we go. That was actually very quick. So that has now installed that Blufgan. It says, Plug in, installed successfully. What we now want to do is click this button here to activate to the plug in. So I've clicked on that button there on the game. We wait just a second for it, and there we go. Plug in, activated. So if you now come down the left hand side, you'll see you've got a new option that is appear called product manager. So and it's the one that's got this green leaf next to it there. So we want to come down the left hand side and click on product manager. That then brings us to hear what you then need to do is connect your thrive themes account to your product. So what you need to do is click onto the log into my account button, and if you already have the Thrive Themes website on your account there and you're logged in on another tab on your computer, then this should go into this automatically. If you are not logged into the Thrive website at the time, it will actually come up with a logging box on. You'll need to put in there your user name and password that would have been sent to you by thrive so you just enter that in there. It will then show any of the thrive products that you actually have licenses for. As you see, there's three of them that I've got licences for architect, the one we're going to be using. I've also got thrive, themes and thrive optimized, so if you want to actually then install any of those, all you do is click the button of the one you want to install, so we obviously want Thrive architect. We simply click on there and then you'll click the button to install the selective product . So all we do is we click on that button and that will install five. Architect. I want you press that button on. Do you have got the confirmation message to say that it is now installed? You can then move on to the next video on. Well, look it. Exactly what we need to do to get our website set up. 16. Choosing a Template: In the last video, we installed a new thrive architect plug in tow, our website. And so in this video we are going to have a look at what we can do with that bloody on. Actually start creating our website. Firstly, let's quickly discuss the different parts of the website on DSO. This will explain the different functions that we need to create within our WordPress and the different parts of the website are number one. The home page on this is obviously the first page you get to a website if you go to just the domain names. So in our example, if we go to www dot birthday club marketing dot co dot UK, then the home page is the first page that we see. This normally will be an introduction to your website. It will have hopefully the most wanted response feel websites or whether you're looking to sell a product. Whether you're looking to get them to opt into your email is whether you wanting to get people to actually visit your shop, your store, your business. Whether you want to them to give you a call, it will have that information on their there will also be links through a menu to other pages on your website to give them more information. So that is the home page. The second thing. Our info pages on DSO within WordPress. These are called pages on this would bay other pages that you'd want on your website that give details about your business. So, for example, pages about your products and services a contact US page. So contact information for your business on about US page. So information off see about your business. They could also be order pages, etcetera or details on your team members or or anything like that. If you're a restaurant, there could be pages with your menu on there, for example, and then the third type of page that we would want for our website or what it called posts . And you'll see these here in the menu where it's as posts. Some websites won't use posts at all these arm or for regular updates. For example, if you're doing blood posts, so on a weekly basis, you're going to put a little bit of new information on your website. These would often be in the form off posts, but if for example for your business. All you want is to have the details on your business. Details of your products, the order page, the contact US page and that's what you want. They would all be done through pages instead of using the post function, but we will over the next few videos. Look at all these different functions, how you can create them on your website if you need them. Andi, exactly what we can do to make them look, Justus. We want them to. So let's get started and have a look at what we need to do to create a great looking home page. Now let me just drag in what the home page looks like at the moment. This is just another version of the same site, all the proper front off the site as it is in the moment. This is just with what was set up automatically with WordPress. So it's just this big background image. The name of the website on then at the bottom is just a a placeholder if you like. That's his home page text. When you create your cited look, something similar to that initially so obviously not very thrilling not very exciting, not the sort of pages that we'd want people to see if they first come to our website. So let's drag that out of the way on, then Look what we need to do to use Thrive Architect to create our home page. What won't do, first of all, is mouse over, weights his pages and then click on all pages because WordPress will have already created a page for you. That is your front page. And that's the page that we just looked at with the cactus on it. Now we obviously wanted to be a little bit more exciting than that on what you need to do to change this. It's saying It's your home page, which is the front page. It's saying front pages what it's calling your home page there. So all we need to do is amend that to make it look how we want it to look on. We're going to do that by mousing over here to edit with Thrive architect, which is, of course, our new plug it on. We're going to click on there. There we go. So you'll remember in an earlier video, me saying two different things about thrive architect, one being that it shows you exactly how your page looks at any time. So here, on the right and side is how our page looks at the moment. So it's very similar to the version I just showed you on the other thing being that all the functions that we want to add to our pages are dragon drop. So it will show you here. For example, if you wanted to add an image, you'd simply grab the block that Sae's image. You drag it over to the point you want to drop it. You'd let go on drug it and drop it where you want it on there. Then the spaces there that say, insert image and all you do is click on there, choose an image that we want to add in insert into post there. It is exactly what I wanted in the page. I'm going to get rid of that because we don't really want that at the moment. So let me just remove that on the other one that I dropped in there. So all of the functions you may want are here down the left hand side, as you see there are loads of them on will go through quite a lot of those as we go through this course, so to build your home page, what you could do is actually just choose the functions that you want, drag them across onto here and actually build from from pretty much nothing build your home page from scratch. But what I'm going to show you is the method that I use on. I think you will want to do the same as well. On that is to use predawn templates that thrive architect already has in there. Andi To access these or you need to do from where we are at the moment, click on here where it says Page set up on Do you think it's an option that says change landing page template. If we click on here, that will then bring you up a lot off different landing page sets. Now the chances are by the time you get Thrive architect, they'll be even more sets. Andi even more examples and templates, and there are at the moment, but there's already quite a few cause even as you see here, there's what 345 10 15 2025 30 different sets. But a set includes more than one particular theme or more than one template. So if, for example, I click on, know how that opens up there into all of these, is that to rose off them? Yes. So to those. See all of these as templates on all of these Templars that's choose a different one. Let's come up to the top. Serene set we click on their serene has three in it. So, as you see, there are lots of these to choose. For now, the images to view these are quite small at the moment. But what I suggested you have a look through them, Andi. Just see which looked like the kind of look that you want tohave for your site. Depending on the site you're creating, Are you actually selling a product? Are you wanting people to sign up for your list? Are you wanting to attract people to your business? Depends on what you're looking for will depend on the different type of look that you want for your site. So as an example, let's have a look here if we click on set called Vibrant Onda we might decide we want to have a sales page for our products. Say, for an e book, for example, if we click on here and you can always change these so you can try as many of these as you want to to see what they look like. So let's just look at a couple now. We might decide vibrant sales page is a good one to look at. So you just click on it. So you get a little tick there on, we choose template down at the bottom, and there it appears. So this is now how your website would look, so all the colors we can change what you're looking for is just a overall idea of a site that would suit your purposes. And there is one that you like the look off. So if we have a quick scan down here, you've got to your headline. You be out to put an image of your product. There you be out support in order button. There, you've got some of your clients. You've got some more information. So just giving through it very quickly. Some testimonials there order buttons again. Guarantee sections more testimonials. FAA cues. So that just gives you on idea of what your site could look like on simply if we saved out that as our home page. Now let me just refresh on my other browser we go so dragging over the browser to show that live website this is actually live on their announces straight away. That has changed my home page and it now does look like that on What we need to do is if this was the look that we wanted for our site is simply change the information on here So it matches your own info so you could change of Ciel the wording and some of these sections you might not want. You could get rid of sections. For example, if we didn't want this section here, we could just remove it entirely addle the sections in. So what we're looking for is the best template for us as a starting point. And we're then going to go through that starting point on ad, take away change so that it is then have information on our website. So that's just one example of a template. If we decided we didn't think that template was right we can again come back to page set up change landing page template on Let's have a look. What else can we try? Their copy? 2.0, for example. Andi. There again quite a few different possibilities there that I think 10 different ones within their. So let's have a look at a different sort of sales page. Let's have a look at this one. So the game we've chosen that that's going to load is our page, and there it is. So again, it is another page. We can change all of these colors if we want to. We can change all the images or the wording. We can get rid of some of the blocks. We can add others. So again, it just gives you an idea of what is available. Let me just skim through it very quickly just to show you some of the different things on that page. So if we wanted that one, we just hit the save button and we could have that as our home page. Let's go into a different one change landing page template again. Look down the list as another one know how? Let's look at one that would be a slightly different look to it. Let's choose this one. Have a look at the template and there we go. This is one where there is a video at the top of the page, which is there. You could obviously change the video to one of your own. Or you could change this to be an image or anything else you wanted to. So again, it's quite a different looking page with some different benefits. This is looking to sell a course. I think this version here, but obviously you could change it to do something different on It's Got benefits of the course there, about the author of the course of photo of the person There, which you obviously change on lots. Mawr information there. So that's that one. And again, if you wanted up to bay your home page, we just click the save button. Let me just reload on my other browser. Now bring it in and straight away. There is this particular page. That's how quick it is to actually change to a completely different looking home page for your website. There are also quite a few themes that could be used by normal bricks and mortar type businesses. So if I come down here and have a look at the Thrive biz set, there is one therefore on auto business of finance, business, homes, business, medical, restaurant, construction on beauty. So if, for example, we wanted to look at the restaurant one, we could choose that template and straight away that changes our site to be one that would be suitable for a restaurant with an image of food at the bat layer, which we could obviously changed one of our own. Other than reduce here off the restaurants links to the menu what the customers say, contact details, map, etcetera. So if that was similar to your type of business, then you could use this is your starting point. So it really is a case of going through the available templates and just seeing which would be most suitable on which you like the look of most to use for your website and your business. Now, even if you find one like this, one, for example, is built for restaurants. But it would be relatively easy to change this for, and you're the type of business. Even if you were a builder, to just change the name to change the background images to change these images. And the wording to those that have information relevant for a builder would make this a completely different website. And so that would be very easy to do all you need to do it. Just look at all the templates or choose a few of them, load them up, see what you think looks best for you. And if you can see some sections that you won't want, that's no problem. We'll just get rid of those on. You'll very soon. Be seeing all the other different sections that you can have a swell and you'll be able to choose and dragon drop whatever you need to build your website. So I'm going to use this one as the demo version for this course. So I'm going to click the save button now to actually save that. It comes up saying all changes saved so that he is now safe to our site and we'll use this one to actually play around with Andi, see what we can do within this course. So I'm going to stop this video now. You may want to now go and do the same thing. Go and have a look at either load up the same template so that you can follow along and do what I do and see how we do it. Or you may want to choose a different template and make changes to that one instead. But if you go and do that now and then, we'll move on to the next video, where we'll look at how we can then make changes to this home page that we've just created . 17. Making Our Home Page Unique - Part 1: all right. In the last video, we chose one of the templates within Thrive Architect. He uses the home page for our website on This is the one that we actually chose to use for our demo. You may have chosen the same one to follow along with. You may have chosen a different one, but in this video, what we're gonna look at is how we now personalize this to add all of our own information to make it our own website. It will take you a little bit of getting used to how this works. But it really does make a lot of sense in how it all fits together and how easy it is to change it. So once you got to grips with it, you'll find it very easy to make amendments to add things, to remove things on just to get to the site, to look exactly how you want it to. Now, every single one of these items a Jozias a move along. It says like there that is paragraph on text. This is heading. This is an image on all of these are blocks that are down this left hand side here now in later videos. I'll go through every single one of these and show you exactly what it does. But what I'm going to show you in this video is a basic overview of how you look at all these different elements and how you can actually change them. So let me start with an overview of just one of these sections and just to show you how thrive architect works. So say, for example, here we mouse over here because we want to change this headline here on As you see when we mouse over it, it says it's a heading. If you just click on this section, you'll see a couple of things happen. So I've clicked on it there. Firstly, it will show us in this section here at the top, what exactly it is we're editing on how this all fits together. So this is a heading. You see it says, heading there, and it says, heading here to the left of it. It says background section. And that is because this heading is over a background section, which is this image that it sat on here. So if you wanted to, for example, edit the image on the Batman section below, you could just click on background section. This then highlights the image at the back. So let me come back again. Click on headings so well on heading. This is what we could change. When you click on a particular item, you'll see that this left hand column changes were on. Heading it. Now, says Thrive architect, heading on. All of the options for this section appear down this left hand side. Now that seems like there's a lot there because the rays and there's lots of options, lots of things that you can play with, lots of things that you can change a lot of them You won't need to, but I'll show you how this works. So first and foremost in the heading here, if you would like to change any of this wording, for example, let me just make some small changes. So you wanted this to say our secret to great food? No, as you can change all the wording, but I won't do that for this example. But you can see that to change the wording. You literally do it within the box here on the main screen, so you can change the wording underneath. You can see you can make it bold. Indented underlines. Strike through. You can change the alignment of all the wording within the box. So if we wanted to change all to left hand, we could do that just by doing that, change it back to the middle just by doing that, so you can also change the formatting to make it heading. You'll see that's great out as heading one, but you could change all those. If you want to do to make them smaller. You'll see also here that some of these are colored in an orange color. So if you wanted to change that, if you highlight it, you'll see the over here on the left hand side that comes up with font color. So just by clicking on there, you could drag around and completely change that color if you wanted to. So you could either move this circle here as you see on the right, that's changing completely. Let me bring you back to pretty much what it wants, cause we'll keep it up the same. But as you see, you could change that to anything. There's greens, oranges. There's all sorts of colors that you could actually go for. So let's leave it roughly where it waas about there. Andi, obviously the black. If you wanted to change that, we just highlight that. And again, that comes up with the black color there so we could change it. So if you made any changes here, you just need to click the apply button to actually save them into your design. But I don't want to change anything, so I'm just going to cancel that. So let's look, we're still in this heading section. Let's have a look at some of the other options that we've got down the side here. You've just seen font color. We can also highlight that front if we want it. Just there. We can change the actual Funt if we wanted to. So this is in one called Lehto at the moment. But this could be changed. You come here into different types of fonts, you could change it to something completely different. And you see, the fund has just changed their but I'm going to leave that at the moment. At what it waas just 30 all stays the same. Andi, you could also change the size of that. There is. You see, Let me just cancel that. We then got the font size here, so this wording size could be changed by moving this to the right or to the left. We've got line height, so that is the distance between these different lines so you can make more or less space there. We then have text transform. So here you'll see. We've got a capital letter at the start of most of these words. But you could automatically change that to all capitals just by clicking that button. Or you could change it to the first letter of every word as a capital by clicking that button. And that is all lower case back to where we had. It is just by clicking that button that start. So you see, it's very easy just to make the changes here. I won't go into the advanced section. That's something for later. It's not something you generally need to change the layout on position. I'll show you in a second when we moved down here, because it's not an easy one to see because there's no background to this, so we'll look at that in a moment, maximum width is the overall width on the screen, so at the moment it's It's as much as we can have that if we brought it left, as you see, it will take up less off the screen so you can move that down here to roughly halfway. So it's only taking up half of the screen with alignment that is attached to this as well. So that would either align this to the left hand side of the screen, the middle of the screen, the right on the screen, for example. But I'll bring that to where we were. Remove it, take it back. So it's covering the whole of the screen because we want that to do that very thing. There are more advanced options there that we won't look out because I don't believe that you need those at this time. Background style would let you put an image or something behind. As you see here, this wording has a gray background behind it. We could do that here and actually add a background if we wanted to. You could add a color behind there, but as you can see on this one We want to see the image that is behind borders and corners again. We'll have a look at that when we come down here because it will be easy to explain. So that really for this little bit is all we would want to change. So when you've changed as much as you want to, you can then come away from that. So we'll just actually click on this one here. Now, at any point when you've made any changes that you want to keep, what I suggest you do is just click the save button here and that comes up and says all changes saved. So let's just look at some of those other things that I mentioned to you there. Now, here we actually have. If you mouse over it, we have two different things. So what we've got is a content box, which is this actual box here that has the gray background to it. If that's a great color on, then also, if we click here, we have that you see, is come out there paragraph and text. So what's actually happened is we've put text on top off a content box. Onda. We can change both of those if we want to. So let's first of all, I've just highlighted the content box. So as you see as before, we've got a chance to change the width of that. If we want to toe how much of the page you want it to cover and you can change the height if you wanted to. We won't bother with decorations from now. We'll look at that later. Let me just come down to the bits that I want to show you on here on. Let's have a look at this. So we've got first of all, the background style This time we click on background style here. What we've got is two different things. First of all, there is a color for this background, which is all of those efs there which is actually white. So you could change that background color if you wanted to. You could have that color anything you wanted it to pay. Let me come back to the white that it waas. But then also we've changed the opacity off the background. So let me have a look If we move that to the top, there is solid white and if that's what you want. That's what you could have. But what's actually been done here is just by dragging this down, can you see that we can actually see some of the background through it. It's still remove that right down that'll the color disappears. But you then can't read the wording. But if we move that up to just where you feel is right, it looks really professional, cause you can see some of the background through it. But it gives us our color on means that we can read the wording on there. So that's how that little bit works. We've then also got borders on corners, and you can probably guess what both of these are. But let's just have a quick look at how they work at the moment. This has got no border. All you've got is the actual gray color or whatever white color that is there, and that is it. There is a green around it, but that's just for us. The highlighting for our changing. Let me move it away there, look, you see, there's no board on that at all, But if you wanted a border, we come back to the Board of Section because that's just disappeared again. There we go. You could say I want a border. You just click on that. You've got a solid line, you've got a dotted line or you got a different type of Dottie lines. If you wanted a solid border, you could click on there and say, I want the border thickness. This is one pixel thickness. You could change it. You see how the border size is changing there you could change the color of that. So if you wanted it to be on orange color border, you could have that like that. But it's just apply that you could change that however you want before seems a little bit thick. We could maybe change that to three so you can have a border around there. Then you've also got the corners. At the moment, the corners here are square. But if you wanted to round those corners a little bit moving that up, can you see how the corners on here, Let me just come off it two seconds that you concede to gain. You've now got round corners on that box. So again very easy to change. We've just selected the content box. We've come down to borders and corners on would change that so that it has now got a border and we've rounded those corners. So I'm going to remove that so that we don't have the border. As you see, I've removed the border. But we've still got around corners. I quite like those. So I might leave the round corners there. So as you can see all we've doing again, we've selected one of the particular items here on our page. That's a content box. It's given all the options here on the left hand side to change it. We change it just as we want to or we leave. It is it is if there are any of these sections you didn't want tohave say, for example, you didn't want to have this. I won't get rid of it, but all you do on the right inside here there's a little dustbin. So just by clicking on there would just remove this item entirely. Then, as we said, we've got another item on top of this content box. Let's click on that on that comes up on it is a paragraph on the text So if you wanted to change any of this, you could just delete. So, for example, there was a big section of this. We didn't want tohave. We could just delete that and then put our new text in here on again. You could change the size of the text you could at new text into it. You could bold it, etcetera with ALS, the various things you could do there. So changing the text on this wouldn't be any different to what we've changed here. Just above. This video has gone on for quite a while, so I'll stop this now. And in the next video, we'll have a look at how we change some of the other items that we've got on this page. 18. Making Our Home Page Unique - Part 2: Let's continue with looking at our home page now. Andi, we've just looked at these different boxes here on the amount of text in there. Let's have a look now at this background image on how that could be changed if we wanted to . So first of all, we just click on it on it, then says it is a background section, which is what it is on. The different options come here on the left. Now, a lot of these I won't go over the ones that we've already looked at, so maximum width we've already seen. You can change that. There isn't any wording on its. We don't need to look at those here. The things we need to look out. We need to come down here to the background style. Andi. You'll see it is an image in the background. If you wanted to change the image, you can just click on here where it's his image. Andi, simply delete this one on upload a completely new image, so that would actually bring a completely new image there to the background. The other thing that's really clever is here. It says linear, greedy int on. Can you see at the top the images quite white near the top and then more obvious and more pronounced at the bottom on. That is because there is a greedy int. If I click on linear ingredient here on, do you see how these that is on 34%? 56%? 89. If I drag one of these, that me grab this was 89 or 99. It's so small on my screen I can't even see. But let me drag that. You see how it changes on the right inside that actually looks there. So this is just one way of making this screen look really professional on this image. Look really professional, Andi Again, if you want to change that, you want a little bit more of it showing or a little bit less you can change those on. So if you put a new image into there, you can have exactly the same where you change how much of it is seen on. It's just one of those things that makes the image lop very professional just by having those on there. So if you had actually changed any of those again, you would apply it. I will just cancel it there. So that is how we would change the background image on how we can actually amend the Grady int on the images. Well, let's have a look now at the top of the page. Andi, where we've got our logo on our phone number. So moving our mouths up to this section, we get a highlight. Then let me click on that and you'll see it says columns on what has happened here. This is one of the options from the left hand side, where it says columns on this means that what we can have is there is a reminder. Let me just stop here. This will come every 10 minutes if you've not save your work. And it is just a reminder that if you've been making changes, you should actually click the save button on save things, and that will pop up every 10 minutes. You can change that if you want to, but I think it's quite good to have a reminder that if you've been making changes, let's save it on so you can't lose any of your work. If, for example, your computer crashed or rebooted so coming back here. Now let me click again on columns. What this is is, as you can see, we've got two columns. The first column. The left hand column is where we've got our logo of the right and is where we've got the phone number. If you wanted to change the columns, these are taking up half of the screen each. You can just mouse over here and change them so they take up different amounts of space if you want to. But usually for this particular purpose will want them to bay about 50 50. So we'll put that one there. So the take up half of the screen each you'll see that as a say, it is one of the options in the left hand menu for columns. If you wanted to add, for example, Mawr columns in here, you just drag that over, drop it there on it, then says, Do you want half and half? Few columns? Do you want thirds? So, for example, if I want to do add three complete new columns in there, I just click on their on their They are that I could obviously drop content into those this is an image that has been dropped in one of the two columns, So let me just get rid of that. But as you can see, we've got our two columns there on. If we click in the middle, this is simply an image. And so it's an image that is our logo to change that, we just look to the left hand side and there is a button that says Change image. You click on that on, then simply upload your logo from your own computer on. Then you just change the size of that to suit the website you just by moving that across. So it's a simple method off. Just changing your logo up. Load your new one. Amend the size said that it fits your website. There are, as usual, a lot of other options there. If you wanted a border, if you wanted corners, etcetera, you can do all of that. So that's that one on this side. What we've actually doing here is there is an image, which is the telephone image, which is there so you could remove that. If you want to, you could change it to a different image if you want to on Next to it is the actual phone number. So if you wanted to change this, let me change it to a British format. So it might be for 5555 another. The number now doesn't fit on one line. I'm just going to look at the font size here on the left and just make that a little bit smaller, and that fits in. The other option would just be changed This so it takes up more space here on it would then fit in on the same size. Let's now come down the page on Look at this here and this is a button, which will take them to a different page on the website. The Maker reservation button will take them to a reservation form or reservation page, for example. So let's click on the button and see what options we have here. So we'll click on it off, see it say's It's a button. And so this. If you wanted to make a new one of these, there will be the option here for buttons. So you basically just drag one of these on but with ours, and we just click on it again, so it brings up our options down the left hand side on as usual, we'll have a look at some of the interesting options that you can change here when you're adding or changing a button if we didn't want to, but in here it all, you could just delete it as we've said before. So you've got type button or button on daikon button on icon, for example. Here there is an icon that's come on the side here. This is a credit card, but you can choose from a big list. So if you wanted the music, I can't select that on that, then appears here and you could have the icon on the left or the right, so I'm going to just remove that for next. I don't want that, but it shows you what option you have. If you wanted to coming down some of the other options on again, it won't go through them all. I'll just go through some of the major ones that you may want to change. If you had a button like this, you could change the color that's changing this background color. You can see that that is green. The button size simple one makes it bigger or smaller to suit your website. You can change that to whatever you want on the actual width of that on a page. You could click and have it for with the page if you want to, but you wouldn't normally for buttons. Don't leave that where it waas this for the wording here. Obviously, if you wanted to change the wording, you just click on it as before on make a change to the wording that you wanted to, but actually looking at the size of the text you need to hear. You can change the size there. If you want to do just by dragging that color of the text, you could just change here again. You click on there and choose a cool you want for the text, a line in the text to the left or to the center. I'm going through some of these things quite quickly because we've already discussed these in the previous video, again transforming the textile capitals or the various options changing the font, changing the line hide. We're running out one line, but if you got more of those, you could you could change the spacing between the letters if you wanted to, with income on to lay out on position on This is something you'll use a lot to make your site look professional. You see here this button is partly over this image atop and partly over the white at the bottom. On that, as I think you'll agree makes it look really professional instead of it just being a photo than a button underneath, then the next section underneath. Having the overlapping makes it look quite professional on that is actually done with these outside arrows here. So, for example, you see there's a minus 32 here for Put my mouse over it and just drag it. You'll see how that button moves to either over the image. It's just moving things around a little bit on. Just by doing that and changing the flow of that, you can put it exactly where you want it to just to have that professional finish to it. So all have done there is we're on buttered on. Then we drag these around that sees outside hours here just to get it to the position where we think it looks best that is moving, making the image smaller, just moving it around to where we think what's most professional. So if we decided there, for example, you could just leave it at that point, then let's come down here. Is there anything else we want to look at? Background style again? There is color changes we could make their if we wanted to borders and colors. This one has got a very faint border on. It was just a one pixel around the edge on. Obviously, as you can see, this is quite rounded here, so we've already got a rounding corner with 40 pixels. You could change that if you wanted to make it more or less around it. Let me just change that back to about 40 so you can see that's what makes the buttered have circular corners there, and that's all we need to do on that one. So coming down the page now, what you'll see is the things you've just learned are basically repeated down the page. So let's have a look here. This looks a little bit complicated. We've got some text and we've got a couple of images. But what actually have we got on this page to start with. We've got columns, so I click here. It says columns. And that's because we've got three different columns are left hand column is all the text? This column has this image. This column has this image. So again you've seen that before. If you wanted to change any of these, you click on here. That is the image. So we could, of course, change that image If we want to change the image size, change the border on the image Obviously the same with this one. Change this image on the left Here. We've got two things in this color we've got. We click on here, this is going to bay heading so again we could change the text in Are heading we could change. That is obviously a bold word. You could change the funds. You could change the color. You could change the sizing. This one here is going to pay as you see a paragraph in tax which is what you'd expect all these things we've done before. So these could all be changed. They could be deleted. They could be moved around. You could change anything you want on there. Come down to the one below again. You will guess what's happening here We click on the outside of it. We've got two columns, one image, and in this right and side, we've got heading. We've got a paragraph and text block. Then at the bottom, we've got a bottle. So there was oldest in there. So again you could change. Remove, amend do what to like to that There. The next section is our signature dishes. So we've got heading That's dropped in there on. Obviously, as you can see, that over lays this line. So that same thing has happened again on our signature dishes. It's been moved with this layout and positioning tool to just beat wherever we wanted to bay just in the right place there to make it look professional underneath. We've got another block that is paragraph in text. If we decided we didn't like this whole section and we wanted to remove it, for example, we just click there and it's just removed it on. Then signature dishes. We don't now want We could just remove that. This next section here is now a section about our menu. What we've got the very outside. He's a background section with an image. We then got inside that a section with heading. We've got another section here with a content box. Which is why we're what, This white background. We've got to know a section inside there with a paragraph in text. Andi under the button. So what you can see is the things we learned how to do at the top of this page, they just repeated down the page just to have it exactly how you wanted to and to look as you want it to. So we've got another paragraph in text there. We've got another button. We've got another heading. We've got a section here I would suggest with a couple of columns. One column here has got this photo. One has got these little bits of text in it on the same thing here at the bottom of the page, we've got a background section, which is this gray background. We've then got two columns. The column here on the column here. This one has got a map in it. I'll show you how to do those later. This one has got heading. It's got a butter and it's got a couple of small images. Andi, It's got the text with the phone number on. Then at the bottom of the page was simply got some text with the copyright company name on disclaimer. So I hope you can see that we've got a great looking page. But it's very, very simple to change all these sections to add in sections. So to add something new into their, we just choose the right section we want. So, for example, we decide we want to have a couple of columns. We just grab columns. We drag it into where we want it. So that blue line that comes across shows where it's going to g. O. So it's going to go there. We drop it. We then choose how many columns we want those appear with, then just from that, decide what we want to drag into their. We want to drag a butter we want to dragon image. So, for example, you could come to the side on drag an image into that color. So that column we choose an image we insert it on there straightaway in that columnist is very large. Image side meant she changed the image size. But in that column, I didn't quite drag where I wanted it to, but we could move that on, but it actually in the column that we removed that. So it's not looking too much of a mess. So I hope you can see how quick that is to change that. I want to now just remove this column section because that was just added in there. Let's just get rid of that. So come back to our site as it waas. But as you can say, very easy to add things in, change them so you can go ahead now and actually make your home page look just as you want it to. 19. Making A New Page Your Home Page: when you've created a new home page for your website, you obviously want to be able to go to the home page of your site. So W w w dot birthday marketing dot co dot UK In our case, Andi see the home page actually there on the site? But what happens if you go to the home page of your site? And it's not showing the new home page he created? Well, there's just a couple of settings you need to change to make that happen. So I'm going to show you how to do that in this video. So here I am on the dashboard. What I'm going to do is go to the list off our pages. So go to all pages, and here we see all of the pages that we have on our site. At the moment, yours will obviously look different to this. Depend on how many pages you have on your site to find out which pages currently being displayed as the home page on your site. We need to look down the less until we see the one that says front page. And that is how WordPress tells us that is the home page. It's not the word home because you could have effectively view made 10 pages or called home . Then they would all be down here is all listed as home. So it's whichever says front page next to it. Now let's assume that that's not the page. We want to be displayed as the home page of our site will say that we've just made this new one here called Sample Page. That's the page we want them to see first. So it's called Sample Page. We want that to be home, so let's have a look at how we do that. All we do is come to settings here and then come down the list to reading and click on there Now on your WordPress. It may be either of these top two bottles that are ticked at the moment, so it may be your latest post. It may be static page. We need to take static page. So tick this box here. And as you see this now has for your fruit page, it tells you which of your pages is displaying their as the home page. So at the moment it's a page called home, but If you remember, we wanted it to be a page called Sample Page. So if, for example, this is what you called your new home page or home page template or whatever you called it , you would choose that from the list, and then you would simply click save changes. And when you now go to the home page of your site, what you could do by coming up to the top here and then go to visit site that will actually show you that new home page, the new page you just created as your home page. 20. Creating A Page Template: in the last videos, we have created home page for our website. On in this video, we're going to use the overall look of our home page and created template from that that we can then use to create all of the other pages on our website. So as you'll see here, I am on the home page that we have created Andi. The first thing you need to do is make sure you've got the overall look of this home page as you want it because what we're going to do now, as I say, is save this page to then use as a template elsewhere on your website. So when you've got the site looking as you wanted to or the home page looking as you want it to, what we need to do is come down here on the left hand column next to the save button. First of all, save Let's do that and actually save the home page as it is. And the next to that we have page set up. So we want to just click on there and then what we're gonna do is come up here to where it says save landing page I'm going to click on there. This allows us to actually save the page that we've created as a template so that we can use it again. So what I'm gonna call it hits his template name. We can call it whatever we like. I recall it quite obviously. Home page template on. If you want to put tags in here, you could put something like home as a tag. We could add that in there. And then I'm going to save that template. So that has now effectively saved a version of this home page in the templates so that we can use it again at any time we want to. So for the time being, that's our home page finish with. So what we're going to do now is come down to the very bottom hand. You see these three ellipses which say more options will click on there, and then we're going to exit thrive architect that she closes architect, and I'm gonna click on the W at the top here, which brings us back into our dashboard for our WordPress website on. What we're going to do now is create a template for a page so first and foremost on the left hand side, we're going to mouse over pages and then click on Add New Now pages within WordPress can be used for a multitude of things. So, for example, you would on your website possibly want a page that describes all of your products and services. You might have a page that tells about your company. You might have a contact us page. You might have a terms and conditions page. So all of these pages we want to create a template that we can use. So when it is your contact US page, we will start with this template. You will then make whatever changes you want at the information that contact the photos and things like that on there. But we want a basis for those pages that we will use each time on within thrive architect. It makes it quite easy to do that once we've created our template. So the way we're going to do that? First of all, this is a page that we're just going to use to create the template. I'm just going to call it test page, so we just call it that on then let's click on the publish button so that it becomes alive Page on. Then we're going to click on edit with thrive architect. So that will bring us back into the thing that you're used to seeing. You've seen it before with this down the left hand side on. Then what we need to do now is load the template that we created for the home page. So we come down here to page set up and click on there. We then want to change landing page template, because at the moment we actually haven't got a template on here. So let's change landing page template on this time if you remember, before there was all of the default template sets down here. But this time we want to go to saved landing pages because that is where we have saved arrow. So we click on there that brings us into here. And as you see, the only template we have saved is the one that we created. And that is our home page template. So if we just click on there and then choose template, that then opens up what looks like because it is an absolute copy of our home page. But of course this now isn't our home page on. We're going to make changes to this to just use it as the basis off other pages for our website. The structure off a normal internal page on a website tends to bay header at the top of the page. You then have the title off the particular page that you're looking at. You then have a large content area where all of the content of that particular page will go . So if it was a restaurant, it could be the menu. It could be the about us page. Whatever the page information you need on then, at the very bottom of the page, there's usually a footer that would have links to all the pages would have a copyright. It might have contact is information like here. So what we need to do now is amend this page to make it the basics off our new pages, which we're going to be the template for our pages on a website. So the first thing we're going to do it just get rid of things that we definitely don't want. So what I'm gonna do here is get rid of this button because we're not gonna want to button on every page in this point. So I'm just a mouse over it and get rid now, here. You could if you wanted to have a left hand column and some images, but we can always have that later if we want to. So again, I'm going to get rid on the Same with this one here on. Then we've got a section here. That is the menu. I don't want that either. I'm coming down and getting rid of those testimonials. So all I've got there is this block here, which is some text on them actually going to get rid of that as well. That's it. So we've now got the potential for a template for our page. So I hope you can see what I'm doing here. We've got a header. So it's got logo on our phone number. Obviously, this could be different for any website. You don't have to have these things. You can change this to exactly what you want for your website. But I'm just trying to show you how this all fits together within thrive architect. And it makes it very, very easy for you to change, amend and do exactly what you want to. But my idea for this template I'm creating here is to get rid of all the bits I definitely don't want on. What I'm looking for is to have at the bottom. I'm gonna keep the contact us area, Keep this section here at the very top. We're going to have these sections that I've got. I'm going to use this, which was obviously the intro to the main website as the wording that will describe each particular page. So this would, for example, say our menu or contact us. Or it would say about also, whatever the section is that you want would go in this wording here, we're then going to add a section in the middle which will be the actual content off the website or the content of this page. So the specific information that would go on this particular page but because we're creating a template, all antidote is put a box in the middle, which is where this content would go because once we've created this template, we're going to obviously save this in our template section, so that Whenever we create a new page on the website, we can just open up this template. It gives us a great starting point and we can add whatever information we want for that particular page. So let's now add a middle section, which is where our content will go. So let's just come back here to our little elements that saying have not saved my work. So let me just do that now. And so we want to put this middle section. We've got several different options. If, for example, in your middle section you want to just have one amount of information, what we could do is grab paragraph and text drug that over here to where we want it. So it's gonna be in between these elements here and let go, and that gives us this section here. The other option, we would have let me come back again is if you wanted to have columns. We could drag a column section over here because then, for example, you could, as you've seen before, have half and half or thirds or whatever It may be a So if, for example, you knew you wanted to add something that's drug well in there where we have our main information here. So this could be all your text, but you want to have an image on the right inside. You could drag that in there. So you've always got these options. What I'm going to do for now is will keep it simple and keep it as this text section here. But as you say, you've got the freedom to set up the page. Exactly how you want to on this is just a Templar, as we say, we get the overall templates so that we can build our pages from there. But when you build a specific page, if you want to change it within that, you can just open the template on. Then if you wanted to add columns or delete columns or do whatever you wanted to in that page, you can still do that on a page by page basis. So let's have a look at this text section, make it a little bit more usable on, make it look a little bit better. So let's just click on it on. This activates the left hand side here for this, so let's have a look at the things we can change if you wanted to change the text color the fun. Kali can do that here. If you wanted to change the actual font itself, you can change the front. He wanted to change the size of the fund because the text size in your actual pages, you may not want it. Set it 18 at the moment. You may want that to be larger or smaller, so you can change that. They're very easily. Let's have a look at some of the other things we might want to change. Let's come down here. Maximum width. Now, at the moment, this is set so that it will cover 100% of the width of your page. Now we want this to be a text box that looks better. So we won't want it to go right to the side of the page side to the page. So what you do is bring that in a little bit that it's not taking up so much space on then . We also want to do the alignment, as you see at the moment, is here on the left hand side and comes to here. But we could click this middle button. So it it then, is in the middle of the page. So what it means is your text will always start part way in from the side of the page, and it will finish before it gets to the side of the page. So let's just do a little bit of demo text in here. So you see how that will actually fit on those pages there on what she come down without getting to the side of the page so you can move that in. As you see, that could go in and out as much as you want so normally to make it look good, just bring it in on amount so it won't get right to the edges off the page. Another thing that would look good is to actually move this block attack. So it it comes over this photo over the image at the top there a little bit because it just makes it look as though the whole thing fits together nicely on if you remember from before moving these around can be done with this layout and position tub here, So click on paragraph in text box there to activate it on then if we come here to the margin bet Weaken Grew up this and as you see, this will move it around so we can move it. So it it comes up to cover part of the text here and it actually comes over the photo, which is what we want now that has cause it's a slight problem there because you now can't see the text. So what I'm gonna do is change the background color of this text box. So to do that, we look here for background style. So this is the background of the text box that we have got activated. Ondas, you see, you can change the color. So we click on here. I may be changed this to White, so I've just dragged. You took their to choose that color. We can apply that on. That makes it white. But we still can't see it because the image is seen but the front there. So to get this to appear on top of the image, which is what we need to see so we can actually see all of our text. There's two things we need to do. The 1st 1 is come down here and click on where it says Position this again is in the layout and position section on. The first thing we want to look at is where it says position. It's probably auto that is selected. Let's choose relative. And as you see what happens, there is this appears so you can actually now see it. The other thing we need to change is this figure here, though the number that comes next to Zed Index now the Xev Index when you've got several elements on a page. So, for example, here we've got a photo, which is this background image or background section as it is in this template. And we've got our paragraph text section, whichever has the highest zed index number will be the one that shows on the top. Now let me just click and go to the background image here, the background section. Let's come down to that same point layout in position. Zed index Sago. That's gotta setting next number off. Three. So what we need to do if I come back to this text section if we want the text will appear on the top, which obviously we do. We need that Zenden next figure to be higher than three. So if we just moved that to four, then that will appear on top of the image, which is what we wanted to do, and then I could just save that position. Let's have a look now at how we can further improve the look of this actual section. The paragraph in text section we've got in the middle, so we'll make sure we clicked on it. So this is highlighted on what I wouldn't do now is come down here to borders and corners because, as you see, we've got a corner here that comes over this image and if that was rounded, that would probably look a little bit better. So what I'm gonna do is come down to the corners. Here, you see, those are the corners. You can either choose individual corners off you click in the middle that will adjust all of the corners at the same time. And if I actually click and drag that you see on the image, the corners have changed a little bit there. So you can get that to look how you want it on. Then that just sets those corners. The other thing. You'll notice now that some of the text comes very close to that corner that we've just rounded off there. So the way we can change that is coming back up here to the layout and position on these boxes and settings here on what we want to do this time. You remember the outside one When we dragged that that move, the overall box opened down because that is the margin around the box. The internal ones, though these are the padding inside the box that we've just created. So if this left one here that has got to number one next to it, If I drug that, you'll see that that moves the text along. So the padding here inside is greater so that it fits a little bit nicer inside our box. We could do that there. We can do the same thing with the top of it. So that text comes a little bit lower, and then we can do the same for the right and side, although you won't actually see it at the moment. But that would do the same if the text came here to the right inside Let's just do the bottom of that as well, so that that means the text fits much nicer in there. So that is a box. So we can put the content of our page in that box. Let's look now at this header. So this would be where we put for example, that's changes so we could make this on the about us page. So let me get rid of everything else on there. So we just got a header that gives the description of this particular page so you would changes each time you do a new page because you obviously want the name of that page there . We may decide that we want this section moving up slightly so that it fits a little bit closer under some of the others. So again, what we could do is click on that head of section come down to you must be getting used to this Now how we actually move the layout of these a move. That's what it comes up a little bit in the page on. You see, everything else is moving up at the same time, so it just means this will look a little bit more spaced out or better space when we get to the full page. That's a look. Also, you may decide now this doesn't show up well enough over the image that is behind here. So we've now got several options, as we always have. As you can see, this theme or this plug in for architect is so easy to decide exactly how you want your site to look. And you can change it in in a 1,000,000 ways. Really? You can change as many things as you want just to get your site to look perfect for you and for your business. So let's have a look at a couple of the options. We could have to make this header look better. So one would be that you, of course, could highlight the text. Andi, change the text color to something that would look better. That's always an option. If you wanted to. Another option that we just cancel. That would be to have the section behind here highlighted with a particular color. So to do that, let me come back again. Start again of again, clicked on our box to highlight it. Then you've got font highlights. We click on here and choose a color and you'll see how that changes everything behind there . So what you could do is choose a color so he could go for white a game. But remember the function of change in the opacity? Oh, Pacenti. However you say the word on the right inside so you could change that there so that you still see the image through it. But you can read our wording better, so that, for example, looks far better. If we apply that. The other option we would have then is that box is virtually the full width of the page, but we could come down to the max. Width. Change is that it takes a lot less space. Come down to alignment, choose center for the alignment there on. If you wanted to, you could also add some corners onto that box, so that just fits in there. So there is an option for how that could look. Let's have a look. One other thing in him as well that we could do. This is something we've not looked at yet. I've clicked again on our box at the top here could be right down to the bottom, and it talks about animation on action. If we click on add new, they were then a number of animations here. I'm just going to choose one, which is Zoom in Now when I click this, watch the about us on the right inside and so actually zooms Onda Piers. So let me just apply that and save the pages second and then let me drag in a live version of the site. Here we g o Let me just refresh this page on Watch what happens with this here. So, as you see when the page loads, this actually appears as an animation, which I think you'll agree looks rather good on rather professional. Now that can be done on any element at all. On your page or you need to do is click on the element, come down to animation in action, click on add new, and then choose one of the actions there. So I've done that just with the header, and that will happen then because this is our template. When we create new pages with this template, that will always happen. So I think it's quite a professional way that when a page opens. That will happen. But you can obviously include that or not include that. It's entirely your choice. So there you can see. We've now got a basic template that we can use for any pages we had to our website. One other thing we may want to add in here as most websites will have a menu at the top or the bottom so that you can select from the menu. All of the pages on the website on the way we do that in Architect is by looking down the left hand side here until we get custom menu and all we do with our custom menu is drug it and drop it where we wanted on the page. So if we want, for example, a menu to always appear here, so just above the actual page name, we could just choose that on drag it in there on. Well, look at this later. How we actually activate this and how we select the menu. But all you would do is when you we've created a menu which will do in a later video. You would just select the one you want here, like main menu. Andi make it primary menu. Andi, there we owe on your menu will then appear on every page. So that's how you would actually drop that in there. I'm going to remove it from our temperatures were doing it at the moment, but you can see there how you do that if you want to, so you can see that's quite a nisi way of creating a template for the page that you're going to use time after time when you add new pages to your website. Once you've created this template is therefore, you can always change it later if you want to, and you can change every individual page if you wanted to. But that is how we would go about it so we would actually save our page there. But the other thing we need to do is click on Page set up here. Then we want to save landing page on this time with Saving Issa's a template, but our template name this time is page template. I don't know if you really need tax, but we'll just call it a page on. Then we save that template there. In the next video, we'll have a look at how we can then use this template to create all of the other pages for our website 21. Creating a Page Menu: In the last video, I briefly mentioned how to add a menu to your pages or to your home page in your website. But I'm going to go into that in more detail here because most people will want to have some sort of menu on their pages on DSO. It makes sense to do it now while you creating your page templates, because then it were there. Each time you create a new page, so to create our menu. Firstly, we need to come back to the dashboard off our WORDPRESS website. So here I am on the dashboard on, we need to come down the left hand side to appearance and then menus on what we do here on the right. Inside yours will probably be the same as this. There is already a menu created called Main Menu, but there is no structure. There is nothing added to this menu yet, so this is what we need to do. If there is a one called Main Menu, you can always click here and just create a new menu. As long as you know what it's called. That will be perfectly fine. So what we need to do here is first of all display location. We want this to be a top menu, so let's click on there also, when you create pages, feel website. If you want new pages to be automatically added to your menu, you can just click here. Normally, that will be fine. The only time it won't be is if you create a page. Say, for example, you're asking people to sign up for your newsletter. You might have a page that is a thank you page on. They only get sent there when they've signed up for your newsletter. Now, you obviously don't want that page to be in your menu system, for example. So if you click this box here or tick this box, Andi, you late to get pages that you don't want to be there. You can come back here on just remove them. But it's quite easy to do. For the time being, though, we need to now come to the left hand side here on decide which of the pages we've already got. We want to be added to our menu now. You obviously wouldn't be adding test pages or sample pages, but just for the sake of our demonstration here, and we want to actually click awful of these. So you just click the ones that you want and then click here where it says add to menu. They will then appear here on the right hand side. Now the things you can do here are firstly, you can drag these to move them around. So which every is at the top will be on the left hand side of your menu when it appears on your site, and obviously the bottom one will be on the right, so what you can do is, for example, normally most menus on websites will have the home button on the left hand side, so let's drag that up to the top. If you wanted to change any of the others around, you can just drag them like this. You'll also see here that you have an option to have them as nested menus. So as an example, when would we want to do this? If, for example, test to was a page on your website called Our products and sample paid was maybe our blue products and test page was our red products. What you could do it Just moving this slightly to the right means that it now is nested underneath this one. So in your menu, you would only see test to. But when you mouse over, test to you, Dennis, see the other options appear, what I'll actually do. I leave one of those nested so that when he appears on the page, you'll be able to see exactly what we need to do. Onda How it appears. So when you've got that structure, how you want it, all you do is click on save menu, and that will now save that structure for our main menu. I'm going to go back now to our template that we were setting up. This is our page template on If you remember, I showed you that down the left hand side. One of the elements we have here is called custom menu, and so you could direct that and place it wherever you want to on your site. Now, most websites would have a menu at either the top off the site or the very bottom of the site, or a lot of sites would have both of those. So what? At the top on the bottom on. You can either drag this to both places on Drop it there. You could just drag it to one place like here, for example, I've dropped it at the bottom you could create is how you wanted to on. Then you could copy it on drag one of those to the top or if you wanted to. You could have the look of both. Men use completely different, so you could set this one up. A. How you want it on. Then have another one at the top and make that look different. Different colors or different sizes or anything like that. Anything you want to do. So let's have a look here. What we've done, so you'll see there that this is showing our custom menu on what you will need to do if it's not already selected, is on the left hand side here, says Custom. Many options select menu, and if there are several men used, their you'll need to choose the one that we've just created. If you remember, it was called Main menu on. There we are. You could also display this horizontally or vertically. Most websites do tend to have this horizontal menu as it's a across the bottom, off across the top. So now we have the menu at the bottom off the page, let me, firstly, just save the page where it is, and then bring in the live version off the site because I want to show you what I was talking about with the nested menus. As you see, we've got the three options that we chose there. But then, if we mouse over test too, you then get the one that we have nested will appear underneath there. So does it say this could be our products on this? Could be our blue products are red products or whatever you wanted to have down there, so that just shows how that could appear on your page. If that's what you decide to do with your menus, you. Alternatively, if you've not got money pages, you may just want to have them all, actually in your menu across the page there. So let's come back here on. Let's look at the options we've got on the left hand side of what we can do here to make this menu unique and make it look just how you want it to Let's come down here. So the first thing we can do is obviously change the text colors if we want to. So changing this here they get that will change the colors. So you could, for example, want to change it to this orange Here, in fact, let me just show you a way of finding that exact color, which you could say, OK, I wanted to be orange, and so you move it around and try and guess at an orange color. But here's a way you can actually do that within the website and find the exact color itself. What I wonder is click on this wording here on what that then does is obviously enables the options for this box on the left hand side, and you see there is the orange color. If we just click on that at the bottom here, it gives this code, which is hash ever 7700 If you copy that, that is the code for this particular color, so we can do that there, then come back to a menu, then click on main Color, and then in the similar box here, we can just paste that color. So we have now got If we apply that we've now got exactly the same orange as we have here. Now that may be the color you want. It may not, but you can see there that that is a way you can actually change that when it talks about child color. This is when we had our nested one that appears under test too. That will be the color for any of those. So you may want it to be a similar orange color. You may want it to be a different color. Here it is. It is a black color on. We'll leave that. Let's have a look at some of the other options you may want to do here. You've also got hover colors. So let me bring the live site back in here. This is for when your mouse hovers over, you see how it changes color there. You can change that color to anything you want it to. Those are you have a colors there. You then got as you'd expect the font size. He could change that if you wanted to. There also text alignment so we could text align to the center which have done there. So my menu is now appearing in the center of the page on normally that's probably quite a good idea, Will. It will look better to do it like that as before. He could transform the text to all capitals if you wanted First letter capitalized or he just leave it for how you actually set itself. You can change the font to a completely different font here. If you want to have a look at some of the others, I think most of these you probably wouldn't want to move the you know about moving the layout of the positioning so that you could always drag and move that around if you wanted to. Then there is the max width on the page. So you may decide you want is to take up less or more of the page just by dragging their and also then putting the whole box in the middle of the page. You could also have a background for this whole area if you wanted it to, so you could click on there and have, for example, a background for the whole menu. If you wanted that, you just apply. But I don't want to do that. So I'm just going to cancel. I'm just gonna have it on the actual white background off the site itself on. Similarly, as you've seen before, if you wanted to have a border on your menu, you could do that just by let go. Changing that border all you could have. If you are having a border, you can have your rounded corners on it again. All those options are there if you wanted to use them. So once you've got your menu or completed on set up as you want it to, then you can save that as part of your template, as we did in the last video on. As I said, if you wanted to have the same menu at the top on the bottom, what you could do is just click here for the duplicate, bought it, and then you can actually take one of these on just drag it up to the top of the page so you'd actually then have the same one in two different places. But I'll just remove that from there. One of the thing that is worth just mentioning is that back it, they just click on there to select it again. On the top, there is the button that says Edit menu, and if you click on there, it will actually straight away. Take you into the correct place for your menu structure, etcetera. So you could adul remove pages to this if you wanted to. There we go. That is how you create the menu for your site and save it into your page template and others say you could add one of these in to your home page is Well, if you wanted to. You want to just spend some time playing around with this really in looking at whether for your site, it's best to have a background here. What's the best wit for your site? The size of the text, the colors of the text, etcetera. You can even add things like shadow onto these if you want to. For example, he other is. You could add text shadow. So you see there. Look, it's added a little bit of shadow just onto that wording. So those things like that you can do to make it just how you want it 22. Creating Your Website Pages: in this video, we're going to have a look at how you will create any new pages for your website by using the page template that we created in the last couple of videos. So as an example, let's assume that you want to create an about US page for your website, but this procedure will be exactly the same for any pages that you want to create from your site. You just do this same procedure multiple times. So here we are, in the dashboard of our WordPress site on down the left hand menu. We just want to hover over pages and then add new. That brings us into here on in the top box. Here it says, Enter title. So this would be the title of this particular page. So for our example, I will put about us. This can obviously be changed later, but you do need to actually just put something in there on then initially click the publish button on then because we want to amend this page or update this page with Thrive architect . We need to click the edit with thrive architect button, and that opens up what the page looks like at the moment. But as you see, this is not how we want it to look because it's got our cactus again at the top, and that's not what we want. So what we need to do is come down here to this button that says Page set up. Then we go to change landing page template Andi, instead of as we saw when we first started building outside or building our templates. There are all the default templates here, which five architect has as a matter of course, but we want to come over to this second tab, which is saved landing pages. Andi, As you'll see these, are the templates that we have created and we have saved. There's the home page template and there's the page template Onda. We are now creating a page for our website, so we want to click on page template and then choose template as you see that now opens up the template that we created. So all you now need to do is just a menace to make it look exactly how you want it to look for your about us page. No, I've only got this called about us, but if you needed to change the title, you could change all that in there. You can obviously change all the text in here on. As you know, you can use all of the different options on the left hand side if you wanted to add images . If you want to different columns, you can change any of those things that you want to. Obviously all the text. You could change that to whatever you need on when you've got the page looking just as you want it to. You'll just hit the save button and save it, and then that page will now be live on your website on. That really is a well there is to creating all the different pages. You will simply repeat this step because we've created a great looking template in advance . We're just going to use that template each time and just put the different information for that particular page on. That means that all of our website will have a a great look. It will all look the same, so that all follows through that classic look follows through the whole of your website on it displays all of your information. If you've got menus on here. It makes it very easy for people to choose different pages and move to those. You could obviously have buttons on here that lead you to different pages. For example, like this. Contact us button here, and so you will just have a very professional looking website. So if you're following along this course and creating your own site at the same time, now is the time to go ahead and just create all of the pages you need on your site initially. So get all those on there, get the information on you've seen how you can addle the different functions on different images and columns and everything like that. You can just create your website to make it look exactly how you wanted to Andi. In a very short space of time, you will have an extremely professional looking website. 23. Responsive Options: in this video, we're going to have a look at how to make any adjustments that are necessary for the version of our website that people will see if they're viewing it on either a tablet or on a mobile phone. As I mentioned in an earlier video, Thrive Architect is a responsive theme. Responsive means that everything on the website will adjust to fit very nicely for a mobile phone. So on a non responsive website, the person looking at the site on their mobile phone will see a tiny version off the website and they'll have to enlarge it and scroll around the screen to be able to see anything. And obviously that is not ideal. What you want to see is a version that is size perfectly to your mobile phone or your tablet screen on Thrive. Architect does this for you automatically, but it also gives you the option to adjust things if you need to. And so what I've done here. I've opened up demo home page within thrive architect Andi. So here is the full page that you've seen before on to get to the responsive elements. What we do is we come down here to this second button in here, which says Responsive, You on. We click on there. That then gives you three options decks, top tablet and mobile. Now, obviously, at the moment we're looking at the desktop version, so let's look at the version for a mobile phones. What we do is click on there on. As you see, the screen changes to the size of a mobile phone. And as you can see, all the elements of our site have now moved around and have resized to fit the screen. So if you remember on our desktop, the restaurant logo was on the left on the phone number on the right. But of course, that wouldn't fit now or then be tiny. So what's happened is one has moved under the other, and then the headline is under that. And then our bit of text is under that and said, The whole site is down here. So it is resized perfectly so people can read it or on their mobile phone. Let's just have a quick look at the tablet version. Andi, there is the tablet version. I don't think much is needed to move on our site for the tablet version, but again, that will show you what it looks like. If you were looking on an iPad or the tablet, let's come back now to the mobile phone view on. I want to show you the things that you can do in this particular view. If you wanted to. With many websites, you'll look down this responsive you on. Everything will be perfect and you won't need to do anything to it at all. But what may happen is like here. For example, we've got a button. This is our maker reservation button on. As you can see on this view, it is too wide. It is coming off the side of the mobile phone, and that doesn't look perfect in most themes, even responsive themes. You wouldn't have the chance to do anything about that because you've decided on the size of this button in your overall site design. But in architect, we can what we can do here because we've switched to the responsive mobile phone version. If we make any changes to say this button here while swim mobile view, it will only change the mobile view. So if I, for example, click on a button. This is obviously too wide for us here, but what I can do is come over here to bottom width and then just nudge that one noted too far. But let me move it. So how about that, for example, now that on the mobile phone now looks on ideal size, it's a lot smaller and will fit the mobile. But if I switch back here in Responsive you to desktop, the desktop version of the button hasn't changed. It's only the mobile phone version, so let's come back to that again. So the mobile version is now smaller. So if I save the site that has saved the bottom of that size now, this is something that I think he's so clever. I've not seen this on a theme before, so that means now if anybody is viewing your site on a mobile phone, they see this size of a button, which fits perfectly on their mobile phone screen. If they're viewing it on a tablet or the viewing it on the desktop, then they see the other size off the button so you can just on each page you create, you can just have a quick look at the mobile phone version on. Just decide if there's anything there that you want to change it all. If everything is fine, you see that? But in the bottom there is size great. And then even things like the map, for example, I think that that is actually size nicely. But if you wanted to change that again, you could change the size of it. So that is how these responsive sections work here. That's just a responsive you. You could go into each of those change the sizing of things if you wanted to, just to make them fit on. Then, of course, come back to your desktop version cause that's the one that you will make. Most of your changes in the other responsive option that we have is to completely remove certain elements from particular views off the website. So, for example, we could remove this box here with the text from the mobile view of the website. Now, I don't know whether you'll really want to do this is not something I've ever used, but I'm gonna show you how to do it, just in case you wanted to. So if, for example, we clicked on this content box here. This is, in our normal view, off the website. And of course, we've selected the content box. This all now appears on the left hand side. If you come down to the bottom, you get to the responsive section on what this does is it makes a particular element either visible or invisible on a particular device. So at the moment, this is viewable on the desktop and tablet on mobile. But if, for example, we turned one invisible or hidden, it would then disappear from a particular option now, because for this video, I've had to resize my screen, I think thinks that we're a tablet. So if I click here to be hidden, as you see, that box disappears entirely from this view. But on a mobile phone, it would still be visible on the desktop. It will be visible now. Normally, you would always want these things to be visible on a desktop. But if, for example, you had a box here or on a mobile phone, you decided you didn't want this button to be seen at all. You could simply click on it, just like I've done here. Click on the element on say, Hey, don't. And so when anybody views your website on a mobile phone, this element or this button, if it was that example just wouldn't be seen at all. Now, I'm not quite sure when you would use that, but I wanted to show you it just because it is an option there. So if ever you wanted to use it, that is how you use it. 24. Individual Blocks Intro: for many people, the videos that you've watched up until this point in the course will be all you'll need to create your own website. But in this section, I'm going to go through all of the different options that you have on all of the different building blocks that you can use to add to your website if and when you want to. Now there were lots of different functions. As you can see, there are 30 odd different functions here that you can add on. As you know, they're very easy to add deal site. If, for example, here is our page, I have purposely stripped most things from the page that we just got the head of here at the top on If, for example, you wanted to add this countdown to your page, all you do is click on it from the left, drug it across. Wait until the blue line appears on. Obviously, this could be anywhere in your page, but I'm just going to drop it here and you just let go on. There it is, that appears, and then you've got all your options down the left hand side. So this is a countdown timer. So what I'm going to do in this section is go through all of these options. I will, first of all in each video, show you exactly what the item is, so you can see whether it's something you'll want to actually watch and want to include in your website. Andi. Then I will go on to show you how you add it to your page on the options that you have available in that I have to say you may not want to use this section, it'll for your site. But if there's a particular block that you want to use within your sight, this section will show you exactly how to use it on what it can do for you. 25. Paragraph Text Block: in this video, we're going to look at the paragraph on text block that you will actually see here. Which, of course, allows you to add text to any page on your website. So the blood we're looking for is at the very top of the page, paragraph and text. Here we drop it wherever we want it on our site. Andi, you've seen me use this before. In previous videos, you can simply add any information you want in there. If you click on it, you get options that open up for bold in Dent. Underline, etcetera, etcetera, formatting. And things like that will appear there and then down the left hand side. I'm just going to look at these very quickly because you've seen me do all of these before . So you got front color, font size line, height, text transform, moving the actual block around the width of the bloc, which you may want to change your thirties. Not so close to the edge there on the various backgrounds, styles and borders and corners. So you've seen me do all of those things before. You've seen me use this before. I think you'll know what to do. but I just thought of included here anyway, just as an extra reminder of what you can do with this particular block. 26. Heading Block: in this video, we're going to have a look at the heading option which, as you'll see here, allows you to add headings to your website. So large font that is here on, For example, this was heading that we have for our menu. So the block for this one is here at the top, and as usual, we would just drag it to where we want it on our site on just let go. We've got pretty much the same options of we have for paragraph and text. Really, Apart from obviously the fonts of a lot larger on these will be in HTML. These will be your H one h two headings, for example, if you know what that is so well you need to do for these is you click on the box. You've got usual Bolden Dent options here on then, down the left hand side, you've got your usual font color layout, maximum width options options to move the alignment on all of the other options that you are used to seeing on again. I went on a time on this because you've seen all this in the previous videos. So it's not a new one I need to show. But that is how you use on drag into your website. The heading option 27. Images: in this video, we're going to have a look at the image option, which obviously allows us to drag an image into our website. So this option the block is here. Onda. We just drag an image to where we want it. We release on it, then comes up with a block here. To add an image, we simply click on insert image. Sometimes this section will open automatically anyway on. Then you get an option to choose an image from your media library if you've already uploaded it to your website, although attentively upload a file. So if you want to upload a new image to your Web site from your computer, just click on upload files on you. Then select the image from your computer on it will upload to your website when it's one that's already uploaded. It will then appear in your media library, so all you do is choose the image that you want to add to your website. Click on it so it it has a little tick there in the corner and then insert into post. And as you see there, it appears on your website. You then get your usual options down the left. You can change the image for something else. You can drag and change the size of the image. You can look at the image style so you can change that by clicking here. So, for example, you could have a frame around the image. You could have a different type of frame around the image. The image could be in a circle. There's lots of different things that doesn't look like a circle. But you could just drag and change the size of that sort. It's it's circular. So there's a lot of options is also one that has a caption overlay, which is quite a clever option, so you can have a caption that actually appears over the top off the image. We also get the option to add an image link. So this would be if anybody on your website clicked on the image that would take them to this particular link. So all you do is put the full link in there, So if you wanted them to go to google dot co dot UK, for example, you'd put that in there. It could be a different page on your website or any particular link that you want to send them to. You've got the option to open in a new tab. I would normally, if you send them off your website, you would want to click that so that it will then keep your website open when they click on the image. But this would open in a new tab to take them to whatever link you put here. Then we've got image effects on this would increase the gray scale. So you see there that's taking the color out of the image. It could make it more opaque. So you see the background if there was a background behind there or you could blur the image and then you've got usual options on layout on position set index. If you wanted to bring it to the front or to the back on a page you've seen used that before, Onda also use your borders, Andi corners. Andi, you've then got some other options on animation. Andi. Action for the particular image on most of the others you've seen before. There is also an option to add some shadowing around the images. Well, if you wanted to 28. Buttons: in this video, we're going to have a look at how to add a button toe our website. So this could be a button that links to another page on your website. Or it could be a button that links to another website. The button option is here. So as usual, we drag it into our site and drop it where we want it on. You can then click on here on change the wording directly in the button itself and you can with the wording in there you can make it bold, indented, underlined or strike through Andi as usual down the left hand side. We have all of our options. We can change the color of the font. We can have some highlighting on the front. We can change the actual funt itself. We can change the size of the fund. We can change the lines, all things that you've seen before. So those the options for the text itself if we then just click the button, that gives you the specific Botton options around the text on as usual here we get lots of different options. We can look at the overall style off the text so click on the change button. There are, as you see, a number of different options around in Button is one you use quite a lot. You can have a Grady int in there. You can have it elevated so it looks like it stands off the paid. So lots of different options you can choose the one that you want. I'll go for this rounded option at the moment on. Then I will click. Apply to keep that. If you want this to link to another website or to somewhere in your own sight, you put in the actual link here. You can choose to open this in a new tab, so when somebody clicks the button, it opens a new tab in their browser or it stays on the same tap. That choice is yours. You can change the color of the bottom to anything you want to. You've seen me do that before, so that's changing that and then just apply. You could change the width of the button on the page. You can make it the full width of the page if you want to, just by clicking there. Then there's other options on the actual font size within the button, the alignment of the text within their the style of the text. If you want it bold, you could transform the text. You've seen me do that before on other options there layout in position that you've seen me do before on the actual style of the button. If you wanted to have a background on it. Onda animation. Andi actions so you can make the button exactly how you want it. 29. Columns: in this video, we're going to have a look at columns to see how we can add those to our site, which will obviously give us a number of columns to put our information on on our pages. To add columns, we find it here on the left hand side on drag it to where we want it on our site and let go . We then get a choice off the type of columns that we want. So if you want to have two columns half and half on your site, you could have 1/3 and 2/3 2 3rd in the third three columns here, various options on an option for four columns. So if, for example, we wanted to have ah, large block of text down this side on an image on the right, we might decide to go for the 2/3 1 3rd option on all. You do his mouse over the one you want and then left Click on it. That will then bring this option here on what you would then do with these columns is dragged into the columns what you want. So if, for example, you wanted to add an image into this right and column you would come back here to our option for images, simply drag it over. Wait until the Blue line is in the middle of the column that you want and then let go. That then gives you a chance to imports any particular image that you want by the method you'll have seen before. And there it is in the column that we have just created, and you could obviously do the same with the left hand column with a text box. Or you could have ahead of box in there or anything else that you wanted. So let's just have a look when we click on columns. We've obviously got our column options down the side here, So go toe width, as you see, is the space around the edge of that minimum height of the column. You can change to make the column taller or shorter. If you decide that you actually like the smaller column on the left on the larger column on the right, you can click the reverse order button on that will swap them around. If you wanted to do that on, there were other options here on the vertical position. So do you want everything to actually be at the top off the column or the middle of the column or the bottom of the column? You can stretch the columns to fit the scream width. You can change font size that's in there. Align the text the usual sort of things that you used to seeing on the spacing of letters within their margins and padding and obviously moving the columns around. If you wanted to do that, which again you've seen before, maximum width. If you wanted the columns to just appear somewhere within the page instead of being to the edge. So it's all of those various styles borders, corners, things that you've seen before. But it's a very good way of using columns to get your content spaced out Exactly how you want on your page on. Of course, there's nothing to stop you layering these up. So if, for example, you wanted there with one large column in a smaller column, there's no reason why you couldn't have another column straight underneath that that is something completely different. So completely different layout there. So you build the next part of the page looking slightly different to the top pot, so columns a great way off getting your spacing on the layout of your pages sorted. 30. Background Sections: in this video, we're going to have a look at a background section on. It is best demonstrated here by this image in the background here that is a background section on its normally going to be either a block of color or an image, or even a video that is in the background of your site. And you'll then put other things such as wording, logos and the likes actually on top of it. So to add a background section as usual, we just drag it from here to where we want it and then just let go on. That appears with a fairly blank looking box here. But when that is actually clicked on selected, we then get our options on the left hand side. The 1st 1 is, as you see with this image we've got at the top here, it's covering the whole off the width of the screen. If you want that to happen with this one, you just simply click that there to say stretch to fit the screen with which, if you want an image in the background, is a great idea to do that. Then you get other options here on with Andi the minimum height of this section here, which you could change if you want to on the usual sort of options here, which I won't go through a gain. But one that I will discuss in particular is the background style, because this is the one where we decide what actually goes in the background. So, for example, if you wanted to have an image like this, one of the top you'd simply select image on, then choose an image from your computer. Andi, actually either upload it or had it in there. The other option you've got if I cancel, that is a color. So, as you see, it gives us a chance to have any cooler backgrounds that we want. So I might decide to go for I want to drag that down and go for something along those lines . So just applying that will just have a colored section in the background on as I mentioned before, you could then add things on top of this. So, for example, we could decide we want some text in the middle there, So you drug your box into the middle. There's our textbooks, so we could have whatever text. We wanted their Andi you would want to obviously fixed. That's 30. It sits in the middle of that text box that we could do that. We could do that. We may decide to change the size of the fund for what we want here. And then, of course, what we could also do is move either the box to get it to the right size we want or move it like that so that the text actually comes to the place that we want it over this background section. So that was moving the text around on our background section. Let me just click to actually highlight the background section again on coming down to where we were, even if she seen the positioning options, their background style options you've seen you can obviously have borders and corners if you wanted to, so you could have a board of on this section. If you wanted to do that, you could also have rounded corners if you wanted to see you see them changing their So all those options are available to you if you want to use them. So that is how to create a background section for your site. 31. Content Boxes: in this video, we're going to have a look at the content box. This is a box that we can drag into our website on. Then we can add other content inside that box. So, as usual, let's have a look at how we actually had one of those to our website on. It's here on the left hand column. We simply drag it in. Andi, let it go now. This is very similar to when you added columns effectively. If you added a three column block from the columns section that would give you three content boxes next to each other, we've now got ourselves one content box, but it's worth noting that these can be added next to each other or underneath each of the later. If you wanted to stack them or you suddenly decided you wanted to add an image of the side or something like that. So to stack them, you would simply just drag another one. Put it the way you want it, let it go. We've now suddenly got to content boxes next to each other. That may just get rid off that want to bring us back to the single one that we've got there . So to add things into this, you would simply just drag to the middle and let go. And we've there got some text inside that content box. Now, the benefit to doing this within one content box is that we can keep all of that content together. So if, for example, we want to also put ahead of their we've now in this one content box, got a header on. We've got some normal text, the benefits of having a content box with some content inside there. So, like our example here is that if we actually make any changes to the content box, it will actually control all of the items within that box. So let me just click content box. So it brings us back to that level. So we're now making changes to the content box as a whole. So if for example, you know that when we move these things around using this option, it would move all of that content together. If we just drag this header or this text onto the page itself, you'd have to move all the things around independently. So it's obviously easier when we conduce something with all of those items at the same time . Another thing that's really useful in a content box is you can actually add a background color to the entire box so all of the text would bay actually over that particular color. So that's bringing one that would work that you can still see. But what actually makes sense? So there, for example, you can have a box with all of your text in all your things in that you've then got your usual options. For example, you could have rounded corners on there if you wanted to. There were the actions that you can have. For example, you could have this text moving or any of the actions you wanted to add into their Another option. That's quite an interesting one that could be used in some occasions is for your content box. We have decorations here. So if, for example, we chose the right hand side of this so you choose the different side of this box that you want to add a decoration too, and we could have a slanted edge so that, for example, gives you that Look to that there. If we also did that to the left hand side. We could actually add that slanted aging there. So as an example, if we then came down to the layout and positioning on where she just moved that across, that would just give you a different look to that section. So if you wanted to just highlight something, there is just one way of doing it so well we've done is we've actually added that particular effect of the slanted edge on their some other effects as well. There is a point of effect. Let me just see if I can use the point. Cannot make that There we go. So that just gives you like an arrow type effect there that could even be reversed. Have a completely different look. So you could, for example, if you wanted to highlight an image on the right inside. If we did a pointer on both sides, that's make that point there. So it looks a bit like an arrow now pointing that way. So those are the options we've got for shaping the outside of the box on, giving it a specific look on the background color, all the options we could have, for example, as you see, there were lots of options down here that you can have a play with just to get your content box. Exactly how you want another option would be adding on image in the background of our content box. So, as an example, if I came down here to background style came to this second option here in clicked image, I can then choose an image. Let's come down and choose something like this one. Insert that into the post on as you see that is now in the background off there. Let's see what else we can do to make this look a little bit better. So let's remove that. Let's remove the decorations as well now, because that's we don't need those. That was from the right on the left. If you remember where we had the pointers, let's remove those. If we then now make the content box the maximum width of the page, we could an increase the height of it. So you see, this obviously won't fit underneath this header for our website here. It doesn't go, but this is just giving you an idea what you can do here and then, for example, you may decide that the heading is now the wrong color. So we may want to highlight that and make it a different color. So your fund color might want to be a lot lighter. So even let's go for a white color there, coming off the head and out. I've changed that toe white, which stands out quite nicely on the same with the text that we've got in there. You might want that to be a Let's move it to a some sort of a gray color there on. Can we come off there so you can obviously see that the text there is going to be in the wrong place for this image. We could then come down and change that toe where we wanted on there. So you see how that now, in this content boxes looking quite impressive so you could have that anywhere on your site . You could have more of your text coming down here if you wanted to. You could use that. Anyway, you wanted to highlight something, emphasize something on your page. So it just shows a couple of the uses off content boxes for on your side 32. Content Templates: in this video, we're going to have a look at content templates, which are a very clever way of saving parts of the design off our pages. So, as an example, at the top of this page here, we've got to let me click on it to activate it. A background section on this background section, which is the image has then within it this header, this image, this logo here this image on this phone number now that YSL one section on the website that is on top of this background section. So if for example, you thought that elsewhere on your website off elsewhere on a web page, you might want this entire design, What you can do is save this particular part as a template. So all you would do is have it selected so that everything that you want is within that area. Come down to the bottom here on the left. If we then give that a template name so we could call it restaurant head one, and we then save it as a template. It says at the top, template saved. So if I now come back Teoh blocks if I now anywhere on a page drag content template when we have that there, it then says select content template so you could look through here and choose the one that you want. And we called it restaurant head one. If I click that, then as you see, it's recreated. Everything that we saved is that template Now, you obviously wouldn't want it underneath the existing version. But if this was on a blank page somewhere and we wanted to add this, then that is how you do it, Andi, With content templates, you can save anything that you want to as a template to them be used elsewhere on your website. The only thing I would suggest is that when you do actually save one of these, you give it a good descriptive name because, as you see, when you add a new one, you then need to choose the correct template that you want to add on. If you've just saved, these is number one, number two. Number three, you won't have a clue what they are. So you do need to give it a useful name so that when you then want to add it to another page, you can drag the template across, select which one it is, and then add it straight into your page. But content templates are very useful way of being able to save and reuse parts, off pages and parts of your designs on other pages on your website. 33. Click To Tweet: in this video, we're going to look at the click to tweet Block, which enables you to have a click to tweet button on your website. To add this block, we look down the building blocks section for the click to tweet button and as usual, drop it where we want it. Now this, of course, could be inserted within a column on your site. It could be inserted within a content box here. I've got the full width. You probably wouldn't want it to be quite. So why does that? But anyway, we will use it like that. For example, on dso, the options we have here are down the left hand side. Firstly, you can change the actual click button. Now, of course, what will happen here is you are putting in some sort of a quote or a phrase on when uses on your site. See this? If they wanted to tweet it from their own Twitter account, they can just simply press the click to tweet button on, and it will open in their own Twitter accounts that they can then just tweet it. Now I have to say this is not something I use very much on my own sites, but I have seen other websites where they've actually got useful quotes there. Andi, I guess people must press the button and tweaked it. So anyway, if you want to use this, this is how you do it. So, first of all, the label text for this click to tweet button. If you wanted to change that button, you could put your own text in there. And as you see, that updates down here. So if you wanted to say instead of click to Tweet, you wanted to change that. To tweet now or something that you could do to make click to tweet is perfectly sensible. It says exactly what it's going to do. Our next box is the actual text that will be tweeted, so that would be, as it says, a quote or a phrase. So if, for example, I wanted to post that architect is the perfect way to build your website, so there it appears in there. You've then got an option off a custom share U of l. So if at the end of this, if you were wanting to say architectures a perfect way to build your website for more details. Visit so and so you could do that. Andi Toe have the actual website address that will be included in there. All you do is click that button and then paste the website address in there and finally in the via box. You would normally want to include your own Twitter name because that again will be added to the tweet. So if you want to just preview this, we just click on here and it will open up a new box. So this is actually opened up within Twitter, and it shows you hear exactly what will be tweeted. So this would be tweeted from whoever's Twitter account that has clicked the button on your website on it has the phrase that you put in there. It has the Web address. If you put one on DIT has your Twitter name there as well, so they would just press the tweet button and that would actually be sent. So going back, this here, that really is probably all you would need. But if you did want to change the font size, the colors, the alignment, all the usual things than those options are there. But that's it. That's a simple way to build a click to Tweet Foot and for your website 34. Content Reveal Boxes: in this video, we're going to have a look at a very clever element that we can add to our pages, which is called content, reveal on to show you exactly what it does. I'm going to actually show you a live version of this page through a preview, so that opens up there. As you see, the page appears, but there's nothing on it here. Just give it a few seconds, and there we go. So it's a button that I have set up that appears after a set period of time. So this could be used for an image to appear after a certain length of time, maybe a video that appears after a certain length of time or, like have done here a buy now button that only appears after a certain length of time. So, for example, you may want somebody to be on your page on toe watch an information video or a sales video . First on. If you know that that video last 44 or five minutes, you can have the button toe appear after four or five minutes so they don't get to see that until a certain time period has elapsed. So to add this to our page, we come down to the content, reveal block on as usual, drop it where we want it in our page. That then just reveals this block here like this on. The first thing we need to do is actually put some sort of content within that block, because on its own, it won't do anything. So if, for example, that student in different you saw me use a button in there, let's this time put an image in there so you just drag whatever you want to be in there. And of course, this could be a lot of information. It could be a video plus an image, plus a heading, plus a paragraph in text. Whatever goes inside this content reveal Block will not appear until the time has actually elapsed. So let's choose this image. For example. Let's insert that into there on. Obviously, you could do things to change the images in which is you want to, but that's not what we're about. We're looking at the content reveal box, so the options for our content reveal. The first thing we need to look at is how long do we want it to bay until the content is revealed. So you can either drag this to change it. Um, in there, there's 153 minutes. I don't think you're gonna want to be waiting that long at all, But you can change it either by dragging that or just buy changing this if we change, that led to six seconds, so this won't reveal until they have been on the Web page for six seconds. The next option we've got is to also scroll to the content when revealed. Now, this is something you would want to use with caution. The times you would use it are if, for example, you've got the content revealed block right down a page. So say we got a lot of information here that went right down the page. Then we got our content. Reveal if you click this block here to, say, Auto scroll to content when revealed. Even if this person was here at the top of the page reading some information when it got to this time, it would then ping them down to the bottom of the page to the content reveal block. Now that's great. If that's what you want. But it may confuse the reader if they were appear looking at some other information and suddenly zap planned down to the bottom of the page. So you do need to be careful with that. Ah, next option is redirect to you are well on in here. If we'd actually got some sort of ah ul webpage in their google dot com as an example, what will happen after this timer is if you've got this on any page on your website and you're saying read I met to your L after they've been on your Web page for six seconds, it will take them to this Web page. So you've got to use that with care, because that will, of course, take them away from your page and take them into this website for this webpage that you've determined in this box here. So that's another area to use with care. But there may be some occasions when that would be useful to you and then other than that live are some of the usual options there at the bottom for layout, spacing and things like that. But of the differences from this compared to any other block. You've now seen them. You know how to put a content to reveal box on your website that will only reveal itself after a certain amount of time. 35. Countdown Timers: in this video, we're going to look at the countdown time a block on do the evergreen countdown timer block , which, as you would guess, allows us to put a countdown timer on our website. So let's begin with adding one of these to our site. Andi, as I mentioned, we've got two options and I'll go into what both of these are in this same video. One is a countdown timer on one is our countdown evergreen. So let's start with the countdown timer on. Just drop it in there on what we use this one for is this is when you've got a countdown toe, a specific event or a specific time. So, for example, if you are a restaurant and you are having a special event evening, you could have a countdown to that particular event. If you are selling a product on your website and you're having a launch for that particular product on, there is a countdown. Until that product is available again, you could have a countdown to that particular time. So let's have a look at the options we've got. This is the normal countdown. So first of all, you can choose to change the style of this countdown, you could click change here on there are a couple of different options. So this one obviously has the countdown in this format. We could have it in the circle format or we could have it in that type of more for a digital format. So let's change it to that one for now and then apply it. Now, obviously you'll be able to change the size and things on here in the cooler box. There, you can change the color to anything you want. So if you wanted that to be blue, you can change that to whatever you want. You could make it more or less opaque if it was on top of something else, and then just apply it. When you happy here, we now have a couple of choices. If you've got a specific end date on time, you want this to count down to? You can change this four. The date. So if I was choosing the 25th of October, that actually has the time there. You can honestly change it for the different hour of day if you want to, so that could be whatever our you want your countdown timer to go to. And as you see that, when changes here on the side. So I could bring this down to zero, for example. And so that shows you what sort of countdown time there is left. If you then want some text to show when this has actually got down to zero, you can add all the text in here on that Obviously won't show until the timer has actually got down to zero on. You could have called Save that. This here isn't counting down. This is not a live version. But if I actually just went to a preview there it is on the site. And as you see, that's actually clicking down second by a second to the actual time that you have specified that we come back again to here as usual, you've got all your normal options for layout and position, the width of it, size of it. You can change the look of that on everything else. All those things that you would expect. So that is the normal countdown timer. Let's move on now to the countdown evergreen. And with this one, the look is identical to the one we've just been looking at. But there is a difference. Let me Draghi to cross and will drop that one underneath on this time. The idea of an evergreen timer is this is more for a sales aid, if you like. So, for example, say on your website, you sell a product, and it's always to say a little bit for sale. Now it will be for sale in a week. It will be for sale in a year's time, but when anybody arrives on your site, you want them to think that the time is ticking down on the product will be disappearing. So if, for example, we were saying our product is available at $50 on, it's only available at this price for on amount of time. So it's only available at this price for, let's say, full hours so this countdown timer would start up four hours on would count down. However, what you could do is set it so that as soon as that gets down to zero, it will restart. So in other words, whenever somebody goes to your website, they were always see a time of less than four hours on the timer, But as soon as that timer gets down to zero, it will restart to gain at four hours. So you may decide this is something you don't want to have on your site because it looks a bit untrue on unfair to people. But it is something that is used on a lot of websites as a way of getting people to take action, because when they look at your page, they think there is only four hours or less left to buy your product. And so instead of thinking about it and maybe going back in a couple of days, they'll actually think are better bite now because there are only four hours left. So if you wanted to use that, it's the same options again as you had on the last time. Er, you can change the style to the one that you want. You can change the color to anything that you want. You can have the number of days, hours, minutes and seconds that he counts down, but then you've got the options here off starting again after a certain amount of time. If we unclip that, it will just start again as soon as it finishes. Alternatively, you can say that you only want the timer to start again. After a certain number of days off a certain number of hours on again, you would have the text to show when the timer counts down to zero. So there we have a couple of very useful options that we can add to our website for a countdown timer or an evergreen countdown timer. 36. Credit Cards: in this video, we're going to look at the credit card option so we can add relevant credit card symbols onto our website to add this option to our site. We look down for the box that says Credit card on it on as usual, drag it into a suitable position on the site. As you can see, this is appearing right on the left hand side of the site of the moment. You'd usually want to drag it into a content box, or the columns haven't displayed exactly where you want to. But what I'm gonna do is come down the options on the left hand side Onda click the alignment for the center so we can align it here so we can just see it a little bit easier . So let's come to the top and look at the different options we have. Your 1st 1 is for the style. You can change that, and then there are a number of different options that we have for the particular display that we have there so you can choose the one that you like, and then you can apply it. Also, if there are some of these cards that you don't accept on your site, then you can delete them. In fact, let me just change first of all the size here because we'll be able to see it for easy if I make that bigger. So as you can see, this option here is just the size of it. You normally probably wouldn't want it this large on your site, but for the sake of a seeing it, we will have it like that now. So going back to what I was saying, there are going to be the options for the actual individual cards. If, for example, you don't accept American Express, you can simply get rid of American Express Andi in the cards option. There you will see the different options that they have. So if you do, for example, except discover, you can click on that and apply it. And it adds that into there sighs we've already seen everything else is very much what you're already used to moving around the positioning backgrounds, etcetera, etcetera. But that is a very simple way to add credit card symbols onto your website. 37. Custom HTML: in this video, we're going to look at the custom html element. The custom HTML element is found by again scrolling down, finding the correct one, dragging it on, dropping it into your website. It will then open up this box here in this video. I'm not going to go into details of what HTML is or where you'll want to use it, because I would assume that if you actually don't know anything about HTML, you won't need to use it all with this website builder. If you do, use HTML, this is where you will actually paste in your HTML code. The only time otherwise you may want to use this is if there is a specific thing. You want to add a specific widget of a gadget that you want to add to your website on. Wherever you getting that from. Has said his some HTML code to paste into your site. Well, this is where you were. Paste it. You would literally paste it into this box here and click the save button on. Then it would actually appear on your site. But obviously, for the purposes of this course, it's not an html course, so we don't worry about that any further at the moment. 38. Dividers: in this video, we're going to look at adding a divider toe our Web pages here. You'll see. I have added a divider on a full is between two different blocks off paragraph text. So on one here, one here and then put a divider in between. So it's just a way to actually break up sections on your website on as you'll see in a second. This is quite easily changeable to look very different to how it does now. So do add a divider to our website. We scroll down, find the divider block on, drag it to where we want it on that site. Andi, here we are. It starts off as a solid black line. As you see here, you, those straight away in the options at the top can change that to a lot of different things . There there are about 12345 different options. So, for example, your divided could bay little tiny stars. Or it could be that sort of a dash line or a lighters, or to dash or dots or the solid line. So whichever you want, let's go for the stars for now will apply that you can then change the color of those. So that has changed those to red stars. For example. You can also change the size or the thickness of those. So just to depend on what you want to achieve on your page so that can be just moved around like that layout and position as you know, maximum width. As you know, we could change that just to go between, for example, two blocks of text and have a central on all of the other options you've seen before. But that is an easy way off, creating dividers between different sections on your site. So they have just changed that to a solid line, but you won't want that to be is thick for examples. You could change it down there to a witch off seven pixels, five pixels. Maybe so. There were a couple of different ways of adding dividers 39. Fill Counters: in this video, we're going to look at adding Phil counters to our website on. Here's an example of a fill counter. It is a circle and that will be filled toe a certain percentage. The one of selected here is 79% and I was just in the middle, said 79% success rate on automatically. This has filled 79% of the circle, so it's a great way of using it to just give a visual representation of percentage figures . So if you wanted to, for example, show that you've had a 93% pass rate for your call source and things like that, you could have 93% and that would actually filled to 93% on there. So let's have a look now at how toe add these to our website. All we do is come down the left hand side toe where we see Phil counter drug that to where we want it to appear on. Let go. That's on the left hand side of the page there. I'm just going to move it to the middle so that we can see it a little bit easier. So the options we have here first of all, the size of it. You can change that to fit whatever you want for your site or where it is on your site. And of course, you could have a few of these next to each other with different percentage figures if you wanted to, then we change the fill percentage. We can either drag that to a certain percentage or you can actually amend the figure at the top there. So if you wanted that to be 60% we could move that to there. That 60%. Now, what you will notice is the figure in the middle here on the wording won't change. So if you want that to say 60% in there as well, you do need to click on it and actually change the text. And that is because the text in the middle you might not want that to say the percentage there as well. You may that want that to be different wording. But once you've clicked on it, you have all your usual options there to change the figure like I've done just change that to a different percentage. But you could change that two different wording. If you wanted to open on the left, you can now change the color. You could change the font size etcetera on. Similarly, with where it says Phil counter underneath there, you may want to change that to something that makes sense for what you're saying. So 60% pass rate, for example, there. So that is now 60% is now linking with the 60% percentage we have there. You can, of course, change the oval circle color. You can change the fill color, so the 60% in our example here the color of that as well. You can also change the color for the inside of the circle on everything else is your usual layout and positioning type of options. But that is how we add a fill counter, which actually look really good when you trying to visually display a percentage on your website. These can not really, really effective 40. Google Maps: in this video, we're going to have a look at adding a Google map to our website to add a Google map. What I've done is I've already added a content box just into the middle of the site so the map doesn't completely fill out screen. I'm then going to grab the Google map block, drop it into the middle off our content box on that automatically opens up a Google map. Now this is showing New York. You may not want to show New York if that's not where you are. So what you can do here is put any address into this folks. So High Street Burton on Trent, which is my local town. Just click out of that box on that update. Say you see Burton on Trent on for most maps. This might be too far out, so you can then use the zoom button, actually, zoom right in as far that see how close we can get. That's the closest we can get there so you can decide what is a decent display distance or zoom for where you want to show so that can be moved in or out. As you wish on there. All of the other options down here are your usual. Once your borders, you corners, you margin j padding, etcetera. So that's all the normal ones. What I'm going to do now, let me just save this and actually show you a live preview off it. And the reason I want to show you the preview is when this is live on your site. It is a live Google map. So if the user decides they want to see what's appear, they cannot she grab it. Andi, move it around, just as with any other Google map. If they then from this point want to zoom out to see where it fits on the overall look off the map, they can do that, or they can zoom in. They can even go for the satellite view if they want to civil. Those options are available. But this I'm sure you'll agree in whichever format you decide to go for when this is somewhere on your website to show where your premises are, or anything else that you need to show where exactly it is, it's a great way of displaying these on your side. 41. Icons: in this video, we're going to look at adding icons to your website. Here are two different examples on this page. There is one I can't have just added, which is a calendar icon on. You've also got this one here, which is an icon for a telephone of where we got the telephone number on the website. To add in, I come to your site. You simply drag the icon button from the side here on, drop it wherever you want it. I'm dropping in these content box. It'll just displayed nicely in the Centre Force, but then said that icona, Normally this thing will open for you automatically. And as you see here, there are, I think, several 100 cause there's 20 across there and as you see, there's lots of columns down. So there's lots of things there, from sort of transportacion to a shopping cart symbol to a Google symbol to different arrows to linked in symbols, lots of different things. You also have the choice here off searching, so you can either just scroll down and find the one you want or you could search for one, so they have to search for money on that note comes up there. If I search for phone, we get several different options there coming up for that. So all you do is scroll through, find the one you want. That's just choose this camera one here, click on it and then select on. It appears on your site. As usual, we get all of our different options, So the options here are choose. I come with just done that you could change the icon if you want to. You can change the icon size to whatever you want for your particular use on. Then you can change the icon color. So if we wanted to have ah, orange color, we could do that there. We wanted a dark purple. Call it. We could do that there. When you've got the Cali want, you just hit, apply all of the other options are the same. Your usual styling layout, background, all those sort of things. But that is a great way to use these in something like a column. As you see here. This is just in two columns, so we've got a phone number that's typed in with the icon next to it so they could be used anywhere on your website just to highlight particular sections or two, pull people's eyes to a particular area in your sight. 42. Lead Generation: in this video, we're going to look at adding lead generation boxes to our website. So here is an example of a simple sign up form. We're asking for the name email address, and then there is a sign up button to add lead gen box to our website. We simply grab the relevant element from the left hand side on, drag it to where we want it on our site and win a drop it in this content box here. So it's nicely styled in the middle on. There we have it. So first of all, this content box needs to be connected to a particular service, so I always use get response for my email lists. You may use a different service. You may use Mel chimp or one of many others, but you need to connect this to a service. To do that, we click the connect forms of service put in here, and you then have two choices. There is HTML form connection. So if, for example, within get responsible within one of the other services, it creates the HTML code for a sign up form. What you will do is grab that HTML code click on here on basically, paste it into this box so all the code is inserted there and then you go to continue and it will tell you what you need to do next. The other alternative you've got is to actually connect to the service directly. So if we click here and go for switch to a P, I integration, what you can then do is add a new A P I connection and click on there and it will open up within your WordPress dashboard and we click on add new connection. What you then need to do is find the particular service you use down this list. There are lots of dullest ID there. The one I use is get response on. What then says is input the A P I key. So what I need to do is go into my get response log in and actually find the A P I key that they would give me, so they'll always be one of these in there. Now, on the Thrive website. You remember at the start of this course I showed you where thrive have all of their training sessions in there. It will show you how to do this for all the different auto responders. But obviously in this course is not time to show you for all of them. But basically, for whichever service you find the a P I key on, then connect it and you can then tell it which of your email lists you want this particular form to be added to. So when you've done that, you then simply combat your form that will be connected to your service. So anybody that signs up through here that will then be added to the email list that you wanted it to be added to you then, of course, got a lot more options. So, for example, you could add it ever messages. So if somebody tries to enter something into the form and gives an invalid email address, for example, there will be an error message that you can have their that pops up for them. You've then got lots of other options. So, for example, if you don't want the form to be a zweig, a zit waas, you could have background styles. You can also change all the elements within. Here is well, to do that, you click on edit form elements on that opens up here, so we could then click on the sign up button and then you get the options to change that. So if you wanted to change that to, for example, join our newsletter, we could update that. So that's the button you could own. Change the bottom color if you wanted to. You change that to anything you wanted. Let's just grab that colleges for now. So all that could be changed. You could change the wording here, so I very often on my forms, just wanted to bay first name so we could change it. That Andi there's lots of different options there that you could change on there. When you happy with it, you simply saving close. So there is a way that you can add alea generation sign up form to any of the pages on your website 43. Progress Bars: in this video, we're going to look at adding a progress bar toe our website on Here's an example of one. This is a little bit similar to the fill counter that we looked at earlier. But a fill counter shows a percentage in a circular image. This one shows it in a wide bar. You can actually change the size of the bar, but it will actually show whatever percentage you want. So here I've got that set of 78%. So obviously this has filled 78% of the bar and you can obviously give whatever description you want within the barb itself. So to add one of these, we simply find progress. Bar down the left hand side, drag it to where we want it. I'm going to drop it into this content section on. There it is. So we get our usual options down the left hand side for the Progress bar. You could change the fill color. So this is what to your percentage Party's going to bay. So let's change that to something completely different. They're just apply that when you happy with it, you can also change the background color so Normally that's gonna be a fairly light color, but you can change that to anything you want, then the film percentage. So this would be whatever percentage you're trying to displayed. So let's move that to 73% there. We then get in a label options. So if we remove the in a label that just removes this wording from here on, you could also change the label color. So if I just amend this, you'll see what happens around the wording of Progress Bar. So you could have something around that I don't think there's any need for that personally . But you can have that if you wish. I'll just cancel that. You could also click in here. Andi, change this wording. So, for example, as I showed in the sample version, you might want that to say our success rate is 74% and then you actually change this. So I was on 73%. Let's change it there. We got a 74% so that wording can change. Do anything you want in there. You've also got your usual options of movement and maximum width. For example, depend on where you want this to go on your page. You can have your various layout options. This is one where possibly you could look adding a border around it, for example. So let me to show you there. We got a black border around that just makes it stand out a little. So these again are very useful for highlighting various things on your site on various services that you may offer. So that is the Progress bar. 44. Social Share Buttons: in this video, we're going to look at how to add social share buttons to your website so that people can click on the buttons on Do Share your page or your website on all of their social media sites such as Facebook, Google plus Twitter, Pinterest, etcetera. To have social share buttons to your site, you come down the left here to find the social share block on drug. It's on dropping it into this content box beacon, drug it and drop it wherever you like, And that brings you here. So we've got our usual options on the left hand side. The 1st 1 is the type, so you can either have this displayed as icon. Only I come plus the text or icon with a counter, which will display how many times each one has bean shared. So I'm gonna come back to the I complice text. You then have a number of styles that you can choose for. You click on the change buttered on, for example, you could have this square one or some slightly different versions is very different, one there at the bottom. So let's just choose one of those. Let's go with this one for now and then you just apply it. You've then got the orientation options seek and I love these vertically or horizontally depend on where you're going to put them on your website. Then, of course, you have the option to change the size to whatever you want to fit with where you want it to go. We can also change which social networks are displayed. So if we click the change But in here you've got a choice of Facebook, Twitter, Google, plus Pinterest linked in or zinc. So if, for example, we wanted to add Pinterest, we can click on there on just apply and that will add it into the list. You could also change the order that these are displayed. So if you particularly wanted Twitter to be at the top on the left hand side, in case you simply drag on drop, so click drag, Drop it way you want it. And there you see the Twitter button moves to the left hand side that underneath we have a tick box for custom share. You are well, now, if this isn't ticked, whatever page of your website this is on, if anybody clicks a share button. The Web page that will be shared is this very page that the button is on. So if you have these buttons on all of your pages, each time I click a share bottom, it will share that individual paid. So if they went to another page and click share on that, that would share that different page. The option we have, though with here the custom share you are well is that you could put in a different website address here. So, for example, this could be your home page. So if you have the share buttons on every page, your website, but in each one, you have the custom share you r l is your home page. Then whenever anybody shared anything on your site, the page that will be shared would always be your home page. You could, even if you wanted to have a page to share. That's on a different website. But I don't really know why you'd want to do that. But if all you want to do is let them share the content on this one particular page, you would not take that box and it would just share this page automatically. And then our only other option that is different for this particular function is this Show share count booted. So if we click this, it will show how many times this has been shared in total. Now, obviously, when you first put this on the page, it's going to save zero shares. Just as this stills here, that doesn't look very impressive. So what you can do is change this. Move this number up so that it will only appear if there are that money shares. So if, for example, you changed it to 20 then this will only appear on your site. If there are a total number of shares in excess off 20 shares, up until that point, it just won't appear it all. So that's something you may want tohave, or you may not be bothered about showing how many shares you had anyway. That's always your choice. And then all the other options are usual layout and position, etcetera, all the ones that you've seen so many times. So that is how to add social share buttons to your website. 45. Star Ratings: in this video, we're going to have a look at how to add a star rating toe our website. So here's an example that is showing 3.5 out of five stars on this could be used If, for example, we want to rate particular products on our website on so we can write them with a particular number of stars out of five. To add a star mating to our site, we come down here and find the star rating block on, drag it into the site. I'm dragging it into this content box here on There we go. Let me increase the size first of all, So, in our options down the left hand side there is size there and I will just drag that up so we can see it a little better for this video. You can obviously make that whatever size you want to have it on your side. Let's have it there for now. So coming back to the top Firstly, you get to choose how many stars you want to be displayed on, out of how many. So, for example, this could be right up to 10 stars if you wanted to say that whatever it is that you're given a rating for was given 8.5 out of 10 then you can do that. You can have whatever number of stars you want there. There was also a number of different styles that you can choose. So, for example, we could have that one. Or we could have that one or the one you've just seen or a different version there. So let's have that one. Just as a different option for demo sighs, we've already looked at the background. Color is for the bit that hasn't bean selected. So if you're 8.5, it's the 1.5 that are left on. There are gray background. Then you've got the fill color, which is the yellow here on outlying color is if there's anything around the edge, but we haven't actually got anything on this one anyway, on that's really all there is to it. Everything else is usual positioning and things, but this is a very easy way to add star ratings to your website 46. Styled Lists: in this video, we're going to look at adding a styled list to our website. Here's an example of a style list, so it's effectively a list of bullet points on your website on. There are lots of options that we can change with this, and we'll have a look at that now. So to add a styled list, we come down to the styled list block on, drag it where we want it on dropping it into this content box. So that always opens up with what we see here. It'll come with three examples and your options down the left hand side. So let's have a look at the options we've got. There are options that will impact the whole list on. There are options that will just impact one individual item. So let's have a first look at the things for one particular item. So, of course, as you'd expect, you can change the wording in there, so it reads whatever you want it to. So if we did one, let's change you so we know which wouldn't switch to on three. You can also change within that you could obviously make that bold indented on the line, etcetera on if you wanted to. When you click within the individual text boxes, you can then change the font size and font color and all those sort of things that you'd expect to be able to do. You can also click on the icon at the start, and you could change an individual icon if you wanted to something else so you could select that and change that. So each one could have a different icon if you wanted them to their Andi. Also, you can change the icon size now. In a moment I'm gonna show you how you can change all of the icons at the same time if you wanted to. So instead of having a tick list, it could be some other sort of bullet there instead. So those are the options for changing individual items. But if we click back to the outside, which is the overall styled list with then got a few other options, So, for example, here we can change all the icons at the same time. So if we wanted to change to what would be relevant, let's change it that, for example, it changes all to the same the other thing Weaken Dio is here change the size of all of the icons at the same time, you saw me change one individual one. But this here would just change them all to the same could obviously change icon color as well. So if you wanted to do that, you could make them red On also the items Spacing is just the spacing between or the bullets. He could have them as close as you wanted then The final option we have here is to move these around. As you see, we've got 123 If you decided you wanted to change those, I wanted to drag three into the middle. Then you could do that and easily change the order off your elements on then Also, if you have not enough here and you wanted to add extra bullets in there, you can click on our new and that will add extra ones in there. It's worth noting that when you add any new ones in, they seem to always go back to the original size. So you then just need to come to your Icahn size element on move that slightly and then they will actually join in to be the same size. But then that's you've got all your usual options underneath that you will now be expecting to say, every time you create one of your boxes on one of your elements within architect. So there we go. That is how we had a nice bulleted list to our websites by using styled lists. 47. Tables: in this video, we're going to look at adding a table to our website for the purposes of displaying information. So here is a sample of a table will look now at how we would add one of these. So to outer table. We look for the table block here on drag it to where we want it and then, as usual, we drop it. We then get the insert table top coming open here. And here's where we decide how big we want our table to bay. So how many blocks across the top and how maney deep. So say, for example, we wanted it four down and five across you to simply then just click on it and that will open for you. Andi, as you see it will show you hear what the table will look like with the five head of blocks across the top, Andi for down in total. It's worth pointing out here that the lines you see around the cells in the table and around the outside will not be shown in the public view in the live you on your website. If you want tohave lines around, there will have a lot later to how we do that. But these are just for your purposes, so you can see what the cells look like. Let's have a look at first of how we actually add any content into these boxes. Andi with architect, it's actually dragging in. What do you want to add in there? So if you wanted to add some text, you simply drug that. Pick the cell you want, it's going to and then let go. You can then type into that sale whatever you want to go into it on. Obviously that has your normal options there for changing that text, making bold, changing the colors etcetera on. You can then put whatever information you want into any of the different cells. So there, for example, so obviously you can enter whatever information you want in there into the head of section . You could drag a heading block, but normally, as you'll see here, that may well be far too big for heading block. So what I would suggest is just used a normal text option in there as well. But you can always make it bold or something like that. If you wanted to particularly stand out So that is how you actually populate all of these cells. Here, let me come back now to the table itself, and we'll look at the options for what you can do with the cell itself. So firstly, so I've just clicked here on the table option. So that's giving us the specific options here. We could look at the padding. As you see. That is the amount of padding inside each cell around the wording so you can increase. That will make it less so. You can click here to make each table sort herbal. So if that is clicked, people would be able to sort on whatever the contents are in the various cells. There, you can have alignment, which will actually look any different here. But you can actually a line all the content in the cells to the top of the cell, the middle of the cell or the bottom. As you'd expect, we can change the color off the head of block, and when you found the clear what you just apply that on? You can also change the cell color. If you wanted toe have a particular color in the cells as well. We'll make that a very light. Something like that. They're so that changes the cells. We can also manage the cells, inasmuch as if we click on there. If you wanted to add a column, which is the vertical columns here, or you wanted to add a row, which is the ones across you can do that here just by clicking those you could. Also, if you wanted to split cells into more than one cell or you wanted to merge a number of cells into one. You can do that here as well you can. Also, if you click on a column, you could remove a column. Or you could remove a row if you want to. On there's other options there for inserting columns after a certain one, inserting columns before a certain column and rose to do the same there. Of all those options are available to you in that, let me just close that option. We also have some other advanced options so you can have the even number. Rose will be one color on odd number. Arose would be another if you ever wanted to use that. One other thing that's worth looking at is I mentioned to you before that there won't be any borders around the table or around any individual cells. But, of course, in our usual options at the bottom here, we can actually include those if we want to. So, for example, there is a border around the overall table itself. But if you click to apply in a border, you also then get options of either having a border around the header. Let me just make that a bit thicker so you can see it. So that's a border just around the head area. He wouldn't wanted that thick, but I'm just doing that so we can see it. Or you can have a border around individual cells. So there are some options on doing that. You see, that would come around every individual cell. So if you wanted it to appear like that, then those options are there on all your other options are there as you'd expect down at the bottom. So that is how we add a table to our website 48. Tabs: in this video, we're going to look at how we can add taps and a tab section to our website on. Here is an example where we've got four different taps. So we've got the first tab open here, and that's the content for that tab. Second top would have different content. You can obviously had content in the third on the fourth Tapas money tubs. You actually want two AB tops to our site. We just look for the tabs block here on Drop it where we want it on. The site will let go there on That opens up initially with three different tabs, but you could obviously change the number of those as you wish. So let's look at some of the options. We get options that are related to the whole tab box, and you can also choose options related to individual tabs. Let's look, first of all the town, we actually add content to any of these tabs on. All you need to do is drag a block of whatever you want to be in the tab. So if, for example, in this first tab we wanted it to bay some text, you can just drug that into the tab. Let it go on. There you go. You can add much text as you want. There you can if you wish, add more than one block into each tab. So, for example, if we wanted to add heading in there as well again, we can find just the right place for it on. Then drop it so you can have a heading in there. You could add images in there. You could add buttons in there. So this could, for example, be three different options for a particular product that yourself on. So they could look down all the details here within a tab on, then have a buy button at the bottom if you wanted to. If we wanted to choose a different tab on, for example, add an image in there again, we could just drag the image block, drop that where we want it. That then opens up for us to choose an image we can insert that on. Then again, because the image you selected, we can then choose size of the image in all the various things related to the image there. So let's come back now to the tabs options. So this is the overall tab box I've got selected. So let's have a look at the different options that we have here. So, firstly, we can have tubs layout, either horizontal or vertical. You have your choice of which you prefer the taps with. So these the individual tubs across the top. You can have it so that they or bigger or smaller as you can see those moving there. You can also decide which of the tabs is the default up. So when you come to this page, which tab do you want to be open initially? So if I change that to default of being the first that one has highlighted on when anybody comes to the page, they'll always see the content of that tub first. That's the default. If you want to add any new tabs, you just click the button here, and that will add additional tabs to your list. Then we can look at colors of tabs on. You can decide here which of these are being edited. So do you want to have just the active tabs that are being edited or inactive taps on so you can then choose the color background of these and change it however you want to, so we might get for that as I color and then apply it. Did you see that would be in a lot the taps? Because we've decided to change all of the active tabs there. So that's the background color for the tab. You can have the border changed. You can do lots of other things without their obviously can change font size in each one because we're changing all of these here at this level, Andi front colors, all those sort of things, the usual things that you are used to seeing. You can also click on an individual tab on change of receipt. The wording in that's up. So this might bay option one on the second tap would pay option two etcetera and change all those. If we come back to the overall width, we might want to make that smaller so that they'll actually fit in there. We could also change when we're in a particular box. We could obviously make that bold. We have changed the front colors. We could change the actual font itself. The font size line hides all those sort of things that you'd expect to do in there just coming back to the overall tabs options for a second, a few of the things we ought to have a look out there, the advance section. You've got the content background, so that is the background here. So if you wanted to change that at any point to actually highlight those, that could easily be done in there, so we might want over some sort of light color there, for example, on all the other options. I think you are used to seeing quite a lot by now. But as you can see, that's a great way of adding information to our site, where we could have them in a tab format. 49. Testimonials: in this video, we're going to have a look at how to add testimonials such as this one here to our website . To add a testimonial, we simply grabbed the testimonial box on Drop it where we want it on our side. This then opens which gives us, at the moment a choice of two different templates. So you can choose either those you like, just click on it until it has the green tick and then choose the style on that will then appear on your site. So first things first. We have some options in the column on the left. So let's go down. Those first of all, we have got a with which, as you see, increases the size of everything around the testimonial, so you could make that look as good as you can. You've also got minimum height. So if you want to change the height and you see that green there, so if you've got a lot of text in there and you want the testimonial to be bigger, you can change the minimum height on their reverse order will move the image to the right and side or the left. You can also change the vertical positioning. So the text, everything is aligned at the top of the box, the middle in the box or the bottom. You can also change it so that the testimonial fits right across the width of the screen. If you want to, you can also at this point, change this style if you want to, to go to the other type of template. If you wanted to just like that or change it back again just like that, all of the other options below here are ones that you are used to and you've seen many times. The other thing worth pointed out is all of the individual parts off the testimonial are changeable. So if for example, as you would for your own testimonial, you'd want a different image in here you click on the image that then takes you into the image options on the left so you could just change the image to something else. And then you have all of the other image options below here, and you can obviously change the wording. You can change this wording here. This icon is obviously relevant for a testimonial. But if you wanted to, you could change the icon if you wanted to, so that is a great way off adding testimonials to your website. 50. Toggles: in this video, we're going to look at how to add toggled elements to our website. On Here is an example where we have the gray box with a couple of FAA cues and a question how long he's left. If we move our mouths over any of these, then they change color, and if we click on it, you'll see the content for that particular box. So I thank you. There is answer number one just looking like I wanted to edit it. If a cute there is answer to on on the last one. I've actually got a countdown timer in there so you can actually add into these into the actual answer part or the content part of each of them, whatever you want. So any of these so you could have images you could have headed. You get part of text as you see even countdown timers. So let's have a look out to add these to our site. So to add a toggle element, we just find it near the bottom of the list here on drag the trouble box into where we want it and let go on it, then has your first toggle headline here. So, first of all, for this entire toggle box, let's look at the options down the left and there aren't many of them. Actually, what you get is you can change the Harvard color. So when anybody hovers over that that sickle you see, so you can actually change that to something of your own choosing. So if we chose that and that is the color that you see as you off over it, if you want to add additional troubles and belief, you can have them under their on. Then there is Reorder Tuggle. So if, for example, let me come in here and actually just change these, that is number one. Obviously, you can click in these as ever and change them. Text wise, however you want to want to three. So let me come back into the overall total box. Click reorder toggles on. You can then drag and move these around as you want to. When you finished doing that, you click. Done. So that is it for the overall options. Here you've got usual layout and position, etcetera and all the other options you used to seeing. So the only other things you'd want to do here is add your content to each one. So all you would do is there, first of all, with your headline for each, you can click on change the text on that for the content box. You just add whatever you want into there. So if you wanted this to bay a question on, here's your answer. You might want to drag paragraph and texting there, so you just drag it on, entry it in there so you can then choose that text whatever you want. When this is clicked, it wouldn't be showing it all. And then, obviously, when anybody clicks on it, that then opens up and shows your answer So you can drag anything into these particular toggles that you want to be seen. So this would obviously want displaying, so it it fits nicely with your site to your doors. You want to have the right content in here. You might want tohave borders around this. Lots of things you can do to change it and make it look really professional. But it's a useful way to display information on your site without having a massive page. You could have a number of toggled elements that people only look at if they want to see a particular bit of information 51. Video: in this video, we're going to have a look at how to add a video to our website. So do what a video. We come right down to the very bottom of our blocks to find the one that say's video on. We drag it to where we want it on our site. We then get a number of options down the left hand side. The 1st 1 is the source of your video. You've got a choice off a video from YouTube, Vimeo, Wis. Tear off a custom video that you've actually got on your website. I'm going to choose for this demo one on YouTube. So you click on YouTube, then you put the U. R l off a video as you find it on YouTube. So let me just pace one of my own in here. So I paste it in there and then come off that on. You see, this is a video of mine. You see the video appear on the right hand side and also the name of the video appears here . So the other options we've got our firstly at the moment, the video, as it is, will start at the very start But if you didn't want it to start at the start and you want to do to start up to, say 30 seconds of the video, then you can change that there. And you can change that to many minutes or seconds as you want to on. So when anybody presses play, it will just start at that particular time, Then the other option that I quite like here is the style, so you can change this. Andi have lots of different looks to how this will display on your website. Move that down. There's one on a monitor. You can have a gray frame. You can have this particular style, which looks like it's on a raised screen, if you like, so you can choose which of those you want as a particular look for your video. So rather than just being plunked, they're on your site. It looks great, cause it's got one of these borders around it, so choose the one that you like and then click apply. We then also got some advanced options, so we click on this advance tab. You've got a number of options here, which are auto play, so if it is a device where this can happen. When people appear on your webpage, the video will play automatically. You can hide the title of the video, which have just done there. You can hide the logo. If there is one, you can hide any related videos, so when they get to the end of your video, it will stop them seeing related videos, which is quite good. You could hide the controls if you want to, so it won't show the different controls along the bottom of the video. I would normally leave those on, though, to be honest on. Also, you can hide the full screen option. So when people are watching the video, that won't be a button at the bottom that lets them watch it full screen. But again, normally I would let them do that. And then finally, we can choose a thumbnail. So if you don't like this image that is being displayed here, which is the one that is chosen by YouTube, then you can actually upload another image that will be displayed instead. So that is how we display a video on our website 52. Updating Wordpress And Plugins: in this video, we're going to have a look at how to make updates to WordPress onto the plug ins within your WordPress dashboard. So here I am within the dashboard. Andi. There are a few reasons why you may need to make an update within the your dashboard. So, initially for WordPress of the actual WordPress software, they do release updates on a fairly regular basis. On a lot of times it is a security update so that some sort of vulnerability been found within the software. They will release an update Now. A lot of times your WordPress will just update itself, and so you won't even know it's happened. You won't need to do anything. But if it any point when you log in on the top of the page, it will actually say that there is a WordPress update that needs doing the other place you'll find. It is when it says here, updates on the left hand side. As you see at the moment, it says updates one. If we click on there, this takes you into this page here on. At the moment, it says you have the latest version of WordPress on future security updates will be applied automatically, so generally it will do that itself. But if the reserve version that you need to do something with it will actually say here on , there will be a button underneath to actually do the upgrade. So you've just effectively pressed a button. So the other thing that needs updating will be your plug ins. Andi, there were two ways to see what needs updating. Andi. I will show you those now. The 1st 1 is again on this. Updates putting where it says one on that is because there is a plug in that needs updating its Actually, at the moment it's my thrive architect. There is a new version of that that needs updating, so there are two ways you can do this. Update one is by coming in here whatever it says needs updating, you can just select all of those, and then you can click the update plug ins button there the other way, and I won't do that now just cause I want to show you the other way and obviously vital update that's it wont be available to update anymore. The other way is by looking at where it says plug ins here. And as you know, just again, there's a number one by that, because there is one plugging that needs some attention. So if I just mouse over here to installed plug ins and click on that, that will open up the page with all of the plug ins on. All we need to do is scroll down to one where you see this circle on. It says there is a new version of Thrive Architect Available update now, and to update that, all I do is press update. Now you'll see the circle rotating there on in a second. It will tick and say, updated on if you notice now, the one next to the plug ins. Andi, The update at the top of the page has now disappeared, and that is because everything is now up to date. So that's it. That's all you need to do as an ongoing maintenance within your WordPress. So what I would suggest is that you log in every couple of weeks, maybe once a month, but it would be ideal to do it more frequently than that. So with the plug ins again, there are two reasons usually why there will be updates available for you within the plug in one of these will be that there is simply a new improved version off the plug in available with our thrive architect. They are adding new functions, Andi, new things you could do with the software on a regular basis. So there is a very good chance that it will be something like that. You can always click view details and it will tell you what has actually changed in this new version. So that is one reason why there would be an update. The second reason again is for security reasons. Sometimes you will find that the author, off a particular plug in has found a security issue within their plugging on. So they then need to fix that. Andi, they will issue you with a new version. So others say any time you see these updates are needed quite easy to just go in, update them and then you can lug outs and get on with your day 53. Blog Setup: in this on the next few videos, we're going to look at how to add a blawg section to your website doesn't meet you near the start of this course, the main info about your business products and services will go on pages in your website on . We've already looked at how to create these pages in Thrive Architect. If, however, you also want to add regular updates of maybe special offers, news industry information, events, etcetera. Then these air usually added as posts in WordPress to create a blawg section. Many businesses won't want to block section at all as the info they need is displayed on their website pages. But if you do want a blawg, here is how to create one of these in thrive architect. Because of the way thrive architect works with WordPress, there is a little bit of set up we need to do for our block section. But once that set up is done, then adding block posts is very quick and easy. So first, let's look at the set up we need to do. The first thing we need to do is make a slight amendment to the overall theme that is appearing on our site. I'm on the dashboard as you see at the moment, So what we need to do is come down the menu at the left to appearance on, then click on themes. As you probably remember. We didn't need to change the default theme when using Thrive architect for our home page or for our pages, because Thrive architect just overrides the theme for those pages anyway. But for the blog's, the way that WordPress works is slightly different. And so if you do want to create a block section, we need to do something slightly different with the themes on this, of course, only ever needs doing once. So we're going to do that now on. All we need to do is click on Avenue theme and then in the search box at the top. We need to do a search for Fusion base on this one. He it will appear so we just click install that will install it on. We then click activate, and there we go. So that's something you only ever need to do Once this won't change your home page or any pages on your site that you've created so far all it will do is make life a lot easier for us. When we're now setting up our blawg section. The next thing we need to do is to create a template for all of our block posts To do this , The easiest way is to initially let's have a look at the template we created for our pages . So to do this, there were two ways one is to actually go to one of the pages you've already created that as your template on it or as I'm going to do here, will just create a new page. Now, I know this isn't for a block post. We're looking at pages first and we're going to grab the bits from there that we need to create post template. So let's firstly, just add a new page. So I'm just going to give it a name. Just test A. It really doesn't matter. Let's just publish that. You can always delete any of these random pages that we've created later, but all I'm gonna do is go to edit with Thrive, Architect. The method you've seen me use before, Andi, we've got a blank page. What we want to do is come to the bottom. Here, Andi, choose a landing page template. And as you know, we have saved our page template here. So we're gonna click on that and open it on. There we have it. Unfortunately, because of the way that WordPress works with the block section of your site, we can't just save this whole page design as a template on. Then open it in your block. What we need to do is look at the individual components of this page and then save them. But as I said, this only needs doing once and once we then open that in your blog's or created within your blawg, we can then save it as a template there. So what we need to do is look at which parts of this page we want to be in a blawg template on blood pages usually tend to be quite simple pages. So you might not want all of the elements off your page design to be in your blog's design . What I'm going to do is look at the top here. We've actually saved this before in a previous video, but I'll show you how to do it again. here. So if, for example, this overall background section here at the top, if we save that, what it will save is the image in the background. It'll save logo here. It'll save this phone number here. It will save this block that says about us at the moment that we can put the title of a particular page into it. It will save all those in one on. We can then drop that into our blawg template. So to do that, what we do is click on here so that the background section is selected. And then on the left hand side, we come down to the bottom here on then where it says class. We put a name in here that we will remember so that we can add it when we get to a blawg template, so we may want to call it block template header on. All would then do. To save that is click save template. Tackling comes in at the top to say template saved on. Let's have a look at the rest of the page. I'm not going to bother with the box where we'll just put the actual content of a particular blood post cause we'll do that shortly. But if, for example, you wanted to do the same here and keep this whole section, you could again click on the background section there. Andi, you'd come down and save that as a particular template as well in here also. If, for example, you have added a menu onto your site, say at the bottom there I could click on the menu and again come down to the bottom. And I could save that as Blawg Template Bottom menu, for example, On the game, I'm going to save that as a template. And, as you see again that say's the template is saved. Once you've saved all of the sections that you want to use in your blawg as templates here , what you can do is come back to the WordPress section off your signed. So I come back to here. Andi, we know going to go and create a blood post template. So to do that, we want to come to posts on the left hand menu. Andi, add new and then you can actually call this whatever your life because it won't remain as a post in the end. But I'm just gonna put blood post template and then I'm going to publish it. What we then want to do is click the button that says Edit with Thrive architect, and that opens up a page like this. So what we've got here is a blank blogged post with at the bottom the leave a reply section . The reason for this is that block posts on a website are seen more as an interactive area where you actually ask your readers to add their own comments or their own replies to the posts that you've put in there. So what we're going to do is change all the content, him at the top, and then this will remain as the bottom section so that your readers can actually add their own comments if they want to. Now, what I will do later on is show you how we can add a plug in to actually remove this section. So if you don't want people to build to reply on your website, then we can actually add something that will stop them doing that. But for now, we'll leave it on here on show how we can actually change all the rest of the page on DSO. What we want to do is those sections that we've just saved. We want to now dragged them in here to create a template for our blood post on. We do that with this section on the left called Content Template on or we're going to do is first of all, drag one of these to the very top of the page of the highest. We can actually go that will get our blue line and then we're going to let go. As you've seen, you've used this before in your pages. It will then have all of the templates that we have saved. So what you need to do is come down to the items that we have just saved. So let's first of all, Teoh are blawg template headed that we save. So if I click on that, that then drops in exactly what do you remember? Savings? It's his background section with the name of this post on it. The logo, the phone number, etcetera. We're going to drag those into their on then also drug in anything else that you've saved a swell. So the other one that I did let me drag that into just below here and again. I can let that go on the other one. I saved Waas the blood template bottom menu. So I dropped that in there. So these are the two items that I saved. So you should drag in all of the items you save. So if you've got any other sections, like, for example, the map section that we had If you wanted to add that in there or anything else, you can drop those in Azaz. Well, what we're now going to do is obviously have an area where we can actually add content in there for our block posts as well. So there were two ways that you can do this one would be if all you want is just to have on amount of text, maybe out some images and things are at in there is to actually grab a content box, drag it to where you want it. So I wanted above the menu but below the header and I just drop it in there. You could then make any changes you want to to to that. So if you don't want all you text going right to the side of the page, for example, I could bring that in. Let me have a cuddly alignment, which is there so I could align that to the center. So that gives me a content box. And then all I need to do is drag anything I want into this content box. So if, for example, my block posts I wanted to have at the very top of them heading you could obviously change the font and things of that if you want to. And for example, I wanted them to have the main text off the block post underneath there, I could drag in a text block like that. So what we're looking to do is just build up what the look of these pages will be for your block posts, so it's very similar to creating a page for your site. The other option, you've could of course, do. Instead of this single content block, let me just delete that. For now, what you could do is drag in a columns box instead. So if I drag that for that to be columns on, I could maybe have 2/3 and 1/3 on the reason for this would be that you might want to in this column down the right and side, create a sidebar off links or images that link to other sections on your site. So if you were putting in here a news item, for example, you might also want to have some details on here off other main pages on your site. So if you were a restaurant, for example, and you were saying in this news item, we've launched our new menu on the right hand side in the sidebar that you might want to have a link that actually takes them to the main menu page on your website. So if you were setting up your columns, you might again want to come right down to the max width. Let's amend the max wit so it would cover the whole page on Put it to the center on, then what you do is drag whatever you wanted to into each column. So if, for example, you wanted down the right hand color, you could drop in some paragraph in text there. So this, for example, may want to say, see how new menu, and you could then actually make this a link to a different page on your website. You obviously want to make it look a lot better than that. All this could be doing with an image down here, or it could be done with the bottom, for example. So if you wanted to do it is a button. Let me just remove that paragraph in Texas in that column. So if you wanted to actually make that a buttered, you could actually drag the bottom block on, drop that into the column on, then make this look exactly as you wanted it to aunt. Have a link in there that would link to a different page on your website, and then for your normal column here, you'd want to do pretty much what we did before. So you might want tohave a header off the information you're putting in there, and you might want to also have paragraph in text under there. So, as you see, that is sorting out a look for your blood page. So when you got this template to look how you want it to, we then just need to actually save it as a template. So to do that or would do is come down here to this button. You've done this similar to this before. Click on there, Save content as template. Let me just call it something that will remember somebody call it. You might want to just call it blogged template. But I'm gonna put a few letters in there because I've actually saved a few versions of this already. Just went on making the course and trying these things out for you. So I just call it a a blogger template, and then we will just save that template. So what that has created is an overall look of a page that is a template for any blood post we make in the next video. We'll look at how we now actually create blood posts. 54. Adding Blog Posts: in the last video, we looked at how we set up our blawg page template. And now in this video, we're going to look at how you add a block post to your site. So here I am in the dashboard on adding a blood post is very quick and very easy, Or we do is mouse over posts and then click on ads new. The first thing we should do on this page is add a title off the post, so this could be something along the lines of a new product is now available or just the subject of whatever it is you're going to be talking about in this post. Then we come over to the right. Inside Onda, we see categories and in categories you can add the main headings off the subjects that you're going to talk about in your blawg. So if we wanted to add a new category, so one maybe could be products and we have that as a category, you might want a different category off news, for example, and then all you would do is when you're creating a post, you would just take whichever category it is relevant to So this one is products. And as you say, you can have new categories in there whenever you want to. The other section we're going to look at here is at the bottom of the page where it says featured image. Andi, if you have an image that is relevant to what you're talking about in this block post so you're talking about a new product, for example, so this could be a photo of that product. For example, you could set this as a featured image for this post. Andi, I'll show you later when we actually display these posts. Why? This is a useful thing. Toe have all why you may want to use this feature. So all you do to out that is click on set featured image. You then either upload or find the relevant image that you actually want for the Post will say, for example, is this one. You click on that and set featured image, and that was just a small version. Arrive down here. That's all we need to do at this point. So what would then do is publish the page and then click the edit with thrive architect butter that brings us into the basics off our blood post with the blank section at the top where we're going to add all of our content. We're going to add our template on the lever reply section at the bottom. So what we didn't do now he's draggin the template that we've just created and that will be done by drugging these content template ear up to the top, letting it go and then scrolling down here to find the one that we want. And if you remember, we've just saved it under the name off a block template. So we would just click on there, and that will open the template that we created. So now we've got our temperate open. It's simply a case off, just adding in whatever content you wanted for this particular blood post. So if, for example, I got a load of text that I wanted to enter, I can actually do that there. I've just pasted that in just to give us some text to show on the page. If there's any sections you don't want, for example, you decide on this one. You don't want to have a header. You could just delete that it leaves everything else there on the page. We could still put our details in the top here, So, for example, could do with the capital. But that is the item that will open and will appear on our page when we when we first load the page or when, and anything else you wanted to change, you could do so if, for example, I wanted to add a new image into their I could just drag the image block, find a place where I actually wanted to go. We'll let that go there on that would then give me the chance to choose, but images that I wanted to include so we could just drop that in there. Obviously, I've got options then off changing that image change in the size of the imagine things outfits. If so, all you do is go through, create the page. So it looks exactly how you want it to look and then simply save the baby. So let me just drag in a live version of the site so we can see what it looks like for anybody who visits that page on. Here we go. Let me just actually refresh the page. You'll see this zooming in. There it is on our button or whatever we've got down them, right and side. If that's how we've set up, our template will appear there. Andi, as you see all of the text without images and then the menu at the bottom of the page. So I think you'll agree it looks really good. Obviously it's needs a little bit more tweaking and setting up exactly how you'd want it. But that is how you would create a block post, and obviously for further block posts, you just repeat the procedure that we went through there. So that is how you add a block posts to your website. 55. Displaying Blog Posts: in this video, we're going to have a look at how we display our block posts. Of course, when you create a block post, people could just go straight to that page itself on DSI, that specific post. But it's normal on a website toe, have a page that will list your block posts so that people can easily find them on. That's what we're going to set up now on the way we do that is by creating a new page. So we're going to go from the manual left two pages on. Add new on. You could call this page whatever you want on a lot of websites. It is just called the Balog on DSo. People, when they go to the Blawg, will know the kind of posts that they're going to find there. But you could call it latest news or latest info or latest updates or anything that you wanted that will suit your business on what you're going to be putting into your blood. So then all we do is click the publish footer. So as you can see by the link here, anybody wanted to see this page, it will be out birthday Club marketing dot co dot UK forward slash blawg on What we're going to do now is quickly edit with Dr Architect Butter, and that brings us into our usual page maker with the blank canvas on the right, on our usual buttons down the left on what we want to do. This time he's open up our page template. So to do that, we come to the page set, appear at the bottom and click on there. We then come to choose a landing page template. And, of course, we want to goto our save landing pages, click on page Template on, then choose, and that opens our normal page template. We first began to make just a couple of changes to our temples here in ah, header at the top. Let's give this the same game as the page, so we'll call it our blogger or whatever you've called it on. Also, I don't want this box with this content here, so I'm just going to actually delete that. So that is out of the way, Andi. I'm then going to move a content box into here because we're gonna add some content to this in just a second. I'm just going to let that go there on. I'm then going to change of this content box. I don't want it to cover the whole width, so I'm going to drop that in a bit, so it doesn't cover quite so much of the page On another things you've seen me do many times before, I'm going to change the alignment. So it it's more to the center off the box on then. The thing we're going to use now is something we haven't used as yet in this course. But this is going to help us to display the block posts on it. Is this one down here and it is a post grid. So in our case, it is actually a blogger post grid. And we want to drop that in this content box and we drop it there. So what this post grid automatically displays is info on the latest posts that you posted to your block. So you'll see here, for example, the very latest one is the one that we added as the demo in the last video. Our new product is now available on DSO. It shows the headline of that a little bit of the text from it. Read more button to go to the whole post andan image at the top. Can you remember when we created the Post in the last video? One of the first things we did with that post was set a featured image. So when you set a featured image that will appear here, so that is why we actually set that as the featured image. But as you'd expect if you click on this post grid, we've got quite a few options. So, firstly, if we click on edit grid options, you've got quite a few display options. You could have your grid displayed vertically or, as you saw it before, how recently you can say how many columns that we're going to bay. So that's three different columns. Two columns, one column exactly how you want it displayed on your page. You could have a grid view or what they call a masonry display view, so that means with a grid view, whatever the largest boxes, all the other boxes will be the same in a masonry display. This box needed this amount of space these post needed less, and so they will only take up less space. So again you can choose how you want those. That's masonry, Ingrid. You can then decide whether you want to have a featured image on there. If you don't, you can remove that. And it would just be text. For example, if you didn't want the title to be displayed, you could take that. I don't know why you do that. Normally, you would always have the title in there so people could see what we're going to click through to view. If you didn't want any of the description text, you could remove that so that your title is enough for people to decide where they want to read that post or not. Onda also at the bottom. You could have the read more link or not. If you wanted to remove that, then also, you've got the choice off with the amount of texting there. Do you want to have the full text, which I would suggest you don't because that would make a post absolutely huge like there, for example. It just makes it ridiculously large. That wouldn't be a good choice. They can either be an ex ERT that you choose or they could just be a summary of the text. Then also, there are a few other options you get. One is to have the display order. So, for example, you could decide you want the title at the top and then the image underneath and then the text, etcetera. So you can change that. Exactly how you want to go on. Then there are a number of other options under here. Number of posts for examples of this, As you see, this is covering six posts in total on here. You could change that set. It would either show more of or less than six. You could have them ordered by date. So the very latest one you posted would be first and going on from there. But there are various other things that you could sort those by if you wanted to. Andi, a few of the options you've got there as well. So when you finished in that section, you conflict done often that you then get some options on how to change the overall size of this. So your images you may decide you want them to be bigger or smaller. The title front, bigger or smaller to make that look good on your page, the title line, the height of that or the distance between the lines. And you see that moving there where it says read mawr. You could have that say something different if you wanted it to. You could change the text color on various other options there. So when you finished all that, you just actually click save and that then becomes alive page on your site. Normally, if you've got a menu somewhere on your home page on all of your pages, you want to make sure that the blawg is displaying in that menu so that people can actually come here and find this page. There we go, so you can see what it looks like. Obviously, all these you could change, however you want to. But this page, when anybody comes to this page, is any time it will always keep updating. So whenever you have a post, the latest post would appear here and the rest would move around. And so this is a page that will always show the most recent posts that you've added to your blood. The other thing that you can do with this post grid is actually drop this into any page on your site. So some websites, for example, on the home page would have a number off their latest blood posts. So there's no reason why this couldn't be dropped into any page anywhere and made a lot smaller than this. Obviously, here we're taking up quite a lot of face. But you could just have a post grid that has the last one or two of your block posts on and , for example, like here. If we change this in any grid options, we change this to number of posts, too. We remove the featured image, then it suddenly takes up a lot less space. So if we said done there, we then wanted to change the font size to a lot smaller. Something like that. Then there is a block that could dio on your home page, for example, so this post grid can actually be placed anywhere on your website, and that is how you will display all of the block posts that you add into your blood