Mastering WordPress: Build The Ultimate Professional Website

1. Trailer: welcome to build the ultimate professional website with WordPress course, where you learn to build the most amazing and professional website and with the latest design and features. My name is Malik Montagne. I'm a professional Web developer and designer and I'll be walking you through this course. I designed this course for anyone seeking to build his or her own professional, personal or business website and save up to $5000 per website and most importantly, for those interested in starting and no profitable career and what design. By the end of this course, you will be able to build an amazing custom and professional website for a client and charge up to $5000 for that website. In this course, you will learn how to build this website that first starts with this big and beautiful background image. And as we scroll down, you will add in the Services Section V called Action Section, the skills section that easy over here. I will also add in a customer's section with this customers lighter. Also, we'll add in a team section and last over here is the testimonials section will also add in the social media icons down here. And this button that will take us to the top of the page will also create a gallery, a blawg and a contact page. And as you can see for the contact page, it starts with this big, beautiful background image. And as we scroll down, we'll add in thes contact information over here and this live Google map over here as well as this contact form over here. Feel free to take a look through the course description, and I look forward to seeing you on the other side. 2. About Me, WordPress and The Course: Hi, My name is Malik Montagne, and I'm a software engineer and a professional web developer and designer. Throughout my career in the Web industry, I have built thons are beautiful websites and now I have gathered the best of the best designs and features that I have ever developed, designed and came across and using the top and simplest platform, which is word for us. Then I polished the content with the latest weeks and optimization and put it all in this course. Once you taken finish this course, you will have built the ultimate responsive website with the most professional and modern design and features known in the world of what designed these days, a website that'll wow and capture the attention of all your friends customers in everyone you know this website you'll built is a website that is worth more than $3000. And guess what? You will build this website from a dizzy all by yourself in step by step, starting from the most general aspect and all the way to the smallest details all or painstakingly gathered, tested and offered to you in this course on a golden platter. I'll even teach you how to optimize your website. Once done in terms of security performance and search engine optimization, and eventually you'll get a website that not only looks amazing and professional, but also has great performance, tight security and that is optimized direct better on search engines like Google. As a matter of fact, statistics show that a professional and neatly designed website interface can increase the productivity of your business by 25 to 4 day percent. So instead of having to pay someone or somewhat design agency 3 to $5000 to get a custom and professional website built for you, either for personal or business purpose, you will be able to do it all by yourself after you finish this course. And the most important thing is that this course will be a very strong jumpstart for you in a new, profitable career in Web design, where you'll start designing and building websites for individuals and businesses and charge 3 to $5000 per website, a website that you can easily create in your pajamas. Now, as for my teaching style in this course, I believe doing is the best way to learn this course as action oriented. You'll be watching videos and building your website step by step. As we go, you won't have to have a notebook to write down what you learn. Instead, you will have to have your hands stretched and ready for some magic. Simply just keep up with me and do what I do now. In this course, we will use a free software called WordPress to build our website WordPress as simple and easy to use. But yet amazing and professional tool we use in Web design to build websites as quick as possible and with no coding at all. WordPress is so far the most popular content management system in the world. WordPress is used by about 75 million websites around the globe. Not only that, but also WordPress is simple and easy to use and at the same time professional and gives you wonderful results in a short time. As a matter of fact, statistics show that WordPress is used by around 25% off the top business Web sites on the planet. Some of these include CNN, Best Buy, New York Times and the Rolling Stones. Now that I have introduced myself this course and WordPress as well. In the next tutorial, we will go over the fantastic warp site that we will build and explore its features and design. Thank you for watching. See you in the next tutorial. 3. What We Are Going to Build: Hi. Now we will go over the website. We will build in this course first, Go to the tab over here and enter the your l off this website Malik montagne dot com. Now I will click Refresh to see how it first loads. You can see that it loads with a fade and feature. And this website starts with this beautiful and big background image that covers the whole screen. And it has this header above here that is transparent and that we can see the image from behind. I will teach you how to build this logo right here as well as this one up here which is called the favorite con. And I will show you at the end how to add in the description for the page on the tab over here, which is included in the search engine optimization pluck. In that we will work on. We will create four pages a home page, a gallery at Blawg and a contact page. Now, if you scroll down, you will get to the services section with these beautiful transitions that happen. I will refresh the page so we can see the transitions happen again. And I will teach you how to fill in this circle all the way to 100%. I will show you how to change the icon that is included inside this circle as well as the background of the icon itself and the color of the icon. I will show you how Dad in these texts and these buttons down here that you can link anywhere on your website. And if we go down a little bit more, you can see that this call to action section that has this text about the main goal of your website and this button down here that directs to a different part possibly the gallery of your website. I will also teach. You have to add in this half blurred background image with some black overlay color on top of the image itself. Now, if you scroll down a little bit, we get to the skills section that has these beautiful progress bars. With these titles on each of the progress bars, as well as the percentage I will show you how to edit the percentage, the color off, the progress bars and all of these texts around here. Now, if we scroll down to the next section, which is the customers section with this beautiful slideshow playing. And if we scroll down a little bit more we see the team section with this fade in up feature. If we refresh the page to see the transition happen, you can see that they go all the way up and I will show you how to add in these buttons down here, which can link to a different page about the team and employees off your business. Now, if you scroll down to the last part, which is the testimonials section that has this video background off these beautiful stars as well as this slideshow plane, I will show you how to add in this box this image right here, this icon over here and to edit the background off the box. And if you notice once I hovered on this box, it stopped playing slide show. But if you hover away from the box, you will see that this light show is playing Now. Now, at the end here, I will show you how to add in these social media icons that can link toe your social media accounts. And of course you can add them more social media accounts down here with different icons and different colors. And last but not least, I will show you how to add it. These two lines down here about the copyrights of the website and if you notice as we scroll down on this page, this header was sticking to the top with transparent background and the logo and pages were sticking on it all the time. Now down here, if you click this button, it will take you to the top of the page. Now let's go ahead and explore the next page, which is the gallery page. Now. The first thing on the gallery page is this beautiful background video that can be about your business about yourself or simply any video you want. And down here, this section with this animated background that keeps changing the color. You may not notice the change in color because the colors change smoothly and I will show you how to make the colors of the animated background change smoothly and not all of a sudden form yellow to red, for example, and you can see it down here, this bun that you can link toe your contact page, for example, or any page you want. No, If you scroll down a little bit, you can see this beautiful background image with this parallax scrolling feature. And if you scroll down a little bit more, you can see the actual gallery with these beautiful images that also has a parallax background. And over here, the title of the gallery itself has an animated background that keeps changing colors smoothly. Like I said before now in the gallery itself, if you click on any of the images, for example, this one here, you can see that it pops up in a light box and you can slide right or left to any of the images. And once done, if you click the X over here, you can see that the image goes back to its original place. And I will also teach you how to add in these captions down here. And if we scroll down, you can see that these social media icons will show in the footer as well as this text down here. As a matter of fact, they will be showing on all pages Now, once again, if you click this button, it will take us to the top off the gallery page with this video plane in the background. Now, let's go ahead and check out the blawg page. Click here and here ago. This is the blawg page. Now in the block page. The first thing I will teach you how to add as these two posts over here, I will teach you how to make a featured image for each one of these two posts. And I will show you how to make these images change color to gray once you hover over them . And if you click on any of the images, it'll open the post in a separate page. The post structure will be like this. First, it will have this featured image on top. Then it will have the date. The post was published over here in this red circle. The title of the post over here And over here, the author of the Post, The category Off the Post and the tag off the post and which I will show you also how to add to each and every post you create. Now, the last part here is the actual content off the post. And if you scroll down a little bit. You can see this hair over here that once clicked will take us to the previous post that also has the same structure as the one before with different category and tag, as you can see here. Now, let's go back to our block page. Just click it here and on the sidebar. Over here you see these beautiful widgets. And if you don't know what a widget is, simply a widget is just a block that has a certain content with a certain functionality. For example, 1st 1 here is the search widget that has this box here that enables you toe search anything in this website. Now the next week. It over here is the Facebook like box. This would yet simply links your website to your Facebook page that enables your customers or website visitors toe like or share your page from within the website. Now, for example, if a customer clicked like page over here, you can see that this window pops up and prompt the customer to enter his or her Facebook credentials and then click log in to like the page. Now the next widget. Here is the email subscription list. This is a really important widget because it enables you to build a customer subscription list that you can use in your business to send offers or promotions. I will show you how to edit the text over here, the text here and the text on the button as well. I will even teach you how to change the color off this button over here. Now, if we scroll down a little bit more over here, you can see the instagram feed widget which enables you to link your instagram account toe this part right here and it'll play as a slideshow once you add it in here and I will show you have to choose from a variety off designs for this It's the grand feet widget. And if we scroll down a little bit more, the last widget we will add down here is the most commented posts. Widget. This widget will have the most popular posts on your blogged, and I will show you how to limit the number of hosts shown here to three. In case you had more than three posts, it'll Onley show the most popular three posts on the blogged now If we scroll all the way down, you can also see these social media icons and these two lines down here. Now let's click this button that will take us to the top of the page and then click on the contact page. Now the contact page starts with this beautiful, vibrant background image with this sort your image in the middle as well as Avi's text down here and this arrow down here. Now, as we scroll down, you can see that this image has that parallax background feature. And if we scroll down a little bit more, you can see this section that has contact information about your business, like office hours, location and contact us information. And if we scroll down a little bit more, you can see this beautiful Google map that has your business location over here and this professional contact form over here that enables your customers to enter their information . And once they click, send these information will be sent directly to your email address. Now, the last thing here is the footer, which also has the social media icons as well as these copyright lines Down here. Now we click this one and we go back to our home page. In the next tutorial, we will start building our website step by step with no step. Skip. Thank you for watching. See you in the next tutorial. 4. Domain Name and Web Hosting: Hi. Now I will start this course by introducing the three main things we need in order to get a website online. The 1st 1 of these is called domain name. The 2nd 1 is called Web Hosting. The 3rd 1 is the theme we need to install and build our website. On first, let's start with the domain name. What is a domain name? A domain name is simply the name off your website that appears in the or L when people type it over here to get to your website. Now, as you can see here, the domain name consists of two parts. The first part you see over here, which is the personal or the business. Name off your website to you choose and the second part you see over here, which is the extension of your domain name. And in our case, it's a dot com extension, and there are tens off domain name extensions that are available and that you can pick from like dot net dot info dot me dot com over here, which is one of the most common ones and so on. And you can always pick a domain name for your website as long as that domain name is not reserved by anyone in the world. However, for example, if I have this specific domain name with this extension over here reserved, you can always pick and reserve the same website name you see over here, but with a different extension for example, a dot net or a doctor in full and so on. But for this specific domain name, you cannot pick this one here with this same extension because it's already reserved for me . Now, there is one more thing you need to consider when picking a domain A for your business or for yourself. If it's a personal website, make sure you make it look as professional and as simple as possible and not include lots of numbers like this or dashes and than numbers again, and then letters that don't make any sense. Make sure it's professional, simple and easy to memorize, And once you reserve this specific domain name, no one else in the world can reserve this same domain name. It will be unique and specifically reserved for you, and no one else can use it. Now this gets us through the second thing, we need for our website, which is Web hosting. So what is Web hosting? Well, simply what posting is the service? You need to store your website files so people around the world can access these piles by typing your domain name and the box Over here And in short, Web posting is provided by so many companies around the world whose mere business as to provide high quality Web hosting. Simply. The process of hosting your Web site in these companies is done by storing your websites files, which are connected to your domain name on high powered and large computers that are commonly known as Web servers, and the servers are available 24 7 for access. Besides, these Web servers are connected to the Internet, so people around the world can access your website through them. And this is for domain name and Web hosting. Now, in this tutorial, I will go over free and paid Web hosting. Now for this purpose, I have picked two off the top Web hosting providers in the world. One of them is considered one of the top and free close and providers, and the other is considered one of the top if not V top paid Web hosting provider. Now first, let's start with the free Web hosting provider. I will start by going to this tab over here and to this sample website that I have created on a free Web hosting provider called wicks dot com. Now there are three main reasons why I never recommend free Web hosting providers now. The first reason is that these free Web hosting providers are not search, engine friendly, and most, if not all websites built using free Web hosting providers are not indexed by search engines. And this is really, really important because if your website isn't indexed by search engines, you will be losing a lot off traffic and a lot of valuable customers. That's simply because people won't be able to find you on search engines like Google. And this brings us to the second point off why I do not recommend through Web hosting, which is the fact that free Web hosting providers do not give you a brand herbal domain name, and I want to emphasize a non rentable domain name. Now, in order to understand what a nun Brandel Domain name is, look over here at this extension off this website I have created. If you notice this website does not have its own unique domain name because after the website name is he over here? There is a dot wicks dot com, and it's not a dot com. It's never the same as a dot com. This is what we call a sub domain. It's not a full domain for you. It's a sub domain, meaning that it does not start with your business or personal name and end with the extension you see over here, there is always something in between, which is the free hosting providers name Wicks and also this part over here, which is called a sub directory that represents the website name. Now, once again, this one you see over here is not what we call an international domain name extension, like a dot com or a dot net and so on. It's a sub domain. You see over here, this is a sub domain and not a full domain that is uniquely reserved for you. And this is what you will find on all Web hosting providers that they do not provide you with your own domain name and unique extension. Their name will always be stuffed here in the middle. And this u R L you see over here is not easily remembered by your customers or even by you . It is hard to remember and does not look professional, and it will not help you build trust with your customers. If you have a domain name that looks something like this and guess what? Eventually, in order to build your professional, responsive and beautiful website, you will have to pay for these Web hosting providers, and you will have to pay a lot off money much more. Then you would regularly pay for a good Web hosting provider, and I will go over that in just a second. Because if you want to build a website that has enough storage, enough bandwidth, a good domain name over here and with no annoying and forced ads like the ones you see down here and up here now with these free Web hosting providers, in order to get these features, you will definitely need for your website with those free Web hosting providers to get the ads removed to get a decent domain name for yourself and enough storage bandwidth support and so on. You will have to upgrade for a premium account. Now let's go to a very premium accounts and see what they look like. Now, in order to be fair in this comparison, I will choose the top two packages those guys have, which is the one you see here, the unlimited and the commerce E C. Over here. Now, if you look at the monthly price of these two packed is over here. This one here is for about $16 a month, and this one over here is for about $20 a month. And if you look at what these provide, you will notice that the bandwidth and the storage are not unlimited in this package, which is very, very expensive. And also for this one here, even if it provides unlimited bandwidth, it still does not provide unlimited or what we call on a metered storage. Now let's go to the page or post a provider and see what they have to offer for us. Now, if you look at the most expensive and premium plan those guys have, that is the business plan. You will see it is for $13.56 a month. And if you look at the features they provide you with, there's a neater disk space, which is basically the storage they offer you. And as for the bandwidth, it's unlimited. And as for the domains allowed that you can host on this plan, there are unlimited and the list goes on all the way down here. And even if you look at these other two plans, you will see that they also provide you with a new meter disk space and a new metered band with also still, this one here provides you with unlimited allowed domains, which is the one I have personally purchased and that I will show you have to sign up for in the next tutorial. Now, one more advantage that these paid Web hosting companies provide over the free ones that those guys, they have their servers up and running 24 7 and it is guaranteed that your website will not be down for any reason because they have backup servers and your website is always hosted and won in. But as for this one here, it is definitely not guaranteed with free Web hosting providers to have your website up and running 24 7 because most off the free What posting providers don't have their own servers to host your website on most of them and not necessarily this one. Here they rent servers in other countries that are not maintained by them personally, and that may go down a lot. But with hosting providers like those guys, you guarantee that your website is always up and running, and it's always backed up on their servers. And as for this Web hosting provider, which is called host gator dot com, those guys were awarded the top 24 73 65 customer support among all Web hosting providers in the world. And the offer. So many other features, like 45 Day Money, Back Guarantee and so on. Like you see all the way down here. And I personally, after doing a lot of research and trying out so many Web hosting providers, I have came across this one here and found out that host gator dot com is the top Web hosting provider for me so far, and this is what I recommend for you as well. And like I said before in the next tutorial, I will walk you through the sign up process for this website. The sign up process to get a domain name and hosting for your website. Now. Thank you for watching. See you in the next tutorial. 5. Signing Up for Domain Name & Web Hosting: high. Now that we have explained what we mean by Web hosting and domain name, it's time to sign up for a hosting plan as well as a domain name. Now we're going to sign up for hosting and domain name on this website. Right here it is called host gator dot com h o S t g a t o r dot com Now, from now on, in this course, any website we visit any your l we type right here is going to be available in the resource is section off VI tutorial and simply you can go to the resource is section and just click the link and it'll get you to this website right here. Now it's time to begin the sign up process. First, go over here to Web hosting. Click it now, scroll down a little bit and you can see that we have these three plans available to choose from now. Personally, I have picked this plan right here. Now, as for the business plan, we don't need a business plan. We either need this one here or this one right here. Now, the fundamental difference between these two plans the hatchling and the baby plan is that this plan right here provides you with unlimited number of domains to host. While this one here the hatchling provides you with a single domain meaning that you can Onley host one and Onley one website on this hosting plan. Whereas if you go right here, you can host as many domain names as you want, either for you or for your customers that you build websites. For now, if you click right here, you see that you have a variety of options that you can choose from now. Personally, I have picked the one year subscription. But for the purpose of this tutorial, since I will be giving you a discount coupon and to make it more clear how much discount this coupon gives you, I'm just gonna pick the monthly right here and then I'm gonna click Sign up now. Now, Like I said before, I personally suggest that you have a one year subscription because the discount coupon I'm going to give you gives you 25% discount and you will get a better deal on the year subscription. Now, when you get to this page right here, the first thing you want to do as type in the domain name you want for your business right here. Now, you can always choose to add in the www before your domain name and type in the dot and then add in your domain name, for example, I'm on Add Malik a multi and Montagne, or you can choose to delete the www like I did with my domain Me. Now, if you click right here, you see that this particular domain name is not available because I have already purchased and reserved this domain name. However, you can see that the other domain names with different extensions are available and you can pick from. And if you go over here, you can pick the domain name extension that you want for your website. And if you notice each extension has its own price. Now, in order to make the sign up work, I'm just gonna enter one, 23 after my name and then click right here. And I won't really purchase this domain name because I have already purchased mine. I'm just using this Malik Montagne 123 to show you how to sign up for this web hosting plan . Now we scroll down a little bit and you see it down here. Ad domain privacy protection for this particular website. I'm on and check this one here because it adds $9.95 to your bill. And we don't really need this for now. Now we scroll down a little bit and you confirm the plan you've picked and the subscription period, which is one month in our case, and you see that it has automatically giving you 20% discount. However, I will give you a coupon that will get you 25% discount my personal coupon. Now, over here, you need the enter your user name. I'm gonna end her M a l i k. Malik. And make sure you fulfill these requirements down here for the user Any now. Down here, you pick the security pin. Just pick any random security pain you want. Just make sure it's not easy to guess, and you scroll all the way down here and feeling all of these information and your credit card and for right here or your PayPal information, either one you prefer. Now, if you scroll down, you get to these add owns right here. I'm gonna end. Check all of these because we don't really need any of these. Now scroll down a little bit more and you see that this coupon snappy is giving you 20% discount. Now, if you enter my personal coupon, which is Malik m A like a 25 off. Make sure you spell it right. M a l i k 25 0 double f. Any click validate and you scroll up a little bit. You notice Over here there is a 25% discount now instead of 20% which is really a good deal for you. Now you scroll down a little bit and you see the order details. As for the support, it's for free. As for account activation, it's also for free. And you have a 45 day money back guarantee, which is really, really good. And over here, the domain name registration. You have registered this domain name. You have reserved it for a whole year and for $12 in 95 cents. And be careful once again. You have reserved this domain name for a whole year. Not for a month. Your web hosting plan is for one month right here. And you got a discount over this one here, as well as over this one right here. Now, the total amount of discount is about $5. In next month, you will only have to pay for the hosting plan right here. So your bill will not beat $11 in 91 cents. Next time you pay for it, it will only be the web hosting you are paying for now, when you're done, you click down here to agree to the terms and services and then click check out down here. Now, once you have finished this whole process, you go through your email that you were provided right here. So I'm gonna go to my email right now, and you get this message right here. You get to this same exact message except for the user name and password. Now, in order to access the control panel off your website to start building the website and installing WordPress, you need to click this link right here. And it's different for everyone. So just click the link and you get directed to this page right here. Now ask for the user name. You go back to your email and copy this user name you got right here and then go back and paste it right here. Now, as for the password, you go through the email and you copy this password you got in the email. Now you go back and paste the password right here. Then you click. Log in now we are on the control panel off our website. Now, I suggest you bookmark this page because we're gonna need it in the future. And please stay on this page. Thank you for watching. See you in the next tutorial. 6. Installing WordPress: Hi. Now that we logged in to the control panel, the first thing we want to do is change the password off the control panel. We go to a preferences, we click on change password in here. Now we type in or just copy and paste the old control panel password that we got in the email and type in our new control panel password. Then confirm that password and click change password. But I'm not going to change my password since I have already changed my Now we go back to home page and we begin our word press installation. We scroll down to software services section, we click on Quick Install, and in here we go to popular installs. We click on Ward Press and in here click on and still WordPress. Now, we first choose the domain name we want to install WordPress to, and we leave this field empty because we're only to install it toe up half and in here we type in our email address and the block title we want and then our admin user name. Now, as for the admin user name, it cannot take any spaces like this. It needs to be in one piece like this. Then we type in the first name and our last name. After that, we click on Install WordPress. After a few seconds, you see this message over here and click on view credentials. Now, before we can access our WordPress height with this Lincoln here and these user name and password, it usually takes up to 15 minutes to configure WordPress on our website, but in some cases and may take up to 24 hours. See you guys in the next tutorial. 7. Logging in to WordPress and Editing Profile: Hi. In the previous tutorial, we installed WordPress to our domain name. And like I said, it usually takes 10 to 15 minutes for our website to be up and running with this WordPress installation. But in some cases, it may take up to 24 hours. Now, let's go ahead and log in to our WordPress control panel with this link. No, this is the WordPress log in page that enables us to access the control panel for our website. Let's go back and copy the user. And then we got here and paste it here. And the same for the password and paste of Hasse word. Now we log in tow. Our website. Now, this is the control panel for our website called the Dashboard. The first thing we want to do is change the password for this wordpress dashboard. So we hover over users and then click on your profile. Now we scroll down to a new password down here and click on generate password. You know, first, I'm gonna click on hide and then delete this password and now type in your password for WordPress, your new password. Now there is one thing you need to know about this password. It needs to be either medium or strong. It cannot be weak. He won't be able to update your profile if the password is weak. So try to include upper and lower case letters and, if possible, some other symbols, like digits and so on. Now there's one more thing I would like to change here. Display name. I would like to change it to my first name. This display name is the name that displays of here. And there are multiple options that you can change as well, Such as a theme. If you click on, for example, this one midnight. It changes the look of your dashboard, but I'm gonna keep it to the default one. And there are multiple options as well. You can change the chest first and last name and the email. But that will be enough for now. Now click on update profile. Now we hover over settings we go through general. Now, this is the site title that appears up here. I would like Toa type in my first and last name. It could be your business name or any name you want in here. This is the short description of your website. I'm just gonna type in academy. Now we scroll down and click on save changes. The next thing we want to do is the same area settings and go down to Perma links and click on it. We go toe host name and click on post name. This is for search engine optimization purposes. It increases your click through rate on search engines. And this is the first step towards optimizing your website for a better rank on search engines. Now we click on save changes, and now we go toe posts, hover over post in here and click on old hosts. And then we want to delete this sampled host over here, so we hover over trash and click on it. Now we click on trash in here and then click on delete permanently so we can delete permanently. Now we do the same thing for the sample page, hover over pages and click on all pages. As for the sample page, click on trash. Now go to trash click on trash the elite permanently. Now that we have deleted the sample post and page, the next thing we want to do is go hover over plug ins and click on his told plug ins. You know, these are the default plug ins that come with the workforce installation. We would like to deactivate this one. Here, click on this one. This one, this one and this one. And go up here, click on bulk actions, go to the activate, then apply because we need to deactivate them before being able to delete them. Now do the same thing. Select these four plug ins and book actions, then delete. Now click on Apply. Yes. Do leave these files and data. Now that we have installed and logged into our control panel this dashboard off our wordpress website, the next thing we want to do is go toe appearance, hover over here and click on themes. Now, in the next tutorial, I will teach you had a upload and install the theme on the dashboard. See you in the next tutorial. 8. Setting up Email Forwarding: Hi. Now we're gonna set up email forwarding No. Before Explain what? Email for war days Butts first scroll down. Do male section over here and click for orders. Now click down here. Add forwarder. Now, simply email forwarding means that you set up an email address that has your website name in it and so that people can send emails to, And this emails will be redirected to a different email of your choice, which could be your really email address. For example, let's first type in support as a prefects for this email and your websites email address will be support at your website name, which is Malik Motown in this case dot com, And down here in this box, you type in the rial email address that you want these messages to be redirected to. Now, once you're done, you go down here and you click. Add forwarder, and if you click, go back over here. Now, when you get to this page, you can see the redirect meal over here and the rial email address that the messages will be sent to over here, and you can always delete and add some more email for orders from here and here. Now I will go back to home page, and that's it for this tutorial. Thank you for watching. See you in the next tutorial. 9. Theme and plug in installation: Hi. Now let's take a look at our website and see how it looks like hover over here and click on visit site. Now this is the default theme and look that comes with our WordPress installation before we make any changes or choose any other theme now that we have seen, how are reps that looks like, Let's go back, hover over here and click on dashboard, hover over appearance. Click on themes. Now these are the three default themes that come with WordPress installation, and this one over here called 2015 is a default activated theme. What we're gonna do now is upload our own theme and activated so we can work on it now. First, click on Add New And as you can see over here, there are multiple themes that we can choose from, as well as so many other themes. But the theme we are gonna work on as one of the best among nowadays seems in the whole world. Let's go ahead and upload it. Click on upload theme, click on Choose File, and this is the theme that you guys downloaded. It's called Signify Ultra. Go ahead and click on Open now click on Install now and it may take about a minute toe upload the theme, and in some browsers, it shows the percentage over here. You know, guys down here shows how much uploading is done. Now, once it reaches 100% down here, the theme will be installed. Now that the theme is installed successfully, let's go ahead and click on Activate. Now, when you get to this page, it means that the theme has been uploaded and activated successfully. Let's go ahead and take a look at our website and see how it looks like after we uploaded our theme. Hover over here, click on visit site. Now, this is the default. Look off our theme that we are gonna be working on. It doesn't look that good, but once we're done with it, it's gonna be awesome. Now, once again, hover over here, click on dashboard, and we are going to install the needed plug ins that we are gonna work with from now on. Hover over plug ins. Click on add new Over here. The first plug in we are gonna install is called easy Google Phones Type and easy Google Funds and hit Enter Now, this is the plug in that we are gonna install. It helps us change the phones on a rope site in ah, more dynamic way. Now click on install Now over here, Click on Activate flag in Once again. Hover over here. Click on add new and go to search leggings and type contact Form seven and hit. Enter. Now, this is the contact for unplugging that we need. So click on install Now now click on Activate Plug in Now, Once again, click on add new go over here and type and mail. Chimp four, Ward press and hit Enter. This is the plug in male champ for WordPress that we need. Now click on install Now, now click on Activate plug in Once again, hover over. Add new go over here in Titan s K T Space Skill bar and had to enter. Now this is the plug in. We want click on Install Now, now click on Activate, Plug in and I will show you guys what these plug in. Or for once we start working with them. So don't worry about it now. As you can see, there is one more plugging that I left out here not active, but I did not delete this plug in. The reason is that you are free to use. Display it on your website. It's a good anti spamming plug in that helps protect your block from comment. In track Back span, we are going to keep it for now. I personally don't like activating and using this plug in. But if you want to, ye are free to do that. That's it for this tutorial. See you guys in the next tutorial. 10. Making The Logo: Hi. In this tutorial, I will show you how to make your own local. But before that, let's go ahead and install this one last plug in that is needed for our theme. Now hover over here and click on. Begin installing Plug in. Now hover down here. Click on install. Now that the plug in is installed, Let's go back. Click on here. Now hover over here in Click on Activate. Now that plug in is activated successfully, we are gonna go ahead and make our first local. Now, as you can see here, there are two logos the main headline logo here and the little one over here That is called Favor Icon. Now that our three websites in which you can get your local the 1st 1 is called Fiverr F I v e double r dot Come in this website. It's cool that you can get to your own logo for only $5 hover over graphics and design here hover over local design you like on it here Now, as you can see here, there is a lot off logos that you can choose from a lot of designs and Onley for $5 the price changes as you change the period off delivery. For example, if you change it to our 24 hours, the price goes up for all of these logos. But if you keep it toe up to seven days, many of them will be for $5. Now there's the second website that you can get your logos from. These are paid logos. It's called 99 designs dot com. In this website, it's a little bit more expensive now. You click on get started now, and there is a variety of categories down here that you can choose from. For example, you go to logo identity and click on logo design, and you basically submit your requirements and the looks, colors and cetera that you want to be in your logo design. And they give you a lot of designs that you can choose from. But the basic package here, I guess it's $399 so it's a little bit expensive now. The last one that I will show you is called logo m, a k r dot com and this website. You can make your own local click on next. Next, next these are just some tips to show you how to work on your logo. Now I will make a sample logo. I will make these two logos the one you see here and the favorite con here. First, let's start with the favorite. Come click on text and let's go up here. And I would like to choose simple and modern formed. And here click on this one. Here, Goto arch. Evil Black. Now I am going to type in the first letter off my name. Jews. The color you can click over here. This will pop up beacon. Drug it up here or down the way you like it. I am going to choose this color for the first letter and I will hover over this one here. Right Click and click on copy. Now drag it as you can see and right click and then click on paste. This is the second letter, but I'm gonna change the color toe. Ah, black and I will make this one a little bit smaller. Let's just make this one a little bit larger on this one. Here on. It's good now, when we are finished, you hover over here and click on save logo. Now the logo is saved down here. Let's preview our logo. Click on drawing as you can see it saved as PNG. It's an extension that means the local we have has a transparent background. Now let's go ahead and create the second logo, which is the one you see here with my full name, Malik Morton. Now let's create our second logo. Double click on this letter here and type in my first name or your business name the way you want and then my last name. And as you can see, you can just drag this one here a little bit to the left and now hover over here, cried corner and click on Save logo. Now that it's downloaded, let's double click it. As you can see, this is another PNG picture that it has a transparent background, and there is one more thing I will show you. Besides these texts, you can also get so many symbols to add into your logo. Click on search here, and, as you can see, are hundreds, literally hundreds off icons that she can add to your logo and they're all for free. So this is how you create your free logo. Thank you guys for watching. See you in the next tutorial. 11. Theme Settings and General Layout: high. Now that we have made our own logo, we will start editing the general layout and settings of our theme. But before that, I will show you one important thing, which is how to log out of your dashboard in case you wanted to take a break and come back later. So we hover over here, and as you can see here, you can click on log out. You go back to this page, which I personally have bookmarked, and you can log in later. Enter your years and name and the password and log in. Now we will start editing the layout in settings of our theme, hover over ultra here and click on it. Now, when you get to this page, the first thing we want to do is upload our favorite con, which is the first logo we made. You can see it in the content you downloaded. This is the favorite con. Now click on open No scroll down to Google Fonts and Google Funds list. Click on show all Google funds. Now let's click Save And if you go up and refresh the page, you can see that the favorite Khan is showing up here. Now we go toe default layout The first thing we want at it as index sidebar option. Click on this one here with no sidebar. Now scroll down to hide Host title and click on Yes, because I don't think it looks good. And as for Hide, post meta hover over Heidel in click on Height, these don't look good as well and auto featured image. We would like to check this one here. And as for the featured image position, I would like to make it below Post title because once again it looks better and scroll down default, single post layout. I would like to choose no sidebar here. And as for the post meta, I would like to keep all of these on now. Scroll down to default page layout and this one here. Once again, we will choose no sidebar hide title in old pages. Click on Yes, because we don't want the pages titles to be appearing on the beginning of the page and page comments. We would like to disable page comments. Now click on save, scroll up and go toe theme settings. Now the first thing we want at it is this one here. Click on. Apply lightbox to image links. This basically makes the image pop up in a box like box when you click on it in the gallery . Now scroll down. And as for header design, click on this one here because it looks best. And we would like Toa exclude these site tagline search form, the RSS link, the header, widgets and the social would just because all of these don't look professional on our header now header widgets Click on None. Footer design. We would like to keep it toe default. Exclude site logo from here. Exclude the menu navigation because we're one of the men you and Paige titles to be appearing in the footer and scroll down to image. Filter an image hover filter. Click on gray scale because once you hover over the images, it goes gray and apply toe all images and down here, animating background colors. This is for the animated background that keeps changing colors. Animation speed. I would like to set it toe seven. Now, As for the color animation, I would like to show you have to choose your animation colors. Click on new tab and type in this website picks slur dot com p i X l r dot com slash editor and hit Enter Now we would like to open image from our computer, and this is the color palette I have included in my content that you guys downloaded. Click on it and open now Hover over here over the color picker tool. Click on it. And as you can see, there is a color flow that moves up. Instead of changing all of sudden, from pink to yellow or pink to blue, it goes gradually and the color changing will be smooth. So we would like to choose colors that are adjacent, for example, this row here and it could be connected to any off the other. Rose. Let's take this role as an example. Click on it and one see Click on it. You see the color here changes click on the color Here, this window pops up and you copy this hex code from here. You copy it, you hover back and color animation number one, you paste it here And as for the 2nd 1 you go back, you pick the next color, Which is this one here. Click on it now hover over here. Click on this one here. Now we copy this color code copy and go back and haste it. Now the color animation Number three, we do the same thing. We have her over the 3rd 1 Here, Click on it and get on this one here. And copy the color code. Click OK and paste it and the same for the rest. The 4th 1 Here, look on this one. Jews, the color code. Go back. Haste it. Here. Next one, go back. Okay. And click on this one. Here, choose this one and copy this color code. Okay, Go back. Paste it here. Now. Number six, go back. And now this one Here. Click on it. Look on this one here. And this one here. Copy. Okay. And then go back and paste it here. And as for the last one, I like to choose the same as the first animation color Copy and paste it here because I think it rhymes with that. It's like a circle starts here and then goes back to the same place where it started and a meeting. Now scroll down here. As for the footer text, we will change the footer text hover over here. Click on new tab and down here instead of powered by WordPress, we would like to add copy, right. So go back and footer Text to you can type in copy, right. All rights reserved or whatever you want and you click on save. And if you go back to the website, click on Refresh. You see copyright is here. Thank you guys for watching. See you in the next tutorial. 12. Creating Home Page and Editing Header: high in the previous tutorial. The last thing with it was added this part of the photo text and as you can see in footer text to we entered the text we want and it automatically showed up here when we refreshed the page. Now it goes the same for this part of the foot or text. If you go back and type in a text in footer, text one here and click on Save It shows in here instead of this one here. But I believe this looks good. Now we are going to start making the header this transparent, beautiful header. We are going to add the first page, which is the home page, this one here and adding this logo hair, also adding this beautiful and vibrant background image. Let's go and first click on pages now click on Add New now type in here home now scroll down here And as for content with Click on Full with As for image, hover Filter Creek on none. And as for a page title, we would like to hide it. Yes, now we go to theme appearance here, click it. And as for header design, this one here now click on Publish, not Go Back here and refresh the page. And as you can see, it's showing in here. Let's go ahead and customize this header here. Click on customize goto Signify options here. Now go to site logo and tagline. Now choose logo image and click here and click on upload files here. Now select files. Now choose this header Local that we made. And if you want, you can use my head of local in the my content you downloaded and click on open No click on insert image And as for the dimensions here, enter 1 10 by 50. Now click on save and publish. Now scroll down. Click here to minimize it and go to main navigation Here, click on it and scroll down Do menu, link, hover and enter Not in this field here but in this one Here, the 2nd 1 This code seven to C E. If to now this color, we would like to copy it and enter the same code for a menu Active link and enter in the second field in here. No click on save and publish. And as you can see when you hover over whom And when home is clicked, the color will be Lewis. No, we go up, minimize this main navigation. We goto footer, Click on it. Now, the only thing we wanna edit here as the footer Background color. Click here and enter this code F six F six F six. Now click on save and publish. Now scroll down after you minimize it and go to custom C s s. Now, As for custom CSS, you need to goto my content. The content you downloaded. DoubleClick, CSS styling. Copy this text here and go back. Paste it here and now you click, save and publish. And as for this field you see here if you increase it for example and her 0.5 As you can see, the transparency goes a little bit off, meaning that it becomes less transparent and darker. But I would like to keep it 2.1 because I think it looks best. Now click on save and publish. Now go back and click here. Now, in order to add it, this home page we need to hover here, go to dashboard and go to pages. Click it now, hover over homing here and click on seem. If I builder now, as you can see here the same. If I builder has popped in here from now on, it will be on because it needs to be used at least once before it gets activated and gets on this bar up here. And there is a note, this bar up here. It's on Lee for us when we edit our page, but it does not appear for other people. When the view our page as you can see here, it does not appear up here. It only appears when we are editing our page with our WordPress dashboard. Now, since we have our theme fly builder on, we will start editing this home page, hover over here and click on options. Now we would like to go to row with and click on full woods. And as for effect, click it and typing F f once again and, as you can see here, fade in, click it like fade in down here it's easily found, and as for background type, we would like to keep it to image. As for background image, we want our own picture, click, browse, library and click select files and scroll down. Unless you have your own picture, you can use mine here. This featured beautiful image and click on open. Now click on insert File your L and as for background mode, click here and select parallax Scrolling. Now scroll down and go to padding in here for the tub. We would like to add 4 30 and for the bottom for 80 and scroll down and click safe. And as you can see this picture, beautiful picture is showing in here. Now don't worry about this space between the picture and the top of the page. It's just for us to be able to edit it better. And once we click, save and click close, you can see that the image has moved up and that the header is just covering the part that we don't see from the image. Now, in order to make this header transparent and the picture behind a visual to us, we go to edit pages. Click on pages here, hover over home and you goto theme appearance, click on theme appearance, and as for header background, we click on transparent background, then scroll up and click on update. Now if we go back to this home page. Click on Refresh. Here. You can see that the image as visual tow us now and the header as transparent and smooth And it looks professional. Thank you for watching. See you in the next tutorial. 13. Building Services Section(1): high In the previous tutorial, we made this beautiful header. With this transparent background we created the first page, which is the home page. We added the local we made and we added this beautiful, vibrant, that ground image with this parallax scrolling background. Now the first thing we want to do here before we add this services section here and with these beautiful transitions that happened. As you can see, we will go here and we will make this home page the actual home page for our website, meaning that when you or anyone else types in the U. R l of your website and hits enter, as you can see here, they don't go directly to your home page. We want to make them go directly to the home page instead of having to click on home and getting to the home page. So in order to do that, we will go back to our dashboard, hover over settings and click on reading. Now, over here you choose a static page. As for the front page, you select home and down here you click save changes. Now, if you go back to the website, you delete this sub directory here and you click enter. You can see that this home page off the website is the actual home page that we made. Instead of having to click on home to go to home page, it automatically goes to home page when someone goes to your website. Now, let's go ahead and start making this services section here. As you can see, the thin if I builder is the tool that comes built in within our theme Ultra. And it is a tool we use to build our website. And every time you wanna build our website, we hover over here and click on turn on, Builder. Now this banner pops up with these modules on it. So the first thing we want to do is drag the text module here and drop it and we are not going to add any text in here. We will just click save. This is so we can add another module down here. We want to leave this one here empty. But if you feel like writing anything in the middle off this picture, you are free to do that. But I don't think it looks good for this specific design off the website. And if you scroll down, you hover here. As you can see, you can see this drop module Here we will select text, click it home the button and drop it here. Now, over here, we type in our services. Now select our services. And here toolbar toggle, you hover over it, click it and you see this section drops down. You click on paragraph. You select heading to now you select all of this again and you make it involved and a line in the center Now click save. And as you can see, this is our services in the middle. It's a little bit large, I know, but we are going to edit this later. Now select the divider module, click and hold it, and then drop it here. Now for this module. First the divider style. We would like to choose double and for stroke thickness, choose number four and for divider color, you can select the color you want if you click here. As you can see, there are multiple colors that you can choose from and move it in here to choose the color degree you want. But I have the color code for our design, which is three de seven a eight C. Now, as for the top margin, I would like to enter zero. And for the bottom margin, I will enter 12. Now click Save. And if you hover here, you can see these dividers off the module. Select this one here that divides it into three equal sections. Then drag it here to the middle and drop it. Now we will add in these icons and these texts and buttons in the next tutorial. Thank you for watching. 14. Building Services Section (2): Now we will add in these three featured icons with these transitions and the text as well as these buttons down here. Let's start with the 1st 1 First. Select the feature. Click and hold it. Now drop it here. Now we added the text we want here. That is gonna be below the icon. No, I have my text ready. So I'm just gonna copy now. Go back. Click here when paste as plain text. Now is for this one. Here we are gonna make it bold. Click on the toggle and choose Heading five. No, this one Here we will keep it to paragraph and then select Oh, and put them in the middle. Now, the next thing are going to do is hit. Enter and hover over here to add in the button, click on short codes. Go to a button. Click it. Now, As for the button text, I am gonna type in. Try it yourself. As for the button style, it consists of three parts. The first part specifies the size of the button, which I am going to set toe large the second part when you tab space and you type in the color but I'm not gonna choose any color from here. I'm gonna leave it to the default. The third thing, he chooses the button type as it shows down here, there are four types of buttons. They're actually five. There is one that is not mentioned here, which is the outline. So you can choose, like, large, flat or large surrounded. But I am going to choose large out line and then scroll down. You can set the background color for the your button that we want, and you can make your button redirect to another page, a different location. But I'm gonna leave it toe its default. I'm not gonna type in anything on the text color. You will need to enter the hacks code. No. The last thing here is the link target, which specifies to open the link in a new tab or to open the link within the same page. If you leave it to default, it's gonna open the link. Your tie been here instead of the page you were at? It's not gonna open it in a new tab, But if you type in underscore blank, it's going to open it in a new tab. Now click on insert. And as you see, this is the button code. We want to put it in the middle. So line in the center, No scroll down. And this is where we set up the icon, the color and the transitions. As for the layout, we would like to choose eye contact. As for the percentage I'm gonna leave it until the end to show you. What do we mean by percentage? As for this stroke, this indicates the thickness off the transition line. So I'm gonna set it to to As for the color you can click here, which was the color you want choosing the color degree here. But I have my own color code that I'm gonna enter here, which is four zero a de to de. Now, As for the icon size, I want to set it to medium. As for the icon type, we are gonna leave it toe icon. Now, as for the icon itself, click here. I'm gonna type in F A dash C o G s f A Cox. Now you can select your icon from here. If you click on insert icon, you can see that the icon I have selected is this one here? Once you click it, the icon name pops up in here and automatically this F A dash pops before the icon name so you can choose the icon you want If you click here, which was any name if the example for example, you choose Bell, you go back, you type in F A dash bell and the bell icon shows on your page. But for now, I am going to type the icon I chose, which is F a cock's. Now, as for the color here, I am gonna set it to white complete white. So if you type in F six times here, it's gonna be a white. As for the background color, I am gonna copy this code here and paste it in here. This is for the background of the icon. Now we click save and you see the icon is showing in here. Now, as for the percentage you click here at it, scroll down. If you type in, let's say 75% you click save. You see this transition goes all the way 75% of these circle, but I will set it to 100%. So it goes all the way around, look like save. Well, As you can see, it rotates all the way around 100%. Now, as for the other icons, we hover over here. We select this one here that divides it into three sections. Three equal sections. Now we drag this one here and we hover over here. We go down and click on Duplicate. As you can see, it has been duplicated. Now, once again, however, over here click duplicate and it has been duplicated. We have three copies. We drag this one here. We drug this one there and we have three icons Now. We hover over this one here we click at it and, well, you know, edit the text and the colors in here as well as the icon. So as for the text, I have this text I want to put in there. I'm just gonna copy and paste it. Now this here will be heading five ground us for this one Here, it's gonna be a paragraph. And as for this one, we're going to make it bold. Then we scroll down and we keep everything the same. Except for this color code. I would like the chosen. This color code 168 D A b No, we copy this color code Copy and paste it here House for the icon. Here I am gonna choose this icon f a dash board press and we'll keep everything else the same. Not click save. Now we go to the third icon. We hover over here. Look like at it. As for the text, I am gonna copy this text that I have ready on Paste it here. Now we choose the header. Toby heading five. We make it world on us for this one. Here we keep it. Toe paragraph, we keep the button the same. No was scrolling down. As for the color code, I am gonna type in e B six a 00 Now I'm going to copy this color code again and paste it here. As for the icon, I am gonna type in, have a dash desk top Now we click, save and we click. Save here again. Now we hover over here we click on options. Now we choose the background mode to be full cover. As for the background color, I would like to type in this color code F six F six F six. Now scroll down, then click Save and I would like to go to our services here. Click. Add it now go toe styling. Now we scroll down two patting we enter for the top 30 and scroll down and click. Save on over here we hover over here. Click on options. We scroll down to the background color here in type in the same background color. F six F six F six. Now we scroll down. And as for the padding, type in 10 and scroll down, then click safe. Now we hover over here. Click on options. We go to background color. We type in F six F six F six to make the same background color for all of them. Not click on Save now click Save again. Here, click on close and you can see these beautiful transitions with these buttons and texts. Done. Thank you for watching. See you in the next two Tory 15. Building Services Section (3): high. In the previous tutorial, we finished building the services section. We added these icons, these texts and buttons. Now, in this tutorial, we will add it The funds off the services section for this part This part and this part all of them together. Now there is one more thing. We need to add it before we go to the funds. There is these text decorations down here that we added to the buttons. I will show you how to add it in here. So first hover over thin. If I builder turn on builder Now scroll down and cover over here and go to add it. Now you see, Try it yourself down Here you click right after the F and tapping space and adding in double arrow You are free to use this decoration. I believe it looks good on most designs and do the same thing here like at it. And when you get here, you go to try it yourself, click right after the F space and then adding in double arrow, not click save and do the same thing for the 3rd 1 Go to edit. Now go down here to try it yourself a space and a double arrow. You are free to use this decoration and I'll click Save now we click Save here Mickley close and you see this decoration is done. Now we will go ahead and ended the Florence of the services section Go to customize. Now, when we get here, we go to a tomography and click on default to Biography again. And these are the funds that we can add it, which are done by the easy Google funds plug in that we installed. Now we go toe paragraphs click here so we can edit the paragraph type buttons and scroll down to the services section so we can see the changes all the forms when we do them from here. And as for the fun family, click here and type in robo toe r o B o D o. Now down here, click on Rabbo Toe and you can see that the text here has changed. Now look here And as for the fund wait, click here and select 300. You can see that the fund weight has changed as well. No, we click here to minimize it and go down to heading to now we choose for the fun family The same front again Roboto R o b o t o And click on robo toe Here You can see that the formed has changed for the title here and for this Wait here, Click here and select Regular down here Click on regular Now we go toe appearance Here we go down to font size We maximize it till we get to 30 pixels. As you can see here 30 p x means 30 pixels. No, we minimize this here Go down to heading five Click here and scroll down a little bit to fund family Click here and type in Roboto. Choose their voter from here Now go to front weight She was regular. Now go up here Click, save and publish. Now we click here and go back. You know we scroll down, do with the services section down here and you can see that the fonts has changed. Let's check the website and see that they look exactly the same Now as for the funds we changed. We added it the funds not only for the services section but for all the sections and all of the pages We are going to create and work on. From now on, the funds were Did it are for all of them. Thank you for watching. See you in the next tutorial. 16. Call to Action Section: high in the satori ALS. I will show you how to create this section that is called the Action Section. With these texts and this button here first we will need to create and edit this background image. So open a new tab and go to this website folder dot com F o t o r dot Come and hit. Enter. Now, when you get to this page, you go to edit and click it. Now, if you don't have your own image, you can use this image action. Click it and then open. Now, when you get to this page, you go down here to resize. Click it and you delete this number here and enter 1500. Now, As for this here, you keep it the same as it is. Now you go up here to a crop, click it. And as for this height here, you delete it and type in 1500 ask for this wood here you type in 400. Now you come here and drag this one here up and down the way you want. As for this tutorial, I will drug it all the way down here. Now we need drug it to the area you want. You go. Here you click. Apply now. We hover over here to effect Click it now go down here to tell shift. And as you can see, there is this blur effect that enables you to blur the area you want and keep the other un blurred. Now, as for the shape off the blur, you can choose linear or circular. If you notice this circular enables you to un blur a circular area. And for this one down here, the brush size first I'm gonna choose linear and I'm going to increase the brush size about this size here and drink it till here and now We are done. We hover over here and click Save now down here to quality. We click here and I would like to choose normal because I don't think we need a high quality image for this section. Now click Save to my computer. I'm going to save it as action Underscore. Done. No, We click save and we are done with the editing. Now exit this website here and we go to our website. We scroll down and we turn on the builder. Click here now we scroll down to drop module here. Over here. This section we hover over here and click options first. As for the effect, click here and I would like to choose pulse. Now, as for the background type, keep it to image and for the background image we click on Browse Library. We click on upload files and now click select files and select this image. We edit it no click open and down. Here we click. Insert file euro. Now, As for the background mode, we would like to choose full cover. Now, as for the overlay color, we click here. Hi, Elected chose black. And you see this skill here It's for the opacity. You adjust the opacity of the color that overlays the image, meaning that you control the transparency of the color and how much you can see of the image beneath it. I would like to put it about here around 60%. Now click here and I scrolled down. And for the text align here, Click on center Now scroll down to padding. And I would like to add 10 for the top. Now scroll down and click. Save. Now we have inserted the background image. Let's go ahead and add in the text. Go down here to a text drag and drop it here. Now you enter the text that suits your business best. And as for this website, since it's about Web design, I'm gonna enter my text. Now that I have entered detects, I want if you notice there is a space between these texts, so it makes it look better. As for this text here, I want to choose the heading to type. I would like to make it bold. And as for the color here, I like to choose white and align it to the center. And if you click here, you will see that it has and disappeared. But it's here with you. Select it. You can see that it's still here now for this one here we select it. As for the front elected, she was heading five. And as for the color, I would like to make it white and align it to the center. Now we hit enter and enter again toe, make a space between this text and the button we are about to add Now hover over here over short codes. Click it and go to buttons. Now, as for the button text, I'm gonna enter, get it done and add in thes double arrows. And as for the button style, I'm gonna type in large blue flat. And I'm gonna leave these fields empty because I wanted to be any other color than these here. And I don't want this button to redirect to any page. But if you want to, you can make it redirect to a different page. For example, toe your gallery toe, check out the designs you have. Now we click insert, and we select this button. We align it to the center. Now we go through styling here and we scroll down to font size. Here, click here and enter 18. Now we scroll down to a patting and add 30 for the top and 30 for the bottom. Now we scroll down to save and click save. And as you can see, we are done with the action section. Now click Save here and click close. You can see that we have built this beautiful action section. Thank you for watching. See you in the next tutorial. 17. Building Skills Section: high. Now that we have built the action section, it's time to build the next section, which is the skills section. It is the one you see here with these beautiful progress Mars. And with these transitions, we will add in these texts and these texts here as well. Now first, let's go to our builder. Turn it on from here. Now we scroll down and we hover over here and click options. Now I will edit the effect. If you type in F twice, you will see that it goes to fade in. You click it. And as for the background color, I would like to enter this code d one d one d one. And of course, you can select your own background color if you click here and you know how to do that. Now we are done with the styling here. So let's click, Save. And now let's start adding the first text, which is the header Drag and drop this text here. Now we type in the text we want I'm gonna type in what we're good at now, select the whole text. As for the fund I like to select heading to and I would like to make it bold and align it to this center. Now we click save and as you can see, it's done. No, it's adding some padding. As for patting, it means that it's the distance between this text and the section before it's this area over here. So I would like to add in some padding if you click here, go toe styling Here, scroll down two patting. And here I like to enter 30 for the top and now click Save. As you can see, it has stepped down a little bit. Now let's go ahead and adding the divider. We are not gonna add in the divider module from here. We are just gonna duplicated this one here and then drag it down. Now hover over here and click duplicate. Now you click and hold this module here, you scroll down and drop it here. Now we will divide this into three equal sections. If you hover over here and click here, you would see that it has been divided. Now drag this one here and drop it right in the middle. Now we will add in the text you see here, So let's go back so, like the text module from here. Drag it and drop it right here. Be careful not to drop it here or there. Make sure you drop it here. Now you enter the text you want, and I have my text radius. So I'm just gonna paste as plain text. And if you select your text, I prefer to choose the heading five and align it to the left. Now we go toe styling. Here we scroll down to a patting and for the bottom, we would want to add 30 and click save. No, we hover over here and select this divider right here. Click it and you see that the text is now aligned to the left. Now, in this area here, we will add in the progress bars. So first, let's select the tax module drug and dropping out of this area. Now we will add in our progress bars code right here. So go back to a dashboard, right beneath settings. You go down to s Katie Skill bar, you click it. And as you can see, you have three different designs here. I recommend using this one here because it looks best and it's more professional than these down here. No, you copy the code beneath it and you go back and paste it here. Now we go to styling. We scroll down to a padding and add in 30 for the bottom. Now click save. You can see these beautiful transitions And these titles here, here, here and here. And these percentages here that represent how much loading is done by the bar. Now, let's go ahead and edit this one here as an example to show you had to add it to the title for a progress More as well as the percentage now hover over here. Click on, Add it. Now this is the title, you see. It's right here Between these quotation marks, we will add it. This one here as an example. So you select the text right between this quotation marks and enter the text you want. I want enter Web design. And as for percentages, you go here for this one here, right between the quotations where it says percent and this one here. I want to keep it to 90% by this one. Here, I want ad in and nine to make it 95% and this one here. I want to add 98%. Be careful not to delete any of the quotation marks because it won't work if you do that. And I want to keep this one here to 100% now we go to save and you can see the title has changed here as well as the percentages. This is all for this section. So let's click, save and then close. And we are done with the skills section. Thank you for watching. See you in the next tutorial. 18. Building Customers Section: Hi. In the previous tutorial, we finished building the skills section, the one you see here with these beautiful bars and transitions. Now, in the sectorial, we will build the customers section. You see here with these beautiful sliders and images. Now, as for the images you see here in these sliders, they all have the same extension, which is PNG. They're all PNG images that have transparent backgrounds. Now, any image you upload here, any logo needs to be a PNG image in order to look professional and have a transparent background. Now, in case you have any logo image that you want upload and that's not a PNG type, for example, A J P G or anything else, I will show you how to transform it into a PNG image. Now first open in New Tab and go to this website. Picks ehlert dot com p i X l r dot com slash editor Now hit. Enter now click on open image from computer and you scroll down If you don't have your own image, I have a sample image here that you can select. It's a J Peg file and click open now maximize at a little bit from here and you hover over this tool here. It's called the Wand Tool. You click it now you select the parts you want to show in your icon and you leave the rest unmoored. As for the marking, first you click on this one here. Now you press and hold the shift button and you select the parts you want in your image. I'm going to select all of these letters one by one. Click on this one here. This one. This one Here, here, here and now this one here. Hear, hear This one here. And these two here and here. Now click control, See to copy it. And now you hover over here. You double click this one here to unlock it. No, you go down here and click new layer. Now you unmarked this one here by clicking it. Now on your keyboard, you hold down control V to paste it. And now we have our PNG image. Now go through image here, click it and you go toe image size. Click it and now you select the words Toby 300 and click. OK, now you go to file and click on Save and here. You click here and you select PNG. It's really important to choose Pay n g. Click it now click. OK. And as for this one here, we're going to save it as logo to know Click, save and close this tab here to go to our website. Now scroll down and turn on Builder. Now we scroll down. So this part here we hover over here and click options. Now we go to effect click hair and enter F twice so we can go toe fade in Click it. And as for the background color, I'd like to enter this code F six F six F six now scroll down and click Save here Now we drag and drop a text module here and have been the title of the section which is some off our customers now select the whole text, go to fonts here and select heading to now we make it bold We align it to the center and then we go through styling here and scroll down to having we select 30 for the top and zero for the bottom. Now we go down here to save Click it Now, As for the divider, we ever gonna copy of this divider here. And it drunk it down. So hover over here. Click duplicate. Drag this one here, all the way down and drop it right under this one Here. Now we hover over here and divided into three sections. Now drag this one here to the middle section. Drop it. And now we go through these lighter module right here, drag and drop it right below this one here. Not here, but a little bit down here. Now, as for they display mode here we select images. As for the image royal, we click, Browse, library. And now we go to upload files and click select files. Now, as you can see in the content you downloaded, you have all these logos. You are free to use them. If you don't have your own, click on logo one and then click open. Now click, Insert file your l and then right here. You see, add new row, you click it and you click. Browse library again so we can add another image. And now click upload files here and now, select files. Now we scroll down two logo to which is the one we just edited. No click open and insert file Your L Now we scroll down to this part here to select the styling. Now we go down, we keep all of them the same. Except for these Here you click here and select No, because we don't want any slider every buttons to be showing. I believe it looks in professional. And for this one here we also select No And for this one here as well, like no. So we can keep the flow of all the images altogether consistent and professional. Now we go toe styling here, click it and we scroll down. As for text align, we click center. I scroll down a little bit more and when we get to padding for the top reaches 30 for the bottom Riccio's 30 and for the left Here we choose 30 as well to make it look better. No click save and we have the first slider. Now we hover over here we goto this one here divided into three equal sections and you can see that we have three equal sections here so we can add two more sliders toe align them all together now hover over here and click duplicate and hover over this one. Here. Click Duplicate again. Now we drag this one here, This one there and we hover over this icon here. Click edit so we can change the images and you see this X here you click it and click Browse Library. Now you go to upload files, select files and we choose Logo three, Click open. Now we click Insert file your AL and with the same for this one Her We click on this X here to remove it and click. Browse library Now go to upload files and select files. Now scroll down. And was this one here? Look like open now click Insert file your l and now click Save. Now we hover over here. Click at it and we remove this one here. Bravo's library Goto upload files and select files. Why didn't the fifth logo Now click insert. Follow your al Go down to this one. Here click remove and rows labor again Upload files. Select files we scroll down. Inch was the last logo here. Now click open No click Insert file. Your l now click Save Know that we have successfully built our customers section there is one more thing that I will show you. As you can see, these three logos slide in a way that looks somehow in professional. So we are going to change the way they slide. You have the option to do this if you want to. So hover over here and click at it. No, we scroll down And as for the effect, we select fade right click save. And if you notice here it's lights in a more smooth and professional way So we're gonna change the others to really the same as this one Here, click at it now scrolling down to effect and click, Fade Not like save on Do the same thing for this one here at it Now scroll down and for the effect we select fade and then save Now we are done with the customer section We click, save and then close. And as you can see, we have successfully built our customers section with these beautiful and professional sliders. Thank you for watching. See you in the next tutorial 19. Buidling Team Section(1): Hi. Now it's time to start building our team section. Before that. Let's review what we have built so far in our website. Let's go to our page here. And as you can see, we first started with Beautiful Header and we added this home page. We added this logo here as well as the favorite con you see up here. And we added this beautiful background image and we added the parallax scrolling future with this beautiful services section. With these transitions and buttons, we added this action section here we created this skills section with these beautiful bars And last but not least, we have built this customers section you see here now it's time to start building our team section first, let's turn on the builder here. Now we scroll down to this area right here. We first go here and click options. Now we go down her toe background color. We adding this hex code D one d one d one And of course you know how to select your own color by clicking here. Now let's scroll down and click. Save now let's start with the header off this section. Let's drag and drop this text module right here and type in the title of this section. No, select the text and the fund, Of course, heading to as before, No click bold and a line to the center. Now let's go through styling here and scroll down to having and adding 30 for the top and zero for the bottom. Now click Save down here. And now, As for the divider, we go up to this section. Here we hover over here and click duplicate. Now we drag this duplicated divider all the way down and right below this here, drop it. No, we divided into three equal sections from here. We drug it to the middle here and now it's time for the images. Now we won't be adding the images right below this one. Here, we will hover over this part. Here we click options. Now, as for the background color, we will add the same background color, which is D one d one d one. And as you noticed, it doesn't make a difference whether it's upper or lower case letter. It all works the same. Now we scroll down to having we add in 24 the top and 20 for the bottom? No. We scroll down and click Save. Now we go to the image module right here, drag and drop it in this area here. No, first, as for the image style, we would like to choose this one here, which means centered image. And as for the image or l browse, library, upload files, select files and select the image you like And for this one here, I'm gonna choose my image right here. Click open now go toe insert file your AL. And as for image appearance, give this one here around it checked. And I'd like to check this one here as well as for the woods. I would like to make it 3 50 by 400. Now we scroll down to image caption and I'd like to enter my name. Now we go toe styling here. Now, as for effect, I'm gonna click here and enter F twice until I get to this area that's crawled down until I get to fade and up. Click it. And now I go down to foreign size. I click here and enter too and click on this arrow here and select m. It means emphasis and now go to text in Click a line center. Now we go to save here, and as you can see, we have our first image. Now hover over here and click right here to divide it into three equal sections. And I want to direct this one her to the middle, Then hover over here and click duplicate. No, hover over this one. Here, drag and drop it here. Now click Duplicate again from here and drag this one up here. Now, let's start here for this one. Here, hover over this icon. Go to add it. And now for the image. I want to cancel this one. Her browse library, goto upload files, select files. Well, then choose this one. Here. Now click Insert file your l and keep everything the same. Except for the caption name. Here. I'm gonna write in the name Michael Stewart. Now click. Save. Now go to this one. Here, click at it. Now we cancel this one here. Rouse library, upload files. Select files. Now scroll down to the last image of this one. Here. Open now. Go to insert file your al And as for the caption here, I'm gonna enter the name a click save Now we will continue adding the texts as well as the buttons below these images. And in Exito Auriol Thank you for watching. 20. Building Team Section(2): Hi. Now we will continue adding these texts you see here as well as of these buttons. First, let's drag and drop this text module right below this one here. Now we enter the text we want Don't have gotten my text ready, so I'm just gonna copy and paste it as plain text here and align it to the center and choose this one to be bold. No, I'm gonna enter. Enter once and hover over short codes. Here, click it. Go to a button. Now, as for the button text I'm on. Enter read more. As for the buttons tile, I'm on Enter media blue flat and I'm gonna leave the rest of the fields nt. Of course, you know how to fell them and what each and every one of them mean. Now let's go to insert and this button here aligned to the center. Now we go down here to save and we are done with the first text. Now let's hover over here and duplicate this text and hover again and duplicated again. It makes it easier and faster to work. If you duplicate stuff and drag and drop it here, drag and drop this one there. And let's modify this one here, Look at it. And I'm going to select another text, so I'm gonna get my text from here. Now, make this one here. Bold. And now we go to save down here. Now we hover over here. Look at it and I'm gonna enter my text, which is the one here. Someone a copy and then haste as plain text. Right here. Now make this one here bold and click. Save down here. Now we have created this team section. Let's click, save and now like clothes. And as you can see, we are done with our team section. Now let's go up all the way to the top and click Refresh in order to see the changes and the effects of each section. Now we scroll down and we see the transitions in the services section. We see this pulse transition of the action section. We see these progress more is loading. We see these customers lighters going and we see the team section with these images here going fading up all the way till here. Now we are done with the team section. Thank you for watching. See you in the next tutorial. 21. Buidling Testimonials Section: Hi. In this tutorial I will teach you how to build the testimonials section. You see here with this beautiful video background and this slider over here Now the only thing that'll be left after we build the section is adding these social media icons that you see down here. Now let's go to our website and see what we are up to. So far we have finished building the services section. We built the action section, the skills section you see here the customers section here. And the last thing is the team section you see here we will start building our testimonial section right after re edit and get these images ready. These circular images right here we first goto a new tab and enter Pick monkey dot Come P I c m o and K e y e dot com now hit. Enter now wouldn't get to this page cover over added Here, click it. And now you choose the image you want for this tutorial. I would like to choose this one here. Click open. Now. The first thing you want to do when you get your image right here is go to Reese ice and make sure your image is under this scale. 600 then click. Apply now. As for this image, it's already 600 by 600. But be careful of any image you want. You make sure it's 600 by 600. Now let's goto frames over here. Click it and go up here to rounded corners. Click it and first you check this box here to make sure this image has a transparent background. Now let's maximize the circle and let's make it a full circle. As you see this background you see, here is a transparent background, meaning these squares back there won't be in our image. We will only see this circular image right here. Now we go to save. Now make sure that the image type here as PNG make sure you select P n G. Now go down here and click Save to my computer and we will save it as testimonial Underscore to underscore done one no click save and we will do the same thing to the next image. Not like open scroll down. Do this one here, click and open it. Now we'll go to rounded corners and you check this box right here. We make it full circle and now we click safe. Now we make sure it's PNG right here, looked like save to my computer and I would like to say that as underscore Done one. Now click Save. Now we close this tab here and begin building our testimonials section. Now let's go to our page and turn on builder right here. Now we scroll down and hover over here. Click Options. And as for the background type I wanted to his background video, click, browse, library now upload files and select files. Now you can choose this video that I have included in my content. It's right here. Stars video background, click open Now that the video is uploaded, weekly concert fall your L. Now we scroll down and click Save right here and now you can see that this section has a video background. Now let's go ahead and start adding the text drag and drop this text module right here. Now adding testimonials. Select the text. Now we want to choose heading to make it bold. Make it centered. And as for the color, I want to choose white to make it visible to us. Now we go through a styling and scroll down to a patting. And for the top, I want ad in 30 pixels for the bottom we want to add zero. Nah, click save. Now we get the divider that you see here we duplicated first and now a drag and scroll down . Then we drop it right below this one here. Now we hover over the divider here and divided into three equal sections and drag it to the middle. And now we want ad in the slider, the drag, and drop this lighter right below it. Here. Now, as for the display here, we wanted to use text. The one you see here. Now, we first enter the text we want. I have my text ready. So I'm just gonna copy it from here and paste it right here. Now we add the picture. So click on add media. Now go toe upload files, select files. Now scroll down and you can see that we have it right here. Either one of these two. First, I'm gonna enter this one here, click open. Now we click insert into post, and now we maximize it a little bit from here this quarter. Click and scroll it down. Now, as for this image right here, I want to minimize it to about 200. Now we have over here and a line left so we can add this text to the right. Now we click here right before the text and click on short codes. Now go through walks right here. Click it. Now, As for the box style, it's almost the same as the buttons. But there is one thing that is different, which is the mark you see here. This one is called the comment, and this box here is just called rounded, and we are gonna add it from here. Now, First we add in the color off the box, which is blue. In our case, As you see here, it's blue. The next thing we enter as the icon you see here, this one here is called the Common. So we go back and and her comment now enter space and enter the style of the box, which will be around it. In our case. As you can see, it has a rounded corners. And now scroll down and click Insert. And you see these codes here. You would want to select this one here, then drag it down right after this one. Here. Now scroll down and now click. Add new row. Now we have this new row. We first enter the text we want. I'm just gonna paste in the text I got and I'm gonna change the name of the person down there. Now we go up here, we select this code from here. Copy. Now scroll down and paste it right before the text here as plain text. Now we copy this one here as well and paste it down here right after this one here as plain text as well. Now we click here and click Add media. Now we go toe upload files, select files now scroll down. And over here we said, like this one here, like open. Now we click insert into post and we minimize it first. Click it now, Minimize it from here to 200. Now we click here, a line left and we scroll down. Do this part down here and we go to speed right here and select slow. Now, as for the effect, we select fade And for this one here show slider. Pagination weak like no and show slider error buttons. We click. No, now we go to save here. Now we have our testimonial section ready. So we click. Save now we click close now we finished building our testimonials section. The only thing left as dad in the social media icons down here and have a final look on our page before we start building the next page. Thank you for watching. See you in the next tutorial. 22. Adding Social Media Icons: high. Now that we have built our testimonial section, The only thing left on our home page to add is the social media icons down here. Now let's go back. And there is one more thing. I will not teach you how to do, which is if you go to this image right here. If you click it, you would see that it shows in a light box up here. Now, in order to cancel this feature and to make this image unclip Kable, we first turn on builder. Now we scroll down and we hover over this one. Here, Click it. Now we click this image right here and you see this edit Here you click it. And if you see over here linked to media file, we click none down here and now click update. Now we scroll down to the next image. We click it and we click on this one here. Now, as for linked to over here, we click on none. Now we click update Now we click Save and there is one last part over here. If you see this section here, it's white. We don't want this section to be showing up on our page. So we hover over here we click delete. Now we click save and weak like clothes. Now, if you go down, you see that if you click on this image, it's not gonna pop up in a box. Now let's go ahead and start adding our social media icons down here, which will be showing on all pages on the footer. No, first to go back to dashboard and go to ultra. Now, go here through social links and you see this social media boxes, all of them. We are going to start with Twitter over here. As for the link you add in the link to your Twitter account over here. So I'm gonna adding a hash sign in order to make the icon off Twitter appear on the footer but does not link to anywhere Now, as for the icon color, we click here and go toe blue. How much was a light blue color for it? Now, as for the background color, I wanna type in F six times nine. Click here to make it have a white background. Now scroll down. This one here is Facebook. As you can see, it's just a text so you can edit it and enter whatever you want. Now, as for the link, you enter here a hash. And as for the icon, you see that it's f a Facebook. You know how to insert an icon by clicking? Insert icon here and you choose the icon you want by simply clicking the icon. Or if you don't want to look into that long list of icons if you just type in F A dash Facebook and the Facebook icon shows on the footer. Now, as for the icon color, I mean look like here goto the blue color and choose some kind of a dark blue. As for the background, I'm gonna choose F six times for a white background. Now, the next one here is Google. Plus, I'm gonna make a link toe nowhere, So just enter a hash Unless you have a Google plus account and enter your your AL over here has for the icon color. I'm gonna choose a red color. Just enter the color you feel suits you best. And for the background color, enter white. Now, As for the YouTube, I'm on enter a hash. As for the icon color, I'm gonna choose almost the same as Google Plus. Now, as for the background color, we are gonna make it white. And if you see down here, there's one more account added one more social media icon. We don't want that. So we simply click on this X here and we only have four icons showing in the footer. Now, if you want to add any more social media icons, you simply click Add link over here and this box shows up, you enter the information as we have done before. Now let's cancel this one her Let's click save And if you notice the icons we chose here, here, here and here they all show up on the site Over here, here, here and here. Now let's go back to our page. And if you see, even if you refresh the page, the social media icons will not be showing in the four yet because we need to add them manually as a widget. So we first go to customize over here. Now we go down here to widgets and now we go to foot or social widget here. Now we click on add widget. No, we scroll down to simplify social lengths. We click it on you see, if you go down to the footer that the social media icons are showing down here. But they are somehow small. So we are gonna go here toe icon size. Click it and she was large. Now you see that the social media icons are large enough to be visible over here, and by this we conclude the home page. We click, save and publish. No, we click here to will Go back, leave this page and now we are done with the first page, the home page. Let's review and see what we have built. So far, we have built this header. We added the home page, the logo, the favorite con, this beautiful background image. And as we scroll down, we added the services section. We added the action section here with a pulls effect. We added the progress Mars here we added the customers section here with these beautiful sliders. We added a team section here, and the last thing we added was the testimony of section. And then we added the social media icons you see here and if you notice there is this era right here that if you click it, you go to the top of the page. Now, after we have created this home page, we will start creating and editing the gallery page. Thank you for watching. See you in the next tutorial. 23. Creating Gallery Page: Hi. Now we will start creating and editing our gallery page. We are going to create this a beautiful page that first starts with this big and beautiful background video. As we scroll down, we can see this animated background section here and this a beautiful background image with the parallax scrolling feature. And as we scroll down, we go to our gallery with this beautiful and animated background header. As we go down, we see the beautiful gallery that we have created. And as for this background, it's a parallax background. And if you notice if you click on any of these images, they pop up in a light box. It you can choose any picture you want from, and you can go back and forth between them with these errors on the sides and when you're done, you click on this X Here it goes right to its place and at the end here you see these social media icons that we have previously added. They show up on all pages from now on. Now let's go to our website and start creating the gallery page first. Go through new over here and click on page. Now we enter the title of the page right here. So we're gonna enter gallery and we go down here. As for content with, we choose this one here with Full with. Now, as for image hover filter, we choose none. And as for Hide page title, which was yes, because we don't want to The page titled to be showing on the beginning of the Beijing Now we click publish. Now we go over here and click on view page. And as you can see, we have created the gallery page. We will start editing the gallery page by clicking on the turn on Builder over here. The first thing we're gonna add, There's this beautiful background video that you see here. So we go to our page, we hover over here like options. Now, as for the effect we click here and enter F twice to choose Fade in down here. Now, as for the background type, which was video As for the background video, here we go to a browse library. We upload files and we selected the files from here now, in the content you downloaded. There is this video called the water. We choose it unless you have your own video about your business. Act like open Now, This video may take a while to upload, so sit back and relax until it fully uploads. Now we go to insert follow your ill down here and now we scroll down until you see disable Audio Here we click it and there are some other features that you can play with over here, for example, disabled. Looping. Here. This means that the video plays only ones and does not Luke and start again when it finishes. Now we scroll down to a patting we add in 3 94 the top and 3 90 for the bottom and we scroll down to save. And as you can see here we have our video background and there's one more thing we're gonna add to this video background, which is an empty text just to drag and drop this text over here. Now, we're not gonna enter anything, so just like save this is so we can add another module down here because this section does not pop up unless we had something in the previous section. And changing the background is not considered a module change. So we need to add in a module here anything, even if it's empty. That's why we added the text module over here. Now we will continue building the gallery page in the next tutorial. Thank you for watching. 24. Building the Gallery Page(1): Hi. Now we will continue editing and building our gallery page. The first thing we're gonna do before we go on and add this section here is make this header. You see up here transparent. So we go to our dashboard, we go through pages right here. Now we go to a gallery over here, Click head. And now we go to a theme appearance down here. Scroll down a little bit. And over here had her background which was transparent background. No, we scroll up, we click update right here and we go to our gallery again. No, If we click save and clothes now, go here and click. Refresh. You see that the header is now transparent and we can see this beautiful video from behind . Now let's start adding this section right here with this text and this button. Let's go to our page and turn on Builder. Now we're going down. Do this section right here. We hover over here and click options now first. As for the row width which was full would as for the effect here which was fade in so just enter F twice and automatically goes to fade in Now as for the background mode. We choose full cover from here and now we scroll down to text a line right here and look like center. Then scroll down all the way down until you see additional CSS class. And over here you enter animated dash B G. Make sure you enter this right. And don't missus palate because it won't work. And this is for the animation of the background. As for the colors, they are the colors. You see that we added to our theme here. If you go to settings and we scroll down, you see that these colors over here will be added to the background of the section. Once we type in this ward over here, no click save, and you can see that this section has an animated background color. Now let's drag and drop this text module right here and then enter the text. E want about your business or your gallery? I'm gonna enter this text right here. Now we select our text, we make it heading to fund. We make it bold and align it to the center. Now we hit Enter. Once we go through short codes over here and we click on a button. Now, as for the button text, I'm gonna type in connect with us. As for the button style, I'm gonna type in large outline and I'm gonna leave the rest anti, then click insert. Now select the button code and align it to the center and then go toe styling over here. Now scroll down to Patty. Now, As for the top, I'm gonna enter 30. As for the bottom, I'm an answer. 10. Now we go to save down here, Click Save. And as you can see, we have successfully built this animated section. Now click, save and scroll down so we can add this background image here with this text in the middle . So go back and drag and drop the text module right here. No, I'm gonna enter neat design. I'm going to select this text. I'm gonna make it having one, align it to the center, make it bold and change the color to white. Then we go through a styling up here and we scroll down to patting. I'm gonna enter for 60 for the top and for 60 for the bottom. Now we click. Save Now we go over here and click options. As for the background type, we keep it to image. And we brought his library to select our image. We upload files, we select files and we selected the image right here. Click open. Now we click Insert file your L. Now, as for the background mood, I would like to select Parallax scrolling from here. Now we scroll down and click Save right here and we are done with this section. So we click save and clothes to see the changes we made. Now he's scroll up. You see this beautiful by ground image with this parallax scrolling by ground And you see this animated section with these colors that keep changing smoothly and this video that we have built previously? Now, if you notice this button over here is a little bit far from the text, so we gotta turn on the builder. Now we scroll down and we click here to edit the text. And if you see that there is a space between the text and the button, so we just clear the space, then click Save and I would like save again over here and click close. Now if you go all the way to the top. You see that? This bun is showing here and the distance is good between the button and the text. In the next tutorial, we will continue building the gallery by adding this and gallery right here with this section. Thank you for watching. See you in the next tutorial. 25. Building the Gallery Page(2): high in the sectorial will continue building our gallery page. Now we are gonna add this beautiful header with this animated background and insert these gallery images and background. Now let's go to our page. Scroll down and turn on Builder. Now we scroll down here we hover over this part right here we click options. Now for this part here we are just going to scroll all the way down and additional CSS class. We're gonna enter any mated dash B g. This makes it has an animated background. Now let's like, save Now you can see this animated background here. Now let's drag and drop this text module right here. Now here we enter the title over a gallery and I have my text ready So I'm just gonna paste it Now we select the whole text. We select the font to be heading to we make it bold, align it to the center And now we go toe styling over here. And as for the effect, we end her fade in So we just type in f twice It goes down here we click it and now we scroll down to a padding We adding 30 for the top and 30 for the bottom. Now we click Save down here and we have our header ready for the gallery. Now we have the animated title for this gallery that we're gonna create done. Let's go ahead and start creating art gallery itself. Cover over here Click options so we can add to the background for the gallery. Now, first, as for the role, with we select full width and now we go down here to a background image like brows library . We go toe upload files, we select files and we go down to this image right here we click open. Now we click. Insert file your l and make sure whichever images you choose here. Make sure there are featured and high resolution because you don't want any blurry images to be showing on your gallery. It should be professional and featured. Now let's go to a background mowed down here and selective e para Lexus scrolling and now scroll down to a padding and adding 40 for the top. Now scroll down again and like save down here. Now let's insert our gallery right in here. Go down here. Two of the gallery module drag and drop it right here. Now, as for the gallery layout over here, we're going to keep it to a grid. As for the thumbnail with, I'm gonna select 400. As for the height, I'm gonna select 300 And now here to image appearance. I'm gonna keep rounded, checked right here, and click on the drop shatter right here. You are free to use either one of these two as well. Now, let's insert our actual images from here. Click on in start gallery Now go to upload files over here. Now click Select files. Now, in order to select all of the images for our gallery together, we need to press and hold the control button on your keyboard. Then select the images. Now we click open. Now we click on add to gallery down here. And this is our gallery over here. Now, if he noticed under each one of these images, there is a text space that enables us to enter the caption we want for that image that will appear on the page. So I'm just gonna enter the texts for my images. Now that I have entered my text, we need to goto over here linked to and select media file. This makes the image pop up in a light box when you click it. If you don't want the image to pop up in a light box, you can select none from here. But for now, I'm just gonna keep it to media file and make sure the number of columns is three. And now we go down here and click Update gallery. Now we go toe styling over here and for the effect over here we select fade in. So just enter F twice It goes down here. And as for the text over here, we align center and now scroll down to a padding and enter 84 the top and 24 the right 84 the bottom and 20 for the left. Now scroll down and, like save down here. And if you scroll down, you can see our beautiful gallery with these images and this background No, down here, we need toe. Delete this section right here, So hover over here and click Delete now, like save down here and clothes. Now we see that our gallery is done with these beautiful images and this parallax background Now we go to the top of the page. And if you notice the gallery over here is not the same as this one here because the home here comes before the gallery. Don't worry about this. Once we're done with all the pages, I will show you how to organize them in the order you want and which one comes before the other. Now, the next thing we're gonna do as create our blawg Page Thank you for watching. See you in the next tutorial. 26. Creating Blog Page and First Post: Hi. Now we will start creating and building are blocked Page First, we're going to create these do beautiful posts over here. We're gonna create these images and adding this texts you see here and then we're going to create this sidebar and adding all of these widgets, starting with the search box you see over here and going down to a Facebook like walks that you see here that you can link to your Facebook page and adding this subscription box over here, the sites we're gonna adding this Instagram feeds light show in which you can link to her INSTAGRAM account that'll show the images on your instagram account as a slideshow over here and last. We're gonna add in this section here with the most commented posts that shows the top three popular posts on your block. Now let's go to our dashboard and go through the pages right here. Now click on add new over here. Now, we first enter the title off the page, which is block, and we scroll down through this section right here. And as for the sidebar option, which is this option right here we go down to the image hover filter. Just keep it to default, which is gray scale and apply to feature it images on Lee. Because if you said it to all images, the logo off the website will turn grey once you hover over it. And we don't want that because it's not professional. We only need the post images to turn gray once we hover over them. Now, as for the high end page title over here, which was yes, because we wanted the page title to be showing. And now we go to a theme appearance right here. We select this option right here and the header background. We're going to keep it to solid. And now we go up here and click publish. Now we go back to our website. If you click refresh, you can see that the bloc page is added right here. Now let's click it now. As you can see here, this is our block page and these widgets on the side here are the default sidebar Widgets Don't worry about them. We're going to remove them and add our own widgets. But first we're going to start creating the posts, so go back to a dashboard and go through posts right here. Now click on add New over here. No, we first enter the title of our post, which is build stunning websites. Now we enter the text of the post the content that we want to include in the post. I have my text various. I'm just gonna copy and paste it right here as plain text. Now we go over here to add new category so we can add the category for this post. I'm gonna type in design techniques and then click add new category. Now you can enter as many categories as you want, but for now, we're just gonna enter one, which is this one here. And then you go down here to tags and you enter the tag for the post. I'm on end her ultimate design, and it's really important to enter at least one tag for your post because it helps search engines, girl and find your website and your blog's hosts. Now we go down here through the featured image. Now, in order to add this image you see right here, we need to edit it in the way we want. So we goto this website forward dot com Now we go to add it right here, and we select the picture you want now for this tutorial. Ominous was post one that you can see in the content you downloaded and click open. Now you can see the image right here. We first go to resize over here and enter 7 85 And then we go through tax down here and we enter a text. Simon, enter S e o process. And as for the fund size, you click here, hominid. Choose 82. And as for the fund itself, I'm gonna choose this one. Here are kiss, tickle. You can see that it loads right here. When it finishes loading, the funds will be applied. Now we drag the text wherever we want, so I'm gonna drag it right here. And then we go to save over here. And as for the quality, it's okay if you choose normal and then click save to my computer. I'm gonna save it as host. Underscore one underscore. Done. No click save and go back to our dashboard. If you go down here, two featured image, click, browse, library, upload files, select files and then we go down here So this one here post. Done. Click open. Now we go to insert damage down here and you can see that the image come nail is showing over here. Now we go to publish over here and click it. Now we have successfully published our first post. Now it's time to add it to our Blawg. Let's go to our blawg and turn on the builder from here. Then you go down here to the post module drag and drop it there. Now, the first thing we want added is the limit over here. So I'm gonna choose 55 hosts the show, how we scroll down. And as for the display, I'm gonna display excerpt because I don't want to display the whole post on the page. I want to display excerpt so users can click on the post and view of the whole post if you they want to and then scrolled down and down here to hide post meta. I'm gonna check. Yes, now we could look save down here and you can see that the post is successfully added to the block. Now, if you notice this right here is a little bit close to the header. So we're gonna just adding some padding toe, get it down a little bit, so hover over this part right here. Click options. Now we scroll down to a padding and add 80 for the top. Now scroll down and, like save and you see that it has came down a little bit. Now let's go, like save and close to see our post. You can see that we have added the first post are blanc and it looks beautiful. Now, if you hover over this post, you see that it turns gray and we will continue adding the second post and the other sidebar widgets in the next tutorials. Thank you for watching. 27. Creating The Second Post: Hi. Now we will create our second post. So let's go back to our posts page and go over here to add new. Now we enter the post title over here, so I'm gonna paste mine. And as for the post text, I have my text, Freddie. So I'm just gonna copy and haste it. Now we go through categories over here and add new category, and I'm gonna enter s e o. Then click Add new category. Now here. As for the attacks, I'm gonna enter WordPress and S e o. Then click Add. Now, as for the featured image, we are gonna build our image on folder. So go back to this website, click clear and down here and then, like, open. Now we select this image right here Post, too. Now we go to resize down here, and we will resize it to 7 85 and then go through a tax down here and I'm gonna enter my text now. I will select the text and added the font. I'm gonna go toe fonts right here and select artistic Oh, Then I'm going to drag this text up here and I'm gonna line it to this part right here. And as for the fund, I wanna select this front right here. Then we are done. So I'm gonna drug it a little bit here and then click save over here and select normal quality. Thanks. Save to my computer, and I'm gonna save it as opposed to done. Then click. Save. Now we go back over here. And as for the future it image, I have switched between this and that post image. So I'm just gonna select this image here for this post and the Browns library, then upload files. They're select files. Now we go down here and I'm gonna select this one first. Then click insert image. Now we click. Publish over here. And I'm going to go through all posts over here and for this post right here. How many? Click it. Then I'll go down here and d select this one here and upload the one we have just created. Click upload files, select files, then a scroll down and select this one right here. Now we click insert damage and we have the image we want over here. Now we click. I'm days right here. Now we go to our Blawg. And if you click, refresh over here, You will see the other post showing. Now we have successfully created to the second post for our block. Now, as you can see here, the post we created later is showing on top of the one we created earlier. Now, in the next tutorial, we will start editing this sidebar and adding the widgets we want. Thank you for watching. See you in the next tutorial. 28. Editing The Sidebar(1): Hi. Now we will edit the sidebar. We will first add in the search box you see here as well as the Facebook like box. Let's go to our website and click on Customize over here. Now we click over here and go down to widgets down here, then go to a sidebar over here and you can see that these are the default sidebar widgets We will do. Leave them one by one. Except for this search over here. Your first you click on this air right here and click, remove and do the same thing for the rest. Now, as for this search over here, we click on the arrow and we type in the title, which will be search. Now you can see here that the other widgets are gone except for the search over here. Let's go ahead and start adding this Facebook like box over here. In order to add this box, we need to install a plug in called the Facebook like box flooded. Let's go to our dashboard, go down here to plug ins and click on Add new. Now go over here to search plug ins and type in Facebook like box and make sure like box is one word now hit. Enter. And that would just we want as the one you see here. No click on install. Not like activate flooding over here. And the plug it is successfully activated. Let's go back to our page and click Add widget down here. And if you notice the Facebook like box widget is not added here yet, So we need to click, save and publish. Then click Refresh up here. Not like reload this page. Now we click here, go to our widgets, go to the side more and click on add widget. Now you see here the advanced custom Facebook like box widget is added over here. So if we click it, it shows up here You can see that the widget is showing over here on the sidebar. Now we will start editing the widget itself. As for the title woman enter like us on Facebook. Now, if you go through the your all down here, you will need to enter your Facebook page or l. So I'm gonna copy my Facebook page or l and paste it over here as a sample. And if you go here for the wood. I'm gonna keep it to 300 now if he noticed the pages showing over here. Now, as for this stream issue down here, I want to remove it. So I go here. Thank, like no for show stream. Now you can see that the stream is gone and the light box is showing in a more elegant way . I was going down a little bit. As for the background color, I'm gonna select white Salman, enter this one here. And of course, you can enter F six times. It goes toe white and you see that the background color here has changed. Now we go down and I want to click Yes, for header and for the padding on a select 0.1. And as for the radius size, I'm gonna keep it to 15. But for the border size, which is the border you see over here, I'm gonna select 0.1 as well because I don't want the border to show. And 0.1 is the minimum number you can enter now we scroll down. And as for the color schema, we're gonna keep it delight. And then we go up here Now if you notice the boxes showing here in a beautiful way. Except for this extra part right here, which we can set with the height. Someone said the height for 2 50 and then click, save and publish again. Now we're done with our Facebook like box. So we minimize it here. And the next thing we're gonna add as this subscription box over here the Instagram feed and the popular Post we are gonna add these in the next tutorial. Thank you for watching and stay on this page. 29. Editing The Sidebar(2): Hi. Now we'll continue adding widgets to the sidebar we'll add in this subscription box over here, this instagram feed and these popular posts over here. In order to add the subscription box first we need to go to a dashboard and hover over a male chimp Reward press, Then click on forms. Now, when you get to this page, we will go to this area right here and you see this code in here? It's called HTML code. The first thing we're gonna add it as the title of the box over here, who this title, which shows in here, is gonna be the title for this box over here. So I'm gonna enter my text, which is stay connected for more magic. Now, now, over here. In order to get this text on the button saying, get the latest updates, you need to go back and worth says value down here between these quotations, type in the text you want, I'm gonna type and get the latest updates. And if you see over here as for a place holder instead of your email address, you can change it to whatever you want. This is what shows in the empty box over here before anyone enters any text in it. But for now, I'm gonna keep this one here as it is. Now go back here, and in order to get this button here to be blue, we need to go back here and load from style. CSS click here and select the blue theme. You are free to choose any of these over here, but I'm gonna choose the blue the now down here we click, save changes and once again, scroll down and down here used the short code. You need to copy this code from here. And then we go back to our page. We click, add widget, we scroll down and we click on the text here. Now, in the content here just paste what you copied from here. And then you can see the subscription box showing over here with this title we chose And this button color and text. Now click minimize over here and click on add widget. Scroll down and adding a text as well. Now, in this text, we're gonna place the Instagram's light show you see over here. In order to do this, we need to go to a new tab, but first closed this one here because we don't need it anymore. And enter snap widget dot Come make sure you have it. Right. Snap widget dot com and hit Enter. Now, when you get to this page, we scroll down. And this is the customization for our instagram feed, which it we first choose in the instagram user. And then we want so type in your instagram user name. I'm gonna typing. This sample is your name, or you can select a hashtag instead of the user name. As for the would you type, you can choose one of these types over here. I'm gonna choose slideshow. And for the thumbnail size I'm gonna select to 90. And for Florida Water, I'm gonna select Yes, And for the background color, I'm gonna enter this code f six times to make it white. As for the hover effect, I'm gonna keep it toe None. Now you can preview the widget before you add it to your page. Let's click on preview here and you can see the widget is showing over here with this slight show. If you click close and if, for example, we select a great then click preview. You can see that the pictures here show as I grid, you have the choice to choose whatever you want of these types over here. But we are gonna choose slideshow from here and then go down here to get widget. And then you copy this code. You don't need to copy this one here because it's just a comment in html. So coffee, this one starting from here all the way down here, Then we go back to our page. We paste it here, and we have our instagram widget ready. Over here. Now, let's go ahead. And in the last widget down here, which is the most commented posts, if you minimize this one here, click on add widget and you scroll down. We select FIM if I dash. Most commented. Now, while it's loading down there, we're gonna edit it from here. So as for the number of hosts I'm on Enter three, which is the maximum number of hosts the show. And I'm on a display post Thumbnail over here. And as for the thumbnail size, I'm gonna choose to 90 by 1 60 And if you scroll down, you can see that they are showing over here now. We've, like, minimize over here, and we are done with our sidebar editing. You are free to add in any number of widgets you want from here. Just explore them and play with them the way you want. Now, once we like saving, publish and then click on the X here. Think like leave this page. We get to our Blawg page. Now we are done with our block page and we have added all the features we want. The next thing to do is to create and build the contact page. Thank you for watching. See you in the next tutorial. 30. Creating Contact Page: Hi. Now it's time to create this contact page, starting with this beautiful parallax background image and this image right here in the middle as well as this text right here and this downwards arrow. And then we will add in these three contact information about our business. Then we scroll down and we see this beautiful Google map over here with this white water and as well as this contact form over here. Now first, let's go to our dashboard and click on pages right here. Now we click, Add new and we enter the page title we want, which is contact. Now we scroll down. And as for theme appearance, right here, we choose transparent background for the header and we go up. As for page options, which was full with for the content with over here. And as for the image hover filter, which was none. And as for the page title, we want to hide it. Now we scroll up and click Publish over here now, after republished our page. Let's go back and click Refresh Over here. Now we can see that our pages showing over here. Let's click it and see how it looks like you can see that this page is empty now. So let's start adding modules to it first, Turn on builder either from here or here. No. The first thing we want to do here is change the background color for this first part right here. So we hover over here, look like options. Now we go to a background image down here and click Rob's Library than upload files, Then select files and we go to this image right here and select it. Click open. Now we click Insert file your L down here. And as for the background know, down here we select the Parallax. And as for the overlay color over here, we click on this one here. I would like to select black. And as for the opacity over here, I want to put it about here about 70%. Now I scroll down and click Save now, As you can see, we have this background there. But since there is no padding, the image is not showing fully In the next tutorial, we will add in this image right here this text as well as a these tax down here. Thank you for watching and stay on this page. 31. Adding The Image and Texts: Hi. Welcome back. Now we will add in this image right here as well as these texts down here. First, let's drag and drop an image module from here all the way to this area. Now, as for image style over here, we want to choose this one here for a centered image. And as for a majorette, L we want to browse library, upload files, select files. And there is this image right here that I have set the dimensions to be 200 by 200. You can resize any image you want on photo dot com 2 200 by 200 then uploaded toe the website. Now click Insert file your L. Now, if you notice this image is a square image, if you want to make it a circular image, you'd want to select this one here and the select this one here. Now, as for they would over here, we'd want to set it to 200 by 200. Now ask for the image caption down here. I'd want enter we reading for you. Now we go to a styling. Over here we go down. As for the fund color over here, I want to select white and then scroll down. As for padding, I want to select 200 for the top and 200 for the bottom. Now we go down and click safe. Now you can see that the image over here is a circular image. And this is the caption we added. Now it's time to add in this text here with this arrow. Now let's drag and drop a text module down here. Now we add in the text, get and touch. We select this text and we select having one. Then we align it to the center. And as for the color ominous, choose white color. Now, as for the arrow you see down here, you need to go through the my content. Your downloaded and there is a file called your L's. Click it and select this text right here. Copy it and open a new tab. And enter this text in the new tab then had enter. No. When you get to this page, you scroll all the way down and you see this aero down here. You copy this code over here and you go back then over here you hit. Enter once and you go to a text over here, then you'll paste it right here. Now you go back to the visual over here. You can see that there is showing over here this tiny arrow. We want to make it larger. So we first make it bold. And for the fund, which was heading one. Now we make it centered. And this is our air Over here. Now click Save and we have our text and error over here. Now, in order to get this text hair the same fund as this text over here we go back. We first like, save down here and clothes, then weekly customize over here. Now, when you get to this part over here, we click back. Then we go to a tomography. Over here we click default tomography. And as for the had it one fund, we click here and over here for the fund family, we click it and type in robo toe. You see revote over here. So you click it and you notice the change over here. Now, as for the font, wait over here. You want to select 300 and we go toe appearance. As for the fun size over here. We maximize and minimize this one here that we want and I want to choose 40. Make sure he said it do. 40 pixels over here and then weekly can minimize and click, Save and publish. Over here. Now, Once we're done, you click on this X over here. Thank, Like, leave this page. And now we are done with the first part of the contact page. If you notice once we scroll down the parallax background here is showing. Now let's turn on the builder adding these texts down here. First we scroll down and we add in a text module drag and drop it right here. Now we enter the text we want I have my text ready. So I'm just gonna copy and paste it from here. No, for this one here, I want to select heading to I want to make it bold and align all of these to the center. Now we go to a styling. Over here we scroll down to a padding and for the top, we add in 50 pixels and then we go to save down here and we have our first text over here. Now we hover over this part of here and divided into three equal sections. Now we duplicated this one here twice in order to make one copy for each one of these. No, we drag and drop these copies over here and there. Now, we first I did this one here and enter your business information about the location. I'm gonna enter this sample location over here and for the location itself. How much was heading to make it bold and align all of these to the center and click Save now for the last one Over here we click edit We enter our texts from here and paste it over here Now for the contact us we select heading to we make it bold and aligned all of them to the center Now click Save and we are done with this part. Now let's change the background color here hover over this part here and click options. Now we go to a background color down here and enter this code F six F six F six now scroll down and click Save And this section here is totally done. Now let's look, save and clothes. And now we see the changes we made over here. In the next tutorial, we will add them. This map over here. And after that, we're gonna add the contact form. Thank you for watching. See you in the next tutorial. 32. Adding The Map: Hi. Now, before we added the map and the contact form, there are two things we need to do on this page. First you see the text here is all in uppercase letters. Whereas this one here is in normal fund. Now we need to change this one here to be a normal font. First go to customize over here Now, when you get to this part right here we click on this arrow. Now we go through tomography. Now it's like default tomography. Now we go toe having one and down here for a text transformation, we select none. And you see that the fund here is back to normal Now the second thing we want to do is if you notice here the page titles are all in white color whereas this part hair there n black color we need to change him to white color. So we first click here and then click here again and you go down here to thim. If I options now you go to Main navigation And over here for this part here we select white color If you notice they have changed toe white, all of them now we'd like save in, publish and click on the X here and then leave this page. Now that we're done with the page title colors, we need to sort these pages in the order we want. So in order to do that, we go to our dashboard, we hover over appearance over here and we click on menus. And as for this tab over here, we want to close it because we don't need anymore. Now we will create a menu in which we will be able to sort our pages the way we want. I'm gonna name this menu main underscore menu, and then click create menu over here. Now we have our money you created. We will click over here to check this part right here. And check this part right here. Now we add in the pages we want to them any why Simply check in them from here and then click and add to menu. Now that we got the pages over here on this menu, we can sort them the way we want. Now, the page that comes on top over here will be the 1st 1 on the left here, and the one after that will be the one after it Right here. So we need to order them in this water home gallery, blogged and contact or any order you want. I'll go back here. We make the home the 1st 1 We make the gallery the 2nd 1 and we make the contact. The last one down here. Now there's one more thing. If you want to create a sub menu, you just drag this one here to the right a little bit and it becomes a sub menu from this one over here. Let me show you what I mean by that first click save menu. Now go back to the page and click Refresh. Now you notice we have three pages over here, and once we hover over the home, the gallery, which is a sub page from the menu, pops down. Now that I have showed you what I mean by a sub item on the menu, we want to go back here in just drug. This one here a little bit to the left and it becomes a normal page on that menu. Then we click save menu and we go back to our page. Refresh. You see that we have our four pages in the order we want here. Now we will start adding the map and the contact for Let's scroll down and turn on the building Over here. Now scroll down again. And the first thing we want to do is change the background color off this part off this section over here. Do the same color as this one here, so we hover over here would like options. Now, as for the road width, which was full with over here And as for the background color, we make it F six F six F six. Now scroll down and click Save down here and we have the background color, the same as this part over here. Now let's start by adding of the MAB module to this part over here. If you go down here, you see this mab module. Just drag and drop it right here. Now, when you get to this part over here, the first thing you want to enter is the address. I want to enter this address right here. Just type in the address in this field over here and down here. As for the zoom, keep it to eight, and as for the with. I want to change it to 700 change this percentage. Two pixels PX And as for the height, I want to change it to 700 as well. Now, down here for the border, I wanna keep it to solid. You can choose either one of these two as well, dotted or dashed, but I'm gonna keep it to solid. As for the thickness of the border, I want to make it two pixels. As for the color, I believe White is the most professional one. And as for the type, just keep it the road map. You can choose one of these three as well, and down here. As for the scroll wheel, I wanna disable that. Keep it disabled because it's annoying to have a scroll wheel on the map. Now, As for the Dragonball, I want to leave it to enable. Now, as for the disabled, drag a bill on mobile. I'm gonna leave it to yes, because it's annoying for most of the mobile users when they use their touch screen phones to ah, be dragon up and down the map when they try to navigate through this page. Now we go toe styling over here and we go toe patting down here. And as for the top, I want to add to 30 pixels. As for the right, I won't add in 100 and 100 for the bottom and 100 for the left. Now we scroll down and, like, save down here. Now you can see that the map is showing here in a beautiful, elegant way. Now, let's divide this section here to two parts so we can leave this part over here for the contact for hover over this part and click on this one over here. Now we will add in the contact form in the next tutorial. Thank you for watching and stay on this page. 33. Adding The Contact Form: Hi. Now it's time to add the contact for over here. First we drag and drop a text module in this area. Now, in order to get the contact form on this page, we need to go back to our dashboard and go down here to contact. Now, when you get to this part, you need to go down here to a short code click on this part Over here. Select all of it. And now copy. Now go back to our page and paste it on this text Over here. Now we go to styling. No, we first scroll down once we get to text a line over here weak like center. Because we want to the form elements to be centered. Not on the left or on the right. No, we scroll down to a padding over here. And as for top, I want to leave it empty. But for the right, I want to enter 100 for the bottom 100. And for the left, 100 as well. Now we go down here and click Save, and we have our contact form over here. Ready and done. Now it, like save and closed down here and we are done with this part over here. Now, in order to get this page done, we need to turn on the builder and you scroll down. You see this part right here? We need to delete it in order to get the perfect alignment between these do parts of this one here and the footer down here. Since they are the same color, we hover over here like delete. Now we click, save and closed down here. Now we are done with the contact page. Thank you for watching. See you in the next tutorial. 34. Optimizing Security and Performance: Hi. Now that we have finished building our beautiful and stunning website with all four pages, it's time to optimize our website in terms off security performance and search engine optimization. In this tutorial, we are going to be discussing website performance and security. I will show you how to make your website more secure and to have a little bit more performance in terms off page loading. First of all, we will start with website security, so we're gonna installed three main plug ins that will help improve our website security. First, we will go to our dashboard and install each one of these three plug ins, and I will show you what each and everyone does through your website. First, let's gardar dashboard. Now go through the plug ins over here and click on installed plug ins first. Now, over here, you see this aqueous mitt plug in that we have left the activated before This plug in is a really good plug in for anti spamming in track back. Like I said in the first lecture off blooding this website and installed in plug ins, this plug in automatically filters all of the unwanted and weird comments on your posts. So once you activate it, you don't have to worry about anything. Now, in order to activate this plug in, we first click on Activate over here. Now you see this thin banner over here? Pop up, you click on Activate your or Kismet account. Now you click. Get your A p I he Now, over here, you click on get an aqueous mitt A p I key. Now, once you get to this part, you enter your email address, a user name and a password in vain usually sign up down here. After that, you get an A P I key, which is just a code that you need to activate this plug in. It stands for application programming interface. And once you get that coat, you go back to our dashboard and down here, you enter the code and click. Use this key over here and the plugging gets automatically activated and it automatically filters your comments. And you don't have to do anything after that. No, the next security plug in we're gonna install is called I themes Security. We go to plug ins over here and click on add new now in the search box over here, you enter. I themes security and have enter. Make sure you spell it right now we get to this part over here. This is the plug and we want. So we click. Install now and then click. Activate plug in. Now you get to this part you don't need these banners over his sword is gonna click on the X is here and here. Now, if you notice down here, there is security. You click on dashboard. And when you get to this part over here, this box pops up. The only things you need to pick from V's is the 1st 1 here, which is make a backup to make a backup of your website. Now, the next thing we're going to do is click on this one here, which basically means that this plug and make sure that it does not conflict with other plug ins as well as the installed themes. So just click one click secure. Now click on the X over here, and once we scroll down, you can see that these are the flags that this plug in is showing about our system. Now, if you notice there is something called priority. Here we have medium priority. We have low priority and we have completed tasks over here. Now, the only thing you need to worry about as high priority over here this part over here shows us the security holes that are in our website that needs to be handled. So this is the only one we're gonna worry about. So once you see a flag over here, you simply go over here and click. Fix it. Now, when you get down here, you see this part over here. Just check this box and click. Save all changes. Now, once we get to this part right here, it means that we are done with fixing that error. And we are good to go. The rest off the security issues, the immediate priorities and the low priorities. We don't need to worry about the V's like I told you before and make sure you check this dashboard down here regularly and check for high priority alerts and fix them. Now let's go ahead and install the third and last security plug in for this website. Let's hover over here and click. Add new. Now we go to this search box and type in limit law again attempts. Now this is the plug in we want right here. And if you notice down here, there are over one million active installs, and this plug in is very popular because it really helps your website security in terms off locking out the user when he or she tries to access the website dashboard for more than a certain amount off attempts. And it helps protect your website against hackers. And so many cracking programs now click. Install now and like activate plug in Now, in order to added the settings for this, plug in and see what it does cover over settings down here and down here all the way. Click limit, log in attempts. And when you get to this part right here, you see that the lockouts and the restrictions and everything you need to know about this plug in is right here. Let's go through them one by one. The 1st 1 here shows the number of lockouts that have been detected on your dashboard. Whether you try to enter your password incorrectly for more than four times or whatever number you said here or anyone else now down here. They lock out here, you specify the number of allowed tries before the system blocks the user from logging. And now I'm gonna set it to three because I believe three is best in this case. And in terms of the lockout time, I'm on enter 60 minutes and down here, I'm on Enter five. Now, this basically means that once the user re tries to enter the password for five times, it locks him or her out for 24 hours off the system instead of 60 minutes. Now, this is the number of hours until the next reset is done. Don't worry about this. Just leave it to 12. Now, we're gonna leave these two to default because I believe they're good. Now down here, I believe this is the most important feature off this plug in. What this does is that it's since you an email off the log in I p that tried to log in to your dashboard after a certain number of lockouts. Let's check this box right here. This helps you keep track of the I P addresses off people who keep trying to crack your credentials and hack your website and it allows you to take further measures like blacklisting this I p address or block in it. And for any reason, a certain I p address kept trying to hack your website and you got an email about that I p address. Please let me know in the comments section, and I will help you resolve this issue within the same day. Now, once you're done with the editing off this part right here, we click change options and now we go to the performance part off this tutorial cover over plug ins over here and click Add new. Now we are going to install a plug in called W three total cash. This plug in helps us improve the performance of our website in terms of page loading, meaning that it helps our pages load faster. And giving the users over website a much better experience and performance is really an important issue to consider, because statistics show that the websites that give the best user experience usually load in about 2 to 3 seconds, anything after that becomes boring and users will start leaving your website and you will start losing traffic on your website and losing valuable customers. Now let's install this plug in first type in W three space. Total cash. Make sure you spell it right. Then hat enter. And this is the plug in. We want to instal right here. If you notice it has over one million active installs and a very, very good rating. Now let's click. Install now and click. Activate plug in. Now if you know it is down here, the performance Blufgan has been added to our dashboard. Also up here to the banner that pops on top of the website. Now, don't wear about editing this plug in or check in it regularly. It does all the work for you automatically and it enhances the user experience. It makes pages load faster without you doing anything. It does all the work for you and you don't need to worry about it. That's all for this tutorial for performance and security. These two issues have been handled for your website and you don't need to worry about it. In the next tutorial, we're going to be discussing S e O that stands for search engine optimization and we will go over to major plug ins that will help you evaluate the content of your website and edit that content in order, drank higher on search engines and possibly rank on top of the first page off the search engines like Google and being thank you for watching See you in the next tutorial. 35. Optimizing The Website's SEO: Hi. Now we're gonna talk about search engine optimization, which is commonly abbreviated with S e O. What s deal means inaction is that you evaluate the content of your website and you make the necessary changes. You use the necessary tools toe be able to rank better on search engines and possibly on top of first page. Now, this is a really, really vast field, and there are tons of things that you can do in order to rank better on search engines. But in the story away, we're going to focus on two main things that we can do in order to rank better. And there are do plug ins that we're going to use for these. The first Blufgan is called Google Analytics by Yost. So let's go ahead and install this first plug in. And let me tell you what I mean by Google analytics. Let's first click on Add New Now over here in the search box type and Google Analytics by Yost. Make sure you spell it right. Google analytics by Yost and then had entered. Now, this is the plug in that we want to install over here. If you notice there are over one million active installs and some very good ratings over here. Let's start by installing the plug in. Now click Activate plug in and you see the plug in over here added to the dashboard. Click on dashboard, and this is the part where the analytics will show up. Once you connect this plug into your Google Analytics account, now we go to settings and over here, in order to get this plug in working, you need to connect it to Google Analytics account. Like I said before, you need to have a Google account first and you need to sign up for Google analytics and then get a track, and I D. That helps you connect your Google account to this. Plug in over here. Now, once you have a Google account and you sign up for the Google Analytics in your Google account, you can go over here and click authenticate with your Google account. Now this window pops up and you need to enter your Google credentials. Now, once you finish entering your Google account credentials, you get a code and you go back here and paste the code. Then you click save authentication code and the last part. You click save changes and then you go to a dashboard over here and the analytics will show up on this part right here. Simply. Google Analytics is just statistics that lets you know what the most popular pages are of your website and how many visits are to each page. Who are your visitors? What countries are they from, what languages they speak, and so on. Now, Like I said before, in order to get this plague in working, you need to have a Google account, and you need to sign up for Google Analytics on that account before you can connect it to this plug in right here. And once you do that, you can check the dashboard over here regularly for your website statistics and analytics, which help you improve the content of your website and focus on the pages. There are most popular now. Let's go ahead and install the second and most important plug in. Go to plug ins over here and click Add new now in the search box, you need to enter word press s e o by Yost and head. Enter. Now this is the plug in. We want over here. If you notice it has over one million active installs and some very, very good ratings over here. First click install, then click. Activate Blufgan. Now, if you see down here, the plug in is added to the dashboard. You go ahead and click, general, and you can always click on this button right here to start a tour and this plug in and explored in a more vast weight. This plug in has so many areas that we will not be able to cover entirely. In this tutorial. These areas are more advanced and for professionals who work in this field specifically on search engine optimization and getting the website to rank better on search engines. As for this tutorial, I will give you the basics and the most important things you need to take care of in order to get ranking better on search engines and give your users a better experience on your website. Now, simply this plug and helps you evaluate the content of your website and then optimize it in order to rank better and higher on search engines. First you go through your info and over here this is the website name that pops on search engines. If you want to, you can change it and enter anything you want. But this is the default name of your upside that pops on search engines. And down here you can enter an alternate name for your website, but we don't need to do that for now. Now, this is just the basic info about your website, whether it's a company or a personal website. From here, you can choose either one of these, too, For now, our monitors person And here enter your name. I'm gonna enter my name. You can always enter company from here, and you'll need to enter the company's name and uploading the logo off the company. But like I said, for now, I will stick to a person and then click save changes. Now the next thing we wanna edit is down here. Titles and Mattias just click it, and over here, this is just the title separator off your website. We want to keep it, this one here to default because it's not really important to change it. And now for home page. We don't need to edit this one here. If you click here you go toe the home page and you edit it just like if you click it from here. But we're not going to do that because we don't need to edit our home page. Now, as for post types and taxonomy ease, these are already optimized for you. So don't worry about him. Just leave them the way they are. And over here archives. These are just related to a specific Google analytics settings, so you don't need to worry about him either. Now you go to other and like, save changes down here. Now, down here, you click social. This basically means that if you want to tell Google about your social media connections and that these accounts belonged to the same person who owns this website, you connect them right here. These here are the most important ones. These over here are just some more custom and advanced weeks, and they're not as important as these down here. If you have any social media accounts, make sure to connect them to these areas right here, because these will help your search engine optimization, and the more people get referred from the social media accounts to this website, this will improve its ranking on Google. Now down here you go. Toe XML site maps. Just click it. Now. Over here, the check box means that the site maps have been automatically generated for your website. So you don't need to worry about it. In order to understand what we mean by site maps. We need to goto Page is down here and click it and we will select a random page. Let's, for example, click home Now we scroll down right below theme. If I custom panel you see Yost s e O. This is the part where we generate and edit cycle maps. Now, in order to understand what I mean by site maps, we will edit the home page. And by the time we finish editing the home page, you will understand exactly what we mean by site map. Now, right here. The snippet preview. This is what this page looks like on search engines. And we can edit this besides the description that will show below this page in these boxes down here first, let's start with focus Keyword. This basically means that you need to enter what this page is mainly about. And what are the things that users will be seeing and browsing in this page and for the home page. Let's enter Web design and you click here and you see these pop down here. These evaluations of this K word will tell you if this is the right K work for this page. Now the more knows you get, the more you should consider changing this keyword. And if you get them all, Yes, this will mean that this is the right key word for this page. Now, once we scroll down you CSCO title, which is basically the title that appears right here, this is the default title. We are again. Added it. As for the first part, I'm gonna keep it to home. Now we enter Dash, which is the most common separator and hit space to be professional. And then I will enter what this home page is mainly about. So I'm gonna enter Web design and if you notice Web design right here is involved letters. This is because this is a focus keyword in this website. If it wasn't for example, we entered SC over here and clicked over here. You will see that it is not involved anymore. because this is not a keyword. And it's best if this is a key word, because it attracts more attention to your website and to get you more traffic. If it was a key word. So we're just gonna keep this one here toe Web design. Now, down here. This is the meta description, which is basically the short description that'll show down here about this page and that will help users get a quick glimpse of your page before they visit it. So down here, I'm gonna enter this text. Now, I have my text entered in here. You notice that I have the word web design twice once in each of these two sentences. And there is one thing you need to understand about this short description. Make sure you keep it toe to and maximum three sentences in order to look best and not be boring about describing the page. Just make sure you get the reader excited about this page and give that user a quick glimpse of that page. And once again, I'm gonna emphasize this. Make sure you include this focus keyword in these two sentences at least once. And you notice down here in the matter description. You have a yes twice because we have the web design keyword entered twice in our description as well as the page title right here. Now, once you're done, you scroll up and you click Update over here and you notice over here s E o check. It shows that it's okay. Now, if you click check, it goes all the way down here and through page analysis, which is right next to a the general that we were editing. Let's go back to our page analysis, and you see that these are the parameters that search engines consider when looking at your website and pages, the more you stick to these parameters, the better ranking you will get. And like I said before, there are more advanced tools and more advanced methods to get your rank and on top off first pages. And I suggest you play with this plug in and try to get your website to rank better by, stick into these parameters as much as you can, and you will need to do the same thing for all four pages of your website. That's it for this tutorial and for a search engine optimization. Now you can probably say that you have a website that look sophisticated and superior, and that has a very, very good performance and security as well as search engine optimization. So you don't need to hire anyone to search engine, optimized your website or check the security of your website or even pay for performance plug ins. For any of that. You get all of that for free. Within this course, you got a complete optimized website in the best way possible for a beginner. And be sure you got all the features and optimization that any professional and top notch website can have. And guess what? You did all of that by yourself and Onley by taking this course all of these features within the same course. Thank you for watching. If you have any questions about any part off this course or this website, please make sure you mentioned that in the common section off this course. Thank you for watching, and I wish you a very, very successful Web design career 36. Last Words: Hi, first and foremost, thank you for taking this course. One last thing I want to share with you about this course if at any point you needed to edit or even build a website and you didn't want people to see what you're doing with that website, there is a plug in called Coming soon and maintenance mode, which is the one you see right here on the screen. Just go to plug ins, look for it and then install it. It is a really simple and easy to use plug in. Once you install and activate it, you will know how to use it. Now let's go over the things we have learned and this comprehensive course. First we got our professional looking domain name. Second, we got our hosting account with the top hosting provider and for a relatively cheap price. Third, we built our amazing and professional website step by step with no step skipped. Fourth, we optimize our website security and performance as well as working on search engine optimization. I really hope that you enjoyed this course and absorbed its valuable content and eventually came out with your stunning and professional website now building this website doesn't necessarily mean you always have to build the same exact website. You can always play with the colors, images, buttons in all the content off the website. Be creative, go deeper and stay immersed in the world of Web design. Export the latest designs and features, and even play with the design in sections on the websites you create. From now on, add new pages and sections and keep practising because practice makes perfect. I would love to see the Web site or the websites you build and all the beautiful content you have. Please don't hesitate to share your websites and even any questions, feedback or suggestions you have in the comments section off this course. And if you have anything that you feel you need to discuss in a more extensive way, you can always use the contact form on the contact page off my website. Malik martin dot com and I will communicate with you using the email. Finally, if you believe you got what you were promised in this course and with high quality, I will be grateful if you give this course a five star rating. Thank you for taking the time to invest in this course. I wish you a very successful new career in Web design. Goodbye