Wordpress Web Design Course - Introduction to Wordpress Web Design and the Avada Theme | Andrew Turner | Skillshare

Playback Speed


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

Wordpress Web Design Course - Introduction to Wordpress Web Design and the Avada Theme

teacher avatar Andrew Turner, Web developer & WordPress trainer

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

13 Lessons (4h 23m)
    • 1. Introduction

      3:19
    • 2. Module 01 - Domains, Hosting & WordPress Terminology

      13:13
    • 3. Module 02 - Hosting, Reseller Accounts & Domains

      25:14
    • 4. Module 03 - WordPress Install

      9:26
    • 5. Module 04 - WordPress Initial Setup

      13:24
    • 6. Module 05 - WordPress Dashboard, Themes & Plugins

      25:40
    • 7. Module 06 - Basic Site Building Workshop - Part 1.

      36:41
    • 8. Module 06 - Basic Site Building Workshop - Part 2.

      33:19
    • 9. Module 07 - Advanced Site Building Workshop - Part 1.

      33:31
    • 10. Module 07 - Advanced Site Building Workshop - Part 2.

      33:52
    • 11. Module 08 - Adding a blog - Adding content to the footer

      15:09
    • 12. Module 09 - Site Launch, XML Sitemap & SEO Fundamentals

      8:49
    • 13. Module 10 - Maintenance & Support

      11:15
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

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.

118

Students

--

Project

About This Class

This class gives you a fast-track route to becoming a great web developer and is aimed at people with little or no knowledge of web design, as well as more experienced users.  Taking you from essential terminology, through to setting up of hosting services, to installing WordPress and then on to learning how to use powerful tools to create beautiful, commercially viable websites.

If you are keen to learn how to develop websites, or are perhaps looking for a career change that will allow you to become a freelance web developer and start developing sites for paying clients, this course will give you the step by step knowledge needed to get you to that point fast.

To access downloads and resources relating to this course please go to

http://www.wordpresswebdesigncourse.com/student-resources/

Meet Your Teacher

Teacher Profile Image

Andrew Turner

Web developer & WordPress trainer

Teacher

