The Practical Guide on How to Build a Wordpress Website with Divi

1. Part 1: A short introduction to Pim, Wordpress & Divi: Hi, and welcome to discourse about the easy way to build a WordPress website for your business. Today, I will not be presenting, but I'll be introducing a very special guest who will tell you all about, yeah, what WordPress is, why you'll need a website, and all the tools you need to actually build an awesome WordPress website yourself, the easy way. And this guest is very special. He's a really good friend of mine. He's actually a former pro snowboarder. He did that for eight years, but now he turned it completely around, and he's an absolute expert in how you built WordPress websites with DV. He built over 150 websites himself already has a successful agency and worked in many other agencies as well and published his first website before WordPress even existed. He has been working in this for 20 years already. This guy knows his stuff. I'm very happy to introduce him. P. Here he is. Hey, Mark. What's up? Hey. So, P, hearing from you, what will we be covering in this course. Well, basically, what I'm going to teach you guys is why you need a website in the first place as an entrepreneur or a freelancer. If you need a website, what are the options? What is the best way to get a website? All the tools and tricks you need to get your website up and running, build it yourself, and generate your own success. Sounds awesome. Well, let's quickly get into this. I mean, I'll be out of the course for now. But, take the way, man. Let's go. 2. Why a (new) website?: All right, So why do you want to have a website? A website can give you many things. It can give you a seals that can give you leads. You can teach people, you can inspire people. In all cases, it's a form to reach people. I believe that if you don't have a website, your business does not exist. So it doesn't matter if you're starting entrepreneur, you're a small business owner or you have a medium-sized business or whatever. I believe you will need a website or at least it can help you to achieve your goals. But let's talk about a little bit before we start building the things. What sort of websites are out there and what is the right fit for you and for your business where if your goals, what that website do you need to create? The type of websites that are out there is you have, of course, e-commerce where you can sell products or other people's products. Their online courses out there, online portfolios. The websites we're going to talk about mostly are websites that are more like an online portfolios as like your online business guard, where you can show other people your accompany or surfaces. And basically people can get to know you enter company and they see you. What you've accomplished for other people, what you can accomplish for them, why they need you. But also a good way how to generate leads or maybe close some deals or sell some surfaces. So there are many things that you can do. I'm going to show you all the most important things about that. Explain you exactly how you can do it. Before we're going to do that. I want to invite your challenge you to think about what do I want to get out of this website? So what do I need it for? Some people may be really needed to get more sales. And some people is more like a hybrid thing where you're closing the deuce of line by talking to people and get, get your customers deadweight. But after talking with your customers, they want to see on your website like conformation and also to gain some trust about your story that you shared with them. To see like, okay, what is it exactly that you have accomplished or what is it exactly that you're offering? And they want to dive into that a little bit more and engage with you and your brand. Probably is gonna be more of the last part. We're going to talk a little bit about all those other things with e-commerce to send you a little bit in the direction if you want to go there. But the basis of your website is going to be an online portfolio for your business. And I'm gonna show you exactly how you can do it. 3. Who are you going to build your website for?: All right. Now you know, you really need a website. But do you know also who are you going to build this website for him? It's really important in my opinion, to always build a website for your target audience, for your customer. Of course, in the website is going to be about you, your company and your surfaces. But you're actually going to create it for out of people. So people really resonate with that. There's a big chance that you already have a small business or medium-sized business. Maybe you're just starting out. For the purpose of this video, we decided that we're going to show you a real life example for a social media agency. And let's say the target audience is small business owners. They want to generate more business through social media or have some more brand awareness or other goals that they can achieve. For the purpose of this course, the website is gonna be about the social media agency. Would you fill in the blank for whatever Sheriff your company, you have four. And imply this for your own company. 4. Comparing website builders: Why Wordpress?: Let's talk a little bit about what dose to use for your new website. I love WordPress websites, but I have tried almost all the tools out there because especially at about figuring out what works and why. So let me tell you all the good or the bad or the ugly. There are many solutions out. There. Were some pros and some cons and would like to go over with them for you. But first, some data from all the websites that are out there in the world. What are very many, of course, dirty 7% of all websites out there, our own WordPress, even more, 60% of all CMS systems, there's content management systems that are basically websites that you can manage the content without adding any codes. So there's an interface, there's some area where you can fill in a dy dt or upload a photo without coding, they actually website that's called the CMS system. 60% of all CMS systems are used by WordPress. So why is that? Well, WordPress is an open source system. What basically is the biggest advantage and disadvantage at the same time, because open-source means everybody can work on it. Everybody can build a WordPress theme or a plug-in if you know how to do it. Of course. There are many options out there. Therefore, it's also fairly innovative and innovating in such a rapid pace. There are also a lot of bad options out there as well. But luckily for you, I almost said them out all of them and I'm just gonna share the good stuff with you. Let's first talk a little bit about other options that are out there with the pros and the cons. There are different ways that you can build a website. Of course, there's always the way when you can code everything yourself. So if you want to learn how to use PHP, JavaScript, HTML, CSS, these are all God languages used to build websites. Luckily for people like you and me, there are many ways that you can use some sort of software that basically writes the code for you. If you use a page builder and something like Shopify, WordPress, many of the other options out there. There's a big chance that if you upload an image through this software, the software is writing a piece of code with HTML and the other languages and just explained that's making the image actually a pair. So you don't need to write thousand lines of goats. But the program is doing this for you. Over the years, these interfaces become much more user-friendly and also much more visual attractive. So it's a lot more fun to build websites this way and also a lot more efficient. And there are some advantages and disadvantages between the different tools and not seeing it as good or bad. I'm going to explain what I prefer and why I prefer it. But I believe all of those tools are there for a reason or for somebody's reason. Many people may be discovered one option that's called weeks, which is a do it yourself page builder. It's very easy to use. It has is the interface. But a disadvantage can be, in my opinion, is that it's very limiting. If you're starting out. You don't want to invest a lot of time and you want to get something up quickly. There is an option that you can use with weeks. What I don't like so much about weeks is that it's very limiting their deems that you can choose from. But if you want to change the theme, that's not possible. So it doesn't give you any creative freedom. And this is what I searched in a tool that I can create something that resonates with me and that's my own expression of how I wanted to show it. I don't want to have any limitations in my design or functionalities. So therefore, I don't like options like weeks or any other really easy to use page builders like that. And also, those things can be very expensive. So if you're a little bit more and maybe into the e-commerce or have sales pages. There's a term for a webpage where you can sell certain things if you want to have functionalities such as, for example, like a Facebook like button, you pay five-years a month in Shopify to use a Facebook like button if you wanted to have a maps functionality. If you're paying a fee for that as well. So all the functionalities add up really quickly. So maybe it seems really cheap and inexpensive to use over the time. It can be quite expensive for something that you cannot easily change into another theme, cannot change the design at all. And it's very limited in functions. Therefore, maybe it's good if you're starting out, but if you're looking for something more at finance or maybe a little bit more professional. Then there's a place for WordPress, for example. One thing that we would like to mention is that if you are into e-commerce or want to sell physical products, or maybe sell digital products as well as something that you could explore is Shopify. Shopify is the biggest platform selling stuff online. So definitely check out that. Also what you can check out if you are planning to have a lot of inventory and a lot of different types of products. You can look into my Santo, Santo 2. To be specific. This is more for bigger companies that have a lot of products to sell. So let's say you have a 1000 products or more. And you want to open a real TO and retail shop or something like that. You can start out with WordPress with something like WooCommerce up to maybe like 1000 products. But if you've outgrown that people are using most often and more stock inventory at fonts. Piece of software. What is my Santo? But you really need to have professional developers in your team or hire them to build your website. Because there's gonna be a lot of coding involved. So just to know for you for the options out there, you can open a Shopify store online pretty quickly. But you do pay for all the features for all the apps that you need to use. If you're looking for a normal website or still if you want to have an e-commerce website as well, WordPress is the recommended to buy me more about that a little bit later in the training. If you really want to make a comparison. There are some more tools out there. For example, Squarespace, Drupal and Squarespace, actually pretty cool, but still doesn't give you the freedom as much as you would get with WordPress and Drupal and myopia and are a little bit outdated. They are not supported as much anymore and therefore are not a really good option in my Albion. Alright, let's talk about why I love WordPress. Wordpress is open source and therefore gifts you many options to choose fund. There are over 50 thousand plugins that you can use for your websites. So those are basically apps that you go Plugins and you can upload them. Some of them are for free, some of them you pay something for, some of them you can, they a lot for it. But these are pieces of software that you can upload to your website. Basically what your need is a few things when you start your WordPress website, because it's more of a do-it-yourself method. And I like to compare it with do-it-yourself page builders such as weeks. Something like that, is maybe like you're finding yourself a job as an employee in a company. It can be very limiting. It can has his place for some people. But you know exactly what you get. And that's it. With WordPress is more like being a freelancer or a small business owner. You need to figure it out a bunch of more things yourself. And it comes with a lot more responsibilities, but it gives you a lot of freedom. And if you do it right, a lot more benefits. With that said, guns with some risks. Risks and it's a little bit more time-consuming, but I think it's worth it to put in the air for it to figure it all out. 5. Comparing Wordpress theme builders: Why Divi?: So for your new website, we're going to build it with WordPress. With WordPress, you need a couple of things. The first thing that you're going to need is a domain name and web hosting. But more about that later in a new video. Once you have your domain name and web hosting setup, you've got WordPress installed. The thing that you're going to need is a WordPress feed. You can, of course, higher web design or web developer to build your custom feed. But this can be quite expensive and can take a lot of time to build. Luckily, there are many good solutions these days. To build a website yourself with a page builder or WordPress feet, and it can do that as well. There are a couple of options actually, there are many options, but there are a couple of good ones that we can discuss about. And maybe you've heard about a few of them are maybe not. Anyway, the options that we're going to discover a little bit. And the first one will be the WordPress. Farther apart, There's a page builder inside built into F0. So as far as I know, you cannot use this Alpha builder in any other themes. What other page builders can do sometimes. But within the team, you can build a website with the page builder yourself. What a page builder isn't. Drag-and-drop interface, a dragon drop piece of software where you can build a website and all the elements yourself. What I don't like so much about DFL, a WordPress theme is that it comes with so much options, and therefore it's way too much time-consuming for me to build websites like that. It's a great options if you want to have a lot of options and a lot of settings and functionalities. But this can be quite overwhelming. And I don't think it's the most efficient way to build beautiful website yourself. Then the next option that they would like to talk about with you is Elementor. Elementor page builder. You can build quite easy and fast WordPress websites and can be a great alternative for DC is just another option, is really user-friendly. They're doing a great job. There's some pros and cons and differences from Diffie, but it can be a great option to, then there are three other more options that it would like to mention before. We're going to talk about the option that we will be using. The other options are a little bit more outdated, but you still see a lot of websites out there using those page builders. So that's WP bakery. Wp stands for WordPress, WP builder, or official composer. Those three options are a little bit limited. Page builders, in my opinion, it's quite easy to use drag and drop to build a website yourself, but they are a little bit limited and a little bit outdated, so it's not so much fun to use them, comes with quite some options. So therefore, a lot of websites are built with them, but it definitely doesn't give you so much The freedom in terms of design. What I like so much about things like a father Elementor or DV, the thing that we're going to use. So for example, if you want to have a box shadow behind an image, this is not a standard functionality. It will require some coding with CSS, for example, to make the shadow appear behind the image. For me, it doesn't make it so much user-friendly to create beautiful websites. I like to have the freedom and the designs that I make from a website. For my profession, I need to use all of those tools because I also changing other people websites that using the other tools. We also built custom themes ourselves. If we need to build a little bit more at Fanta website. But like 90% of the time when we're building new websites, we are choosing for the two d Phi. Dy. Dy is a page builder or in my opinion, is actually a WordPress theme builder because it does a little bit more than just building beaches. It's actually used for building whole websites created by Elegant Themes. And it's a very easy and fun way to build websites. It's a very user-friendly interface, so the software tools very easy to use. They have great documentation by the way, which you should not do need after watching those videos because we chunk it down just for the most important stuff for you. But they're coming out with new functionalities almost every week. They do it in such a way that is, once you're used to using those tools, you can use the same methods in all the functionalities. It comes with modules like text modules, image modules, maps, etc. And once you know the basic functionalities, how to set up those modules yourself when they come out with new functionalities and will be super easy for you to use that same knowledge and ways that you habits and say. So basically all the modules always work in the same way. Once you understand a few basic ones, you will understand all of them were dead set. It will require some time to learn maybe a day or two or tree if you're used to page builders from building websites in a past like Visual Composer or a Vada. And now you're changing to defeat. It's a different way of thinking. It will require a little bit of time and again, give a little bit of friction. But once you're over that, I'm pretty sure that you will love Divi as much as I do and have a great time using it. Alright, That's why I love dv so much. We've covered many things. First and foremost, why you need a website in the first place? What are all the options out there, and what tools you're going to use to build your awesome website. I can't wait to start building a website and show you exactly how to do it. So let's not wait any further and dive deep in unless build a website. 6. Part 2: Setting up your Wordpress website: Alright, so the next videos I'm going to teach you setting up all the basics. We're going to go through oldest settings is very important to have all the settings correctly. As for the preparation of starting actually building the webpages, we need to change some settings in the software, install some plugins like like apps, and then we can start building afterwards. But right now, we go through all the settings. 7. Decide on your domain name: All right, We're going to set up some basics before we can actually start building the website. We're going to need two things. Number one, we are going to register a domain name, and we also need to have a web hosting baggage. So let's start with the first one, domain name registration. You're going to need to have a domain name. This is the word that you type in your Internet browser that will direct you to your website. So for example, if you type in www dot, my little website.com is going to show you the website. Then there's my little website.com is your domain name. So maybe you already have a domain name in mind. Maybe you're already but one. Anyway, there's some tips that I'm going to give you for buying your domain name. Didn't number one, try to avoid numbers in domain names. If possible. Not saying that it cannot work with numbers in your domain name, It's not a best practice because you always need to explain how to write the domain name. For example, if your company name is 711, How do you spell it? Is it 711.com? Is it as V E N number one? Number one that come anyway, you get it. It's already getting complicated. Explaining this to you in his video. If possible, try to avoid numbers. Didn't number two, if possible, try to avoid abbreviations. For example, abbreviation can be. As an example, do it yourself DIY. If you want to register a domain name, Do It Yourself. Tutorials.com, I recommend a little bit longer domain name instead of using abbreviations. This is better for SEO purposes and also easier for search engines to understand, but it's also more user-friendly. Although I'd refer a shorter domain names is better to use a little bit longer domain name instead of using every deviations domain Tip number tree, tried to avoid dashes if possible. So dashes are the little stripes between words. Sometimes people tried to use dashes when the domain name is already claimed by somebody else that they want to use. If you want to have a domain name like my little bony for example. And you put the two dashes between my end later and bony. Then also, like the first step, hard to explain to people how to spell the domain name. You want to have domain names easy to be in to remember and easy to spell. Therefore, if possible, always tried to afford dashes were dead set. If there's a really strong reason why you want to use a specific keyword brand name or something like that. And the preferred domain name is already begun, then you might want to consider using a dash or a stripe. But maybe you can come up with some phenomenon, synonyms, phenomenons. Maybe you can come up with some phenomenons for that. Okay, I explained you a little bit what not to do with domain names. So what should you do? Domain name should be easy to remember, easy to spell, and makes sense and while they are connected. So if you're using different words combined in a domain name, it should be still easy to read. For example, if you're using domain names that exists multiple words next to each other, like my little bony with the example. Then always try to avoid to use firewalls next two vowels and consonants next to consonants. So if its ends with an e, don't start the new award with an E because it's really hard to read for people that are there are two different words. My little, it's easy to read, but my yacht say, for example, is a little bit harder to read because it's going to look like one word in short, cried to make that the domain, it makes sense that it's easy to read. The Internet is getting a little bit older now, WordPress exists for 17 years at this moment. So more and more domain names are taken. Unfortunately, actually some people see this as digital real estate and tried to clean those domains to sell it. Many domain names are taken, but not all of them. Basically, all the.com domain name, domain names with 3456 letters are already Dagan. So it's hard to find if you want to start a website of about running, probably running.com is going to be taken. Maybe if you use another extension like the end phrase of the domain name, like Dr. Nell for Netherlands or dots for Spain for example. Then it's more likely that it's still exist. But still most goods, short domain names are already taken. What to do in this case, tried to make it a little bit longer by combining words. Maybe he's going to be new website for your running magazine and running.com is already taken. Then try to use something like running Magazine.com or D running magazine that's gone. What are the best extensions for your domain name? Like I said, the extension is the last part of your domain name. So this can be like.com.del, b0 for Belgium, etc. The most used internationally are.com domain names. If you want to have an international focused website, I always prefer to find a.com domain name. If it's really hard or impossible to find a dot-com donate and domain name. It's also possible to use something like.net or dot organization. Org.net is really good. If the.com is already taken, then it's a good plan B. But if you have the option, always go for the.com option. If you're more locally focused, like me doing more business in the Netherlands, I like to have a dot nl domain name because it's for Dutch companies. More likely to rank in the search engines from Google locally if you use a local domain name. So if I have my website dot and L is going to rank higher in Google delta nl. If I'm going to Google the same words in Google.com, what is more internationally focused is more likely than my website is going to rank lower. It's more focused on local marketing basically. But if you're more international focus tried to have an international domain name. Something else that you can consider about extensions. They're more extension. So the last part of the domain name coming out for specific audiences or a specific branches. So things that you'll see like DOD echo or a shop or whatever. There's a there's a debate or discussion about whether it's good or not. I think on the long-term shirt and extensions will take off. For example, I think more and more people will get used to using domain names with Doug shop. If you are into e-commerce or have a retail shop, it could make sense to use a domain name with my shop dot shop, for example, or my furniture shop. But I think most extensions are also much more expensive. And then normal domain names, they can be like 250 years a year. What does a lot more than if you buy a.com domain for maybe €16 or delta now for nine years, what is more average? There's a little bit more expensive. Yeah, good. Be easier to rank out other companies because it has the domain name in the extension. So for SEO factor, it could help a little bit. Although I like to optimize my website is more for people. And this is also the strategy of search engines like Google. They want you to build websites for people, not for search engines. One of the most important things to consider when register a domain name is trustworthiness. So people should be making a decision within 1 second, if they trust this domain name and they judge it based on the domain and based on the extension. So if you're going to have a domain name, for example, with biggest discounts dot XYZ, people will think it's spammy or they wouldn't trust it. Instead of discounts, specialists.com or free gifts, dot announce, something like that. 8. Choose your web hosting company: Now it's time to register your domain name. One of the most important things. When you're staring your domain name, you will do it through a web hosting company. For example, if you go to GoDaddy.com, one of the biggest web hosting companies in the world. You'll see I'm landing on the homepage of GoDaddy.com. And yet here you can start looking for your domain name. So I already tried a few things. For example, if you wanted to go to a domain like digital rocket, There's that come, that could be a name for our social media agency website. You can go for debt, but unfortunately, digital rocket dares.com is already taken, but it gives you some great alternatives. For example, digital rocket dir.com, if you want to register it on another example. Another example could be Bluehost.com. If you click here on the top in the header on domains and the menu here you can look for domain names as well. For example, social rocketeers.com. It says, congratulations, your domain name is available. Let's say I want to register this domain name. Just as an example, you can click the Proceed button. And this kind of likes shopping for anything online. They ask if you want to have free hosting, maybe some Microsoft package or something like that, I don't need it. I can just proceed to the checkout page where I fill in my billing and payment information, fooling your personal details and choose a payment method. Paypal is also optionally if you don't never credit card, you can pay through paper also with your debit card or ideal if you're from the Netherlands, for example. And then just purchase now go to the payment page. And your domain registered ideally is much easier for you if you register your domain names with the web hosting company you're planning to do your web hosting as well. Firstly side, where do you want to host your website before you complete the payment? You can use these websites to see if the domain name is available, but make your own decision where you want to host your website before registering your domains. So basically it's quite easy to buy your domain and your hosting baggage. However, this process of setting it all up can be a little bit challenging or difficult. We're going to share some links to documentation for all these hosting companies that we recommend that you can choose from. You can see this step-by-step how to set up the domain and the web hosting for yourself. Just follow the documentation or contact their support if you need any assistance. With that being said, I would like to give you five different options for hosting companies to register your domain names, and you're hosting packages. The first option that you can explore as a GoDaddy. I don't like GoDaddy personally that much because it doesn't offer great quality and grade surface. However, this is the most used web hosting company in the world, I think, because it's so, so cheap. But because it's so cheap, the customer service is not super bad, but it's not that great. The quality they put too many websites on a web surfer. So this can make your website a little bit loading slow. And, and it's really important to have fast loading website pages. This is important for SEO so that people find your website in Google, but also for the user experience, you don't want to have people waiting six seconds to load for your webpage. You went to work at fast. And this is one of the most important things for a good working website. This is one of the cheapest solutions. I would give that maybe a five or six out of ten in terms of quality and support. So it's a good option, but it's not the best. And this is especially good if you're more internationally focused. They also have at the bottom of the website other nationalities. If you want to see it in euros or US dollars, juice Baker settings that works for you. Alright. So the second International option is Bluehost. Bluehost.com has a little bit better support, is a little bit more expensive than GoDaddy, but also a little bit better quality. That makes it a good option as well. Was it for the domain registration part? Good luck with that. And looking forward to see you in the next video. 9. Install Wordpress in one click (kind of): In this video, I'm going to show you how you can install WordPress with the click of a button. Luckily, most web hosting companies offer the solution. So I'm going to show you how to do that right now. We already created the client in our Control Panel. We have to do that because we are an admin. Sometimes you need to do that, sometimes don't. Well, you always need to add the website, find the gland, then the domain name. Keep all the settings as, as L. We will do that later. We're going to click save. A new website is created. We wait for the red dot. When this is a wave, then it will be finished creating the new website. And we go to available packages. You see a ton of packages that you can install with a click of a button. We only need one called the WordPress. Will click it. And then what do we need to do is install this package. Click the location where you want to install it. Real social, rocket tears.com. This is going to be your database password, so you want to write it down somewhere in your notes to myself as well. Going to need that later. Then you can create the admin password that you can remember. Accept the license and click Install. Wait for the red dot again to go away. We installed WordPress. Let's see if it works. Here we go. Now we have a clean WordPress installation with the click of a button. You created the login details. Here you can log in with the account that you just created. Now you're inside your WordPress website. Congratulations. 10. Set up your emails: All right, So now you've installed your WordPress website. You'll probably also want to create an email account within our control panel. You just go to email. Once you're there, you go to e-mail mailbox and you just have to click Add new mailbox. You can give the name for the name for the email address. Just going to put it through social rocketeers for now. My name is beam, so I'm going to create BIM at social worker tiers.com. Instead of best word, you can remember or generate more difficult password. You can leave all the settings to the standard settings for now. Click Save. Once the red dot is a way, you can go to your web mill, took this it out. In our case, it's wet mill at the company that come at social rocket. There's the gum. The best word. There you go. You created the e-mail account. So we always recommend using an e-mail clients such as Gmail or Outlook. Just for the purpose of this video, I'm going to show you how you can easily install an email address in EPO mill as well. But your web hosting company will probably have some documentation how to set this up yourself. So I'm gonna do this. Who's telling Apple million this Dutch for it? How does have set up a paper mill? But you can also do Outlook or other male clients with e-mail, you have two options. I map settings or tree settings. Imap is the newer version that I recommend. Your devices synchronized emails. If you delete the email and your phone and will be deleted on your laptop as well. With POC tree, the emails get stored on your device, on your phone or in your laptop. I do not recommend that, but in some cases you might want to use it. But for most people just use IMAP. Once you are in your meal and you go to Preferences, you're going to click accounts because we're going to add a new account. You can click the plus symbol on the bottom left and click on our mail account. For my provider. This can be different for other web hosting companies. But we're going to click here other milk count. Set the name that you want to put in BIM at social rocketeers gum. And put in the best word. It says and I wrote to verify account, name or password. This is correct because we need to fill in the incoming and outgoing mail server manually. And our case, this name is tau company that busy store.edu, same for outgoing. And then lastly, this is something we cannot change, but you want to always fill in this first and then fill in also the username. It says automatic and liked grades a little bit blurred. But what it does, it only takes the first part of the email address. So in this case, my friend name theme. So basically it's saying automatically there's business, the username, but this is actually is not the username. If I'm going to click sign in right now is going to give an error. The login details are not correct. What do you need to do is take the whole email address, put it as a username, and then click the Sign In button. Now you can choose if you want to, what apps you want to use for the purpose and only want to install email right now. But maybe you want to have EPA nodes. That's up to you. Then you're done. I recommend always testing out if the email address is working. So I'm going to send myself an email right now. And once I received the e-mail, you also want to replay it. So you want to check if the incoming male books is working and if the outgoing mailbox is working. All right. That's it. 11. Set up your Wordpress settings: Alright, weekend, finally start building your website. So I'm on the website right now. This is how it looks. We're going to make it a beautiful website. So first we're going to finish the Wordpress settings with everything in the right place. We also going to install your WordPress theme. This is going to be the layout of your website that we're going to be customizing and show you how you can do that yourself. So you can create executive, the website, how you want it. Alright, so if you log into WordPress, you always need to go to your domain name and Mike shows your rocketeers.com forward slash WP stripe. Admin, brings you to the login page. Wp stands for WordPress and fill in the information that you put in while creating the WordPress installation. And we're going to log in right now. So the first step that we're going to do, you are logged in as the admin account. Since all WordPress installation standard comes with admin account, this is a little bit risky. So the first thing that I always do is I'm going to create a new account. My gaze, the username is going to be BIM. Bim rocketeers.com. Stricter, brewed in the best word. Write that down somewhere. Make myself an administrator. That's very important. There's give you the full right to change everything. And then I don't need to send myself an email about it. Created the new account. I'm going to log out, fill in the new username and password login. Now you see on the top-right how the beam stick there. I'm going to delete the admin account. This is gonna be much safer for your new website. There was the first step. We go from top to bottom, from left to right. And the first thing that you will notice is that it asks you to update WordPress. If you see this, please click Update now brings you to the update page. You'll see the symbol for updates with the number six. There are currently six updates and I'm going to update WordPress right now. All right, so we install the latest version of WordPress, the system that runs the website. And then we're going to update the plug-ins as well. So it comes with a standard plugin, it's called anchor Schmidt anti-spam. Plugins are like apps for your phone, but then plugins are, That's why your Website update all the plugins. This case only one. Alright, so if everything is updated, it should look something like this. The update process is starting and this is like a log, and then you see successfully, successfully, successfully, etcetera. All right, we're going back to the Update, space. Tremor updates to go. And that are your standard WordPress themes. We're not going to use these themes, but we're going to update it anyway. Alright, so everything is up-to-date. Now what do you want to do is you go to settings and then you go to general. We're gonna go through the settings. So after fitting is correctly, the first thing that you want to do that's also very important for SEO purposes. So you need to give Google and other search entering some information about who is your website, what it's about, etc. So I'm just going to fill in the company name over here. And if you have a slogan, you can put it over here. So let's come up with a tagline like social media content out of this world. Then what do we want to do is we want to change this to HTTPS, but we need to check first if it's working. Https is a secure protocol. That's basically making your website safer. If you get this error in your web hosting panel, you can active the SSL certificate. Sometimes you need to pay for it. With some companies, we give free SSL certificates, but you need to put it on active yourself in your hosting panel, search for your website. Click on it. And then you can activate SSL and Let's Encrypt SSL. Wait for the notification ducts to go away, to have an active. Sometimes it can take on one hour or so before it is will be active. All right, so now the SSL certificate should be active. So we're going to test it out first. Right now you'll see this lock on the top left. It means if you click on it that the certificate is valid. So now you have HTTPS. What do you want to do always is a selected domain name, Right-click which are mouse button and then cut it and paste it over here. The reason why I always got a base it is you cannot make any typos because if you type this wrong, then you cannot use the website anymore. So it's important to find a domain name, right? The WordPress address where to direct him and remove the last forward slash. If you've copied and pasted, it should look like this. The domain settings in your hosting phenol includes WOW, treat times a w and then did that, then you can include that as well. We have the settings without W's. It doesn't matter for what's better or not. Alright. Now we also need to put in the administration email address. So we created the email books, Social Work.com. I give the language settings for now to United States. And the time zone. I'm going to put it to Amsterdam because that's where we at. Here you can choose your date format. This will also be shown your blog articles and stuff like debt. So you might want to consider how you want to put it. I'm going to just put it as day, month, and year. How you want to use the time format. So in this case, let me see. This one should be the 24 hours setting. This is what we use in the Netherlands. The week starts with me on Monday and I'm going to click Save Changes should lock me out. And this is because we changed the domain name to HTTPS. So we need to login again. And it's asking me if this email address is correct. The current administration email address was this and we didn't verify the email yet. So I'm going to click Email is correct for right now. Let's open the email program. There we go. We just verify it. It redirects me to the website. And now we are finished with all the general Wordpress settings. Now we've got a bunch of other settings that we can go through. If you go to the writing section, and it should look like this, you can add the mail servers over here. If you are planning to use things like contact forums and stuff like that. But we're going to use plugins for debt. So we can also leave that for now. What's more important is the reading section. So how do you want to show you our latest posts or aesthetic boasts? This is something that we're going to do later as well. One setting that's super, super important is that do you want to have this website to be feasible for search engines? Do you want to make the website are bearing Google already, yes or no. If you want to blend on building it for the upcoming width weeks and you don't want to have it show in the rankings of Google, then you can click this grudge. But really important, put it in your calendar. Don't forget when you launch your website to unselect this box, because otherwise your website will not be found in the search engines. I'm going to leave it for now open because I want to start ranking in Google straightaway and build my website really fast. I'm going to click Save Changes. You can change some of the discussion settings. I like it, how they are right now. But you can decide if you want to change these rules about if you add a medically close comments on posts older than 14 days or something like that. I like it how it is. I'm going to leave that for now. Media settings, not really useful for the theme that we're going to use. So it might have been, you can skip that. And then something that I think it's super important is your permanent link settings. Because the colon settings of your permalink settings and the permanent link is the settings for how to domain name in your browser has a brain. You're going to create a new page. It's going to give it a number like beach is number 123 for this example. This is not very user-friendly and those are not very friendly for the search engines to understand what's the website is about. I always like to choose the hostname. So if I'm going to create a new beach that's called About page, then it's going to be social record tiers.com slash about Beach. I don't like it with numbers and dates and stuff like that. So just select both name, save the changes. And now you're done with all your settings. 12. Install the Divi theme: All right, So you're just finished a Wordpress settings and now it's time to start installing the WordPress theme. We can start building. It comes already with a few standard themes like 20171916. This one is currently active, as you can see right here. You could start a new beach. And it's going to look like a standard WordPress installation. So it's going to give you some explanation about the new block editor. The latest feature from WordPress, clicked it the right way right now, it has a pretty minimalistic and text editor feeling where you can add, for example, homepage. Then start writing over here. This is a webpage. I'm going to make a page like this and publish it right now. Isn't going to Luke super minimalistic, not how you want it. So now you've created a webpage and score the homepage. Hello, This is a webpage. Well, it is a webpage, but it's not the webpage we want. So let's start with the other theme so we can grid pages and give it this shape and forums how we want it. You can buy the WordPress theme at Elegant Themes.com. If you use the hosting package from us, you get the Divi theme from us, also with the license key. But if you decide to buy it yourself, That's also possible, then you can go to Elegant Themes. Those are the developers of this WordPress theme. Got a few themes, but the most one they've solved is dv. And there are many users. I think they have over a million users using this WordPress theme. And I already have an account, but if you want to buy it, you can click pricing and think and then get yearly x's for $89 US dollars a year or a lifetime x's. I'm going to log into my account right now. Once we're logged in, I'm gonna show you how to download dv and then install it. We are locked in into Elegant Themes, a website inside the members area. Once you're in the members area, the first thing that you will notice is a Berber button with download the DVC. I'm going to download it and you see a zip file isn't going through your downloads folder. And this is all the files of the software that you need. But we need to do one more thing. We need to create and license key as well. If you go to account, username and advocate, this is where you can create API keys. So it should be on application over here already. And then here are all my obligates. We're going to generate the new Abigail. Going to give it a name. Click to copy, should be copied right now. We go back to your website. Were in the backend of your website. If you go to Appearance and Themes, you can add a new theme. There are bunch of themes that you can select, but we're going to upload the Divi theme. Choose your file, go to your downloads folder and upload the zip file. Install. Now, it should show a screen with installing theme from uploaded found db dot set impacting the package, installing the FIM and then successfully, if you have problems with uploading your WordPress fee, then it's likely that you need to change some settings in your web hosting. So then I recommend contacting the customer support of your hosting. Or you can install the WordPress theme through FTP. Once you're done, you can click Activate. And now it's activated. 13. Set up your Divi theme options: We installed the WordPress Divi theme, and we're going to go over the DV fee options. So go to your menu and then select Theme Options. First we're gonna do the general options. And the first thing that we can do, we can upload a logo that will be appearing in the top left of your website. We're going to upload the file. I'm going to choose an image first that's on your computer. I have a nice being logo for it today. We're going to set as a logo. And what do you want to, do? You want to make sure for a couple of things that one, your image is not too heavy. Hours is 43 kilobytes. You don't want to upload an image of one megabyte or something like that. Anything under 120 kilobytes should be fine. The lower the better because it helps you have your web page load time. Quicker. The more images, the more data you put in your website and the longer it takes to load. And you want to have a fast loading website because it is really nice if everything is working faster on your website, then something for SEO purposes, the logo is something that gets indexed by Google, by search engines. You want to give some, some logo information to this image. And the Tidal has already been set. We're going to put social rocketeers logo in the description as well. And also in the alt text. We're not going to put it in captioned because if you put it in caption, it will be shown with the text below the image on the side. But I want that if I go to google.com, a dipole in social rocketeers logo, go to images that in the next few days or weeks that is going to be found by Google in the images. So the way you do that is by giving some information. So always change the names and the descriptions and the alt text of your images when you upload them to your website and try to make them a little bit smaller in size or in quality. Be still sharp enough, but that you keep the kilobytes and megabytes low. This is set as a logo. Something that you can do is you can select fixed navigation bar. What it does is the navigation bar, and this is on the backend of the website, but on the front and we're gonna be building a menu. And this setting is basically if you want the menu to scroll with you, if you scroll down that the menu is following this navigation bar in the Settings menu is not fixed, but on the front end of the website, the standard version is fixed. You can disable or enable this. You can enable the DC Gallery, and this is for photo slider purposes. You can, if you weren't, if you already know the colors that you're gonna be using a lot, you can select these colors and then fill in, for example, a gray color. And then if you want to change the color and some places you can always use this color palette. It's really handy if you're gonna be making a lot of pages with a lot of different colors. Alright, so, but if you don't know the college yet, don't worry about it. It's just a nice thing to have. We're going to go over the other things. There are a lot of settings. I'm not going to cover them all, just the most important things. The right sidebar layout. If you want to have it right or left, it doesn't matter to me so much because I always disabled a sidebar functions. I want to build things myself. But a few things that you want to keep is you want to use Google Fonts enabled. Going to show some nice fonts that you can use. You can fill in your social media links. This is going to be appearing in the footer and the bottom of every webpage so people can go to your social media pages. One thing that I like to do is use excerpts when defined. So people see like the first paragraph of a piece of text when it's loaded. One feature that I do like is the back to tab button. So there's under side, there's gonna be a gray dark arrow following you. So you can always go easily to the top. I like to feature smooth scrolling because this gives you a better user experience. If you're a good width websites or CSS, this is where you can add your custom CSS got, if you don't know what is the meaning of CSS, done better about this section. But if you want to do some custom CSS code to do some custom styling, this is where you can boot it. Alright, for now I'm going to hit Save Changes. All the settings should be saved for now. We don't need to go over the other settings here. But one thing that you want to make sure about is with the update section that you want to fill in your Elegant Themes login details over here. Otherwise you will not be able to update your WordPress theme in the future. So filling your data over here, now you still know it and you don't have to look it up in a couple of weeks. I'm gonna do that right now. Click Save Changes. All these things should be set to the correct settings. But yeah, you can change the navigation or to build our settings, the layout settings. One thing that I do like is with your posts, if you're going to create blog posts, I don't want to have the images placed on the website, on the webpage itself. So I'm going to disable this. And if you don't want other people to be able to comment on your blog posts. You can these voids over here. I like it if people can comment, but some people don't want to have this. I'm going to click Save Changes again. We're not going to use this right now. If you need to add some code to your website, you don't need to go into difficult business of code yourself. But sometimes for if you want to connect things like Google Analytics or stuff like that, that you need to place in the head of your website. You can put it over here or in the body section or other fixed. And don't worry if you don't know what it is or then you probably don't need it for now. But if you're looking for the place where to put the header code, this is the place in the settings. And did you want to look for it? All right, that's it for all the theme options for Diffie. And if everything is set, we can start building the pages right now. 14. Customize your theme: So once you're finished with your theme Options and you go through your website and overly should look different. So if I go to my webpage right now, it looks like this. So we have the logo, we got the Hello World, the first WordPress blog posts. We've got the sidebar. So it starts slowly to look a website from ourself. But still we need to do some things. This I'm going to login again. Now it's time to change some settings. If you're going to appearance and then go to customize. Then we can customize some settings that comes standard with the WordPress theme. And this is a standard WordPress feature, the customizer where you can change the header, the footer, some buttons and all of that. With Divi, you got a bunch of them extra. But let's go from top to bottom. We're going to go to the general settings Site Identity, where we already filled in the site title, Social rocket dish. We did in a previous video in the general settings in the backend of WordPress. So we are working in the front end for right now. Then we were working in the back-end in the dashboard of WordPress. And one thing that we can do over here, we can upload a site icon. We also call this fatty gone. So sometimes you see in the depth of your web browser, of your Internet browser, you see a little logo over here. Like if I'm going to grab some other beach for now, use a year over the top, my Google dark logo, my last pass where it came up passwords and Google logo, Elegant Themes logo. You don't need to read the first part, but you can recognize you're really fast. What website am I on? So we created a nice little pink icon again. We're going to upload that right now. Here you go. And this icon is 512 by 512 pixels big. Then again, the title, you should give it a name so search engines recognize it. Also put it in the description and in the alt text. You always want to do this. It gives you a SEO advantage. You can grab the image if you wish. We don't need to do is right now. We're going to skip cropping. And now we got to lyse nice little pink are on a dump of a website. We're going to click Publish To save the settings and go back to the previous step. Go to the next settings. You can set your layout settings and all colors have six letters or numbers as a combination. I'm going to click this blue thing over here. Then you see for this code is going to be two, a0, a3, fs. If I'm going to dive here hashtag and then treat times the F six times. Then it's going to be white. And I'm gonna put it in zeros, zeros, zeros, zeros, zeros, 0 is going to be full black. And then all the colors in-between have their own unique color coat. We want to use this theme, excellent color. With bank, they go, This is going to be our main color and really bright color. And the rest of the settings you can leave it as it is right now because they are already really nice. Click Publish what it does. For example, if we're going to create a link over here, is going to make the link to be discolored. You haven't got to keep it on blue, then the link will be blue. There are a few places that's picking this color. When you create something, he's going to use the same color everywhere. And it's gonna be really nice with branding. We're going to also set the customized settings for your typography. If we're going to create text modules, you can always change the settings per module. But for example, if you, if you build, then webpages with a lot of texts and you'll decide to change the header font for all the headers. Like Hello world, you decided you want to use another font. You don't want to go into all the pages in all detachment modules and change everything by hand. But if I'm going to look for a nice phone right now, one funded alike, for example, is lateral. If I want to change helloworld to lateral, I can do it over here. If I'm going to gingiva to let dv or leak script, then you see is going to be changed over there. So you could leave it to default and change it everywhere manually. But I like to put the settings over here so I don't need to change it everywhere else. Again, do it with the click of a button. The header from the reduce is Abril fat face. So this is going to be our font, really nice-looking font and love it. And then we also going to put in the body font for all the paragraphs. So therefore we choose today, let's grow to the g for Gentium book. Basic. Alright, nice looking a little bit like typewriter font. Really nice to read. The buddy link colors. I want to use the bright pink color that we before as well. Alright, so it changed the buddy link on a color to this nice pink color. For all the text. For the body text, I'm going to use full black. So six times to 0. You can change the body tech size. The text size should never be lower than 12 because then there's going to be really hard to read on a mobile. If you have an older audience, you might want to change it to 18, or also depends on the phone that you're going to use. So I'm gonna put it on 16 right now. Once you're done with settings, you can also play around with the text settings a little bit over there. Maybe you wanted to put it on 36. Once you're finished with playing around with these settings, then you can click Publish. Okay, We're going back. We just finished with the topography and the background color. I'm going to put it on just blank. Just the white-collar published this as well. You can also use a background image if you wanted to use a better one or something like that, I'm going to use white for now. That's it for all the general settings. We go beg Walmart debt, and we again go to the header and navigation settings. The way websites are built and structured is like the human body. We got our head, body, and feet. So the same way it goes for our website. This is the header section with the logo and the menu bar. Then you've got the body section where all the content is appearing and then the dark area over here. This is what we call the footer or the header. And the footer are shown on every new web page that you're going to create. The body section is where all the content is and this is what it's going to be changed a lot. But for now, we're going to finish the settings for the header. The header format comes with Diffie with some style, default style. It looks like this, but you can also make it centered with the logo in the middle on the top. But maybe you want to have the logo within the menu buttons. You can have it slide in low slided menu. Where on the left side you have the logo. You've got like, What do we go as web designers? A hamburger menu, because the three stripes look like a, like a hamburger. Then you got a slide in menu that's looking really fancy. I like this feature a lot. Or we can make it full screen. And then if you click it, it's gonna be bomb in your face. For right now, I'm gonna leave it to default because this is something I like working with right now. So people will always be seeing the menu buttons that they can click on. I'm going to click Publish. And then we're going to go through the primary menu bar settings. You can change the menu height. If you scroll this, that should follow you around. The standard sizes on 66. As a normal average size for a header, you can maybe make it a little bit bigger and you can play around with the logo size as well. I never put it on a 100 because then the logo is touching the bottom and the top of your header. And that doesn't look so much professional. So we want to make a little bit like a bold website, a little bit big. So we're going to make the logo on 80 right now. And we're going to put the menu science to 100. So this is going to look on our webpage. Then the text size. I'm going to put it on 16 right now. It makes it a little bit better readable. For the forms that we're going to select Gentium book Basic, we can make it bold if you like, and you should see the changes right away. You can use just capital versions. That could be a nice feature as well. You can play around with how you like it. For now. I'm just gonna leave it for the moment. The text of the color, I want to be full black, six times to 0. And you can make it a little bit transparent as you see. The letters, I want to be not transparent. I know no opacity in there. I make it full black with six zeros. The active link, the link that we are currently on, I wanted to be the nice bright pink color that we use for all other links as well. The background color, I like it to be a little bit transparent. So if you scroll down later. That there's a little bit opacity in there. On the screen. You don't see it on full. But if you select it and scroll all the way to the right, you can put this on maybe 90 or 95. Just a little bit opacity in there, a little bit of transparent and give a nice professional looking touch. The drop-down menu, we're going to do the same with this little slider a little bit down. So it goes through RGBA codes. Instead of the hexagon, what they are called the six numbers and letters. And we're gonna put the student 95 as well. And if you want to have a drop-down menu, like we have sub-pages, you can give the lines of color as well. You can make it being or black. I'm going to put a black, white right now. The text color can be full black again. Then last, but not least, we can add some animations to do the menu when it's loading the beach. So you want to have it expand, slide, maybe even flip it. I like the fade function, so it gives you like a nicer glow effect. One thing that I would like to mention is though, and there's one option where you can make things full width. For some website you might want to use it, but most cases you can have this unselected because I didn't like it so much because you want to work within certain spaces when you're building a website. And now these, these items, this logo and these menu items are falling without the grid, as you call it. Following with out of the scope of the rest of the settings of the webpage. So just keep this unselected. You can hide the logo if you don't have a logo yet. But we're going to get the settings for now and click Publish. Alright, so that's it for the general settings and the header and navigation for now, there are a lot of settings that you're going to go through. So just play around with it. I'm going to cover for the rest of the most important settings that you want to have a look at. One thing that separated the boys from the guy. So to say, if you go to the footer and then the bottom bar here, you can edit your footer credit. If you don't add any text over here, it will say something like WordPress theme by Elegant Themes. And I will show you that right now. Designed by Elegant Themes powered by WordPress. So this is looking really at touristic. What do you want to, do? You want to go to the dashboard and Theme Customizer again. The way that you can change it is in the footer, then bottom borrow. And then you can say powered by hosting. Now it says power by tau hosting. You can also include some HTML if you want this to make a link that you can Google how to make an HTML link and then copy and paste the link code in there. Or you can also disable the footer credit. So that's something we're going to do for right now. Click Publish again. So that's it for the footer settings. And you can add or leave social icons. I'm going to leave that away right now as well. The layout you can choose how many columns, I always leave it to four. And more about that later. That's it for the footer settings right now. One thing that you can do that can be handy is to set the burdens and burden styles. You want them over the website. Here you can pre-select the text colors and background colors and stuff like that. That can be a nice feature as well with icons and all of that. So you can play around with it. You can go over that. And the last important thing that I wanted to mention is we need to set a Augustan homepage. So I don't care. I care a lot about the blog posts where they appear, but you always want to select, whereas the homepage, we created already a homepage, if you remember in a previous video. If I'm going to select the homepage, this is a webpage, then it's appearing. The homepage when people visit. The primary domain. Said for all the customizing settings that I wanted to go over with you right now. I didn't cover all of them, but just click around, play with the settings and do how you like it. And you can leave the settings as I did. And you going to have some good settings to start from. But if you want to customize a little bit more, feel free to try around. 15. Install your Wordpress plugins: All right, so we've covered all the basic defeats settings and now it's time to install a few apps. We call this plug-ins within WordPress. If you go to the plugins installed plug-ins, it already comes with one or two standard plugins. The Hello Dolly plugin is a little bit of a joke of the developers. This is a plugin, but you always can delete. Gonna need that. We started without any plugins. And if you click here, then you see already a few suggested plug-ins like apps that we can use. There are literally thousands or even hundreds of thousands, more than 200 thousand plugins exist. Currently. There are more and more coming every day. I have to give a little bit of a warning with using plugins because plugins are really nice things, but WordPress is open source. What means everybody can create a WordPress plugin or WordPress theme. So this includes super beginners or people that have bad things in mind. Basically, if you're installing a plugging, what you're doing, you're adding a bunch of code and you'll never know if this is a good working code or if the code is conflicting with the other plug-in or WordPress theme. So try to minimize the amount of plug-ins that are being installed. The most problems that arise with WordPress websites comes from installing too many plugins or plugins that are not safe or not really good audio plug-ins that we are using today. We are tested them out a lot and we highly recommend those plug-ins. Few of things that you always can see like to give a little bit of estimation if it's a good plugin, if you can use it or not. You can see if plugging this is updated recently, so this is updated within the last day. This updated a lot. But if you go, for example, to the Yoast SEO plug-in, we're going to cover more about that later. This is updated the week ago. But for example, if you want to have a Facebook like button on your webpage, social media plugins. Plugins that can cause a lot of problems that we see. So this one is, has been updated nine months ago, so maybe that's not so safe. I also look at reviews, but this one got ten reviews. This one got 538 reviews and six times more active installations. If I'm comparing plug-ins to each other, I always pick the one that gets the most updated has a lot of good testimonials and a lot of active installations if possible. If I don't know what I'm doing, sometimes I test out these plugins in a test environment when omega test website to test these things out. Because if you have a working website with active visitors visiting your website, you don't want to screw things up and get your website down and stuff like that. So be cautious with how many plug-ins and plug-ins you're going to use. Then with that said, we're going to start with the first blogging. And this is the plugging that will appear of a year the first time you open it. And that's the classic editor. Why do you need the classic editor for? Wordpress is, like I said, is open sources gets updated all the time. And the classic editor, It's showing you the old version. Because in my opinion, the newer version of WordPress is not as user-friendly as the classic version, so therefore, I'm going to install this. It's not super necessary. You can work without the classic editor, but everything that we're going to show, it's done with the classic editor so it can look a little bit different on your screen if you didn't install this one, I recommend to install this because it makes it a little bit easier. You'll see a little bit more elements. Without this. They've hidden some elements, they're not so easy to find, so, but basically it works the same as just another interface and another way of showing it. All right, wait until you see the Activate button because the plugin is now installed. But if you go to the Installed plugins page, you will see that the plugging is not activated yet. So I'm going to show you a before with the pages we created the homepage, if you remember, and then click Edit, then you get this pop-up. And this is how you see the webpage right now. If I go back to Plugins, activate the classic editor. So now it's activated, there's one active. And go back to pages again. Click Edit. And it looks completely different. So in my opinion, this is much more user-friendly. That's why I picked this. Feel free to pick the other one if you'd liked it. Other one. We have the classic editor. We're going to add the next plugging that is called word fence. What does word friends on whether you need it for? It's basically as a firewall and malware security plugging. It sounds super fancy. And what it does is it keeps your website safe. There are bunch of organizations in the world that tried to hack into your website automatically with computer boasted. Some people in the world trying actively to go into your website. But what they do, the computer is visiting the website just like a human person, and it tried to login to the website all the time. So maybe they can play some links for some spam links, or they're trying to steal your data and stuff like that. So there are things that you are not want to have. And therefore we installed the WordPress plugin. It's like a virus scanner for your PC, but then a little bit more for your website. If you want to learn more about what is actually protecting, you can visit a website, but it's for security reasons. This is what you need to know for now. Alright, so once the plugin is installed, you should probably receiving, bump up with a message you have successfully installed word friends. You can fill in your e-mail address over here. You don't have to do it. And I don't want to have their newsletter, but I do accept their terms. They ask if you want to buy a premium version. No, thanks for that. We're going to use the freemium version. The free, free to. Once you've installed it, is going to show you an extra button on the left side over here. It's not all setup yet, so you want to go to all options. Then it's asking you to make your site as secure as possible. Take a moment to optimize the word friends web application firewall. There are a lot of options, but click here to configure. And it's asked you to download as thinking at ADHD excess file. You're going to download that file and click Continue. It doesn't matter if you're not really understanding what you're doing at the moment, just follow these steps. Then once you've done it, click here to configure again, download the HT access file again, and also the user, any PHP. And then click continuum of changes have not yet taken effect. It's saying, but the installation was successful. So right now we're going to close it. And we went through the configuration for depth. And we're going to click this MSE for right now. Next is asking you to do you want to stay up to date out of medically? Well, you need to on, from time to time, we need to update all your plugins, themes and stuff like that to have your website working good and stay safe. I'm going to click Yes for now because it's nice as this itself out of medically. Right now we went through two settings. If you go to the Options page, you can go through all the options. Not going to do that right now because the standard options are already really good. The one thing that you want to check out is your notification settings. If you're not changing your notification settings, it will send you a lot of e-mails and you don't need all of the emails, so do you want to receive an e-mail when it's updated? I don't want to have an email for that. Do you want it to when the plugin is deactivated? Yes. Because you really wanted to have this plug-in active. So if somebody is deactivated and this plugging in such a website, do you want to get a notification for that because that shouldn't be happening. You need to do Save Changes. Once you're finished with this installation part, the first thing you want to do is click Scan, and it's giving you a bump up, again, a word fans can look for malware and malicious URLs and patterns of infections by examine x and mining all of the files, posts, and comments on your WordPress website. Sounds really nice. So we're going to click Next, managed to scan settings. And then start your first game. That's what we want. Start a new scan. This is running on a blackout background. And by doing this, it will do this automatically on a day-to-day basis and we'll let you know if something is wrong with your website so you can always come back for the scan results. Right now is doing his thing and we can continue installing the plugins. So again, we're going back to Antonio plugins. The next plugging them we're going to use is something we'll have to do in Europe is GDPR. There's a new rule or law for that. Every website should inform the website visitor about the cookies and about the things that are being used on the website. What are cookies and why do we need them? So cookies are there for that. Your website is working properly or you need to have cookies sometimes for certain marketing things. So if you run Google Analytics on your website, so this is a dude we're going to connect that showing how many people went to your website on a day. So you can count that. That's dragged by a cookie. If you're placing a YouTube video on your website, you are using cookies. Another thing is, for example, if you go into a webpage, but you wanted to go to the previous page, how does it know what was the previous page? Those certain things like buttons and things that you've selected links. Those things work with cookies. Some cookies can do more harm than others in terms of privacy. And therefore, we got some new rules and Europe and governments like websites to give explanation what type of cookies people use. And therefore, we will install a cookie plug-in. We go to the plugin, new. There we go, searching for cookie. Notice. Go, We're looking for the cookie notice for GDPR by D factory. They got more than a million installations. And we're going to install it right now. Everybody's seems pretty happy with the cookies. Once the plugin is installed and activated, you can click on the settings here. You can also find this plugging if you go to settings and then go to cookie. Notice sometimes if you install new plug-ins will bear under settings, sometimes under tools, sometimes in this menu bar. So it can be a little bit confusing where to look, but for this particular plugin, it's under settings just so you know, it comes with some standard configuration settings. You can change the message over a year. You can even insert link if you like, for example, to a Terms and Conditions page. Or maybe you are going to create a privacy policy with a webpage, with some texts. There are standard text that you can find online that you can copy and paste. Or if you go to another big websites, you can use their texts and change it as you like it. You might want to consult with a lawyer or somebody that knows about legal stuff if you want to do it. Totally right. Another legal advisor, I just know how to build websites and what do you need to do. So but it's your responsibility to find out what the ride for your legal stuff. For this purpose of the video, we're going to leave the tax year as it is right now. Going to change the button text to deaths. You can enable privacy policy link. And you can change the text and then give it a custom link or selected page. I'm going to click the sample page right now and then change it into a privacy policy little bit later. Yeah, It's pretty straightforward. Just answer these questions or you want to set things up. You don't need to use a script blocking. This is a little bit more advanced. I always leave this blank. You can uses, but unlike if you want to use my website, use the cookies. If you don't want to use the cookies, don't use the website. That's my personal opinion, but you can play around with the settings if you'd like to do that. And then you can give the option to say no and make people go away. I'm going to leave this for no right now. Okay. I'm not going to use the revoke consent option for now, enabled to reload the beach after the notice is accepted. We don't need debt and able to accept the notice when the users grows. Well, that's a nice feature. They can scroll for maybe even 200 pixels and then the bar will go away. Because then we think they will accept and theorems under conditions, privacy policy, and able to accept a notice on any click on the webpage. We're not going to use debt year. You can set the time that it will be remembered what the settings were. Once then a standard option that I'm missing in this plugging is I'm not able to change the color of the button. And our waste a building this feature, theirself, but they didn't do it. And luckily, there's another way that you can change colors from certain elements in the website. What we're going to do to make this blocking work better, we're going to save your changes. We're gonna go over to the Divi Theme Options. And if you scroll all the way to the bottom, you find custom CSS. Again. Somewhere around this video, you're going to find a golf that I'm going to paste. This is a piece of CSS code. And gonna look like this. This is how it should be displayed. Basically, what it does is this little gray text is telling what this code is about. So it's the cookie notice button. This is the element. This is the code name for the button where we want to change the color. The color that we are changing it to is FFF. So this stands for, this is going to be white for the fonts of the ladders, and this is going to be the background color. The word important is saying that it should override all the other goat. So if it's finding a code somewhere, then it needs to overwrite with our code that we're adding. So if you're going to click save changes right now and we go to the front end again. I'm going to open a new incognito window. He's gonna ignore my cookies. Never go to the website right now. Day you see it is a different color. Is not pink, the color pink that we were using previously. I'm going to copy the code, remove the six letters and numbers over there, and replace it with the goat that I like to use. It doesn't matter if you use capitals or not. Let's open incognito window again. To see how it looks. It's looking super cool. Alright, so that's how you change the colors of the letters and from the buttons, buttons. The next plugin that we're going to install is a plugging that I like to use for to create backups. Sometimes you mess things up when you make a website, especially when you're new. What do you want to, do? You want to look for updraft and there are a few updraft plugging out there. So make sure you are installed the updraft plus WordPress and backup plugging. This is from a BRAF plus plus.com. I have more than 3 million installations and it's working super well to create backups from your website. If something goes wrong, you can always restore your website. If it's finished installing click Activate again. Gives you a pop-up breast year to start or go to settings. Maybe you already noticed that on the top bar. Now it also says a draft, bless. You can start making your first backup right now. But before we do that, and we're going to settings first year, you can select where the backup is going to. Maybe you wanted to connect it to your Dropbox or Google Drive or whatever. Right now I'm just going to use the addressed faults. So I'm going to store it somewhere in the cloud and I'm going to backup and restore. I can also go there by clicking here. I'm just going to click backup right now. I only want to delete it manually, so I'm gonna select this one right now and the other ones, you can keep them selected and click backup right now. Grading your first backup. Congratulations, it's running. And this is the log message. Nothing has been logged yet. But then a bar starch working and this is running on the background so you can keep working on your website or wait and do it finished. You can even show the log about what it's doing is not super interesting. And then when it's finished, you can click it away and you've got your first backup. And I always recommend before you start building on your website, create a backup. Once you're finished, create a backup again. You don't want to have any work lost, so this is how you prevent it. For the next plucking, we're going to install the Yoast SEO plug-in. The years as you plugging is helping to make your website being found within the search engines. So if you want to optimize your website for search engines and other terms do SEO. This is the best blocking that we recommend for doing that. It's a really handy, handy to. That's going to give you some tips and advice about many things that you can do to improve your rankings from your webpages and your website inside Google, we all want to be found within Google to get as much web traffic, high-quality web traffic to our website. This is a do that we're going to be using a lot. Click the Activate button. We're going to click on settings for now. It brings you to the general Yoast SEO Settings page. The first thing that is asking the first time SEO configuration, you can do all the settings manually as well with the features and stuff like that. But I'm going to use a configuration wizard because this is much simpler. Nine steps. My website is live to be index. I wanted to be index straightaway. And then I'm going to click Next. I'm a small offline business. We are marketing agency. Maybe you're a webshop, maybe you are a corporation or something else and you choose whatever fits for you, then go to step number three or your organization or a person. Well, we are an organization, social rocketeers. We're going to even give them a logo. There you go, sir. You got to fill in your social media. We didn't register them yet, so I'm gonna leave them blank for now. And I'm going to the next page again. Then search engine visibility. I wanted to have my post pages and projects found within the search engine so I keep everything too. Yes. Click Next. Do we have multiple offers? Yes, my colleagues will be doing it as well, changing the website. What are your title settings? So basically what it's asking, how do you want to, in the tip of your browser, your page titles to be appeared. Do you want to have a small striped or small dash? Do you want to have a dash like this? Do you want to have a symbol like that? Item matter so much. If you go to a Google and you're Googling for astronauts, astronauts, then these things are your page titles. If you don't, you're not going to change them through your SEO, plugging, your Yoast SEO plugin, worry about that later. But Wikipedia, for example, if you go to the astronaut page, you'll see that the page is called astronaut and it's on Wikipedia. This helps Google understand what's the website about, about astronauts and that's why it's a burn and the number of tree results. And what is the what website is it a bearing? Right? Now you know how it works. Leaves a title Settings, but maybe you want to add some extra keywords over there. But otherwise you can leave the website name and company name. Step number six. Do you want to help them improve? Yes. You can drag my sides a data or if you don't like it, leave it like that. Do you want to learn? And yours can send you e-mails, things. You can sign up over there. I'm not gonna do that right now. Then step number nine, you can watch another video. I'm not interested in that. We have completed the wizard. All right. We already installed a bunch of plugins and we're going to install Walmart blogging for the moment. And the name of that as WP Super Cache. Alright, you can activate the plugin. This is a cash plugging and basically what it helps is it's saving your website upfront, so it's loading faster for other people. Basically it's making your website to load faster. You can go through the settings, but you can turn on, caching on, and then update the status. You can go through the settings. I don't recommend changing the settings yourself. The preset settings work really well. It's gonna be a little bit fragile to play around with the settings. If you don't know what you're doing, just install this plugin during the caching on an update, the status. Alright, that's it. For all the plugins. We've installed a bunch of plugins and a few of them, we're going to use them later, especially the Yoast SEO plug-in. Again, be a little bit cautious with installing new plugins that you don't know about. Dual little bit research, test them out in a safe environment and have fun while doing it. 16. Ready to design?: That's it. We've covered a lot. We went through all the settings, the Wordpress settings went over the Divi options. We went over the customizer settings for some more settings. And we even install some plugins and went through these settings as well. So that was a lot to say again, but we can leave all of that behind us and actually start building right now. So see you in the next videos. 17. Part 3: Designing your web pages in Divi: All right, finally, we've come really far and now it's time to actually start building some webpages and start designing them. Super-excited. In short, we're going to explain everything about what you need to do and why you need to do that. You're going to learn some best practices. We're gonna show you whether website needs are good webpage and how you can design it or build them yourself. And we're going to give you a live example on the screen. And you can watch over my shoulder and building some awesome webpages so you can do it yourself too. 18. Create your wireframes: Alright, so let's go to Pages and then we're going to build the homepage first. But before we can decide what we're going to build, let's click on Edit, because with dv, it comes with a lot of pre-built layouts that you can use. So if you already have this Finney over here, you can click the plus symbol. If it's still under standard editor like this, you need to click the purple button, use the Divi Builder first. Then you're going to click the plus symbol. So it's going to give you a pop-up. We have some pre-made layouts. Maybe you have some layout yourself that you are saved in your Divi library, or maybe you want to clone some existing pages. We don't have any existing pages right now. We don't have any saved ones, but we can use some premade layouts. So for example, if we want to see some yoga webpages, we can click yoga. Then you'll see all sorts of pre-made layouts for yoga sites. Or we can use the filter button. If you're into the fashion and beauty industry. Got some websites that you can use from the fashion and beauty industry. Let's assume I like being, so I'm gonna click this pink fashion webpage. And they have a blog pages ready contact designer, home lending, paycheck, even a webshop. And you can just click of a button, install this layout. Once it's finished uploading, you'll have a whole pre-made webpage yourself. So if I'm going to click Update to save this, then you can go to the homepage. You have your own webpage within the click of a button. And now you can change the text, you can change the images, you can change the colors as super fast way to get you started. If you don't know what to do and find a really nice layout and start building from there. So I'm showing you this right now because you can go over some examples or you can google some webpages that you like. Because before you can actually start building, you need to know what you are going to build is like building a house without a blueprint, you end up with something pretty crazy. Are you going to forget some things? So we created a wireframe ourself. A wireframe is a drawing with lines. So basically you can see how the website is going to look. If you see some lines, it's gonna look something like this. We actually draw the whole thing out over here. Because we already decided that front, what we're going to build. If you're going to look at my screen and design, a term should call this a hi-fi design. And this is the web design we're going to build for you today. And you can see step-by-step how we can build it. So if you need some inspiration, you can use a premade layout, something like this. You can start changing those things, or you can start totally from scratch. 19. Build your page in sections: All right, So we saw on the front and how is it going to look? And we actually can build on the front-end. But what we just saw on the front side of the webpage, it's divided in certain elements. So I know that this first section over here, this is section number one. On the backend. You'll see the hero section. And let's actually this whole section over here. Within this section on the left side, you'll see some text, a little bit of space where the divider in between and then some texts again. They got this button over here, did you can build them in front-end and we're going to explore that later as well. But this is how the website is built up. This is the second section. There's the image and it takes them a right sided with a button over here. Again, an image, a text and text and a button over here. This is how it's structured on the backend. So this is more or less your wire frame disease. You're drawing of lines, how we can build it up. So therefore, you need to know what sections, how many rows you want them to be appeared and stuff like that. And luckily, we already have a design that we just showed you. We're going to build from scratch. We're going to delete all these sections with all these things inside there. And when you start, you can select with the blue for a regular sections, specialty section shall full-width. So most of the time you're going to be using a regular section. Within this regular section, we need to have some rows. Row can be 100% or two times 50%, dirty tree per cent, 66 and all combinations like this, going to look like this. So I know we're going to use some texts. The first section. And let's see what we've just built on the front side. So I'm going to click the home button to refresh this page. And it's super empty how it should be. If you look at our design, we have a full-width image. Then we also got a heading, so a big piece of text, and we got a sub-heading and we got a drop-down arrow on the left overdamped. Let's see if we can build something like this. 20. Add images to your web page: First, let's start with the background image. Go to the backend of the page and I'm going to click settings of a year. It's going to give you a little pop-up and it's popup and you can drag it around. Blizzard where you live, you can make it even fullscreen. I always like to keep it like this. And then click on the background. You can give it a background color. You can give it a gradient like two colors. Pretty fancy. If you do that, you go over it. If you hover over it, you can delete it again. But we were uploading an image. So we're going to need the background image. I already have one. Degas, some astronauts with some bears. If you're a Mac user and working on an Apple computer and you've been using, you've been familiar with the program preview. If you use the brief few software, then you can go to Tools and show inspector. You want to make sure a couple of things that the college settings are in RGB. So this is RGB is for screens. If it's CMYK or something else, it's more used for print. So you want to use the image with the colors, with the color mode RGB, and you wanted to look at the image size, I recommend to use minimum, normally a big width of 19201000920 pixels width. For normal computers. If you're using more advanced computers with Rick Dina screens, then you want to go up to the width of minimum 2560. The kilobytes should never be more than 300. To keep your website loading really fast. If your image is still one megabyte or two megabytes, you need to re-size that. How do you resize an image? And you can go to Tools and just size. You can change the width, the resolution, the resolution, you can always put it to 72, this is 300, put it on 25062560 or 920, and click Okay. And then you can go to File, and then you can click Export. You can select where you want to export it to. We want to have the jetpack format. And you can slide it like this. And it's a little bit playing like putting on 160 KB right now, social worker tiers or wallpaper. And it's still looking pretty sharp. So let's upload this image. You can upload your file, select files, and go to your desktop and upload it from there. Don't forget to change the title, description and alt-text again. Make sure that this size is set to full width and then upload an image. Click the green button to save that for now and update it. Now you want to go to your other depth, refresh to beach. Wait until this is finished loading. And now we have an image on the background. Alright, let's assume you have a really big wallpaper like this one. And you want to make the image web ready. You want to make it under 300 KB. You want to set the resolution to 72. And you want to have the size with the right width, so no bigger than 2560 pixels. What you can do, you can go to tiny PNG.com. You see a nice little panda with a crown on this app and you can drag and drop images that you want to resize. So for example, this angry kept in space is 419. Gabe, What is to bake? It's more than 300 that we recommend. And we're going to compress it by just uploading it to the website and then download it. But then the compressed version, we reduce 20%. It's almost 300. For the moment I can live with that. You could resize it even more. Always make sure that it's still looking sharp. Well, this has sharp gut. And that's how you can resize images really easily with tiny PNG. This also works for with JPEG files as well. So don't worry about the PNG or JPEG files. 21. Add text and dividers to your web page: Okay, So we uploaded the background image and we need to add some text. We're going to use a heading. And the heading that we're going to use is heading number 11. Thing to keep in mind is that you only can use the heading one once on every webpage is like you can only give a book one Dido, It doesn't make sense to give a book tree. Those people get confused. The same goes with webpages. So this is the homepage of social rocketeers, whereas maybe a little bit boring. So for the purpose of the video, I'm going to use a social media content. That's going to be my heading one. I'm going to hit Enter at the heading. Out of this world. We're going to hit Save right now and update it. Look on the front end. I was going to look by refreshing the page. It's black and black on the image, not showing us really well how it should look. So let's change that. So if we were doing in the backend of the website, we're going to change this column 250% of 50%. So on the left side, there's the text being a beard, or maybe even do it. 2 third, 1 third. Then we go to the settings and let me go through the design settings of this text module. There you can have some drop-down menus with banks having tech stuff like that. We added some headings and the heading font that we're going to use is fed phase font. Go. We're gonna put it in bold. Over here. The text is going to be left aligned. It should be white. Go. That's it for the settings of heading one. But the heading should be set to the secondary title is called permanent marker. Scroll all the way to the B. There you go. A little bit more comic font, really nice one. We should have this in capitals, and I think it should be bought two. Alright, let's see what we've just created. It slowly starts to look like our design. So let me grab the design. We've got the white text, and we got the black text over here, which should make this a Y2, and we should add some background colors. So how can we do that? Let's see. We've been working on the back-end of the website audit time, but you can work on the front end as well. So you can enable the visual builder by clicking over here. You can also do that from the backend BY built on the front end. So this is a really nice feature. So you can really see what you get. You can select this and even start to die being if you wanted to have social media or something like that. If you hover over with the mouse, you already got used to that. We're using sections and we can create roles. And then inside the rows we can create texts, modules and things like that. If you hover your mouse over these elements, you see certain settings or pair on it. This is a really nice feature that you can build on the front end we got now two sections. The blue things are sections. Sometimes they are orange or purple if they're a little bit specs, but most of them are blue. And then we got, within this section, we got one row. Because in our design, if you have a look, we got a black background and a pink background of the text and don't know how you call that, but you see the color. So you know what I meant? I'm going to duplicate this module with a click of a button. We have two texts modules right now. The first one, the first one we need to make a black background. So if you put this on the side and then add some background color, we need to make it black. You can click on over here. But now you'll see that it's having too much around it. So we go back to the design section. And you can change all the designs sections over here. But with the heading one, you're going to go all the way to spacing. And then you can add some margin and padding over there. But there's black text is not feasible right now. So I'm going to delete the text as it is. And then within our design, we have some space around it. What are we going to do? We're going to add some padding on the top. I'm going to add. Tripp percent. At the bottom, I'm going to add 3% as well. The reason why I do percentages and not fixers is I want to have it responsive on a mobile phone, tablet, super big screen, whatever. I also wanted to add some stuff on the left and right side. Then it's looking more or less the same. Like that. I do want to make it a little bit smaller. I set it to the column 50, 50%. That's how you change the background of debt. At the second text module, we're going to delete the first text like that. This text should be, let me see white. So we go into change that to need to click somewhere else right now. Then I hover over this text module. Sometimes it's a little bit hard to click it and we're still selected. I'm clicking in the header. There you go. Then you can click it and go to design, change the heading texts. Do because there was a heading two, if you remember in your content you go to Text, select it, then there's a heading. Do you can see it in the HTML tags. This is the heading two. And then you go through design, heading text, heading two. And let's make the background color first. We set the color of the background. We go to design again, spacing at some bedding, maybe 2% this time. Link it here as well. I've looked at our design how we want it. Well, there's more or less the same, but we still need to make it white. We're going to go to heading, text, heading do have the heading to color white. There you go. Social media content that's out of this world. Font size is more or less good. Remember we want to improve that, are changed it a little bit. We can increase it. Then we will need to change this to something like this. Alright, so you'll notice that there's a difference in space of the bar, like the black bar and a big bar. There's some whitespace as we go it over here. So if we want to solve that, what we created right now is one section that has the width of treated. So what we can do if we duplicate this, I say duplicate this and we delete this section. And if we delete this my jaw, then we have two sections with one text module. And this one we can make it smaller, like maybe 1 third to dirt or something. Make it dirty. Six pixels. I should see you need to play around with it a little bit. There you go. Looking like our design. If you want to have this image a little bit bigger, if you hover your mouse over, you'll see some, some blurred blue section or something like that. You can drag. If you hold it with your mouse, you can drag it. And if you look really closely, you see the number of pixels that you're dragging it. You can make it bigger or smaller. Same goes for the top section. And you can also, if you go to the settings and then at the section settings then to design and to spacing. This is where you change these settings. Right now it's really starts to look like our design. And that's how you set the height of your section. And you have the same with your modules. So there's quite some space between these two modules. I'm going to hover over this. Then I'm going to select this settings icon of my role settings. Between the, between the two rows. I don't want to have any spacing, so I'm gonna remove all the margin, all the bedding, and it's going to bring it closer to each other. I'm going to do the same way if the top section row, I'm sorry. Now is really close to each other. Maybe a little bit too close. The button. Maybe you wanted to have 3%. And that's looking really nice. Maybe 2%. Designing websites can be a little bit perfectionist. Don't try to make it too perfect. You can spend hours on making it fixed up Perfect, Just to get the job done, launched a website, and then keep improving it. And then before we can go to the second section and work on debt, we have this divider dividing between two sections. We want to make it direct, good deal canal. We want to make a diagonal. We go to the Settings and click Design and then dividers. Then we want to add a divider style to the button. So your divider styles that you can select. And we're gonna make it look like this. But in our design is the other way around. So we need to flip it. So you can flip the divider over here. And you can even decide how high it should be. And if you think you messed it up, just click on the Refresh icon over there, and it goes back to the standard item. We almost finished. One last thing that we forgot to add is the down arrow. 22. Add a down arrow and anchor links: Alright, so we're still building this website. And one less thing that we didn't include yet is a little drop-down arrow to be able if you click it, did you scroll to the next section is a really nice feature that unlike how do you build that if you click on this and this are the arrow to make it scroll down, what are we going to do right now? We're going to add our first image. The image that we're going to upload. I already created a little PNG file. With PNG files, you can make them with a transparent background. So we have this white arrow with a transparent background. Rename it social rocket. There's Down Arrow, white. Text, description. Keep the size as you want it. Going to make it medium for the moment. It's still pretty big. I need to resize it first. Let's do that. I'm going to make this 50 pixels width, the size of it right now. Export it as a PNG file. We're going to upload the file that we just saved on the desktop. Png, arrow, size, text and description. As always, upload the image, but the image is not clickable yet. I'm going to click on Save right now, if you don't see the Save button, you can use the Control S or Command S for Mac users to automatically saved his webpage. If you don't want to use the short key or don't know what short keys are, you can click on this purple icon and then click the Save button. Always remember to save your previous work and so you don't lose anything if you lose your Internet connection or something like that. And right now, we're going to give this second section. We are going through the advanced settings right now. Live as scary. And we're going to use it. Go this section, do just as one word. Copy this CSS id name. We give this element, this section, we'll give it a name. Now we can say if you click this image, this down arrow, we can link it within the image link URL. We're going to end it with forward slash, then the hashtag icon. And then, and with the name that we gave the SSS ID, we're going to hit save, refresh the beach. Then if we stand with our mouse on the icon, it says the icon image tidal social worker tiers down arrow or white. But if you look at the bottom-left corner, you'll see that what is the link if I'm going to click on this element, and now it's grows down. So if we go back to the top, click again and scrolls down, the website is not long enough to scroll all the way to a year. We still have to build that. But this is how you make clickable elements. I also like it to make these texts modules link to this section. We're going to do that right now as well. Go click Save. There's one as well. Link. Rolling. Safe. Again. Look on the front, where do you create and refresh the page? I did it with my keyboard. Click the icon, and now it's linking to other sections within the website. 23. Add a button: Cool. Let's have a look at our design again. There we are. We already covered how to add a text section. So I'm going to create this. And once it's created, our teach you how to create a button. Alright, so we have our text, my job. Now we're going to add a new module. So I'm going to click the gray plus icon, and I'm going to look for the button module. Our design has a black button with the permanent marker font. And the button is looking at. We're going to create the beautiful button according to the design. First we go into start with the content part, so the button text should be read more. And we're going to link to an About page. The about page has not created yet. But for the purpose of this video, we present that the pitch already created and it's got about us. So this is going to be the link. The link button is going to be called red mark. And now we need to style the button. So S for every module, this is where you change all the design settings. The ones who have the button aligned in the middle or on the left side. So we have it on the left side and the design, do you want the text to be light or dark? Well, we want to have white text, so we put this to light. Do you want to use custom styles for the button? If you remember, you can change the buttons settings in the customizer, but we have different colors for different buttons. We need to create the buttons herself over here. I don't see the text right now, so let's add the color first, so the color should be black. Now we have a black button, we have some white text. How big should the text be? In my case, I'm going to put it to 26 pixels. So there's gonna be a pretty big button. Then I can change the Buttercup and border color to black as well. And the border radius, the border corners are rounded. So right now it's a little bit rounded with three big sauce. Our button is more rounded in the design. Maybe we going to make this to ten pixels or even more than 15 maybe. Let's look in like a nice button. We can change the font of the button as well. Again, we're going to use permanent marker. And I think we can improve this size, increase the size a little bit of the burden font. So 28 works well in this case, most font sizes can be a little bit smaller. We created the Read More button and you can keep playing with the settings over here. We weren't all the letters and capitals. So you do it like that. If I hover over it right now, you'll see this little icon. I choose four right now not to use that. But what I do, 1.5 is if you hover over this button, I want the color to be changed. You know, you can click on it. So how do you do that? If you have custom styles and you go for your mouse over the background color, you'll see this tiny little mouse icon. This is the desktop version or the hover version. And we have to hover version. We can make it a little bit dark grade like treat you treat retreat tree. We have the desktop version and we hover over it. It got this nice little effect, maybe even lighter. So what about five-by-five? Then you want to do the same thing with the butter border color 555. All right. We've covered all the settings for the button right now. Don't forget to link it over here. And one thing that you can choose if you linking within your website, always open in the same window. If you are going to be linking the button to another website, I recommend in the new deck, this is better for SEO purposes. If you're maybe thinking about the change in the future, your domain name, or maybe you want to include www or something like that. Best practices is to use the prefix of the domain, like the first part of the domain, leave it away. So just everything behind the.com.nl or whatever you're using from the forward slash, you can use it in the link. This is best practice for adding links to your website. So if you're a linked structure changes in the future, you will not get any broken links. What will hurt your SEO rankings and stuff like that? So long story short, just use forward slash and then everything you need to put here to link your buttons, links and everything that you are linking. 24. Add a color overlay: So we created the first section. The second section. Now it's time to continue to deteriorate section. We're going to add a new background image, according to our design. Found a really nice one with some donuts and some unicorns who doesn't like that. So social rocket, there's donuts and unicorns. I'm curious what my friends at Google are thinking right now about our website. If they start indexing this, but upload the image right now. But the thing is, is looking super nice. We can make it bigger if we like it. But the thing is, we're going to, in some texts or modules over this is going to be really hard to read because there's so much colors and with the contrast is going to be really hard. What we need to do, we need to, this section doesn't have a row yet, so I'm going to add a row. I'm going to give it a color over the image. Let's big the text module for right now because it wants me to pick a module that's okay for now. This row and one to make the full width. So you do this and the design section, and then you go into sizing. You need to use gusto, gustation, gutter width. And then you put this all the way to 0 and the width should be 100%. That's it for now. All right, so we've added some donors, we have some unicorns, but according to our design, we want to have it a little bit more pink. The reason is because this text is now really hard to read. It doesn't matter if it's white or black. It's hard to read with so much scholars around, so we give it a nice overlay color. And there are many ways that you can do it, but one of the easiest ways is using the gradient tool. If you select the gradient tool, is going to give you some colors. You can add the color goals as you wish. And we are using the H6. We're going to use it on both sides. But now it's completely pink. Probably when you do this is going to have the button unselected plays gradient unbiased background image. So if you select that it's going to place the image below the gradient college that you're adding right now. The gradient college is going to be on top. So I'm going to drag and drop this down a little bit. Like this. I'm going to copy this code. Go to the other color, colon and swell. And then paste it. There you go. We've got a pink overlay color for our background image. So right now I'm going to change the date. 25. Add an opt in form: So in this section, we also need to create an opt-in form. What is an open forum? You can collect email addresses and some personal information like a friend named lastname, stuff like that. So we're going to look for the opt-in module, the email app, then. It's giving you a ton of thing. So we're going to need this text. We can remove the title as well for our design. And the background. Image color is also necessary. This is going to be transparent. I don't want to have people their last names because I can ask it. But the more questions you ask, the less likely it is for people to fill in. So you can select if you want to show the last name field or not. I'm going to click Select know. We already created the fields that we needed. We just need to make sure that the button is looking a little bit more beautiful. And that we need to, we need to connect it to our email marketing system. All right, so you can change the buttons settings over here. We already explained it with the Read More button. It's more or less working the same. So we can use what we used over there. I'm going to do it real quick for you. And then after that, I will show you how to connect it to your e-mail marketing provider or a solution. Alright, so we created the button. Also. I wanted to change the colors of this breed text that's in the boxes of the form. You can change the title text. You can change the body text, a result message text. You need to change it with fields. The fields color. We can make it black as well. According to our design, the feuds shouldn't have any borders. The rounded corners can go to 0. You can also align this by changing the spacing. We're going to put the margin and the bed includes 0. Is it going to bring him a little bit to the tab if you want to align it even more. One thing that you can do is you can add the divider. What does the divider do? Divider bring some extra space and you see a little bit of a line over there. But I don't want to show the divider. And I move it to the top. Now we can align it a little bit more. Something like this. We created a nice section. The last thing, people are filling in the forearm right now, where does the information go? Again? You go through the modules sections, section, and you can connect it to an email account. The standard service provided is selected as mailchimp. Mailchimp is the most used email marketing to and we've been using it a lot for our clients. So you can go to MailChimp.com and register for an account over there, sign up for free up to 2 thousand email addresses. If I'm correctly, you can use it for free above more than 2 thousand e-mail addresses, you need to start paying for it. But once you're logged in and if you Google for some documentation, you can figure it out how to connect it yourself. But basically, you need to connect the provider. But since there are many providers and we cannot explain all of them, we're not going to do that in this course, so you're probably going to use mailchimp, does use Mailchimp. If you're using that, if it's connected, you can select your list over there. If you still need to connect it, just look up Mailchimp, Diffie integration. Brain should do the e-mail option module. This is the official Elegant Themes documentation. Here they explain in more detail how you can connect your email opt-in module. And they provide documentation for all their email providers. You have an active campaign. Many others. Really smart thing to do with pages, as long as this, you can use Control F or on a Mac Command F. It gives you a letter search bar, and look for the name Mailchimp. And it brings should directly to the section. And everywhere where Mailchimp is mentioned. There you'll see how you can connect the account. So find your e-mail marketing solution. If you don't know which one to use, I recommend using Mailchimp and then you can figure it out from there. Alright, so let us assume that you are connected your email module. Now we're finished with creating the third section of your website. So it's time to save it and see what we've created so far. I refresh the page. We can scroll down now to the second section. You can read our mission statement and go to the homepage or the about page that we still need to link to. You probably noticed that our optimum module is not appearing. And the reason is is not connected to any e-mail marketing gland yet. But if we would have connected it to Mailchimp, you would have seen this this little thingy over there. But for the rest, everything is finished and we can go on to section number four. 26. Add your USPs & an interruption text: Alright, so we need to bring it in another horizontal line like this. We can work on section number four. Let's start building. 27. Add a contact form: Alright yourself, we created quite a bit of rest of the *****. And a lot of people also wanted to have a contact form on the webpage. So I already edit the contact form module and you can add different fields. So maybe you wanted to collect a phone number. Can change some field options. So you can make an input field. You can make it an e-mail, text area, checkboxes, stuff like that. So if it's a text area, it's going to be a little bit bigger. Input, input field should be fine. It looks like that. And you can say if this is a required field yes or no, change around with the settings. You can drag and drop it in the order as you like. You'll see that my phone number is now full width, but the other section or not, I'm going to change that other sections to make it full width as well. In the design layout, you can make it full width. We're going to do the same with email, set it to full width as well. You can change around with the settings, again, the Field Settings text and it will be black. You can change like the field options per field. But you don't want to have just this input form to have the letter black. So I'm going to put it back to standard settings. Go back. And then for all module settings, feuds. Now they are all black. Something that is really important and mostly goes wrong is you need to put in some information. Something that a lot of people forget. They forget to put in the email address where it is forearmed should be sent to. You can send it to in my address, gum, and then we add the message better. And if you select this little icon for an explanation, explains you that you should put in the field names how you want to receive the email. So what I always do is I dive into base URL. I'm going to copy my domain name so I know where the forearm has been filled in. And if you scroll back to the top, there is see that the field ID has name and watch out because this is sensitive for capitals or not. So if this is a big letter, N, make it a big letter as well in your field. In your settings. If I'm going to receive this form right now, I'm only going to receive what people fill in in as a name. You want to do this for all your input fields has been set. If you wanted to have a Dido above it. Well, we already got the text module. Do you want to have a success message? For example, your message went out of space. Thanks. The submit button. You can change it to send it for all our ascenders out there. And you can even use some spend protection with some basic capture that you need to do some easy math. Or you can use some more advanced recap jump thinks it's a little bit more advanced, so I won't go over that. This you'll be enough right now to use the basic capture it avoid shoe for receiving spam emails in your inbox. Once you are done, click the green icon, save the beach, and always test out the forum and see if you're receiving the e-mail. So let's try it out. I'm going to fill in my name, my fake phone number, my email. That's fake as well for right now. And type a little message. Out group is depth. I'm going to do some easy math. Hopefully I got it right and send it. Your message went out of space. Thanks. We're going to check our email to see if we received it and we got a new message from social rocketeers. As you'll see, I made some typos with the phone number and the e-mail address. So luckily we've checked it out. We can go back to the settings, go to the module, then the field ID is just full. I'm going to copy that so I can make any typos again. I'm going to change this base. It probably is going to be same for email. Just double-check. Yep. That's the email. Save it again. Refresh to pitch. Give it another go. My name is Steve. Phone number. Get this to 26 for right now, send it. We go back over here. We've got another message, and now it's giving us the data, how we like it. So that's how you create your contact forums. 28. Make your web page responsive: Alright, so we create an entire webpage. How awesome is that? This is the desktop version. If you want to play around with the tablet version or even a mobile version, most people are watching websites on mobile right now. There are these little icons on the bottom left over there. So you can imagine that maybe this font is a little bit too big over here. So this is how you can check it out on a desktop is looking like this. On a mobile, it's looking like this. Really big spaces, big as well. Now you can change it for mobile as well. What I like to do and make everything desktop ready for one page. Then I make it ready for all devices like tablets and mobile. And then once all the modules are set to the right settings, then I'm going to start making multiple pages. I make a desktop ready first, then mobile, and then use all the right settings throughout the entire website. If you go through design and you wanted to change the row settings just for mobile, for example, this spacing, we add, edit this little margins of a dam. But if you just want to change this on mobile, you've got this little mobile icon and you can change it between different devices. Maybe don't want any margin on a mobile. Remote, some space overdamped. Maybe you want to change the heading size of your heading one over there. Again, you've got to design a heading text. Select one, heading text size, hover over this, click the icon of a mobile. And then for pho, put it too, dirty six, she'll be fine. Or maybe even 26. If you wanted to have it on one line. There you go. That's how you change it on a mobile device. We're going to wrap up this video on a desktop version and things we didn't cover yet. We haven't created our footer, the bottom section of every webpage. And we need to show you how you again at menu pages of year. 29. Create your website footer: So for now I'm going to exit the visual builder, save and exit. And it will bring us to the website. And I wanted to go to the dashboard. If you type in forward slash WP stripe admin, you go to the backend and under Appearance, you'll find widgets. This is where you edit and create the footer section. So the sidebar, I'm going to click it away for now. In this footer area one, what I always like to do is I'm going to add a little about decks over here, about social rocket. There's, This is awesome about text. I'm going to put it a little bit like this. Just for some fake text, make a really nice, nice text because this is the first introduction and a lot of people see about you. And then more about us. You can link it to your About Us page, something that I recommend. You can do forward slash about Stripe as maybe you want to underline it. You do it with a little bit HTML. I already underlined it with the short key command to you for underlying or Control U if you want to do that and then save. Let's see what we just created. I'm going to refresh this page. Scroll to the bottom. And this is the text with the link that we just created. So we want to have four columns over here. What I always do in the second column, I'm going to add a menu and let me feed. There's a navigation menu, you drag and drop it. There are no menus created so far. So let's create a menu. The first menu that we're going to create a footer menu, we're going to click create menu. And then we can fill all our pages. Just one. We go At home. It's nice. Again, we're going back. After saving to our widget section, we go to footer area number two, open the navigation section. Now we're going to add a little tidal, select the menu and click footer menu and hit Save. If we refresh the page again. Now we even got a nice-looking menu over there. So what do you want to put in a third column that's up to you. You can add in maybe a little contact forum, maybe some social media icons or stuff like that. Attack loud sometimes what people like to do, what you also can do is your most reason boasts, this is something that I do often if you're going to use a block feed or news Beach, something like that. I'm going to call this the latest news. And we can show our last three articles. That's for food. And number three, scroll back to the top. We got one more footer area left to cover. This is where I'm always going to put my company details. This is a nice structure. You can change it if you like, but it works for many of our customers. So why is it not working for you? Social rocketeers, our company name, I'm going to put that first in bold letters. It's looking super cool. Then don't do both anymore. Shift Enter, and then we live in Jupiter there. Number one, the postal code is 111 AB. The city is the moon, and the gantry is space. You can add your phone number. I don't know the numbers in space. And at social, rocket, their gum. Wow, maybe you want to link days. You can add a golf to link. That is something you do like that. You ended the little go-to links. So if people click it on our mobile phone, they started calling you. And you can also add a meal to link. So if people click that, they can start emailing you, open your email program. That's a cool feature to know how you do it. We're going to hit Save again, see what we created. There we go. We've got an awesome looking footer. 30. Add your website menu: Cool. We need one more menu. Again, we go to appearance menus, and we already create the footer menu, but we need another menu. There's a tiny little link hidden almost create a new menu. We give it a name. So this one is called the Header Menu. Create the menu, and then phew all. We find later homepage. We're going to create home. Save it. For the purpose of our video. We're going to create a few extra pages. We're going to quick edit this code, the about page about us. Make this slug about us. Let's pretend we got a really nice About Us page at the moment. We got to dress dish and a new page. Going to go at contact us. Now we've got three pages, right? So we go back to our parents. We're going to add these pages. Now we have a few more options over here. So we're going to add these two as well. You can change this if you like. I like to keep it short like about instead of about us, like to use one word, personal preference. I don't know why. You're done. Don't forget to save. You want to change it in the footer menu as well. One thing that you could do with the footer menu, this is where you see and what menu you are working. We are working in a Footer Menu. Other medically add new top-level pages. Do this menu. If you select that, then if you create a new page, it will be added to the footer structure. It's a really nice feature, so you never forget. But the menu is still not looking as it should be because it's now showing more pages or attempts. And this I'm not sure where it's getting this information from, but what we still need to do, we go to the Theme Customizer. Then you have the menu's option over there. We created two menus. And here you can select menu, it should grep. So this is going to be the primary menu. And there you are. We just set up our Header Menu. Let's pretend you're don't want to create multiple pages, but instead, you want to have a one-pager like a website that exists about one page. And if you click this button in the header menu, that is going to link to the second section because this is your About section. If you click contact, you want to scroll all the way down to the contact form. So the way you do that is you go to menus. The second section, we already gave it a name. So if we're going to change the header menu and click Select, go to About, You can remove it. You can add custom links as well. I can do forward slash section. Number two, domain. You go at about. I'm going to save the menu. Go back to the homepage, refresh it. If I'm going to click about right now and scrolls through the section, doesn't matter where. You always go there. If you wanted the same thing to be happening to this content section, enable official builder. Scroll the way down, then click the Settings icon, go to advanced. I didn't know what is the name of the section, so I'm just going to the number of the sections. I'm just going to go contact for right now. Save it. Remove this link at a little custom link slash hashtag contact. Give the link text a name, contexts, save it. Then exit the Visual Builder. Refresh to *****. Then boom, we scroll all the way to the button. That's a pretty cool feature right there. Let's assume that you want to have the About page as a sub page below contact. You can drag and drop this and then place it like this. So you've got this little whitespace over there. Now, it's a sub h over here. So you get this little drop-down about creating menus. We are finished with building your webpage for right now, this is how you design a web page with Divi has been super fun building this beach. I hope it was useful for you. And let's get creative and start building some awesome webpages. 31. Help people find your website on Google: Alright, so now you're finished, you're building your first website. Alright? Alright. Now you're finished with building your first web page. I'll ask them Is that you've come pretty far. You've come a long way. Congratulations to you if you're still watching, I'm super proud of you. And you can call yourself officially a web designer right now. But you are not an online market. They are yet because once you're finished building your first webpage, which you always want to do. You want to click Edit page. You go to the backend alpha of the beach. And did you notice sometimes when somebody shares a link on Facebook or something that takes an image from the website as well. There is a place where you can set this up so there's a featured image function. So this is something you always wanted to do. This is also good, really good for SEO purposes. Uploading my favorite space gap. And I'm gonna give it the name social racketeers. If somebody is going to share my link of my homepage, this is the image that they're going to see. So I just set my In Greek get in space, instead it up. And this is something really important to do. One last thing, do you remember we installed a plugin called Yoast SEO. Yoast is a Dutch guy and he created the most awesome plugin for WordPress in my opinion. Because this exactly tells you what you should do to rank higher in Google with your page. So Google is going to pick up your website. So if we go into Google that gum, it seems like a really simple website. If you go to the search results, if at typing in social rocket ears, there are bunch of websites that are ranking for these keywords. So basically, this is the page title, page description. This is the part over here. How do you where do you put these settings? Well, this is the place Wordpress, where you can do this with Yoast SEO. So I'm going to do first add a focus key phrase for the homepage, I recommend just your company name. If it's the about page, you can put in, contact social rocketeers or contact us, something like that. If you want to create a page specifically for social media agency in Amsterdam, then you can type in something like that. So for now, I'm just going to give it the page of the title. I'm going to put this right here like this. After adding the focus key phrase. Let's update the page for now. Save the page and do things that I notice. You'll see this orange icon over there is like working like a traffic light with red, orange or green. If it's orange or red, it means it's not good yet. There are still things that you can improve for your SEO and what are the things that we need to do? Then? We're going to click this unhappy smiley over there. It's giving you all the good results. So we already got internal links. That's a good job. We got a key phrase edit, and the length of it is good. We've got image alt attributes. I explained to you that you should always add them. But there's still a bunch of things that you can do. For example, the text is too short, so they recommend that we're going to use 300 words on this webpage or even more. And a few other things. If you don't know what one of these things are, you can Google what is what our outbound links, and then inbound links are links to other pages. But you can learn that from just googling these things. And then you learn what to do to improve the SEO rankings of this page. And one thing that you always wanted to do is edit the snippet. You, you can write the things that will appear inside Google over here. I'm going to add my SEO Dido, social rocket. There's my homepage, online marketing out of space, something like that. I can change the slack for our homepage. You'll never need to do it. But here you can change the permalink if you need to, but you always want to fill in is the meta description. So we are social rocket ears and we can write something like we are on a mission to save the world from borrowing content. And it's still orange because I didn't add enough text to this meta-description. It still wants me to add more and Mark boards and our mouth saving our planet. Now you'll see that we only got five problems left. We fixed one plot and problem. We added the key phrase in the meta-description and we edited a little bit in the front. If we're going to put this in the end. Going to say, You did a good job, but you need to put it more to the front. So we're gonna put it over there. Something else, keyword density, we need to use this word social rocket. There's more on our website. Just follow these steps. And once you've done that, you did a great job by optimizing your web page for search engines. And something that's super important. Once you're finished, click Update and make sure that everything is saved. Before we wrap up one last thing. And you see that I've saved this page for 28 times. If you make a mistake and you don't know how to go back, I'm going to teach it as really nice feature. If you're going to click Browse with revisions, you can go back to previous versions. I'm not going to do that right now. But if you want to go back one version and restored his patient, just click this button or return to the editor if you decide that you don't want to change it. Just a nice feature that I wanted to let you know about. 32. Congratulations!: Wow man, we learned a lot. We covered so many things. We went over super nerdy stuff with hosting and you found out how you can register a domain names. We installed WordPress. We installed WordPress being we installed plug-ins. We've been making decisions about how we can make our website and design it, and we actually build it yourself and optimize it for Google, basically, you learned all the basics you need to know about creating websites that generate results for companies online. And I'm so proud of you that you've come this far. It was super fun creating all these modules, all these videos for you. We prepared a bunch of modules upfront, super happy weekend. So far, we also planning to create more videos like this for in the future. Please let us know what you think about it. We are open for feedback, how to improve these videos for you? We're creating this for you. Let us know how this works better for you, or is it works really well already. And you can share yourself a little bit on the back and be proud of yourself for coming this far. If you came this far and you actually, it took actions to build this website yourself. It's a big step forward for your business and the internet and websites are always in development, so you always keep learning and still keep learning every day. My team still learning every day, but step-by-step do get better and better. But now you are ready after learning the most important things. So I wish you all luck in the world and all the success with your business, with your website, and it goes out of space, right? Thanks so much. I'm looking forward to see you in next videos.