Universal Portfolio Design: From Figma Template to Live WordPress Site with Elementor Pro

1. Welcome to Figma to WordPress: Build a Universal Portfolio with Elementor Pro class: Hello, everyone. Welcome to Universal portfolio website design with element of pro, a class where you will learn how to build a beautiful professional portfolio website without writing a single line of code. We will kick things off by creating a Figma account and open up our design file. You will learn how to edit text, swap images, and pick new colors to match your personal style. Next, we will move on the in a domain and setting up hosting your site is live and ready to share with the world. Then comes the fun part Wordpress we will install WordPress and element free and elemento pro and start recreating your Figma design using simple traganrof tools, no coding needed, but we are not stopping there. You will also learn how to speed up your site at on page SCO so Google can find you and connect Google Analytics for see who visiting and what they are clicking. Hey, I am Akalanka a web designer from Sri Lanka. My passion is sharing my knowledge. I have made this class super beginner friendly. Even if you never use Figma or Wordpress before, I will guide you every step of the way. This class is perfect for beginners who curious about elementp freelancers and creatives who want a standout portfolio. Anyone ready to turn their Figma design into a live working website? By the end of this class, you will have a fully functional SCO ready portfolio website designed by you and built with confidence, ready to begin ICU inside the class. 2. Introduction to the Tools We Use: Pros, Cons, and Alternatives: In this class, we will mainly use three tools Figma, verpus and elemento P. Let's take a look at each tool does. There are pros and cons and a few alternatives. So you know exactly what you are working with. First off, Figma. Figma is our design tool. It's where we will create the layout and visual style of your portfolio. Before turning it into real website. Let's talk about prose. Pigma runs in your browser. No need to download or install anything. It's free for individual users. You can edit your designs live with others. So if you are working with a client or teammate, they can leave man suggest edits or even more elements all in real time. It's also packed with handy features like auto layout components and shared libraries that make design efficients even for beginners. Here are some cons. The interface can be a bit overwhelming at first. There are a lot of banners and two students, and because it's fully cloud based, you will need a stable Internet connection to work smoothly. As alternative there are tools like AdoVXD and Ikech. Also, you can use CanmA. It is a beginner friendly option, but it has a lot of limitations. Next, we will use WordPress. WordPress is our website platform, the foundation that powers your site. It is one of the most popular platform in the world. Used by over 40% of websites. Let's talk about pros. It's open source and free. You get full control of your website from design to SCO to performance. You can install plug ins to add almost any features you can think of. And it's beginner friendly, especially when you paired with a visual builder like elemento. Now, here are some cons. You will need to buy a domain and hosting to make you a site live. It requires regular updates and backups to keep things running smoothly. And while it's flexible, setting it up can feel technical at first. Alternative to Wordpress Wix and square space Earl in one website builders that are easier to start with, but they offer less control. Webflow give you more design freedom. Also, for simple website, framer is another best choice. The finally element of pro element of pro is our page builder. The tool that lets you turn this prot voluFigma design into a fully functional word website. Let's talk about pros. It's extremely beginner friendly. No code needed, just dragon row. You will get full design control over every part of your site, including mobile view. Elementor pro includes advanced widget like forms, sliders, prize interval, testimonios, and more. With the team builder, you can design your site's entire structure, headers, footers, block templates visually. Element of pro is a pad plug in, so it's not free. Also, if you decide to switch to another builder later, your design won't transfer over, you will need to rebuild and even though it easy to use, you will still need to spend some time learning the interface and basic practices. Now let's talk about some alternatives. There are builders like Prix builder, Brave builder, DV oxygen. Not only that, we have Wordpress default editor Gutenberg. In the next lesson, let's jump into design world. 3. Create a Figma Account: Hello, everyone. It's time to create a Figma account. If you already have a Figma account, you can skip this lesson. If you don't just go to Google or click on the ink on Resources section. If you go to Google, search Figma, then you will see this type of result, just click on the first result. Now I'm on the Figma landing page. If you already have a account, you can click on Login. If not, click on this, get started for free button and in here, Click on. Continue with Google to sign up with your Gmail account. Okay, now I will click on my Gmail account and click on. Continue. Okay. Now I just sign up and we have some details to fill. First in here, we have to add our name, so I will add my name, then click on Continue. Then I have to select What kind of work do you do? So in here, I will select Design. Then click Continue. Then it says, do any of those describe your work. In here, I will select freelancer and you select according to your position, then I click on Continue. Then we have another question like, who do you usually collaborate with? In here, I will select like nobody just me and click Continue, then I don't want to invite anyone. I will skip this part and in here, I will select other then click on Continue and in here, have you used IgM product before, I will add many times. If you're not familiar with IgM, just click on and click on Continue. Then I will select this starter package. In future lessons, I will explain the benefits of page subscription of Figma. However, we can follow all of those lessons with the free package. I click on Continue and in here, I will click on Eskep now here is the Figma dashboard. All of our projects will be loaded here. As the first step, let's create a new Figma file to do that I click on this new design file. Okay, here is the figma interface. First of all, I will rename this Figma file. Let's rename it as my first project. Enter. Now in the next lesson, let's be familiar with all of those panels and try to create our first frame or our first design. S in the next 4. Figma Walkthrough: Exploring the Interface: Hello, everyone. Here we have the universal portfolio Figma file. I just click on this opening Figma button and it will create a copy of our Figma file. If we check the Figma file, here we have Portfolio female version and portfolio male version. Click on the female version and click on this play button to open it in new tag. So here is the preview, and see, then I click on this next frame, and here we have the male version of portfolio website. And not only that, here we have instigat. Istigaset is the place that define colors and font of this portfolio website. Now I will show you how to change the font colors, text and images. First, let's start with colors. Think if you don't like this color or if you have different industry or if you plan to design a broad polio website for relationship coach, in that case, this color will be not suitable. The suitable color will be pink, black and white colors. So let's change the colors. To change the colors, we don't need to go through each and every element. In here, we can select this color palette color item. Then here you will see this field color and click on primary color, and here you will see edit icon, click on it, and then click here under the property. Then here you can add the color code. So I will add color code like hashtag FF 200. The color will change to this orange color. And if we check it on the design, here, everything changes to the orange color. See, Because in figma, we define this color code as primary color variable or primary color is tile. When we change it at one place, it will affect all frames. And now let's change this color to liver and color. Just click here and let's make this as relationship coach website. So let's add like pink color. Color like this. Okay, now everything changes to pink color, and then we have to change the text. So the text on the two frames are editable, which means we can just double click on the text and edit it. Just edit it like Zugim dot like this. So in some places, if we just double click on the text, it will not make text edit if it happens on Mac, you can press command and double click on the text like this. So here I press the command and double click like this, and if you use Windows, you can press Control and double click. Then you can change those texts as you like. That's how we can change the text, and it doesn't matter the place, you can just change it like this. And it will affect to the design, but if the text change the design like this, in this case, this section is smaller. So in this case, we have to addtline and make it a line like this. Then we have to strap the images. To do that, we can just select the image as we did before. If it not select we click when we do the double click, we can press Command or hold Command or Control. We can press Command on Mac and Control on Window, and it will select. Then in fill, we have the image section, just select it, and now we can click on this upload from computer button and it will open the file browser. Okay, here I will just select a image. Select this one and it will be added. So when we add it, it will look like this. So what we can do is currently it's crop. We should do it as fit. Then what we can do is let's increase this design pressing command while using mouse wheel to increase the size like this or in Windows, press Control and mouse wheel. Then what we can do is we can click here and set it task crop. Then here you can change it whenever you want to change, so I will just add it like this and here I can just increase. You increase the image, you should press Shift. If you not press the shift, it will be adjust without. It will damage the look of the image. So always press Shift and adjust it like this. Let's adjust like this and put it like this. Okay. Now we just change the first image and here, let's also change this image, select the image. So here you can see image that we selected, and here, click on the image you will double click on the image. Then here we can click on the image and click on upload from computer. And here, let's add this image. Now what we have to do is we have to change this to fit, then increase the section, then make a crop and here don't select those blue corners, select the image, and here we have end of the image press sheet and adjust it accordingly like this. So in that way, we can change the images. Here, we can follow the same misstep and change the images, and for the background, we can also change it. Currently, I don't have image background. However, I will just select the background, and here we have image white color property on the field. So here we need to change this image. Click on the image, click on upload from computer and let's just select this one, and now we have to do it like fit and then crop I don't think this image will be fit for here, then press shift and d like this. Then we can adjust it as we like, so it will look like this. And now if we select the fot polo frame and click on display icon, we can see the changes that we did like this. Okay, it's pretty simple. In this method, you can change the text, images, and details of those frames. And still, I am on the developing stage of the file. After I completely design this, I will rename those frames like here, hero and here we can add menu I will change them like that. So in that way, you will easily understand sections that you are currently working on. Also, if you have a portfolio website design requirement for a male person, you can use this not only that, now you have basic understanding of Figma, which means you can create your own sections. As an example, in here, we don't have a section for gallery, so you can create your own gallery. So I will see you in the next lesson. 5. Create a Subdomain: Hello, everyone. Now I am at our Universal portfolio website Figma Design. You can check this link on resources section. So here we have two portfolio designs. First one is for female version, and second one is for male version. So I'm going use this female portfolio version to design our website. So we are going to design website for Hannah Clark. To do that, we need to have a host in and domain. Okay, if you plan to buy new domain and host in, you can eskip this lesson and go to the next lesson. In the next lesson, I will show you how to buy domain and hosting server. However, if you already have a domain and hosting server, in this lesson, I will show you how to create a subdomain and host our website on subdomain. So let's start. Now I am at C panel of my hosting provider, so I use Name cheep as the hosting provider. So in here, I go to domain section. In the domain section, I just click on the domains. Now here, I can see all the domains that I currently have. I am going to use this custom website design.us domain to create a subdomain. So to create a subdomain, I just click on Created Domain. Now here I will enter the subdomain name. In my case, it will be hana dot custom website design US because when we create subdomain, we have to select the main domain. So I just copy the custom website design US domain, and here I just add Hanna dot and phase the subdomain because our Psonas or the business coach name is Hannah. Okay. Now here when I type the domain name, you can see we got a document root name as our subdomain name. And here we have shared Document root and it has the file part to public SDML. So if I take this shared documents root, this Hanad custom website design US files will adapt into public DML, but we don't need to do that, so I'm not going to check it. So with the settings, Hanadt custom website design.us folder will create inside the public SDML folder. When I hover over the home icon, you can see the document directory that we are going to create this folder. Now I click on submit button. Okay, now our subdomains successfully created, and if we click this folder path, it will open the file manager and if we click on this subdomain, it will open domain preview, but currently it has a message and we need to wait like 20 to 30 minutes to make DNS properly configured. So in meantime, let's create a folder called test dot TML on our newly created subdomain. And let's click there and click on Edit and edit it. Then here, let's add text like this is a subdomain. Let's make it like Hello. This is a subdomain. So now I click Conceive changes, and let's try to repash it. Actually, when I repash it, nothing show. So let's wait like 20 minutes and I will see after that. Okay, I waited like 20 minutes, and now here is the look of the website when we visit it. So here is the text dot HTML file that we created. When we click cont, we can see our message. Hello, this is a subdomain, text that we add. 6. Buying a Domain and Hosting: Hello, everyone. Now it's time to buy a domain and host in because we need the domain and host in to host our WordPress website. So first less pick domain. There is a website called taldls.com. In this website, you will see all the promotions and deals of the domain providers, and from here, you can buy a domain that select best Hostin and get cheaper domain. Here, you will see a filter. In here, I will search our domain name as web design custom, and here I have to click on verify you are not robot. Okay, here we have the available domains, and from this price filter, I will put it like $1 and let's see what type of domain that we have for $1. In here, we have web design custom dot S domain 4099. Name Jeep. So I will pick this one in the spaceship we can got dot XYC domain for dollar 0.98. So here I just click on Name Jeep and it will redirect to the name jib. And here I can search the domain name. So let's copy it from here and paste it. Then click on search. We don't need the.com. We need dots. So here we can see dot s, actually, we can add dot S. Okay. Now here we have it for dollar 2.98. I just click on add to card and it added to the card. Now I click on Checkout and here I can add the promo code. So I will go here and let's find out the promo code. This 99 special is the promo code. So I just copy it and paste it here, click on apply. Okay, now I have to log into Name Jeep account, actually I already have a name Jeep account. If you don't have one, you can click on Create free account and follow the step. In my case, I will click on login, and here I will add my username and password. Okay, I just logged into the Namechp account and here, I will add the promo code, copy it from here and paste it like this. Click on apply, and now we have the subtotal as 0.99, and I will unticke all of this stuff, so remove it. We don't need any of those stuff. So now I can click on Confirm order. Before I confirm the order, I will go namjb.com, and let's refresh it. Then we can select host by clicking this host and click on shared Hostin. And in Name GP, we can get this IstllA and I Stellar plus package to design and develop our WordPress website. In the IstllAPackage, we will have email feature and we will have GB, SSD, and three website. In the ItllarPlus we will have unlimited domain. However, there is a limit, even though it's a unlimited, it's never unlimited. I think it's just a marketing gimmick. However, in here, we have unlimited mailbox and we have this autobup feature. This autobup feature is very powerful, and my recommendation is pick this ItellarPlus account if you are going to use the name cheap server for you website. So currently there is a Black Friday deal. That's why the amount is this much low. However, still, Namecheap is the cheapest and affordable hosting provider out there. And here we can set the billing as monthly or yearly. If we set it as monthly, it will be cost this much. However, I set it yearly, and now we can get it for 22.80 $0.08 and we can renew it after year for $44.88. So now I click on Get start and here we set it as new domain and click on already in the card and our total cost will be 23.80 $0.07. Now I can click on. Add to Cart and here I can click on confirm order. However, I already have tears hosting, so I don't need this hosting, so I just click this clause icon and I only need domain. Also, you can get domain from those other providers. And if we go to this XYZ domain on spaceship, we can search the domain name here and continue the work. But for this, I will choose the name GIP, and now I click on Confirm Order and continue the purchasing also very important thing before you purchase the domain, always check the text of the domain. If you purchase domain with wrong text or wrong characters, it will not represent your brand. So always recheck the text of your domain. If you search domain like custom web design, you will see that this domain is already taken, which means we can get this domain and instead of getting that domain, we can get this type of domain. So when we get a domain, we always have to check the domain is top level domain or to do that, you can just search on Google like if we are going to B dot XYZ domain, we can search is XYZ domain top level domain. Then it say XYZ is a top level domain name, and in that way, you can find out west domain name, but most familiar domain names are.com dot. Dot org. If it's, it's dot co dot k, like this. Getting top level domain is really important because Google and other search engine will rank top level domains easier than just ranking some low level domains. So I will see you after I complete the domain purchase process. Okay. Now here we have the domain name, and now we have to change the DNS to change the DNS, I will click on Manage hanging DNS means we have to configure the domain with the server. And here we have name chief basic DNS. I will change it to name chief web hosting DNS. Then I will click on this savy and it changes. Okay. Now what we have to do is go to the C panel. I go to host in list, and in the hosting list here is our host in. So here we go to C panel, can I just click on it and it will redirect to the C panel. So it doesn't matter what type of domain or hosting provider that you choose. A C panels have the same functionality. So I will scroll down and here we have domain section, so I just click on it and now from here, I click on, create a new domain. Here we have is domain set, just click on, create a new domain, and here let's add the domain name, copy the domain name and paste it like this. Then in the hosting server, it will create new fold call custom website design dot. Okay, so we will have a subdomain. So now I click on submit button. Okay, the domain is successfully created. So if I click here and go to the website, it will look like this. In name G, we have presl certificate for one near. So when we click here, we can see connection Cece, which means SSL certificate is configured correctly and also our URL is TTPs Okay. So now, Earl wood, if you didn't get this page, just wait for five to 10 minutes and this page will appear. Okay. Now what we have to do is install WordPress in the domain. 7. Install WordPress on Your Hosting: Hello, everyone. Now we have to install WordPress on our website. To do that, I will go to the C panel. In C panel, you will see Softaguls App Installer on this tool. So I just click on it. When I click on it, I will redrect to this page, and in here, I will click on Install on WordPress. When I click on Install, on choose installation URL, I will select it as hana dot custom Web Design, US, then I am not going to add any directory, and we'll select the latest version as our WordPress version. And on side setting, we can add st ename and site description. But for now, I am not going to add any, and on Admin account, we have to add the admin username and admin password. And here we have plug in, I will unselect any of them, and let's add them later. If you like, you can keep them. So I Admin account on admin username, I will just add username. It may be Hannah or Admin Hanna or something like that I will just add Admin, then on admin password, I will generate a password and always remember those, use a name and password. It will require you to log into the website. Then on Admin email, I will add admin email like this. After that, I just click on Install button. Now it's start installing. Now here we have Wordpress installed website. So if I click this one, I can go to Backend and we can just access Backend using our website slash WB Admin. Okay, we successfully install Wordpress 8. Clean WordPress dashboard: Hello everyone. Now we have to clean up our WordPress dashboard. So let's start from top. From here, we have these screen options. I just click on it, and this is where I can remove the screen elements of this dashboard. So I will remove all of them because I don't need any of them for now. So now I will click on this screen option to hide it. And now here we have clear dashboard. Then here let's go to Earl Post. In ERLPost we have this Hello World post. I will click on TASH and send it to Trash box. Then I go to TASh and click on Delete permanently. Now on categories, we don't have categories, we only have this default category and on media library, let's see, we don't have any media library, then I click on R pages on ER pages, we don't need this sample page or this privacy policy page. So just remove both of them. Then on trash, let's click Delete permanently and here, click Delete permanently. Then on commands, let's see, we don't have any commands and on appearance, click on them. On themes, we have three themes, but we are going to use Elementor pro to design this website, so we will install Hello Elementor Them. For now, let's Earl deactivate or inactive theme. We don't need this one too. I future, we will install halo elemental theme. For now, let's keep this as the main theme or there's the active theme. On plugins, clicon install plug in and here we don't need this chisme or hedoly plug ins. So Radio, I told you I use name Jeep in name jeep, Light Speed cache automatically installed. For now, I will keep it like this. But in your case, if you don't see light speed cache, don't worry. In future lessons, we will learn how to install and configure light speed cache plugin to improve the speed of our website and cache in. Okay, now on users or users, it has only my user account. Now we have clean website. So if we go to dashboard, and here we have fresh World website, and in next lesson, let's start to design. 9. WordPress Walkthrough: Hello, everyone. Actually, I forget to create the WordPress work through video. So let's do it now. So first, I will Logout just over here and click on Logout. And to log into the WordPress website, we can add slash after the website URL and at wp admin like this. Then we will come to this Wordpress login page, and here we have to add the username and password of Wordpress website that we registered. Then click on Login and now I am on the WordPress dashboard. On the WordPress dashboard, here we have this Wordpress logo, and from here, we can check the documentation and learn more about Wordpress then we have homepage R. If we just click on here, it will redirect to the homepage of the website. I will click on and then here we have command section. Currently we have zero commands. WordPress is best for login, so that's why we have this type of command section. Then in here, we have new menu icon and over the new and then we can create post ad media pages and create users. Also in the right side, we will have details about our admin profile. I hover it and click on this admin. Okay, here we have personal profiled details. So from here, we can change the admin color. So as example, if I select this color, it will change like this and this will change like this, but I like the default color. And here we can add our first name, last name and nickname, here we can add our email. Actually, the email will already set up. Then the website URL is set as our current website URL because we are the super admin of this website. Then we can add details about ourselves, and also we can add a profile picture. To add the profile picture, we have to register with Gravata account. If you just click here, I will right click and click on Open New Window and here we can click on GT Data now and create our Gravita account. For now, I will keep the same and here we can change our password, click on set New password and add your password here, then click on Update Profile and I will not going to do it. After you do that, you will log out and you will able to log in with new password. Okay, now let's go to the dashboard and home. Let's click on Live. Okay. And in Updates section, if I just click on Updates, we can see the plugins, themes and Wordpress version update. Currently, our website is up to date. And when you make updates to your website, always get backups, and then we have post section. So if I click on ERLFost here we can click on AdnwPost and let's click on Ad NW. And here we can add the title like this and here we can add details and we can click on Publish. But in future, we will do those stuff for now. Let's get the familiarity of the interface. I will just click on Lu and go back and here it will show the posts that we already have. Then we have categories and and in future lessons, we will go through the categories and in media, we can see the images, videos, and documents that our website have on this media section. Then we have pages. In A pages, we currently have privacy policy page. If I click on Preview, it will look like this and if we want to edit it, we can just click Edit and edit those details as we want. But for now, let's only go through the Stuff. Again, I will go to the dashboard then we have command section and it will show the commands that we get for our post, then we have the appearance section. Currently, in appearance section, we don't have much details because we only configure the default team of Wordpress 2025 and in future, we will learn more in the plugin section. We will have are the plugins that we need to design this website. As an example, we are going to use Element Pro to design our website. Element or Pro is a plugin. If I click on this add New plugin and here I can see the plugins and then if I search here element or presenter and this element or website builder plugin appeared, and here it says, last updated one week ago and it's capable with the version of our WordPress website. It say design elemento.com, and we can just click on this Install now and install the plugin, then activate it, and it will appear this installed plug in section. A from here, we can click on this upload plugin, and if we download plug into our website, we can just choose the file and install it. And here we can click on ERLser and here we can see the Earl users that we have on our website. So currently we have only super admin and the role is administrator. So if I click on new user. Here are the details that we can enter. Then as the role, we can select its administrator, editor, author, or contributor. If it editor, the editor role will not have all of these details and it only can edit stuff like pages, post, check comments, and stuff like that. Then we tools. This tool section is not important for now, let's skip that one. Then we have set in. In set in, we have section like general writing, read in discussion and here we can scan the side details and there is other section like this. For now, those are not important items. In future lessons, you will learn more about these settings and how to override those settings if you like, you can go through the WordPress dashboard and find more about the dashboard. I hope you have basic understanding of the word press and in next lesson, let's start the design. 10. Installing Elementor Pro: Hello, everyone. We are going to use Elementor Pro to design our custom website because Elementor is best WordPress website builder out there. Elementor has a pre version, but it has limited features. Let's check Elementor plans. To come to this page, click the ink on resources section or description, and you will redirect to this page. Then here we have a pricing plans. The recommended pricing plan is Advanced solo website builder. With this pricing plan, we can get 118 pre and pro widget and it has 86 projts, but with the essential plan, we only have 57 projets. As if we go to marketing and ecommerce section, with Advanced solo plan, we will get pop up Builder. This is a feature that we are going to use, and in the essential brand, we don't get much features. However, if you are going to design more than one website, you can go to Advanced Plan. Or if you freelancer who build website for your clients, you can purchase the expert version. By choosing this type of plan, we will able to replace a lot of plugins and add ons and it will help to increase the page loading speed and optimize overall website. Let's start to install Elementor. To do that, I will go to the dashboard of our website, and here I will go to plugins and click on Ad NE. First, we have to install elemento pre plugin. From here, I will search elemento. Then here we have Elementor website builder plugin. It's developed by elemento.com, and it's compatible with our Wordpress version. I click on Install Now. Okay. Then I click on Activate. All right. Now I click skip and I will skip those step or I will click on this Close button because we are going to set up Elementor pro using the Elementor website. Again, click on the URL of the resources section and you will redirect to this page and from here, I will click on By now button on Advance solo website, Builder plan, and here I will have to fill the details. Then I will click on pay now and make the payment. After you successfully registered, you can download it from here by clicking this Download button, or you can go to Elementor dashboard by adding mid elemento.com. And when you do that, you will see this type of download icon, and then you will see element plug into Download, click on it, then you download will start and now you have the element plugin. So now let's set up with our website. After download it, I go to plugins and click on Ad Plugin. And here I can click on Upload plugin and Tick here to get the bundle that we download the CFle dragon rob that C file we get from Elementor website. Then click on Install Now, then click on Active plug. Okay. Now here we can see elemento plug in section, and if you see this type of message, just click on Connect and activate and click on Connect and activate. Okay. Now if we go to license, it's a status active Now we can use the elemento pro feature on our website and we can easily design this universal portfolio on our Elementor website. 11. Elementor Editor Walkthrough: Hello, everyone. Let's be familiar with elemento editor. So let's create a page. Now I am on our WordPress website dashboard, and from here, I will hover over the pages and click on Add New page. And here I will add title as Taste page. So here we got a pop up of templates. I will close it, and here I will add taste page. Then what I'm going to do is click this edit with elemento button. When I click it, I will redirect to the elemento editor. I will skip this for now, and here is our elemento editor, and first, I will click on page set in, and from the page set in, I will change page layout to elemento canvas. Like this, when we do that, it will give us a blank page that we can use to design our custom website. In our left hand side, we can see the widgets that we can use with elemento pro. If you have a element of pre version, you will not able to access all of those widgets. You can just drag and drop any of those elements into the canvas. Canvas is this blank area. For now, I will close this structure tab and if we check on this top bar, we can see in the left side, we have side set in icon, so let's click on I click on it, we will go to the side setting. In this side setting, we can change or set up our core website options as an example, if I click on layout and currently the content width of desktop size is 1140. If we change this to 101,060, it will affect the whole website, but I will keep it as default. And if we want to add padding to the top of the website, we can just unlink this value by clicking this chain icon, and here we can set it like 60 and then let's click on save and now I click on back to Editor and then let's just drag and drop a headline like this and the headline will drop like here because we have 60 of top padding. So if we again go to sit setting and go to layouts and make this as zero, the heading will be zero. Now I will click on Save changes and go back to the editor. Then by clicking here, we can see the structure of the website. Currently, we have only one headline. Then here we can add nodes, just click on nodes and then if you want to add the node or thought about a section, you can just select the section. In this case, I will select this headline and here I can type node lie. This is for testing. Then I can click on leave a node and that node will appear here. Think if you work with the team and you have few designers who work on pages. By adding this type of nodes and when your co designers will log into the website and check the page and they can read those nodes and understand the design very well. Let's close this one. Now here we have the page name. The page name is test page and currently it's in draft. If we click on this published button, it will available on website, but currently it's draft mode. Then we have this icon, this G icon for access this page setting. If you click here and change the details, it will affect the entire site. But if you click here and change those details, it will only affect the page setting like I did before by changing the page layout. Then we have three views. First one is desktop, second one is tablet and third one is mobile. As an example, if we want to change this text size on mobile, we can just click on the text and go to Etyle then change the font size. Actually, I have to click this text like this and go to Etyle and now I can change its size like this. When we do that, it will only affect on the mobile. If we go to desktop version, the text will be same and it's same on the tablet version. Mobile version, it changes to the size that we already set. Now I go back to the desktop version. Now the most important part is this weird section. As I told before, we can use these pro features on the element of pro and on the pre version, this stuff will be low let's remove this text and let's create the section. The first is thee, we have to add the container. That's the proper way to create the website. I will click on the container and it will add like this from this container, we can adjust in details. For now, let's keep it as default and then I will add other items to do that, I will click here and then let's add the headline and also click this plus icon and let's add text editor like this. Now I click on the container and currently it direction is vertical. It has a column, but if we click on horizontal, it will change to the horizontal. There are lot of options that we can use to design a perfect website. And let's see if we want to change this text. We can click on this pencil icon or click here and click on Edit, and then we can change the text from here. I will change it like yellow Word. And then I click on style and I will change this text color to for now, let's change it to black, and I will change this type for Grappy pins. Pins is my favorite font, and let's change its size to 60. Let's make it like 60. Then I will change it to medium. Maybe normal will look better like this, and we can change the line height like this and set alignment to lay. Okay. Now for now, let's remove this text editor. I just click here, and then I can just press Delete button or I can just right click and click on Delete, like this. Now again, I click on the container and let's add this Mint heights 600 and the container height become 600. Then I click on this text and let's make a line center so click here and let's make this justify content as center. And let's make this as middle to do that. I click on this center like this. And now here we have two lines. So let's fix it. To fix it, I will go to the Advance, and in advance, we have said this width as custom width, so we can click on default and it will make the full width. So there are a lot of stuff to do, and on future lessons, we will use all of those stuff and you will be able to create awesome sign. Okay. Now here our simple hello world takes and now if I click this height panel icon, we can see the real view and also we can click here to get it back. And if I click this arrow icon and click view pages, it didn't update. Let's click on publish and let's try to view it again. Okay, I view this. If we want another section, we can just click here and click at the container to here like this or we can click this plus icon and click on Plex Box and select the structure. If I want to add two column grid, we can just click here and now we have column. So we can do it by manually. As an example, let's get this container, and I click here. Then let's go to Estyle and let me add the background type. So click this classic and let's change color to this blue color and click on Layout. From Layout, I will set Mint heights let's make it like 300. Okay. And this structure is a bit of headache, so to fix it, I will just put it like this and I just drag it to left site and it will become a section so we can easily check the structure of our website. And from here, we need to add this type of two columns to do that. I will click this plus icon and just add a container like this. Now we have the container inside container so we right click and click on Dublgate then what I can do is I can click on the main container and change it direction to or horizontal and it just become two container. And here we have a gap to fix this gap, I will change this gap to zero, and now we don't have gap. So now I click here to select this container. Go to tyle, click Classic and change the color. Let's change it to screen color and let's change this totyle clicks. Let's change to this text color. Elemental Editor is a really simple editor to use. So I just click on publish or we can just click on this preview icon to preview changes. We can click this icon or preview icon and check Elger changes on the real and in future lessons, we will go deep in the elemental editor and learn much more. 12. Set Up Global Colors in Elementor: Hello, everyone. Now what we have to do is install the theme to do that over the appearance and click on theme. And here, click on at them and search here Hello elemento. Here is the Hello Elementor theme, click on it, and when you click cont, you can see hello elementor by elemento. Now click on Install. Click on activate Okay, now it's activated, then I click on this 2025 theme and click on Delete because we don't need this theme and nice. Now we have to set up the side setting. To do that, first, I will go to pages and click on pages. And here we have default page, so I will click on Trash because we don't need this element or ten page, then go to Trash and remove it by clicking delete permanently but then I click on at page and now I'm going to create the homepage. Here I will add the title as home, then I clic on Edit with elemento. When I click on edit with Elementor, it will open the Elementor canvas and from here, we can design the website and on page setting, we can change page set in the title add exert in future lessons, I will show you how to add excerpts and how to rank our homepage on search engine like Google. So for now, let's set up the site setting to do that, I will click on the site settings icon, and here we can add global colors and global font. So if we go to our universal dfolio website, we have a Itca sheet. In this Ita sheet, we have the colors. As an example, this is the primary color, and this is the text color, and this white color is secondary colors. So let's add those details. To add those details, I will go to website and first click on this global color we have the system colors. Let's change those system colors. First, we have primary. Let's get the primary color. To do that, I click on this first color and click here, then click on this Edit T style icon and copy this color property and click here then paste it like this. Name will be primary color and then we have this text color. Click here, click on this EditTStyle and copy the color then on text, paste the color code and text color change this title to text color, and then we have this white color. We can do the same to this one. This will be secondary color and paste the color like this. Actually, we have to add hashtag in front of the color. Okay. Then we have this accent color, but in this case, we have this ho Her color. To copy the Her color code, we have to create let's create rectangle like this and then click here, then select the OA color, and now we can click on detach variable. The reason is currently we use this cho color in this color cube only. So if we just detach it, the variable will be removed. So now I can copy the color code from here and come here and place the color code like this. Then here, let's make this power color. Okay. Now we have Earl color codes. Now I click on Save changes. Then I will remove this one. Then I will go back, click on save, and now we can click here to add the font. Now here we have same structure. Actually, we can click here to come to this section. Okay, now we have to add text. Actually, let's remove this one, and on instigaset, I will add all of those texts, which means we have to edit the Itigaset. So after I edit the Itigaset, I will meet you in the next lesson. 13. Configure Site Settings & Global Fonts in Elementor: Hello, everyone. Now let's try to add that typography. First, we have header, so I just go to sit setting and on primary, I will change this text to header. Then just double click here and copy it like this. Then click here and let's see the typography, so here we have Nunito bold 50. So we can check it so let's search Nunito size is 50 with this ball, and what is the line height? The line height is Otto let's make line height as 50. Yeah, line height will be 44. Let's make line height as line height will be 50. Okay. Now next we have this subheader font is nunito semibolt 26. Let's make it this. The second w will be unit or 26 semibold six, we will be semi boold and Einheit will be 30. I think it was 30. Let's see. It's 33, let's make it like 30. Okay. Then I will change this text to subheader, copy paste like this. Then we have text. Text mean paragraph, copy the paragraph text. It like this, then we have to add the font. The font is open sans regular 18 30 open cents 18 regular mean normal, and line is 30. If there is some issues, we can just remove them by coming here and we have accent? Yeah, we have now buttons, copy the button text and preface it with accent colors and click here, then it's open semi wold 22, open semivolt size is 22 and the line height will be 30. I think it's 30? No, it's 25, Iinight is 25. Now we have to add the custom bonds because we have to add the manline font. Menu link and paste it like this, then click here and just add opens semivolteighteen, open semivolteighteen. And what about Line night is 21. Okay, now we have Earl fonts, so now I click on Save changes. Okay, then I click on here to go back and on the mistie we can ignore it because we are going to use element or editor properties. So just ignore this theme styles. Then we have set in section, and as the first part, we have site identity, let's go there, and here we have to add sit ename and site description. Let's add our site name. Site name is Hannah Clark, so I will just copy that text from here and paste it like this. Then as the site description, I will make it empty. Actually, those items we can change when we do the on page CO. Here we have to add sit FV icon, and in our tiger sheet, I just create favicon that include first letters of this Hannah Clark's name. So I will just click on Export and make it JPG and click on Export. Click on the FVCon set the JPEG, click on Export favicon. And now we have to go to tiny PNG. Now we are at tiny png.com, so tiny PNG is the file compression tool that will help to reduce the file size. So here we have 37 kilobyte, and now we have 8 kilobytes, click on JPG button to download it and then let's go here and click on Sit favicon and let's install it. Then just at ALT, a gas FV icon. Now go back now here we have bra grounds. On setting now, the important part is layout, click on layouts on layout, the content width is 1,140 and it is the default content width, even though our Figma design has width as 1,440, but on elemental default with this 1140 pixel. Then on container pad in, I will make them as zero, and gaps will be 20 by 20. So in here, if we click on this image and press Alt and check the in between sides, it's 20, so this is the column gap, and let's check the row gap. The row gap is the row gap is ten, so let's make aap is a gap is ten. Okay. Now default page layout will be element or full width, not theme element or full width. And the break point will be defaults, and now click on save changes. Okay, go back and we can ignore other stuff for now. Okay, now I go back and here is how our website looks. Actually, I have to rebss this page to check the new version. Okay. In next lesson, we will going to design the header. For now, I will click on publish and publish the homepage. Then I will go to WordPress dashboard at WP Admin after your website, RL, then we can go to set in and on reading, change your homepage displays to a static page and select the homepage as then click on Save Changes. Now if we visit the website, the website will look like this and on next lesson, let's start to design our website. 14. Designing the Header Menu – Part 1: Hello, everyone. Now it's time to design the website. I go to Universal portfolio website, Fake Mobile, and this is the version that we are going to design. So here we don't need this grid layout, so I will just click here to hide it. And now here we have clear design. So as the first step, we have to create this section, this header. Let's do that to do I go to our website and let's go to dashboard. On dashboard, actually we don't need this element or overview, so click on screen options and remove this. Okay. Now on template, I click on Team Builder. On them Builder, we have separate sections. So here we have header, footer, single forced, single page, and stuff like this. So as the first step, we have to create the header. So I just click on this plus cycle. All right. Now it open the element or editor, and here we have library so in this library, we can find a ready designs header, but I'm not going to use any of these, so I just click this close icon, and here we have the element or editor. So here I click on this plus icon, and we are going to use Flexbox, so I just click on Flexbox and Plex Box type will be direct column. Okay. Add like this and I click on it and on Advance, I will remove margins and paddings. So as the first step, we have to add this logo to add it, I select on it, then click on Export, and here I will make it JBG because the display or the content is white and we don't we don't need transparent background. Then I click port. And let's go to tiny PNG and just put it here. Then it optimized, then I click on this button to download it and let's go here. And as the first step, we have to add the logo. So here we can just add side logo like this and here we can add the logo. So just click on change side logo, and here, click on side logo, and then we have to upload the download age. And let's copy the title and paste it like this Hanas. Let's make it logo. Always, we have to add the ALT tag. ALT tag is really important in SEO, and if this logo is not loading or if we're missing, the ALT or ol tag will appear. So always add meaningful text old tag. Okay, I click on Save changes and now click on back to Editor, and our logo just added like this, but we need this on left side to make it left side, I click on the container and on layout, I will add this direction as raw horizontal, and just the y content will be start. Okay, it came to the left side. And now let's find out the in between sides. So here we have 20 as the top. So to get these details, you can just select the element on Figma file that you want to check and press ALTO all tag of your keyboard and you can see the in between size. And if we want to see the in between size from this two, just click like this and find it. So I custom website design, full class, you can find those information. So let's add 20 as top go here and on container, go to advance, then margin top will be 20 like this. Okay. Then what we have to do is add the menu. To add the menu, we can just click on Ad element and search Menu and here we get WordPress menu just copy and drag it here. So just drag it here and it will add to the container, and we have to create a menu before we go forward to do that, I can just click on this. Go to the menu screen to create one, and on here, we can create a menu. So for the menu name, I will add main menu and click on Create Menu. Don't select any of those stuff, create a simple menu. Okay. Now from here, we can add pages post or we can add custom links. So here on here, I will select the homepage. On pages, we have homepage. I just add it, and then we have other menu like A services and testimonial, let's connect. So this is a landing page. In Landing page, when I click on this A, this will redirect to the A section. So to add this, we have to use this custom link. On Custom link, I will add the links take stairs about and as the URL, for now, let's add Hashtag after we complete all the sections and then we can set up the menu, which means when I click on about it will relate to the A section like this. Okay. Now click on add to Menu then we have service copy the text and here, place the text at URLs hash tag, click on addTo Menu, then here the testimonial, copy it and come here, place the link text and add hashtag. Okay. Then on let's connect, this should be button, so we have to create it separately. For now, I will add those stuff and click on Save Menu. Then let's go back here and now we have to publish this to the details. Actually, before we publish it, let's make it as save draft like this and let's publish it after create the full menu section or full header section. Then I click on reload icon to reload this page. Okay. After I reload it, it just added. So now I click on WordPress menu and the menu is selected because we only have one menu, and let's adjust those details. First, the layout will be horizontal and arraignment will be Ir and we don't need any pointer, make it none, and we don't have a sub menu, and on mobile drop down, we can add more details, but let's do it in responsive design section. And now we have to go to E styles. In E styles, we can set the typography. The typography should be menu links. Did you remember that we create menu link typography on global fonts? We did it on the side setting section, and on hover, let's make text color as this primary color like this. Or maybe let's add, let's add Her color as this orange color. And when it will appear on orange on active, we have to set the primary color. The primary color will be this green color. Okay. Now we don't need any dividers like this, remove it, and now we have to add the horizontal padding to add it. We can just click one menuem like this, press and hover over the next menu item. The in between size is 36. Let's make it the horizontal padding as 36. Okay. Next we can add vertical padding. Let's see the vertical padding from here, here, let's see the vertical padding. It's 14. Let's make this as 14. Okay. Actually the horizontal pattern should be zero and space bittween will be 36, like this. 36? Yeah, it's 36. The space between should be the 36 and horizontal pattern should be zero, like this. Okay. We don't have a drop down and we don't have a total button on desktop version. On mobile version, we I did. Okay. Now we have to fix the alignment. So let's fix it, click on this container and add align item as center like this. Okay, then what we have to add a button to add this let's connect button, I can click on element and search buttons. And here we got a button, just drag and drop like this. So it drop to here, I will just click here and put it like this. Okay, now we can customize this button according to the Figma design. 15. Designing the Header Menu – Part 2: Okay, now we have to design this button. To do that, select the button, and let's go to our Figma design and check the details. So button color is field color. And what about button text? The button text is, I think it's menin text. Yeah, it's manualink text. So let's go there and first, let's change the text. The text will be let's connect. I just copy it and paste it like this. Then for now, let's add Link as hashtag. Then go to E style in E style, the button position will be lace and typography is manlin. Then we don't need text shadow, and on normal text color is this primary color. No, the text color is secondary color because the text color is white. Yeah, text color is white. So now, background type will be classic and the color will be this primary color. And in hover, the text color will be still secondary color, and the background color will be this color like this. Okay, for now, let's not add any animations. Or if we want, we can just add like grow. So when I hover over, it will grow like this. Okay, now, now we have to add border radius. So let's see border radius. It's 30. Corner radius is 30. Here we have border radius. Let's make it 30 like this. Then we have to add the padding. Let's make it zero for now, and let's see the padding, silt the text, press all and like this, it's 30 and left and right is 30 and top and bottom is 18. Let's make it top 18. Actually, we have to unlink value icon. We have to press unlink value icon. Then right to 30, bottom is 18, left bet ***. Okay. Now, if we go to the design, the menu set is in right side and this logo is in left side. So to do that, we have to go to container, and we can just make it light. We can just make it like space between. And when we do that, the menu is in middle and this button is in left. But if we go to original design, the in between size should be 36 of this button and the menu. So to fix it, we have to add element, and here we have to add container, just rag and roper container like this. I didn't add. Let's do it like this. Okay. Then advance, remove margin and paddings on layout. Let's unlink value together on the gaps, and the column gap will be 36. Okay. Now I will put this wordpress menu inside this container like this. Let's just add it like this. No, no, I didn't add, add like that, and then let's do the same to the button, and it should be like this. Okay. Now if we click on the container, we can change the direction to raw horizontal. And the justify content will be N, and we added the column Gap pass 36. If we make it zero, it will be like this, it should be 36, and now if we check it, we can clearly see space in between the design and we just achieve what we want to achieve. So if we go here, it will look like this and let's click on preview changes and it will open in new window. So the website will also look like the design. In this container, make a line item as center like this. Okay, now our header part is completed. This part, so now what I can do is click on Publish. When I click on publish, we have a Power call. Where do you want to display your template? I click on this ad condition, and I make it include entire site. I want to view this menu entire side. So now we can add more conditions, but what we want to do is show it on entire site. Then I click on Save and Close and the menu publish. We can see it from here. Okay, now I will go to WordPress dashboard and if we go to template and theme builder here we can see our but the name is just element or header, Hashtag 226, we have to change it to change it. We can click on Edit. Then here I will click on this header set in, and on title, I will change this title to header, header and click on publish. Then if we go back and check it, it will look like this. Okay. 16. Designing the Hero Section – Part 1: Hello, everyone. We just successfully design the header. So now we have to continue the design. Now I have to go to homepage to homepage, I will just go to our front end of the website, and now it will look like this. Now what I can do is click on Edit with Elementor. Okay. Now on page settings, we have to do some changes. First, we have to change the page layout to element of full with. Then we can click on this Hight title in element or full with page layout, the title will be not show, but let's click on this hight title to hide this title. Then if I click on publish and let's refresh it is still there. I think this is on the footer to fix it, let's just create a empty footer, so I will go to the Wordpress dashboard and on Team Builder, click on plus icon of this Footer. Then I will close this and for now, I will click on this footer setting and just change the title to Footer, and I am not going to add anything. I just click on publish and click on Ad Cdition and it will be on entire site. So now I click on Save and Close. Okay, it's saved. So here we can see the Live sit. Let's see the live so now we will no longer see the footer text. So if we repress it here, we can see it will like this. Okay. Now it's time to design this hero section. To do that, first we have to create a container. The container size will be here, we have 90 and here we have 500. It should be 590, so let's go here, click on PlusconPlax Box, click on direction column then here as the mean height, let's make it 600. Okay. Now change direction to row and justify content will be stat line item will be center. Okay. First, let's add those texts to do that, I will click on this, add element and click on headline and drag the headline like this. Then on headline, the HTML tag will be changed to H one because this is main headline of the website. Then let's copy this text like this. Then just pace the text like this. Then on his die, the typography will be header. Here, the typography is header, and on content, only this Hannah Clark part should be the primary color, the green color. So let's make text color as black and on here, I will add Open tax is SP, A N, span, closed tag, and then again, open tag slash span. I just create a DML tag. Actually, we have to add a ID, so I will search set ID equal, and let's add ID head title da title. Let's make it like hero, hero title, just copy it. This is simple ML and CHS but advance on Advance custom CSS, just add hashtag and headale like this. All right. Now it just affected the design. Now again, I click on add element and click on add headline. When I add another headline, it also added in the horizontal way. To fix this, I will click here and add the container, and let's remove all the stuff on this container. Then I will drag this title inside the container will drag the next title inside the container. Then on container layout, let's make justify content center and the direction will be column vertical. Alignment will be align item will be start and the gap, let's see the gap, the gap is 15, which pro is 15. Okay, now we have to change this text to this text, copy the text and pace the text, and let's change this HTM tag to H three. Then one tile, alignment will be left and typography is sub header and the color is this text color. You can see those details here. Okay, now I will just duplicate this text because I don't need to do it or I don't need to add it again. I can just it, then I will copy this text. This text will be typography as paragraph and the text color will be our text color. Pase like this, then on style, let's change this to paragraph. Now this text is grow to the left. We can just fix it with adding VR. So if I go to content, let's make this STM Lt as P or paragraph and here we can set like let's make it like this. Let's add BR like this, then BR like this. Okay, so far so good. Yes, then we have to add a button to add the button. I will just click on add element and search button and just put the button here. Then we have to copy the button text. It just work with me at the text, and for now, let's make hashtag as link on E style. Let's make position as then the typography is button. So let's see the typograp a button, and let's press on the Figma file and see its size is 22 by 33. So let's click on link value together to unlink it and top is 22, right this 33, top is 22, left is 33. Okay. Then a corner radius will be 60, we should add 60. Then the text color will be secondary color and the background color will be this color and on over the color should change to like this and animation will grow like this. So far so good. If we check the design, we can see huge spacing that happened because of the line height of those takes. To fix it, we can just click here and see how it works when we change the line height. So changing this line height will be not an option. Here, we can change this line height line. Yes. So the new line height is 20 in the subheader, and here we can change this typography line height to line 35. Okay. Let's make those changes. For now, let's make it header, and let's go to side setting. On size setting, go to global phones and on header, the line height is 35 and subheader, the line height is 26 and click Conceive changes and click here to go back to the editor. Now, if we want, we can also change the line height of this paragraph two to do that, we can just like this. If you like, you can do this. I will just make it like 28. So let's go to sit setting and global phones and paragraph line height will be 28 and click on Save changes. Click on back to Editor to go to Okay. Now we can see here is I spacing to fix this is spacing. We can add negative margin. Click on the paragraph or the headline, then click on Advance and click Link value together. Then on top at minus value like this. We can do the same to the bottom like this. Now we just design this section and then what we have to do is add this image. Let's add it in the next lesson. 17. Designing the Hero Section – Part 2: Hello, everyone. Now we have to add this hero image. Let's start. First of all, we have to download the image. I will click on the image and here we will see Export, and I will change the image to JPEG and click on Export. Okay, then go to tiny PNG and add image to the tiny PNG. Then click on this J BG to download the optimized version. And now here we have this image. So now I go to Elementor and search here image. Then we will see this image element, and I will just put it like this. So here is our text container, and I add this image outside of this text container in the main container. Okay. Now I click here to edit and here we can choose the image and I click here, then just upload the optimized image, and for this image ALT tags, I will add this text, and as the title, I will add this text, then I click on Silt to add it. Okay. Now, here I will set the image resolution as full. Okay, now our images look like this, but it's pretty is small, so make it bigger. We can select on this container and adjust it with. Let's make it with this. Let's see the wig from here. With this 559, we can just add 559 here with fixel and 559 like this or we can add it on percentage. Actually, let's add it on percentage. Let's make this as 50, 50% will be perfect. Now if we check the container, the Column gap is 20. So here I will just click on space bitten to align this image to the right side and this text will be aligned to the left side. All right, so far so good. However, the bottom of this container is here, but image is on here. We can make this image bottom, click on the image, go to add and set align self as N like this. A right now we have to design this section to do that. Let's create a new section. Click on plus icon, then select the plex box and direction column will be row. Then let's find out the size. The size is 200, here let's at Minhightts like this, then go to Is dies and on background, we can just click on Classic and change the background color to this text color because here the background color is text color. Okay. Now if we check here, there should be a space in between this image and the black background. So if we check it there is gap past, to add the gap, I will click on this container and on Advanced link value together, then add top pass 30 like this. Okay. Maybe let's add it as 20, 20 will be the best size, and here also. Let's let's make it 20 this. And here we can make the same. Okay, now it's much better. Now for the next step, we have to add those sections. So let's save the changes by clicking on save rap. Okay, now for this achievement section, we can use counter widget on element of f. So I will go here and search counter. Here we have the counter widget. I will just add it and you see when we add it, there is a counting effect. Let's set up it. First, we have to add 40 plus, so I will just add starting number as zero and ending number as 240. Then if we want to add something in front of like this, we can add it or if we want to add it behind, we can add it. So we need to add it on behind. Actually let's start from 50. Yep. Now, animation duration will be here, 2 seconds. I will make it to 1 second. So the animation will happen on 1 second. So this thousand mean milliseconds mean millisecond. Thousand millisecond means 1 second. Okay. Then we have to add the title. I will just copy the title. Did like this. Then let's go to E styles. Before we go to style in container. On layout, let's make it alignment center. It's much better. Now edit the counter widget and go to EtyleOtyle title position will be after we want in front of, we can add like this, but we need and horizontal alignment will be center like this, then we have to add the gap. Let's find out the gap. I think it's 20. Yeah, it's 20, let's make it as 20. Number position will be center. The number gap, the plus icon gap, let's make it like four. Yeah, it's default. Let's make it like two. Okay. Numbers, we can change the text color to our secondary color, which means white and change typography to header. Actually, it's already on header and we don't need text stroke or text shadow on title. The text color will be white and typography will be let's see button, the button size typography the button o, and now it will look like this, and we need three more of them. I will just dupligate and duplicate again, dupligate again. Okay. Now click here and let's at the details. It's years of experience. I did like this, and it should be nine. Ending number should be nine and starting number should be zero, and ending will be plus o. Then we have this success rate success rate, click here, change this title to success rate and here at presentage and then success rate is 92 92, and we'll start with like 30. Yes. Looks good. And now we have to add the last one. The last one is guaranteed for clients. It should be 5 million plus. Let's add five here, and let's make it zero. Let's make it one, and here we have to add the dollar, then here it should be plus like this. Okay. All right. Now we have to align this correctly to do that, click on the container and on layout, we can click on this space between and it will be adjust accordingly. Okay, we successfully design the section. Nice. Now I got another issue. It's not actual issue. It's like improvement. So when we hover over this button, it background color is better, but the text color should be changed. So if we change this text color to dark green, it will be much better on the user experience because users will able to understand it better. See, maybe it should be black color. Like this, now it's much better than before. Okay, we have to do it for this header section. So just click on save draft to save the changes, then click here to edit the header. Save leave, then click here and on this style on our text color will be this okay. Now it's much better. Okay. Now also here, let's change the color color to this primary. This should be professional because this should be professional, if we add a lot of text or a lot of colors, that will be not good. Okay, now I click on Edit page to edit the homepage. Okay, now we have to design the A section. 18. Designing the About Section: Hello, everyone. So let's start to design. First, we have to create the section. I click here and click on text box and select the textbox direction row. Then on advance remove margin and padding, and if we check here, the item in between sizes or the section in between size is 1220, so let's at Marginus 1220. Okay. As the first step, we have to add the image, click here and search image and add the image like this, then we can go here, double tap on the image. Click on export export as JPEG. If you have transparent background, you can export this as PNG, but I do it with JPEG because I don't have transparent background. Okay, now let's go to Tin PNG and Ragan optimize, then click on JPEG button to download it and click here and agnop to upload. Then let's copy this title and pace like Altex. Okay. Conclate I just added, and now we have to create this section. To create this section, we have to add the container because this main container about section main container is a horizontal direction, but this text should be vertical. To do that, I will click here and add a container like this. Just add it like this. Then I will add with this. Let's make it like 60 60. I think 60 will work. All right. Then I will click here to add headline. This will be about hanna Clark, so just paste it like this. Then let's add content before do anything. Then we have to add this, just copy it, paste it like this. Then we have to add this text. So just duplicate this one and add the text like this. And now we have to adjust the typography. If we don't do it, the design will not look good and we will not able to edit it correctly, click on the first headline and make it DA melted gas H two, then one tile, sipograph will be head alignment lay and text color will be text color. Okay. Then here, let's see variable is sub header. Just click here and click the subheader. If you want different size, you can click on this penc lion and change the size. But in our case, we don't need to do this, then select the text color, so you can change the text color from here. Okay, and click here, then copy the text and pace the text like this. Then on style, Alignment lef typograph will be paragraph and color will be text color. Okay. When I go to content, I have to change this to paragraph and this line HTML tag should be H three. So don't forget to do that. It's really important to make our page rank on search engine and it's about on page SO. Actually, we will analyze our website COSCO in future lessons. So from now when we do this, it will help us to make our website better on future. All right. Now here, let's add negative margin. The top will be like this. Okay. And now we have to make this center. If we check our Figma design, it's actually aligned correctly because we have to add more data. Now, let's click on this container and make it justify content center. Okay, now I will duplicate this part, and then we have to add this text, copy the text and paste it here, then make it H three. Then if we check the typography, it's button, so style, typography, change it to button like this. Then we have to add this list to do that, I will click on add element and search list. Here we have I can list. I will just drag and drop it like this. Actually, it should be here, then I click con. Before we edit the content, we should go to style and on text, let's make text color as text here the typography will be paragraph. I think it's paragraph, it's paragraph. Now I will copy one by one copy this content, here we have items, paste it like this. Then for this icon, I will click like this and here we can find the same icon. This is pontosom icon library. Here we can find that same icon. Click. I just search check here we have the checkmark. I can just click on Install. Now let's see the size. Is size is 22 by 22 and the color is primary color. Let's make those details. First, I will remove those two items and here on icon, size is 22, then the gap is, let's see the gap. Gap is four, make gap as four alignment is reg, the color is primary color. Now we can click here to duplicate the item. Now I click like this, then copy that takes like this. Then Dubltd copy this takes two, and now we have to change the in between size to do that, I will go to style. Here we have space between, let's see the space in between. It's ten, let's make it as ten. All right, so far so good. Then we have to add this quotation or code. I will just copy the code and click on ad element search quote. Now here we have block code just drag and drop that element. Then I will add the quote and we don't need the tweet icon or we don't need the author. Okay, screen will change to quotation. Let's go to style one style. The text color will be this text color and the typography will be paragraph. Actually, we have to change the typography. Text color will be text and here we have the ate the code color will color and we have to decrease the size. Like this, actually we need this type of quotation mark to quotation mark. However, we don't have that design on element of let's see, we don't have that design, so let's add the quotation and we can make the alignment as we like the alignment centre much better, but let's make alignment left and one dtyled we can change the gap, so I will make the gap as zero. Typography, change it to paragraph and click here. Then on the E style, make it Italy like this. Okay. Now it look good and on code we can reduce the code size. Let's make it like this. It's too small. The size four will be the best size. Then what we have to do is create this find me online section. To do that, we have to use horizontal layout. I click here and on container, I will just put container like this. Then on advance is tough and direction will be raw and justify content will be center. Okay. Now I will just duplicate this text and paste it on inside like this. Then let's change it text to this and its size button, paste it like this on mistyle typography is button. Okay. And then we have to add the social media icon. Wills social icons. So here I have social icons, add it. We need to add it inside this container. Actually, it already added to that container, but this text should be about like this. Then I click the container and make it align item center like this. Okay. Then we have to find out the in between size, so it's 15, so we can easily add Gap pass, column Gap pass 15. Like this. Okay, now we have to adjust this design to do that, let's find out the details. So it is 51 by 51 and order radius is 30. Okay, let's add those details. Click here. For now, let's keep those social ligon and shape will be circle and columns will be auto alignment will be center one style change official colors to cast here change the primary color as this color and the secondary color will be actually secondary color will be white color like this. Then we can add size as 51 51 is to be. The icon will not the 51. Let's see the icon size. The icon size is 21. Let's not add icon size, and let's add padding. If we check the padding, padding will be on fixel 15 like this. The space between will six, make it six. What a radius is th in icon O let's change it color to this color like this and secondary color will be this text color. Now it's much better. If we want, we can increase the icon size. Let's make it like 21. Now on content, let's add the icon first we have linked in. Click on Icon Library and search Link in. Here we have linked in icon. Click on Insert and here the social icon link and in link option, we can add open in New Window, which means when visitor click on the button, that person will be redirect to this social media page on New Tab. Then the second icon, we have Facebook and Facebook as second Licon currently we don't have Facebook page or LinkedIn page or anything, so I will just add Facebook page Facebook website URL, and here we add Link in website URL, but in your case, you should add page URL that you are client available or if you make this website for Business coach at the Business coach, social media links or if you create this website for author at the author social media details if you understand it, then we have YouTube icon. But in here, we have Instagram search Instagram and add then I will adjust Instagram R Okay. Actually, this size, let's make this heigen size as 22. It should be bit big, let's make it to 24 and change the pad into. Let's make it as only 222, like this. Now we have that section on Her animation, let's grow like this. We successfully designed the about section like this. Now I can click on Saraft and move on to the next section. 19. Designing the Services Section: Hello, everyone. Now we have to design this services section. So let's start. I go to the Elementor editor and click on Add New container and click on Flexbox and here set the column as direction column. Okay, now we have to add in between size as one to one. Let's go to advance and on margin one to 20, the margin top is one to 20. Okay. Now what we have to do is add this text, just copy the text and click here, then add the headline. Then just pace the headline like this. Then one style, make it a line center and typography will be header and the color will be text color. Then we have to add this second part or the sub heading, copy the text and here on content, keep the HTML tag as H two. Now I will duplicate this header, then make it H three and paste it like this. Then one tile, typography will be sub header like this. Let's see the inviting size, the inviting size is ten. Let's make this container inviten size as ten. The crow size will be ten. Actually it's already ten Okay, now we have to add this section. To add this session, we can use grid. So I click on add element and just search grid or underlayout, we can see the grid. I will just copy it and paste it like this. Now we got the grid design and here, did you remember on this container, we add row as ten, but on our Figma design, it is 30, which means we have to add 20 more. So to do that, I click on the grid and on Advance link l value and add top pass 20 like this. Okay. Now let's see we have three columns. So on layout, grid, we don't have mean with redowtline, we don't need without line. Let's keep without line for now, and column will be three and row will be two, and the gaps will be, I think it's 20 by 20. Yes, it's 20 by 20. Let's add gaps as 20 by 20. Okay. Now we can add content to inside this grid. To do that, I click on this plus icon or I can just drag and drop a container inside this column and the container margin and padding will be zero for now. It direction should be verticals. Let's make it direction as vertical and the ificonen let's make it. Let's make it as center for now. Then we can add the content. First, we have this icon. Click on it and click on Export. Let's export as JPG, click on export vector, and on Tiny PNG, just add it like this, then reduce it five size, then come here and I here's a m then add the image like this and click on it, then rag and rob the icon, then I will copy this text and LTAg will be this text change the title to that copied text. Now we have to add the title of the service, copy the title and click on Plasicon and here the headline, the headline HTML tag will be H three, pace the text and on its style, make it a line center and typography will be subheader. I think it's subheader. Yeah, it's subheader, then what about the color? Color is text color change color to text color, then duplicate it like this, then I will keep the HTML tag as H three, copy this text and this text typography is button. At the text and on tile, change typography to button because it is smaller. Again, I can duplicate it, then I will copy this text and pace the text like this, then make the STL tag to paragraph, then on style, change typography to paragraph like this. We successfully design first service and let's see the inten size. The inviteen size is six and on top it's 40. We the bottom bottom is 40. Let's add those details. To do that, I click on the container and on container. I think gap will be gap is ten, not et. Yeah, row is ten. Okay. Now on ad glance we can add padding to pass 40, right as six and bottom as 40, left as six, like this. Okay. Then missing. Now we have to add corner radius. Corner radius is 20. Let's make it to do that one dile on board, make the corner radius as 20, and now we have to add the border type, actually not border type, bob shadow, click on this icon, and let's see the shadow details. Here we have drop shadow, so it blurriness is four and position X is zero. Let's find those details. Horizontal will be zero, vertical will be zero. Blur is blur is four on color, click here and on here, the color is this, click here and on here select Css, and when we select Css we can get the RGB chd copy it and on we can just paste it like this. Now it's same as the Figma design. Now what we have to do is just select the container and ling, then duplicate. Then again, duplicate. When we duplicate it, it will be fill the grid. See pretty easy. I will duplicate this for three more times because we have six services like this. Then now I will add those so let's add one by one. Next, we have leaders, copy the text, page the text here, copy this text, paste the text here, copy this text, pase the text here. When we create one structure, we can just duplicate and easily design the website. Then we have to change the image, click here and on Export, JPG, click on Export vector. Actually, I will download the images and then I can upload them. I mean, reduce the size and upload them. After that, I only have to add them to each and every services. All right. Now I will go to Tine BNG and open the images set here I select images, just add those images like this one, two, three, four, five, six, we have six images. Now I click on this JPG button to download. All of them. Okay. Now here, I can see that download images. I will just select all of them and click on this image, click OToosimage and I can just drag and wrap images like this. After they are uploaded, I can just choose the image and click Select. Actually, I have to add the ALT text. Always add ALT text, just copy this text and paste it like the selected. And here I think I already copy the text. Now we have to change the content in this section. First, let's use the so just click here and the images will be load. Here is the image for that image, we have to add the ALT tag as we did before and click Consil then we have to update the content, change the title, then add some headline, then add small description like this and here we have three lines, but here we only have two lines. What we can do is we can just add bracket BR close bracket like this. When we do that, it make a line break on STM, then this text go below. Now we have to change the mindset master program service, just select it, paste, paste, select, and paste this tanks, copy and paste, then copy the small description and paste it like this. Then we have to do it for the next one. So here, copy the tank, paste the tanks, like this, select it, then here, let's go. Just copy the figma design and paste the design. Okay, now we got a issue. So when we check this text in here, we can see a lot of tags. The reason is I just paste that like this, but it's not the correct way. I have to copy the text and paste it inside here, not here. If we paste it like this, this issue will not happen. I think the rest of this text will work well, and we have to add we are here to keep the three lines of paragraph and the last one, just change the text and change the image, click on this icon and taste the icon, click on CLC now we have this text in this one and we have to act B here. We successfully design the services section and on future lessons, we can try or we can add some HA effect and animation. For now, we can just click here and click on Savedra 20. Adding Buttons to the Services Section: We have to add this button. So to do that, let's go to elemental Editor and if we scroll up here, we have the same button. So right click and click on Copy. Then come here and here is the section that we want to add the button, select the container, right click click on and here we go. Now we have button here. So go to East tile on East tile. Set the position as center. Okay, now only we have to copy this text and pase text. So go to content and pass the text like this. Then for make it sure. Let's check the padding. So it's 22 by 33. So let's go here and let's check it on here. It's also 22 by 33. Okay. Now we need to have a spacing. If we check clear, the spacing is 30. We can easily click on the button, go advance on advance, remove margin and padding, then add margin top pass 25 because we already actually this should be 20 because we already get ten as this spacing. Nice. Now what we have to do is create this review section. Let's create it in the next lesson. 21. Designing the Reviews Section: Hello, everyone. Now we have to create this review section. So let's do it. I go to elemento editor, and first, we need to create the container, click on this plus icon and click on Flexbox. Then here I click on daction column. Okay, now we have between spaces one to 20, so let's add it, go to advance, remove default margin and padding and add margin top pass one to 20. Okay. Then let's go to the Figma design and on Figma design, the height is 600. So let's add it, click on the container, and on layout, Min height will be 600. Okay. Now as the first step, let's add this background image. To do that, I will click on the image like this, select the image, then click on this Export button. Okay, it's down and now I go to tiny png.com and we'll upload it to reduce the file size. Then I click this button to download it. Now what I'm going to do is go to our elemental website and here go to Estyle and click on background type as classic then click on this Joe Image and just upload the image like this. Then I will copy this at this text as ALT text of this image. So let's add it like this. Then click Conceal o on settings, make the image full position center center attachment will be default, or it's just make it like fix and repeat no repeat size, cover. Display will be cover like this. Attachment is not fixed. Attachment should be scroll and display size will be auto or we can add cover. Okay now we have background. So next what we have to do is add in this text. It's pretty easy. We can just click here and at the headline like this. Then just go here, copy the tanks and pay the text here. Then let's duplicate this headline, and now let's copy this takes and paste text like this, then let's change the HTML tag to H three. And now let's go to Etyle and here we selected the subheadline, click on this typography global font and set the subheader, then change color to this text color like this. And we have to do the style changes of this header to do that selected Etyle and make it alignment center header then here, text color, we have to make this align center. And not only that, I will click on the main container and on layout the align items center like this. Okay, here, let's see in between the in between, I say ten. Here, it seems too close, so let's fix it to fix it. We can just click like this and click on this pension. Then let's change the line height. Let's make line height as 50 50 will be worked, add it like 50, and what we have to do is click here and select the header then we can go to Global Bonds and we can edit the header and add lines 50 like this. Now click Const changes and click here to or go to the editor. Okay. Now we have to add the top and bottom padinT do that, click here and click on this section and then select the header and press all to find the in between size, it's 70. And what about this? It's also 70, click on the container on advance at top padding 70 and the bottom will be 70. Okay. Now what we have to do is create those reviews. It's pretty simple and before we create it, we have to add the in between size. Here, in between size is 30. Maybe we can add it to margin. So let's skip it for now. So to add reviews, I click on Add element, and here I will search review Okay, here we got the reviews. We just added like this. Okay, now we have three reviews. For now, let's keep all three of those dummy reviews. And here, let's see, first, I will select this review box and now see what we have to adjust. So as the first option, we have sides per view. In here, we have one, two, three, three sides, so I just click three and slide to scroll, let's make it like one, not two, one. So it will be scroll after one. Okay, now we with default and on additional option, we don't need arrows because there is no arrows. If you like, you can keep the arrows and autoplay, autoplay speed 5,000, which means 5,000 milliseconds in seconds, it's 5 seconds. Okay. Now infinite loop will be yes, push on how will be yes, push on interaction will be yes. Okay. And we can add as load as load mean. I review is not present on the website structure, it will not load until it show on Design. Okay, now we have to go to EstilsOETs. Before we go to Estes, let's add real reviews. Let's add real details. First, I will remove those two items and keep only item one. And first here, we have to choose the image. To do that, I will go here and lil this. Click on this image, click this image, click this select all three of them and then click on Export three layers, and it downloaded as C. So I just click on it. I'm using Mac. If you are using Windows, just right click and extract it. And here we have the review Emages. So let's go to Tiny PNG and add those reviews. Okay. Now I will download three like this. Okay. Now I have L of three reviews. You check this review image name, it's just random name. So we can add actual name of this person to these images. That will help to rank these images in Google, and it also a professional way to showcase our images. To do that, I will just click here and let's copy this name, and this is a best practice. So then I will come here name like this, and I will do same for the rest of the images. Okay, now our images are ready, so I highlight all of them, and let's go to our website and click here. Then I will just drag and drop to upload those images to our website. And here we go. Now here, I will copy this title and test it as ALT and click on CLC now we have to add the name, to add the name, let's highlight and copy the name. Past the name, then we have to add the title, copy the title, paste the title here, and rating will be for you and I can we don't need social media icon like this, so I will remove it. And so link will be empty. Then we have to add this text and pass the text like this. Okay, now we have the first review. Now what I can do is duplicate this review for two more times and click like this, then first let's add the image. This one should be the image. Add ALT tag to the image. Okay. Now here, copy the name. Like this, copy the title like this, rating will be five and copy this text like this and paste like this. So if you want rating like three, you can just add it like three, but adding three is not good for business, so let's add it as five. Okay, now we have to edit the third one. Click here, click yeah and add it like this. Then edit the title, add the title and pass the title like this. Then click here to add the title. This is the name. This is the title. Okay, then add the review, add it like this. Okay, now we have all three reviews. Let's fix that design issue. To do that, I go to Estyle on Estyle. Let's find out the space between. Select one of this review and press Alt over the next review, it's 20 rights space between 20 and border with, let's make it zero. We don't need border. Then border radius, let's see the boder radius is two, and then the top and bottom pattern is two and left and right is nine. So let's add those details, the pattern, click here, then here, top 20, right, nine, bottom 20, left nine. Okay. Now we have to add the background color. Actually, we can add background color to header. Let's keep it like default color. We can see a separator. If you want, you can show it, but I am not going to show it, so tie it to height. And now on text that text color will be text color and typography will be. But let's see the typography. Here, the typography is open sense semi wall 18. Let's add those details. We the paragraph and family is opensans 18 wid semivol like this, then line height is 30. Is 30. Line height is 30. Okay. Then the title title text color will be this color and let's see the typography. Typography is open sans regular 16. Let's make it. First select the paragraph and then click this edit ticon size 16 which is normal. Innit 30 like this. Okay, now we have to adjust the images. The image size, let's find out the image size. So it's 92. See, the image size is 92, so let's just add 92. Okay. Now let's go here and actually let's go here. Border radius gaps, let's keep those. Actually, we have to add the gap. Gap between the image and text is 15, so let's add it as 15 and we don't need to add border radius and icon. Let's find out the icon. So the icon size is 23 by 22. Let's make it as 22. No, this icon is about social media icon, we don't need to add it, so just ignore it. On rating, the size is 22, and let's find out the spacing spacing is let's see, let's nine. Let's make it like ten. Yeah. Let's make it like ten. Okay. Then the color is, let's find out the color. Here is the color. Copy the color code and go here, then face the color code like this. Alright. Now it's looking pretty good. Here, we have a issue. This is not in the same line. We can easily fix it by removing this gap. Let's reduce the gap. So, let's make Gap past nine. Now it's looking good. Then we have on text, did we change the review text? No, here we have the review set review text, click on typography and the color will be also text color like this. Okay, now what we have to do is add in this pagination or the change design of this pagination. To do that, go to navigation on navigation. Let's see this pagination sizes 15 by 15 and spaces 220. So let's add 15 is the size, spaces 220. Then the color is primary color an active color is text color. See, pretty good. See? Now what we only have actually, what we have to do is adding spacing. If we check this container and on here, the raw spacing is ten, which means we have to add 20 more because the spacing between is here 30. So to do that, what we can do is go here. Click here and on Advance margin top at dash to 20, and now here we have 30 of the size. Okay, now what we have to do is make them center to do that, click on this container and on here said justify content as center. Okay, now it's looking pretty good. So we successfully design the preview section. However, I can see here is spacing, let's try to fix it. We don't need this spacing. Yeah, we have spacing in between. Et's try to fix it. Let's go to a container. Let's make with this 100%. Yeah, when we add with this 100%, that fixed, and now it's looking pretty good. Okay, now click on save graft to save the change. 22. Designing the Contact Section: Hello, everyone. Now we have to design this ctaxon to do that. Let's start from scratch. First, I will click on this frame and let's go to this grid layout and untick this height button, click on this show button to show the grid. And here we have 12 column grid and six for this section and six for this section. We have to add column that has 50% for this text and 50% for form. So let's do that. Here, first, click on Li plus icon, then click on Flexbox, and here we have to add the direction row. And here on advance layout let's add 1224 top and one style, click background type and change the color to this primary color. Okay. Now we have to add those texts. Let's add those texts to do that. We can click here and just add the headline like this and go to style, change the text color to white and typography will be header and alignment is left. And on content, let's add this text like this, then paste it like this. Have to add the line to here to do that. We can just add BR tag like this. And if you see this top part and the bottom part of this text has two types, you can just click here and change the line height. In my case, it's 50. If you have less than 50 or this is not looking good. You can click on Manage global phones and on here, add line height and click on Save changes. Now let's go back and here next, what we have to do is duplicate this one, click on dupligate and when we duplicate it, it show in this way because we selected pro container. So to fix it, I click on add element and add new container. And for this container, I will remove all margin and paddings and on layout, I will add the width as 50%. Then I can add those items inside this container like this. Okay, now it has 50% of size. Other text. Click here and let's change style to subheader. Let's copy the subheader from here and paste it like this. Okay. Now I will change this HTML tag to H three. Then right click and duplicate this text again. Then let's add this paragraph text, copy it and paste it like this, then change STML tag to paragraph for P, then on style change typography to paragraph, like this. Then what we have to do is add these icons to do that. I will click here and search List here we got icon list, so I will just add icon list like this. Then I will remove unnecessary icons and I click here. Then icon list texts will be this text just copy that text and the icon will be this checkmark. Just search check and here we go, here we go. We have this checkmark here. So in here, we can see this same checkmark and then click Okay, it's not sure because in style in icon, the color is this background color. Let's make it to white like this. Okay. Now let's add Earl content before we edit any spacing or style. Duplicate this for two times and pase the tanks. So we have to copy this one, phase the tanks. Okay. Now we have to add this text, just copy the text and duplicate this one and put it bottom like this. Then pase that text. Okay. Now what we have to do is add size. The first, we have to find out the full height of this section or we can just add 30 as the top and bottom, then we can grow from here. However, let's add Min height, so I click here and here we have Min height as 851, so let's click on this main container and on layout chain Min height to 851. Then a line item will be center. Okay. Now let's change this EtyleT do that, go to Etyle and on Etyle let's find out what type of style do we icon size is 22 and the spacing is four, let's add those details on icon size is 22, the gap is four and alignment will be left vertical position, we don't need to change it. Let's make it as zero, and on least space between will be let's see ten. Let's add ten as space between, then the text will be tipogapy and the text color will be this secondary color on how we don't need a color. Okay, we successfully designed this section now we have to create this form. To do that first, we have to create a container so let's click here and click on add element and here just a container like this. Let's add it like this, then the container width will be 50%. Okay. Now, can change the background color to white on each tile. Click here, the background type color will be white, and also the corners will be two empty. So on board the border radius will be two. Okay. Now here we have to add this t just bet from here and click here and add headline, then at the text, then change the DML back to paragraph and one style, alignment is left. I think it's and typography will be paragraph and the color is this text color. Now we have to add the padding. Let's find out the pading Click here and the left and right is 20 and the top bottom is 30, let's add those details. To add those details, I will select the container. Container on advance in the margin and padding on top, it's 30, 20, bottom, 30, left 20. Okay, nice. Now we have to add this form. To do that, I will just click here and search form like this. Then just and drop the form like this. Now we have at form fields. So let's add them one by one. First, we have full name. I just copy the text, and in name, the text type will be text and label will be named. Just add the name place solder will be named with the required and click on this required icon. And here I will click on this show label to hide, so the labels will be not show. So it will be only placeholders. Now we have email just copy the text and go here on email, the type will be email, the label will be email and the placeholder will be email is required field. Then we have message for now, I will remove it, and now I click on add item, and what do we have? We have to add the phone. So just copy text and place the text here, then placeholder will be then we have to change this type to number like this, not number, it should be t TES. Okay. Next, we have to add this companm, copy that text, and I will just duplicate it from here, and here the type will be text and the label will be comp and placeholder will be compania if applicable. Okay, it is not required, but the phone number is required. Now I will add this label, just copy the text and click on add here, change this to SMS at the SDMLte like this. Let's keep it like this for now. Now we have to add this checkbox to do that. We can click on ad item and change this to check box and checkbox label will be this take now we have to add the option. Now, let's add those check box first, copy this text and paste it like this. Then the next one copy this text, paste it like this, next, copy this, paste it like this, and then copy this take, paste it like this, then copy these text and paste it like this. Now here you can see the headline is not showing to fix it, we can click on ad item and set it as HTML. Then here we can add just HTML text. I will put it about this. I actually should be this primary goal for coaching text here, add it like this. Okay, now tick on this inline list to make the list look like this and let's take care about the design after we add RFelds then we have to add this message box or the text areas to do that click on add Deleon and change text to text area, then label will be additional nodes. Like this, then place sold will be this text and it's not required. Okay, now we have full form and the button text should be request send requests. So let's go here and change the button send to send requests. Okay, now we have to add the It 23. Designing the Contact Form: Hello, everyone. Now we have to add the Esty, click on this pencil icon to add it. Now let's go to Esty.O Style, the column gap, we don't need the column gap, but we need the row gap. Let's go to the element of design and find out the row gap. It's 15. Let's add a gap as 15. The column gap is if we have online fields like first name here and the second name here, we have to consider about the gap in between those horizontal fields, but in this case, we don't have that type of field anywhere. Let's say 15. Okay, now label is spacing, we can ignore this label part, and now here we have STML field. So on STML field, the spacing is already looks okay, then the color will be actually, we have to change the color. Color is this color, just copy the color code and just pace this color code like this. Then on the STML field, also pace that color like this. The typography is paragraph, then we have to do the edit on fields. On the fields, the text colors this text color will be this text color, then the typography will be paragraph and background color, keep the background color as white because the foreground color is also white. Okay, now we have to find out the border color. So the border color is, I think it's also the color that we already had. So this is the color. Actually, it's not that color. Just copy this color code, and let's go here. Then on border color, add that color. And now border width, let's find out widths one and then border radius will be six. Okay. Let's add six as border radius. Pretty good. Now what we have to do? Now we have to go to button in button the position will be left like this, then typography will be button, and border type will be none. We don't need a bolder type. The background color is this primary color on hover color will be this, hover color like this. Okay. Actually, we have to change the text color, like this. Okay. Now, we don't need to worry about previous button because we don't have one. And the button border radius will be 60, and let's find out the size is 22, 33. So the border radius is 60, and the text padding will be top 22, right, 33, top, bottom 22, left 33, just like this. Then message. So the message typography will be paragraph and success message color will be let's add greenish color. This color will be work. Let's color like this, then the color color will be this red color. In line message color, let's keep it as default and the steps, we can just ignore the steps. And it's pretty good. If we want to increase the size of this text area, we can just go to content and here is the text area, and here we can add ros. Let's add it as five. Okay. Now here we have to make this checkbox better to do that on Etyle we have to find out the checkbox style. Actually, we don't have checkbox style, so we have to keep it like this. To add checkbox style, we have used CSS, so I will make some lessons to add CSS in future. For now, let's keep it like this. Now our form is completed. Now we have to set up the form and on future lessons, we will set up the form to get messages to our WordPress dashboard and get messages to our email box. Now I click here and click on Saveaf 24. Designing the Footer: Hello, everyone. Now we have to design the footer section. Let's go. Here, we just save the draft, and now I'm going to WordPress dashboard here, I will let's save the draft again and make sure it's saved correctly. Okay. Now let's go let's leave here and go to WordPress dashboard. From here, on templates, click on them Builder on them Builder. We have this footer or we can just click here and we already created the empty footer. Remove it and see it from scratch. So now I can click this plus gon and go to Footer or click here and at new, then remove this and click here and let's just rename the title to Footer, like this. Okay. Now what we have to do is click this plus eigon and click Complex box, and we will be direction row like this. Ignore this area. It will not appear on the design. And now what we have to do is check the size. The height is 382. Let's make it 380. Here min height will be 380. Then one style, click on background dip, then add the background color as text color. Let's see, the background color is text color. Okay. Now we can just click on publish and here, click on add condition and set the entire site and click on Save and close. In that way, we can see it actually apply to the website or not. Now I will go to the website and let's see how it looks. Click on edited telementor still we didn't make the website published, so we have to go to the editor to check it, and here we go. Here we have the Puta section. Okay, we are in the tight track. Okay, now I will click this plus icon and add a container. And in this container, let's make margin and padding as zero. And here we have to add this head og, so I can just click on Export and export it as PNG or we can just create this Typography, let's create this in typography. This is just a simple text now, so to do that, I will go to Footer and just click here and add a headline like this. Then in e style on typography, let's see the values. It's Nonito 39 volt. Let's No here, we should have 39 and volt. Okay. Looking good. Then I just copy this text and pace the text here, then we have to change it color to secondary white, the secondary color like this. Okay. Now what we have to do is just add this text, copy the text and actually we can on content, let's make TML tag to three then I will duplicate it and let's make it as P or paragraph. Then phase the text on E style. This will be paragraph text, and the text color will be default. Okay. Now that section is good. Now we have to add a new container, just click here and add a container like this and inside that container, we have quick link. Copy the quick link text and here, click here and add new headline like this, then add the tanks and its size is subheader alignment will be center like this. Then the color is secondary. Then we have to add this menu. To add this menu, we have to create a new menu. For now, let's publish those changes and now we have to go to WordPress dashboard on WordPress dashboard, on appearance menus, and here we have main menu. Now clicon create a new menu and in this new menu, I will add it as footer menu. Like this, then clicon create menu and for the footer, we will have to add those sections. For now, let's add hashtag as the link. Here, no on here, we have the home page. We can just add it to the menu and then go to custom Links URLs hash tag, and link text will be first about here, first text will be about and hashtag, the second text will be service, and third text will be contain contact, not content. Contact, URLs hash tag, and then terms and conditions like this. Then privy privacy policy like this and add hashtag, click on add to Okay, our footer menu is completed. Now I click on S menu and don't add any of this stuff. Now I will here refresh the page. And then I search here menu like this and copy the word pres menu and put it here, then select the menu. It's already selected. Alignment will be center, and the Bake point, I will make breakpoint as none because we need a text menu like this. Yout will be vertical. Let's make this color visible. We want to style, the typography will be Mnuulin and text color will be this color. Okay, here we have the menuset and now on content, we can make necessary changes. Here, underline will be none. Pointer will be none like this, then icon we don't have icon. Now we can go to E style. On hover, let's make style as over color and on active, let's make primary color for the active and horizontal padding. Let's see. The horizontal pattern will be zero, but we have the vertical padding. Let's find out the padding in between those items. It's 15. Let's add that value is 15. Okay. Actually it's not vertical pading. Make vertical pading as zero, and space between should be 15, like this. Okay. Now drop down, we don't have a drop down, so we can ignore it, and now it's looking good. Here we have to find out the space in between it's 30. We can easily add click here and in gaps, we can add raw gap as 30. Okay. Now we have that middle section. So after that, we only have to create this fine on social media just copy the text, and we can just duplicate this container because we don't need to do it again and again, so I will duplicate it, and in this text, I will just add this one delete this menu, then here I will search social. Okay, here we have social icons just add inside here and let's add the social icon. Actually, it has link in Facebook and Instagram. So Facebook is in middle, so let's adt to middle, and this is not Twitter. This should be linked in. Link and here we have to add the URL. I will just add LinkedIn website URL, but in UAs or in actual website, you have to add the LinkedIn page or the social media page URL here. And the color, I'm not going to add official color, I will add Hasm but we can add it on the I dies. For now, let's keep it like official color. On Facebook, we'll just at Facebook URL like this. Also on the link option, we can make it open in New Window. When someone click on it, it will open in New Window. And here we have to add Instagram, click here and search the icon Instagram. Insert and here's at Instagram page URL. Okay, shape will be rounded or let's make it circle and column will be auto alignment should be center. Now let's find out the size, height and other stuff. Width is 51 by 51 and 15 15 is the size of. Let's go to style and style change this official color to cast here at the primary color, the secondary color will be it like this. The size should be 51 51. 51 is too big. No, size is not 51. The icon size should be 21. Let's make it 22, 22, like this. Padding, let's find out the padding. The padn is 15. Here we go at the paddinsF 15 not EM, make it fixer like this. Then space in between will be what is six. Let's make this between and row gap. We don't need row gap. Then border radius, let's make it like C now we can add icon hover stuff. Let's make primary color as hover color like this and the second color will be this black color like this, see. If we want, we can add Her animation. Let's grow like this and now it's look pretty. Good. If it feel too small increase the icon size. Let's make it like 26 and this is okay. All right. We successfully design our footer. Let's see how footer will look like this and on main container, we can add this as space between, so it will adjust according to the website space, and now we have to add the padding on top, padding is 30, what about the bottom padding? Bottom padding, let's make it as 20. But for now, let's add padding top as 30 actually. Bottom is 30. On advance, let's make it not margin, adding top 30, bottom or 30. Okay, now what we have to do is add this copyright section. So let's see the staff. So here we have a line. I will click this plus icon and search line divider. Here we have the divider. So to do that, we have to create a new container, so click here and click on Flexbox and add direction column divider because this column is as it's horizontal, but we need vertical. So now on this style, let's make it color to this text color like this. On layout, mean height, we don't need mean height. So now we have to add the divider. Let's just search divider and drag and rop it like this. Then one style, change it color to secondary color, and let's see more info, increase this and let's see divider height is one. It's actually border anyway. Okay. Now the width is one, the gap will be 15. I think it's 15 or 20. Uh, the gap is 20, so let's make GAP is gap as zero, and let's add 20 to the text. For now, let's add 15 as the gap, but let's make it using the text. To add the copyright text, I will add the headline like this. Then on this headline, we will use dynamic tag, click on dynamic tag and check the date. Here we have current date time and here date format will be custom and we only need the here, so I will keep only Y rest. Okay, here we have the here, but in here, we need at copyright at and the current there and the rest text. So I will copy all the ts and here on advance for before I will add this full text and for before we only need this part. I will just copy. And then after we will need this part like this. Okay, add spacing actually, let's open this on text editor, and in that day, we can see all the details. For now, I will just copy the text, and now I will open text editor. I just opened the W three school HTML Editor. So I will click on try yourself, and here we have the way to add the HTML text. So on the design, when we add this text, let's change the style to Menlink. I think it's Menu. Okay, it's typography is manlink now here, make it style Menlink and text color will be this color, and alignment will be center like this, that text is manlink. Now, when I click on this Hannah Clark or the website URL, it should be redirect to this website homepage, as if you are a designer, you can add text like this. After it is received, we can add something like designed by XYZ designer. And when someone click on this XYZ designer, it should be redirect to our website, our portfolio website. So let's copy this text and go to SDMLEditor to make it possible. So on here, I will A tag. So here at Baggot AHF, I will add this anchor tag or the A tag on resources section. And here we have to add the website URL. Here is the website URL copy it and put it inside this HF and here target equal NU, and then close the A tag like this. ML is pretty simple. And this is just for HTML, you can learn more about DML on W three schools. So then we have to add the NCat or link to this text because this is our company portfolio websites to do that at aHf equal and close it. Then close the NCatc like this. Then here at the fs. Let's add it HTTP, Ts collalah XY designers.com. This is just a fake URL. It should be website URL and the target equal new mean, this will be open in a new window. So here is the full code that we have to add after 2025. Copy the code and here on after add this text. Okay, now it looks like this, let's test it after we add other details. First, I will go to divider and on divider, the gap will be Co. And on this copyright text, we have to add 20 as in between size. To do that, we can just click on this copyright text and go to advance on advance those stuff. Top pading will be, bottom padding will be 20 like this. Also if you want to knead this text in different color, you can add that color. On style, the background color will be let's make it darker like this, like this, but I will keep it fault color because we have this divider to divide those two section. Now let's check this in action. We just create a headline and on headline, we use dynamic tag and on dynamic tag setting on advance, we add before part as this and we have to add this space here and after part as our STM and also on dynamic tag, we can do a lot more stuff. And now I will publish this section and let's check it in the design. So I will go to website like this and here we have the footer then if I click on this Sana Clark, it will open in New Window. And if I click on our designer website, it will also open in New Window. Actually, we have actually there is company called XYC designers, but I just get it as Dum content Okay. As we can use CSS to change those style, but for now, let's keep it like this. And now our footy is complete and I think I will click on Edit with Elementor. I think our desktop version of the website is fully developed, and now we can publish this and check the real view. I click on publish and now I click on this eye to preview. Okay. Now, let's see, here we go. We have fully functional website. We can add more ESTA for later and here we have issue. This background should cover the whole section. Let's fix it. Click here and one style, the display size will be covered. It should be covered. Yeah, like this. So. Now click on publish and it will be automatically repas. Okay, here we have the header. We can add animations later, and now it's looking good. Then here we have the foam and here we have the footer. Okay, it's looking pretty good. 25. Setting Up Email: Everyone, let's add functionality to this form. So in this form, what we need to do is if our client or visitor filled this form, we should get those details to our email box. So with elemento pro, there is two ways that we can get those emails or those contact datas. The first one is we can get it via element or form submission. If we go to this action after submit, which means if after someone clicks on this request form and he fill of the required field, we can collect the submission and as we can get those details via email. So first, let's talk about collect submission. To do that, I am go to Wordpress dashboard, and on Wordpress dashboard, in elemento, we can see this submission. You are just click on it, and currently we don't have any submission. So let's try out this form and see what type details that we will get. So to do that, I go to the form page and on element of Editor, I just click on this pencil icon and let's configure all of those items. Here, I will just only add collect submission, which means we will get L details to this submission section. Then on collect submission, we can add what type of details that we need to receive. On metadata, we can get the user IP and user agent, which means when visitor fill out this form and click on Send request, we can get the person's IP address and other details like what type of browser they are using and stuff like that. Then we have step setting. Actually, we don't need step setting for this form because we have only single page form and on additional options for form validation, set it as browser default, which means if someone not fill in the required forms, that person will get a message. And on custom message, if I make it on, we can change these messages. When someone send requests successfully, and they will see your submission was successful, but we make this more humanized and user friendly. We can just add something like your request has been successfully sent. Then here, we can say, Hannah, will we get back to you shortly. So for error, we can change those messages, too, but I am not going to change any of so currently, we save this page as a draft. But to test this, let's make this page published. And in that way, we can check the real website on the front page like this, and then I will go to the form section, and here I will enter my details. Okay, just fill the now I will click on this send request button and let's see what will happen. Okay, now we got this success message, and now let's go to submissions, and in submissions, I will repress the page. Okay, here we have the Emas that I test. Actually, I test it for two times, so let's check the first one. So I just click on view button. And here we go. Now we have the details, and you can see the form pieces that we got and here we have test call field or CB and feel like dig. So this is the STML field that we added, so we can just ignore it, and on additional information, we can see user IP and user agent like this. So when someone fill out this form and send requests to this business coach, the Hanna will get a lot of information on this submission page. Also, as I told before, we can this information in email that email will land on our email box. Let's try to do that too. To do it, I will click this plus icon on after submit and set email. Also, if I click this plus icon and check the list here, we can do a lot of stuff we can just set up Milam, get response and a pop up and a convert it and do a lot more things. Also there is a field called Email too, which means client or if visitors send us an email, we can send email back to that person because that person at their email on this email box. So using email too, we can send email to the email that he adhere. So if I untake this email and see here, here, we only have this email tab, but when we add email to here, we have option to add the second image. Now let's create email account and make the emails working. To do that, I will go to Spanel of my website hosting and it has emails account features, so I will scroll down or I can search here email here we have email account. However, if we search down, we can see email section. In email section, we have the email accounts. I just click on and here we can create new email. I will click on this Create button. After that, I have to select the domain. So I will select this domain, and here is the our domain ,hnadt custom website design.us. I just select it, and here we have to add the username. So I am going to create two emails, one email for recipient, so that email we will use to send emails from our website. And the second email is receiver email. So the receiver email will receive the email when we send emails via our website. Okay, for username the receiver email will be hello at hana dot custom website design. So this part will be your website URL, and here we can add a password. We can generate a password like this or you can add custom password. A make sure to write this somewhere or make sure to remember this password because you need this password to log into your emails account. So I will just create a password. Okay, I just create a password and then I can click on this Create button, and when I click on the Create button, the email is created. Here is the email. And here I can click on this check email and check the email box. So you can configure this email with your Gmail or your email client. So in that way, you receive the email to your email box without login to the email box like this. So here we have information about our email, and we will use this information to configure our website email functionality and setup SMTP. Okay. Now I will see the under emails. So to do that, I will click on Create and here, choose the domain, and then I will add email name like in four. So this email name will be name like this or my name. Just don't add this space, create the email like this and for this one, I will just add info info at hanadt custom website design US. Okay, then I will here at the password like this, then again, I will click on Create. Okay, now we have Hello email and info at hana custom website design US email. Now what we can do is we can go on the Elementoditor and on Elementor editor. We can set up this email tab. So here we have to add the email. So to email will be hello athnadt custom website design US two will be the receiver email and here we can add the subject. Here, I will change this subject like new client inquiry for Hannah Clark website like this. And on messages, I will add Earl Fields. With this Earl fields short code, we will get the field details to our email box, and then here we have to add from email from email will be Senders email, so here we create it as info. Here is the sender's email. I will just here and just copy the email address and let's face it like this and here we can select the reply to email. So here reply to should be email field. Email field of this form because when we click on reply button, we should reply to this visitor who send us an email. Okay. Then for the meta data, we can add all of those info. So we can add day time page URL, we don't need page URL, user agent fm of IP, credit. And here we just add Earl meta data and set the send as HTML and to email to, let's configure the email too. So as I told before, this email will be sent to the visitor who fill up this form. So that visitor's email should be that email that he enter here. So let's get that email field. So I click on this form field and on email, I go to Advance, and here we have field ID, shortcde. I just copy it and on email to, I will just add to email like this. Then here we have to add the subject and message. Okay, let's add subject like thanks for reaching out and on message box, we don't need Earl fields. We have to send thank you message and let the visitor know that Hanna will contact him or her. I will remove this and add messages like, thank you for reaching out, your request has been successfully received and Hanna is thrilled to hear from you. Text like this on here, we can add the person's name. To do that, I will go to form fields and in full name section, go to Advance and copy the short code. Then come here and and add it like this and the from email will be info at, let's copy it from here. The from email will be this one just copy it and here will be the from email and from name will be Hannah Clark and reply will be Hello at hana dot custom website design, and we don't need carbon copy, so we don't need to send any metadata. So now we have email one and email two, so I will publish this page. Let's see it in action. Now I will go to the website and repress the website, and here let's go to the contact form and let's fill out this form and see the emails are sending or not. Okay, here I will add the form details. Okay, now I will click Consent request and let's see what will happen. You request has been successfully sent message and let's see it actually landed to the email box. So here we got that email and here we have a information. So in that way, we can also get the emails and let's see the email that visitor added. In my case, this is that email, so the visitor should receive the email too. Here we go on my email account. We got the email. We got this email like this. However, this email is in one line, so we can add break line to make this better to do that. I will go here and on email on here, I will add just BR tag like this and here also add the BR tag and here we can just add the BR tag BR and here R like this, then I can publish and now our email will be break for the new lines. Now we have working email in case if your website emails are not working, I will show you how to fix it by setup SMTP plug. 26. Troubleshooting SMTP Issues: Hello, everyone. If your form is not working and you are not receiving the emails, let's fix it. So to do that first let's go to the Worps dashboard and then go to plugins and click on At Plugin. Now, let's search the plugin call SMTP. Just search SMTP and you will see this WP mail SMTP by WPForms, click on Install, click on Activate. I will just click on Gb to dashboard and let's configure it manually. So now we can see this WP mail SMTP plug in here. And on this plugin, we can configure SMTP data. SMTP means simple mail transfer protocol. So let's do it first on tools, you can have feature to send test message or test email. You can just add the email address you want to send the email, then click on sendMail let's do it. I just add the email and click on Send Mail and hopefully this should be send the email because my email function work correctly, it just send like this. And if you didn't receive the email, you can here see a message. Anywhere, let's go to set ins and first add the set in, then try to send the email. Okay, now here I will scroll down and here I have to add the from email. So I say the email address that emails are sent from. So in my case, it's info info at hana dot custom website design US and dig this force Fm email check box. Then prom name will be Hannah Clark. And also, if we want, we can FcePom name, which means this name will be main name or the name of fat hana dot custom designs email address. Okay, I will just make it off and return path will be off and on mailer, I will take this other SMTP. In other SMTP, we have tough to configure. So let's do it. To do it, I go to our C panel, and here is our email address, from email address. So now I click on this connect Devices button. In connect devices, we can find out this mail client management setting. Okay. Now let's come with one by one. First, we have to set up SMTP host. So let's go here, and we have to add this outgoing server as the SMTP host. So just copy, come here and paste it like this. And encryption will be let's see the encryption. It's SSL TLS, let's make TLS. No, let's make SSL. Okay, then SMTP pod let's find out the SMTP pod. It's 465. It's already added. Let's add that pot and here we have SM TPA use a name and password. So the SMTP use a name is the email address from email. Just put it and here you have to add the password that you used to create this email account. And I already told you that password is really important because you need that password to access your email box. So I will just add it like this. Then here Ilicon save setting. So if this SSL not working, just select the TLS and I use SSL. Okay, save the setting and let's go to tools. Then send the sample email. So I change the default, email SMTP, set in so send the email and see what will happen. Okay, it's a success. So here we go, we have those messages and let's go to our email box, and here we have the email. Try this method and see it work one. So if it's not sending, here you see a error message. You can use AIGPD to find out the issue or you can just Google it and fix the issue. Okay, now you don't need to do anything, you just set up the SMTP and according to your SMTV data, this mailbox should work. So mine was a ready word. However, let's test it again, so I will fill out those information. Now just click onsen request and let's see what will happen. Okay, we got the message and let's see here. Here, we got the thank you message like this, and so on here, we got the new client inquiry form Hannah Clark website message. Okay. 27. Changing Hover Colors: One now good to go and now we have to fix the responsive issues and other UIS issues. First of all, when we hover over, the buttons get this orange color and it seems it's a little bit unprofessional and it's not match with the business coach theme and it's not match with the color palette. Let's fix it. To fix it, I will click on Edit with elemento and my plan is to hover just make it appear in the same color. Do it, we have to go one by one and fix them like this, click on the button and go to Estyle on EtyleOH. Let's make this color to this color, the same color and text color will be white like this. Now I can we click and click on Copy, and then on this button, just wrike it and click on Pastyle. But when I do change the design, so I will press Command Is or Control on Windows and just let's change it clicking here and go to Style on Ho, change this white and change this primary color like this. Then here, just click on the form and on Buttontyle actually tyle we have to go to button and background color will be this and text color will be white color. We don't need to worry about previous button because we don't have any, and then we have to fix it here, just click here and one style, I can change it to hmary color and like this. Now it looks so professional than before. Now I click CF Bliz and we have to fix the same issue on the header to do that I click on this header to edit a part, and here we go, click on it, and then on Es tile on Nova, change the color to default color like this. Now publish it and then let's click here and click on Foot. Go to the Futa section. On FutaSection, we have to do the same edit for change the social media icon. Okay, here, click on here and on Estyle icon edge over, change it to this color like this. Then click on publish and good in next video, let's fix the responsive issue. 28. Fixing Tablet Responsiveness: Hello, everyone. Now we have to add responsiveness of this website. This website is not responsive on tablet or on mobile. So let's start to do that. First, I go to desktop version, and let's start with header so click on this header to edit Okay, now I am at header, so now I will click on this tablet Portret version, and on here, first we have to add spacing in the left and right. So that will be pad in. So I click on Edit container and on Advance, you can see here now we see the tablet Portrat and here is the desktop. Here is the mobile. So on tablet, I will unlink this value. Then let's add 20. No, no, not for top top will be zero, right 20. L to like this. And then as the next step, the menu is not showing correctly. It's show as a hamburger menu, but we need this as a normal menu because there is a space to add it as a normal horizontal menu. So to fix it, we can just change this break pronto mobile. And in that way, the menu will be appear like this. Then we can go to Etyle and ddt this stuff like vertical padding. Let's make it six and let's reduce the I space between 20 and now it will look like this on the tablet and I can click on this container, and here I add the column gap as 36. Let's make it like 25 Then again, go to the menu and add the space between 25. Okay, now it look much better and head on the tablet version is looking good. And now let's go to this main page to do that, first, I will publish this and then click on Edit page. Okay, now I am on our home page, so I will click on this tablet Porto and here I have to go to Advance and add padding as right to empty and the left to empty like this. A here I will click on this container, and on layout, we can add justify content center. I just want to make this to center. Let's try it. Click here and on Advance should be some set in on here. Let's find out that set in. Okay, here we have it aligns NO tablet version, let's make it align self as center like this. Now it adjusts correctly and we don't need to change the font size, but if we want, we can change the font size too. To do that, let's click here to edit the header on time for Apple click here and then click on Man global fonts. Before we do that, we can just adjust this size and find out the best size. So 38 will be best size for this header. And what about here? Let's try it. Let's make it like 22 will be good for subheader, and what about here? The paragraph size will be okay. So now, again, I click on this headline and change typography to header and also change this typography to subheader, and click here. Then click on this Managed Global font icon and on global font setting, I just select the portrat version and click on Header and here we can see the tablet icon. Let's make it 38 like this. And here we have to make this to 220 like this and the button size will be about 18? Yeah, 18 will be good. And now menu link size is okay. Now I click on Save changes and then click on back to Editor to go back to the editor. Okay, now I am at the homepage and our hero section is look like this, and I will click here. And if we want, we can decrease the padding of this button. So let's make it like top twoelve and will be let's make it like top 15, right will be 15, bottom 15. Left 15. Like this. It seems it's too small. What about 20, 15 to 20? No good 20 to 20. Okay. This much better, we have to do the same here, but here it look good. And now we don't need to do anything on this section, so I will click on this main container, and on advance, we can add test 20 and the left test 20, and it will adjust accordingly. And on the above section, just click here let's add padding Nas 20 and 20 like this. And again, I will click here and see it align itself. Let's make it center and it will look like this. Actually, let's make this as one column. So currently we have two columns, so let's make it like one column. To do that, I click on this container. On layout, let's change this direction to column like this and now it will look like this. Now I will click on this secondary container and this container will be percentage and it will be 100% like this. Now it's looking pretty good. Now it will look like this. We can do the same here, but the hero section is already look better. Now we have this section. First we have to add the left and right fadins 20, left will be also 20. Okay. Then we have this grid. So click on the grid, first click on the grid, and we can go to layout and on grid row and columns, we can make it like two column grid and the rows will be three like this. Okay, now it's much better, we have to change this button, padding like 2020 to 2020. Okay. Now we just fix the services section two, and now we have this success story section. So click here and add the padding. So let's add let's click on this link quality together to remove top and bottom fading. Now at right test two and the left test to 20. Okay. Now here, if we want, we can change the item count to show so we can just change hight preview like two and then two previous base show like this. Then let's move to the next section and here so here we add the min height. If we want, we can remove the min height so let's set the min height as zero, and then we can add top fading as like 30 and the bottom fading will be 30 like this. It's much better than before. And then we have to fix here, so I will click on the main container, and here I will remove the min height to like zero. From here, we can make this as column to make it in the two rows and advance, let's add the right at 20, left as 220. Then click on the secondary container, the container inside this container and change to percentage and make it like 100%. Like this, we can do the same here percentage 100%, like this. Okay. Now it look pretty good. Also, we have to add the pad in on the top and bottom. So let's at top as 30 and the bottom as 30 like this. Okay, now we just fix that issue too and now we have to fix the a section. So click on Publish. Okay, now click Con footer to edit the footer section. So here, it's look good. So I click on main container and let's keep this top padding as 30, and the right will be 20, bottom will be 30, and the right will be left will be 20 like this. So we don't need to do anything. I adjust accordingly. Actually here, we have to change the color. So on our change primary colors like this. Okay. Now here we don't need to do anything, and on copyright section is looking good. So now I click on Publish. And now let's go to the main page, just click like this and I will be credited to the main page. Okay. Now here, our tablet version is fully functional and you can check this website design on Responsive checker tool and find out it in details. I just go to Responsive test tool and just copy the website URL and page the URL here. Click C check, and here we can see the preview on it desktop, and we can find out its size with different versions like this. And we can test the tablet version like this and on tablet, it will look like 29. Fixing Mobile Responsiveness: Hello, everyone. Now let's fix the mobile responsiveness of this website. If I click on Mobile Portre, it will look like this, and let's make this better. First, let's start with header, so I click on header. Okay. Now here we have this header that we used to show our website main menu on mobile and tablet version. But on mobile, it should have this type of Hamburger menu, but with this design, we are not able to do that. We will hide this design on mobile and creative one. To do that first, I will duplicate this menu and I click on this first menu and go to Advance advance, we will have responsive section in responsive section, we can hide it in mobile. This section will no longer appear on mobile and now we have the second section that we bligate I will go to Advance and on responsive, let's hide it on desktop and tablet and show it on mobile. Now if we go to desktop, the second one is disappeared like this. Then here, I will click on the container and on layout, it has direction as row. And in this button, let's try click and delete the button. Then click on this container, and let's make this container with 60, 60 to 40. Let's make it like 30, 20, ten will be the best size. Maybe let's make it 20, 20 at 20, and in that way, we can increase the size of this menu. Now I click on this WordPress menu and we have to create new Mnutud to this section because we just remove this let's contact button from the mobile menu. What we can do is we can click here. Menu is screen and it will open the men, then here I will create a new menu. On the menu name, let's add mobile menu and click on create Meno then we have to add the menu items. First let's add the home. Then let's go here and go to the tablets then we have to add about and service then testimonies. Actually, we can go to our Figma design. Okay, on our Pigma design, we can copy those texts, first copy about here let's go and on custom link at about an add hashtag for now, then we have services, click on it and add services like this, add hash tag to here. Add to Menu, then testimonios copy is pasted here at hash tag to the URL. Then also add let's contact Menu to this menu and add hashtag and click on add to Menu. Desktop version, we add this let's contact button as separate button. So in this case, we have to add it to the mobile menu and click on Save Menu. And here I will click on Publish and then let's go to mobile version, and now I will repress this page again. Okay, now let's go to the header section. Just go to WP admin and here on templates on them Builder, click on this header to open it and click on this edit button to edit the content. Okay, now here I go to mobile version and click on the menu and here change it to mobile menu. Now if we check the menu, we will have it like this, but we can fix it to fix it. Dig the full width like this, and now if I check it, it will look like this and it has all the items. Now what I can do is go to Etles onEtils. The typography will be menu olink and the text color will be this color. And here we have to go to drop down and we have to adjust the drop down setting. So here the test color will be this color and the background color, let's change the background color to like this and make the test color white color, and now it will look like this. So on edge over, let's keep the default value because on mobile, the edgeo is not that important and we don't need border is. And what about horizontal pading? Let's make it like 20 like this, then vertical pading let's put it like this and we can adjust the dist now let's make distance like this, and now let's make it like two, like this. And now let's go to Toggle button. On Toggle, we can change the color. Let's change actually the color to white color, and the background color will be this primary color, and let's increase its size to 35, 35 will be good. And now it will look like this, and we don't need any water radius. Let's make it like the water radius as like this and it much better, and we don't need to worry much about hour mobile and our mobile menu is completed. Now I can click on Publish and let's go to our website, go to website or we can check it from Responsive Test tool and let's go to here's the mobile. Here is the mobile and let's check it on mobile, so it will look like this, and now we have to adjust the hero section to do that. I click on homepage here to redirect to the homepage, then click on mobile Board. Here this is too close. So fix it, I click on the main container and on Advance add top adding as let's like 60 no, I only need to add it to top. Let's add top like 60 and the right will be 20 and bottom will be zero and the left will be 220 like this. Now it's much better. If we want, we can decrease the font size, click here and one tie let's go to typography and let's try to change it to Let's make it 28 it's too small. Will look good. Let's make it to 32 and 34, and the rest of the font will keep as same. Click here. Click on Manage global font, then on header and set the mobile portrait and make it 34 34 like this and click on Save changes and I will keep the rest of font size as the so when we change it from here, its effect on global design. That's why we use the global fonts. Okay, now it will look much better and click here. If we want, we can make this full width fonts. So here we can add stretch not stretch. On advance align itself, use it stretch. It's working with will be full wo, the is looking good. Now if we want, we can make this top and this text button. Click on the image and on Advance, click on this order to start like this. Now it will look like this and it's much better than before. And now on this section, we can just go to layout and change two column like this and here let's let's set the roger pass 220 like this and on here, let's change this in between size. The title gap, let's make it make it like. Now, right click copy and right click paste style, paste style, paste style like this. Then let's add some spacing. Let's make it like 30, 30 will be much better. Then on the main container on advance, that's at the top fadins 20, right will be 220, bottom will be 20, left will be 20. Will look like this. Then here we have this image and the text looking good and here it look good and mobile can just click on it and let's add some spacing. Let's add spacing as and the column space, let's make it column space as 15, like this. Now it will look like this and here don't need to do anything, and this button is looking good. And here we have one preview of a slide, and here we don't need to do anything. Everything looks good. Here, let's make it header. So yeah, it should be header. In that way, this header will be adjusted. The typogram should set as header, and here is looking good. If we want, we can remove some right and left padding. So let's me. Let's set top path 30, right will be two wells, and bottom will be 30, left will be well like this. In that way, we will have a bit more spacing. Okay. Now, the homepage is looking good. And if you want, we can make those text center like this. It's up to you. I will keep it in the left side in that way, it will be easily readable. So now I will click on Publish, and then I have to go to Footer section. Click on Footer and on Footer, we don't have to do much of stuff, so just click on the main container, and on main container, let's make ogaPas 30, 30. What 60. Yeah, 60 will be much better, and now it will look like this. So the copyright section is looking good. So now we will publish those changes, and our website responsiveness is fully designed, and in the next lesson, we will have to add the animation to this website, and we have to add functionality to each of every button of this website. So let's do it in next lesson. 30. Linking Website Sections: Hello, everyone. Now we have to link those sections, which means when I click on this About page, this should be rerect to this or point to this about section. So let's do that. To do it, we have to assign IDs to each and every section. To do that, let's start from home. So I click on main container on the home and then go to Advance. On Advance, I will add CSS ID as like this. Then let's go to next session. Next section is this, click on it, and here this will be a session. I will just add CSS IDs about. Then here we have service session. I go to add dance and go here and add Ids Vss. If you have two words my services, you can y Mash services like this. In my case, it's only services and the next section is testimonio let's copy this text from here and then click on the main container and add CSS ID as testimonial and always add in same format, which means if you add capital as first letter on the home in testimonial adding capital as first letter. Keep the consistency and here we have contacts. Will go to Advance and add this as contact. Okay, now I publish this, and now we have to go to the menu section of our website to do that, I will just open this website on New Window, and here I will go to menus on appearance men and here we have the mobile menu. Let's start this from main menu, select the main menu and click on this Select button. And the homepage is linked to the homepage, and then we have this about page. On a page, we have to add about ID. So let's click on the main container, and on main container, here we have CSS ID, copy it and add it like this. So when we add the ID, it should start with hashtag. When we add it el did with the homepage URL like this because this section is inside the homepage. Always add this hashtag about after the homepage URL. I will copy the homepage URL and let's go to services and on services, let's do the same the website URL, then hashtag, then go here, click on here. At CSS ID, add it like this, then we have testimonial, go here. Let's select the main container and on advance copy this text and paste it like this. Actually, we have to copy this section like this, then paste like this, then now we can click C savenu and let's keep this in action. I will go here and open the website in New Window and let's see now I click when click about, it redirect to the A section and when Nlck Css, it's redirect to the services section. When I click testimonial, it will redirect to the testimonial. This is the way to link our website because this is the single page website. Okay, now we have to add the same action to this contact, so to do that, we have to add that data to this. Let's contact. But to do that first, I will scroll down here and click here, then copy this and now what I can do is click here and go to header. On header, here we have the main menu and here we have the button. On this button link, ex at first copy the website URL with hash tag and then add the ID and link option, don't check open any window or any other then click on Publish. No need to view, just click on Publish to publish it and then repress the page. Now click on it's Contact button and it will redirect like this. This is the way to now, then we have to add action to this hero button. So let's go to the homepage to edit the homepage and here, click on this button and on here pace the URL and after hashtag, we have to add the contact because when we click on this button, it should rerect to this contact form. That is the CTA or call to action on here we already added the Facebook and LinkedIn and other social profile here we have to add the same URL like this. Let's add yes. Then now it's completed, now I publish it and then if I check it in action, then rest the website and click on this work with me and it will relate to this section. Now what we have to do is go to Menu and select the Footer Menu. Then we have to add same menu link to the Footer. Here is about and services. Let's check the services ID is okay. The services you add it, this word should be exactly same as the link word. If it different, the link process will not work, then contact here and term and condition and five policy, we have to generate those two pages. So now let's click on Save menu and then let's go to mobile menu and do the same. Okay. Now here we have about just that actual we can add from here. Now we can dt at services section like this, then here about this services. Then we have testimonius. Let's add testimonios section. Like this, then let's connect here, we have to add it current, and testimonial is okay. This one is okay. The services is okay. What about is okay. El good. Now I click Csavmu and the mobile menu is also completed. Now we can check it in action. If I click Conservs it should be feed to the services. Now the lingn process is Elgod and as the next and last step, we have to add term and condition and pri C policy stats do it in next lesson. 31. Generating Terms & Conditions and Privacy Policy Pages: Hello, everyone. Now it's time to generate privacy policy and terms and conditions. To do that, we can search on Google privacy policy generator, and we will get this type of free privacy policy generators, just click on it, and here we have to go through simple form. So first, let's do it step by step. So first, I click on this. We will your privacy policy be used? It will be website, then I click on Continue and generate privacy policy. And here I have to add website UR let's copy the website URL from here. Then we have to add the website name. Let's add website name, copy the website name and add it like this. Then we have to enter the type, so I will add I am an individual, then we have to enter the country. Then we have to enter the State and select your country. In this case, I will just select United States and click on next. Then here just read this. What kind of personal information do you collect from users. In our case, we have a form. In that form, we have select email address, first and last name, phone number, and no social media profile. We only collect those stuff, then select them, click on next step. If you have more fields, you can just pick this other two, then I click on next step. Here we have another question called how can users contact you for any questions regarding your privacy policy? Here you can add by email, by visiting or anything. In this case, I will add by email, then I can add the email address. The email address will be hello at hana dot custom website design us then click on next step, and here we have two choices. For the first choice, we have to the premium, but we don't need it, so you just click on No, I don't want professional privacy policy, just click on next step and here I have to add the email address. I just add the email address, then I click on this generate one. Okay, we just generated the Privacy Policy page, so I can just click on copy this two clipboard. Or you will get this copy of this to your email address too. I will just click on Copy to Clipboard. Then let's go to the website dashboard and on page click at page here add the title as privacy policy. Then click on Edit with element of. And here I click on plus icon, textbox and press box direction will be direction column. And here, let's add margin of pass, one, two, 20. Okay. Then click here and add text editor like this, then I will click on this code and then pace the code that I generated using this privacy policy generator. And here, let's go to Etyle. Let's make alignment left and typography will be paragraph, color will be text color. As we can add link color. Let's add this green color to link color. And we can add paragraph spacing. Let's make it like 15 and nice, it will look like this, and at the end, let's add let's click on the main container, and for the bottom let's add 120 like this. Then click on Publish and we just generated the privacy policy page and let's create term and condition page two. To do that, I can just search on Google term and condition generator like this, and here we have few suggestions. So let's go for term and condition generator, website, and here we have to add. Where will your term and condition be used? So it's website, then click on Continue and generate term and condition, and here we have to add website URL, and here we have to add website name and here enter the type as I am individual in your case, if it's business, at it as business and other business information. In my guess, I just select I am individual and here set the state and click const state and here we have questions, C users create accounts? Is can users create and upload content? Can users buy goods, do you offer subscription plans? I make as no like this. If any of this is true, you have to pay this price, but the easy way is use AI to generate term and condition page. Here we can again add the email address. I just added the email address like this, then click on next step and click on next. Here we have to also check now and click on. Next step, then I click I will have to add the email address, add the email address, then click Congenerate, I generated the term and conditions. Now I copy this term and conditions text and go to the website. Here, I can just click on at New Page and on here, click on page set at the title as term and conditions. Then I will follow the same theory that we follow before like this. Then on advance add margin top as one, two, 20 and the bottom as 12 like this. Then I will go here, just copy this to clipboard and here clip this one and add the text edit like this, then go to code and paste it like this. Then one tile, make it typography and the link URL will be in this color. Okay. Now we have the term and condition and pricy policy pages. Now publish them. Okay, now let's go to Menu on Futter Menu select it and click conceal and here on term and condition and Priory policy, just tick them from here. Or you can click on Viewer, and here you will see the term and condition and PriocPolicy. Then just click on add to man here we have custom link win items, remove them. We don't need them. And here we go, now click on Save Menu and now let's go to the website and see it in action. Okay. Now let's click on privacy policy, and here we go. We just react to the privacy policy page and here we have the term and conditions, click on term and conditions and now if you want to go to services, we can just click on services and go to the services. Okay. 32. Adding Animations: Everyone. Now we have to add animations to our website. You can add animations to each and every text or you can add animations to section like this section to this image. The best way is adding animation to sections because if you add too much animations, that will affect the website loading speed. Let's add animations to those sections. On header, I am not going to add any animations. I will keep the default header and for this section, I just click on the container and go to Advance. In Advance, we have the motion effects on motion effects, we have entrance animation. So we can add fade in, fade in left, fade in right, and we have a lot more omen stuff like this and also roll in. So those are not that professional. In this case, I will add fading left. Like this. Here we can add the animation duration, so I will make it fast like this. Then we can delay the animation. Here, if you add 1,000, this animation will happen after 1 second, but I am not going to use it. So here we have to add the animation to this image. Here, let's go to motion effects entrance animation will be pad in right like this, then speed will be passed like this. Then publish this and let's see it in action. So now I click on preview changes and let's see, now it will be animate like that. Then we have this section, click on the whole section and on Advance, go to motion effects and here add fading up like this. Now let's go to this section and do the same. Here on motion effects, add fading left like this and here add motion effxFad like this. Then here we have those two sections. Actually, let's add animation to this whole section. So click here and on advance on motion Effex let's add it fading up like this. Then we have this section and in this section, it not looking good if we add animation this background. So let's add only for this content. So here we can add these animations to this three view section, select it and let's go to motion effect and in here, make it fading up like this, or maybe let's add it like fading, right? No, not. Make it like fade in. And here in current design, we can't just add one animation to those two items. So to fix it, I will have to create a new container like this and remove the stuff of this container and just add those two text inside this container like this. And then I can select the whole container, and on motion ewx then I can add it like fain up like this. Okay, now we have this section the sections and on advance, go to motion effects and add fading left. The animation duration will be fast and let's add to this form like this. Pretty good and we have to make it fast and we have to make fasting, this one to make it fast and fast here like this and here I think it's fast. Let's see. It's normal, make it fast. What about this section? Motion effect, not normal, make it fast and make it fast. So always try to keep the consistency of the website. In that way you will have unique flow throughout the website like this. Okay. Now, let's see this in action. So here we go. I just click here and let's see, Okay, the animation work, and when I scroll, it will be animated like this. For the foot, I am not going to add any animations. So just add Enranc animation to these sections, and these animations will work on both mobile and tablet versions too. 33. Setting Up Rank Math for On-Page SEO Optimization: Hello everyone. Now it's time to do the on page SCO. We can use Rank MAT plug in to make our website SCO optimized. So let's go to Plug INS and on Plugins, click on at Plugin. Our focus is to if someone search our website or search our company name on Google, our website should be show on the first result of Google or any other search engines. So on Plug Is, I will click on search Plugins, and I will here search Rank MAT presenter. Okay. Here we have Rank So, now I just click on Install Now, then click on Activate. Okay. Now we go to this setup page and here we have to connect the rank Max profile with Google. I just click on Connect account. And here we have place to login or if you don't have Rank Math account, you can click on Register now and register or create a free Rank Math account. So here I will use Google. If you have Facebook code, WordPress, you can use them or you can use just email address to register. In my case, I already have Rank Math account, so I click on this login button, and here I will choose the Gmail option. Okay. Now here, I will select my Gmail and here I will click on activate now. Now we go to this setup wizard and here I will choose this easy option because we are not pro at SOT easy option will help us to set up this plugin easily without no deep knowledge about SEO. Okay, now I click on Start Wizard, and here I have to select the website type. In my case, this will be personal portfolio. And here our website name is appear, and I will skip this website, alternate name, and the person organization name will be Hannah Clark if you select this as small business, you will have to add more stuff in my case. In our case, it should be personal portfolio. Okay, here we have to add logo for Google, the log size should be one to well by one to weld. Currently this is the logo, but it's not e squared. So what we can do is create a squared logo. To do that, I will go to our FIGMaFle Okay. Now here, I will just create a frame, just click here and click like this and now I have to make it as well by one well. Then I will just copy this text and come here and paste it like this. Now I will increase the size like pressing Command or Control and using mouse wheel like this, then I will decrease this font size like this. Okay. Now what we can do is surely we can make this aligned center like this and make it center and if I want, I can change this white color to this dark color. Let's do that quick here and on fill color, just select the primary color and this text color, let's select it color as secondary color. This is much better. Now I will rename this as NC and now on Explore, select the type pass JPG and click on Explore. I downloaded. Now let's go here. Click on add upload file and click here, then just download or just upload the downloaded file. Okay. And here, let's add ALT tag and click on use this file, and now our logo for Google will look like this, and now we have to add the default social sharing image. So its size should be 1206 hundred 30. So let's create another frame. Let's go here and click on this frame and click on here. Then here, let's find out the image size 1,200 630. Okay, for the web, 1206 30. Okay. The default social here in image means if someone share our website on social media like Facebook, it will show a preview of our website. So default preview will be not looking good. So in this rank math, we can add a preview that has unique view and custom view, and it will be much professional. So to this section, I will just select this hero section and press Command C or Control C to copy it and paste it like this then I will just make it center and now I will change this as social preview. Now I will click on Export and export it as JBG and click on Export social Preview button to download it and here we can reduce this file size. To do that, I will go to tiny png.com and just dragon rope it like this. Okay. Click on download to download and here we go and click on add Upload File and just upload the file like this. Then here we can add ALT D and click on use this file to upload the file. Now, when someone share this website link on social media, the preview will look like this. Now I click on Save and continue and here, again, I have to connect Google services. It's for Google Search Console and other Google services like Google Analytics. Let's do it right now. When we do it, select the GML account that you plan to use for Google Search Console. Click on this connect Google services button. Here, I will select the Gmail address and click on Continue. And here, click on Continue. Now here we can connect the Google Search Console and Google Analytic Hello, everyone. While I create this lesson, power outage happen after I completely install and set up the rank math. However, let's try it again, and let's go to setups and I will show you step by step what I did. So let me go to the place that we stopped. We complete this part. Then we completed this part. Okay, here already connected the search console and Google Analytics, but let's do it again. For now, I will click on this reconnect button and here select the email to give access. I think you already complete this part. Okay, now you will on this page. So here, currently, this is not clickable, but let's wait a few minutes until it makes clickable. Okay, here, can see your website and other websites that assign with this GML account. So here I just select my website, which is and custom website design. And here we have to enable this index status tab, so it's currently enable. However, still, I can't click it if this button is not enable, which means this circle in this side, just click on it and enable it after it clickable. So let's move on to the Analytics page on Analytics page, here, select my analytics. And here, I already created the property. Actually, I record this video two ice and both of that time, this power outage happened, and this is the third time. So here, just click on create new GA four property. And here you can see this pop up window, and it say, Are you sure you want to create a new GA four property? Just click on Okay and it will create a GA four or Google Analytics property. So here, here, it created a new property, and here, select the data stream as website. And here we have to install this Analytics code with our website to do that, you can simply click on this check box and make it install edit code. And this Analytics is Google Analytics I used to track our website visitors and website traffic details. So if you want to exclude login user, which means if you are login to this website and try to access the pages, you will be seen as a visitor. But if you tick this, you will not see you are as a visitor. If you don't want it, just tick this, but for now, I will not take it, and here, this is not still enable Accens is for blog in websites. So while this search console and analytics configure, let's try to visit Google Search Console and see it property. So you can click this Learn More button learn more about how this Google Search Console work and how to configure it. In my guess, I will just highlight this text and rightly, then click on search Google for. And here I will add Google Search Console Login. And here is the login page, click on it. And here we have to select Gmail address that we configure with our website. You click on it and here we have this website, URL, just click on it, and then let's go to overview on Ovie, we don't have any results, so wait one week to week or sometimes that traffic will come to your website and you will see result on Google Search Console and go to sitemap on sitemaps, if you see this submitted sitemap, you to go, but if you don't see it, the Rang Map plugin will create a sitemap for your website. We can just add that sitemap and let's do it after we complete the setup. And now let's go to Google Analytics and see it works. So I will just click on search for this, and here I will add GA, Google Analytics Go Google Analytics login. Let's add Gour Login and click on this result. Here, again, I have to select the user. Okay. Here is the Google Analytics page that I set up, in my case is ready set up, but in your case, you will not see this type of analytics. If you don't see this, just wait 30 minutes and you will see this text. Let's see the analytics page that I created on my latest attempt. You will see this type sign. So here you will not see any active users, so you can just verify the Google Analytics code work on your website by going to IncopNto Window and visit your website. Then let's check the activity. So here, if you still don't see the activity, just click this button and just take this antique it, just do stuff like this and then go to home. On home, if you still don't see it, just wait and reassure website like this. If you use case plugging in my case, I use this light speed cache. So go to cache and click on Perch A and then try it again like this and see if it work. Then let's go to reports on reports. We can create our pot snapshot. So using this section, we can see the details about the user behavior. So here we have three options. In our case, we should select this first one, user behavior one, and you can click on Preview template and see the look of it. So here it will look like this. So just click on, choose this template. And when you set up your Google Analytics for correctly, you will see the result there. So in my case, let's go to the first one that I already installed, and here is the details. So let's go to three report, you can see this type of details. After we successfully configure this, we can click on Save and continue on email report, I will untick it because I don't need email report, and if it is still not clickable and it's disabled, just wait a few minutes or click on this Save and continue and we can do it later. Then I will click on return to dashboard. And here, if you don't see the site map like this, just refresh it for a few times and if you still don't see it, you can go to GRA setting on general setting, click on Analytics, and here you can take this enable this index status tab like this, and then you can click on this sitemap settings, and here is the UR website, sitemap URL. So just right click and click on Copy Link address and go here. Then just add it like this. And here is our website URL, and here is the sitemap URL, just click on submit after you submit it, you can see the sub submitted sitemap here, and submitting this sitemap will help you to index your website quickly on Google. Okay. Now let's go through the features of Rang Math SO. Let's go to dashboard on dashboard, we don't have anything to do, and the content AI is premium feature. In this case, we use free version of rank Math, and the analytics page is no needed because we can check the analytics on Google Analytics and the analytics page is also supported for paid version. And here, let's click on general setting. So on this general setting, just keep the default values, don't change the values. Then let's go to title and meta on here. Always make this Robots meta index. So if you click on this no Index, your website will not index on Google, so don't tick this one. Always tick index. Then on separator character, you can change it if you like. I will keep the default and here you can take if you want to capitalize the headline that show on Google. Then on local SEO, we already upload those details while set up the Frank Math plugin. And here we can add Facebook page URL, and here we can add additional profile live Link TIN or Instagram profile. So if you have LinkedIn profile, you can just add your in.com profile, and if you also have let's see, Twitter account, just say.com, like this slash A Twitter. Like this, you can add additional profiles. When you add more than one, you can just add them in new line like this. Okay. Then homepage on homepage, we have to click on this Edit page home to Edit O homepage, Google ranking preview to do that, I will right click here click on Open Link in New Tab. Okay, now I am on the homepage, and this is the Wordpress editor. And here what we can do is click on this Options bar and here, select this rank map. Okay, now we have to add the focus keyword. As I told you before, I already did. That is why the focus keyword is already there, so I will remove it and I will just add the focus keyword like this. And then here is the preview on Google and here is the review on social media and here is the Facebook preview, here is the Twitter preview. Did you remember that we added this thumbnail image for social media and here click on General and here this will be the preview of Google and we can change this preview by editing the title. Currently, our title is Hannah Clark ins like Clark, I just change it and we can add this title and make sure your title only have 60 characters because on Google, it only show first 60 characters. After on description, we can add this description, and for description or the search result description, always add the main keyword. In this case, the main keyword is Hanna Clark. Hell, I am Anna Clark. You ready to turn your son so to this description, only add 160 characters because if you add more than 60 characters, it will not show on the Google. So here, it will look like this, and I will close it. And on set ins, the focus keyword is this, and here we have issues, and after you complete it, you can just click on save and it will save on your page. After we save it, we can go to here, here, we have author, just keep it default because we don't have authors here, maybe disable it will Good because this website don't have authors and just here, keep the detest default, and if you want to see your post title differently, you can add that text here, but keeping them is default is the easy way and pages, if you want to change the review of your page on Google result, you can change those details, but I will keep it as default. And if you click here, you can see the conditions or shortcde that you can add, but let's not change any of that. And on categories, we don't have categories and we don't have tags, just keep them as default. Click on Save changes if you make any changes. Then the sitemap setting, we are already send the site map, and then the important item is this SCO Analyzer. So check the SCO scoe of your website and you can click on this restart SO analyzer or click on this SO analyzer to analyze this data. And if you see lower SOSCOe, you can go here and on priority, if you didn't enable the automatic updates, just click on enable automatic updates, and here we have U basic U description and H one tag H two tag. So if you don't see it like this, as an example, here you have too many H two headlines, what you can do is you can go to the homepage imagine if you have two H one tags or if you don't have any H one tag, have too much of H two tags to fix it, you can go to homepage. I will just click on Edit with Eleanor on this home page page. Okay. Now here, let's see the headline issues. In my case, this HTML tag is H one, which means we have a H one tag for the website. So the web page only have one H one tag or one headline one tag. And here, this is on H three, and here, this is on free. You can change those stuff. So if you remember, when we designed this website, I told you to always assign the HTML tag because this is a SEO best practice. And here, if we check this one, it is H two and this one is H three, and this is a paragraph. In gas, if you have a lot of H two tags, just only add two tags for the section headlines and make others as paragraph four H three, H four, H five or H six tag. Hope you understand it and after you make those changes, click on publish, then you can click on this fresart analyzer and always try to keep this at least 80 or 80 plus. Here you can check burnings and here it say I don't have side tag lines, so we can just click here and click on open New tab, and here we have two issues. Here I say focus keywords. There are two pages with no focus keywords yet, just write click and open it in window and on customizer, we can go to side identity, and here we can add tagline. I already added the tagline can add tagline here. So then about this message, there are two pages without focus, without no focus keyword. So if we check those two pages, we have privacy policy and term and condition. So we don't need to add focus keyword to these two pages because we don't need to rank them on Google, so we can ignore this issue. And here we have host title missing focus keywords. Just click on it and it's on homepage, and also we know this message too because we change the homepage title and description via Rank Man, and we don't need to change this title from here. Okay. After I make all changes, I will click on Restart SO Analyzer and then see the SO SCO. Still, I show this same result, but this SCO is pretty good to rank our website on search engine. So this is how we can use Rank Math to do on page SCO on our website. 34. Setting Up LiteSpeed Cache Plugin for Faster Website Speed: Hello, everyone. Now let's increase the website page speed in ESCO. To do that, first, let's go to Google page speed inside. I just go to Google and search Google PageSpeed, and here we got PageSpeed Insights. Click on it, and here we can add our website URL, page the website URL and click on Analyze. Okay, on mobile, its performance is 74, and let's see the desktop, desktop is 92, and this is a pretty good performance. However, let's improve this better. To do that let's go to WordPress dashboard and let's go to plug in and add plugin. And we are going to use Light Speed cache plugin. On the search plugins I will search Light Speed cache. Here we got the Light Speed cache, click on Install Now, then click on Activate. The plugin successful activated and we can see here Lightspeed, cache plugin, icon, and on here, we have Light Speed cache. I will just go to dashboard on the dashboard, we have this type of design. First, I will click on this enable quicdt Cloud service, click on and I will to this page and here I will have to create an account. So I will just click on Google Option and register with Google. First, I have to click on this button to make agreement, then I click on the Gmail account to register and here, I will click on this finish ink setup and go back to Wordpress then I can see this type of window now, and here I will click on page speed disco to fps and let's see result. It will take some time. Now let's say before 91 after 91, I will click this free pash button to check the page load time this is actually really good page speed is co and here it's a page load time here, load D within 0.58 seconds then let's go one by one and set up the stab correctly. First, I will go to preset. On preset, we can set up or apply default preset, just clicking this apply preset but I am not going to do that. I will skip this tab and let's go to general on general, I will go to general set in and here currently the guest mode is off, I will make it on and I will keep the guest optimization off and for the server IP, I will click on this check my public IP and here is the IP. I will just copy it, then I will paste it here like this. Then I will turn the notification off. On tuning, I will keep the default details, and now click on Save changes. Okay, now we have this cache tab. Let's go to Cache tab. Okay, now we have to set up those tab. So here enable the cache and disable the cache logged in users or make it off and keep other items. Then here make Cash mobile on, and that's it. Click on Savchange and when you make changes, always try to check your website on incognito window because those setting can break your website. So always try to check your website on incognito Window. And on DTL, I will keep the depositing and on perch keep the depositing exclude if you have a URL or specific page that you don't want to use caching, you can add that URL here, and for now, I will skip it, and the rest of tab will be an EIS, keep the default object, keep the default data and browser. Click on browser cache on and on Advance just make a default and then click on Save changes. Okay. Now again, click here perch, then check your website on incognito Window. Write this and see if it breaks on it works perfectly. And then we have CDN. On CDN, we can configure quick Cloud or Cloud fare, but in this case, I am not going to do it, then we have image optimization. Image optimization, click this send optimization request and do this until you see Ti box here. Currently, it's 7%, and if I try it again, it say you have image waiting to be pulled, so try to do it in next day, do it until you completely optimize your images. And on image optimization setting, click on this Auto request Cron. When you do this, the Cron function will be automatically optimize your images, so you don't need to click this again and again. Here next gen image format, make it web P, and this preserve EXIV XMP data of optimize original images, make it on not backup and then go down and for this item, just make it on and click on Save Changes. Then we have page optimize Okay, as I told you before, when you work on this plugin, always, click on the perche Earl after you make any changes, especially on the page optimization. Then check the website on Incognito window, and if there has any issues, you can fix them right away by undo the changes that you make on the light speed cache. Okay, here we have the CSS minify and CSS combined will be on this CSS in line, make it on load CSS and make this then on and the font display optimization will be default. Then click on Save changes and click on perch A. Then go to Incoto Window and repress the page, the website and check with breakof No it's working for weak here we have a issue. The stars are not showing, let's fix it in the next lesson. Now let's go to Js setting on Js setting, Js minify will be on Js combine and keep other stuff as default, then click on save changes and purge all, then click here, then check it on here, see, fit, working fine no working fine, and then go to SDM team table minify, here, remove or prismoG and save changes, then click urge all now on media setting here, a responsive placeholder and you can change the responsive holder color. I will keep the default color. Make this lazy load I frame on. Currently, we don't have any I frame on our website. However, make it and add in sizes, make it on here Wordpress image quality, make it 83, and if you add this as 50 or something less than 83 82, the image quality will be radio significantly, don't do that. Okay, then we have this Ike default and here exclude. If there is a media or if there is some image that you want to exclude from lazy load, you can just add that image. Lazy load images and content will load when visitor scroll the website to that section. As an example here, if I scroll down, this image will not load until I see this section like this. Then we have this localization and Gravatacas on Gravata case. That's it, then e tuning, just keep the default setting. Then CSS also keep the depot setting then we have database database database, we can clear forced revisions and expires and other junk files, junk record that created on database. You can just click on this cleaner if you don't need this autodraft and other stuff, or you can just click one by one to remove them. On DB optimization, just keep the deposit in. Then here we have crawler, but we don't need to do anything in there and the toolbox also on the toolbox, there is nothing to do for us, and this is everything that we can do on the light speed cache plugin. Now let's repress this page speed disco and page load time. Let's repress this page speed disco and see what will happen. So we can try this on page speed inside, and here page speed ICO is 90, but we didn't make any improvement. I think the reason is this plugin is already installed in the website. That may be the as, but we increase the page loading time. Here, it's still 74 and here is 96, and this is a pretty good performance. And here is how to improve your website is speed and I will see you in the next lesson. 35. Fixing the Emoji Display Issue on Your Website: Here we have this issue. When we log out from our website, the star icons are not showing, so let's fix it. To fix it, I will go to plugins and click on adn and search Code ISNIP and I will install this WP code plugin. Okay, it's just installed, and then I will go to Install, plugin and here activate the WP code, light plugin. And here now I can add code, so you don't need to code it. I will provide the code, so just click on code this here and click on Add New. Then from here, click on at Custom Snip and select PHP Snip and here I will give a code just check on the resources section and just put this code like this and then click on this active and click on Save Snip. Before you click on it, just don't add any other stuff only add this code I prod you. If you add other stuff, your website will be break. Then click on Save SNIP Okay. Now if I go to code this nip, here, I can see this active is nipped let's edit this and add some title to this is nip it will be clear when someone try to check our website, I will just add this text and click on Update to update it. Now what I do is, I go to element and tools. And if your website is correctly show these icons, you don't need to go through this lesson. And here I will just click on clear file and data. Okay. Then also click on this sync Library button and then over here and on Light Speed, click on purge A. Then let's open this website in incognito window and see if it works on. Now it's work perfectly, and now we have completely designed website. 36. Class Project: Hello, everyone. Congratulations. You successfully designed this portfolio website for business coach, and now it's time for your class project. In your class project, open this universal portfolio website and select portfolio female or portfolio website design on FICMA and change the text content according to your portfolio type. Create portfolio for yourself or for a persona or fictional character that you like to design portfolio website, so it can be a coach, businessman, studio or anyone you like. So just change those content and create your own version. So you can change this text color according to you need. So in here, if you don't like this primary color, just click like this and click on this, edit this style, and here you can just change that color. When you change that color, let's make it this red color. It will affect the whole design like this. So just play around with and create your own version of website and share it on the class project in that way. We can check it and give you our feedback. So in this class, I hope you learn valuable stuff, and I will see you in the next class.