Andrew Turner is a full-time web developer and WordPress trainer working through his own training company Web Design Workshop. He is also a fanatical street photographer and author of the book 'Shooting Street'. He lives with his wife and two daughters in the beautiful city of Oxford in the UK.

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: Hello. Welcome to the WordPress Web design course, My name's and returner. I'm a full time Web developer in WordPress Trainer, and I'm gonna be teaching this course. It's module based. There are 10 modules I'm going to take you through form very basic knowledge through to being able to build what will hopefully be a beautiful looking site. The courses module based there are 10 modules. We're going to start off with basic terminology. That's important for you to understand them. We're gonna look at setting up hosting, installing WordPress, then going on to do a basic site build on and some or advance site builds through. The early modules are perhaps a little bit boring. Perhaps, but it's important for you to understand this if you're gonna go on and build sites for clients so everything's included. But the real, the real good stuff, if you like, starts in about bass module five and six, I think it is. I'm gonna show you quickly in this introduction what you're gonna go on and build. So you've got a sense off what's ahead of you, but certainly within the next three or four hours. If you work through this course. Then you'll be in a very, very good situation to go on and start to build course websites for four clients. I wish you the best of luck, and I hope you enjoy the course. Okay, So over the course of the next 10 modules, I'm going to teach you how to build beautiful websites. I'm going to show you what WordPress looks like straight out of the box. This is it. This is what it looks like. It's installed. I have done nothing to this other than the installation comes with a sample page with a bit of dummy text on it. And that's how wordpress looks out of the box. I don't find that this is possible. Teoh present to a client, Andi Bill four. So we need to learn how to build much nicer websites than Theo, the basic WordPress installation. So I'm gonna go on and teach you how to build a site that looks more like this. Andi, I'm gonna teach you how to use the page layout tools on other techniques to make your sites look different than the majority of websites out there. So they have the wow factor that's going to make your client want to use your services. Andi obviously get you more work. So I'm get I'm gonna teach you how to use the tools to build a site that looks like this. Andi, perhaps use the same tools to build a site that looks like this, or even a site that looks like this. They're basically the same tools that I'm going to teach you how to use Andi. I'm not using different WordPress themes here. I'm just using one theme which, which will give you all of the page layout tools that you need in order to build sites that look very different from each other. So his his three that, you know, they look similar. But obviously the images and the page layouts is slightly different. But you might even go on and build a site that looks like this, which is very different from the other three, but uses exactly the same WordPress theme in order to achieve this effect. So hopefully you'll agree that their sites look great. And you want to go on and learn how to build those sites. So launch into the course, work through the module, step by step. Within a few hours, you're gonna learn how to build sites that look just like that 2. Module 01 - Domains, Hosting & WordPress Terminology: Okay. Welcome to the first model of the WordPress Web design course in this module. I'm going very quickly Run through a few slides. This is pretty much the only module that that uses slides. The rest of it is gonna be video lead. So you're actually going to see me working? See me setting up sites, developing sites, and you'll be able to follow the video led course. This is just a few slides just to run through some terminology that you're going to need to understand what the meaning off the terminology I'm I'm using relates to. So let's just run through it really quickly. Domains I p addresses domain extensions. What is a domain? Ah, domain is the word or this phrase that we use in order to locate a website. So my domain is WordPress Web design course dot com on go. That's what you perhaps found this course on or used typed in in order to t find this course. So we're all familiar with a domain now. What you may not know is that there is a number behind that words that you're typing in all that phrase that you're typing in and that number is known as an I P address. Now, typically, an I P address might take the form off. For instance, 172.189150 dot to one night. That's what an I P address sounds like now that's obviously really difficult for us to remember. So Thebe people that developed the Internet in their wisdom decided that it would be a good idea if we use words and phrases instead of numbers. But nevertheless, the numbers are still there because that's what the computer understands. So, um, behind a domain name is always an I p address, and we'll come onto the details of that a little later. Domain extensions is the bit that comes after the main bit of the domain name. So WordPress Web design cause dot com would be the domain extension. The dot com part is the domain extension. Obviously, there are countless other domain extensions dot co dot UK dot nl dot f are. Generally, each country has their own domain extension that there are also lots of others now that air coming into use as their expanding the Internet. So, for instance, there some domain extensions like dot travel dot info dot lifestyle. That kind of domain extension I'm not a great fan of those are much preferred to stick to either dot com or dot co dot UK, certainly for for business use anyway. OK, moving on domain registration on domain renewal. So basically, what happens is when you want to register a domain name, you have to register it to either an individual or a company. It has to be available. Obviously, it has to be unique on, and you have to either register it for a number of years or just for one year. Andi, it's renewable. So when you when? When the renewal period is up, you then get the option either to reregister it for another period of time or just to let it lapse, so you don't have to pay for it anymore, and it becomes available for somebody else to use. Okay, Web domains. Email domains, my domains, sub domains. What all these mean Web domains Web domains you're probably familiar with. They are website addresses effectively, so WordPress Web design course dot com is a Web domain. Now, the fact that I own that domain means that I could actually use it for my email address as well, so I could have Andrew at WordPress Web design course dot com On that would be the email domain in use. Now, mapped domains are one domain pointing to another and acting as if they are a single domain . So, for instance, I own the dot com and the dot co dot UK version off WordPress Web design course on I've Got one mapped to the other. So the website itself is located on the WordPress Web design course dot com domain. But if you were to put in the dot co dot UK instead of the dot com, you would get to the dot com version of the domain. And that's a mapped domain, or sometimes called appointed domain or redirected to Maine sub domain. What is a sub domain? Well, W W W is, in fact, to sub domain. It's what appears in front of the main part of the Web drug Web address. So www is the one that everybody knows, and they don't even know that it's a subcommittee. But you might also create a sub domain for providing a support service, for instance, so support dot would press Web design course dot com would become a separate u R l So you could set up a separate website on it and deliver your support service through that sub domain. It's not widely used except by, you know, the big corporate corporate used sub domains a lot to divide up their Web desire. Sorry their their web addresses into the kinds of use that they deliver through the sub domain that they've created. OK, moving on, um, hosting name servers, A records, MX records. So if I talk about hosting, I'm talking about, um, some space on a server way, your websites are going to be located. You need to set up an account with a hosting company, which will come onto later on. And this is where you're gonna know Kate, your websites. So other people around the world can actually visit name servers are computers effectively ? They are really the glue off the internet, and there are lots and lots of name name servers around the world. Andi, effectively, what they're doing is they are providing the bit like the telephone exchange of the Internet. If you like, they are converting the web domains that we use the words or phrases that we use in our domain names into the numbers that the computers understand. The I P addresses Onda a record is effectively an I P address, which links to a website somewhere in the world, or at least links to a server somewhere in the world, a computer somewhere in the world that has got that website on it. And it's the name servers that work out from the Web domain that you've typed in what the I P addresses. And then they locate where that website is on which server anywhere in the world on the name servers, air updated all the time because obviously, things change all the time. So there there are lots of lots of name servers, hundreds, if not thousands of name servers around the world all doing this, updating all the time and old communicating with each other and making sure everything's up to date. So a record importantly and a record is for the website. An MX record does the same thing. It's still a number. It's a different number than the A record, but it relates to the email rather than the website. So a records website. MX records email moving on. Single site hosting reseller accounts, database hosting. So if I talk about single site hosting, I'm I'm talking about some business. Perhaps that might just have one website. All they want to do is host 11 website for their own use. They're not developing sites for other people, so they have no need toe have multiple sites. So you just need a single site hosting account for that. Now, if you're gonna go on and do Web development as a career as a job and develop websites four clients, then you're gonna need a reseller account. So basically, what that means is that your able to provide a hosting facility to your clients whereby you pay a single monthly fee for unlimited number off websites, so you can then resell that hosting facility to your clients and it becomes a revenue stream to your business database hosting most websites thes days have a database behind them. This course is purely to learn how to use website WordPress, as a Web development tool on WordPress always has a database behind it. So it's the database that holds the content that is then used to build the page as it loads when someone visits your website. So if you're making a change to your website, what you're actually doing is making a change to the content of the database rather than any static code on the page. It used to be. When the Internet first came about, it was just stack it static static html On def. You wanted to change something on the Web site, you'd have to go into that static HTML, make the change and then republish it. These days you just make a change in the database, and then, as the page loads, it dynamically pulls the content from the database on that. That is what provides the content. Uh, that the viewer off your website sees FDP, the WordPress dashboard and plug ins very quickly. We're gonna cover this in more detail in later modules, but FTP meal means file transfer protocol. If you're familiar with either the finder on Mac or Windows Explorer, this is what allows you to move files around, create folders, move files from one folder to another. Now FTP allows you to do the same thing, but from one computer to another that are not necessarily in the same room so effectively. You would be moving files from your local machine to the server provided by your hosting company where your websites are located. This enables you to to upload new bits of software, move images across, take backups, various things like that. We'll cover that in more detail later. The WordPress dashboard is what you see when you log into WordPress, and it's how you administer the content of your website. It's it's what you used to to build the website in the first place, and it's how you move around and make changes to the content later on. Plug ins are specific bits of software that do certain things, usually over and above what WordPress itself does. WordPress has limited functionality. It's incredibly powerful, but it has limited functionality, and in order to make things in order to do clever things on websites, you may need a plug in, and that plug in may be written by the developers of WordPress themselves. Or it may be written by 1/3 party, so somebody else who's developed code to sit on the WordPress platform and work alongside it. Now, as an example, I use a plug in called contact Form seven, which is very popular. Plug in and it provides the facility to create a contact form on your website so you can allow a visitor to fill in the form and then effectively the content arrives to you in an email. Okay, Andi, Finally, the header Navigation sidebar and permanence. These all relate to WordPress, but they effectively their true for any website. Whether it's developed in Wordpress or not, website is effectively divided up into intersections and there would be a header section, a navigation section of sidebar, perhaps on bond the permanent Perma links that are built as a result of the page names and various other things that you do within your words. Just going very quickly skip to ah website so I can show you what we're talking about here . So this top section is the Header Thayer section. Here is the navigation, although the navigation can sometimes be down the side. Obviously a sidebar would be either on the left or the right hand side. Typically, we've also got a footer that was not mentioned on the slide, but there's usually a footer as well, so if I scroll way down here. This is in the footer on. Then we got permanence. Okay, so I'll just cover permanent quickly. If I click on one of the pages in this website, what you'll see is the domain name at the top here, then extends with a forward slash site build in a day workshop so that bit there fight Building a day workshop is known as the permanent, or least that's what WordPress call it. Now the permanent is really important from a search engine point of view. So as we go through the site building part of this course, I will probably refer to the importance of naming your pages correctly to make sure that the permanent is optimized as much as possible for the search engines to pick it up. So when I'm talking about Perma link, you know exactly what on talking about. Okay, that's it. Sorry about that. That was a bit boring, that part of the course, but moving on through the modules, it gets far more exciting because we get to start to actually install WordPress and build a site. See you in the next module 3. Module 02 - Hosting, Reseller Accounts & Domains : Okay. Welcome to model to this is where it gets a bit more exciting. This is gonna be video led this module, Onder. What I'm gonna cover is setting up ah, hosting account a reseller account. I'm going to show you the account that I use and how it works. Now it's important to note that there are countless other hosting companies that you can use. I'm under. No, I have no agreement or I don't get any money from the hosting company that I use in terms of me promoting it as the one that you should use. But I found it to be very good. Always. There's problems with hosting companies, but on the whole, the company that I use heart Internet have been very good. And I have used them since about 2012. Something like that. I don't host all of my sites on this with this company, but the majority of them I do, because it's it suits most businesses. Some of my premium customers, my bigger customers, my corporate clients. I host with a different company. But the costs involved are significantly higher. So for the majority of your clients, you want sort of mid level hosting company that provides a very good service. Good support. They have a nisi control panel that you can use to set things up. Obviously, the facility to register domains, handle renewals, transfers, etcetera, set up email accounts, FTP accounts. Importantly, if you're gonna be using WordPress, you need a company that does what's called a one click WordPress install, which will cover later on. And ideally, you want to be able to give your clients control panel access if they want it, although it happens very infrequently that they need that on. I always prefer to use a UK based company because I am based in the UK If you're in a different different part of the world, you may want to use a local company to you. Main reason being language obviously, although that's not such an issue these days, because most people will speak English. It's more to do the time zone. If anything goes wrong, you kind of want to be in the same time zone eso things can be sorted out. Okay, so let's launch in a Zeiss a heart Internet is thedc company that I use if you go to their website heart, internet dot UK you Congar 02 reseller hosting and you can set yourself up a reseller account. Now you can see that it starts it £31.49 plus V a T per month. Andi. Obviously it depends on the level of service that you're looking for, but generally speaking, you set up a basic reseller account, and then you can. You can upgrade it later on if you need to, anyway. Now, assuming you are going to go on and develop websites for clients and that's what you want to do, that's what you're taking this course. Then I recommend you do set up a re center account if you prefer. If you're just a business that just wants one side or maybe just a couple of sites, then there may be alternatives available to you that keep your costs down. Because obviously with a reseller account, you're committing to somewhere between 30 and £60 usually per month for the service they provide. But very mind, certainly with heart Internet. Anyway, this may not be true for other hope hosting companies, but that's an unlimited account, so I can I can run hundreds if not thousands of domain names on that reseller account on still carry on. Just paying £60 per month or whatever it is through the deal you get. But in reality probably wouldn't run that many sites on a single reseller hosting count. You might want to spread them over different hosting companies, just in case anything does go wrong with one, then the other, the other still continues to work. And not all of your clients are unhappy out once anyway. So assuming you're going to set up a reseller account once you've set up your account when you log in, then this is what you're gonna be looking at. This is the reseller control panel on day, you will only see this if you have a reseller account, of course, the various options down the right hand side here on the options on the left. Now, pretty much the icons here in this block, um, do exactly the same things as the navigation buttons on the right. I tend to use the navigation on the right mawr than the icons on the left, and that's just the my personal preference. But it's entirely up to you. So you see the sections have broken down into navigate. Hardly do anything. Their order that's relating to any services that you want to order. You might want to order some domain names. Um, some web hosting, premium hosting, etcetera, etcetera. Very rarely do I news anything in this section, Um, manage is where you're managing things that are already set up. Now, this is the section that I use mostly services really to do with anything that goes wrong. You might want to contact thes support department on Go find out what's going going wrong. But on the whole, I go into this manage section on, I will click on reseller Control Center. That takes me to another section within the reseller control panel. You see, the icons on the left have changed. The navigation on the right has changed as well. Now, this is where I can pretty much do everything that I need to do in terms off setting up a new client or managing on existing client in terms of their website. They e mailed the FDP accounts, etcetera, etcetera. Now we're going to go on an install WordPress in the subsequent module, the next module, but you cannot install WordPress unless you've got some sort of host in order to set up your your server on Did install WordPress. Now you can install WordPress locally on your machine on. You'll see a lot of tutorials about how to do that. I don't do that. I never do that. It seems like a lot of hassle in order to run it locally and then have to move it to a service. So I tend to work on what will effectively become the live server off the domain. A. With the website whether the domain is registered or not. Now, if you register a domain name, you can. You can register it through heart Internet, or you can register it elsewhere and then pointed to the heart Internet server, which will go on to later. But let's assuming, let's assume that we're going to register it through heart Internet. You would click on domain names. You would search for your perfect name. Sorry. That's just turn off caps lock. Domain name is always lower case. Anyway, whether you've typed in uppercase, it will revert to lower case. Okay, so we're searching for a domain name called Your Perfect name on. Do you see that? Your perfect name dot co dot UK is available. All of these other domain extensions are available that it's listed here, the dot com it looks as though has already gone. Although your perfect names dot com is available. If I wanted to register that, I could just click add to my basket, go through the check out process on, then I would would own that domain it. Now, I'm not gonna registered that now, so I'm just gonna copy that. Andi, quickly. Just go back to my reseller control panel. Now here. What I can do is I can set up what's called a domain reference. So what that will do is that will log the domain on my reseller account without me actually , having registered the domain, I can either register it later or I can continue to work. Ah, on that domain, even though I don't yet own it. Okay, so you're perfect. You're perfect. Name dot co dot UK and I can click on add reference. Okay. And we just give that a second to process. Okay, so the page has reloaded. Now it says, thank you. Your domain reference your perfect name look hurt UK has been set up to activate Web hosting for this reference. Click here. Okay, so that's what I now need to do. I've registered the debate, or at least I haven't registered the domain. I've set up the domain reference with a view to registering the name later on. Perhaps what I now need to do is to set up a hosting account through my reseller account to use with that particular domain name. So I can either click here or I can click on the navigation over on the right hand side where it says at hosting accounts. Okay, so in my drop down list here, I will see all the domains that I've got that I haven't actually got hosting accounts set up against it the moment. So tha the your perfect You're perfect. Name dot co dot UK appears at the bottom there in alphabetical order. So I click on that. I'm going to set it up as a Lennox server, which I always do if I'm using WordPress. If I was doing any Windows software like using any of the Windows development tools, I might want to set up a windows server, but I have hundreds of domains. Not any. Any of them are running on Windows. I always said it up on Lennox Andi. I set the packages unlimited hosting, which is basically my. All of my clients have access to everything. That's because I control their accounts and I want access to everything. Now. If you were providing a hosting facility to your clients whereby you don't want to give them access to FTP, for instance, you could set up a package that didn't allow that. But that's beyond the scope of this course. Let's just leave it as the default at the moment because that that is how it will be set up when you set up your your reseller account. Okay, so we click, activate hosting. And there we say Thank you. Were posting account activated for your perfect name dot co dot UK to manage your Web posting counts. Click here. So again, we've got access to it on the left hand side. But we've also got it on the right hand side here as well. So I'm going to click on manage hosting. You can't Sorry, had a cool come in there. I'll just, uh get rid of that. Okay, So here here are a whole load of domain names that I've got listed. So I'm just going to search for you're perfect. And that gives me the name I just set up. Now I'll just run through a few things here because because it's important. Now these links on the right hand side here, underneath, underneath control panel and underneath managed domain allow you to do various didn't things. So the control panel customer allows you to go in and change the customer details. So that's effectively the name, um, or email. Sorry, The net. The name You've registered the domain name to the the details that it's registered to. You could go in and edit those. They're super user, which we're going to go into a second gives you access to all of the tools that you need relating to the website itself. Andi, the WordPress install email, FTP, etcetera, etcetera. We're going to go on to that in a second, so I'll just run through these other two so the domain gives you access to the name server details the record, the MX record, all of which you'll know because you paid attention in the previous model module. So you'll you'll know what that terminology actually means s o If you want to make any changes to the to the name server DNS records, that's where you would do it on the CPI means control panel. So that's the control panel specifically for that domain. Now, you pretty much have access to everything within the control panel by this super user link . Whereas if you wanted to give access to your client just to the control panel for this domain only then you would want to give them you would set it up through through there. Because otherwise, if you give them your reseller account log in, they'll have access to all of your domains. Eso Let's get into the real nuts and bolts here. So we're gonna click on Super User. Now, this is going to open a new tab. Okay, so you see, this was the tab that was open before clicking on Super User opens a new tab. Now what you see is that I'm I've now got the control panel. This is the control panel just for this domain. Now, if you have other domains on your reseller account. You'll see them all listed here, but because I've clicked on it from here from this domain name, I clicked on Super User. It's opened the your perfect name dot co dot UK control panel. So you see ah, similar set up left hand side icons, right hand side, some other navigation. Or at least this is this is Mork, not navigation. As such, it's gives you information about this particular domain itself, and crucially, it gives you the FTP set up. Details. Eso This is how you would manage the hosting related purely to this domain so you can see that we've got various file manager tools. This is where we'd set up email mailboxes, mail forwarding accounts. This isn't really covered in the course, although there's plenty of information about this on the heart Internet website itself. We're concentrating purely on developing the WordPress side of things on this course. Web stats and logs gives you tools that will allow you to view how many people visiting your website there are alternatives. Of course, Google Analytics is used by a lot of people, but these are some in built tools that heart Internet provide Web tools, relate more to some of the toad set ups. The database and my suit call, for instance, is the database that will be behind WordPress once we've actually got it set up sub domains . This is where you would set up sub domains if you wanted to do so. Onda. Obviously, you know what a sub domain is now, But very rarely would do you use that unless you were working, perhaps in the corporate world where they might want you to set up a sub domain. But it's unlikely because they probably have their own I t department, where they be handling all of that anyway, Website helped died and diagnostics. I really don't use anything there. I don't use anything of Web resources. I don't need anything in the commerce. I do do e commerce sites, but I don't use any of the tools within here in order to set that up on. Then we get C g I scripts. Now you see that WordPress blawg is the 1st 1 in the list you can with heart internet. You can also in install some other tools if you if you want to, or you want to learn how to use them. Dumler similar to WordPress. A lot of people you know, you're in one camp or the other. Really? You're either WordPress developer or Dumler developer. I prefer WordPress. I've looked at Junior. It looks too complicated for me, But there are junior developers out there, and a lot of sites of built on Dumler. Andi. It's another open source. A piece of software very similar to wordpress, but with different with different features. They have both have pros and cons. Some of these other things you might want to take a look at the view. The heart Internet tutorials related to all of these things. If you if you do want to use them as I say I don't use any of except WordPress. That's the only one I use. Um, ok, and then finally, what we're gonna look at here is FTP because at some point you will likely need to set up an FTP account On an FTP account is always always relates to a single domain. So we're working on this domain. Your perfect name dot co dot UK. So I'm going to set up an FTP account in order to connect to this domain on the server that I've just set it up on, which is hosted by heart Internet. So by default, FTP is locked, and that's for security reasons. Now you have a couple of options. You can either unlock it for a period of time. Four hours, one day, seven days, 28 days, or you can unlock it by I p address. Now, this is the I. P address of the machine that I'm working on at the moment. So if I am, knock it for that I p address. What it's doing is it's saying it will let my machine connect via FTP to this server without any further security requirement. You obviously I'm gonna put the user name and password in, but it's not gonna block me beyond that now if I go home, for instance, I'm working in my office today. If I go home and I connected by my home machine, it will have a different I p address. So I would be locked out. I would have to go in, log into heart Internet, log into my reseller account, log in to, or at least connect by a super user to this domain and then unlock it for the I p address that I was working on, um, at that particular time. So, in that instance, if you know you're gonna be working on a number of machines, you might want to unlock it generally for a period of time rather than a specific I p address. Okay, so what told them I used to connect to FTP? I'm on a Mac, and I use something called yummy FTP pro. Now, there are lots of FTP programs out there on you can download some for free. You can buy them. I I bought this from the from the app store. Yummy FTP pro. If you're on a a PC, I'm not sure if yummy FTP works, but there will be an FTP program available to you and they all work in a very similar way. Um but I'm going to show you how yummy FTP works on. I'm going to add a new account now. So what I'm gonna do is I'm just gonna highlight the in this FTP section here, highlight the user name and copy it. Then I'm going to go to my yummy ftp window. Then I'm going to click. Add That's going to give me another dialog box where it's asking me for the server name the user name password. The port is already set. The local power five got set to to go somewhere that will be by default. When you install, that'll look to something else. But that's basically the local path that comes up in the left hand side of the window. Which will be evident when I that she made the connection. So I've got my user name copied to the clipboard. I'm just going to copy it into the name field, and then I'm going to copy it into the news name Field as well. Then I'm going to go back in Click Click here to show the password and just copy that. So by default it gives you that password. Or at least it sets up a password for you can go in and change that if you want to later on . Or you can add additional FTP accounts with different passwords. But that's the That's the global password for this particular domain reference. Sorry, I pasted that into the wrong place, so just get rid of that paste that into the password field on then finally the FTP server I p address. Now, once you've actually set up FTP on the once you've registered the domain, you may want to use the FTP server ftp dot your perfect name dot co dot UK now because this isn't an actual registered domain, I I'm going to use the FTP server I p address in order to connect to that server because this ftp dot your perfect name dot co dot UK will not work because the domain is not registered. However, I can still connect to it using the using the I P address. Now whether a domain is registered or not, I prefer just to use the i p address because it will just work every time. Whereas sometimes you might get a problem with the ftp dot your perfect name dot co dot UK or whatever domain name you're using that. Okay, so that's it. So I know Click on. Save that, then I just have to go and find that in my list off Two main aims. So then I just double click on it. Just get rid of this in the background, OK, so now what we're looking at is this is the path that I set in. Um, if I go and have a look in here this where it says local party, this is the path that I've set for the left hand side of the window to go to. So you see, it's gone to install standard. So these are just my standard plug ins that I install that will come to you later on eso in the left hand side. We're looking at my local machine the right hand side. We're looking at the server. So this is the server at heart Internet on which this domain is located. So we've got a number of folders here without CG, I've been TMP and public html. Everything is in public html. So you see, there's just one file there at the moment index dot html Um, now, if we were to go to, uh, your perfect domain name dot co dot UK, we won't get anything because it's not a registered domain. At the moment, However, I do have it set up on heart Internet as, ah, domain reference. Therefore, there is a temporary web address. Andi, I can access that temporary Web address over on the right hand side within Thebe Main control panel by clicking on this link visit website. So again it opens a new tab and there it is. Now what that is is the I. P address of the server on which this domain is sitting, waiting for me to register. Now, if I register it and I get it as an actual domain name, that I P address will become the A record. Andi. It can then be removed all together and then and then when I click on that, it will go to a brothel website. You'll you'll see this, but for now, because it's not a registered domain name, we have to put the I P address in front of it in order to get to it. Now, this facility is not necessarily available that every host, but it's a really useful facility that heart provide in order for you to start working on a website without actually registering a domain. So you might you might want to start working on a website, and the the clients has already registered the domain name somewhere else. But you want to carry on working on it on then, point in the domain name over to your server when the site is ready to go. Okay. So when we look at the temporary address, what we see is welcome to your new hosting package. This is your index HTML page. Please replace this when you upload your site. Okay, so that is what's contained in this file here index dot html. I'm actually now just gonna copy it across to my local machine by just clicking transfer. I moved it across to this side. So then what I can do is I can just open it in text editor and show you what it actually looks like. Um, actually, can I show you? Do you sure I can open? No, Sorry. Let's open it in. Ah, word maybe up to access the HTML itself. Okay. Would takes a little bit of time to open on my machine. Okay, So what's gonna happen is if we can see that Great. Otherwise, heaven. Okay, so we can just about see it here. This is the HTML code that's making up. Welcome to your new hosting package. So it's saying center. Put it in the center H one tag which use the heading tag which determines what the font typeface looks like. This is your index dot html place please replaces when Europe so upload your site. So that's simply what that file is. I won't bother opening after all. Okay, So that by default is what's put into your public html folder on That's your hosting package. Pretty much set up now what we're gonna go on and do in the next module install WordPress on. That's where things start to look very different and things begin to get really exciting, see in the next one. 4. Module 03 - WordPress Install: Okay, here we are. Module three, we're gonna do a WordPress install during this module. Doesn't take very long. There's a few steps that you need to follow. We're gonna We're just going to do the WordPress install in this in this module and then go on in the next module to do some or sort of intricate set up of WordPress, the initial set up process that I would go through, but Okay, so let's launch into it. I've got my heart Internet reseller control panel open here. Or at least the dashboard that you would initially log into incidently. If you're not using heart Internet, your control panel may not look the same as this. It will have similar features, similar functionality. But the likelihood is that the navigation will be different. Perhaps some of the terminology will be different, but fundamentally, you should have the same tools available to you. Okay, let's just go through the other things that I've got open. I've got another tab open here, which is the your perfect domain name, dr dot UK, that we were working on in the previous module. And I've got my FTP program open. Let's just ftp straight into your perfect remaining Andi into public html. And there we have it, as we saw from the previous module. We've just got the index html file in the on the server at the moment. Okay, so the first thing to do is to go to Reseller Control Center. Then we're going to manage a hosting account because if you remember, we've already set up the hosting account for this particular domain. I'm going to do a search for your perfect name on and into Super User opens in New Tab. And now we're controlling just the functionality around this particular domain name or at least this temporary domain name that we're using. Because remember, it's not a actual registered remaining. So if we scroll all the way down, what we then find is WordPress blawg. So I'm just going to click on WordPress blawg. It then asks me, Where would I like to put this? Now all of my sites are just placed in the public html folder. So if we go back to the FTP program, you remember that the folder hierarchy indicates that we have a folder called Public HTML. So that's the folder that we're gonna put it in. So in a second, you'll see that all of the WordPress files are going to be located in the right hand side off the window in my FTP program that indicates that all those files on the server now I could write in another folder name there folder if I wanted to put wordpress into a sub folder. Um, there may be an instance where you need to do that. I've never found one, so just leave it as public html for now. So very simply, we just need to click install now. It then presents us with some locations. Now, let me just wait for the pace to refresh area. So it's asking me what? Where I would like this to actually be installed on its asking me. Do I want to use the sub domain effectively? Www dot I want the u r l to be missing the www or would I like the i P address in front of the domain name. Now, if you've registered your domain name Andi, everything's updated. The DNS is in place. You can actually click one of the options. Top or bottom. Sorry. Topple Middle. So www or without Www because this is not a registered domain name. We need to keep the I P address in front of it, and it's important to install it with this I p address in its entirety because that's what will go into the database if you don't click this one. If you click one of the others and the domain is not registered, you will not be able to access the site. You'd have to go back into the database itself, make the change in the appropriate place in order to put that I p address back into it. So just remember to start with, at least if you're playing around with the domain that isn't registered, just click the one with the I P address in it. Now, the other thing that I do is high. Highlight that that the whole u. R l and I copy it to the clipboard clipboard. So come on sea or control, see if you're on a windows machine and I click that now. The reason I do that is because sometimes you need to paste it in order to boys that worked . There we go. OK, sometimes a couple of times you just have to refresh it. Now remember that I'm doing this in real time. I haven't done any rehearsal. Sometimes things might go wrong. So you saw something go wrong there. Which is in a way, is good, because if it happens to you, you'll know what to do. You just refresh, uh, the browser a couple of times, and the installation dialog box will hopefully emerge. Okay, so now we have to answer another question. Do we want a single instant nation multiple sub domain or multiple subdirectories? Now, WordPress on the whole is this. You would use it as a single installation. There are instances where you get a bit more advanced where you might want to use what's called WordPress multi site. That's where you can have a top level WordPress installation. Andi Subsequent WordPress installations underneath it, perhaps in sub domains or or separate folders. But they all connect to the main parents site. It's quite rare. I only have maybe two or three sites that run that multi site set up eso. On the whole, you're always gonna be clicking single. So let's click. Single Andi know you see what's happened is that it's reverted back to the domain name without the I P address in it. Now, that is why I copy that. Hold you are l to the clipboard because I knew that was gonna happen. That will happen if the domain itself is not actually registered. So you just paste that back into the address bar, hit, return or refresh the page, and then we'll be back into the installation. So now we have to do is give it a site title. So that say, you're perfect website. You have to put in a user name, which let's just say this user name is gonna be, um then on the password, it just creates a password for you. Or you can type in your own password, It will tell you, Or at least it will prompt you if your password is not strong enough and encourage you to to use a much stronger one. But for now, let's just just use the password that it's created for us. And I'm gonna copy that to the clipboard as well, just in case my computer doesn't remember it. Then I just need to add an email address on I always click. Discourage Search engines from indexing this site at this point because the site is not ready to go, we don't want it to. It won't go live for perhaps a few days, sometimes weeks, even months, eso during the development stage. We don't really want the search engines to list anything because it's going to change. The u. R L is the permanence may change. Eso at this point is best to have discouraged search engines from indistinct indexing. This site ticked. Now we can just click install WordPress and I'll say, Tell it to save that password, too, to my key chain on and hopefully it'll remember it. So now I put in Ben. This is now redirected me, incidentally, to the WordPress log in screen. So WordPress is installed on Everything's ready to go. Let's just quickly go back to the FTP program where we can see in the right hand side here . Remember, this is the server. If I'm not, if I now just refresh that side, we'll see that the index dot html file has been replaced by a load of other files that end with PHP on day two or three folders as well. Now these are all of the WordPress files that have been created as part of the installation process. So that's what we would expect to now be in the public. Html, uh, folder. So this is good. So now we're just gonna click, remember? And Logan. And it's now giving me an era. For some reason, Sometimes these things happen, Mr Going and try it again. And there we go. It must have just been a drop in the Internet connection for a second there. Okay, so now we are into the WordPress dashboard. WordPress is installed. Everything's ready to go on, and we'll take a look at the components within WordPress on how to do the initial set up in the next module. 5. Module 04 - WordPress Initial Setup: Okay, Model four. We're now going to look at what the initial set up of WordPress. Now, WordPress install Cem plug ins and sets itself up with a default theme. Once you do the installation on the chances are you gonna want to change that? At least this is what I do every time I set up a a new installation. Let's just have a look at the front end of WordPress while we here. I'm just gonna hover over the, uh, website name your perfect website and click right click on Visit the site. So in the other tab, we can see the front end. So basically, this is what wordpress looks like out of the box. This is a fresh installation. I've done nothing beyond the initial install on. This is what it looks like going back to the dashboard. What we can see on the left hand side is the navigator. That allows us to change various things within WordPress. So we've got posts, media pages, comments, appearance, plug ins, uses tools and settings. Now, let's just go to appearance just just quickly so I can show you the themes that are installed as default themes with WordPress, 2017 is the theme that this particular installation is using. You'll see that there's also a 2016 under 2015. Now we're going to go on in. Later module. Teoh Have a look at themes in more detail. I'm not going to spend a lot of time on the on the themes that were installed by default simply because I never used them. It may be that you want to do a really simple installation, and you're very happy with the way that this looks. But I'm going to show you how to use a far more powerful theme that gives you a lot more scope to develop a beautiful website that you can create for your your commercial clients. So what I want to do now is just run through some initial set up that I that I do in order to get the site into a situation where I can then start working and start building an actual website for a client. So the first thing that I do is I go to plug ins and I delete all of the plug ins that are installed by default because I never use any of them Actually, I do use one of them. I use this one called Kismet, but it's I find it just easier just to delete all of them. Incident in while While we're on this subject. This this one here on this one here, jetpack in kids Mick, the kids met are indicating that there is an update available for this particular plug in. So whenever you see that this bar appearing underneath the plug ins and also if I go away from plug ins, you'll see there's a number in Red indicates that there are two updates required to plug ins. Now you may see that number in plug ins. You may also sometimes see in appearances. Andi. You'll also see it in some other parts of the left hand navigator, depending on what is what. What updates are available. So updates would be additional bits of code that the developers have written to work with the plug in. They may be security patches, so somebody's found a security floor in the plug in, so that's been patched and update has been released, so you need to install it on your site. We're gonna cover Maura about installing and updating plug ins later on because there are some considerations relating to that. But they're beyond the scope of this particular module. So let's just go through the initial set up that I follow. That's not to say you need to follow this, but I found it to be good for my work flow just to go through this initial set up. So as I say, first thing I'm gonna do is delete all the plug ins. So they're Goel the plug ins. Then I'm gonna go to settings and I'm going to go to permanence. Okay, so by default, the permanent is set to plane. Now, what that means is that your perfect name dot co dot UK the domain will then be followed by a forward slash on then this funny little bit of code question Mark P equals 123 which is effectively the page numbers for us. The database is concerned. Let's just quickly go to pages. There is always a default page that set up by wordpress. So this sample page has been created by WordPress as part of the installation. So I just opened it in the next tab, and that's what it looks like Now you can see that the page I the Earl the permanent gets built question mark Page underscore I d equals two. Now that's all very well, as far as the database is concerned. But as human beings, we don't really understand it on Google will have trouble understanding that as well. It can't put any contextual information around it, so it can't really index it effectively. So what we really want is the page name itself to be listed there on. Perhaps even if there's, ah, it is a block post. We might want a category to be to be listed there. Andi, be part of the u. R L. As it builds. So in order to do that, we need to change the permanence. So we're going to go to settings Kerman ing's and I change. You can choose one of these other structures if you like, but I like to use a custom structure, which is basically category and posting. Now it's it's ah, within the resources. I'll make sure that this piece of code is in there. It's actually very simple. Once you once you seen it a couple of times, it's basically a forward slash on, then thes symbol. Sure what that similar is, But anyway, it's the word itself is wrapped within that forward slash symbol symbol, forward slash, and then you'll see another one exactly the same. So I just used the same one every time. So it's safe to my computer memory. So every time I just hit that first forward slash there it is. I can just choose it, put it in there and save the changes. So there we go. If I now go back to the tab with the sample page in it where we saw it to be, Page I d equals two, and I refresh that. What you'll see is that the U. R. L now changes to the page name sample page, so you can see we can now build our u R L build. Are you permanence with the page names that we choose which will help us get listed on the search engines? So that's the first change I make the next year. Enjoy. Make makes absolutely no difference at all to the functionality of WordPress. I just find it really annoying that the media, which are all the photographs or images that you upload as part of building or site. They usually get put into separate folders within the WordPress structure, so they get put into month and year based folders. So if you created one in November, it would go into a folder that that had November in the title and the year in the title. Now what? What you end up with is a whole load of a whole load of folders, whereas I just prefer all of my images just to be in one folder. I hardly ever see it unless I go in Virenque TP and have a look in the folder itself to see where the images are are very really need to do that. So in fact, it makes little sense to do this. It's not something it's not vital, a vital part of the set up. It's just that I, for some reason have decided to do it this way. And this is this is how I like it. So I just until that box and save the changes, and now all of my images are just gonna be put into a single folder. Discussion is the next thing that I change by default. WordPress is set up to allow discussion Now. What that means is that people will be able to comment on your content on your page content . Vira, a little form that appears at the bottom of every page. That's true for pages and posts. Incidentally, I prefer just to turn that off. So I antic the 1st 2 boxes. Tick UnTech. Anyone posts to comment? A tick comment. Must be man nearly approved. Andi. Save those changes Now what that's effectively done is turned off comments. If I wanted to turn comments on, I can do, and I can do it on a page by page basis if I want to. But I have. Do I have any side? I don't think I have any sites. It'll that allow comments on them. It's just it's a feature of WordPress. You can choose whether to to use it or not. I prefer not to use it on them. All of my clients prefer not to use it. It becomes a bit of a management headache, but suffice to say, the feature is there. Should you choose to read it? I just go into reading. There's nothing that I actually change here, but I just wanted to point out that if you remember us part of the installation, we asked WordPress to discourage search engines from indexing the site s Oh, this is that tick box. When we actually make the side live, we're going to come back to settings and reading, and then we'll untech that and save the changes. Then the site will become visible to the search engines. Then the only other thing that I change is part of the set up is I go to the General tab and I take out the tag line, which is automatically put in there by WordPress. You can use the tagline feature if you like. Do a search on the Internet to find out exactly what the type tagline does. Andi. It may or may not be appropriate for you to use, um, but if you if you notice within here, it says you're perfect website. Just another. You can just about see what that says, but that it's getting that just another from from what wasin the tagline. So if I remove that and save it and refresh the page, you'll see that now it's just become your perfect website. Without that additional bit of text on it, so you can see how the taglines actually use from that. If you wanted to, you can You can use the tagline and it will become part of the, uh, the website title effectively. Okay, so that's that, Andi, We're just now quickly going to have a look, a plug ins. There's no plug ins, a tool. I am now just going to replace the plug ins that I use or at least not replace them. I'm going to install the plug ins that I use as part of my initial site set up. I have a standard set of plug ins that I've saved. Thes are plug ins that I use on pretty much every single site. Some sites may have additional plug ins to this, but but these are the core ones that I use. So I'm just gonna copy those across, and that will be the end of the initial WordPress set. So in order to copy them across, I have to go to my FTP program. I'm already logged in here. Now the plug ins are located. Plug ins and themes, incidentally, are located in this folder called WP Content. So I'm gonna open that you then see that you've got a plug INS folder and the themes. Father. If I open the Themes folder, you'll see that the three themes that are installed by default 2015 2016 and 2017 are listed there. And if I open the plug INS folder, there's nothing but an index dot PHP file. So it's just a name that is in fact, just an empty file. So now what I'm going to do is just grab all of the plug ins from my standard in store folder and transfer them across so we'll just wait a second. While they're just copying across to the server, it says it's going to take five minutes. I don't It shouldn't take quite that long. Hopefully, I have a nice first Internet connection. What you gonna take longer than that? Now it's indicating. So this time I found to be not very indicative of what the reality actually is, usually happens a little bit closer quicker, but it will obviously depend on your Internet timers toe How long this takes because it's moving. It very minded is actually moving it to server somewhere else in the world could be anywhere in the world. So it's travelling across the Internet on moving all these files across to a new computer. Okay, so while that's doing that, I'm just going to refresh, so you can see a few If I just refresh this page now, you'll see that a few of those plug ins are now coming in on. Eventually, they will all move across. And that will be my initial set up complete now, in the next module. What we're gonna do is we're gonna look it the WordPress dashboard in a bit more detail. We look at themes in a bit more detail, will install another theme, which is gonna be the theme that I used to build. Pretty much 99% of the sites that I build. Andi will also activate some of these plug ins so you can see how they actually work. Okay, See you in module five. I think it is 6. Module 05 - WordPress Dashboard, Themes & Plugins: Okay, Module five, we're gonna look at the WordPress dashboard in a little bit more detail. We're going to look a plug ins and a bit more detail on themes on will actually go ahead and install a theme. We're going to install the theme that I used to develop the majority of the websites that I build. It's one that I found to be incredibly powerful. Very well. Support is Andi. I haven't really found anything that I can't do with it yet. Themes? Um ah Berry. Basically, film teams berry in their quality on they very in terms of how constrained you are in terms of using them. So if you want to go on and build commercial grade websites whereby the designs are likely to be very different, one to the other. But you want a single tool to be able to build all of those sites than the theme that I'm going to suggest you look at is a very good 12 To start off with, you can go to Let's have a look at where I get a lot of my themes. There's a site called Theme Forest. If you have a look at theme forest dot Net, and you do a filter on WordPress. Then you will see all of the thousands of themes that are available for for WordPress. So let's have a look. You can break them down. Block Magazine, for instance. WordPress Blogging magazine themes. If you If you filter on that category, you'll then come across all sorts of themes that you can have a look out. See if you like styling off them, see if they're going to be good for the project that you're working on, and it may be that they will be. You can buy the theme, install it as I'll show you how to do so in a second Onda and you know you may well be able to build a really nice looking site. Using those themes, I found that the site that I sorted, the theme that I use is a thing called Nevada. Um, idea it doesn't exist. That's because I'm filtered on the, uh, category for blocking magazine. Andi, it doesn't really come under that. So let's do a search. Four of our tourism or global search. Whoops. OK, so there it is. This is the theme that I'm going to install and show you how to use throughout this This this well, the rest of this course, really? So it's incredibly popular theme on theme forest. You can see by the rating on the number of downloads that it's an incredibly popular theme . Have a look. I'm not gonna. It's outside the scope of the this course, really to go into too much detail about how theme forest words. But there are countless other sites where you can buy themes, for instance, on their also countless free themes. That's something all covering just a second. And maybe that you've confined a feat theme that you don't have to buy that will suit the purposes of your particular project. Okay, so let's go back to your perfect name dot co dot UK temporary website that we're in the throes of building. First of all, I just want to run through the WordPress dashboard. So let's some assume we've just logged in, and this is what we would be presented with. Now, this this initial pays just gives us some initial bits of information about WordPress. I pretty much move away from this page straight away. I don't don't really do anything on the dashboard itself. From this, at least this opening page you'll see in the left hand side. We've got the words standard WordPress navigation. Now, when I install the new theme of ardor that we're gonna be looking at, you'll notice that there's a lot more navigation appears in the left hand side. As soon as I install and activate the theme that will all become active. And also where, whenever I activated plug in there may be an additional navigation button that gets inserted here somewhere. It's part of the plug in there. Usually relate to some sort of configuration options that are related to that plug in or, in the case of the theme there, configuration options relating to the theme or some functionality that the theme offers in addition to the standard WordPress functionality. Okay, so first of all, let's have a look at, um, appearance and themes. So if we go to appearance and themes with we've seen this before, whoops flipped a wrong button thes air. The three themes that are installed by WordPress as part of the instantly should. These are developed by the WordPress developers themselves, and they're just standard default themes that are often used by developers actually to go on and develop other themes. That they used these as the as the core bits of code that they then go on and develop other themes. Now you'll notice here that we've got an option to add a new theme. If I click on that, it then opens another screen whereby I can either search for free three free themes that are available to me that have been not really that well tested by WordPress, I would say, But there at least past some source of criteria. They passed through some sort of filter to make sure that they know full of security bugs, etcetera, etcetera. But nevertheless, bear in mind that these are free themes. They have limited functionality. They may well suit the project that you're working on, so by all means, have a look at them. But I would always advocate using one of the premium themes that has more functionality and in particular, if you if you really want a head start on Web development, then just just use Avada because there's there's not much wrong with it on, and you can create some really, really beautiful sights with it. Andi. It will enable you to get to a point in your Web development career that would otherwise perhaps take quite a long time to get to if you go through the process of of using some of these other themes. Okay, so how do we install a theme? There are two ways of doing it. Basically, you can click this button here, upload a theme brown's either to your somewhere on your hard disk or somewhere else on the Web, where you where you got the theme installed and that would be a zip file format. Um, the other way of doing it is to basically just use FTP and copy across the theme to the folder, which is the way I'm going to do it now. So I'm going to navigate through FTP. I'm going to go to the Themes folder within the WP content folder. We see the three that are already installed, and then I'm going to navigate back through my folder structure on my local machine to my Web development folder, My themes. And then we see the Avada 571 I think there's actually a 572 because Obviously, the themes get updated all the time, but I'm just gonna copy that whole folder across there. Now there is the option, and you may well want to look at this off installing a child theme. Child themes used to be used in the past a lot, because if you wanted to make any changes to the functionality of a theme or make any changes to some of the styling of the theme, then you were encouraged to do it in a child thing. The reason being is then, when the core theme itself was updated, it would not overwrite any of the changes that you've made now with avada, I found that the there isn't really any need to use a child thing, because it does. It's so powerful anyway, it's highly unlikely that you're going to need to make any changes in a child seem in order to that would otherwise be overridden when the the core theme gets updated. So I find that although I'm still using child themes on a lot of my sites, I think it's outside the scope of this particular part of the course to to teach you how to use child themes when in fact they're really not that necessary. So I would suggest just, at least initially, just carrying on boulevardier on the site. Install Avada in its own folder on Dumbed. You won't have any need to use any child theme, so that's just copying across now. Andi, The reason I've done this by our FTP, rather than uploading the ZIP file, is because when you upload the ZIP file, you then subsequently can't change the folder name unless you go back into FTP and then change the folding. I like to change the folder name, and I like to call the folder that the theme is located in. Give it the same name as the website itself because then if anyone does actually go in and look at the code they won, they don't see the theme name necessarily on it just looks a little bit more professional. So eso really that's the only reason that I ftp across because I know that sin is it's copied across. I can then very easily just changed the folder name before I activate the theme eso. So the folder structure within my wordpress installation is is the way that I prefer it to be. So I'm gonna change that folder name as soon as it's copied over to to be your perfect name . So I'm just gonna copy that out. Save me typing. Okay, so that's now almost copied over. Just waiting for for that to complete, I should get. Excuse me. I should get an indication. Assumes that's completed. Okay. Still waiting. Still waiting right again. This is obviously going to depend on your internet speed as to how long this takes, but there we go. So that's that's all across now. Now, that's actually quite a lot of code. Just moved across there, so I'm not sure exactly how big of arteries. But if I expand it, it contains a lot of other files and a lot of sub folders within their. So that's now all copied across onto my server. So what I'm now going to do before I activate it is just rename it two groups to the to the name off the site itself. Now you can rate you can make it any name you like, but what you mustn't do is activate the theme and then rename the father first of all, renamed the folder, Then you can activate the theme on. Everything will be in the right place. So now if we go back to themes from the WordPress dashboard, we can see that we've still got the three that we had installed by default. But we've also got one called Nevada on A soon as I activate this. Now then, this front end is going to look very different Before I do activate the Varda theme. Incidentally, remember, we've got 2017 listed at the moment. Let's just change to 2015. I'm gonna activate 2015 instead of 2017. So in order to do that well, I have to do is click activate. Okay, so now 2015 has become the active theme. I now go back to the front end and refresh. You should see everything changed as soon as it's loaded. Okay, so there we go. So now the site looks very different. The content hasn't changed. All I've done is activated a different theme. So this demonstrates very well that the design layer on the content layer within wordpress is separate. That's because if you remember way back to one of the earlier modules, I mentioned that the content is held in the database. Now the design is made up off the some of the files that are contained in the theme folder itself. So some of these files drive some of the content, but also something called cascading style. Shoot is driving the stein ing as well. So cascading style sheets would control the typeface the size of the type, the background colors on the pages, etcetera, etcetera. So that's why you can switch from one theme toe another, and it will not affect your content. Now there is a caveat there because one theme uses certain methods of presentation. Another thing might use a different method. So if you do switch from one thing to another, there is some functionality that may be lost. So you've got to be very careful in doing that. My advice to you is to avoid doing that, although if you're using some of the very basic things like 2015 2016 or 17 then the chances are pretty much all of your content will be retained. It may just know will be visible in the same place, that's all. So whenever you can just just try and stick to one thing to the theme that you're going to use. Install it activated. Build your site with it, and then don't change the theme afterwards. Okay, so let's activate Thea Varda theme now and then you're going to see some additional components appear in the left hand side. There we go. Have activated the theme. As soon as it refreshes, you will see those additional components come to life. Okay, so here we go. We've got the Varda no listed at the top. We've now got a separate navigation for Avada. We've got something that's indicating that there's a an update required, which is the red dot. If you remember, I just click on that. It's going to tell me that there's a patch available. This is a feature that is in some themes, but not all. So don't expect to see this in every single thing, but it's saying that this dispatches fixing some problem with commerce so we can just apply that patch at some point in the future. I won't do it now, but that's just indicating that there is a software update available. We've also got another notification box up here saying begin updating plug ins. Now, if you remember, I've already copied across. We go back to the plug in folder already copied across all of the plug ins that I like to use on a new installation. Now that includes to plug ins that are specific to of Are they come with the Varda, their passive avada on. They don't come with any other theme, although I have a feeling some other themes are being developed on using these, the fusion builder Infusion corner. So we'll go on to see what what those particular plug ins do later wrong. But for now, what it's saying to me is that I need to update some of these plug ins. So let's go to let's click on Begin updating plug ins now. What that's going to do is it's going to go to another page and it's going to show me which plug ins are requiring an update Now if you If you see that it says here, premium plug ins can only be installed and updated with a valid token. Now, this is on attempt by theme fusion the developer ah of Obata to ensure that people are buying and license for using their theme, and it's important that you do buy a license to to use the Varda theme because obviously that supports the development of it. It enables updates to be released on. And it means that your theme on therefore your your business, if you like, because it requires only requires thes themes to cooperate as if you're a Web developer. Then everything gets updated and, you know, as new features come on on, you can you can access them so it's It's very good. It's a very good idea to buy the themes. Obviously, you've got to buy one in the first place anyway. But try and buy buy 14 for each installation. So I'm just gonna grab one of my registration keys here on. Just put that registration in because without that registration you cannot actually update the theme, and you cannot update any of the plug ins within their within it either. Okay, so now I've just put that registration in. I'm now going to activate fusion core infusion builder, and that will then get rid of that message that we're seeing as part of the set up. So let's activate fusion core and activate fusion builder now I could have activated those by the plug ins link here, but this is This is always what you see when you initially set up avada. So you know it's tends tends to be the case that that I do it here now it's now because I put that registration key. And it's also saying that there's an update available because I've installed the registration key. I'm able to run the update, So I'm gonna update fusion core that will just go away and do some code updates, and then it's gonna refresh the page, then go on, then click on return to require plug ins installer. And then I can update fusion builder as well. Now, while that's updating, you'll notice that the fusion Patch ER has now gone from 1 to 2. That means as a result of updating the plug ins fusion core, another patch has become necessary because obviously it's a patch relating to fusion called plugging, uh, problem. Anything else, So okay, so that's completed as well. So now this. Let's go to the fusion patch er, and we can apply that patch so it looks like it looks like one of the other patches, words already applied as a result, probably of updating the fusion core plugging. Okay, so that's now eliminated the numbers. Next diffusion patch er, but you can see we've already We've still got numbers next to plug ins themselves. So let's now go to plug ins and it's showing that I've got updates for various plug ins that I've got installed. Now, this is the list of all the plug ins that I've got installed. But you notice I've got the option here to click on update available, and that will then just show me all of the plug ins that need to be updated, and I can update these all in one go. I can either just click each one individually, or I can click the box next to Plug in, which then ticks all of them like and then use the drop down list and choose update and then apply. And what that will do is it will go through an update every single one of those plug ins that is selected Onda and hopefully will then be will then be good to go. Now you'll notice that none of these plug ins air actually activated. I have only activated to plug in so far. And they were fusion core infusion builder As part of the initial set up off avada itself. Let me just wait for these other plug ins to update. What I'll do is as we go through the site build module, I'll activate the the plug ins that I use a Z part of that bill process as as, and when we need them, I will actually just activate one plug in. Now on. That's gonna be contact form seven because I want you to see that the navigation on the left hand side here is building more and more. It's getting more, more extensive as we add things to the installation. So if I now just activate contact form seven, you'll notice again. Another thing just popped in here contact for Okay, so that's because I activated that contact Form seven. Now if I If I had now deactivate contact form seven, that will then cause that to disappear. Andi, If I delete contact form seven all together, then it's no longer that obviously I've done that because I just want to show you another way of installing a plugging while I'm here. Remember, we installed the plug ins using FTP. I actually just copied them from my standard installation, which I, which I've got, um, on my my computer here. So these were the core plug ins that I've used, and I just copied them across. There is another way of adding plug ins. You can just go to plug ins and click add new. You will then get the option to upload a plug in again in a a similar way to uploading a theme. If you click on upload pro plugging, it will encourage you to browse on. Find a ZIP file that contains the plug in. The alternative is to do a search for a plug in. There are literally thousands of plug ins out there that do all sorts of things. If there's something that you want to do on a website, chances are that there's been a plugging developed for it Now. Plug ins bit like themes. There's good ones. There's bad ones. There's free ones. There's ones you pay for. There are there are ones that you can get for free and you're encouraged to donate to. There are others that you get a certain amount of functionality for for free. And then when you pay them, you get the full pro version, as it were. So have a look around the plug ins. I very rarely use additional plug ins, uh, plug ins beyond beyond my core set of plug ins. I have very few sites that run any other plug ins. Theo nly one being perhaps e commerce sites would run something called Wu Comus. Andi. I have some sites that show events, so I might be using an event plugging. But I'm now just gonna put Contact Form seven back. So I'm going to do a search for Contact Form seven because it's one of the free plug ins. And there it is. So if I now just click, install Contact Form seven, it will then put Contact Form seven back into the folder hierarchy. So well, I didn't Actually, If I refresh it now, it's too late because it you wouldn't. I've installed it now, so So there it is. It's still now, but it's not active. So, having installed it, I can now just activate it from this point, and then we'll see that the navigation for the contact button gets put back in. Okay, so So that's pretty much the initial set up over Varda. Um, we're going to go on and look at the the options available in Nevada. Each theme has its own theme options, so it may not be it may not be at the top. Sometimes it might be down the bottom or even in the middle. Or sometimes it might be in appearance. But generally speaking, when you install the theme, there's usually a theme options navigation button that allows you to go in and change all sorts of styling. And you can see that the options available in Nevada are quite extensive. We can change the colors, the header, the menu, the logo page title bars. And so we're gonna go on As we build a site. We're gonna go and look all of these things in more detail. But let's now just have a look at the front end. Remember, this was using the 2015 think theme I think it was. If I now just refresh that it's going to look completely different, and that's because the theme is driving the look of the site. It still looks. It looks pretty nasty at the moment because that's how it looks out of the box. We haven't developed a site yet. We've just installed what I would call the toolbox rather than a theme we've caught. We've installed a toolbox which is subsequently gonna allow us to go on and build a really beautiful sight. It's gonna be a fairly simple site to start with. The first site build module is is just gonna cover a fairly basic site and then in a module subsequent to that, I'll go on and on layer Mawr advance details on top of it to show you how you can really start. Teoh, get your sights looking great. Okay, that's it for this module. 7. Module 06 - Basic Site Building Workshop - Part 1.: Okay, Welcome to Model Six. This is the model where we really start to use the tools available to us and we're gonna build a site. We're gonna build a fairly basic site to start with, but you'll learn how to use a lot of the tools within Nevada in the process of building this This site. Now, the first thing I'm going to do is I'm gonna have a look at the dashboard, and we noticed that we've got a nup date indicator. So it said that telling us that there is something to update, so let's just see what that is. It turns out to be the theme itself. So Avada 5.7 point two has been released. Eso We're going to just quickly update the theme before we start work. You don't have to do this. It will still work with 5.7 point one, obviously, but I just prefer to keep everything up to date as I as I go along. Now, it occurred to me that I hadn't actually really demonstrated properly how to download a theme from theme forest. So let me just quickly show you how to download a new version of the theme because I've already got it on account. I'm logged in. I'm going to go to my downloads and I'm going to see all of the things that I bought. Eso provider appears of quite a few times. So here's Avada. This will be the latest release. Now I'm going to choose to download all files and documentation. I can actually just download the install WordPress files if I like, but I kind of just by habit, just click on files and documentation for some reason. So now I'm gonna look at my Downloads folder. We can see that it's downloading. And here's the file that downloaded. If I double click on that, what it does is it opens and it installs this folder instead. Is it expands to this folder. Now you'll notice that we've got the license in here. Some extras, which are I don't really use don't really use any of this. The key thing that we need is Thea Varda theme. Now, if you download a different theme, the structure the folder structure may be different, but fundamentally, within that folder structure, there will be the theme somewhere. So if I double click on Nevada theme will see that we've got a vote of our child themes it on Nevada's it. Now it's the ZIP file that I could upload directly to my in appearance and themes. But if you remember from an earlier module, what that does is it will put the theme into a folder called Nevada. So I just expand that on DA If if I open that now, what it does is it. It expands and it gives me the theme itself. All the theme files expanded, so it's that it's those files that I then subsequently ftp across two Thesis server. No, obviously, I've already prepared this somewhat. So I've already got those files here about a 5.72 So I'm just gonna go to my public HTML folder WP content themes. And then I'm going to expand your perfect name because that's the folder name that I gave it rather than Nevada. And I'm just gonna select all from the left hand side and click transfer. Then it's gonna ask me if I want to overwrite this. I just say yes, overwrite everything. So what that's now doing is updating the theme itself. All of the theme files will be overridden with the new version, some of which will not change, some of which will have changed. So it's best just to copy everything across and everything gets over written written on, then obviously the hopefully the update indicator will then disappear. Okay, So while that's doing that, I'm just going to show you quickly the site that I'm going to build. Um, just a sort of screenshot of it. This is just something I found on the Internet. It's got a nice header. It's got the navigation. It's got some elements in there that are gonna allow me to show you how to use the tools within of Ardo on within what's called the fusion builder, which allows us to create these kind of page layouts. Um, it's not gonna look exactly like this. Obviously, I'm gonna use slightly different images, but more or less than layout is what we're going to end up with something, something along these lines. Eso that's that's what we're going to be shooting for. So I'll just leave that open. I think so. We can see it and you can see how how things are going as we working through it. It's just checked the progress of the theme update. Okay, it's Ah, it's got a little way to go now. I've obviously also prepared all of these images in advance just to save time. Really, The image preparation is a little bit outside of the scope off this course. There's plenty of information on the Internet about how to prepare images if you if you want to turn and you will need to learn how to prepare images. Incidentally, I tend to use Adobe Photo Shop for most of my image preparation. Andi I I find images on places like Istock photo or shutter stock, where you can buy really good quality images to use on your websites. I advise you not to download them from Google and use them on sites because obviously there are copyright issues relating to that. But generally speaking, an image needs to be optimized to be used on a website. If you have a nice big image fresh out of a camera, it'll probably be somewhere between five and 10 maybe even 15 megabytes, maybe even bigger. Coming out of the high resolution cameras. That's way too big to use on the website. It doesn't need to be that big because the display cannot actually show all of that detail anyway. So what we do is we optimize the images. I would suggest that you save most of your images to something like 2048 pixels wide on saved temas compressed J pegs. That means that you should end up with files that's going to my images, that I've already prepared image files of around 250 to 500 K This one's 5 94 So that's Ah , that's the one of the bigger ones. Now this one here, which is 1.2 megabytes, is actually a transparent PNG file, so it can't be compressed quite so much is the J peg on, So I may not use that on the website build you better off using J pegs. There are occasions particularly like with the logo, where we will have to use a transparent PNG so weaken sitting on top of been image. But obviously that's Ah, that's a much, much smaller file the logo that I've created than the mounting background image, which is which is that one there. So you have to have a look at the images that you're preparing and make sure that you can get the fire size down to something acceptable. Otherwise, your website will end up being really, really slow. So just go onto the Internet. Do a bit of research about how to prepare images, probably properly for the Web, and you'll find lots of information. Okay, so that's now copied across. I'm just gonna refresh this page. Onda Avada should now at least the update indicators should disappear. Okay, so now it's saying as a result of doing that update, it's now saying that there are also updates to both fusion builder and fusion call, which, if you remember, are part of the Varda. So I would expect that to be the case. So I'm just gonna select all and click update plug ins, and that will then go away for a second Andi update. The plug ins as well. Now it may be that we then subsequently get another indicated to say that there's a a patch that's required to be updated. A swell. Let's just see how that goes. Okay, so that's updated, and it doesn't look as though we've got anything else to update. OK, so now let's go to our front end. I'm just gonna refresh the front end. Okay? So, as I said, this is, um this is Avada out of the box. This is what it looks like out of the box. I obviously would want to change the logo. I tend not to use what's called the page title, which is that section there on this is currently set up to, uh, display a block post as the home page. So the first thing I'm gonna do is I'm going to create a new page. I'm not gonna put anything on it for the time being, but I'm just going to call it home and I'm going to publish it. So it's a simple is that I've just called a page home and I've published it as a page. Then I'm gonna go to settings and reading, and I'm going to change the home your home page displays to a static page and select home. So that has now become the home page, the first page of my website. So it's the one that three user would land on as soon as they hit your domain ing. So if I now just refresh this page. We'll see that the block post goes away and it's replaced with home. So that's just a blank page in a blank, a blank home page. Set us the is the first page that the user would see when they hit your website. Okay, so when I've installed when I installed of Arda, the theme options are set up as a Varda have programmed them to be so various aspects off the optimized theme customization options are already set. So we've got you know, the colors are set. There's a color set the head or reset to a certain setting. Um, the logo is set to Nevada. All of these things are just the default set up. Which more or less well, yeah, 100% of the time. You're gonna want to change some of these elements, particularly the logo. Probably the colors, some of the spacing options, all sorts of things. You're going to want to change now. Obviously, I've been doing this for a while, so I have my own preferred set up. Um, and in Nevada, there's a very, very quick way to import your default set up. So you can overwrite the Varda set up very, very quickly on the way you do that is, you go to Nevada theme options and import export and click on import contents from a file. Now what you have to do now is paste a load of coded code in here in order to import those settings on and the code I've already I've got. I've saved Asus part of my notes, basically. So let's trust try new of other new theme options. Now I'll make these part of the resources for you. So if you want to, you can have a go it doing this. So there you are, pasted that code in there, and it's just a lot of completely You cannot understand what all of that does, but basically it's just changing a lot of the settings in the theme options. So I'm just going to click import Andi. That will then go away. Andi, Just after a few seconds, it should report that it's done okay, settings imported, imported. So now if I go back to the front end and I refresh, we'll see that it looks completely different. Okay, so the logos gone. The page title is gone. The covers have changed the footer and is a different color. It's in thin, light, gray color, although actually that's not footed. But we'll come onto that later. I've got some different text in the copyright section, so I've got a site by indicator. Now, all of these things you can once you've settled on your own theme options, perhaps you go through and you you find you develop a site and you're really happy with all the theme options that you've got and you want to save them. You can then actually use that same tool import export. But in this in this instance, you would then export the options so you would copy the data on there. It all is. If you then just copy that to your clipboard, save it to your note pad where of you or ever know to whatever you use to save notes on. Then you can use that code to import into your next site, and you will have all of the set up options that you're familiar with that you're happy with. Okay, just to say once you do that a few times, it will become really, really easy. It looks quite complicated, but in fact it's really, really easy. So, um, don't worry too much about that at this stage. Okay? So let's go in and start building this page. So this is thesis ICT that we're going to try and build. Let me just get rid of some of these things, so it doesn't complicate the view. Okay, so this'll site is made up, We've got some logo, some navigation. We've got a big head or image. Then we got another section with some text. Theun Cem left and right. Images, right. Images left, text right, etcetera, etcetera. So let's go through and recreate this on our home page. So the first thing that I'm going to do is I'm gonna put that head or image in place. Andi, I'm going to start to use some of the tools within Nevada. So by default, this it WordPress if you type into wordpress, that's what you what you get. You just type in some text. Now, we don't have any tools inherent within WordPress to create these kind of sections on the page and this layout This left and right columns based layout. However, fusion builder, which is part of the Varda gives us those tools. So if I now just click on this big blue button edit with fusion builder, will see that everything changes. We've now got something that allows us to create what appears to be called a container. So let's click on that, Andi. Now we've got an option that appears to give us options to create columns so I can have one column the full width off the page. I can have half and half column. I can have third columns and so on. There's pretty much infinite options there it from one column through to six columns. Onda A lot of divisions in between. So, for instance, yes, a 4/5 on the 1/5. So you can see that by using these tools, we can lay the page out in the way that we want to in order to achieve this this page layout. So the 1st 1 we're gonna do is obviously the header on. That appears to be just one big image on the top. So let's just put one column in there now, In order to get this text on the top of this image, I cannot put the image in as part of thing the content. I have to make it a background image. So what I'm gonna do is I'm gonna make it a background of the container. Now. Importantly, each section on the page is made up of a container which then contain, which then contains the columns. Now I can have one column or I can have two columns, Three columns, four columns, five columns, six columns. But those columns are all contained in one container on defy. Then want to make another container? I can do so and I can split the columns in a different way. So first of all, let's put the header image in the background of the container. So what I did there, I just clicked on that little icon there which appears to look like a pen. Um, these are really the main tools you're gonna need. Instantly you're gonna get familiar with you're gonna click on this pen, toe edit or this other icon here, which is kind of a plus sign on top of a piece of paper with lines on it, which allows you to clone the container and we'll come onto cloning that contain later on, but fundamentally, what you're going to be using most of the time is this one with edit on. Now you'll notice that there's one of these on the container. There's also one on the row, which is this single road here on. Once we put an element into the row will also get another set of thes same icons. They do the same thing in terms of allowing you to edit whatever element you're you're clicking on. So that's contain Let's edit the container. Andi, have a look at what options we've got here. So we've got three tabs on this particular container here, so let's have a look what they do. We've got options to set the height options to set equal column heights. We've got a background tab when we got a design tab. Now we're gonna go on to look at what all of these things do later on. But first of all, what I'm gonna do is I'm just gonna very quickly set the background image, so I'm going to click on the background tab. I'm then gonna go to background image and upload an image. Now I'm gonna search my hard disk. Four the images that we looked at earlier, and I'm going to find that image that I want to use as the background header. So I think it's this one Alaska Heather, which is the one I prepared. So I just double clicked on that, and there it is, is uploaded. Now you'll notice that it uploads as us and says the sizes medium 300 by 147 depending on what your image sizes will determine what actually appears here. But I want to use it is full size. So I'm going to click the down the drop down and just select full side. So it uploads this in the biggest size that it can in this image happens to be 1920 pixels by 938. So I'm gonna insert that into the page and I'm going to save it. You see that we don't really see anything because it's set to the background of container at the moment. Now I'm just gonna update that on we go and have a look how that looks on the front end. I'm gonna refresh the page, and the chances are that we won't really see anything might see everything. Okay, so we see a thin line. Now, that's because the container has no height at the moment. So now what I'm gonna do is I'm going to collect this. Click the element within the row. Remember, we've got the container and we've got a row within it. And it happens to be a full width throw at the moment. So I'm just going to click the element and I'm gonna put in the words Welcome to Alaska. Now, these are all the tools that are available to me to insert into a row. We'll use these as we go through the course, but obviously you can have a look to see what options are available to you and have a play around with them whenever whenever you like. But the one that we're going to use at the moment is called text block. So let's choose the text block, and we're gonna right, welcome to Alaska. And I'm going to now highlight that and set it as an h one tag because I wanted to be a nice big heading and I'm going to set it to be centered. Save now if we update that Although we're gonna see that text on the image. It's still no ideal because it still doesn't really have any height. Okay, so there's the word. Welcome to Alaska. And there's the image. It's got a bit bigger because we put in a nice big welcome to Alaska. A bit of text. Okay, so now let's go back and edit it a little bit further. I'm also gonna put in underneath there. I'm gonna put in official state off the Lasker Vacation and Raval Information website, and I'm going to send to that as well when I'm gonna make that perhaps h three. Okay, let's update that when you can have a look, you can have another look. Sorry. If you can hear sirens in the background perfectly. It's just passing by. Okay, so there we are. So you see that it's building thean Midge is getting a little bit bigger, although it's still no ideal. We would want that to be, um, much higher. So in order to put that fighting, I'm gonna put some spacing into the elements. So I'm gonna add something called a separator, and I'm gonna change the style to know style. Then I'm gonna hit the design tap, and I'm going to say the margin 200. Okay, so that will give me 200 pixels of space underneath that text. Now, what I'm gonna do is your notice that on these elements, we've also got the little pen symbol and also the clone symbol. Don't worry about these other two for now, but don't don't click them. If you do click them. It doesn't matter. But you don't. We'll cover those in a bit more detail later on. But it's mainly these two we're gonna be using in this part of the course. So this is where I would edit that element. And this is where I can clone it now if I clone it, basically what happens? It just duplicates it. It becomes becomes another one. So now we've got to separators underneath the text. But ideally, what I want to do is put one separated on top, the text on another have another one underneath. So what I can do is I can just click on the element away from these icons, just click on the element and literally lifted up and drag it and put it on top off the text. so now, like an update it. And now if I refresh, we see now that the text is nicely in the center. Andi, there's a bit of spacing, top and bottom, so this this is now beginning to build nicely. One thing you will notice, of course, is that it's not the full width off the screen. Now. It may be that you wanted to be the full width of the screen, and if you do want to do that, then that's fine. But your image is doing it. Using this method will need to be quite big, quite wide, in order to show across the full width of the screen. If somebody is viewing your website on a very, very big monitor with a high resolution that it may be that the image itself gets cut off, left and right, there is a different way of doing this, using something called a fusion slider, which will then automatically stretch the image regardless of the Vieux port size. We're gonna cover that in the more advanced module later on. But for now, let's just continue with this method because I can show you how to stretch this image for the majority off users anyway. So let's do that now. We'll go back to editing the page. Now you'll notice that over on the right hand side, we see something called Template, and this is currently set to the default template. Now the default template will basically put everything in what's called the grid. So this is the green. It's a fixed with Andi. Nothing else outside of that grid will will show. Now you'll notice that at the bottom here, where we've got the footer, the footer is currently set to be 100% width. So if I now make my image my view, port my browser much wider, you'll see that the foot is stretched. But the image itself stayed in the grid. What's called in the grid? So it stayed where it waas. Now, in a lot of the time you want that because you want to be able to control where things are placed on the page in the footer. It's not so s so much the case, but but certainly parts of the prayer page you're gonna want to control the, um, the placement of either the text or the image now in the header with is particularly when you're using a background image like this. The chances are that you will want it to stretch across the full width of the page. But you'll want the text to stay in the grid, and that's perfectly possible. Now let's go and set this on the container. So we're going to set the Have a look at the container, first of all, so just click on Edit the container. Now we've got a couple of options. One is 100% height. One is the background position sent a center. So here we can change the the position of the background image. Um, I'm just looking for something here that I'm not saying. I know what I'm not seeing it now. Okay? Going back to the template when we bought default templates set. There's just click that Has that dropped down Andi Instead of default template, let's select 100% with and just update that. Okay, so now if I go into the container, the options would be slightly different. I've now got on option to set the interior content with you, see if I can then set the interior content with 2 100% with or the site wit, which is in the grid. Now, what we want is the background to be full wit on the interior, content where the text is to remain in the grid. So let's leave that as it is. But that's where you would change it if you did want the interior with to be full width as well for the text before with. So now let's just refresh that and see what effect that's had. There we go. So now we've got that full width. Okay. So, um, what we would like to see now, I think is the for this text. Not to be black. We would like it to be white. Now, we've got two options here. We can actually go into the element. Andi, select all of the text. And if we click this toolbar Tuggle here, I could actually set the text to be white here. Um, now, that's one way of doing it. The other option is to set the H one tag and the H three tank, which is what I've used to this text. Remember H one on 83 I can set that to always be white. Um, and then if I If I then place h one and H three anywhere else within the sight, it will always be white. Now, bear in mind that that can be a problem because sometimes you don't want it to be white. But let's just have a quick look now at how we would do that. So I've just opened another tab and I'm just gonna go to the Varda theme options. And I'm going to go to typography and within typography Weaken set by body typography to be whatever we like on the head is typography. So the head is typography is currently set to font color almost black by the look of it. So let's set back toe white on the H three as well. I would like to set toe white. Now, the other thing I'm going to do here well, on while I'm here is I'm going to set the H one tag to be a font similar to what we're looking at here. It's not gonna be exactly the same, but I think Oz world is one that I use reasonably frequently, and it's more or less that so I've now changed the font family. The front name on and the font color of the H one tag, and I've changed just the font color off the H three take. So let's save those changes now. We can go back to the front end press refresh. We should now see that that's become white now. Depending on your background image will determine whether the white text six sits nicely on it or whether it needs to be black or a different color. Now the other thing that we can do is we can put a slight overlay over the top of the background image so the text sits better on top of it. But that would be covered later on in the more advanced part of the course. One final thing we'll do in the header. Here you'll notice that the header goes away to the top. So in order to do that, what I need to do is I need to set the margins on the page, and that is set a little bit further down in the fusion page options. We click on page. You see that I've got a page content padding now by default, and this is set us part of the theme options that I imported just a little while ago. They are set to be 80 and 40. So that's talking bottom. What I want on this particular site is for the top tohave no margin at all. Now, if I go back and refresh this now, it will probably not have changed. Let's just wait for that to refresh its Still saving it just in the moment. Okay. Still saving it. Okay. Finally. Okay, so it has changed. Actually, it has gone to the drop. Now, I wasn't expecting it to do that, because sometimes if you're if you're navigation area, which would be the top there, it can interfere with it. I'm just gonna quickly check to see Yes, it may just be because I haven't gotten a bit navigation in place, so let's just put that in place. So in order to create some navigation, you need to create a menu. So that is done in appearance and menus. So let's just wait for that to load. My internet appears to be on a go slow. It happens from time, Stone. Okay, so we have no menu set up the moment, which is what I would expect I'm gonna just call this main head of menu. You can call it whatever you like. So there's the menu created, but we have no menu structure at the moment, so there's nothing in it that's just over on the left hand side. We can click home and add to menu. Now I'm going to set this menu to be the main navigation menu, the mobile menu on what's called the Sticky Header Navigation, which will cover later. I'm also going to click automatically add new top level pages to this menu now. What that will do is if I create any more pages now, any new pages, they will just automatically get added to the menu without me having to worry about it now , while I'm building a site, I generally have that tipped as soon as the site goes live by. I untech that just in case. I then subsequently create a new page just for test purposes. I then don't want it really to be added to the menu in a live environment. So So I just don't take that. You can always delete the menu items you can move them around on, make all sorts of changes to them anyway, So it's not a big deal if you forget to antic that. But, um, that's where you would go if you if you wanted to and ticket. So let's just refresh that now and see if that's made any difference. Okay, so they would go. That's what I was expecting to see. Eso. Even though I upset the page margin to zero. I'm still seeing that the menu in the top is not is sitting on top of the image when in fact I wanted Teoh just sort of bleed behind it as it were. Um, But before I actually make that change, the other thing I'm gonna do is I'm gonna load the logo first of all. So again I go toothy Arvada theme options. I've already prepared the Loga, obviously, and this happens to be a transparent background logo. So it's a PNG file because I wanted to sit on top of the image. Okay, so I'm in Nevada theme options. I'm going to go to logo on. Do you see that? There's no logo. A tall set of the moment, um, assumes I click upload, I then get the option to select files and I'm going to find hello to logos a la Alaska logo in Alaska logo retina. Now that the reason there's two is because one is twice the size of the other, and that's to allow for the new high quality retina screens that are coming out now whereby the resolution of those screens is that much greater, much bigger. Andi, Therefore, the quality of the logo needs to be that much greater to reflect that. So with the Varda, we would get the option of uploading two versions off the logo two different sizes off the logo in orders to to cater for that. So you'll notice that I have up loaded both of those at once. That means that they are now in my media library and I kanak system more easily, so I just don't uploaded in both at once. So, first of all, we're gonna upload, we're gonna insert this logo, which is the 1751 which is the standard resolution. So I just select that now it gives me the option to upload the retina version. So then I select that from my media library. I don't need to upload the files again because I've uploaded them both at once and now they're in my media library, so you'll see that this one is twice as big 3 50 by 100 instead of 175 by 50. So I select that. Then I can upload the logos again. While I don't need to What, Load them again. They're already in the media library, but I'm just setting the same logos to work with the sticky head and logo and also to workouts. The mobile. Now what size your logo's end up being will be determined by the type of logo, the shape of the logo. But generally speaking, if it's a landscape orientation logo, then you're looking at somewhere between 355 160 pixels wide in the retina version on. Then you can half of half that for the Standard Rover resolution version. Okay, so click save the changes. Now, if we go back to the front end and just refresh that the chill zone, we're not going to see it. You see that it's uploaded something because it's indicated that is gone. It's not visible because it's white, so it's I wanted to sit on this image eventually, but you can't see it because the header is currently set toe white. So let's go and fix that thing. Other thing I'm gonna fix is the height of this header. Because when you upload a logo once you've uploaded that loaded logo incidently the menu height may change. So you go to Nevada menu on. This is where you set your menu height, and it's determined by the size of the logo, so this number will change according to the size of your logo. So I'm gonna set that to its recommended 112 pixels. And then if I go back and refresh, you'll see that that header becomes just a little bit more narrow. Okay, but it's still white. So how we gonna fix that? So that's going and and edit the page 8. Module 06 - Basic Site Building Workshop - Part 2.: Okay. So because I've got the header set to be fully white rather than a transparent white. Uh, okay, that should load in a second. Okay, If I scroll away down the page to the header section, you'll notice it says background color by then, click Select Color White is selected on this bar here, which determines the transparency YSL the way at the top. That basically means that it's it's opaque. It has no transparency at all. I pull that bar all the way down. It makes it fully transparent. On the results of that will be that the header effectively shrinks. The menu will still be there. The logo will be, but the head of will shrink to allow that head or image to go effectively underneath the navigation. So if I now just refresh this page so it is so now we've got our logo in place. We've got our navigation, but we can hardly see it because it's black. Or at least it's dark gray on. We've got our text over laid on an image so you can see that it's beginning to build. So let's fix this menu color first of all, so again we go to Nevada theme options when we go to Main menu and scroll all the way down until we find menu typography. It's currently set to the font family, Mont Sarette, but the font color is dark, so we're now going to make it white. We want the active on hover color to be just perhaps off white, which I happen to know b F eight F eight F eight Just so it changes slightly. Okay, let's just refresh that. Hopefully we can then see that there it is going right now. We'll need to play around with that, depending on the cover of the images, whether we put the overlay on it or, you know, whatever colors we start to use throughout. So it will determine what we eventually end up doing with the navigation. But don't worry too much about it this stage, because that can all be changed later on. Um, let's let's just get the main structure off the site in place, first of all. Okay, so let's move on to this. This next section Now we go back to edit the page, so we've got this container. Things containing contains a background image, the separator the text on another separator. So now what we want to do in order to create this bit is to put another container in place . So I'm going to click and the container icon, and then I'm going to say another full width container. Now, it looks to me as though I'm gonna use this. I'm going to need to use the separator stopping bottom again in order to get this this centered. Um, but first of all, let's just type in a bit of text. Not gonna type in all of the text, necessarily. But let's say Alaska, who will esca these different from every okay, destination in three World. Okay, No, you'll notice that destination in the world is honor has dropped down to another line. Now, the chances are when we put this in, let's make this and h two. So it's a bit bigger than the rest. The text save turned update, and now I'm gonna refresh The page. Hasn't actually saved the changes yet. Still, in the process of changing them saving. Okay, so there it is. Alaska is different from every other destination in the world. Now, if you wanted it to drop onto another line here. You would have to change the width off this road because you want to. You don't really want to force the mind break because otherwise, that will have an effect when you when you view it in a smaller resolution, when you view in a smaller resolution, it would automatically go smaller. But you don't really want to put ah forced line breaking there if you can avoid it. But if you did want the destination to be on a another line, what we might want to do is to make this perhaps, uh, let me think 3/5. Let's try be 3/5. Okay, so you see that I've made that column 3/5 Now, in order to fill the the entirety of the column, What we now need to do is to add a 1/5 by the side of it. So in order to do that, I can click the columns like on here, and then I get access to columns and I can choose 1/5 and then I can duplicate 1/5. Then I can pick it up and drag the other side. Now, if I update that, we should see that the text is a little bit more centered. There we go and it's dropped onto, uh, the other line. That's without forcing it. Now, if I view this in a smaller resolution, it's it's still responsive. What's called Responsive? It still it still moves. If I had dropped the line, if I had forced the line, drop it term it wouldn't have operated in the same way. It would have looked nasty on on a smaller resolution screen. Okay, so let me just go in and correct the spelling mistake because I can't look at it. Just this you nation, that's better. Otherwise, that's gonna really annoy me. Okay, so now you'll notice that we haven't put the spacing in yet. We haven't got the background image in there. Get so eso let's place that in. We're gonna put that background image in the same way as we did with the header image. So let's put the spaces in. First of all, now we can use these same separators. I think we're gonna want them about 200 the same. So I'm just gonna clone that. I'm gonna drag it down and then cloned another one and drag it down then I'm going to go to the container cause it's on the container. We want to put the background image, go to background upload, and I'm gonna search my hard disk full the mountain background image. So let's use the J peg one, which is much smaller because we don't necessarily need this to be upset indicating an era for some reason. Okay, let's got it. Okay, so you see, that's 248 pixels wide. Nice, big image. Um, it's already now set thesis eyes to be full size. That's because I selected that the previous time, So that's probably going to remember that for each subsequent upload now. Okay, so refresh that. Okay, so So there we go. So that looks. It looks pretty nasty at the moment, actually to be. To be honest, that image is probably not the right image to use. But what I can do is I can This would normally be covered in the next module, but let me just quickly fix this. What I'm gonna do is take some of the intensity out of this image by setting a color to sit on top of it. We're gonna set it to about 95 percent transparency in white for then refresh or at least update and refresh. Okay, it's still saving a lot of the speed issues I'm having here. Relate to the fact that I'm recording This is a screen cast as a go along. So, um, you will hopefully not experienced these same speed issues. Okay, so let's just refresh that now. That may have gone a little bit too much. So you can probably just about see that that background image of taking out the intensity of it, but probably just a little bit too much. So let's pull it down to perhaps 85 instead and save that. Okay, so, um, now we've got a button in here is well, which can click can link off somewhere when the user clicks on it. So let's let's put that in a swell. So we want to put that in underneath the text. Andi. That probably means we might have to adjust this this separator slightly, but let's just click the element. There's a button option. So in a button option, I get to select a girl so that could go to another page in the website or somewhere else on the, uh, on the Internet. Anyway, anywhere you like to set that that, um, to go. So you say click here. Now we got a few options with the button. We can set the target so either safe, self or blank self will just open in the same window. Blank will open a new a new tab or new window. We can set the alignment to be centered, left or right. So let's just set that we'll cover this in in the advanced module what that actually does. That's really powerful design. We can say whether we want the button to be the default style. I can't remember exactly what the default style is, but we'll leave. It is the default. At the moment. We can set the button size small, medium, large, extra large, but in Spanish useful. Do we want the button to be the full wits of the grid, or would we like just a little button in the middle? I think in this in this case, we're gonna want a little button in the middle, so we're going to say no on. Then we could weaken, determine the shape of the button whether we have an icon on it, very sticking options. But for now, let's just put in the default button and just see what it looks like because we can always change it later on. It's gonna be the wrong color for this particular site. But a say we can change that later on anyway. OK, so there we have the button, so you see that it's too far down because I've got that separator in there. So now let's just fix that by editing this separator and making it 100 instead of 200 then copying this one and popping it underneath. So I still get the same the same height that I'm looking for for this section. But I've pulled that button up a little bit closer to the text. Oh, there we go. OK, so that's that section. Now let's have a look at the text on the left here and an image on the right. So in order to achieve that, we're going to need another container. But this time, let's have it half and half, because this one's gonna be an image and this one's gonna be text. So let's put in some text in the left hand side is first of all, so we go to text block and it's gonna want to say places to stay, stay. Um, and then I want a load of garbage text. So let's just do a search for no it Cem. Okay, so that this will just give me groups Continue to cite this will just give me a load of text that I can just copy a news because dummy text. There we go. And whether I want on that center, don't you see? This is justified, left and right, So that would require a bit of extra coding in order to achieve that. But for now, let's just make that bold. So it's a nice heading. Andi center that text. I'm also just gonna quickly nipped back to here and make different, bold and world Oh, to try and get a closer match to what we have here. Okay, so that should have put the text in the left hand side. Now, remember that container by default, it's set to be to stay in the grid. So it's not going to stretch with the image which in this situation is I think, how we want it to be. So now what we need to do is just at our image. Now. I could actually at this is the background image. Well, I can just used the image option, upload the image, navigate to my image folder on Let's find a nice image. So let's say that one. No, let's have that one. It's quite nice. So this image is 1000 pixels wide. I'm not going to set any options at the moment. Let's just see a lot of this in when you're building site, it's it's kind of trial and error because obviously, you've got to put something in there and then you have a look at it and see. See how it looks. Okay, so you'll notice that this image is tight up against the container above it, so let's see if we can achieve that. The other thing is that this places to stay would be nice if it was centered to that image . So let's have a look at doing that. So, first of all, I'm going to go to the container and I'm going to set columns to equal height. Now what? That will do. Yeah, okay, let's just do that first. What that will do is force that container regardless of what's in it to be the same height . So it will. It will work to the height off, the the the highest thing in the in the container. You're not seeing the effective that at the moment. But let's find out where I need to, then set the so putting. Okay, I'll come back to that because I can't remember exactly where I need to set that. So this is this assented. But let's work on moving this image right up close to the container above it. Now, by default, the containers have an element of what's called padding and margin. Now margin is on the outside. Padding is on the inside, so the first thing that we need to do in order to set the image to be butting up against the container above is to remove the margin settings. So in order to do that, I'm going to go to the container. I'm going to go to design. They're going to set the margin to zero and say that and update it. Then we'll go back to the front end and I'll refresh that and see if that's achieved. What? We're what we're aiming to do. Okay? Again. It's taking a little while to save that. Okay, that made any difference. It's still saving. Sorry about this. Okay. It's no safe. Okay, so I'm gonna refresh that. Has that made any difference? Let's have a look. No. Now, the reason it hasn't made any difference is because margins are set on the container and also on the columns within the row within the container. So I'm gonna go in and edit the container, and I'm going to set the margins to zero on the container as well. So again, I have to do that on both of those because there's two in there. Okay, um, now you'll notice that we've no got this center content, uh, come alive. So I'm gonna click yes, on there. And that will then vertically center the text in the way that we're trying to get it. So now if we just wait for that too safe. And now if I refresh it, I'm hoping that that no, still not there. Okay? There's something hasn't saved, or I've done something wrong. It could be the padding, actually. Yep. Okay. So on the image. We need to remove the padding as well on the image side. So talking bottom removed the padding. I don't think I'll have to do it on the left hand side. It's overlook now. It's worth spending a bit of time, particularly when you're building a grid like this is worth spending a bit of time on the 1st 1 Because once you get that 1st 1 right, it's then going to be really easy to copy it and create the next the next one. So let's go in and change the remove the padding on there as well. Let me just check that has saved. Yeah, okay, I'm probably getting it yet. That's what it is. Is the container petty I need to remove the container padding is well, because obviously it's putting a bit of padding around the container before it's getting to the the row. So now if I refresh that once it saved, There we go. So now it's butting right up against the container above it, As as it does as it is it is there. OK, so now we've got that one right. We're going to create these other two sections underneath now in order to do that because it's effectively identical except the images on the other side. I'm just gonna clone the container. I'm gonna do duplicate this container, and I do that by clicking that same Symbolist appears everywhere else in the elements in the Rose. The three elements within the row, it's the same symbol. It's the same clone symbol. So in cloning the container, So now we've got a copy off the one above underneath, and I'm just going to drank that image across to the left. Then I'm gonna go in and quickly edit this text to say things to do. I'm going to change the image and upload another image that perhaps we got a black and white one there somewhere. Yeah, that one. There. Open that insert safe. Now I'm gonna do the same. Claim the container, put it back around the other way, change the text variance and change the image because Gatto image of a bear here somewhere . Yeah, not quite the same as the demo site, but close enough. But this you should be getting the idea. Okay, so let's have a look at this now. Andi, see if we're building the page in the way that we're expecting. They're real. Okay, So you noticed that the spacing is not quite as as we'd like, so we can go in and fix that. I should have probably done that on the 1st 1 Um, but what I need to do is only two set the padding to be zero on the image side design padding zero left and right. That is, I should say, left and right. Okay, so that's that. And then the other thing I need to do is I need to set the column spacing to be zero. Okay. And that will, but the column up against the next one. Now, we may have to make some slight adjustment to the column with the text in it in order to put a bit of spacing between each one of those columns. But let's just see how it looks. First of all, make sure that we've got our images at least lining up correctly. Okay? Just wait to that to save. Still saving. Okay, we're nearly there. Um, you just got a next to a bit of text to go in there with another background image. And I'm where we're good to go. Okay. So refresh. Okay, there we go. Eso you see the images and nicely butted up, but the text is not really ideal because it's too close to the edges off the off the container. So let's go in on just edit this text. So I'm gonna go in and edit the element I'm gonna go to design. I'm gonna set the Patty ah to full percent left. And right now, I happen to know that 4% is gonna be about right. While I'm hoping now, you know, I've said it 4%. So in these in these fields, you can actually just put numbers which are fixed or a percentage. Um, the reason I put it into the percentages because later on, I may not have these elements fixed in the grid, so I'm gonna use 4% instead of a fixed number. I'll explain in more detail. It will become more apparent. Why have done that in the later module? Okay, so now what we should see is a bit of spacing left and right wrapped around this text. There we go. Okay. So that's about right. You may want to make it a bit more than 4%. But I think that that sits just about right. Okay, so the next bit is this. Ah, this blue section here, let's try and get that in place. Now that that ideally, I think we're gonna want to make again another full width image. Um, so let's add the container. First of all but the container in place, set the background, find that image. I think I was going to use that one. Upload, insert and safe. Okay, so that set the background image. Then we're gonna want the text element to go in there. And that says the rights sky off Alaska old year. Let's make that centered. And h two Sorry, h three, cause that's the one that we've got set of White. Save that. No, again, I think I'm gonna want to make this 3/5. Gonna add another column in here. 1/5 duplicated dragging across. Then I'm going to want the separator in here as well. So let's find separator. No style. Probably not quite so big this time. Let's make it 100. Save that. But one of the top on another one underneath The reason I put that one underneath this cause I'm gonna add another button in here and click. Yeah, please. I'm gonna set the design to be the default. You set the span to be? No, because we wanted to be a small size rather than full full span set the size to be small. And let's just see what that now looks like, because that's different from the one we have above. Um, sorry. The other thing I needed to set alignment. We wanted to stay in the center and update that and refresh when There we have it. There's a little button. Doesn't sit particularly well on that text. But sorry on that image, but you get the idea of how to actually build it. So the design, the look of a site obviously very much depends on the imagery, the quality of the imagery on dumbed You know how how the images sit together with each other, so that will come down to your design skills rather than your your web development skills. Okay, so the final thing is the footer. This section is the foot. Um, Varda, in fact, has a foot of section which there's nothing in the moment and a copyright section, which is what contains this This text here. So at the moment, all I'm going to do is change it to to this dark color rather than change any of the content of it. At the moment, eso the footer is is set again in Nevada theme options. On there's a section for the footer. So you see, we've got foot Ah, content that in fact, that copyright text, that text there is what appears here. So if you go in and change the copyright text, then it will be reflected here. Over on the right hand side, I've actually got the copyright split into two columns which is not defaulted. Varda. It's something that I have created using some additional code, all of which will be in the resources that the that are available to you is taking part of in this course. So what I'm going to do First of all, it is just changed the foot of color. So if we know go two footer Starling, your latest foot, A background image. You can actually put an image of a zoo the background of the photo as well, if you like. Okay, so foot of Starling. I'm gonna change the footer background color. You can find it photo background color to be. I won't make it. I'm gonna make it really dark, but not completely black. So let's do 333 save changes, right? I'm just gonna show you something here, Um, so you can understand the way the footer is split. Okay, so you notice I made the foot of dark and there's the footer, OK, but the copyright remains the same color. That's because there is a separate background for the copyright. So let's go in and change the background color of the future as well. Now you'll also notice there are typography options for the footer and also for the copyright. So given that we've made the foot of dark, we probably want to make the typography the you know, the font. We want it to be white, or at least a lighter color. And we want that on the footer as well as the copyright section. So that's just change, Elise at once and save the changes. You notice you can also change the font size here off the text that appears in the in the footer. Okay, so if we refresh that, those changes should be reflected, and then we have it. So we see the copyright text has changed. The footer and the copyright section have become dark, but we noticed that there's a horrible gap here. We don't want that. Let's go back to the page. And if you remember where I set the zero margin on the page, I only set it at the top. So let's also set it at the bottom and click update. Okay, that's still saving. Okay, No, it can refresh that. And hopefully there we go. Now it's butted up right up against the container above. So there we have it. That's Ah, basic site build. Um, it's not exactly like the example in the left, but it has the same sort of structure. Um, I hope you'll agree. It was pretty easy to do. And once you've done that a few times, it'll become second nature. What we're gonna go on and do in the next module is to get a little bit more advanced to you. Some more of the tools within. Ah, Varda on do Cem much cleverer things that will really make your website stand out from from the rest. See you in the next module. 9. Module 07 - Advanced Site Building Workshop - Part 1.: right. Let's Ah, let's have a look at some more advanced features off WordPress and the Varda theme in particular, we're gonna work or just continue to work on the on the site that we built in the previous module. The first thing I'm gonna do is I'm just gonna point out something that I've changed. You notice the spacing A slightly changed in the text area in this part of the grid on the left hand side here, I've pushed it up so it lines up on the left hand side and put a little bit more spacing on the right. I've done the same with this one here. I've left this one as it waas in the previous module just so I can show you how I have done that. Um Okay, so So let's go in and edit this page. Then we'll move down to the, uh, grid on and the bottom left hand section off the grid. Eso. What I've done is I've gone in and edited the column itself. I've gone into design and I've changed the percentages that I've been using here. I've basically removed the the one that controls the spacing on the left What would be the left hand side and I have increased. Actually, I'm gonna have that. Probably ran the wrong way. I think that one needs to go in a 8%. These arrows air quietly a little bit misleading in terms of you have to get your head around. Which one does what? So So that this one, this one here, I think, is actually indicating the spacing from the left hand side on this one. The spacing to the right s. So therefore, next to the image, let's just save that updated on DSI. If that's got it on the correct side, even now, even having done this for a number of years, I get it round the wrong way quite often. But it's not a big deal. It's just a case of going back into it and switching it around. Okay, so let's have a look. I'm gonna refresh this page and then we'll just have a look to see if it's worked. Yes, it's work. So that's that's on a lined up with the left hand side there, bit of spacing on the right, next to the image, so that's just tidied it up a little bit from from the way that we had it in the previous module. The other thing. I'll point out here you'll notice that this image is slightly different size to this image and this image. Now, if you did want a consistent size to those images, the easiest way of doing it is to make sure that those three images are on identical size before you upload them. Because it's the image that's driving the height of this particular section, basically because because we've got it set to be set to equal heights and to center, then that height itself is driven by the largest element within that rose. So the largest element is the image. This image is actually a little bit smaller than the colored one above it. But if I had made it, made them all the same size than they would all be a consistent size. Eso That's just a little bit of information that you can you can have a play around with and see how changing the image shot sizes makes a difference. Now the other thing I want to show you is how you can move content around once you start to build the page structure. It's actually really, really easy to move things around Now. I have a feeling that it might look quite nice for this colored image to be the center, the center one. And for this, this things to do section to move up to the top. So let's go back to edit the page and just see how easy it is to do that. So what I'm gonna do is because I've got these in separate containers I can pick up in drag the entire container. So let's just do that. I'm just gonna hold the mouse onto it, pick it up, drag it, then update it on the refresh the page. Now we should see that the black and white images moved to the move to the top. There we go, and we've got the colored image in the middle. Now, of course, this one's around the wrong way list. The bottom one is round the wrong way from the point of view of maintaining that sort of consistency off layout. So let's just go back to edit the page, and then we're just going to drag those columns left to right or right to left whichever way around you. Okay, Now, of course, this text that's just going and edit the text editor designed this. 8% is now gonna be on the wrong size, so I just need toe move it across to put this spacing on the other side. So the spacing is here rather than on the right hand side. Now we can just go back and refresh that page. Okay, so there we go, right. This is building nicely. What we're gonna look at now is something called menu anchors. That's because very often when you build a page like this this sort of single page layout, it's very nice to provide some navigation to get to the sections within the page. So I'm gonna create three menu anchors, and I'm going to give them names relating to these various sections. So things to do, places to stay experience. So let's go back in and edit the page. So first of all, I'm gonna put the menu anchor on the page, so I'm going to click on Element, and I'm gonna find menu anchor. There it is, and I'm gonna call this one things, and then I'm just gonna put it above the text. Then I'm going to duplicate this or or clone. I'm going to drag it down to places to stay, and then I'm gonna edit it and call it places. Then I'm going to do the same again. Clone it, drag it down, edit it and call it experience. Spear gets now. It's really important that the spelling of this is identical to the many whiten that you subsequently create to to get to it. If it's Miss felt, it doesn't actually matter as long as you Milt mis spelt it in the misspell it on the menu as well. But just just make sure that they are identical. Otherwise it will not work. OK, so we'll just refresh the page and see if that's made any difference at all. Um, and hopefully you'll see that it's made no difference at all to the layout because all we've done is we put an anchor on the page, which allows us to navigate to the section where the anchor point has been placed. So now what we have to do is go back to go to appearance on menus. I'm just gonna copy the u R. L. So I've got it in the clipboard because we're gonna create what's called a custom link in order to get to those sections. Um, okay, the pages still loading? Still saving. Okay, so now we've got a menu. So now I'm going to go down to this section here called Custom Links, and I'm gonna paste in that you are l. And then I'm gonna use the hash symbol. Now, when I press the hash symbol here, I think my screen is going to or at least the the browser is gonna shrink. It's just a some reason it does that there's there's some function in my browser that causes it to shrink, But I'll just then put it back. There we go. So just drag it back. So now I've got the hash symbol in there. Onda. We type in things. No, I'm just gonna copy that hole you are also don't have to go through the shrinkage again. So now we're gonna type in the link text. So things to do and added to the menu. I just need to remind myself places and experience, wasn't it? Okay, so So now we've got things to do, and then I'll pay studying again. Andi, create the places to go or places to stay. Sorry. Places to stay so I can go back in and just edit that their places to stay. Andi Experience experience at too many. Okay, so we'll just save that menu. Now if I go back and refresh the page will see some new menu Adam items added into the navigation. No, they are. Okay, So now if I click on places to stay, for instance, it's going to take me to this section directly to it, like in navigate through to the various sections on the page like that. So that's how menu anchors work. You can have a play around with those and see, See how you can use them in your own projects. Um, now, let's have a look at, um, putting some additional elements on the page. Now, I've decided I really like this image very much as a background. So let me go in and edit the container, go to the background. That is the image on and prepared a slightly different image. So Alaska map insert safe update. Okay, that's going Refresh that. Okay, so there it is. You can't see it very well because I've got that white overlay on it. So But what I want to do now is I'm going to create this. I'm gonna make this what's called a parallax image. That means the image is going to seemingly move behind the text now on a parallax image. The white overlay is not going to work anyway, so that could be removed. In fact, you could. You don't have to remove it. It's just simply will not work. So if you leave it in place, it will just not work. But let's just clear it anyway, on in the in the container background section, if you scroll down a little bit, you'll come to this area that says Background Parallax Parallax. Let's just changed it to up. So it's saying that it's gonna move up on a desktop and a mobile device so this will work on a mobile device as well. So that's now set, and I'm gonna update it on re first, the page. Let's see what that's actually done. Okay, so now we see we've got this this different image in here, which is a map. Now. If I scroll up and down, you'll see that the image itself is moving slightly underneath the text. So we're starting to introduce a little bit of animation into our website on Do you can use that to great effect various areas of the site. So have a have a good play around with that. There are various settings. Let's just go back into it quickly. Um, you can you can set, uh, the position of the background, Um, the parallax speed, which will which will obviously influence the the way that the image moves at the background. You can even put a video background in there as well by these links here. So have a good look at that and play around and see how you could use that into in your project. Okay, so the next thing I'm going to do is I'm gonna put just a few more images in here. I just want to show you how the gallery feature works within or at least gallery element works within Nevada s. So I'm gonna put some images between this this bottom image, the of the bear here on the image off the Aurora boreal list. So let's just go in to that section on the page. So here we are. Here's the image off the bear on This is the Aurora about Coriolis image. So we just wanted inserted container in here. So I'm just going to click the container icon, make it a full, full width rope, and then I'm going to click on the Element icon and find gallery. Okay, And then I'm going to select a number of images because I want to show eight images in here which obviously I've already prepared. So I'm gonna choose my eight images. I've made them all on identical size. It's not important to do that in terms of displaying grid of the images, because they will show us the same size if you set it to be the case. But if you want to use something called the Light Box, which is when the user clicks on it, it opens in a bigger version. Then it's much nicer to have them all the same size cause then the image images themselves don't jump around on the screen. OK, so that's the eight images uploaded, so we say, create new gallery and insert the gallery on. I'm going to make it a grid while It's already set as a grid. Actually, by default, you could actually set it to be masonry. Andi, I suggest you do that just to see what it actually does, but it basically lays out the images in a slightly different way. Masonry is used in particular. If you're using a mixture off landscape and portrait orientation images, the masonry effect can be can be quite nice. Okay, so let's just refresh the page and see what that's done. There's a little bit more work to do on it, but I just want to see you to see stage by stage. Hell, how the pages building as a result of what we're doing. Okay, so just check the size of this 1600 by 1100. Okay, Okay. That's still saving. Okay, so there we are. Um okay. So what you'll see here is that Sorry. I think I pressed refresh again. Okay. There we are. Okay. So what you'll see here is that we have our eight images. They are a pit. They are in three columns now. Obviously, we want to try and make it s so it's a bit more balance, so I'm gonna set it into four columns. You'll also notice that it's in the grid, and I would like it to be all the way across the the width off the browser. So let's just go in and edit that element again and make those changes. Okay, so we've got the grid set up. We've got number of columns, so I'm just gonna set out to four. That will mean that will then have two rows of four images. We've also got some. We've got some spacing here. Um, so I'm going to remove that. So there's no spacing, a tool zero. Andi, save that and update. Hopefully, this will save a little quicker this time. Yeah. Okay, so now refresh. Now we should see that. That's in two rows off four. Okay, so that's nice. A nicer balance, but it's still not stretched across the width of the browser. Now, in order to do that, what we need to do is to change the container to show the interior content wits at 100% and save update. No, If I refresh No, we are now. It's 100% with it will stretch, but we've got spacing left and right and top and bottom, so we need to remove some of the margins. So I think the margins that we're gonna need to change your on the container. So let's go to the container and to design and insert zero margins and zero padding everywhere, safe and update. That should do the trick, although I think we may have to make one more change. But let's just see that's worked out. Okay, there we go. So we've got we've got the full wit. We've removed the spacing on the top, so it's butting up nicely against the image of the Bear. But we've still got this spacing underneath now that chances are that that is in the container story in the column itself. So let's just go in and edit the column, go to design and just remove the margins and padding in the column as well. Say that, update it and refresh the page. And hopefully that's now butting up against the two containers. Nice. Okay, so if I make my browser bigger, you see that the all of the images just grow with the browser. Now, if I If I click on one of these images, it now just gets bigger and open since, what in what's called the light box, which is really nice. There's various options that you can set connected with the lightbox, and you do that in Nevada theme options. But I think the default set up is actually pretty good now. It could be that you don't want the light box to open when you click on these images. It could be that you just want to show these images and not have them clickable at all. So that's easily done. We can just go back to the gallery on Scroll Down to where it says image lightbox and select No, save that update. Then we can just refresh the page. And now we cannot click images just visible and they still grow nicely. But they are not applicable, so they will not open in the lightbox. Now, let's just have a look at this in the, uh, the equivalent of a mobile view, which was, I've got a setting on my browser, which allows me to very quickly set my browser size to be something similar to a mobile about 380 pixels wide. I've got it set. Eso You see that as the page builds. I need to start looking at looking at it how it would look into mobile because there are various things that I might need t change and put a bit of spacing in here and there in order to make it look nicer on a mobile. Pretty much out of the box it looks, looks pretty good. Actually, there's just a few spacing issues, but, um, these images here they looked lovely on a desktop. They actually looked lovely on a mobile as well. But let's for the sake of argument, let's say that we don't want to show those images on a mobile. What we can do is we can go back and use something that I alluded to in one of the earlier modules. I'm going to click on the container, and you remember this section here contain a visibility. I've got the option to show on a small screen, a medium screen and a large green and by default that is set to show everywhere. Now, if I didn't want to show this on a small screen, i e. A mobile phone. But I did want to show it on a tablet, and I did want to show it on a large desktop like unjust, UnTech small screen, so we'll just click on it and it becomes gray instead of blue. No, if I save that and update that on, we go back to the front end, just refresh it. I'll just refresh it again because I'm not sure if it if it had saved okay, so we should see that on the desktop. We've got the images. Let's go to sort of a tablet size. So now we've still got the images on a tablet. But if I go down to mobile size and just you see it's gone, that's because I set it to hide it from a mobile view. So that's incredibly powerful. There are very few themes that I've come across that give you that functionality. There are some additional plug ins that you might be able to buy to make it work, but they're usually sort of cobbled together on, and they may or may not work with the theme that you're using. This is something inherent within the avada theme that I found to be very, very powerful indeed, because you can show different different views off different sections of your website and different views of your website on the devices that it's being viewed on. So really, really useful little feature on do you Can you consent that on a container? Or you can even set it on an element within a container. Have a look around. Wherever you see that option will. It will give you the facility to hide or show your content on a different device. Okay, so now let's look it, perhaps creating a new page. Um, I'm a great fan off consistency through a website. So although the content off one page will change from another, then the general sort of layout on presentation and look and feel of the site should have some sort of consistency. So very often what that means is, if I wanted to create a new page, what I might do is just go to all pages, Andi simply all I haven't got it turned on. Let me just go to the plug ins first, and I'm gonna turn on a plug in that I use called duplicate post while I'm here. I'm also gonna turn on some plug ins connected to the contact form because I'm going to show you how to use that in a second. So I've just selected three plug ins there, and I'm gonna activate them all at once. I could just activate each one individually, but there's an easier way of doing it once. OK, so all those three plug ins are now activated. So now if I go back to pages, get get an extra option to clone or create a new draft off the home page Now clone, Um, a new draft are effectively doing the same thing, but new draw. If I click new draft, it will open the page, whereas clone, it would just copy it, and it will be visible in this view. Okay, so that's created that page. I'm gonna rename it to be called Contact, and then I'm going to publish it. Now. What should happen is the permanent will change, too, to say contact. If it doesn't, you mean that may just have to go in and edit it to change it. But it should on once you've created the new draft and saved it for the first time, it should, um, changed the Perma link According to the title that you've given it with the page name. So now if we refresh, we've got a new menu. Button appeared called Contact. And if I click on that, it will take me to the contact page. Now, the contact page at the moment is identical to the home page. So let me now just go in and make some changes. So, uh, let's see what we're gonna take out. I want to keep the header, But what I'm gonna do is I'm going to change the header image. So let's change it. Instead of the snowy road, we'll change it to one of these other images. Perhaps the whale. Okay, get rid of this section. So I'm gonna delete that. I'm gonna delete that. I'm going to delete that. I'm gonna delete that and update it. So now let's refresh. So we're looking at the contact page now, not the home page. Okay, so I've got a different image. I've still got all of my six images. Sorry. Eight images underneath there. Whether I keep those in or not, I don't know, But what I want to do is just put a contact form in. Now I'm going to reduce the size off thes spaces because I would prefer the header image on the internal pages not to be quite so big. We are. So that's reduced that a little bit. So now what I'm gonna do is I'm going to put a section in between the header image here and these eight images underneath. So I'm going to create a new container, and I'm gonna make it half and half. Sorry. I'm going to make it 1/3. 2/3. Okay, So I split that row into a 1 1/3 column in a 2/3 column, and I'm going to add a bit of text in here on. Just type in the word contact, perhaps. Make that h two and update. So refresh that we should see a new section appeared. There it is. Okay, contact. So now what I'm gonna do is over on the right hand side here. I'm going to put a contact form, so let's just go back to our WordPress dashboard. Having activated the contact form seven plug in, we now have a form which is in their by default. So if I click on edit, we'll see that this form contains field to capture a name and email addressed a subject and a message, so that's fine. Now, this code here is what's called the short code to this form. So I'm just going to copy that, and I'm going to go back to my edit contact page. I'm going to go to the section that are created to put this form into, and I'm going to click on the Element icon within the 2/3 Column. Then I'm going to use this component called Code Block. So they click on that and I'm gonna paste the contact form code. In there. You can rename these contact forms. Incidentally, on the short code will change accordingly, but it's not necessarily important to do so unless you have a number of contact forms on your site that you want to identify easily. Okay, so if we know, refresh that, we see that we've got a perfectly acceptable contact. Form your name, your email subject message and Ascend icon. Now that's all fine. There's a little bit more set up to do in order to make that form actually work on very often. What I do is I, um, I customized the contact form so instead of in one column some of these fields air in two columns. Reason three. No, I've got a piece of code that is saved, obviously, because I use it all the time and I'm going to copy that. This will be in the resources as usual, and then I'm going to go back to the contact for and I'm gonna override all of this default form data. Okay? With the code that I use now, what this code is doing is it's creating some columns within the form itself. So if I now click save and I refresh this page now, you'll see that the form itself is still there. But it's changed in terms of the formatting of it. Okay, so now I've got named subject phone number, email address and message eso the top two sections in columns. Next line is in columns. And then I got one column for the message area. Then I've got some a diff additional text which relates to the data protection rules that have recently come in. I've also got a tick box that needs to be ticked in order to indicate that they accepting these terms on accepting the privacy policy I would have to create a link to the privacy policy in order to in order to show that privacy policy, Andi, then the form could be submitted. Okay, so there's a little bit more work to do on the contact form in order to make it work, you'll notice that if I go back to the contact form, we've got some additional tabs here. So we've got the form itself, which is the code that dictates how this form looks at the front end. Then we've got a male tab on this thing. This will then thing. This is where you configure where the same form will actually be sent. So this is going to be sent to one of my email addresses the from field. What I tend to do is I write, do not reply that. And then what you want to do is you use the domain name that is being used for for the for the website. Otherwise it will not validate properly. It needs to be sent from the domain name relating to the website. The subject you condone, you can leave as is if you like, reply to leave, as is now the message body This is the code that the pulls out the form content as it gets filled in on, then arrives to you in an email. Now you'll notice that some of these are dark, and that's because these fields appear on the form itself. But they do not appear in the message body that is going to be sent to you. So even if somebody filled in their phone number, you wouldn't get it because the phone number is not included in your message body. So if we were just to put that in now, we could also have GDP. Are acceptance on a website you are. L is is not necessary because that is something that relates to something called honeypot, which, if we go back to the form, you'll notice that I've got a field here called honeypot. Now what that does is it eliminates where it doesn't eliminate, but it reduces the amount of spam that you're likely to get through the form by putting a hidden field on the form Andi. If that field gets filled in, then it's smart enough to know that it's likely that it's a computer filling in the form rather than a human being on, therefore, will not allow the firm to be submitted. If you do a search for contact Form seven honeypot, read the information about that and you'll see how that actually works. But I use that kind of by default these days. 10. Module 07 - Advanced Site Building Workshop - Part 2.: Okay, so I've obviously already got the code that I use saved again. This will be in the resources so I can just overwrite that. And if I save, then all of these will go grey. Except for the website. You are a which relates to the honeypot, as I mentioned. So the other thing to set is messages on again. I've got a piece of text that's that I use that I put into these terms that the sender must accept. So that's the message that the user will get if we go back to the form. If they try to submit without ticking this box, then they will. Let's just fill this in, and I'll show you how that on that operates. Ah, test. No, wait. Five little the number email address on a message. So now if I tried to submit that, it's going to say to me, um, sorry. Didn't click the button. Okay? Something is not working. It's probably because I haven't saved it. Okay, let's just refresh that. Okay, so now I try to submit. Okay? There's something not working there, so let's just go back and check the form, okay? It could be that Because I've copied it out of here. There's there's a bit of code behind their that that is slightly incorrect. So, um, let me just quickly go to another site where I've got the form that works. And copy the code from there. Okay, So contact form. I don't use the same contact form on every single site, but a lot of them have a very similar contact for So let's just copy that and paste paste it into this one. Refresh. Okay. It's Dylan error there. Okay. I'm not sure why that is. So what you're seeing here is really life web development, whereby sometimes things do not work. Andi, you gonna have to go in and just figure out what the issue might be. Now, the way I would approach this is I would probably just start again. Um, I would create a new contact for and give it a title main contact for Save that. So now we've got a new short coat. Now, let's just go in and put that new short code onto this page, save and update. So now we'll see. If I refresh, this will see that it's back to its completely default form layout. There we go. Okay, So now what I'll do is I'll go back in on. I'll try putting this formatted code in and save. Then I can refresh that page again, and we should get the new now. There it is. No, let's try. You know, I'm still getting that funny little symbol there. I need to try and diagnose what this problem is, but I think I may have to come back to it. We just check that the plug ins Airil activated correctly. Looks like they're all fine. We're gonna deactivate the contact for and then reactivate it. Refresh. No, it's still not happy. I while I'm seeing that you see that this is, um, showing the short code to honeypot Now. That's because I deactivated the contact form and it's also deactivated the honey pot in the process. So if I reactivate that plug in that will then disappear on become a hidden field again Now , it could be that because I haven't got the privacy policy set up. Let's just go in and edit the contact form. Just take out the section that has the privacy policy in and the acceptance take books and save that click refresh. This section should then disappear. And there we have it. So that that must be it, because I hadn't I haven't got the link set up to the privacy policy yet. So, um, because it uses a particular technique to open a privacy policy because that wasn't in place than it was gonna be impossible for me to submit the form. But in the resources section, I'll include the code for for both of those things on Beacon, you'll have all of the information. I'm just going to show you very quickly how to, uh, create that. Actually, Let's do it. Let's do it now let's put this back and really see if that was the problem. Because it's important for you to be able to see problems as they arise, because otherwise you're not gonna be able to solve them yourself. So okay, so we've now got this This You see, the submit button is showing that there's an error and I think it's related to this. Now. The way I've got this set up is that this opens what's called a mode motile window in order to show the privacy policy. Now I'm just going to visit a site that already has some privacy policy code on their release, Um, text. And then I'm going to create it for this particular site. So if I just scroll down Andi, grab this privacy policy text, I'm just gonna highlight it with that and copy it to the clipboard. Now, this is thistles A little. It will appear to be a little bit tricky, but bear with me and just just carefully watch it and maybe watch this section a couple of times to see what I'm doing. I'm going to create a new page and I'm going to give it the name Motile. Privacy policy doesn't really matter what you call it. I'm then going to set it to text, and I'm gonna use this icon here, which allows me to access some of the fusion builder elements without creating a container on the page. And remember, I'm in text mode here, so I'm going to click on that. Then I'm going to go to building elements. Then I'm going to go to Motile. I'm going to give the name of the motile gonna make it privacy that I'm going to change the motile heading to privacy policy. I'm going to set the motile too large, and then I'm going to paste my text into the content section on a May click on insert. Now, before I do anything else, I'm going to copy all of this text to the clipboard. Then I'm going to save. This is a draft. I'm not going to publish it because otherwise it will add it to the menu. We don't need it to be added to the menu. I'm just gonna save it as a draft. Okay, so remember, I've got all of this text saved to the clipboard. So now what I'm gonna do is I'm going to go to appearance and widgets, and I'm going to put something into the footer, which is in fact going to be invisible, but it's going to contain that's crucial bit of code that I need in order to open the privacy policy motile window, which is a pop up window. So I'm going to drag custom H two mil into the foot of widget, and I'm going to paste all of that code into it. So now if I go back to the contact for and refresh you see here where it says, Please check our privacy policy. If I now click on that, it's gonna open a window with the privacy policy in it and give me the option to close it. And hopefully now, if I'm right, no, it's still not going to submit. So that was not the problem. But anyway, we needed to do that anyway, because that's now active. That motile privacy policy is active on that link that link and also the one in the Footer here and there it is, So it's just just pops up. Incidentally, you'll notice here that privacy policy title is actually showing in white. That's because I think it's h three. It's by default. It's an H three tag. And if you remember, we made theeighties three tag white. So if you wanted that to be black, you'd have to change the H three black h three Terek back to Black. Andi, Um, see if ah, on then on the page, you might have to specify that you wanted to show white on the page itself rather than the default or of it being white everywhere. Okay, so we've still got a problem with this with this contact for Andi. It may take a little time to diagnose. So I think for the time being, the best bet is really too is to move on. Um, let me just have one more look at it, just to see if if I can quickly diagnose what the problem actually is. Well, while I'm doing that, I'm gonna just create one more page, which is gonna be a copy of this page. So I'm going to copy this to a new draft, and I'm going to call it. Thank you know, what I'm gonna do is I'm gonna create the page that the user is directed through to once they've successfully submitted the form you can you can leave. It is the default contact Form seven will, just if you prefer to show a message once the once the form has been submitted. Um, London. Underneath what? Waas the form. But I much prefer to redirect the user through to ah, dedicated page where you can then obviously better determine what what the user actually sees. So I'm going to call this Thank you. And I'm gonna change the parent to be contact. So what? That will actually do is it will become a child page off the contact page itself. So let's just publish that now. Importantly, because I've made it a child page, it will not add it to the menu because it will only add the top level pages. So if we have a look at the Perma link here, we see that we've got a contact and then thank you. So that indicates that it's a child page off the contact page itself. So this is what we've got form. And now just gonna eliminate that from the thank you page and instead, just type in some text. So let's put a text block in there and say, um, thank you. Your message has Bean received and we will be in touch within 24 business hours. Something like that. Save that and update. Okay, that's just saving. As soon as that saved will have a look at it. And then I'm gonna saved the girl. What is copy it to the clipboard. Okay, so there's our page. That's their pace. That's the user's gonna be redirected through to. So I'm just gonna copy that to the clipboard and then go back to the contact form and edit it. Andi, I'm going to go to customize and you'll see I'm just gonna disable a jacked because I find that it works better without that actually on exactly what that does. I'm really not quite sure, but I prefer that it's disabled. And then I'm gonna paste in that you are l to where it says redirect to your URL on success . Okay, so that's the Earl of the page that it's going to redirect through to once the form has actually Bean submitted. So now let's just go through and quickly check the settings. I'm just going to paste this code back in here. Got it going there. It's just group that to the clipboard and type in my do not reply that. Oh, sure. What happened there? Make it a bit smaller. Okay, so that's fine. Let's save that. You're about to four. Just double check that. This all looks OK. It all looks fine. So I'm absolutely, uh, confused about why this is not allowing me to submit the form. Ah, now it is is going to allow me to submit that form now. So it must be because I had not saved this information, so it wasn't seeing this additional. The's fields were not included, so it knew that there was an error Somewhere in the form was not gonna work. But now it's gonna work by the look of it. So now let's just quickly fill this in. Ah, test put in a number. No email address. Bloody bloody blast. Okay, so now if I click submit it should give me an error message to say that I need to You must accept the terms and conditions before sending your message. So that's the default by much prefer to. And it's this text. So if you remember, we go back to form and messages and put that text in there, Click safe. So now I accept the terms. Click submit. And that should send the form that will arrive to me via email and it's redirected through to the page. Wow, that was that was harder work than it should have bean. But you see that? You know, once you get everything right in that contact form, it will work. It's just that you may have to, uh, you know, play around a few times and just just make sure that you've got everything exactly correct . And then the everything will be fine. Okay, So finally, what we're gonna do is we're gonna look at a new alternative to the home page header image . Now, you remember that ice Put some extra space in here on that. I said that if the image was too small, then it was not going to stretch across the full width off the, um this page. Now there's something else that you can use that forces the image to stretch regardless of its size. Now, that could be good, and it could be bad. The image still needs to be big. If it's very small, then it will stretch the image and it will remove. It will be poor quality, but so so that's not really the main in it is the main reason for using this. The main reason for using this different technique is if you wanted tohave a number of images in the header. So you wanted to slider. You wanted to fade from one to another s. So what I'm gonna do is I'm gonna use a component called the Fusion slider on First of all , what I need to do is I need to add a slider itself. So first of all, there's a slider, and then they're slides. So let's call this home page Slider could be called anything you like, and you can set the height here. Let's say I want it to be 500 pixels high Now. You'll also notice there's a full screen slide option, so that means that it will stretch the image the full height of the browser Vieux port, instead of just the the height that you've set at 500 pixels. As I upset it there, we'll have a look at that in a second. Let's just leave it, leave everything else just a default. For now on, the animation is set to fade. There is also slide as an option, so that means that one image will slide into another rather than sort of blur out and then blur back in again. So I'm just gonna leave it exactly as the default. The only thing that I changed with the 500 pixels slide a height. OK, so now we've got our home page slider. Now I'm gonna add a slide, so go to add edit slides and then add new slide. So I'm going to call this home page 01 Doesn't really matter what you call it. Now you'll notice that here we've got the home page slider has become active cause that's what we called our slider. So I'm just gonna take that. Then we're gonna set a featured image. So let's just choose one of these images that I've already uploaded. Okay, so now what we noticed is there's something called the heading area. So in the heading area, I'm going to just go back to the front end. I'm gonna grab this text. Welcome to Alaska. And put that in the heading area, set it to H one and center it. Then I'm going to copy the better text underneath and put that into the caption area. That's already setters in h three. Okay, the rest. I'm just going to leave as the default okay for now, because I want you to see the effect. Okay, so let's publish that on. Go back to the front end now. Obviously, the front end at the moment is going to look exactly the same because I haven't actually made the change on the page itself. So Let's go this close down this contact page on open and open the edit page Edit home page . Okay, so what I'm gonna do is I'm gonna remove all of this content now in the header. So I'm going to remove the separator, removed the text. I could just delete the container and create a new container. But let's just removed everything. Okay, So So now the container is empty. It's a Ziff. I'd put a new one on there. I'm gonna click Element. I'm going to find the fusion slider element. There we go. Andi. It's already selected the slider name because there is only one, So there's no other drop down available. Click save. You see, it's put fusion slider in here now and update. Now if I refresh, we should see the same image with same text. But you see that it's got some. Sorry, it's not the same image because I uploaded a different image, but it's got the title on and the subtitle, if you like, and it's got a couple of buttons on here because they were included by default in the slider. I'm gonna remove those in a minute, but suffice to say that if you wanted to put buttons on here, you could. Now you also notice that it's in the grid. So let's go back on DSI if we can fix that, because what we need to do now is to change the setting from interior content with two site with 2 100% instead because he wanted to stretch across the page. So let's update that and refresh. Okay, there we go. So that's now across the full width. But we've still got some content and patting issues, but we know how to fix that now. So we're going to go into the container and to design. We're going to remove all of the petting and margins and update. And that should now give us that full wits and no height, necessarily but away to the edges and to but up again. So we still got still got this issue. Ah, a little bit of space. So we know again where that is, it's in the container itself. So let's remove the margins from the container row as well, and refresh that. Okay, there. Well, now you'll notice that the heading has a block behind it off slightly darker background color in the same with subheading That's all controlled within the slider itself. So now we've got the slider place nicely on the page. The way we want it, we can just go back in and edit this this first home page slide. So what we're gonna change is we're going to change the heading background to know on the caption background to know. You know, what that will do is it will take this block color away. This this background color this stock slightly darker color. Sometimes you need to use it because you want you want it, thio Thio, for the purposes of setting the text onto to be visible. But I prefer not to use it. I prefer to put the block color into the the entire image itself. Now the other thing that we want to remove is the button. If you want to, you can. You can put a link on the image itself. Let's just take these buttons out. So I just removed the code. You can actually set the full slide to link so the user would click on this image and it will take them through to another page in your website wherever you set the link to go. But for now, we're just We'll leave that empty anyway. Um, Andi, I've taken out the code for the button. So if I now update that Andi, refresh the page. What we should see is that the background color disappears on the button. Text discipline disappears. Now, this is a little bit like, as I alluded to with three. The getting the containers. Right. This container, this 1st 1 don't you get that 1st 1 right? Then you can just copy it for subsequent ones. So I'm now going to I'm now going to copy this exact same slide, but all I'm going to do is change the background image. Okay, so now let's go. To add Annette, it slides. We'll see the list of the slides we've got on. You see that? We've got the clone option here, so I'm just gonna click clone, And that will give me another copy, which I can rename to number two. And then I can just edit this image and make it a different image. Everything else can remain the same. I might want to change the title, or I might want to actually remove the title together. In fact, let's do that. Let's take that out. Because on the maybe only, the home page image for the first image the user sees, we want the text on. Okay, so that's another image. Now I can go back and view all of the slides and again clone the 2nd 1 and make it home. Page three. I did the image on the place It perhaps with that one select own page slider End update. So now if I refresh the page, what we should see is that the images fade one into the other. There we go. Now, that's quite quite a fast fade, and you'll notice we've got navigation icons here. When I hover over it as well, I prefer not to see those. So if we want to, we can go in and edit this slide. So I've just gone to Fusion Slider are dead. It's sliders, and I'm gonna edit the home page slider. I'm gonna make a couple of adjustments here. So first of all, I'm gonna make the 600 pictures high instead of 500. I'm going to uncheck display the navigation icons. I'm going to set this slideshow speed toe 5000 on the trended transition to 3000. No, I found that. That for me at least gives me and much nicer speed of fade. Um, we'll see the effect now, so we'll notice the navigation buttons have gone. Now the slider is just gonna fade nicely, one into the other. So there we have it. OK, so I'm going to show you one more thing, and then we're done for this module. Um, it relates to the slider. Now, if you remember, we have this option to say Full screen slider. Let's check it. So what this will do is this will overwrite this 600 pixel setting and it will show the image to the full height of the screen. I'm gonna update that and refresh the page, and you're not going to see it now. The reason you're not going to see it is because if you use this feature, you have to put the slider onto the page in a slightly different way. So now let's just go back to edit the page. I'm going to remove this container. Actually, I'm just going to refresh this because it may not have got the new setting that I may just there. Okay, so I'm going to remove this container. Then I'm going to scroll rule the way down, and I'm going to go to the section where it says fusion page options. Sliders. I'm going to select the Fusion slider on the home page slider. Everything else remains the same. No, I'm going to update that. And if we scroll back up to the top, you'll see that it's put this section in saying I'm going to use the full fusion slider. Now, if we go on, refresh this page, you should see that the home page image runs to the full height off the browser window. There we go. So that could be really, really powerful. You could be really creative using that that feature, um, so that that's pretty much it. You know, using the tools that you've seen over the course of this module on the previous module, you should be able to create a really beautiful looking website. What I suggest you do is you go in and you start to play around with adding containers, adding rose, adding elements have a look at all of the elements that you're able to put onto a page and just learn what each one of them does. You know a lot of them. They're fairly self explanatory, but they are self explanatory in terms of the names of them, you know. If you wanted a pricing table, for instance, click on pricing table, see what it does. You can create pricing tables in columns. You can change the styling of it. You can create a progress bar. You can pull in recent posts from your blawg. There are all sorts of things that you can do with the tools available to you within the fusion builder. And it's just a case now, knowing that you're able to lay out the page in a way that allows you to create a beautiful looking website. You're then just coming down to the decisions that you need to make in terms of what content you're putting on your site, so that will determine which element to you want to put onto the page, and then you need to go in and configure that element to to make it look the way that you want it to look. Eso that's pretty much it for the advanced layout tools. The rest of it really is down to you in terms off, learning how to use those tools and becoming more and more familiar with the matter. Go all go along and create the used them in the projects that you you subsequently go on to create. Now, in the next module, I'm just going to cover a little bit about how to actually launch a website. Once it's ready to go on, then we'll look briefly at maintenance and support that may be necessary for your for your sights. See you in the next one. 11. Module 08 - Adding a blog - Adding content to the footer: Okay, Welcome back. We're going to cover quickly how to add a block to your site. Now I realize that I haven't really covered that prior to this. And obviously WordPress is known as a pizza blocking software. Primarily, that's what it was built for. It's now become used to to build for more complex sites than just a block. But the block facility is part off WordPress, and it's probably something that a lot of your clients may want to incorporate into their sites. Is a block facility now? The advantage of running a block, of course, is that your adding new content to your site all the time. And therefore Google indexing is indexing that content, which helps with your search engines so changing listing. So it's really good idea to encourage your clients to run a block if they can. Okay, so let's let's have a look at it. First of all, what we're gonna do is just create a page. Then we're going to create a new page called Blawg that will then at the navigation automatically to Theseus. ICT, of course, because that's how I have it set at the moment. Okay, so I'm not gonna do anything other than just create a page called Block. And if I now go back and refresh this page, we should see that Blawg has been added. There we go. If we click on that at the moment is just a blank page. There's nothing there. Okay, so now if I go back to the WordPress dashboard and I go to settings and reading and I set my post page to Blawg and save those changes that will then automatically become my block page Now you see that it's automatically put in a sidebar Ondas showing one of the block posts. Now that's one way of doing it. The other way of doing it is you can just add a component that we just quickly show you on here at a container clicking element. Then you can add the blawg element onto the page, and therefore you can. You can change the settings there, so that's a different way of doing it was you may want to look at, but for now, let's just just just do it the default way. Now you noticed that in the right hand side here. We've already got links to recent post recent comments archives in the search box that is all controlled in the widget area. So we go to appearance and widgets. We look at the blog's sidebar. Let's just take out the search box, take out the comments because we're not running comments and take out Metta. Then if I refresh the page, we see that this has changed. Likely. We've still got a single block post. Now that block post is there by default. That's one that is created when WordPress itself is installed. So let's just get rid of that now. If we go back to the front end, Impress refresh. It's all going to disappear because there's nothing that there's no block posts. Okay, so add new. Let's create a new plug post, and I'm going to call it my first post. I'm gonna type in some text. At the moment. It's There's a category called Uncapped Ago Rise, which is the default category. So obviously with a post you can categorize a post Onda post can be in one or more categories. You could put it into multiple categories if you like, so if you have a lot of block posts in your posting information, about, let's say recipes. For instance, you might want to categorize all of your recipe posts in a category called Recipes. And then you might want to categorize all of your posts about walking in the countryside in , um, time up for whatever whatever category you want to create. You can then put your posts into those categories, which helps helps users users find it. Now. I always think that it's nice to have a an image associated with the Post, so let's just select one of the images we've already got uploaded. And I just created that as a featured image rather than put it into the text itself, which you can do, incidentally, by clicking Add media. You can just put it into the body text itself. I prefer to use it as a just put in this featured image because the system is set up to to nicely display that that featured image, which I'll demonstrate here. If we know, refresh the page, we'll see that there's the first block post now. At the moment, the way this is set up is to show it in a grid view. You can go in Andi, go to Nevada theme options on Go to Blawg. This will allow you to change this styling off the block. So let's say, uh, let's put it in timeline because that's quite an unusual one. You can set the pagination. You can have it on infinite scroll or load more, but in various different settings that you need to go in and have a look at and play around with until you find a setting that works for you. Okay, so this is now a timeline. I know. Go in and add a new post. So we start to build number of posts in here. So my second post second correctly put in some more text incident. If I wanted to add a category, I can do so on the fly. So as I as I create the post itself, I could just add a new category in here. I upload another image, set the featured image and publish. Now, Incidentally, the block posts are something that it's more likely your clients are going to be doing this so you will probably have to learn how to do it, so you can then subsequently train your clients to do their own own block posts. Okay, if we refresh that now. So you see, now that they're appearing side by side, these icons here, Incidentally, if I click on this, it will link through to the post itself. If I click on this, it will show me a bit bigger version off the image, which I do not like. Actually. So I turned that off. I go to of our theme options. Then Aiken scroll down to I think it's the advanced section. Just go back one that's loading. Kate, this is taking a bit of time to worry about this. It will get there eventually. Okay, so we're back to the to block posts. Okay, So I'm gonna scroll down to I think it's advanced door extra. So look, Page is still loading at the moment, located in extra. If we go to featured image, roll over, click on that. And then we couldn't set the image rollover zoom icon off. Save that and refresh. So now what we have is a link only through to the post itself instantly. This color overlay is set in the same place as well. So you can change that overlay color in that same place. So if I now click on the post itself. What I'm now seeing is what's called the single post. So I've gone into the post itself. Now you notice that the featured image has gone. Now we can put that back by going back to the blog's setting and blawg single post. We can set the featured image toe on and save the changes. Now, if I refresh, there's the featured image. Now you notice that we're not seeing any navigation. That's because it's set toe white on. Obviously, when we were on our home page, it's still there instantly. The navigation. It's just that we can't see it. But when we were on our home page, the navigation is sitting nicely over the top of the image. So what we probably want to do here is to go to header and head of styling and change the head of background color to be a darker color. So let's make it not quite black. So now if we refresh there, we have it. So now we have our header in place on the other thing that I will cover in this section, which I realized I haven't really covered, is the footer. Now, if you remember, the footer I mentioned was above a copyright section so that even though it's the same color there I've set in the same color, there's actually two different sections. Um, now, obviously, in theme options, we've got a footer styling option Onda. We can have a number of columns in the footer anywhere between one and six columns, actually, by default or at least the way I've got my system set up. When I when I imported all that that code, I've just got one foot a column. Now that is reflected. If we go to appearance and which widgets, I'm just gonna come out of that so I can demonstrate this to you. Now you'll notice that we've just got one foot a widget listed, and that's where I put the motile privacy policy there. Now if we wanted to insert more content into our footer, let me just put some content in here. Actually, uh, let's just put a text block. You could just lift these widgets up Andi, place them into the footer. So let's just say let's give it a title of contact and put some text in there just so we've We've got some content. So save that and refresh the page. Now What we should see is that we've got a widget going in there. Now it looks to me as though the footer is set to 100% wit. So that's gonna stretch. Okay. Yep. So that stretched with the outside of the grid. If it was in the great, it would it would finish here and here. Uh, so that is a setting that you can change if you prefer it to be in the grid. But let's say we wanted to have a few more columns in the footer. Let's go to of our theme options and footer and set the columns. Let's say three columns. Okay. Now, if you wanted to change the foot of width to be in grid, we can just turn 100% with off. There are various other settings that you can you can determine here, there. So the padding, the spacing, the background color will be sleep. Um, the typography, the text color, the headings color, all sorts of things could be set in the foot of theme options. So now if I refresh that, you see that It's gone into the grid on the copyrights. Gone with it as well? Instantly, it's controlled in the same way. Um, but if we now go to appearance and widgets, what we should find is that we've got a couple of extra footer widgets in place that we go for two widget to foot. You reject three. So now what I might want to do is to drag, perhaps, and social media icons in there. So let's say that we want to link to Facebook. That would be the Facebook. You are l that you put in there. Incidentally, I'm just gonna put some bit of text in there. Just so it shows the icon for now linked in maybe Twitter. Okay to say that on refresh. So there we go. We've now got some social media icons in there. Um, I'm not sure why you just move this underneath and refresh. Okay, so that was it. I had my I have my custom makes you male above this one. Put in an extra bit of spacing. That's probably too tight to the to the edge there, in my view, so are going and change that in a minute. But one more thing. Let's put in which we have recent posts. Find where recent posts is Peritus. Recent purse. OK, so if I now put recent posts into, I can determine how many I want to show. Let's say three. We fresh that. So there we go. Now we've got three columns in there. These air linking straight through to the block post is our social media links. Andi, I'm just going to change the spacing slightly. So we go to Nevada theme options and footer for two styling. So we've got the foot of padding only 10 pixels that moment. So let's make that 40 pixels at the top and refresh that I'm never got. So now we've got a bit of extra spacing in there, which just makes everything look a lot nicer, I think. Okay, so that's the footer. That's how you put widgets into the fertile content into the footer. And that's it for this module 12. Module 09 - Site Launch, XML Sitemap & SEO Fundamentals: So you worked really hard on this site. It's ready to go live. Your client has paid you. Andi. They want the site to be activated as soon as possible. So what steps you need to go through? It's pretty simple. I mean, this is obviously assuming that the domain name is live. You have registered it. It's a usable domain name. Andi. Therefore, this number is going to disappear. Assumes you're your domain name becomes active. So, um, if you wanted to to remove that name, that number, it's in settings and general on. You would need to just take it out off off the URL there. Now, if you take that out before the domain name is is live in, the DNS is updated. Then you will lose access to the site. You'll have to go into the database and reinsert that number. So I suggest you don't do that until you know, 100% that the domain is active. Incidentally, if you you can try it out by literally just taking the number out, um, at the front end, hitting refreshing. If you see the site then then the domain name is active. Okay, So you would remove that. And then the next thing I would suggest you do is you go to story settings and, uh, reading. And you UnTech discourage search engines from India injecting this site. So that means that it will the Google world start to index it along with other search engines. Of course. Um, I would then suggest that you go to your plug ins, and if you've installed my default set of plug ins, there's one called all in One Seo pack, which I would activate. Now there's another very popular S CEO plug in search engine optimization plugging called Yost. Andi, you could perhaps look at that one as well. You hostess sort of handholds you through the seo optimization process in a little better than all in one does. But I tend to not use Yost. I prefer the the all in one a pack. Okay, so one of the things that I would do is I would I would go to feature manager within all in one. Seo and I would activate XML site maps, social matter, bad bought blocker. Um, the others I tend not to use. Uh oh, uh, robots. Txt. I activators were so this fall that I activate XML site map social media, social meta robots text in bad bought blocker. I then go to XML site map. Andi, I set this schedule to either daily or weekly. Andi, save update the site now What that does is it creates a file off all of the pages within your sight. Andi basically Google Read reads that file in order to better in actual site. There's a lot of information out there on the Internet about optimizing your site for search engine um, optimization on its outside of the scope of this course to cover that. But suffice to say, this is one of the tools that would potentially be recommended to to use. There's a lot of configuration that is required in here if you want to use it. I've found that it's not really necessary. Other than that initial set up. If you create your page names correctly, you had to have some good content in your sight. Then eventually it's gonna get picked up anyway, organically, rather than you forcing the issue. So I tend not to spend a great deal of time on that. But obviously that comes down to your your client's wishes. That's pretty much it other than settings reading. Very often. When I'm working on a site, I would not have the home page set to home. It would be set to something like a holding page, which would just be a blank page. Actually, let me just show you, show you how to do that. Gonna add a new page. Now, this is another feature within Nevada. That is not that I have not found in in any other theme that I've used on did it can be It can be very useful for hiding the content of the site if you've got a live domain active. So I'm just going to create a page called Holding Not gonna put anything on it. Well, actually, I'll just let you see, because I've activated all in one Seo. It's now appearing at the top off the page, which I find really annoying. You just go to screen options untypical in one s CEO. It will then disappear. So I just put a container onto this page, but I'm going to set the template to be blank page, and I'm gonna publish that now. In doing that, I just realized that I've still got, um, appearance. The menu set to automatically add top level pages. So if I just go back to the version with the i P address in it, If I refresh this now, we've probably got a page called holding appear added to the menu waiting for that tow load . Okay, there it is. So I really didn't want to do that. You just need to watch for things like that. So if we know goto appearance on menus, we'll take this out. Remove that and UnTech automatically at new top level pages to this menu, safe the menu and refresh. Okay, So that, uh, menu item will now be gone as soon as the page loads. Okay, there it is. So we're back to the menu as we want it. Now, let's just go to settings and reading again so I can show you how I would have used the holding page had I've been developing riel site. So I'm gonna set the home page toe holding. Now if I refresh the page, what we should see is nothing. So it's just a completely blank page. There's no navigation, there's no footer. There's no head of those inside bar? Nothing. It's just a blank page. Now I can actually go into that page. The holding page, Andi, I could edit it, and I can just put in some text to say website under construction, for instance. Please check back soon. Okay? And that's sent to that. Maybe make it, uh, h two save and update. Okay, so there are lots of under construction plug ins that you might try, but I found that with Nevada, you don't really need it. You could just Utkan you can put pictures on there. You could put a contact form that allows users to register, register their email address with you so you can let them know when the sites actually live . All sorts of options with that. But that's basically the holding page feature. So if that had been in place while you were using while you were developing your site in order to view your site, all you would have had to do is to put four slash and then one of your your page name waas after the well, and then you could get to view your site. Obviously, unless the user knew that the U R L They could not get to view the rest of your site. But then importantly, you need to have the, uh, discourage search engines box ticked. Okay, So if the holding page was in fact in place, what we would have had to do is to go to reading settings, reading on change the home page to hold and save the changes in order to launch the site. So you just make those change changes and then your site his life. You can let your client no Onda and hopefully everybody's happy end of module. 13. Module 10 - Maintenance & Support: right. Welcome, toothy final module. In the course in this in this module, I'm really just going to run through a little bit of maintenance and support that you could you you're gonna be expected to do. Or least if you're You know, if you're looking after your client's interests, then you need to provide this kind of maintenance and support to your clients. Now you can charge for it, obviously, and I suggest you do charge for it because it's going to take up some of your time. But it's it's gonna mean that the client's sites stay secure and updated with with content , updated software, very various things that you're going to need to do on either daily or weekly basis. Now, at the time of developing this course, I do charge my clients for this. I charge them. I think it's 100 £20 a year to maintain on support their sights. Now that doesn't include changing any content for them. I I handle that in a different way. This is purely to do with security maintenance, keeping the site secure and keeping the software that's running the site up to date. Now, if anything goes wrong in the course of updating the sites. If they're paying me that that money, then obviously I fix it within. Within that fee, Um, most of the time things are fine. You know, if if one plug in does cause a problem, then it's usually a relatively easy thing to fix. But on occasion, it can cause some problems. So you just have to be a little bit careful. But because I'm looking after so many sites, then I tend to make sure that the update works on one side before I apply it to all the others. But let's just run through quickly the sorts of things that you're going to have to to consider doing on behalf of your clients. So let's assume that you've you've locked in eso you locked into the WordPress dashboard Andi very often when you log in. The first thing that you'll see is that it will indicate that there some sort of updates thes appear to be plugging updates that are required. So let's just click on plug ins. We can then see that there is an update for the kismet plug in for the autumn one s CEO plugging on the contact form controls plug in. So let's just click on update available so we can just list the three plug ins that need to be updated. So then, just using the drop down click updates and apply that will then just go away and apply those updates. Now, if anything does go wrong at this point, if a plugging fails to do an update, it may be that when you go to the front end of the site, you cannot view it. It'll show an error of some sort. Thankfully, in this case, it looks as though everything's gonna be fine. It's actually still updating. So let's just let that complete. First of all, Yeah. Okay, so, no, no, I'll do the refresh. Just check that everything's still working. Now, if I did update the contact form plug in there, I may just do a quick check to make sure the contact form was still working. Ah, a lot of problems that do occur relate to the contact form if I'm honest, but on the whole, it's pretty stable on, and it'll work fine most of the time. Um, okay. Is that gonna reload? Yep. So that's that's all fine. So those plug into now updated. So that's the sort of thing that you may want Teoh to look at for your clients on a regular basis just to see if any software needs updating. Obviously, the theme may get updated as well, so you'll have to update the theme. I tend to update the theme via the FTP process, as we've demonstrated in an earlier module, whereby I'll download the latest version of the theme, unzip it, copy it across by FTP and overwrite all the files that were there in the in the process on bond, certainly with the Varda touch wood. I've never had any issues with that. It's always worked every time because I think they're developers at Nevada or a pretty hot on that they don't want any problems as a result of any of the updates. So they test it very, very extensively and carefully before they release on update. Okay, so that's that. Now, the other thing that you might want to do for your clients is to take backups off the site , just in case anything does go wrong. There are lots of plugging back plug ins out there that allow you to take backups. I use one called updraft. It's a free plug in. I'm just gonna activate it now and you'll see that this pop up appears You can work through this if you like the first time and just it just give you a sort of quick tutorial about how to use it. But I'm going to skip that and just go straight into the updraft settings. So you see that we've got a number of tamps available to us here, one of which is setting. So let's just click on it on settings. I'm going to set the backup to happen weekly, and I'm gonna set it to keep four copies off the back up. So that means that it will have four months. It'll have four weeks worth of backups before the the first weeks first week, then gets over written by the fifth week. It would be, wouldn't it on someone now, um, by default. It's going to back up the plug INS folder, the themes and the uploads on a copy of the database, which is basically everything that need now. If I was to click save changes now, that would all be fine and it would back up, but it would back up to the server on which this website is located. Now, with some hosts, that's absolutely fine. But with heart Internet, they will not allow you to do it. It will work, but eventually you'll get a message from heart Internet to say that they've disabled it, basically because they don't want you to take up their valuable disk space by storing a lot of backups off the site, which is perfectly fair enough. So what I tend to do is I use Dropbox for my backups on do this. This is added security as well, of course, is because your backups are located in a different place than your website. So if anything does go wrong with the server on which your website is sitting, you know that you've gotta back up in a different place, said the. Chances are you'll be able to recover from that back up when you need to eso I click Dropbox as my storage location and then I click save changes and then what it's going to need to do is to authenticate with my dropbox account. So if I've already, if I'm already logged into my Dropbox account. Then it will just allow me to to go straight through, complete the set up, and now the backups will be taken Andi store to my Dropbox account rather than stored on the server on which the website resides on. That's that's pretty much it. Now, if you need to recover from a backup, this is It's outside the scope of this course, obviously, but there's lots of information about it on the updraft website you can you can figure out how to recover from the backup backup if need be. And if you are in that desperate situation as a result of doing this course, you have access to me. So either contact me via email or through my support system, and I'll help you. Not a problem at all providing you've got the backup, of course. Otherwise I will not be able to help you, so make sure you do install updraft and make sure that regular backups of your website are being taken. Eso that's that's pretty much it. In terms of day to day maintenance, it's it's really just updating the theme software, updating the plug in software and occasionally WordPress of course, is is updated as well, and you'll get an indication in your dashboard. If WordPress itself needs an update, so you can then just apply that update on, um, you'll be running the latest version off off WordPress. Now, if your clients want you to maintain the content of your off their site as well. Now bear in mind that you know, I I have lots of clients. I have hundreds of clients on, and they all have access through the WordPress log in to update their own site. Should they choose to do so, I can honestly tell you that none of them do. They all asked me to do it simply because you know they're concentrating on their business . They have other priorities. They don't want to necessarily learn how to use WordPress. And it's a hell of a lot quicker for me to make those changes for them that it is for them to spend, you know, days, if not weeks, sometimes trying to figure out how to do it themselves. So I have an arrangement with my clients whereby they buy some time in advance from me. Andi. They then request changes. I make those changes, and I offset the time that I've spent against the credit on their account effectively. I found that to be a very, very easy way of managing that that part of the client management process in the website management process, uh, my clients are happy about it. I'm happy about it because I'm getting paid for the time that I'm spending on it. Um, and it's it's a cost effective for my clients because, you know, it might. It might take me 15 minutes to do a change that they need need doing fairly quickly, and it might take them several hours to figure out how to do it themselves. And the chances are that in the end they'll call me anyway on asked me to to make that change. So if you're if you start to build up a client base and you are getting requests to make changes to sites on a regular basis, I suggest you implement some sort of similar system whereby Thea updates and changes that you're getting requested. Your time is covered in terms of the time that you're spending doing that. Eso that's pretty much it well done for getting all the way through the course. I've hope. I hope you found it really, really useful. I hope you will go on and learn how to use the tools in more detail and get more familiar with the tools as you progress. And I hope that I start to see some really, really nice sites that your building as a result of completing this course. I wish you the best of luck on and as I say is part of doing this course. You do have access to me so you can via the resources in listed in this in this course you can you can find their way to contact me. Andi, if you do need some help, by all means, get in touch with me, and I'll do my very best to steer you in the right direction. Many thanks, Indeed. And good luck.