How to Create a Successful Website Design & SEO Business for 2023

1. Introduction: Welcome to this exciting learning opportunity. I'm Leighton, your webmaster. I've devoted over 15 years to designing, developing hundreds of websites for reputable businesses across the globe. Commitment to quality has army over 100 five-star reviews. And now I'm offering you my secrets. Let me share the tips, tricks, and skills I've learned while owning and running a successful web design business. Why web design? We'll see the appeal of this type of business. Some benefits come to mind. Are you interested in financial freedom? Freedom to work from anywhere in the world? Freedom to set your own schedule, freedom to choose whom you'd like to work with. Here, there are tons of benefits to embracing this industry. And my master class will teach you the fundamentals of web design, coding, domains, hosting, emails, SSL certificates, WordPress, and the Devi theme to how to build a website. Visually designing and developing one-page, multi-page e-commerce and mobile-friendly sites. Where to go for design inspiration, image assets, and the best web design tools available. Number three, how to create your brand, which includes your professional website, your logo, email address, business cards, and digital portfolio. And how to promote your web design drained number for search engine optimization using both on-site and off-site SEO techniques and how the cell SEO services. Number 5, website maintenance plans, how to build value and create passive income by offering to your clients a website maintenance plan that includes hosting, management, updates and security services. Number 6, how to serve clients? I'll walk you through the entire process, earning an interviewing clients, quoting their website, sending proposals and contracts, invoicing and taxes, on-boarding clients, designing, developing, polishing, and launching websites, and maintaining your clients. And number 7, conclusions and takeaways. 10 key takeaways for success. Ten things I wish I knew starting out, and 10 things to avoid when running a web design business. Basically, you'll learn the solid foundation you need to start running a successful web design business. Now I don't believe in guarantees. I don't believe and get rich quick schemes, but I do believe in honesty and hard work. And with the knowledge from this course, in tandem with a solid work ethic, you can reap the benefits of this wonderful business. I've seen it firsthand. Let me help you. I promise to teach you these practical, actionable concepts in a bun and engaging way. And each lesson will have opportunities to pause and recently. And the all important homework where you can put that less than action. So let's get started. 2. PART 1: Fundamentals of Web Design: Welcome. I'm Leighton, your webmaster. In our first series of lessons, we're going to learn the fundamentals of web design. These lessons we'll explore coding, domain names, hosting servers, email accounts, SSL, security, WordPress, and the Devi theme. After we learned the fundamentals, then we'll learn how to build a website. We'll talk about your brand and really how to build your web design business. But before we do any of that, we really need to understand technically how a website works. If you already know how it works, you can skip through this. But if you're brand new to this industry, you might be wondering, What's involved in building a website. What do I even begin? Now, when I started building websites 15 years ago, I had to learn code. Have you heard of code? Do any coding languages come to mind? Well, there's four major web programming languages. There's HTML, CSS, JavaScript, and PHP. Html is the basic programming language of all websites. Css gives you a website design, color, and style. Javascript gives you a website functionality. And PHP lets you interact with servers and databases. I'll go into more detail on those in the next lesson. But you might be thinking, toting is expensive and difficult to learn right? Now. No, it really depends on, on which language and what your needs are. A tuition, know, there's a wealth of free resources out there. If you're interested in learning code, I wouldn't pay a dollar for that knowledge. And that brings up our first key point. I want you to take advantage of all the free education and services you can find. Let me repeat that. Take advantage of all the free software services and education you can find. And honestly, learning to code a website is far easier than coding mobile apps or computer software like Excel and PowerPoint. That's way over my head. Now, well, it's valuable to have a basic understanding of how these programming languages work. Nowadays, it's really optional. Thanks to content management software like WordPress and Visual Site Builders like the Devi theme, which we'll discuss a few lessons from now. So how would you define a website? This is a website mean to you. It's really like your little slice of the Internet. A website requires a domain name like a.com. So people know where to find you. Think of that like an actual home address. And while houses live in neighborhoods, your website lives on a server which can hold several sites. And like the lock on your front door, websites can be secured as well with an SSL security certificate. So in that sense, starting a web design business is kinda like building a digital subdivision. The land is ready to build a thriving community. In the following lessons, we're going to expound on the fundamentals of web design. Especially we're gonna talk about coding. We're going to talk about domain names, web hosting servers, email accounts, mailboxes, and forward SSL certificates, WordPress. The Devi theme. And not only will we gain an understanding of these topics, I'm going to teach you how to create business opportunities out there. Each lesson will have homework where you can put into practice what you're learning as you build your web design business. Please enjoy the following less. 3. Coding: Welcome, I'm Leighton, your webmaster. In today's lesson, let's talk about coding. Code tells software what to do. Code can be written in different programming languages for different purposes. Now, for the purpose of web design, There's four major web programming languages. There's HTML, CSS, JavaScript, and PHP. Now obviously there's plenty of others, but let's briefly talk about these 4. First, HTML that stands for Hypertext Markup Language. Every website you could possibly visit is built on HTML. And guess what? You can read it. Html is visible for everyone to BYU. To prove that, Let's pull up the HTML of Wikipedia. So here we are on wikipedia.org. Let's view the HTML code that powers this web page. In the Google Chrome browser, we can right-click and click view page source. You should be able to do this on any browser. On Chrome, it's called View Page Source. And here we are. This is the HTML code that powers this webpage. We have a heading. We've got the title Wikipedia. We've got the description of the webpage. This is some CSS code. And now the body begins. This is the body of the webpage. And here we see an image tag denoted by the letters I, M, G. Here's the source of that image tag. It's a PNG image file. Let's open that. And there we are. This is the Wikipedia logo. Can we find that on the homepage? Let's look. And there it is. That IMG tag created this image in the center of the page. Here's our first heading, H, one. Wikipedia. Strong would mean something that's bold. A denotes a link. And there's all kinds of other things that you can do with HTML. You can add images, paragraphs, headings, tables, and so much more. But HTML by itself is quite bland. How do you add color? Change the style, font, size, et cetera. That brings us to CSS. Css stands for Cascading Style Sheets. This piece of code is layered on top of HTML to give it style, to beautify a website. Css, like HTML is completely visible to the public. Let's look at the Wikipedia CSS. So we're back on wikipedia.org. I pulled up the CSS web page and let's edit some of the style here. So we right-click one of the links. And let's say we want to change the color of all of these links. So we right-click and press Inspect. You should be able to find this in any web browser. In Chrome, it's called the inspector. So we right-click on a link and would go to Inspect. And in the center here we see all the HTML code for this webpage. On the right though are the styles. So let's change the style. Let's change this blue in the link. Let's change it to something else. There we go. We change all the links to green. How about we change the text? Right-click on some of the text. Scroll down to the color here. And we're gonna make this a bright red. There we go. Let's look at this image over here. The logo for CSS. Inspect with one piece of code. Let's hide that. We're going to add display colon none. And there we go. It's gone. Let's uncheck that. Puts it back. One more thing. Why don't we change the background of this table here. Change the background dash color to a blue. Now it's important to note that all of the changes we're making here are only on our device locally. We are not editing the live website. So why would we wanna do this? Why go through all this work? Well, let's say you're editing a website for your one of your clients. And you want to change things up, see how a different style or a different color would potentially look. This is an awesome way to edit a website visually. And I encourage you to check out the wealth of free resources out there to learn CSS coding. So HTML is the core content of your web page. Css gives that content style. Now let's look at JavaScript. Javascript gives you a website functionality. Most interactions, animations, form validation, mathematics, pop-ups, and general website functionality is handled by JavaScript. There's so much more you can do with JavaScript. And the popular jQuery free library makes it even easier. And fortunately, a quick Google search can help you find a reliable piece of code for pretty much any JavaScript functionality you can look for. Php stands for pre hypertext protocol. You can't see a public websites PHP code because it lets you interact with servers and databases. Like when you submit a form, what happens when you log onto a website? When you access a database? All of that can be done in PHP. Now there's other languages similar to PHP, like Python and Perl. But I decided to learn PHP early on because it's super popular. Even WordPress itself is powered by PHP. There's tons of potential with PHP, but for your sake, PHP will mostly be used to make minor edits to your WordPress website. Finally, my SQL is a database. With it, you can store and retrieve data for your website. What kind of data might you store? You can store user profiles, blog posts, e-commerce orders, calendar events, the WordPress software, comments and so much more. Databases can be huge, store massive amounts of data that can be retrieved in a fraction of a second. Basic MySQL code let you retrieve, add, edit, and remove data from a database. So that's a brief overview of the most common programming languages that to come across. So how do you go about learning these coding languages? Which are can't do that in 15 minute video. Code, can take weeks, even months to fully comprehend and master. Fortunately, there's a tremendous amount of free resources out there to learn code. I would recommend starting with a Google search, such as Learn HTML free. Here we are on Google. Let's search Learn HTML free. Now the first results that pop up are advertisements. We know that because of the word add and that's our first. So the first results that pop up are very likely going to be premium or paid courses. We know that because they're paying for an ad to get you on their website. So let's skip those for now. Let's look at what pops up on the organic listings. We see Code Academy.com. We see W3 schools.com, learn dash, HTML.org. All terrific resources. Let's look up on that I had used several years ago. W3 schools.com. This is a wonderful resource because it makes it so easy to learn this type of code. There's all kinds of pages here where we can learn the different types of HTML code, such as headings. Html headings. It gives you a basic description of what this is used for. Html headings or titles or subtitles that you want to display on a webpage. Gives you an example of how they look, how to code them in HTML. They are defined with the bracket H 1 to bracket H6. Tags. 81 defines the most important heading. H6 defines the least important heading. And there's examples of what that code looks like. Now there's even a Try it Yourself box, which lets you visually try out this code that's helpful. There's an explanation of why headings are important and ways to make the headings bigger than the default. So there's all kinds of resources here to learn HTML. There's HTML, paragraphs, links, images, tables, lists, and that's just on this one for your website. In fact, there are so many quality websites like this. The, I wouldn't recommend spending a dime on any of the language as mentioned in today's lessons, save your money. Spend a little time each night learning code from one of these free resources. A basic understanding of these languages will add to your repertoire of knowledge. And remember, the more knowledge you have, the more valuable you become. And the more valuable you are, the more you can charge. That's so important. Let me repeat that. The more knowledge you have, the more valuable you become, and the more valuable you are, the more you can charge your clients. Plus you'll be in better shape to solve problems that arise. Why can we say that? What sort of problems arise when building a website? Let me paint a picture for you. Imagine you pull up one of your clients websites and it's just a blank white screen. Or there's a warning or an error message. What do you do? An error like that, that looks like foreign language to someone else, will make sense to you if you understand the coding language. In fact, the error message usually explains itself if you know how to read it correctly. So understanding the code will help you to efficiently diagnose and solve the problem. So what have we learned? We've learned the one. Most all websites are built with the coding languages, HTML, CSS, JavaScript, and PHP. We also learned, you can take expensive college courses to learn to code. There are many free resources you can explore. Third, we learned the learning code does not absolutely required to be a website designer. But I recommend it because you'll have a deeper understanding of how websites work. You'll be in a better shape to troubleshoot problems will have an advantage over your competition. What's our homework? I want you to search Google for free websites where you can learn HTML, CSS, JavaScript, and PHP. That's it for today. I'm Leighton and now you know, coding. 4. Domains: Welcome. I'm Leighton, your webmaster. In today's lesson, let's talk about domain name. How would you describe a domain name? What's the purpose of domains? Well, what's the purpose of your home address? So people can find you. Your.com is like your digital address. It's where people go to find your website. In this lesson, let's discuss one, what domains do to how much they cost? Three, how to pick 14, where I recommend buying one. So first, what's involved in a domain name? Well, obviously you have the name itself, such as google.com, but what else? First off, every domain name has public contact information. What kind of contact information? Well, every domain has the name, address, email, and phone number for the administrator, the registrant, the tech, and billing. Do you think that could be an invasion of privacy? Apparently, it has been because in recent years, most domain owners choose to privatize the registration. And basically they hide their contact information. You can usually turn on private registration for free, which I do mostly for the sake of just finding spam. You see marketing companies will scrape domain names to build the marketing lists. So private registration just limits that. Next, domain names have a lock, an authorization code. What do you think those are four. Well, what do you give the new homeowner once you sell your house? The keys? That's right. Similarly, the lock and Authorization Code helped to facilitate the ownership transfer. Finally, domain names have DNS settings, which stands for domain name system. That's been described as the phonebook of the Internet. And what was the purpose of phone books? To send people to the correct person or business. Similarly, DNS basically specifies the correct server to send website traffic, subdomains, and emails. Now, how much do domain names costs? Generally about $15 a year. I wouldn't pay over 25 for one. And you're going to find the same prices, no matter if you're on GoDaddy IO minus 11 Google domains. In fact, let me show you an example. So we're on the homepage for GoDaddy.com right now, and we want to click on domains. First thing we see is a search bar where we can type in our potential domain name. Now let's look at the prices for the various domain extensions. We see prices for the introductory first-year cost of about $1 to about $15. Now the actual price of the.com, after the first year introductory price runs at $17.99. Right now on GoDaddy. There are other domain extensions such as dot design.org, dot store, dot blog, dotnet, dot buzz, dot guru. In fact, there's hundreds of domain extensions. And this is fairly new. Just the last few years that these extinctions open up. Now they can be quite expensive. They can be over 50. They can actually cause a hundreds of dollars. But let's look at some of these. See all of our new domains. Here we can see a list of all the domains that are domain extensions are available to register. In fact, there are 497 available on GoDaddy right now. There's basically one for about every industry out there. So we've established that there's a small fee involved. As a web design business, you don't have to cover that fee. You can invoice your client or even have them set up their own GoDaddy account in their name with their credit card. So how do you pick a domain name? This is very important. Is your domain name is an extension of your business. And choose wisely. As most companies will keep their domain name for life. Your ideal domain name is just your company name.com. Sometimes that's not available. You have to get creative. You've got to maybe look up variations of the name, a keyword, a locality, et cetera. Now a terrific resource to do this is instant domain search.com. So we're on instant domain search.com and let me search for a domain name. I'm going to look up a web design course for you.com. Let's try that web. Now you'll notice as I'm typing, all the possibilities are instantly shown. We don't have to wait for a new page to load. We don't have to wait for anything at all loads instantly. Now, this is what we've typed in with various domain extensions. At the top would be.com. And then there's other ones underneath. In the middle would be different ideas, different variations of what we've typed in. And then on the right would be for sale. These there'll be ones that are already registered and we have the opportunity to purchase them. That's thousands of dollars usually. And I don't typically buy a domain name that's already registered. So let's keep typing. Web design. That is taken big surprise. Course, that is up for appraisal, looks like it can be purchased. And that one is already registered web design course for you.com. Green means it is available, available to purchase. If we hop over to go daddy or ionise or any other website, we should be able to purchase it on the registrar of our choice. So this website can be extremely helpful to instantly look up domain name ideas, instead of having to load a new page every time we want to try a different domain name. At this point, please pause the video, browse instant domain search.com for a few minutes, brainstorm and domain name for yourself. Now obviously as a business, you're going to need your own domain name. But what about for your web design business? How do you go about handling domains for your clients? Well, when you take on a client, there's two likely scenarios. Scenario number one, your client already has a domain name. That's great. As for the domain registrars login and use it. Scenario number two, they don't have a domain name. That means together, you'll come up with a name and purchase it. Now it's important not to change your domain name unless absolutely necessary. Why? What problems do you think could arise when changing up your domain name? A few things come to mind. I mean, people are already familiar with your domain name, so they might question the validity of the new one that pops up. Plus the current domain name is likely already printed on so many marketing materials and ads that are running. So it can become very costly to update your domain name across all channels. So when you sit down with a client, you need to stress the importance of choosing the right domain name and sticking with it. Now, where do you buy your domain name? Domains are ordered through what's called a domain registrar. I typically buy my domain names either through ionised.com or GoDaddy.com. Godaddy is a solid choice for domain names. But personally, I use Ioannidis since my web hosting servers are already through them. So it just makes things easier. Do you think it would be wise to keep all of your clients domain names under the same roof. Why or why not? Yeah, it is. For efficiency's sake. You don't have to juggle a bunch of logins. I strive to keep all of my domain names under my one eyewitness account. So that's all through the same spot, through OneLogin. So much easier to keep track of things that way and be organized. Being said, having a GoDaddy account is also nice since it's super easy to transfer a domain name from another person's GoDaddy to yours. For example, if a business is transferring their domain name to you, you might need to get it from their former Webmaster. The former webmaster has a GoDaddy account. You can transfer it to yours and just five minutes. At this point, please pause the video, go to I own this.com. Click domains. Spend a few minutes reading this webpage. So to recap, what did we learn so far? We learned one, what a domain name means to how to choose 13, what's the cost of domains and for where to buy them. Now remember, as the owner of a web design business will either your own domain name, but you also manage domain names or your client. Some clients will keep their domain name under their own account, and others will let you handle it for them. Either way, handling a domain name for a business takes a measure of trust. The better you understand how domain names work, the more trust you are. And the more trust you earn, the more valuable you become. Let me repeat that. Handling a domain name requires trust. Better you understand how domains work. The more trust you are, and the more trust you learn, the more valuable you become. So what's our homework? Think of ideas for your own domain name, for your web design business. Research your ideas that instant domain search.com, i o nas.com or GoDaddy.com. If you do not already own a domain name, purchase one at GoDaddy or illness using the affiliate link in this course description, you'll start building your website on that domain later on. Now purchasing through my affiliate link is of course option, but it's a nice way to show appreciation for your webmaster. And now you know domain name. 5. Hosting: Welcome. I'm Leighton, your webmaster. Today we're looking at a crucial part of a website hosting server. Now remember, a server we like into a subdivision. It's where your websites or digital homes live. So there's three necessary elements we need to publish a website. One, the domain name to the website itself, and three, a hosting server. Domains, as we discussed in the previous lesson, are about $15 a year. A website you can build for free, but a hosting server will cost you more once the exact cost. It depends on what well, what do you think could impact the cost of a server? Well, our electric bills the same for all how sizes. Now, the more power needed, the more expensive your utilities. In a similar way, the more traffic a website gets, the more powerful and expensive the server needs to be. In fact, you could spend thousands of dollars each month on a server. But what about for your needs for yourself and your small business clients? A top tier economy server or a lower end dedicated server should suffice. Those are about ten to $50 a month. Let's look at some options. Here we are on GoDaddy.com. You may recognize the name Go Daddy, as they claim they are the number one most popular web hosting company on the planet. Their marketing is very aggressive. They sponsored danica patrick back in the day. You may have seen them on their Super Bowl ads, very, very aggressive marketing. But let's see what they offer for hosting. We need to look at their hosting servers. Let's say Go Daddy, hosting. They claim that they're hosting solutions range from web hosting, two blazing fast dedicated servers. Now the dedicated servers are going to be a 100 to 300 dollars and up. So we really don't need a dedicated server when we're starting out. When we're starting out as a web design business, we're looking for the more affordable option, a cheaper server that we can host multiple websites on. So let's look at first they're shared hosting options on their website hosting. Let's click web hosting. Here, are there shared hosting packages most popular for small businesses starting out? A claim, again, they claim to be the world's number one web host will be realized. Sometimes it's just marketing and we're smarter than that. We need to dig a little deeper and see what's being offered here. So we scroll down and look at their packages. Immediately. People are allured by the low cost of these hosting servers. Anybody can afford these numbers, especially when a business is starting out as very appealing. But let's dig deeper. The prices start at 599 per month. But we look at the renewal cost. This is the actual cost of the server because the introductory period will end eventually. As long as the company is still in business, we'll have to pay this cost, which is 899. Once the introductory offer ends. Really, these packages are between $9 a month and $25 a month plus tax. Still that's still an affordable option. So let's look let's look further. We need to review this comparison chart to see what each server is offering. The cheapest server, the cheapest hosting plan offers one website. Now as a web design business, we're going to need to host more than one website on our server. So that's really not the best option. That immediately rules that one out for you and for me. The other plans offer unlimited websites. Great. The next is 100 gigabytes of storage on the cheapest plan, and the others offer unlimited storage. Now a quick word on unlimited, I view that as a marketing gimmick. I have owned, shared hosting servers and I assure you there is a limit I have reached at many times. That limit on the servers I have owned is somewhere around 262 thousand files. So these are, the servers are simply not unlimited. That is simply not true. The next thing we see is standard performance. Standard doesn't sound very fast now does it. That's on the cheapest two servers. The next one's offered two times processing power, two times processing power and speed. So twice the speed of standard. That's still it doesn't tell you much. So we need to look further. Unlimited databases, the cheapest ones offered ten to 25. Now, each website needs its own database, So even 10 would be okay. But 25 and especially unlimited, would be better. Now, all of them are offering unmetered bandwidth. That sounds a little confusing. So let's get some assistance on this unmetered bandwidth. When we look into this term, it really means we don't limit the amount of storage and bandwidth your site can use as long as it complies with our hosting agreement. Basically, that means what you're doing, what you're putting on the server needs to be ethical and not unnecessarily consume all the resources of the server. Most every business will fall under the hosting agreement. So that's really not an issue, but they need to put that in there. And it's nice to know that the band bandwidth is unmetered for most every website. A couple add-ons down below. The free first year of Office 365. We will talk about that in a later lesson. And they're offering a free domain with the annual plan. Another nice offering, the more expensive shared hosting servers will give you free premium DNS, which is just a marketing term. Some companies offer that. Anyways, offer that standard and free SSL certificate, which that is a nice add-on. The one that gets us here is the processing power. That's the one we need to pay most attention to. In my experience with GoDaddy, using the servers that we see here, all of these shared hosting plans is that the performance seems to be lacking based on other servers that I've owned. So you pay your $13 a month. And when you're $20 a month, eventually it will go up to 25 dollars a month. And you find, you may find the performance lacking a bit. So you pay for an ad on a performance, add on, performance add on number 1, number 2, number 3. Each of them or one to $3 a month doesn't seem like much, but it does add up over time, especially as you start to purchase more servers. So in my personal opinion, high performance should not be an upgrade. Performance should be default. In the server that you purchase. There's nothing like paying for the most expensive plan here. And then finding that your website loads slowly, maybe in five to ten seconds. In my opinion, that is unacceptable. So we really need to look at what each of these servers is offering. Really look into the comparison chart and see what you're getting into. Now it should be understood that these are shared hosting plans, which essentially means your website is shared on a server that includes other sites, all of your websites, including all of another web designers and potentially hundreds of other websites, or all sharing the same server, the same physical web server, and those resources. So naturally, one website can only, or one server, it can only handle so much traffic. So if one of those websites on the server, not yours, but a stranger's website, sees a spike in traffic. Potentially, your website could suffer. The advantage of shared hosting is that cost. There's cheap prices, very appealing. The disadvantage would be a performance hit. You're not going to get the same speed on shared hosting as you will on dedicated hosting. Two, before we leave GoDaddy site, we need to look at their business hosting plans. These are not dedicated servers, but they're offering dedicated hosting. Dedicated servers are going to be hundreds of dollars a month. Dedicated hosting. It's kind of an in-between option. It's offering you the power of a server without the technical pain. And let me tell you there is a technical paints. If you can avoid a dedicated Virtual Private Server or an actual server in your office. And I'll do because that's a lot of work. A business hosting plan with Go Daddy. Here's how it's described. The best of both worlds. The amped up power of a virtual private server, but with an easy to use Control Panel that doesn't require a degree in computer science to operate. That is appealing. Let's see what they are offering here. To what we just looked at was the shared hosting. As low as $6 a month? Again, very appealing prices. The business hosting starts at $20 a month, but they're claiming you get more ease of use, more power, more scalability, and you get dedicated resources instead of shared resources. They're claiming that you're the only website being hosted on that server, which means you get better performance. Let's see what these prices are. The prices of their business web hosting plans, which are dedicated hosting, is between 20, $60 a month as their introductory prices, which in reality, once every news is between 2999 a month and a $100 per month plus tax. These are going to be more generous with their storage, with their memory and their processing power. But what's my opinion on GoDaddy? What's been my personal experience with them. When I've used GoDaddy economy servers, like the ones that we just looked at. I felt like my website's loaded slowly. Plus GoDaddy, I noticed was full of up charges including add-on fees for high performance. High performance should not be an upgrade. I repeat. High performance should not be an upgrade when you're already getting the most expensive economy package. Now to be fair, my opinion only reflects the economy web hosting servers, not the more expensive dedicated or VPS servers. And I think their domain management is terrific. So go daddy is a solid choice for managing your domain names. But what other companies out there offer affordable hosting servers? A few come to mind. It's a popular options are Bluehost in motion, hosting, site ground, all very popular. But what company have I used and loved for 15 years now? Let's see. Here we are on ionised.com, formerly called 11. I own. This is a Europe based company, founded in 1988. I've had an account with them since 2006, and I have used several of their servers. So let's take a look. We are interested in hosting. There's plenty of options here for hosting, ranging from the economy, web hosting servers to the dedicated servers and the VPS hosting. The dedicated servers are going to be a lot more money, a $100 and up per month and going up to the inner price level servers. But for you starting out, we're going to be looking at the economy servers a lot more affordable. And you should be able to host about 10 to 20 websites on each of these servers. Let's first click the web hosting and see what their shared hosting packages are like. They're offering fast secure hosting that's ready to grow, get 99.9% uptime PHP 7.4 with OP cash includes DDoS, dedicated, denial of service, and Data Loss Protection. Already sounds impressive. They are claiming. And again, all of these websites claim this. You gotta look, look past the marketing here. But they are claiming that their websites will load faster than the competition. Blazing fast hosting makes a better page. Another nice offering here is geo-redundant infrastructure, up-time guaranteed. So what geo redundancy is, as it claims, your data is mirrored in two data centers. So you're hosting stays uninterrupted even during maintenance and outages. Cutting edge server side security also keeps your site up and running. We use our own server shield technology to prevent dedicated denial of service attacks, which is basically hacking, attempts. Scalable performance, which means your, your business can grow. Let's look at the actual offers here. Very affordable, essential plan for one website, for dollars per month. Business plan, $8 per month, or expert plan, $14 per month. There's an offer here, special offers, but we're really looking for plants, for agencies, as you're looking to build a web design agency. Agency, meaning you build websites for your customers. You are not the customer here. You're servicing your customers using their servers. So there's two options for agencies. There's the $8 a month business plan and there's the $16 a month expert plan for multiple large web projects. That sounds impressive. Let's go ahead and click See All details so we can understand what's being offered here. Right off the bat. One of the first things I'll mention is apples to apples. You're going to see similar features on each of these plans as GoDaddy. You're going to see similar on site ground, on Bluehost, on emotion, that ten to $30 range of shared hosting plans. They're all going to offer similar things. But apples to apples over time. I found I own is offered more performance and features for a cheaper cost than Go Daddy. So let's see how we can back up that claim. Let's look at the $16 month expert plan. It claims fast loading times performance level five. What does that mean in actual terms? The RAM or the memory. They're offering you, a shared server that provides night up to 19 gigabytes of RAM. Nine gigs always guaranteed. And Go Daddy was only offering one or two gigabytes on their shared servers. What's the PHP memory limit? 768 megabytes, which is quite generous. They also have these other features here. Php with OP cache, http slash to the SPD, which speeds up your website. G zip compression technology. They're offering you a free SSL wildcard certificate. They're offering daily backups, data recovery, dedicated denial of service protection, geo redundancy, redundant network connectivity, some one-click access to these apps such as WordPress. And they're offering you 500 gigabytes of webspace, unlimited traffic, 500 SFTP accounts. They're offering you other low features like what space explorer, protected directories, version control management, SSH access, web dev, IPV6, and 500 MySQL databases with one gig of memory for each database. This is very, very impressive. I find they're very generous with what they offer, especially for the cost here. And they're giving you a free domain name for one year. They're giving you an option to create 10 thousand subdomains. They give nice DNS management for your Domain Name System. For each account. They give you 100 email accounts, which we'll go into in another lesson. Two gigs of e-mail storage, email forwarders, webmail, anti fishing, anti-spam, all kinds of stuff here including friendly customer service, all kinds of goodies included in the ionise shared hosting package for agencies. Now by nature, economy web hosting servers are virtually shared with other websites. You don't know those websites, you don't interact with them. But what do you think could potentially happen if some of those websites saw a spike in traffic? If your website sits on the same shared server as other websites that are getting bombarded with traffic. You guessed right? Your website with sulfur. So what types of hosting servers are available that are not shared? Let's look. We're back on the comparison chart for the agency level shared hosting packages. Let's get away from the shared and look at the dedicated options. First, let me show you what a dedicated server runs. So with a dedicated server, you have the server, you have a root access to it, which means just like a computer, you have the handle of the software updates, the security patches, all of that. And you also have a lot of control over what you can do. But for a lot of people, this is very advanced. So dedicated servers, hardware meets the Cloud. Your own server on dedicated hardware with Cloud integration and per-minute billing, up to 10 gigabits per second. Bandwidth on scalable Intel processors sounds very impressive, but let's see what the prices are. For a standard hard drive. Their prices start at $70 per month. You'll notice a per hour rate. Since these are enterprise level solutions, the billing is a lot more flexible. They're charging you per minute or per hour instead of charging you a part of the month. And this can go up to $280 per month. Some websites see spikes in traffic at certain times and they need to scale. So this can be convenient for higher in companies and enterprise level companies. But let's look at something more affordable for you and for me. So we're getting away from the shared server. We looked at the dedicated server, but let's look at a hybrid option on GoDaddy that was called the Business hosting package on ionise, that is called dedicated hosting. Not dedicated server, but dedicated hosting. Let's read. Powerful web hosting with dedicated hardware. Boost the performance of your web projects with powerful hardware, that's all yours. Our easy to use interface makes it simple. I like these servers because they're yours. You don't share processing power or bandwidth with anyone else. Since I have taken on larger clients, I now use dedicated hosting from ionise. Let's see what their costs are. They have four options here. For a solid-state drive, which would be faster than a regular hard drive. And their prices range from $65 per month to a $160 per month. When you look beyond the introductory rate, what does that give you? It gives you a nice processor. Multi-week, multi-core processor, in fact, gives you between eight and 64 gigabytes of dedicated RAM. Gives you at least 240 gigs of storage, up to 800 gigs of storage, which is a ton of storage for web projects. More than you would ever need, very likely, unlimited traffic, a free domain, the site scan software and rail gun content delivery network. So they offer you a lot here. It's a very good option. And I liked the appeal of not having to deal with any of those operating systems for yourself, for your server, you don't have to deal with the server updates, security patches, any of that, and gives you the whole server to yourself. You don't share processing power or bandwidth with anyone else. So again, there's no risk of others, other users competing for resources. The result is superb performance for your projects even under high workloads. I like this hybrid solution. There you're going to find a higher performance than the shared servers, but a cheaper in cost than the dedicated servers or the enterprise level solutions. So those are the dedicated hosting options from my Jonas. In fact, most hosting companies that offer affordable shared hosting will also offer dedicated hosting options, as well as the more advanced virtual private servers and enterprise servers. Now, to be clear, you can start and run a web design business with any hosting account. Any hosting option through any hosting provider, allows you to design and develop websites for yourself and your clients. I want to help you build a successful website design business. How did you get to that point? And with hundreds of hosting companies out there, how do you possibly choose the right one for you? Well, you might compare this with the process of buying your car battery. When choosing a car battery, you might be presented with the good, better, and best options. Now if you're absolutely in a pinch and you need the best price, you might choose the cheapest option. If you need the best performance. On the other hand, you can select the higher-quality battery. Ultimately, all of the batteries work sufficiently, right? But some may offer a better price where others offer better performance. Let's compare that with web hosting. You might consider the shared economy hosting packages at one to $20 per month to be the good option. We looked at economy hosting examples from GoDaddy and I Jonas, although there are tons of hosting providers out there, unbeatable prices. Sure. But the performance, speed and load time will be slower than the dedicated hosting options. Therefore, I would only recommend this if you are keeping your expenses at a minimum or if you're just starting out and gaining experience. Next up, the better option is the dedicated hosting for $2250 per month. This option gives you dedicated performance and resources. We looked at dedicated hosting examples from GoDaddy and I own US. Although there's plenty of other options out there, this is the better option that you can upgrade to once you have outgrown the entry-level economy hosting. I've used both the economy and dedicated hosting plans from Iona us since 2006, reserving the dedicated hosting for my higher performance clients. So what would I considered the best option? How do you upgrade your agency to the next level? Well, let's take a look at a fantastic company called Cloud ways that offers exceptional managed cloud hosting. So this is cloud ways, the best cloud hosting experience I have ever seen. So we're at Cloud ways.com. And here's the tagline. Managed cloud hosting platform. Focus on your business and avoid all the web hosting hassles. Our managed hosts and guarantees unmatched performance, reliability, and choice with 24, 7 support that acts as your extended team making Cloud ways and ultimate choice for growing agencies and e-commerce businesses. So let's see what they're all about. Simplicity and choice. They have five Cloud providers that you can choose from. You can create unlimited applications. An application basically meaning a website. All PHP apps are supported and they had to have an innovative Control Panel. Next worry-free experience, which I can totally attest to. They have 24, 7, 365 days a year support. They have managed security, which means they take care of the security aspect for you. They have automated backups, which completely takes care of the need to have a third party backup plug-in, since your server handles that for you, cloud ways and 24, 7 real-time monitoring. So if anything goes wrong, there's any errors, then they can be working on that for you in real time performance that scales scaling, meaning when your business or your website or your client's business grows and they accumulate more traffic. That's would be scaling. Your web server needs to be able to handle that business growth. I have an optimized stack, which is the little pieces of software that worked together on the server. Built-in content delivery network, auto healing servers, which basically takes care of problems that arise on a technical level. And PHP 7.3 ready servers, which is a modern version of PHP. What else do they have? Innovative platform built to empower teams? Go live in minutes. This is an amazing feature. Our cloud hosting platform takes away the complexities of setting up your website and allows you to go live and minutes. In minutes you can have a server created and in minutes you can have a website ready to build, manage like a pro. We help agencies and businesses to build and manage web apps more collaboratively and efficiently and scale to success. Like we talked about, we are committed to deliver fast performance, ironclad security, and seamless scalability for your websites. All that is very, very important. Over here we see a clip of the process to get your server started, you select your application and which in our case we use WordPress. You select your brand of server, which we'll go over here soon, the differences and your server size. So bigger servers for more traffic and when you need more storage on your website. All right, so let's look at the features page to get an idea of a few more features that are available on cloud ways. Hosting made simple, fast and convenient. Our managed hosting, hosting recipes simplifies your entire experience so you can stay focused on growing your business. The key features here are simplicity and choice. Grow your business with the least restrictions and more freedom. They basically take away all the advanced options. So you only get what you need to worry about. Worry-free experience, you have control over your applications and servers. Performance that scales experience enhance load times for your apps, which basically means these what these servers and websites load super-fast, which is really important for user experience and for the search engine rankings and transparent pricing, pricing plans that work for everyone. So down here they break down the different features divided by experts support high-speed performance. Security. Managed hosting comes with Managed Security. Proactive cloud-based security practices keep all your servers safe and secure. Very important. We manage your server the way you want. You can choose your server type and your application type. Collaboration. So you can collaborate with your team. You're the boss, you have the controls, one-click backup and restore, amongst other options, integration and add-ons. They integrate with different third party services that you can take advantage of. And monitoring 24, 7 real-time monitoring for your service. So this is a managed solution. Means they're constantly watching over your server and taking care of any problems. And they're partnering you to work with you for your future success, as opposed to just strictly getting hosting with accompany that you contact when you have problems. Cloud wise is going to be working with you while you partner with them. So what does cloud ways cost? Let's click on pricing at the top here. Flexible and transparent pricing. Pay as you go plans at work for your business. There is no lock-in, there is no contract with Cloud ways. There is no cost for an SSL certificate. You pay as you go, which means if you use a bunch of traffic one month and you just pay for that traffic, as opposed to being locked into getting a larger server for a certain amount of time. Free migration. We migrate your first website to Cloud ways for free. And this is a really important one, unlimited applications, which means you as a web design business can have one server and host an unlimited amount of websites on it. In reality, this comes out to be around ten to 20 websites per server, but that depends on a lot of different factors. But basically. Means that you can host your clients websites. You don't have any caps on the amount that you can put on your server, which is a beautiful feature when you are pursuing this as a business. Manage hosting plans. I work for everyone. So what's the actual cost? Well, we have different hosting providers here, server providers, we have digital ocean, LA node, vulture, Amazon, and Google. Each of these lists the data centers that are currently available. So when you click on the Data Centers option, it tells you the cities around the world where their data centers are located. So the conventional wisdom would be to host your website on the physical server that is located closest to your target audience. So since Cloud noise is so transparent with these cities and locations, you do have that freedom to choose that. So what are the costs? Well, let's look at one example, Digital Ocean. Now they have different options and this breaks down with the different technology here. Specifically, the RAM, which would be the memory, the processor, which would be the computing speed of the server, the storage, and then the bandwidth, just how much traffic it can handle. All plans come with 24, 7, 365, support the SSL, migration, unlimited applications, monitoring, backups, all that good stuff that we had talked about. So let's look in depth about the different prices and how this can scale. So we have in the example of Digital Ocean here, we've got the one gig of RAM, the two gigs of memory, four gigabyte, eight, 16, all the way up to a 192. Now, this ranges from 10 US dollars per month in US currency to $100 per month. One of the plans that I have right now is a four gigabyte one, and that is comfortably fitting about 20 different clients websites. Now that varies depending on the traffic and the storage and the needs of the client. But generally for a small business that's working out well for about 10 to 20 different clients. There's no need for small business at first to go beyond, say, eight gigabytes. So from that angle clockwise is actually quite affordable. And another amazing feature cloud ways is that if you are on the two gigabyte plan, then with the click of a button and about a half hours time overnight, you can scale from the two gigabyte plan to the four gigabyte plan with just the click of a button. Cloud ways handles that scaling and that migration to the bigger server. They handle that for you. And then from that point on, you will be billed the $42 price or the price of whichever one you scale it to. They make it extremely easy to do that. And that's one of the reasons that this is a premium upgrade. On Cloud ways. You're going to pay a little bit more than you would on a shared economy server, but the benefits totally outweigh the costs in these different examples. There's also premium options here, which would be high frequency servers. And those are basically just another upgraded technology. So pretty much you select a server based on your data center and the price that you're willing to pay based on your needs. And you can migrate in scale between different servers at any time. Now one more point about Cloud ways. We talked about domains in the previous lesson. And you should know that cloud ways does not handle domain names for you. You still need to have a domain registrar like GoDaddy.com or Iona ps.com. Or wherever you choose to register your domain names, google domains, whenever you want, you have to get your domain name elsewhere. And then with the one simple DNS record, you can point the website traffic to your Cloud ways account. Overall, cloud ways is a fantastic solution and I'm so happy to share with you my enthusiasm for this amazing company. I sure hope you enjoyed my enthusiasm for Cloud ways, the best hosting provider I have ever used. Now there are other premium managed hosting platforms like WP Engine, flywheel. But they generally limit the amount of websites that you can store on each server. Whereas Cloud ways does not do this. And for that reason, cloud ways is my go-to option for my clients who need the best performance. So let's briefly review how to select your hosting provider. Then we'll recap what we learned in this lesson. Now the entry-level option would be a top tier economies shared web hosting package. This is ideal if you're just starting out and gain experience. Once you are ready to scale and upgrade your websites, there are dedicated hosting servers. And in if you are serious about your business and ready for the top of the line, best performance possible. Managed cloud hosting like cloud ways is the way to go. So what have we learned in this lesson? We've learned number one, hosting is essential for websites. Number 2, hosting can be very expensive or deceptively affordable. Three, in order to handle several of your clients websites, you'll want either to talk to your shared server around $16 a month, a dedicated hosting plan. It's 120 and 150 and one for managed cloud hosting, starting at 25 dollars per. Number four, you can generally store about 10 to 20 of your clients websites on each server. Number 5. After years of research, I recommend I own and Cloud ways for these reasons. In my personal and professional experience, they are more generous which performance, speed, and resources with their interests and options. What's your homework? If you do not already own web hosting, checkout I own AS and Cloud ways using the affiliate links in this course description. Choose either the Jonah's expert web hosting package, one of the cheaper dedicated hosting packages or a cloud ways managed hosting plan with a data center that is closest to your location. I'm lazy. And now you know, web hubs there. 6. Emails: Welcome. I'm Leighton, your webmaster. Today, let's discuss something else you can host and beside your website, emails. Now, why would you go to create an email address? Perhaps you're thinking of a Gmail or Yahoo or a website like that, and you'd be correct. But where would you go to create an email for your business? Well, remember the web hosting server we talked about in the previous lesson. Yeah, your server, that you create a hundreds of email addresses for no extra charge. This is included in the cost of the hosting account. It's so exciting. You basically have two options. You can create forwards and mailboxes. Let's discuss these. First. Forwards. This is where your emails get forwarded to another mailbox. No emails are stored on the web server. They basically get redirected to your Gmail or your personal account or wherever you choose to send them. The benefit is you don't have to keep up, but just another inbox and another password. The main drawback though, is that you can't send e-mails from your forward. For example, if your contact that my domain.com e-mail address forwards to your Gmail. Any responses will come from your Gmail. What's really doesn't look all that professional. The second option is a mailbox. This is your typical e-mail account. All you've got to specify is your email address, like contact dad or info at your password, and whether or not you want spam protection. So why create an email address on your server anyways, why don't you just open up a Gmail for your business? That's a great question. Lots of startups go the Gmail route. But to illustrate this, can you think of any major corporation that uses at gmail.com for their e-mail accounts. I mean, how would you react if you received an email from a Gmail that was supposedly coming from a reputable corporation like McDonald's or Apple. Hopefully, that would raise a major red flag. You see anyone including spammers and hackers can register a free Gmail account. To the professional solution is to own a company domain name and create your email address on that. Now it's important to have a professional email address for yourself. But what about for your web design business? How do you go about handling email accounts for your clients? Each business you create a website for, we'll probably need its own email address. Some will want multiple addresses for each employee. Some will simply ask you for forwards, and others will want complete mailboxes. In fact, why don't we hop into a web server so we can see how to create an email address bar in my personal eyewitness account. Let's create our e-mail address by clicking email. First it shows us the different hosting servers we have. Click one of these and it pulls up all the mailboxes and forwards I have created for both myself, my personal business and the clients I have hosted on this server. Now before we create our email address, let's first look at the potential here. I own. This allows us to create an unlimited amount of forwards and an unlimited amount of mailboxes, which they call male basic and mail business, very generous of ionised. So let's create our e-mail address. Now we're presented with four different mailbox types. First, we can do a email forward, where emails are not stored on the server, they are simply redirected to another. The first mailbox option is male basic. The upgraded one is male business, which costs a few extra dollars per month and gives us an upgraded storage space up to 50 gigabytes. And then there is the Microsoft Exchange 2019, which is even more expensive. But I typically avoid that option because if I'm going to set up a client with Microsoft 365, I will purchase that directly from Microsoft.com instead of using the up charged ionise version. So let's first see how to create a forward click Create under email forwarding. And we're presented with just a few options on the next screen. When we create an email forward, all we need is the handle for it, such as support. We find that our domain name, in my case, pioneer.me. And then you choose the address you want to forward it to. It says automatically forward all incoming emails to the following email addresses. We should note that we can create multiple email addresses, not just one. We can add multiple forwarding targets, ten total, as a very convenient feature. Let's cancel that and then create a mailbox instead of a forward. Just a few more options here. On the next screen, when we create an e-mail mailbox, we still need to create the handle such as support at pioneer.me. And then we're prompted with a password, type in our password, make it secure. And then we can also forward a copy of all emails to another account. As a nice feature. You can both store the e-mails and forward a copy. And then we're presented with three options here. For email security. We have anti-spam, we have virus protection, and we have email archiving. Anti-spam would send anything that looks like spam to your spam folder. There's low, medium, and high spam protection that's included. For a $2 up charge, you can get virus protection. I typically do not check this box and it's rarely an issue. And then there's protection against data loss through email archiving, which is where a copy of your e-mails is saved in a highly secure and automated process. Emails are archived separately, which is a Data Protection feature. I typically do not check that either. Of course, either these can be checked if the client specifically wants them and is willing to pay the charge. Those are nice features that you can take advantage of. And we save that. And then on the next screen will be presented with options of what we can do with our new email account. On the next screen, we're going to want to save our password separately and whatever we use to save our passwords. In my case, that is last pass. I'll click Not now, but you do need to save either the password for yourself or if it's for a client, It's good to save that securely. For your clients. Now the address is set up. You can use your new e-mail address now use your new email address directly online or set up your email program. Basically that's saying you can use the web mail or add it to your preferred email client. So now that the account is created, how do we access our emails? We have a few options. First, the webmail for I own is this is webmail Jonas.com. To you can use a mail client. These mail accounts can be added to iOS mail, outlook with the Windows mail app, or any email client that accepts IMAP. Imap stands for Internet Message Access Protocol. Imap basically allows you to add your emails to your desktop, your tablet, or your phone. And all emails stay in sync across all mail accounts. It's really nifty, but it's been around for a long time. And there are higher in solutions available. Like what? Where do you go when your clients need their emails upgraded? Well, two solutions come to mind. There's G Suite and there's Microsoft 365. Let's look at G Suite. Here we are on the landing page for Google's G Suite. Now when we use G Suite, we are not getting an at gmail.com e-mail address. Google does offer Gmail for free. But when you're using G Suite, you're using they're hosting servers for your emails. So you're still using your domain name. You're just using Google's technology to host the e-mails and give me a bunch of other features. It says we can get Gmail docs, Drive Calendar meat and more for your business. Again, you can have these for free, but this is for your business using your.com. So let's see what they offer here. Gmail for business. It's the Gmail, you know, and and love designed for business with admin controls and no ads. Swap at gmail.com with your own domain to create professional e-mail addresses like your name at example.com or sales at example.com. What else do we get meat safely from anywhere? Keep your team connected with premium video conferencing built on Google's robust and secure global infrastructure. Meat is included with G Suite and G Suite for Education. So in addition to emails, you get video conferencing and collaboration. Work. Faster, Work smarter, collaborate on files and real-time. Quickly find space on everybody's calendar and take meetings from anywhere. G Suite has the tools to boost your productivity. So G Suite is really built as a complete productivity suite, which includes e-mails as one of the services they offer. Security is very important here. Take advantage of the same secure infrastructure. Google uses. Your data devices and users are protected and all your files are automatically backed up into clown. With G Suite, you're in control. So again, What do they offer? Let's click what's included at the top. Get an idea of what's offered here and included applications, Gmail meet, chat, calendar Drive, Docs sheets, Slides, Forms, sites, currents, keep Apps, Script and Cloud Search. So many of Google's services in a business setting, you can potentially use this to replace Microsoft. Word. Docs would replace word. Sheets, would replace Excel. Slides, could potentially replace PowerPoint if you really want to be invested in Google's ecosystem. So what does this cost? We click pricing, choose your G Suite addition. They call their plans additions. There's a $6 per user per month plan, a twelv dollars per user per month plan. And then of course, higher in enterprise solutions, which you have to get a custom quote on. For most everybody, the $6 per user per month will be your ideal choice. So now let's look at the other option, Microsoft 365. Here we are on Microsoft's productivity suite. So it should be clear that this was called Office 365 for several years, but in 2020 it was rebranded as Microsoft 365. Same offering, same products, just a new name. Microsoft 365, your productivity Cloud across work and life. Email is one part of this. They offer a lot more designed to help you achieve more with innovative Office apps, Intelligent Cloud Services, and world-class security. So let's learn what they offer on their business solution. The more productive using Office apps, stay up to date on any device with the latest versions of Word, Excel, PowerPoint and more. You get emails, which is what we are looking to have, and calendar connect with customers and coworkers using Outlook and Exchange can have chat calls and meetings. Cloud Storage with OneDrive and a whole host of other little bit easier. Let's see how much they cost. So if you go on here and you're confused by these three different plans, you're not alone. A lot of people are. So let's break this down. $5 per user per month is the Microsoft Business basic account. What this basically gets you is Emails, can host e-mail with a 50 gigabyte mailbox. You're using your own domain name. And this stays in sync on all of your devices using the exchange technology. Plus, it synchronizes your contacts and your calendars. You get a web version of Outlook, Word, Excel, PowerPoint, and OneNote. That is not the software that you download to your computer, that is a web version. You'll also receive file storage with OneDrive, which is kinda like Microsoft's version of Google Drive and Dropbox. You can communicate to with Microsoft Teams to collaborate with your team. And it gives you a built-in security and support. That's the $5 per mailbox per month. What is the $12.50 version get you that's called Microsoft 365 Business standard. That is going to give you the actual downloadable version of Office, fully installed, always up-to-date versions of Outlook, Word, Excel, PowerPoint, and OneNote for Windows and Mac. So that gets you the software in addition to the enterprise level, emails. So e-mails only, e-mails and apps. There's also an apps only Virgin for about $8 per user per month. And then there's the Microsoft 365 Business Premium option, which is going to give you a few extra options that basically only the larger businesses are going to need to take advantage of. It should be very clear that this is per user, per month. So if you have a business, you're not paying just $12.50 per month. You're paying that for every email address you need for yourself, for your employees or your managers, all of that. That does not cost for your forwards, just your mailboxes. So again, each person on your team that needs an email address is likely going to be charged this price, $12.50. Or for most people, the $5 per user per month will be the most popular plan. So those are two solid business e-mail solutions from Microsoft and Google. How do you install and set up three mils? It's really quite simple. You see the emails are not hosted on your web server. They're hosted on Google or Microsoft servers. So all you have to do is add a DNS record to redirect emails to their servers. The specific DNS record is called MX or mail exchanger. So just one line of code that says that all emails should be redirected elsewhere. Do you remember that phone book illustration that DNS records like bone books. Well, when you look up or to send e-mails, What's the phonebook say? It says for emails, go to Microsoft or go to Google. See that one line of DNS code makes that connection. So, so far we've discussed both the free hosted emails and the paid dedicated ones. How do you know which to Jews? How do you know whether to stick with the hosted emails on your server or purchase these fancy email accounts. Well, this is key. For many small businesses, the hosted email's included with your web server or sufficient. I typically only look to G Suite and Microsoft 365 when a client has outgrown their hosted e-mail accounts and they need a higher end solution. But they'll need to pay for that privilege, usually about $5 per user per month. Now that brings up another key point for this entire business course. Now that you're thinking, not just as a web designer, but as a business owner, you can take that opportunity to upsell, make a small profit. If the emails cost you $5 per person per month, 1 on up charge your client $7 each, make a $2 profit on every mailbox. Or for the free hosted e-mails, try charging a few dollars per mailbox. The client doesn't need to know that this is free for you to create. In fact, you might look at that as a fee for your time, expertise, and support. Think like a business owner and you'll find small opportunities to create profit. And each small profit adds up. Now before we conclude, we need to touch on one more important point. Let's say you take on a client and they already have multiple mailbox is full of emails. What do you do? Well, first, you need to assess the situation. Do they use IMAP? Do they use G Suite, microsoft 365? You need to figure that out. If they use G Suite or Microsoft 365, write, your job just got far easier. All you need to do is copy the existing DNS records that the e-mails will continue to go to the correct mail account. Otherwise, if they use IMAP hosted emails, you'll have to start moving them to your server. So start by making a list of all of their mailboxes, the forwards and the passwords. Second, you got to back them up. That means opening up Outlook or a similar program and exporting all of their mailboxes, including the inbox, the sent all custom folders I've created for all your clients mail accounts. Sometimes that's light, and other times it's gigantic. Third, create the new mill accounts on your Iona server. You can take this opportunity to create new ones and even delete old, unused ones that the client no longer ones. For. Swap the DNS record so that the new emails flow into your ionised server. And finally, import the emails that you backed up so that the client doesn't lose any precious emails. You definitely don't want to lose anything for your clients. So what are your options on the Cloud ways managed cloud hosting platform. Unlike shared hosting, many managed hosting platforms do not include e-mail hosting out of the box. Therefore, the setup can be a little more advanced. In this case, think of email and web hosting as two separate services that you need for you and your clients. That means you have to bring in third party e-mail hosting like Google workspace, formerly G Suite, or Microsoft 365. Now fortunately, those solutions are terrific. So that would be your first choice. Just choose and connect one of those. Other than that, cloud ways does have a partnership with Rackspace, one of the industry's leading Cloud service providers, to give you e-mail hosting with the click of a button in your Cloud ways account. Now their pricing is simple. Each mailbox is just $1. You can create as many as you would like for only $1 each. Your emails or securely hosted with Rackspace, but managed by Cloud ways. Your clients can access their emails via IMAP or webmail and stay synchronized across all of their devices. Let me show you just how cloud ways e-mail hosting works, how to connect your domain name to Rackspace, and how to improve email deliverability with elastic email. So we're back on the Cloud ways.com homepage and let's go to Features to see what they have written about e-mail hosting. So we scroll down to integrations and add-ons here. And there's a couple of things written about e-mails. One would be the SMTP service. But let's focus right now on the Rackspace email add on, get cloud-based email inboxes powered by Rackspace for just $1, for guaranteed uptime, supreme protection, and around the clock support. So that's what they're offering to bring in e-mail hosting onto your Cloud ways account. So even though cloud ways does not offer it, they make it easy to integrate it. Let's see how to do so. So that takes us to a support article on Cloud ways. Their support articles are very helpful, very easy to read. And this is the one on how to use Rackspace email add on. So we're going to briefly look at this to see the potential of what we can create with Cloud ways and Rackspace. So we would go into our Cloud ways account, click the grid icon and go to add-ons. And then from there we click the Rackspace email add on and go to the Edit icon on the right. And then that takes us to this screen where we can create a mailbox, an alias, a forward, or a catch-all, and some links on how to add your, your DNS records and connect to your webmail or to your mail app. So on this screen, you would input your e-mail address and your password to create your mailbox. You can create as many as you would like here, as many as is already connected to your Cloud ways account. Here we can create multiple mailboxes. Now I mentioned I did. This is your first time setting up the mailbox for the domain. You will need to configure your DNS records. Let's open that in a new tab so we can have that handy. All right, setting up aliases. Aliases allow you to create additional e-mail addresses that point to existing mailboxes. Without having to create separate mailboxes. Think of contact at or sales at mailboxes. So we add the aliases under the Alias tab and you can attach an atheist to a particular e-mail, mailbox. All right, mail forwarding, like we talked about earlier, this is where you forward mail to another mailbox. You can go to the forwarding tab, select the account that you want to forward, and then select where you want to forward that to, even if it's not a cloud ways domain that you're forwarding it to. You can add multiple, you can forward a particular mail account to up to 15 addresses. And we can also select a catch all address which will receive all email sent to incorrect or non-existent mailboxes on your domain. So that's just proof way to just grab any email sent to a domain name. All right, so that's the capability of cloud wise and Rackspace. Now how does that work? How do we set that up on our DNS record to make it live? So we open that link in a new tab. Let's see what DNS records are required to make this live with our domain name. So this takes us to a Rackspace.com article. And there's basically three types of DNS records that we need to add to make emails live with Rackspace and Cloud ways. You add the mail exchanger MX record, which tells your domain name where to point emails. A TXT record, specifically an SPF, which deals with spam. And then a C name auto discover record, which makes it easier to add your emails to your mail client. So what do we do with these DNS records? Let's copy the most important one, the first one in mx1 dot email server.com and pull up our domain registrar. That might be GoDaddy, that might be Google domains. I own us 11 or something else. Let's look at an example where they go daddy account. So undergo daddy. When you go to domains, pull up your domain name and click DNS. This pulls up our DNS records. This can be overwhelming if you're not used to seeing DNS records. But let's make this easier to understand. In this case, we have two MX records which are pointing to secure server.net. That's basically means it's going to go daddy, emails are going here, which is an account that GoDaddy Jones. So to point that away from GoDaddy onto Cloud ways and Rackspace. We would just swap out those two records with the one that we copied from the Rackspace article. If we do that on both the MX records and then we add the text record, and we add the C name, Auto Discover. Then our Rackspace would be live. So long as we created that in our Cloud wise account. So now what, how do we add that? Once we have done the DNS records, how do we add that to our mail client? Well, this brings us to another article, how to configure my e-mail client with Rackspace mailbox. So we can do this with your mail app, with your Outlook app, with your iOS mail app, your Windows mail whenever you use or your client uses to access their emails. Basically, you just need this information to add it to one of those applications. And the article goes on to break it down step-by-step. There's also a webmail that you can log into to access those online. So one more point. Let's talk briefly about email deliverability with elastic SMTP. So Cloud away said that they connected with an SMTP add-on is a reliable and easy way to configure an external SMTP service to be used as a gateway to deliver emails from your server. So this is basically like a middleman between your website and your mailbox. So when somebody fills out a contact form on a website, it's not guaranteed that that contact form submission is going to land land in the inbox. Achieve that, we can connect to a third party e-mail deliverability service to ensure deliverability. So let's look at the example of that cloud ways connects, which is called elastic e-mail. This is a company that is specifically designed to get emails safely, securely to your inbox. Here's what it's defined as elastic email. You can use elastic email or transactional email delivery and management service. And there's a link to an article that goes into more depth on that. Basically, we can add our domain names by typing in the domain name here and then adding the records that are required. The elastic add-on will require a few DNS records. And those are stated in this article. So once we do that, we can ensure deliverability of emails, which would be like an e-commerce website that sends out order e-mails or a contact form submission or whatever emails might be coming out from your website. A service like this is super affordable and allows you to ensure deliverability. Look at the affordability of this. At the time of recording, you can do 25 thousand emails per month for a little over two US dollars, which is amazing. That's amazingly affordable way to ensure deliverability of your emails. And that's what Cloud ways provides. So an easy way to connect Rackspace for e-mail hosting in elastic email to ensure deliverability of your e-mails. So even though cloud ways does not offer a built in like you would expect to find on shared economy hosting or with I own us. Even though they don't offer that, they make it really easy to add it with just a few DNS records and a few minutes of effort. And one final cool feature here with elastic e-mail is that you can click the Log button to download the email logs, which tells you every e-mail that has come out of your server, which is amazing for diagnostic purposes, you can see all the emails I have been since the subject line, the date, the time who I went to, who went from. And this is awesome for diagnosing any e-mail related issues for your clients. So what have we learned? Number one, your hosting plan usually allows you to create several email accounts at no extra cost. Number 2, you can create mailboxes and forwards. Number 3, these email accounts can synchronize on all of your email clients and devices via IMAP. Number four, when taking on a client with existing e-mails, you must backup and import those onto your server. Number 5, for higher in solutions, google Workspace and Microsoft 365 offer business class emails for about $5 per mailbox per month. And Cloud ways managed cloud hosting connects with Rackspace for $1 per mil bags per month. So what's the homework for this lesson? I want you to open up your hosting server and create your first e-mail address, add it to your Outlook mail app or whatever you use for emails. I'm Leighton and now you know, email accounts. 7. SSL Security: Welcome, I'm Leighton, your webmaster. Today, let's talk about SSL security. Now, how important is security? Well, when you lie down to sleep at night, is the front door to your house locked or unlocked? I sure hope the answer is locked. But why? Why? Because you care about the safety and security of your family. And we should care the same about the security of our digital homes. You see, online security has been a huge topic lately. In fact, have you heard of any of the security hex or data breaches in the news in the past few years. When a major company goes through a security fiasco, it is big news. Perhaps you've heard of some of these companies who've suffered major data breaches and 21st century, Adobe, Capital One, eBay, Equifax, Facebook, linkedin, Marriott, MyFitnessPal, MySpace, target, Yahoo, Zynga. Yeah, tons of companies have been the target of major data breaches. So you might wonder, what gets stolen, how is that data stolen? And what can you do? So first, what gets stolen and these data breaches? Well, let's consider some examples. In 2019, more than 218 million words with friends play your accounts were stolen. That means the players email addresses, names, login, IDs, and more. When a hacker got into one of the game databases. In 2013, a cyber attack affected more than 41 million of targets. Customer payment, account cards. A Capital One Data Breach of 100 million credit card applications lead to 140 thousand social security numbers and 80000 bank account numbers being stolen. Crazy. So names, emails, phone numbers, login, IDs, passwords, credit cards, social security numbers, bank accounts, just to name a few of the things that gets stolen. Now, how do you feel when your credit card gets stolen? So what if you knew that someone hacked into your bank account without your knowledge? It's unnerving and inconvenient to be a victim of poor security. And hackers attempt to do this on a large-scale every single day. And that is why security is so critical. But how exactly do hackers break in and steal data? I'll give a few examples. In April 2019, Facebook attracted the spotlight for storing millions of Instagram users passwords in plain text format. Plain text. That means no encryption, no security. Since the data without security where encryption is just sitting there, right for the taking. Kind of like a bank account writing their account numbers on sticky notes. Would you consider that secure? In 2017, Equifax hack originated from application vulnerability? To understand that, Have you ever been prompted to update your device? See a security updates, patch, security holes and vulnerabilities. It's kind of like an unlocked door. C, with an unlocked door, a thief has a greater chance of breaking in. But when you lock those doors secured the vulnerabilities. Now it's much harder for a thief to succeed. In a similar way. That is why we promptly update our software to secure any of those vulnerabilities. In 2020, a few Twitter employees were tricked into giving hackers their logins. That's called fishing. It's a common tactic that preys on human behavior more so than any insecure software. You say. In that case, the security measures are in place, but the employees unknowingly give over their login. Now, as security gets tighter and tighter, fishing becomes more common. And do you have any idea where that name phishing comes from? Pea, from fishing. The hackers fish for gullible employees by setting their bait in the form of company e-mails and logins. And when they employees take the bait, they're hooked and the entire company could suffer. So that's the security situation. But what can you and I do? It's unlikely that you are. I will be in charge of security for any of those major corporations. But those examples illustrate how seriously we should take security, even for small businesses. We are handling millions of dollars. But even the loss of thousands of dollars would be significant for a small business, don't you think? Let alone the hours that would be spent and data recovery. So what options do we have to secure our clients websites? While there's a whole checklist of things that you can and should be doing. One of your first and best options is to install what's called an SSL security certificate. Ssl stands for Secure Socket Layer that enables the HTTPS as for secure before your website address, this basically encrypts and secures the traffic to and from your website. Ssl is had been around for quite awhile. But in the early days of the web, you really only saw those on e-commerce sites, sites that took credit cards and other personal data. But nowadays, you'll see those on most websites. Why? What's changed? Why isn't now advantageous to encrypt even a simple brochure site. Well, since privacy is such a hot topic lately, SSL certificates encrypt web traffic, which makes it harder to intercept, thus, in a small way, protecting your privacy. It's all about privacy. In fact, there's even a non-profit initiative that wants to encrypt everything and has issued hundreds of millions of free SSL certificates in the interest of privacy and security. Based on current trends in the near future, nearly all websites will be encrypted by default. Now there are three major benefits to installing an SSL certificate. What would you say those are? Well, first, security, that one's obvious. If you're building an e-commerce website, taking orders, storing membership profiles, accepting credit cards. Ssl security is an absolute must. Second, trust. An SSL secure website has a green padlock secure icon next to it. Insecure websites might show a red not secure label in certain browsers. How would you perceive a business if you went to their website and got a warning that said that the website is not secure. My church trust of that company increase or decrease. When you empathize with how consumers think, you can better convey these benefits to your clients. At this point, please pause the video, visit some of your favorite websites and notice whether or not they have SSL certificates installed. The third is SEO. See HTTPS is a minor ranking factor, which means you could see a boost in search engine rankings just by installing a security certificate. And because Google loves security, several lessons from now, we'll dig into search engine optimization. But for this lesson, just know that SSL does increase your search rankings. And better rankings brings in more leads, more leads brings in more money. So when an indirect way, an SSL should pay for itself. When you convey it that way, your clients will better understand the return on investment here. And that's why you should always sell benefits cell value to your clients. Now one of my favorite things about being a business owner is using your knowledge and skills to help people. How do you think an SSL certificate could help people? Because in our business owner doesn't know what on earth and SSL is or why it's necessary. But by you recommending, purchasing and setting up an SSL certificate for them. In addition to implementing other security measures, you could help a hardworking small business owner by saving them thousands of dollars and potentially several hours of their precious time. Doesn't that sound rewarding? Now finally, what's the cost? In years past SSL certificates could be hundreds of dollars per year. But nowadays, you can get a quality 256-bit encrypted certificate to secure all your website traffic for $20 per website per year through your ionised account. There's even a $100 per year unlimited SSL certificate, which encrypts all traffic on all of your websites within your eye witness account. Plus, there's more expensive SSL certificates, like $200 per year, which don't necessarily have better encryption, but more hands-on validation of the business and higher data loss insurance. Now there's a business opportunity here. As a web design business, you have several options. For example, let's look at the 20 dollar per year SSL. You can acquire, install and set up that SSL for say, $50 per year and make it $30 profit. You win, the business wins, everybody wins. Or you could just charge the client the $20 that the SSL costs. You pass that expense directly onto them. No profit, no loss. Or you could install at a $100 per year unlimited SSL. Charge whatever you want or bundle the SSL in with the cost of the website. There's so many options. So now let's briefly look at the ionised landing page for SSL certificates. Here we are on the ionised landing page for SSL certificates. First off, you'll notice on various hosting company websites, the SSL features, offerings, packages, and prices are going to be very similar. So let's look at what I own. This is Offering be secure with an SSL certificate. Avoid a non secure warning in your browser bar and gain visitors trust with an SSL encrypted website. That's our goal. Let's see what they offer. Increased trust with SSL. What an SSL does, it encrypts all information transmitted to and from your website, ensuring it is protected from third parties attempting to access it. Why you need SSL? Because browsers like Chrome mark pages without SSL as not secure. That's what we're trying to avoid because this can have a negative effect on the trustworthiness of your website. Sites with SSL have an HTTPS in front of the URL and a green padlock icon, ensuring that the website is secure and a visitor data is safe. You also receive better search engine rankings when you have SSL and your website is more likely to be trusted by visitors. So let's look at their packages. Again, the prices and offerings are going to be very similar across hosting company websites like GoDaddy and others. Here's what I own this offers. Their introductory plan is $20 per year. Their business one is 70 per year and their premium is 200 per year. Let's see what the differences are. They all are issued by Geo Trust, which is a reputable SSL company. You get protection for one domain name and up to 256 bit encryption. It should be noted that the encryption and basically the security of these SSL certificates is the same across all plans. All of these are equally secure in terms of encryption. The main difference is the validation and the data loss insurance. So the cheapest one is domain validated. It's very quick and easy. The middle plan is organization validated and the most expensive has extended validation. It ensures the authenticity of the organization and contact person issuing a certificate via manual checks. So basically, they make sure you are who you say you are when you order an SSL certificate, the cheapest one offers $500 thousand of data loss insurance, the middle, 1.251 million, and the most expensive, 1.5 million. The middle and the most expensive plans offer protection against phishing. So again, the 20 dollar per year option is going to suffice for most websites, but there are higher end options available for larger organizations. Let's see what else. This goes into detail on the different types of SSL certificates. The 20, the 70, and the $200 per year one. So we can better understand what the differences are. And there's also a deeper explanation of what the benefits are as it goes into what type of protection you get, the Phishing protection, how you can help your visitors feel confident, how you get better rankings with Google, what site seals are, and how you can browse the internet safely with an SSL certificate. So what are the SSL options on the Cloud ways managed cloud hosting platform? If you're serious about leveling up your agency and you're pursuing Cloud ways, then you will be thrilled to learn that SSL certificates are completely free on their servers. Now, since there's no charge, that means you have some business opportunities here. Number 1, you can charge nothing for SSL by bundling it in with your quote, which makes your quote even more appealing. Or two, you could charge separately for SSL with no expense to you, that means you keep 100% profit and whenever you decide to charge. So once the installation process, the Cloud ways makes it super easy to install an SSL certificate. You need to do is add a simple DNS record to your domain name. In fact, let me show you just how easy this is. We're back on the Cloud ways features page and let's go down to security to see what they offer in the security department. So they had dedicated firewalls, all Cloud ways hosted servers are protected by operating system level firewalls that filter out malicious traffic and keep out the intruders. That's amazing. They have IP whitelisting that you can do. They have security patching. They had bought protection, which protects your WordPress websites from traffic congestion caused by malicious bots. Brute force login attacks and denial of service attacks with the help of our technology partner mouth care. They also offer two-factor authentication, which is very important. And what we're looking at here is one-click free SSL installation. Our built-in, Let's Encrypt SSL improves website security with a trusted certificate that fulfills all your HTTPS requirements for free. So let's confirm just how easy this is by going into my Cloud ways platform. And we've selected applications and gone to the application we're looking at, which is my personal website, pioneer media. So over here there's access details and then we're looking at SSL certificate. So one has already been installed on this particular website. Well, let's look at the options here. There's auto renewal, which is turned on by default. Cloud ways is going to renew your SSL automatically for you. And if we're installing it for the first time, all we do is enter our domain name. And it gives us one simple DNS record. We enter this record and then we click Install certificate. So let's look at this. To ensure renewables, we recommend you keep this CNAME record and this is what we have to put in our DNS records in our domain registrar. We have to input this the first time we install a certificate. So in this case it's a scene name type of record and it's underscore Acme dash challenge, and it points to our Cloud ways server. So how do we do that? Well, we copy this CNAME record and then we can do this in any domain registrar that lets you have access to DNS records. In this case, let's look at where this side is currently routed through, which is cloudflare.com. And these are DNS records. This is similar layout to how you would find this on GoDaddy. I own OS, Google domains or anywhere else. In this case, the CNAME record has already been added here. But normally we would go to Add Record, change the type to see name, paste the name, and then paste the target. All right, and then we click Save and that's it. You add your DNS record. And then on Cloud ways you click Install certificate, and that's it. The certificate will be installed and ready to go in just a few seconds and auto renewal will be turned on. This is so amazing how simple and easy Cloud ways makes it and how valuable security is to them. So what have we learned? We will learn that security is so crucial. I highly recommend installing an SSL security certificates on all of your client's website. It's smart, it's affordable, and you have a potential profit opportunity by up charging the SSL and being compensated to set it up. So what's the homework? No, it's not necessary to buy an SSL certificate yet because I own this hosting comes with one free certificate. In Cloud ways doesn't ever charged for SSL. Therefore, I want you to read that Iona us SSL webpage in depth to have a thorough understanding of what these certificates are. I'm late to. And now you know, SSL security. 8. WordPress: Welcome, I'm Leighton, your webmaster. Today. Let's discuss WordPress. Have you heard of WordPress? If you're in the tech field, you'd likely have. And that's because it's the most popular content management system, or CMS in the world. But what's a CMS? It's software that makes it easy to manage content on your website. You can add, update and remove webpages with ease. And we love ease. My goal is to make your job as easy as possible. And WordPress helps us do that. Wordpress was built over 20 years ago so people could create their own blog. But eventually it turned into a platform for boating entire websites, not just blogs. And now WordPress popularity has grown so much that it now powers about a third of all websites in the world. So what can you do with WordPress? A whole lot. You can build pages, posts, upload images, create galleries, invite discussions, sell products, and far more. These are the questions that we're going to answer about Wordpress. 1. What's the appeal to? What's the cost? Three, What's the installation process? And four, why do I recommend WordPress? So what's the appeal to popularity? The more popular software it is, the more effort put into supporting, growing, and refining it. With software like WordPress, most any issue you could come across has already been experienced and likely solved by another developer. So what's that mean? It means that a quick Google search or YouTube video likely contains the answer to any problem you could come across. See a tremendous amount of resources are available for WordPress. There's courses, YouTube channels, blogs, so many resources created to help you succeed with your WordPress endeavors. It's a thriving community ready for you to tap into. Plus from a design perspective, WordPress is extremely versatile. You can create all kinds of websites with it. From one pagers to e-commerce. Colorful, minimalist, text heavy, graphics, heavy, whatever you want to build, WordPress should be able to handle it. So what's the cost? Do you have any idea how much WordPress costs? You'll be so happy to hear this. It's completely free. Wordpress itself doesn't cost anything. Anyone can download and install WordPress at anytime at no cost. Now, to be clear, certain elements of the WordPress community may cost you like a PE theme or a premium plugin that gives your website extra functionality. But be assured that there's tons of free themes and plug-ins out there. In fact, you can build an entire WordPress website without paying a dollar. Think of how that compares to the commercial website builders out there, like Squarespace, Weebly Wix. To get any sort of respectable, publishable business website on those platforms, you'll spend between $640 per website per month. That's another reason to choose WordPress for your website design business. So once the installation process like relatively easy, WordPress brags about what they call it the famous five-minute installation. Let's see that. Here we are on wordpress.org. This is the global resource for downloading and using the free open source software called a WordPress. I've pretty much only ever go to this website. Press the blue button in the top right corner, Get WordPress. I do this when I start every website design project and then it allows me to get the current version of the WordPress software. Currently that is WordPress 5.5.1. What we're downloading is a dot zip file. When we open up that dot zip file, we will notice it contains three different folders and a bunch of files. The folders WP admin, WP Content and WP includes. Now in this demonstration, I just want to show you how quick and easy it is to get started with WordPress. Hopefully this will be somewhere around five minutes. In a future lesson. I will demonstrate more in depth how to prep our server for the installation of WordPress. But for now, I just want to show you how quickly and easily this can be done. So again, we have our dot zip file of WordPress from wordpress.org. Let's jump into our hosting server so we can upload it. And this is our ion is hosting server that we're going to use. I have a database ready to go. And let's upload this file. And then press the Upload button and select the dot zip file that we just grabbed. Wordpress 5.5.1 dot zip is being uploaded to our server. And there we go. Wordpress 5.5.1 has been uploaded to our server. Let's unpack this file. Press the unpacked button. We want to save it to our server. Click save. And there we go. The WordPress file has been unpacked. Now it's a folder on our server. Let's rename it to my first website. There we go, that file or the folder has been renamed to my first website and let's access it directly on our server, my first website. And we should pull up the WordPress installation. So this is the famous easy five-minute installation for WordPress. First we select our language, which is English. Welcome to WordPress. Before getting started, we need some information on the database. We need the database name, username, password, host, and prefix. So that's going to be used to create our WP config file. Let's press, Let's go. I have already created the database for this test website. So let's copy and paste the host name, the database name, the username, and the password. Again, I'll go into more depth in depth on what we're doing here in a few lessons from now. But for now I'm just copy and pasting this just to show you how easy this can be. Table prefix if you're running multiple installations on a single database, change this. Otherwise, what we're doing is just fine. So let's click Submit. All right, sparky, you've made it through this part of the installation. Wordpress can now communicate with your database, which ours is on Ioannidis. Now we click run the installation. Welcome to the famous five-minute WordPress installation process. Just fill out the information below. You'll be on your way to using the most extensible and powerful personal publishing platform in the world. Wordpress things really highly of itself and they should, they built a wonderful platform for us to tap into for free. What do we have to do? We type in the title, my first website, Username. Let me put my first name in. And here's a password that's been auto-generated to be secure. Your email. I'm going to type in my email address and search engine visibility. You can check this box to discourage search engines from indexing the site. That's nice to do when you're first public, when you're first putting up the website before you're ready to publish it. And then once we do publish it, we want to encourage search engines, but for now, we'll discourage them and press the install WordPress button. And that's it. Success, WordPress has been installed. Thank you and enjoy. Here's our username and the password. Hopefully we save that, which being responsible we do, and we save it in our last pass. Just like we saved this database with the last pass software. Here we are at the WordPress login screen. Type in our username or e-mail, entered the password, click Login and boom, we're on WordPress. That was quick and easy, wasn't it? What did we do? We downloaded the file from wordpress.org. We've got our zip file and upload it to our ionised server. We uploaded the dot zip, unpacked it, and created the WordPress folder on our server, access to directly on the server. And installed WordPress using their famous five-minute installation, we basically connected it to our database and then put in our title and our username, checked a few other boxes, and that's it. Now we're ready to go on WordPress. That was easy, wasn't it? A few lessons from now, I'll break this down more in depth, so you'll feel more comfortable installing this on your own. But for now I just wanted to show you how easy it could be. So stay tuned. Next lessons. So how do you install WordPress on the Cloud ways platform if you are upgrading your web design business to Cloud ways, installing WordPress is extremely easy. As in just a couple of clicks, easy. They take care of all the credentials, the passwords, directories, all that technical stuff for you. Since really you're paying for that convenience. In fact, let me show you just how easy this managed cloud hosting platform makes it for you to install WordPress. So on Cloud ways, they call their websites applications. You have a server and then you have multiple applications within the server. So what we're wanting to do is see how easy it is to install WordPress on our server. So in Cloud ways, we click the Add Application button and then we select the server that we want to install it on. And then click Add Application. That takes us to another screen where we select the type of application we want. We can do Woo Commerce, PHP and a few others. But for most sites we want to do WordPress and the latest version. So we'll just select the latest version of WordPress and then the name of our app. Let's do test web design business course, and then select your project. And there we go. So now we click the Add Application button. And we wait just a couple minutes for the application to be created. In this case, the approximation is two minutes in two minutes to new application will be added and then it will be ready to go. Now what Cloud ways is doing in the background is they're creating the WordPress environment. They're going and grabbing the WordPress installation. They're getting you the latest version. They're taking care of all of the FTP, the database, the webspace, all the technical stuff. They're getting all those credentials together. They're saying setting it up for you so that what you will receive is WordPress ready to go out of the box without you having to worry about credentials or any of that technical stuff. You click the Add Application button and after a minute it's ready to go. So test web design business course has been installed and let's click it to open it up. Excess details. What we're looking at here is the URL we can click to open up our new application. And let's do that now to launch this app. And there we go. Wordpress is ready to go. What else do we have? We've got the admin panel, which is the WordPress admin, back-end the username and the password. You can just click these to copy them. That takes us to the WordPress backend. And then we have the database name, username, and password. You can click the copy those. There's an interface where you can edit the database if you want. And then there's the FTP, which gives you the IP address, the server name, and then you can enter your own username and password, which you would do something more intricate than that. Click Add. And then your FTP credentials are ready to go. And there we have it. We've got WordPress, ready to start building your website. Cloud ways handles all the backend technical stuff for you. So you can focus on what's most important, getting WordPress ready to go so you can start building your websites and growing your business. So why do I recommend WordPress? We've already discussed so many reasons. But let's look at this now from a business standpoint. In business, you have to guiding principles. One, you want to make the most amount of money with the least amount of effort. And two, you want to simplify and automate your processes. Let me repeat these goals. Principle number one, you want to make the most amount of money with the least amount of effort. And two, you want to simplify and automate your processes. So how does the WordPress software help us accomplish these two goals? Well, first, you don't have to write any code. An enormous amount of time has been spent coding and refining WordPress. You don't have to rewrite the we'll just grab it and install it in five minutes and start doing what matters. Building the website for your client. Now I've written websites from scratch. I've coded every little pixel of every webpage. And what's my takeaway from that process? That takes time to save time, simplify, and use WordPress to clients who have their own login. So though I had the option to make changes to their website without going through you. Why do you think that would be helpful? After all, aren't you there webmaster? True. But 5102100 clients later, how much time do you want to waste making every little content update for every client? With WordPress, you're giving your clients the freedom to update their own website on their own time, thus freeing your time. Plus, some clients are more hands-on anyways, so they'll prefer that option. 3 with WordPress, you can update your clients websites from anywhere in the world. All you need is access to a computer and the Internet. In fact, I've run my web design business several countries and continents, often without my clients even knowing then I'm away from my home office. So if you're looking for the freedom to work from anywhere in the world, freedom to live the lifestyle you want. Learning. Wordpress is a stepping stone to achieving that goal. So what have we learned in today's lesson? Clearly, there's plenty of benefits to using WordPress. One, it's a CMS that makes managing websites easy. To its popular, versatile, and supported by a dedicated community. The core software is completely free. For the installation process is quick and easy. It can make your job of owning a web design business easier than having to code and design a website from scratch. So join a thriving community, save time, and make money with the world's most popular content management system and WordPress. So what's our homework? I want you to dive into WordPress. Started researching it through Google, YouTube, your favorite course site, or wherever you prefer to learn. There's a wealth of resources on WordPress. So dig in. I'm Leighton. And now you know, Wordpress. 9. Divi Theme: Welcome. I'm Leighton, your webmaster. Today, Let's expound on the previous lesson, WordPress, by exploring my favorite theme, Divi. Have you heard Devi? Devi is awesome. Devi changed everything. Let's see how today will find answers to these questions. One, what is Devi do? What makes Divi so special? And three, how much does it cost? First, what is Devi? Devi is a WordPress theme. Wordpress is a content management system, but it utilizes themes and plugins. Plugins give WordPress extra functionality. While themes give it style. Devi is one of the most popular WordPress themes available. Created back in 2013 by Elegant Themes, it's rapidly evolved in mature thanks to a brilliant team of developers who are constantly adding and refining features. Db comes with over 40 modules, including text, images, galleries, newsletter sign-ups, contact forums, blogs, testimonials, and so much more. That is basically a module for everything. Now let's look at Debbie's own web page so we can dive in. Here we are on Elegant Themes.com. Elegant Themes is the creator of Devi. Elegant Themes had created several themes back in the day before creating Devi. They created a devi to work alongside other themes. But eventually Devi took to spotlight. And now it's pretty much the only theme that they really push and support. So Devi is definitely their flagship in pretty much the only product right now in terms of themes, they also have plugins, but their bread and butter is the Divi theme. So let's go through the homepage here to see how they are branding. Devi are calling this WordPress unleashed the most popular WordPress themes in the world. And the ultimate Visual Page Builder. They boast 700 thousand web design professionals and business owners as their clients. And scroll down here, Devi, most popular WordPress theme and the ultimate WordPress page builder. That is their flagship theme and Visual Page Builder. It's most widely used premium WordPress theme in the world according from stats from built with.com. But it's more than just the theme. It's a website building framework makes it possible to design beautiful websites without ever touching a single line of code. We'd like that. And without installing and configuring dozens of disjointed plugins. We like that as well. We think this is the future of wysiwyg, and it's unlike any WordPress theme you have ever used before. Sounds awesome. Here is a little under two minute introductory video, which you can watch if you would like. And they have a nice illustration in there about painting a masterpiece, which I will use later on. As we scroll down, we'll see some of the ideas of different websites you can make with devi. We see online stores, businesses, non-profits, educators, restaurant's, service providers, and much, much, much more. What is the point of what we're looking at here? Here is the point with some themes. Themes in the WordPress world are built for one particular type of website. For example, you could buy a restaurant theme, you could buy a dentist website theme. But what Devi, you can make any kind of website using the same theme. What else does that mean? That means you spend time learning Devi, and you don't have to re-learn each additional theme that you use on each year. Clients websites get comfortable with Devi, and you can whip out these websites really quickly. So it's definitely worth the time and very affordable money investment. Build pages visually on the front end of your website. If you're not totally familiar with WordPress, you might not know how exciting this is, but let me tell you, WordPress. At its core, you're not building pages visually. You're building on a back-end, which is not very visual. It's a nice system, but you're not actually building your website visually. So let's see what this means and let's see how Devi improves on that. You've never built a WordPress website like this before. Devi is more than just a WordPress theme. It's a completely new website building platform that replaces the standard WordPress post editor, which is what I was talking about, with a vastly superior visual editor. It can be enjoyed by design professionals and newcomers alike. You would be a newcomer. I would be a professional. We all like Devi and will and you'll come to love it as much as I do, giving you the power to create spectacular designs. I can attest to that was surprising, ease and efficiency. Certainly attest to that as well. And see what we can do here. This is the Divi Builder, this is the Devi Visual Builder and action. As you see, the website is being built and being tweaked visually as it would actually look on the page. It can build effects. Such as changing the color, the opacity, the blur, changing the blending options. Shape dividers. You can divide sections of a website with absolute ease using the built-in shape dividers. And you can bulk edit. Let me tell you this is a huge time saver. You can edit several modules or sections or even global elements of a website with just a few clicks. Very, very nice feature there. The layout library. This lets you pick a pre-made webs web page, if you would like. In less than a minute there you have a web page for you to work on. Or you can use a layout that you have saved from another page, can copy an existing page's content, which is very helpful. Transforms. Its lets you transform any element, any module section to rotate it, to scale it, whatever you'd like to do to get a little more creative. So I'll give you a creative advantage over your standard static websites. Hover states, this is very cool. You can have effects that change the way a element on the webpage looks. You can make it grow, you can make it shrink, move. Whenever you'd like to do. You'll see examples on screen here and find and replace. This is a another time-saving feature where you can find one particular color, one particular element or whatever, and replace it with something new. Nice time-saving feature. Design, the most powerful design tool for WordPress. They call it the ultimate web design editor. It's like Photoshop or Sketch for the web. It brings in advanced design interface to WordPress that both beginners and experts will fall in love with incredibly smart, super flexible, and amazingly powerful visual by nature. This is how designing for the web is meant to be done. I completely agree. Customize, customize every part of your website, control the finest details. Every little part of your website is customizable. That means colors, fonts, textiles, animations, transformations, filters affects spacing, sizing box shadows, tech shadows, interesting background effects, gradients, images, videos, all kinds of things. You can tweak every little pixel of your website with Devi. As a designer, that is completely invaluable and you aren't confined to a certain set of customization tools. You can pretty much do anything you want with Devi. Devi is for everyone, freelancers like yourself, agencies like yourself and website owners like your clients. Dv is built so your client's website owner will have the freedom to jump in and make changes on their own, which saves you time, saves them time. Everyone's happy. Few extra features here to promote a website. They're split testing, lead generation and social media integration. Different ways to market your website. Split testing to get the best results out of a webpage. Lead generation, to create lead opportunities and social media to share the page. Now, these are done with plugins, the bloom e-mail plugin to get email subscribers, the monarch social media plugin to get people to share your webpage. And split testing is built-in to Devi, which is a nice way to see what version of a particular webpage works best and selling, you can build e-commerce websites. Would divvy, sell products online, would tailored WooCommerce integration. Woocommerce is a complete e-commerce solution built for WordPress, is the number one e-commerce solution available for WordPress. And of course it integrates with devi. We love that your shop will never look so good. Showcase, display your work to the world. That means we have portfolios. You can create with devi, you will need a portfolio because you are creating a web design business. So you will use your portfolio to show off your creative website design work. Engage, tell powerful stories and create mesmerizing blog posts with unique content design elements. Basically that means you can create a blog with devi, we wouldn't expect any less because WordPress was initially constructed with the idea that you could create a blog. So as WordPress has evolved, it can do so much more. But WordPress has not forgotten their roots. It's still on amazing blogging platform and Devi makes it even more visually stunning than it would otherwise be. Power your entire team with a single membership. They offer a wonderful unlimited license. Build unlimited websites with a single license. Which we will get to hear soon. Depending on the sales, it's somewhere around the $200 range, and you can use that on all your websites, unlimited forever. This is a lifetime membership which we absolutely love and I'll talk about here soon. Build websites faster than ever before with dVs, amazing, amazing efficiency tools. They do make building a website quick and easy. You can have one done in just a day or so, which is far quicker than you would ever get having to hand code a website from scratch. Devi has also expanded with a marketplace where you can find pre-made webpages tailored for specific industries, which you can take advantage of if you like the design of an existing webpage and want to use that as your starting point. They also have sensible areas where you can use tools that have been created by other developers to V's more than a theme. It's a complete web design framework backed by a thriving and enthusiastic community. We believe in extendibility and the cultivation of an open source development ecosystem. And a few other features here join over 700 thousand customers already boating amazing websites with Devi. I highly recommend Devi. We'll get into the pricing and how you can use this to create business opportunities here soon. And you can also go to learn more about devi to see all of their different modules. This web page breaks down each different module that they have. So you can enjoy checking that out as well. That's a brief overview of the Elegant Themes website, which is a huge resource. I have a wonderful blog. They've got wonderful support, all kinds of good resources on here to help you in your WordPress and website design and general endeavors. So what makes Debbie's have special? Let's take a step back. When you think of code, what comes to your mind? Typing or painting? Definitely typing code is not visual at all. Not in the least. Wordpress is halfway there with a wysiwyg. Or what you see is what you get editor, which means the bold, italic, underline, alignment, color, options like you see in Microsoft Word. But you still had to click save and reload your webpage to see your updates. Devi, bridge that gap. Dippy founded the Visual Builder, which lets you visually build and design your websites based on how it's actually going to look. Db once you to feel like you're painting a masterpiece, not typing or coding one. And you no longer have to waste time switching between the back-end and the front-end. Plus would divvy. You can manage content, tweak design, even fine tune advanced settings all through their super easy to use interface. Finally, most WordPress themes typically look the same when you deploy them on multiple websites. So what do you think could be the downside of building a bunch of websites that basically all look the same. Well, would you prefer to live in a house that looks like every other house and the neighborhood? Or do you want to personalize your home? Businesses? Want the website to feel unique. If you use it skillfully, Devi can accomplish that. So how much does it cost? Depending on the current sales, Devi is typically around $75 a year or around $200 for a lifetime membership that you can use on all of your websites. Now, this is a key point. Since you are pursuing a website design business. Lifetime membership is absolutely your best choice. One client and Devi, pays for itself. Personally. I bought into this theme back in 2013, and I've used it on hundreds of websites since then. This is completely worth the investment. And yes, it is a tax write off. Debbie is so awesome. Let's recap the reasons why one dB let you build a website visually to its versatile and allows you to design customized websites that look and feel you need. Three, It's been around since 2013. It has matures tremendously. $200 will get you a lifetime membership that can be used on all of your clients websites. In the next set of lessons, we'll take a hands-on look at Devi and the Visual Builder as we finally build your first website together. I can't wait until then. What's our homework? I want you to visit Elegant Themes through my affiliate link in the course description. Get to know this amazing company, including its flagship product. Give me, go ahead and purchase your membership before the price goes up again. So you'll be ready to start using it. I'm Leighton and now you know, Devi. 10. PART 2: How to Build a Website: Welcome, I'm late to your webmaster. And on the previous lessons, we learned the fundamentals of website design. But why, why didn't we just jump right into building a website? Well, while I'm a huge proponent of on the job hands-on learning, would you hire an electrician? He does know how electricity works. A plumber who doesn't understand sewage, drainage, or pilots do not hire them because they don't fully understand what they're doing. I loved learning hands-on. We cannot discount the value in learning the fundamentals. Now, we've done that. We've laid the foundation website design business. We learned domains hosting females as the cells WordPress Devi, and now the time has come to build a website. In this particular lesson, we're going to prep our server, means getting it ready to build a website. You end up doing this for every client. It might seem daunting at first, but really it gets easier once you're more comfortable to the point where this just takes a few minutes. In the following lessons, we'll dive right into designing and developing one-page, multi-page e-commerce mobile friendly websites. And later, we'll consider how to get design inspiration, where to go to find images, graphics, what software we might need, and how child themes of work. But first, before we do that, let's prep our server. So we're going to do this first on your Ioannidis hosting account. If you're using that. These steps will generally apply to any traditional or shared hosting package. Afterwards, we'll consider this stamps for a managed Cloud hosting platform like cloud ways. First, we need to click hosting. Hosting is the ability to use the webspace and databases. We have to select which hosting contract we want to use. I'm going to click one of my dedicated servers here. And here we are in the hosting overview. Now there are three crucial elements to a hosting account. There's the webspace, the FTP, and databases. Also on here we'll see the PHP version, which is the version of the PHP coding or programming language. There's the site scan, which is Ioannidis own software for scanning your website for security vulnerabilities. I'm not a huge fan of that. And then the content delivery network, which is an upsell there. And then some more features at the bottom, which I don't typically use. Again, the three primary elements here are the webspace, FTP, and databases. Let's carefully break down each one of these so you'll feel comfortable understanding and using each of these parts of the hosting server. So ultimately we want to install WordPress onto our hosting server. And we're going to use all three of these features of the hosting server to accomplish that goal. First, let's look at the webspace. Now before we even click onto the webspace, I want to show you the capabilities of the webspace, whether the capabilities and limitations we can store. Now, you'll remember it did say unlimited, but I had told you that unlimited simply isn't true. This is the reason I made that statement. While it says the server is can host an unlimited amount of files. In reality, it's a little over a million files on this particular dedicated server. The shared servers give you over 260 thousand files. This one is giving me a little over 1 million files. I have a few clients on this particular server. And as you can see, just a small fraction of it has been used so far. Storage, I have almost 400 gigabytes on this server, which is way more than I will ever need for the type of small business clients that you are. I will have. Let's click on Use webspace so we can go into our webspace for this server. The web space is a collection of files and folders on the server, much like you would find on your computer. Now when you start with a new client, you will need to create a new folder on your webspace. One folder for each client, more specifically, one folder for each website. In this case, let's create a new folder by clicking the New Folder button, naming it my first website. Click Save. We're creating a new folder on our online server. There it is my first website. Now, that's one of the three elements we need. We've got our webspace. Now let's go back into the landing page for the hosting and go to SFTP. So FTP stands for file transfer protocol. S is the secure version. Ftp allows us to interact with a server. It basically lets you see the files and folders of your server, much like you would on your computer. Each FTP has a server, a username, and a password. So let's click Manage. And we'll create a new FTP account for the new folder that we created. Typically much like the webspace, you will need a separate FTP account for each client. On the right here we'll see that connection data that we'll need, the server name, the protocol, the port, and then the username will get a separate username and password for this particular project by clicking Create User. And before we do that, notice also we get an unlimited amount of FTP Accounts. So there's no limit on this. I'll click Create User. We need to create a username. Let's type in the website and will need a password and going to auto-generate a password using my last pass software for password management. And we paste that password. Personal note. I call this my first website, the directory. Click Change. And this is where you select which folder you want to access with that FTP account will click my first website and save. Before we move on to the next screen, let's make sure while we had that password copied, that we save it in our last pass password manager. Again, this is Last Pass, Last Pass.com, which is a wonderful world-famous password management software. I click Add Item and scroll down to server. Say my first website FTP, save it under my servers folder, paste the password. Oh, that didn't work. I need to get a new one. Copy, paste, paste it over here. And then click Save. On the next screen will get our username and host. Copy the host, copy the username. And let's save these other tidbits as well. The protocol and the port protocol is SFTP, which is the secure version of it, FTP, I recommend using it. And in order to make it secured, the port is 22. Insecure would be 21. Secure would be 22. And go ahead and save that. And there we have it. We have an FTP account which allows us to interact with the my first website folder on our server. Now how do we access FTP? There's a link down here to install and download the configuration file for the software FileZilla. Filezilla is a wonderful free FTP client, which again enables you to simultaneously and securely access your hosting server. Filezilla is the software that I recommend to accomplish this. Let's go ahead and click Download. This is taking us to the official FileZilla website. I happen to already have the software, so I'm just going to open it up now. File Zola. It's opening up. And this is one of the best free pieces of software that allows you to interact with your server via FTP. Again, the name is FileZilla, and it allows you to pull up your website's, saved them in the site manager up here, or just connect to a website directly. What are you looking at on screen? On the left would be your computer. The documents, the downloads, everything that you have on your computer on the right is the server. I'm not currently connected to any server, so you don't see any files? I'm connected to my computer. So you see my local files on the left, but nothing on the right. Left is local, right is remote. Remote site would be the server which we haven't connected to yet. So let's do so now. I'll open up what we just created. As our FTP account login to last best. And I'll copy the host. Paste it up here at the top. Copy the username, and copy the password. Let's put the port in their 22 and click quick connect. Well, you are now officially connected to the, my first website folder on our ionised account. Very exciting. We don't see anything in there though because we don't currently have any files or folders in the my first website folder. Soon we will have WordPress in there, but we have to do something before we can upload those files. Let's first create our database. So continuing our journey of the hosting overview here, what have we done? We've created our my first website folder on the web space. We have created our FTP account, and now we need a database. As we learned a couple lessons ago, WordPress uses a database. So we need to create one. We have an unlimited amount of databases we can tap into here on our server. So let's create one now. Database. Select our version and let's do the higher version. Name it my first website. And will need a password. That's both. Generate one here and then paste it and save it into Last Pass. Add item, database, paste it. My first website database. Save it under Databases. Go back here and click Save. And here's what we have. The database is being set up. And very shortly we will have the database credentials. Click on this and they're already ready. Here's our host name. So each database has a host or server name, a username, a password, and a database name. So if again, you got the database name, username, host name, and password. Those are the standard four pieces of information related to a, connecting to a database. So let's copy our database name. Put it in the type. Type is my SQL. That's the type of database we created. Host name. Copy and paste that into our password manager. The port, not very important, but let's save that anyways, 3306, the username. And there we go. Now we have our database and we'll click Save to securely save that for our client. Now we go back and what do we have? We have a folder called my first website. We have an FTP account to connect to that folder. And we've created a database so we can power WordPress with it. And now let's download the WordPress software. As we did a couple lessons ago. We'll log into WordPress.org. Click Get WordPress in the top right corner, and then download the latest version of WordPress. There we go. Now previously, I had uploaded that folder directly to through Ioannidis on the webspace explore. But this time I want to show you how to upload it directly using FileZilla. So we'll open up FileZilla. We're already connected to our server. And on the left here, we need to find the file that we just downloaded, which is under Downloads. And let's unpack that first Wordpress dot zip and get our WordPress folder. And in that WordPress folder, we see a few sets of files and folders. The files, our PHP files, PHP, the programming language that lets us interact with servers and databases. Wordpress relies heavily on PHP. It also uses HTML, CSS, and JavaScript. So every WordPress installation has three folders. Wp admin, WP dash content and WP dash includes the includes our folders and files. I hope your WordPress runs smoothly. The WP admin is the administration area. 99% of the time, you will not be changing any of the files or folders contain in WP includes or WP admin. We don't have to worry about those and they remain largely untouched. The WP Content is the folder that does change however. So within there are plugins and themes. Themes would be like the Devi theme or the default theme. With WordPress, they have one for each year. Currently the default is 2017, 2019, 2020. I don't know what happened with 2018, but I guess it didn't make the cut. But we are going to delete those. Let's just go ahead and remove them because we don't even need to worry about transferring those files onto our server. We're not going to use those themes. We will be using the Divi theme. The plugins. You will end up installing several plugins on a production website. At the beginning, there's just a couple stock plug-ins. I don't really do anything. Hello.py AHP is not a plugin and a Kismet is a, actually, it's a really nice anti-spam plug-in, but I typically don't use it unless a website specifically uses comments on their blog. In which case, there's ban buying technology is awesome. But I don't need it to start out with, so we'll delete that. Now let's go ahead and get this uploading to our server. And then we can think about in downloading Devi. So what do we do? We find the downloads folder and we pull up WordPress. And we want to transfer all of this. These three folders and sets of files represent WordPress. So let's transfer all of those onto the server. We drag and drop it over to the right job. And there we go. 1700 files are being transferred. So while this is uploading, let's download the Divi theme. We go into our Internet browser and navigate to Elegant Themes.com. From here we need to log into our account. I will login to my business Elegant Themes account, click member login. And here we are. We can download the Devi theme here using the purple downloaded Divi Theme button. That gives us a dot zip file of this theme. There's also some plug-ins here, the Divi Builder, which is already included in the theme. The extra theme, which is a different theme geared towards blogs. And we have the Bloom plugin for e-mail, newsletter sign-up forms, which is also built into dv now. And the social share and follow plugin, which gives you some nice sharing buttons to share to different social sites. So again, we have a dot zip file and let's figure out how to upload that to our website. So one way is to upload it directly to WordPress. But why don't we do this. Let's unpack Devi, drag it into WordPress, drag it into WP Content and drag it into the. So this is the way themes work in WordPress. Each theme is in its own folder, in the themes folder. So dv will have its own folder. And any other thing you might use, which I typically only use Devi. So we have one theme installed on each of our clients websites, which is the Divi theme. Within that, we have several folders and files built on PHP. You'll notice. And we don't normally change these files, so we don't have to worry about that. Go back into FileZilla. And we have everything uploaded pertaining to WordPress. But now we need to upload the Divi theme. So again, on the left, our computer, the local site. Let's go to WP dash content and the beams on the server on the right. Let's go into WP Content and themes. So we're now moving the Divi theme to the my first website installation on our ionised server till we drag the Devi folder from our computer to the server. And there we go. 900 files are being uploaded to the server. So at this point, we can go ahead and look at WordPress. We installed that a few lessons ago. Let's go through that again. And we'll start by finding out what our domain name is so we can access the server directly. Let's click domains and SSL. From there, we filter to the contract where we're uploading our files, which in my case is this particular dedicated server. Now we click all filters here and all domain types. We're looking for system domains. So what this is, is the direct access to your server. We can copy that and this would be our server, but we need to type in the actual folder that were installed WordPress to. So in our case, we need to add a slash my underscore first underscore website. And this should pull up the WordPress famous five-minute installation. And we've seen this already. Bullets go through it again. We select our language English. Will need the database credentials than database name, username, password, and host. Let's go copy that from our password manager. Copy the name, username, password, and the host. Let's go through the table prefix again, it's specifically designed for running multiple WordPress installations on a single database. We don't really have to worry about this because we create a separate database for each client project so we can keep it named as WP underscore WP from WordPress and click Submit and then run the installation. This is going to install WordPress on our database. Site title. My first website username. I'll put my name in their password. That looks good. And I'll type in my email address. Search engine visibility. Let's discourage search engines for the time being because we are not ready to publish our website. And we click Install WordPress. Well that's installing. I'm going to hop back over to FileZilla. And it looks like Devi has been successfully uploaded to our server. Very nice. And go back into Google Chrome, into our browser, and we see success WordPress has been installed. Thank you and enjoy. Our username and password are here. Click Login and will login to our account and password. And here we're prompted to save our login into Last Pass, which we want to do. Well, so we'll click Add, and welcome to WordPress. So here's a brief overview of the WordPress admin. So this is the back-end to your website. This is not what people see when they go to your website. This is what you as the website owner, the webmaster, the administrator. And we'll see, how did we get here. We login here by adding slash WP admin to our address bar. And that takes us to WordPress admin. So on the left here we'll see several buttons on the navigation. We see posts, media, pages, comments, appearance plugins, users tools and settings. Let's briefly go through each of these posts are specifically designed as blog posts. So if you have a blog, you can click, Add news or Add New and start typing away your blog post. They also are categorized and there's different tags you can use. I don't usually use tags, but categories can be nice. Can create a category called blog and new category. And there we go. Make click, Add New. And this is the WordPress block editor, which is a nice way to visually add content to your post. We don't usually take advantage of this because we prefer the Devi, visual editor. But each post and page has a title. The actual, like my first blog post, the actual content. Blogging. We have a wysiwyg or what you see is what you get editor. And on the right, we can publish our post. We can change the URL of it. We can change the category tags, excerpt, which is a brief description of the post, and choose whether or not to allow comments on this post. Let's go ahead and save that as a draft. And we'll get out of here by clicking the WordPress logo in the top left corner. That's the posts section. The media is your, basically your images. You can also include PDFs and spreadsheets and such. But for the most part, it'll be your images and photos on the website. We can upload new images, but normally we would do that through Devi anyways. But this is a nice way to see what all pictures you have on your website. Pages would be the standard pages you'll find on most websites, your home, your about us, contact services, gallery, whatever else you would see on a website, each is divided into its own page. A page is handled much like a post. We have the title, we had the contents of the page, and we have the URL. And that is the basic elements of a WordPress page. You'll normally be in pages more than you'll be in posts. Comments only pertains to websites that allow discussions or comments, such as a blog, which we're getting more away from. Especially since the spammers really attack websites like this. But there is a time and place for it. Some websites do need to take advantage of content comments. Now appearance, appearance is the themes and the customizer, and we don't worry about the theme editor. So themes, it's trying to activate the 2020 theme, but we did not upload that. So it can't be found, does not exist. Let's activate the Divi theme. Click Activate. And now Devi is the default and only theme on this WordPress installation. Devi is by Elegant Themes. The current version I have here is 4.6.3. It's described as smart, flexible, beautiful, the most powerful theme in The Elegant Themes collection. We'll go into more on that in the next lesson. For now, we continue on to in appearance, There's widgets. So widgets are just little pieces of content. You can do. You can do words, you can do images, you can do a menu, a search bar, a video, all kinds of stuff here. And that would go into your sidebar or the bottom of your website, the footer. We're not in this too much, but we might need to pop in here occasionally, menus. So your menu is the buttons at the top of the website, sometimes on the bottom as well. The primary menu would typically be the top of the website. The secondary would be the very tippy top, and the footer would be the bottom of the website. When we create a menu such as main menu, we can add any of our pages to it. And there we go. We just created a menu. The background takes us to the Theme Customizer, which will really go into in the next lesson. So I'll click the Back button and continue on. Plugins are kinda of like theme ways you extend the functionality of your WordPress website. These are third party, any plugins you add are included in the WordPress plugin marketplace, but they are not created by WordPress itself. So these are third party plugins created by third party developers. There are tons of plug-ins out there, so many for whatever you might need, whether that be security or backups or really anything you want to do to extend the functionality of your website. It could be e-commerce, that can be spam fighting. That could be all kinds of things that would be done by adding a plug-in. Now, users are the different people that have a login to your WordPress website. You can create several users. You can have people who add comments to your website. You can have people who are administrators, people who add posts. You can have customers. But starting out, it's just our admins in simple terms, that is u and that is your client. Easy enough. Tools, we don't normally do anything in the tool section, so we don't have to worry about that settings. First, we have our site title and tagline, which we can change based on what type of website this is practicing, WordPress and Divi. This is the URL of the website, the admin email address, and a few extra questions. If anybody can register it to be a member of this website? No. The default user role, the site language, English, the time zone, date format, Time Format, and week starts on Monday. Writing, don't normally do anything in here reading. It's nice to change the homepage to a static page. When we create our homepage, you'll be changing the static homepage to the page called hole. And this is also where we find the search engine visibility bugs. Discussion don't normally have to worry about this unless you have a website that has a blog. In which case, you can find tune to settings on what happens with comments. A few questions on the media, specifically the dimensions of the thumbnail, medium and large size uploads don't normally have to worry about that. Permalink. I do recommend going in here settings permalink and changing it to post name. What does that do? It allows each page that you create on your WordPress website to have a friendly URL like this, sample post or slash services or slash contact looks a lot better than this and a lot better than this. So we do want to change the default perma links to post name when we install WordPress. And privacy is fairly new. It allows us to create a privacy policy. And here is the Divi, theme options which we'll go through in the next lesson. So what did we just do? Well, in order to prepare the hosting server for our new website. We first created the webspace folder. Second, we created an FTP account. Third, we created a database for we downloaded, transferred, and installed WordPress. And fifth, we downloaded, uploaded and activated Devi. Now you are ready to start building your website. Again, these steps would apply to any traditional or shared hosting account. Basically, anywhere that gives you a webspace, FTP, and a database. You can also accomplish this through cPanel if you're hosting account uses that. But I own this does not. So now you might be wondering, how does this process work on a managed Cloud hosting platform, like cloud ways. If you've taken your agency to the next level with cloud hosting, let me show you just how easy these premium platforms make it to prep your server. So here we are in our Cloud ways that count at platform dotCloud ways.com. Now this is divided into two sections, your servers, which hold your applications. You can have multiple applications per server. And an application basically means a website for yourself and for your clients. So to get started prepping our server, we would first create a server using the green Add server button. If you don't already have one on your Cloud ways account, first you select the application that you want to install on to that server. You can do WordPress. You can do Woo Commerce if you're creating an e-commerce website. And there's a few other options. But for the most part, we just do the, the latest version of WordPress. Then we create a name for our application, like a web design business course, design, Business server. And then we can choose which server brand we want, Digital, Ocean, LA node, vulture, Amazon, or Google. If we press the Information icon, we can get a little blurb about that particular type of server. And it tells you what the the benefit of that server is. You can use that little blurb to decide which company would be right for you. But the location has a lot to do with that too, so we'll get to that in a second. The server size, you can select the size of your server. And remember that you can always scale your server size when you need to. Some of these server brands offer a drop-down here with standard or high-frequency. High-frequency is just, I'll don't upgrade with better technology. So the one gigabyte will give us a note here that the recommended is two gigabytes or higher for production. Websites, one gigabyte is for WordPress staging or low traffic websites. So we want to do the bare minimum of two gigabytes. If we're building a web design business, I like to do the four gigabyte or eight gigabyte option, but to two gigabyte is ideal when you're first starting out. And remember, you can always scale to a bigger server size. Now the major deciding factor here would be your server location. The general wisdom is that the closer the server is to your target audience, the better the site will load and run. So it would be wise to click through each of these and look at the different locations that are offered. Whether that be in America and Europe, Asia, Pacific, Canada, et cetera. There's plenty that we can choose from. The ideal situation would be to get the closest server to your physical location of your target audience. So once we have decided that we can choose, we've chosen our server size, two gigabytes, we've got our location. Let's do USA Dallas, and then we press Launch. Now. Now before we do that, we look at the price here. Pay as you go. It says it's really cheap hourly, but the number we're looking at is monthly. In this case in US dollars, the two gigabyte size would only be twenty-three dollars per month. If you get to the point that you need to scale higher, you can choose to four gigabyte one and in less than an hour Cloud ways while automatically migrate you to the forty-four dollar plan. So we click Launch now and it will create our server. So our server will be ready in just a few minutes. And once it's ready, we can click on it. And the first screen that pops up is master credentials. So what this tells us is our FTP information, the server name, which is the IP address, the username, and the password. This will give us FTP access to the server. There are several options on the side here, monitoring, managed services, settings and packages, security, vertical scaling, backup, and SMTP that you can click around. But for the purpose of this demonstration, let's go right into applications. And we'll see all the applications that we have installed on our account amongst all of our servers. And to add a new application, which is adding a new website or basically prepping our server to get WordPress and Divi ready. So we press the Add Application button, select a server that we want to add it to. Press Add Application, select the one that we want, which is WordPress 5.7. The latest version of WordPress. Give a name to our application and click Add Application. Once we do that, an application will be added and ready in about two minutes. In the backend here, what Cloud ways is doing is it's creating the application, creating the website web space, creating the FTP credentials for you, creating the database. And it is installing WordPress and getting it all ready for you to get started building your website. Now, this is going to be ready in up to two minutes, which is amazingly fast compared to having to do this step-by-step on our own. So in about two minutes, all we had to do was press Add Application, give it a name, tell, tell Cloud ways that we want the latest version of WordPress and then it's ready. Here we go. We click on the application and it pulls up our screen with our access details. So what that gives us is the URL for the installation of WordPress. Let's click that to confirm that it installed WordPress successfully. There it is. We can close that out and go back to the admin panel. This is the URL for the WordPress admin area and the username and password is already set up for us. So we click this link to go to the admin area. Will copy our username and copy our password. And there we go. We're logged into WordPress, all ready to go? Super, super easy. Let's go back to the platform. And we have the database access, the database name, username, and password. And there's an online interface where we can edit the database if we would like. Over here is the S FTP credentials. We have the host name, which is our IP address for the server. And then we can enter a username and a password to create the FTP credentials and just press Add. And then that creates the FTP. So what we wanna do next is go back into the WordPress admin and we want to install Divi now. So we saw how we did this before. Let's do the same process. Go to Appearance Themes, Add New, and then upload theme. And we'll select dv and then Install Now. And just a few seconds that will be installed and we can activate it. And then we'll put our license in there from our Elegant Themes account. We grab that from Elegant Themes.com slash members dash area under a count here, and then account details, username and API key. We go to that page, we grab our API information, and then we paste it in here. And that's it. We're ready to go. We have Devi installed and activated and connected to our license. So that's super easy for Cloud ways for you to create a WordPress website, prep your server, get it ready to go, install Devi. Just one more point that I want to bring out in our Cloud ways account. We have one more nice feature that I want to bring attention to here. And we go to Applications, and we go down to our application here. There's another feature here. If we click the dot, dot, dot, we can choose to either crew clone our app and create a staging for that application, and we can delete it. So if we click this button, what it's going to do is clone that application onto either the same server or to a different server. And we can create a staging environment if we want. So what does that mean? That means you're creating a complete clone of your website as it is, but on a different URL. So you can make changes to it. And the public doesn't have to see the changes in development. That's amazing when you need to test out new features or test out big updates to a website without messing with the live version. And then you're just one click away from deploying those changes onto your main website, the live on. So overall, what we've done here is we added our application, we gave it a name, we selected the latest version of WordPress. And then we, we got our admin panel with a link to get us into the administration area of WordPress. And then we installed Devi and got that all set up with our Elegant Themes account. And now we're ready to go with WordPress and would divvy. Now when the time comes that we are ready to launch our website and get it off of this cloud ways temporary URL, and put it onto our live domain name. And you might do that right from the start. We go to domain management and type in the name of our domain name. We press Save Changes and there'll be a prompt on how to point the domain name to your Cloud ways account that takes us to a support article. And basically you do so with just a DNS record. It's going to give you a, an, a record at you add to your DNS. And we find that DNS record by going to access details and copying our public IP. We click to copy this. This is the IP address of your server. And then we go into our DNS records in our domain registrar. Let's look at this in Jonas, for example, we click DNS and then we need to paste that a record that at symbol. And the, a record denotes the primary web traffic. So when you go to your domain name, where does the traffic ago? The DNS record here denotes the IP address that you're sending that web traffic. So to launch your website, you would add your domain name under domain management and then change this record from the IP address that's already in there to the one that is applied to your Cloud ways server. Right here under public IP, once you point it, once you point the primary traffic to that IP address, your website will be ready to go as long as you have your access details and place your domain management. And to make it secure, you go through the process of installing an SSL certificate with just your email address and your domain name. And once you do that, it'll give you a DNS record that you can apply to install your SSL certificate. And that's it. Managed cloud hosting is a premium solution. That means they handle all that, that technical stuff for you. Making it quick and easy to deploy websites and start building. So what's your homework? You watch me do it. Now it's your turn. Open up your iOS hosting server, create your webspace, FTP account and database. Next, install WordPress and activate living. If you are on a managed hosting platform like cloud ways at a server, then add an application onto that. So I'm Leighton and now you know how to prepare your web server. 11. Building a Website Visually: Welcome. I'm Leighton, your webmaster. Today, we're going to dive right in and build a web page. Now remember, the success of your website design business depends much on how nice your websites look. Why does that matter? Well, would you hire a knowledgeable, well-known photographer if you didn't like their work and their portfolio just doesn't do anything for you. Why would you choose that photographer? Because as important as the head knowledge and branding are the end result, the client is left with. Similarly, your website design business will only be as successful as the design of the websites themselves. Let me repeat that. Your website design business will only be as successful as the design of the websites themselves. That's what businesses will talk about. Not how fine your logo is, not how catching your domain name is, but how good you make them look. Now structurally, there are several different types of websites you can build with DV. There's one page, multi-page and e-commerce sites. The following lessons we'll explain each type O for now, let's focus on designing a single webpage. In the previous lesson, we installed on fresh copy of WordPress and Divi theme. So let's start building. And we're back in WordPress admin. This is the administration area for our my first website, WordPress site. So let's go into pages and add new will create a homepage that we can build on. And what type home and use the Divi Builder, use the purple Use Divi Builder button. That'll kick us into the Visual Builder. We are leaving the backend of WordPress and entering the front end. Welcome to the Divi Builder. So it starts off with a 25 minute video produced by the makers of Devi. In this tutorial of a giving you a basic overview of the Divi Builder with a focus on the Visual Builder interface. I highly recommend watching that video. It's fabulous. It's put on by the makers of Devi, which put out all kinds of free resources to help you learn Devi. This says building beautiful pages is a breach using the Visual Builder to get started at a new section which is blue to your page by pressing the blue plus button. Next, add a row. Rows are green, a row of columns inside your section by pressing the green plus button. Finally, start adding some content modules inside your columns by pressing the gray plus button. And you can customize the design and content of any element on the page by pressing the settings or cog icon button. If you ever need help, visit our documentation page for a full list of tutorials. The word documentation links to Elegant Themes.com slash documentation slash Devi, which is packed with free resources to help learn the Divi Builder and the Divi theme. I totally recommend these resources. They do a wonderful job putting out all of these freebies. Let's click the green, take the tour button. First, load a new layout. Baby does have pre-made layouts. So loading premade layouts is a great way to jump start your new page. The Divi Builder comes with dozens of Laos to choose from. And you can find lots of great free layouts online too. You can save your favorite layouts to the divi library and load them on new pages or shared them with the community. Click the highlighted button to open the layouts menu and select a premade layout. So we'll click the purple plus button to load from library. Just allows you to do a few things. You can clone your own page. But in this case, we're going to clone a page from dVs servers. This is the Divi Builder demo. Over here it says you can see a list of premade layout packs that shipped with the Divi Builder. You can also access layouts that you, you have saved to your Divi library. Choose the Divi Builder demo layout packs, so to see the layouts it includes. So we're clicking Divi Builder demo. Choose a layout to start with. Now you can see more details about the layout pack as well as a list of layouts. It includes click Use layout to apply the layout to your page, or clicking the green, use this layout button. It's loading. And our blank slate page is now been replaced with this layout pack. We have a polished webpage right now using some starter content. As you can see, there's a, there's Latin or whatever that languages. So this is just filler content. But we can see that the layout and the design is very polished. Add a new section. Now that your pre-made layout has been loaded, we can start adding new content to the page. The Divi Builder organizes content using, using sections, rows, and modules. That is very, very important to understand the structure of. Devi website sections, rows, and modules. Let's learn about that. It's sections are the largest organizational element. Click the highlighted button to add a new section to the page. Or clicking the blue plus button which will add a new section, is opens up, inserts section, choose a section type. The Divi Builder has three different section types. Regular sections conform to the standard width of your page layout. Specialty sections can be used to create advanced sidebar layouts. We don't use those as often. And full width sections extend the full width of your page and can be used with full width modules. Think of a big opening header section. For full width, they extend from one edge of the screen to the other. Click the regular Section button to add a new section to your webpage. We're clicking irregular. Now add a new row of columns. Every section contains one or more rows of columns. You can choose between various column layouts for each row you add to your page. Click the highlighted three column layout to add a new row to your section. It should be noted that when dB first came out several years ago, only one column, two columns and three columns were included. Now there are tons of column layouts and I'm very happy about that. I awaited that feature for a long time. But you're starting out with that availability. So it's asking us to create a three column layout. This is one row with three columns. Insert module, add a module to the column. Within each column you can add one or more modules. A module is basic content element. The Divi Builder comes with over 40 different content elements to choose from, such as images, videos, text and buttons. Click the highlighted blurb button to add a new Blur module to the first column in your row. I really like the blurb module. I use it quite a bit, very versatile. And we're going to click blurb. But before we do that, let's just look at what kind of modules we have available here. Accordion, audio bar counters, blog blurb, button, call to action, circle counter, code, comments, contact form, countdown, timer, divider, email often filterable portfolio, gallery, image, login, map, menu, number counter person portfolio, posts navigation, post slider post title pricing tables, search, shop, sidebar, slider, social media follow tabs, testimonial texts, toggle, video and videos slider. In reality. I'm going to use about maybe five of these modules, five to ten on each web page. So there are some I still, I've never used, but it's wonderful that they're available if we should ever need them. So for now, let's click blurb, which is a very common module. And now I Blurb has been created, adjust your module settings. This is going to be universal for all modules. Each module comes with various settings. These settings are separated into three tabs, content, design and advanced. These are the three tabs up here, content design and advanced. Inside the Content tab, you can modify the module content elements such as text and images if you need more control over the appearance of your module, head over to the design tab. For more advanced modifications such as custom CSS and HTML attributes explored the Advanced tab. Try adjusting the title of your blurb by clicking into the highlighted field. Let's do that now. Title. Let's change it to my first blurb. Let's see what popped up except or discard your changes. Whenever you make changes in the Divi Builder, these changes can be undone, redone, discarded, or accepted. Now that you have adjusted your modules title, you can click the red discard button to cancel these changes, or you can click the green button to accept them. Let's click Accept. There we go. My first blurb hover to excess action buttons. Whenever you hover over a section row or module and the Divi Builder action buttons will appear. And these buttons can be used to move, modify, duplicate, or delete your content. Click the highlighted duplicate icon to duplicate the blurb that you just added to the page. These are going to appear on all kinds of sections, rows and modules. And they're pretty universal, so you'll see them on most any type of content. In this case, let's click a duplicate module, which is a wonderful feature and a huge time-saver. And there we go. Drag and drop content. Every item on the page can be dragged and dropped to new locations. Using your mouse, click the highlighted Move icon and hold down the mouse button. While holding down the mouse button, move your cursor over to the empty column and then release your mouse button to drop the module into the new column. Let's click and drag this over to the middle column, and I release the mouse. And here we go. Access right-click options. In addition to hover actions, additional options can be accessed by right-clicking or command clicking. Check on any module row or section. Using the right-click menu shown, click the highlighted copy module button to copy the blur module you just moved. We're clicking Copy module. Paste your copied module. Now that you have copied a module using the right-click menu, you can right-click in a new location to paste the module using the right-click option shown and click the pace module button to paste the module you just copied into an empty column. This is, again, I can't stress how wonderful of a time-saver this is. So we copy this module and we're going to paste it. Paste module. There we go. Moving right along, access your row options. Every row and section has its own set of options that can be used to adjust the items appearance. You can adjust its width, padding back ground and more to access a row settings, hover over the row and click the highlighted options. So we're hovering over this row and we're clicking the second to the left option row settings. And what pops up, adjust your row setting. Just like modules, rows come with a lot of settings that are separated into the content, design and advanced tabs. Over here, click the highlighted button to add a new background color to your row. Now it moved us down to the background and we're clicking add background color. Except your changes. Click the highlighted green checkmark button to accept your changes. Changing the background color of this row. And boom, save changes. Awesome. Open your page settings. While using the Divi Builder, you can access your page settings by toggling the page settings bar at the bottom of your screen. Click the highlighted button to reveal your page settings. So this is the floating purple circle at the bottom of every Divi Builder page. We'll click that to expand some options here. And what do we see? Preview your page on mobile while editing your page, it's easy to see what your design will look like on mobile devices. You can also make adjustments to your module row and section settings for each mobile breakpoint. Click the highlighted tablet icon to enter the tablet preview mode. I'll click that. This is the tablet view. Switch back to desktop mode. You can switch back and forth between each preview mode freely while editing your page. Now that we have previewed our page on tablet, Let's switch back to desktop preview mode by clicking the highlighted button. Takes us back to desktop view. Access your editing history. Every change you make y editing your page is saved in your editing history. And you can navigate backwards and forwards through time to any point during your current editing session, as well as undo and redo recent changes. Click the highlighted history button to access your editing history. And it's the second to the right editing history. And we are undo redo and restore. You can undo redo or restore a Saved Histories state. If you change your mind about recent changes, simply click back in time and start building again. And you can also undo and redo recent changes. Click the undo and redo buttons and then accept your changes by clicking the green check mark. So we'll press redo. I'll take us back a few steps. We're undoing were, and there we go. So it's really encouraging to know we can do nondestructive edits, which means whatever we do we can normally undo, so we don't need to have fear clicking around and clicking buttons and playing around while we're designing. Save your page. When you're all done, you can save your changes by clicking the Publish button inside your page settings bar. And you can also press Control S at anytime to save your changes. Click the highlighted Save button to save your changes. Don't worry, the page you were working on before, before starting this tour will not be lost. Or clicking publish. You're ready to go. Boating beautiful pages is a bridge using the Visual Builder. And that's that we have taken the tour that got our feet wet. And we're going to click the blue start building button. That takes us back to a blank slate. Let's choose a premade layout here. And we'll choose one of these just so we can get started and have something to play around with. Again, I usually start with a blank slate. But as we're just gaining some experience, Let's click one of these layouts. How about the coffee shop? Click Use this layout. Never know when you'll have a coffee shop client. And if you do, this can serve as some nice inspiration for a design. I wouldn't copy it in verbatim, but it's a good starting point. Coffee House serving only the best since 2013. So everything you see here was created using basic Devi modules, sections, and rows. Let's see the skeleton of this webpage. If we look down here on the corner, you can see how it would look on desktop, tablet and mobile. We'll go over mobile a few lessons from now. For now we're going back to the desktop view. And let's click the second to the left button, wireframe view. I want you to see what the core structure of this webpage is. Now you should know when I first got into Devi, several, several years ago, this was it. There was no visual builder. It was all built using this view. What you see here. I like to teach this because we need to understand what the basic structure of a devi webpages. So we have the blue sections and the green rows, and within that we have our modules. So as we scroll down, it gives us a nice wireframe view to understand what's happening here. We can move things around, we can duplicate, we can delete. It's easier, much easier on the visual side. But occasionally you will want to hop in here to see this simplified view of the front end. Let's click out of that. And let's see what kind of modules we have here. So we looked at the 40 different modules earlier. Let's see what these are. This is a text module. Can also expand this on the left and I am able to snap it to the left or the right or whatever works for you. This is a text module. So we have the content of the text module. We have a wysiwyg edit or here where we can change the headings, make it bold, italic, bullets, numbered lists, links, center, left, right, justify, strikethrough, underlying change to color. All kinds of stuff you would normally find in an editor such as word. In this case, we have a heading 2, which would be the second highest priority heading on the page. The first being coffee house. As we scroll down to get familiar with Devi, guinea module can be linked to something which would take you to a different page or an entirely different website when you click on the title. In this case, we don't need to link it to anything. We can change the background as we saw earlier. Now, not only can we set a static color, we can also make a gradient out of it. Adds a nice feature. We can do a radial gradient. A linear gradient can do a background image or a background video. What else do we have? We've got the label of this for the skeleton or wireframe view. And then in design we have a ton of options here. This is the Design tab of the text module. So we can change the font and can change the font weight. These aren't showing up because we are in the text and not the heading. We can change the color, make the font bigger or smaller. Let's go ahead and get out of here and go into heading text. So this is a heading 2. Now we're looking at here the best coffee shop is heading 2. Let's change the font to something different. There we go. There's tons of fonts available that you can enjoy. And we can change the weight, make it capital a lowercase. All kinds of options here. Change the color. There's so much you can do with the Divi Builder to make your designs pixel perfect exactly the way you want them. I recommend just clicking around, playing around with these settings and getting comfortable with the potential. Can change the sizing, change the width, the height of this module, the spacing, add some margins and padding. We notice that the module here, it's a little close to the next one. So let's add some bottom margin, 40 pixels. We can change the border. At a border on the edge here. Make it rounded. Add a box-shadow. Filters change the color, change the saturation to Genji opacity. Transform make things bigger or smaller at an animation, make it fade in when the website loads. Do a Zoom. And these are going to be universal across all different module types. So you can add an animation transformation, box, shadow border spacing, sizing, and pretty much any module column, row or section. There's not much we're gonna do with the advanced. We can add some custom CSS if we'd like. But again, there's so much too much, not much we're going to do there. So let's click the plus here to save changes. Another thing we'll notice is that you can change the margin and the padding, the spacing visually here. Sometimes that will be easier. What else do we have? Looks like this is a blurb. We've got the title here, best beans. The icon is an image. We can also use or choose from a set of built-in icons on the Divi Builder. The few that we can take advantage of here. There's a coffee cup, one more in here. There we go. And we can change the color of our icon. We can put it in a circle. Here we go. Change the size. All right. Let's say we want to change the title to make it a little bigger. Let's do so with title text size 28. So here's a neat time-saver. So let's right-click titled text size will see copy, reset, Extend, Find and Replace, and then presets. Let's extend the title text size to all blurbs in this section and see what happens. Make them all bigger, awesome, awesome, awesome time-saver. So we've got text, we've got blurb. We've got a button here. Is button. It says about us and it doesn't link to anything right now. But we can easily link it to an About Us page. If we were creating this website. Under design, we can change the alignment, put it on the right, the middle, change the color of the button. Looks like we have a little border here. Take off that border and perhaps make the size bigger. There we go. Another neat feature of Devi is the hover effects. So we can add a different background. When we're hovering over the button. Let's click hover and then swap these. And we go click Save. And this will change. If we load the website on the front end, it would change on the hover. What's going on over here? Where is that image loaded? So we have a section and we have a row with two columns. And then we have a text module and a button module on the left. On the right, we don't have anything here. So how did that image get there? Let's find out. Go under row settings, and let's pull up the background. It's not in there. How about the second column settings? Background image? There we go. The coffee image is right there, static. When can click parallax effect. So it'll move the scroll of the webpage and can make it fixed and the background. That's a neat effect to add. And that was achieved by going to design sizing equalized column heights. So if you add a new column and ever see that, then you need to go to row settings design equalized column heights. Designs with images are lot more successful than any other type of design than just text-only. So I totally recommend finding as many graphics and images as you can to have the most visual what webpage possible. I'll go into that several lessons from now as we look at different image assets that are available to use. Where is the background image here? Let's go to section settings that grown. And there we go, We have a background image. Let's change that to parallax as well. I really like that effect. And we'll notice they added a background color too. So an image might take about one or two seconds to load, especially on a, on an older device. So it's nice to have the background color as well. Because the background colors, the only thing that you'll see. While you're waiting for the image toluene. So in that case, we want to pick a color that's very similar to something that's on the image. And that's what we've done here. Keep scrolling. And got a contact section down here with a nice dark background image. One neat trend you'll find is the dark light, light, dark. Layout, light dark, light dark. It's a nice way to visually break up the design. At this point, let's say you have what we have and view it on the actual internet. Click the green Publish button, and we'll see how it looks live for the public. Until now, we were the only ones I could see what we were doing. But now that we've clicked Publish, anybody can. So we'll click exit Visual Builder at the top. Hopefully this will look very similar to what we just saw. And it is, the Visual Builder is pretty close to exactly what you would see on the front end of the site with the editing features overlaid on top of it. So in this case, it's all ready to go. We hover over about us and the background changes. We've got the parallax effect on that image. Got our buttons. And there we go. So I recommend being as familiar as come as familiar as possible with the Visual Builder. You can do that by just playing around with it. You can do that by taking the DB tutorial. You can do that by going to Elegant Themes.com slash documentation. So many different ways to learn Devi. You can also learn devi on your favorite course Learning website, on YouTube. There are so many resources to learn Devi, I think the best way is to just go in there and start building, start designing a web page. And each additional client that you take on, you'll be learning more and more. One client might not use video. Another client would, another client needs a portfolio and other client needs just shop. So each one is going to have different needs which will continually push you out of your comfort zone as you learn more and more about the Divi Builder and the Divi theme. At this point, let's look at a few other parts of Devi that we need to learn. So there's a few things here. First, let's look at Devi and Theme Options. We'll go over Theme Options. Theme builder in theme customizer in the rest of this lesson. So theme options, these are sitewide options for your DB website. First, we see that logo. We need to upload our logo when we're building a webpage. And you can do that by clicking the Upload button, which will take you to an uploader or the media library. Some images have already been loaded onto our page when we installed that layout to, let's just click one of these fixed navigation bar. That's where your menu is attached to the top of the page. We like that. It's a nice trend. So we'll keep that turned on. Enable Devi gallery. And that's the pretty well-designed Devi gallery that replaces the boring default WordPress gallery. So let's do turn that on. Color pickers default palette. This is where we can install our color scheme for our particular website. If we have logo from a client and he uses a blue and red, if this is a particular blue and red that they use in their logo, that's all we want to use on the website. So we can make our job easier by installing a hearing to the default palette. And then anytime we're in the Visual Builder, will be able to see those colors ready to go. So that way we don't have to keep finding, searching for and finding the six digit hex code every time we need to grab that color. Grab the first post to image. Don't worry about that vlog style mode. We don't worry about that sidebar layout, shop page layout, Google API key. Worrying about any of this stuff. This one we might take advantage of the show, Facebook, Twitter, Google Plus Instagram RSS icon will turn off the RSS and will only turn on the ones that are necessary for this section. So if our client uses Facebook and Instagram, they're not interested in Twitter, and they don't have a Google listing, then we'll just turn on the Facebook and Instagram. And down below, we can copy and paste their social URL. Few more options here. Number of posts and products to display on archived pages. Won't worry about that until we need it. Date format. Use excerpts, responsive shortcodes. The default options are usually sufficient for all this. And then here is custom CSS, which is where you would add any snippets of code that you want to display sitewide. Back to the top. Navigation don't normally change anything in here. Categories, general settings. No need to change any of that builder. This is the Divi Builder. By default, it's enabled on post pages and projects will keep that turned on. Don't really need to change anything on here. Layout. We can stick with the default. Ads. Don't normally use that SEO. We can change the title and description, but I like to achieve this using a third party SEO plugin, usually all in one SEO Pack, which we will handle several lessons from now in the website maintenance plan section of this course. So for now we'll skip SEO integration. This is a very nice, convenient way to add snippets of code to your website. What kind of code? Well, Google Analytics, any kind of checking software and the Facebook pixel, anything like that, any external pieces of code for a third party website, they'll give you a little snippet of code that you can add to your page, either at the top, which will load first. Don't normally do that, or add to the body which will load later. That's better. So we can copy and paste any snippet of code in here. We do not need to add an extra plugin just to add a widget or an embed code. We can do that with Divi, Theme Options integration. And finally, updates. This is our Elegant Themes username and API key, which allows us to update Devi directly from WordPress admin. It's going to ask for your username and API key from your Elegant Themes.com account. Let me show you. We looked at this earlier, Elegant Themes.com account and then account details, username and API key is where you will find that information. That is Theme Options. It's nice to visit this a few times throughout the project. Most notably, to change your logo, to input the default color palette, to edit the social media profiles, and to add custom CSS. And to integrate their analytics tracking your Facebook pixel or whatever else you might have, integrate that onto your website and we must add our username and API key on every project. Make sure you do that. If not, you'll be prompted to, and that will serve as your reminder. So that's the theme options. Now let's look at the theme builder. This can be a wonderful time saver. It's one of their fairly new features. And it allows you to build a global header, a global body or a global footer for your entire website, or for specific parts of your website. For example, if you want to build how your not found page looks, you know, when you go onto a website and they don't have the page available or to page doesn't exist. And it says, whoops, this page doesn't exist. Here's where you can change what that would look like. Click Create template and add custom body. Build custom body. And now I'll take you into the theme builder where you can type whatever you want in there. In reality, you will mostly go in here to do a couple of things. When you start integrating e-commerce, the team builder, we're really come in handy. But until then, adding a global footer is a nice feature where you can change the footer across the entire WordPress website so you're not stuck with the default footer. I really do recommend building a custom footer for each website. And this is just a more hands-on, more customizable way to edit the footer. What else do we have? We have the Theme Customizer. Theme customizer is also in appearance on the left. And we can find it here with Devi theme customizer. This is a built-in WordPress feature, but Devi greatly expounds on it. So what you're looking at is the div, the WordPress Theme Customizer with Divi options included to what do we have here? General setting. Let's go to our Homepage. Here's our homepage and general settings. So these settings are sitewide across your entire website, site identity, That's your title and tagline. And the icon that would show up in the corner here. It's the little icon there. And when you add it to your home screen on your phone, or when you see that little icon in the corner of a browser tab. Layout settings. This allows you to create a box layout, change the content width, change the gutter or the spacing section, height, row height, theme, accent, color, which is the base color used on most elements of the page, like buttons, links, et cetera. Typography. This is where you would change the default font size, make it bigger or smaller. Change the line height, change the header text size, the letter spacing, the line-height, font-style, header font. That's where we get the list of all those options. And body font, body link color, and body text color, header color. Plenty of options here. Plenty of ways to customize all that fat ground. This is the background color across the entire website. So if we have a box layout, then that would come in handy. You can also have a background image, such as we can have this fixed on the entire page. Fixed. And there you go. Onclick stretch. No, repeat. Center. Fixed. Yeah. That looks less. That would really come in handy on, in larger desktop. But on this laptop here, you don't see much of it. Header and navigation header format. This is the top of the page where we see our logo and a couple of links. Header style there is centered censored inline logo. Slide in and full screen. So once more modern air, we don't primary menu bar. We can make that full width. We can hide the logo image. We can make it taller or shorter, change the height of the logo, change the text color, change the background color. All kinds of options here. To change this slide in opsins, fixed navigation. So when we scroll down, we can change how tall that should look. If we want to hide the logo image while you scroll the background color, the header elements, you can show the social icons and the search icon. We can add a phone number and an email. Won't see that until we reload the page. Footer is where you would change the bottom here, the default footer on WordPress is pretty limited, but it does work. That's where you would use those widgets we talked about in the previous lesson. Buttons is where you change the universal look for all buttons. This particular theme already has their button background, background, color, and design already fixed. So what, what's on the DV Visual Builder is overriding these global options. So that's why we don't see that changing. This is a nice way to change the buttons globally when you're first starting out, whether your design blog. Don't worry about that too much. Mobile styles. It's very limited what options are in here? But there are a few. We can hide the logo image and can change the text color of our menu buttons. And this is a very ugly design. Background color of the mobile menu or of the header. There you go. What else do we have color schemes? I don't normally mess with that. I mean, use, we'll go through this in the next lesson. And widgets, homepage settings. This is what shows as the homepage of your website. We'll go ahead and change homepage to home, which is actually the page we're on. An additional CSS. So this is where you add little snippets of CSS code. Once you get more comfortable with designing a website and with learning CSS, you'll be copying and pasting and creating your own CSS code quite a bit, but this is where you would add it. What kinda CSS might we add? Let me just real quick give you an example. I could right-click Inspect. I'll pull up the inspector here. Let's say we want to change the size of this. There's a lot that we can achieve with the Visual Builder, but occasionally you'll come across something. This is not an example of that something, but you'll come across things that you can only change using CSS that you cannot achieve with the Visual Builder. Again, this is not an example of that, but I changed the font using CSS here. You can achieve that with the Visual Builder going to design. But just as a, for example, this I just did with some CSS code. And now we click Publish and exit. So we've looked at Theme Options. We looked at the theme builder and looked at the Theme Customizer. There's also roll editor, which you probably don't need to use much, but it just changes the functionality that's offered to the admin editor, author, and contributor. But you probably won't have too much of that when you're starting out. But that features there when you need it. Divi library user, the global layouts and different layout packs. And maybe a global section that you want to reuse on different parts of the website that would show up here. You can learn more about the DME library on Elegant Themes.com. And then there's a support center which gives you links to recommended hosting. Elegant Themes support documentation. Safe Mode logs. I do recommend going through this documentation if you are a visual learner, if you're a hands-on learner, just go ahead and start using Divi yourself. Otherwise, you can watch these videos and these help articles. I'll click my first website up here. And since we added this to the homepage, now we're on our homepage of our website and it loaded that page that we created for coffee house. Like I ruined the design, but it made the point that we can change a lot of those design elements, move things around. And we've also learned that the coffee shop layout allows us to have a nice starting point for our design. Otherwise, we can go blank slate method and just start building the website from scratch. We'll go into design inspiration, a few lessons from now. We'll go into mobile, a few lessons from now. We'll go into pages and menu navigation in a few lessons. But for now, I wanted to show you the visual builder and the various Devi options. So how did we learn more about Devi? Well, if you're a visual learner, there's plenty of courses, tutorials, youtube videos dedicated to learning Devi. If you're a hands-on learner like me, just play around with it and get comfortable with it. Proficiency and comfort will come with time and experience. Plus, He's always coming out with new features. So keep up with the Elegant Themes blog so you can stay relevant. However you prefer learning, you need to practice. Consider this. Would you hire an artist who had never picked up a paintbrush? Would you hire an architect who doesn't know how to use CAD software? Would you hire a photographer who doesn't know how to use Lightroom or Photoshop. What's the point? Here's the point. Your success in this business also depends on how comfortable and proficient you are building a website. And that's the homework I want you to research Devi, take a course, watch a tutorial video, play around with Libya yourself, whatever you prefer, start getting comfortable with the software. In the following lessons, we'll learn how to build a one-page site, a multi-page site, an e-commerce website, or a mobile friendly site, where to go for design inspiration and what additional software you might use. I'm Leighton, and now you know how to build a website visually. 12. Building One-Page Sites: Well, I'm Leighton, your webmaster. Today, we're going to build a one-page website. Now, we kind of already did that in the last lesson since we did build one page. But I'm not talking about how to build a web page. I'm talking about how to frame your entire website around that one page. Let me show you an example. Here we are on senior living SMS.com. This is a social media management company specializing in senior living. I designed this one-page website and let's use this as an example. So we haven't attractive opening here. An attractive background photo that tells us what kind of industry this website is all about. Got some buttons here, get in touch and pricing. As we scroll down, we'll see the owner of this company, Belle magneto, and we see her bio. There's a reach out to bell button. I'm going to keep scrolling and we see some contact information, a phone number and email address, and the location x0 is located in Atlanta, Georgia and does business all over the country. We have a contact form here where we can enter our name, email address, phone number, and message, click Send. And that will go directly to the owner of this company. Keep scrolling. Man will see their social media posts which grabs from Facebook, Twitter, and Instagram. Is there some other recent posts? Looking good? And there we go. We have reached the bottom of the page. We have now digested who they are. We've learned who the owner of the company is, we've learned what they offer, and we've had multiple opportunities to reach out. In fact, if we click on one of these reach out buttons like get in touch, notice what happens when we click this button. So we're still on the homepage. Remember, we're still on senior living SMS.com. So we're clicking this button and what does it do? It takes us down to the contact section. So this is very valuable. By the time you've reached the bottom of the page, you have digested all of the content that this company has to offer. And you didn't lose anything by not clicking around to other pages. In fact, there were no other pages to click around to. All of the content was available on this one page in a concise to the point way. And websites like this or more affordable. This was very modest on her budget. Let's see a few more examples of one-page websites that have completed. Next, we're going to look at www dot top-notch dot glass. This is a Glaser in the Tennessee area. Top-notch glass, beautiful opening here with a fabulous background image. Custom shower glass specialists. Here we have a little bit about their story, who they are, how much experience they have. A few questions. How soon can you deliver and install? What types of glass do you provide? What cities do you serve? And we've got a counter here, one-week turnaround time, 15 years of experience. Now we see some testimonials and we'll notice the background was broken up with the dark light, dark light. Design layout. Read 15 plus reviews. That'll take us to their Google listing. Here we are top-notch glass. Continuing the glass showcase. These are images of this glazers work. Beautiful shower doors. We're still on the homepage. Remember? And keep scrolling and at the bottom, get in touch. This is the contact information. We've got call, visit, and email, as well as a map showing where his showcases. Here's the contact form. We fill that out. I will go directly to the business owner and there we have it. So what are these buttons at the top for? Typically, when you click a button that looks like that, it'll take you to a different page, but notice the URL here at the top as I click these buttons. So we're still on www dot top-notch dot glass. And what happens when I click About? We're still on the same page and we just scroll to the about section of this page. Click testimonials. It scrolls down to the testimonial section of the page. Showcase takes us down to the glass showcase and contact. What happens? You guessed it, it scrolls down to the contact section. Again. By the time you scroll down, you've digested all the content available on this website. And this website was very friendly on the business owners budget. What else do we have? Let's go to JT am stucco.com. We'll see a similar layout here. This is a tile and stucco company. Nice opener, beautiful modern typography. They do remodels, new construction and repairs, got some great images that the client provided. May also made great background images. They do residential stucco. Here's some information about them. Beautiful photography. You can click these to enlarge. Another background image is one from Dunkin Donuts. Some information about their commercial stucco services. Commercial stucco work for banks, for Dunkin Donuts, for restaurants. Scroll down and there's the contact fields and their logo, which we designed for them. So we click these buttons at the top about schools as to the About Us section, residential scrolls down to the residential section and commercial scrolls to the commercial section. Contact goes to the contact information. So real briefly, how do we get to that point? Well, this link takes us to we copy the link address. It takes us to hashtag or pounds, pound sign, residential. What is residential? That is the ID of this section, but can add this indivi under advanced and ID. Here we are. The sections name is ID, which we add by going into the Devi Visual Builder. Let me show you that briefly. I'll login to the backend here. And we'll see how this is done. And we're logging into the backend of this website. First we'll go to appearance menus to see how these links are set up. In the next lesson, we'll see how to do pages, but for now I just want to show you what this link looks like. Hashtag residential. So how do we know where that goes? Let's see. We're going to open up the Visual Builder on this page. This is called an anchor link by the way. So we're denoting an anchor link that takes us down to this particular section. You can link it to really anything on the page. In our case, we want to link it here. So I'll click section settings, advanced, CSS id and classes. And there we go, SSS ID. The ID of this section is residential. So any link on the entire page that goes to hashtag residential and will take us to that section of the page. Exit out of the Visual Builder here. We'll discard those changes. And that is a brief overview of one-page websites. Again, they are friendly on the budget and they contain all the information that the company needs to put out in just one page. So by the time you scroll to the bottom, you've digested everything that the company wants to put out. Nothing is lost because they don't have to click around to other pages. In a moment, we'll go through pros and cons and see what the advantages and disadvantages of one-page websites are. Let's discuss the pros and cons of this type of website. Pro. These websites are quite for you to build. You can whip on out in a day or two. And clients low a quick turnaround time. The sooner the website is ready, the sooner it can start generating leads for them. Pro, accordingly, these websites are cheaper for the client under a 1000 instead of several thousands of dollars. And some small businesses are on a really tight budget. So a one-page website best fit there, fits their needs. Probe with a huge multi-page website. Visitors might miss some valuable content. With a one-page, it's all there without needing to search. One common complaint with large websites is I can't seem to find what I'm looking for. That is rarely an issue with one pagers. Now, con, having a one page limits the content that search engines can pick up. Having high-quality content is so important to ranking well with the search engines. So if you don't have much on your website, you're at a disadvantage there. Now. To be fair, I have seen one-page websites ranked very well. So it is possible since there are several factors that go into your search engine rankings. And we'll go through that in a few lessons. Gone, and more content you add the longer the page gets. And that could easily become overwhelming over time. Nobody wants to scroll, scroll, scroll, scroll, scroll. If the page gets overloaded with content that isn't laid out very well, they might just leave the site entirely. So what's our takeaway here? I like one-page websites. There are budget friendly option for small businesses who aren't looking to invest too much in their digital marketing. So what's our full model? I want you to start looking closely at the structure of websites where they laid out. What did the menu buttons? Did they take you to a separate page or a specific section on the current page? You won't find one pagers as often, but they are out there. I'm latent and now you know how to build a one-page websites. 13. Building Multi-Page Sites: Welcome, and I'm Leighton, your webmaster. Today we're going to build a multi-page website. Two lessons ago, we learned how to visually design a web page. In the previous lesson, we learned how to build a one-page website. Now we're discussing your typical website, one that has multiple separate pages. What kind of pages do you often see on websites? Have you noticed a trend there? One of the more websites you build, the more you'll notice trends among the type of pages. Many small business websites have a homepage about US products, services, gallery, reviews, contact. Do any of those ring a bell? Those pages are common because they aren't tied to a specific industry. You'll find that most all types of businesses can deliver their message through those pages. Such as needed, might take advantage of a locations page, the portfolio, menu, store, et cetera. Really, you can design a website with wherever pages you'd like. But looking at other sites can serve as inspiration when you and your client are brainstorming how to lay out the website. In fact, that's a key point. Some clients will come to you with exactly the pages they're requesting, but others, they haven't gotten that far. They'll need your assistance with how to best tell their story. Now from a technical perspective, how do pages work with WordPress? Wordpress has pages and menus. We've already looked at this briefly. Now each page is individually built with the Divi Builder and every WordPress site has at least one menu. Let's look at this together. So here we are on the backend of the website that we've been working on. Before we add any pages to our website, I first want to show you some other small business websites so we can get a feel for what kind of pages are on those sites. So these are a few that I've designed. First, let's look at a restaurant. This is Mamma Mia cuisine, a Mediterranean restaurant. We're on their homepage, Mamma Mia cuisine.com. And let's see what we observe. At the top we have the logo. We've got a few buttons here. We've got six different pages. In addition to the homepage. We've got their contact information, phone number, and address at the top, and then some links to their social media, including their TripAdvisor. As we scroll down, we have a beautiful slider here using a third party slider plugin and the high-quality photography from a local food photographer. We keep scrolling. We have a welcome message, some paragraphs and some buttons. And at the bottom we've got more social links. And another menu at the bottom here, as in addition to a Facebook like button. So back to the pages at the top, we're on the homepage. What else do they have? This company has an About Us page, an online menu, a catering menu, a photo gallery, reviews, and contact. All very standard pages for a restaurant website. Let's look at the About Us page about Mamma Mia. There's a quote there, some photography and a few paragraphs written up about the restaurant. The menu is your standard online menu, divided into appetizers, salads, pastas, Mediterranean entrees, et cetera. Catering is very similar to menu with their catering packages and prices. The gallery, in this case, this is photos of their food. Obviously, different websites will have a different version of a gallery. They're usually showing off a product, a service. In the case of a restaurant, they are showing off their food. Mouth-watering photography can really entice somebody to choose this as their next lunch or dinner Stop. Reviews is a common page. This is where you'll see some opinions of the reviewers on Yelp, Facebook, Google, TripAdvisor, or wherever else a company pulls their reviews from. This is a, another must. We love having reviews on a website. Love testimonials. These are written reviews. You can also add an image or you can even add a video testimonial that would be king. Those are harder to get. We love having an image and at bare minimum, least have the text which we have here. And we've diversified by including the source Yelp, Facebook, TripAdvisor, whatever the sources. And we visualize the page by adding some more. Mouth-watering photos, and finally, another staple on websites. We've got the contact page. Here's a COVID-19 pandemic update with their updated ours. Then they have the restaurant information, they've got the map so you can see where they're located and a form so you can contact them directly. As you and I both know, the contact page is a staple on most every website. What else do we have as staples? Most sites will have the About Us page, contact page. Many of them will have some form of a gallery and reviews. And in this case, this is a restaurant website, so they have a menu. Every website, of course, as the homepage. Let's look at a few others. This is Apple Valley mountain village. There a restaurant to end a general store. Start out with a slideshow of some of their more mouth-watering food. You've got a different brands here, an opening message, contact button, latest posts, links to their different stores. They've got social media links here. But let's look at the pages. This one is a slightly larger brand, especially their sister companies. They have the homepages that were on. They've got an About Us page. They've got a contact page, a blog, directions, photos, that's through gallery page. They've got specials and special specialized to this particular type of business. They've got the dining and the coffee page, since they are a restaurant and a coffee shop. And since they have a general store where you can walk in and buy stuff, they have a store button. And the events tells us what's new, what's going on. Same with the blog. Specials is a nice way for a business to show off what kind of coupons, what kind of discounts and deals that they have going on. It's important to keep that page up to date. You don't want to go on there and see a coupon from a couple years ago that's already expired. So that's another one they have to keep up with. Let's see what their photos page looks like. This is their gallery. And once this loads, we see their food gallery. They've got images of their food, images of the store, images of their location, and some of their products. Their photos are high-quality. They were taken by a photographer and the quality is definitely up there. What else do they have? So we go to the contact page. Let's see if we'll find similar elements to the previous website that we looked at. Here's the contact page. We see ours. We see phone numbers. In their case they have more than one. But can we see the phone number and we see the address? Where do they are located? If we click on this, it'll take us to the Google listing for that particular business. Nice way to get directions and further see where they are located. Here we are. You can view there be their contact information. You can zoom out, zoom in, zoom wherever you wanna go, and get directions to this particular business. Back to the contact page. They have a send a note which is a devi contact form that will go directly to the manager of this business. So we have ours col, visit and send the message. We also have a embedded version of this Google Map, which is added indivi with the code module. Let me show you this real quick. In Google Maps, we click Share, this Share button here. And that will pull up, embed a map. We can copy and paste this link, even change the size here. And this will give us an iframe, which is an embedded version of any piece of content. In this case it's the map. So that's what we used here. Nicely laid out. The About Us page, a staple with websites about us. We've got a few paragraphs written up, some extra links to different parts of this brand, to the mountain, stored the general stored the coffee shop, and some other stuff that they do, such as weddings at one of their sister location. So they crosslink their websites. So again, what do we see? We see homepage. We see about us. We see the contact page and the gallery and the blog and specials and unique to this particular industry since they are food-related, they have a dining page and they have a coffee shop page. And since they do sell things, they have their store page. There are events they keep up with what's going on, what new events are happening in and around their business. And this can basically be considered like the blog. New things are added as they're going on and as necessary. So those are two businesses that provide food in a restaurant or a coffee shop format. Let's look at a totally different industry. Let's go into construction and see what this website has since j. M j. Construction services.com. They are home builders and home remodellers. So we're currently on the homepage. We see what we do. A few different services here, homes renovations and commercial, beautiful photography that they provided. Little blurb about their mission, contact information, phone number, email, and address. There are located in Florida a form that will go directly to them and that's the homepage. So what else do they have? They have a gallery, which we see is common on small business websites. We've got their photo gallery, which in their case, what do you think they would have photos of? They got photos of homes they have built. The photos are very high-quality, professionally taken by a local photographer in their area. Very nicely done. Makes our job so much easier when the client provides the high definition photography. To what else I've got the contact page. You can imagine what's on there. Just like what they had on the homepage. You can't overdo this. But your contact information as often as possible, phone number, email. We don't ever want somebody to have to hunt to find that information. And unique to this business. They have what can be viewed as their services pages. Their services are commercial, custom homes and residential renovations. These can be viewed as service pages, landing pages dedicated just for that service. So if somebody is in the area and they're searching for custom custom commercial builds and renovations in that area than this page would pop up instead of the homepage. And if somebody is searching for that, if they're searching if there are commercial property owner and they're looking for a build, then this page would be the one that would best serve their needs and what they're looking for. All right. What else do we have at the top, we've got the phone number and the e-mail and the social media links, and that stays fixed at the top of each page. By the way, this was built with Divi and probably guessed that. And so was Apple Valley also built with the Divi theme and another Devi website. This is profit and Sons Incorporated.com. They do structural prefabricated structural steel. Very cool stuff. They've, they've built campuses, they built universities, got really big projects, and you've got gorgeous photography of their work and do an amazing job. And we were privileged to work on their website. So what are we looking at? We see the homepage and we see beautiful high-definition photography. We really want their work to stand out. And at the end, we see contact by phone, by e-mail or by visiting them and a contact form. So what kind of pages do we have here? We're on the homepage and there's also an About Us page. There is a contact page. There's a testimonials and recent projects would be their version of a portfolio or a gallery. So we've seen that on all the websites we've looked at so far. And you'll see those across most all small business websites unique to this one. They've got a landing page for contractors, a landing page for architects and engineers. And then they have a careers page, which is similar to what Apple Valley has here with the team page. Join our team, which takes you to a job application. Let's look at their About Us page and see how they lay this out. It says about profit and sons. And got a video, nice video introduction, got a few paragraphs written up, a slideshow of their work. That's their building and some of their personnel. And there's a work in progress. And we repeated the contact information. You'll notice a few trends. First of all, the header stays fixed on every page. We've got contact information at the top. We've got their social links, and we've got the menu. Of course, we've got contact information repeated on the bottom of the site. Again, you can't stress this. I can't stress this enough there. You can never have too much contact information on our website as never a problem. So repeat it as much as possible. You never know at what point people will want to reach out. And maybe they'll do so by clicking the header. Maybe they'll scroll to the bottom and fill out this form. Or maybe they want to click the Contact page. Whatever their preferences, we want to give them plenty of options. Another thing to point out is the continuity here. As you click around on these websites, can you tell what website you're on? For example, right now we're on the profit and Sons homepage. We see their name. We see the white border around the edges here we see the header at the top. And when we click on testimonials, what happens? We go to a new page, but we see the same logo. We've got the same logo, but a smaller version of it. We've got the title of the page that we're on, testimonials, a beautiful background image here. And then as we scroll down, we have the content of this particular page that we're on. What about as we scroll down to the bottom, beautiful image? And then we've got the bottom links down here that are the same on each side. We've got the same footer across the entire website. So as you click around to different pages, it's clear you're on the same website. Consistency is crucial. We don't want people to click around and get confused. Wonder what website that they're on. And we don't want to create any confusion whatsoever. So when we're consistent across a website, when we're consistent on their social media, when we had the same logo across their social profiles, were creating a brand and we're getting people comfortable with that brand. We want the same logo, we want the same colors across different sites, social profiles across their official website. And we want people comfortable enough to navigate and get the information that they're looking for when they come onto this website. So with that in mind, we've looked at the different types of pages that we see across sites. Now how do we create a page in WordPress? So let's go back to the website that we've been working on. And this is our WordPress admin. Let's do a few things here. First we're gonna go into pages, and then later we'll go into menus. So we have our default page that we worked on in the last couple of lessons or homepage. And we have the one that WordPress generated the privacy policy. So let's add a, let's add an About Us page, a services and a contact page. We'll start out by clicking Add New, and we'll add the title, and we'll change the URL of this page. It's pops up, add title, and we're typing about us. Now. We haven't jumped into the Visual Builder yet and we're not going to right now. We're just going to click Save Draft in the corner. And then the URL slug here. Let's look at the permalink. So this is a friendly URL after the.com or whatever your domain name is. What happens after that to denote the particular page that you're on? Well, that's called a permalink. So in this case, this was generated from the title, but what we want it to be as simple and concise as possible. In this case, let's just remove the dash us, make it nice and clean. What else do we have? So we scroll down, we'll notice we can do a parent page. This is basically when you're nesting a page under another one. For example, if you're a remodeling company, you might have an all encompassing services landing page, but then under that, you might have builds, residential, commercial remodels. Each of those under the parent page, in our case, about us would be a top-level page. So we are going to select no parent. And if you had multiple pages and you wanted to reorder them, you could do so using this button. Now, all right, at this point we'll click publish it as if we're ready to publish. Yes, we are. I'm going to uncheck all we show pre-public checks and publish. Let's hop in the page and see what that looks like. We shouldn't find ourselves on a blank screen here. And we do. We get out of there and add a couple more pages. We said we want to do a services and a contact page. Services and contact. Now what did we do? We go back to All Pages. Let's look at a couple of things here. First of all, first off in the corner. Screen options. This is a nice way to declutter what we're looking at here. And we can add and remove columns as necessary. By default, all of these will be checked. I like to uncheck some of these that I don't necessarily need, like author and comments and my uncheck. And you can change the number of items per page. The default is 20. I usually up it to about 50, so we can see more on each page. And there's a few options when we hover over our page, we can edit it on the backend. We can trash it, we can view it. We can edit it in the Visual Builder. But let's look at the, what's called edit. Here we can change the title, we can change the URL slug that permalink we talked about and change the date of the poster page, add a password if we want, change the parent, change the order. The default template we're using, which is default. We usually keep Allow Comments off and the status we can change draft pending review or published in our case. We want published. So let's change the order. Will keep this at one. And why don't we put the About Us page second. I'll put this services page third, and then the contact page forth. So how does that look? Let's refresh the page and we'll see what order they're in Home About Us Services, contact, privacy policy. So now these pages are created, but we won't necessarily see them until we add them to our menu. Let's go into appearance menus and we see the homepage. So if we pull up our website on the front end, what are we noticing? We look at the menu at the top and all we see is home. Why don't, why don't we see anything besides home, but what about those pages we just created? Well, we haven't added them to our menu yet. You don't necessarily want every page on your menu on every website. So in our case, we have to go into menu and add them. So this is WordPress admin, appearance menus. What did we see here? We have minue locations. Would the Devi theme. This is the primary menu. Up here. We've got the secondary menu, which would be this spot right here above a home. We have not added anything there. And the footer menu. What is that? We scroll to the bottom. That is this right here. Just hold. So normally I'll duplicate the regular buttons as the footer. So I'll make the primary menu and the footer menu the same. In our case, we've called that main menu, go into edit menus and see what this looks like. So we can add pages and we can add the ones that we just created. We can view all we can search, which is handy if you have a bunch. Let's add about us. We'll add services and contact to our menu. There's a convenient auto add pages here where you can automatically add new top-level pages to this menu. If you uncheck that, then you can have more manual control over what pages get added. So I'll keep that unchecked. We can also add posts, which is typically blog posts. We can add custom links like just say facebook.com slash my website. We can add our link text, and there we go. So let's see what this looks like. I'll click save menu, and let's reload this on the front end. Once this loads, we should see our new pages and we do. This is the homepage, the About Us Services in contact and Facebook are custom Link had been added to this website. A few things we want to look at here. First of all, first off, if we click FB, it takes us to the link that we denoted. It's loading Facebook right now. But what if we want to open it in a new tab? Great question. Let's click screen options in the corner. And we see a bunch of options here. Let's do link target. That's an advanced menu property. But we are advanced. We can handle this, would click FB Custom Link drop-down. And here we go, boom, open link in a new tab that allows us to open it in a new tab, which is nice because you still have a tab that's open on the website. So just a little nuance there that we want to pay attention to. And let's say we want to nest some of these under another. How do we do that? Let's nest all of these under Home. There we go Home About Us Services and contact. Let's put under home. And it's not a typical approach, but we're just demonstrating the functionality. We refresh here and we should see home FB and the search icon. And boom, there we go home. And underneath that are these buttons. They'll beautiful job is looking very nice thus far. All right, we'll go back to menus and let's add something to the secondary menu, Manage Locations. Let's create a new menu for this top button. Under secondary menu, we don't have anything just yet, so we'll click Use new menu. And we'll call this top button Create menu. And let's do this. So we've created our menu top button, and let's add the contact and we'll make this a get in touch link. Get in touch, Save Menu. We check, make sure to location is correct. Secondary menu, click save menu, and let's refresh and see how it looks over here, we should see a button bump up in the corner doing yes, we do. Get in touch. Great job guys. Now just a couple more things. Let's go back to the Theme Customizer, which we learned about a few lessons ago. Theme customizer. Let's look at some of these header and menu options. First off, I wanted to see how to control whether or not that search bar shows up. Where do we find that? Let's see, we're pulling up and loading the theme customizer. And we'll go to header and navigation. And then header elements show social icons. That's the top bar right there. And then shows search icon that showed up there in the main menu. I like to turn that one off unless you explicitly need a search bar for a particular reason, most businesses can do without it, but some, like e-commerce sites will need to take advantage of that. I do like having the social icons open and I like having that top bar at the top since it keeps your contact information fixed to the top no matter where you scroll on the page so we can change the phone number here. And the e-mail. It's a nice built-in feature would divvy and click Publish. Then how do we change the color secondary menu bar? And you can change the background color here and change it to whatever we want. All right, looking good. You can change the text color, the drop-down menu, we can change the background of that drop-down menu, change the color or the active link. How we see that the home is the off orange color and the others are white. We can edit that by going to Primary Menu bar, change the text color here, or change the active link color here. We have a lot of control over this stuff. And there's plenty that we can do. Think customizer also has a built-in menu bar editor. So you go to menus. And there we are. The two menus that we have. We've got the main menu. Let's move these aside. And it will refresh on the fly without having to reload the page. There we go. And we can do the same with the top button. Looking very good. Another question that pops up, where do those social icons come from? Do you remember that from a couple lessons ago? Let's find out. We can exit out of here, go back into WordPress, admin, Devi, and Theme Options. Here we are, and the social icons are enabled or disabled on this screen under Devi theme options. Most people don't have a Twitter nowadays and we might turn off the RSS icons and sets an older feature that Google Plus, I like to use that as Google Maps link, Instagram and Facebook a lot of people have. So we scroll down and click Save Changes. Go back into our page, refresh it. And what did we see? Those social links have been removed as we requested. Great job. We learned that website seems to be consistent. The different pages need to have a consistent header and footer and only the content will change on the particular page. We've seen. Typical pages for small business websites are Home About Us, Services, contact gallery, and maybe a few others. And we've seen how to add pages in WordPress by going two pages. We've seen how to add sub-pages. We've seen how to edit the menu and how to customize how the menu looks from a design perspective on the front end. So great job guys. Now you know how to build a multi-page website. So what did we learn about multi-page websites? This is the typical structure you'll find on most sites. Each website has a menu. Each button or link on the page takes you to a different webpage, which you can design, the visual builder. And each page needs to follow a consistent look so visitors are confused. Finally, need to assist your client in choosing their pages. And what's a homework? I want you to go into WordPress and click through menus and pages. Add a menu, add some pages. And while you're at it, browse other small business websites and notice what their menu structure is. I'm Leighton, and now you know how to build a multi-page website. 14. Building eCommerce Sites: Welcome. I'm late to your webmaster. Today we're going to build an e-commerce website. These are websites that sell products and services online. You'll typically see a cart in a checkout page, usually with the ability to securely take credit cards over the Internet. Have you ever visited one of those websites? Have you ever bought something online? If so, you contributed to a more than $1 trillion business. We all know how big of a deal e-commerce is and that trend is not going away. But how do you embrace this market and effectively serve it to your clients? And can then be done in WordPress. Course WordPress can handle that. Now the core WordPress software is not designed for e-commerce. You do need an e-commerce friendly theme and plug-in, in our case, Devi supports the commerce through the WooCommerce plugin. Let's learn about WooCommerce. We are on the number 1 WordPress e-commerce solution, Woo Commerce. Build exactly the e-commerce website you want. Woo Commerce is a customizable, open source e-commerce platform built on WordPress. Get started quickly and make your way. Start a new store or customize and extend. I will skip these buttons because we will be installing WooCommerce directly on our website using the plugins section. Everything you need to start selling online and WooCommerce plug-in C to any WordPress site and set up a store in minutes, get secure payments, configurable shipping options and more out of the box for free. Customize and extend from subscriptions to gym classes to luxury cars. Woocommerce is fully customizable. Add features and extend the functionality of your store with official extensions from the WooCommerce marketplace. There is an some of the extension that they have they can connect to a stripe Square, PayPal ship station, tax jar, Mailchimp, google, Facebook authorized just to name a few. And we'll look at the extensions in just a moment. Trusted by agencies and store owners. And there's WooCommerce. So let's first look at some of the extensions that they have available, browser extensions to see what we can do with WooCommerce. Grow your business with hundreds of free and paid WooCommerce extensions across all your logistical, technical, and marketing needs. So what does that mean? It means we can integrate with Etsy. We can run an affiliate program on our website. We can offer gift cards. We can grow our business with extensions, lunch or store marketing solutions made by WooCommerce. Let's look at different payment options. All right, so developed by WooCommerce. We've got shipping solutions. Alright, so we have WooCommerce Shipping. Print labels from your WooCommerce dashboard at the lowest UPS rates. We've got invoicing and packing lists. We've got local pickup plus marketing, automate, Whoo. We've got MailChimp integration, Facebook integration, HubSpot, Pinterest. Let's look at some of the shipping options. And I'll pull up one of my favorites here. So what if you have a shopping cart and you want it to automatically calculate the shipping cost, this will connect to USPS. The USPS shipping method. It will use the pounds and dimensions of the items in your cart and give you real-time rates from USPS. This is a paid plug-in. You can use WooCommerce without any extra plugins at all, completely free. But if you need to extend the functionality you can with these paid plug-ins and this happens to be one of my favorites. Let's see what else? They have four payments. What kind of payment solutions do they integrate with payments made simple, designed exclusively for WooCommerce stores. So not long ago, WooCommerce came out with their own payment gateway. So it really connects to Stripe.com, but it allows you a simple way to take payments directly on your website through WordPress. So what I'm saying is you're not connecting to a third party service like PayPal.com or authorized dotnet. It does use a third-party strike, but it tightly integrates with WooCommerce to make things much more convenient. And so going forward, I think this is a great option for taking payments. All they do is charge the 2.9% plus 30 cents per transaction. And that standard you'll find now on PayPal, you'll find out on Stripe.com at a standard rate. They can also integrate with different payment processors. Let's see, authorized.net to Stripe Amazon pay square. I've used several of these WooCommerce payments. That's their own solution, PayPal brain shri pay fast PayPal. Lots of different options. And they have for, for creating that recurring revenue, they have a subscriptions plugin, which lets you take subscriptions. Here we go. Woo Commerce subscriptions. There we go. Let customers subscribe to your products or services and pay on a weekly, monthly, or whatever basis you want WooCommerce subscriptions. It says 199 a year and lets you create recurring payments. I've used this on several client websites, create and manage products with recurring payments, payments that will give you a residual revenue that you can track and count on. This is one of their most popular plug-ins. I've used it on several websites. I've used this one. I've used the USPS automatic shipping calculator, and I'll of course get a third party plugin for the payment processor. If I'm integrating with PayPal, had to pay anything extra for those plug-ins if you're integrating with Stripe, that one is also free. So not all of these plugins are premium. Some are free, and they extend the default functionality of WooCommerce. So let's install WooCommerce. We do so by hopping into our website and going to plugins WooCommerce as a plugin, it is not a theme. It is designed to work with your Divi theme. And let's type it in here. Woocommerce. We're going to see the core WooCommerce software. Woocommerce is the world's most popular open-source e-commerce solution. You'll notice it is made by automatic. Who is automatic? It is the makers of WordPress, WordPress, but WooCommerce out, that's how impressive this company is and how tightly it integrates with WooCommerce. What else do we have? Woo Commerce Stripe payment gateway. This connects your website was strike. That is a free plugin. Facebook for WooCommerce, also a free plugin and enables you to do ads and grow your audience through the Facebook plug-in, WooCommerce PDF invoices and packing slips, create print and automatically emailed PDF invoices and pecking clips for WooCommerce orders. This is a free plugin. Got MailChimp for WooCommerce, also a free plugin. It allows you to drop the people who check out on your website. It drops him onto your Mailchimp lists so you can grow your MailChimp e-mail marketing list. Woocommerce services gives you a few extra things like automated text calculation, shipping label printing, and smoother payments setup. I do use WooCommerce services quite a bit. Paypal Checkout payment gateway accept PayPal credit cards and debit cards on your WooCommerce store as a very popular one since PayPal is world-famous. And these are not created by WooCommerce. They are third-party plug-ins. Let's go back to the top and install WooCommerce and see what happens next. Or installing, installing. This is our first plug-in. Very exciting. We're installing WooCommerce will go more into plug-ins in the website maintenance plan section of this course. Well, at that point we'll be installing several plugins that will give us our maintenance services. But for now, let's install this on our e-commerce site. Activate. Very exciting stuff. It's activating, it's activating and this is the screen were shown, get your store up and running more quickly with our new and improved setup experience. Yes, please. It'll walk you through these store details and try to connect you to the WooCommerce website. Let's do 123 first lane, United States, California. Okay, setting up a store for a client. Sure. Continue. Build a better WooCommerce, get improved features. I don't know my attorneys on ever. So count me out. Which industry does the store operate in? This allows us to WooCommerce to sort of tailor your experience. So let's just say food and drink. What type of products you'll be listed. So why is this question asked? Well, it needs to know what to handle in terms of shipping, want to handle in terms of payments. So physical products, those get shipped, right? Downloads, those do not get shipped. So a download would be you pay for this and you instantly get a download link, nothing gets shipped. You don't have to worry about UPS shipping rates or any of that. Subscriptions. Let's customer subscribed to your products or services and pay on a weekly, monthly, or annual basis. So 658 a month times 12, that is the a $199 annually that we saw earlier. That is a premium plugin. $16 seems trivial for the subscription functionality. So if a business has that recurring revenue, then that would be a minor expense. But otherwise that one seems pretty expensive. So there's a market for it if you need the product, but otherwise we can uncheck that until we absolutely need it. Memberships, same thing, a $199 a year. Members access to restricted content or products for a fee or for free. So this restricts certain pages. Like let's say you have a course, let's say you have a, an e-book or something now, you only want to give your members access to if they have paid for that access. So much like subscriptions, there's a time and place for that. If people are paying 50, 75, 100 dollars or whatever for access, then that 658 per month seems seems trivial by comparison. So again, if that revenue stream is there, then yes, of course we want this plugin, but until then, we'll keep that unchecked. Bookings, allow customers to book appointments, make reservations, or rent equipment without leaving your site. Another wonderful plug-in for websites that need to take advantage of that bundles off our personalized product bundles, bulk discount packages, and assembled products, and allows you to bundle together some products and there's a time and place for that if you need it. Customized products offer add-ons like gift wrapping, special messages, and other special options for your products. For this test, we will just check the physical products and the downloads boxes, so we're not charged anything extra. Tell us about your business. How many products the plane to display, let's say this currently selling elsewhere? No, we're not currently selling elsewhere. And we're presented with a few optional plug-ins to turn on an integration with Facebook, integration with Mailchimp, and with Google ads. So all of these are marketing tools. Facebook, I want you to run ads. Google wants you to run ads, and then Mailchimp bunch you to grow your marketing list. The following plugins will be installed for free. Facebook for WooCommerce, Mailchimp for WooCommerce and Google ads. Let's keep those on. Continue. Choose a theme, choose how your store appears to customers. We already have our theme and we like it. Continue with my active theme. No need to install another one. Enhance your store would jetpack and WooCommerce services. What does that do? Then allows you to have store management on the go with a separate app. We don't necessarily need that. The second one, automated sales taxes through Woo Commerce services, that ensures the correct rate of tax is charged on all your orders automatically. And it also includes shipping labels. So I really like that feature. Basically phones the WooCommerce servers and spits out a current accurate tax rate that is convenient and improves beaten security. Not a huge fan of that, because we can do that with better plugins. So I'm going to say yes, just for the automated sales taxes. Yes, please. It's loading. It's loading. Woocommerce is being installed, those plug-ins are being installed. And what do we have connecting your store? So they're wanting to connect this to my Wordpress.com account. So you can create a new account. You can sign in as a different user. You can do whatever you have to do to get this installed. In this case, let me click Approve. Since I already have a wordpress.com account. This is connecting my WordPress.com site and my WooCommerce. And here we are. We're back on our WordPress admin. Welcome to your WooCommerce stores online headquarters. All right, Good stuff. Personalize inbox full of rho relevant advice and extra analytics data. Once it go, what do we have here? We've got notification to set up our Mailchimp, which is email marketing, a free e-mail marketing service. And we've got WooCommerce services, which wants to set up our text calculation and payment processing. Over here, we need to finish our setup by adding products, by setting up payments. It's ending up texts, shipping and personalizing your store. Store overview. Right now we have 0 sales, their orders or visitors in 0 views, which doesn't surprise us. But once we start getting orders, that will be a convenient way to see our stats. So let's finish the setup. We've done store details. Let's add a product. You can add manually, you can import or migrate them. The cleanest way is to add manually. Add them from scratch. Let's call this my first product, product description down here. Description. Next, product type. And choose the type of product. And do simple for most physical goods and services. Variable for complex things like if you want to drop down for the size, small, medium, large group products, for grouping several simple products into one and external products for linking offsite. So we'll stick with simple product. Virtual would mean non-physical as a service that does not need shipping. Plenty of use cases for virtual, and basically it just bypasses shipping and then downloadable. This is where they pay and they get a file download. You check that, and you can upload your file. And then there's the price, say a $199 part of short description as a brief summary, product images, product tags, product categories, Let's say t-shirts, and publish your product. Hour ride. There we go. Downloadable, it's unchecked. The virtual will bypass takes out the shipping from the side here. And that adds it back. We've got the price, we've got a option to do a sale price, and you can even schedule that got inventory. Woocommerce has the ability to manage stock. That can be really convenient shipping, you can enter your weight and dimensions and that will enable the shopping cart two, calculate a shipping cost. Linked products to upsell and cross-sell attributes. Attributes is a nice way to add like sizes. Whatever you might want as a dropdown before you add it to the cart. Like let's say sizes, T-shirt sizes, small, medium, large. And to do that, we will need to change it to a variable product. And then variations. Before doing that, you need to add some attributes. Got it. Used for variations, save attributes. And this will let us have a different price for each t-shirt. Create variations from all attributes. Are you sure you want to link all attributes? Yes, we are sure this should give us three options, each with a different price. This beach are definitely comes in handy. I use this one quite a bit because most things you purchase do have a drop-down and an option before you add them to the cart. Here we have three variations, small, medium, and large. And each of them as for the same options that we already put in. And just in case the price is different, which a lot of times it is, let's say 129 for small, 149 for medium, and 169 for the large. Save changes. And go to the top, we'll publish our first product. Excellent. I haven't customized how this page looks yet, but let's just see what the default is. My first product, we've got no picture yet. Got the price sizes drop-down, and that selects what the price is. Add to Cart button and description. We can customize this to our liking by altering the design, but for now that is the default. What else do we have? We go into Woo Commerce, WooCommerce settings. Let's look at a few more things we need to pay attention to. We've got the store address, got what we're selling. Taxes enabled, tax rates and calculations, coupons. Woocommerce does have the built-in functionality to have coupons. Also got, well, let's save our changes. Also got products, shipping payments. Let's click through these products. This is your shop page. What to do when you click Add to cart. The weight unit, change that to pounds and the dimensions two inches enabled product reviews. This allows people to review your products and rate them. How about taxes? Enable automated taxes? This will phone the servers of WooCommerce and return with a accurate tax rate and price. It's basically all we need to look at their shipping. So the default shipping, once you to set up your zone. For example, USA, select all regions within this zone. United States. And we're gonna say flat rate. We got free local pickup or flat rate without adding any third party shipping methods. So flat rate, press Edit and we'll say 10 bucks flat rate shipping for anywhere in the country. Simple enough. All right. And that has been added. Payments. Let's see what is built-in to WooCommerce, direct bank transfer, check payments, cash on delivery and PayPal standard. So let's check PayPal standard and see what the Setup button does. It once our PayPal e-mail, so it knows where to send the money to receive your e-mail, identity token, invoice prefix. And you can add the API credentials if that's the way you want to integrate your PayPal to process refunds via PayPal. So this is the simple version. This is where when you click checkout and pay now it takes you off your website onto PayPal.com. There are options with less friction. For example, the stripe plug-in or the WooCommerce payments. But this works because a lot of people do have PayPal accounts. For a more professional solution. I recommend one that takes the credit card directly on the page. But again, this does work. Accounts and privacy has the option to require people to create an account when they are checking out. And some privacy options at the bottom, especially for GDPR over in Europe and the countries that are under GDPR privacy regulations, e-mails. Here we can set the emails that go out when an order has been placed, when an order is canceled, failed on hold processing completed, refunded, an invoice is sent, customer note reset, password or new account. So when an order has been placed, this is what the customer will get. Processing order. Your site title order has been received. Thank you for your order. Thank you for using our website. And boom. That is the email that somebody would get and it would include their inform their order information, their name, what they ordered, the price, all of that. So let's see how the e-mail templates look by default. By default, they will have the title up here. They'll have that background color right now it's the purplish color. And they'll have the contents of the e-mail and a slightly gray background over a white body content. So what did we have the ability to change? We can drop our logo in here and copy and paste the URL to our logo. I can change the footer text on the bottom, can change the base color, and the background color, the body background and the text. Let's do that and we'll see how this looks. There we go. So we would ideally want to put our logo on there. We wouldn't want to alter it to the branding colors of the brand. And that's about it. Right? Moving right along, integration. Max mind. That's a really simple way to use the geolocation services. And you can read the documentation here on that. Advanced. A few advanced settings such as mapping the cart page to checkout page and the My Account page. We'll look at that in just a second. And then the meantime, I want to draw attention to this. Your store does not appear to be using a secure connection. We highly recommend serving your entire website over an HTTPS connection to keep customer data secure. What does that mean? We need to install an SSL certificate. That's not really optional on an e-commerce website. You have to do that. And we talked about that a few lessons ago. It's really quick and easy, not difficult at all. And once we do that, this message will go away. And we can rest assured that the sensitive information that is transmitted on an e-commerce website stays secure, such as the credit card, the name, the address, the phone number of the person making the payment. Now let's go to Pages and see what has been added. We've got a cart page, checkout page, my account, and Shoppe page. All four of these have been added. They are distinctly different. Shop is where you see your products. Let's look at that. The shop page. Now we just have the one product and no image added to it. That is our shop page that lists all of the products. My account has your orders, it has your addresses, downloads, account details, all of that. I would normally style this page, make it look a little prettier. But the default functionality is quite handy. We have a we can't be the checkout page since we have nothing in our cart, but we can view the cart page and it just shows the shopping cart is empty. Let's return to shop. Open up this product, click Add to Cart, and see what the default functionality is. And we go, my first product has been added to your cart, view cart. And boom, there we go. The default WooCommerce out of the box does have cart and checkout functionality, which is awesome. You save so much time not having to code this yourself. I know coating and I'm telling you this is a very advanced features and with WooCommerce out of the box, you don't have to worry about any of that, just turn it on and start selling. But I do recommend that we go in here and we pretty up the page. So how did we do that? Well, first of all, let's go into our cart. Well, first of all, let's change that green. I can't stand looking at that green anymore. So we're going into Theme Customizer, buttons, button style. Change that to a orange. All right, looking good. There we go. Good. So how do we change how these pages look? If we click edit page, notice what happens. And it'll take us to a page that is not using the Visual Builder and it has a short code. A short code is a little embeddable piece of code that places content on your page. In this case, the little short code is WooCommerce underscore cart. And what that does is it denotes that in that spot, the page we want all the cart functionality to go. We can add that short code to any page, but we'll commerce has already got started by creating the page and putting that short code in there for us. What else do we want to look at here? If we click Update and we go into theme builder, we can change these default pages. Remember when I said that the theme builder would really come in handy for e-commerce sites. What did I mean by that? Let's click Add New template and go to cart, WooCommerce pages. Heart. Let's do shop first, right? Let's do a custom body for shop. Build custom body. So this is altering what the shop page looks like. Instead of the default, maybe we want to use dBs version built from scratch. Let's do add new row and then WooCommerce shop. Not like the way he lays all this out, as we know, that he does a good job making everything look nice and the shop functionality is no different. We have the content design and advanced tabs, which we're familiar with by now. We can censor things. We can change the size. Price, let's make the price a little bigger. Make it bold. There we go. So what we've just done, we can click Command S on our keyboard or Control S on a PC. Click the X and save changes. That will edit the shop page across your website. So let's go into our site and press on the shop button. Oh, another thing we see up here in the corner is the checkout. A nice checkout icon and text has been added to the corner there in the secondary menu. So we're going back to, let's do a few things here. Let's add shop to our main menu. Menus and shop. Let's add that to the main menu. Add to Menu, and add that before the contact. And while we're at it, let's go ahead and add a picture to that product. And then we'll see how it looks on the website product image. Let's do one of the default ones here from that Devi layout that we had imported. And we're going back to our website. Here's the shop page. And boom, there is our product. Looking nice. I'll click my first product. So you can have multiple columns on that page. You can have multiple products. You can limit it to 12 per page, 20 per page, whatever you want. And there's a lot of customization that you can do there. Looking good. There's our picture. There's the Add to Cart button. Let's get rid of the sidebar here. We can just open up the Visual Builder to take care of that. Visual builder is loading, and I'll click Save and exit Visual Builder. Now we can go back to Edit product. And we have a devi page settings. We want full width. Instead of showing the sidebar. I'll show you a few options here. First off, let's see if that removed the sidebar and then we'll go into theme options and view a different way of doing it. There we go. That sidebar is gone. The sidebar poured from appearance widgets and as a default feature of WordPress, but I don't think it's necessary to have it on the website, especially since it's a default WordPress functionality. And it just looks like the designer didn't take time to customize the website. In my opinion. Now in Divi theme options will notice this one makes more sense to us now, sidebar layout, left the right sidebar, but look at this shop page and category page layout for WooCommerce can change it from right sidebar to full width. And that would remove the sidebar from the shop page. Let's look at a few more of these that we might use in the theme builder. Add new template. There is, there's a lot of options here and you'll come across when you need the functionality. Do we have product category pages? We've got the shop cart checkout and my account got all products. You can change the universal global layout of all product pages. The archive pages, products in specific categories, products with specific tags and specific products so that the inbuilt are really comes in handy when you want to fine tune how those pages look and make sure they are at their best. Let's change the cart page so it doesn't have the sidebar. Build custom body. And we'll add that short code so it will give us the cart functionality. I like to use it the builder just to fine tune how the site looks. Insert row. Let's do text and put our short code in here. Short code is denoted by the brackets. Woo Commerce underscore. The functionality that you're looking for should be WooCommerce underscore cart and then a closing bracket. And that means we want the cart to show up. So why do this one? It was already in the default page. Well, maybe we want to add page settings, add some custom CSS to the page. Maybe we want to add a header to the top or add something to the bottom. There's plenty of reasons why we might want to customize the cart page. Even though the default one does look nice. Click on cart in the corner, and there we go. The sidebar has been removed. Let's do one other thing. I like to make this center cart totals. How do we center that? Let's see if that can be achieved with a little bit of CSS. We're going back into theme builder. And let's open up the cart page and add some CSS. Several lessons ago, we briefly looked at CSS and remember when we right-clicked and went to inspect and we pulled up the Google Chrome Inspector. In the middle we have HTML. On the right, we have CSS. Let's see how we can change the width of that section there. So I looks like what's restricted to the 50 percent on the right is div class cart totals here. And what's making that so restrictive? Here we are float, right? So float means it's sticking to the right. Float right, and width 48%, which means this section is 48% of the section it is within, which is the full width of the page. So cart total is 48% of cart collaterals, which is what we see here. So let's see if we can make that bigger. Let's say bring it up to 75 percent, Change, float to none. That moves it to the left. And let's add some basic CSS. Text align, center, align to in the center and then margin auto to center it further. Now remember when we were making css edits and when we use the Google Chrome Inspector like we did just now, that is a completely non-destructive edit that is not published. There's only for us to see at this moment, if I refresh the page, it would already revert back to what it was. So we need to copy this CSS selector. We'll open up our Divi options here, go into Page Settings, Advanced Custom CSS, paste that selector and then just paste the four pieces of CSS that we want to show. This will override the CSS that was already there. We click save. And there we go. Or making a very basic CSS edit, Let's refresh the page. Take out the inspector. And boom, it is now wider and it is sintered. So just one little minor tweak a little piece of CSS, Two minutes of work, and we just made that a lot more attractive to look at. So all of those little subtle nuances add up to create a polished website. So what did we do so far? We installed Woo Commerce, we added a product, we added a drop-down menu. We ended a jot down pricing selector. We added our shipping cost, which is $10. We connected the automatic text calculation and we are ready to take orders. All we needed to do is add an SSL certificate, and boom, we would be ready to go. We also connected with PayPal so we could accept payments through the secure PayPal payment gateway. One final thing Let's look at is reports. With the reports you can view the sales, the orders that have been placed in the past few days, the past month, the past year, which is a great way to keep track of everything. You can even see what your most popular products are, your most popular categories, coupons, downloads, all kinds of goodies available in the report section of WooCommerce. So out of the box, WooCommerce has some awesome functionality. I highly recommend and WooCommerce, I love their software and simplifies the cart and check out processes that my account, which would be a lot to code on our own and we don't have to do that when we install WooCommerce. Now I do recommend spending a couple hours and polishing the design. Going through each page that WooCommerce created, going to reach setting and personalizing it to your client. Taking a few hours and doing that will really take your WooCommerce e-commerce site to the next level. And I totally recommend all those little subtle nuances and design improvements to really polish your product. We want your website to look as awesome as possible. Build the best possible website. And to be clear, you are being paid to do that. So your client will expect that you give them a ready to go polished functional website that is both functional and beautiful land. And we can achieve that using WooCommerce, the number 1 WordPress e-commerce solution available. So what did we learn? E-commerce is possible, but WordPress, thanks to the Devi theme and the WooCommerce plug-in. Woocommerce is WordPress is number one most popular e-commerce system. It allows you to securely sell products and manage orders. And what's our homework? Please review to WooCommerce.com website. Install WooCommerce on your own website. Install, playing around with it. I'm Leighton. And now you know how to build an e-commerce website. 15. Building Mobile-Friendly Sites: Welcome. I'm Leighton, your webmaster. Today we're going to make our website mobile friendly. Now how important is middle? Well, have you ever visited a website on your smartphone? Of course you have. More importantly, when you do browse the web on your phone, have you ever come across a website that clearly was not made for the small screen? Perhaps you had to zoom in just to read something where things were difficult to tap on. Where you tap the wrong thing, you need to keep tapping the back button. Your blood's probably boiling. Just thinking of that, these pain points cause frustration. And frustrated visitors rarely become customers. And speaking of customers, about half of all online shopping is done on mobile devices. So yes, it is wise, it is economical to support mobile. And in business terms. And when you're trying to sell a mobile site to a potential client, you could reinforce the fact that it'll pay for itself. Not having mobile could cost you in the long run. So benefits not facts. I repeat. So benefits not facts. So you want a mobile friendly site. But how do you go about building one? Well, it has to be optimized for the small screen. For example, what a hiker wear flip-flops on a trail. I sure hope not. Those are perfect for the beach, but for hiking, you need the shoes that had been optimized for that activity. The ones that are most friendly to your feet. In a similar way, to optimize your website, you want to make sure it's friendly to all sorts of devices, to desktops, tablets, smartphones, each needing a design tailored to the appropriate screen size. To accomplish that, we do what's called responsive web design. And before we dive into our website, let's define a few key terms. Native mobile app, often confused with a mobile site. Native mobile apps are the ones that you download from the App Store or Play Store. We are not referring to those in this course. Those are created with separate tools and coding languages that are, in my opinion, more difficult to learn then building a website. Mobile friendly site. This is the buzzword that Google uses. A mobile-friendly website is one that is friendly to the mobile devices. Mobile friendliness can be achieved by having a separate mobile site or by using responsive web design. Mobile site, a separate website, specifically designed for the smaller screens. It's typically access with a separate URL, sometimes by adding m dot before the domain name, facebook.com. We're seeing less of these lately with the rise of responsive web design. With a separate mobile site, you have to update your content on both your desktop site and your mobile site, which can be an extra hassle. Responsive web design. This is where your website is designed to respond to any screen size. You don't have to have a separate mobile site. You only have one website to keep up with. In fact, Google's own developer resources. Google recommends responsive web design because it's the easiest design pattern to implement and maintain. This is the gold standard technique that you will use to build mobile-friendly websites. So with all that clear in our mind, Let's start designing a mobile friendly site. So we'll look at a number of things. But first, I want to visually show you what responsive web design is all about. So we're in the Chrome Internet browser and let's go to the developer tools. Again, you can find developer tools and most any browser. Let's go to Developer Developer Tools. Now, let's move this over to the side, just so we'll have more room to look at the website itself. Dock to the right. All right, we'll push that out of the way and let's click this button. Toggle device toolbar, also known as responsive web design. So here we can change the screen size of our viewport. So let's go smaller, smaller, and larger. What do you notice as we're doing this? So basically we're looking at a laptop and a tablet view. And as we get smaller, we're seeing how it would probably look on a smartphone. So what do you notice about the content? Responding or adapting to the particular device size. How about this? We see one column here, but as the device gets larger, we have more viewport, more size. What do you see? Three columns. Desktops typically have 2345 multiple columns. But smartphones, you rarely see any columns because there isn't room for that. The content only allows one column. That's one of the biggest takeaways will see on a mobile device is that most of the content is in one column and it fits the full width of the page. As we can see, this Devi layout that we downloaded, the coffee shop theme is already responsive because it looks really nice on the smaller size. But it also looks great on a larger size. That is a well-designed, responsive design. Now how do we get to that point? How do we edit this website through the Devi Visual Builder? Let's close out our Chrome tools and hop into the Visual Builder Enabled Visual Builder. And we'll look at a few different options here. First, we want to look at the bottom corner here. We'll click the purple three dots here. And let's look at the corner, the desktop view, the tablet view, and the phone view. So we're starting off with the desktop view. We're already on that. Now let's look at the tablet view. Devi, the Visual Builder is shrinking the viewport so that you can preview how this design would probably look on a tablet, on each exact tablet and what brand the tablet is might change things slightly, but we're generally certain that this is how it would look on a tablet. In portrait mode, not in landscape. So up and down. Now how would it look on a mobile device that's going to be even smaller than the tablet. On a vertical or portrait side, tablet or smartphone. This is how it would look similar to the tablet view, but just a little smaller. So that's previewing how it would look on different screen sizes. How do we edit? Let's see. So we'll go back to the desktop view. And I want to draw attention to something in the design section. So let's go to this button. We'll click Module Settings and go to tab design. So every one of these options has a responsive and design setting. So if we click this little guy, then we'll see how it would look on the desktop, that tablet in the phone. And we can change the alignment. In this case it's alignment. We can change the alignment based on what device we're using. So maybe we want to align left on the desktop, but not on the tablet or mobile. Maybe we want to center it on the tablet. There we go. If we sent or something just on the tablet, It's also going to apply to the smaller devices to, so it will apply to mobile. But what we just did will not apply to desktop. So when we check out of that, it goes back to left alignment. Let's do that for the text as well. Design text and we'll change the alignment to centered on tablet and mobile. Left align on desktop, tablet, we're going to center it. And that applies to mobile as well as we can see here. Looking good, maybe the title doesn't fit on a certain small screen. In the mobile devices, you don't have as much room for large fonts like you went on a desktop. Maybe we have to change something for the smaller size. So let's do this. Coffee house looks great on the desktop, right? But what about on a smaller device? Let's change the heading, the title text. On smaller devices. So let's preview how it would look on a tablet. Looks okay. Maybe we'll shrink it just a little bit just to be safe. We certainly want this to show up on one line. And on the phone. It's already shrunk to 40 pixels. The Devi layout did that automatically. Let's take it down a little bit more. What about the subtitle here? The line-height just doesn't look good on the mobile and low too much space between the lines. So let's change the line height just on the phone. Beautiful. While we're at it, let's change the font size as well. Right? Now, how does this look on the mobile? There we go, looks a lot better. And there we censored this section on mobile. Ideally, we would want to scroll from top to bottom of the website and just optimize every design element to make sure it fits each of those three. Make sure it looks beautiful on a desktop, beautiful on the tablet, and beautiful on the mobile view. Once we're all done with that, we can click Save. We can exit the Visual Builder and look at it on her own device. How does it look on my computer? How does it look on my tablet? And we can pull out our smartphone and see how the website would look on our own smartphone will be in this section of our browser quite a bit. The Inspector. And I like to wiggle this, this viewport and see how the design looks on all different responsive layouts. And if there's any glaring issues, then we can go and back into the Visual Builder and correct them. And otherwise, this is a great way to make sure it will look beautiful on all screen sizes. And that is the essence of responsive web design. Building a beautiful design that responds to all device sizes. So what have we learned? We've learned one, mobile friendliness is required for a successful website. Do responsive web design ensures websites are optimized for all screen sizes in three dBs built-in tools let you fine tune your designs to fit all standards green sentences. And what's our homework? I want you to check out your website on your smartphone, optimize it to your liking within Devi, played around with Chrome's Developer Tools to see how responsive design works on various websites. By now, you've seen how to design when you start with a blank slate. Go from layer. That's what we'll consider in the next lesson. I'm Leighton, and now you know how to build a mobile friendly website. 16. Where to Find Design Inspiration: Welcome, I'm late to your webmaster. In the last lessons, we learned how to build a website using Divi and the WordPress software. Might argue that building a website is easy. Knowing what to build. That's the challenge. Art. I mean, where do you even start? Well, think of an artist with a blank canvas. Where does the artists go from there? I can just start designing, see what happens, or look around for inspiration or what other artists have created. For the art of web design, you can do the same for your website. In this lesson, we'll consider how to find inspiration for the design, color scheme and fonts. First, design, one of my favorite places to start is the competition. Let's say you're building a website for a local plumber. How do weather plumber websites look? Let's see for ourselves. Let's start by looking up plumbers in the major cities like say Miami, Florida. We're doing this with the assumption that companies are competing for page one of Google in the major cities are probably tapping into higher marketing budgets. And higher marketing budgets could potentially mean higher into websites. Not a cut and dry rule, but that gives us a starting point. What did we find here? 50 plus plumbers nearby in the sponsored section, Let's open up some of these. As we scroll down, we see more ads. Top five, there were ads actually see some local listings. And we'll open these. This is Yelp. We'll skip that. Here's another company. Another company. I'll usually open about 30, 40, maybe 50 of these, and quickly browse through them. We're back to the ads. Open these up. And there we go. That'll give us a nice starting point. So as we look at these websites, this is the Google local listing fee. If we can find their actual website. No, we cannot. So we'll skip those. And here's our first website that pops up. They showed up near the top of Google. When you search for a plumbers in Miami, Florida, they probably have a higher marketing budget. And what do we notice about this website? So I'm not going to publicly criticize any of these websites that we look at. But I want you to think about what you see when you look at this website. How do you feel as we scroll through it? Do you feel like this is a well-designed website or do you feel that the design is lacking? Is it simple? Is it easy to read? Can you tell what they're trying to bring your attention to, such as this colon now button. Do you know what they do? Plumbing services and Miami, Florida. They're very clear about that. So beautiful website. Moving right along. What do you see on this website? How does it compare to the last one that we looked at? Does this one look like it was built a few years before the last one we saw. What did we see about the year that this review was written? Does that give us an idea on when this website was built? How do you feel about the colors? And you feel about all the texts? Are you reading this text or are we just skimming, skimming over it? Continuing on. This one has a lot of pages, a ton of pages that can be good for search engines. Obviously, they're showing up on page one, so they're doing something right? But what do we see here? We see videos. They've got they've got some videos that they've published on youtube videos or key nowadays. So they're doing that right? It's a great market to tap into Nicely done. And that can be another traffic source for them. They can pull traffic from YouTube, people that are searching on YouTube for plumbers in that area. They do have a lot of words, a lot of content. Consumers might not read all those words, but Google will pick them up. Google definitely knows what they do considering the words pump and plumbing and Miami are all over this page, including commercial and residential. Moving along, we see a parallax background here. Very clear title, we see an opening video. Oh, nice full screen introduction. Leaks or any other water emergency, it's no fun. Can find your home or office and really in your property and its content and only a few hours if you're experiencing and emergency or suspecting really impressive introduction video, they're doing that very well. How do you feel about the design? You've got reviews. The reviews are being pulled from their Yelp. And they've got a few different service pages. And that's this website. Next up, we see an opening animation with this nice slider. What do you think about the color scheme here? Do you think these colors are working together or are they competing? Now badges are handy. They've got BBB and Gs, and a few other badges here, expertise.com. So that's giving them credibility. It's good to have those badges to show people that based on the bed you can be trusted. Alright, What else do we have? Not much design here? And what do you think of the background colors as this easy on the eyes or is it a little little bold? Those we look at these websites, want you to think of what you would like to emulate when you're starting your website design project in what you would steer clear of shop these websites as a consumer, but also as a designer. How do you feel as a consumer when you see these sites? What can you take from it as a designer? One thing we'll notice is this one is powered by Google. This is a Google My Business site. There are also GoDaddy website builder sites. There's Wix sites, there's Weebly sites. This means very likely the owner of the website build it, build it himself or herself. It's a do it yourself website. So another market we could tap into here is redesigns. So these already have existing websites and they are do it yourself. So maybe they built their own website when they're first starting out. But now with a few years under their belt, they might have a higher budget and can put a little bit more money into their marketing. Maybe that's the opportunity for you to swoop in and offer your website design services to redesign a do it yourself website. Very typical for a company to get their own website with those do-it-yourself sites, and then a few years later to invest in a professional quality website design firm. So again, as we see, websites that are in the same industry as a website that you're building. I want you to think of how you feel as you scroll these websites. What would you like to copy? Maybe you like that static background there. Maybe you like the design. Maybe like the topography. Maybe you can take a bet grown idea from one website. Take the font from another website, take the clean, modern look from a different site. Take the badges from another one. You can pick and choose different strengths of each website and build your own site off of that. We're not copying these websites, we're just using them as design inspiration, either for what to do or what not to do. Additionally, you can look up other quality websites that aren't necessarily in the industry you're designing for. Why might you do that? Let's answer that by looking at a few examples. So I've handpicked some world-class websites here to show you. First, we can't talk about digital design without looking at Apple. They hire some of the best designers on the planet. And let's see what we can learn from their website. First off, their menu is very simple and clean. They can take you to the Mac, iPad, iPhone, watch TV, music and support. They have a search icon and they have a shopping bag icon. The opener as two words, App Store, the title of what they're featuring today, and a two sentence subtitle, the apps you love from a place you can trust. Obviously, a ton of thought is put into those two sentences. And there's a learn more button and a eye-catching image of different apps. Below. As we scroll down, the background changes, which we understand to mean we're switching gears to a different section of the page or leaving the App Store section and going into the Apple Watch 6, the future of health is on your wrist. Beautiful image of the apple Watch and two links. Learn more and by we keep scrolling. Find yourselves on a another new section, this one for the iPad. Powerful, colorful, wonderful. Another two buttons learn more and essentially by link and a beautiful image. So we're already noticing some trends. See a very crisp, clean layout. It's unobtrusive. There's not a bunch of content, not a bunch of text everywhere. It's very precise, very purposeful. We see a title, a subtitle, one to two buttons, and an image on each of these sections. You see that? Do you also see how these first few sections extend from the entire width of the page. So what does that mean? They're drawing attention to these sections. They're wanting you to pay attention to them. What do we see as we scroll down? These are no longer full width. They are separated into two columns. So subconsciously, that is denoting that these on this particular page are of less importance than the pieces of content above. The most important goes to the top and the least important will be on the bottom. Obviously what you see here, our money makers, but they're not pushing these products or services as much as what you see above. Very clean layout. You'll find that across all of their pages on the entire website. And you'll find that on their actual products and services themselves. Anyone looking for a modern, clean layout with a no nonsense design can draw inspiration from the Apple company as they have designed some of the world's best products and services. Now, for a more bold layout, Let's look at this website, B and I.com. This is the world's number one referral and networking organization. I happened to be a part of them myself, and they went through a major brand refresh in the past year. So they're topography got bolder and got more, more clean, more modern. They're red, they're drawing heavily on that red, which is a power color. It definitely draws, draws you in. And as we scroll down, we see their brand is consistent. We see bold headers, bold titles. We see the red throughout. We don't see any other colors because they're sticking to their strict branding guidelines, which in this case is red, bold titles, bold links. And we've got a call to action here. Our eye is obviously drawn to this section because the one before it and after it have a white background. But this as a red background which draws you in. Our eye is drawn to a few things here. The title, DNI, the logo, the final chapter in the corner, since that is the only red button here. Yeah, there's our black or white and the call to action here. So obviously they're trying to get you to join the organization, find a chapter. Is there a way of basically getting you to sign up? If you find a local chapter, you can consider joining 12. They are drawing your eye to the part that will allow them to close the sale. I love this brain refresh. I think they've done a fabulous job. It's very bold, very modern, and it definitely commands attention. Now, let's look at a different one. Let's look at one that's a little more subtle. This one's a little closer to what you would find on Apple. This is squarespace.com. It's a beautiful Do It Yourself website builder. I love Squarespace. I think they've done a wonderful job with their designs there. So modern, they're so gorgeous and they're known for that. Out of all the website builders out there, squarespace is known to be the most attractive. Now in terms of what do we use them over WordPress, I would say no, just because with WordPress you can do far more customization then you would get with Squarespace. Squarespace does make it super easy to build a beautiful website, which we commend them on. Their websites are known to be very clean. Have a fabulous opening image like we see here. A simple title and simple unobtrusive menu buttons and call to actions. Notice in the top right corner of these designs we have a call to action button. So your eyes drawn to that book class. Donate. Yeah, Very well done. See how it works. So as we scroll down, we'll continue to see that trend of a separate background color denoting. We've moved on to a different section. Here they're introducing how their website builder works. And we notice beautiful, subtle, fluid animations throughout. As we scroll down the page, we see how the content fades into action. All those little subtle nuances are just amazing. We can definitely draw inspiration from that. As long as the animations makes sense, they're not overdone their purposeful. We love animations, and that can be a great subtle nuance. We don't want it to take command of a page, but we can add it as a subtlety. You also notice how as we scroll down the color flows, each section has a kind of a different color scheme here, but it works. They've purposefully and strategically pick their colors to go together. For example, what you see here, our skin tones. You see variations of tan and brown. And it all works together. See a nice black and white color scheme down at the bottom here. And the font is easy to read, which admittedly can be difficult to do when you have a black background, but they make it work by using a fairly bolder font than they would otherwise use if they were typing on top of a white background. You see how that's easy to read. And you see how you don't have to squint. You don't have to wonder what's being written here. It's all very easy to read because they have purposefully chosen the correct fonts and typography. The bottom we have the call to action button, huge letters ready to launch. And what is your eye drawn to hear what two buttons? The Get Started down at the bottom and the get started that was at the top all along. That was purposefully chosen to get us to go down their sales funnel, to get us to purchase their product or service. In their case, I want you to get started by building your website and hopefully move you up to a paid plan. So what did we find on the Squarespace website? We find a nice, clean, modern design. It just flows. We know we're on the same website as we scroll down, as we move to different pages. And squarespace has some beautiful, subtle animations. So I totally recommend drawing inspiration from a website like this. Learn it, and see what you can implement from a design like that. Now this is a real treat. This is BlackBerry mountain in Tennessee. Absolutely phenomenal website. Let's refresh it here to see how it loads. As we scroll down. Notice what happens. I'm scrolling my mouse and we see a fabulous parallax effect, a background image. Let me click the menu over here. Oh, does amazing. To see the menu pops out from the side. It's got social media links down at the bottom, we see animations over here. Let's refresh. And as we continue to scroll, we see the background photo inside this font, which is an amazing effect. We see the leaves are staying fixed in place as well as the feather. We see high-quality sharp photography. We see bold typography, easy to read. It's not overdone with too many words. And we see the menu and the call to action button at the corner change color as we scroll down, do you notice that? It's now white and now it's a gray. Is a wonderful little feature there. Keep scrolling. You'll see more animations as we hover over the button. We look for content to load as we move this slider. Plenty of animations that are very well-designed. Do you notice this leaf over here? As we scroll? It rotates a little bit. Very subtle. We love subtlety. That's website is phenomenal. There's a lot we can learn from it. We learned the importance of high, high-definition photography. We learned the importance of texts that is very easy to read. We learned subtle animations and we learn the parallax effect, which is where the background moves a little as we scroll the mouse. You've surely seen that on different websites. So this website is absolutely a treat to navigate. And hopefully it will convert people to make a booking. One more website, Let's look at my favorite payment processor, stripe.com. They're known for having a fabulous design. They always have from day one and they are setting the bar when it comes to the design of their service, their payment service and their homepage itself. So they were one of the first to do a gradient in the background at the top. And now they haven't animating, which is so subtle, so gorgeous. I have attracted the acclaim of developers and designers across the world. So clean, so simple. They've got large images, high-quality. I've got some animation here. They're following their purplish color scheme with a splash of some other colors. Stripe has always had a very colorful layout. They start with their purple and they've added a few other colors from there, such as this teal. And they just really make the colorful layout work. It can be difficult to make vibrant colors work. Stripe is one of the few companies that does it well. And we can learn so much by looking at Stripe. We learn not to fear color. If it's done purposefully, It's done elegantly. We learn gradients. They do gradients very well. And we continue to learn animations and high-quality images are key for a website. And finally, separating sections with a new background color, a contrasting background color is a wonderful trend that allows us to break up the design and subconsciously tell your eye, we are moving on to a different section, a different piece of content here. So looking at these world-class designs can serve as such awesome inspiration. We'll learn a lot more from these websites then we will, from the local small business websites. But I would take all of that into consideration. As you get inspired, look at the web, look at different websites, whether they be small, medium, or large size businesses, or inner prices. We can learn from websites of all levels as you look at them. From a designer's perspective. Look at them as a consumer, but also as a designer and see what you can learn, see what impresses you, what you want to imitate, and what you want to steer clear of. Having looked at those brilliantly designed websites. What can you learn from them? Well, if you're learning art, whom do you study? The amateur Artists are the famous ones. If you want to be good, learned from the famous ones. In fact, watching and copying experts is one of the most effective ways to learn any skill. So when you look at other websites with a critical eye, you can train your eye to separate quality from crap. Focus on quality, book market, save it, learn from it. So when you're designing a website for your client, you'll have plenty of beautiful websites to choose from. And if you're still feeling a little guilty for shopping around for design ideas. Think about this. When you set forth to build a house. Do you build a 100% unique house that doesn't look remotely similar to any other house in history. Highly unlikely. In fact, one of your first steps is to decide whether you want a Victorian home, a farmhouse, a two-story, a one story, et cetera. Remember, it's not plagiarism, it's inspiration. And what else goes into planning a website? Color. One thing I have studied extensively over the years is color theory. Basically, different colors evoke different emotions. For example, what comes to your mind when you think of purple? Blue, red, yellow, green, purple carries the idea of royalty. Blue is associated with technology and professionalism. Red and yellow are hot colors that encourage impulse buying and quick decisions. Green is associated with both money and nature. What does that all mean? Well, if I'm planning a website, probably landscaper, I'm probably going to be reliant on the color green. I want people to feel like they're on a landscapers website. Photography sites are often black and white. So you can focus on the photos. Tech companies tend to use the color blue on their websites like Facebook, Twitter, LinkedIn, etc. You will see trends like these across several websites within the same industry. Now, if we're taken on a client who already has a logo, you would just use a color picker to find the sixth digit hex code of the dominant color of the logo. We want to build a website that fits their brand, right? So the colors need to look the same across the logo, the printed materials, the website, to social media. And if you're helping them with their branding, make sure their logo and colors are the same on the website and all social platforms. We want consistency. So what can help you create a color scheme around the dominant color? Let's look at a free tool, Adobe Color. Adobe makes some of the greatest design tools available on the market. And this website happens to be a free resource. We can use its color dot adobe.com. So through this, we can create a color scheme. So first we'll notice we have a color wheel here. What do we do with this? First? We have a base color. The base color is in the middle, and we're building a color scheme around it. So we're starting out with analog IS over here, which is similar colors. We also have monochromatic triad. Complimentary, which is the one that out commonly use. Split complimentary, double split, complementary, square, compound shades and custom. So let's look at complimentary. So scientifically, we are attracted to opposites on the color wheel. Can you think of anything that uses this color scheme? You probably can. So what I typically do is start by putting my base color. Let's say I have a client and their logo has a green, a base of green. Well, let's say this is our base. And we can use this tool to find the opposite on the color wheel, which in this case is red. We found the exact opposite. And we can just copy and paste these six digit hex code. This six digit code gives us this color. And we can set that as a base color. We can copy and paste the hex code. We can change the lighting a little bit. This is the code that HTML, websites and CSS are going to use to pull the color. You'll get used to seeing those as you look at more websites and design them. The sixth digit hex color code. So what else can we do with this tool? Will look up here at these four options. Color wheel, Extract, Theme, extract, gradient, and accessibility tools. Let's look at Extract Theme. So with this tool, you can extract color from an image. So let's say you're starting a project and either they gave you or you found this photo and you want to build a color scheme around it. It's a beautiful photo. Let's say we're using using it for a landscapers website. We can upload that one file onto this website. And boom, it extracts the dominant colors from this photo. In this case, it pulled a few shades of green in addition to that red. What else can you do? Extract using color mood. Color mood controls the look of the harmonized palette based on the amount of black in the intensity and the colors. So let's explore these different options. Colorful is what we already have selected. Bright. This favors the bright colors, muted, which have more gray in them, deep, which would be darker colors in addition to dark, which is definitely the darkest ones. And none would be no mood. So it really depends on what you're wanting to convey with your website. If you want to bright fun website, you might choose the top ones. If you want a more serious muted scheme, then you might choose muted, deep, or dark, depending on what you're wanting to convey with your website. And once you get to know the brand, you'll understand what type of mood they're going for. Another thing we can do is extract a gradient using science to extract a gradient from this image, we can use that as a background on our website or anywhere else on the site where we need to add a splash of color. Yet keep with the scheme of the design. Here we can click Copy and in one-click, we're copying the sixth digit hex code. We can paste that into dv or we can use that in our CSS code. Anytime Devi asks for a color, it will require a six digit hex code. So you're going to see that quite often, get used to seeing those hex code combinations, which is a combination of letters and numbers. And we have accessibility tools. These are designed to explain whether or not there's an accessibility issue or colorblindness with a certain color scheme that you've chosen. So that can be helpful when you're needing to make your website more accessible. Fabulous tool. It's completely free. I recommend using it to extract a color scheme from a dominant photo. You're wanting to use extract a gradient. Or once you've figured out your base color based on the logo of your client, you can instantly find what color will compliment them. In this case, if we have a green color scheme, the opposite here would be a variation of red. You will use that on your call to actions, on your call to action buttons, and various spots of color that you want to draw attention to on this site. Finally, we have an idea of the overall design and color. But what about the font? How do we choose the right font for our project? Fonts are so important when chosen properly, fonts can subtly evoke a feeling. For example, sans serif. These are fonts that don't have serifs or the little bars on the edge of letters. These fonts can convey modern, fresh, sleek, tech design, et cetera, and they're easy to read. Serif conveys contemporary, professional, traditional experience. Serif fonts have more personnel and he didn't san serif. And you'll commonly find serif fonts in the headers. In san serif as the body. But where do you go for your fonts? Devi is designed to work with Google Fonts. What is Google Fonts? Let's see. Here we are on the landing page for Google fonts, which is a fabulously free, world renowned website that allows us to quickly and easily integrate a web font on our project. So currently there are 103 different font families available on Google Fonts. We can see different categories. Serif, me, show you what a serif looks like. So these are the serif fonts. You notice they look more traditional and they have those lines or those bars on the edge of each character. These are serif fonts. We can also look for exclusively san serif fonts. These are ones without those lines or those bars on the edge of each font. More clean, typically associated with the idea of more modern. We also have display. Rules are a little more unique. They'll stand out more. You might use that as a title font. Handwriting, which is more fun, more custom, more cute, more artsy, more creative. There's a time and place for those. I would not use that as a body font, but you might use that as an accent or a subtitle, or a title. Some of these are really nice. There's also monospace, which I don't use too often or hardly ever. So what do you do with these? So we can select a few different fonts that we like the look of and compare them and install them on our website. How do we know how they might look before we even get to our website? Well, let's do this. Type something. We're going to type. Let's see design inspiration so we can type whatever we're putting on our website and see how it would look in these different fonts. Let's do the more unique ones. Can change the size. All right, Let's say we click a few that we like. Design inspiration. So we found the perfect one. And what do we do? Let's say this one, Abril fat face. It shows you every character that's offered on this font. You can click the download button, but we don't need to do that because Devi already integrates with Google Fonts. So let's open up the website that we've been working on and see if we can integrate this font that we have chosen will go into the Theme Customizer. That's where we pick a universal font for our website. Go into General Settings, typography. And there's two options, the header fonts, which is like coffee house. We believe in coffee that tastes incredible. And then there's the body font, which would be the body text, the majority of the text that's on the site, or the header font. Let's try Abril fat face. And it's loading, it's loading. This one might not show it because it's already loaded on the particular Devi layout. So let's go to a different page, such as shop. And there we go. This has been loaded as the font. For our webpage, Let's try it on the main text as well. You can see how if you have a large bit of information that the ones that are designed to be a header might not look as good as a on a body font. So we need to strategically choose which fonts go well together. How did we do that? How do we know which fonts would look good together? Well, let's try some resources that we can find on Google. So we're going to leave our website and go to Google. Google font pairings. What resources are available? We have a free resource here, Font Pair dot co helps you pair Google fonts together. That looks promising. Let's see what's available as a featured pair. So this shows us the header font and the body font. Heading is Laura, body is Meriwether. These had been chosen by designers. They've been proven that they work together. This is a great way to get some inspiration and see what would be a good combination. If you see one that you like. It should be available in Google fonts and hopefully it's available in Devi. Devi has a ton of Google fonts that Elegant Themes have chosen that work well with the Divi theme. Sometimes you'll find ones that aren't available and that's okay. There's usually one that looks similar. So again, these are the, some of the best combinations of Google fonts. You can edit them yourself. Right here. You can find the name of the heading font and the name of the body font, go into Devi and import that particular font. Size is a fabulous way to see what fonts work well together, chosen by professional designers. In review, where can we look for design inspiration? One, we can research the competition. Notice what impresses you to surf the web would design in mind. Notice the quality of the websites themselves. Very strategically plan the base color and research complimentary colors. Or choose the right font to fit the company's brand down. By taking those steps, you will not simply build a functional websites. And we'll build a beautiful one, Rawls a visitor in and encouraged to stay and share and return. And most importantly, by whatever good or service the company's marketing. That's the ultimate goal of you as a web design business. To convert your clients, visitors into paying customers. What's the homework? I want you to check out Google Fonts and Adobe color and start paying attention to the design quality of the websites you graphs. I'm Leighton. And now you know, design inspiration. 17. Image Assets: And welcome. I'm late to your webmaster. Today, let's discuss where we can find images. Images are some of the most important pieces of content on a website. Why? Well, what is your eye drawn to when you first pull up a website? The boring paragraphs or the attractive photos. Furthermore, what would a restaurant website be without mouth-watering images of food. What would a photographer's website be without impressive photos of their work? What would our hotel site B, without pictures of their rooms, is images can be some of the most important elements of a web page. But where do you find graphics and images for your website project? You have several options. In this lesson, we'll consider one, when the client provides their own images to when you have to look for stock graphics. And three, when you know to bring enough photographer. First, when the client provides their own images. Most often, clients will give you some photos to start out with. Obviously, they'll be giving you their logo. But what else? Well, think of a gallery or a portfolio page. A roofer will want to display photos of his roofing projects. A remodel or may upload before and afters of their work. Artists will want to showcase their art. Most of the time, clients who already have these photos handy when the website project begins. So you might be wondering, what's the best way for them to send you photos. I recommend trying Google Drive, Dropbox or iCloud and make sure they send you the highest resolution possible. Some clients will want to send hundreds of photos. So all typically asked that they send only the best of the best. We want to avoid putting subpar imagery on the website. They do send you a bunch of photos. You can take creative liberties to weed through and pick out the best. Second stock photography. Have you heard of stock photography? What kind of photos can you download? And how much do they cost? Let's see. First, what companies come to mind when you think of stock? There's I Stock, adobe Stock, Shutterstock, Getty. These companies have millions of photos in their catalog. You can find pretty much anything on those sites. The more respected the stock side is, the stricter their quality guidelines will be. And what's the cost? Stock images will typically run between about 10 and 50 dollars per asset. They can be higher if you need exclusivity. And most stock sites will have subscription plans that bring the per image costs down by asking you to purchase several assets per month. So the cost depends on the website, the license type, the resolution, and subscription plan. Let's see an example. Here we are on Adobe Stock.com. Adobe is one of the most popular design companies on the planet, and they make software that we'll discuss in the next lesson. But this is their stock photography site. So let's say you need images for your home remodeling website. Let's search for house. See what pops up. All right, So there are over 19 million results for house on the Adobe Stock website. There's plenty that we can find. If we click on Filters, we'll see we can filter by the asset type images. Adobe stock does include videos as well. Templates in 3D. They have photos, illustrate, illustrations and vectors. You can filter by the price. Undiscovered content, which means it's never been downloaded by anyone on Adobe Stock. You can sort by the orientation, horizontal, vertical, square, or panoramic, the depth of field, the color, if it has people or not, the usage rights, size, the width, and height, et cetera. So let's see what kind of options that we have. Now these stock photography websites are known to have beautiful images. Absolutely breathtaking. So if you can find it in the budget and your clients budget actually, to use stock photography and it will really bring your project to the next level. So let's click on this one. That's beautiful photo here. It's titled beautiful home with green grass yard. This is the photographer. There's a few options here. We can save it to our personal collection. We can download a preview, which is a small version of the image with a watermark, like you see, very subtly the Adobe logo. And you see the photo number. And you can open it in an Adobe app. So there's two options here. In terms of purchasing. You can purchase a standard license, which would just be a typical download. Or for more money, you can get the extended license. So the extended license is described this way. Extended licenses allow licenses to sell derivative products based on an asset. You may purchase an extended license for most Adobe Stock Photos, vectors, and illustrations. Extended licenses provide unlimited impressions print runs, and the ability to create derivative products for resell, such as coffee mugs, T-shirts, etc. So since we're not using the images in that way, we're not reselling them. We're not using them in that commercial way. We're just wanting to put them on our client's website. We can just click standard license if we want to purchase this one. We also see that dimensions here in the file type 5000 pixel width, which is very generous, and JPEG file type, which is typical, especially for website projects. So if we click standard license, we'll see a couple of plans pop up here. There are several ways to purchase through Adobe Stock. Here's a couple options. There's a monthly subscription and an annual subscription. So for 2999 a month, you can get three standard assets a month. They say you can cancel anytime, enroll over up to 36 standard assets with renewable. So let's do the math. 2999 is 30 bucks a month. That gives us three standard assets. A standard asset would be like to image we just saw. So that comes out to 10 dollars plus tax for a stock photo. One other option, do we have annual subscription? So for the same price, $30 a month, but with an annual commitment, which makes that at least $360 will get 10 standard assets a month, which brings him down to $3 per month. So it works out great if you're regularly needing assets. But if you're not, then you've just committed yourself to another expense. So between 3, $10, it's very affordable, especially for small businesses that need a beautiful website. That's a very minor expense. But I said that there were other options. Why did I say that? Well, let's look at their other plans in addition to their credit packs. So here we are on stock dot adobe.com slash plans. And what do we see? There's annual commitment and month to month. Let's look at their month to month. So three standard assets would be 30 bucks a month. That comes down to 10 bucks per asset. Or you can commit to 40 assets a month for a $100 a month, which comes out to $2 and 50 cents per asset. And you can request 350 standard assets a month for 200 bucks a month, which comes out to 57 cents per asset, or 750 standard assets a month, for 250 a month, which comes out to only 33 cents per asset. So you can obviously tell that the more assets you're buying, the cheaper they become. For the annual commitment, the price goes down a little bit to the cheapest of 26 cents per asset. So it really depends on your needs, how often you're purchasing assets. And really if you pass on the expense to the client, then it really doesn't matter if you're an agency and you're purchasing these often. To what other form of purchasing do we have? This is a plan. Let's look at the credit pack. Use credits for content you can't get with a plan. What's the difference between plans and credits? So plans are best for typical image needs. Prize for value, the most popular option for standard downloads and images, templates, 3D assets and music tracks. Credits best for content not included in subscription plans. Press for flexibility for any content. Best deals for video, premium and extended licenses. So credits are basically a form of money on these stock photography sites, you'll see credits, the word credits used on different stock photo sites. And what does this mean? Well, here's their different credit packs. Now, first of all, a premium image. It says it's going to cost between 15 or 1250 credits each. Hd and for k videos will be eight to 20 credits each. Premium templates do to for premium 3D two to ten credits each. Now you buy a credit pack, you get so many credits for a certain amount of money, you can get 40 credits for $360, and that will get you around 40 standard images or five videos. You can purchase just five credits for $50, and that will get you five standard images. So let's think about this. You could commit to a monthly plan, you can commit to an annual plan, or I call this the pay as you go option. So this means you spend $50 and basically you get five images that you can use anytime you want. So I'll spend $50. And then anytime I need to purchase an image for a client, I'll just charge the client 10 bucks. I didn't make a profit, I didn't lose any money. We get high-quality images and they loved the price. Telling a client it's only 10 bucks a pop is a very easy way to sell them on stock photography. So there's a few options we have on this particular website, Adobe Stock. There are others like we discussed, and there's plenty of options available out there for stock photography. You'll find high-quality photos across all of these websites. Just find one that you like. The feel of I like to use Adobe because I'm invested in their Creative Cloud. I use their software for photo editing, for what type design for video production. So it's just a natural fit that I use their stock photography website. There are also free photo sites. For years. These were full of low quality, but in the past few years, a few amazing resources have popped up. Unsplash and Pixabay. These sites enforce high-quality and don't charge anything for image downloads. They just encourage giving credit to the photographer. Let's give Unsplash a look. Here we are on unsplash.com, a fabulous free website that was founded in 2013 as a humble Tumblr blog. They just put out a few images per week, and now they have grown to several millions of photos put out by photographers across the world. I happen to have contributed to unsplash.com as a contributor and my photos have been viewed and downloaded millions of times. I use Unsplash on quite a few projects. So it was my little way of giving back everything on Unsplash is completely free. You do not receive a royalty or a kickback or anything like that. When you upload your photos to unsplash.com, they just encourage people who download the photos to say thanks by attributing the photographer. Unsplash is the Internet source of freely usable images powered by creators everywhere. You'll find a lot of nature photos on here, but really they've grown to just about any category out there. So let's see if we have any photos available on here for our project, Let's use the same search word that we did on Adobe Stock, which is house. There's a few extra keywords we can add to that here. But other than that, we go straight to the photos. And you really find top-notch work on here. All kinds of beautiful images. Let's download one of these. I've actually used this one before. Let's see what we have available. We can find the photographer. His name is Brian BAB. We can follow him, see what other images He's uploaded. We can like the photo. We can add it to our own collection. If we have an account, we can download the photo, we can download a. We can choose a specific size. If we want to download a resized version, we can share it or we can view the info. Giving the info will pull up the views and downloads for this particular image the camera make. In this case, they used a Canon EOS 6D, which is a impressive digital camera. The dimensions of this photo or over 5000 width by 3500 height, which is very high-quality. So this is a high-definition photo that we can use on our projects. So let's click Download Free and see what happens. All right, we have a JPEG file, and there we go. We now own a copy of this photo. We can use it on our web and graphic design projects as freely as we'd like. Just been asked to say things. Say thanks to Brian bab for sharing his work on Unsplash. So there's a little line of text so we can copy that says photo by Brian BAB on Unsplash and it links to his account on unsplash.com. This just gained exposure for the photographer so they can get their work out there and get some credibility, get some exposure. Unsplash is a wonderful website. You'll find all kinds of categories on there. Let's look at some different ones. There's work from home technology. Obviously there's tons of nature photos, there's travel, film, current events, people, Let's look at people, get stuff, business and work. So they've really diversified at first they were a lot of beautiful images of nature and travel. And now they've really expanded to a lot of different categories. Food and drink. Now these are curated by Unsplash. So they've personally selected what shows up on the homepage for each of these categories. So that'll ensure you find the best work on the homepage. The highest quality will show up front and center. And you can continue to scroll and search to find the perfect image for your project. Again, anything we download on here is completely free. They ask that you don't resell the image, but you can use it on your website design project. It just ask that you, in addition to not selling it, say thanks to the person who took the image by copying that line of text and placing it near the photo. At this point, please pause the video, visit unsplash.com. Do a few searches so you can see what type of photos are available on Unsplash. And third, sometimes we have to hire a photographer if the client doesn't have quality photos and you can't find anything on stock, might be time to bring in a photographer. This will be your most expensive option. What kind of photographers are out there? Portrait photographers can take professional head, head shots for your clients, about us or team page. Commercial photographers can take professional photos of the interior or exterior of a rental house, hotel, cabin, home, or whatever else. Bringing in a professional photographer for your website project does add a little expense. You could just incorporate into your quote, but the results are well worth the investment. Now where do you go to find a quality photographer? There are tons of photographers out there, but you should look for a respected certified one network with various photographers so you can get a feel for their strengths and weaknesses. Make a note of which photographer prefers what type of projects. Find ones that will appreciate the work you use in their way, especially by sending website design, design jobs back your way. So what have we learned? Prioritizing high-definition photography is a wise investment. It will elevate your design project to the next level. The more impressive the website, the greater chance to visitor will turn into a paying customer. There are several ways to attain graphics for your project. The client might seem there. You can find free and paid stock images For you can hire a professional local photographer. And what's our homework? I want you to check out Adobe Stock and Unsplash. Get familiar with what they cost and what they offer for your projects. And I'm Leighton, and now you know, images. 18. Adobe Software: Welcome. I'm Leighton, your webmaster. Today, let's look at the fabulous software created by Adobe. So where do you go to edit images or process them from your digital camera? What software did I use to create this video? To edit code on our websites? All of that can be accomplished with the software created by Adobe, which was founded in the 1980s. There's software is the gold standard, and I've been using it since I started out and designed several years ago. Let's look at what's offered by Adobe, specifically for photo editing, web design, and video production. First off, there's Adobe Photoshop, the most popular photo editing software in the world. With Photoshop, you can manipulate, transform, and edit photos. You can create banners, resizing crop images, remove unwanted elements from a photo, blur, sharpen blend, combine at brushstrokes, circles, polygons, and so much more. Photoshop can do just about anything you want with a photo. Possibilities are truly endless. Photoshop sister software is Lightroom, another staple of the photo editing world. While Photoshop focuses on image creation and manipulation, Lightroom is best for batch image editing, which means editing and organizing a bunch of photos at once. The edits you do in Lightroom are mostly brightness, contrast, shadows, highlights, color, saturation, white balance, et cetera. Photos straight off. A digital camera should go through Lightroom for a few minutes before being released to the public. And nowadays, you can keep your Lightroom photos and albums in sync across all your devices, phone, tablet, computers. This cloud synchronization is a wonderful way to edit anywhere, anytime. Finally, Photoshop is for images, lightroom is for photographs, then Adobe Illustrator is for graphics. So logos, printed materials, vectors, business cards, typography, all can be handled in Illustrator, which uses vectors instead of pixels. So you can resize your graphics however you'd like. Illustrator really shines when working with printed graphics. Let's look at these three products. Here we are on adobe.com. Let's go to creativity and design and Photoshop, which is listed as image editing and design. Watched her little opening animation here. Make believe Photoshop. Photoshop on desktop and iPad for just $20.99 per month. And we'll discuss, there are different plans. And when we reach the bottom of this page, a fun opening video obviously created with far more than just Photoshop. But you get the point. You can do some amazing creative things with the tools from Adobe. Powering the creative world. It's described as the world's best imaging and graphic design software is at the core of just about every creative project, from photo editing to compositing to digital painting, animation, and graphic design. Now you can harness the power of Photoshop across desktop and iPad to create wherever inspiration strikes. Why is that such a big deal? Because for several, several years you were tied to a specific computer that you installed the Photoshop software on. Now you can use Photoshop on just about any device you have, YOU, your tablet, your smart phone, your computer, your laptop. Everyday photography totally transformed our professional photography tools. Make it easy to do every day edits or total image transformations across desktop and iPad. Crop, remove objects, retouch, combined photos, play with color and effects. Re-imagine the art of photography through Photoshop. Design is in our DNA. Posters, packaging, banner, websites, all your design projects start with Photoshop, combined photos and text to create entirely new images. Work with unlimited layers and masks, and paint with brushes that you control with stylus or touch on your iPad. Here there everywhere. Your work is saved to the Cloud. So you, what you can do, it's never been easier to use Photoshop. New features are rolling out regularly to simplify steps and save time. This is better or faster portrait selection. With one button you can select your portrait. Precise selection of people would just one clicked. Select Subject automatically detects the person in your portrait and refines a selection to include fine details like hair, integrates with Adobe Fonts, rotatable patterns. There's objects, selection tools. It's really an amazing piece of software that you can create images and graphics with. So here's a few of the plans. There's Photoshop by itself for ten bucks a month. And it gets you Photoshop Lightroom, Lightroom Classic on desktop and iPad. Photoshop on desktop and iPad as part of Creative Cloud for 20 bucks a month. All of the apps, which is what I do, which is what I recommend to you. You get all of the Adobe software for $52.99 per month and students and teachers get a discounted rate. All right, what else is in the Photoshop family? Adobe Photoshop, Lightroom, powerful photo editing. Wherever you are. Amazing photos, anywhere you are, get Lightroom as part of Adobe Creative Cloud for just ten bucks a month. The software gives photographers a place where they can drop their photos and batch, organize and edit them after issued at your desk or on the go. It's now a cloud-based service that gives you everything you need to edit, organize, store, and share your photos across any device anywhere. Editing, easy to use tools like sliders, presets lets you create photos that look just the way you want. Start on mobile, web or desktop, your edits are applied. Everywhere else. You have access to your library wherever you go. Built for photography, capture, edit, and share your photos all from one place. Learn from the pros it has built-in tutorials. It's morning or organization to organize your photos. And some of the recent new features, in-app tutorials. Photoshop on the iPad integration, you can send an image from Lightroom to Photoshop on the iPad and back again and transform your photos. Automatically fill panoramic edges. And there's the different plans. Lightroom just by itself, ten bucks a month. With Photoshop for 20 or the $50 a month one is what I recommend as you get all Adobe software. And let's look at another one and go back to the top, creativity and design. Let's look at Illustrator, which is built as vector graphics and illustration. This software like Photoshop has been around forever. State of the art illustration. You can create awesome cartoons, graphics, logos, and vector files allow you to resize them to any size. For example, billboards. You can go anywhere between small projects all the way up to Large-scale billboards. Illustrator is all around you, the industry standard vector graphics software is used by millions of designers and artists to create everything from gorgeous web and mobile graphics to logos, icons, book illustrations, product packaging and billboards. Iconic work at any size. Get all the drawing tools you need to turn simple shapes and colors into sophisticated logos, icons and graphics. Illustrator is a vector-based design software. So your artwork can scale down for mobile screens and up to billboard size and always look crisp and beautiful. They are fundamentally different from pixels, which are what images and photographs are. So graphics built on vectors are completely different and they can be resized instead of limited to the pixels, like a photograph would be. Draw attention anywhere. Create free hand drawings or trace and recolor graphics to turn them into works of art. So this is not a photograph, this is a graphic. These are the kind of things that you create with Illustrator. See how these are graphics. I would be the kinda thing you create with Adobe Illustrator, gorgeous topography that says it all. Incorporate a company name into a logo, create a flyer or mock-up, a website design with the best type tools out there, add effects, manage styles, and edit individual characters to create, to typographic designs that perfectly express your messages. These are the kinds of things that you would create in Illustrator. And it's on the iPad. All right, so let's open up Photoshop and just briefly see what it's all about. So here we're opening up Photoshop and let me drop in the image that we downloaded from unsplash dot most of your Adobe software, it's going to have a similar feel. It'll have tools on the left specific to the particular piece of software you're using. In this case, these will be tools that we can manipulate photos and images with. At the top we see we have one file open, the very top, we have further tools. And on the right, we've got even more tools for different purposes such as color and our layers. So the more you get, the more you play around with Adobe software, the more you get comfortable with the layout with where each button is, what tools you use for what, for what purposes. And let's look at some of these real quickly. So these tools over here allow us to select things. Lincoln, select a piece of our image. We can move it around. We can use the paint bucket tool here to fill in that space. We can use the brush stroke to create some. Some brushes. Can use the eraser tool to erase parts of our image and change the brush size. Just, this is just a real brief overview of what kind of stuff we can do with Photoshop. We can add text, make it larger or smaller up here. Change the font. There's tons of fonts that come default and you can download more from Adobe fonts, which is free with your subscription to Adobe Creative Cloud. You can add shapes and literally just endless possibilities here. You can resize your image. Right now it's at 50, 300 pixels. You can take it down to 2000. Maybe we need to resize an image for website projects so it will better fit on the screen. And there we go. We can click Command or Control S on our computer and save it to our to a folder on our computer. So how did we learn Photoshop, lightroom Illustrator, or any of the software? There's tons of tutorials. You can use your favorite Learning website, your favorite course site, YouTube, whatever you want. There are so many resources available and tutorials so that you can learn this valuable software. I use Photoshop and Lightroom every single day. Me and my website design business, they're completely invaluable. I would be lost without my Photoshop. So I highly recommend it and recommend you get started using it as soon as you can. What about web design? What does Adobe offer for websites? Dream weaver. This was created as a website design tool, but I mostly use it to edit code for my projects. Feel like the design aspect of Dreamweaver is the best option, especially since we're using WordPress for design. But the code editing and development tools in Dreamweaver can really save you time. Dreamweaver knows code and it knows the files on your computer. So when you start typing, it can auto fill the rest of the code or file you're trying to link two. Let's look at Dream weaver. So we're back on Adobe's home page and let's find Dreamweaver. So we go to creativity and design. Can't even find it under featured products. They really pushed Adobe Dreamweaver down on the list of products they promote. Its really lost traction in the last few years, but it's still available on their website. They still do offer updates to it. Adobe Dreamweaver. It's built as being able to design and develop modern responsive websites. I don't usually use it for that purpose. I don't use it to design websites so much as to just organize my projects. I do use Dreamweaver every single day. It keeps track of all my projects and allows me to edit code, which in WordPress, you do occasionally need to edit code. If you're not designing and developing a website from scratch in writing all the code yourself, sometimes you do need to make minor edits to code. And this software lets us do that. So it's described as responsive websites really fast. Get Dream weaver as part of Adobe Creative Cloud for just 20 bucks a month. Again, I recommend the $50 suite that gives us access to every piece of software on Adobe. So we don't have to pick and choose which we're paying for. Build beautiful sites for any browser or device. Quickly publish, create webpages almost anywhere with web design software that supports HTML, CSS, JavaScript, and more fast flexible coding. So let's see what's happening here. This is an IMG tag source, and as we start typing, the image on the local computer pops up. That can be a real time saver. And you can browse for a file on your computer and it auto fills it fast, flexible coding, create code and manage dynamic websites easily with the smart simplified coding engine, access code hints to quickly learn and edit HTML, CSS, and other web standards. Use visual aids to reduce errors and speed-up site development. It's definitely one of my favorite features. Setup to setup in fewer steps. Get your sites up and running faster with starter templates that you can customize to build HTML, emails about pages, blogs, e-commerce pages, newsletters and portfolios. I do not use it for that purpose. What you're seeing here is the design aspect of Adobe Dreamweaver. Don't which most web designers would shy away from. I stick with this side. The coding side can be quite helpful if you use it in that department. Dynamic display on every device it's built for responsive web design. But again, where we use WordPress for that and Devi, so I don't use Dreamweaver in that way. It does allow you to live view your website, which is cool. But I don't take advantage of that. I use the coding side. All right, so let's open up Dreamweaver and see what it looks like. First thing you'll notice is that it's fairly similar to Photoshop in that we have tools on the left here. We've got different tools we can use. We've got our files and projects on the right. So we can view the local view and we can view the remote view, which is our server. You can accomplish that with the free FileZilla software. But I like to use this since Adobe produces it. And it has the code editing software built-in. So we can open up one of our files and in the center we'll see the code. So this is the WordPress WP dash config file, which allows us to put in our connection to the database. You often have to use and edit this file. So minus won't get comfortable with doing so. You can use the Notepad or TextEdit software on your computer, or you can use a more advanced pieces of software like Dreamweaver. And this is what I prefer to use to edit code. One thing you'll notice is that different parts of the code is color-coded. So visually it makes it a lot easier to scan your code and see what you need to edit. That really does speed things up. So I basically just use it for code. And this is pretty much when I'm looking at when I'm doing cell. And through the site manager here I can save all of my website projects and switch between them, access the different files and interact with my server, make edits and using this button. And I can put the files on the server or get the files from the server. And I'm really helps things helps me organize my projects and edit them accordingly. And now video production. At the outset of this lesson, I asked you what software I use to create this teaching video. To Adobe Premiere Pro. This is a production level tool that even movie studios used to create films. You can import clips, trim, edit, change the color, manipulate audio, add titles and captions, transitions, effects, and so much more. For cinematic visual effects and motion graphics. There's the sister product, Adobe After Effects, which is designed to compliment Premier Pro. With motion graphics, you can animate and manipulate just about anything. Let's take a look at these two products. We're back on adobe.com, and now let's look for Premiere Pro and After Effects. So it's under their feature products, Premier Pro, which is described as video editing and production. Again, this is what studios will use. This is a production level tool which is extremely overwhelming at first. But like anything else, once you get used to it, it can become quite easy. I have reached that point myself. So it is possible video editing that's always a cut above. The latest release of Premier Pro is here with great features. And Premiere Rush, which is a simplified version of the tool. Cool introductory video. We scroll down different plans, smart tools, better storytelling. It's the industry leading video editing software for film, TV, and the web. Create creative tools, integration with other apps and services and the power of Adobe Sensei helps you craft footage into polished films and videos. Since a is they're artificial intelligence, by the way. And with the Adobe Premiere Rush, you can create and edit new projects from any device. Stay in your creative flow. Automated tools powered by Adobe Sensei. Save time so you can focus on your story, integrated workflows. Let you polish your work without leaving your timeline. And he camera any format, any platform, edit footage in any format from 8 K to virtual reality. Native file support lightweight proxy workflows and faster progress. Hdr let you work the way you want with your media. Even on mobile workstations. This tools and absolute powerhouse, everything you need to create. So as you would expect, it integrates with Photoshop, After Effects, audition, Adobe Stock, et cetera. Let me draw attention to the tutorials here. So there's so much we can do here in Premier Pro. Let's look at this. Getting started is fast and easy. Our step-by-step tutorials cover everything from the basics to advanced techniques. So instead of pulling up the software live like we did in the last couple videos, let me pull out these tutorials so I can show you where you can learn Adobe Premiere Pro in addition to any of the software on the Adobe site. Premiere Pro tutorials, you can find tutorials like this for any of the Adobe software. These are tailored specifically for the Adobe Premier Pro. Make visually stunning videos virtually anywhere learned the basics. We'll refine your skills with tutorials designed to inspire. So you can choose between beginner and experienced videos. Let's see what's offered for beginners. Premier Pro gets started course, create a project and import a clip, explored the panels, learn editing skills, work with graphics and titles. Adjust the timing of your edits, changes the look of your clips. Add effects, work with audio. Work with your clips. Important media. Work with animations using keyframes, acre, anchor points, looping, color adjustments, adjust contrast, highlights and shadows, uses it the color options, natural color adjustments automatically match clip colors, copy and paste effects. Understanding audio, creating Sequences, create beautiful visual composite course, add transitions and more. So you can go through these tutorials if you're a visual learner, to learn really any of the software on the Adobe suite. And these tutorials are published directly from Adobe. So you know, you're getting absolute top-notch education. Let's recap what software we just discussed. First, there's photoshop, which I use to create and manipulate images. Second, there's Lightroom, which lets us edit and organize photographs. Third, illustrate, which lets us edit vector graphics and illustrations. Dreamweaver, where we can organize and edit website code. There's Adobe Premier Pro for video production. Finally, After Effects, motion graphics and animation. I'm in and out of these programs every single day. And a successful website design business relies on them. What's our homework? When you're ready? Purchase Adobe Creative Cloud through the link in this course description. Adobe software z, absolute gold standard for design. So the sooner you get comfortable with this software, the better. I'm Leighton. And now you know, Adobe. 19. Child Themes: Welcome. I'm Leighton, your webmaster. In today's lesson, let's look at child themes. Have you heard of a child theme? Mini courses, but a lot of emphasis on the importance of a child theme. Let's explore what these child themes are, why I do recommend them, and how you can implement them. So first off, what is a child theme? Well, you recall that WordPress uses themes. Themes are built on top of the WordPress framework to give you a website style and design. My theme recommendation and the one that you're learning to use in this course is Devi. Devi is an incredibly powerful WordPress theme built by Elegant Themes. Would you consider devi a child theme? No, no, not by itself, but you can create your own child theme to work alongside Debbie. Why would we want to do that? Well, one of the best things about Devi is the fact that it's so well-developed and constantly updating. That means they're always pushing out new features, improvements, and optimizations. So think about that. When you update Devi, the files on your server are replaced with the newly updated ones. Sounds great. But what if you've had to make some modifications to your files? Like if you had to edit the code for the header, the footer, the body, the functions file, or add additional JavaScript or CSS to the theme files. Updating means all those tweaks and modifications would be gone once you update devi to the newest version. That's where child themes come in. They allow you to alter any of the core theme files separately. So your edits are not deleted when you update Divi. So if you plan on making advanced customizations to your theme, like modifying page templates, adding large amounts of CSS or JavaScript, adding new functions. Than it really is best to make these changes to your child theme without ever having to touch the primary theme files. Now, to be clear, you can add CSS, JavaScript, and make pole in a, a visual edits through the WordPress admin and the Theme Customizer, true? But the more you build websites, the more obstacles you have to overcome, the more you might need to edit a little code to fix something. Maybe add a new functionality, or just fix something that would otherwise be broken. So child themes are best-practices. Child themes make editing code easier for you and your project, and they're extremely simple to create. In fact, let me show you how to create your very own child theme. So we're currently logged into our test website and appear at the admin bar. Let's click on my first website. So we go into the backend of WordPress and we're looking for Appearance and Themes. We should have one theme currently installed. That's our primary theme, Divi. And what we're wanting to do now is add a child theme on top of this. So to accomplish that, Let's open up FileZilla and let's login to our server via FTP. So I'm going to pull up my last pass and find my saved credentials here. And I will input the host name and the username and the password here. Let's do port 22 for security and quick connect. So we're logged into our test server and let's go into WP dash content. This is what holds the uploads, the plugins and themes. And we're looking at themes. So right now we have one installed with got Devi. And we're wanting to add a child theme on top of Devi. So the first thing we do to accomplish this is create a new themes folder. And we're calling it DVI dash child. It's what we call our child theme. And we just need a few files inside of here to officially make this a child theme. So the first one would be the styles.css. So let's go into the main Devi, theme folder and we'll see several sub-folders here that power Davey. And we see several files, most of them PHP, and we see some CSS files. There's one called style dot css. This is the main CSS file for a theme. So first we're going to need a style.css file inside devides child. So let's create a new file, style dot css. And we're going to open this up. So I've already got one opened up here. And these are the necessities for the style.css. This is the bare-bones minimum that we have to include to make this an official child theme. So we need to have theme name and we're calling this Divi child theme. And we must put the template as Devi. This should be the exact name of your parent theme. So that officially makes the connection to your parenting. We can put whatever we want for version, whenever we want for the author and URL and the description. The most important parts here are the theme name we're calling ours Divi child theme and the template Devi. Then we have to include the primary Devi styles spreadsheet. So we do that with at import URL and then dot-dot slash, which means we're going back one folder to themes and then dv. And that would be this folder. And then style.css, which means we're calling upon our child theme to use the style.css from the primary theme. So this is what we need to have here and go into copy this from the template that I already had up. And let's open up the style.css here. View slash edit, reopen local. And I will paste what we have here and hit Save. And that's going to upload to our server. The file has change. Would you like to upload it? Yes. Yes, we would like to upload it. So we have our style.css folder. Let's refresh and we can see the file size there. It's been uploaded. There's another thing that we can do. So every theme folder has a screenshot. This is referring to the picture we see here. So I like to just copy the existing one. So let's go to, let's see, let's pull it up from the main folder here, the Devi folder, and we're finding screenshot ab.js JPEG. I'm going to drag that to the downloads folder on my computer and then we can upload that to our child theme. This is going to give our child theme the same screenshot is dv. So we know what the child theme applies to. So I'm dragging it into the child theme. Alright, all good, so far. Now, every theme has a functions.php file. This allows us to add additional PHP code to our WordPress website. There's plenty of opportunities where we might do that. Usually it's when you're wanting to add additional advanced functionality to your WordPress or Devi website, or wanting to edit something that you can't already do on the Devi back-end. So this file is a necessity for our child theme. And honestly it's one of the most important files anyways, because when we use a child theme, that's typically what we're looking to accomplish. We're typically looking to add a little piece of PHP code to add some additional functionality to our website. So functions.php is not just recommended, but it is a necessity. So let's go to Create new file and name this function's dot PHP. Now we opened it up, view slash edit, and there's a little piece of code that we need to add to call the parent themes style style sheet. So let's go to Elegant Themes.com. And I'm just going to copy and paste this little snippet of code that will call the parent themes CSS. So this will call the official Devi, CSS. And that's what we have to do to put in our functions.php. So this is the very first snippet of code that we're adding to functions.php and anything else we want to add, we can do so below here. It's nice to get our child theme ready when we start a new project. And then just have this functions.php ready. Whenever we want to add some additional code, you can do that. Week's them to the project, months into the project. You'll know when the opportunity arises. So we're going to click Save or command S on my keyboard and click Yes to upload this. And we'll refresh here and see we have our style.css ready to add additional CSS code to our child theme. And we have a functions.php ready to add advanced functionality features and customizations via PHP for our WordPress website. We also have an optional screenshot just to make it look nice. On WordPress admin. So those are the necessities for our child theme. Let's go back to our website and see how it looks. I'm going to refresh the Manage Themes page and see what's on here. Now. There we go. We went from having one primary theme to having two themes. We still have one active, which is the official Devi, theme, and then we have one additional one which is currently inactive. So right now, we could add as much code as we want to style and functions and it wouldn't do a thing because we do not have it activated at the moment. So can you have two themes activated at once? Well, no, you cannot. But to have both of these active, the process is to activate your child theme while you have your primary one activated. And then let's see what happens. Our child theme is now activated, and that's going on top of the parent theme, which is Devi. So let's pull up our website, my first website, and there we go. It looks like it always did. The website hasn't changed. We just now have the possibility of adding additional code to our child theme. Anything we add here, if we edit the functions, we add to the style sheet that is not going to affect the primary Devi theme. So we can make as many changes and edits as we want. And whenever Elegant Themes pushes out a new Devi update, which they do quite regularly, it will not affect the primary theme. So they can update it all they want and our edits will remain intact. So why else would we need a child theme? And let's look at a specific example. So when we go into dv, the purpose of a child theme is you can override any of the core files. So if the opportunity arose where you wanted to make some really specific edits to the header that you just could not do through the theme customizer. You can copy, you can copy this file header.html and put it in here. And when you do that, entered up PHP. If you were to copy the code for this, but this particular file, you could copy that code and then paste it onto your child theme. And there we go. So the purpose of this is that any changes we make to the header.html file, we can change any little piece of code that is necessary for whatever, whatever it is we're looking to accomplish. That is the header dot PHP file of that will be fired. So by having headed up PHP in your child theme, you have now negated the original header.html file. This file will not run as long as we have this one uploaded to the server. So let's look at another example. I'm going to delete that file in. Let's look at, okay, For example, we go back into Chrome and we see we have some social icons up here, Facebook, google Plus, and Instagram. Let's say we wanted to add, say LinkedIn. There's not an option to add the LinkedIn to the Divi Theme Options. Let's look at that Devi and Theme Options. We go through here and we see Facebook, Twitter, Google Plus Instagram. Where's LinkedIn? Let's add it. So we can accomplish that with our child theme. Let's go into FileZilla and we're going to divvy. And the social icons are pulled from includes and social underscore icons dot PHP. So let's view or edit this. And it pulls up the file. Let's copy this file. And we're going to create that same file structure in our child theme. Includes create directory, includes open that up. And we're going to create a file called social underscore icons dot PHP. There we go. Social icons is in the primary theme, and social icons is also in the child theme. So because of the existence of this file, this one will not be fired. You've just overwritten it. So let's open up the file and her child theme view edit. And we're going to paste the code for social icons. So what are we gonna do with our child theme? So let's make this a little bigger. And what do we see here? Basically what we're looking at here, we have a little piece of HTML code along with some PHP for Facebook, for Twitter, for Google, and for Instagram. So let's copy some of this HTML code and paste it down here. And we'll change Google to LinkedIn. And let's just take them to LinkedIn.com and change the CSS class to ET social linked. In. There we go. We'll press Command S to save and press yes, refresh this. And there we go. It's been uploaded. So let's go back into Chrome and refresh. And there we go. There's LinkedIn, looks beautiful. So there's a real-world example of when I like to use a child theme, will often come across opportunities to add additional CSS, to add functions.php. But there's another example of when you might want to use a child theme, we can override the social icons dot PHP from the primary theme and make the adjustments that we needed to make. One other quick question, you might have, can we add CSS to the theme customizer? And we go to Theme customizer. And at the bottom here, we can go to additional CSS. Yes, you're absolutely right. The best opportunity to add CSS to the child theme though, would be when you have a lot of CSS to add, think hundreds of lines of CSS code. But for most of us, we just need to add a few lines each time we need to make an adjustment on our website. In this case, I've got 123 little pieces of CSS. So that perfectly on the additional CSS. And we didn't really need to add that to the style sheet on the child theme. And we can have it in the Additional CSS and that way it is saved to the server and we can pull it up using the nice WordPress admin instead of having to edit some code. But if you had hundreds of lines of CSS code or you had a really advanced function, then it is nice to tuck it away in the CSS and the functions.php code. So there you have it. Aren't child themes easy to add. We could do that in just a few minutes. Personally, I recommend adding your child theme when you first start your project, when you're first installing WordPress. And if you get us started right away, then you don't have to worry about adding that later on. And you'll have your functions.php and your style.css ready whenever you need them so you can make changes. And there you have it. We now have a child theme installed, and we're ready to go. Congratulations. So let's recap child themes. What have we learned? We learned one, they're so easy to create. Two, they work alongside your primary theme. And three, they allow you to modify your theme while still updating to the latest version without losing your x. So what's your homework? I want you to create your very own child theme for your WordPress website. So you how easy it is. And then when the time comes that you need to edit some code, you'll be all ready. I'm Leighton, and now you know, child themes. 20. Advanced Concepts - CSS: Welcome, I'm latent, your webmaster. In today's lesson, let's talk about an advanced yet essential layer of a website, this CSS. Now we briefly talked about CSS back into coding lesson of section one. As you recall, CSS stands for Cascading Style Sheet. Sss is a web programming language that focuses on giving design and style to Raul content like text and images. For example, to make a page title blue, add CSS to change a webpage as background. Add CSS to make a font bigger. Add CSS to add more or less spacing between elements, just add some CSS. So as a web designer, you will absolutely need to work with CSS to polish off your designs. But wait, didn't we learn that Devi gives you a platform to visually designed websites, does not negate the need for coding css. What do you think? Well, Devi certainly helps if it gives you tons of freedom to fine tune your designs through font options, spacing, sizing, backgrounds, transitions, transformations, and so much more. In fact, Devi and other modern themes have come a long way in this department. But most modern themes also give you a place to drop in your own custom CSS. So as we look at a brief overview of CSS, Here's what we'll learn. One, an example of what CSS does to wear to learn CSS. Three, where to add snippets of CSS to the Devi theme for the beauty of your browser's inspector. And 5, how responsive web design works. And of course, with CSS, please understand that this is a coding language. Have you ever tried learning to speak another language? Our language is learned and just a few minutes, generally not. So I encourage you to continue your education outside this course are watching online videos, reading tutorials, and most importantly, trying this out yourself on your own web server. Sss can be a little particular, sometimes, especially when you're looking for advanced design effects. So sometimes that hands-on trial and error is just the best way to learn it. With that being said, let's dive in. So let's get a basic introduction to CSS cascading style sheets. Because as a web designer, this is a coding language that you will absolutely be in, day in and day out. So the first question we want to answer about CSS is, what does CSS do? And to answer that question, let's look at a public webpage. In this case, we're looking at a Wikipedia entry. And as you recall from the coding lesson, under the fundamentals of web design section of this course. The CSS is available for any webpage on the internet. Both CSS and HTML are actually available. We can go to view page source to see what that looks like. And here is the public HTML. Four, the Wikipedia article that we're looking at. So this is the HTML. See, this is the end of the head. This is the start of the body. This is an H1 header 1 tag, the one that says CSS. Up here, H1 header one, CSS right there. We can also see the CSS for this webpage. In this case, that is this link here. And what you're looking at here is the CSS. But it's minified, as you'll see in the a couple lessons from now. It's gone under minification to be smaller loads, load time, smaller page size for this CSS. But basically what we're looking at here is cascading style sheet. So the point is we can see this for any web page. It is public. And there's, there's a cool way here that we can look at what CSS is all about so that we can manipulate it a little bit on our end. We're not going to be making any changes to Wikipedia here, but using our Internet browser. In this case, I'm in Google Chrome, we can get familiar with CSS here. So if we go to our browsers inspector, we click the Inspect, we can see what we were just looking at. We can see this particular section. We clicked on the HTML in the center here. And then the CSS is on the right of my inspector. So we're looking at a link here. And on the right we can see that all a, a for anchor, anchor links, the a would be the links on a page. All links should have text-decoration, none, which means no underline. Color, and this is the sixth digit hex code for this blue, and then no background for the links. So we mentioned that CSS gives design color style to a web page. So with this one instance, this a anchor tag. We can manipulate all of the and you can see them highlighted right now, all of the anchor links for this webpage. So let's change the color from a blue to a red. And then let's change to text decoration instead of none, let's say underline. So we've changed that across the entire in this case, that would be across the entire website. But we're just looking at this on our local browser. We're not manipulating the actual server. But this meant this one tag. This a tag manipulates all links across this whole webpage. So we're looking at the power of CSS. We can also change the font size. So let's go in here and let's write another piece of CSS code, font, dash, size, colon, let's say 30 pixels. So we just made all links across the entire web page, 30 pixels. Now, we're also able to manipulate just one particular link or one element on a webpage. If we go up here, element dot style, we can change that to make it smaller. Say that manipulated just that one particular link that's attaching that CSS code just to this one HTML element, just this one link. What else can we do? We can change the background color of the whole page here. Let's see if we can change the background of this side box here. And that's with background dash color. There's a hex code for that. Right? So that's a little example of what CSS can do. We can change the padding, how much space is within that element. We can change the margin, the space of round any element. On the webpage. We can change the line height, the font size, the width, the background color. We can manipulate the border here. We'll make it 15 pixels instead of one, and let's make it black. All right, and there you go. So that's an example of some of the things that CSS can manipulate. We've obviously exaggerated here for, for teaching effect. But a lot of times, CSS, we'll make more subtle changes as you're refining design elements. Alright, so the next question we want to answer is, how do we learn CSS? We're seeing here that there's a lot available that we can manipulate lot of different ways and we can add design and style to elements of our webpage. And we know that there's a lot of CSS already implemented here. So how do we learn CSS? Well, if we go to Google and we type learn CSS into the search bar, we can see a lot of different results here. Most of these are going to be free opportunities to learn CSS. And of course, like any skill, there's going to be paid avenues for learning CSS as well. You can go to YouTube videos, you can go to different, different websites. I like to use W3 schools.com as a starting point. So we go to W3 schools.com and go to CSS. And this is going to give us a thorough understanding of CSS. It goes through an introduction, the CSS syntax and selectors, both very important. And as we scroll down here, we'll see different things. We can manipulate. Colors, backgrounds, borders, margins, padding, height than with text fonts, links, lists, tables, width, galleries, opacity forms. And that's just in the basics. And we'd go down to Advanced rounded corners, gradient, shadows, transformations, animations, media queries. And then we get into responsive CSS, which is how we make our web design responsive, mobile friendly. So there's so much we can learn with CSS. Let's just look at some of the basics in the introduction here. So. An Intro to CSS. We have the selector, and then we have what we're wanting to manipulate. In this case, the background color, the font color, the alignment, the font-family, the font size. And first we need to specify our selector. In this case, this example, we're looking at the body, which would be the entire body of the webpage and then the open curly brackets. And everything within that would be what you want to manipulate, the styles that you want to add. And then when you're done manipulating that, close out the selector with a closing curly bracket. And you can add as much of this as you want to, your tag, your HTML tag, your element. And you can add as much, as much of this as you want to your webpage. Nice thing when W3 schools is they give you examples and you're able to click, Try it Yourself button to change the manipulation. So we change this background color from the light-blue 2 000 000, which is the hex code for black and would click run. And there we go. It changed it to black. We'll add some color colon, fff, which is the hex code for white run. And there we go. Another thing we'll notice here is that if we're looking at raw HTML, everything on a webpage is under HTML tags. The head would be the different scripts like JavaScript and CSS, and different Meta SEO tags, as well as your title tag. And then the body is everything that the visitor sees on the front end of the webpage. So CSS can either be called by linking to the dot CSS file or with the style HTML tag. We can add style. And then everything within that would be what we've written as our CSS code. Well, let's look at another specific example here. Let's look at CSS. Inline. Css layout tours horizontal and vertical align, center align elements using this tag, margin colon auto. And there's our example. We're adding a CSS selector named center, That's a class. And we're adding, we're denoting that everything with it with the center class is to be margin auto width 50 percent, border, three pixels, solid and green, and then padding of 10 pixels. And that's what gives us this effect above. We can try it out yourself and manipulate dialectic. Let's change the border to 10 pixels, change the color to black, the padding to five, and then the width to 80 percent. And let's add another tag here, text dash align center, and then run and see what change. We made the border thicker, we made it black. We centered this Hello World and we loosened up the padding a little bit. And we made the width 80 percent instead of 60 percent. So it's stretched further into the webpage. So this is what's known as a class. You can have one ID on a page, one ID. That's a unique identifier. And then we can have multiple classes. So we could add class center to several HTML elements on a page. And indivi, there's a section where you can add a class to actually any module, any section, any row can have a class. So in this case, in this example, the class is called center. And then up here we've cold. And you can call this on an individual webpage or across the entire website. We're calling dot center, the class of center. And anything with that class is going to have this style. All right, so that's a little bit about what CSS does and where we can go to learn CSS. I recommend going through all of these tutorials to get yourself familiarized with CSS. But now we want to know how we can add CSS to your WordPress website. So to answer that question, let's go into our test website on our server. And we're going to see a few different options here for how we can add CSS to our website. There are several ways to accomplish this, and a lot of modern themes give you an option to add custom CSS code to your website. Devi, of course, welcome CSS and gives us a lot of control over the design of a webpage. In addition to giving us control over adding additional CSS and tweaking that on a webpage. So one of the first places to go if we're using the divi theme, would be Theme Options. And on other themes, it might be called something like custom code, code integrations, Advanced Custom CSS. We'll look for terms like that. Indivi, it's under Devi, and then Theme Options. And then we scroll down to custom CSS. So right here is where we can add any CSS code to our webpage. So for example, we could say body background-color is CCC, which would be gray. And then we close out the curly brackets. Let's click Save Changes. This is one area where we can add CSS, and I'll show you the, the mirrored location where we can do that. First, let's look at how that rendered. We refresh. And it looks like it got overwritten by something. Let's try to yeah. So our body background-color got cold. The gray CCC Xcode that did get called, but something is overriding it. This header has its own background and the section E, T dash, main dash area right here, that has its own background as well. So that is overriding the gray that we entered. So let's go up to the header and let's try to change the background color of that. Right now it's listed as the main header. Background color is white. Let's try to change that to the gray. And there we go. We changed the background color to that light gray that we attempted on the back, on the background of the entire body. And now we can see this, but is that edit that we just made there with our browser inspector? Is that going to save? Let's refresh the web page and see. No, those are nondestructive edits that are not saved to the server so that CSS did not get saved. That's just a sandbox where we can play with CSS on our end. In fact, the inspector is a wonderful way to practice CSS. We can change anything here and not worry about messing up the webpage or worry about things being saved to the server or breaking anything on the website. So let's make that a more permanent edit. We go to see this header here. It's a header HTML tag with the ID of main dash header. And an ID has this pound son. A class has the dot, sine. Classes have a dot in front of them, and IDs have a hashtag in front of them. In this case, this is saying the class of ET underscore fixed, underscore nav. And then within that class, the ID of main dash header, that's what's being called here. Additionally, ET fixed nav top dash header is also being called in this same piece of CSS. And that's just more efficient if you're wanting to say position fixed. If you're wanting to apply to two different elements, you can combine them here. So main header and top header are both being manipulated as position fixed. So let's go into another area here. You can go into appearance and customize. And I promised you that this would be a mirror of the CSS that we added under theme options. So let's check that out. We click Additional CSS at the bottom. And there we are. Body background color, CCC that has been added. We added under Devi theme options and we can see it here as well. With the theme customizer, you can visually see how your edits will look on your website. And then if you like, what you're doing and you can click the Publish button at the top. So let's add that edit that we had looked at earlier header. And we want to call the ID of main dash header. And we're going to save background dash color, number CCC. And there we are That manipulated this header. You'll notice we did not add a space here. Why did we not add a space? So if we look at the HTML, it's the header tag. And we can call that just by writing header. And then we want to get more specific by including the identifier main dash header. But that's all part of the same HTML tag. So ones that are part of the same HTML tag, like this. For example, body, the class admin bar and the class ET fixed now are all part of the same HTML element. But we add this space when we're refining that to an HTML element within that element. So we had the body here. And then main dash header is within the body tag. So body, we call that width body and then the class name that we're wanting to specify. And then space bar, and then the HTML tag you're looking at within the body tag. So we would do body and into our class and then space and then header. And if we're calling the ID, we can do hashtag main dash header. And that's how we get body dot, admin dashboard dot GET fixed nav, space, hashtag, main dash header. You'll notice that header right here, H-E-A-D ER dot HTML tag was not included here. Css is very forgiving. Sometimes you don't necessarily have to add that HTML tag. You can just call it with the ID. Or the creators of Devi could have called this without the identifier and just said header instead of the identifier. But sometimes there's multiple pieces of CSS that are competing for a style. And you need to get really specific to override those others. For example, main header has its own css, right? And then just header has its own CSS. Everything has its own CSS. And then this is known as a CSS Reset, which gets everything on the same, gives everything in the same style as a basis on all browsers. Margin 0 padding, 0 boarder. But header is being called Somewhere in here as well. So all of that to say, there's a lot of CSS added to this one specific HTML element. And all of them will be added together, but only one can be called. Only one piece of CSS can be called at a time, which means there can only be one background color. So even if other pieces of CSS here are calling a particular, calling for a particular color. Like in this case font dash size 14. We'll notice it's crossed out. And that's because something more specific than body is overriding that CSS. So you can have all this CSS code, but only one specific design manipulation is going to run for each of these. So once ESS might call the line-height and the font way, and another might call the position. And then another might call the distance from the top. And then another my override that distance. So that's how CSS works. Let's look at another customization here. We'll see this some useful links to get you started. We right-click and inspect. And we'll see that this is a H2 header to HTML tag, and it has the class entry dash title. So we can actually manipulate all H2 tags across the entire web page and the entire website on across this whole WordPress website, if we call H2, let's make them bold, font, dash, weight, bold. We have just made all header two tags, bold across the entire webpage and the entire website. Now, if one particular header wants to override that, then we can with some more specific CSS. This would be a starting point to say all header two tags be bold. We can also refine that with the class of entry dash title. So now all header two tags across the whole website with the class entry dash, title will be bold. So let's click the Publish and see what that looks like. We can refresh. And there we are. Alright, so let's go to one of our sample pages here and let's hop into the visual to why is this one not bold? Inspect. Why do you think that bold didn't apply? You right? Because that's a header 1, not a header to tag. So the Header 2 is font-weight bold, but we didn't say anything about Header 1. So it's calling the default. Here, go to computed. And this is what's actually running. Remember only one runs per element, and there can only be one font weight. And if we click the arrow here, that was called by this piece of CSS to say all header tags as a starting point should be font-weight to 500. And of course we can override that with a more specific piece of CSS. Let's go into the Visual Builder and see how we can manipulate the CSS through. The visual builder will use the existing content here. And we know we have the section, we have a row, and we have a text module. What CSS options do we have? Well, first of all, the Design tab has a, takes care of a lot of the CSS for you in a visual way. Instead of calling CSS code, we can just change the font weight and the font size and all of that through the Design tab here. That's going to be much easier way to edit the code than having to do that manually through CSS. But what if we do need to edit it manually? There may come a time when you need to fine tune something specifically. And in that case, we know we have the universal edit under Additional CSS. But we also have in the advanced tab here, this SSS ID and class. You can enter your ID. No need to add the hashtag. We can just say identifier and that will put the pound sign and add the ID to the element. But again, we don't have to do that right here. And then we can add our CSS class, like entry dash title. We can add our CSS class. In fact, we can add any number of CSS classes to this element. And then universally we could assign some style to that with a piece of CSS code. In fact, it says we can do so with your child theme or in the Custom CSS. Which means this. Beyond that, we can go into custom CSS. And this adds some CSS before and after. Those are before and after tags, which you can learn about in the advanced lessons of CSS. But let's look at main element. This will add CSS to this particular module. And we can do, for example, text dash line, right? Thing that adds CSS just to that one element. And generally this will override what we have already entered here. If we haven't entered anything. So we have the default text color. And then we over, over roared it with a piece of CSS code. And then we can go into design and override that further. By going into the Design tab. You'll get used to CSS. A lot of overrides. Some CSS will block out others. And if you really want your CSS to run whatever you're writing, the goal is for it to be as specific as possible. And when in doubt, we can add the important tag here, and that will just override other pieces of CSS. We can add that when we really need something to run and we're not able to get it. Otherwise, we can add the important tag to any piece of CSS. And now we'll just add more weight to it. Now if you had a more specific piece of CSS than this, and it also had important then that one would run because it was more specific. How else can we add CSS? Well, we can also add it to any row with the Advanced Custom CSS. Or we can go it, we're wanting to add CSS just to this web page. We can go down here into the purple buttons and we're looking at page settings. And then Advanced Custom CSS. Now we're adding CSS just to this one web page. So let's say header, main, header, background, color, Let's say black. And there we are. We're adding CSS that's only going to run on this webpage. Now in addition to that, we talked about child themes in a previous lesson, we can. Add CSS to the styles.css file in our child theme, and that would be another way to add CSS. So one final thing. Another question we want to answer is how does CSS enable responsive web design? So let's look at how CSS helps with our mobile sites. So we talked about mobile friendly websites and in a previous lesson. So let's look at the inspector. And another nice thing about the inspector is that we can drag this to make it smaller and see how a web page will look on a smaller viewport. So one specific thing to look out here is notice the menu up here to the Home sample page, uncategorized. We can see those menu options. But then when we get to a smaller Viewport, specifically 980 pixels is the break point. That menu gets hidden behind the hamburger icon that three lines. So the break point, that's what this is called. A breakpoint, would be 980 at 980 pixels and below. We want to hide that menu under the Menu icon here. So how does CSS enable that? Well, let's look at this HTML tag, the div tag, ID, mobile nav menu. This is the entire mobile menu. So do you think the mobile menu needs to run on a desktop? Now? No need to see that. So let's see how we accomplish this with CSS. This is at media. Media would be responsive web design at media max width. For this CSS to run is 980 pixels. So 980 pixel width. And below, we run this tag AT Mobile Nav Menu display block. So the other option would be display none. Display block, display none. So anything above 981 would be display block. Let's see what that looks like. The regular menu is running here, display block. And the top menu is hidden at 980. So it's displayed above 980, hidden display none below 980. We can also do Min width if we want to make changes that apply to a certain width and above. And there's Min height and max height. Well, let's see what they'd be three schools has to say about responsive web design. Responsive web design is creating web pages that look good on all devices. Responsive web design automatically adjust for different screen sizes and viewports. With CSS, you can resize, hide, shrink and large a website to make it look good on all devices, desktops, tablets and phones. And there's a few things here, setting the view port, which would be the current viewport of a webpage. You can do responsive images that scales your images to fit any browser size. We can show different images depending on the browser width. With the picture tag, we can have a responsive text size. So let's see what that looks like. See how the text is getting smaller. As we shrink the browser. It says resize the browser window to see how the tech size scales. And we can see it's getting bigger and smaller based on the browser size as we manipulate it. That's achieved with font size 10 VW, vw being viewport width. So 10 percent of the viewport width, what should be the browser window size? Media queries as what we looked at earlier. It's common to use media queries in responsive web pages. You can define completely different styles for different browser sizes. So if we resize the browser window will see that the three div, elements below will display horizontally on large screens and stack vertically on small screens. You've seen this before. Think of a sidebar on a web page. On your computer to the sidebar will be on the side. What happens on a mobile phone? Do we see many sidebars on a mobile device? Now we don't what happens? So let's read this CSS code and see what's going on. This is class left. This is class right. This is class main domain. So with this media query, we're adding a breakpoint of 800 pixels. What this is saying is that this sidebar, the two sidebars and one on the left, the one on the right, and then the center. That's great up until 800 pixels. And this piece of code is saying that that doesn't look good under 800 pixels. So let's change it to width 100% under that, under that breakpoint. So left, main, and right will all be 100% under a 100 pixels. And these, this in green, these are comments. This is just a friendly comments so you can remember what you're writing. None of that matters when the code is run, as long as it's within the slash and the asterisk. So let's see what that looks like. We go to our Inspector and we change the browser size two, we're about to get to a 100. And let's see what that looks like. That we see up here responsive. Right now we're at 794 pixel width. When we go to up to a 100, it goes back to the 20 percent, 60 percent 20. And when we go under a 100, all of those three become 100% width. By the way, we can also click these convenient default sizes. Tablet, 768, laptop, 10, 24 pixel, laptop large. And then for fork, those are helpful as well. So that's, uh, that's the basics of responsive web design. So here's another example for, for example, a large desktop and small mobile phones. We'll see what that looks like. That would respond appropriately. One of the, one of the most common ways to use CSS when you're polishing your web design would be when something looks good on your computer, but on a mobile or on a particular device, it might not look as good. You might need to change something specifically on a particular device size. So you can add a piece of CSS code that says, under a certain amount of pixels, I want this to happen. That would be the most common way you would use your media queries and you would use CSS so that your website might look great on a desktop. But if you pull it up on your phone and just something doesn't look right, and you can't seem to achieve a certain effect by just going to the built-in Devi, responsive tools like care. Mobile, responsive. You can do a different design style for desktop, tablet and mobile. But sometimes we need to get even more specific than that. And in that case, we need to add some CSS code, user browser inspector, and add some code to override what's happening on the webpage so we can polish up or web design. Overall, CSS is a language. A language is difficult to learn overnight. It takes time, and I recommend diving into CSS using some of these tutorials and practicing it yourself with your test website when you're Devi theme or whichever word pristine you're using on your hosting server. And editing using your browser inspector as well, which is a great way to learn CSS through what I call sandboxing. Since those are nondestructive edits, a CSS is very important. It's something that you'll use day in and day out as a web designer. And I encourage you to dive into CSS to learn as much as you can, because you'll absolutely be using that to give design and style and polish off your web designs. Now that's a solid start to your CSS knowledge. So let's recap what we've learned about CSS. One, CSS is a necessary web programming language to CSS says adds design and style to your webpage elements. Three, Devi has built-in design options, but CSS can help achieve effects that Devi cannot. For CSS, media queries enable you to fine tune your design for various screen sizes. And what's your homework? I want you to try adding some CSS snippets to your website. Research some tutorials so you can continue your CSS education. I'm late. And now you know, an overview of CSS. 21. Advanced Concepts - Speed & Performance: Welcome, I'm late to your webmaster. And today's lesson, let's talk about some more advanced concepts of a website. The speed and performance. Let's start with a question which sounds more appealing to you. A website that loads in 10 seconds, or a website that loads in two, you'd probably prefer to seconds. In fact, is there a chance that you wouldn't even wait for those 10 seconds for the first site to load. Statistically speaking, some websites actually lose traffic and even revenue because of slow load times. So you and I both agree that a fast website is ideal, but who else agrees with us? Google, search engines have always recommended having a fast loading website. But as of May 2020, one Google search engine ranking algorithms got another upgrade to prioritize what's called Core web vitals, which is a group of performance indicators that basically they tell you how fast your website and loads. And the point of all this is your visitors, your clients, and the search engines would all prefer your website to load as quickly as possible. But admittedly, that can be easier said than done. And that's also why this is an advanced concept lesson. If there is so much that goes into performance and dictates the load time of a website. It is not just one click of a button. So how exactly do you increase the speed of your website? What do you think impacts the load time? Well, there's a ton of factors, so let's just cover eight of the major ones. And please remember, the Web continues to evolve. New software comes out, coding languages, mature WordPress updates itself. So it's super important that you continue your education and research the latest developments in a web design. That being said, let's go through these eight performance principles, namely hosting images, videos, plugins, redirects. And then in the next lesson, we'll wrap up with caching, CDN and minification. So the first one, hosting, remember, your server is the foundation of your website. It's infrastructure. I cannot overstate this. Hosting is the number one biggest contributor to your website's performance. Hands down at they're all how stable is a house? If the foundation is a weak C, cheap, shared economy servers, by nature are simply limited in their performance potential. That means that all the other performance tricks you implement can only do so much if you're on a low quality server. Now, that doesn't mean that hosting is the beginning and the end of your performance audit, but it is the core. Your performance potential is restricted on a lower end server. Now on the other hand, if you're on a terrific cloud server, like cloud ways, but you neglect other performance recommendations. Your site's load time could still suffer. Now of course, when you're first starting out and you're on a slim budget, a few extra seconds of load time might be an acceptable trade-off for affordable hosting. And that's fine. But when the time comes to take performance seriously, consider dedicated or managed cloud hosting as step number one in your audit. Now personally, I absolutely love Cloud ways as a managed Cloud server. And I think there's still on the Affordable end. Now, there's a convenient link to Cloud ways in the course description. And you can review the hosting lesson back in Section 1 of this course to recap the various hosting options available to you. Number two, images. And this is a huge contributor to page load time. But graphics are pretty much essential for equality design. After all, can you recall visiting a website that did not have any images whatsoever? It's rare. It's the most sites use a combination of images in the background and the foreground. Whether that be abstract background images, pictures of the team, the company logo, product images, photo galleries, websites are full of images. To how does this all affect performance and speed? Well, first off, one standard photograph will typically be larger than the entire webpages. Html. Multiply that by several images and you can see how images account for such a large percentage of all internet traffic. For example, think of an image from a smartphone camera. What do you think the typical size of a smartphone photo is? Traditionally, high-definition photos could be around four megabytes depending on your phones, file type and compression. So let's say that five of those photos are uploaded directly to your website without any resizing or compression. How many megabytes with that add up to? Just the photos themselves. Would be 20 megabytes, which is extremely large for a web page. Uploading raw images to a website. That's a major mistake that new webmasters make. And often it's because nobody tells them otherwise. Say WordPress will accept pretty much any photograph you try to upload without any indication that you should do anything to the image before you upload it. Wordpress is technically supposed to handle this for you. They create different thumbnails of the image. But for the sake of performance, your best practice is to optimize it first, then upload it. So how would you optimize an image? There's a three-step process. Step one, look at the file type. Jpeg works in most cases, when p is also a good choice. So long as you make sure that there's a JPEG fallback for browsers that don't yet support WebP. But for the most part, JPEG is universally recognized and very compressible. Now you may have heard of P&G, but the quality a PNG is so high that the file size is also much larger. So this should only be used if you need transparency for your web design project. Step do resize. Ideally, your images should be resized down to the resolution that you actually need to display it. For example, if you're displaying a headshot JPEG image at 600 pixel width, you can scale down the huge for 1000 pig. So high definition headshot down to 600, since that's the rendering size. Alternatively, you could just scale it down to 8800 or 1200 pixels. And that will appease devices that have a higher pixel density, like two times or three times. In other words, a 1200 pixel image rendered at 600 pixels on a high density device. Well, look high-definition instead of pixelated. Step 3, compress. This is where you squeeze a few more kilobytes off of your file size by removing bloated metadata and other unnecessary junk without compromising image quality. You could, for example, take an image from 200 kilobytes down to 150 in just a couple seconds with an image compression tool. And now there's plenty of free ones. I personally use image optim.com for the Mac, but there are several free ones. Just drop in your photo and it automatically saves the smaller version. So if you follow those three steps, the file type, resize, compress, you'll shred a major percentage off of your webpage size and your load time. So let's look at an example here we have an image and this is a PNG file. And let's say the client wants this uploaded to the website. This is an exterior photo of the nursing home, but it's in PNG format. It's very high-quality and it's 11.5 megabytes, which is far too large for a website to load. So it's in PNG, which would typically be used for transparency. But we don't need transparency in this particular photo. So I think JPEG or web p with suited just fine. So first we need to convert it to the JPEG format. We want to look at the file type and then resize it and then compress it. So let's drop it into Photoshop here. And you can do the same in mac Preview. You can do the same in the paint program. You can do this in pretty much any image editor. So first, we're going to resize it down to an appropriate size and we want to display it. So we click image at the top and then image size. And let's take it down. It's 2000 pixel width. So let's say the client wants to display this at 100 pixels. We could keep it at 2000 to display it at two times pixel density. But to make this simple, Let's just take it down to 100 pixel width. Since that's how they want to display it. We take it down to 100 pixels and click Okay. So this is going to be a lot smaller in file size, but there's still more that we can do. We want to take it from PNG to JPEG. So that's our next goal. So we go to Save As and then go into the folder that we're saving this into. And we're changing it from PNG file format to click Save as a copy, and now we're saving it as a JPEG. So instead of PNG, we're saving this as a JPEG and click Save. And now this brings us to quality. So for a website, there's no need to go any more than say six or seven. I like to do five or six for the quality and it still makes the photo look good, but it just read a little bit more file size down. Let's take it to five, and then click Okay. And we'll see what we're working with now. So we have the PNG file that was 11 megabytes. And now we have a JPEG file that has a 120 kilobytes that's far less file size and that's going to load a lot faster on a website. And let's see if the quality changed. So this is the PNG file and this is the JPEG. So aside from it being smaller, the photos still looks good. But let's try to take it down just a little bit more with our image optimum image compressor. So we have a JPEG image at a 120 kilobytes right now. And we're going to drag and drop it into the image Optum app. And let's see how quickly it compresses it. It's already done. So it took it down to 92 kilobytes, and that's a savings of 23 percent. So we took a PNG file from 11 megabytes down to a JPEG at 92 kilobytes. What we have done there is we've basically optimized our image and our PNG file. We optimize that for the web by changing the file type, by resizing it, and by compressing it. And now this one is ready to upload for our website project, we can upload that into WordPress and start using it. Now the third tip is videos. This is another major contributor to web page load time. But videos are so important right now, right? How do we consciously integrate video into our clients websites without sacrificing performance of the site. Well, let's talk about this. For example. Let's say you want to add a video tutorial to your site. You create, edit, and export the video file. But then what do you upload this directly to your website via FTP or did the WordPress media section? It's possible. Wordpress does allow video uploads. But for the sake of performance, absolutely avoid that. And unless your video is just a few megabytes, say, when you host your own videos on your server, they take up a ton of space. High-definition videos can easily be over a 100 megabytes. This is especially an issue on a shared server. You have limited space. You could even be violating the hosting terms, which could get your hosting account shut down entirely. And even if you can upload large videos to your hosting provider, it will likely provide a poor user experience. And think about it. If multiple users attempt to watch a video on your site at the same time, your server will need to deliver that huge file to all of them. If your server has a limited amount of bandwidth, this could result in lags and pauses in the Playback. Have you ever watched the video that pause every few seconds to buffer. How did that feel? Probably frustrating. Don't do this to your visitors or to your clients visitors. So what's the solution to this issue? What comes to your mind as an acceptable way to display your videos without uploading them to your website. You can try a third-party hosting, video hosting service like YouTube, vimeo, Wistia. And then once you've uploaded your video to their website, you embed it onto your webpage. That video hosting service will handle all the bandwidth, the rendering, the compression, all that advanced stuff on their end while displaying the optimal viewing experience on your webpage without overloading your server. This process saves space, results in faster load times and is extremely easy to do. Number 4, plug-ins. Another way to improve your website's performance is by keeping an eye on plugins. Now on a WordPress website, it's so easy to fall into the trap of installing another plugin every time you need additional functionality. But do you think that there could be a downside to accumulating a whole bunch of plug-ins. You're right. The performance could suffer. See you every plugin Haven, even performance related plugins, ironically, must be loaded in order to operate. So each plugin adds to the page size and load time. Some are really small, short, while others like Woo Commerce or extensive. So do you think that this means that we need to just avoid plugins altogether? No, not necessarily. Some plugins are necessary either for the management of a website. Think backups, security, what are the functionality? Like a book and calendar or e-commerce? So my advice to you is to be very intentional with your plug-in choices. Pick and choose your plugins carefully and review them every few months to see if there's any that you can deactivate and be aware of things that you can do within WordPress or Devi without needing to add an additional plugin. For example, when you install Google Analytics for tracking, Google gives you a snippet of code that they want you to place on your website header. So do you think that this requires a plugin to install? There's plenty of Analytics plug-ins available. But Devi and many other themes has an area where you can add code to your websites header and footer. In other words, you can achieve this functionality within Devi without bugging down your site with yet another plugin. Other times, you'll research a problem and find a solution that requires editing your themes. Functions.php file. That's common. Adding a plugin might solve that problem too. But if there's something that you can fix by just adding a piece of code to your themes functions.php file. That solution is much cleaner and lighter than adding another plugin. So keep an eye on those plugins and your website's performance will thank you. Number 5, redirects. Have you ever visited a webpage only to be redirected to another page? Occasionally, there's legitimate reasons to do this, like tracking or short vanity links like Bitly, or when a company changes domain names, but still has sites linking to the old URL. But when a web page redirects to another, do you think that happens simultaneously? You're right. It doesn't. Each redirect takes a little bit of time, and several redirects could add up to a few seconds. Precious time indeed. So think of redirects like taking the long road into town. Cutting the redirects is like taking a shortcut. So your best practice for performance is to limit or eliminate redirects unless absolutely necessary. Finally, we'll finish the remaining three performance principles, caching, CDNs and minification in the next lesson. And that's it. There's an overview of some of the best ways to improve your website's performance. And again, I encourage you to continue your education by reading up on the latest developments and best practices in this industry. Because things in web designer always evolving. And we have only scratched the surface of performance ideas in this lesson. So let's recap all of the tips we just learned. You can optimize your website's performance by 1, upgrading your hosting to optimize the images. Three, hosting videos externally for deactivating unnecessary plug-in. Five, limiting redirect. Now we'll wrap up the final Greek tips in the next lesson. So what's your homework? I want you to implement the five performance suggestions in this lesson on your website. Be prepared to do extra research when you run into any issues. As the guidelines in this lesson, I require fine tuning for your particular project based on your hosting search. And I'm Leighton, and now you know how to improve your website's performance and speed. 22. Advanced Concepts - Cache, CDN, Minification: Welcome, I'm late to your webmaster. In today's lesson, let's build upon the performance principles mentioned in the previous lesson. Specifically, we'll discuss the benefits of caching, CDNs and minification. Let's start with minimum. Heard of unifying. And suppose the word into web design space. So let's put it in simple terms. Magnifying code means removing anything that a computer doesn't need in order to understand and carry out the code. This includes code comments, whitespace, unnecessary semi-colons. For example. This makes CSS, JavaScript, and HTML files slightly smaller so that they load a little faster in the browser and take up less bandwidth. All good things. On its own. Minification will only result in minimal speed improvements. However, implemented along with these other tips in this lesson and the previous, will result in better website performance, which is our goal. Another term that goes along with this is combining, which means combining multiple CSS and JavaScript files into one. The fewer files to load, the better. So how do we go about this? Do we just check some minify and combined box? Well, in some cases, yeah. Let me explain. So there's several ways to accomplish minification. You could manually minified all files yourself one by one, by copying and pasting them into an online code minifier. You could install a minification plugin. You could enable minification within Devi. You could even turn it on through your hosting server. There's several ways to accomplish this, and here's your best practice. If you turn on minification on a server level before your plugins even begin to load. That would be the most efficient way. The best-practice. I like to use minification in Cloud flares free plan, and we'll talk about that in the next point. Beyond that, if your theme has minification built-in and Devi does try that as a final option. If all else fails, you can install a minification plugin like I'll top demise. But remember, your WordPress software has to load first and call up that plug-in before it even starts working. In terms of milliseconds, that's a slower option by nature. However you accomplish minification, you must remember these two rules. One, only use one method of minification at a time. You should not turned on multiple forms of minification. These are not designed to work together that can lead to problems down the road and to always test. Minification could break your website if not implemented properly. Anytime you turn it on or off, you need to refresh your website to make sure it's still operational and looks good. So in summary, turn on one reliable form of minification. Test it out and enjoy a minimal performance boost. Do Content Delivery Network or CDN. Let's look at the value of a CDN or content delivery network, or CDN is another popular web development term. One is a content delivery network. Well, in simple terms, with a CD in a network of servers, host your website locally to speed up web page load times. For example, a user in Ireland accessing a website hosted in California wouldn't have to ping the American origin server, but rather a closer one in Ireland, essentially, copies of your site are stored at multiple, geographically diverse data centers so that users have faster and more reliable access to your site. So how do you install the CDN? Do you think these are expensive? Not necessarily. There's plenty of options. Key CDN, stack path, Amazon CloudFront, bunnies, CDN, Fastly, Cloud ways has its own CDN for only $1 per 25 gigabytes. All of those solutions can work well if configured properly. But what's the CDN that I prefer? I start off with the free version of Cloudflare. They not only offer CDN service, but combine that with security and optimization features like minification and caching. I actually use the free Cloudflare as my exclusive CDN and minifier. Let me show you what Cloudflare has to offer and how to turn on their free CDN. So here we are at cloudflare.com, my CDN of choice. So they offer numerous solutions here for all kinds of things related to the internet and an online experience. Let's look specifically this time at products and C, D in. So this takes us to cloudflare.com slash cdn. It's a fast, agile, and secure global network. They offer ultrafast, static and dynamic content delivery over their global edge network. So let's see just how extensive that network is by clicking expansive global network here to see all of their data centers. The Cloudflare network spans over 200 cities in more than 100 countries, which is amazing, especially since their base product is free. So here are some of the cities and countries and continents that they support their networks in. So to get started with Cloudflare, all we have to do is click the Sign Up button and connect our domain name. Once we do that, we'll have our Cloudflare account. And in order to use Cloudflare, one important thing to note is that they do require that your name servers be at Cloudflare, which means the name servers will be used with Cloudflare to use Cloudflare, ensure your DNS servers or name servers have been changed. These are your assigned Cloudflare name servers. So these are the ones used for my account, might be different for yours, but you do have to go into your domain register, such as Google domains, GoDaddy.com, Iona us, whatever you use for your domain register, you have to click name server and change it to Cloudflare in order to use the Cloud for their services. So in that case, once we do that, Then Cloudflare will be our new spot to go to to edit our DNS records. So again, once your name servers are pointed to a different company or service like Cloudflare. That is where you will manage your DNS records. So just the fact that we have Cloudflare installed means that the CDN is working. Let's click through some of these real quick to see what is included in the Cloudflare free account. So here's some analytics on the visitors we've gotten and the data that has been cached when they're cashing services would get some analytics data here under the Analytics page. Now under the content delivery network, we also get built-in security, which means that Cloudflare is protecting you against threats and breaks down here the threads by country. In the last day, week or month. Top threats, top type of top types of threads. And then we have our DNS records. We've got SSL security, we've got the firewall built-in here, which is part of their security services. Cloudflare access, speed optimization. We can turn on some of these settings. I like to turn on the auto minify here. I turn it off in Divi Theme Options, and I turn it on in Cloudflare, since this is server level minification. And then we can selectively turn on some of these. If we so choose to. Caching here. And a few other services are rules are important. We can go in here and we can set up a page rule. And there's several best practices for that. I like to have a base rule of caching everything, which is our domain name slash asterisk, cache, everything just makes the site load faster. And then the security level high for WordPress admin. And then this is the Visual Builder. We bypass cache on that. And then under network here we can see some network settings. And we can turn on and take advantage of to speed things up. Traffic. And then a few others here. So that's Cloudflare. If we have Cloudflare connected and turn on successfully through the setup of Cloudflare and through the name servers, then that's it. The CDN is automatically turned on and we can benefit from the Cloudflare services. Now the third performance tip is caching. Here's another popular web term. Have you heard of caching? Whether you realize it or not, your browser and the websites you visit are probably already using caching to speed things up. Here's how it works. When a site caches, the server saves copies of its webpages. So you don't have to start from scratch. Every time the website loads. You remembers how the website looked recently and shows you that. Now in addition to server side caching, your browser is probably already saving copies of webpages on your device as well. With multiple layers of browser and server caching, you can reduce load time, which increases the sides performance. So a couple of questions come to mind. Are there any downsides? And how do we implement caching? Can you think of any potential issues of your server and browser showing you a recent version of a webpage. Think about this. What if you've updated your contact form on Wednesday? But the browser is still showing Tuesdays version. Hey, that's a common issue. Caching generally has a TTL or Time to Live and basically how long the cash should remain until grabbing a new copy. If you want people to see a recently updated webpage before that copy of it expires, you might have to do what's called flushing or clearing the cache. This is when all caches flushed automatically expires, so everyone sees the latest copy. This can be done on your browser as well as on the actual server. So how does one implement cache on a website? That's our next question. Well, as we mentioned, unlike minification, there can actually be multiple layers of caching. Now that doesn't mean you should install every cash related plugin you find. Rather, that means that you can have your browser cache, WordPress, cash, hosting, server cache, et cetera. There's plenty of caching plug-ins out there. There's WP total cash, WP rocket, WP Super Cache, a top demise. So which one do I prefer? Well, as mentioned in the Cloudflare demonstration, I actually use Cloud flares free caching, which is quite good. See instead of relying on WordPress plugin, it's more efficient to cache on a server level. Now actually Cloud ways does offer its own caching through the breeze plug-in. But I prefer Cloudflare, especially since it's free and easy to set up. Let me show you my ideal Cloudflare caching setup. So we looked at this briefly a moment ago. Let's look at it in more in-depth in Cloudflare. And we go to caching and then configuration, and we can see exactly what the caching settings are. So one important thing to note is the purge cache. We can go in here in our Cloudflare account. We can select our website and we can either purge everything, which will force the Cloudflare to fetch a fresh version of the files from your web server that will allow the website visitors to see the fresh version of the website. Or we can custom purge and selectively purge a particular webpage on our website. You might do that if you've made changes to a particular webpage, but you don't need to purge the entire website, just that one page. So keep an eye on those settings. The purge cash, that's a common one that we'll use. And then caching level, I'd like to keep that at standard browser cache Time to Live will keep it at four out, four hours. Always online is a nice feature to keep your website online for visitors when your origin server is unavailable. So this would allow your website to stay online even when things go down, thanks to Cloudflare. Now we have development mode which will bypass cache while we're working on the website. You can turn that on if you want. While you're working on a page. And beyond that, let's go into rules and see a best practice for our caching rules. So we get three for free, including him included in the Cloudflare free account, and then we can buy more page rules for just a few dollars if necessary. But I like to start out with this. So we put in our domain name and then slash asterisk, which means absolutely everything on the web server. And we make the cache level, cache everything that looks like this, the page rule, this means everything on the web server, cache level. There's plenty of settings we can apply here. Cache level, and we'll put cash, everything, and then click Save. Beyond that. Our domain name slash WP, admin asterisk, which means everything WordPress admin related. We're gonna do a few things here. Let's do security, high cache level bypass. We absolutely want to bypass all cashing in WordPress admin, disable apps and disable performance, and then click Save. And then the Visual Builder here, this is a nice way to bypass caching on anything related to the visual builder. Now this is the URL that gets appended to any web page that has the visual builder on. So I like to put the domain name and then slash asterisk and then paste this, which is what gets appended when we're using the Visual Builder. So basically any page where you click Enable Visual Builder, we're going to bypass cache. We definitely don't want to serve any caching on those pages since the Visual Builder is designed to make changes to a web page, we don't want that to be static. All right, and then we can order these as well. So this is a level of importance. So we start out at the bottom with caching everything, and then the rules get higher priority as we go up. So number one, highest priority, I'll put the Visual Builder number to the WordPress admin number 3, we'll do cache everything. There's other ones that you can apply. We can apply rules for our cart or checkout our account. We can bypass the cache on those pages, which would mean there's absolutely no caching taking place on the cart and the checkout and the account pages because we want those to change as people add and remove and update their cart. And as they put in their account and credit card information, we really don't want to cache anything on those pages. So we make those as high priority page rules. This is a more advanced setup here. I've included media uploads. Since this is a, a higher end website. I've included a few more here. The media uploads, we're caching everything and then ajax, we can bypass cache on web calls that are using Ajax. And at the very bottom, the lowest priority is to cache everything. So that means that any one of these can override the bottom one. Because sometimes we want to bypass the cache. And again, when you log into your Cloudflare account, the number one setting you'll be going into is this purge cash here. We can click that purge everything or we can custom purge. And another thing that you can do by going to your website and Going to the Cloudflare plugin on your website. If we install the Cloudflare plugin on our website, then we can have those caching options available to us under settings. And Cloudflare, this is the official Cloudflare plug-in and lets us purge the cache right from our WordPress admin. And it also has under settings here, Auto Purge content on update, which means it purges the cash automatically when you update the appearance of your site. So that's a very helpful feature. And this enables us to have our cash purging directly in our WordPress admin. So that's the caching settings available through Cloudflare. And this is a very, very helpful solution which speeds things up, makes everything load a little bit of faster and bypasses the need to just grab the new page every single time somebody loads the website. Because for the most part, what types don't change very often. So we can take advantage of caching to just speed things up. Cloudflare does this for free with their free plan. And it's super helpful to have this turned on. And that's it. That's an overview of three more ways to improve your website's performance. And again, please continue your education by reading up on the latest developments and best-practices in this industry. Because the web is constantly evolving. And we've only scratched the surface of performance ideas in these two lessons. So let's recap the three performance tips. In this lesson. You can optimize your website's performance by one, magnifying your code to using a CDN, and three, caching your website. And what's your homework? I want you to implement three performance suggestions in this lesson on your websites and be prepared to do extra research when you run into any issues as the guidelines in this lesson might require fine tuning for your particular project on your unique coastal zone. I'm Leighton, and now you know how to improve your website speed and performance through minification, caching, and content delivery networks. 23. Advanced Concepts - Email Deliverability: Welcome, I'm Leighton, your webmaster. Now in today's lesson and let's discuss another advanced web design concept, the importance of ensuring e-mail and deliverability. What is that? Ideally, what happens when someone fills out the contact form on your website? How do you receive that message? It goes to your email inbox. What if you're building an e-commerce website that has order notification, emails like order placed, receipts, invoices, cancellations, Shipment Notifications. And generally, those should land in your e-mail inbox of the customer or website owner. Is that guaranteed? How do you know for sure that those e-mails will successfully be delivered to the appropriate inbox. That's where email deliverability comes in. Think of it like a postal service. If you live in a country with a National Postal Service and you mail something, how does it get from you to your recipient? The mail service handles that for you. You trust them to ensure deliverability of your mail. Likewise, into digital world, email deliverability companies are the middleman between your website and your email inbox. Their sole purpose is to get those shipping notifications, password resets, promotional e-mails, they in contact form submission e-mails successfully delivered. But when it does become such an issue, I mean, in the past, you could just set up a form without worrying about any of this stuff. Form submissions would reliably land in the proper inbox. So what changed? Well, it all goes back to spam. The onslaught of spam lately has been such a battle for email providers. Not only can spam land than your inbox, which is annoying, but legitimate company e-mails incorrectly be labeled as spam. Or worse, many emails don't even make it that far. Plenty of emails get outright rejected when they don't pass the mail servers, spam tests. What does that all mean for you? It means that if your website is not configured properly, then e-mails coming out of your site could get mislabeled as spam and rejected. That's definitely worth your attention as a website owner and a web designer. So let's look at a few things. One, what little misconfigurations could trigger a spam or rejection response to what DNS records assist in email deliverability. And three, how to integrate a third party e-mail deliverability service. So first off, let's continue our email deliverability 1, 0, 1 with a few more things to look out for. The number one biggest issue in the email and deliverability space, shared economy servers. These are two more affordable web hosting plans that Paula up a bunch of websites on the same physical server. How does that impact your emails? Well, all email accounts on that same shared hosting server means yours and everyone else's will share the same IP address. Remember mail servers don't look at domain names. They see IP addresses. So if one email account on that IP address is sending out a bunch of spam or the recipients of their e-mails are complaining an unsubscribe, then the entire shared IP address suffers. That one mail account of somebody you don't even know affects the reputation of everyone on that same mail server. Now as a disclaimer, That's not to say that those IMAP and POP mail accounts on shared web servers aren't reliable at all. They're easy to set up and capable of working perfectly fine. It's just valuable to understand the nature of these mail servers in case you run into issues. If your emails aren't getting delivered or your outgoing mail is incorrectly flagged as spam, your mail server. That would be one thing to consider. As you recall in the emails less than of Section 1 of this course, IMAP based mail accounts are a good start. But what was the upgraded male solution? We talked about? Microsoft 365 and Google workspace are the most popular business class e-mail solutions. They handle all that technical stuff for you. And your emails are hosted on their servers, their IP addresses, and not yours. And from a technical perspective, it's generally a best practice to have your website and your emails hosted separately. So in addition to avoiding hosting on a server that's been flagged as spam. Let's look at a few minor points. You know that all emails have a from and a to write the sender and the recipient. This is an addition to the subject and the body. And beyond that, there are plenty of header tags that get attached during an emails journey through the mail servers. Let's clue in on the from. When an e-mail comes out of a website, you can specify the address it comes from. Now the default Devi contact for module uses mail at your domain. You could override this with a snippet of code in the functions.php file. But overall, that one works. All right. Other form plug-ins like Gravity Forms, Ninja Forms, Contact Form 7. Let you specify your from address. First off, make sure the from include your domain name. The email address your listing us from must include the domain name which the mail is coming from. Otherwise, automatic spam, maybe even rejection. Next up you're from and your two should not be the same. In cases where you're from and your two both contain the same domain name. You could, for example, make your from Mayo at and you're to contact that. Additionally, though from should ideally be a mailbox, an alias, or a forward that can receive e-mails, especially in case that something gets bounced or returned. Finally, in order to improve deliverability within your mail client, you should add the from like mail at your domain to your contacts. This will train your email client that e-mails from that address are safe and should be delivered to your inbox. So those are the settings that you can configure on your contact form to maximize deliverability. Now, let's move on to your domain names, DNS records. As you recall in Section 1, the fundamentals of web design lessons, DNS records are little bits of information attached to your domain name to dictate web and e-mail traffic. Now there are three specific records that affect email deliverability. And that's SPF, DKIM, and DMARC. Let's break these down. One SPF sender policy Framework. Spf records protect your domain against spoofing and help prevent outgoing messages from being marked as spam. This one you should definitely have no matter where your emails are hosted. Two, you can increase security for outgoing e-mail with DKIM or domain keys identified mail. Use this standard to help prevent spoofing on outgoing messages sent from your domain. Some servers allow this and some don't have support for DKIM. Three, you can increase security for Ford spam with demarc, domain based Message Authentication, Reporting and conformance. Demarc is a standard email authentication method that helps mill administrators prevent hackers and other attackers from spoofing their organization and domain. This is a basic record and it's nice to have. Now if you're using Google or Microsoft or e-mail hosting, you can find these records in your account. If you're using Ioannidis with IMAP accounts, you can use their SPF and DMARC records. Wherever your emails are hosted, check their support articles for the appropriate records, and then input those onto your domain names, DNS records at your domain registrar. So let's look at some sample DNS records here to improve email deliverability. Starting with SPF. Spf protects against phishing and prevents messages from being marked as spam. Now this is a Google workspace article and this will give us the SPF record for the Google workspace if you're using Google for your business e-mail hosting. So we need to define the SPF record. Let's click the basic one. And this will give us the SPF record to prevent phishing for Google workspace accounts. So this is the basic SPF record, and this only includes Google. So if all email from your organization is sent using Google workspace only, copy this line of text for your SPF record. This means any e-mails coming through or going out on behalf of SPF dot google.com, basically, your Google account, those are legitimate. And this squiggly line all would be a soft fail. So this is the record we would add if we're using Google workspace exclusively. So that would mean no other emails routed through other servers. Would be acceptable on that domain name. So we would copy that and paste it in our DNS settings. So we go to our domain register. Here's Ioannidis, for example, go to DNS and then I already have one installed here. It's a TXT text record on the route or at symbol here. And we can edit this one. If we're using Google workspace, then we would just paste that record just as is. Otherwise, if we're using Jonah's for example, this one means this is Jonas, and then this one is also ionise. So that's saying that any emails from any of those three servers would be acceptable. This would be the base SPF record for Jonas. We can see that here under ionise, using an SPF record to prevent spam, if you're hosting your emails on your eye witness account. We can get her SPF record here. Configure SPF record and creating the record. This is the soft fail setting. And there's the record you would copy and paste if you're just using Island us exclusively. I recommend reading through these articles just to familiarize yourself with what SPF is all about. But that would be with Iona us. This would be with Google workspace. And then if you're using Microsoft 365, they have their own article set up SPF to help prevent spoofing. And it gives us the record here. This is the most common one. It's the V, V equals S P F1. And then here's your include include SPF dot protection, not outlook.com. That's the standard one that we would add. If we're just strictly hosting on Microsoft 365. Your basic case would be as P F1 include as PFD protection not outlook.com. And then dash all. You can read this article more in depth if you want more information about the SPF records. So what about the DMARC? Use that to validate email. So this is an extensive article here where we can find some sample. The marc records. The most basic one would just be V equals demarc 1 p policy, PCT equals 100. We can do P equals quarantine, which would mean suspicious e-mails need to be quarantined. Or you can set your policy to reject or set it to nothing. Now that can be customized based on your situation. So if you have a client who needs a more advanced setup, then you might need to customize these for your particular setup. We would copy and paste that into our register and then add that as a TXT record. And then what about DKIM? Dkim validates outbound email and we would get these records through our Microsoft 365 account. I own OS does not provide DKIM records for you, but you can get yours in your Microsoft account or through other e-mail hosting if it's provided with your email server. So we would get that by logging into our account and then copying and pasting those codes that are provided and that would be added as a CNAME record. So that is how we get our SPF records are demarc and if possible or DKIM records. And that is where we would find those and that's where we would install them in our domain registrar. So each of those will increase the e-mail deliverability and help with spam and phishing and email security. Finally, let's look at how to integrate a third party e-mail deliverability service, which one to choose, and how do you determine if you even need one? So before we even look at the options, The first question is, do you even need an email and deliverability service? And the answer is, maybe not. The Without illness and other web hosting platforms, your shared hosting account for better or for worse, includes the mail server, which means that they handled deliverability for you. It's very convenient. In that case. Ask yourself, are my emails being delivered in a timely manner? Does anyone complain that my emails to them land in their spam folder? Do I receive contact form submissions from a website? See if everything is running smoothly. I personally wouldn't worry about connecting a third party service. Now we need to fix something that isn't broke, right? Plus implementing everything we've talked about so far, the from the two SPF DKIM DMARC records, that should vastly improve your deliverability. Now with Cloud ways and other managed cloud hosting platforms, on the other hand, they do not provide e-mail hosting, and therefore do require that you bring in a third party deliver bloody service. Say they strictly focus on web hosting, which means you need to bring in an e-mail provider like Google, Microsoft, Rackspace, and you need an email deliverability service. So in that case, whether you're on our hosting platform that doesn't offer emails, or you've been having trouble getting your e-mails delivered. What options are out there to ensure deliverability? And how much do those services cost? Let's look at a few of the biggest players. Sendgrid, elastic email, as well as Google and Microsoft's own solutions for this. So let's look at some of the biggest players in email and deliverability, starting at Sim grid and see how these work. So this allows you to send e-mails with confidence through your web server or through your marketing service. And it's MIMO service that's trusted by developers and marketers to make things easier, scalable, and most importantly, ensured that deliver, delivery happens. So if we scroll down here and we can see the SendGrid API, which makes it really easy to integrate the SendGrid service into your app. And in our case, we're just going to be adding it directly to either our Cloud-based server or to our WordPress account. So that's SendGrid. Another one that we can work with is elastic email. Now this is very similar and it enables e-mail deliverability. These services have sent millions, billions of e-mails all the time and they ensure deliverability. So what's the pricing for these services in this case, send unlimited e-mails to 5000 contexts for $15. In sin grids case, they have simple pricing. They start out with a free account and the F31 is $0 per month, and that gives us a few emails, 100 emails per day forever. So that's there forever free account. They also have other plans starting at 1495 US dollars per month. And you can toggle this slider to see how many emails you're sending per month. And the price varies based on how many emails you're sending. So if you are sending a lot of e-mails for your clients, then you might need a higher in the count. But for the basic 100 emails per day works for a lot of small businesses. So let's see how we integrate this into our WordPress website. So if we're hosting on Ioannidis or any other web hosting service, then we can go to Add Plugins once we sign up for our SendGrid or our elastic email accounts, Let's say SendGrid, we would click Start for free. And then you just put in your company information and your e-mail and password to create your account. Really simple to create your account. And once we do, we will have the credentials needed to add our domain name and set up your SendGrid account by setting up the primary email address or just verifying your entire domain name. So here's a plugin that we can use to integrate sin grid quite easily. It's post SMTP, mailer or email log, send, log and get notified when your emails are failing. So this isn't really easy, lightweight plugin. And we can use to integrate to Office 365, to G-mail, to SendGrid, or to plenty others here. It's compatible with all kinds of plugins to make sure that your outgoing e-mails out of your WordPress website, like your contact form or your e-commerce setup that those e-mails get where they need to be. So it connects to male gun, to the very popular e-mail deliverability service. It connects to mandrel, Gmail, SendGrid, any of these male gun is another popular one. Another email deliverability service comparable to send grid and elastic email. Their prices vary, depend, depending on how many emails you're sending per month. And then mandrel is a paid Mailchimp add on. Once we install that plug-in, we can integrate our SendGrid account by following the setup instructions. So that's the WordPress setup. In order to set up our plugin, we can just follow the step-by-step instructions included in the post SMTP Mail or account. They'll walk you through it step-by-step. But there's another important step we have to do in order to install email deliverability. We have to get our domain DNS records. So there's a helpful article here from SendGrid. They will walk you through this when you create your account and when you integrate your domain name, they will walk you through the necessary DNS records that you have to install on your domain register, like you're GoDaddy, or your Google domains or cloudflare or ion us. Wherever you have your DNS records, they will give you the necessary ones that you must install in order to integrate SendGrid, the same for elastic e-mail. That one has their own DNS records. Elastic email. If you're using Cloud ways, they have their SPF record and the DKIM record. And the tracking. That's a C name, the MX record, and the DMARC sample record. So that's if we're using elastic email with Cloud ways for using SendGrid will get that in our account. But this article helps walk us through what this is all about. And get more direction in our SendGrid account will get the actual DNS records that we would have to add into our domain register. Once we add the domain and the DNS records into our SendGrid account. Then it's set up and we can add our plugin. This plugin enables emails out of this website to route the r2 sin grid or whatever your email and deliverability service is. We can also use Gmail. If we have a Gmail account or Google workspace, how to configure Gmail SMTP. Gmail also offers a free SMTP service. They prefer that you only use this if you're sending a low volume of emails. But they do have an SMTP server that you can use. You can set that up with post mailer that plug-in we talked about. Or we can use a different SMTP plug-in and just follow the instructions to set up our Google account. So then we would be routing all outgoing e-mails out of our website through our Gmail account. Now if we are using cloud ways, how do we integrate elastic email for email deliverability? We login to the platform dotCloud ways.com. And we go to Add-ons here. And by clicking this check mark icon, we can see the verified domain names. And we type in our domain name. And then it will test the verification to see if we've added the appropriate DNS records, which are the ones we looked at earlier, which would be your DKIM, your SPF, your DMARC records, and the tracking. See you name. Once we've added all of those appropriately, then we click Verify domain, and that's it. Then that domain will be verified. Can also go into servers here. And we have to pick up our server and go into SMTP. And we can select the SMTP service that we're using for outgoing e-mail deliverability on the server. Now with Cloud ways that is necessary to install an SMTP server with illness and other web hosting services. That might not be imperative that you get your own SMTP server. But with Cloud ways it is imperative. You can have your own SMTP server, such as mail, gun, mandrel, authors, MDP, Sim grid, or another one. If we entered the host port username and password manually. Once you have your SMTP server server setup, that means all outgoing e-mails out of the entire server will go through that server that you've set up. If you are on Cloud ways, the by far the easiest is to just use elastic email. And then to test that out, we can send a test e-mail and test to make sure that it's working appropriately. So what does elastic email cost on the clockwise platform? We go to elastic email here, and then we go to the edit icon here, and we see their prices. I like to use elastic e-mail because they are extremely affordable. The plan that I'm on in US currency is a little over $2 per month. And that gets us 25 thousand emails that I can spread across all client websites, across the entire server. Which is amazing. Super, super affordable. I find it's more efficient to set up one elastic email account, verify all my domain names, and then pay for 25 thousand emails across the entire server. Rather than setting up a new SendGrid account. For each individual client, it's a lot simpler and more efficient to just set up your elastic email service here. And that's if you're on Cloud ways. Otherwise you can take it on a case by case. If a client needs e-mail deliverability, improved, if they're having issues, then you could singularly set up one S and one SendGrid account for that one particular client. Or if they are on Gmail, you can route their emails through Gmail using the post SMTP Mail or plugin. You can walk through the instruction so you'll want to install it and add the Gmail account. So you there setup wizard will walk you through setting it up on Gmail. Either way, whether we're using male gun or integrating SendGrid or elastic e-mail. And no matter what hosting service were on, there are third-party options to enable email or improve email deliverability. So this, the services we're looking at would be the middleman between your website and the e-mail inbox that you're delivering, those contacts for messages or those e-commerce messages. 21. Final thought. Another really nice thing about these email deliverability services is that they give you a log of your e-mails that have been sent out. They log all of the emails that are going out and the reason that they were bounced or blocked or rejected, or if they were successfully sent, which is a super helpful feature when you're having to troubleshoot why whether or not emails were sent out properly or not. If you are on the Cloud ways account, then you can click the Email log icon here to download the elastic email logs. And then through that, you can troubleshoot your logs here to see all the emails that have come out of your server. You can see the recipient and the subject line and whether or not they'd been sent or they bounced or they've been opened or whatever. If they'd been bounced, then you can see the reason that they were not able to be delivered. Like in this case, for example, exceeded storage allocation or service on available, they're going to retry or something like that. This is really helpful when you're diagnosing issues, the emails coming out of your server. If a client's customer has not received an important email, then you can see whether or not it was sent out. And if there's a issue with an e-mail bouncing, and if there is, then we can solve that problem. And that's it. Just a few simple DNS records. And we can have our account ready to go. Cname record the elastic email here. If that's the service that you're on, a DMARC record, a SPF record for elastic email here. And then the DKIM records that are necessary for the DKIM security. That's all you would have to add to get these email deliverability services up and running and get your email deliverability improved. And that's it. That's a brief overview of the e-mail deliverability situation. What you need to know, what actions you can already take, and what your options are for a third party service. As always, with all of these advanced concepts, please continue your education by reading up on the latest developments and email deliverability as the web continues to evolve. So let's recap the four main points. The one you're hosting servers IP address, greatly impacts your sender reputation to the from and the to need to be thoughtfully configure. Spf, DKIM and DMARC records. Improve email deliverability. Span security. Or third party deliverability solutions like sin grid and elastic email. Make sure your emails. And what's your homework? I want you to review any contact forms or transactional e-mails that you've configured on your website to notice the from and the two addresses. Review your DNS records and make sure you at least how it SPF record. If you're still having trouble with email deliverability out there. All these suggestions, integrated third-party service like SendGrid or elastic. I'm Leighton, and now you know how to improve your email deliverability. 24. PART 3: How to Build a Brand: Welcome, I'm late. And your webmaster. In this series of lessons, let's learn how to create a brand. Now to kick-start this series, what is a brand? It's difficult to define, and it's much more than simply a company name. In fact, one reference defines a brand as a person's perception of a product, service, experience, or organization. So more than simply the name, it includes the identity and reputation of a company. Brands can change over time. They can develop, expand, respond, and shift with the times. Further, brands involve your feelings. How do you feel when you interact with a certain company? Do you love certain brands? Have your preferences. Do you strongly dislike any companies? A good and bad experience goes along way. And that's why successful brands today are always emotionally infused. They hold great emotional meaning for people, and that's what makes brands loved and respected. Think about it. If you had a great experience at a coffee shop, what do you do? You tell others? And what if you had a terrible experience? Same thing, yet tell others. Your emotional reaction to the experience you had with that brand moves you to act. And how you act either helps or harms the brand. Now one person's opinion on a brand might not seem like much, but at the majority hold a similar opinion for better or worse, that brand forms of reputation. So what major brands can you think of? Hello, there's Toyota, Walmart, Apple, Google, Nike, Disney, Samsung, chick filet, mcdonald's, all wildly successful, globally recognized brands. Successful brands like those have a simple universal logo that evokes any motion as soon as you see it. Let's test that. When I say the name, Coca Cola, can you envision the logo? What color is it? What's it look like? Is it traditional or cursive? Does the name evoking emotion? Do you like or dislike their soda? Yes. Look at all of the subconscious associations you have was simply the name Coca-Cola. And that's because they have thoughtfully created a successful brand. So how do you go about creating a brand that's easily recognizable and lovable? Well, there's two main components. There's identity and reputation. The first is how you project your brand, and the second is how your brand is received. Let's break these down. And as we do, I want you to notice how much control you have over each of these things. The first brand identity. These are the visible elements of your brand. The company name, the logo, the colors, slogan, etc. It includes the tone and wording of your marketing messages. Your identity are the things you can control. You can design your brand. You can make it look fun, modern, traditional, eco-friendly. Whatever you have in mind, whatever you're looking to project, all of your branding choices should consistently aligned with that goal. In fact, do you think a brand marketing to a younger age bracket would use the same word choice as another brand. Targeting seniors. What would change? Well, for one, seniors have more life experience and the wider vocabulary, they'll appreciate and understand more complex words. And a brand that projects competence and security. With the younger generation hits a beat just to hold their attention. They want discounts and they love loyalty perks. Yes, With careful consideration, a brand can send the correct message to the correct audience and that they can control. But what do they have less control over? You guessed it, their reputation. The reputation is how a brand is perceived. In fact, how do you perceive Apple? Apple projects high-end cutting edge? But does that align with their reputation? I think so. What about McDonald's? Here's some snippets from the McDonald's website. Our food uses priority ingredients, sustainably sourced, ethically produced to ensure the health and safety of both consumers and animals. All right, So what's the reputation? Does the reputation aligned with their stated goals? What do you think? What's my point? Here's my point. A brand can stay whatever they want, but the customers will decide its reputation. In fact, there's entire companies dedicated to PR or public relations to help shape or save a brand's reputation. But ultimately, it's up to the public. And the public can't change their mind. In fact, can you think of any brands I have gone downhill or maybe gone up hill. Improved over time, rebounded. Yes, a brand's reputation, much like the brand itself, can evolve over time. So to recap, what did we learn so far? We've learned one, a brand includes it's visible elements like the name, the logo, in color balance, but also the emotions evoked by a brand's identity can be thoughtfully designed to send a specific message to the appropriate audience. Three, a brand's reputation is decided upon by its customers. It can improve or worsen. And what's our homework? I want you to think of different brands and how you perceive them. Think of brand you like and dislike, and why you feel that way. So we briefly discuss how to create a brand. But then the next lesson, we'll talk about creating your brand for your website design business. This is super exciting and I'm so ready to share my tips with you. I'm Leighton and now you know how to create a brand. 25. Building Your Brand: Welcome, I'm Leighton, your webmaster. In the previous lesson, we learned about brands. And now let's learn to create your brand or your website design business. By now, you've learned the fundamentals of websites and how to build one. But now let's pivot away from websites and onto the business itself. This course is ultimately about building a website design business. So let's get to it. In this lesson, we'll consider one, the structure of your website design brand to the name of your business. Three, domain name for professional email address by logo, and six business cards. Go ahead, grab a piece of paper or a Word document or a note. As this lesson, we'll have plenty of pauses so you can brainstorm your brand. Now first, I'd like to address a fundamental difference in the two ways you can structure your business. You can choose freelancer or firm. Let me explain this by example. My name is latent Smith, but my company name or DBA doing business as is pioneer media. Pioneers are forward thinkers who embrace new challenges. And I work with digital media. Employment is, my brand name is pioneer media. Since 2006, I've branded not my personal name, but my company. But what's the other option? I could have branded myself as a freelancer and use my name, latent Smith as the DBA. Instead of hiring, pioneer media companies would hire latent Smith, the freelance web designer. Now both of these are very common options. You'll see plenty of individuals go the freelancer route while others want to create a company and possibly hire a team. So what are the differences? What's the pros and cons? What do you think? Let's first talk about a big deciding factor. And I need you to be honest with this one. Are you on in front of the camera person or a behind the camera person? If you're branding yourself as a freelancer, you have got to have a good headshot, maybe an introductory video, and share your story. You're selling yourself in addition to your services. So be likable. Let people get to know you so they're comfortable with whom they're doing business with. Now, in my case, I was a behind the camera person for years. So even the thought of putting my face on my website was unthinkable out of the question. Therefore, creating a company name was the right fit for me. And here's a tip. When branding yourself as a firm or agency, you can use the term we instead of I to make your company seem larger at first, nobody needs to know that you work so low. In fact, truth be told, you'll probably have plenty of advisors and a network of people supporting your business. So even if you don't technically have W2 employees, you can still say, we would love to help with your website, will get back to you with a quote. And which do you think sounds more expensive? An agency or a solo designer? Yeah, when you're projecting yourself as a firm, businesses will generally expect higher quality and higher quote compared to the solo designer. Plus with a farm or agency, you will naturally be in better shape to build a team by hiring designers, coders, marketers, and scale your business. Now personally, I like to keep costs down. I'll have employees, but I do have a network of professional photographers, advertising agencies, logo designers, videographers, content writers, whom I regularly pass referrals with. So pioneer media doesn't have anyone on staff. It's still absolutely truthful to say, we would love to design and maintain your website. Now we'll talk about the importance of growing your network, several lessons from now. But in the meantime, can you see the difference between selling your website design services as me, a freelancer, or as a company, a firm, or an agency. Are you already swaying one way or the other? Now one final note. As a freelancer, you can always hire people. And as a firm, you can brand yourself as the base of the company. And your brand will continue to evolve over time. So these are not set in stone rules, just general guidelines as you build your brand. At this point, please pause the video, create a document, note, or get out a sheet of paper and write down whether you'd like to go the freelancer route or brand your business as a company. Keep that document handy as we'll keep referring back to it throughout this lesson. Now second, you'll need a name for your brand. In my case, pioneer media is my company name. Now I would start by considering the competition. Do you know of any local web designers in your area? What are they called? Do some Google searches. The more agencies you'll look at, the more you'll come across trends in the names. Many web design companies have the word web design or media attached to them. The simplest naming convention is just your last name and the word design or web design, like Smith web design, very traditional choice. But there's an opportunity to be more creative. Come up with something catchy and unique. Do you consider yourself to be creative? If so, great. So you what you can come up with, if not, ask around, get some input from friends and family. And once you have a shortlist of ideas, obviously, you would want to research the local competition to make sure your name isn't too similar to another business as just certainly wouldn't want to be confused with another business. At this point. Please pause the video, write down some ideas for the name of your web design business. Research, what other companies that are called, Make a shortlist and see what sticks. The third, you'll need a domain name for your web design business. Now I actually found this helped me choose a company name. Why? Because some names you'll come up with, they don't have any domains available. And ideally, your domain name is your company name.com. For example, the domain name for my agency is www.pioneer.media. I chose this modern domain ending.media and got my entire company name in there. Once I realized that was available, pioneer media became the natural choice and it stuck. Now you can also check out other domain endings like dot design. That's a terrific idea for a web design company. And now beware of getting too crazy by adding keywords and localities. So your domain name, like Smith web design for u.com. And you, as a consumer, are you a fan of long domain names? The ones you have to keep typing and typing before you get to it. Now one is, so keep it succinct. Keep it memorable. When you found the right one, you secure it. And choose wisely, said Joe, ideal, they keep the same domain name over time. In fact, since 2006, I've only changed my company name and domain name once. And you remember the resource we use several lessons ago to look up domain names. Yeah, you do instant domain search.com. This site is an awesome tool to quickly and easily look up several domain names at once. Now I wouldn't bother buying a domain name that's already taken because I can cost thousands of dollars, which is just really unnecessary since there's plenty of domains out there. At this point, please pause the video, open up instant domain search.com to efficiently brainstorm domain ideas. Once you land on the perfect one, purchase it through your eye witness account. Now that you have your domain name, you need an email address. Let's create one on your ionised hosting server. You can refer to the emails lesson near the beginning of this course if you need a refresher. So what do you pick as your email address? You have your domain name. But what about before the at sign? The most traditional choice, what I use is contact. So contact at your domain name. You could also use info let, or your actual name. You can really choose whatever you want. But those are the conventional choices. Whatever you decide, login to, I own this and create your e-mail address for your website design business. Once you've done that, you can add it to wherever you access emails such as Outlook, iOS mail, the Windows Mail app, et cetera. At this point, please pause the video, login to I own this.com, select your hosting server, click emails and create your email address as your new email to your favorite e-mail client. Now that you've locked in your name, Let's think about a logo. Do you have any ideas for your logo? A logo is tied closely to a brand. In fact, a logos, emblem, typography, colors, and style should all thoughtfully convey your brand's identity. Should your font be crisp and clean? Recursive? Do you want a symbol or emblem? What about the colors? Your brand's color palette? We'll extend to your logo, your business card, website, invoices, et cetera. You'll want a primary color. And if you want a secondary color, I'll go ahead and tell you. Blue is a standard choice for website design companies. Why? Because blue has come to reflect technology. Think of Facebook, Twitter, linkedin, Tumblr, all shades of blue. So maybe you're thinking, gosh, this is overwhelming. There's a lot to consider. And that's why most people don't design their own logo. They'll hire a designer, either one they know personally, professionally, or through a cheap freelance site like fiber. If you hire a professional and design firm to create your logo, you're looking at spending a few $100. The quality will be higher, but so will the cost. On the other hand, on a website like fiber, the quality will be lower. But so will the cost. It could be as low as five bucks. Well, it's going to be appealing when you're just starting out. Your logo might go through a few iterations over the years. But you need something to start out with. And in terms of a format, you'll want a vector file like dot AI, Adobe Illustrator, EPS, or a high-resolution PNG file. So you can use it across your various digital and offline channels. So to summarize your logo design, keep it simple, keep it unique, and keep it memorable. At this point, please pause the video, brainstorm some ideas for your logo created in Illustrator, Photoshop, hire a logo designer or use a freelance site like fiber. Ultimately, you'll want a vector or PNG file as we move forward. And what about business cards? Or do you go to create a business card? And how do you know what to put on it? Let's consider those questions. First off, the contents of the card itself. What do you typically see on business cards? You guessed it, a logo and a person's name with their contact information. A business card is basically just a way to reach someone. So we'll phone number, email address, website link, all standard on business cards. And what about the design? Well, it will follow closely your brand's color palette and logo. Now, there's tons of designs out there for business cards, so many. In fact, my personal suggestion is to just Google business card ideas. Look at enough cards, you'll figure out what resonates with you. Finally, where do you go to print your cards? Do any companies come to mind? Perhaps vista print. This, the print is the number one printer a business cards in America. They have templates and their cards are affordable, around 15 bucks for 250 cards. But are there better printers and vista print? And when do I use? I highly recommend mu, like the cow. And I'll put a link in this course description so you can check them out. Their cards are premium, sturdy, and most importantly, make an impression. Just me. I've had so many people rave about my business cards. Go with the best and you won't be disappointed. So what's our homework? With all we've considered? Let's recap the hallmark for your web design business. Worst, decide whether you want to brand yourself as a freelancer or creative partner. To choose a name for your business. Three, register a domain name through your eyewitness account, or create a professional email address on your iOS server. By design a simple, unique and memorable logo. Six, Design and order your business cards through. And I'll have a link in the description. In the following lessons. We'll use the decisions you make in this lesson and build your website from that. Now I want to make a quick side point as you're thinking about your version. Now what we've discussed today, That's a DBA. Doing business apps. Your bank, why ask you for your DBA so that you can deposit checks either written to you, your name, or your business name, your DBA. So so legally, we're talking about a sole proprietorship. That's where you are the sole owner and you assume all the risk. Now you can incorporate, you can trademark, you can form an LLC and S-Corp, whatever you want later on. But, but I'll add is rather expensive and complicated. So at first, you're forming a simple sole proprietorship. And we'll talk about that more in the final lessons. I'm late submission and now you know how to create your brand. 26. Building Your Brand's Website: Welcome, I'm Leighton, your webmaster. Now by now you should have an idea of where your brain. So today, let's design the home for your brand, your website. So obviously as a web design company, you'll be building plenty of websites for your clients. But what about your website? And now some would argue that that's the most difficult website you'll ever build. My own website has been through so many iterations that I lost count. So point is your website will continue to evolve as you grow and refine it. So what goes on your website? What do you think would be important? Here's a few essentials. One, your services page, explain what you offer, which is website design, development, mobile-friendly websites, security, and as the cells, search engine optimization and whatever else you'd like to specialize in. And here's a key point. Make sure you only solicit the type of work you actually want to do. Don't put marketing, branding, logos, printing, advertising, video production. Unless you actually want to do those things and you're good at them. Now to the About Us page. This is the page people will visit to learn your story, what you're all about, and how you came to be a website design company. How long you've been in business, your strengths, your specialties, et cetera. Now a current trend is to be personable and transparent. Let people see your face, read your values, and learn how you got to be where you are. And if you do show your face, so it better be a professional headshot. This is such a key point. Clean up, put on a tie, a blouse, suit, jacket, whatever is appropriate for your gender. Present yourself in a professional manner with good lighting and a solid background. Hire a professional photographer if necessary. Your headshot will either work for or against you. In fact, what would you think about a company whose owners presented on their website in sweatpants and oversize T, would you perceive that company as professional or casual? Perception is key? A $50 professional headshot can make a huge difference. I totally recommend it. Third, contact page. You obviously need a contact page. This is the standard. It's usually your phone number, your email address, and a contact form. You can also include a map, social media links, and hours of operation. Now, have you ever struggled to find contact information on somebody's website? As a huge no-no Web Design 101, contact info should be extremely easy to find. Put it on every page if you have two forth the portfolio. This is so important for a website design business in this industry, no one is going to ask you for your formal education. They want to see what websites you've built. In fact, what would you think about a web designer who had never built a website before? Would you hire a designer? That's how important a portfolio is. Your work should speak for itself. So start building your portfolio as soon as possible. Let's us super key point. Once you've completed several projects, you can start picking and choosing your best work to feature on your portfolio. Quality is far more important than quantity. And that's also why you should work extra hard on your first few projects, since that's all you have on your portfolio. With the reviews, this page is necessary. All websites. What's your perception of a company that has 0 or views? What if the majority are one or two stars? Positive reviews are critical for the success of a brand. So start collecting them as soon as possible. In addition to the actual review, ideally, you'll want an image to go with a quote. But the best-case scenario is a video testimonial. Those are absolutely golden. As I mentioned, my current website has been refined so much since 2006. That's pretty much unrecognizable from my original site. So what better way for me to teach you how to build a site for your web design business. Then by showing you mind, let's take a look. Here we are on www.pioneer.me. This is the site for my web design business. Now I've been growing and refining this website since 2006. It has grown in terms of more portfolio projects and more testimonials and has been refined in terms of search engine optimisation and improving the design. So what better way for me to teach you how to build your web design business website by showing you mine. So I would love to go through each of the pages on this website so you can get some inspiration for yours. So let's get started. Right out of the gate, we see the logo in the top left corner and we're on the homepage. Other pages include the About Us Services. In my case, that's a web design, Organic Search Engine Optimization, web hosting, website maintenance, mobile-friendly sites, WordPress, Web Design and e-commerce. I previously had so many more services, but I've really refined to only sticking with what I actually want to do. My portfolio, I have my digital portfolio as well as a map of my clients in the area. Testimonials, which are my reviews, usually a copy and paste from either Google listing or my Facebook or LinkedIn. Frequently asked questions, Blog Contact and some social media links here. I've also got my phone number and my email address, so potential customers can contact me. Top-right corner, get a quote. That's not a quote calculator. It's actually just a link to the contact form where somebody can fill out their name, email, phone number, message, and contact us. As we continue looking on the site. We've got a title, myTitle currently, it's gone through so many is five-star web designer since 2006, this gives me credibility. Five-star people can prove that by just Googling me in this local area. And since 2006 gives me some expertise. The subtitle, web design development, hosting, maintenance, and search engine optimization. Again, these are the things I definitely like to do and would love to market. And then a couple of paragraphs here. Two buttons view a 160 plus projects, read, 80 plus reviews, and a chat box in the corner that connects to my video TID io.com account, which I love for an instant chat feature. It's completely free and it's awesome. It connects to my phone. I have the app downloaded, so I'll get a notification when anybody clicks this button. Scrolling down 2020, I added a introductory video, meet late in Smith, your web designer. This is hosted on YouTube, and if they click that, it's just a two-minute introductory video. So people will be familiar with or become familiar with whom the web designer is. We hope hundreds of small businesses and knock so get the most out of their website. So this is a ticker of some of the most recognizable brands I've taken on as clients. If you hover over them, they turn into color. Until then they're black and white, just so they don't draw too much attention and follow the color scheme. If you click on these, they'll link directly to the website. So you can see my client's website. And ultimately you see my work. Scrolling down the three primary services that I market, web design, Organic Search Engine Optimization, and website management. Or websites or mobile friendly. So these are screenshots of various client sites. Look on a mobile device, how they look on a tablet, and how they look on a desktop. There's links to visit the site directly. And our websites are safe and secure. So this is a little spiel for our SSL certificates, all clients are strongly encouraged to have an SSL certificate which encrypts all data to and fro the site. We set up, install, and maintain the security certificates. So the, so the website stays protected against hackers. Are websites are hosted and managed. This is a plug for our website care service, which I'll go through a few lessons from now when we talk about how to market a website maintenance plan. I linked to a popular blog posts on my site. 16 reasons why you need a website maintenance plan. It says by and far the most popular blog post on my entire website. So I take advantage of that. The interest people have in that post by linking to it from my homepage, we earn a five-star review. So this is credibility. Whenever you get five-star reviews, take advantage of those, but those on your website as much as you can, especially if you can find a headshot for the person who wrote the review. Every user golden, start collecting them as soon as you can because they add credibility to yourself as a business owner. Or designs are attractive and effective. So this is a collection of the 12 favorite projects on my website. I have them ordered specifically from my best work to my least best work. So it's still the top 100 websites. But within that, a 100 and the first ones to show up are my favorite and best work. The bottom of the a 100 would still be good work. It's just not what I want to feature at the very top. So these 12 are definitely the best of the best. That's what goes on the homepage. And then at the bottom would be a call to action with a imbedded contact form. Do you need website help, call this number, email this address, or fill out the contact form with your name, email, phone number, and with your message and click Submit. This is secured with an SSL certificate and it's secured with recaptcha anti-spam technology. And there's finally, there's some social media links here. And the footer of the website includes my blog posts, some affiliations. I'm part of V and II trade bank, I tags, and I'm an iOS official partner since I've been with them for so many years. And they are a green web hosting, a company, social media profiles. I'm on Facebook, Google, LinkedIn, pinterest, Instagram, and Twitter. So that's the homepage. Your homepage needs to mention, your best services, needs to have some credibility with some testimonials and reviews. In my case, I went right ahead and showed my headshot to people can get to know whom their web designer is. And I showed some of my best work right there on the homepage. But there's plenty of other pages. This website has plenty hundreds of pages actually, MP include the portfolio. So let's go ahead and click to about us. Meet your webmaster. Learn about the history of pioneer media one and knocks holes favorite web design companies. So this is the two-minute introductory video where I introduce myself so you can get to know me. I've got a little biography here and some stats, five-star rating on Google as of today, 14 years of experience and a 175 websites designed. All those numbers keep growing somehow. Somehow the years keep taken on and the websites keep, keep coming. Follow us on these social networks. I've got my six primary social networks on him on and here's a little ticker of my top portfolio projects. Call to action. I have this at the bottom of every webpage now interested in working together on a project called this number, shoot us an email or send us a message. This is on the bottom of each page because I don't know what page somebody will land on. If they're doing a Google search for a web designer. If they're searching for a mobile site, it might land on the mobile sites page. If they're searching for SEO, they might lean on the SCO page. So I can't assume their first contact with me is the homepage. They might fall on one of these landing pages. In that case, by the time they've scroll to the bottom, I would like them to have seen a contact form just in case they want to go ahead and reach out. Services. Services. What does pioneer media do? Full-service online website design and management company. So these are my three primary web design, SEO and web hosting services. Or I go more in depth with a nice photo from one of my client sites. Mama me, a cuisine that shows off my responsive web design services. And here's a more extensive list. So let's go into each of these. Have seven primary services that I'm wanting to market. And I can even probably refine that a little bit more gorgeous, affordable web design in Knoxville, Tennessee, which is where I am currently based. As we scroll down, we'll see few screenshots inside these mockup templates I created in Photoshop, C1 with a tablet and one with a mobile view. Few features of our custom websites. So these are blurbs indivi, using the built-in icons I mentioned custom domain name, business e-mail address, custom design and color scheme, mobile friendly and responsive search engine optimization, contact information and form About Us and services pages, photo galleries, slide show, Google maps and directions, social media profile links, modern future-proof coding and much, much more. So some design firms and maybe this is more of a in the past thing and then nowadays, but I'm sure there's still some companies that do this. They'll charge based on the exact features that you want the website. So if you want a form, there'll be a few extra dollars. If you want search engine optimization, that'll be extra mobile. There'll be extra. If you want an email, a gallery, each page, everything will be nickel and dimed. I don't do that format. I do more of a quote based on overall what you're looking for. Whether you're looking for a brochure site or a e-commerce website and bundle it all together. In that case, they're paying one price and you're getting all of these services. So I tried to pack as much value as possible into my websites. Next, organic search engine optimization. So we'll really dive into this in the next set of lessons. But this is local SEO in Knoxville, Tennessee. So search engine optimization, it's necessary for a website to flourish. That's all you optimize your website to show up when people search for your keywords. So here I have some examples. First I have some facts about search engines. Then I have some examples of websites that I've built and proof by screenshot that they show up on page one. It's not an exact science, There's no guarantees. But with enough experience and enough hard work, you can get your websites. You show up on page one by doing the things that Google likes to see, which we'll go through in the next series of lessons. Web hosting goes right along with what time maintenance. But this is specifically the hosting on the server, which in your case would be ionised web hosting. Why hosts would pioneer media? And again, this is very similar to the website maintenance. I kinda combine those two. In fact, I'll go ahead and just switch over to the website maintenance page. Since this is one of the landing pages I really liked to push for my search engine's rankings, Tennessee website maintenance plan experts since 2006. So what does this include? Scroll down to see the eight primary features of our website care service. Why do you need this service? Read the blog post 16. Reasons why you need a website maintenance plan. So fun fact, if people search for why do I need a website maintenance plan? Not in Tennessee, not in a certain area, but if they're just searching for that, here we are. Pioneer media. 16 reasons why you need a website maintenance plan. I wrote that post in December of 2016. I had no idea. It would become so popular, but it is now the number one most popular page on my website based on my analytics reports. So that's valuable traffic than I'm bringing in. And who knows? Maybe some of that traffic becomes a client. I have people fill out my contact form specifically wanting website maintenance. So obviously this post is working. These people have their website RD design, but they need somebody to maintain it. So what's included in my website care service? I'll go over this several lessons from now in the website maintenance course. But as an overview, this is what's included. Hosting, email management updates, security search engine optimization, social media virus removal, up-time monitoring, change detection, local listings, and SSL certificates. So these are the kinds of things that I do on a monthly basis for my clients and something that you can offer to your clients. And I'll go over that in a series of lessons, several lessons from now. We earned a five-star Google rating. I went ahead and copy and pasted these reviews and the form at the bottom to this page, just in case somebody first lands on this page, maybe they're just wanting maintenance. They do a Google search for a website maintenance company and then land on this page. They didn't land on my homepage. They haven't seen the contents of that page yet. So I want them to have seen my reviews. I want them to see my contact information by the time they've scroll down to the bottom of this page, just in case they don't click on any other page. Then this page as built my credibility by the time they scroll to the bottom. Mobile-friendly sites. Mobile web design in Knoxville, Tennessee. This goes along with the responsive web design, mobile-friendly that we talked about several lessons ago. How important is a mobile site? A study conducted by Google says that 67% of people indicated they would more likely purchase a product or service from a business that built a mobile friendly website. And globally, half of all internet traffic is done on mobile, and that is certainly rising. Here are some samples of websites that I had built. Websites in my portfolio that are mobile-friendly. And you can click on these to see an enlarged view. Copied my reviews in the form. Now let's look at WordPress web design. So plenty of people are searching for WordPress Web Design in this area. And if they do, if they include the keyword WordPress in whatever their searches, then usually this is the page that will rank for my business. It's a landing page for WordPress, including some links to companies that use WordPress as their content management system. And some questions, is WordPress mobile friendly? Yes, it certainly can be. And finally, e-commerce. This is an older page. I need to refresh it, but it's my landing page for e-commerce. And ideally this would be a more in-depth page where I explain the benefits of selling online, how much money is spent with online shopping, and how I can help somebody start selling online. So let's move along to my portfolio page. This is a critical page on your web design website. You need to show your work. Like I mentioned earlier, nobody cares what your education is in this industry. And they want to know what work you've done, what clients you've worked with, what your websites look like. Impressive. Your sites are, that's what they're interested in. So here I have my top 100 website projects. These are some industries that I had done websites for. And the ones you can click, I've created a specific landing page just for that industry. The intent of that is that when people are searching for dental website design or something like that, this landing page will pop up and back to the portfolio. Have a counter here to show us some stats and get right into the portfolio. So these are the websites and I are, these are the clients that I had built websites for and this is the top 100 projects. So a quick note on the Portfolio page. The top really should be your best work. This should not be in chronological order. You should feature your best projects at the very top. So that's the first thing that potential clients will see. And if you've done website, if you've done work for a bigger brand, such as in my case, I did the work forward, the local PBS station that should be near the top because that's what people will recognize that we want to see the reputable businesses that you've done websites for. If they haven't heard of these companies, they'll probably just keep scrolling until they find one that they recognize. And the more you have obviously, the more impressive You seem and the more experienced you seem. At first, you won't have much for your portfolio page. So that's why I totally recommend doing as good of a job as possible on your first few clients sites and obviously every website going forward, but especially your first ones because that's all that will be on your portfolio. So work extra hard on your first few clients. So let's see what happens when you click one of these. I'll click dancing bear. The world-famous hotel and upscale restaurant in the Smoky Mountains. Award winning resort website design. This is the key word, and this is the title. This is the logo. And if you click this, it goes directly to their website so you can see the live site. And here are screenshots of how this website looks on a desktop, on a mobile phone, and on the tablet. Well, to create these, I found a mock-up template on Google. It's a Photoshop document and you just drop in the screenshot of your website. So it does require some Photoshop work. That's one of the many, many, many reasons I recommend getting the Adobe software and getting comfortable with it. This is one of the many things that I've created in Photoshop for my personal business. About the design. This is where I explain what I did for the company, what problems they had and how I solve them. With links to the different services I offer. On the right, I've got project details where they're located, the website, the description, and a few other things. As we scroll down, here's a testimonial and I got from the company who wrote it and what their title is. This is the marketing director. They wrote a very kind review calling us the gold standard homepage screenshot. So at the time I took the screenshot, this is the way that the website looked. This is just a static screenshot. But it's a way to show off your work. Love this website, let us help yours too. So this is my plug to try to get somebody on from this page to fill out the form on my contact page and possibly hire me as their web designer. So I follow that some similar template on all the portfolio project pages usually takes about an hour for me to upload a new project in my portfolio, but it's well worth the effort. I have changed up the template just slightly for recent projects. Here we are. So I put the location, the bio, and a link to the website. The problem as well as the solution that I offered. Not like that format a little better. And then for ones that I don't really feel like writing all that much for. I've got this. One of these follows that simplified format. Let's see if it's the newly born farm in wedding venue with design. And there it is. So to save time, sometimes I'll just dropping the logo. Have a nice, well-written sentence here. We designed a beautiful, responsive mobile friendly search engine friendly website for this client. Of course, has internal links to my services pages, and we continue to provide a website hosting and maintenance services to ensure their continued success and then a link to visit the client site. So sometimes I'm just really pressed for time. And that's an easy way to put the project on more portfolio. Without having to do all that extra work, typing out the story, the problem, the solution, and making those mockups. I've also got a client map here, which is a quick way to show visitors that I've had quite a few clients over the years. So in this case, there's a pin for each company that I've done and website for. You. Click those and it'll take you to the website. You can see my work. There we are. All right now the testimonials page, and this is obviously a very important one. You'll create a reviews or testimonials page, almost every client website that you create, and you'll need one for yourself as well. You might not have many testimonials at first, but this page will only grow. And here's how my page has grown. So a quick note about testimonials. When somebody wants to write you a testimonial, you really don't want them to just email the testimonial to you directly. The preference is to write it on Google or Facebook or a recommendation on LinkedIn, and then you can copy and paste that onto your website. What do you think we would want to do that? What's wrong with somebody just emailing you their testimonial? Well, if a review is on Google, I can copy it to my website. But if the review is written in an email, I can't copy and paste that onto my Google listing. For security reasons, they have to write the review directly on Google for Google to accept it. So get people to review you on your Google listing or wherever you're collecting your reviews. I like to promote Google because that's the search engine that I'm trying to rank well on. And they do look at reviews as a search ranking factor and then copy it to your testimonials page. That's the ideal method. Alright, frequently asked questions. So the best way to build an FAQ page is to just think of the questions that you get asked the most. So at first you might not have had too many questions, but over time you'll you'll notice that you start getting asked the same thing by each client. So that's great. Ammo for a FAQ page. In my case, the questions I get asked the most or what do you need for me to get started? How long does it take to make a website? Can you get me on page one of Google, how much does a website cost? Can I get an e-mail address for my website? Can I see how the website looks before it goes live? What do you provide after the website is complete? And how many websites have you built? Need to update this a little bit, but you get the idea. It's got the frequently asked questions you are asked. So you can direct people to this page when you're taking on a client. How about the blog? So a blog is a wonderful way to bring in traffic. Like I mentioned, the 16 reasons you need a website maintenance service that has brought me thousands of hits and onto my website. So blogging does work. It's great for search engine ranking. Ashes gray for general education. People might read these and learn something that they didn't know. For example, the live chat feature or their contact form is attracting spam. The need a coronavirus statement. Drone footage, It's a way to announce new services. Blogs are just a great way to educate people, as well as get that inbound traffic. Somewhere down here, how to handle negative online reviews? I enjoyed writing that one. Why not just build a website yourself? Three compelling reasons. I enjoyed that one as well. This is the 16 reasons why you need a website maintenance plan. So let's see what this blog post looks like. We've got an image here. To my case, I created that in Photoshop. Now opening question, what needs maintenance? And then the 16 compelling benefits to website maintenance. So these are headers, which hopefully is the key word, the key search or the question that's being asked. Then lists are a fabulous way to get your pages ranked. Dwell on Google. So consumers like lists, I like lists, Google likes lists, everybody likes list. In this case, this is a numbered list, one through 16. There's also unordered lists which basically as bullet points, you can do this in WordPress. You can create a list just like you would in a Word document. And it's a great way to structure your posts as well as your pages in general. So since the page got so much traffic, I decided to capitalize on that and expound on this page a little bit more. So I added a conclusion. And then about the author. So if people kept scrolling. First of all, they might wonder, well who wrote this? Let me introduce myself. I copy and pasted my bio and with a button to my website design work to try to get people to view my portfolio. And then what's the credibility of this guy? We are in a five-star Google rating. There's a copy and paste of my reviews linked to see more testimonials and a contact form. So previously, my page ended here or to the post, the blog posts ended with number 16, performance optimizations. And then that was the end. And then I realized I was getting so much traffic, thanks to the analytics reports. See, I was getting all this traffic and nothing was really happening with this traffic. They were bouncing, which means they were reading the post and then exiting the site. So I thought I need to capitalize that on that a little bit more. Hence why I added more to the page. So analytics reports are a great way to see what pages on your website or popular and what you can do to improve them. In my case, I took the most popular pages and just beef them up with more content to I make them as attractive as possible. And finally, we've got the contact page. Contact page is what you would expect phone number, you can click that to call me email, you can click that to open up a new e-mail message and an address where you can mail me. And there's a contact form which is secured with Google's recaptcha anti-spam technology, which I totally recommend you can do that through the contact form module indivi, Google's recaptcha is a fabulous way to cut down on Contact Form spam, contact form spam is an epidemic. If you don't secure your form somehow, you'll get plenty of that. It'll just be foreign language or spam or marketing or whatever mass marketing that goes out. And you'll get plenty of that through your form. And there's no need for that. So I recommend Google recapture. So this is my website in review, there's the About Us Services, Portfolio testimonials, which those two will continue to grow over time. Faq is a nice one. Just to educate the people on your site. Blog carries the education and contact, which is a crucial one. And at the top and bottom of every page on my website has my phone number, my email address, social media links, and the Get a quote, call to action. So what have we learned? We learned one, you need a website for your business. To. Your website should contain a personable yet professional About Us page list your services and your contact information. And third, start collecting reviews and building your portfolio with every new client. And what's our homework? And when should you start designing and developing your website? Go to on your IoT server using that domain name you purchase in the previous lesson. I'm Leighton, and now you know how to create your website. 27. Promoting Your Brand: Welcome, I'm Leighton, your webmaster. In the previous lessons, you started building your brand, including your website. Today, let's learn how we promote that RAM. I'll go over a few ideas, namely social media, Behance, and Google, My Business. First, let's look at social media, starting with LinkedIn. Now I totally recommend this one. Do you have a LinkedIn profile? Over 500 million people? Do. Linkedin is built for professionals, for networking, for building relationships. When LinkedIn, you'll have a personal profile. And if you choose, you can create a company profile. Your profile is basically your digital resume. You can include your bio, your photo, your work experience, formal education, licenses, certificates, portfolio projects, et cetera. On your company profile, you can upload your logo and link your website, copy and paste or about a story and upload some blog posts as what they consider updates or articles. Linkedin is a solid choice. It's free and you won't have to spend much time updating it. I just visit my profile every few months, just make sure it's still relevant. Make some tweaks if necessary. You know, I've gotten a few jobs from LinkedIn and I'm even listed as an all star for whatever that's worth. Facebook. I do recommend Facebook. Do you have a Facebook account? Likely you do. Over 1 billion people actively use Facebook. It's the world's most popular social network and tons of businesses are on it. Some even operate their business exclusively through Facebook. You can post updates, earn reviews, upload your portfolio, communicate with Facebook, and make sales through the Messenger app. Now when you set up Facebook for your business, you do not create a new account. That confuses a lot of people. You create what's called a page. You will use your regular Facebook login to manage your page, but the page and profile won't be publicly tied together unless you want them to be. Now I occassionally receive work from Facebook, but I do keep up the profile just in case someone checked my Facebook while researching my company. Now this is a key point. You don't want someone to pull up your Facebook or any of your social accounts for that matter and bind the latest post is like two years old. That just does not look good. Keep your profiles up to date. Next, Instagram. Do you have an Instagram? Likely you do, over a million people do, and it's easily a favorite social media app. So what's Instagram all about? Autos and lately, videos. And it means you'll have to get creative when posting to your brand's Instagram page. You could screenshot testimonials. You could show examples of your website work. You can upload promotional videos, but above all, you do need to be authentic and post regularly. Now I've received website jobs from Instagram, especially when a friend or client gives me a shout-out. You might even personally asked for a shout out when you're first trying to get some exposure. Now what about Twitter, Pinterest and Snapchat, and others? Are you on any of those apps? Now I have personal and professional accounts on them, but I'm not a huge fan of them for a website design business. Why? Because I don't think I've ever gotten a job off those sites. Now they had their own niche. Some people are very successful in them, good for them. But I haven't actually obtained any jumps from them ever. Now, if you're already an active user on those accounts, go ahead and create your brand account. But otherwise, I wouldn't go out of my way to create one on there. Let me show you how some social profiles can look. Hopefully, that will give you some inspiration for your accounts. So here we are on Facebook.com. First, I want to demonstrate how to create a page for your website design business. So we're on Facebook.com and we're presented with a login form. If you already have a Facebook account, at this point, you log in to your Facebook account. You don't create a page until you've logged into your Facebook. You don't have a Facebook at all, then yeah, you can create a new account, but otherwise, if you already have one, then you can just log into the Facebook account that you already have, which will be your personal profile account. I'll do that now. And I'm logging in. And here we are. So let's go to pages on the left. All right, here are the pages that I manage and we're looking for create new page button. So let's click Create new page and see what we're presented with. Create a page. A page is a space where people can publicly connect with your business, personal brand or organization. You can do things like showcase products and services, collect donations and create ads. Millions of people discover and connect with pages every day. So let's get started. It asks for your page name, your page category, which in your case would be web designer. And a description where you can copy and paste your about us paragraph. And once you've done that, you can start creating posts, upload photos, videos, and whatever else you want to add to your Facebook page. Let me search for pioneer media. And here we are. This is my business page. And I've got Services, website design, search engine optimization, web hosting and maintenance, drone footage. I've got photos of my work, which includes some albums for those responsive design screenshots. We talked about the top 100 website projects, which is basically a mirror of what I have on my website. And that's grown significantly over time and it just keeps, keeps adding. Also have a few reviews on my Facebook. Don't get nearly as many as the Google because I don't really ask for them one here, I don't use Facebook as much as I'll use Google. And therefore, when I do get a review, it's typically on my Google listing. So once you've created your account, you can go into edit page info where you'll have an opportunity to add more than what you did when you first created your page. When you first created your page, you did the name, the description, and the category. Here you can add more information, contact, phone number, e-mail, website. You can add a map if that's applicable to you. A lot of web designers work from their home, so that's not really necessary. Hours, specific hours always open, permanently closed. And some more things you can add here can also cross-linked to other social accounts. And then you can view insights which tells you how many hits your pages, getting, notifications, resources, tools, inbox would be the messages when people tried to send you a message directly on your Facebook page. Though nobody will see my personal Facebook profile when they go on to the page. But that's what I use to log in and manage this page. One of the benefits is if you have a team or if your client has a team, then they can have access. You can have access. Everybody who needs access to the Facebook page can have that through this settings and then page roles. So through Page Roles, somebody can add you as a owner or admin to their page so you can manage it for them. So let me show you an example of a business Facebook page for one of my clients. This is dancing Bear Lodge, the award-winning resort in the Smoky Mountains. And this is a page, so It's slightly different from a profile. This is how you market a business on Facebook. It's got the cover image, much like you would on your personal Facebook. And a logo where you would normally put the profile picture. Got the name, username and category. And this one has a book now button where you can book a stay at dancing bear. Has about photos, reviews, events, videos, groups, community and welcome. You CAN like the page. So on a profile you can follow, but on a page you can like, you can also message which will go to their inbox section. You can search their page and view the information for the page. So this one has 13 thousand likes, 7500 check-ins so far. And the links to their, their map listing their URL. You can send a message, you can send them an email, and there's cross-links to different social accounts. So this is a very impressive Facebook page, and this gives you an example of what all you can put on a business page in the center would be posts. So these are the recent posts to this page. Just like you would normally on your Facebook profile, you can post videos, links, photos, or just type out some text. There's a lot you can do on Facebook nowadays for business, I do recommend having a Facebook page for your business. And once you do create your page, as much as you can't do it. And I'll put as much content as facebook allows you to sell your business looks as impressive as possible. Now what about Instagram? This is the Instagram account for this particular business. They do a wonderful job managing their social media. They've got the memories here. You've got posts. And their posts. A lot of them are videos. As videos will get more reach organically than a static post. And they've done a nice job managing their social account, which I have access to, as well as their website designer. To where do you go to create an Instagram for your business? So let me log out here. So here we're on Instagram.com. We can sign into our personal Instagram account, but this is different from Facebook. In this case, you do want to sign up for a new account when you're creating your business page. So we click sign up. And that takes us to this page where we can log in with our Facebook or just straight create your Instagram page by typing in your business email address, your name of your business, your username, which is going to be after the at sign and then your password. So once you've created that, you can click sign up and start adding your profile picture and your bio to your Facebook page. When you do that, you can start posting to it and building your following on Instagram as well as put ads like you can on Facebook. But the core Instagram and Facebook service are completely free. You don't have to do ads unless you want to, otherwise, Instagram is free. Finally, I want to show you how to create a LinkedIn. If you don't already have one, you can create one on linkedin.com. Welcome to your professional community. In my case, I already have an account, so it's wanting me to sign in. Otherwise you can click Join Now in the top-right corner. When you do that, it's going to ask for your email address and to create a password. And when you do, you can click, Agree and join. And it'll take you to your LinkedIn profile where you can add your education, you can add your experience, your headshot, and a bunch of other stuff. Let me show you an example of one. So I'll sign into my account. This is LinkedIn.com and I'm going to my specific LinkedIn profile, view profile. Lighten Smith, owner, webmaster, web designer at Pioneer media. This is my headshot. It's good to have a quality headshot. On your page. It shows your area. I'm currently based in the Knoxville, Tennessee area. The About Us, which is again and copy and paste in my bio. You'll be using that on all these different sites. It's easiest just to copy and paste it. Some featured content, an article I wrote, a YouTube video introducing myself experience than working at this company that I created and since 2006, and my education, skills and endorsements, which is a LinkedIn feature where other people can endorse you recommendations. I've gotten a few on here. I could have more, but I haven't specifically asked for them. Really tried to grow my Google reviews and accomplishments where you can add projects. In my case, whenever I add something to my portfolio, I go ahead and add it here to LinkedIn under projects. Now what does my company page and look like? So if I click pioneer media here, it'll link to my Company Page. This is pioneer media. Let me view it as a member. This is the logo, the name, the category, the location, how many followers you have? And they're certainly not too much to do here is really shines when you have a job offerings and you have a whole team of people, 5,200 thousand employees. Not really much to do here when you're just so low. But as far as the actual profile itself, I do recommend having a LinkedIn profile so you can start promoting yourself, promoting your website design business and yourself as a freelancer, create your account. It's completely free. Azure Information, upload your head shots, your category, what your company name is, Azure experience and your education. And start growing your connections on LinkedIn. These websites are completely free. Facebook, Instagram, LinkedIn, they're free. I recommend taking advantage of all the free software and services that are available to you. And these social networks are free. So go ahead and create your profiles and start building your following on each of these sites. At this point, please pause the video and create your social media profiles. Now the second idea to promote your brand is Behance. Have you heard a Behance? It was originally created as a stand alone portfolio sites for creatives. It was scooped up by Adobe, the most popular design software company in the world in 2012 for a $150 million. And now Behance as part of the Adobe family, it's used to create and promote your portfolio. Basically, you upload your projects and organize them however you'd like. Plus you can browse other designer's portfolios for inspiration for your projects. Let me show you. Here we are on Behance.net, the most popular free portfolio website in the world. They'd been scooped up by Adobe, the most popular and design software company. And behance has been around for quite awhile. They've got a huge, huge collection of projects that have been uploaded to this website. So they're categorized by Illustrator, Lightroom, Photoshop, best to be hands graphic design, photography, illustration, interaction, motion, architecture, all kinds of different stuff on here that you can get inspiration from. So you can see other people's portfolios and also create your own. Let's see what kind of stuff is available when you click on a portfolio project. Product design, browse tangible real-world product, products from fields including automotive, jewelry, toys, and industrial design. So when you click on something here, Let's see what pops up. They've added some text here. They've added their video, some images that really just showing off their work. In whatever field that they are. They can also have a conversation where people can comment as questions and provide feedback. This is also a nice way to get feedback on your work. That's really what it was designed for to get feedback. And it's really turned into more of a promotional tool. So let's see how we create a portfolio. So I'm going, I already have one. Otherwise you would click sign up with email. But in my case, I'm going to sign in to my account using my work email, put in the two-step code. And there we go. Though it's logging into my account. And I will click on Profile here to see my Behance profile. Here's my profile on Behance. So this is basically a mirror of my website, the portfolio section. So it's got the name, it's got the logo, title, website link, area, edit, profile, buttons, project views. I've gotten over 10 thousand views on my projects and you can reorder your projects, upload them in, reorder them however you please, just by dragging and dropping. So like our website, we want the best work to be at the top. So these are carefully curated to make sure that the best work gets promoted front-and-center. When you click on a project, it'll pull up the project details, which in my case I add the client's logo, some information about the project. Screenshots. When the responsive web design, the tablet view, the mobile view, and the desktop view, as well as a screenshot of the homepage and a testimonial. Go ahead and upload a testimonial there as well. And there's related links. People can click the appreciate button and shared their thoughts through comments. A lot of this had been, a lot of this is prone to spam. As designers will spam the same comment looks great on every project across a website just to try to get exposure on their own profile. So for that reason, I don't spend too much time on Behance, but it is a awesome place to get inspiration. When you click the Discover link, you can search for whatever keyword you're looking for. So let's say you want to search remodeling website. So here are different websites that pull up for that keyword. And you can really get lost here. Looking for inspiration and looking at what other people, other designers across the entire world have uploaded. If you find the right one, you can save it on the right here. Save it to a moodboard, just kinda like on Pinterest or you can save different pins. They can pin things to your Behance, so you'll be able to refer to it later on. This really is a nice design right here. So if I were doing a car website, I don't know why that popped up for remodeling, but if you're doing a car website is good, service, nice inspiration. So there are some gyms on this site. You can find some really cool stuff. If you take the time to search Behance and see what's available. One thing you'll notice is that you often find things that are in a different language or originated from a different country. So you can refine it, just searching for your specific country or refine the color, refine the tools that were used to create whatever you're looking at and refine the creative fields. So maybe you just want to search for web design. You just want to look for projects that were created in the United States. And see what pops up here. Nice-looking graphic. It looks like these people created business cards for their client. It created a website 0 and a video. Very impressive. Yeah, that's an awesome what type? So can you see how this Behance resource can serve as quality design inspiration when you're starting a project. I've gotten plenty of inspiration for different, from different portfolios on this website. And I add it to my repertoire of design inspiration before starting a project. Another website that we have available we can take advantage of is core plot. So core plot is another portfolio site. I've been using them for a long time now. And you can basically do the same thing you went on Behance. You can discover other people's talent by looking at their portfolio or you can create your own. In my case, let me sign into my account. And this is my core flawed account and go to my portfolio and it portfolio. And here we are. Again, this is a mirror of my portfolio on my website. And the reason I am also on this side, it's because the more exposure you can get, the better. So maybe a potential client is looking at core flaw and they find you on there. Maybe they're not on Behance. Maybe they haven't discovered your actual website yet. But the more exposure you can get, the better. This site lets you view different designers. You can search for employers, you can look for design jobs. And aside from getting a gig, you can also get inspiration for your project. So I recommend being encore flats. I recommend being on Behance, having your own portfolio on your website. Reoccurring theme here is taking advantage of as much free services as you can get to increase your exposure in whatever way that you can. Now websites like Behance and core flaw, they shouldn't replace your website, but compliment it. In fact, I recommend putting your portfolio on your website, as well as, as many of those portfolio sites as you're comfortable keeping up with, the more exposure, the better. The third promotional idea is Google My Business. You need to set up your Google local listing to do promote your brand. Have you heard of Google My Business? It's those map listings. When you Google a business, you're listing as your name, address, phone number, website link, and reviews. You can also upload photos, post updates, coupons and more. Essentially, it's just decentralized way for Google to pull business data for their Search and Maps. You don't have much control over the design of your listing, but you need to create a thorough listing if you hope to rank well on Google. When you create your listing, Google's going to mail you a postcard in about five business days. And that card will have a six digit PIN number. Once you've verified your listing using that pin, you can start getting reviews which are crucial for your brand. Let me show you a Google. My business is all about. Welcome to Google My Business. This can be found at business dot google.com or Google.com slash business. You'll be in here quite a bit as a website design business, but you also need to create a listing for yourself in addition to your clients. So let's get started. This is Google My Business. Engage with customers on Google for free. With a Google my business account, you get more than a business listing. Your free business profile lets you easily connect with customers across Google Search and Maps. So if you look over here, this sample listing, this is what we're talking about. Have you seen that before? You'll see something like that on the maps app, the Google maps, or on a typical Google search on Google.com. So the listing has a header image, it's got the image, the reviews, the category, whether it's open or closed, a call button, directions, message, website link, a short description, and the address. So that's the essence of Google, My Business listing. So let's continue down here. Get customers with a great business profile. You can post photos and offers to your profile to show what makes your business unique and give customers reasons to choose you every time. Alright? Give customers more ways to reach you. Your customers are ready to connect, calling, messaging or leaving reviews. Now with more ways to transact, you can do more business. Find out how many people are connecting with you on Google. This is really cool. See how customers connect, clicks, calls, bookings or follows. See how your customers engage with your business profile at your engagement and that your customers, so you can keep up with your followers, but also the engagement here, Let's look at this views and searches and activity. It breaks down the coals website clicks, direction requests, followings and bookings, which is super-helpful analytics. All right, so let's see what it looks like. I'll login so we can view some of my listings. So here we are on Google, My Business, and this is the admin portal. So first off, let me show you what it looks like to add a new location. So we'll click Add single location and go through the Google My Business sign-up process, or as much as we can find and manage your business type business name. Okay, Find your business and your business to Google. This is what you would do if you have a brand new business you're wanting to create a listing for. So let's say Smith, web design. Create a business. Would this name next? Choose the category that fits your business best. This helps customers find you if they are looking for a business like yours. So our category, it would be website designer. There's also web hosting company, but I choose website designer. Next. Do you want to add a location customers can visit like a store or office. This location will show up on Google Maps and Search when customers are looking for your business. If you have an office, say yes, if you do not and you work from home, say no, simple as that. Where do you serve your customers? You can list your service areas below. This will show up on your listing and bring relevant customers. So let's say your area is Nashville, Tennessee. You can add that service area. You can add Memphis and whatever areas you want to target in your local demographic. What contact details do you want to show to your customers? Help customers get in touch by including this info on your listing, let's say. And the current website URL. So this is where you would link the domain name that you purchased in the previous lesson. Or you can say, I don't need a website or get a free website based on your info. That's where a Google site would be created for free, which is a do it yourself website. I don't recommend those since you are a professional website designer. And side point, if you do come across a website for a small business that is built on Google, My Business, as in they're taking advantage of the free website provided by Google. That would be a great potential client to go after. As you can explain the benefits of getting a professional website design on the WordPress platform. Anyways, let's click. I don't need a website, but you would normally do current website URL where you type in your domain name. And then when you click Next, now, okay, invalid phone number. So I'll put in my phone number that's available on my website. Finish and man, just listing, you will be able to manage Smith web design on Google, promote your business with photos and posts, track business analytics to understand your customers and respond to customer reviews. So normally you would click Finish. I'm going to exit out of this section because I don't want to add this to my Google business account. But for you, you get to this point, you click finish and you will be asked the address to send the verification code to. You'll get a postcard in the mail with a six digit pin code which is used to verify your listing? Yes, they use snail mail. So we'll take about five to six business days for that postcard to arrive in the mail to your mailbox. And when it does, you can verify your listing until you verify your listing, your listing will not be live. So that's very important. When you're setting these up for clients, you need to explain that they are going to get that postcard in the mail. And when they do, they need to get the code to use so you can verify the listing. So at this point, let me show you what a listing looks like on the backend. Going to go back into my exit out of this, go back into my Google, My Business account. And let's pull up one that has quite a bit of activity. So this is one of my clients are very popular attraction in the Smoky Mountains area in East Tennessee. So they have horseback rides, zip lines and ATV rides, and they're quite popular. So let's see what's available at business dot google.com. At the Google My Business Dashboard. You can find this information through your Internet browser or on your phone. You can download the Google My Business app, which is very helpful. Alright, so we've got a few buttons here. We can create a post, add a photo, or create an ad. Google loves it when you create an ad, but we don't have to. That's optional. That's paid and it's also optional. Google, My Business is free though. So if we create a post, we could do a COVID-19 update. We could do an offer with a start and end date, including the offer, the percentage off or whatever you want to do. What's new, where you just upload a typical blog posts, tell people what's new with your business at an event or a product. Very exciting. We can add a photo. If we do that, we'll be uploading a video and interior photo or a typical photo to the business listing. So you can do by owner, by customer, 3 is 60 degrees. Video interior, exterior at work team identity, plenty of different categories that you can upload photos to your Google. My Business listing people will see these photos when they are discovering your listing on Google, either by searching for your company directly or by just looking for your category. Let's see what else we have available. We can update service availability, we can update business hours currently, and we can update the COVID-19 status and get support from customers. So performance, this is very exciting. We can see how many views in the past 28 days, a 116 thousand views to this listing? A little over half or search and little under half or from the maps section of Google. And searches to most people were discovering jail ranch because they were searching for that category. They were searching for zip lines or horseback or ATV rides in the area and jail range popped up. Otherwise, direct means that they typed in your company name, either typed in the business name or the address to directly find that business and activity. So 8000 website visits in the past 30 days, over a 1000 calls, 248 thousand photo views and almost 3000 direction requests. So a lot of activity on this listing. They've got a ton of exciting activity and reviews. So reviews, they have one hundred and seven hundred and forty seven reviews, probably more today as you're watching this. And the average at this time was 4.1 stars. So they've got a lot of great reviews. People love their business, and a few lower reviews, but it balances out two over four stars, which is great. Through Google, My Business, you can also, as the owner, you can reply to a review, which is really important to do, as Google will give you a little boost in your search engine rankings. If you reply to your reviews. If you get a one-star review, it is good to apply it to those as well. What do you say? I have a blog post on my website, how to respond to one-star reviews. And that is M0 for a separate lesson. But basically, you don't want to offer a coupon. You don't want to publicly say, we'll give you this much money. It will give me a gift card or something because people will see that and no exploit it. They'll take advantage and just make a complaint just to make some money. So you basically want to say, we're sorry that happened. Let's make things right. Give us a call and we would love to help you through your situation. Start out with apologizing and then see what you can do to make it better. Updates from Google. So when other people tried to crowdsource updates, like let's say somebody goes on and says that's not their hours. These are their hours. Then you will get prompted with an update and you can accept or reject that update. All right, you can click these buttons to view how the listing looks on maps or on search. Let's see how it looks on maps. Here we are. So this is the Google My Business listing, the name, the reviews, the category horseback riding service. Now you should know you can only do one primary category. So even though they offer more than just horseback riding, you can only enter one main, primary category. All right, There's directions, save nearby, send to phone and share. And there's the address, the hours of operation, a link to the website built by yours truly, phone number and popular times based on GPS data, photos, reviews, and people can write their own review. If you're not logged in as the owner of this listing, you'll see a rider Review button. Back to the Dashboard. Get reviews. This is a great way to gain more reviews, share your business profile, and get new reviews from customers. This is a new feature. I really like this. It's a simple way to promote the reviews section of your Google My Business listing Share Review form will pop up a link and let's see what happens when someone clicks this link. So you can give this link out. And it'll take people directly to the listing and not just a listing, but it will pop up the actual review form. Very convenient. All someone has to do is type in the number of stars we want to give the business, type their review. Loved it, and press the blue post button. So again, fabulous way to get people to review you. One little tip that I like to do is create a sub-domain reviews before the.com. So in this case it would be like Reviews dot jail ranch.com. And that'll take you to this review form. Let's test this for my domain name. So Review dot pioneer.media. Let's see where that takes us. Yay, takes us through the review form. Very exciting. So I've sent to review dot pioneer.media link to plenty of clients. And that is one reason that I've gotten so many reviews. So feel free to steal that idea. Create a sub-domain for your domain as review your website.com. And Jonas, when you do that, you will want to redirect or forward web traffic to this link, the one in your Google, My Business listing. And boom, easy way to get reviews. Very cool. Scroll down, get full access to your business profile. These are links to the Android or iOS app, depending on what kind of software you have. And you can download the app that way you can manage your listing on the go and manage your listings for your clients. Learn more about your business. Here's a link to view even more insights. You can accept bookings, let customers booking directly from Google Search. Certain businesses will want to take advantage of that, but not all. There's plenty of attributes you can add, like black owned woman led, veteran lead, et cetera. Google virtual tours enhance your online visibility and Joel traffic to your business with a 360 interactive experience. So that's definitely neat and complete your business profile. There's a few suggestions what you can do to further complete your profile and a link to manage photos. What else do we have here? On the left posts? This is where you can create a post, whether it be a blog post on event, an offer, et cetera, and info. So info is where you would update your contact information, your website link, your description, all that good stuff. We want to make sure that this is up to date on all of your clients listings as well as your own listing insights. This gives you even more information than we saw on the dashboard. Specifically, it'll tell you your most popular queries like horseback riding near me, horseback riding, Pigeon Forge, jail range, horseback riding, a TV, writing, etc. So what do you do with that information will let you see what people are searching. When you know what people are searching, you're empowered to make decisions to improve yours or your client's websites and educate your client as to what people are searching to find you valuable, valuable insights in the right hands. Customer actions, visits to the website, request directions, call or message, and direction requests. You can see where people are requesting directions from. Supercoil. Phone calls, see what day of the week people are clicking the call button. And reviews. The review section is where you can reply to reviews. There's already been some replies here. Now brings up a good point. We have access to this listing myself as the website design firm, but also the owner, the jail ranch owners. They have access to the Google My Business listing as well. So ideally yourself and your client needs access to the Google, My Business, so they can feel free to make changes on their own. They will want to respond to reviews. Don't know how best to respond to reviews. And they will also have the freedom to make changes to their hours or whatever as soon as they need to do that. Messaging, this is a way to get get messages directly through Google, My Business. It's not pulling up for this listing. But the some listings have that option. Photos, we can add photos here. Bookings. You can integrate with these third-party companies. Products, services, where you can add and explain your service website, which we do not do. But that's a free service where anybody can create a free Google website directly through Google, My Business. Again, if you find one of these sites and it's a great opportunity to get some new work. And users, users is where you would add the client as well as yourself. You would both be owners or managers of the listing. So you can both make changes anytime you want. So that's Google My Business. It started out as just address, phone number, and website link, and it's expanded into a lot more. So we want to fill out as much information as possible on our Google, My Business listings, because this is Google. We want to rank well on Google. Therefore, we want to take advantage of all of the free Google tools that we can and make them happy in that way. So the more information we give Google, the more they can use that to figure out what our clients do and how to rank them appropriately. Ideally on the top of the search engine results. So if we don't give Google any information about us or about our clients, then we don't stand much of a chance to rank competitively on Google. And that's our ultimate goal when we're promoting one of our websites. So in the next several lessons, we're going to talk about search engine optimization and stay tuned for those lessons. In the meantime, this is Google, My Business. You will need to create one of these for yourself, for your website design business. But I assure you you'll be in Google My Business quite a bit, managing listings for your dear web design clients. At this point, please pause the video so you can create your listing at business dot google.com. So what have we learned? How did you start promoting your web design business? First, take full advantage of all the free social media profiles you can. Second, in addition to the portfolio on your website, you can publish your portfolio on third party websites like Behance and horrifies. The more you put yourself out there, the more exposure you'll get. In. Third, a Google My Business listing will increase your exposure, your search engine rankings, and help stay on top of your brand's reputation through reviews. And what's your homework? I want you to create the social media profiles you're comfortable with and create your Google, My Business listing. And super proud of you for coming this far. You're off to an awesome start with you by design thinking. Now next set of lessons, we'll pivot back to the website as we learned in search engine optimization. I'm lazy and now you know how to promote your brand. 28. PART 4: Search Engine Optimization: Welcome. I'm Leighton, your webmaster. In this series of lessons, Let's talk about one of the most valuable services you can provide when designing a website. Search engine optimization or SEO for short. And you've heard of SEO. And why is this such a valuable service? Now SEO is a very complicated subject, but for you, I'm going to demystify it, will take this very advanced concept and make it as simple and easy to understand as possible. You're ready. All right, So let's start with the name search engine optimization. What does that mean? Do you have any guesses? And put simply, it's optimizing a website for better search engine rankings and best-case scenario, you and your clients would rank on page 1 for all relevant searches. But why do we care about ranking well in search engines? Well, if a business wants to hire a web designer, they have a few options. They could ask people they trust for a recommendation, or they could do an online search. So they go to Google. But wait, why Google? Well, which search engine do you use? Almost everyone uses Google. In fact, statistically, over 90 percent of searches globally or on a Google based service. So that is the reason we'll focus our efforts on Google. So back to why we care. A business owner, it goes to Google.com and searches for a website designer. Then what? Who pops up? And better yet, What's your chances of landing that account if you don't show up on any of the first search result pages. Business opportunity will go to another web design company. And think of that. Think of the value of that transaction. That website account could have been worth thousands of dollars. Now offer to somebody else simply because they showed up above you on a Google search. I've gotten plenty of work, were thousands of dollars from complete strangers whose only connection to me was that my name popped up on a Google search. And what's the best part? I don't pay a dollar to Google, not $1. But wait, what about ads? Don't, don't cost money. Yeah, Google does charge for Google ads a lot actually. But that's not what this particular lesson is about. You can always pay for ads and show up on the Add section of Google search results. But search engine optimization is about optimizing your site to rank well on the free or organic search results. Free, not paid. And we are in the dark. Google's quite clear when it comes to do's and don'ts with a search engine optimization. Well, nobody knows the exact algorithm. Google does put out tons of free resources for webmasters. In addition to the plethora of SEO tutorials and education available on the Internet. Are you starting to understand why SEO is so important? It basically comes down to money left on the table. Someone's going to pick up that money. And it's pretty much only offered to people who rank on the first or second page of the search results. So how do you do that? How do you search engines like Google work? Well, let's break this down to its simplest form. When you ask a teacher question, what do you expect to find the answer? When you ask a trusted friend for a recommendation, what are you expecting? A good one? Google wants to be like boat that teacher and that friend. If you need an answer or a recommendation, they want to fill that need and fill it correctly. For example, let's say you Google what is the capital of France? So we'll type that in. What is the capital of France? Search? And there we go. Front-and-center is the answer to our question. Paris. We also have a link to images. We have a link to Google Maps for the answer to the question, which would be the Maps listing of Paris. And we have a britannica.com snippet here. Paris, city and capital of France, situated in north-central part of the country. It's a little bit of factual information where the link to Britannica, which is where that answer was sourced, people also search for, and these are links to other Google searches for different capitals and cities and countries. People also ask, what is the capital of France today? What's the capital of France before Paris? What are five major cities in France wanted pairs become capital, et cetera. So these are sourced from a tight list here. In this case, it's well-known websites and authorities like Britannica and Wikipedia. And then below that would be the organic listings. So let's try another search. Remember, we got the answer to our question front-and-center. And we also got other snippets of information and we haven't even left google.com. Let's try another question. How many inches are in a yard? This is a mathematical question. And right away we get the answer. One yard is 36 inches even the formula is explained here. Multiply the length value by 36. Very, very helpful. People also ask how many inches are in a yard of fabric? How many inches is two yards. How many feet are in a yard? How many inches in seven yards? And these are done with a built-in conversion right here and a link to an external site, in this case, metric dash convergence.org. It's a very helpful answers to these questions in a timely fashion. So Google wants to correctly answer your question as effortlessly as possible. That's their goal for many searches. That can be done without even leaving Google.com. But Google can serve other purposes too. For example, some people are simply looking to be connected to a specific company's website. If you do a Google search for Walmart, what do you think the correct answer for that query would be? Walmart.com, the official website for Walmart. In that case, Google helped you navigate to the website you were looking for, and that was your goal. What about the third type of search question, non-specific website, but a recommendation for a website or business. Let me show you an example. So let's start our Google search with a question such as, where to buy an iPhone search? Let's see what pops up. So on the right, we have advertisements for a different phones, Apple iPhones, Google Pixels, et cetera. In the middle here we have advertisements. This one linking to AT and T.com, apple.com, and we have local map listings. In this case, I'm searching from the East Tennessee area. So I have the local Target mobile, the local T-Mobile, and the local Apple store. We continue. Questions involved are related to this Google search, which is, where's the best place to buy an iPhone? What is the cheapest way to buy an iPhone? Can you just buy an iPhone? And what is the best iPhone to buy in 2020? These are sourced from Apple.com, from NerdWallet.com, from MacWorld.com. Very reputable sources will show up in these featured snippets. So we keep scrolling and we get the free organic listings, which would just be the typical search results, apple.com, BestBuy.com. And then we see top 16 Apple iPhone, mobile phones, which are reviews. This is MacWorld.com, Forbes seen it. Those are review sites. Continue digital trends. Macworld, wired to acquire Target, et cetera, and then some ads at the bottom. So what did Google do here? We searched for where to buy an iPhone. So the intent of our search, google has decided our intent is to purchase an iPhone. So how do we go about that? By the time you scroll down to the bottom of the search results, you've seen the official website of the iPhone, which is apple.com. You've seen some available offers here. You've seen a major carrier AT and T. You'd seen local places where you can get in your car and go visit these in store to the local Target mobile, local T-Mobile, and the local Apple store. You've seen questions related to that search. And you've seen regular listings such as Best Buy, Apple and different review sites. So hopefully something on this page one answers that question of where to buy an iPhone. Google is really diverse responses it gives. So it can provide something for every, everyone. Let's try a different search. Let's say best coffee and say Austin, Texas. What pops up? Now? First of all, I misspelled coffee. Google is smart. They know what I meant. Best coffee in Austin, Texas. So we're going to see a eater.com result for best coffee shops. And Austin eater is a very reputable authority. In reviews. We also see local listings, three different local coffee shops in the Austin area with links to their websites and their Google listings and photos. And as we continue scrolling, we see some looks like review sites. Reviews for best local coffee shops in the Austin area. And we see Foursquare, we see Yelp. And then some more places searches related to coffee and Austin, Texas, hounds tooth coffee, merit coffee, summer moon coffee machine head radio coffee. So by the time you scroll down to the bottom of this search, you've seen some extended searches. You've seen other places, maybe ones that include takeout and delivery, Wi-Fi. You've seen a link to different coffee shops. You see different directory sites like Yelp. You've seen review websites like like either.com, and you've seen the local listings. So if you're searching for best coffee, you definitely want to see some actual coffee shops, which we see here. Now if we were to click on coffee shops, there we go. And we'll see some coffee shops related to our search. And now at the top you can also sort and refine them. So in this case, we can refine them to just 4.5 stars and up. We can refine based on the designated price. Let's say 1 $2 signs the hours open anytime your past visits. And there we go. So we have a personalized Google Maps search here. So Google is really wanting to connect you with the right coffee shop, the right coffee shop, and the best coffee shop for your needs. So hopefully, by the time you've finished your search, you found some good options. And that's Google's goal. They want you to be happy. They want to connect you with the right coffee shop for you. So with those searches, Google's hoping to connect you with the right website or business to answer your question or fill your need. And imagine a Google as a person. Imagine the stress of people expecting you to have the right answer or best recommendation every time. I. That's why Google takes very seriously who ranks on the first page. They want to connect you with the best business, the most accurate answer, or the correct destination. No pressure, right? So let's figure out how Google goes about that. By one, crawling to indexing, and three, ranking the web. What do those three involve? Well first, let's learn about crawling. So think of Google like a spider. Spiders crawl across a web, right? Or Google likewise crawls the digital web. Specifically that digital spider is called Googlebot and it's scours the web looking for content and what happens when it binds content. The second thing it indexes it to second process, indexing is when content is stored and organized. So basically, Google is like a massive database of content. Like a city. A city is divided into streets, addresses, neighborhoods, businesses, parks, government buildings, etc. Hopefully organized well enough so that you can find what you're looking for with just an address. And likewise, the digital spiders index and organize the web to make it easy to find what you're looking for online. And third, after content is discovered in an organized, it must be ranked. Again, like a city. What's your favorite coffee shop? What do you think the best place to buy meat is? What's the most family-friendly park? In your mind, you can probably answer to those questions by ranking various places. And that's what search engines started do with the web. Now to be clear, as a search engine optimizer, you're enabling all three of those processes, the crawling, the indexing, and the ranking. But how, how do you optimize a website for its rankings? Well, there's two tactics. There's basically a right way and a wrong way to do this. The right way is called white hat, and the wrong way is called black hat. White hat are techniques that Google endorses. It's things that make Google say, yes, if you do these things, you will enjoy better rankings. So what kind of techniques are we talking about? Well, I'll let Google insert it. Here are some of the basic do's and don'ts from Google. Here we are on one of Google's official support pages. This is Google Search Console help guidelines and Webmaster Guidelines. So these are the official guidelines and principles from Google that teach you how to rank well and also how to lose your rankings. Let's see. So the opening video currently is web spam content violations. That's that black hat SEO we are talking about. Following the general guidelines below will help Google find index and rank your site. We strongly encourage you pay very close attention to the quality guidelines below, which outlines some of the illicit practices that may lead to a site being removed entirely from the Google index or otherwise affected by an algorithmic or manual spam action. If a site has been affected by a spam action, it may no longer show up in results on Google.com or any of Google's partner sites. That is bad. We definitely want to follow these guidelines. So general guidelines help Google find your pages, help Google understand your pages, and help visitors use your pages. So how do we help Google find the pages where we need to have links? We need to have a sitemap, and we need to have our robots.txt file and there's links to various resources here. Help Google understand your pages. Create a useful, information-rich site, right? Pages that clearly and accurately describe your content. Think about the words users with type to find your pages and make sure that your site actually includes those words within it. That is a beautiful principle. Think about the words users would type to find your pages and make sure your site actually includes those words in it. Beautiful. There's some other great suggestions here. And then help visitors use your pages. Good suggestions there as well. I recommend you read every one of these bullet points when you're learning search engine optimization. Quality guidelines. These quality guidelines cover the most common forms of deceptive or manipulative behavior. But Google may respond negatively to other misleading practices not listed here. It's not safe to assume that just because a specific deceptive technique isn't included on this page, Google approves of it. Webmasters has been their energies upholding the spirit of the basic principles will provide a much better user experience and subsequently enjoy better ranking than those who spend their time looking for loopholes they can exploit. Another great principle, basic principles make pages primarily per users, not for search engines. Make pages primarily for users. Humans, not for search engines. Don't deceive your users and avoid tricks intended to improve search engine rankings. A good rule of thumb is whether you'd feel comfortable explaining what you've done to a website that competes with you or to a Google employee. Another useful test is to ask, does this help my users? What I do this if search engines didn't exist. Think about what makes your website unique, valuable, or engaging. Make your website stand out from others in your field. Specific guidelines, avoiding automatically generated content link schemes. Low-value content cloaking, sneaking reader, sneaky redirects, hidden text or links, doorway pages, scraped content, affiliate programs without adding value. Loading pages with irrelevant keywords, malicious behavior, viruses, et cetera, follow these good practices. Monitoring your site for hacking and removing hacked content as soon as it appears and preventing and removing user-generated spam on your sites. This is a goldmine resource. I recommend you take a look at every one of these bullet points and click around to learn more. At this point, please pause the video, search for Google Webmaster Guidelines and click around those resources. Now that was exciting. You just saw directly from the source that search engines are pretty transparent with their ranking principles. In the following lessons, we'll consider white hat techniques that you can use both on and off your website. And when I say your website, what I'm referring to is the websites that you built for your clients. I consider those you or your websites since you built them and you maintain them. Now before we recap just two more points I want to talk about. First, please understand that ranking in Google, it takes time. You won't find your website on page 1, the day you launch it. Even though some clients might expect that, think of this from Google's perspective, you have all these respectable, reputable businesses to rank. And here comes this brand new digital infant. You don't know much about it. It has no reviews, hasn't established and online reputation, nobody else links to it. Would you rank that website near to the top? The Hell, no. You would want that website to prove its credibility first. That could take months, even years. Of course, search engine results are not chronological. In fact, Google engineers have debunk the myth that domain age as a ranking signal. But what is a ranking signal? Credibility. And that takes time. We'll talk about links and credibility during the off-site SEO lesson. Now the other point that I want to make is local, national, or international SEO. For the purpose of this course, we're focusing on local SEO. Since most small businesses conduct business in a certain area, that means helping you and your clients rank well in your local area. So to recap, what did we learn in this intro to SEO? We learned one, search engine optimization helps website's rank better in search engines like Google. To search engines ultimately want to accurately answer questions and connect people with the right business. Three, search engines work by crawling, indexing, and ranking the way for search engines rank well by following white hat SEO techniques that obey the search engines quality guidelines. Are you ready to dive into these techniques? I suddenly, there's so much to learn. And in the following lesson, we'll focus on and can do on your website. But in the meantime, you know, there's homework. What is it? I want you to peruse the Google Webmaster Guidelines. Start learning directly from the source of SEO. Google itself. I'm late. And now you know, search engine optimization. 29. On-Site SEO: Welcome, I'm Leighton, your webmaster. Now in the intro lesson, we learned about search engines themselves. Now let's look at on-site SEO or techniques that we can apply on the website itself. Specifically, we'll look at 10 SEO tricks proven the better your rankings will look at one, crawl accessibility to compelling content. Three, keyword optimization or user experience. Five, PageSpeed 6, mobile friendliness. 7, image optimization. Eight, SSL, nine, internal links and 10, title and description. Each of these 10 techniques will build upon the previous. The first F are essential to ranking at all, and the latter are essential to ranking competitively. You're ready. Let's dive in One crawl accessibility. So your website needs to be accessible or readable by the crawlers or search engines. If a search engine can't read or find your website, you can't possibly hope to rank well. So how do we know if a website has been crawled and indexed by Google? What do you think? Let me show you a quick tip. So here's a little search heck that not everybody knows about. A nice way to see what pages are indexed by Google, we type in site colon, the domain name. In my case, I'll type in my website design firms domain name, pioneer.me, and click Google search. It says there's about 242 pages that are indexed on Google for that domain name. And these are the homepage, the testimonials FAQ about portfolio blog services, and a few specific blog posts that I've written. So this is a wonderful way to see which pages are already indexed in the Google database. Which ones you might want to add that aren't on that list. And maybe there's some that are included in the Google database that you would like to have removed. So again, wonderful hack that not everybody knows about. One of the many ways that you can use Google as a power-user, see which pages are indexed from your domain name. So that's how we figure out if your website is already indexed on Google. If it is, great. But what if it isn't? Let's go over a few possible reasons. It might not be. Most commonly your site's brand new, it just hasn't been picked up yet. Or your side isn't linked to from any external websites. Or your site's navigation makes it hard for a robot to crawl it effectively. Or your site contains some basic code called crawler directives that are blocking your search engines. Or your site's been penalized by Google for using black hat techniques. Now for the most part though, your site being new is about the only thing that you'll run into. So what do you do to announce to Google your new website? In other words, you've just finished a client's website. It's now time to launch. How do you tell Google to come crawl the site? With a sitemap? Sitemap is like the map of a website. It lists all the pages when directions or links to each one. Let me show you what a sitemap looks like and how to submit one to Google. So let me first show you an example of a sitemap. Will, will pull up mine www dot pioneer dot Media slash sitemap dot xml. That's the standard name for a sitemap. Sitemap dot xml, and that's on the root of your server. And here we go. So I'm apps are quite boring actually, visually. They're just a listing of the different pages on your website. I've got my projects, I've got blog posts, pages, and sub-pages here. It just links to all the different pages on your site. How do we get to that point though? How do we add, how do we create an ad to a sitemap? Let me show you how to do that. So we're going to pull up the website we'd been working on. And let's see how we add a sitemap. So we'll go into the backend of WordPress. So let's find a plug-in to do this. We go to Plugins and Add New. There's a wonderful SEO plugin that I like to use all in one SEO pack. There's plenty of SEO plugins, there's Yoast, there's all in one Rank, Math, Math, Anya, different plugins I like to use all in one SEO Pack. The original WordPress SEO plugin downloaded and over 65 million times since 2007. So let's install that and see what they have for sitemap activate. So here we are on the top-left, All-in-one SEO, general settings, performance, XML sitemap, feature manager, and about us. Let's start off with General Settings real quick. Continue to general settings. And here we have various settings, including our homepage title and description. As was other SEO settings which we'll go into later. Let's look at the sitemap, XML sitemap. First, there's a warning. All NYSE opec has detected that you are blocking access to search engines. Why would we be doing that? While you might recall that from the setup of this WordPress site, you can change this in settings reading if it was unintended. Let's go ahead and do that. Settings reading. You remember this question when we set up WordPress search engine visibility, discourage search engines from indexing this site. So would that checked? We can't hope to get any kind of SEO rankings. So we uncheck that and click Save Changes. And now that we've done that, let's go back to XML sitemap. That warning should be gone and we can create the sitemap. Now without us doing anything, this is already created. You can navigate to your sitemap using the links below. Opened in a new page. And there we go. These are categorized by posts pages, products and product product categories. Within pages. Here's all of our pages. We don't need the other ones though. We don't need posts, products or product categories at this stage of this website. So let's change that. Let's uncheck Enable sitemap indexes and will only allow pages at this time. You can add these later if you decide to take advantage of projects, products, or posts on your website or your client's website. So let's click Update sitemap and go back to sitemap dot xml. Now, instead of all those indexes or categories for the sitemap, It's just a straight up listing of your different pages, home about services, contact, and shop. Those are the five pages currently added to our WordPress website. And we have that in a sitemap dot xml file. So what do we do from this point? Well, let's see. One thing we'll note here is that it says any changes are automatically submitted to search engines. So one of the convenient features of this plugin all in one SEO Pack is that they are automatically submitting your XML file to the major search engines. Very convenient feature. What else can we do to take that a step further as a webmaster, let's go to the Google Search Console. All right. This is searched on Google.com slash search console. Through here. This is Google's official way for webmasters to add their website, pull up some analytics reports, some performance report, some coverage issues, and most importantly, submit the sitemap officially to Google.com. So once we've added our site to Google Search Console, we get all this great information including sitemaps. And from sitemaps, we can enter the URL of our sitemap, which is typically sitemap dot xml. This one's already been submitted. There are 242 discovered URLs. It's been successfully submitted. The last time it was red, it was October 5. Another convenient feature of all in one SEO Pack. I don't have to continue going into Google Search Console and adding a new sitemap every time we add a new page. Whenever I add a new page to WordPress, all in one SEO Pack automatically sends that to Google Search Console. Google Search Console automatically grabs that new page and starts adding it to its index. Wonderful, wonderful time-saving feature. So there you have it. We have viewed a sitemap. We have created a sitemap and we have submitted it officially to Google through the Google Search Console. Good job guys. Now a quick side note. While we're primarily focused on how to submit are important pages. What about the pages we want to hide? Temporary promo pages, staging or test pages, hidden, premium or locked content, or duplicate content. You can suggest Google ignored those by adding some code to a robot's dot TXT file. This is a very simple file on the root of your server that tells Google what's off limits. Now, it's just a suggestion and crawlers can easily ignore it. But otherwise, that's Google's own recommendation on how to specify pages to ignore. They even have a section of Google Search Console devoted to manually removing pages. And finally, on the website itself, how can you make the content as accessible as possible? That's the question. Well, think of a news article. How do you like to read online articles? Uh, do you like boring paragraphs of text in a small font? Know, no one likes that. As humans, we read content best when it's organized and formatted in a pleasant way. That means headings. Lists, numbers, bullets, paragraphs with bold and italicized phrases, et cetera. That's what people like to read. And Google is the same. And here's a key point. As a general rule of thumb, if people have trouble understanding your content, google will to make it easy for humans to read. And likewise, search engines will crawl it with ease. And as a web design business, if your clients enjoy a boring set of paragraphs, It's your job to redesign that with a more friendly structure. So your job with each page is to have one clear H1 heading and structured a content below it in an easy to read white. And finally, one of the most important things you can do to help both Google and your site visitors is have a clear navigation. Have you ever had trouble navigating a website? You can't seem to find what you're looking for. No matter how many pages you have. And I have around 300 pages on my website. Your site must be easy to navigate. And generally, it should take three clicks or less to get anywhere on your website. So think of your primary navigation, like home About Us, services, products, Gallery contact. Now you can and should create more pages for your clients. But the primary navigation should have like five to eight pages. Extra content would be an offshoot of those pages. Well, let me show you what I'm referring to. So to demonstrate clear navigation, Let's look at dancing Bear Lodge. So before we look at this website, let's look at their sitemap. Sitemap dot xml. They have categorized into pages, posts, and products. So I separated this because there are plenty of post, plenty of pages and plenty of products on this website. So it does make sense to separate into different indexes. In their case, they had lots of posts, I've got lots of pages, and they have multiple categories. So again, it is convenient to separate into different categories and indexes for their sitemap. But I just wanted to show you that they have a ton of web pages on their site. So how do we lay that out in a visually pleasing, non overwhelming way for the visitor? Let's see how that was done. Dancing bear lodge.com. I redesigned this website and one of our goals was to make the navigation very clear. So we're on the homepage, which we can get to by clicking the logo here. And there's six main, primary buttons. There's the accommodations, dining, weddings, corporate events, activities, and specials. Six primary sections of this website. Within that, there's about five to ten sub pages under each main category. Different types of corporate events, different venues on-site for the wedding, different pages for the dining. You can see the menu, the coffee house, the cafe photo gallery, catering, et cetera, and accommodations. A page for each specific cabin that you can book. So the sub-pages are underneath each primary page. And at the very top we have extra links which will be to their calendar or events page. There, what's new or blog page? Their online store, the contact page. And here's some action, call to actions, dinner reservations, book your stay, or buy a gift card. So this is laid out in a very easy to understand, very natural coherent way. You'll also notice that instead of having to click dining and then having to click chefs and Dan ship spotlight by just hovering over the dining, you can see these different sub-pages. You don't have to click and then click again and then click again to get what page you're going to. All of that's available is simple, easy to understand manner. Now the second is compelling content. Essentially, this is just answering the search query. People go to Google looking for answers and recommendations. Does your website solve that need? If it's a question, does your content accurately answer? If someone's looking for a good plumber to your client, fit that bill. So how do you create a page that Google ranks near the top? First off, here's a key point. Above all else, Google values quality content. That means well-researched, thoughtfully formatted, and visually pleasing content. Now, do you think Google knows if your webpage isn't providing the best answer? Think about that for a moment. How would Google possibly know whether or not your content is high-quality? Well, let's say you recommend a coffee shop to someone. In a few days later, they come back asking for a better recommendation. Would they need a better recommendation if your first coffee shop was as good as you said it was. If they don't get the answer they're looking for, that need hasn't been sufficiently filled. And after a while, they might even stop coming to you for recommendations. Likewise, if you click on a Google search result, go to that webpage, and then you're back to Google and just a few seconds, what do you think that signals to Google? That you didn't get the answer you were looking for. Google knows that. That's called bouncing. That's when you go onto a website and then bounce back to Google. If enough people bounce off your site. Google figures at pages and good enough, and it's devalued. So ultimately, your ultimate goal is to create the best content, most enjoyable user experience for your visitors. And that is what Google will reward. And third, keyword optimization. Now this is where Google connects the correct page with the correct search phrase. How does Google do that? With keywords? Now let's say someone is searching for dentist in Asheville. Would you expect a window cleaner to pop up or landscaper know for that keyword and that locality, you would expect to find a dentist who practices in the Asheville, North Carolina area. That's because Google interprets those keywords to understand your search intent, what you intend to find. So what about our on-site SEO? In years past, the old school way of keywords was to stuff as many keywords and search phrases on the page as possible. I don't recommend that at all. That's borderline black hat. If you have a page titled dentist with a website whose physical address is in Asheville. Google knows what you do and they know where you are. How? Because you've told them, if you've properly filled out your Google, My Business listing, they already know your category. They already know your locality. So then what do you need to do on your WordPress website? Well, first off, and then this is a key point. Specific is terrific. Create webpages as specific to certain search queries as possible. What does that mean? Well, which search phrase do you think has more competition? Dentist in Asheville or porcelain veneer dentist in North Asheville. The dentist and national search is going to be far more popular. So ranking on the first page, there's gonna be a lot more difficult. Hundreds of businesses are dentists, whereas only a fraction claim to provide porcelain veneer services in that part of town. Therefore, if your client does veneers, they would have a much better chance at ranking competitively with a specific keyword, then a generic one. In fact, there's even a name for those types of keywords. Have you heard of it? It's called short till, mid till end, long-tail keywords. Short tail keywords are those generic searches like dentist or as a long-tail keyword is more specific and less popular like porcelain veneer dentist in North Asheville. While there's a lot less traffic on those long tail searches, the people who are looking for those keyboards know exactly what they want. So to figure out those long tail keywords, consider what people are actually searching. Now what you want them to search? Let me repeat that. Consider what people are actually searching. Not what you want them to search. But how do you know what people search for? Well, how do you think we figured that out? Let's check out a free tool. So for our example, let's say your client is a carpet cleaner and they want to know what types of things people are searching for. So let's use Google's built-in autocomplete. We're not going to search for anything. We're just going to type. So let's type carpets. Clean. How to what? So people are searching for how to do it yourself. How to dry commercial carpet cleaning, car carpet cleaning, steam carpet cleaning, or pre-cleaning for higher carpet cleaning company. And another keyword would be puke. How to remove, what, what are people searching for that they need to know how to remove. Jordan's bleach, Danes pet urine, pet odors, cat urine, stains. What types of stains? How to remove stains? How to just remove stains in general? Marble. See, what else can we find marble countertops remove water stains. Draw how to remove stains from dry clean only close. How to remove lipstick stains from dry clean only close how to remove deodorant stains, oil stains, deodorant stains, concrete, driveway, coffee stains from dry clean only. So in just a few seconds by typing in different variations of your topic, which would be carpet cleaning. You can see what people are actually interested in. These search results or these auto-complete suggestions only show up because people have chid searching for them. Google's giving you a little window into what the most important and most trafficked highest volume searches are. So that's a wonderful way to see what people are actually searching for in your industry. So now you know what people are searching for. But how do you capitalize on that knowledge? Oh, here's a highly effective pro tip. Create a separate services page or blogposts dedicated to each long-tail keyword. If a dentist only has one all encompassing services page, it's all over the board. Veneers, cosmetics, extractions, billings, cleanings, et cetera. It's highly unlikely that that services page is going to rank for any of those keywords or the homepage for that matter. But if you create a separate webpage for each service, you have a fighting chance at ranking well, this is such an awesome SEO. Heck, I've seen it work firsthand countless times. And here's a business tip. If you're having difficulty getting written content from your client, bring enough resilience content writer, someone who can do research to write a quality webpage for a small fee. You, when the client wins and the writer wins, everyone's happy, everyone gets paid. All any interest of improving SEO? I have a freelance writer and my network and regularly Looper in and my projects. So when Review, understanding keywords is vital to ranking well. And the more specific the key phrase, the better chance you have at ranking competitively. Now the fourth thing is user experience, or UX for short. This encompasses the entire experience interacting with a website. And you are their websites you enjoy going to are their websites. I don't know. You think of the differences there. What can you think of that makes or breaks a website experience? How about load time? If a website takes forever to load, do you enjoy the experience of waiting? How about websites? I obviously aren't designed to work well on mobile. Or sites are difficult to navigate. You can't ever seem to find what you're looking for. With all those grievances. What might you do if you get to the point where you're just fed up with a website, in some cases, you simply abandon it. You find another. And that's the point. Poor user experience on a website could cost a business, a customer, or sale. It, that becomes a trend and Google picks up on it. Do you think they'll reward that website with better rankings? Know? So let's talk about major ways to improve user experience. Clear navigation, bass load time, and mobile friendliness. Now we already talked about clear navigation as a way to improve crawl accessibility. Not only do robots like easy navigation, but so do humans. Now PageSpeed. What about a website's load time? How do we improve that? As customers, we all want websites to load promptly. But how does that happen? Well, there are several factors involved there, like how many high-definition photographs are on a site. How many embedded videos there are animations, third party connections, caching, et cetera. But a major one is your hosting server. Servers can have a huge impact on load time. Gp economy servers like the laryngeal find on godaddy, Bluehost, network solutions, et cetera, for about 10 bucks or less, will limit the performance you can expect from your website. That affordability. It is nice, but it comes with a trade-off. You could be checking every other performance box. But if the server is lackluster, you're really limited. So one of the many ways you can improve the SEO of your clients websites is investing in a high-performance server, which you should have as a web design company. For my recommendations, check the hosting lesson near the beginning of this course. You need the relay this to your clients because some of them will already have their own small business website on a dirt cheap hosting server. Might be shopping around for him server and find appealing those cheap prices. As a web design firm, you can educate them, move them over to your server. Cics is mobile. Another major user experience factor is mobile friendliness. We had a whole lesson in how to build mobile-friendly sites because it's important, born to consumers, It's important to web designers and it's important to Google. And anything that's important to Google and SEO must know. So how can we be sure it's important to Google? And let's see. So let's go to the Google mobile-friendly test. First off, there's a built-in test right here. Let's try this. Try this on my domain name, Run test. And this takes us to search dot google.com slash tests slash mobile friendly. This is the official mobile friendly test, or we can type in our URL and see if it's mobile friendly. Currently it is analyzing fetching page and running test. So we'll wait for this and see if our webpage comes out mobile friendly. This is a good thing to do before you launch a website just to make sure it's checking all the boxes. So in our case, the page is mobile-friendly. Surprise, surprise. This page is easy to use on a mobile device. This is a great way to prove to your clients that the website is mobile-friendly and passes the official Google mobile-friendly test. Now they're valuable service that you provide is making a website and mobile. So let's go to learn more about mobile-friendly pages just to see how important this is to Google. So there's an entire section of Google's search resources devoted to mobile. Welcome. Mobile is changing the world today. Everyone has smartphones. Would them constantly communicating and looking for information? In many countries, the number of smartphones have surpassed the number of personal computers. Having a mobile-friendly website has become a critical part of having an online presence. There you had. Google explicitly states that having a mobile friendly website is critical to your online presence. If you haven't made your website mobile friendly, you should, that's in bold. They want you to know that the majority of users coming to your site are likely to be using a mobile device. If you don't know if it's mobile friendly, take them mobile-friendly test, which we just did. And we best. If you use content management software like WordPress to build your website, check out our guide to customizing your website software. Very helpful if you're technical enough to do it yourself. Which is through code, which I know how to do. And that's done through CSS checkout, our mobile SEO Guide. Why make a website mobile friendly? So this would be an example of a non mobile-friendly page and a mobile-friendly one. And there's some various resources. Further explanations on how to do it, where you start, how much it costs to build a site for mobile devices. And the next steps, all of these resources are dedicated to mobile friendliness and mobile SEO. So I totally recommend diving into these resources so you can have a better understanding of the SEO involved in mobile friendliness and mobile sites. So there you have it. Google has explicitly, repeatedly stated the importance of mobile friendliness for ranking well in their search results. More proof that you need. Fortunately, as a result, several lessons ago, Devi makes it quite easy to develop and refine a mobile friendly site through their built-in responsive web design tools. Seventh, vector, image optimization. Images are one of the biggest culprits in slow websites. Why do you images slowed down webpages? And how can we fix that? Well, first, let me illustrate the actual issue. So let's say you take a photograph on your iPhone or digital camera. Have you ever noticed the file size on that photo? By web standards, it's huge. Now overall, that's a good thing. It means that the photo is high-definition, high-quality. We like that. The issue comes when you take that photo directly off your camera onto your website. So with that high-definition photo is four megabytes. Then all four of those megabytes or uploaded to your website. And all four of those megabytes must be downloaded in addition to the other images on your sides by each person who load your webpage. This is a huge no-no. In fact, business tip. If you ever come across a website with uncompressed DSLR photos. So listen to their business. They need you take those images, optimized them, gain a client. So what do you do to fix this problem? Does that mean that we don't want high-quality images? No, no, absolutely not. We love high-def imagery. We love it. But they need to go through two quick and easy processes. Resize and compress. Resize means changes the pixel height and width dimensions to fit the actual size you want displayed on your website. If you just need a little box that's 500 pixels wide, you don't need all 4 thousand pixel width straight off the camera. Take it down, take it down to the photo, to the photo size you need. Jumped in Photoshop, preview, paint, or pretty much any image editor. Resizing is a very basic image editing function. And second, compress. This means you keep the same dimensions, the same height than width, same quality, but compress it. To save on the file size. You can do this nearly instantly. Let me show you how compressing works. This is one of my favorite little pieces of software called image optimum. Now, there's a Mac downloadable app that's very small, very quick and easy to load. And there's a web service which is an online version of image optimum. If you're on a PC, there are so many options available. Image optimum is not one, but there are so many free resources out there to compress. But let me show you this one. Image Optum on the Mac image often makes images load fester removes bloated metadata, say is disk space and bandwidth by compressing images without losing quality. And that's the key here. So you can use this to make faster web pages and apps reduces image file sizes, so they take up less disk space and download faster by applying advanced compression that preserves quality. Image files scrubbed clean, removes invisible junk, which is a little back-end data attached to each image. Private EXIF, metadata from digital cameras, embedded thumbnails, comments and unnecessary color profiles. And it's drag and drop. Or you can drag and drop your images directly onto the software to immediately compress it. So let's see an example of this. By going to the web service. Will look at what's happening here. And this is a dramatic version by slowing down the internet speed. But look what happened there. Image from Stan standard tools, 27 kilobytes with optimum 14.3 kilobytes. Let's watch that again. So the one where the image optimum is loading faster. Obviously with high-speed Internet connection, even 27 kilobyte to load nearly instantly. But this is making it more dramatic to prove a point. So the main point here is, can you see visually a difference between these two images? There's one looks significantly higher quality than the other. No, they basically look exactly the same, but which one is smaller? The one on the right is 14 kilobytes, which is far smaller, pretty much half from the one on the left, which in this example would be the original quality before using image optimum. So fabulous way to continue to preserve the quality but reduce the size. So let's see how this works. I already have image optimum downloaded on my computer. I'm going to pull it up here and let's drag and drop an image from unsplash. So I've got an image here, an original size and resolution image from unsplash and also resized it myself with Adobe Photoshop. It's down to a 102 kilobytes. It's been resized to, let's see, 1200 dimensions told 100 pixel width. So that was resized and that's good. We like to resize things, but the size could be reduced. So right now it's a 102 kilobytes. And let's see if we can take that down using image optimum. So we're gonna go from 102 kilobytes and 1200 pixel width two. And that was almost instant. It's still 1200, killing 1200 pixel width, but now the file size is 83 kilobytes. That was a savings of 18 percent. Amazing. And if we look at the image, it looks just the same as a data a minute ago. And to confirm, the dimensions are the same. 1200 pixel width. Beautiful. We've got our resized image and we have a compressed just to squeeze a little bit more of the file size. If we do that with every image, that file and load time savings will add up and it will be beneficial both for user experience and for SEO. So I highly recommend dropping every single image into a compressor before uploading it to WordPress. And three, considered a file format. Most every photo you upload, the WordPress should be JPEG. You only need p and g. When you need transparency. Otherwise, if you don't need transparency, JPEG is much more web friendly since JPEGS are smaller than PNGs. Unfortunately, photos straight off the cameras app on your phone are already in JPEG, since it's the most common image format available right now. By resizing and compressing your jpegs, you will drastically save load time, which will improve user experience and search engine ranking. Now one final note on images, straight off the camera. Images have a sequential numbering system, like image 400, 41 dot JPEG. You have an SEO opportunity there. Rename that JPEG using your keywords. For example, if it's a photo of a dentist named Shawn, name it, Sean dash dentist dash Asheville dot JPEG. And you can even put it in your alt tags. Those alt tags will need a naturally legible keyword or phrase. Is all tags help both you're visually impaired visitors and the search engines understand what your image is. Very important. Number 8, SSL. This is another important ranking factor. Back in the Fundamentals lessons we learned the importance of SSL security. Now, for the purpose of SEO, let me explain how we know this is important to Google. So I'm taking us to an article on the official Google Webmaster Central blog. Now, this is an article from 2014. This is several years old. And even back then they started endorsing SSL. So what do you think it is now? Yeah, courses. And it's even more so now. So the article is HTTPS as a ranking signal. Then we know HTTPS. It means it has to be secured with an SSL certificate, which gives us the connection is secure, the padlock icon up here. So back in 2014, google announced that HTTPS was a ranking signal. Security is a top priority for Google. We invest a lot and making sure our services use industry leading security like strong HTTPS encryption by default. So Google vouches for it, and now they're recommending it for all webmasters to increase their security and in turn increase the rankings. There we've seen more and more webmasters adopting HTTPS website, which is encouraging for these reasons. Over the past few months, we've been running tests taking into account whether sites you secure encrypted connections as a signal in our search ranking algorithms, we've seen positive results, so we're starting to use HTTPS as a ranking signal. For now, it's only a very lightweight signal affecting fewer than 1% of global queries and carrying less weight than other signals such as high-quality content. We know I call the contents and most important thing, but we even care about the little ranking signals. All would give Webmasters time switched HTTPS, but over time, we may decide to strengthen it, which here we are several years later. It has been strengthened because we'd like to encourage all website owners to switch from HTTP to HTTPS to keep everyone safe on the web. So there you have it. This is from the official Google Webmaster blog. And furthermore, this articles several years old. So it has been strengthened, as Google said that it would. But they are admitting that HTTPS is a ranking signal. The purpose of that is to make everybody more secure. They want security everywhere, they want HTTPS Everywhere. So not only do you get the security benefit, but now you get the search ranking benefit as well. So that's the article from 2014. There's also an article on the official Search Console help the general guidelines. So there's an SEO Starter Guide here. And the very next article is secure your site to HTTPS. In fact, on the previous article, I think there's something here about, yeah, how do I get my site on Google? Here are a few basic questions to ask yourself about your website when you get started. And look at the bottom one, is my website secure? Google. Once you thinking in terms of that, as part of your checklist, when you launch a website to cure your site with HTTPS, protect your site and your users. It asks, what is HTTPS? There's that in three different ways, best practices when implementing it. Which WordPress and our really simple SSL plug-in usually takes care of that common pitfalls migrating from insecure to secure. So the point is, Google totally endorses SSL security and it is a positive ranking signal. So we'll take anything we can get as many positive ranking signals as possible. And this happens to be a really easy way and a win-win scenario, you went for ranking better and you win for security. And there you have it. Proof from Google's own guidelines that SSL is a positive ranking factor. And as we've already discussed, SSL is not expensive. Whether you charge your client or not, you profit off SSL or not. You need to stress the importance of SSL. In fact, here's an important takeaway. I don't recommend publishing any website nowadays without an SSL certificate. The benefits are too great and the cost is too low to skip on SSL. And number 9, internal links. These are links that connect the internal pages of a website. Hi amount of internal links pointing to a particular page on your site will signal to Google that the page is important. So long as it's done naturally and not in a spammy way. Let me show you what I'm talking about. So we're on one of my clients websites that provides invoice factoring two contractors all across the country of America. So this website has lots of pages, plenty of webpages, and you're plenty of different services and categories. So let's see how they juggle all of those links. First of all, the navigation, It's very clean, very simple. It's divided into who we are, what we do, which these are different services, even subcategories under the services. Success stories, referral partners, blogs, podcasts apply now and we have a few call to actions, contact us and get started. So as we scroll down, we're looking for internal links. So these are internal links? Yes, those do link you to different pages on the website, but we're also looking for links within the actual page. Let's see if we can find any. We've got some buttons here. Find out more about supply chain material financing. By now more about finding solutions. But look at these links. There's a, a bulleted list of different funding solution services, construction factoring, government contract factoring, spot factoring, contract, Contract factoring and disaster recovery factoring. So these are in a different color there in the blue that follows the color scheme of this particular brand. And when you hover over them, there is an underline to denote that this is a link. Where else do we have? So let's go to the what we do page, see if there's any links on here. Working capitals solutions. We've got construction factoring, government contract factoring, spot factoring, contract factoring, disaster recovery factoring, and some back-office support services. So let's click on one of these. How about construction factoring? So this is the landing page for construction factoring. They've created a separate page specifically for this particular service. Let's look at a few others. Spot factoring. So we're on the spot factoring page. This is the page that Google would promote when people are searching for the keyword of spot factoring. That wouldn't show what we do. There wouldn't show the homepage that wouldn't show any other page if people are searching for spot vectoring. This is the page that Google would rank. Remember, Google ranks pages, not websites. So we're on the spot factoring page. And what do you think this link tells Google about construction factoring and spot factoring? Are we on the construction factoring page? No. There's a link to it and the link takes you off this page to the construction factoring page. So all of those links across the entire website. Anytime construction factoring, the keyboard is used, it links to this page. The more links you have, the better picture that Google has of what your website's situation is, what services it provides, what keywords, what questions that your website can answer there when the content is laid out that way, Google can really understand what you're all about and how best to navigate the site in terms of to rank and altitude rank these different pages. So beautiful example of internal links. Links are the backbone of SEO. In internal links help Google better understand your website. Why? Well, whenever you referenced a porcelain veneers properly links to the veneers page. Google knows. And if somebody is searching for porcelain veneers, that's the page that should rank for that keyword. And not the homepage, not the all encompassing services page. Now one quick side note. Do not use click here as your link text. Google has no idea what that means. Your clickable links should include the keyword of the page you're linking to. If you're linking to the page dedicated to your bookkeepi 30. Off-Site SEO: Welcome, I'm Leighton, your webmaster. In the previous lesson, we learned on-site SEO techniques. Now, let's look at off-site SEO or things we can do off the website to improve its rankings. Specifically, we'll look at SEO tricks proven to better your rankings. Will look at one, reviews to social proof, three, external links for popularity. Five, Google My Business, and six, Google Search Console. Some of these are tips and others are tools. Let's look first reviews. So let's say you're choosing a pizza restaurant. One option has 50 five-star reviews. Another has to one-star reviews. Another is not reviewed at all. Which sounds like the best choice. And why? Now based on that data, the first one would seem like the natural choice. Now it's possible with the third one, the one that has 0 reviews, that one might be the best quality and have the best prices. But why don't you perceive that as the best option? Because of the reviews. Now reviews can easily skew reality. But the reality is people put a lot of trust and reviews. And for that reason, Google considers reviews when ranking local businesses. Now the search results are not sorted from best to least reviewed. But the better of you, the business typically does show up near the top. And for that reason, it's super valuable to focus your efforts on those Google reviews. But what's the big issue with the reviews for your web design business? So that you can't write reviews for your clients. They have to happen organically. What you have little control over. But what can you do? Educate. You can educate your clients so that they take reviews seriously. And they're even paid sites specifically designed to build up your reviews. Maybe you've heard of bird's-eye podium, yet. They basically act as a portal for managing reviews and a convenient assistant to collecting reviews. How do they do that? By sending out a text or an email whenever your client makes a sale and it encourages that customer to review them. But I'm not a huge fan of these services. Why not? Well, for one, it's just another recurring expense. But more importantly, reviews are very free. They're free to gain, free to manage, free to respond to. Google. My Business has plenty of review management tools built in to the service. In fact, here's a free hack for you. Create a sub-domain called review before your clients domain name. Forward that directly to the Google review form. This is an easy, memorable link that your clients can send to their happy customers. It removes the friction of having to look up the business, find the correct one, go to the listing, click rider review. You want to make the review process as easy as possible for your customers. Let me show you this idea. So first I want to show you what we're talking about. So we'll go up to the top and we're going to type in review dots. And then for my review form, let's put in my domain name, Review dot pioneered dot and media and see what happens. So my domain name is pioneer.me and my sub-domain is review. And there we go. It pulls up the review form. This is taking somebody directly to the Google listing and directly to the review form. Nearly all of the friction has been removed here. All they have to do is enter the amount of stars I want to give you, preferably five. Tell us a little bit about the business and then enter their review. They can add an optional photo that can check some of these optional boxes. Good quality, good value, professional responsive. But the basics are just the number of stars and then the actual review, we love Pioneer media. And then they click post. That's it. You're not really asking them to do much more than take five minutes out of their day. So that is a very convenient way to take people to your Google, My Business Review form. You can do this for yourself and you can set this up for your clients to make their earnings reviews so much easier. So let me show you how we got this link and how we set up this sub-domain. I'll click Cancel here. And let's go into Google My Business. This is the Google My Business, and this is my particular listing. So we're at business dot google.com and we'll scroll down to get more reviews. Do you see this? Share your business profile and get new reviews from customers. So we're clicking the Share Review form button and it pulls up a box here. Request reviews. Give customers a link to review your business on Google. Click to copy link. And there we go. It takes him to G, Google Doc page slash, the username of my Google, My Business listing, which in my case is pioneer media knocks slash review, question mark RC. So that is the link that takes people directly to the Google, My Business Review form. So how do we set up that the sub-domain? Let's see. Now we're going into I illness. It's logged into our ionised account and go into our domains. Specifically, we're going to whatever your domain registrar is. In my case, this is ionised. Here's my b GoDaddy or your clients might have theirs at another location, google domains, GoDaddy, whatever. In my case, I purchased mine and it is available in Jonas. Let's go into subdomains and in your domain registrar. And we want to set up a sub-domain. In this case, review dot pioneer.media. Grading one is really simple. In Ioannidis, you just click Add sub-domain and you type in the sub-domain. There it is. Really simple. How did we start using this sub-domain? So right now it's currently redirected to our link. But let me click this sub-domain to see how it works. So now we're on Review dot pioneer.media, and you click, the target destination is redirect Forward domain to a different website. And redirect to destination. That's where you paste that link that you got from Google, My Business, the link that takes you directly to the review form. And that's all you gotta do to set up a sub-domain. So at this step, we have created the sub-domain review dot pioneer.media. We're setting it up as an HTTP redirect. Automatically redirect your domain to the desk, to the destination domain. The Internet address URL of your destination domain will appear in your browser's address bar. And we click Save. And our sub-domain is created and we can begin using it. So that's how we do that really cool hack to reduce the friction of gaining reviews as much as possible. But let me show you the Google My Business Review platform. So we're back on Google, My Business and Business dot google.com. And let's click reviews on the left-hand side here. To go to our review management portal. Joe, customers, you care one response at a time. Your customers now get notified when you reply to the review. So basically, all you can really do here is manage your reviews. It shows a list of all of the reviews you've already obtained for your listening or your clients listing. And you have a few options, you can flag. One is inappropriate. Now that's difficult to get a review removed. I've created a whole blog post about this, how to manage one-star reviews, what to do with them. Basically, you can only get a review removed if it violates google's terms. So in short, that would be like if it's explicit, if it's illegal, if it's pornographic, if it gives a very rare case, if it's sexual harassment, It's very rare that you'll find that in a review if somebody's just legitimately saying I didn't enjoy my experience with this company. Google is going to allow that because that's an honest review. So most one or two star reviews, if your client asks if he can remove them, 99% of the time, the answer is no. So what do we do? We just try to get as many five-star reviews as possible and balance that out, bring up the average. So here's some of the reviews I've gotten recently. You can sort them by replied and haven't replied. So there's one here that I have not replied to yet. Here's the actual review. Here's who wrote it, and you can click the Reply button and write a reply for the review. Let me do this. Thank you very much, Ron. We so appreciated working you on this project and look forward to the next. Great. Keep it short and sweet. That's all you really gotta do is just thank them for the sincere review. And click Post Reply. There you go. Google wants you to reply to the reviews. They factor that in with their algorithm to increase your rankings and just a minor away when you reviewed to the one you respond to the reviews, they like that. It just shows that you're an active business and you're taking an interest in your reviews and trying to stay on top of your reputation management as best as possible. So there you have it. That's Google's built-in review management portal. This is what you're looking at right now. This is exactly the reason why I do not pay for any external service, any premium service for reviews because Google has this built-in, you can just go to business dot google.com, pull up your listing or your clients listing and manage the reviews, respond to them. And there's even a freeway to take people directly to the review form, which we saw here with our sub-domain. And there you have it. The second is social proof. This refers to how many likes, shares, and followers you have. Now for the most part, those numbers don't really affect your rankings unless your post goes viral. And the exception to that is Twitter. Because of an agreement between Google and Twitter, tweets are actually deeply integrated into Google search results in real time. But what should you do for your clients? Well, if they don't already have social media accounts, you can create them. But most importantly, you need to link them to and from their website. Every major social site has a website link, usually near the bio. You should link that to your client's website. And on the website itself, the one you build. You can use dBs built-in social options and modules to link that to their social media. This will help them build up their social media presence with the goal of gaining customers and spreading brand awareness. And that could have an effect on the search engine ranking. Now third, certainly not least is external links. These are the links from other websites to your website. And when I say your website, I'm referring to the websites that you build for your clients since the 1990s, links, citations, content recommendations. These are the backbone of SEO, the main authority signal. It's kinda like a popularity vote. Yeah, if people, if enough people link to your website, it's viewed as popular. And therefore important. Of course, the credibility of the site you're linking to is considered. For example, which do you think is more impressive? A recommendation from the New York Times or a local small-town electrician? National Geographic or your local biology teacher? Yeah, a recommendation from those established at the word East, The New York Times, National Geographic are absolutely golden. That puts you on Google's radar and establishes your content as important. Now links from those lower quality sources, they're not going to hurt anything, but they just won't be as helpful either. So how do you get links? How do you get links? That is the most important question you can ask an SEO. Let's look at a few ideas. Now. For one, you have to gain these organically buying links, paying an SEO company to obtain links and organically using spammy techniques like, like commenting on every blog out there. We're asking for a link back to your site that is not recommended, never recommended. That's not how you earn quality links. Google's very clear that that stuff doesn't work. It has to be natural. But second, think about how you network in person. Like an auto accident attorney. Those network with auto insurance agents as a water damage restoration company. You network with plumbers, realtors, network with landscapers, photographers with the other photographers. Those relationships are mutually beneficial and built naturally. Links are like the digital version of networking. So when two reputable businesses linked to one another, both benefit. Now third, think of local news coverage. If your client can pick up positive attention from a local news source, those links are very valuable for testimonials. If you ride a testimonial from another business, you can request that they link back to you five, blogging. If your clients and expert in their field, perhaps some blogs in that industry will let them be contributors. If the blog is reputable, a guest post linking back to your clients will prove very valuable for their SEO. Number 6, a resources page. Many websites have a links or resources page. Getting on that list can really help your SEO. Point is, however you gain links, they should naturally happen over time, not all at once and they need to be organically. But ultimately, what's the point? Here's the point. The more high-quality links to your website, the better you will rank. So establish your authority in your or your client's industry by earning attention and links from other sites and influencers. And number 4, popularity. This involves promoting the site and bringing in traffic. This is especially important with a new website. So let's say you launched your client's website. Course. You've done a beautiful job designing it. It looks awesome, but no traffic comes in. No inbound links have been established though, advertisements, no social media and overviews. And so it's, it's how do you think Google views that website? Does it have any sort of authority? If you are Google, would you rank that psi above the competition? Likely not. See when traffic comes in, when traffic stays and returns to a website, Google starts recognizing its popularity. And while that's certainly isn't the only ranking factor, it does help. You just gotta make sure that traffic is legitimate. Number 5, Google My Business. This is a free tool that we've already discussed a few times. It allows you to create your Google local listing for search and for maps. But how do you utilize it for SEO? Well, you start by creating your free listing. As long as your client as a local business, you can create a free listing for them. Now there's important, there's a few important SEO considerations for your listing. First off, your name, address, and phone, or nap for short, should be typed out exactly as it shows on your website and other directories for that matter. Second, make sure you sit, you link your Google My Business listing to your website. This creates that synergy and start singing search traffic to your site increase the popularity. Third, use the description field to jump in your keywords forth. Ultimately, for SEO purposes, you want to fill out your business listing with as much information as Google allows, more information, the more keywords you input, the better that Google can rank your listing. And number 6, Google Search Console, formerly called Google Webmaster Tools. This is a free tool built by Google, specifically designed for webmasters to try to track the search performance of the website. What else can you do with Google Search Console? Let me show you. And here we are on Google Search Console. This is the reports for one of my favorite clients, J orange.com. We're at search dot google.com slash search dash console. And specifically I have pulled up a particular client's reports. So we start out on the overview section, including performance here. This is the performance data for the last couple of months. And it shows they received at 26000 total web search clicks. So performance is one of the most important thing that you come here to do. You can click Open Report to v more information, which we'll do here shortly. And this is coverage pages with errors. So these are the pages on your website that are indexed by Google. Which ones are valid? Good, and which ones are invalid or have errors. Great way to diagnose any problems that might arise. And then enhancements are some extra things that Google suggests that you can do to make your listing a little better. All right, so let's look at the sidebar here and click performance. This is the main section that you'll go to in Search Console. So at the top we can refine by looking at the Search type, web, image, video, and news. Mostly we just go to web and then date, it defaults to the last three months. You can do last week, the last one month, three months, 612, or a custom date range. And we'll look at the last three months. And you can even refine it a little further by looking at a specific search query, a specific page, or country device search appearance. So what we see here is the total clicks, the impressions, the click through rate, which is the percentage that the listing was viewed and then clicked and then average search position. I like to check that box as well. Because when we scroll down here, we can see what position the average position these particular searches showed up. Let's look at the top 25 key terms. This is currently sorted by the most clicks. So clearly the most clicks would be the company name. In their case, it's jail ranch. But let's look at the top top five here. So the second one would be one of their three primary services. They offer zip lines, horseback rides, and ATVs. So clearly, the most popular service in the last three months has been horseback riding based on this data. So 623 clicks using the term horseback riding Pigeon Forge, the impressions or how many times that jail ranch website popped up for that search was over 5,600 times. So it pulled up over 5 thousand times. It was clicked over 600 and averaged the position of six. That would be on page one. So page one typically has ten listings. So anywhere between one and 10 on the position would be the first page. 13 would be the third slot at the second page. So here are the top five would be the company name itself. Horseback riding in that area, that City of Pigeon Forge, horseback riding near me. Those are probably people who live in that area where the company is located. Jay orange ATV and jail horse ranch. So you can use this data to see what the most popular, most searched services are and where you're ranking competitively using the position. You can also sort by the most impressions to see what people are searching for. And you can sort by what you're showing up. Number 14, this data is very valuable. You might use this to see what people are interested in, what people are searching, where your website pops up. And you can also use this data to create a separate page or blog post specifically for what people are searching. All right, what else can we find? Url inspection, this is where you copy and paste a particular URL. And it just tells you if there's any issues with the URL. If it's good, if it's mobile friendly, SEO friendly, if there's any errors or issues with it, that can be helpful. And now index, so index would show up the list of pages that are indexed by Google. In this case, there are no errors because we stay on top of or Google Search Console. As a webmaster, you want to make sure to clear up any errors and shows that 18 are included in the index. In their case, they don't have a terribly large website. I just had the homepage about us reviews, contact, and one for each of their services and a few extra pages. So not too terribly huge of a website. And there we go, submitted an indexed, it shows 16 pages here. So another really important part of Google Search Console would be sitemaps. So when we first launched this website, we made sure to submit the sitemap, very important, the sitemap dot xml file. So that was submitted several, several years ago in 2014, and it was last crawled October of 2020, which at the time of this recording is just a few days ago. So Google automatically picks up the latest sitemap thanks to our setup with WordPress and all in one SEO Pack and Google Search Console. Everything stays synchronized and up-to-date. Whenever we refresh the site, add new pages or whatever, it automatically gets submitted. Very convenient feature. So I'll have to go in here in resubmit a new sitemap anytime something changes, that's done automatically. Very, very helpful. Now, removals. And this is where you have a page index on Google that you don't want there. There's plenty of reasons why you might want to remove a page, like if it was a temporary promo or if it's should be hidden content or locked or premium. Maybe you want to hide some content behind a paywall and you don't want people to be able to find that page unless they've paid plenty of reasons why you might want to remove a URL. You can do a temporary or a permanent removal by clicking new request. And the URL. This reads block URL from Google search results for about six months and clear currents, current snippet and cached version, they'll be regenerated at their next scroll for permanent removal. Either block pages from indexing or removed them from the site. And there's a link to get more details on that. So that can be a helpful feature and you can do that directly through Google Search Console. Now over here we have some enhancements, Core web vitals, mobile usability, which tells us whether or not the site is mobile friendly and if there's any issues, like text too small to read or clickable elements too close together. In this case, there are no errors like that. If you did have an error, you could open this up and diagnose it and then resubmit the URL so that air can get cleared and you're no longer dinged by Google. And then review snippets. In our case, this website does have a review snippet. You can look up Google snippets as a neat feature where you can add extra data to the search results like events and recipes and reviews, all kinds of other stuff. In this case, they do take advantage of one of the types of snippets. All right. Security and manual actions. Can take manual action, see if your property has any manual actions that might prevent it from appearing in Google Search, you can learn more if you need clarification on that. We'll click, Got it. Because there's no issues detected if their war or we could go in here as their webmaster, diagnose them and resolve them. Security issues. There are no issues. But if the website got a virus or something and Google picked up on that, then they would alert us, we could go and rectify the problem. Legacy tools, this refers to the older version of Google Search Console, which is Google, Google Webmaster Tools. And these particular tools have not been ported to the New Search Console. So obviously, Google doesn't view them as as important as the other parts of the Search Console. Links is very helpful. This shows us the top external links. In their case there you have 507 external links. Those are links from outside j orange.com or this client's website to your website. If you're used to the old report, please see these notes. So these are the top linked pages. So another website is linking to these particular pages. All right, so let's see what else. Top linked pages on internal links. Links from your property to your property. And property would be website. And then top linking sites. So this shows us the top external links they have. In their case, it's YellowPages.com, pinterest.com, global rental site.com, coupon cell die in pseudo picks.com. Some of these are spam, some of these are legitimate. Obviously, Pinterest should be legitimate. That would basically mean people have been pinning some content that links to that website. Top blinking text that shows what is specifically clickable in these links. Then let's look at some more of these top linking sites. It's a very valuable way to see which websites are linking toward to your website. Very helpful. Alright, and then one more thing, settings. So under settings, you have to verify your ownership when you first add a URL to Google Search Console. And there's the opportunity to add other people to your reports. So I do recommend adding your clients as a user. If they're techie enough to understand these reports, you can add them as a user and that way they'll get copied on any kind of reports that go out. Google Search Console does and Google My Business. They both send out regular Analytics reports and that is helpful. So the client will see what kind of hits they're getting on their website. So you can add them by copy and pasting the e-mail address they use on their Google account, such as their Gmail or what they use to login to their Android phone or their YouTube account or whatever. One final thing, how do we add a website to Google Search Console? You go to the top-left here and add property. There we go. Property type. You would add the domain name such as pioneer.me and and you click continue. In my case, I already have this added, but you would copy this little piece of text for the DNS record, go into Ioannidis and add it as a DNS record. Let's, let me show you how to do that. We're going back into I, Jonas and opening up the DNS records for the domain name. And I will show you how we can quickly and easily verify a Google Search Console property. So you go into your domain and you can do this in GoDaddy, you can do this in any domain registrar. This is all universal. We click DNS. From there. The verification record. We can add by clicking Add Record TXT. So there's different types of DNS records that serve different purposes. The TXT is just basically some arbitrary information data. In our case, it's just a little piece of code that says, yes, I own this domain. So we'll put the at sign. This says You copy the TXT record into the DNS configuration, so we can copy that and paste it. All you'd have to do. Then click Verify and you're good to go. And with that, that is how you add a listing to Google Search Console, one of the many wonderfully free tools in your repertoire, so you can monitor and optimize the performance of your website. Enjoy. And I highly recommend connecting every website you build to Google Search Console. Submit your sitemap as soon as you launch your website and monitor the performance over time. This is especially important for your website care service, which we'll talk about in the website maintenance plan lesson. Stay tuned for that. So to recap, what have we learned so far? There are more ways you can improve your search engine rankings using offsite techniques, such as earning positive reviews, gaming social proof, creating trusted imbalance, bringing in traffic through popularity. Google, My Business listings and Google Search Console. Now please understand that as a webmaster, some of these things are going to be more difficult for you to do for your clients. For example, you can't really get reviews, but you can't dictate how popular the website is. You can't make them go viral. You can't create quality inbound links for them. These things have to happen organically, for the most part. So what can you do with your expertise and guidance? You can educate your clients on ways that they can improve their rankings. That education is so valuable to them. What you've learned. Continue your SEO education so that you become more of a valuable resource for your clients. And what's the homework? I want you to start implementing these off-site techniques for your web design business. I'm Leighton, and now you know, off-site SEO. 31. SEO as a Business: Welcome. I'm Leighton, your webmaster. In the previous lessons, we learn both on-site and off-site tech SEO techniques. Now, let's take that knowledge and marketed as a web design business. So you have several options. You can not offer SEO at all. You could refer to an SEO specialist. You could bundle it with your quote. You can charge extra for SEO included in your website maintenance plan, or you could solicit SEO audits. Let's talk about these business opportunities. But first, as a word of caution, if you do choose to solicit SEO work and know what you're talking about. That means, in addition to what I've taught you, do some of your own research. Watch educational videos, read Google Webmaster resources, and experiment with SEO on your own. Have a solid understanding of SEO before you start teaching your clients about it. Now the first idea, you could just not offer SEO at all. I really think this is not the best choice unless you do option number 2 and referred to a specialist. And why do I not recommend this? Because in my experience as a webmaster, than number one thing on a businesses mind is their search engine rankings want page one, we all do. But some clients they want even care how a website looks as long as it ranks well. So SEO is totally something that you need to comprehend. And even if you don't pursue it as an expert for your specialty, you still need to understand it so that you can make educated recommendations to your clients and informed decisions when building their SEO friendly site. As a reputable website designer, everything you design should be SEO friendly. Number two, the second option is to refer to an SEO specialist. This really is your simplest option. I'm a huge fan of specialists. I regularly refer my clients to photographers, content writers, advertising firms, et cetera. Why? What do you think that's wise? Because they're just better at what they do than I am. We all know that they win. I win, the client wins. Everyone wins when we bring in specialists. And in terms of SEO, if you can find an affordable and talented SEO guru in your area, check them out. If you can form a business relationship. The best relationships are the ones where you give them SEO work and they in turn give you website design jobs. Now to be clear, in this scenario, you don't really collect any money for SEO work. You're simply giving the name and number of the freelancer or company that you recommend. It's kinda of like say realtors and title companies. They each have their own specialty, but they regularly past business to one another. They don't try to step on each other's toes. Rather, they build each other's business through referrals and that becomes profitable. The third, you could charge for SEO, let's say you studied SEO and you're ready to market those services. You can add that to your quote. You could charge an extra, say to 95 for 95, 995 for search engine optimization. So another way to generate income and serve your clients. But there is a major issue and why I personally don't charge extra for SEO. Can you think of any problems with making SEO on optional add-on or upgrade? It puts anyone who declines at option, usually for budget at a serious disadvantage, the website will be lacking. And they'll come to you several months later wondering why their website isn't ranking and forth. You could bundle this with your quote, I love this option. It's my favorite. We'll talk more about your, your, your prices, several lessons from now. But basically, I like to include SEO and my bundled quote, not as an optional add-on. So for one to $5 thousand, whatever you're charging, the client receives a beautiful functional website, one that's mobile and search engine friendly. And honestly at that price point, SEO should be optional. It should be built into the core of the website you develop. And if you're looking to develop any long sort of relationship with the business, It's also in your best interest to build a high performing website. We loved those long-term relationships. So don't make SEO paid add-on. Make it default with your website's. Number five, we can include this in our website maintenance plan. We'll talk more about maintenance in the next several lessons. But SEO is an idea for your website care service. But since SEO is such a far-reaching concept, you need to figure out what is it specifically that you're offering? Are you offering a monthly SEO audit, a quarterly on it? Reviews management, blogging, content creation. See a lot of the on-site SEO techniques you apply when you're first building the website. So after that, much of the ongoing SEO takes place offsite and in the hands of the client. Blogging, posting, earning reviews, building links and relationships. Much of that really is out of your control. You can help, but ultimately, it's in the control of the client or the customer. So convey very precisely what it is you're offering. If you tell clients you'll provide SEO as part of your monthly service agreement. And number 6, SEO audits. This is where you thoroughly review every page for SEO pluses and minuses and prepare an extensive report of your findings. What do you think that would be worth? I'll typically charge for 95 and spin the few hours on this. But you'll have to consider are these just your findings or your findings plus your fixes? If you're fixing SEO issues, how much time when you spin on that. Say, you have to be very clear in setting your expectations for this audit. And to be clear, SEO audits, they're not for beginners. They required the knowledge and the experience. It's like a home inspector. Would you pay for a for an inspection from somebody who had never inspected a home before? No. Likewise, your SEO expert needs to be educated and knowledgeable in that field. So what have we learned? There are several ways to market SEO services to your clients. You can pass on SEO, not offer it at all. You could pass the work onto a specialist. You can charge extra for SEO, which would bundle it with your quote. You could include it with your website maintenance plan and you can sell SEO audit. And what's the homework? I want you to brainstorm the ways that you are comfortable marketing SEO services to your clients. Wow, this was a lot. And just a few hours you've learned so much about search engine optimization. And this is such an exciting topic. I hope I've been able to demystify it for you. This is a complicated subject, but it really boils down to just a handful of factors. I hope you've seen that. And now, armed with that knowledge, you can start getting firsthand experience as you improve your client's search engine rankings. So excited to see what you're able to accomplish. I'm Leighton and now you know, search engine optimization. 32. PART 5: Website Maintenance Plans: Welcome, I'm Leighton, your webmaster. In this series of lessons, Let's talk about one of the most exciting parts about being a website designer, the website maintenance plan. These are awesome. They're basically like insurance for your website. I mean, you insure something valuable, like your car case, anything goes wrong. A website is also valuable and needs to be protected. And like your car, websites need maintenance. It might not run on oil, but they do run on software that needs to be refreshed. And that's where you, the webmaster come in. Clearly, I love website maintenance plans, but why am I so passionate about them? Well, let's go back to the very first video of this course, the introduction. You remember what I asked? Are you interested in financial freedom? Freedom to choose your own hours, freedom to travel, work from anywhere in the world. Yes, being a web designer does enable those goals. But more specifically, what is it about the web design business that supports those goals? It's recurring revenue, a steady stream of revenue that you can rely on each month. Otherwise, you'll find yourself in feast or famine. Have you heard of that term? What does feast or famine mean to you? To me, it means that if I didn't have revenue from my website maintenance plans, I wouldn't know how much money you have coming in each month. Think of it in terms of salary. When you're on salary, you pretty much know how much money you're collecting each month. On the other hand, when you are a freelance web designer working for yourself, you could have 10 projects going on feast or 0. Bandmann. What do you do on the famine months? If you have a website maintenance plan, you just focus on pleasing your current clients. Those clients have already agreed to pay you 50, 75, 100, $150 a month, whatever you agreed upon. So you know, you'll have steady, reliable income each month. But what if a client drops off? Maybe they, they close the business, maybe they retire, they all grow you, they downsize, whatever the reason. How does that affect you? By diversifying your income stream across several clients, you still have those other clients paying you each month to be the webmaster. In fact, the most I've ever lost. 33. Maintenance Services: Hosting: Welcome, I'm Leighton, your webmaster. In today's lesson, let's discuss a major feature of your website means in its plan, the hosting, and specifically domains, hosting servers and emails. So there's two philosophies about a website maintenance plan. Hosting separate from maintenance and hosting bundled with maintenance. I find it much more valuable and efficient to bundle those two together. Why? Well, let's go through three different scenarios. One, you can now have offer hosting at all and require that they set up their own hosting server. Now, can you think of any possible issues with asking a non-techie to set up their own server. That doesn't fly when those people, they simply aren't proficient at servers and that's fine. You probably don't understand what your clients do as much as they do. You each have your own strengths and weaknesses. And for non web designers, hosting servers is just not a strength and that's okay. The second scenario, you could include hosting, but set the account up in their name. Now I shy away from that for the same reason. Most of my clients just really don't want to fool with hosting. They'd rather be in more capable hands, which leads to number 3. Rent your own servers and offer hosting as part of your website maintenance plan. That's what I recommend as it's in the best interests of you as a business and your clients. Do you recall the company that I rent servers from Ioannidis? That's right. Since 2006, I have exclusively rented from ionise. Though your ion is account, you can manage domain names, email addresses, and websites all in one convenient portal. Let's go through each of those individual services. As we do. I'll walk through how you offer them to your clients. Domains. You basically have three scenarios here. One, if the client, if the client wants to keep their domains under their roof, that's fun. Most of my clients nowadays have their own GoDaddy account. And I actually prefer that in that case, they pay the $15 or so per year directly to the domain registrar. And where do you come in? You still manage the domain, you still point it to your server. You handle the technicalities. You just do it all through dare domain login. Second scenario, if they already have a domain name, but want to transfer it to you. Great. You asked for the auth code authorization and transfer it to your ionised account. They'll feel safe knowing that their domain name is in the capable hands of a webmaster. You'll be charged the $15 or so per per year renewal cost. And you can either invoice that invoice your client for that or included in your monthly bill. That third scenario, that they don't have a domain name at all. Maybe they're a startup. You can register it directly within your eyewitness account, bill your client annually or bundle it with your monthly bill. Either way, option 12 or three, you still need to add it to your eye witness account so you can host and manage it. Let's look at that. So we're starting off in our ionised account and I want to show you the domains section of Ioannidis. But before we do that, let me show you a GoDaddy account. This is my client in Austin, Texas in America, and they have their own domain names in their own GoDaddy account, which to be clear, is perfectly fine. In fact, it's preferable that they have their domain in their own account on their, their own roof. Let me show you how we can access that and point it to our server for hosting. So first we login the client. You can do that by asking for their username and their password. And now we go into the domain and we want to click Manage DNS. At the bottom here. Manage DNS. And we're looking to point the name servers to our eyewitness account. So under DNS and name servers, we need to use custom name servers, which this has already been done, but I'll use my own name servers here. And then you copy and paste the ones that 1 and 1 gives you when you set up an external domain name, which we'll look at here in a second. So this is just a copy and paste from our ionised account. What that does is it tells all traffic, all emails, everything to flow away from GoDaddy onto Ioannidis, which in our case, it's going to be directed to the ions account that we own. So now that we've looked at that, let me pull up our ionised account and I'll go to domains and SSL here. So the client has the domain name registered under their GoDaddy account. And now in our IO miss, I've added this to my account. So how do we add an external domain name, one that's not registered in our ionised account. It's not registered in our name. It's still ultimately in the client's name. We do this setup external domain. That's what we're looking for. You can do this on any hosting server, on any hosting account. So setup external domain name. There, you would type in your domain name. In my case, I have already added that. Let me take out, make it the incorrect domain name. Maybe this will be available. I'll Never mind. Let me try this. Okay. I will just aloha plumbing. Okay. So you would add the domain name and then you would select which contract you want to add it to and follow the steps. And they'll give you a name server that you can copy and paste. Let's go back into our ionised account, will go back to the domain name. And now let me pull up the external domain. The green means that it has been secured with an SSL certificate. This is the domain name, and instead of it being registered, I own this. This is an external domain name, which means we are never charged for this domain name. The $15 or so per year is billed to the client through GoDaddy. So it ends up being a little cheaper for you. Alright, we click on the domain name, and here's the information that we see. The status is active. It's an external domain name, which is the opposite of being registered at I own is where you would have to pay the registration fee. The destination is webspace, so it's connected to this folder on our hosting server. We can manage and create email addresses for them. The SSL certificate has been installed, secured with SSL. That's the contract number. You can reset it and remove it from the account. All right, what else can we do for our clients domain name? Under subdomains? You can add a sub-domain by clicking Add domain name server. This shows the name servers are being used and that's what we copy and pasted into the DNS area of GoDaddy on our client's account. And then DNS is where you can edit the DNS records. So in this case, the MX record tells emails to go to our ionised account. And these a records say it's hosted at Jonas and then this is a Google Search Console verification. So you'll have two different types of domain names. Though your eyewitness account, you'll have external ones like what we just looked at, which is very common. That's where the client has their domain name on their own registrar. And they're pointing it to you for hosting. Or you can register the account through Ioannidis. So register, purchase the domain name. And you'll be paying the $15 or so per year. You'll be billed by Jonas and you can pass that charge off to your client. Or the other option would be transfer. So the second option was ordered domain. The third is transfer domain to ionise. So this is completely transferring the domain registration from where it was before into Ioannidis. So it would be out of declined to count into yours. So you select which one you want to go into, and then type in the domain name. And what would we do next? Let me try this for this client. We'll see what it asks for. Transfer check. So obviously it's been registered. How do we transfer? Change for your domain name now? Click Transfer. Help discipline may not be transferred. That's because we've added, added it as an external domain name in our account. Let's see what steps it, it asks for. Prepare your domain for the Move Requests an authorization code from your current provider. What is that? That would be this. So if we want to transfer it, would pull up our domain name and then we click Transfer away from GoDaddy. We do that. We have to confirm all these different things and we'll be given an authorization code. So step two, we get a code. We take that code and we put it into Jonas, transfer the domain, enter the domain name you would like to transfer into a domain check or above, then into your authorization code and it'll be transferred to your eye witness account. They'll send an email to the admin contact on the domain account. And that e-mail will contain a link where they can accept or reject the transfer request. So we need an authorization code and we also need to make sure that the e-mail address on file is correct so that we can access that e-mail and accept the transfer. But ultimately, whether we keep it in ionise or whether we keep it in the client's GoDaddy account or not, we're still going to need to add it to our ionised if we hope to host the website, either by ordering it straight, transferring it an existing one from another provider to ionise or setting up an external domain by keeping the domain into client's account. So those are our three options, and those are the services that you provide on an ongoing basis. You take care of your clients, domain names that are in your eye witness account. They're in your hands. You have there GoDaddy login, you have the expertise to understand DNS, authorizations, transfers, domain contexts. All of that is under your expertise. You can provide support and management for these things. So to recap, what maintenance services are you providing for a company's domain name? You handle registration, management, transferring, renewals, contact information, security, DNS, and more all valuable services to give a business owner peace of mind, knowing their precious domain name is in good hands. Now, hosting, this is where you put your client's website. Your ion is hosting server. Again, there are typically three different scenarios here. One, the client already has their own hosting account and they want to keep it that way. Perhaps they've already, you have decent hosting or they're just paid up with their existing server. Whatever the reason, that's fine. All you need is the login to their hosting account. Build and maintain the website on their hosting server. Always leave the door open to host with you if they'd like. Now to be clear, this is not ideal. Why? Well, they could have a killer high-end server or not. More than not, they'll have a five-dollar shared hosting account from GoDaddy that they've paid up for three years or ten years or whatever. And in lower quality hosting only cause problems in the long run. So be nice and respectful about it. But you really want to encourage them to host with you. If you see they're hosting account is basic. There'll be a hard sell. Don't make them feel bad, but always be educational about the benefits. Second, if they do decide to transfer to your server and most clients will, you'll need to migrate it over to your eye witness account. How do you do that? Well, what do you think it's involved in a website migration? The database, the files. You'll also want to note the domain settings and the e-mail accounts. Do they hoped through emails elsewhere or do they have mail accounts created within their server? Know all of those things. Because here's a key point. You want the migration process to be as seamless as possible. Minimal downtime, no data loss. This will be the first step at building trust with your client. So how do we go about a server migration? And let me show you an example. Now, right? So I want to show you an interface of a hosting company that's different from GoDaddy and different from Ioannidis, the site ground. They have wonderful servers available. And every now and then you'll come across a client who already has a website hosted on a company like SiteGround. So what do we do at that point? They already have an existing live website on another hosting platform, and they have given you permission and agreed to transfer that to your hosting server on IE Jonas as part of your website maintenance plan. So how did we do that? Let's look. So we're in the client's SiteGround account. This is a paving company in New Zealand and let's open up websites. Here we go. Prestige paving dot, co, dot n, z and z for New Zealand, which was a challenge because I honest actually doesn't allow in z dot coda in Z domain names. So in this case we had to open up a siteground dot Asia account. But whatever, it was, a new challenge that we had to overcome. So we opened this up and we'll click Site tools over here. And our goal is to find out how we can save a backup of the website and drop it into our ion is account. So what do we see here? We see app manager, which we can ignore. We see email accounts which would list all of the different email accounts on the server. Those would be hosted IMAP e-mails. Here's file manager, that's important and Cloudflare, CDN. So let's open up File Manager. We're looking for two different things here. We want the files and we want the database. So File Manager. And pull up. Let's click public HTML, which is the live section of the website. And there we go. So these are the WordPress files for this website. Perfect. Looks like the files are available and we can download them. So what's the easiest way to download them? Well, let's do this. Let's go over to FTP Accounts and then create an FTP account or just use this one. So there will already be an FTP account, a default one. We can copy the username and then reset or set the password over here, change password. And let's look at FTP credentials. So this is the host name, username, and of course the password is really long and randomly generated and it won't show that, but I haven't saved in my last pass. So this would be the host name and the username, and then you would enter the password. But it into our trusty FileZilla FTP client like this. And we can download a complete backup of the website by downloading all of those files onto your computer. That is how you get the files. Now, what about the database? Let's click around sight. We did file manager, we did FTP, we could ignore app manager. Let's look at MySQL. Mysql, you'll remember is the database. And here it looks like we have one database already. And we have some, we have a user for the database. And let's click PHP, my admin. This pulls up the back-end of the database so that we can access the tables and data from it. We click on the main database here, and there is our database. Beautiful. It totals 39 megabytes. And we can click Export at the top and click Go. And there we go. We have an export of the database. And it looks like the total after we download the entire database, which is a SQL file, is about 20 megabytes. So what do we have at this point? We have the database file here, a backup of the database, and we have downloaded a backup of the files with FileZilla, and that's it. That's all you need for the website, for a WordPress site. Now, we go into Ioannidis and we prep the server as we've done multiple times together on this course, we can prep the server and create the database, import this file, create the webspace and import that. We're good to go. So we add the files, add the database, database, and then figure out what we wanna do with a domain name, either keep it external or transfer it. And then point that webspace to the new folder that we create here. And that's it. As a maintenance plan, your hosting services would be picking care of the webspace, adding the files to the web space, taking care of the FTP account, and taking care of the precious database. And all of those are valuable services that your client's non techies are just not going to want to have the full width. That's what they hire U4. They hire you to take care of their website, which crucially includes the hosting server. That's your expertise, not theirs. And they're paying you to take care of that for them. That migration is a onetime thing. You're just going to do that when you first move it over to your server to take care of on your website maintenance plan. But going forward, you'll have all of your clients, FTP accounts, all the databases, and manage your hosting server. Make sure it stays live, make sure there's no problems, and stay on top of your ion is account. And one more consideration that we certainly don't want to forget is the e-mail accounts, this is an addition to hosting. So if the client already has email accounts existing on their hosting server, where you want to transfer that over to your eye witness account. So let's go down to emails and check out the situation. Let's see if they have any forwarders or mail accounts already on their server. All right. They do have a forwarder. It got contact at being forwarded right now. And then under accounts, they've got three Gmail accounts. So three separate mailboxes. One is a half a gig, one is almost a gigabyte, and then one is 0, which means either they don't ever get emails or they're using either Gmail or Outlook. And it's grabbing all the emails off the server before and deletes them. Either way they want to keep those email accounts or what we assume they do, virtue would ask and if they do want to keep it, then they don't want to lose in e-mails. Would you want to lose and e-mails? Of course not. So what you have to do is back these up. Backing up involves adding those three mail accounts to your Outlook or your iOS mail or whatever you use to access emails and then exporting them to a file on your computer and then importing them on Ioannidis through the e-mail section. So you would go into e-mail and then open up the particular hosting server that you want to access. Create three mailboxes that would mirror what you see on here. So we would create these three mailboxes as male basic accounts. And then once those are created, add them to the Outlook, drag and drop the files from the old server to the ionised one, or do the export import functionality on your mail client. Outlook allows you to do that. Mac mail allows you to do that by just going to mail and export mailbox. And you should be able to do that on most major mail clients. Either way, you have to export and import the e-mail accounts for your clients when you're transferring hosting accounts, very important as a certainly don't want to lose any precious emails. The third option is when your client doesn't already have a server and don't want to handle it on their own. This is basically for new websites, are startups. When you're taking on a client and building a website, you'll have to prep your server as we did in the how to build a website lesson. Get you webspace, your FTP, your database ready and install WordPress. You know how to do this. So those are the various possibilities of how and where your client's website will be hosted. But what about going forward? What hosting service do you provide on an ongoing basis? If they host the website themselves, you can still provide your maintenance services. Just securely stored the hosting login and your password manager, like last pass. Otherwise, you'll keep up with your hosting account, which for the most part, it's pretty hands off. Managed servers take care of all the technical stuff. You don't have to have a physical server in your office or your home. You don't have to worry about the operating system or other really advanced technical processes. In fact, manage hosting services are quite convenient for that reason. So if all goes well, the hosting account keeps running day by day and keep your website's alive. Hosting is a valuable service, but the beauty is when it runs like a well oiled machine, you can host hundreds of websites. And if you're hosting servers are reliable, you rarely have to do anything. And at about 10 or 20 websites are hosting server, you're hosting machine can generate a handsome profit. How much profit? Well, if a server costs you $50 per month and you fill it with 20 websites at 50 bucks a month, that's a $1000 a month revenue, $50 a month expense, which net that $950 for that one server. Sounds good, right? Yeah. So to recap, what maintenance services are you providing to host a website? You can set up and manage the server itself, which most people wouldn't know how to configure on their own and monitor it ongoing for any issues that may arise. And emails. Now there's two different scenarios here. One, they'll host 30 mils elsewhere, such as Google's G Suite or Microsoft 365. You can help with that. You can set up their account, review. It provides support and ensure that the domains DNS connection is connected to their email account. If they choose this option, you'll set up the domain and order the billing in their name. They'll pay the $5 or so per mailbox per month. You can always build them directly up charge. But I shy away from that option to host the e-mails directly on your server. You can set up and provide support for IMAP based emails. Let me show you these two options. So the e-mail portion of our website maintenance plan is very important as businesses rely on their emails. So here we are on the ionised hosting server under the e-mail section. And as you can see, I have plenty of client email boxes and forwards added to just this one particular hosting server. And at this point I have multiple hosting servers on my account. So what is the benefit of the website maintenance plan? It includes e-mail hosting. As you know, we can do that by clicking Create email address, and creating as many email boxes as they'd like. I can create forwards, we can create mailboxes and provide support by teaching them how to add it to their email client. Let me see, show you an example of that. Setting up an e-mail client. So through ionised, you'll get really familiar with the process on how to do this. In fact, you'll have these memorized the e-mail server information after you've added a few times, It's basically just IMAP dot ionised.com as the incoming server port 993 with SSL security, outgoing is smtp dot ionised.com with the port 587 for the outgoing server. And how do you add it to your particular email program? Well, let's look at Outlook. This takes you to an ionised help article, my e-mails. And we're going to add it to its outlook. Saying up on Outlook 2019. Manually setting up the account. And here we go. This is a step-by-step support article on how to add an email account. You own this e-mail accounts to your Microsoft Outlook. They have one of these for every version of Outlook, and they have one for each major mail client, in addition to just a general setup guide that would work on any email client. So your service that you're providing is hosting these emails as well as providing support. So people will need help adding it to their mail client. They'll need to help resetting their password, adding mailboxes, deleting mailboxes, and you can do all of that through your eyewitness account. So what's the other option? And let's pull up a client who does not have their emails attached to my edit I honest account. Their e-mails are hosted on Microsoft 365. So this is brighter dash image.com, a commercial cleaning company in Florida, USA. So their emails or on Microsoft 365 and my service that I provide is helping them with their Microsoft 365 if they need help, I do have the login for that and making sure that their e-mail stay connected through the DNS settings. So we click DNS. And again, this is what you would do for a G Suite or a Microsoft 365 when they give you that line of code to add to the MX record, this is where you would add it. You click Add Record, and then copy and paste the code that Microsoft gives you. And they'll provide step-by-step instructions on how to do that. But this is a live example. Mx record points to this very simple. Plenty of people, hosts or emails with Microsoft and with Google. And that's a wonderful way to securely host your business class emails. So whether you host them yourself or you're just connecting to their external account. Your service as part of your website maintenance plan is managing their e-mails. You can reset passwords, you can add them to your hosting account. You can set up their connection to their external account like G Suite or Microsoft 365. Either way, you are helping them with their emails, providing support and management and possibly hosting through Ioannidis. So those are the different ways e-mails can technically be hosted. Either way, would it surprise you that clients need help with their emails? That's one of the most common IT tasks. Resetting passwords, creating new mail accounts, sending out e-mails on their new phone, setting up their outlook. But through your maintenance plan, clients can receive support on the email accounts that you set up. So what are your options for providing hosting services to your clients when you've upgraded your business to a managed Cloud hosting platform like cloud ways. Now fortunately, the business principles we've discussed in this lesson, we'll generally applied to any hosting platform you choose. The only differences that you might up charge your services a little for the privilege hosting on your high-performance Cloud server, you can reserve your, your better services for your higher paying clients and your lower in servers for lower tier maintenance clients. And ultimately, how you charge your clients is up to you. But we've posed several ideas are ready in this lesson. So we walked through I Jonas would their economy and dedicated servers. Now, let's look at a managed Cloud hosting solution like cloud ways. Let's break down the three facets of your web hosting services, your domain, your web hosting, and emails, and see how this works on Cloud ways. So let's walk through each of these services, domain, emails and hosting, and see how we can provide them to our clients using our Cloud ways managed cloud hosting account. So first let's look at domains. Now, Cloud ways does not offer domain registration. That means you must either have your client's domain in your own register, like say, Google domains or GoDaddy.com, or a similar domain register. And then, or have them set up their own register, your account in their own name. Either way, whether your client's domain is in your account or in their account, all you have to do is point the domains DNS to your Cloud ways account. In this case, let's look at an example with one of our apps and our cloud ways account. So the IP address, this is the primary credential here. The public IP address of this particular server we're looking at as an example, is right here. And in order to connect a domain name that has been registered, registered elsewhere, in order to connect it to this cloud ways account. As an example, we would copy this IP address and then go into our domain register, like GoDaddy, Google domains in this case. We're looking at cloudflare.com. We go in here and we edit the a record forward the primary domain name. In some registrars, there might be an at symbol and we paste the IP address that we're using. We can do the same for www so that it works when you add www before the domain name. And that's the only thing you have to do to connect your account to Cowboys would go in there. We create that IP address connection and then we click a domain management on the left here, once we're in our app and we type in our domain name, click Save Changes, and that's it. So that's how we provide Domain Services. Cloud ways doesn't do that built-in, but we can easily accomplish that either with our own domain register account or having your client set up their own. Either way, you're just one IP address, DNS record away from connecting it to Cloud ways. So the second service Let's look at is e-mail hosting. So Cloud ways also does not offer e-mail hosting out of the box. And think of Cloud ways as strictly web hosting. They do, however, integrate with a company called Rackspace for IMAP base hosting. And of course, in addition to that, you can always use a Google workspace, Microsoft 365, Zoho services like that for e-mail hosting. So if you use Google or Microsoft, you won't connect those services to your Cloud ways account. You would go into your domain registrar and connected directly. In this case, this client is connected to Google, google workspace. You would connect it directly from the domain registrar to either the Google, the Microsoft, or wherever their e-mails are hosted. So that would not connect at all to Cloud ways. Now, if we're going to use Rackspace in Cloud ways, Let's see how that works. We go into our Cloud was account and we click Add-ons. And that takes us to this page where we see our elastic email, which is for transactional email deliverability and management service to get e-mails delivered. And Rackspace email, which is e-mail hosting. This is a really affordable way to add IMAP based emails to your account in the US currency, that is only $1 per month per email box. So all we have to do is click Add mailbox here. We can create a mailbox and alias or forward, we just type in the email address that we want to create, the password. And that's it. Once we've created our mailbox and we start getting billed for that new amount. We can click Help here and it will show us how we can integrate the Cloud ways Rackspace add on. It mentions that we need to properly point the DNS MX record. To see an example of that, we go to another account here that is connected to Rackspace. And that brings up the MX record for Rackspace here, him X1 dot email server.com and MX two. Those are the only two MX records are required to connect to Rackspace. And there's a couple more that you can add, a demarc and DKIM and SPF records, but that's all outlined here in the cloud ways article, how to use Rackspace, email add on. So with the Rackspace, the mailboxes only $1 per mil bucks per month. So you have a few options. As a business decision, you can pass along that $1 per mailbox per month charge to your client or you could up charge that, say maybe $5 per mailbox per month. That would be right in line with what Google and Microsoft are charging. Or you can just include that in your monthly hosting and maintenance fee and sell that as a free perk for your hosting and maintenance. So those are your options for emails with Cloud ways. Again, they partner with Rackspace and you can easily set up a mailbox there, your Cloud ways with Rackspace. So the third hosting service, you can provide what Cloud ways? This is the primary way. You'll use Cloud ways as part of your monthly hosting services. And this is the standard hosting. Now if you're hosting a website with Cloud ways, all you need to do as we mentioned, is to point the primary a record to your Cloud ways server. In this case, that is the IP address that we discussed here. You can get that when you add your application to your Cloud ways account, we go to access details and it's right here on their public IP. All we have to do is copy that, paste it into our domain registrar. Next up we go to domain management and we add the primary domain name that we want to add for this particular application, we put in our domain name, click Save Changes. And as long as that DNS record is installed, then it's ready to go. Finally, if we want to install an SSL certificate, that's very easy to do. They have partnered with, Let's Encrypt to provide free SSL certificates with auto renewal turned on. All we need to do is type in our domain name, and then we'll add one simple C name, DNS record, Acme challenge, and it points to our testing site. So we copy that. We go into our domain register. In this case, we're still looking at Cloudflare as an example, but you can do this in any domain register. And we go to C name. We add a CNAME record and we copy and paste what our Cloud ways account provided for us. Simple enough. So that's how you successfully connect a website to your cloud way server. Now once you have your client's websites on your high-performance client-server, you can start building them for your hosting services. And again, I might suggest that you charge a little extra since Cloud ways is a higher end hosting solution. But the next question, what if you're taking on a client with an existing website and you need to migrate it to your cloud-based server as is. So you're not creating a new site, they have an existing website and you just want to transfer it or migrate it to your Cloud ways account. Well, let's see an example of just how easy this is to do on Cloud ways. I'm going to show you a live migration of one of my clients. I need to migrate from my Jonas account to Cloud ways. So we're going to login to the admin area of the website were wanting to migrate. In this case, the one we want to migrate is a salon. And we're wanting to move it to our Cloud ways account. So we login and we go to Plugins and click Add New. And we're looking forward to the Cloud ways migrate or plugin. I have a really easy migration process. All we have to do is install this plugin, activate it. And then we'll copy and paste a few settings from our Cloud ways account. We'll start by typing in the e-mail address of our Cloud ways account and click the Migrate button. And it's going to ask us for some settings from our Cloud ways account. Before we can copy and paste those, we need to go into our Cloud was account and set up the new application. So we click Applications and then add application, and then select a server that we want to migrate to and click Add Application. We're choosing WordPress. And the name of our app, which is the name of the website. And click Add Application. So super easy to do on Cloud ways and it only takes a couple minutes. So we're currently adding the application and in two minutes, it will be available. Now once that's available, we will have the name for the destination site URL. That's the Cloud ways URL for that specific application. We will have the server IP address, which is the one that we had looked at earlier. The database name that's created for that application, and the secure FTP for that particular application. And then we click Migrate. So let's go back into our Cloud ways account. And the application is still being installed. And now our application is ready to go. So we click our application and we're going to retrieve the IP address. We'll copy and paste that under the host slash server address, will copy and paste our URL, which is WordPress and a few numbers, dotCloud ways apps.com, or pasting that up here in the destination site URL. Now we're looking for our database name, which is right here. And then the SFTP username and password. So let's create one here, right. And then we'll go ahead and paste that in here. And then it's going to ask if we have HTTP authentication enabled, which we do not on this live website. We do want to check for root directories to migrate and check this box. And then is the site password protected? No, it is not. This is a live website and there's no password protection. So we click the green Migrate button. It's going to validate the information that we entered. Hopefully there will be no errors if we copy and paste that correctly. The FDP was created successfully. And let's look at the migration process. Your site is being migrated to Cloud ways. So it's going from this live domain name over to this staging site, this temporary URL. And what's being migrated. We're looking at the files being migrated, the database being migrated. And then we see the overall migration process. We're looking at about five to 10 minutes. Typically, this is a really quick process. All things considered and Cloud ways makes this extremely easy to do. So we'll wait just a moment for this migration to complete. And it looks like the migration is wrapping up here. So in just a few moments, migration will be complete. And we can complete the migration on our end by going to the domain register, adding the domain name, and adding the appropriate DNS record. So ideally, this website will be moved as is from the previous server wherever that was to your Cloud ways account. The benefit you should see is that the Cloud ways is likely superior hosting infrastructure, the site should see a performance boost. And she just overall operate a lot faster Since Cloud ways is a superior high-end hosting platform. All right, then the migration is now complete and we can go back into our Cloud ways account and get the necessary information we need to connect to the account. So it says, and we need to connect our domain, enable SSL, and then configure settings in Cloud ways. So we'll start with connecting the domain, which means we'd go back into our Cloud was account. When you open up the application we created, and then copy the IP address and go into our domain registrar. In this case, this one is registered at idleness. So we're opening up the domain name in our Jonas account. And we're going into DNS and we need to edit the primary, a record, which is this one here. We'll also edit the www. So we're pasting the IP address for that new server. And then doing the same for our www. And it did that for us automatically. And we'd go into cloud ways and then go to the Domain Management and add our domain name. Once we do this, cloud waste is going to handle switching all those URLs from the Cloud ways apps testing site to our official domain name. So we don't have to install any search and replace plugins. We don't have to replace any URLs. Cloud ways handles that for us. And now let's go into SSL certificate so we can add our SSL certificate for our domain name. You'll put in your e-mail address as the webmaster. And then the domain name that we're wanting to create the SSL for. It wants us to add a CNAME record. So we copy this and paste it into our domain register as a CNAME, record, paste that, and then copy and paste what it's pointing to. All right, we have that saved. And then in just a moment we'll be able to verify the DNS. And there we go, it's already verified. We click Install certificate and Cloud ways is going to grab the, Let's Encrypt free SSL certificate from the Let's Encrypt provider and install it for you and handle all the technicality of installing an SSL certificate. They take care of that for you. And in just a few moments, we'll have that installed. And that will obey the two steps here. We've connected our domain or enabling the SSL. And then it wants us to run through the cloud way settings and configure that. So this is almost complete. When they ask for the applicant, when asked for those settings, primarily that refers to application settings and we can click around those if we want. But the primary thing that we need to do is just the domain and the SSL. Aside from that, we can log into the backend of WordPress and maybe swap out a few plug-ins in the backend, which I do like to do that. So we'll wait for this to finish and then go back to excess details. And we'll log into our WordPress. So now we click access details and we can log into our WordPress backend here. Go to URL. There we go. Now we're on our Cloud-based server and we can remove the Cloud ways WordPress migrate or since the psi has already been migrated appropriately, we can remove that. And now that we're on McLeod way server, they have built-in bought protection over here. So I like to turn on the bot protection and remove i theme security. Since we're on a server that ha 34. Maintenance Services: Management: Welcome. I'm Leighton, your webmaster. In today's lesson, let's discuss the primary feature of your website maintenance plan. To maintenance, the management of a website. How do you manage your client's websites? Beside from hosting, this is the meat of your services. Can landscaper who keeps a long tidy, a property manager who keeps a house in good shape. A webmaster ensures a website is in its best shape and live and functional. Let's consider seven facets of management. Software updates, up-time monitoring, change detection, analytics, tracking, Search Console, local listings and websites support. And most of these include a particular free service that I have vetted and used for several years. Let's jump in. One software updates. Wordpress itself, its themes and plug-ins all need regular updating. Here's what that looks like. Every few days you'll find something to update on WordPress website. That might sound easy if you have just one website. But what happens when you have 10, 20, hundreds? I mean, how do you possibly keep up with all those updates? What do you think? Well, there's a fantastic free service. I'd love to introduce you to manage WP. I love this software so much. I use it every single day. So let's look at this immediately. And here we are on Manage WP.com. I think manage WP is one of the best pieces of software ever created for a WordPress webmaster. It's amazing, so let's take a look at it. This is the homepage I've managed to BEP a better way to manage WordPress websites. Monitor and maintain your WordPress websites from one dashboard. Alright, manage unlimited websites for free. That is so amazing. Premium add-ons available. So if you're wondering how they make their money, they do have premium add-ons. Personally, I don't take advantage of it, nor do I need to recommend that you take advantage of it unless you find that you want to add that to your repertoire of services. Until then, the free services are amazing image WP offers WordPress website management dashboard. Let's watch this introduction video. Hello In minute and a half, do you manage multiple websites? If so, you're probably spending countless hours managing all of them with managed WP. There's no need to worry about that anymore. Managed WP lets you easily access and manage all your websites from one dashboard. So instead of hours of admin work, you can update your websites with just one click. No need to remember passwords for each site. Once you're logged in, you have access to all of them. It's very easy to get started just Azure Websites to the Manage WP dashboard and start automating your admin tasks, perform bulk updates of core WordPress software plugins or themes with just one click. Manage WP comes with numerous features that'll help you get the work done efficiently, including backups, automated and manual backup to the Cloud or download locally easy one-click restore. Safe updates automatically creates a restore point before the update, compares the website before and after the update is installed and helps you roll back the update if something goes wrong. Cloning and migration easily migrate sites between staging area and live environment. Up time monitor, get notified instantly if a site goes down. And much, much more managed WP will make your life easier. Start saving time. And it was a great introduction video. That's what managed WP is all about in minutes you can set up manage to be p as your first website with one click, Run all updates and create your first backup for free. And we love automating, automate your workflow and start saving time. Two things are very important to us. Everything you need to automate your workflow. So manage WP offers, maintenance, maintain with updates, and security, with backups and security checks, monitoring with up-time monitoring, SEO and Google Analytics, collaboration, client care with reports and bench marking, with website performance checks. So without further ado, let's login to my managed WP so we can see what this looks like from the back-end. So this is managed WP, our right. So the first thing we see front and center is all of the updates available on our websites. So I've added my websites to my account. And this shows that there are currently 21 plug-in updates available. I don't have to login to each individual clients and update these. All I have to do is click update. And it will update all of the plug-ins that are available for updates across all of these websites. It also does themes and it does WordPress core, which is an amazing timesaver. If you need to, you can individually select the boxes that you want to update and click Update. And rarely you can click Ignore when you need to ignore a certain update. Such as if there's a premium theme that won't update without the proper code that you might not have just yet for your client. But for the most part, we click update all and all is good. All right, optimization. So this gives you some optimization ideas, three separate ways to optimize, optimize your database. One is spam. Many spam comments can slow down your website. Clean spam comments on your site with this option, post revisions. So these are revisions to your pages and posts. As you say post revisions, your database grows and can slow down your website performance, optimize your post revisions with this option. And then megabytes overhead. Azure, MySQL database grows. It can slow down your website performance, optimize your MySQL database with this option. So this shows that the biggest overhead in my database right now across all of my clients is 2.5 megabytes, which is adding up currently to about 10 megabytes of excess data in the database that we can clean up. I'll click this button once a week. It's not something that I feel like I do daily. But what this does is clean all spam comments, post revisions and table overhead on all my websites. So once a week I will click optimize all. And that was a huge time-saver. Instead of having to login to the database and do this manually on every website. You can also manage comments from here. If there's a either spam or a legitimate comment that's pending, you can approve or disapprove it, delete it, or spam it. There's no updates in the blog right now. That would be the managed WP blog. And then over here we can excess backups, security, performance, link monitor, uptime, SEO and analytics. Right? And soon we'll go through some of these other sections. There's also websites where you can see the different websites that you have added to your manager VP account. You can manage clients and then view the add-ons, which is the paid upgrades for managed WP. It's mostly a extra time savers, like instead of having to manually do something like do a security check on each individual website. You can automate it by purchasing this plugin. The automate all. There you go, ¢0.7 per month. Let's learn more and see how that cost currently breaks down. Let's see pricing for you add-ons, the premium you can do per website. So automated security check or premium backups or advanced client reports or advanced automated performance checks. Those are basically be one or $2 per month. Or you can bundle and get up to, for up to 100 websites that will cause twenty-five dollars per month for your account. And you can automate all your security checks or whatever else you want to do on these other premium add-ons. I actually don't pay for any of these. I just stick with that free but premium add-ons are there if you want to take advantage of that and automate your workflow even further. And then there's an ultimate bundle all in one package, all bundles combined for a $150. So that is managed WP, I think it's a fabulous piece of software. I recommend you getting started with them asap. Go create your managed WIP account and add your website as the first one. How would you do that? By clicking the plus button up here in the top-left corner. Plus button Add website. You can type in your website URL. And then on the next screen you would type in your username and password for WordPress. Or you would paste a connection code which you can get following the instructions on that screen. So super simple, I highly recommend you get started right away with this amazing piece of software. At this point, please pause the video, sign-up for your managed WIP account. Connect your own website. Next, up-time monitoring. So what's the point of a website? If it goes offline? Let's say What does go offline? You try to pull it up and it's blank. It won't load. What do you do? Well, you fix whatever the problem is, obviously, but more importantly, how long was it down? If you aren't actively monitoring your websites? Could have been down for days or weeks. If it's an e-commerce website, imagine the sales that would be lost. So how do you monitor your websites? I mean, is it practical to manually check all your clients websites every day? And usually you use a service to do this. Isn't that expensive. No, in fact, I use a free service. And that's look. Before we go to uptime robots, I want to show you the uptime monitor section of managed WP. So as long as we have our managed to be P account, why don't we use their built-in up-time monitoring? If you're wondering that, that is a great question. So let's try this out of time. So we'll click on one of our websites and click the Activate button. And what do we prompted with activate uptime monitor the Add-on price. Since I've been having since I've been using this account for a long time. It's now down to $0.70 instead of $1, but still $0.70 per each website. I'm going to skip on that. If there's a free option out there, or we can click Activate all. And that would be an extra $77.70 per month or a $100 for a new account. And again, that's unnecessary if there's a free option out there. So we love free software. Let's see what's out there. That takes us to uptime robot.com. Uptime robot.com. It just went through a design refresh. You see a lot more lower-quality design and now they have an amazing, beautiful refresh. I love this site. So they've done a great job refreshing this. This is uptime robot.com, the world's leading up-time monitoring service. I've been with him for several years and I totally vouch for them. You get 50 monitors with five-minute checks. Totally free. We love free. So you can start monitoring, create your account in just 30 seconds. So let's see what else here. Currently we keep an eye on 4.5 million plus monitors for more than 800 thousand users and companies. These are some of the companies that they provide services for. All you really care about, monitored at one place, website monitoring, which is basically all will use here, SSL certificate monitoring, port and ping monitoring and crone job monitoring. There's advanced features. Basically, we just set this and forget it. You add the site. And that's that we don't worry about all the advanced features, but they are there because this company offers a lot. Downtime happens, get notified. So when a downtime happens, you can get an email. It can be an SMS, a automated voice call, Twitter, Slack, Zapier, telegram, web hooks, push bullet. There's all kinds of third party services and integrations that you can get notified when the downtime happens. So you can choose whatever is convenient for you. But let's login to our dashboard without further ado. So we click and go to go to account dashboard, login to our account. And what happens here. So these are the monitors that I have added to my account. And basically, you can see the uptime percentage. You can see which sites are up, which ones are down currently, none, a minor down, which is awesome. And if we click one in particular, we can confirm that it's live, that it's up and see a history, historical log of the uptime and downtime. It's really simple. You just add your websites to this dashboard and then you kind of forget about it until a site goes down. This is not a website that you will login to regularly, but when a website does go down, you will get the pop-up notification in whatever manner you choose and you can go diagnose it. So how do we add a monitor to our up-time robot to account, we click the green, Add new monitor. And there's a few things we can do here. We can select the accounts to notify. In my case, when I add my e-mail address, my phone number. This is the boxcar iPhone app and then the official uptime robot iPhone app, which is available on the app store monitor type. So we can select HTTPS, which would be a website. My test site. There we go. We can select the monitoring interval. I wouldn't do one minute because a site can go down for just a few seconds and we don't want to be bombarded with notifications. Let's just check it every five minutes. There'll be a lot more manageable advanced options. We don't need to worry about any of those. And there we go, we're good to go. We just click Create monitor and it's added to our account. Awesome, awesome, awesome. We love uptime robot. Go ahead and get your account as soon as possible and add your website to your uptime robot account. At this point, please pause the video, sign-up for your uptime robot account and your website as your first monitor. The third service is change detection. Now this one is closely related to up-time monitoring, but fundamentally different. And let me explain by example. Let's say you pull up your website and it's been replaced by this into website go down. How would you answer? C, The website is broken by uptime robot is only going to show it as online. That's why you need both up-time monitoring and change detection working in tandem. Fortunately, there's another free service that handles this with these. Let's look. So here we are on follow that page.com, a wonderful free service created several years ago. They follow so many pages on the internet for so many different accounts. And they still have a very basic website design. But that's okay because their core functionality is awesome. So it's a change detection and notification service that sends you an email when your favorite web pages have changed. This is a very basic but such a valuable time-saving service. We basically monitor the web for you. Alright, so follow a new page. You just copy and paste your URL. More importantly, we can create an account which I recommend that you do. So you click your pages. And this takes us to all of the pages that we've added to our account and we can add a new one. All right, so we add, let's say uptime robot.com, and we click Next. Remember you can, you can follow any page on the web. It doesn't have to be a client site. You can really follow anything that you're interested in. But we'll add our client accounts to follow that page account. So we add the page address, that would be our clients.com. We can uncheck and check these two. That looks fine. Lines of context. Just keep it at 0. Description is where you add a friendly name, which would be your client's business name. Report errors. I go ahead and report all errors just in case there's a server connection failure. Where do you like to know that? So we can go diagnose it. Since you're a webmaster, you want to diagnose when anything goes wrong. So it's best that we get notified. And in frequency. Do the check daily, follow Google PageRank and Internet Archive. We can uncheck those two and then check from if you're closer to you, then great. If you live in the United States, then I go ahead and change it to United States. Line filter can be helpful if things change regularly on the website that are legitimate changes. You can take a look at the line filter. And then the same for the block Filter. Other than that, that's about it. You click Save and you'll get an email. Anytime something changes, all websites on your account will get scanned overnight. And you'll get an a wonderful email when something changes, letting you know what was either added or removed, and you can go diagnose the problem. If there's a legitimate problem, you will be notified if you update something on your client's website. And it's just a confirmation that they picked up the things that you updated, that would be a legitimate change, but an illegitimate change, something that you did not request as an error code popping up or something that you don't intend to be there. That's definitely something that you would wanna go diagnose you as a webmaster. You need to know those things so you can fix these problems when they arise for your clients. And that's this awesome service. Go ahead and get your account as soon as possible at follow that page.com and start adding your website to your new account. At this point, please pause the video, sign-up for your fall that page account. Add your website as your first monitor. The fourth is analytics tracking. Know how well a website is performing. If you can't track it? How would you know how well a fitness program is working if you couldn't track your progress. Likewise, when a website is launched, you need to measure and monitor its effectiveness. How do you do that? Through analytics, analytics, software tracks of visitors that come to your site. Let you know where it came from, how long they stayed. If they're on a mobile device and much, much more, way more information than you could possibly need. But what do you do with that data? Well, what if you knew that a majority of your visitors left to web tech without looking around. Or most of your traffic comes from mobile devices. Or your most popular page hadn't been updated in years. Analytics data empowers you to make decisions, to optimize your website, to how do we install Analytics? Is it a free service? Let's see. So this is google.com slash analytics that takes us to Google marketing platform. You get to know your customers. That's the essence of analytics tracking. So let's go ahead and log into our analytics account by clicking Sign into analytics. So this uses our Google account, which if you have a Gmail or Google, or YouTube or an Android phone or whatever, you do have a Google account and you already have access to Google Analytics. And this is the Google Analytics dashboard. So let's pull up one of our client accounts. These people provide funding across America for construction companies. And let's see what the analytics reports show. So this is the analytics home, which shows us some of the most important pieces of data in the last 30 days. So with Google Analytics, you can get completely overwhelmed with all the Pieces of data that are available to you divide it into conversions, behavior acquisition, audience in real time. There's so much that you can see. So let me just show you the basics. So let me show you the most important elements of Google Analytics that you'll focus on for your customers. And then I will show you how to add this to your website. So let's start out with audience and overview. So in the last 30 days, this shows you how many people visited your website under users. New users would be ones that have never visited the site before. Sessions would be a session is the period of time a user is actively engaged with your website. All usage data is associated with a session. All right, number of sessions per user, 1.48 pageviews. This is the total number of pages that are viewed. Repeated views of a single page are counted. So this would be kind of like hits, hits to the website, pages per session. So when somebody came on, how many pages did they visit in this case, in the past 30 days, an average of 2.6 pages were visited. How long did each session last? 50 seconds. The average length of a session bounce rate is extremely low, 4.94%, that means 4.9, basically 5% went onto the website and then left the page that they were on, left this website entirely. This is extremely low. Anything under 50% is good, but this is, this is awesome, an awesome bounce rate. This graph over here shows us new versus returning visitors. Returning and new visitors. We can see the language that people are visiting from country. It's one has visitors in USA, India, and others. City where the most popular cities that people are visiting the site from, what browser they're using. In this case, Google Chrome and Safari. What operating system? Service provider, mobile operating system, Android, iOS, Windows, screen resolution, and service provider, which doesn't show us anything. How do we change the view period? So this is September 14th to October 13. You can change this to do today. Yesterday, last week, last month, last seven days and last 30 days of analytic analytics data. Or you can just select your date manually. And all right, so that's an overview of the web traffic in the past 30 days. What else do we have? I'm going to skip down to mobile. Let's look at whether or not visitors are visiting this website on a mobile device. In this case in the past 30 days. Let's change this to a circle graph to make that easier to read. And it looks like 55% were coming on a mobile device, 39 percent were coming on a desktop and 5% on a tablet. So what does that mean? Most people are visiting the website on a mobile device. So do you think it would be better to optimize a website for a desktop or the mobile view. Both are important, but if you're going where your visitors are at would be on the mobile side. So while you want to make sure that the desktop looks good, It's critical that the mobile looks top notch. We can fine tune this with the original view, where we can see the users, new users sessions bounce rate pages per session, average session duration, and the goals for each of these different views. Mobile, desktop and tablet. So what do we notice? People on a tablet are staying an average of 21 seconds. People on desktop are staying a little over a minute. The longest period of time, and mobile would be 40 seconds, which is averaged out of these three to people are staying longest on the desktop and mobile is keeping less of their attention. So on mobile, people are getting straight to the point. And people don't want to have trouble finding what they're looking for. The bounce rate is pretty even across all these, 5.713.335.74. So if you see a clear outlier, like one was say, 40, 50, or 60 percent while the others were low, then that would be a weak spot. That would be something to look into. In this case, we don't have that here. Let's look at something else. So we've looked at audience overview, and we've looked at mobile overview. Now let's answer the question. Where did my visitors come from? Acquisition overview. This shows us the different channels by which someone found your website. The number one would be paid search. That means the company put out Google Ads. Second would be organic search, which would be the free search engine rankings. Third was direct, which means they went directly to the.com. Domain name. Number 4 was referral, which means they were on a different website and they went they clicked a link from that website to your website. Number five would be social, which I mean they clicked on a Facebook post or something that linked to this website. Other means it wasn't specified and seven means that they clicked on a link and an email, maybe from a Mailchimp marketing campaign and they landed here. We can look at that a little further by clicking all traffic and channels to fine tune this data. So we can break that, break down the users, the bounce rate, the pages, the session duration for each of these different channels, and see what the strengths and weaknesses are in this analytics data. See if there's any outliers. Another thing we can do is click referrals and see what links people are coming from to visit this website. All right, so we've seen audience overview. We've seen mobile acquisition. Now let's look at behavior. This answers the question, what are the most popular pages on my website? It's very valuable to know the popular pages on the site. So you know what pages people are actually going to. And if one of these top pages doesn't really look all that great or has outdated content, or for whatever reason it can be optimized, then that's definitely something you can put on your to-do list. We want these top pages to look their best. So we'll click page or page title to see what pages are the most popular. And then if I click view, full report will get more data here. This takes us to the most popular pages and we can, we can view done to pages. In this case, this website has a 132 pages. We can see the top pages. So really only the first 10 or really had to worry about because these were just visited once or twice and are not popular pages, but the ones at the top in the last 30 days, I've proven that they are the most visited webpages. So again, if one of these top five, let's say one of them barely gets any screen time. Like this one has 13 seconds instead of say over a minute. And we could say, why is this one? People not retaining the information on this page wired and not staying on it? Or are they just clicking on and clicking away? What can we do to improve the page? What about the adults? Do we have? What about the bounce rate? The average is 4.94. But are there any that are higher than others? If so, why are they so high? Why are people go on to this page and going off? There's only a few sessions for a particular page, then the data might be a little skewed or misleading. But if you have a lot of traffic to a page, then the averages are pretty reliable. So here you can go through each of the top pages. I like to stick to the top ten and just comb through this data and see if there's any weaknesses. What strengths and weaknesses do you see in this data? So that's very helpful as well. And those are the main things that I like to look at. So how do we give our clients a regular report of this data? This is an awesome time-saving feature. So let's go to any of these sections in Google Analytics and then click Share, Share and you can copy and paste your e-mail address for your client and then change the subject to say, monthly analytics, report. The attachment, make it PDF frequency monthly on the first of the month. And then here you can enter the option or the message that you want to display in the analytics report. Change how long you want this report to go out every month on the first of the month for 12 months. And here you can say here is your monthly Analytics traffic report. Enjoy. Please let me know if you need any clarification from this report. All right. We click I'm not a robot. And then there we go. We'll set up our monthly analytics report. Once you've created that one, you can click the add to an existing email button and add it to a monthly email. That's a very helpful feature. So they'll get one email with all of these different sections that you manually add. Maybe you want one e-mail that includes the audience overview, the mobile, the acquisition, and the page behavior. So that's an awesome way to automate your processes even further by automating the analytics tracking report. Google Analytics is extremely overwhelming for anybody. But once you know what you're looking at and you've fine-tuned what specifically you want to focus on. Becomes a lot clearer. So how do we add your website to your analytics account? If it's your first one, then Google Analytics. Analytics is going to require you to add a new property before you even get to this point. But here we can click on Admin down at the bottom. I'll click the Settings and then create property. When we create our property, we'll click Web. Continue. We'll type in the name of the website, the URL, the industry, the time zone. And then once we click Create will be given this. C will be given a tracking code. You'll take that code, copy it, and then you'll paste it. Here. Let's open up our website. Let's open up the WordPress website that we've been working on in the previous lessons. And we'll be going into Divi options, log into WordPress backend. And then once we're logged in, we're going to click on devi on the left, down at the bottom, Devi and Theme Options. After theme options, we'll click integration and then add to the body good for tracking codes such as Google Analytics. So to be completely clear, you do not need to add a separate plugin to embed the tracking code onto your website. Just go to the Devi themes built-in integrations tab, copy and paste your Analytics tracking code onto the integration tab under the body. This will add it to the body of the HTML code. And there you go. You are now tracking the traffic on the website. You can't backdate that traffic. But going forward, you can start tracking it. So that's why I recommend installing the Analytics tracking code on day one as soon as you can for your clients, so it can start reporting on that data. So that's Google Analytics. It's an amazing tool, It's completely free and I highly recommend you start using it as soon as possible. Go ahead and create your account, add Google Analytics to your website. At this point, please pause the video, sign up for your free Google Analytics account, adds your website as your first property. The fifth service is Google Search Console. Now we've discussed Search Console already a few times, particularly for SEO, and it's a free tool that I certainly recommend for your website maintenance plan, Search Console. We'll email you when there's a problem. You can diagnose it. As a webmaster. It's your responsibility to keep a website running problem-free. You being paid to do that after all. You can also include data from the performance section of Search Console. If you so choose in your SEO services to send out a monthly or quarterly SEO report that will list the top for performing keywords and rankings. Google Search Console is completely free, so go ahead and include it with your repertoire website maintenance tools. This point, please pause the video and connect your website to Google Search Console. Six as Google My Business. Another thing that you can help manage for your clients is there Google My Business listing. Whenever something changes, like store hours or phone number, your client may ask you to update their listening. And I had a client asked me to do that just today. You can grant them access, teach them to update it themselves. For the most part. Managing their listening can be a part of your website maintenance plan. That way, instead of fooling when it themselves, which most people don't want to do. Just shoot you a text or call you and consider it done. Number 7 is a website support. One of the most important thing is you'll provide for your customers is simply support someone to call when things go wrong, when they need to make changes or update to website. Web designers have a bad reputation for being unresponsive or taking over a week for even the simplest requests. I've heard so many of these complaints firsthand to be available, be available by email, call, text, video conference, whatever your client prefers. Get to know your clients how they best communicate. The quicker you respond, the better. A rapid response one dear you to your clients better than anything else. And that is what they'll brag about to others. So to recap, in this lesson, we learned one. You can manage your websites, including the WordPress plugin and theme updates through managed WP. To, you can monitor your website's uptime for free through up-time robot.com. You can set up change detection for free at follow that page.com. You can install and monitor google Analytics to optimize your five, you can utilize Google Search Console to monitor and optimize your websites SEO. You can update your clients Google My Business listing as necessary. As a webmaster, your primary role is to provide support with questions or concerns arise. And what's our homework? I want you to sign up for the free services mentioned in this lesson. You familiar with them because you'll be using them with every new plant you take. Leighton. And now you know website manager. 35. Maintenance Services: Site Updates: Welcome, I'm late to your webmaster. Today's lesson, let's discuss another major feature of the website maintenance plan. Site and this is the visible elements of your website, means it's playing. The part that clients get excited about is a really don't see the plug-in or theme updates, the up-time monitoring, the change detection, the hosting. You don't see any of that. All of that takes place on the back-end, while your website's front end remains relatively unchanged. But they do see are the updates a request. Now what needs updating on the front end, the Bot website? Plenty of things. In fact, just in the past few weeks, I've had to update hours of operation. Phone numbers, add photos, swap photos, remove photos at blog posts, update prices, add products, change colors, add text, remove text, add pages, remove pages, and far more. Content updates are common. And when you have several clients sites, you'll spend a little time each day with these minor requests. Sudden just take a few minutes while others take longer. That raises some questions. Will your updates have limits? Are major redesigns included? How many hours will you include in your maintenance plan? What do you think would be appropriate? Well, you could always allow unlimited updates, but there is some potential for abuse. Their client's gonna have you working on their website all day, every day. And that's fine. So long as you're compensated for your time, It's a so at what point do you cap the included updates on your maintenance plan? Well, that's up to you. But a typical cap would be one or two hours. Now you should know that most of your clients updates will fall within the first hour and therefore included in the monthly maintenance cost. So you won't even have to check your time on those minor updates. But for a few clients who need regular assistance, I'm talking about over and hours worked the side updates per month. You can track your time and charge accordingly. But how much do you charge per hour? What do you think is fair? Well, obviously any hourly rate depends on your experience in your industry. But for the web design industry, $70 is pretty standard hourly rate. And I'll build that on a monthly basis in addition to the website maintenance plan invoice. So so two invoices were talking about, one for the monthly maintenance rate and another 40 additional build hours of support and updates if applicable. Now you may wonder, how do I track my time? I mean, how do you Are you thinking that you have to manually use a stopwatch to check your time? No, of course not. There's tons of free services out there that make this a breeze. So let me show you my favorite toggle. Here we are on Toggle.com, TOG GL. I love this service. When I say that there are tons of services and apps available to check your time. I'm not given there are plenty to choose from. And this one I have been loving. So this is toggle. It's time to get your team on track through toggled track, reliable time, time tracking, loved by 5 million plus users. This is a free service that you can use for time tracking. They recently divided into three different segments. Toggle plan, toggled track, toggle higher. So going based on this new restructuring, we are focusing on toggled track, effortless time tracking, and reporting. So without further ado, let's go ahead and login to our account. And now we're on track dot toggle.com and this is our dashboard. So we start out by seeing the recent events that we'd been tracking. So what you see here is the timer at the very top. What are you working on? We can say building a website and then it go. And there we are. It's tracking our time. Now we do our task. And then when we're completed, we click Stop. And there you go. All of those 11 seconds I've been tracked in your toggle account. So what else is available here? You can manually change the time that you spend on a particular event by changing the start, stop time or changing the duration. So you can really fine tune in you that you're not tied to exactly the start and end time that were recorded. You have full control over that stuff. So on the left, we've got analyze insights which aren't available on the free account, projects clients. So basically you can enter all the clients that you wish to track your time on by clicking new client in the top right corner, just typing your client's name. And you can divide that by specific projects. So I like to view a project as a website. All our winter, these specific domain name of the website. For a particular client. One client could have multiple websites. And we click New Project and the top-right corner to type in our project, my first website. And you can select which client that belongs to. Easy enough. So what about under reports? So when go to Reports and this is what I'll typically do, you can view a summary detailed weekly filter by client project, all of that. But basically on the first of each month, you will go in here and click last month. And it visually shows you which projects you tracked. I can see how many hours I spent on each of these projects. I had 13 almost 14 clocked hours. Those were projects that I chose to track. So smaller things, updates, e-mail sites support all that stuff that was included in the website care service sort of website maintenance plan. I don't necessarily track here that is. Or just specific projects that I have an agreement that the time will be tracked. So what do you do? You go down here and you look at the duration, how much time was spent on that particular project in that month. So in this case, Our on this almost five hours on that 16 hours on this project, you just take six and times it by your hourly rate and put that in an invoice. And there you go. Very easy way to use the free time tracking software on toggle to bill your clients, to honestly and reliably check your time, bill your clients and get paid based on exactly how much time you spent on a particular project. I love toggle for this and make it very easy to view these reports and make it easy to check your time and divide it into projects and clients. And I don't even need to pay for a premium account. All of this can be achieved with a free one. So go ahead and sign up for toggle and get your account created. At this point, please pause the video and set up your toggle account. Now what about major site redesigns or new site features that you know would require several hours of development time. Would you include that with your maintenance plan? Redesigns and developments could take hours. So your best bet is either one, track your time and charge accordingly, or to submit a quote for that specific project, just like you would when you first built the website in the first place. Now don't nickel and dime, your clients won't shortchange yourself either. Don't nickel and dime your clients, but don't short change yourself either. Find a balancing. So let's recap. In this lesson, we learned one. There's plenty that needs updating on a website. Do you can track your time and charge according to your hourly rate. And three, redesigns and developments can be floated separately. What's our homework? I want you to sign up and become familiar with the toggle. The free time tracking service. Also decide specifically you're included hours, update caps, and hourly rate for your maintenance plan. I'm late. And now you know, website updates. 36. Maintenance Services: Security: Welcome. I'm Leighton, your webmaster in today's lesson. And let's discuss another feature of your website maintenance plan. Security. And you know, security is a hot topic lately, is no longer optional in the digital realm. And for you as a webmaster, that means doing everything in your power to make your client sites as secure as possible. So how do you do that? And on an ongoing basis? Well, let's consider six ways that you can incorporate security into your website maintenance plan. Will look at security, SSL, TLS, site backups, security scans, virus removal, and in Cloudflare. Now most of these include free services. So be ready to pause and set up your accounts. First, IBM Security. Now, WordPress itself secure. Yes, but the larger the software, bigger the target it is to hackers. And truth be told, WordPress itself isn't necessarily the problem. It's weak user account passwords, outdated plug-ins, low-quality beams that pose a greater threat than the core software itself. For that reason, about 30 thousand new websites are hacked every day. That's where a plugin like I themes swoops in to save the day. This is one of the most popular free security plugins for WordPress. It includes more than 30 ways to protect your website from hackers, such as walking down WordPress, fixing common holes, stopping automated attacks, backing up the database, strengthening user credentials and much more. Rather than just talking about it. Let me show you how this amazing plug-in works and why I install it as a staple for every WordPress website I work on. Here we are in WordPress admin. So let's find the theme security app and download it and install it. So Plugins and Add New. And we'll search for themes security. Let's install and activate this on our website. I theme Security, formerly better WP security. I theme security is the number one WordPress security plugin by themes. A very reputable company in the WordPress community, over 1 million active installations, which means it's very popular and it's compatible with our version of WordPress and was last updated one day ago. If you find a plugin that was last updated multiple years ago, and then that is one you should shy away from. But if one is regularly updated, and that means the developers still care about it as they're regularly putting out updates, which means it's a good plugin installed now. It's installing, installing, and then we can activate it installed, activate. Yay, Very exciting. We love securing our website and this is something that you'll get used to doing on every single client website. Let's click IBM Security and settings, or we can find it on the left here at the bottom above Devi security. We'll click that. Here we are. This is the dashboard of all the different modules available for, I think security. But first we're hit up with our security check. Sudden features and settings are recommended for every site to run. This tool will ensure that your site is using these recommendations. And the button below is clicked. The following modules will be enabled and configured. Banned user's database backups, local brute force protection, network brute force protection, strong passwords and WordPress tweaks. We basically just whatever I think recommends that we need to have turned on. And if you really look into what these do, and then you can agree with that as well. So we click secure site. And it's doing these default security improvements with network brute force protection? Yes, let's go ahead and do that. Your site is protected against hackers found by other sites running theme security, that's an awesome feature and uses crowd-sourcing to further protect your site. If your site identifies a new attacker, automatically notifies the network. So the other side so protected as well. So we joined by clicking Activate. There we are. So all of these different security optimizations had been turned on. So we'll click Close. And these are all the modules available on word theme security. The ones are enabled, disabled, and then available on the Pro account, which I still have not needed. I can do everything that I'm interested in using the free account. These are the recommended ones and these are advanced. Alright, so recommended. So what I recommend is to click through all of these global settings, configure basic settings that control how I'd theme security functions. You can go down and read each one of these to get to know what they do. You can add your current IP to the authorized hosts list. Here's the database logs. All right, looks good. It's saving and then notification center. So when you turn on our theme security, it's going to want to e-mail you a bunch of stuff. So I recommend just turning off the security digest unless you are interested in receiving that. I turn off the security digest and the site and lockout notification. I would rather these things happen in the background and I don't necessarily need to be notified when each of those security events occurs. That's not something you have to take action on. That's more just a notification. Manage user groups. I skip that. 40 for detection automatically block users snooping around for pages to exploit. That's an awesome feature. I click Enable. And those all look good. Away Mode, disable access to WordPress database on a schedule. So basically allows you to turn off WordPress admin overnight. It's a nice feature to hackers. Won't be able to get in band users block specific IP addresses and user agents from accessing the site. I'd like to turn this on Enable heck repair.com ban list feature as a getting started point, you can include the banned list developed by Jim Walker. So that's a, a very popular list of bad players and hackers that we don't want on the website. Save Settings. Database backups, create backups of your site's database. The backups can be created manually and on a schedule. So to be totally clear, these are your database backups. This is not file backups. Database is a couple megabytes if that file is going to be much bigger, maybe around a gigabyte. So this is the very small version, the database backup. We do loved database backups. Very important. But I just don't want you to feel like if you turn this on, your entire website is backed up. It is not backup. Full database will check this. And then there's three options. E-mail locally, which is saving it on your ion is server, and save locally and email. I'll do just a locally only. So it will save it on the ion is server and then say five backups. Somebody will keep the latest five backups, compress it, make it a little smaller, and schedule that so it'll happen automatically every, say, three days. That's good. I'll write file change detection, monitored the cipher unexpected file changes. That can be helpful if the website is regularly targeted by hackers. But for the most part, I keep that off because it can be annoying as files do change quite often whenever an update takes place, plug-in or theme or core gets updated, then that's a legitimate file change detection. So I just go ahead and turn that off. File permissions, this file and directory permissions of key areas of the site. This is a nice way to further harden your website to against hackers. So these are the file permissions that are recommended by IBM Security. The lower the number, the tighter the security, and the fewer permissions that are allowed for people to get onto the website. This is all on the backend. These are the files in the back-end on the website accessible via FTP? So the tighter we locked down the file permissions, the harder it is for hackers to get into the website. You would do this by right-clicking one of these folders or files in FileZilla and clicking file permissions to set to the suggested value. And then that yellow will turn green. Alright, SSL configured use of SSL to ensure that communications between browsers and the server are secure. Cell is important if we do have an SSL certificate turned on, we can enable this module, but don't enable it. It though I enable it unless you do have an SSL certificate installed. If you don't have an SSL, this could cause problems because it would force them to load over SSL, which it's not possible to, that would cause problems. You only want to turn that on if you do have an SSL installed. System tweaks advanced settings. I improve security by changing the server config for this site. And basically I check every box here. All these are good things. So we'll go ahead and check all these boxes. It's rare that you'll run into an issue or something you wanna do legitimate isn't able to happen because you have one of these boxes checked. In that case, you just uncheck it when the time comes. But I like to sway on the side of caution. So like check all these boxes, WordPress salts, and can change the WordPress salts if necessary. A secret key makes your site harder to hack and access by adding random elements to the password. In simple terms, a secret key is a password of the elements that make it harder to generate enough options to break through your security barriers. You really don't need to do that hardly ever. A WordPress tweaks advanced settings and improve security by changing default WordPress behavior. Go ahead and check all these boxes as well or whatever's recommended by AI teams, see recommended. Just do whatever that they recommend. And if there's an issue or a conflict where I can't do something I need to do, then I'll just go unchecked the box that's causing the issue. Otherwise, let's err on the side of security. Now, right? So that's I think security, go ahead and get this plugin on your website. And it's one that I have installed on every single website. I have on my website maintenance plan. It's a great way to improve the security of your website. It's one of many things that you can do and I definitely recommend this plugin. At this point, please pause the video and install a theme security on your WordPress website. The second is SSL. Now in one of the first lessons of this course, we talked about the importance of an SSL certificate. I really only view this as optional anymore. You should install one with every client you take on. But it isn't done a onetime thing. How is this an ongoing maintenance service? Well, what happens when the SSL throws up an error? When it displays a not secure warning and your client gets an SSL renewal email. What happens in see, there are plenty of instances where you can provide support on that SSL certificate. Not only do you need to install it in the first place, but also ensure that it remains active. How do we do that? I rely on threes, three different services for SSL. I Jonas, I themes and really simple SSL. Now obviously you will purchase instead up the SSL certificate in your ion is hosting account. You can't shop around for a third party SSL. You've gotta use the ones designed to work with I Jonas, and that's okay. Install it, make sure auto renewal is turned on and you're all set. But what plugins do we use? I theme security has a specific module for SSL. It enables SSL across the entire website. I also use really simple SSL plug-in as it ensures all content is loaded securely. And then did is just one piece of content, like a logo loaded over HTTP insecure. Instead of HTTPS, secure is enough to throw up, but this is not secure warning. Clearly we don't want that to happen. So let me show you how we use these plugins. So before we even think of adding the SSL plug-ins to our website, we need to make sure we have an SSL certificate installed. So in this case, we're hosting our websites through Ioannidis that we need to install an SSL certificates through the eyewitness account. So let's click SSL. Let's go to one of the websites that we're gonna be working on. And in this case, this is one of my clients and Florida America, jane Jay Construction Services Incorporated. They are a homebuilding and remodeling company. All right. So they do have an SSL certificates denoted by connection is secure appear the padlock and the HTTPS for secure. How did we get to that point? Domains and SSL? Here we are. You basically just click the padlock over here, the padlock icon, and it pulls up the SSL section of ionise. This is SSL certificates. There are ionised account manager SSL certificates. I have an unlimited SSL, which is a $100 per year currently through Ioannidis, which allows me to wildcard, secure all of the domains in my hosting account. It's a great deal and I totally recommend the unlimited option. So this is the SSL certificate. This is where we view the certificate information, reissue it or download it as an SSL start or wildcard through geo trust, Power BI digits CERT. So these are very reputable businesses. It's a domain level validation which is just as secure as any other option. It's just not securing the actual organization or verifying that the organization is who they say they are. But we know our clients and we know that these certificates are valid. So unless they need a higher in SSL certificates, these are perfectly fine and very secure in terms of encryption. Advanced Settings, you can unassign the SSL. You can change the usage which you don't really need to do and you can reissue it what you really don't need to do either. This one's already been installed. So it's all good to go. So what did we do on WordPress? Once we have installed, once we've purchased and installed our certificate through I onus on our hosting server. Now we can pull up these two plug-ins that I was talking about. First we go to Security and let's look at the built-in security SSL module. I'd like to turn this one on when I have an SSL certificate installed, configure use of SSL to ensure that communication between browsers and the server are secure? Yes, please. So let's click Configure Settings. Ssl is important feature for every site. It protects user accounts from being compromised, protects the content from modifications by ISPs and attackers, protects potentially sensitive information submitted to the site from network sniffing, good speedup performance of the site, and can improve your site's search engine rankings, benefits all over the place. So we have this change to enabled. What it does is it redirects all HTTP insecure page requests to HTTPS secure. That allows us to see the padlock icon and it makes all scripts, style sheets, code, images, logo, everything loaded over HTTPS, which is secure. Let's verify that by looking at something that's loaded, like the image, like an image here, that this PNG file, this is an image. And there you go. It's loaded securely thanks to the SSL plug-ins that we use. All right, cool. So this is the eye theme security module for SSL. Let's look at a different one that I'd like to use in tandem with IBM Security. Just to add a little more layer of protection, It's really simple. Ssl. Add this by clicking, Add New and typing. Really simple SSL. It's a lightweight plugin without any setup to make your site SSL proof settings. And this is under settings and SSL, basically you just turn it on and it's good to go. You can also check this particular option here. So this is saying SSL is enabled on your site. Mixed content fixer was successfully detected on the front end. That's the important one that we like to use this plug-in for the mixed content fixer. It basically makes everything load over SSL, even individual images and may already be hard coded on the site as insecure. It reverts them to secure. Ssl certificate was detected when you would not want to install this plugin unless we have installed an SSL certificate on the hosting server, very important. 301 redirect to HTTPS set. This is a little piece of code to the HTT, the HT access file that redirects it on the back-end. There are premium options. I do not use the premium options. It's just another upsell and the monthly expense that I avoid by sticking with the free plugin. So let's click Settings. And the one that they'll ask you to turn on manually is the enabled 3 0, 1 HT access redirect. Ht access redirect this faster, really simple SSL detects the redirect code that is most likely to work. This is not 100%. Make sure you know how to regain access to your site if anything goes wrong. Basically adds a piece of code to the file which you can access with FTP. It's the dot HT access file on the roots of your server and it redirects everything to the secure site. So beautiful plugin, that one's free. I think security is free. All free plugins where we can enable and make use of the SSL certificate that we install with our hosting server onto our website. At this point, please pause the video, set up your own SSL certificate and install really simple SSL on your WordPress website. The third is site backups. Microsoft Word ever crashed and you lost the document you are working on as your computer ever died and you lost the pictures and files that were on it? Have you ever physically lost your phone and now you don't have your contacts or your pictures that really stinks. But with the proper backups in place, those things are inconvenient but not tragic. Why? Because you didn't really lose anything. With a backup. You have a copy of your data and you can restore it when needed. But how do you handle backups on your website? Well, it is true that you're hosting server usually backs up your files. But I wouldn't rely on that entirely. For one, they typically will only keep the last few days before deleting backups. So what do I recommend and what's the cost? Whatever I'm about to say. Can you guess the cost? Jira, very, you're really starting to know me. I love free software to, let's see what's free out there. First of all, you should know that our beloved men and WP offers free backups. They'll give you a monthly option, which is better than nothing. So I'll turn on that feature for every client's website. They do offer daily and weekly backups, but that's in their paid add-on, which is only about two bucks per website. Very low price, but every dollar counts. So if we can use free software and get the same result, Let's do it. I think security does have a built-in database backup feature, which I'll also turn on. But that doesn't include your files and see both your files and your database and need to be backed up independently. And that's where updraft plus comes in. Updraft pluses one of the many free and paid backup plugins out there. It's very popular. And the free version should suffice for your needs. You can set the frequency and destination of your backups. I choose Google Drive as my backup destination. So it's Google Drive is so generous with their Cloud Storage. And every few days, updraft plus uploads a dot zip file of my clients files and database to my Google Drive. And where I need to restore the backup, I just download the zip file and upload it to the server via FTP. The restoration process should be as easy as the backup. Let me show you these three services, all of which I take full advantage of tobacco in my client's websites. So before we look into any additional services were Plugins, let's look at the software that we are ready to utilize and see how it could help us with backups. So this is managed WIP, which I highly recommend having an account with to manage all of your websites in one convenient dashboard. So what do they do for backups? Let's click on backups and then pull up one of our websites. Alright, backups. So this is the backups module, and you can see on the left-hand side here, backups. And it looks like we are on a monthly backup schedule. This is the free version. Where do you store my backups are stored securely in the Cloud using Amazon S3 infrastructure, which is very advanced high-end technology. So that's good. What do you backup? We backup the entire standard WordPress structure except the log files and other backup files. So that's very good. How does this affect my website performance? It will only backup the files I had been changed since the last backup, which means that the backup will be a lot quicker each time one is completed, we will do all the heavy lifting and a symbol full backup archives on our servers. So that's good. For how long do you keep my backups will keep your backup history for a full 90 days. So that's great. The downside here is the backups are once per month. We need something more often than that. How did we get that? Well, you have to upgrade. The upgrade in this case is it's basically $2 a month. In my case, it's a $1.40 because I've been using managed to be P for awhile. So the offer a discount or you can pay a certain amount per month to bundle several websites. Let's see what that costs under pricing. And the premium add-ons. Bundle, bundle, 25 websites for 75 bucks for the pro version and backup, which would be fine if we didn't have any other options for backups. But we do. So we'll explore those in the meantime, let's do the free one. It backs up once a month, but that's fine. We'll go ahead and turn it on because the option is there. So let's take advantage of it. There's also a restore backup button, download backup and clone website. So that is how we would restore a backup that has been saved on Manage WP. Very helpful when you need it. Let's see what else we have available. So I do recommend turning that on for every website you haven't managed to BP, just focus on the free option, go ahead and turn that on and utilize the free backups. So we'll go into the backend of our WordPress website. And let's look at another service who are already using, which is I think security. So they do have a backup option. Let's do search modules and backup. They offer a database backup. Create backups of your site's database. Backups can be created manually and on a schedule. So manage WP backs up the files and the database. Notice the files are much larger than the database. I think security is only backing up the database. That's okay. We do need a database backup. It is important. We like to turn that on, but that's on a full backup. If you just relied on my theme security, you would be at a loss for your files, which includes all the uploads, images that themes, the plugins, all that valuable stuff that you've configured your WordPress website to have, all of that would be gone. But without the database, you don't have anything. So we need both. So we turn on Manage WP for files and database for free on a monthly schedule. And we can turn on the database backup feature in IBM Security and set how many backups we want to retain and on what interval, in this case, seven days. We can do scheduled database backups. So that's good. But what's our next option? Let's look at updraft plus would go to Plugins and Add New to add up draft plus. And that will show up under settings and updraft plus backups. So this is a wonderful free piece of software that allows us to backup and restore our files and our database, our database. So it does both on schedule. Backup now include database in the backup. Though, basketball the WordPress tables in the database. And we can include the files and send it to remote storage. In my case, I dropped them in Google Drive. This happens on a timer. I usually set it to weekly, retain five backups weekly for the files and retain five database backups weekly. You can set that to whatever you want. That just works for me on higher end clients that have more content updates more regularly, I'll change it to daily. And i'm, I raise this, raise this up. Choose your remote storage so they offer plenty of options under the free one, we can choose one of these, and in my case, I choose Google Drive. Scroll down and Google Drive, they'll have a Connect link to connect your Google Drive to updraft plus. And it's very easy to use just two clicks. And you've got your Google Drive connected. Let me show you what that would look like. Updraft plus folder on my Google Drive. This will have all of my recent backups on Google Drive. And I can have it sorted, sorted by the newest here in just a second. And you'll see that we have the files are separated into other uploads, themes, plugins, and then the database itself. So each of those is important. And when the time comes that you need to restore a backup, all you do is find the one you want, Find the date that works for you. Select all of those, right-click and download. And there you go. You have the files that have been backed up. And you can restore that on your website with your FTP FileZilla using a fresh copy of WordPress for the core files. And you'll have that work with your themes and plugins folder and your valuable uploads and the very valuable database backup. So updraft plus is an awesome oh, piece of software. It's completely free. A lot of information in here, and it works on autopilot. You just said it when you are first launching your client's website and forget it. Works on autopilot, works beautifully and it's free. So in review, I like to install all of these backup tools, like to turn on the free backups in managed to BP for a monthly file and database backup. I'll turn on our theme security database backups for a local database backup. And I'll turn on updraft plus as my primary backup solution, which sends all of my clients, websites and databases to my Google Drive account every week. So awesome tools available to utilize for the all important backups. At this point, please pause the video, turn on, Manage WP backups. I think security database backups and install object free on your website. The fourth is security scans. So how do you determine the security status of your website? Is it secure just because it hasn't been hacked yet? No. It could just be a sitting duck sitting there waiting for the hack to come its way. Instead, we want to regularly scan or websites for vulnerabilities. In fact, several of my websites were recently flagged because a major plug-in announced a security vulnerability. The big news, they put out an update along with a public notice. And if you don't update the plug-in, you're leaving your side open to hackers. So that's what we stay on top of these things. How do you how do you scan your website for security? Let me introduce you to two services. Managed WPS, built-in security feature and securities free site check. Now first off, you're already using managed to BP. Don't make sense to, to check out and take advantage of the security check feature. The free version will detect malware, plugin vulnerabilities, site errors, outdated software blacklists and more. Now it's clear that this is just the messenger, not a cleaner. It's simply informed you of the issue and how to solve it. Very helpful indeed. And three, the paid add-on does the exact same thing, except it saves you time by scanning all your websites automatically, instead of having to manually run the scanner on every site. The other service is security site check, which basically scans for the same things as managed the BP. But I'm a fan of running multiple scans in case one picks up something and another would miss. Security is one of the biggest names and website security. They have paid on demand solutions such as malware removal. But the free scanner is a great starting point. Let me show you these wonderful scanners. So before we look up additional security scanners, let's see what we already have at our disposal. So this is managed a VP again, and we're looking at the Security tab over here, security. And let's look at one that recently. Did have something pop up under the security check. It says that there were problems detected. So let's back up under the Security tab on the left. Once we're in a particular website, we want to scan. We can click Check now to go ahead and scan the website. You can do this manually or you can do it on a timer with the scheduling feature, but that is only available if you buy the add-on which will automate your security checks. And I do not do this because I try to stick to the free versions. And so the scans are exactly the same. It's just the paid add-on will automate the scan. So I'll just go through and manually click Check now on all my clients websites about once a month. Unless I need to check it more often, if I know there's a particular issue that's going to pop up. So this scans for vulnerabilities, web trust, and malware. Currently all of those are clean, but a few days ago they were not clean. So let's look at what problems were detected. This is a great example of something that would pop up that you need to diagnose. So problems were detected. Malware was clean, there was no viruses on the site. The web trust was clean, which meant that Google and other blacklists and other search engines had not blacklisted the website. So that's good. But the vulnerabilities were detected and that was the problem. So we scroll down and vulnerabilities, this is a plugin WP bakery Visual Composer was compromised and they put out a security update and they wanted everybody to update the website so they can take advantage of the security patch. So I had to go in and do that. And that was okay. That was just a typical WordPress update, but it is something that popped up on that particular security scan. So I'm glad that managed to be P notified me. So I would make sure to include that in my round of updates. Web trust, it showed the domain as clean on all of these different sites, including Google, Safe Browsing and Norton and other ones, and their security malware labs. So if we click on Check now, then it will show the security check. And this is our security check. So this is what popped up and everything is verified, clean, no malware, no vulnerabilities, and the web trust is good. So we're good on every department here. So that's great. We cleaned the problem that popped up and we're all good to go. So let's cross-reference that with a, another website. This is the website in question, master battery.com. So let's put it through the security free site check. This is site check dot security, dotnet, SUSE URI dotnet. And we can copy and paste our domain name into the form here and click Scan website. This is a free website security check and malware scanner in through the URL. It will check it for known malware viruses, blacklisting status, website errors, out of date software, and malicious code. We'll go ahead and click Scan website and get that started. Wow, that was fast. No malware found. Our scanner didn't detect any malware. Site is not blacklisted across nine different popular blacklists. And it's a low security risk. No malware on the site. No malware detected, no injected spam detected, no defacements detected, internal server errors. The side is up to date and uses a current version of WordPress. The blacklist checked out. The domain is clean on all of those different blacklists. And that's great. Website monitoring and firewall or up charges with security. So we'll ignore those were sticking to the free. And yeah. All good. So that's another one to check in addition to manage the BP, if you specifically are doing a security audit and you want to make sure that the site is clean, this would be a great tool to use in your repertoire of security scanners. So we have security, we have managed to BP and there's plenty of others, but those are the two that I love to use. At this point. Please pause the video, scan your website with managed to BP and security site check. Notice what is reported in the scan results. The fifth is virus removal. Have you ever been on a website that got hacked? How did you know? Well, maybe you had a not secure pop up or redirected you to a site that obviously wasn't the one you intended to visit. Despite your best efforts to stay on top of security, hacks can happen. It's not about if your website gets hacked. It's what to do when your website detect. I call this the virus removal part of your website maintenance plan. If you have your proper backups in place, simply wipe your files and restored the site with a recent backup. Delete the database in PHP, my admin through Jonas, and restore it with the database file from Google Drive. And then one. Once the website has been cleaned and back online, you need to do your best to make sure this doesn't happen again. How do you do that? Well, here's a convenient guide from security on how to clean a Hecht WordPress site. Let's read. This is securities, how to clean a Hecht WordPress site guide. There's tons of online guides that you can read that give you some awesome steps on how to remove a virus from a WordPress website and how to secure it going forward. But this is from security, which is an authority in the security industry and where to using it for the site check so we trust the information that they provide. So let's see, steps to removing malware, spam and other hacks from WordPress. Security has devoted years to helping WordPress admins identify and fix Hecht websites. We put together this guide to walk WordPress owners, the process of identifying and cleaning a WordPress hack. This is not meant to be an all encompassing guide, but if followed, should help address 70 percent of the infections we see. So first, I want you to identify the hack. Second is to clean the hack, and third is post hoc steps. So first, how do we identify the heck? Well, they take it to their site scanner, scan the website, check core WordPress file integrity. So these are the WP admin. Wp includes root folders. One nice way to clean the website would just be to put a fresh version of WordPress on their check recently modified files. Check Google diagnostic pages. So you can visit the safe browsing sites status website into your URL. And on that page, you can check if you've been added to a Google Safe Browsing blacklist. So that's a helpful way to see if you've been blacklisted or if you have any hacks on your website. Step two would be removed malware from your WordPress site. Pro tip. The best way to identify files and WordPress is by comparing the current state of the site with an old and known to be clean backup. If a backup is available, you can use that to compare the two versions and identify what has been modified. Clean, hacked WordPress files. If the malware infection is in your core files are plugins. You can fix it manually. Just don't overwrite your WP config file or WP Content folder and be sure that you make a full backup beforehand. We want our backups ready at all times. And we want to take advantage of WordPress.org, add that one ready so that we can download a fresh version of WordPress and clean it in that way. Because some files can be replaced with fresh copies or recent backup that's not been infected. You can remove suspicious files that shouldn't be there. Through your FileZilla, your FTP client. Clean hacked database tables, secure WordPress user accounts. That means one, backup your site and database to login as the admin. To WordPress, click Users, find suspicious new user accounts and then delete them. So that would be ones that you didn't add. They don't belong there, and they'd been added so that a hacker keen to get into the website. So we definitely want to remove those and reset passwords that we might think are compromised. Remove hidden back doors in your WordPress site. So these are files that shouldn't be there. Basically, when we go into FileZilla and we'll click around once you get to know WordPress and what files are supposed to be there, it's easy to spot the ones that aren't supposed to be there. Often backdoors are embedded in files named as similar to WordPress core files, but located in the wrong directories. Attackers can inject it back doors into files like a WP config dot PHP and directories like themes, plugins and uploads. We definitely want to close those. In any way. We can just delete the code completely. So the hack will cease, remove malware warnings if you're blacklisted by Google, McAfee Yan index, or other web spam authorities. You can request a review of your WordPress site after it's been cleaned. There's ways that you can do that. Protect your WordPress site from future hacks. So at this point, the hacker has been identified, the hacker has been cleaned. And now what we need to, in the final step, learn how to fix the issues that caused your WordPress site to be hacked in the first place. So your job doesn't end there. After you've cleaned the hack, you need to make sure it doesn't happen again. Number one, update and reset configuration settings. Backup your website's, restore it with a fresh copy of WordPress. Update. Run any updates that are available there, WordPress admin. Reset user passwords. It's critical that you change passwords for all access points to your WordPress site. This includes WordPress user accounts, FTP through Ioannidis, and your database through ionise as well. You should reduce the number of admin accounts for all of your systems to the absolute minimum. Practice, the concept of least privilege, which means we only give people the access they required to do the job they need for just as long as they need it. That's a great principle. And we use strong passwords. That's a given. Generate new secret keys. That's those salts that you can do through I themes. Reset your plugins. Hard and WordPress, like through I think security. Set backups for your WordPress site, which we already have in place. Scan your personal computer. Alright, have all wordpress users run a scan with a reputable antivirus program on their operating system. Wordpress can be compromised if a user with an infected computer has access to the dashboard. Some infections are designed to jump from a computer into text editors or FTP clients. So we can run a free anti-virus scan using some of these tools. You should only have one antivirus scanner actively protecting your system to avoid conflicts. If your WordPress dashboard users computers are not cleaned at your site can get re-infected easily. So that's an important step. We don't want to forget. Make sure you scan your computer for any viruses sitting on your computer itself. He's a website firewall which security wants to sell you on. And there's some FAQ at the bottom. That's very helpful guide. Those steps are very sound and I totally recommend following the directions in that. There are other guides like this, but I like the way that this one put it very easy to follow and you can review this whenever that time comes. If it comes when one of your clients websites get gets hacked. So you can identify that it's been hacked. You can clean the hack and post tac, makes sure that a hacker doesn't happen again. At this point, please pause the video and review that. How to clean a hacked WordPress site guide. Number 6 is Cloudflare, which has been around since 2010 and has grown into a web security, a Doherty. They serve over 25 million sites by improving security, performance and reliability. Cloudflare has both free and paid plans. At their core, they secure websites against hackers and speed up websites with a CDN, a content delivery network. Have you heard of a CDN? In its simplest terms, it connects you to the server and files closest store you actually live. The less a website has to travel to get to you, the quicker it can load. Make sense. It also does a ton of stuff behind the scenes to speed up the performance and reliability of your website. Let's take a look at what Cloudflare offers and how we can utilize it. This is the homepage for Cloudflare, protect and accelerate your websites, apps, and teams. So just a quick scroll of the homepage and we can see that the amount of services Cloudflare offers is now very overwhelming. It's the fou 37. Selling Your Website Maintenance Plan: Welcome, I'm Leighton, your webmaster. In today's lesson, let's discuss how to market and sell your website maintenance plan. So by now, you're sold on the value of a maintenance plan, both to you personally and to your clients. You understand the type of services that you're playing can include, like hosting, management, updates and security. And what Free Software helped to provide those services. Hopefully, you've already signed up for most of them. But now I want to talk about what you call your plan. How much you will charge for it out of a cell it. And what if they cancel their plan with you? First, what will you call your website maintenance plan? Obviously, you can just call it your website maintenance plan. The very standard choice. But I personally consider mine a website care service. I shied away from the word maintenance because I wanted to turn that into a positive care. My service is taking care of your website. Others just consider it hosting and maintenance and that's fine. Some agencies even call this a service agreement. That's okay too. Whatever you call your service, pick a name and create a page for it on your website. For your inspiration. Here's what my website care service page looks like. So once you've decided you want to market a website maintenance plan, you've got to add that service to your website design business website. So in my case, this is my agency, pioneer media, and I added it to services and website maintenance. So you can use this as inspiration for your website maintenance page. So this title is SEO friendly. My local area is Tennessee website maintenance plan experts since 2006. And opening paragraph here, what does it include? Scroll down to see a primary features. Why do you need it? This is an internal link to a blog post I wrote on 16 reasons why you need a website maintenance plan. Here's a graphic I created that shows the site updates, the backups, security servers, hosting and emails on the website. What's included in the website care service? Hosting, email management updates, security search engine optimization, social media, virus removal, up-time monitoring, change detection, local listings, and SSL. So those are the different services that I market in my website care service. And you can mark those as well if you're comfortable providing all of those services. So each of them has a little description of what that entails so people can come to understand what all the services that you provide in your website maintenance plan. The more you can write here, the more you can pack into your website maintenance plan, the better. Then as we continue to scroll, I have added we are in a five-star Google rating with a link to my Google listing and some testimonials. So if people land on this page and haven't seen any other page on my website, then they can read some testimonials. Finally, we've got a call to action. Does your website need managing, call us or e-mail us or fill out this form. That's a great way to capture any interests that people have when they land on this page, they can just fill out the form, shoot it to me and I can fulfill the request. So that's my website maintenance plan page. I've packed it out and refined and refined it over the years and now it's on the services website maintenance sub page. So you do need a landing page for your website maintenance plan and you can consider mind as inspiration for yours. So go ahead and create your landing page on your website asap. Next, how much do you charge for a website maintenance plan? I love this conversation. What do you think sounds appropriate? I can't decide this for you, but I can provide you some inspiration. Some web design agencies will offer three tiers. The classic, good, better, best business model. So let's say 50, 75, and a hundred and fifty, a hundred, two hundred, whatever your plans are, you need to figure out what differentiates them. Why would someone choose the most expensive plan? Perhaps your first here is maintenance without hosting. Your second tier is maintenance plus hosting. And your third tier includes two websites, or your first tier is a one-page site. Your second tier is a standard website. Third tier is e-commerce, which requires a lot more ongoing work. Well, you offer a discount on multiple sites where you just offer one plan. I basically charge my clients $95 a month for all plans. In fact, if a client is on a tighter budget, that gives me some wiggle room to negotiate down to, say, 75 or 55. And if a client needs more assistance, has a higher budget. Charged up to $700 a month for clients that had multiple high budget websites. I've also charged as low as $15 a month for very small businesses who just want a pure hosting. So you can change up the price based on the initial consultation. Don't feel like your prices are fixed without any negotiation. And that's a key point. Well, listen to their needs so you can anticipate how much time you'll spend on their project each month. And to be clear, which of these plans actually cost you. Have you added up the cost yet? Well, for your first, say, 2250 clients, you can get by with the free version that most of those software and beyond 50 clients and the cost of the paid version, it's hardly anything. So pretty much the only cost upfront is the hosting server itself. So let's say you chose the $90 dedicated server through your ionised account. If you fit 20 clients on there at 50 bucks each, that's a $1000 per month recurring revenue and only $90 per month of expense. That's a 91% profit margin. See the more free services you take advantage of, the lower your expenses and the higher your profit margin. If you have 50 clients averaging 75 bucks a month, that's $3,750 per month totaling $45 thousand a year, a passive recurring income for accounts that basically run on autopilot with little maintenance and admin work. So that sounds awesome. But how do you sell your website maintenance plans on yourselves goal. This is the number one key point. Above all else, you need to stress value, value, value, value. In order to do this, you need to have a solid understanding of both your services and their value. What exactly does your maintenance plan include? How do you respond when asked, what do I get for that monthly fee? What did they think maintenance is unnecessary? Nearly all of those obstacles can be overcome by Boolean understanding and believing in your product. In fact, in just these lessons, we've gone, we've gone through over 15 individual services that you can bundle in your website maintenance plan. Let's say you're charging $50 for your maintenance plan. If you stress value, valuable, each of those 15 services is in convey your passion for this service. Then by the end of the sales call, they won't be saying that costs $50 per month. There'll be saying I get all of that for just $50 per month. That's the kind of feeling you want to elicit in them. You also want to take them on a journey, get their emotions involved. Ask them, how would you feel if you poured up your website and it's gone or it's been hacked. It doesn't work anymore. With a maintenance plan, we got your back and get them excited about their website. Make them feel like they can't afford not to have a website maintenance plan. Inside point. I wouldn't bring this up at the beginning of the school. Do hit them up with another recurring expense right out of the gate. Get to know each other, explained the value of a website. Get them talking about the project and why they've approached you, what problems they have that you can solve. Then go into your spiel about the value of a maintenance plan. By then, you've already expressed how important a website is and how whatever amount they invest that website should bring in returns. Well beyond that, helped them view the website as non expense. But an income generating machine. That machine costs money, cost money to build and a little bit each month to maintain. But without it, you'd be losing business. Once they're thinking in terms of how website will increase their business, they'll be more open to the idea of upkeep and maintenance. Course. I want someone to take care of their lead generator, their income machine. If they elicit those feelings, had that reaction, you've gone. Now finally, what did they cancel? They no longer 12 website maintenance plan. That's perfectly fine. Things happen. Put yourself in their shoes. How would you feel if you wanted to cancel services with a company? Would you want them to cancel your account account be grudgingly, or make the cancellation cancellation process a nightmare. Now, recession hits, businesses close, they change hands, they outgrow your services. Maybe they downsize. For whatever reason, don't make your client feel bad for canceling maintenance and hosting. And this is a key business point. Always leave the door open for future work opportunities. Positive testimonials and referrals. Once they've requested cancellation, it's on you to make this process go as smoothly as possible. It really boils down to just like five minutes of work. It's basically the opposite of a website migration. You're migrating the site off your server. In reality, what that actually means is emailing your client one, a backup of the website's database and files. We can do that in a zip to unlock their domain and send the auth code. And three, that is their email accounts. Now it's up to the client to accept the transfer and move the website onto their own server. But you've done your part to be as cooperative as possible. Now one final point. How do you invoice your clients each month? Wow, we're actually going to cover that in the next set of lessons. So stay tuned. So let's recap. In this lesson, we learned that one, you should name your website maintenance plan and clearly outline the included services to write down the various plans you'll offer and for what month they cost. Three. So your maintenance plan by stressing the value 4, if a client cancels your maintenance plan and we leave the door open for future opportunities. What's our homework? I want you to create the website maintenance plan service page on your website, write down both your plans and your triceps. This has been so awesome. I hope by the end of this series, you're becoming a website maintenance plans as I am. These are exciting, the transformed my business. I'm thrilled to see how they help you. I'm lazy. Now you know, website maintenance plan. 38. PART 6: How to Serve Clients: Welcome, I'm Leighton, your webmaster. Congratulations, you have reached the most important series of lessons in this entire course. By now, you've learned the fundamentals of web design. You learn how to build a website. You learn how to create your brand. Search engine optimization is all about. You learn well What's I've made to this landing on that knowledge is incredibly valuable. And not only did you learn that knowledge, but through your homework, you took that knowledge and used it to build your skills. So empowering to learn new skills. But how do you sell that knowledge? How do you cash in on those skills? It's kind of like taking a class in, in real estate to you learn the trade, you study for your exam, you earn your license, would have, you know, so many homes. What did that knowledge do for you? See, knowledge alone is good, but it doesn't pay the bills. We need to implement this knowledge to build a successful business, you'll begin generating four by six-figure income in web design once you start marketing your skills and earning clients. That's what this series of lessons is all about. In fact, we'll be learning about every step of the web design process. Earning an interviewing clients, quoting websites, sending proposals and contracts, invoicing taxes, on-boarding clients, designing, developing, polishing, and launching websites, and maintaining your clients. But why is this series of lessons cold? How to serve clients? Because as a webmaster, you don't have one and done customers building and marketing the website is not a onetime transaction. Providing your website design services means nurturing long-term relationships. You serve your clients by promptly responding when they have questions, requests, or updates for the website. You serve them by keeping track of their website and ensuring it stays up and live. Your customer service can shine greater than any other skill, and that's what they'll talk about. That's what your clients will brag about. But building those long-term relationships is a process for meeting the meeting a client to longeing their website. But since 2006, I have refined this process and I'm so happy to share with you what I've learned through trial and error. I've learned what works and what doesn't, but also how to automate and simplify your processes to save both time and effort. In fact, right out of the gate, I want to share with you two time-saving documents that will greatly improves your productivity. The first, I call my project's timeline. So let's say you've had a few sales goals. You land some clients, and you start building websites. How do you possibly keep track of all that? How do you remember which people use their proposals do which are currently reviewing your contract, which you're waiting for, a down-payment from which client you need to build a website for and who's websites you need to launch. How do you keep track of all that? You'll save yourself a ton of time and mental clarity. If you get the status of those clients out of your mind onto a document, see when you write something down, you free your mind from having to constantly recall the same information. And what about those clients who fall through the cracks? The ones you haven't heard from in a while, you'll save yourself from forgetting about them. If you write down the status of their project, you can achieve this through project management software. Have you heard of, say, Basecamp, Trello, Asana? Yeah. There's no shortage of project management services out there. There's far more than what I just named, but those are the most popular ones. And what did they do? They basically allow teams to collaborate, communicate, manage tasks and projects. If you have a team, these are invaluable services. What about when you're first starting out, like you and me, when you're a solo Premier, do you need an expensive project management solution? Or can you effectively do this on your own? You already know the answer, you know me, there's always a free option. Obviously, you could just create a, a word or notes document. I prefer the spreadsheet format for this. Let me show you my trusty project's timeline spreadsheet. Here's my trusty project's timeline spreadsheet, a 10 step web design process mapped out from beginning to end. Let's look at these different steps. First off, we first meet a client, we send them a proposal, that's the first column. Then we move them to sign contract, where we'd give them a contract and await their signature. Third, would be a downpayment when you're waiting for them to make the payment. Number four would be the domain and design. This is where we gathered together the current status of the website, the hosting domain and email situation and figure out what we'd like to do for the design. And we also gather content for the website. Next, we're building the website. This is where you build the site, design and develop it. Based on whatever creative liberties you've been given and whatever the scope of work is involved. Next, after your product with the work, you send it over and we finalized the website. So this is where they submit their revisions, give you feedback on the website and you go make the changes based on what they've told you. Next, we launched the website, which is where we wrap it up on the back-end and launch it, submit it to Google, make it live on the internet for everybody to see. Then we'd get it down or we get a final payment, the completion payment, which is the balance on the initial invoice that you sent. Next, we start our What's a maintenance plan in my case, I call that the care service. And this is where we await the first payment for the first month that we send the care service. And then finally we add them to our portfolio and get her review. So how does this timeline actually work? So this is a visual mapping of what the status of each of our projects is. So let's look at company G. So accompany G. They've already agreed to the proposal, they signed the contract, and now we move them over to downpayment. We're awaiting them to make a payment. As soon as they make that payment, they're going to move from this column to the next one, domain and design, where we figure out what we're gonna do for their website, how we're going to design it, what kind of content we had to work with. And then once we have all that ready and we're ready to start building, boom over to building a website where we designed and developed a site. So ideal that you're moving these from left to right. And then once we're done, the website has launched. They've paid their honor care service as a paying monthly client on our maintenance plan and we've added them to our portfolio and gotten a review. At that point, we can remove them from the timeline and they are no longer one of our active projects. They are an active client, but the project initially is now complete. What else can we do? So another nice feature is the comments. So in the number's app on a Mac, we have a comment button which you also have on Excel. Insert a comment and we can click that and type whatever we want. So building site, so we might say homepage, complete. Need to do about us and contact. There you go. There's your comment and it's timestamped as well. We can update it in the future. We can delete the comment. I like to add comments to the Senate proposal. I like to have a date on each of these. So we might say emailed or sent via email on October 5, 2020, and then put the amount 1995 plus 75 per month. There you go. You've got a timestamp, you've got the amount quoted, and we've got how we delivered the quote and the date. Very good. Why are these colorful while these are black? So I like to color code it based on how old the proposal is. So if these are clients that we're trying to gain in the past year, then I'll make them green. If the proposal was sent or the contract was sent over a year ago, then I'll make it orange and in over two years is red. So the reason we keep these on the list even after awhile, is because maybe we're sitting around twiddling their thumbs and we don't have any work to do. Well, let's go through this list and maybe we'll call UP company B, see how they're doing company a, company II, and see if we can jump up to business there. And then the green ones are ones we probably have an open dialogue with. But we can also follow up with them at their low bit of time has passed and see how they're doing, see if they're re to move forward with the project. So it's very valuable to keep those on our project's timeline. Not forget about them because it's possible that maybe a few months from now, maybe the next season or the next quarter, they will want to pursue that website project, but just not right now. So we don't want to forget about them and we certainly don't want to forget the amount that we quoted or what we offered to provide for them. So this is the project's timeline. It tends to that process that I use to map out and visualize my projects and keep track of what projects I have going on. At this point, please pause the video, download the project's timeline spreadsheet in the resources section of this lesson. So the timeline spreadsheet helps you to map your current projects. But what about your maintenance clients? I don't keep track of your paying clients once our initial build complete. You just remember that all in your mind, I can even begin to express how important this is. Imagine if Netflix forgot that you pay for their shows and movies, would have Amazon forgot that you are a prime number and accidentally charged due for shipping. See, when businesses pay you to be there webmaster, they expect you to keep track of them. The DI be easy for the first. Clients, but what about 10, 20, 50, hundreds of clients later? How do you possibly keep track of who's on your website hosting a maintenance plan? Do you guessed it? Another free spreadsheet. Set yourself up now for growth. Gets your systems, your spreadsheets, you processes in place, and you'll be in better shape to scale and take on more clients in the future. So what pieces of information should you include in your client's spreadsheet? Well, I like to include the client's business name, my contact within the company, the website address, the amount the company pays monthly for your maintenance plan. How will they prefer to pay? Check, credit card, auto pay, if their site is secure with SSL. If they've written me a review and who referred them to me? At the bottom, I designed the spreadsheet to automatically add up the clients the amount they pay monthly, annually and a breakdown in my top referral sources, this is super valuable information and metrics. Let me share with you my clients spreadsheet templates. It was my clients spreadsheet template. So these are eight different columns. And it setup for growth as we can just add a new row every time we add a new client. So let's go. What's all involved in this spreadsheet that we start out with the business name. We've got our five clients here. We've got the amount that they pay monthly, 75 a month, 50 a month, 9550. We've got the contact name. This is the person that we work with in the company, whether that be the marketing manager, the owner, or whoever, and the autopay, this would be whether or not they're on credit card, auto pay through our wave or accounting software. So three of these are, yes, they are on credit card, auto pay, which is ideal as one prefers a bank payment and this one prefers to cut a check and mail it to us. And they reviewed us. So two of these have written a review? Yes. Do those have not written a review yet? And then another one we've already asked a few times, so I'm going to stop asking because I don't want to seem pushy. Ssl, four of our websites, our SSL secured, and one of them is not yet, so we'll try to change that in the future. Referral. How did we get this job do with these came from b and i, 1 came from a friend. Then you can put the friend's name, of course, another came from Google and another came from the local chamber of commerce. And then the website URL, this is a link to their website. Now, that's one row per client. That's very helpful. But one of my favorite parts is the bottom here. So this is where our calculations take place. We've got the amount that we bring in and a breakdown based on the referral source. So let's look at this a little closer. Total paying clients. This is an auto summary of the amount of paying clients that we have. It just adds up all these rows, five. The monthly revenue is an addition of all these rows in this column. The amount that is paid monthly, $345 per month. And then the average bird client takes this summation and divides it by the total paying clients to give us an average. So in this example, we have $69 is the average per client, which looks correct. Seventy-five, fifty, ninety five. So that averages out to 69 bucks by paying clients, average of 69 per client adds up to $345 per month, which is $4,140 per year, which is just this number times by 12. And there's our formula. Very good. As we move along, we see the percent that is on auto pay. So this would be 60 percent had the word yes in that row and that tells us that 60% are on auto pay, 40 percent have reviewed us, and 80 percent are on SSL. That's a nice way to see if there's any homework that you can do as a business owner trying to get more of your websites secured or get more reviews or more clients on auto pay if possible. How about the referral source? So in this example, I have demonstrated for you be an eye chamber, Google, trade organizations and friends. So what this does is it grabs any of the rows that have that word, in this case be an I in it. And here we have 2122 companies were referred through B and I. And there we go. Total per source is to 1 in the chamber, one Google 0 trade and one by friends. How does that break down? So B9 in this example is 40% of our monthly revenue. Chambers 20 percent. Google's 20% trade is 0 and friends is 20 percent. Very helpful metrics their monthly, what do each of these referral sources bringing in as a business? So the C&I clients bring in a $138 per month. Chamber brings in 69, Google brings in 1609, trade brings in 0, and friends bring in $69. What does that annually? B9 is 16, 56 chambers, 828, Google 828, trade $0 and friends $828. So can you see how once you have several clients added to this 10, 20, 30 clients, that these metrics can be very helpful. It's just good to know which marketing endeavors are working the best. In this example, B9 is working the best. And if a majority of your jobs come from B9, then you'll know that that's something that you should stick with. If you are doing paid ads and you've gotten 0 clients from that after six or 12 months, then that would be an inclination that perhaps that's not working for you. So this data is extremely helpful. I'd like to review this every few months and see what I can glean from this information and see what changes I can make as a business moving forward. So I'm going to save this to the resources section so you can download this template and make it your own. Enjoy. At this point, please pause the video, download the client spreadsheet in the resources section of this lesson. So now you have your two project management spreadsheets and you're ready to boost your productivity and start earning clients. Awesome, I will walk you through this entire process step-by-step, from how to land clients all the way down to launching their website. So to recap, what have we learned? One, we implementing caching or website design knowledge by naming clients. To running a successful business requires automating and simplifying your processes. To project timelines. Spreadsheet will help you map your project. Or the client spreadsheet will help you keep track of declines on your hosting ME. And what's our homework? I want you to download those do spreadsheet templates from the resources section of this lesson. I'm Leighton, and now you know how to serve clients. 39. Earning Clients: Welcome, I'm Leighton, your webmaster. In today's lesson, let's discuss how to earn clients. Now I could have called this lesson how to land clients, but I chose the word earn. What does the word mean to you? When you earn something? Does it come for free? When you earn a wage? What do you give in exchange for that wage? Your time and energy is to earn a client. You've got to put in work. Clients are not going to jump out of the sky when you're first starting out. Eventually, once you've been doing this for awhile, you've built up your client base. You'll have what's called a referral train. Maybe you've heard of our referral train. A train is basically where you have where you regularly have new business coming in because you've established yourself in an industry. People know you, you built up your client base, you grow in your network. That means 50, a 100, maybe 200 people, all think of you when they order their friends, their family member, go worker needs a website. Personally. I have calls and emails coming in every single day from people needing what time built. I remember first starting out in the website design business in 2006. I know how it feels to be brand new in an industry. So what opportunities are there to Lana clients when you're first building your website design business. We're going to talk about eight different ways that you can earn web design clients. Number one is family and friends to warm calls. Three, freelance sites for trade organizations. Five, Search Engine Optimization, six, paid advertising. Seven, non-profits, eight, network and referral marketing. Not just to whet your appetite for this lesson, number 8 is the absolute best way to, to build your business hands down, especially when you're first starting out. But we've got discussed the first seven. In fact, due to that, I will breeze through the first seven so we can really explore network and referral marketing. So let's get started. Number one, family and friends. Now this may sound like a cliche. I mean, announce your business to your circle. But this can really help you kickstart your portfolio and your reviews. See when you're brand new. People don't know you as a web designer. So how do you think a business would perceive you if you have 0 reviews and you haven't built any websites, would they be thrilled about hiring you? Or do you think you wouldn't get any sizable amount of their marketing budget? Likely not. See. You need some reviews and some projects under your belt. And family and friends honestly are a great way to speed that up. So tell your Facebook friends, your Instagram followers, family members, shoot some WhatsApp messages or texts, tell them what you're doing and that you would love to help them with the website. Especially if you have a friend or family member who's starting a new business, help each other out. And the nice thing about leveraging your personal network, that they'll probably be a little kinder to you when you make mistakes. We all make mistakes when we're starting out. That's okay. We clicked the wrong button. We dig a little bit longer to do something. We mess up a transfer, migrate something incorrectly. But with every mistake you make is a growth opportunity. I've repeat. Every mistake we make. Is a growth opportunity. A reminder to do a write or do better the next time. I love mistakes. Each mistake that I made has been an opportunity to optimize and refine my processes. Friends and family will usually be a little more forgiving when a more forgiving than a business would, that doesn't already have a friendship with you. My business owner friends were so kind to me when I was first starting out. I was so young and fresh. And yet our businesses grew together. And the experience that I gained was so invaluable. But you may wonder, do I need to offer to the website for free just to gain experience? Well, I wouldn't advocate doing it for free. But I would definitely explain that Joe only offering to design the website for much cheaper than you would traditionally charge because of the promise that they'll give you a review and that they'll allow you to put their website on your portfolio. You see those reviews. Those portfolio projects are so crucial when you're first starting out, might take away, is to leverage your personal network of friends and family to help them out, build or improve their website as they help you out by building your portfolio, reputation and experience. The second is warm calls. Now I'm not even putting cold calls on this list because I can't stand gold goals. They're ineffective for many industries, but especially the website design industry. I mean, have you ever done business with a complete stranger who called you wonderful? Clearly, I'm not a fan of goal goals, but what's a warm coal? Well, first, a hot referral is one where the person, the person you're calling is already interested in your services. Whereas a cold coal is one, that means no contexts been made. They don't know who you are. They don't know you're calling or why you're calling. So a warm call is somewhere in-between. For example, let's say you're browsing local businesses and you come across a website that's maybe it's not mobile friendly, maybe chosen not secure warning. Design isn't all that impressive for whatever reason you believe that you can help them out. So researched the business, write down those reasons you think you can be an asset to them and reach out, present your findings. It's far more effective to present personalized solutions to existing problems than to just arbitrarily opera web design services to all local businesses. Focus on their needs, not just your services. When a small business loans that you personally checked out the website found some errors and offer a solution to their problem. There'll be more open to considering your quote. The third is freelance sites. Have you heard of freelance sites before? Freelancer.com, fiverr, a Bork. Those websites connect people with professionals. So a business owner can go on to one of those freelance sites, post their need, such as an e-commerce website or logo, along with their budget, like say, up to a $1000. And all the professionals on that site can bid on that project by means of a quote and a sales pitch. But how likely are you to get picked for that project fit? The other freelancers are also bidding. And if you are picked, it's probably because you were one of the most affordable options. That being said, I actually got a lot of my first gigs through those sites. The issue is the quality of gigs and here's my takeaway. You can make high-value connections on those sites. But as a generality, the people who posts on these sites are looking for the cheapest price, plain and simple. If you're picked, you're probably not being compensated very well, nor are you building long-term relationships. It's a decent way to grow your experience and portfolio. But eventually, you really should outgrow those freelance sites. The fourth is SEO, search engine optimization. Then you know, this is basically trying to rank well with Google and landing on page 1 when people search for local website designers, theoretically, that would be a great idea. Some of my best clients, I'm actually come from a Google search. But when you're first starting out, you simply can't expect to rank on page one of Google. The first page is full of established, reputable website designers. And if you're new, you won't bring up there just yet. So here's my takeaway. You definitely need an SEO friendly website. You definitely need to post to your blog and create high-quality content. But I wouldn't sit back and expect calls to come from your Google listing. Invest your time in SEO, but don't rely on it as your only referral source. The fifth is paid advertising. Have you ever advertise before? Personally, I'm not a fan of advertising at all. Many businesses rely on advertising. There has been thousands of dollars on it and that's okay. But I've never spent a dollar on advertising. You could try Google ads, Facebook ads, billboards, TV ads, Magazines. There are a lot of money with no promise of a solid return if you do pursue paid advertising. Here's my key point. Monitor your ad campaign, closely, track the client. You land through your ads. And after a few months, you've got to decide whether the money generated from the ads exceeds the amount you put in. If not, redirect your marketing dollars elsewhere. Number 6 is the trade organizations. Have you heard a bartering partnering sound archaic to you? It's actually alive and thriving, especially in an economic downturn. You may have a trade organization where you live. I'm personally part of to trade bank and I text, you basically do a website for trade dollars and you spend those straight dollars with other businesses also in the trade network. So a business can purchase a 2000 dollar website from me on trade. And I can purchase a hotel, stay, a cabin rental, window cleaning, dental services, or whatever else is offered by other businesses who accept those straight dollars. The plus side is no cash is exchanged. The downside is you aren't earning cash and you can't pay most of your bills with your trade dollars. So here's my takeaway. You can build qualitative relationships through trading, but make sure your website maintenance plan is cash only. Offer a website design on trade, but required the monthly bill to be paid by credit card. The seventh is non-profits. Every now and then you'll be approached by a non-profit. Does working with a non-profit sound a little counterproductive to you? I mean, if you're looking to build a business and make money, why would you possibly work with the business that doesn't have any money? Well, there's three considerations here. First off, admittedly, most non-profits do have some sort of marketing budget. I have several non-profit clients and they all pay for my website care service with a credit card on auto pay. So they do have a little bit of money budgeted for operating costs. Next, websites and social media are very important to non-profits because they're typically looking to gain as much exposure as possible from those channels. They're all about and getting exposure. So while they may not be your highest paying clients, they do see the value of having a functional quality website. And the third consideration. Also my key point, non-profits are full of passionate, well-connected individuals, many of whom have their own for-profit businesses, who can become your greatest and most vocal referral source, nurture your relationships with your non-profits. You never know where they can take you. Remember eight is networking and referrals. We definitely saved the best for last, this is the number one best way that you can earn client's joined to be an odd chapter and embrace referral and network marketing. Have you heard of referrals? Networking puts a referral. It's basically when somebody hears a need and says You should call this person and gives out your name and number. The person needs a website. By the time they call you, they are already interested in your services because they trust the person who recommended you. Sounds great, right? Let me introduce you to the world's number one referral marketing organization B and I. They've been around since 85. I've been a part of beanies since 2015. And to this day, this is the number one way I have ever earn clients more than family and friends, more than any other organization I'm a part of. In DNI, you join them what's called a chapter which has about 20 to 40 professionals whom you meet with once a week for 90 minutes, the past business to each other. There can only be one person for professional. That means only one web designer per chapter. You will lock out your competition when you join a chapter. Now you're trying to sell it to one another. Rather you view the other people in the chapter as your Salesforce. You educate each other on how you can best pass referrals. It's free to visit a chapter. So let me show you how to find a local being a chapter in your area. Now I generate more revenue. Nearly 270 thousand businesses around the world utilize beanies network to generate valuable sales referrals. So these are some cool numbers down here. The world's largest referral organization, 270 thousand global members, 12.2 million member referrals, 9500 global chapters, and $16.7 billion of generated business through being I referrals, That's amazing beanies in 70 different countries. And those stats are accurate as of 2019. That's incredible. So how do we find a chapter to be a part of B? And I click the red, find a chapter call to action button up here. And let's say that you are in the Austin, Texas area. Let's put Austin, Texas. All right. So this is going to pull up chapters located in the Austin, Texas area. There's a whole bunch here that you can scroll through. This gives us the name of the group, like B19 360 group, what time they meet. So just right here we can see one meets at Tuesday at 1130 AM. One meets Wednesday at 1130 AM, one meets Thursday at 1130 AM. So there's all kinds of different meeting times. 1 meets at 07:45 AM, meets at 08:00 AM. Personally, my being a chapter in my area meets at seven AM and fun fact, B9 chapters only met at seven AM when being I was first founded. It has grown to support different times throughout the day. But first thing in the morning works really well historically. So what did we do to find the perfect hepta for us? Well, obviously you would want to check how it works out with your local area and your personal schedule. So one that's close to you and at a convenient time, but what else? Oh, we absolutely cannot join a chapter that has a website designer that's just not possible through B9. So we need to find one that doesn't have a web designer. We can do two buttons here. There's visit chapter and there's C chapter details. Let's click this one has a lot of members. We'd like 12 with a lot of members could It's a lot of opportunities to do business. This one has 40 members, so we'll click see chapter details. It tells us that this is the B19 360 group. They meet Tuesday at 11:30 AM. At this time there temporarily meeting online via Zoom and this would be the address of where they would normally meet. They have 40 members in this chapter. This is the leadership which would be the director consultant, the area director consultant, the president, the vice president, and the secretary treasure. Those all less for a one-year term. And another fun fact, if you are president, vice president or secretary treasure, you get one-year free. And B and I, I had been the president myself, and that's an amazing privilege. And it's also a nice money saving idea. Alright, chapter members. So we can see the members that are in this chapter, the name, the company they represent, and the profession or specialty. Let's see what they have advertising and marketing, web design. They already have a web designer. Let's see what else there is. Taxes, advertising and marketing. Oh, I bet they pass business with a web designers. Quite often. Architectural services, Auto and car repair, IT and networks. All of this must be a really strong chapter. The, IT, the advertising into web design are probably passing business between each other all the time. The builder, general contractor, electrician, h vac painter, pest control, renovations, remodeling, roofing governors. They must be passing referrals back and forth all the time. This must be a very strong chapter. I can see why they have 40 members. There's financial and insurance companies like property, casualty insurance, financial advisor, commercial insurance, residential mortgages, commercial bank, Credit card and merchant services. All right. There's food and beverage, there's health and wellness, insurance, legal and accounting manufacturing. There's a chiropractor and a dentist. Residential real estate, property management, real estate inspector, security systems, trades, flooring, education services or tutor and a life coach. So those are all of the industries and specialties that are represented in this chapter. So we can see how certain specialties within this chapter would naturally be in each other's inner circle and regularly past business to one another, specifically for you, the B2B is really important, like the web design, the advertising and marketing, and the IT, they aren't providing those services relate to consumers. They're mostly providing those services to businesses. So they're regularly in conducting business with businesses. So they're in businesses, they're in their website, they're in their computer, and they naturally have opportunities to pass you business to improve their clients. What sites? So you would go through here, you would find one that's convenient for your schedule, find one that's convenient for the location, and then find one that doesn't have a web designer. If you can find all of those three, it checks all those boxes. Then you click Visit chapter and you can see if that's the right fit for you by visiting them for free and seeing if that meeting is something that you'd like to do. I do recommend shopping around a little bit. If there's a few that are within your schedule, your location, and don't have a web designer. If there's a few, then you might shop around and visit each of them and see which one fits your vibe because they all have a different culture. Some B and I gripped are really better than others. I think I have a fantastic one. And some come and go, but others have been around awhile. Be an AI chapter has been around for over 25 years. So that shows the strength and stability at the chapter. That's what you want to find. Find one that's around to stay. And there you will find success. But I highly recommend B and I give it a shot. Networking and referral marketing is the absolute best way to do business. So I wish you success in your b and I endeavors. So why does being I work so effectively? Because of trust? There is no cells tactic that outweighs building trust. People do business with those they know like and trust. And they trust the person who trusts you. Repeat, people do business with those they trust, and they trust the person who trust you. So if Mr. Johnson is bragging on you to Mr. Adams, mr. Adams just Mr. Johnson's recommendation. He will automatically subconsciously start off trusting you. Now it's on you to live up to those expectations. B and I also teach us the importance of networking in general. What does networking mean to you? Networking is building and nurturing relationships. So knowing a good realtors fun, knowing an insurance agent spine. But they don't naturally come across opportunities to pass through you business as a web designer. But photographers, content writers, marketing agencies, advertising firms, graphic designers, IT technicians. Those are amazing referral partners because they regularly work with businesses who have websites. And if they like you, they can really bring in some golden referrals. People do business with those whom they like. So be likable, meet people, make relationships, shake hands past business cards. But focus on the types of businesses in your network, like we just mentioned, build mutually beneficial relationships with businesses. You can pass referrals with the right referral source can be pure goal. And finally, what's the cost? What do you think b and I costs? As of 2020, the cost is essentially 500 bucks a year, 40 a month. And my sound like a lot at first, but hear me out. This is the best investment in your business you can make. And from a purely financial standpoint, that's only 40 bucks a month. I made that back after the second week of attending B and I when a dentist approach me to get on my website maintenance plan. Plus, what is this? $500 gets you in traditional advertising, a small magazine ad that runs once with B and I, you get a high-quality sales team for an entire year. And the return on investment is incredible. Each year, my income generated from being unrelated business bar exceeds at 500 dollar entry fee. So there you have it. Check out the local B9 chapters in your area, see if there's one that's the right fit for you. Join one that doesn't already have a web designer has a relatively high amount of members compared to others. Preferably members in the B2B or business to business, where they provide their services to businesses, not individuals. B9 may seem daunting at first, especially if you're an introvert. But I promise you referral, marketing and networking is the best investment you can make in your business. So to recap, what have we learned? We've discussed eight ideas on how you can earn clients. One, family and friends to warm calls, three, freelance sites for trade organizations. Five, SEO, Six, advertisers, seven, non-profits, and networking to referral marketing. Those A's suggestions simply be for new opportunities to earn your first client. What's our homework? I want you to start implementing those AIG is and check out V and I.com to see if there's a local chapter of urea. And if not, do a Google search for other networking organizations in your area, surely is that there's going to be at least that when I'm lazy. Now you know, how did we earn clients? 40. Interviewing Clients: Welcome. I'm Leighton, your webmaster. In today's lesson, let's discuss how to properly handle sales goals by interviewing the lions and to see if you're the right bit. So you'd started implementing the suggestions in the previous lesson and you landed some sales calls. So exciting. So how do you seal the deal, convert those sales calls into paying clients? Well, let's find out. We're going to discuss one, scheduling the coal to preparing for it. Three, the introduction for the conversation. Five, your prices and 6. The conclusion. This interview is so important, isn't an interview is your goal, just the land, the job at all costs? Not exactly. In fact, nowadays, I pass on a majority of work that comes my way. See, you don't just want clients. You want the right clients. The ones who will appreciate you, respect your expertise and pay on time. At first, you'll likely jump on any work that comes your way. And that's okay. But over time, try to be selective. Ultimately, this lesson is about interviewing clients. But please understand that you are interviewing potential clients as much as they are interviewing you to be their web designer. So let's get to it. First off, before the call even takes place, you need to schedule it. To understand the importance of this. Think. Do you like being caught off guard by lengthy conversation? If someone calls you at the peak of a busy day, are you going to give them your undivided attention? Get the business owners you're calling that same courtesy. If you're communicating via e-mail, WhatsApp, text message, facebook Messenger, instagram direct message, or whatever channel you are communicating through. And you're, you're looking to hop on the phone to further discuss the project. So schedule it at a time that's convenient for both you and the potential clients. Pick a day and time, put it on your calendar so you won't forget about seven and alert if you have two. And just in case the person you're calling isn't quite as organized as you work from the y's, send them a reminder, just a quick message reminding them that you'll be calling later today and you look forward to chatting. It's possible that they forgot and that friendly, unassuming reminder will be just what they need. So takeaway number 1, schedule the call and a mutually convenient time so you can have each other's undivided attention and shoot them a reminder before the call should take place. Second, once you've scheduled the coal, you need to prepare for it. How do you think you could prepare for a sales call with the business? Do you think it would be wise to review their current website if they have one? Yeah, that'd be a great starting point. Pull up their website, get familiar with it. Make a list of things that you think you could improve about it. Open up a note on your phone or a Word or Pages document and title it the name of the business and the website URL, if applicable. Using a service like GoDaddy.com slash who is who has done it or who is hosting this.com. You can even figure out where their domain is currently registered and who the host is. Very helpful tools. I want you to gather as much information as you can in advance so you can be thoroughly prepared by the time you have your phone conversation. Now that being said, let's spend too long on this prep work just in case you don't end up getting the client. So takeaway number 2, thoroughly prepare for yourselves coal by researching the business and their website. Number 3, you make the call and they answer, this is so exciting. So how do you start off? Well, how would you like to take a call if you'd like to get right to business, or do you make some small talk? Overall, most people would prefer that you'd be friendly, be human, be personable. Take a moment just to get to know one another. Greet them, exchange names, pleasantries, get another business before diving in and discussing the project and prices, put them at ease. So then what area you live in, how long you've been around, maybe toss out a hobby or two. This will go a long way to starting off the relationship on the right foot. Now everyone's different. Maybe wise to fill them out, discern when they're ready to start discussing the project. Because for some people's personality and tight schedule, their preference might be to get right the business. If so, that's fine. Go for, follow their lead. Really, the point is this, you just don't want someone to feel like just another sales coal, just another number. And you can you tell when someone's just trying to sell you something, how does that make you feel? Makes me feel used an unimportant to them. So takeaway number 3, when you first start the conversation, be authentic. And get to know one another before discussing their website design project. Number 4, it's time they get to business. When you're discussing website design project, what do you think your goal is? To offer your price and they convinced him to go with you? No, No, absolutely not. Your goal is to listen, listen, listen. By this point, you've gotten to know them. Now it's time to get to know their project to better understand the importance of this. Have you ever expressed yourself to someone close to you, a mate, a family member, a close friend. And they quickly assume your problem and offer a solution. How would you feel if their suggestions don't have anything to do with what you're actually going through or feeling. If they didn't really listen to your problem. And web design, it's really easy to assume a business's needs. I mean, they need a website, write a good looking one. Well, maybe what they're actually telling you is that they really want better search engine rankings or higher-quality leads or more exposure. See when you ask the right questions. When you identify their pain points, there'll be far more likely to pay for your personalized solutions to their problems. So listen, listen, listen. My tip to you is to open up and note a Word or Pages document and write everything they say. Nearly everything that DO you will come in handy at some point. Whether they're saying how long they'd been in business. They're accolades. Who their current webmaster is, what type of website they're looking for, goals. Were their domains registered where the site is hosted? I'll hear those bits of information in nearly every single cells call I have. And I write down at all and my file. So I don't look silly asking them to repeat those things. So in addition to listening to them express themselves, you need to ask the right questions. What do you think would be a good question to ask in an initial sounds interview? You might ask, do they currently have a website? If so, what's the purpose of them reaching out to you? What's their goals for this website? Whereas their website hosted where their emails hosted. We're sort of domain registered. What's their budget for this project? How did they hear about you? The list goes on, but those are some of the questions that I ask on every single cell is coal. So takeaway number 4. Listen, listen, listen, ask the right questions and take note of everything. Number 5, now that you've gotten a thorough understanding of their project, it's time to talk prices. Now we're actually going to talk about your prices in depth in the next lesson. But for this point, I want to offer you two suggestions for your call. First off, you could offer them a quote right then and there on the phone. Now I would only suggest this if you really understand the amount of work involved, you know your prices and you're willing to stick to them. The second suggestion is to say, we'll have a quote ready for you in the next couple of days. It's a good e-mail address for you. Most respectable business owners. They will put you on the spot right then and there to offer a concrete price. Might want a ballpark figure. And that's okay. You could give them a range, such as There'll be around $1000 or most websites run around two to $4 thousand. But if you do that, I want you to listen very carefully to the reaction. Whatever they say will give you insight into their budget. Most people in their shoes will go into the conversation having a general idea of how much they budgeted and they're willing to spend on the website. If your prices are far above and beyond that. That way they're abandoned the project altogether or find a more affordable designer. And that's okay. You value yourself, you value your time. You don't need to take every project that comes your way. But you can also take that opportunity to come down on your prices. Which is why I always Sue hi. Whenever I'd like to make, I add 20 percent to that. If they go for it, great, you make more money. Otherwise, if we need to negotiate the price down a bit, they may end up agreeing on exactly what you intended to charge in the first place. They feel like they got a good deal you when they, when everyone wins. So takeaway number 5, offered to review the project and email them a quote in the next few days. Listen closely to the response to your ballpark price. And number 6. Finally, how do you wrap up the conversation? Conventional sales wisdom says that there are two necessities to conclude the conversation. One, close the sale, to schedule a follow-up. Do you know what closing is for the website design conversation? It's a verbal statement that they'd like to hire you as a web designer. We love hearing that. Perhaps you did give them a price. They liked it. They are ready to move forward with the project. Or they just really enjoyed the conversation and they look forward to reviewing your quote. That's good. Either way, you kinda schedule follow-up. This is where you suggest that the conversation continue via email or you pick a day to chat again on the phone. Remember, people are busy. I mean, aren't you busy? I know I'm busy. Understand that the person you call is likely busy running their business. And without a follow-up, you might not ever hear from them again if you don't actively pursue that lead. Remember, silence doesn't mean that they've rejected your quote. Silence could simply mean they just got busy. But they actually did like your quote, and they're ready to move forward. You're reaching out to them and following up with them will remind them of that. And as a general reminder, a very humanity beat Curtius. Be pushy, salesy. Don't pressure anyone to hire you. People respect you when you respect them. Finally, now that you have a thorough knowledge of the project's scope, please understand that it's okay to decline a project. A respectable business owner would rather you be up front about that, then storing them along and wastes their time. If you do decline, think of another designer or firm that they could call one that might be a better fit for them. Be human, be helpful. Then we'll appreciate you steering them in the right direction, which is why it's incredibly valuable to network with fellow web designers. So takeaway number 6, close the deal. Scheduled follow-up. Don't be pushy and don't be afraid to decline projects. So to recap, there you have it. Let's review the six stages of interviewing clients to see if you're to the right bits. Number 1, schedule the call and a mutually convenient time so that you can have each other's undivided attention and shifted to remind you before the call should take place. Number 2, thoroughly prepare for yourselves. Call it by researching the business and your website. I'm referring to when you first start the conversation, be authentic. Person will get to know one another before discussing your website design projects. Or listen, listen for this. Ask the right questions and to take note of everything. Remember five offered to review the project and email them unquote in the next few days. Listening closely to the response to your bolt for any price. Number 6, close the deal, scheduled follow-up, and we'll be pushing and don't be afraid to decline. And what's our homework? I want you to make a template with all the questions you would like to ask on a typical sales call and get that document started so you'll be ready when a sales opportunity pops up. I'm Leighton and now you know how to interview clients. 41. Quoting Websites: Welcome. I'm Leighton, your webmaster. In today's lesson, let's discuss how to float your website project. So you've landed the cells called and you've gotten to know the business, and now it's time to talk prices. This can be both daunting and empowering. It's exciting to submit a quote and have it accepted. And even more exciting when that money hit your bank account, right? But how do you choose the right prices for your website design services? In this lesson, we'll consider one, some pricing philosophies. Two packages, Three, submitting quotes for time-saving tips, and five, following up on quotes. First, let's talk about the two fundamentally different pricing philosophies, hourly and project-based. Have you ever worked for an hourly wage? If so, then you're already familiar with this concept. You get paid a fixed amount based on the number of hours that you work. That's a standard pricing structure. The other option popular in design and construction, it's project-based pricing. This is where you submit a quote for the entire project, regardless of how many hours you'll spend on it. So which do you think is better? Hourly or project-based? Actually, I can even decide this for you. I've used both of them myself. There's benefits to each. So let's break down the pros and cons, starting with our daily, hourly, I think is fair. And hourly pricing structure is a foolproof way to get compensated for your time. You are paid for the hours you work. No more, no less. But consider this. You need to make sure you've prepped the business by estimating how many hours is project will take. Nobody nobody wants to sticker shock of your invoice after the project is over when it sounded like you would take five hours, but now you're building them for 15. You may very well have genuinely taken 15 hours. But do you think that business will call you next time they have a website project? Maybe not give them an idea in advance. And you might even give them a heads up throughout the project by telling them how many hours you've wrecked up so far. That would be a nice courtesy. Well, do you think a beautiful time tracking service that I use and love is toggle. We discussed toggle and the website updates lesson of the main website maintenance plan. If you're charging hourly, you need a quality time tracking service. And toggle is a foolproof one. And if you're charging now really, you need to figure out what your hourly rate is. What do you think would be an appropriate hourly rate? I also can't decide that for you, but I can tell you that around $75 an hour would be an industry standard price for website design and management services. That's what I charge and I've never had an issue with that rate. So depending on your experience, between 5595 would be an ideal hourly range. And the more you earn clients, the better you'll feel about finding the right price. So that's the hourly pricing structure which I use occasionally. But what about the more popular option, project-based? This is where you submit one price for the entire project. For example, you could offer a custom WordPress website, mobile friendliness, search engine optimization, and database setup for say, 1495. That's one price for the entire project. The client is clear on what they'll receive, the deliverables, the website, and you're clear on how much you'll make. Great. So what's to consider? Well, suppose you land a job for $1500, but the project takes you 50 hours to complete. That cash sounds exciting, but when all is said and done, you really only made $30 per hour. If that sounds good to you, then great. But I want you thinking in terms of value for your time. So when you take on a project, do you think it would be a good idea to estimate how many hours at project will take you. Well, how did you come up with that estimate? Experience really helps, but by knowing how much work is involved, making that sales call interview as thorough as possible. Let me put a different spin on our example. The $1500 design project. What if you hone your skills, doubled down, got a pot of coffee, and completed the entire project in five hours. I've delivered gorgeous polished production ready projects in just a few hours. So what's the value of your time then? 1500 divided by five hours, $300 an hour. What a difference? And yet the client doesn't know any better. Nor do they really care. I mean, they agreed to pay $1500 for that deliverable and they're happy with the results regardless of how much time it took you. So what does this encourage you to do? Well, I think the first time you'll try it, you try a new recipe. You'll spin far more the first time. Then the tenth time you make it, the more you make that recipe, the easier it becomes. Likewise, the more websites you build, the more efficient you become, and the quicker you can pump out a website, the more valuable your time will be. So takeaway number one, you can quote per hour or per project, but considered the scope of the project and the value of your time. Second, if you're going with project-based pricing, what do you charge? What do you think a website is worth? Again, I can't decide this for you, but I can give you some inspiration for your prices. First off, do you want fixed prices or do you want custom quotes? A custom quote is where you give a customized quote to everyone who reaches out to you. Sounds great at first. But the more quotes you send it out, the more you'll notice trends in your pricing. If you're giving similar prices to different businesses, why not make that into a fixed package or pricing tier? And if you have multiple price tiers, consider what differentiates them. Well, you have a one-page site, a standards brochure site, dear, an e-commerce site tier. What you require the commerce tier to be a custom quote. Will you charge per page, like a $150 per page? Will you charge extra for mobile friendliness? Well, you'd be charging extra for SEO where you cap the amount of pages included in your quote. I personally like to bundle all of these together to present one price for the best product. So perhaps you'll charge $495 for one page site, 1495 for a multi-page brochure site without to seven pages in 2995 for an e-commerce site. Another tip, ask their budget. You never know what a business is set aside for the marketing. If you're planning on quoting a $1000, but their budget for this project is 5000. Do you think there's an opportunity there? Let's say you ask her budget. Let's say they'd like to keep the project on their 5000. And you quote 2500, how do you feel? How does your client feel? You're a static because you got more money than you expected. And the client is equally as static because they got a website for half off. Everyone wins here. I love win-win scenarios because everyone goes home, happy. Achieve that. And you'll elevate yourself as an entrepreneur. One final note, when you're first starting out, you really don't have the experience or expertise to be charging higher rates. And that's okay. Have a growth mindset by gradually increasing your prices as you land more accounts. Once you're in higher demand, you will attract companies with higher budgets. Takeaway number two, you can offer set prices, tears and packages, or offer a custom quote on every project. Typical prices are in the 100 to $3 thousand range for a professional small business website. Third, once you've decided on your quote, it's time to submit it. Quotes are typically submitted by e-mail. In that email, you want to be as friendly and thorough as possible. There are several key elements to a quote. What comes to your mind when you think of what to put on a quote? Well, first, you'd like to reintroduce yourself, your name, your company name, and think then just for the opportunity to submit this quote. If you've been building websites for several years, you can include something like I've built several websites since 2017 and would love to help with your project. That one sentence gives you credibility and a willingness to work together. Next, offer your quote, which includes the services and the price. For example, you could say, your website like most, it would fall under our business package. Other packages we have include a one-page site, an e-commerce site, et cetera. This includes a custom WordPress Web Design up to seven pages. Mobile friendly site, search engine optimization or SEO, database setup, security optimizations and more. For only 1495, would that line you have expressed what you intend to offer and for what price. Next, you might clarify what WordPress is just in case someone doesn't know. For example, I recommend building the website on WordPress, so it will be easier for myself And you to manage going forward. Wordpress is the web's number one, CMS Content Management System. Next paragraph, offer your website maintenance plan. The key here is packing as much value as possible. You could say. The monthly website maintenance plan includes web hosting and support domain DNS management, e-mail hosting and support site updates, Analytics, Traffic Reports, google SEO monitoring, up-time monitoring, change detection, regular site backups, virus removal, security patches, customer support, and more. For only $75 a month plus tax. Your website will be in good hands. What about SSL? You could say. I also highly recommend an SSL security certificate which secures your website and boost customer trust and search engine placement. Installing and SSL certificates avoids the red not secure label next to your website address in your browser and replaces it with the green secure padlock icon. I can purchase and set up an SSL certificate for as low as $49 a year. These used to be several hundreds of dollars, but have come down significantly since nearly everybody needs one. And what does the business need to do once you're ready to move forward? I'm wondering. You might say, I do accept credit cards for your convenience. I required the standard 50 percent down balanced due upon completion and launch of the website. If you are interested in moving forward, I'll send an invoice and draft up a simple agreement for your review. Now we'll talk more about the invoice and the agreement in the next lessons. Finally, I'd like to end my quote email by linking to my website, my portfolio, my reviews and lists, some of my favorite projects. And that's it. Review the e-mail, make changes as necessary and hit Send. So takeaway number 3, your quote email should clearly state your services and prices, explanations of unfamiliar terms. An invitation to move forward with the project forth. These quotes can take several hours to prepare. There's a time-saving opportunity. There always is. Instead of reinventing the wheel every time you send a quick email, why not create, craft the perfect email and save it as a template. Save it in your notes or documents, or create a template in your Outlook. I have mine saved in my notes. So every new quote is just a copy and paste of those carefully worded, expertly crafted paragraphs. Then change the name Boson to be the price. That's about it. Quotes now took me about three minutes instead of three hours. Create a process for your quotes. Simplify that process by automating it with a quick copy and paste of your master template. You'll save time and all your quotes will look professional since you worked so hard on that initial template. You can refine that template over time. But for the most part, in a work as a backbone for most projects. Check the resources section of this lesson for my quote template. Takeaway number 4. Save time by creating a process for your quotes. Simplify and automate this process by developing a well-prepared template and use it as a basis for most quote e-mails. Finally, after the quote is submitted, what do you do next? Do you just sit around and wait for a response? Well, first off, it's common to shoot them a quick text message such as FYI, your web design quote has been emailed to name at gmail.com. Thanks for the opportunity. This accomplishes two things. What do you think the benefit of that is? For one, it keeps the dialogue open. That's a common sales technique. Second, on the off chance that they honestly didn't receive the quote or a went to their spam, you can resend it through another method. But if you didn't reach out, they might never know you sent it. I also recommend keeping a list of all of the quotes you send out. Whether you use your notes app, you've Reminders app a Word or Pages, document, Excel or Numbers, spreadsheet, whatever you use productivity software, keep track of your quotes. I stress that again. Keep track of every quote you send out, lists, the person's name, e-mail, the price, the services, that date of the quote and method of sending it. After a few months. If you haven't heard back and you're actively looking for work, go down the list of everyone you've quoted. Just a great way to drum up business. Perhaps somebody really did want to use you, but they just got busy. And that's fun. Things happen. People are busy. You are busy too, I'm sure. But you following up with them is a nice reminder for them to get motivated and start that project. Takeaway number 5, send the message acknowledging the quote has been emailed and keep track of all the quotes you send out. Now to recap, there you go, six steps and considerations when quoting a website project. Let's review the main points. Number 1, you can quote per hour or per project, but considered the scope of the project and the value of your time. You can offer set prices, tears were packages, or offer a custom quote on every project. Typical prices are in the one to $3 thousand range for a professional small business website. Third, your quote, email should clearly state your services and prices, explanations of unfamiliar terms, and an invitation to move forward with the project. Save time by creating a process for your clothes. Simplify and automate this process by developing a well-prepared template and use it as a basis for most quote. Fifth, send a message acknowledging the quote has been emailed to keep track of all the quotes you've sent out. And what's our homework? I want you to download the quote e-mail template in the resources section of this lesson and personalize it to your business. The next, and create a running list of all quotes you'll send. I'm Leighton, and now you know how to quote a website. 42. Proposals & Contracts: Welcome, I'm Leighton, your webmaster. And today's lesson, let's discuss two important documents to send to your clients when taking on new work. I'm talking about proposals and contracts. These documents make you look more professional, more polished, and ultimately encourage higher value clients. I'm sharing this document templates in the resources section of this lesson. So be sure to do your homework by downloading them to your computer. First, proposals that impress. So you might be thinking, isn't that the quote? Is that what you're thinking? Because if so, you're correct, sort of proposals act as quotes. But in this case, I'm introducing you to the number 1 best advice I can give you to landing higher value projects. It is all in the proposal. Email based quotes will land you one maybe $2 thousand projects. But a well-written, value packed proposal will help earning 510 $15 thousand clients. If you ever come across a clickbait article promising to help you land $10 thousand plus web design clients. The probably referring to a killer proposal. Let me show you what I'm referring to with an example of one of my very own IT team page proposals I attached to a quote email for our business. Here's my proposal to redesign the website for a and W compressor. They do compressor maintenance, repairs, sales, and service. So let's look at this 15 page proposal and see what's all included here. We start out with our logo, pioneer media, that's my company. And then the website proposal and the name of the company. And we're preparing it for the name of the person in particular that we're preparing it for, and then prepared by your name, snapshot. So this is where we give an overview of the situation. They offer a compressive or comprehensive air compressor sales and service and Knoxville and thrill Tennessee. They've approached pioneer media for a complete revamp of their website as well as hosting and maintenance. And we propose redesigning a W compressor.com desktop and mobile site, optimizing the site for search engines, adding chat functionality and setting up the WordPress content management system. Now all of this came from our initial sales interview where I had a conversation with them and figured out what they were interested in. They mentioned the chat functionality, they mentioned the nest, then necessity to have it mobile-friendly that haven't rank well in the search engines. And they were interested in WordPress. So I'm putting all that in writing. All right, Next Page, who was pioneer media? This is where I describe myself a little bit. This is my copy and paste from my About Us page where I explain who I am and a link to a YouTube video where I introduce myself. Here's a screenshot from my Google listing where you can see that I have 83 reviews at the time of this screenshot was created in the next page. Why a redesign? So why are we redesigning the website? The owners of a and W compressor recognized the current website is dated and needs a refresh the contents well-written, but the design could use improvement. We proposed considering this other website which they mentioned, the sales interview for design inspiration. That website has a clean Incorporate design, which is what they're looking for. We also propose adding chat box functionality so potential customers can instantly chat with a live cells associate. Finally, we weren't sure every page is optimized for search engines, especially as a NW expands to new markets, which is something they mentioned in the interview. So that's why we propose redesigning the website. Now why choose WordPress? Wordpress is the world's number one most popular and favorite CMS content management system. It is used by over 33% of all websites on the Internet. Websites built with a CMS or easily updated through an administrative backend. Wordpress focuses on stability and security. It is community driven and easily extensible through thousands of plugins. The core WordPress software regularly updates to retain tight security. It is a mature and stable product that focuses on user experience and upholding web standards. So that's why we're, we're proposing using WordPress as the backend of the website. After the redesign and further considerations, this is where you put your plug-in for the website maintenance plan. Successful websites are those that continue to attract the right type of visitors and lead them down a path towards becoming a customer. This requires consistent content, publishing, and monitoring of the website to make sure it is achieving its objectives. Once a and W compressor redesign is published, there's still more to do. Our website care service ensures your website stays live, secure, backed up, and up-to-date. Clients on our website care service plan. Same-day customer support via phone, text, or email. Here are 16 reasons why a and W compressor needs pioneer media's website care service. So that's an intro to website maintenance plans. And then below are 16 reasons why they need a website maintenance. Now they're little bit personalized, but for the most part is just a copy and paste on most proposals. But I do personalize a little bit. For example, the domain in their cases registered AT network solutions. So I said you may opt to keep your domain registered at Nowhere solutions, but there's no extra charge to transfer it to us. So some of these I have personalized for this client and you'll know where you have opportunities to do that as you review your proposal for each client. So we have e-mail hosting, up-time monitoring backups, security updates, search engine optimization, local listings, SSL, geo redundancy, virus removal, site updates. And that's where I include the additional support is 75 and hour and two hours of support are included per month for free. Support, blog analytics and performance optimizations. So this is a lot to right the first time around. But for each client thereafter, you already have a base. You got your template, and it just takes a few minutes to personalize this for the specific client that you're sending the proposal two, all right. Now to the money project's timeline and the quote, how long will these redesigns take? We propose the following timeline, preparation, design, and launch. We propose two weeks to gather together the domain name, the page edits, logo files, design suggestions, new photographs, et cetera. Most of this work falls in the hands of a and W compressor design for weeks. Now that everything has been done in the prep stage, pioneer media can get to work. We will redesign and develop a beautiful, high-quality website based on the deliverables agreed upon by both parties. And finally launched two weeks final edits and revisions proposed by a and W and fulfilled by Pioneer media. Once the website is ready, we will launch it, which includes a number of operations to make it ready for the public and submit the new site to search engines. So we propose two weeks to launch the website, which gives us a total of eight weeks, only two months for this project. So what's the investment? Design and develop a and W compressor website, $5,800. This includes brainstorm, plan, design and develop and polish a beautiful functional new website up to 40 pages, a $100 for each additional page. It includes hosting, database setup and installation, WordPress setup, mobile-friendly responsive design, SEO, security and performance optimizations. So that's what's included in the 5800. In addition to what you see down here, chat-box $0, mobile friendly responsive site, $0, Search Engine Optimization $0, security and performance also $0. So this is just expounding on what was mentioned in the 5800 here. But it just builds value the more we add and they see the $0 price tag. And I think, wow, I'm getting all that included in the initial quote. So that's amazing. I like to bundle it together, pack as much value as possible as they read through this section of the proposal. Ssl security certificate, also $0. I'm including that in the website care service, one hour of setup for free. This improves the website security, trust and SEO. This bundled SSL certificate auto renews each year, and then the website care service, a $195 per month plus tax invoice on the first of each month. The monthly website care service includes those 16 services we talked about above. Each additional hour is built at 75 dollars per hour. Two hours are included each month. Website care services much more than a retainer. It is a valuable service to ensure your website stays live, optimized, and ready for business. So the project totals by $1995. But once we include the website care service, a $195 times 12 months comes to $2340. When we add that to the 5995, that's $8,335 will have been made after the first year. So you can see that that's a high dollar quote, much more than just simply a $1000 for a small business website. What do we have as we continue to scroll, I've included some frequently asked questions. What do you need from us to get started 50% down 50 percent on completion. And here's the getting started guide. Can you give me on page one of Google, basically there's no guarantees, but we'll try our best. Why choose WordPress? Wordpress is a world-famous content management system. It is mature and secure. And you'll have your login as well as we'll have a login. How many websites have you built? We've designed and developed hundreds of websites since 2006 with links to the portfolio and testimonials. So what's your best work? These are some of the top projects I like to include, especially if there's one that fits the industry of the company, we're sending the proposal 2. And finally, I embed some testimonials here. So I've got four hand chosen testimonials. And there you have it. That's a 15 page proposal, value packed and ready for these larger businesses because this looks very professional and allows us to quote a lot higher than if we just simply e-mailed them a price. So what I do is export this to a PDF. This is a pages document or you can use Word, but then you need to export it into PDF format, which is what we're looking at now. And that is what you attach to your quote, e-mail with a simple message like please see the attached proposal. I'm including a simplified version as a template for you so that you can personalize this and make it your own. So enjoy that downloaded from the resources section of this lesson. So what was your impression of that proposal? When it did suggest about the person who prepared it? If you owned a successful business and had a decent marketing budget with that proposal and impress you. What is it about the proposal? That's impressive. Well, first off, the amount of content, 15 pages worth of content, that tells the client, you put a lot of thought into this. Next, the professionalism. It's not a friendly, informal email. It's a professional, polished, high-end PDF document that you can even print and bind if you prefer. Finally, the content is packed with value. I break down every bit of the initial design quote, as well as the abundance of value. Website care service. I've had several of these proposals accepted and this is the number one best way to double, triple or even quadruple your quotes in for you. I am sharing this template in the resources section of this lesson, I have a template that you can personalize for your business. When you're ready to prepare one for a client, make a copy of the template, input the pertinent information, export it as a PDF and attach it in an email as your quote. You'll thank me later. Takeaway number 1, proposals I impress or the absolute best way to increase your prices and land higher value clients. And second, contracts that clarify, contracts aren't always the most fun conversation. I mean, as a consumer, do you like contracts? Probably not. I don't either. Based on that response, what opportunity do you think you have as a business owner to make your contract as enjoyable and least stressful as possible. Now first off, you should know that your contract is optional. Plenty of web designer serve clients well to contract and that's fine. I didn't have one for years. Then as my business grew and grew into a contract. To be clear, as of today, no one has ever fought me or sued me to the point where my contract was enforced or contested. Hopefully, you and I never have to go through that. Beside point. That's why we bet an interview clients thoroughly before taking them on. Anyways, with all that being said, what's the point of a contract if we aren't in court and don't intend to get in court, can you think of any reasons why this would come in handy? Let me put it this way. A contract states the terms of your agreement. It clearly defines what you intend to do, for what price your payment terms, cancellation policy, and maintenance plan expectations. Why might that be helpful? You guessed it to set expectations and clear up any misunderstandings about your services. Once they've read your agreement and sign your name to it, they know exactly what to expect and they can't later say, Well, I didn't know that it would be sales tax or I didn't know you'd be putting my portfolio my website on your portfolio or why isn't my side on page 1 or why isn't it bringing in any leads? Well, in the contract clearly stated that we aren't responsible for email and traffic aside gets we don't guarantee any rankings, et cetera. C, right. That clear right out the gate. So what's involved in your contract? Let me teach you by showing you mine. And here's my contacts. I clarified template. This is my company name, pioneer media. And the title agreement, clear policy and terms related to this website design and development project. This agreement is by between pioneer media, a Knoxville, Tennessee. So proprietorship hereinafter referred to as party of the first part. And and and this is where you would put their company name. Type in their name here and after referred to as party of the second part or client witness, that first party is in the business of providing and this is an overview of your services. So let's say we're providing website design development and we're taking them on as a client. So hosting and maintenance, second party desires to utilize those services offered by first-party on a continual basis for a fee as further noted here in so these are legal terms, but it basically means this is what we're providing. Therefore, in consideration of the above named promises and following promises, be it resolved and agreed upon to it that first party will provide to second party the following services for the fees noted here in so this is the onetime charge for building the website and this is the ongoing maintenance contract charge. So let's say the services for this client is e-commerce. Website design plus mobile plus SEO. Take out some of these lines, and there we go. And for this project, let's say the total rate plus tx is 2495. Alright. So they're agreeing to pay this or the services and the ongoing maintenance contract, second party desires to enter into agreement here and noted on a continual basis for a fee of, let's say, 75 dollars per month plus local tea and sales tax rate of 9.75% payable in US dollars on the first day of each month. Net 30, which means they have the whole month to pay it. For the term of this agreement, which is continual. This fee is referred to as website care service. Getting started. So here I have getting started hosting ongoing maintenance, payment terms, ownership cancellation, indemnify, and hold harmless, and conclusion. So let's look at this project is estimated to take between 26 weeks to complete, depending on how soon the client sends pioneer media everything to get started. So if we're eight weeks into the project and isn't moving very fast, maybe the issue is they haven't sent us what we need. So that's why I add depending how soon the client sends us what we need to get started. It's wise to add typical requirements to get started. Domain logo color scheme, ideas, requests a page's content, login to the hosting provider, et cetera. Any stock photography, $10 per asset, and SSL certificate, $50 per year. Expenses are built to the client, not pioneer media. So that would be an extra expense. Hosting unless explicitly requested, domain name will be registered and hosted with pioneer medias web server. Client already has a domain name. It will be transferred to pioneer medias web server unless explicitly requested to remain under clients hosting account. We can host it unless they say otherwise. If service with pioneer media is ever canceled in the future, domain names will be promptly transferred to client that they can cancel without repercussions. The who is contact information is registered privately. Now, ongoing maintenance. What are the terms for the ongoing maintenance understandings? Do we have about this service? Website care services, a monthly maintenance contract that includes hosting, management, analytics, tracking, SEO monitoring, site updates, security updates, backups, and up-time monitoring. This is an important one. Seo results in ranking are never guaranteed. So if they don't break on page one, they can't sue you and say you guaranteed we'd be on page one. We'll know we're doing our best, but we don't have complete control over that. Website care service begins the month following the launch of the new website. Or web hosting begins on Pioneer media servers, whichever comes first. So it would seem natural to start the website care service after you've launched a website. But what if this is a project that takes a whole year and they never really declare it done. Well, we need to get paid as long as the domain is on our server and the website is live for the public, we deserve to be paid for our website care service. Updates may be requested via text or email or phone. Update requests are typically fulfilled in four to 48 hours. Basic analytics reports or emailed on the first of each month, detailed analytics reports available upon request. That's if you used a Google Analytics auto send reports feature. Most of the services provided on a monthly basis take place on the backend of the site and without notification to client. Therefore, the front end of the website itself will remain relatively unchanged. So if after a year the client says, Well, what have you done? I don't see anything different on the website. This explains that a lot of what we've done is on the backend, even though the front and hasn't really changed, the backend has stayed live, state updated, we'd perform the software updates and we haven't backed up, even though that doesn't really affect the front end at the website. Emails will be sent for invoices, analytics reports and occasional newsletters and notifications. Unsubscribe links are included at the footer of every e-mail. Pioneer media does not provide marketing services beyond website development and search engine optimization and is not responsible for the amount of traffic to a website receives. Pioneer media can refer a client to capable small business marketing specialists. So they paid all this money for a website, getting leads from it. They don't get any traffic. That's because they're not promoting it. They're not doing anything to direct traffic. They're not putting any ad dollars into the website, and they just expect the website to generate traffic on its own. Well, we're not really responsible for that and we don't provide paid advertising services, but we can refer you to a specialist for that. New website pages and major redesigns will be tracked and build at an hourly rate of $75. So if they want a totally new website or they want to add some major new pages, that's okay. But there'll be surprised that we have an hourly rate for that and it's not included in the monthly cost. Payment terms. 50 percent down payment required to get started by no 50 percent balanced due upon completion of project or net 60, whichever comes first. So let's say you're two months down the road and you're still working on the website. But eventually you deserve to get paid. So net 60 means 60 days after the down payment was made, the final balance is due. Because at that point is not really your fault. If you've been cooperative and you've been responsive, it's them dragging their butt and you deserve to be paid for the website. You can continue to work on it, but you need to balance before you continue. Website launches, after balances paid. So the websites ready to go but they haven't made the final payment. Well, it's not going to launch until they make that payment. Accepted payment forms. You accept cash, check, credit card, trade bank. You can update this with which payment forms that you accept. Trade bank gladly accepted on the website designed labor but not the website care service. Credit card charges encouraged to 0.9% processing fee. Both labor and website care service includes 9.7 75 percent T in sales tax. Automatic credit card charge subscription offered for convenience and charged on the first of each month. So they won't be surprised when that charge comes through. Once I care service invoices will be e-mailed to the client on the first of each month. So they understand when they're going to be getting that built. No refunds offered for downpayment, final balance or website care service. So I don't offer refunds whatsoever because usually after they've paid, I've already done a little bit of Labor, prep the server, sort of building the website. So no refunds, ownership. So who owns the website? This is very important. Some web design companies hold their websites hostage by claiming that they own the content. But what do I say? Website files and database are hosted with pioneer media, but the client owns the website once the website is paid in full in agreement with the contract. So client owns the website is the important part here. Files are stored locally on Pioneer media is computers and regularly backed up to six destinations. That would be I own is Google Drive, my computer, my external hard drive time machine, et cetera. By new media reserves the right to display and link to completed project and a portfolio. Cancellation. This happens every now and then and that's okay. Here's the terms. Website maintenance service may be canceled at any time after six months following launch of sight. Cancellation before six months have passed requires remaining months website care service do upon cancellation of service. Website files and database will be e-mailed to the client if requested. Domain will be transferred to the client if requested, what do I care? Service will not be invoiced anymore unless the service is reinstated. Refunds are not offered for current or past months website care service. And either party may terminate this contract at anytime through written request. Client shall upon termination, pay pioneer media all unpaid amounts due for services completed prior to notice of termination. No refunds will be given for payments already made by client. Now this is an important one. Indemnify and hold harmless. This is a standard legal term to Let's read about it. Second party agrees to indemnify, save, and hold harmless pioneer media from any and all damages, losses, lawsuits, expenses, costs, or attorney fees that might arise as a result of claim or action by third party. This includes, but is not limited to any action, involves hacking or other malicious activity by a third party resulting in damage to a client's website, reputation, goodwill, or revenue. What does that all mean in simple terms, if your website is hacked, it's not our fault. Would do everything in our power to rectify the situation, but we are not responsible for any damages or actions that may occur. So sites do get hacked, but you can't take your web designer to court over that. We're going to be as cooperative as possible to clean up the hack and harden it against future hacks. But you can't sue us for that. Conclusion. This agreement is the entire agreement. No other terms of this agreement written or verbal exist and disagreement terms may only be changed by written agreement superseding this meant signed by both parties here, do should they be part of this agreement be deemed unenforceable? Such parts are not affect any other part of this agreement. Alright. This agreement shall be governed by the laws of the state of Tennessee, which is my local area where I do business, witness this. And that's when you put the day of month and then the month and then the year. First-party, this is where you put your company name and your name and the current date. And then you put their company name, the representative that you're sending this to, and then they'll put their signature, they'll put their date on a Mac. You can save this as a PDF, and then you can add your signature through the preview app on Adobe Reader, on Windows or on peace, on PC, Windows or Mac, you can add a signature by going to Tools and signature to sign a document. There's plenty of modern solutions for that nowadays. And you shouldn't have to pay for any extra software just as signed a document. So that makes it really convenient to sign documents on the fly without having to print this out and scan it. So this is my contracts that clarified template. I'm going to put this in the resources section so you can download and personalized for yourself, enjoy. So what do you think? Not too scary, right? I tried really hard to make it easy to read and as friendly as possible, yet still legally binding. I did consult with an attorney on creating this. Still, I only present these to clients who are signing up from a website care service and are therefore establishing a long-term relationship. I don't do this for them one and done clients. And that's for you. I am sharing with you might template in the resources section of this lesson, I have a contract template that you can personalize for your business. When you're ready to prepare one for a client, make a copy of the template, input department information, export as a PDF and attach it along with your proposal and consult with an attorney or lawyer if you need additional support on this takeaway number two, contracts that clarify, we'll set the expectations for your long-term relationship with a client. And now, to recap, what did we learn about these two documents? First, proposals I impress are the absolute best way to increase your prices and land higher value clients. In seconds contracts, I clarify, we'll set the expectations for your long-term relationship with the clients. And what's our homework? I want you to download the proposal and agreements and floods in the resources section of this lesson. Personalize them for your business. I'm Leighton, and now you know how to send proposals and contracts. 43. Invoices & Taxes: Welcome. I'm late to your webmaster in today's lesson and let's discuss the financial aspect and serving clients invoices and taxes. Collecting money can be an exciting part of running a business. But have you ever sent an invoice before? Maybe you're thinking lately, I've been using QuickBooks for years. I know how to invoice people. But for those of you who aren't familiar with them voicing, I'm going to introduce you to one of the greatest free services I have ever come across Wave. Have you heard of wave WAV? I've been using wave for years and I researched invoicing software extensively before settling on this one. Most author like this averages 20 to $30 per month. But did you hear how much weight costs? Yeah. You heard right. It's very they're invoicing and accounting services are completely free. The payment processing is just the standard, 2.9% plus 30 cents per charge. And their payroll services or extra, what you won't really need those. But there are core invoicing software is very now does free mean they aren't as good as the paid invoicing services like QuickBooks, FreshBooks. Well, what features would you like to see in an invoicing solution? Maybe recurring invoices, recurring billing, customer statements, reminders, credit card processing, bank payments, receipts scanning, double entry accounting. Wave has every single one of those features. You can even set up your monthly maintenance clients on auto pay and wave will automatically charge of their credit card on file and deposit the funds in your bank account in two days. Isn't that amazing? In that a huge time-saver. Imagine how much time you could spend manually charging every credit card for every client, every month. But with auto pay, wave, does all that work for you? Let me go ahead and show you what wave is all about. Here we are on wave apps.com, the homepage for wave. So let's see what they're all about. The better way to make, move and manage your money. Every wave product you use brings you closer to a complete picture of financial success. So they offer accounting software that worked as hard as you do. They offer professional invoices, create professional invoices for free. Every invoice paid is positive incoming revenue for your business. Waves invoice software enables you to easily create and send professional invoices with advanced features like recurring billing and automatic payments, which are amazing for freelance web designer like you. Payment solutions for your business get paid as fast as two business days, enhance your brand and look more professional as, as you enable payments by wave, accept credit cards and big payments on your invoices for as little as 1% per transaction, 1% for bank payments and dew, 0.9% for credit cards. This is an amazing feature and a huge time-saver when people can go on and make a payment themselves, instead of you having to manually charge each person's credit card. So that is awesome. Simplify your payroll experience. We don't need to worry about that since we do not have employees who create your free Wave account. Before we do this, let's confirm something on the pricing page. There's three sections here for accounting as free, invoicing is free and receipts are free. No setup fees, no hidden charges, no monthly fee. And I can certainly attest to this. Pay per use payments. Credit card processing is 2.9% plus 30 cents per Swain. This is completely normal. This is the industry standard. It's a little high, but still it's the industry standard. Paypal stripe. All of the major credit card processors are going to charge that amount per transaction. Well, that's normal. And bank payments 1% per transaction. And then payroll is a paid add-on, thirty-five dollars per month based fee. And the self-service states $20 monthly basis B. But again, that's payroll, That's when you have employees, which we do not. So let's see what else is offered here. Accounting software, invoicing. Here's some of the features that we talked about. Unlimited and voicing, send as many as you'd like, except credit card and bank payments, right in the invoice, recurring billing, which is great for your maintenance plan. Reminders and sync your invoices and accounting. They offer receipt scanning so you can upload receipts. And they offer payments, get paid in two business days. Customers pay by any major credit card right from your invoice. So that's amazing. Let's log into my account and we'll see what the dashboard looks like. So here we are on the new invoice section. This is where we go to create an invoice. And we got here by going to sales on the left and then invoices. Wave has a section for estimates and quotes invoices which gives you a list of all of your paid and unpaid invoices that you've sent out to your clients, recurring invoices like the maintenance plan and the monthly and annual invoices that you'll send out. Checkouts, payments, which are the payments made on your invoices, customer statements, which is where you can send a client a statement of all of their paid and outstanding invoices. Customers, which lists all the customers you've added to your Wave account. Products and services, which would be like your website maintenance plan will take care service, What's a design? Any predefined products and services that you regularly add to your invoices. You can save time by adding that into your wave purchases. I'd like to go to receipts. And you can upload receipts using the Wave app on your mobile device and it will upload right here to receipts, accounting features, banking payouts shows the recent credit card payments that have been made and the payout do your bank payroll, which we'll ignore because we don't have any employees. And then reports, which gives you some nice monthly and annual reports that you can take advantage of. So new invoice. So at the top we have our logo. In my case, it's pioneer median. We have a tidal invoice. You can do a quick summary. I've got my return address and payment information and or they can send a check payment PO Box, got my mobile phone number and a link to my website. Then under add a customer, we can click that. All right, we have an invoice number which is automatically calculated every time we add a new invoice, we've got the current invoice date and then the due date, which is typically within 30 days. You can change that to on receipt within 15 days, 30, 45, 60, and 90 days. And then we go to the meat of the invoice. This is where we add an item. So let's say we're invoicing someone for a website and we want to say e-commerce, website design, mobile friendly, responsive site, search engine optimization, WordPress setup, database setup. There we go. We can do quantity 1 and then the price, the amount that we're charging for that particular service. We can change this from quantity to ours by clicking Edit columns and changing it to hours. The units, hours, and the price, change it to rate. And in that case, we can charge them for how many hours we worked on something like, let's say we spent ten hours on a project at 75 and our u would be billing them for $750. Now, what's added on top of that, I have two different taxes that I've added here. Sales tax, which in my local area is 9.75, that's automatically calculated. And credit card at 3%, that's automatically calculated as well. So the base subtotal would be this amount and then these are added to it. Now this is not going to land in your BankAccount. Wave takes that and then this woolen and your BankAccount. But at the end of each month, I remit that to my local states Revenue site. So that's going to leave the BankAccount after a month anyways. So I've total sales tax and credit card and then the total that the client will have to pay. At the bottom, you can have some Terms and concluding statements. Thank you. We really appreciate your business. 2.9% Tn sales tax is required to be collected, please, and payment within 30 days of receiving this invoice. And now I add so we can get started on your project. You may pay securely online with credit card payment or by sending a check to the address above. Save money, pay by check. So I just add that to say, if they don't like the credit card B, they don't want to pay that. That's fine. Don't pay it. Just put a check in the mail. The credit card fee is basically for convenience and most people don't mind that and they expect it when they're making an online payment. Best regards latent Smith. Under the footer, you can have a bottom statement. You have any issues or questions regarding your website, please feel free to email or give us a call at anytime. Your satisfaction is our number one concern, then you can click Save and Continue, and that will save the invoice and you can send it to your customer. Let's go ahead and click that. Now. All right. So this takes us to the invoice page. The invoice has been created, it's in draft. This is the amount due and this is the due date, 30 months from the date that this was created. The next step is to approve of the draft or edit it, which takes us back to the previous page. Let's click Approve draft. Then we have some options to send it. We can send it via email and attach a PDF invoice. Or we can skip sending if we want to send it manually. And there's scheduled reminders. So you can have a reminder set for the due date. And let's say 14 days afterwards. This is a friendly e-mail and just says I as a reminder, you've got this invoice out and here's a link to pay. It. Skips sending. Let's do that for now. Send invoice, you skipped it, send invoice mark as cent. So let's say we said to ourselves manually you can click markets sent and then get paid. So you have two options here. Which allows you to enter your customers credit card number and submit the payment. And there's a box here to save the card for future payments. Or you can record a payment manually, which would be a bank payment, cash, credit card, PayPal or other. So most commonly let's say somebody writes out a check. So you type check and then you into what it was for website design. I like to put that in the MIMO. And there you go, you hit submit, and that's it. Then the payment will be made. The invoices look very professional and we can edit them by going down here to settings in the bottom left corner of wave, we can go to settings and change the look of the invoices, change the color to Pitt our branding. There's a lot of different things you can customize in there. I recommend clicking Settings and going through every one of those areas to personalize that for your business. Finally, let's look at recurring invoices and I'll show you how to create a recurring invoice. Create recurring invoice. Let's put our customer in and say This is for our maintenance plan. So in my case, that's called a website care service. I've already got the amount predefined here, 95 plus L6 plus credit card. Beautiful. And we'll click Save and Continue. So on this screen, it's similar to the previous one, but we have a few extra options, set schedule. So let's say we're adding them to our maintenance plan and this is a client, we're going to charge them on the first of each month. Repeat this invoice monthly. I like all of mine to go out on the first of every month. So there we go. First, create the first invoice on the next first of the month, and then end. Never. Click Next. Automatic payments. This is where you can select your clients credit card that's already saved to the account. Very helpful. Otherwise, if they don't already have a credit card on file, there will be a box where they can enter their own credit card information and check their own save this court for future purchases box. So way takes care of all of that and handles it all for you. Otherwise, there's a manual payments box. Your customer will have to pay each invoice manually. And you can select this box that says allow my customer to pay each invoice via credit card or bank payment, which gives them the option to make a credit card payment. Otherwise they'll just be able to view it and put a check in the mail. So we click next and finally, send automatic sending or manual sending, automatic sending. We'll let you email this to your customer. It will automatically send that on the first of each month based on these terms that we set up here, repeated monthly on the first, so on the first wave is automatically going to handle that for you. So if we've configured properly, then you can automatically send your invoice on the first of each month and they can pay it on the spot. Or if they've checked the saved this card for future purchases box, then it will automatically charged them and instead of sending an invoice, there'll be sent a receipt. Otherwise, if they prefer to put a check in the mail, no. Get their invoice on the first of each month and they can manually put the check in the mail, you'll receive it, and you can submit the payment through your Wave account. So either way, this really is a huge time-saver. It's much, much better than having to manually create an invoice and send it to each client. So get familiar with wave, set up your invoices and your recurring invoices. And if you have this configured properly, it can be a huge time saver, especially if your clients are okay putting their credit card on file and having their payments automatically made on the 1st of each month. In that case, the first of each month is very exciting and you'll see what I mean when you start having some of your clients on autopay. So enjoy wave, It's a beautiful free service and I'm so happy that I discovered it. I'm so happy to share it with you. So now that you're all ready with your invoicing software, let's say you are in a client, you've agreed on a price. They accepted, they're ready to move forward with the project. What next? Well, you would start by sending them an invoice for the entire amount quoted along with a message such as, we require half down so we can get started then the balance is due upon completion of the website. So basically that the percent down to deeper sampling the website launches. Now down refers to down-payment, which is the initial payment. So you can start the project. Keep this in mind as a business tip. Do not start building their website until you have that downpayment. The client making the initial payment will prove that they are both serious and ready. So send the invoice, collect 50 percent down payment by check or credit card or bank payment, and get started. Takeaway number one, wave is a fantastic free invoicing service for you to charge your clients per project and per month. Next up, your DBA. Have you heard of a DBA? Do you know what that stands for? We talked about it very briefly. It means doing business. As for this purpose, the DBA is basically your company name. In my case, my name is latent Smith, but my DBA and my firm's name, It's pioneer media. So what's the purpose of a DBA? Well, if somebody writes a payment to pioneer media, I can deposit it or cash it only if the DBA is on file with my bank account, which it is. If you don't give the DBA to your bank, you will have to be paid in your personal name. Make it easier on your clients and look more professional by updating your checking account with your DBA or open up a business checking separately. Takeaway number 2, update your bank account with your business name as your DBA so you can deposit money paid to your company. Third, you need to have a business license. If you've heard of a plumbing license, an electrical license, a real estate license, those are very important and essential to legally conduct business in those fields. So does this mean There's a license to be a web designer? Would have you heard there is no such thing. You don't need to get licensed or certified as a web designer. Experience and knowledge will suffice. But you do need a business license. This is different from a trade license, like the examples we just mentioned. A business license basically means you are legally allowed to conduct business and you're counting. These applied to every industry. The very easy to obtain. And my recommendation is to call up your local county clerk. There's super helpful, especially to new businesses. And I'll point you in the right direction. Again, these are really easy to obtain and you kinda got it. You have to do is take away number three, register for a business license at your local county clerk so you can legally conduct business in your area. And number 4, tax obligations, starting with the business tax, I start with business texts because it comes along with registering for a business license. In fact, here's a direct quote from Tennessee's official TEN.gov website. Generally, if you conduct business within any county and or incorporated municipality into the sea, then you should register for and remit business tax. Business tax consists of two separate taxes. The state business tax in the city business tax, with a few exceptions, all businesses that sell goods or services must pay the state business tax. But that's 10 to see. What if you don't live in Tennessee? Does your state have a business tax? I can't answer that for you. Consult with your local county clerk so easily point you in the right direction. So what's business tax cost? In my area, it's a small fraction of 1% of all my annual sales. So relatively super small, this is actually the lowest tax that I pay as a web designer. The second is local sales tax. If applicable. Have you overpaid sales tax on something? Of course you have. But did you know that businesses have to pay that to even a web designers? In my home state of Tennessee. Website design and development is considered computer software. And computer software is taxable. What's I hosting a maintenance plans are also taxable. Is this the case where you live? Again, I can't answer that for you, but a CPA or Certified Public Accountant, aka a tax professional, can easily answer that question. Now, how much does sales tax cost? My local area? I have to charge 9.75% on top on my website design and voices, and submit that monthly on my states tax site. Fortunately, you can easily tap on taxes through wave at Settings, sales taxes. The third is the federal and state income tax. Do you fall taxes each year? I sure hope you do. And the USA federal tax is required for all businesses. And some states have their own state income tax. Whether you go through TurboTax, H&R Block, or hire a CPA to prepare your taxes. You need to prepare and pay federal taxes annually. In the simplest terms, you pay federal tax on your gross income minus your business expenses. So keep track of your expenses and receipts. A general rule of thumb is to set aside 30% of your income for federal and state taxes. Fortunately, CPAs and tax prep software like TurboTax and H&R Block will educate and walk you through the entire process. Takeaway number 4, business tax, sales tax, stay in federal tax are generally required for all web designers. Consult with your local county clerk and a CPA to decide which taxes you need to pay and how. So to recap, what did we learn about the financial side of running a web design business? We learned one, wave is a fantastic free invoicing service for you to charge your clients for project and per month to update your bank account with your business name as your DBA so you can deposit money paid to your company name. Three, which register for a business license at your local county clerk. So you can legally conduct the business in your area. For business tax, sale, sex, stay in federal texts are generally all required for website designers. Consult with your local county clerk in a CPA to decide which taxes and to pay and how and what's our homework? I want you to sign up for wave. If you don't already own QuickBooks, update your DBA on your banker. And we'll conversation when their local county clerk and a CPA to review your legal business license and your tax obligations. I'm Leighton and now you know how to invoice and paid taxes. 44. Onboarding Clients: Welcome, I'm Leighton, your webmaster. In today's lesson, let's discuss on-boarding clients. Have you heard of onboarding and off boarding? What do those terms mean to you? Onboarding can refer to accompany bringing a new employee on board by joining the team and learning how they do things. It can also refer to familiarizing a new client with your products and services. And that's the one that applies to you as a webmaster. Think of it like a new phone. When you get a new phone or any other tech device, you have to learn its features, right? You have to get familiar with how it works. Likewise, as a webmaster, when you sell website design services, clients need to get familiar with the process. In fact, this might be their very first website. It's so exciting for them and it can be exciting for you. It can also be overwhelming. Many clients will say to me, I have no idea how this works. So just tell me what you need from me and that's okay. Because I didn't know what I need from them. In this lesson, let's discuss one, the Getting Started guide to admin onboarding tasks. Three, collecting logins and for collecting content. First, the getting started guide. Have you ever read a manual? Manual is usually contain a getting started section near the beginning. What does that section help you to do? And get started? As a webmaster, once the client has paid, you're in charge of getting the project started. How do you do that? Well, let me introduce you to a helpful guide that I've composed for my clients. So here we are at my agency's website at pioneer dot Media slash guides. These are guides and resources for our clients. We want our clients to feel educated on how the web design process works and what you can do to help. Therefore, we've composed two guides, getting started and going live. So these are two separate guides. One for getting started, one for going live, the getting started. What do we need to get started? What should you gather together? Reader guide to find out going live after decide launches, what's next? Don't get left behind radar tips for getting the most out of your new website. And this is a little graphic that I created for this guide. So let's read the getting started guide. This is what I send to new clients when I take on a new client. Number 1, 2, 3, and 4, Let's read through this what we need to get started. That's a very common question. When you take on a client, they want some direction. They want to know what to do. Are you getting a new website? There's two options here. New website or is your website being redesigned? If you're getting a new website? First off, we need the downpayment. Second signed agreement, and third, domain ideas. What.com Would you like? Any ideas? Come up with a few. And so we'll wait and we'll check their availability. Once you choose a domain name, you shouldn't. And to keep it and don't change your mind. We will take care of registering the domain name for you. Otherwise, if your website is being redesigned, we still need a downpayment. We still need a signed agreement. And instead of registering for a domain name, let's get the login to your existing one. And if you already have a website, you have hosting. So let's get the hosting or the WordPress login so we can get into your current website. What's up next number to design ideas and content. So once we've figured out the basics and we'd been paid, now we can get started on the design and the content. So first off, we need a logo. So this your logo in one of these formats, we don't have a logo. We can help our specialists will design a custom professional logo for you. Second, color scheme. What colors would you like on your website? The colors from your logo are an excellent place to start. Color should be carefully chosen to convey the attended feeling and mood of the website. Should use IB eco-friendly, be bold and exciting, calming and relaxing. The colors will reflect that. Photos. Send us your best high-definition photos for your website. The bigger the size, the better methods of digital transportation. Dropbox, Google Drive, OneDrive, email, or text design. Are there any websites out there that you particularly like whether they're in the same industry as you are not. This is very helpful. Give us an idea of what you'd like to see on your website. Pages. What pages do you want on your site? Some ideas, our Home About Us services, products, testimonials, photo gallery, contact. So you some people just really don't know what they want on the website. So this is a great thought starter to get them moving in the right direction. The content, most importantly symbols, the content that goes on each page. For the about us page, send a few paragraphs and photos to explain your company's back ground and story. For the contact page, what your current contact details? For the gallery, we need photos to put there. So whatever they choose as their pages, we need content for those. Next, we design your website mock-up. So a lot of this takes place in the client's ends. Now the ball's in your court. We design your website mockup. Once you've given us everything we need to get started, we commence building your website. Yes, you can view our progress, will send you a special link to view the work in progress. Typically takes one to two weeks to prepare mock-up? Yes, we are quick. Once we're ready to show your work when notify you and send the link to the mockup. At that point, most people will love with initially seeing or professional designers out there all keep in mind though that what you see is just a mock-up. It's not a finished product. That means if you don't like something, that's totally fine. You had total freedom to request any changes you want. Don't like the colors, layout, texts, make a list of changes you'd like, and we'll keep working on the site. It's recommended you check out the website on your desktop computer. This is how we designed a website at first, not for viewing on a mobile device. If you check the mobile site, you may see some funky design rendering. So I like to mobilize the site at the end once the content and the primary design is complete, many clients have found it easy to write the list of changes in either an email or a Word document. Try to organize the changes by page. They'll be afraid to speak up. You won't hurt our feelings. This is your website out there. All you should take pride in the finished product. There are a few rounds of revision. The site should be ready to finalize and launch on to step 4. The final step, final edits and launching. Now that we've gone through a few rounds of revision, the website should be to your liking. At this point, there's a number of things will do to launch it. And I'll go through this in an upcoming lesson on launching the website. So this is our Getting Started guide. This is an awesome thing that we can send out to clients so that they can do their research and figure out what they need to do to get the ball rolling on this project. Now you are more than welcome to take this guide and make it your own. The link is waiting for you in the lesson notes, but why did we compose this? Why not personally educate each client individually? What do you think? Dame reason a major corporation doesn't personally call you on the phone to explain that new coffee maker you just purchased. That takes time. Anything you say or do over and over again should be simplified and automated into a process. I repeat anything you say or do over and over again, should be simplified and automated into a process. Instead of repeating the same thing to every client, take time to write this guide once, then send it to every new client. By doing this, you will save both your time and your energy. Takeaway. Number one, save time and repetition by directing clients to a getting started guide. The next onboarding tasks you need to do are on the admin side. Now when you sign up for phone service like AT&T or Verizon, what happens next on their end, they set up your phone line. They give you a new number or port your existing one. They set up your online account, your billing account, and much more. Onboarding means paperwork and admin work for the company. Fortunately for you, this only takes a few minutes as a freelance web master. Basically, for every client I take on, I add them to several lists. Let's walk through each one of them. One, your project's timeline. Did you download that spreadsheet? If so, you should be moving your clients along the timeline from left to right. Once you land the client, they moved to the downpayment column. Once they've made that payment, they move again to the domain and design column. There's something incredibly satisfying about moving a client along this timeline. It feels like such an accomplishment. I love it. I mean, don't you feel good when your room is all clean, when your car's been washed, your lawn is mode. We have to celebrate those little accomplishments. Anyways, when you start on-boarding clients, they should lay in that the domain and design column of your project's timeline, where you'll figure out their domain and they're hosting situation and begin the design of their new website. So how long does moving them along this timeline take? Thirty-seconds. Number two, your clients spreadsheet. Do you have that one handy? That's my master list of all paying clients on my website care service. Once I earn a client and they make a down payment, I'll open up the spreadsheet and onboard them to the list. This list includes their company name, my contact within the company, the website URL, how they intend to pay monthly if their website is SSL secured and the referral source. Once you add a client to the list, your formulas at the bottom, such as a running total of the amount of clients and the monthly and annual revenue will automatically update. Easy. This only takes about one minute. The third admin task you've likely already done, and that's add them as a customer in wave or QuickBooks. They should already be a customer if they've made that downpayment. And later on when you're launching the website, we can set up the recurring invoice for the maintenance plan. Confirming this only takes about one minute. Number 4, this is an optional task. Have you heard a Mailchimp? Mailchimp is a fabulous e-mail marketing service. Do you ever get emails from your favorite brands? Shopping, dining, deals? Are those emails, are they personally, individually sending you that email? Or is it mass marketing? And how do all those emails get out with an e-mail marketing service like Mailchimp. Fortunately for you, mailchimp is free for the first 2000 subscribers, which is more than enough when you're first starting out. I recommend having a Mailchimp audience with all your clients. When you're onboarding a client, just add their name and email to your client's audience so that you can mass email all your clients whenever you need. Adding to an audience takes about one minute. Number 5, set up a folder for the client on your computer. Personally, I have a folder within my documents folder on my computer called web sites. Within websites, I have one folder per client. So when you're onboarding a client, create a folder on your computer devoted to that project. This folder should really be a mirror of what's on the idleness server. So you can edit the WordPress files as needed. I also create a folder called notes, which does not get uploaded to ionise where I stored the content. They've provided the photographs, they've send their logo documents, PDFs, whatever else pertains to the project. Creating the client folder on your computer just takes a minute. Number 6. This one is slightly longer. To prep for this client, you need to prep your server. Do you remember that process? We've gone over it a few times. In short, it means creating the webspace, FTP account database, installing WordPress and Divi. Now for the most part, this will be done on your server. But if your client insists on using their own server, that's fine. You can prep their server. Wherever the side is being hosted, the server needs to be prepared so you can start building their website. This takes about 15 minutes, and there you have it. In about 20 minutes, you have completed the admin side of onboarding a client. So easy. Takeaway number two, further onboard your client by adding them to your clients spreadsheet, updating your project's timeline, update the customer data in wave or QuickBooks, add to MailChimp, create a client folder on your computer and prep the hosting server. The third onboarding task involves the client. You need to collect logins to their existing website. If applicable. What logins might they have? Most commonly a GoDaddy login for their domain? Or maybe they use network solutions, registered.com, name Jeep Host, Gator, site ground or Bluehost, a Wix, Weebly or Squarespace log. And if they built the website themselves, a Gmail or Microsoft 365, if they have business class, e-mail, the YouTube login, if you're dealing with video services, passwords to their hopes of emails, a log into WordPress. Uh, basically, you're looking for access to their existing domain, hosting and emails. If applicable, make sure you save all of those login securely, such as in the last pass. Now if they're starting completely from scratch, they may not have any of those accounts, and that's fine. You can create those entities in Jonas. Otherwise, existing websites have to be hosted somewhere. So you'll need to figure that out. But what if you have a client who says, I have no idea where to find that, I don't know where my domain name is. What do you do with that? Well, fortunately, as a professional, you can steer them in the right direction. You've got their back. Here's a few tools I'll use. I use who is dotnet? Who is hosting this.com and what CMS.org. Let's look at these. So when we first take on a new client who already has a website, it's really important to figure out the state of that website. So here's a few tools that I use to do that. The first is, who is dotnet? Remember who is, is like the publicly available background information on each domain name. So let's look up one of my plans, websites, stores.com and see what's available here. Alright, so who is lookup? Let's see what's available on the who is data for this? First, the domain name is listed. This is the domain that we've searched. Registry domain ID. Registry server and the register URL. So this is saying that the domain name is registered at GoDaddy. Godaddy is the domain registrar. This was most recently updated in 2020, and the domain was created in 2017. Registry expiration date is currently set to 2020 to the registrar is GoDaddy. Then the abuse information. Godaddy takes care of the domain status that's been prohibited because GoDaddy hides up or privacy. The name server is pointing to Cloudflare and then I'm pointing it from Cloudflare to my own server. Dns SEC is unsigned. And here's a link to the complaint form. And that's it. That's what who was tells us. So the most important information we learn here is the domain is registered where GoDaddy. So if you pull up your clients who has information and you find that their domain as I go, daddy, then there you have it. Next step would be to retrieve the GoDaddy login so you can go in and point that their domain to your server. Number 12, things that I find into who is information is the register and then the name servers. So this is where the domain is registered and this is where the website is hosted. So what else do we have? Who is hosting this.com? I really like this website. You can search for your domain name and click Search. And then it tells us two things. One, the hosting provider is Cloudflare and to the name servers are odd color.com. That should give you information on where the site is hosted. And it was dotnet will primarily tell you that where the domain is registered and also the name servers. And who is hosting this.com will primarily tell you where the website is hosted. So I like to use those tools in tandem with each other. A third tool I use what CMS.org, let's search for the same domain name and click Detect CMS. This is going to pull up the content management systems and different technologies powering the website. So this tool tells us using the public information available in the source code and the HTML for this website, it tells us this is WordPress. It's programmed on PHP and the database is MySQL. So we know all that information. But if you're taking on a client, you might not know that. And a tool like this can nearly instantly tell you what CMS powers to website. What do you do with that information? Let's say you take on a client, you run it through this tool and you find out that the website is on WordPress. What's your next step? Get the WordPress login. You go to who is dotnet, you figure out the domain is registered at GoDaddy. Your next step is to get the GoDaddy login. You find out that the website is being hosted at Cloudflare. You could request Cloudflare login. You find out that the website is built on WordPress. You could ask for a WordPress login. So these tools are very helpful for finding out the current state of the existing website. I recommend writing all that down when your client notes that you have it to reference. Now if they used a web designer in the past, you may need to call or email the previous designer and might have all the information you need to transfer hosting, communicate with them to better understand the websites current situation and create a game plan for transferring all of that to your server. Takeaway number 3 uncovered the existing websites set up by gaining access to the domain, hosting and emails, if applicable. Number for collecting content. This can potentially be one of the most frustrating processes of the web design process. So let's say you're paid to build a new website for a startup until you start designing that site, the blank canvas. So what do you ask for? A logo? Some photos, the pages they went on their site, a few paragraphs about the company. Pretty standard stuff, really, the things that you'd want to find on the website. So imagine that you've requested those items but got no response. And then a week later, you get an email from a client asking you how things are going and if the website is ready for their review. What do you do with that? You can't start on the project because you don't have any content to work with. And that is why this is often one of the most frustrating parts of the web design process. Getting content out of the client. I mean, they're busy and that's okay. That's why they hired you to take care of this. But since they know their business better than you, they really need to give you something to start off with. So let me share with you some of the tips I've learned how to funness the content collection process. Number one, communicate regularly. This is one of the best things that you can do with business in general, but especially for collecting content. When you take on a client, clearly communicate exactly what you need from them. Clients want homework. Most of the time they realized they need to give you something to start off with. They just might not understand exactly what they need to give you. So clearly outline using numbers, bullet points, what you're looking for, such as a logo, photos, paragraphs. Lists of services, headshots, Logan's, et cetera. If you haven't heard anything back, follow up in a few days or a week, just don't feel like you took their money and ran keep the dialogue open. Trust me, they'll appreciate you for staying on top of things. Number to reduce friction. Make it easy for them to send you content. I found that Google Drive, dropbox, and OneDrive had been extremely helpful for sending content back and forth, create a folder and share it so that you both have upload and download Access. Of course, email works just fine tune. They can always just create a Word document and email it to you along with a few pictures. That's fun. In the interests of making this as easy as possible. Don't make someone sign up for a new file-sharing service just to send you over a few pictures in a document, figure out what they're comfortable with and try to work with that. If they leave it completely up to you, which a lot of clients do, suggests a service that you are comfortable with. Number 3, if you're really struggling to get something out of them, you might just need to call them up and interview them. Chances are they're perfectly comfortable talking about their business informally. The issue is when they have to formally write it down in a professional manner, most clients will admit they're not riders and that's okay. Have a conversation with them. Prepare a few questions such as, tell me about your services. How long have you been in business? Why should a customer choose your product or service instead of the competition? Do you want to display prices on your website? See, prepare a few questions like that and write down everything they say. Once the conversation is over, you can start formally, professionally formatting that into an opening tagline, an About Us page, services page, et cetera. Number 4, as a last resort, bring in a content writer. Why would I view that as a last resort? For one, it's an extra expense, one that most small business clients would pass on. But that they truly hate writing and they see the value of a professional content writer. You can bring in a freelance writer to tackle this. I've used freelance writers on plenty of projects and the deliverables are super professional. Now, can you think of any other issues with bringing in a content writer? If your client has such a problem giving you content, how much success is the writer going to have pulling content out of them? The rider can research and industry on their own SAR, but even they can't write the About Us page until the client gives them something to start off with. Takeaway number 4, collecting content can be a pain, but you can finesse the process by communicating regularly, reducing friction with file-sharing software, interviewing them on the phone, or bringing in a content writer. So to recap, what have we learned about on-boarding clients? The onboarding process takes place after the down payment has been made. Onboarding is necessary when you earn a client. And in this lesson we learned, one, saves time and repetition by directing clients to a getting started guide. To further onboard your client by adding them to your clients spreadsheets, updating your project's timeline, update the customer data in wave, create a client folder on your computer and prep the hosting server. Three, uncovered the existing websites set up by gaining access to the domain, hosting and emails if applicable, and prepping the server or collecting content can be a pain, but you can finesse the process by communicating regularly, reducing friction with file-sharing software, interviewing them on the phone, or bringing in a content writer. And what's our homework? Review my getting started guide at pioneer dot Media slash guy, browse and bookmark, who is dotnet, who is hosting this.com and what? Cms.org. But I'm Leighton and now you know how to onboard clients. 45. Designing & Developing Websites: Welcome. I'm Leighton, your webmaster. In today's lesson, let's talk about the primary service you will provide, designing and developing websites. So we discussed how to do this in the second set of lessons in this course. At this point, you basically know how to build a website. You know, WordPress, you know how to design and develop one. Where to go for design inspiration, how to make it mobile-friendly, search engine optimized, and how to add an e-commerce. But now that you've actually earned a client, it's time to put that into practice. Once you've moved your client to the building site column of your project's timeline. What's involved? Let me share with you four tips to make this process as success. Tip number one, creating an initial mockup. Number 2, responding favorably to feed back. Three, adding CSS and for avoiding scope creep. So first, the initial mockup. Once you have your client, you're paid, you've got your server prepped, you're ready to start designing. Now there's two different scenarios here. If it's a brand new website, perhaps for new business, you're looking at a blank canvas. Otherwise, the other scenario is if they already have a website and you're redesigning it. In that case, you already have something to reference. Either way, the design inspiration lesson of this course has some awesome tips on where to go for design inspiration. But what if you don't feel very inspired? You're staring at a blank canvas and nothing's coming to mind. Or you start adding images and text and nothing's coming together, nothing really looks good. That's okay. It's like cooking and elaborate meal. Sometimes you're in the mood to cook something amazing. You've got Andres appetizers, desserts, drinks, and other times you just want to get takeout. Point is you don't always feel inspired going about your day to day routine. And when designing a website, you won't always feel creative. And that's okay. Every professional designer on this planet knows that feeling. My suggestion is take a break, get outside, take a walk, exercise, get the adrenaline flowing, listened to a podcast, sleep on it, take a nap. When you revisit the project at a later time, the right idea just my hit you. And if you do feel creative, all of a sudden, we call that being in a creative flow. Jump on it. Design as much as you can while you're in your flow. That's when you pump out your greatest work. Overall though, the quickest way to inspiration for me personally is to just look at other websites. Browse the web for beautiful sites, whether they're in the same industry as your client or not, and you're sure to get those creative juices flowing. There's some amazing stuff out there. But whatever you design for your mock-up, I want you to strike a balance. A balance of what? Spending too much time on your mockup, and not enough time. Too much time, you could be wasting your precious time, especially on a mock-up that your client potentially might completely change, but too little time and you risk sending over something that looks weak. See, a mock-up is your first impression. You need to wow your clients. Ideally, there'll be impressed with the design, but just request a few changes. Usually things you wouldn't have even known it anyways, like wording adjustments or swapping out photos. So find that balance. Don't spend too much time on a mock-up, but spend enough time. So it looks impressive. And finally, before sending them walk up to your client, bring in an extra set of eyes, a family member, friend, whoever you trust, bringing the perspective of somebody who isn't, you isn't emotionally invested in the project. See, the more you stare at your project, the more blind you could become to something that seems obvious to another person. And I can't overstate the value of showing your mockup to someone of the opposite gender. Females will see things that males might overlook and vice versa. So fine. Another balance, a balance between having too many cooks in the kitchen and blocking yourself from the input of others. One or two trusted associates should do the trick. And finally, for the most part, I like to design just the homepage before moving on to the other pages, just in case they want to go in a totally different design direction. Once we perfect the homepage, we move on to the other pages. So takeaway number one, design the initial homepage mock-up while you're in a creative flow. Make it look attractive without spending too much time and ask for the feedback of a trusted family member or associates. The second step is after you send your initial design, the balls in their court to provide feedback. Sometimes you'll get one or two simple things. Other times you'll get a few paragraphs of changes. And that's okay. Understand that these changes are usually a lot easier for you to do then building the initial mockup in the first place. So they're showing take a fraction of the time. My suggestion is to respond favorably to the feedback. Remember, this is your client's website, not yours. Imagine if you're picking out paint with a general contractor, How would you feel if the contractor insisted on a certain color, even though you're the one who has to live with it, you're the one bang for it. See, ultimately your client is the one paying. It's their website and their business. So let them have their opinions, their feedback. Serve them by making all of the changes you're able to and make them in a timely manner. The sooner you respond, the better your client will feel about you. With open dialogue and back and forth revisions, you will sail through the design and development process. Takeaway number 2, respond favorably to feedback and promptly make two changes requested by your client. Third, some of the changes might require CSS or Cascading Style Sheets, which we briefly discussed in the coding lesson. Do you remember talking about CSS? This is a relatively easy coding language and allows you to fine tune the design of your website. Fortunately, CSS editing is built right into Devi. Let me show you some of the areas where you can play around with CSS. So we're back on the test website that we built in lesson two of this course. And let me show you some of the CSS features we have available in Devi. So I'll start by clicking enable visual builder. And that will take us here. We have the Visual Builder up. And first off, you can bypass adding custom CSS if you really take advantage of the design section, a lot of what you want to do that would be normally accomplished with CSS. You can do in the design tab. This applies to any section, row or module. So when the Design tab, we can do, for example, if we look at the title text, this pulls up the font, the font weight, say the font-style. These are normally things that you would use CSS for. But the Devi theme has this built-in to the Visual Builder, which is a huge time-saver. The text alignment left, center, right to justify the text color. And you can reset any of these here with this button. And then you can choose different CSS values based on the Responsive Design. View, the desktop, the tablet, or the mobile view. The phone. Very helpful. So you can change the, for example, you can change the size based on the mobile. It can make a bigger on the tablet since we have more space. And you can make it really big on the desktop. So with the responsive design editing tools, you can fine tune your design for each device. So this is normally CSS, text size would be font dash size, and then you add the pixels. But here we can do it visually through the Design tab indivi. So that's a few of the CSS measures you can use in the design tab. But what if we need to add a specific CSS to our module? We click Advanced and go to Custom CSS. We have before this header, the main element. After the header, the header container, the header image, the logo, the title, the body subtitle button, one button to scroll down button. So this enables us to add CSS to those specific elements. So let's say let's change the font size of this title. There you go. We add important so it will override what's already in the design tab. And there we are. We're able to add custom CSS to that. Now that is something you can achieve in the Design tab. But I just wanted to show you how we add CSS to a particular element or module or row or section with indivi. So we haven't that available to us. Click Save, and then we've got something else we can do. So that's per module, CSS. Let's look at per page CSS. We click the purple three dots here and then page settings and pulls up a box. And under Advanced Custom CSS, we can add CSS just to this page. So if you find a piece of CSS code from another website or resource that you want to include on yours. Or you've done some research and you have something specifically you want to change, then you can copy and paste the code here, and it will only apply to this page. Maybe you just want CSS for one particular page and this is great. Otherwise, you can get out of here, go to the backend of WordPress and scroll down to divi, Theme Options. And at the bottom here, Custom CSS. This will apply to the entire website. So that is very helpful when you need a sitewide CSS change. If you find yourself adding the same code each page, I highly recommend these global styles. Global meaning across the entire website that can be a major time saver. We can also find this under the theme customizer. Under Theme Customizer or appearance customize, which takes us to the customizer. This is default on WordPress, but Devi makes it a lot better. So we scroll down at the bottom is additional CSS. This is where we can add any custom CSS code snippets we want. This will apply globally across the entire website. Well, let me show you an example of something that we might want to change with CSS. So at the bottom here we can change to the tablet view and the mobile view. So we have our menu here and we go back to mobile styles. Let's say we're looking at the mobile menu and we like the dark text color. That looks good. For the menu. Background color looks good. I've added a little bit of a fade there in the background, just very, very subtle. But let's say we want to achieve two things. Maybe we want to center this text and maybe we want to add some color to this bar. If we colorize it here, then you'll also colorized the text. We don't want to colorize the texts. We just want to colorize the bar. So how did we do that? And how do we accomplish that with CSS? Because we obviously can't do that with Devi. There's no design or advanced setting right now, nothing in the Theme Customizer that allows us to center that menu. And there's nothing that allows us to only change the color of this. So let's see, we go back to the front end of our website. And in the Safari browser we can go to develop at the top and then into responsive design mode. Let's pull up the mobile view. This is how it looks on an iPhone. And we're looking for two different things here. You can do this in any browser. I'm currently in Safari. But we're going to pull up the inspector right-click and inspect element on this menu. Try to give this a little more room here. Alright, so here's the HTML code. In the center, and on the right is the CSS code. So let's see if we can find, we would center this text. So let's go to our link here, the a anchor link and scroll down to ET mobile menu, LI for list and a for anchor link. Let's just add one line of CSS code, text align center. That did it. Beautiful. But you remember these edits are only taking place on our device. This is not live for the public, this is just for us. So how do we make this live? Well, basic CSS here, we copy our selector. Let's press Copy. And then hop back into the Theme Customizer and go into additional CSS. And open a new line here. Paste that, open up our brackets. And then text dash line. Let's do center. And there you go. Beautiful. It's centered, it. That's excellent. We did that with just one line of CSS code. Very, very, very helpful. And this takes place across the entire website. So how did we change the color of that bar? Let's do so over here. Let's, so let's research this. We right-click Inspect on this bar and we see, alright, mobile menu bar before. Cool. So we see a lot of different selectors here, but most of them are grayed out except for this one. So let's copy just this one. And then go back into the customizer, paste it. And then what's it referencing? Color colon, and then the hex code of the color that we want. So let's say we wanna do a blue. No, looks good. So we copy this code for the blue and then paste it into the customizer. So we pasted our code. We don't yet see it in the customizer, but let's see if that changes when we reload our website. So we'll click, Publish and then refresh our site. And there we are. The mobile menu is blue and yet the text, let's see if that affected the text color. No texts colors still black and it's been centered. So that's amazing with just one line of CSS code. We are able to selectively change just the color of the three bars here for the menu, we only add important exclamation mark and then important that just overrides any other CSS. Sometimes you'll need to add that. Sometimes you don't when in doubt, just add important. And that will make sure that that's the top CSS code that gets fired when the website is loaded. So there you have it. Through Devi individual builder, you can do a lot of things through the Design tab of any module section or row by going to design here and seeing what applies to each specific development that you're looking at. And then we have per page CSS, under Advanced css, this code applies to the entire page. We have per module CSS through advanced and custom CSS. And then we have sitewide CSS through the customizer and additional CSS at the bottom, which is the same as you'll find under Devi theme options. So like I said, I highly recommend learning CSS. It's a very easy language to learn and can be so powerful, especially when you're polishing up your website. Takeaway number 3, learning and applying CSS is vital to fine tuning the design of a website. The final tip for the design and development process is to avoid scope creep. Have you heard of scope creep? Let me explain this to you by painting a picture. You've spent a few weeks designing your client's website. You've gone through a few rounds of revisions. They've added a few more pages to the site. They all want to blog. Would you didn't agree to it first? Now they're asking for e-commerce since apparently they have a few products they want to sell online. You didn't discuss that a few weeks ago. You didn't put it in your proposal, nor did they pay for that feature. Can you see a problem here? Can you see how that would be annoying, time-consuming, possibly rude. See, you made an agreement to provide a set amount of services at a set price. When they go beyond this, that's called scope creep. They've creeped out of the scope of work you agreed to. So how do you handle this? Address it? Be straight with them. Respectfully explain that what they're requesting is doable. But you're going to have to either quote that separately or track and Bill your time. At that point, the client is either going to mix that idea or allow you to quote it. You win either way. So don't be afraid to address scope creep when it happens. Takeaway number 4, when the client has creeped out of the scope of work, agreed upon, address it, and send a quote for the requested updates. So to recap, what have we learned about the design process? Number 1, designed the initial homepage mock-up while you're in a creative flow. Make it look attractive without spending too much time and ask for the feedback of a trusted family member or associate them with Sue. Respond favorably to feedback and promptly make the changes requested and clients. For 30. Learning and applying CSS is vital to find tuning the design of a web. Someone's. Number 4, when the client has creeped out of the scope of work, agreed upon, address it and send the quote for the requested updates. And what's our homework? Check out some tutorials, courses or videos on CSS you will use to assess, to refine your designs. I'm Leighton and now you know how to design and develop a website. 46. Polishing & Launching Websites: Welcome. I'm Leighton, your webmaster. In today's lesson, let's discuss the final step of building the website, polishing and an entrepreneur. So think of building a whole. It's been framed, insulated, plumbing and electrical or installed drywall Assange walls are painted. But now what what's left? You've got mirrors, knobs, pictures, pillows, doors, throws lamps, basically the finishing touches, then you're ready to move in. Likewise, you finalize the website by polishing it up with minor edits. Then you launch it by making it live on the Internet. Let's explore these two processes, polishing and launching with a 20 step launching checklist. First off, in the polishing process, you need to obtain and fulfill the remaining edits from the client. You can say something like send over your final edits before we launched the website that will encourage them to solidify their final edits and stop making more changes. You've gotta wrap up and launched the project eventually. And they're likely anxious to finish the project as well. Number two, once the client's final edits are done, you can get started on your own final edits. Before you launch the website, you should go through every pixel of every page to perfect it. Go ahead and fix whatever you see as you're scanning through the site. Here are a few things to look out for. Grammar. A polished, production ready website cannot have any grammar mistakes, not even one. I mean, how do you feel when you're browsing a website and you find the grammar mistake. How does that reflect on the business? Who owns the website? Think it's unacceptable and unprofessional. Read through every heading and every paragraph that for misspelled words and basic grammar mistakes, you can even use an online spellchecker like Grammarly, if you want to double-check your site number for speed test, when you launch a website, it needs to load quickly. Definitely under five seconds, preferably around three. I mean, do you like waiting around for a slow website to load? Nobody does. So how do you test this? You can use the free tool AT tools dot Pingdom.com to check out your site's load time and see if there's any glaring issues here. The biggest offender is usually images. Unnecessarily large, uncompressed images will bloat your website, increase the size, increase a load time. So we're view and optimize all photos. Number 5, mobile friendliness and cross-browser compatibility. Remember how important mobile is. Consumers, businesses, even search engines love mobile. So when you're ready to launch your website, you need to pull it up on your smart phone, tablet, and whatever else you have. Review your website on every screen and Internet browser you own, and make changes to whatever doesn't look right. The point is, the website should look perfect on every device, every browser, and every screen. When you're ready to launch number 6, SSL certificate. When you're launching the website, you need to secure it with an SSL certificate. Do you remember how we did that? If you're hosting with Ioannidis, that means logging into Ioannidis and going to the SSL certificates section on the WordPress site, plugins like really simple SSL. And I think security helped to redirect all traffic to the secure site. We went over this in the security lesson of the website maintenance plan section, set up the SSL certificate before you go live. Number 7, test all links. Have you ever clicked on a link? And it didn't work. You landed on a broken or dead page. You got a 404 not found error. That's because the link was broken. Those are bad for all kinds of reasons. Namely, they're really annoying and surgeons and penalize you if you have a lot of broken links. So what can you do to prevent this? First, click every link on your site. The primary navigation at the top, the footer links internal links throughout the body of the site, and external links going to other sites, click everything. This will only take a few minutes and it's so worth it. Number 2, confirm the social media links. If you have outgoing links to Instagram, Facebook, YouTube, or other social sites, click them to make sure they land on the correct profile. And number three, if you're building a larger website that will continue to grow, you might enjoy the broken links checker WordPress plugin, which takes all of the links on all of your websites. Every few days, you'll get an e-mail if one breaks or goes offline. Number eight tests the contact forms. So let's say a business owner pulls up their website, fills out the contact form and nothing happens. They don't receive the results. What's the problem? Well, likely the form results just went to the wrong e-mail. But can you think of any problems that would pose? Well for one, the contact form is typically the greatest lead generator on the site. I mean, people nowadays are filling out forms more often than they would just pick up the phone and call the business. So imagine the business potentially lost if the form doesn't work. That's why we need to test the form. I like to double-check the for myself through digging. And I'll also encourage the client to fill out the form of themselves so that way they'll feel good about it and know it works. Number nine, the favicon. Have you ever noticed the little icon in your browser next to each tab? They're really small. That's called a favicon or icon for your favorites. You can upload this indivi by logging into WordPress and going to the Theme Customizer, general settings, Site Identity, site icon. That's the favicon. It's usually your client's logo, symbol or icon, and it needs to be squared. Create an upload the favicon when you're launching a website. Number 10, managed WP. Add your new website to your Manage WP account so you can easily manage this I going forward. While you're in there, go ahead and turn on backups, security check, and performance check. Go ahead and run a security check to verify that the site is clean. Manage WP is the backbone of your website maintenance services. You'll be in there quite a bit. So add your new websites as you launch them. Number 11, backups with updraft plus a major part of your website maintenance plan is the backups. You know how important those are, both for you personally and your professional life. So install updraft plus and configure your backups when you launch your client's website. Number 12, uptime robot and follow that page. These services provide up-time monitoring and change detection for your websites. When you're ready to launch, add the URL to your uptime robot and follow that page accounts. Number 13, all in one SEO Pack and encouraged search engines. Do you remember all in one SEO PEC? That's the SEO plugin I like to use on all my WordPress websites. It opens up extra SEO improvements like sitemaps and allows you to customize your title, meta-description, social Meta, and much, much more. Install all in one SEO pack when you launch your website and spend a few minutes configuring it. One of the first things you'll be prompted with is a reminder that the search engine visibility option in WordPress settings is set to discourage search engines. You definitely need to uncheck that option when you're launching a site. Once we launch, we want the search engines to come crawl and index our site. And only one SEO Pack automatically submits your sitemap to the major search engines. Number 14, I theme security. Do you remember talking about themes in the security lesson of the website maintenance plan section? This is one of my favorite security plugins as it includes more than 30 ways to protect your website from attacks, such as locking down WordPress, fixing common holes, stopping automated attacks, backing up the database, strengthening user credentials and much, much more. When you're ready to launch, install this plugin and spend a few minutes setting it up, review every module and turn on the recommended ones. Number 15, google Analytics. Do you remember this free service? We talked about it in the management lesson of the website maintenance plan section. This is a free tool from Google that tracks your website and reports on all kinds of analytics data. There's far more data in there then you ever need to worry about. But it's so important that you start tracking your website as soon as you launch it, because you can't backdate this data. And your site as a property in Google Analytics, add your IP address to the filters so your personal traffic will be included and embed the tracking code in dVs, Theme Options, integrations, body code. Number 16, Google Search Console. We've mentioned this one a few times. This is Google's official tool for webmasters and you ought to add your site when you launch it at the site and verify it with a quick DNS TXT text record. Once you've verified, submit your sitemap dot xml file in the sitemaps section number 17, review. Now that you've launched your website, it's time to hit your client up for a review. Do you recall the review dot sub-domain suggestion in the off-site SEO lesson, I totally recommend creating a review dot sub-domain on your personal domain name so that you'll give people a quick and easy way to write you a review. The point is, don't make this process difficult. It's hard enough getting people to review you. You want to make this dead simple. And that link, the review dot one will take them directly to the review form on Google. All day I do collect five-stars, type something nice hits Submit. Here's what my review email typically looks like. Thanks so much for letting me build your website. As you know, reviews are so important, both for credibility and SEO. It would make my day if you would write me a quick review. Here's a link directly to the review form. Review dot pioneer.me. Thanks in advance. It's easy, easy. Get a review and then add it to your website. Number 18 portfolio. Now that the website is being launched, you need to add it to your portfolio, which includes your own website, your Behance, core plot, Facebook, Instagram, or whatever, poor portfolio or social media sites you're active on. Add it to every channel that has a running copy of your portfolio. Now what do you think would be appropriate on a portfolio post? Perhaps a link to the live site, an overview of what services you provided. All the problems that you solved. Some screenshots of the website. All our great ideas. Here's what I like to do. So here's my agency's portfolio page. I list this as our top 100 website projects. I've got some links to individual pages that are for SEO. There are some pages just in case people are searching. For example, what's I designed for dentists or what's I designed for painters. And that's a good SEO value for me. I've got a counter here with how many websites that I've done on those particular categories. And then this is the actual portfolio. So these are my top 100 website projects, specifically ranked in order of how impressive the website is and the ones that I want to promote are at the top. All of my 100 are ones that I don't mind promoting, but at the top should be the best of your best work. Now highlights of your portfolio, especially if you've done business with a brand that people will recognize. Because if they don't recognize the logo, they won't really care what the website looks like. If they do recognize a logo, then that looks impressive, like PBS, I did the local PBS station. And that definitely looks impressive. So as we scroll down, I use the Divi portfolio module to build this. And it grabs from the projects section of the WordPress beckoned. This is my portfolio, my top 100 projects, and a call to action at the bottom where they call e-mail and contact form. So let's click on one of these projects and see what we can put on the sub-pages for the products or projects. Let's click on dancing bear launch and see what pulls up. So I start off with a title, the name of the company, and then a tagline for the H2 header, award winning resort website design. And then their logo. You can click this and it will go directly to the website. Responsive web design screenshots. So this is how the website looks on desktop, mobile, and tablet. I created those in Photoshop using a mock-up template. We keep scrolling about the design team information about what the website, it's all about how we design it, what it's built on, the problems and solutions that were presented, and then some project details. So location, the website link, company description, et cetera. And as we keep scrolling, we got a testimonial. Dancing bear large wrote us a testimonial and I've got it linked here. Homepage screenshot. This is how the homepage looked at the time that I took the screenshot. So you can see what it looks like. So there's some ideas for your portfolio pages. Let's look at a different one. So let's pull up. But jump.com and see you another idea of how we can do this. But shall.com, e-commerce bunch door. That's the logo responsive design. And this is more of a refresh look. I've done location, bio and link, and then the problem and the solution and the feedback. This is the client testimonial and the homepage screenshot. So that looks good. One more thing, I want to find one that has a simplified version of the portfolio. Let's see an example of this. So this is just the simplified version. If I don't want to go through the process of creating those mockups and spending an hour crafting that portfolio page. Certain projects that I don't want to promote as heavily, I'll just do this simplified version. We have the title, we had the subtitle, we've got the logo and you can click that to go directly to the website. Then this, we designed a beautiful that links to web design, responsive and mobile friendly, those linked to the mobile sites page of finding your media search engine friendly, that links to this organic SEO website for this client, we continue to provide web hosting and maintenance services, which takes us to website maintenance to ensure their continued success. Visit our clients website and that links directly to nurse. So what this does is it gives us a simplified, easy to do portfolio page. This only takes like ten minutes to create this instead of maybe an hour on the other portfolio pages. These take longer because I had to take screenshots and prepared the mockup for printed a testimonial. So sometimes I just don't have as much time to do that. Just depends on the project. If I've got a really impressive website, I don't mind creating those mockups. I ALL and making the portfolio page look as impressive as possible. So may you use that for inspiration for your portfolio? So while you're launching your client's website, take screenshots and post it to your portfolio, which is an invaluable marketing tool for web designers. Number 19, final payment, the final step before officially launching your client's website. When you took on the project, you agreed to half down and half upon completion and launch of the website. Now that time has come, they'll have to make the final payment before the web site goes live. I recommend sending a friendly e-mail explaining your enthusiasm to launch the site. But first you need the final payment. They likely have anticipated this and have no problem paying the balance for the sake of finally launching the website. And number 20, go live. Now is the final step of launching. You need to make the website live. How do you do that? I mean, technically, how do you launch a website? Making it live means putting the new website you just built on the primary domain name. Live for everyone to see. Publicly accessible development site, no sub-domain. Now test site. If you've been building on a test side so the public wouldn't see your work in progress. Then now you map your website to the domain name. It, the site was previously hosted elsewhere. Now, you update the name servers to point a domain to your Iona server. How to properly launch a website is one of the most frequently asked questions I've received. There's a few technicalities. Let's walk through this. First, let's define our goal. When we're launching our website project. Ultimately, we want to publish it onto the domain name that we're using for our website, for our client, whatever domain has been selected. So if you've been building your website on the live domain name, then great, it's already launched. An example of that would be if you purchase a domain name for your client when you first started the project, it's safe to start building on that domain name because nobody knows about it. There's no traffic going to it. So it's okay to build a website on a brand new domain name like that. But then the instance when somebody already has a domain name and you're spending a few weeks or few months building a new website, it's wise to build that on a separate environment than their live domain name. Since traffic is already going to that, the ideal situation would be to build your website separately and then when the time comes, launch it onto the actual domain name. So there's a few ways to accomplish that staging environment. One way would be to use your system domain. In the case of ionise, it is a s something dot online home dot js. And then your webspace folder now would be a great way to create your own little staging environment to build your websites, the sandbox mode. So then when you're ready, you can publish that onto your real domain name. Another example would be if you used a sub-domain, for example, new, like a new website or new draft, new mock-up, dot domain.com. So when you create a sub-domain like that, or test or draft or mock-up or whatever you're using. Then to launch your website project, you would want to move it to the primary domain name, which would just be in this example, my domain.com. So how did we accomplish that technically? Well, one of the first steps would be to go into your WordPress admin, go into settings and general. And then this is the URL of your WordPress installation. So we would want to change the WordPress Address. And the site address. Now those are pretty much the same thing 99% of the time. So we would want to change that from our staging environment to the live domain name. So that would be step number 1. Change it from your sub-domain or your sandbox or whatever you're using to the live domain name. Now a few considerations here. Sometimes in a sandbox mode, we are not able to install an SSL certificate, hence the HTTP instead of HTTPS. So you need to consider the SSL status of the domain you're launching on. In this case, if my domain.com does not have an SSL certificate installed, you should not add HTTPS here. If you add HTTPS as for secure to a domain name that does not have an SSL certificate, you will essentially break the website, throw up an error and you won't be able to proceed until you install an SSL. So that needs to be HTTP until you do that. Now if the website is the domain that you're launching, two does have an SSL certificate installed, then by all means at this point, and the HTTPS, your URL. Now once you've done that, you can come down here and click save changes. So that would be an important first step. Now that could present a few minor technicalities. So you have the WordPress URL, which works for 95 percent of the URLs on your website. But there might be a few things like a background image or like a logo URL that is hard-coded into the website. So if it's hard-coded into the URL, then after you change this address, your website is still going to reference this address. So what's a thorough way to change all the URLs across the site? Well, this handy search and replace plug-in. There's plenty of them. I like to use this one. Better search replace can help to lookup all instances of a URL and replace it with the live one. So let's install that plug-in and then go to tools, better search replace. So we'll search for any instance of the old URL and then replace it with the either secure or insecure version of our website. We can select all of these tables. Uncheck the dry run, and then click Run, search and replace. That will thoroughly change all URL references to your sandbox URL, to your live domain name. That's a thorough way to do that. So another consideration, like I mentioned, we need to figure out that SSL status of our destination server. So in the case of Ioannidis, you can check out your SSL security status in the domains and then SSL certificate. If you're on a shared hosting environment, you can install your SSL certificate with Iona us. Go Daddy, SiteGround, whatever you're using, you need to make sure your SSL certificate is installed. Should you choose to use SSL security, which I definitely recommend. So beyond that, what's another thing to consider? So if you don't already have your domain name in your account, then you must go to, in this case. In this example, we're looking at ionise. You must go into domains and then setup external domain, either an external one or transfer the domain to your account for your client. So when you set up that domain name, you're going to get a name server. And so we mentioned earlier in the lesson with that name server. This is the ultimate DNS connection that point, everything domain related from the domain register to your host. So, uh, for example, if your domain name that you're using is in your clients Go Daddy account over there, register their Google domains, whatever it is. Then once you add your domain to your hosting account, such as ion us, I own AS will give you the name servers to change. And you can go into GoDaddy and then domains and then DNS, and change the name server to point to your hosting account. At that point, all domain related traffic, the website, the emails, everything will be pointing to your hosting account for you to manage for your client. And then you can just go in and adjust the destination to point that new domain name to the necessary webspace directory. So if you've been working on a certain directory, a folder name, There's no need to change that name. Just set up your domain name and then adjust webspace directory to make the connection with that new live domain name to the appropriate folder. As long as you have the webspace directory target in your hosting account, you've got your SSL certificate installed, and you have the proper URL references changed in your WordPress installation, then you should be live and ready to go. Now what we've discussed primarily is for a shared economy hosting environment. You will find that with daddy, without Jonah's was SiteGround in motion, just host. There's plenty of shared hosting economy environments out there. So what if you're on a managed hosting platform like cloud ways? What if you're bringing your, you're taking your business to the next level and you have upgraded to managed cloud hosting, like cloud ways. So if you're doing that, It's really easy to set up your own staging environment. In this case, let's look at an example. You get your own Cloud ways dot apps. We click this button and it takes us to our WordPress dash, numbers, dotCloud ways, diets. It's basically our own private staging URL that we can play around. We can sandbox, create the website for our client, whatever you wanna do. And then when it's time to go live, there just a, just a few critical steps. So the first would be to go in here and click Domain Management. In Domain Management, all you have to do is type in the domain name that you want to launch to. You put that under primary domain and then click Save changes. So that will set up the domain name in Cloud ways. And if you do not need to have better search and replace cloud ways, since there are premium solution, cloud ways will handle all that URL redirection for you. So they're going to change all of the URLs from this from your staging sandbox URL to your live domain name. So that's great in your Cloud ways platform. But how do we make that live on the Internet? Well, once you do that and you can get more information by clicking more details here, how do I take my website live from Cloud ways? It's going to tell you that you need to add a DNS record, map your domain and manage DNS records. So it's really simple. You go to access details. And over here is the public IP address to your server. In Cloud ways. All you have to do is copy that and then go into your domain register two are for the domain you're launching two. Let's look at an example here with Cloud ways. And just change your primary a record to the domain name or to the IP address that we just copied. This would be your a. You might see it as an AT for root or the primary, a type of record and an at symbol and then paste your IP address. You might also add an additional record for www and paste the same IP address. That's for adding a www before your domain name. So you have to add your live domain name into domain management. You have to map your DNS record to the IP address of your server in Cloud ways. And then one more thing. Click SSL certificate on the side here, and then select the, Let's Encrypt. It's the free SSL certificate that you get with your Cloud ways account. Type in your email address, and then your domain name. And then check the apply wildcard option. Once you do that, you need to add your CNAME record to your DNS settings. It's just a CNAME record Acme challenge, and that's going to point to your Cloud ways Apps domain. So we add a C name type. And again, you can do this anywhere, any domain register, GoDaddy, Cloudflare, I own us Google domains. All of them allow you to add these DNS records. So this is just an example. We would add Acme challenge, and then we would copy this URL. When we do that, in this case, we uncheck the proxy and then click Save. Once you do that, click Verify DNS and then install certificate. And that's it. Cloud ways, since it's a premium upgraded solution, they handle all the technicalities for you and make sure that your SSL certificate gets set up properly. So in Cloud ways, all you have to do is add your domain under Domain Management at your DNS record. Very important. The DNS is technically what will make this live on the internet for everybody to see, and then add your SSL certificate. So once you've done that, whether you're on a shared environment or you're on Managed Cloud hosting, your launching the website, taking it from your sandbox mode is what I like to call it. Whatever URL that you're working on, whether it's a sub-domain or a sandbox or staging euro, whatever you're using, we're wanting to point that make it live on the internet with your official domain name that your client is using to conduct business. Once we've accomplished that, the website that we worked so hard on will be live on the internet for everybody to enjoy. And there you have it. A 20 step launch checklist. Let's recap these 20 processes. Number one, final client edits to review every pixel of every page. 3, check for grammar or speed test. Five, mobile friendliness and cross-browser compatibility. Number 6, SSL certificates. Number 7, test all links. Number h has contact forms and benign fabric cons. Number 10 managed WP 11 up, Judge, plus backups 12, uptime robot and follow that page 13, all in one SEO. 14, security. 15, Google Analytics. 16, Google Search Console 17. Good to review. 18. Add to your portfolio. Is that final payment? And 20 go live. And what's our homework? I want you to write down these processes and save it as your launch checklist on LinkedIn. And now you know how to polish and launch websites. 47. Maintaining Clients: Welcome, I'm late to your webmaster. In today's lesson, let's discuss maintaining client. So as a web designer, you design and develop websites for your clients. But as a webmaster, you will serve your clients on an ongoing basis. It's exciting to take on a new client, develop the perfect website. But your job isn't over when the site launches. What's involved in keeping your clients happy? So they'll continue to pay you as a webmaster. Maybe thought about that yet. Some clients have continued to pay me for over a decade. Why do they keep paying my pills? Because the value of their website is far above and beyond the cost of my monthly bill to them. That's the goal. That's the reality you want to convey to your clients to maintain them. Additionally, here are a few key elements to serving your clients. Number one, website maintenance. Number 2, site updates and requests, and number 3, invoicing and payments. Let's consider these three so you'll be prepared to serve you're paying clients. Number one, website maintenance. Did you watch the website maintenance plan lessons? We talked about all kinds of ideas and services for your website maintenance plan. These are the tasks that don't involve the client. Most of them like backups, security, hosting, up-time monitoring. They're on autopilot. You don't have to manually log in to perform those tasks. They take place on the backend. And you're only notified when there's an issue to troubleshoot. And that's rare and usually only takes a few minutes. The manual maintenance task is logging in to manage WP to update all your sites, WordPress core plugins and themes. I usually do this once a day and then just takes a few minutes. In fact, which do you think would be quicker? Logging into manage WP and clicking one update all button. Or manually logging into the admin area of every client website every day to perform these updates. I certainly choose the first option, Manage WP. That's a massive time-saver. I'm so grateful for that software. Otherwise, the monitoring services put out errors every now and then and you just needed to take care of them as needed. So takeaway number one, proactively use managed WP for WordPress updates and optimizations and reactively solve any issues that arise from the monitoring services. Number two is sight support and requests. It's true most of your maintenance services take place on the backend and the website itself remains relatively unchanged on the front end. But what about when your client calls to update or change something on the site? That's great. And they're paying for that privilege. Let them feel comfortable utilizing your services. Again, they're paying for that. I get several of these every single day. And most emails just take a few minutes to fulfill. So when a client does email, text or call you with an update or request, what do you do? Let's go over a few considerations. First. What is the nature of this request? So is it just a question that you can answer? Is it just a quick update? Maybe a phone number swamp, just adding or removing a gallery photo. Those are quick and easy. You can usually fulfill them within a few minutes. So go ahead and process them as they come in. I strive to have all minor requests fulfilled by nightfall and that's worked out great for me. Number two, what about longer updates, new features, new plug-ins, something that would take you several hours to fulfill. What do you do after you read that email? Will tread cautiously. Well, let's take a long time because you don't have experience with that task. Because you need to do a little research. See, that's not really your client's fault. That's just part of being a webmaster. Everything you take time to learn, builds your skill set. And the next client who asks you about that topic, you'll have a better understanding of the issue and can respond accordingly. I learn new things with nearly every client and we'll continue to learn more as technology evolves. And the more I know, the better I can serve clients who asked similar questions. The third consideration, what about new pages? Totally new designs? Well, first off, consider how long this will take. If he can fulfill it in less than an hour, just do it. You don't want to be known to nickel and dime your clients. But other requests truly do take several hours of your time. And the more experience you gain, the better you can spot these loaded requests right away. What happens then? What would you do in that case? Are you thinking of toggle? I am. You really have two options. You can use toggle, track your time, an invoice for the exact amount of time you spent times your hourly rate. Or the second option, quote that projects separately. Perhaps you'll charge 195 for that new landing page or 495 to add cart and checkout functionality to their existing site. Just make clear your intention to charge separately for this request and explain why this request is not included in their monthly payment. And when you start taking on larger clients, you'll notice requests coming in from them every few days. You'll certainly spent over an hour on these glands each month. So here's my process. Receive their e-mail, turn on Toggle, fulfill their request, turn off toggle. Then on the first of each month, send one invoice for the hours of websites supports bent the previous month. Some months will have any support. Others will have five to ten hours for certain clients. And number 4, whatever the request is, large or small, be responsive, be available by bone text, email. However, they prefer to communicate, serve your clients by fulfilling their requests as soon as you're able. This will go a long way to endearing them to you. Say, webmasters have a certain reputation. What's that reputation? Taking days, even weeks to respond to their clients. If they respond, I've heard those complaints for decades and it's just unacceptable. You can really stand out or providing good customer service. Takeaway number 2, dominate your market by mastering customer service. Number 3, invoicing and payments. Another portion of your time spent maintaining clients will be invoicing and processing payments. Did you sign up for wave or do you already have QuickBooks? Fortunately, these accounting services handle most of this for you on auto pilot. It's really awesome. Each client should have its own recurring invoice for the website maintenance plan. If all monthly invoices are set to the first of each month for convenience than the ones on auto pay, there will probably be about half of your client base will have their credit cards charged and a receipt sent to them all automatically. The others will be sent an e-mail with a link and an address if they want to send to check. Also automatic. Those clients will cut you a check which you'll receive in the mail and you'll have to manually deposit. Other than that, most everything on the accounting side takes place automatically. If you have your systems in place with the exception of failed payments, has your credit card ever expired? Have you ever lost it? For whatever reason, people get new credit cards and you'll have to update their card on file. Stay on top of these felt payments for that you can reach out and ask for their new credit card. Takeaway number 3, set up your accounting service like wave QuickBooks, et cetera, to handle invoicing and payment automatically. So to recap, what have we learned? The number one, proactively use managed WP than WordPress updates and optimizations and reactively and solve any issues that arise from the monitoring services. Remember to dominate your market by mastering customer service. Set up your accounting software, wave, QuickBooks, et cetera, to handle invoicing and payment automatically. What's our homework? Double-check your accounting software center so that you're all ready to start invoicing clients. So there you have it there now empowered to serve your clients through every step of the web design process. Earning, interviewing their website, sending proposals and contracts, invoicing and taxes, on-boarding clients, designing, developing, polishing, the launching website, and maintaining your clients. I'm really proud of you for sticking with these lessons. And I know that this information will greatly benefit you and your web design business. To summarize what we've learned and above all else, provide exceptional customer service and you will find success. I'm Leighton, and now you know how to maintain client. 48. PART 7: Conclusions & Takeaways: Welcome, I'm Leighton, your webmaster. I'm extremely proud of you for coming this far. You've been an amazing student and you learn so much about both Website design itself and the business of web design. In fact, let's recap all that we've learned. In the first set of lessons, we learned the fundamentals of web design, coding, domains, hosting, emails, SSL, security, WordPress, and the Devi theme. Next, we learn how to build a website. We learned that the Visual Builder, one-page sites, multi-page science, e-commerce, and mobile friendly websites. Where to go for design inspiration, image assets, and what Adobe software you can take advantage of to level up your designs. Then we pivoted to the business of what design with how to create a brand. We learned what brands are, how to create your brand, your website, and how to promote your brand forth, we tackled one of the most desired skills in all of website design and that search engine optimization, SEO. We learn tons of on-site and off-site SEO techniques, as well as how to incorporate this in your website design business. Later, we discussed my favorite topic and that's website maintenance plans, which include hosting, management, updates and security. And I gave you plenty of ideas on how to market and sell your website maintenance plan. Finally, I took you through the entire client process, which included earning and interviewing clients, quoting websites, sending proposals and contracts, invoices and taxes, on-boarding clients, designing, developing, polishing, and launching websites, and how to maintain your clients. All of that knowledge is incredibly empowering. Whether you are new to web design, freelancing, noodle creating a web design business or simply one. And to level up your existing agency. I know you've found several gyms that you're excited to apply to your business. To wrap up this course, I just want to go over a few conclusions, some caveats and key takeaways for success. Specifically, we're gonna look at Tim key takeaways for success. Ten things I wish I knew when I first started my website design business, and 10 things to avoid as you conduct business. Join me as we wrap up this journey together. 49. 10 Key Takeaways for Success: Welcome, I'm Leighton, your webmaster. In today's lesson, let's consider my 10 key takeaways for success as a web design business. Number 1. Be friendly and responsive. People do business with those they know like and trust. Again, people do business with those they know like and trust. The number one best service you can provide for your clients is your customer service. So be friendly, be likable. Let people get to know you. The more they like you, the more likely they are to hold on to you as a webmaster and refer you to others. In fact, in testimonials written about my agency, they write more about me than they do their own website. So being responsive and quick to resolve issues will go a long way. Be available for and take care of your precious clients. Your friendliness, your willingness to help will not go unnoticed. Number to automate, automate, automate anything that you can automate, do it. Let me give you a few examples. Sending recurring invoices, up-time monitoring, change detection, monthly analytics reports, backups, and the list goes on. I've automated all of these tasks and imagine all the time it would take to manually do all of those things for every single client. For example, let's say you send out 50 invoices on the first of each month. If each one takes you three minutes to prepare, that's a 150 minutes or 2.5 hours of your time every month. On the other hand, if your invoicing software it can do this for you. You'll spend five minutes once setting up those profiles. And you're done. Automating these basic tasks frees up your time to do more important things like meeting with clients and building websites. So anything that you can automate, go for it. Your time should be spent doing things that can't be automated and that others can't do for you. Number 3, have systems in place. Don't reinvent the wheel for each project. Anything that you do over and over again, like preparing quotes, interviewing clients, writing up contracts, longeing websites can be simplified into a process. In business, this term is SOP, or standard operating procedure, which is a list of step-by-step instructions on how to perform routine operations. But things you do the same way each time to create a new contract and proposal from scratch. Each time, they'll guess, uh, how to launch a website, systematically, make a list and follow it each time needed to perform that task. You'll save a ton of time. And you'll ensure that task is done properly and efficiently for each client. Number four, specialize. So when I was first starting out, I wanted to offer everything. I wanted to be a one-stop shop. That meant web design, development, custom coding, databases, e-commerce, branding, printing, logos, and much more. I eventually discovered two major issues with that. Number one, I wasn't good at all of those services. My forte was and still is WordPress, website design and development, and running a business. Number two, those other services didn't bring me much money. That's why you need to regularly review your financials, figure out what actually generates considerable revenue, and cut out the services that you don't excel at or make much money with. Furthermore, it's really kind or to the businesses to, because you want them to get the best product or service possible. And if that means a website from you and a logo from somebody else, then so be it. Be a specialist, not a jack of all trades. And you will find success number 5. So value, not features. This applies to any product you sell. But for website design, there's plenty of features you can build. A WordPress site, a mobile site, photo galleries, contact forms, maps, testimonials, videos. Those features are awesome. But do they sound like they're worth $2000.5 thousand dollars for a content or maybe not. But what's the value of a website? So if a roofer is landing at $10 thousand lead through their website and they sell two of those per month, then their website is valued at $20 thousand per month. Now, does it sound valuable to pay $5 thousand for that website? Yeah, sell the value of a website, not the features on it. Value-based marketing is one of the best ways to level up your sales. Figure out how the website is going to help the businesses bottom line, then craft your sales pitch around that. As long as the business owner can see the value and profit in something, the exact cost becomes irrelevant. Number 6, focus on people, not money. So when you're growing a business, it's easy to become obsessed with making money. I mean, you've got to pay your bills. But when that's your primary motivation, Good. Take you down a dark path. Long hours, shady business practices, overcharging, misrepresenting value are all possible side effects of being solely focused on money. I encourage you to focus on helping people identify their problems and offer practical solutions instead of just selling them the most expensive product you can. Morally, you'll feel a lot better when you show empathy. Identify your why, why you're pursuing this business. What's your personal goals are? How much do you need to earn each year, each month? What are your personal priorities? How will this business support those priorities? See it's easy to grow, scale obsess over money, but you won't be truly happy unless you're fulfilling your personal goals. So be human, be empathetic, identify your why and focus on helping people instead of just making money at all costs. Number 7, ask for reviews. Your brands digital reputation for better or worse. It's tied to your reviews. That means Google reviews, Facebook recommendations, and Yelp or TripAdvisor reviews. If you're in certain industries, as consumers, we pay attention to reviews. So as a business owner, you can't dismiss him. And while it might be hard to gain these reviews organically, you don't have to sit around and wait for one. Be proactive since you're happy clients, a link directly to your review form on Google and you'll have a much greater chance and landing positive five-star reviews. Collect as many of those as possible. The more you earn, the better your business will be perceived by consumers. And if you do get a lower view, like a one-star, one, life will go on and you can take that as a learning experience. First off, why did that person right? You'll one-star review. And how can you learn from that feedback to prevent it in the future? And understand that if several people write the same negative comment, that's no longer an anomaly, it's a trend, maybe even a fact. So fix it. And second, bearing that one-star review with a bunch of five-star ones. That'll go a long way to improving your average rating. Number 8. Build your portfolio. In the website design business. Nobody cares if you went to college. Nobody is asking for your licenses or your education. They just want you to know your stuff. Portfolio is how you show off your work. Start building that from the very first project you complete. Carefully curate your portfolio by only putting your best work and highlighting your best of the best at the top, you're going for quality, not quantity in your portfolio. And when you're meeting with a client, if they're in the construction industry, why not show them examples of websites you've done in that same industry. Like a roofer website, electricians, plumbers, real answers. They might not be as interested in your coffee shop or her beauty is the loan websites. But that they see you've helped others in their market. That'll grab their attention. Tailor your sales approach to their industry. A successful website designer knows their portfolio inside and out. They know their go-to website to show off and they know which websites I built in what industries. Number 9. Choose the right tools. What would a handyman be without a hammer, a landscape, or without a lawnmower, a diver without proper scuba gear, tools are essential to performing tasks. And certain tools can either speed up or slow down the process. So what tools do you use as a web designer? At bare minimum, you'll need a computer or a smartphone, WordPress. But what else? If you figure in software, there's an endless supply of shiny new software to try out. But just because it's new doesn't mean it's best. Stick to the mature, stable software that's here to stay. I think Adobe, Microsoft, Office, wave, spend time learning those tools and ignore all the shiny new betas off toward that comes your way. Terrorists, nothing worse than wasting time switching over to a new piece of software. Then they close up after a few years and in support. Invest in tools that failure needs. Add value to your company and are built by companies are going to last. And number 10, continue your education. Always be a student. Keep learning with every new project. I still to this day learn new things with every website I build. Whether I'm trying out a new feature, a new design idea, learning a new plugin, developing functionality that I didn't previously have experienced with. I grow my knowledge and skill set with every project, even decades into this business. Take time to thoroughly learn new skills once. Then you want the re-learn them on subsequent projects. Follow quality tech blogs like TechCrunch and Mashable, listened to reputable podcasts. If you're a DB user, keep up with the Elegant Themes blog, which is one of the highest quality Wordpress blogs I have ever come across. Always be a student. Be humble, be modest, and you will find success in life. So there you have it. Let's recap the 10 key takeaways for success. Number one, be friendly and responsive. Number to automate, Automate to automate. Number 3, have systems in place for specialized cell value not features. Number 6, focus on people, not money. Number 7, ask for reviews. Number 8, build your portfolio. And 19, choose the right tools. And number 10, continue your education. I'm late 10 and now you know, ten key takeaways for success. 50. 10 Things I Wish I Knew Starting Out in Business: Welcome, I'm lengthen your webmaster. In today's lesson. Let's consider my 10 things I wish I knew starting out my web design business back in 2006. Number one, cell website maintenance plans. I fought this for the first 40 years. I had the attitude of that's always the money for a client. Why would they pay me $75 when they could get their own hosting pretend bucks? It's more ethical for me to set up posting in their name. When years later I've fed a change of mindset on that. A quality website maintenance plane is such a good deal for your clients. Ideally alive, functional, content-driven website on a secure server will bring in leads that are exceed the cost of a website maintenance plan. So the value is undeniable. And on your end, these website maintenance plans can accumulate to a handsome recurring revenue over time. With this course, you learn, but the value of a website maintenance plan and what services are involved. So go ahead and start marketing your hosting and website maintenance plans to your clients as soon as possible. Number two, market yourself. I fought this for the first decade until it became undeniably clear. People want authenticity. They're done with the corporate impersonal feeling. They want to see you and feel connected to you, especially if you're looking to establish a long-term relationship. So how do you start marketing yourself? Get a professional headshot, put it on your website, record some video, introduce yourself, and don't be afraid to share some humor or some personal hobbies of years. This will go a long way to endearing people to you. Remind them you're human and let them get to know you. Number 3, focus on quality clients. Now when you're first starting out, I know you're hungry for any gig you can land. And that's understandable. You have bills, you've got a mortgage, groceries to buy. So it's natural to take on any website project you can find. But as you grow, you build your portfolio and reviews. Give yourself permission to start being more selective. Maybe steer clear of those low budget and DIY projects. You'll find a lot of DIY or so calculate the value of a website by the Wix or Squarespace pricing page as if a website only costs 20 bucks or so per month. But that's okay. Let people manage their own budgets. Just offer them your quote and allow them to dignity. 51. 10 Things to Avoid as a Web Design Business: Welcome, I'm Leighton, your web designer. In today's lesson, let's consider a 10 things to avoid as a website design. Number 1, scope creep. Now we recently talked about this in the designing and developing websites lesson. This is when a minor project turns major. When you've already agreed to a set amount of work, you've gotten to downpayment. And then slowly the project creeps bigger and bigger to the point that you've sunk several more hours than you anticipated. For example, now they want a blog, a few more pages. And then now they tell you they want to sell products on the website. Didn't agree to any of that, but they keep adding more to the project. So how can you avoid scope creep? Address it, see it for what it is, address it, and offer a quote for the requested work. The clients either going to nixed that idea or pay for it. Either way, you win. Number 2, offering everything. So the basic advice is, if you aren't good at a service, don't offer it. The temptation is to please clients by offering as many services as possible. Being a yes man, whether that be video, graphic design, photography, marketing, advertising, It's easy to be enticed by the amount of businesses are willing to pay for those services. But if you aren't good at a particular skill, you're really doing that business a disservice by taking that on, instead of taking their money and pretending you know what you're doing, either take the skill seriously and learn it, or refer your client to an expert. Somebody who prefers that type of work, make connections with specialists who can handle the skills you either don't possess or don't enjoy doing. Don't offer every skill. Only the skills you excel at. Number 3, paid advertising. Now if you've advertised successfully in the past, then go ahead and do it. Run some ads. But if you're new to advertising and website design, let me tell you, ads can be a hot waste of money. Now I realize certain industries like pharmaceuticals, car dealerships, mattress stores. You're gonna see those advertising and pretty heavily on the traditional methods like television. Digital options include platforms like Facebook ads and Google ads. On Facebook, you pay a few dollars to boost a post, which means more people will see it. And there's other ad options there as well. Now you can rack up a hefty bill and for what likes and comments. If you do advertise on Facebook, you need to install your Facebook pixel in really fine tune your audience. Makes sure the people you're paying to be in front of really are people who could use your services. Otherwise, you're completely wasting your money. Showing posts about web design to people who don't even own businesses. Now on Google ads, you pay per click or PPC. That means that your ad is shown in the Add section of a Google search result, which is all the way at the top. And you'll be charged by bucks 10 bucks 2050. When someone clicks, the cost varies on a lot of different factors. Mostly the competition. You can set the PPC to auto or manually choose a budget. Auto will take into consideration what other web designers are bidding for that keyword and that spot, and then rank you competitively. If you're running ads like this, your landing page needs to be top-notch and you need your phone number and contact information to be prominent. You need clear headings, a call to action, and some way to capture their email address. Your landing page needs to be optimized to convert visitors into clients. If you aren't doing that, if you don't have a sales funnel, your ads dollars are completely wasted. Your other option as a website designer is referral and network marketing. Meet business owners, build referral partners and nurture these relationships. That's my suggestion. Number 4, miscommunication. This is one of the greatest cause of problems, both in business and personal relationships. Miscommunication is where you're not communicating effectively. Let me give you a few examples. You quote a client for a website and deposit their down-payment a weekend to the project, you realize they actually wanted e-commerce, not a standard brochure website, but you agreed to whatever website they wanted for that price. What's the problem here? Miscommunication. You did not interview them properly. They neglected to relate this to you. Or maybe a little above. Another example. You take a downpayment. Two weeks later, you've received no content yet, the client reaches out asking how the website is going. What's the problem? Miscommunication. You did not explicitly outline what content you needed, nor did you follow up throughout those two weeks, nor did the client thing to ask you what you needed. Miscommunication. A third example, you build a website for a client, then you start charging them, you monthly maintenance be the client receives this invoice and is very confused, even angry. I mean, they paid you for their website. Why are they receiving another bill? What's the problem here? Miscommunication. Apparently, somewhere along the line, assumptions were made, but agreements were not. People like to know exactly what to expect when the bill comes. So when you're dealing with their money, be very clear. How much is being charged, the sales tax, the credit card fee, and how often. Clear communication can solve problems before they even arise. Avoid miscommunication and business will be a lot smoother. Number 5, skipping on servers. Hosting is the number one most important piece of a website's infrastructure. As appealing as the cheap economy server sound, ten bucks or so for a server, don't fall for it. You're setting yourself up for all kinds of problems, like hacks, slowness, server timeouts, just to name a few. For your first few projects, you can get away with the top tier economy server. But as you grow, earn more clients, especially higher dollar clients, you really should look into those dedicated servers. Plus the more clients you put on the server, the better you offset the cost of the server. Higher-quality servers will be faster, more reliable, and more secure. While the top tier I own is shared server. Certainly well for so many years now, I'm renting, they're more expensive dedicated servers, your budget will expand as you take on more clients. So keep your eyes focused on the importance of your hosting server. Number 6, freebies. This is where you do a website for free in exchange for exposure. It's decent arrangement if the company you're building a website for is very popular. But hear me out. Every four profit website you build is going to increase your exposure and reviews anyways. So if you're already getting that with a pain clients, How would you give away your services for free? Now you'll especially come across this with family and friends. I mean, they know you're a web designer. They want to support you. But at the same time, you're trying to raise your rates and land higher value clients. You don't want to give away your work for free, but you also don't want to milk your family and friends. So what do you do? I can't make this decision for you. You've got to factor in their budget and their marketing plan. If they're willing to work along with the website to drum up business. My suggestion is to charge them a discounted rate and clearly communicate exactly what you're offering and what they can expect from this transaction. Make it very professional, put in writing, and make them sign your contract so they feel like a client. And yes, absolutely get a review from them and add them to your portfolio. If it qualifies as an impressive website, make sure they know you're going to hit, you're going to hit them up for that review. Number 7. In secure websites. These are websites without an SSL certificate. Several years ago, you only needed an SSL certificate when the website had credit card transactions or sensitive data. That wasn't necessary for a typical brochure site. But now, as we've learned in several lessons, SSL certificates not only encrypt your website's traffic, but they also improve your search engine rankings and remove the not secure icon in your browser. All benefits plus the cost of SSL certificates as really come down. Now you can go on for 20 bucks and ionise or for a $100, you can get unlimited SSL for all of your websites. Avoid insecure websites don't look good for your customers and will only cause problems down the line. So go ahead, secure your site as soon as you launch it. Number 8, toxic clients. These are the clients that cause you the most stress. The ones that make your heart stop when they call the ones that give you grief about your prices. They say that 10 percent of your clients will cause 90 percent of your problems. And let me tell you that is so true. The key is, first, identify your 10 percent, which clients of yours cause you the most stress. It's not always easy to avoid toxic clients. Because their toxicity might not come out until later in the relationship. But once it does come out, identify it for what it is. And second, where appropriate, pass them off to another web designer or discontinue your maintenance on their site, set up their own hosting account, and transfer the website into that. Once you've got ties with toxic clients, you don't feel much, much better. And you can redirect your energy to gaining and maintaining quality clients. But are there warning signs when you're first interviewing a client? From my experience, let me give you a few ideas, things to look out for. Balking at your price, negotiating it lower than your worth. Requesting several revisions to your contract. Complaining excessively about their previous web designers. Insisting on a certain WordPress theme other than Devi, insisting on a different CMS like Joomla or Drupal, insisting on hosting the website on their own. Cheap, GoDaddy economies server. Repeatedly stressing how this project needs to get done asap. It needs to be done yesterday. Demanding to be on page one of Google without acting on your practical SEO suggestions. See there's tons of warning signs. And these do come with experience. But once you see these patterns for yourself, you can avoid a stressful situation before it even happens. Number eight, not learning code. Now I'm not telling you you need to turn into a full-time web developer and spin your hours coding websites instead of designing and selling them. But it's valuable to at least have a basic understanding of code. Fortunately, it's completely free to learn HTML, CSS, JavaScript, PHP, and other web programming languages. My recommendation is to spend a few hours on each of these languages. Go to one of the many free resources out there, like W3 schools.com to get a foundational education. You'll feel far more confident when problems arise, like error messages, PHP warnings, or other things that you can't solve through the front end of WordPress or Devi. Code will empower you as you polish your production quality websites. Html, we'll teach you how websites are framed. Css will allow you to refine the design of your website. Javascript will help you polish your sites functionality. And PHP will especially come in handy when you need extra functionality and edits to your WordPress site. Number 10. Not keeping up with the trends. Technology is changing all the time. There's always new software to either embrace or get distracted by. There's new updates to programming languages. There's new features in WordPress and Divi that you can learn. There's new updates to Photoshop and other Adobe software coming out every year. There's new updates and features in your hosting server. And I own this account. There's new browser and operating system updates on your business computer. There's new hardware and new desktops, laptops, tablets and smartphones coming out. As a tech company, you have to keep up with these trends. Follow the best tech blogs like Tech Crunch and Mashable. Listen to the quality podcasts and keep learning. My only caveat here is to balance that by not getting distracted with unnecessary tech. Tech that isn't going to increase the value of your business. Software that isn't gonna stick around. New WordPress themes, new CMS's, new WordPress plugins. Basically anything that does the same thing as your tried and true software. You can keep it on your radar, but don't be quick to jump ship. State focused on providing the best service to your clients, which means sticking to your dependable software while keeping up with the noteworthy trends and implementing what becomes mainstream. If you avoid all trends, if you refuse to pivot, you could get left in the dust. You have to be adaptable to be successful. And there you have it. Let's recap the things to avoid as a website designer. Number 1, and avoid scope creep. Number to avoid offering everything. Number 3, avoid paid advertising. And therefore avoid miscommunication. Avoid skipping on servers. Number 6, avoid freebies. Number seven, avoid insecure website. Number 8, avoid toxic client. Number 9, avoid not learning code. And number 10, avoid not keeping up with trends. I'm late. And now you know, and things to avoid as a website.