Custom Website Design : Figma to WordPress with Elementor Pro

1. Welcome to Custom Website Design : Figma to WordPress with Elementor Pro class: Hello, everyone. Want to learn how to transform ItaninFigma design into fully functional FixLPerfect WordPress websites. If you have ever dreamed of mastering the entire web design process from initiate concept to live site, you are in the right place. This class is called custom website design, Figma WordPress with Elementor pro. Is the ultimate guide to creating professional custom website that truly strand out. We are not going to just talk about stuff. We are diving deep into practical hand on learning. You will start by mastering the essential of UI UX design, understanding what make website user friendly and visually captivating. Then we will use Figma to design Eine interfaces from scratch. I will guide you through everything from basic shapes and auto laps to advanced techniques like component libraries and design system. Then we will take those designs and turn them into real websites using Worress and element approach. You will learn to build responsive layouts, customize every detail, and even optimize your site for performance and SEO. If I tell a bit about myself, I am Gian Akalanga and I am the founder of UX Alchemy Web Design Istudio. So my passion is to share my knowledge and experience with others. That's why I create this class. So in this class, we will cover everything from gather design inspiration apply user centered design concept design, user friendly website design, using Figma. Then we will cover setting up your hosting and domain to installing WordPress and element of Pro, all the way to launch in your live site. You will learn to create It in hero sections, design, engage in pages. Even set of advanced features like pop ups and analytics. Whether you are a complete beginner or a seasoned designer looking to expand your skills, this class is designed to take you 0-0. You will gain the confidence and experience to create professional websites that impress clients and elevate your profile. By the end of this, you will be able to craft stunning UI design in Figma. Build powerful custom WordPress website with elemento pro, master responsive design and optimization, implement SEO best practices and analytics and most importantly, turn your design vision into reality. If you want to learn how to make use of focused custom websites, this class is for you. I will see you inside the class. 2. Why does generic website templates are not working: First let's talk about why using the same old website template is a bad idea. You are probably seen a bunch of website that look really similar. They are like cookie cutter houses, all the same shape, just different colors. Those generic website are a big problem for businesses. Imagine a crowded market where everyone says the same thing in the same package. How do you stand out? That's what businesses face with those generic website. Those websites don't tell a company's history or make them special. They might look pretty, but they don't really work well for people using the site. Plus, they don't help businesses to get new customers. A good website is a powerful tool to attract people. Get them to buy stuff. It's more than just a fancy online brochure. It's the face of the company. We need to focus on the people who use the website. They are looking for answers and solutions, we should design website that help them find what they need fast. Custom websites are like tailored suits. They fit perfectly. We can make them look good, work perfectly, and help businesses to make more money. Remember, every business is different. Their websites should be to using the same old website template. Won't cut it anymore. We need to create websites that are special and really work for people. That's what we will be learning more about the next lesson. 3. What is UI/UX and how can we apply it website design: Let's learn about something really important in custom web design. UI and UX. So what is UI? UI stand for user interface. It's like the face of U website. It's everything a user sees and interact with. This includes buttons, text, images, colors, and how they are arranged. A good UI is easy to understand used. So what is UX? UX stands for user experience. It's about how a user feels when they use your website. It's about the whole journey from finding your website to completing a task. A good UX make users hfi and satisfied. UI and UX are like two sides of the same coin. You can have a beautiful website, but if it's hard to use, people won't like it. It's good UI and bad UX and you can have a website that is easy to use, but if it look ugly, people won't want to use it. It's like good UX with bad UI. How do we use UI and UX when we design websites? Creating a successful website starts with a deep understanding of its users. We must identify who we are designed for what their specific needs and goals are. By simplifying the design and ensuring it's easy to navigate, we can create a positive user experience. Regular testing with real users helps us identify areas of improvement and refine our design accordingly. Ultimately our focus should always be on fulfilling the user's needs and desires while also creating a visually applying website. UI and UX are very important for creating successful websites. By understanding and applying those concept, you can design website that people love to use. 4. What is Figma design tool: Before we learn about user centric designs and advanced UX principles, we should start with the basics. Let's dive into website UI design while learning UX. First, we need to get comfortable with the design tool, so we will use Figma. FIGMA is a fantastic interface design tool that will help us to design UI of website that we like to design. We will begin with the basics of Figma, where we will learn how to navigate the interface and create simple designs. As we progress, we will explore the more advanced features like creating interactive prototypes, collaborating with team members, using components to keep our design consistent. By the end, you will have a solid understanding of how to use Figma to create is done in website design from start to finish. 5. Pros and cons of Figma and alternatives : FIGMA is a widely used interface design tool and it comes with a range of pros and cons that are worth considering. One of the biggest advantages of FIGMA is its collaborative nature. Because it's cloud based, multiple team members can work on the same project at the same time. That's make it real time, collaboration is smooth and efficient. FIGMA also has intuitive interface that's easy for beginners to pick up yet powerful enough for advanced users. Its design components and reusable styles help keep projects organized and consistent saving time in the long run. Additionally, FICMA is accessible from any device with an Internet connection. So you can work on your design wherever you are however, FIMA isn't without its downsides. Since it relies on a consistent Internet connection, it can be problematic if you are working in an area with poor connectivity. While FICMA offers a free plan, some of its more advanced features are locked behind a paid subscription, which might be a limitation for similar teams or individual designer additionally, while Figma cloud based nature is a strength, it can also be a drawback if you prefer to work or fly or need more control over where your files are stored. However, Adobe XD is an alternative to FIGMA offering its own set of strengths and weaknesses. For the purpose of those lessons, we will be using FGMA to guide our learning journey. By understanding both pros and cons, you can make an informed decision about the tool that best fits your needs. Now let's move forward and start exploring what FICMA can do for us. 6. 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 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? In here, I will select design then click Continue. Then it says, do any of those describe your work. In here, I will select free answer 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 WIC MA, just click on No and click on Continue. Then I will select this starter package. In future lessons, I will explain the benefits of paid 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 Eskepo 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 7. What is Figma UI3: Hello, everyone. Figma introduced their new UI tree. Let's be familiar with Figma UI two and Figma UI tree. So as the first step, let's create a new design to do that, I click on this blue button and click on Design file. Okay. Here is the preview of UI two editor. If you see this editor, you may not have access to the UI three because UI three only granted for people who are in their wait list. If you click on this help and resources button, you can see this link, learn about UI three plus AIXs and in here, you can see more details. However, if you granted for UI three, the UI will look like this. First I go to the Figma and let's create a new file. I just click on this new design here. I will look like this and in next lesson, we will go through elements on Figma editor with the UI two. If you already have this preview and you want to switch to the old UI two preview, you can click on this help and resources and click on this, go back to previous UI. And you can click here and click on use New UI to switch to the UI three. Next few lessons, you will have to complete with the Figma UI two and after that, I will show you how to get UI three even you are not selected. So if you are not familiar with FIGMA and if you have UI Preview, you will have to click here and click on go back to previous UI two, complete next few lessons. 8. Figma UI2 walkthrough: Previous lesson, we create our Figma account and now I am on the Figma dashboard to come to Figma dashboard, you can tie figma.com and log into the account. Here is the first project that we created in our last lesson. Let's be familiar with Figma design tool and let's find out what type of items or what type of features that we can use on Figma. To do that, I go to our first project, double click on it. Okay, now I am on our Figma project. And in this area, we called it canvas. Here is the area that we use to design our website and in this top black bar, we can find out items or tools that we can use. In here, we have frames. Frames are the layers that used to design our website. As the first step, just create a frame, click on the frame and click on our canvas and we will see this type of frame and in here, we can rename our frame to do that, click on it or double click on the frame name and rename like my first frame. Then in our left side side bar, we can see a lot of our layers. Currently we have only a frame and in our right side side bar, we have the properties of this frame. As an example, if we want to change the size of this frame, we have width and height, so let's change width as 1,400 and press Enter. Then let's change height as 700. Okay. Now I press command and mouse wheel to zoom in and zoom out the frame. So here is first frame. A, we can create as many as frame on this canvas. I will press Cramand and scroll wheel up to minimize our canvas. Then I also click on this frame. After I click on the frame, I can see on our right side side bar frame option. So those are pre defined frames. As an example, in this case, we are going to create a website design for Desktop. Let's click on this Desktop and here we have free built sizes for sorry, prebuilt frame sizes for desktop. I click on this desktop. And here we have the desktop size frame, the width will be 1,440 and height we can adjust according to the website height. Let's rename this as our my second frame and press Enter. Now, I also click on the frame and let's see we are going to create mobile website version to do that I click on phone and in here, we have phone sizes. I will select iPhone 40 and 50 pro and here is the iPhone frame size. Let's press Command or Control on Windows and scroll up to Zumi little bit like this. Here is the way to create frames. Also when we click on the frame on our right side bar, we will have the options that we can use on our frame. As an example, if we want to change the field color, we can click on this field color and change it as we like, Okay, I will press Control set to command set to undo the change. Okay. Now you know Earl about and then we have shapes tool. In this shape tool, we have different type of shape, click on the shape tool or click on this little down icon and click on Red wrangle. Then if we come to this frame and click on it, we will create this type of rectangle shape. In our Layout option or layers funnel, we can see the frame and inside the frame, we have the rectangle shape. For now, I will remove this first frame and mobile frame and it will be easier to understand, now I click on this rectangle and in here, we can change the field color. Let's change it like this. Let's make it green color. Okay. Now I can change the size as I want. Let's make it 150 by 150. Just click on the W and press 150. Then click on the cap to go to height values. Let's make it 160. Okay. Now if we go to shapes, we also can create lines like this. If we want to create let's create a line like this. If we want to create exactly horizontal line, just rest on shift and its rotation or angle will be zero. And in here, we can change the angle like this too. Okay. Now in Etroke we can change the E stroke color and increase the stroke. This is a design tool and we can do any type of design with this tool and create awesome website design. Also, we have arrows ellipse, we can create those ellipse like this. Let's change fill color to let's change this green color. Okay and highlight l of them, and then we can change the alignment. In this case, if we click on Align vertical center, l will be aligned centers. Also, if we click on this little arrow icon and click on distribute horizontal is pacing for now, it didn't happen anything, but let's make this circle here. Then let's press on the distribute horizontal is pacing. Come on, it not work. For now, let's just remove this line and press Alt and right click and drag like this to duplicate this rang rectangle, then click on MTol, click on M tool and highlight this. Then click on distribute horizontal I spacing and Earl will be equally aligned. Then we can create or we can images. To add images, we can click on this icon shape tools and click on this place image, then I will go to the set folder, then click on open and then we can click on our frame like this, then we can change the size of this frame. To change it without damaging the image, if we just change it, it will damage the size or it will not show correctly. To avoid it, we can press shift and adjust it like this. Okay now next we have Pen tool, pen and pencil tool. Using pen tool, we can create shapes like this and click on done. Then we have T or text, click on the text and click like this. Let's make the text as Hello, so hello world. Then I click on frame and click on the text. Then we have properties of this text. In here, we have Google fonts. Let's make the font at four pins. The font family will be four pins and size will be semibold and I will increase the font size too. Let's grease like 60 presenter. Here is the font and in field color, we can change the font color also there are a lot of properties to play with. Just play around it for now, let's add the effect to this text to do that I click on effect and let's click on drop shadow, and in here, let's make as 20 X as zero and Y as zero. Then let's increase the opacity to 80% and if we want, we can change the background color like this. There are a lot of properties to play with. This is the way to create text. Also we have plug in and component library Figma and in future lessons, we will learn all of them. Also when we select on the items, select on the elements, we will have this type of properties to create components and select machine layers and stuff like that. In future lessons, we will learn all about this for now, I will remove this pencil art and let's remove this one, and let's increase this image size to full like this. Also we have two rectangle. Select it and press shift and select the second rectangle. In that way, we can select both of those rectangle the press delete to remove them. Okay. Now in here, we can share this frame or share this whole project with our team members, click on this copy link and anyone can access this Figma project with that link. Then we will able to check the real by clicking this present button. Let's click on it, and here is our website. O here is our frame that will look on the real view. Also, there are a lot of features. As an example, if we select the frame or select the image in the right side, we have prototype section. This prototype section or prototype tab is for make interaction our website. As example, if we click on a button, our website or our web page will redirect to different page that interaction we can do with the prototype tab and on the left side, we will have Assert tab in Assert tab. We can get the prebuilt designs. We can create our own design or our own design elements and use them via the ASSISTab. Also we can create more pages. Current page is page one, let's make it like home and if we click on this plus icon, we can create a new page like this. Those are the basics and we have more tools to explore, more features to explore. Let's do them while we try to learn how to design UI for our website. 9. Learn Figma grid layout: Hello, everyone. Alignment is crucial in UX design because it creates a sense of order and balance on the page. When elements are properly aligned, they guide the users smoothly through the content, making it easier to read than understand. Good alignment help users focus on the important part of the design and it helps to reduce confusion that lead in a better overall user experience. It also makes the website look more professional and polished, which builds trust with the audience. Feel free to carefully analyze next few designs. All of those design has alignment correctly and alignment incorrectly designed. Just check the difference between those two versions. When we create custom designs, align objects are bit confusing and bit tricky. But in Figma, we have layout grid. So let's check out how we can use layout grid to align our design. I'm on Figma dashboard, then I click on my first project. We no longer need this my second frame or any frame. I just clear the canvas, then I click on frame. Let's create a desktop version frame. Click on the frame in here, click on desktop and then let's create frame of tablet version. Click on the frame, expand the tablet, and I will select the tablet size as iPad Pro 11 inch. Okay. Now we will have to create mobile version. Click on phone and let's select iPhone 14 and 15 pro. All right. Now here we have three pranes. Let's first add layout grid to this desktop version. When I click on the desktop version frame, in my right side, I can see the properties of this frame. In here, we have layout grid. So I just click on this plus icon. When I click on this plus icon, let's increase the design size like this. Okay. Okay. When I apply or when I add a layout grid to this frame, it will look like this. Now I click on the layout grid that we added to get the setting of layout grid. Currently, our grid type is grid, but we need column type, layout grid because we align our elements left to right. When we align it horizontally like this, we have to get the alignment correctly in the left and right side, alignment between the elements. In here, we have to add column count. I will add column count as toll. Now we have toll grid column, and I will keep the color as the same. Then type will be stretch and in here, we have to add margin between left and right. Margin means space between left side our element. As an example, if we said marginus 140, this grid will adjust by giving us margin or giving us a space from left to first element and right to last element. So I hope you understand it. So now when add objects, we can add them correctly by checking this column. Then we will have to add gutter. In desktop version, let's add gutter as 20. If we change this gutter to ten, the space will be thin. Actually, let's add it as 15, like this. Now when we add elements like this, let's add the rectangle and let's duplicate it by pressing command on Mac and like this, when we put those elements, we can just increase the frame size and check the alignment like this. We can align it perfectly like this. Also when I highlight or when I select object or element then press and over another element. We can check the I space in between those two elements. Currently 815 and let's add these two like this. Perfect. This is the benefit of using grid layout. And if we want to check the design without grid layout, we can click on the frame and click on this I icon and the grid will of. Okay. Now let's add grid to this tablet version. To do that, click on the tablet size frame and click on GritayoutPlus, I can then change it version to column. Then on tablet, I will use seven as the column count. Then margin will be 60. Then Gutter will be ten. Actually, let's add column count six is better. Then same as the desktop, we can use this grid to check alignment like this. This is the bene pie. Okay. Now let's go to phone on phone. Let's click on layout grid and click here, then change grid type to column, and in here, I will add grid counts sync, then Gutter will be ten then margin will be 20. Actually, let's add margin as 12 like this. Now we can add retrangle as this according to this grid. This is the benefit of having grid layout. In next video, we will talk about the Figma community. 10. What is Figma community: Hello, everyone. Did you know, Figma has an online community. The Figma online community is a powerful resources that can help you learn, grow, and connect with other designers. It is like a big online marketplace. In the Figma community, designers can share their ideas and resources. It's a place where you can find free and fake design files, plugins and even tutorials. In future lessons, we will specifically talk about Figma files. And in this lesson, let's dive deep in Figma community and find out what type of design materials that we can find. To do this, I go to Figma Community. I go to Google and search Figma Community and on first result, we have this Figma slash community website URL, then I click on it and now I am on Figma Community. There are a lot of stuff to explore on this Figma community. The Figma designers like you add resources to FIGMA community daily. So for now, let's search some web designs. So I will just search web design ideas presenter Here we have web design ideas. So in here, have file and template, plug ins, widgets and creators. For this result, we have file and templates and plugins. So let's sort out file and templates, and here we have idea, web design, wooden. So let's check it. And here we have ecommerce theme files. I will open that too, and here we have a UI it, so it's nice UI. So just click on it and let's see what we can find here. We have the description. As we have the design. Let's increase it and by clicking here, we can switch the page. Let's switch for design it, and here we have the design. Here is the Nike website design. I think it's a inspiration design, so it's a clean design. So by checking those items, we can design ideas and let's go to Idea web design. Here we have simple web design and it's just a image with text and let's go to the next one. Here we have ecommerce template or ecommerce theme. Let's check this web lpa. Here we have design for ecommerce website. Think you are creating a ecommerce brand or ecommerce website, you can just check those designs get design inspiration or get design part from this Figma file. To do that, we only have to click on Open in Figma and then this file will open in our Figma dashboard, and on pages, let's go to webvlpa here we have editable Figma design. So for now, let's only check those items and end of this Figma section, you will able to design this type of Figma design, Figma UI. Let's check the mobile alpha and here we have the mobile version. Don't worry if you think you don't know how to create those designs. In few lessons, you will be able to and you will learn how to create those type of designs. Now when we create designs or when we create our website, we must icons, we must use icons. If we search on Figma icons and click on PRSiconOPres Enter, we will able to get icon libraries like this. As example, we have weather icon set and let's search like business icon. Here we have business line icons. I will just click on and this is a design file, and here is the business icon set. So we can just check those icons, and if we like, let's check all vector icons. Okay, here is the icon library, and if you want to add this type of icons to your projects, you can open this in Figma and get those icons. But in future, I will show you how to do this. And also, I have a Figma community profile. Let me share it with Okay, here is my Figma community profile. Let's check this BNTsGamemp and this is a app UI model that I create for BNTsaGame. Let's try to open it and see you how powerful the Figma is. I click on opening Figma. Actually, this UIKit is really basic and when I create this UIk I didn't know much about Figma. So in the next lesson, we will use Figma community and other stuff we learned so far and create hero sections and get ourselves into the Figma UI design. 11. Design 1st hero section with Figma UI2: Let's try to create our first web design. So check the URL or community file on the description or on the resources section, you will see the URL. When you click connect, you will go to this Figma community profile. So we are going to design these two hero section. So this will help us to understand more about the Figma tool and the basic stuff while we creating those two ciders or those two hero section. We already learn about Figma community. Now, just click on Open in Figma button to open the editable view. Okay. Here we have hero sections, first, let's try to create this one. I will zoom out and let's put it like this and zoom in Okay, nice, first of all, we have to create this frame. If I click on this hero sample one, here is the frame, let's try to create it. I go to this frame icon and then we can select the device type. This is a desktop type hero section. I click on destop and select the size as desk all right, nice. Now I will rename this to 01. Okay. Now the height is 1024. Let's the height of this one. It's 700. Let's change this height to 700. Slate the frame and set the size to 700, then we have to add layout width because without layout width, we can't align our design correctly. So to do that, I click layout grid and click here, then change layout grid to columns, and column count will be two L and margin will be 140. The gutter is 20. Okay. Also, FICMA has a feature to save our Istis as an example, we want to save this column grid layout. We can click on this Estes icon and here we have plus icon. I just click on it and in here, we can add the name. I will add to call grid, then I click on creative style. Now if we want to add toll column grid layout to our next frame, we can just select the save this time. Let's click on this grid layout and let's create a new desk of size layout. Like this, it's a frame, desk of size frame then if I go to the layout git and click on this icon, I will have this grit layout style like this, I can add it easily. All right. Now I will remove it. As the next step, we have to add this background image to add it first, I will create a rectangle and let's make this rectangle same as our frame size like this. Now click on this rectangle or shape tool, and here we have Place Image option. I just click on it, and now let's go to our image. So it's on document. Here is the image. I just click on it and you can get this image resource file on the resource section and I click on Open. Now I click like this. Okay, the first part is completed. Now we have to overlay color to add overlay color, select this image and in here, we have fill, just click this plus icon and now we have a color layer. In here, I click on our color as dark and here we have the transparency. I will make transparency like 80. Okay, looks good, but we can make it like 70 70 is better. Now the image is added, and now we have to add this logo and Mus section to do that, first, let's create a text. Click on this text and click here. Then I will change this text as logo. Let's find out the property like font size fontan stuff like that of this logo to do that on Mac, I press command and click on this logo text when I click on Command. It directly help us to select the item that we want. In windows, it should be control. Okay. Now, in our left side, we have the details. The font is railway and font weight is semivol and font size is 35. So let's add those details. I click on our font and change this font to rail and the font width will be semibol and font size is 35. Nice. I will increase this design bit, so it will help us easily check the design like this. Now I move this text here. Then let's go to our original design and select the text by pressing command or on Windows, it should be controlled. So then I press Alt and check the size between the top bar and the left side. The sizes are not correct, but in our original design, let's make size as 14020. Okay, looks good. Now what we have to create is this menu to do that, again, click on this text or we can just duplicate this text by pressing all. Press all and click on mouse and drag it like this. Okay. Now we will have to find the text details. Let's click on this text and the text color is white and text font is open semibol 18 and the line height is 31. Let's add those information. Just click on our text and text is open 18 semibold and the line height 31 31. All good. Now, let's change this text home and the text is on upper guess to make this upper gas, I click here and change case to upper like this. All right. See you learn a lot about Figma tool by creating this design. Now I press and duplicate it like this and let's duplicate it for one, two, three, four, five, three more times. 12, three. All right. Now let's change those takes. Next takes this about us. Okay. The next one is how it works like this. Then next one is our coaches. Okay. Now the next one is contact. All good. Now, what we have to do is put this contact to the right side corner. Here is our grid layout, and now we have to find the place that this home menu icon should stay. According to this, it's on here and let's add it in here. To do that, I will just drag and put it like this and let's put all of this menu like this. Now, before we fix the alignments, I will click on this home and change it color to this red color. So let's find out the red color code. Just click on this home, and here we have red color code. I just try copy by pressing Command C, and let's come here, highlight this takes, B pressing Command A to highlight it and go to the field color and press Command V to the red color like this. Okay. Now it's time to fix the alignment. This text is in the middle of this bar. Let's set this home as middle of this bar like this. Now I will press shift and select five menu items like this. Then in here, we have alignment tools, click on align vertical center, and in here, we can click on distribute horizontal I phasing. All right. Now let's J spacing or padding in between the top and the menu item, it should be its two t. Again, highlight those highlight oseltEl of those texts by pressing at and now I press Alt and click on upper keyboard key like this. Okay. Now what I can do is make this as a group to make this as a group, I press on command G, and now it becomes a group. If we want, we can rename this group as man Items. And if we expand the group, we will have menu items like this, and then I will select this group and press Shift and click on the logo, and then I click on this align vertical center like this. And now we create our menu and logo. Now it's time to create this middle text. It's really simple, let's start step by step. First, we have to add this live coaching for high achievers. To add it, I press on this T and click here. Then I will add some text like this and click anywhere on the canvas because if we not add any text and click anywhere on the canvas, the text field will be disappeared. Okay, now I go our original design and click on Command C two. Then I click on this text and now I press Command, A, and command C two, copy this text and come here, press Command, A, and Command C two, copy that text like that. Then again, I will duplicate this because before we create the design, let's create text that will be easy. So for duplicate, I press on all and duplicate it like this, like this. Okay. Now we have three section. A, let's duplicate this again for the text for the button. So now we have this head item, so I just highlight it and pace that text sorry let's pace it without fonts without font testyle because we will try to add font textile in our own way like this. Okay. Nice. Now, let's add the fontistyle and fix the alignment. First, let's check out the fontic style of our first paragraph or subheading, click on the subbedding and we have text as opens ands semble. Now click here, opens sembol. I already there. And now let's check on this headline design. Select the headline I press command and click like this, then it's railway bolt, 60. Let's make this railway bold, 69 and the font case is case sensitive like this. Okay. Now it's time to create this font design, press command, and slat text, then check the text open sans regular 20, click here and open sans regular 20, then the case is, again, we have titles sens. All right. Before we create the button, let's fix the alignment and make this better to fix the alignment, let's check the alignment in between those two items, it's 15 and we have alignment touch 15. Let's put it like this, then press and over the above now we can set it like this. As we have issue because the line is space, not line is space, line height should be more than 31. The line height is auto. Let's make the line height as auto. Just click on the text and click on line height text field at Auto present. Okay. Now it's 15 and this like this is also 15 and Yep seems good. And now I press shift and select all three items and click on this horizontal align center and this text alignment set as center. Okay. Now it's perfectly centered, and now we have to set this text as align in the right and left side. Actually, it's already align, and then we have to put this on the center to do that. We can just adjust it like this with this red color alignment guide, we can put it on the middle like this. Okay. I think this is not in the Ah, this will be middle after we create this request complimentary consult button to create it, I just click on New rectangle and click like this. Then let's increase the rectangle size like this and put this text inside the rectangle. Okay, now, our text is behind and the rectangle is above. So to fix it before we fix it, let's change rectangle color. To change rectangle color, we can click on the rectangle and here we have the field color. Then we can click on this little icon and click on this original design color and get the color like this. All right. Now I will check our left side panel and here we have details of our design. In here, we have this rectangle. Let's rename it as button BG and now here is the text. Currently, the text is not showing to make it show, we can just click it and bring it about like this. Okay. Now we have to check the sizes in between the rectangle or the button background and text. So before we do that, let's find out the rectangle size. It's 418 and 60. Let's make this like 420 and 60. Okay. Now I will increase this design because it will be easily show if I increase the design like this, then I will press and adjust the design like this. And if we want, we can click on this align middle of this text and it will align middle. However, now it's perfectly aligned and now I will select the background and press shift and select this text and press Command G to group this. Then if I want, I can rename this as button Alright. Now what I can do is I can bring this button like this and let's check the space in between the button and this subddin it's t. Now highlight this button group and press and over this subbedin and click on down arrow to make the space between this button and subbedin 20. Okay. Now I highlight Earl of those section, the button and Earl of these items and click on this alignment center and click this align horizontal center. Okay, now it perfectly aligned, and now what I can do is press Command G to group it and now if I change this design like this change this group like this, I can find the perfectly middle spot and here we go. We have the design. Now, let's increase the design. It's pretty similar. Maybe if we increase bit more dark color of this image, it will look same as this design, but I like this way. Let's this hero section. And now in here, click on this icon to remove this grid layout and it will look like this. Then I will click on this hero section and click on this present button and we can see our design on this preview mode. Now we create our own design. So it's a beautiful slider, and I hope you follow the early step with me and if you have any doubt or any issues, just let me know, and now it's time to create our second design. This is a bit tricky, but we can do. 12. Design 2nd hero section with Figma UI2: Hello, everyone. Now it's time to create our second hero section. Let's start it. Now I am on my Figma dashboard, and here is our second hero section. As the first step, I will click on the frame, and in the right side, I can select the dextFrame size. I will select this dest of 1,440 with frame and here, I will put it like this and then I can rename this to hero two like this, then what I can do is add auto layout. Sorry, add grid layout. To do that, I click on this It stab and here is our layout to call grid layout. I just click on it. Nice. Now, let's see, let's see what we have to do. First, we have to create menu section. Actually, before we create the menu section, let's add the background image. So first, I have to get the size of this background. So it's width 1,440 exel and height is 700. So let's create a rectangle. Click on rectangle, click on the canvas, click on the frame, and let's bring it to this side like this. Okay, now I have to add the width 1,440 and height will be 700. Nice. Now what we have to do is add this background image. So I already created this background image. You can find it on the resources section, and after you download it, we have to click here and click on Place Image. And here we have the background image. I just click on it and click on Open. Then you will see the attach image with the pointer of my mouse. I just tap on this or click on rectangle like this, all right, looks nice. So now what we have to do is find out the color of this background and the opacity. To do that, I click on this image or double tap it, and in here, we have the image. So just select the image and in here, we can see fill white color with 90% of opacity or the visibility is transparency is 90%, click on the image and click this plus icon, and here we have the background. So let's change it to 90 and then click here and put it like this. Okay. Nice. Now we just create our Background easily. Then what we have to do is at this text, first, I will double tap this text and press Command C to copy it. And in your case, it may be Control C. If you are using Windows, then I click on this text and click on here. Then I press Command V or Control V on your case. Like this, then what I can do is find out the font type and font size. So the font is Georgia regular and 45. Don't worry if you don't know about the font or know a lot more stuff about the font. In future lessons, I will show you everything you need to know about fontin, UX and UI. Click here and it seems we already selected this font. Let's see again. Yeah, it's Georgia regular 45. And here Georgia regular 45. Okay. Then what we have to do is put it in this corner like this. Then press and you will see the lines. Let's make it like 20. Then we have to create this menu section. So it's Helvetica. Its font is Helvetica, and regular 16. So let's create it. It easy, click on the text and let's rename this text name to home. Then click on the text and select the font vertical here you see the size is regular and font size will be actually font width is regular and font size will be 16. Okay. Then what we have to do is put it just like this for now and let's duplicate it. Press old and click Mouse, then duplicate it. This o, how many times we want to duplicate it? One, two, three, four, five. It's five times, so one, two, three, four, five, nice. Now I will change the font. I can double tap here and press Control C to copy and Control V to paste. And let's do it again. Click like this. Okay. Now again, we have location, paste it like this. Actually, when we paste it, it already get the design too, so I will type. Here we have blob, then con tag ni. Okay. Now what we can do is check the in between size. To check it, just click here and press all like this. The Ibtwin size is 25. So let's adjust this. First, I will select all of them like this. Then click here and click on tied up and click like this. Okay. The I also click here and in here, we can set the tied up site as 25 like this. Pace in between is 25. Now we have to make them uppercase. As I did it before, click here and in case we can click the upper case. Now what we have to do is again, we have to select all of them and click here and click Tied then make it 25 like this. Okay. Now if we check this, the home is bold. So let's find it here. It's with this bold. Let's make this with this bold, click like this, then change regulator bold. Okay. Now what I can do is select all of this by click on the menu item or click on the text and text, click on the text while pressing Shift like this. Then I press Command G or Control G. Group it. Okay, then isolate both of the section and make it like this. Okay. Let's focus on create this contacts, but it's really simple. Let's do it. Click rectangle shape and create a rectangle like this. Okay. Then let's add this corner or reduce the corners like 30. Nice. Now I can just click here and duplicate the text by pressing like this, then I put it like this, but we have to make this above this rectangle to do that high kick on the contacta takes on our left side layer panel, then put it like this. Okay. Now, let's check what we can do. Here we have the size as 176 and height as 50. Also, the color is black. Let's make those changes. First, the height will be 50 and the color will be black. The text color is why. Then select both of those objects and make the text center like this. Let's see what we did looks good. Then we have to change the text. Actually, it's already as the contact cus, we already have contact cus text here. Actually, we don't need to contact us icons to contact us menu items. So on the original hero section, I will change this contact cus to about us. About Tsk. Make no, make it. Now, let's do the same here. Let's change this contact about us. Okay. Now it's look good. So now what we have to do is group this button to group page, click on the text and click on the background by pressing Shift. Then press Commando Control G, command G on Mac and Control G on Windows. Mmm mm. Nice. Now what we can do is select all of those takes by present shift and select in the groups like this, then click on. A line vertically centered. Then here, click on distribute horizontal is pressing Okay. Our menu is completed. And as I mentioned before, in future lessons, we will use more advanced features like autoayouts and components. With those auto layouts and components, we will be able to easily create this type of website. But for now, this exercise will help you gain a lot of knowledge about how FIGMA work and you will be able to get And on experience on Figma. Okay. Now we have to create these text. It's really simple. So let's start it. First, we have to create this welcome to my finance to do this. I just press T on the keyboard and let's add text like this. Okay, it's like this, then we have to find out the fonts that used to create this headline. So the font is Georgia five regular. Let's add those details Georgia regular. This should be 55. Okay. Now I will just copy this bras in command C and paste it like this, and it's on uppercase to make it lowercase, click here and in case we can selt this title case. Okay. Looks nice. Now I will align it with our layout. Then what we have to create this. We are here to help copy the text and it's on font tas hell, Vertica, regular 25. Let's create a text and paste it like this and it's font tas hell, Vertica, regular 25. Okay, so we just click here and put it like this for now, then we have to create this contact us and learn icon. So we already created the contact cast icon, so I can just duplicate it, click on all and duplicate it like this. Then I will change this height to 60 to do that, click on the rectangle and change the height as 60. Then make this center. Also I think we have to change the font size. The font size is 21 size is 20, make it a line center like this. Now I can again duplicate this and put it here like this. Then make them line center and this text will be learn more. Change the text to learn more. Now what we have to do is remove this field color to remove this field color, I just click on this minus icon, and now I add the Etro, click on Etro and the Stroke color is black, I will change this text color to the field color to black like this. We nicely created the learn more button, but we have to adjust more stuff first. Let's find out the space between the text and the button border it's 33 by 33. Let's here, we have 20 by 20. Let's make it to bit more like this 33. And we have to increase three more 0.1, two, three. Okay. Nice. Now what we have to do is click this and select it as inside. Nice. Now we have two buttons and the header section. Then I will group this two button by press by them and pressing Command G. Then I have to find out the space between those two sections. It's 20 by 30, let's click here and bring this up by pressing up key on the keyboard, then bring this up to 30. Okay. Now I can select all of this text and press Command G to group it. Okay. Now what I can do is select this one and select the background click on this align vertical center and align it vertically center. Then we have to add this image. To add it, just create a rectangle like this, then put it like this and set it like this, like this. Then let's click on here and click on Place Image and select the image. Then click here to place it. Okay. Now what I can do is double tap on this image and change the field to crop. And now I this image from here, put this image like this. Okay. Actually, I think we can increase this image size more like this, but they did this, put it like this and yes, it fits perfectly. So now what we have to do is create this black bar. It's easy to create just click rectangle and click like this, then put it like this and make the width the same as frame, then increase the size. Actually, let's find out the size. I 270, make it 270 like this, then change field color to black and click on the hero section and press Come in Mac and Control in Windows and radio like this. Now, looks good, and now what we have to do is actually we have to change this fill color to this color, copy that color change fill color. This nice. Now we have to add this text. The text is Georgia 45 regular, so just click on the text or just click on the T and press here, then press some takes, add some text, and it's Georgia. Regular 45, so this phase the text like this, for this and have let's enter and in the second line like this. Then click on the background, click on the text, click on line vertical center. Okay. Now we have to add those three sections. To add them, click here and check the font, it's hel vertical regular, 65 just duplicate this and take these two YE plans and change the font to regular six like this. Then we have to add this it's albatica regular 25. We can just duplicate this and add the tanks. Okay, already change to 25. Then click both of those items and click on Align horizontal center. Let's see the in between size or the margin between those two. 14. Let's make 50, then press both of those. Make it horizontal and click on Command G. Okay. Now duplicate this photo. Now we have to change the value here, ps command c1v, copy this, copy this and copy it like this. Now, make them align correctly. Okay. Now I will put the take here these text here. Let's click on distribute horizontal spacing after selecting all of these three takes and then sorry, click on align vertical center. So click here, click on Align Center. Then press Command G to group it here, click on align vertical center. Okay. Now we successfully create the second hero section. Let's check the second one, and here is the design that we just created. As I told before, this is a way to learn Figma effectively and next you have an exercise. Let me share it with you. Okay. Here is the third hero section. And you should create this section by using the knowledge that you just learned. This is a simple hero section, and by creating those two hero section, you just have the idea or you just have the knowledge to create this design. So let's start the work. Also, in future, we will use auto layout and components. So your web design journey will be real easy with auto layout and components. For now, just create this hero section. And learn more about Figma. While you create this type of hero section, while you create this exercise, you can play around with the Figma and find out more cool features. I will see you in the next lesson. 13. Design 3rd hero section with Figma UI2: Did you manage to create this design? So let's design it again. First, I have to create a frame. Click on frame, click here. Then I will set with a 14, 4,700 like this. Okay, we have the frame, so let's change frame name to. Then what we have to do is add in the grid layout or layout grid. Click here, and here is our grid layout, click on it. Now as the first step, we have to create this menu. So the menu size is 223. Its height is 223. So let's create a rectangle and let's make it as 14423 as the height. Okay. Now let's make it transparent to zero like this. Okay. Now we have to create this logo to do that, I just create another rectangle and make it align like this. Then we have to select the logo image. Click here, click Place Image and in here, we have the logo. Then click like this. Then what we have to do is change this field to crop. Okay. Then make it like this and increase it like this. Okay. Also maybe we can align it correctly here. Nice. Now we have to create this menu. It's really simple. Click on T and create the menu. The first wine will be home. Now what we have to do is find the font. Click it and the font is cabin bolt 18. Sila here change font to cabin, then bold 18. All right. Actually, we have to change this rectangle visibility to hundred again. Then let's change field color to white. Without that, we will unable to target that rectangle. Now what I have to do is add the underline. Before we add the underline, let's duplicate this like this one, two, three. Surely we need it for three time, and then we will add here about us. Let's type about then electrical services. Oh no, it should be electrical. Electrical services, then contact us. Okay. Now I will highlight only those three menu items and we have to make it upper case and font width will be regular. Highlight all three by pressing shift and change it to regular, then change the case to upper. Okay. Now in here, we have to change this case upper and now what we have to add this underline to add the underline, we can select we can click here and we can click this plus con. Before we add the underline, let's align this first, I will select all of those stuff and make it distribute horizontal spacing then make it align vertical center. Okay. Now we have to change it color. The color will be black and in here, the color will be dark blue. Let's change it. Color to dark blue. Okay. Now we have to add the underline. To add underline, I just check we have the text style, but I didn't find it. So let's add underline using ShafTol. So in here, we click online, and now I will click Shift and add underline like this. Then change underline color to this dark blue color. Okay, okay, looks good. Now what I have to do is make this group. Select both of those objects and press command G or Control G to make a group. Then we have to find out the space in between it's 50. So let's change this space into 50, 50 and 50 here. Okay, now select all of them and press Command G to make it a group, then select the logo and set the menu item group. Then click on this vertical aligned center. All right. Now we have to adjust the size in between the logo and new items. So here, I will make it like 50, 40 to 50, 50, like this. All right. And this underline should be bigger. Let's put it like six and change it to two. Then now we have to add this call us 24 hours to toll free. So let's create it. First, we have to create a circle to create a circle, click here and let ellipse, then create a ellipse like this. Let's find out the size of the ellipse. It's 86 by 806-80-6806. Then click here, change color to this light. Then I will duplicate this by pressing on raging it to left. Then let's find out the size this it's 62 by 62, make it 6262, then change it fill color to this dark, this color. Now, select both of those objects and make it vertical and horizontal align center. Okay. Then we have to add this phone icon. To add this phone icon, we can use fontosom icon. If we go to fontsom Pontosom is the Internet icon library and tool kit. So if we click on this website, pontosom is icons library. So here is pontosom icon Library, and we can search here to find icon search icon. And here are phone icons. However, we have a Figma plugin that designed by pontosm. So to add it, we have to access the plugin. So to access it, click on these resources, and here we can go to plugins and here we can search the plug in name. I search font sum. Okay, here is the pontosom icons, click on Run. Okay, now we got the pontosom icon widget or I can plug in. So here we have to search the icon name it's phone, and here is the phone icon. Click on it. Okay. Now we have to put it here then change it color to Y. Okay. Like this. All right, right. Now make it center. Actually, this is outside of our frame. So to fix it, we have to add it to the inside of the frame like this. Then I will remove this phone ALT frame. Now we have the icon select all of them and make all of them as center. Okay. Now what we have to do is at this text. Let's find out the texts cabin medium 16.5 let's create tanks and add the text. Let me add it by cook here and paste it like this. Actually, when we paste it directly, all properties of this text will be directly come to the text. But for now, let's add it like this because we know how to change the font on figma Let's find out the spacing is 16 and we have this part, it's cabin bolt 25. Let's first copy this text. I will just paste it on here. Click context, click here. Then I will add that takes a 1-110, one. I already assigned. Let's find out the color. I think already good. Now put it like this. Then what we have to do is align this leaf and let's make space in between to two the selet both of those objects and press command or control G to group it. Then we have to group these two. Select all of those three items and press command G, then highlight those two object, those two groups, and click like this, then I will put it this. Okay, the header part is completed and it looks similar. Now what we have to do is create this blue line. To create it, I click on this rectangle that we already created and click on stroke. The rock color will be this dark color. Then change stroke size to like And click here and we only need bottom like this. Should we change its size too. All right, all right. Now we have to add this image. Adding the image is easy. First, I click on the frame and press Command on Mac and Alton Windows. Go like this. Actually, if we not slate the command, we will change the positions when we adjust this layer. If you check on the phone icon, it will adjust when we adjust this. But if we pass command will adjust like this. All right, all right. We don't need that much space. Now, find out the height is 577, let's create another rectangle and make it signs 144 50. Sorry, 1,440 then 577 a and put it right here. Okay. Then again, select the frame and adjust it size like this. Then what we can do is click on the frame. Click on the rectangle and click on this shape tool and click conflasimage. Go to our image, select like this. Okay. Now we only have to add those call to action, add this call to action as the subdin heading and the button. It's pretty simple, so let's do it. First, I will click on a text and it will be 100% Run. Okay, now let's find out the font properties. It's cabin medium 24. So let's change it to cabin medium 24. So when we change the font, we actually select the font or we have to select the font without going to the editing mode. So if we select the text, we will able to change it. 24 medium, and the color will be this dark blue color. Okay. Now we have to add this section. To add it, I will first copy the text and click on this T and paste the text like this. Actually, as I told you before when we paste it, the design property will come along with it. Let's and then relate those two objects and click on align left. Now, find out the space in between, it's, make it, and now we have to add this button. Let's get button properties. It's 320 by 80. Click here like this, it will be 320 by eight and change it fill color to this dark blue color like this, then put it like this and click contents and add text like request as of the word darker so Figma has a cool feature. If we right click on here and go to this copy as copy paste as and select copy properties, then click here and right click copy paste as and click on phase properties. What is block. Okay. Now, the property will be automatically added to this design. Let's find out the details. Okay, first we have to change the height. The height is eight, not height with. Sorry, I these three to 333. Okay. Now, select the rectangle and the button, sorry, text and make it align vertically and horizontal center, and press Command G to group it and highlight all of those sections and press command G, then click on this rectangle and make it center. We just create the design. Let's check on the preview presentation mode present mode. It looks like this. Yep, that's how we create the simple design. As I told before, in future lessons, we will find more uh, manageable and more easy methods to create this type of design, and this is for learn the basic. Hope you learn about fonts, tanks, shape tool, tracing images, and creating basic or creating good looking hero section. I will see you in the next lesson. 14. Learn Figma auto layout: Hello, everyone. Let's learn about Figma auto layout, and how to use it to create flexible and responsive designs, saving your time and effort when working on your projects. Autoyout is like a magic in figma. It helps you organize your elements and make your designs flexible. Think of it as a system that keep everything in order and adjusts the spacing for you. When you resize a button, card or even a whole section, auto layout will make sure everything inside resize nighty too. Imagine you are building a navigation bar with buttons. Without auto layout, you have to manually adjust each button if you change the size. But with auto layout, Figma will do that for you automatically. There are few reasons why auto layout is so important. First auto layout makes you work flow faster. No need to adjust every element by hand. Also, if you want your design to work on different screen sizes, auto layout helps make sure everything fits perfectly. Not only that, it gives you a spacing consistent, which is key in good design. Basically, auto layout allows you spend more time design and less time fixing little details. Let's go to our Figma design and start to add auto layout. First, I will create a new project by clicking this create new Blue button and click on design files. Then here I will change this to. Let's change it like auto AO. Then I will click on this frame icon and let's create a desktop size frame like this. As the first step, let's add auto layout to this frame. And autoayout. If you check on your right side bar, you will see auto layout option. Only you have to click this plus icon. Or if you like to use shortcut, the autoayout shortcut is Shift A. Like that, you can add Autoayout I Autoay options we have features to add in between sizes, horizontal patterns, vertical patterns and align the items as we want. It will be easy if we create some objects to understand this. First, let's create a button. Did you remember last time that we create button? We have to add shape and text, but with auto layout, the text will be enough to create a button. Click on the text and click here, then add text or add button name as click me now. Like this, then as we did before, let's change the font. The font will be let's add font like opens and size will be semi boold. Then let's add font size to 418 like this, and maybe we will be regular. Is good. Now, let's make it semi bool. Okay, now we have button text. I will make the case as uppercase. Okay. Now, this is just a text, and we can add auto layout to this text. You have to press Shift A. When you press Shift A, you will be able to add a auto layout. Okay, now here is the auto layout options of this button. So as the second step, I will rename this frame to button, so it will be easier to understand. Then what I'm going to do is add a fill color. The background color. So when we add the background color, we will be easily able to identify what happened when we change the autoayout options on this section. So on your right side bar here, we have fill and I click on this plus icon. Then I will change this green color because green is one of my favorite colors. Okay. Looks good. You can change it to any color you like, but I choose green. Okay. Now we have the text with background color. And if we click on this auto layout, we can see the text like this. Now, I select the button and do you remember that I told you about horizontal padding and vertical padding? Here are those options. We can just add them like 15 and see when I add that, I get the padding between the text as 15 and let's make it 20. Now it's more clear, 25, now it's more clear. Then we have vertical padding. Vertical padding means the space in between the up and down of this text. Let's add vertical padding let's add 25 25. Okay. Now it looks more like button. Let's make this as twin and 30. Okay. Now it's really good. As if I want, I can add, I can reduce the corners by click here and add 39. Do you remember that in last few lessons, we did this and now we have this type of button and by adjusting those stuff, we can make this design really cool. Now this button is in the left side corner. What if we want this to put on the middle like here. So to do that, click on the frame, the frame is already auto layout. So only we have to click on Aline top center and it will go to line top center, and if we click on Align center, it will go to center part, and here is the power of the auto layout. If we didn't use auto layout, we will have to manually adjust this button. But when auto layout, Figma will handle the adjusting part, we only need to change it from this auto layout section. Okay. Now think we have to create a different button. Let's duplicate this button. I will click on the button and press Command C and press Command V. The button is just added like then think if you need to change the in bet pen size. It's really simple. Only you have to click the frame and then you will see this type of adjustment line to change it. So we can change it from here like this. Okay. Now let's make this button like field color zero, and let's add stroke. To add a stroke, click on the button and you will see this stroke, just click like this. And now let's change stroke color to this green color. So we can change the text color to change the text color, we have to silt the text and let's change it to green. Okay. Here it looks like this, but this green color is too light, so we have to change it to dark like this, change the fill color to sorry, not fill color. Change the text color to dark color like this. Okay. Now think if you want to change the text, let's change, click me to buy one get one free. When we change the text color, the alignment will automatically adjust. See if I change here to submit, it will change according to submit now like this. The button will change according to the text. But did you remember last design that we created. So let's go to that design. I click Back to files, and here we have the design. Then let's get this button. So in this button, let's click me to click me to get one free. Now, when you adjust the button text, the background will not adjust. We have to manually adjust it like this. That is why we should use autoayout. Let's go back and click on Autoayout section. This is just a basic and we have a lot more items, lot more features that we can do with Auto layout. Now imagine you need to create a button in the second button below this button. Currently, you can't do it because if I duplicate this button, it will only there's horizontal line. If we want to add the button below, first, I will delete this or delete this and if we have to add new button, first we have to click on this destopFrame and add auto layout of this frame as vertical, like this. When I add it, the take become vertically aligned like this, but I want Make those two as horizontal and add new line. To do that, I click on those two items and press Shift A, and it become a different frame. Did you see? I will press Command C to undo it. First I click on those two layers or those two frames or those two buttons, then I press Shift A and it becomes a new layout or new autoayout. Now I can click on this horizontal layout and it will be horizontal. Now if I want to create a new button. Let's create a new button below like this and Hello me. Then let's add auto layout by pressing Shift A, and here we have the details, we have options of auto layout. Now what I'm going to do is add the field color. This time, let's add the field color and green light green like this, and let's change text color to white. Now I will add horizontal paddin 20 and sorry, vertical paddin 20 like this. Let's make this as 30. Now, see, we create this button below this set. Let's rename this as button like this, then we can adjust or we can change this text line now and it will adjust according to the text. Okay. Here is the way to create the auto layout. Let's see if you want to make this button as full size button. So currently this desktop size is 1,440. So if we want to make this button full with button. Only we have to do is click on the button, and in here, you will see. In frame, you will see, click on this button, and in here, you will see hug, make it fill container. Then you make it fill container. The button will be adjust as the fill container. Also, you will see this type of spacing. The reason is when you click on the desktop frame, you will see horizontal padding as ten. If we change it like zero, the button will be full width. So let's make it 140, 140. Okay. Now, this in between size you can change it by changing the vertical gap. Let's change it like 60. So here is the way. Now if you want to make this button on the top, you can click on a line top center or a line left of stub like this. This is really easy. Maybe you still confused, but in next few lessons, we will design these banners with auto layout and you will fully understand the auto layout after we do that, see you in the next lesson. 15. Enable UI3 Beta for Figma: Hello everyone at the moment that I create this lesson, Figma UI three new user interface is not available for every users, so we have to in the waitlist because it is still on Beta. After the Beta, as they announced, we will able to access the Figma UI three. However, if you don't have the UI three available, we can use Google Chrome extension to get the UI three review. Let's do it. First, I open a new tab and search enable Figma, I three, plug in. Then I will have this enable UI three beta or Figma. I just click on it. Now here is the Extension or plug in, I click on this at Chrome and click on at extension. Currently, this version is work on web browsers, not on the downloaded Figma tool, so use Google Chrome to run this extension. Okay. Now what we have to do is go to our Figma account and I repres it. Now let's click on Creative and click on Design file. From here, we can use Figma UI three to make our designs. In the next lesson, we will go through a quick overview and let's use these UI three features and UI three interface to complete our future work. 16. Figma UI3 walkthrough : Hello, everyone. Let's walk through the Figma UI interface. Now I am on the Figma dashboard. I click on this New design file to create a new design. Now I have the UIT or the old Figma Editor UI. I click on this Help icon and in here, I click on use new UI in beta ink here is our UI. This is same as the UI two or old UI of the Figma. Only we have more professional look and have some use a friendly change to the overall editor. First, I will create a frame. So here we have the tools panel in here. We have the frame, so I click on frame and click here, then make a frame like this, or let's create a frame with desktop size. I click here. Then in our right side, we can select the desktop size. I will select this desktop version. Now in the left side, we have the navigation section. In here, we can see the layers and in ***, we can see these asserts. I will rename this desktop 12 main. Now I will create a rectangle using shape tool, click here and create a rectangle like this. Then I can see the property of this rectangle. Let's change this width and height to 300 300 and let's change field color to red. So it's same as before and also we can create lips, let the ellipse and create it like this. Then here we have text. I click on it and ello then I select the text and in here, I can change font to exchange it to railway size will be 30 sync and semi board. Change color to red like this. Is 60 in this side we can see the players and we can create new pages like this. As before we have this action panel in here, we can find plug ins and widget. Also in this section, we have features that we can use with Figma AI and in future lessons, let's learn about Figma AI. Let's wrap up this lesson with change in this Figma file name. I will change this Figma file name to web design. Lessons like this. In the next video, I will see you create Figma auto layout with UIT latest version. 17. Learn Figma auto layout with UI3: Hello, everyone. Let's learn Figma auto layout with Figma UI three editor interface. You already know about Figma auto layout, let's jump into the action. First, I will create a frame. So here I am on the Figma editor, so I click here, click the frame icon and select as desktop. Here is our frame. Then let's add auto layout to this frame. To do that, I can right click and click on this Atayout menu item, or I can click here or in the right side, we have layout in layout. In here, we can use autoayout feature, so I can click here or simply I can click on Shift A. I just click here and it's a autoayout added. Now, what I'm going to do is add some Ellipse. Let's click on Ellips and create a Elise. Then I will set the ellipse width as 150 and height as one fifth. Then I will change it field color to red and then I will duplicate this for three times let's make this ellipse color to green. Then click here and change this color to blue like this. Let's play around with those objects and learn more about auto layout. First, I will rename this frame name layout testing. Okay. Then I select the frame. In the auto section, we will have option. As the first step, I will set left and right margins as 140 to do that. I have to find the left and right. Here is the left and right margins. Currently, it's ten. If I click here, I can see individual margins. In this case, it's a padding, but it also work as margin. In here, I will set 140 and then again, I will set 140 to this side. Here is 140, here is 140. Now I want to add margin into top and bottom currently top margin is ten. In here, you can see it's ten, ten, and in here, if I hover, it will show like ten, so I want to add more espace I will add like 60. To do that, I will click here and now I can change it like 60 if I minimize by clicking here, I can just at 60, then I will have 60 as both top and bottom margins, and in here, we will see the horizontal gap between objects. So to change it, I can over it and change as I want. Let's set it as 50 and also from here, I can change it as I want. Then I want to place this button on center to do that, I click on the frame and in here, I can click Align of center. The ellipse will go to center and if I click on center, it will go to the center and it will work like this. Currently, those three ellipse are in the horizontal. If I want to make it vertical, simply I can click on this vertical layout and it will vertically align. Now again, I will make it horizontal layout like this. This is how we can add and work on auto layout in frame. There are more options to play with as an example, if we add this horizontal gap between objects to auto, it will automatically fill the gap. Also if I change the size with an height, let's change it like 1,000, it will adjust according to the design six like this. 18. Design buttons using auto layout: Let's create buttons with auto layout. So to do that, I will remove this whole frame or let's create new frame. I press Command and use mouse wheel to decrease the canners and click here and click on desktop. Okay. Let's change this desktop to BTN layer. And now I click here and convert it to auto layout like this. Okay. Now let's keep the setting like this and now I will press T and create a button text like click me now I can change the font if I want. Let's change it like Roboto and Roboto semble to 25. Let's make it like medium. Let's change the font to like pop pop in. It's look good. Okay. Now what I have to do is right click and click on at AutoayoutO press Shift A. I just click it and it added to Autoayout. Then I will click here and rename this as TN one. Okay. Now I will go to our right side panel and let's add the fill color. I will add fill color as this light blue color, let's make it bit darker. Now, again cancel this, click on this text and change the fill color to white like this. Again select the button. Layout and from here, I will add, left and right paddins 30 and top and bottom paddins 20, like this. Then I will change the corner or reduce the corner in appearance, we have it as zero, I will make it 60 like this. Okay. Now what I can do is make this to center. To do that, we have to select our frame and as we did before, we have to set it align center like this. Okay. Now I will duplicate this by pressing and dragging it like this. Okay. Now I will create second button. Let's change this text to second. Click me second. And now let's change it fill color to this blue color. And now I click on the button and let's change the button names two and set opacity to zero like this. Then I click on Estro and click here, then set the Etro color to that blue color, and I will change it line with two. Okay. Now we have two buttons. Now I want to change the inviten size to do that, I can just click click here and let's change it like 20. But we have a problem. Let's say we need to create another button and it should be under these two buttons. Now I will click this button and press Command C or Control C on Windows and Command B and then it's on the same line. If we want to make this button on the line to we can silt the layer and click like this. When we make the layer as vertical layer, every button will be set as vertical. To fix this, I will highlight these two button, click on this button and press shift and click this one. Then I press Command G to group the and now what I can do is click this vertical layout because this group work as a different layout. In this group, if we want to change the in between size to 15, we can do it by clicking the group and from here, we can change it like 15. Or we can press Shift A and add auto layout to this group and from here, we can change it like this. Okay. Now, I will change this frame to BTN set. Now I want this button to add below of those two buttons. I simply click this one and drag it to bottom of this button set and in here, I will change field color to let's change it to red like this. Then think I want to make this button, full bid button to do that, I will go here and in the W I will set it as fill container like this. Then I will change this. Click me I am full full with BTN, like this. As before we can change those texts, click me now to by two like this, it will adjust according to the design because we added the auto layout. In here, if we want to add margin, we can just select the main frame and from here, we can add margin as 140 like this. This is really easy and in the next lesson, let's start to design the hero section. 19. Design 1st hero section with auto layout: Hello everyone. Now let's design those hero sections with auto layout. We are already create those zero section without auto layout. Now it's time to use auto layout to create this hero section. As the first step, we have to create a frame. I click here and then select the frame size as desktop. Then I will put it like this. Now I change this desktop one to hero one with auto layout. Okay. Now as the first step, we have to add grid layout. To add a grid layout, Iilate the frame and here we have grid layout. I click here and here we have saved to call grid, so I just add it. Okay. Now what I'm going to do is make this frame as a auto layout. So to do that, I select the prime and press Shift A, then it become a auto layout and now I will add necessary details. First, I will set it as a line top center, then I will add vertical gap or padding as 140, then I will add actual this is left and right margin, or we can call it padding. Then I will add zero as the top fan bottom margin or top and bottom paddings. Then as the in between size, I will select it like 90, or let's make it one to 20, here we have a horizontal layout, but we need to have a vertical layout because we build the website from top to bottom. Okay. Now our layout is ready. Let's create the hero section. We have the hero section height as 700. Let's create a frame and click on frame and click here. Then I will set the width as 1,440 and the height as 700. Okay. Now what I do is here we have the frame, I press Shift A to make this a auto layout or add auto layout to this frame. Then if I want, I can rename this section as hero Okay. Now from here, we need to add this background image. To do that, I select this hero section and click a rectangle and click here. Then again, I will set the rectangle with 1,440 heights 700 like this then I will click on the rec triangle and click here, click on image slash Video. Then I will select the image. Now I click here to add the image. Now image was added perfectly. When you see the design, you will see this type of spacing between the image to remove it, click on hero section and set those details as zero for now. And for now, let's keep it like this. Again, and now we have the image and as the second step, we have to add this overlay background. The overlay color is black and its opacity is 70. Let's add those details. Click on the image, click this plus icon and make this 70 and color is black. Okay. Now we have to add this logo text to add it, I will click on TO text and click here, then I will add the text as I will add the text as logo. When I add the text, you will see it appears in here. The reason for that is that we currently in the hero frame. If I click on that frame and it has a horizontal layout. Let's make it vertical layout and then the hero text appear here. Let me show you by changing the color. Let's select it and change field color like this. But this image should work as a background image. Currently, if we add any object to this design to this hero section like this, this image will not work as a background image. To peak it, we can select the image and in positions on the right side, we can click on ignore auto layout like this, then this image ignore the auto layout. I will click on the image and put it like this. Now the image is not showing to fix it, I will put the image to the top of the hero section. Then now I can set it like this because this image ignore the to layout functionality. Now we can make changes to this hero section to do that, first, I will remove this and in logo, I will change its color to white and let's get the details. It's railway semivol 35, click on the tanks and Railway semi wolthirty let's check the padding between the top of the frame and logo. It's 20. So let's make 20 to make it 20, isolate the hero section and add the top padding as 20, like this. Then if isilt here, let's remove the bottom padding. On hero section, I will set the top padding as 20 like this. For this hero section, then we have a issue because the hero section change it. I will set it with a fill container and the height will be 700 like this. Now it's now as the second step, we have to at this menu item to add them, I will press T and like home. Then I will click here and click on Copy Paste as and click on Copy properties and come here, select the text and phase properties. Now we have this about us, so I will duplicate this home by pressing Alt. Then I will click here and click on Copy property, and then come here and click on first property. Then I will duplicate it for one, two, one, two, three, four times, one, two, three, four. Now I will change those texts. This one will be about as, this one will be how it works. This one will be coaches, this one will be contact. Now we should have this text align as horizontal currently it's as vertical. So to do that, I will highlight all of those five text by pressing Shift and then I press Shift A. When I press Shift A in here, it added to new auto layout. We can change this autoayout name as menu items. It's not necessary. Then what we can do is change this auto layout. Design into horizontal layout. Now let's check the in between size. The in between size is 36. Let's make it in between as 36. To do that, select the auto layout and change it to 36. Like this. Now as the next step, we have to put those two section or logo and menu item section as in same horizontal layout to do that, again, select the auto layout or menu item set and logo by pressing Shift and press Shift A to make a auto layout. Then again, we change the autoayout to horizontal layout. Now on the alignment, let's make it align center to align correctly or maybe a line bottom center will be paced. Now what we have to do is at this spacing, adding this spacing is really easy. We only have to change the in between size. We can manually change it, but there is a better option. That is, add this in between size as to like this, then what we have to do is change this to fill container. Now it's perfectly Line and from here, we can change the auto layout or layout name to menu like this. See, it's super clean and super easy. If we want to change any of those details, we only need to change it at once. As an example, if we want more spacing like 50, we can just press 50, but in this case, we have to manually adjust one by one. So yeah, you may get confused about the auto layout, but this is really easy and let's go step by step so you will be completely understand about the auto layout. Inside the hero section, we have to create those texts to do that. I press T and click here, then I will at this type of text. Then I will directly copy this text and paste it like this. Then I will duplicate this, click the text and press command C or control C to copy and V to paste like this. Then what we have to do is actually we need it for four time, then I will change those text like this because in this lesson, we mainly focus on the autoayou. In future lessons, we will learn more deep about typography and colors. So now from here as the first step, let's make this button. Let's create this button and then we can add spacing and make it center, but as the first step, let's make a button. As we did before, we can press click the button text and press Shift A. Then let's find out the measurement. Those are 16, 60 as the top and bottom and the left and right is 20, click on the auto layout. Let's change its name to BTN like this. Then from here, left and right will be 220 and the top and bottom will be 16. Now, let's add this color to this button. To do that, click Fast icon in fill and click here, click this icon then click this, click on this color. We easily design the perfect button. Okay. Now we have at this is spacing, the spacing in between is 15 and here we have 20. Let's select the items that as spacing as 15. Before I do that, let's select the items and press Shift A and make a auto layout, then I will change this auto layout as CtA and now we have to make this auto layout to center. Easily, I will make it as a line center and then we have to put this to the center to do that. On the CtA layout, I will set the width as field container. Then we have to change the height to fill container to like this. Now it becomes center and still we have to add the spacing to add the spacing, I will select the CtA. Let's make the in between size as 20 but here the inviting size is 15, to fix it, select all of those items and press Shift A, then make the invitting size as 15. Okay, perfect. We just design the hero section with auto layout. In the next lesson, let's design this one too. Actually, if we want, we can just put it like this and let's see it in the preview. I look like this 20. Design 2nd hero section with auto layout: Hello, everyone. Let's create this second hero section with auto layout. As our first step, click on the frame and select the frame size as desktop, put it like this and change this frame name to Hero two with auto layout. Now as we did before, let's add layout grid like this. Okay then let's add auto layout to this frame. I press Shift A. Now I will make horizontal gap between zero and the left and right margin as one for T, and the top and bottom will be zero. Now, let's see what we have to do first. First, we have to add this background. To do that, I will click here and click here and click on triangle, click on here. Then we have to see as 1,440 width and 700 as height. I think it's 700 is 700 ok. Now, I will click here and click on image Video then at the image. This is the image, click on here and now we have to add background color as white and the opacity will be 90. Click here, click fill, change this to white and this will be 90. Now, you see because of this 140 margin, the image or the background is here. We have to select the background image. Click on this Igno auto layout icon. Now we can add, adjust it as we like, then I will rename it as to BG. As I told before, it's not necessary, but I will do that. Then I click here and create a frame. The frame name will be hero. Then I add autoayout by selecting the hero frame and press Shift A. Then I set the width as fill container. Actually in previous lessons, as I remember, I didn't explain the parameters. Let's get familiar with those parameters. First, we have fixed width. If we select fixed width and we can add with as anything we like like 200, the object will be 200. Let's make object fill color and red. Okay. We have to put this background image as the first layer of the frame. Without that, we will not see the rest of the frame. Here is the object or frame that we are currently working on. If we set it as 300, the fixed width will be 300. If we set it as hug container, it will be string till other item touch the frame. As an example, let's create a text and let's make this text as hello world, and let's make it as hello. Now the width is 300 because it fixed. But if we select the heart contents, it will be string to content size. So as an example, let's create different rectangle on here, so it will be just according to the item inside this object or inside this frame. Now click here and you may see this spacing in between the frame. That's because we said the left, right, and top bottom paddings as ten, let's make them zero so you will clearly understand. Okay. Now we have fill container. If we click on fill container, the object or the element will be expand all the free space that it has. In this case, we add one party margin as our hero section autoayout. This frame is inside this hero section, it has free space in between here, it will expand till that left hand side margin hit in this frame. That's it. A here as admin width and add max width. If we click on Admin width here, we can add minimum width. If we make minimum width as 200 and let's make minimum width 700 and now think we shrink this like this. When we shrink it, the element or the frame will not shrink after the minimum width of 700 hit it. If we at max width as 700, the element will be at max width as 700. The element will have only width as 700. So those are bit advanced, but you can remember it. I responsive design, it will be useful. Now this apply for the height two. We said it as fix, we can add fix with an fill container, hug container, and mint x height. Let's start the work. First, I will remove those unnecessary objects, then let's remove the fill color and select the hero section and set with a fill container, and we have to remove this max and mean with like this. Then height will be 700. Okay. We have to set this frame size as 1,440. Okay. Now here, we have to add this logo and the text. I will just press Command C to copy this and command V to paste it. Then I will just select all of those menu items and copy them because we don't need to do the styling and also we have this button. On button, I just copy the text. The text is white, so let's start with the button. Here we have the button, isolate the button and press Shift A. Then let's find out the button with the hi, it's 16 by 16 and 37 by 37 as its size. Here is the button frame. Let's rename it as VTN then fill with black color. Then here, we have to add 37 as the left and right padding and 16 as top bottom paddings now we have to reduce the corner to 60 button is created. Now what we have to do is select these menu items and from here, we have the menu items. The menu item in between size is 25, come here like this and select the menu items and press Shift A to create a new auto layout or group it and add the auto layout. Then in the auto layout, we have to set horizontal layout. Then we have to add in between size as 25 Okay. Now we have to select all three of those items and press shift to make a group and add a frame. Then we will have to make it horizontal layout. Now it will look like this. Now what we can do is if we want, we can rename this. Let's rename this like as menu and here menu items like this. Then click on the menu layout and let's make with as fill container. And then we have to set this item in between size as auto, press enter, actually we have to select this one and set item in between size as auto, like this. Then we have to make it center to make it center. We have to click here like this. The menu is created and now in here we have the top margin as adding top pass 25. Let's make it 25. Select this and click here from here, make it as 25. Perfect. Now we have to add this welcome to my finance section, it will be inside this hero section. Let's copy all of those in photo here. I just copy from here like this. For those buttons, we have to create Different layout, I will just copy the text and also copy only this text. Let's start with the buttons again. Before I do that, let's find out the button in between side. It's 18, 18, 24, 24. Click here phase shift A to auto layout and this will be 24 and here will be 18. Then the fill color is black color. Actually, we have to add the the fill color will be black and in appearance, radice the corners as 60. Then we have to do same to this, learn more button. Res shift A. Then let's add stroke first, click here and stroke size will be two. I think it's C, let's see. Yes, it's one. So let's make it as one. Okay. Then it has same heighten width? Yeah, no, it has heightened width as 33, 33, 33, 18, 80, 35, 30. Let's make this as not this one as 35, 18. And let's do the same here. Click on this Learn more button and here, make it as 35 18, then reduce the as to sit. Then highlight highlight slate those buttons and press Shift A, then make the layout as horizontal layout. I hope you understand clearly this option that I'm working with. If you don't understand first, just play around with it. You have to try it again and again to learn. At first, I did the same. If you have any questions, you can just ask me on the message section or comments section. In here, we have spacing as 30, in here, we have spacing as 21. You see, when we create design without auto layout, we can get exact figures. As an example in here, we have bottom pad in as 19, but top pad in as 18. Also in here, we have 21 as in between size, but it should be 20. With auto layout, we can easily did select here and change the auto layout to two. That's why the learning Oto layer will be a huge advantage. Then let's select all of those items and press Shift A to make a group. I will rename this group as CtA and t N s BTN one, BTN, two so now let's make this in between size as 30. Is it 30? Just here 30, here's 20. For this 20, just select only those two and we shift then change this to. Okay. Now what we have to do is put it center. To make this center, I go here and set the height as fill container like this. Then I will set this alignment as align left center. Okay, it's centered, and now we have to add this image. So this image also from the outside of our design, so it should not have Outlet or it should ignore the Autoao. So first, I create a rectangle like this and let's make it with 710 and as 610 600. Okay, then I can make it ignore Autoao and put it above like this. Then I can tip anywhere as I want. So for now, let's add image to it. Click here, click Image video and select the image. Here is the one. Click here, add it. So currently it's not showing, so we have to put it like this and then click it and change field to crop and align it like this. Okay. The first part is completed. Actually, we have to put this image, this. Okay. Now it's look good. Actually, we have to put this this o now what we have to do is add this section. It's easy to add it, I create a new frame. Let's create a new rectangle like this, it will be under the hero section, not inside the hero. Now this should be let's put it here and let's bring the hero section above this. I found the issue from our main frame, we have to set the layout as horizontal layout to vertical layout. Okay. Now it's here. Now I will change it with height as 1,440 to 700 not 700 is the size here. 270. Let's test 270. Okay. And for this one, we have to do the same. Let's click on Ignotayo and put it like this. Okay, then change it field color to this now what we have to do is add the prime like this and let's change this frame name to highlight I think for Sakura C highlight. Then select it and press Shift A to make auto layout and set with dash fill container. And the height will be 270 to 70 like this. Okay. Now we have to add those information. For now, I will copy this one and set the frame and put it inside the frame and we have to make this about the frame. Without doing that, we will not see the frame details. Then to this frame layout, I will make it as a line left center Okay, now we have to make those three items, select this one and let's select this one and copy, paste it like this. Copy it like this. Then I will selet both of those objects and press Shift A, and then the inbt queen size check in it's 15, Selt this one and set inbuit queen size as 50. Okay. And also make it center. Let's make center. Okay. Now, let's do the same to this one too. Like those two objects, press Shift A, and make it center 15. Now I will select those two objects and press Shift A to make a new auto layout and set horizontal layout like this. Now I will select this highlight frame and set auto layout as horizontal layout. Okay. Then we have to add this one. Let's add it and select those two objects, press Shift A, then set it as vertical layout center. Now let's see in between sides. The in between sides is 57, highlight all of those frames actually, I can put this inside this frame and select that frame and set it as 57, then I will convert this text to auto layout by pressing Shift A and click the main frame and set with as fill container, and here we have auto as the in between size. It's perfectly fit. Now if you want, you can rename, but for now, I'm not going to rename so here is it, here is our second hero section with auto layout. The design, it will look like this. Now it's your turn, you have to add auto layout to this hero, three hero section, play around with Figma and try to do it. I will see you in the next lesson. 21. Design 3rd hero section with auto layout: Hello, everyone. Did you manage to do a good job? If not, let's do it here and first, we have to create a frame. Click on the frame, set sizes, desktop, put it like this, then we will add layout grid. Then click on this call grid. Actually, we don't need the layout. But having the layout will be easy to identify where the object will go. Then first we have to add this menu to do that, I will press shift A to add auto layout to this frame. I will rename this frame as 03 with auto layout. Then I will remove all of these details and here I will set it as 140, our margin left and right then I will set this as vertical layout res at this aligned to center. Now, we have to add this logo. To add it, we have to create new frame, click this frame icon and create a frame. This frame size will be the height is 223. Let's make height 223 with this fill container. Okay. Now we have a problem. No, we can manage that problem. The problem is we have this line, but our frame will only come here to here. So the line will not go to the end of this frame, but it will not the issue because we can add it on the background image. Okay. Now we have to add this logo. To add this logo, I will create a rectangle like this. Actually, we need to add auto layout to this frame, slate the frame and press Shift A to add auto layout. Then from here, make properties and its height should be 223 folks 223. Okay. Then here we have to add this logo. The logo size is 192 as the width and 92, and let's make it height as fill now add that logo to this rectangle like this. The part is completed and as the second part, we have to add this man item set first I will copy home menu then about electrical service and contact us. I will copy all of them to here. Then for this home, we have to add this little arrow. I will copy it from here. Then I will select the arrow and home text, the home text, then arrow, then press Shift A. Then I will set it layout as vertical layout, and in between size will be zero. Let's see what is the in between it's 66 this. Okay. Then for which I will set with a hug C like this. Then I have to put it in front like this. Then I will select all of those menu item and press Shift A to make a new menu item auto layout. And let's see inten size, it's 50 in between size has 50 like this. Okay. Now we have to create this us section. It's really simple. First we need the circus. We will copy those two circles from here, put it here. Okay. Then what I do is before we add the pawn icon, we have to put these two center. So to do that, I will press Shift A and add the auto layout. But with auto layout, we can't do it because items will not collapse or items will not add that in front of another item on auto layout. We have to click this Igno Auto layout. I will select these two circles and click on Igno Autoayout. Then I can make it center like this. Then what we have to do is at this mobile icon, I will just copy it from here. And select this frame, put it in the frame inside the frame, and I will do the same for it too. Then I will select all three of those items and make it middle like this. Okay. Now we have a issue. This frame is not work as we want, so I will put it outside the frame and remove it. Then I will select all three items and press Command G to group E. Then I press Shift A to add auto layout to it. Then what we have to do is click on this frame ate or let's rename it as menu like this and here menu items here, phone icon, then we have to add those two items. I will just add them like this and select both of them, press Shift A, then add vertical layout and nice. Now I can select those two items and press Shift A to make la to add Otolaa to this section. In between size is towel, so I just change it to towel. Okay. All good. Now I select this frame and set it item in between size to Otto and it will distribute everything equally. Okay. Now we have to add this background image. It's really simple. Just click on rectangle and then set width as 1,440 and let's see the height height is 577. Let's add height as 577. Okay. Now what we have to do is click this ignoOtoayou you can, and now we can add the image. Click here video, slat the image like this. Okay. Then we have to add this stroke. So let's copy the stroke color and click here. Click PAs and insides, set top and two, then this will be this color. Okay. Now we have to create this section. Let's create it as the first step, let's create a frame. Actually, we don't need the frame here, but I will copy this part first, put it like this. This part like this text of the button like this. I will click on the frame and we have to put this text to the left. Click like this and it will go to the left and here we have a issue. We have 100% guarantee in the bottom, but it should be on the top. I select it and click here and put it to top. Then we have this button in the middle, it bottom. Okay, now I will click Shift A to make a button. So the button details will be 25, 25, 30, 30. Okay. Let's make it 30 as the left and right, 25 as the top and bottom, then fill color. Let's add this fill color. Okay, nice. Now we have to check the in between. Size to add in between size, I will select all of those items and press shift A, then the in between size will be. Okay. Actually, this should be zero. This is the top and bottom padding or vertical padding should be two L. Okay. Now we have to make this center. To make this center, we have to apply auto layout to this like this. Then to make this center, we need to have a frame that has size on this background image because currently this background image is ignoring the auto layout. So we must have a frame that not ignore the auto layout, so I create a frame and press A then this height will be 577, then it will be fill like this. Then I will put this frame inside newly created frame like this. Now it's in the center. Now I can rename this as CTA ATN, like this. Then I will select this one set center align left like this. A here, electric container Okay. Okay. Now it fab centered. We successfully created the third hero section two. Let's see preview mode. In future lessons, we will be using auto layout to design more complex websites. We only created three designs. If you think autoayout is so complicated, just search some popular design on Google and try to mimic and create that design on Figma using atoyout. In that way you will learn more about autoayout and how to use autoayout effectively. I will see you in the next lesson. 22. UI/UX design principle introduction: Hello, everyone. So far, we learn about fundamentals of Figma and start to get familiar with the tool and create some designs with Figma features. Now let's focus on YX design principles. When we create custom website, we must have idea about UIUX principles because if we don't apply UIUX principles and concept to our design purpose of the design or the purpose of the website will not achieve. In next few lessons, we will learn about visual hierarchy, layout, typography, color theory, and must know UX principles to design custom websites. I will see you in the next lesson. 23. Visual hierarchy: Hello, everyone. Imagine walking into a new room. You need to know where to look first and how to find a way around. That's exactly what visual hierarchy does on website. So let's break it down. Visual hierarchy is the way that we arrange things on website to show what's more important. Some things need to catch a eye right away while other can be noticed later. The better the hierarchy, the easier it is to use the si. Add visual hierarchy to our design, we have to consider mainly three things. The first one is size, big things grab attention first. Think of a big ball newspaper headline. It standout. The same goes for websites. Headlines or buttons that are important should be larger than other things on the page. Then we have to consider color and contrast. Bright colors catch your eye, dark or dull colors if you want something to stand out like a button, use a color that pops. For example, a red button on a white background will get noticed fast. Then we should consider spacing and placement. We have to give important things space. When we add more space around element, it stand out more. If things are too close together, it can be hard to focus. Visual hierarchy guide your user through your website. By adjusting size, color, and spacing, you can show them what's important without them even realizing it. 24. Learn about typography: Hello, everyone. Typography is simply how we choose an arrange font on a website to make it look good and easy to read. It plays a big role in creating a great user experience. Here are some quick things you must know about typography. Typeface. This refers to the design of the font like area times Nur Rome or Roboto font. A font is a collection of characters, letters, numbers, and symbol that share the same type face and E style. Then we have font width. This refers to the thickness of the font, such as regular old or. Then we have fonttyle. This include variations like Italic, oblique or condensed. When picking a typeface for your website, always choose about those things first readability. Choose a font that are easy to read on screens. Avoid overlay decorative or complex fonts. Consistency stick to a limited number of typeface throughout your website to maintain a cohesive my recommendation is use only two types of fonts, one for headline and another one for paragraph. Then you should consider about brand identity. You typeface should replay your brand's personality and values. Then we have to consider about context. That means the content and purpose of your website will influence the appropriate type so here are some tips for good typography. Use difference font size with an style to create a clear visual hierarchy, ensure proper spacing between letters and words for optimal readability. Create contrast between the text and background to improve legibility. Keep lines of text to a reasonable length to avoid eye strain. Then choose text colors that are easy to read and complement the background. Typography is a key to make your website easy to read and visually appear. 25. Learn about font: When it comes to fonts, you will often hear about serif and Cancerif. Serif font have small etroke at the end of their letters. Think of time neurons or Georgia. They are great for creating a traditional and formal feel and are often used for long passages of text like in books or blogs. On other hand, Sanserifont doesn't have those extra Etroke aerial Helvatica and Robot are examples. Those phones are bold, modern and great for titles or headline. They also work well on mobile devices because they are clear and easy to read. Let's see what type of brand and what type of design will use those Sans and Sanserif phones. So always remember the readability of the taste. Here. Here. 26. How to find fonts using Google fonts: Hello, everyone. Now we know about typography. Let's find out where and how to find write tipography for your projects. The best place is Google Phones. You can access Google phones by going to phons.google.com and you will get to this page. In here, we have a lot of fonts to choose. So we can just scroll down like this and find best fonts or we can use these filters to filter down the fonts. Let's find fonts for headlines. Here, I will set the headline size as 60. Let's test 60. In here, we can type actual headline. I will add something like you guide to a balanced healthier lifestyle, and then I will skip this language. In here, we have the Serif and sensori type, so I will select only sensory. Now we get the filtered fonts, now we can check through them and find the best font. In here, we have this latter font, so I will click on it and then we can find more about this font. So if we add this font to paragraphs, it will look like this, and our plan is to add it to header. So now I will click on this G font button and it will add to this selected font section, and again, I will go to fonts. Now I need to find a font to paragraphs. To do that, I will add this type of paragraph here. Then let's change the size to like 20 and we will select the sensory phone. In here, we can check the fonts that is suitable for our project. Finding this font always depend on what type of website you are designing. In this case. This is a website for fitness trainer, so I will select this work sense and in here, we can check the details. So if we add this, it will look like this. Now we can click on this Gate phone. After I click here, can find the fonts that I selected. In Figma, we have Google font library. I will open our Figma file and in here, let's just select this one and I will click on this font and here we have the font. In here, we can select Google fonts and now we can get the Google fonts. If we select these RL fonts, we can find E fonts. This is the easy way to find fonts for our projects. I will go to fonts and if you like to check SEI fonts, we can click here and we will have the SE font that we can use on our website. I few lessons, we will use this Google font website to select fonts for our project. 27. How to use color psychology: Colors play a crucial role in web design, influencing how users perceive your website and interact with it. What is color psychology? Color psychology is the study of how colors affect our emotions, modes and behaviors. Different colors evoke different feeling and associations. For example, red is often associated with energy, fashion and excitement, while blue is linked trust and reliability. That's why brand like Coca cola use red and brands like linked in and most trusted banks use blue as their main colors. Understand in color psychology can help you create websites that resonate with your target audience and evoke the desired emotions. Here are some tips. Choose colors that align with your brands personality and what emotions do you want to evoke in your users? Ensure your text and graphics are easy to read and visually appealing. Experiment with different color schemes to see what works best. Color theory and color psychology are essential aspect for web design. By understanding how color affect our emotions and behaviors, you can create website that not only visually appealing, but also emotionally fascinated. Check this color emotion guide. In this guide, you will see lot of popular brand and their brand colors. Also, you will see details about emotions, mood and behaviors of those colors. Download this image on the resources section and study it when you create a website that don't have a brand color or if you try to redesign their brand, use this color emotional guide and come up with colors that suitable for their brand and I will see you in the next lesson. 28. What is 60-30-10 rules: In interior design, we have a concept called 603010 rule. We can apply this 603010 rule for our custom website. This rule helps make your website look balanced and attractive. What is the 603010 rule? The 603010 rule divides color in your design for harmony. Here is how it works. 60% is your dominant color. It should cover most of your website and set the overall mood. 30% is your secondary color. It supports the dominant color and added depth, 10% is your accent color. Use it for highlights button an important feature to grab attention. Let's find out how to use this. Start by picking your color palettes, select a dominant color for your brand, a secondary color that goes well with it and an accent color that pops, then use the dominant color for the background and main area. The secondary color work well for sidebars and headline. Reserve the accent color for buttons and. Following this color combination, keep your website looking clean and organized, avoiding chaotic feel. After applying the 603010 rule, get feedback from real users, see how they feel about the color and the design. Then make changes as needed. Also, remember this is a rule, which means we can break rules. If you think 603010 rule will not best for some of your website sections, you can change it. Let's see some example that effectively use this 603010 rule. You see 603010 rule is a great guide for making appealing web design. By using it, your website will feel balanced and engage. 29. What is user-centered design: Hello, everyone. Let's talk about a very important concept in web design, user centered design and why it's crucial for websites. User centered design means creating website that focus on what the users needs and wants instead of designing for what you think looks good. You design to make things easy and useful for people who visit the site. Let's think of it like building of a shop. You would arrange everything in a way that make it easy for customers to find what they are looking for. If things are hard to find and confusing, people will leave the shop without buying anything. The same idea applies to websites. A website should solve a problem or fulfill a need for the user. If it doesn't, visitors will quickly leave. Here are some reasons why focusing on the user is so important. When you make the site easy to navigate, people can quickly find what they are looking for. This means more people stay on your site. When users feel the website is made for the they are more likely to stay longer and explore more. If the user can easily find what they need like product or information, they are more likely to take action, whether it's bind something or sign up or contacting you. Let's see example. Let's say you design a website for a local grocery store. If customers most come to buy rice, vegetables, and epe, you would make sure those are easy to find on the homepage. You will also add the clear search bar and maybe even suggest related product to make shopping easy. Let's see another example. If parents use a site to check school news or exam results, those links should be simple to find right on the homepage with clear labels. Here are some simple tips to make sure your website focus on user. Before designing, ask yourself who is visiting the site? What do they want to do? Know when your audience is key. As you can do some research about your competitors and find out what type of design and tactics they use in their website. Then users should never feel lost. Use clear menu labels and buttons that help them move around the site easily. Also, many users in the worldwide use their phone too Make sure your website work well on mobile devices too. Not only that, don't just rely on your own opinion. Show the website to real users and see how they interact with. Their feedback will help you improve the design. At the heart of a successful website is the user. By focusing on what they need and ensuring the site is easy to use, you will create a more effective website that keep visitors coming back. Remember, design is not just about how a website looks, but how it works for the people who use. 30. What is KISS principle: Hello, everyone. Let's talk about the kiss principle. Kiss stand for keep it simple, stupid. When we design websites, we need to make sure the user can find what they are looking for quickly and without confusion. If a website is too complicated, visitor might get frustrated and leave. So following the kiss principle, make sure that our website load quickly, easy to navigate and has clear content. So how to apply in web design. Let's break it down into a few steps. First, simplify the layout. Don't clutter your pages with too many elements. A clean, simple layout makes it easy for users to focus on what is important. Use clear navigation. Keep your menu and link simple and straightforward. Don't have too many categories. I stick to the basics so users don't get lost. Use fewer colors and fonts. A simple color scheme and one to two fonts are usually enough for professional. Too many colors or fonts can make the website look messy and hard to read. In the typography and color psychology lessons, we will learn about the benefit of having two fonts and 603010 rule to keep our website color harmony. Then you have to focus on the essential content. Show the most important first. For example, in healthcare website, patient might want to know to book an appointment or find a doctor. Make that information easy to spot, then test with real users. Sometimes what we think is simple might still be confusing to others. Always test your design with real users to see if they can easily navigate the site and understand the content. Think about Google's homepage. Google is the one of most simple website out there. Just a logo, a search bar, and buttons. Yet it is one of the most effective site ever created. Why? Because it is tied to the kiss principle. 31. Learn about project scope: Hello, everyone. Let's talk about project ICO. Think of Project ICOv as a map of your website journey. It helps you it's getting lost, making mistakes or taking too long to finish your website. Knowing what is needed before you start designing is essential. Imagine building a house. You wouldn't start without knowing how many rooms it needs what material to use? The same goes for web design. Project ICOpe helps you understand client needs, do they want a simple site or big one, timeline? How long do you have to finish? Then budget, then key features like, will there be a blog, online shop or booking system? In the next lesson, we will start to define our project ICO our first web. However, sometimes even with the project disco, challenges happen. If a client want more wages or features later, that will be not goes as you plan. To avoid those type of issues, we have to set clear expectation from the beginning. Let them know the time and cost for adding new features later. Creating a contract is the way to handle those issues. 32. what is a mood board: Hello, everyone. Let's talk about mood boards and why they are so special for finding design, inspiration and understand what competitors are doing. So what is a moodboard? A moodboard is like a digital collage that shows the style and feel you want for your website. It's a great way to brainstorm visually before you start designing. Why do we need a mood board? Starting from scratch can be tough. A moodboard help you gather design inspiration from other websites and your competitors websites. Not only that like banners so ads related to your company brand or even other design that is spark your creativity. It easy to get sidetracked by new trends. A moodboard keep you on track by reminding you of your original vision. Before you design, look at what your competitors are doing. A mood board lets you create and compare their design, so you can create something even better. So let's find out how to create a moodboard. First, check out website in your field. What do you like or dislike? Then get screenshots and save images that you are inspiring. So where to find design inspiration Create Moodboard. You can directly check your competitor's website and search website designs on websites like Dibble, Pinterest, Figma Community, and BNS. So soon we will create a moodboard and cool design inspiration to make our first website. 33. How to create a color palette: Hello, everyone. Now we know color theory and color psychology. Let's create our first color palette. I use this coolers.co website to generate the color palette. Go to this website, then click on Ita the generator, and I will remove this one in here. According to 603010 rule, we only need three colors. I will remove two of them. Now we have three colors. Let's get our example as real state website. Now I am on the color emotion guide image, so I will add this image URL on the resources section. In here for real istate website, the main brand image will be trust and we can consider about the clarity. According to this color image you can select one of the color as blue and one of it as this orange color. I still you have doubts, we can go to Google and search something like realisted banner design. Then I will go to these images on the images, we can see a lot of them has color as blue and some of them has some colors with the dark blue and the orange. Let's get another example. Now I think we need brand colors or website colors for ice cream business. In that case, we can select the red. It has the excitement and it will be perfect. As we can select this friendly color. If we go here and let's search like ice cream business banner and in here we have some images and a lot of them has the color as red. Now let's go our first design example, that will be the real estate. I will go back and in here, I will select this design so we can get this blue color to do that. I will go to this coolers.co and I will put in it this side, then I will click here and I will put on this side, then minimize this and now we have our first color as blue to select it, I click here and in here, we have this eyedropper tool. I just click on it and now I can select the color like this. This will be the blue color and in here, we will need to have white colors. I will set this as white color. Then I will click this Toggle log to log this item, so this color will not change, then I will also log this one. Then we have to find our third color. To find our third color, we press Shift on keyboard, we can see this type of changes to the color, but in our case, we can selt yellow color. Also, if we go to this color emotion guide, we can select this green color, but in this case, let's select this orange color. In here, I will select here and selet the picker, select the orange color. If I want, I can change the color for now, I will put it like this. Now I increase the size of this window here will be our tree of colors. Now there is a issue. When we select color, we have to always check about the contrast the readability. There is a tool to check this contrast. To do that, I will go to color.adob.com and then you will come to this page. In here, I will click on Vs and then we have this accessibility tool, checkbox, so I just select it and cross this one. In here, we can check the contrast and the readability of the colors. Now I come here and copy this color code and let's put it as text color. Then I will change the background color to white B F here. Now the contrast ratio is fine, but if we this color, it will be father test for 17 fixel and Blofon. You will check here that it fail. If we increase it, the color contrast will be improved and it will fast the test. Now we have to change this color bit darker. I will put it like this. This. The reason is if we choose these colors to our website, we will have to add paragraph to this blue color. I copy this color code and come here. Then they see it the contrast ratio is okay and let's change the background will be look great. Also next check it with this orange color. To do that, I will set this text color as this one and let's add this Let's add this color as B color. Okay. I also passed the test, but if this make more bright, it will be, it also pass the taste. Let's change the text color and background color. I will work perfectly and let's see if it works with the white color. Let's see. When we add this to text color and background color as white, this will be that means we only can use this orange color with dark blue colors. When you select color palette to your website always check the color contrast and it will help to improve the readability of our website. Also remember, most of time the black and white colors will be two of our website colors, but sometimes the black color will be a little bit less darker. However, most of time, those two colors will be the colors that we use as our background and test colors. Then we have to find our primary color and we can select that primary color according to the color emotion guin. In this case, we select it as blue. 34. Understand custom web design steps: Hello, everyone. I just create a step of completing a web design project. This is the essential Estep that we're going to use for create a successful website for our clients. You can use this list and follow the ITF when you design website for real clients and we can use this Estep to complete this course too. First, we have the client meeting. It's for understand the client's goal, needs and expectations. Then create contract. It will define deliverables, timelines and payment terms. Then client agree with the contract, we are going to start the design. As the first step, we will create a moodboard and gather design inspirations and competitors design. In that way, we can check how our competitors use their website to solve their problem and help their customers. Creating moodboard is really important to get inspiration, so we are not just copy web designs, we are going to check the look of that web design and create better version and create a unique website. Then we have to create a sitemap. The sitemap is for understand what type of pages our website have and understand and plan the website structure. Then we have to select fonts for our website. When we select fonts, we have choose typography that match the brand and those fonts should be readable and easy to understand. Then we have to select colors. So we have to create a color palette that align with the brand identity. So did you remember 603010 rule? We will use 603010 rule to create the color palette. Then we have to create UI. It's all about design the user interface with buttons icon and layout. So we use Figma to design those UIs and by creating yes before we design the website, will help us to give clear understanding about the website, look for our client. Then we can get their feedbacks and make necessary changes. Then we have generate content. It's all about write and gather text images and media for website. On client meeting, we can ask content from the client and tell them we use AI to generate content. So while we design the section of website, we can generate content. Then we have to choose a platform. So in this case, we will select WordPress as our platform, and it's about install the WordPress and install necessary plugins and then we have to design the website. It's about build and install the website according to the UI design. Then we will set up analytics tool. It's about install tools like Google Analytics, Google recapture, Google Search Console for check the tracking performance. Then we have to set up forms, which means if we create a contact form, sign up form, form, we have to ensure that it works perfectly. Then we have to improve security. Improve security mean configure SSL certificate, install security plugins and backup plugins. Then we have to improve speed of the website. We will use plugins to do this. After that, we can load the website and then if you provide after support, that will be the last step that we have to take. This is the ETF and most of those ETFs, it's better to inform the updates. It's always better to inform our customer about the things that we did. As an example, if we create a mood board and we can share it with our customer and we can let him to choose sections or share his opinion about the designs. Then while design the website, we can talk to the customer and get feed also when we select images, if client not provide those images, we can collect few image links and share it with the client. He will choose the better image for the website. Having healthy conversation with client and getting feedback from him will help us to complete our websites without getting a lot of revisions. Let's start the design process. 35. Create a project proposal and requirements check list: When you get web design project from a client, you must have a way to get clear information about client requirements and brief idea about the website that you are going to create. Not only that, also, you should clearly define what you provide to your client and how much it will cost and the time frame of the project. To achieve those two tasks, we must have questionnaire list and contract. If you open this complete custom web design resources FEMA community file, you will see the section called Project ICO. In this project Icope we have this table that called web design requirement. When you contact your client on video call or just send text message to your client, you can ask this information and get the response of the clients. In that way you will have all details that you want to design a custom website for your client. When you fill this web design requirements checklist, you will have all the information that you need to get started the project. Also this file is a editable. You can ask those questions from your client or you can share this file with your client by clicking this share button and then select this anyone can to edit, then click on Save and click on copy link. Then let's open this on New Window. Now client can edit this file when log into the Figma. Also, when you do this, you can create a new Figma file. Let's go to Figma and click on New Design file. Then you can just click here and press Control or Command C, then paste it on here. In this way, you will clearly understand the project. In here, you can add the project name like doctor John cleaning like this. Then you can share this file with your customers. Then you can just click here and edit this response when he answers to those questions. After you got all those information, you can create project proposal. This is a simple but effective project proposal that you can use with web design projects and give clear understanding to the client about what you do and how much it will cost and what type of payment method you accept, stuff like that. Read proposal and you will have to change the items on these brackets according to your project. The easy way is press Command or Control F. Then search this bracket like this. Then you can see the places that brackets are located. Not only can change the project deliverables and project duration payment structure, or you can edit all of this information according to your project in next few lessons, I will show you how to edit it for our first project. I will close this one. Also in this web design requirement checklist, if you need to add more columns or add more information, you can just select the pro and press Control C or Command C and control or command V to paste it. Go through the web design requirements and project proposal. Also if you think this web design requirement or project proposal templates need more information or more improvements, you can just send me direct message or commend them and I will update if it's a necessary change. 36. Project 01 check list: Hello, everyone. This is our press project and we will apply everything that we learn here and design custom website from scratch. This project is a fictional one, which means all details of this project for education purpose only and the content that we use for this website are fictional contents. As the first step, we have to gather information and fill this web design requirements checklist. I already did it and let's go through one by one. When you try to collect those information with real customers for your real project, always get their opinion and understand what they need. Then give you a suggestions. This is really important. Don't try to give suggestions or give you versions to them. Just listen to their requirements and then give suggestions an improvement. In that way, you will have a great communication with your customer and you will able to gather the information. In here, first, our question will be what is client name? In this case, the client name is doctor John Bennett and what is your company name? The company name is JB Family Clinic, and what is your email address, JB clinic at mail.com? Do you have a website? If yes, what is the URL? In here, this client don't have existing website, so I set it as NANA not available. Then we have project overview section in here. What is the purpose of the website? The purpose is provide healthcare information, enable request appointments, share health resources for families, increase clinic visibility, and foster community connections. Then we have who is your targeted audience? The targeted audience is local families and individuals seeking reliable healthcare services then parents looking for pediatric care, mental health, and family wellness services. Then we have, what are the primary goal of the website. The primary goals are improve the client's online presence to attract new patients, clearly communicate available services and specialities from families, then provide educational resources on family health topics. Then we questions. Are there websites you like the look of and here we have some website URR always ask your client about similar website to his idea. This is the best way to understand their requirements. Then you can ask what design style do you prefer client may be understand this question, so you can skip these questions or if he know about websites, he will say what type of website they want. In this case, clean and modern layout websites and then do you have brand colors or guidelines? In this case, it will be not available. But most cases, you will create website for existing brands, which means you have to follow the color guidelines and you have to use their own logos. In some cases, they will rebrand their company. In that case, they will not give you brand colors or other guidelines. Then do you have a logo? It's no in here, we have content and features. We have questions called how many pages will your website need? In this case, you have to do your research before you contact the client. Just check similar websites and get some idea about the website. Then find out what type of pages they have and what are the most important pages and stuff like that. But if you don't have any ideas, just ask them similar websites that they like. In that way, you will be able to get some idea. However, if they don't have similar websites or sample website to show in that case, you can do your own research and find website related to this niche and find what they do the most important thing, we are not going to copycat those website. We are going to gather those design inspiration and create a unique website. Now we have name of pages. In this case, we have home about contact blog our providers. Then you can ask, will you provide Earl content? In this case, will show you how to create content with AI. Now AI tools like aGPT Google Bad will play a huge role and they will help us to create awesome content for websites. So if clients don't provide content, we can generate content for the website. So in future lessons, I will show you the professional and best way to chat with AI and generate the details that we want. Okay. Then we have, do you need special features if they need ecommerce functionality like online Ito or if they want to add the chat bot, you can get clarification from asking these questions. However, if they want some features that you don't know that you don't know how to create, you tell them, I will research about it and come back to you. Then you can research about the features as an example if they want a chat board and you can research about it and understand that you can do it or if it cost more, you can tell them it will cost. And that's the way to handle this type of question. And we have interrogation, do you need any interrogations? In this case, need request appointment and contact forms. We are going to create forms in this project, and then we have technical details. I say, do you have a preferred platform? In this case, it will press, but if client familiar with different platform like Webflow, PFI Weeks Studio or just HTML. You can talk with them, and if you don't know about those other platforms, you can give suggestions that why they need to choose Wordpress and if they don't agree, you can still get the project and learn while creating the website. Then we have question like, do you have a domain name and hosting? In this case, it is, but sometimes clients just don't know about domain name and hosting or some clients think we will also provide domain names and hostings. You have to clearly define that you don't provide those stuff and they have to provide them. However, if you are providing your own hosting server and domain as a subscription, you can tell them about that and on contract, you can clearly mention it so they will understand how much it will cost and if they are okay with it, you can provide your own hosting. Personally, when I create website for my clients, I will ask domain name and hosting to build the website. Then we have project deadline. You can simply ask when do you want the website to be launch. Most of client will say within one week, within three days, within two weeks, but we will not able to create custom website within three days because we are going to provide the quality website that help them to make their brand shine online. You explain them about the time frame and give at least three to four weeks as project deadline and try to do it within two weeks. In that way, you will have a happy client and they will trust you service for their next website designs. Then we have budget, you can just what is your budget for this project. So most of time, if you work with the individual client, not with a company, they will ask as the first question how much it will cost. You just get information about what type of website, how many pages do they want and what type of features. And then if you create five page website for $1,000, tell them you need 1,200 and then they will try to negotiate with you and if they negotiate it for thousand, you will be able to do it in your budget. In this case, I just at 7:50 as fictional number. But if you have a brand and if client come to you by checking your video or checking your content, you can charge more from that client. Okay. Now we have the details, and in the next lesson, we will create a contract for this checklist. 37. Use AI for web design: Hello, everyone. AI play a huge role in web designs and other Internet related fields. So knowing how to use AI is a huge plus point and it will help us to get best result within a few minutes. Before KDG PD, and Google Bart, which called now JaminiR we use websites like Lam ISM text to add content as our website that we design for the client because a lot of times clients will not give content for us, so we have to add dummy text. But after 22 22, we can use AI tools like HAG PT and Jamin to generate content for our clients project. Not only that, this tool will help us to reduce our workload and get information that we don't have and don't know. As an example, recently I got website design project aviation company. I didn't know anything about aviation company and the things that I have to add to the website. I simply use JAG PT to generate the content to the website and Cran was so happy about that and he only changed a few things according to his version. Let's learn about to JAG PT to generate what we want. I just go to HGBT and here we can enter the form. Just add in prompt life generate heroon content for healthcare website will not give us better output. So let's try this. Okay, here is the DTs. But if we add proper details and add the DDS that we already know, the result will be better than this. So let's try new chat and let's try to generate it with prom. So I use pre versions of those tools, and pre versions will be enough for our job. So here is the simple rompt that I always use. So first, we have to assign role for hat GPT. Then we should tell what we want to generate, and then we can me three choices. So when we add this information, we have to add everything that we know and we have to add everything that we know to get better results. So let's try it. First, I will say, you are a web designer. Then you are going to design website for HealthCare clinic called Clinical JB Family Clinic, and then we have to assign the task. I want you to create hero section takes with Good CtA CTA is a call to action. And did you remember that we create hero sections on FICMA autoayout and Pigma so then we have to tell what should include on it. Like this website focus to improve the clinic's online person to attract new versions. So if there are more information, we can add them in future. I will add them for now. This will be the prompts, so let's press Enter and see the difference. Okay, think we got three options. Let's only focus on the first one here, health, our priority caring for families, one visit at a time and that's the headline and we have a great subheading at JB Family Clinic. We provide comprehensive care for your entire family and then we have a book appointment to the button. Let's go to simple prom that we already create. It's health, our priority. That's it, then it providing just small sub peddin and it didn't personalize this and it didn't give better options, but in here, we got better and personalized details. So always, we have to assign the role, then assign the tasks and ask for three choices. So in that way, we will get this type of result and we can choose the better one from so the point is, if you think just adding text and get results from the HGBTO Jami, that will not work, you will always have to specify, and in that way, you will get better and personalized results. So in future lessons, we will use a lot of prompts on GBT, and also let's try to use Jamini too. 38. Create a Project proposal: Now it is time to create contract for our project. I go to our community profile and here we have project proposal. I just copy and click here, then paste like this. Okay. Now I will put it here. All right. Now first we have to add the name of the project. Name will be company name. Then we will have to add the freelancers name. I will add my name here. I will have to add an email. I will just add fake email like test at mail.com and in here, we have to add clients name and our web design request, we have the client name copy and paste it like this. Now let's create the project overview. To create this part, we can get the help of the chat G PT. Let's go to GVT and click on New chat. So here is our prompt. You can check this prompt on resource asecton you will get two more prompts. So in here, the role is web designer, and then let's go to the website requirement. Here you are creating a website for B TENing and I want you to create project overview for for contract of JB family clinic website. Then let's add here is more information. In here, we can add information like purpose of the website. I copy the client response like this, then paste it. Actually, let's page this part first, like this, then in here. What are the primary goals? Let's copy this part and paste this here like this. Then we can get number of five and this will be fine. Now I will also have to say, make it only 150 words and let's press Enter. Okay, here is the option one. So it seems not good. So what we can do is we can click on Edit message. Now I will go here and on here, I will act like I want you to create project overview for contact of JB Family Clinic website that I plan to send for clients in here, let's add only one fifth 100 words and we talk about necessary detail, necessary details, then click Consent and let's see. The first option is the JB Family Clinic website will feature five pages provide healthcare information, facilitate appointment requests, and offer family health resources. The site aim to enhance the clinic's visibility, attract new patients and highlight its services and specialities. Key elements include an easy to navigate interface and educational content to foster community connections. This will be perfect. I will just copy it and let's go here and let's replace this project over like this. Then in deliverables, we deliver the Figma mockups and then we deliver full functional and responsive website responsive in here, I will add like wordpress because we are going to create this website on WordPress. Let's make it WordPress website in technical interrogations, we will have to add ETAf and this first point we don't need it. I will remove it. And in here, we will set up Google Analytics for and Google Search Console, then optimize loading speed and mobile responsiveness, then we will get tag form and here appointment request form, appointment request form, and here we will improve the web security. So you can change this technical integration according to your project. So here is the tap that we are going to do so. You can clearly understand those tu by checking the web design requirements and then the project initiation requirement. For this one, we already called the website design or similar website samples, so only we need logging access for the word web server and website. Website mean wordpressbd lets change like Wordpressabard, like this. If Wordpress isn't installed yet, you can remove this part. So then we don't need requirement documentation because we already have it. I will remove the point you can adjust this according to your requirements and here we have after service support section in here, new features and new pages will required additional charges and discussions. However, I will offer basic website maintenance and minor updates after completion. So if you don't give free basic website maintenance or after updates, you can add the BDS here. Then we have the manned condition. So here we have estimates project completion time. Let's make it as four weeks and then the frame and destructure. So when you create a website, always upfront payment. I usually get 50% of upfront payment. So let's change it here, we have 375 and upon successful website launch will be 375 and project total is 750 like this. Then we have to add the payment methods. In my case, I accept payment method as paneer and Western Union. If you have payal, you can add payal too, but I only offer payment methods, then we have cancellation policy. So here, it says if the project is canceled by the freelancer after commencement, a fully refund of money will be provided to client via the same method it was received. If canceled by the client, payment will be due for all time invested in the project regardless of intended use. So the project proposal is a serious letter and always double check before you send it. So in this case, if I cancel the project, I will give full refund of the money to client and if clients cancel their project, I will not give the upfront payment for the clients. Adjust those policies according to your work pattern and your clients, then we have ownership section. Upon full payment, intellectual property right associated with the website will the client. Then we have this message like the proposal outline the services provided and the anticipated results of the project if you have patients or need additional details, feel free to contact me. I am excited about the opportunity to work together on designing and developing and here we have to add the website name. Here is the website name, the company. Let's add website name like this and if we want, we can add the website. You can add or remove any of these points. If you want to add a new terms and condition, you can just press Enter and you will get this type of point. And in here, if you want to add one more item, you have to click here and click this property. Then you can just duplicate it by press Control C or Command C and control command, like this. This project proposal designed with auto layout, you already have idea about the auto layout, and this will be easy for you to edit as you like. And after you complete this project proposal, you can click on the proposal, and in your right side, you can scroll down. When you scroll down, you can see export section in here, select the type as PDF and click on export project proposal button. So this project proposal is A four size. Click on this, it will look like this, and you can just send this to your client and let them know if they need any changes. And after your client agree with these details, you can start the work. 39. Collect design inspirations: Hello, everyone. It's time to create our moodboard. To create our moodboard, we have to find design inspirations and get screenshot of those designs. In this project, we already have design inspiration that the client give us. Let's open one by one of those UR Okay, now we have to get a screenshot of this website. To do that we can use Google Com extension call, GoFullPage extension, go to Google and search GoFuulPage extension. Then you will get Comm webstollin click on it, and here you will see add to Chrome, click on it. I already did it. You will see this type of camera icon on the Chrome browser, go to the web page and click on it and it will capture the full website design. Here we have issue. In this screenshot, we don't have header parts to get the header parts, let's try to do it again. The header part is not showing, but it's okay. First, I download it as a PNG, I just click here and then what I can do is press Shift Command four on and just highlight or select it like this, then just release the mouse and you will get the screenshot. However, if you use Windows, you can use a tool called InpinTol. Just go to Window and search InpinTolo now let's go to the next website. Click on this go full page extension, and it will automatically get the design, then download it and let's do it for those EAL websites. Now, those are the competitors website, but this is not enough for more you collect design inspiration, it's better to get good understanding of the website. There are websites that we can collect design inspiration. One of them is dribble. Let's go to Dribble. And if you don't have Dibble account, you can click on sign up and I already have a dribble account, so I will log Okay, I logged into my drivel account. Then I can search here family clinic because we are going to design website for family clinic. Search family clinic here, presenter. Then select the web design category here. Then the type of designs, find best designs and open them on New Window. Click and click on Open Link in Nutab and just do it. If you don't see any website related to UNH, just get other designs that related to Rf. In this case, I can find general healthcare website, dental website, and other website like that. Let's open okay. Now here I will get related keywords. So first one is hospital dental, doctor, dentist, I just click on Hospital one, and here we have hospital design. So we can change this filter, too, but I will set it as popular. And here I will again open those designs. Here is a dental website, and then let's go to doctor ands okay. And then again, I will click on this clinic. Now we will get clinic website design. Okay, just do your research and find the website design. So far, I found few designs, so there is nothing to get from here, so I will skip this one, close the tab. Then here, let's scroll down. And here we have full page version. Click on it, and then right click, then click on Save Image As and save it. All of those designs will download to your download folder. And when you scroll down, you will also see other designs from that designer. So always remember we get those designs to get design inspiration, not just copy and paste. So don't just find other people's design and try to copy and face them. Just get design inspiration and create your own version. And I will show you how to do. Okay, let's scroll down. Here we have full page preview, click on it, and right click. We may just save it. Then here we have this one, too, and here is another website. We can save. Okay, copy this one, two, Okay, that's it. Then we can find website designs from them for us. So I will search Tmforus in Google, and we will go this themforus.net, I just click on it. Okay, in here, I can search family Krinic and click on search. Okay. Now you can see websites that has good rating right open them on new window and let's open a few of them like this. Yeah. Also, let's search like clinic to get clinic website. Here, we have a dental clinic, but here we have another clinic I click on it. So those templates are already used by people, which means those template will not unique, but we can find sections and how they design the website. Get insight about the designs that we should use on our website. From here, just click on Live preview, and here you will get the live preview of the website. Here we have few demos. Now, right click on those demos and get those designs like this. Here we have the design. Now what we can do is we can click on this goful page, plug in and get a screenshot of the design. I download it and here we have next one, just cross this stay selector and scroll down. Okay. Then click on this chrome extension to get the design, download it. We have this one. Let's get it designed too. And we have this one too. Let's scroll down and click Download. Then we have another website. Click on Live review, and here is it live review, just click on this R button to get that design to Let's keep going Okay, now I will remove all of those links that I already get the screenshots. Okay. Now another website that we can find design inspiration is Ban dot O Bans, I will search Family Clinic. From here, we will see websites design that related to family clinic, I will open them like this. Let's see those designs. This one is not website design, and here is the website design. Get screenshot from here, just click on it, and then use go full page to get the screenshot. Let's see this. This website is not in English, but still we can find design inspiration. Let's download that one too. Double click and make it bigger, then click on GoFullPage then click on Download Image. We have Dental Clinic website, so let's get this screenshot from it, too. Okay. Now we can find design inspiration from PinterSt. Let's go to PinterRStT. To get designs from Pinterest, you have to log into the PinterSto, I am on my Pinterest account. Now I click on this search button, and in here, I will search Family Clinic website. Then you should change pins to Pins and here we got website designs, click on those designs and I will just click on the design and put it on New Window like this, then right click, click on Save images and save it. I will click here. It's not good. Open them on New window like this. It's open few designs family. So in Pin trust, you can use this image search to get similar website designs. Let's search it like this. When you do it, you will get similar website design, so I will open some of them like this, and then I will open them on New Window. Okay. Now what I'm going to do is I will download of them by clicking right and click on save Images. All right. Now we have enough designs to create mode board. So in next lesson, let's create the mode board. 40. Create a mood baord: Hello, everyone, it's time to create our mood board. I will decrease the canvas size by pressing Control and using mouse scroll wheel. Then in here, I will create a frame. Just click on frame and click like this and let's increase its size like this actually let's add it from here, so we will have more space. Then I will rename it to smooth ball. Multi space. Okay. Now what we can do is change fill color, so silate the frame and change field color to bit darker like this. Okay. Now we have all of this screenshot, so I will just highlight all of them and add them like this. They will be uploaded, so we have to wait till early images uploading successfully. Also it better to put the design samples that client provide us in closer together. So here are the designs, and let's get this moodboard design like this. Actually let's put those two sections like here. Then let's increase the mood board to like this, and now here is one of the actual lets two. Okay, here is one of the design let's put moodboard like this. Wet the designs. Let's decrease the moodboard size and add it here. Okay, now we have this first design, I will just put it like this and it will be okay there, then we have this design just put it here, I will set the inviten size as 15. We can use auto layout, but it's easy us to just put it like this without auto layout, and in here, we have a background. Let's remove it to remove it. I double click on the image, and in here, I will say to crop. Now we can crop it like this. Here we go. Alright. Then I will put this here. All right. And there are 38 resources as I remember, let's put a lot Okay. So this one has the background, click on it and change it to crop and drop it like this and pop it this and press enter let's put it here. Okay. Actually, it like this. Okay. And here we have another design. Let's put it like this and increase it bit. Let's make it in between sizes 15. Okay, we have more designs. Let's add all of them. This is another design. Let's put it here, put this one. And on this design, we will drop this black bar because it's one theme for us. Nice, let's put it here. Okay, we will drop this one this pen. Now let's do here. Okay. Now, let's put this. Okay, I will add of those designs to this mode board. So now we don't have much spacing, so I click on moodboard frame and press Command and increase the mood board. If you're using Windows, you should press Control. Okay? What we have let's remove the background. This one is the quality of this one is not good, so I will remove it. Let's add them. Now I will just select these screenshots and like here. Let's keep add them to the moon box. So here is the web design that's selected by the customer. So let's put them closer together because then we can get idea about section that this website should have. So in here, we have sign that we only got the full design without hero section. Let's put hero section because the hero section we already got with the snipping tool. Let's find out the design. Let's go to reason reason. Here, we have the head apart, copy, rag and rope it like this, then put teeth like this, then set it like this. Now what I can do is press command G to group it. Okay, now I will put it like this. East aT Okay, here we have the mode board, and in here, we have all the designs that we collected, so we can zoom in and check the design like this. So now we can get general idea about what type of section that we need to have and we can select those section by checking the style of this design. The easy way is first check the websites that provided by your customer. Those are the website of your client's competitors. The find out most common section of those website. As an example, this website has hero section, we are section, why we choose our location, why choose us our locations with the contact form and Google reviews and a footer. Then if we check this one, it has herosection, our services, log section, and in here, we have review section, our provider section and services section. Outta section. Now we can choose those section from those designs. Just go through the design and find out what is the wet section. To do that in Figma, we have a command feature. In the tool bar, you can see this command section, click on it and in those designs, I like this section as our website, hero section, click on this section and set name as hero section. Okay, however, I only get the structure of this design, which means the subheading, main headline and paragraph text will look like this, this button will be put in the bottom. The only thing the text will be in left bottom. Then we have to find about section. To find about section, let's check the design and I will select this part as a section. Presenter when we add comments, we can see all of those comments here. And now we have to find let's see what are the section our competitor website has. In here, next we have choose us section, and if we go to the second design, it don't have much stuff, it has services and choose providers. Let's select section for services. I will select this type of section for services. Instead of adding this arrow, I will add icons related to those services. That's what I say we have to create better and unique version, and now we need to choose your provider section. Let's see what will be good for the I will create this type of section for our providers. Let's our providers. End now we have to find section for testimonios or reviews. Let's find out review section. Let's create this type of section for reviews. Now what we have to add we will have to add block section. So let's find a block section. This will be looks good, so I just click here and let's make this as block. We create this for homepage. Actually, let's not add latest block on the homepage. I will click here and let's remove the command, click on Delet delete it. Okay. Now we have five section for the homepage. Let's select a Footer. Let's find out footer will create this type of footer. Click here make footer, but I will change the design. I only get the structure. So, we need to have this type of section, so we will clearly have the number and we will have a button to request appointment. So let's find out that type of design. This is better. Let's create this type of contact form on the homepage. Let's make it as quick ten. Now we have eight sections. Then let's go to the requirement list and see those sections will help us to achieve our goal. Our primary goal is improve the clinic online person to attract new patients. To do that, we need a strong call to action, the hero section. In this hero section, we will have to mention the CLS number. In here, I will replace this get started with CLS button with number of clinics. That will help users to find number quickly when they visit the website. Let's add it as reply at contact number to Menu Pa. The next one will be clearly communicate available services and specialties for families. We already have the section for services in these services. We will add main services so visitor will easily understand and get the idea about available services. We should provide educational resources on family health topic to do that we have to create a blog section. So let's create a blog section after we design the homepage. So I think we have the section. So now it's time to send these details to client. So when you share this moodboard with client, let's click on presentation so he will check all of those designs and give his idea to select the best design. After you complete the mode board, share it with your client, just click on this share and set as anyone can view and copy the link. Then explain him about this mode board and what are the section that you choose, so he will check this mode board and let you know about his suggestions, and if he like different section, he will select them too. 41. Create website structure: Hello, everyone. Now we select L section that we need on our website from this moodboard. Let's collect all of them and create a single website with attaching of them. To do that first, I click on frame and create a desk of size frame. Then let's increase the size of the frame like this and then I go commands. In commands, we have eight section. So let's click first section, and here is the first section. So I will click on this motol and here I select this screenshot and press command C to copy it and click here and press command V to paste it. And from here, we only need this hero section. So I double click on the image and select crop. Then I will crop it like this, like this and then press Enter. Then just put it like this and increase design. Okay, then we have to find the second section. It's about, so here is the A section. Now I will click on MTol and copy here. Then come here, paste it on like this, then D click on the image and set it to crop then only crop this about section. Like this and press Enter. Okay. Then let's put it to this website like this. Okay. Then what we are going to do is find in the third section. That third section is services and here is the services section. I pass motol and select it, copy it, paste it here, then we only need this services section. Let's crop it and present. Then here, let's add that section. This and increase the section by pressing, shift and increasing. When we press shift, we will able to increase the size without changing the height and width. Then we have to find our providers section. So here is that section. Now I will copy this section. Actually we already copy that screenshot, so I click on MTol and here is the screenshot. I just duplicate it by pressing Command C and command V, then put it like this. Now I have to increase the desktop size, select the desktop and increase it like this. Then I will double click on this and we need our provider section like this and then put it like this. Now let's check fifth section. I review, here we have reviews, just press on Mtol and copy this one, come here. Place it here. Then we have this review section, double de it, settsrop and only get the preview section like this and here it press enter. Okay. Now put it here and press shift and increase it like this. Okay, so let's find the next section. It's footer. Here is the footer. Here is the footer that we are going to add. So copy this one, come here. Pass this one like this. Okay. Then double tap, click on crop and crop this design like this and press Enter. Then let's put it as bottom like that. Then what we have to add is, let's increase the size. We have to add let's select the texto frame and increase its size like this. Then we have to add the last section. The last section is weak contact, here is weak contact section. So let's press motle and salt the section press command C, and press step here, press command, then let's get this section, double tap on it, drop it like this gre center for right now, let's increase this section too, like this. Okay, and put it like this. Okay. Now let's check this design. Let's change this frame name to structure, website structure. Now click on it and click on this present and here is the structure of our website. Now we can design our unique version with this website design structure. I do this because when we create this type of structure, we don't need to create wire frames. We can directly create the high fidelity UI. High fidelity UI means the user interface that similar to actual product. Also, we will not just design this as it is. We will change this design according to our creativity and we will create a better version. 42. Create a site map: Hello, everyone. Now we have the structure of our website on our steps for completing a web design project guide. Next thing, we have to create a sitemap. Let's create one. I will go here and to create a sitemap, we need to have frame, click on frame and click here, then increase the frame size like this, then I will change this name to sitemap. Then sitemap is the structure of our website. If we see some sitemap examples, the sitemap will be look like this. First, we have the home page, then we have the rest of the page. After that, we have the sub menu item. For small website, we don't need the sitemap, but for complex big websites, it's better to have a sitemap so we can understand the structure of the website. Not only that even you create a sitemap for your website, it can be changed when we develop and get more insight from our competitors clients while in the design process. Let's create the site map. Now we have the frame. I just click on text and create a text called home. Then I will increase the size, then let's change the font size to like 42. Okay. Then what I can do is press Shift A to apply auto layout to this text. Remember, we only apply auto layout to this text, not to the frame, only for the text. Now in here, let's increase it. Let's add horizontal padding as like 20 and vertical padding will be ten. Then I will at fill color. Click here and let's add field color like this red color, and then I click on the text and we'll change text color to white. Okay. Now we have homepage, it seems it smaller, so let's change this text to 60. Now again, let's decrease the size of this frame to 2000 let's with 2000 and heights 151500. Okay, let's now let's add it here. Actually, let's change this height to thousand because we don't need the bigger site map. Now we have home here in here. Let's add horizontal paddins 30. Much better. Now we need to create other pages. Those pages will be let's check our requirement. Here we will have the page name. Those are about contact block our provider, let's copy all of them and come here, then duplicate this by pressing and drag it like this. Let's duplicate it for a few times. Then here is the text that I copy it, so I will add it and first we have about, then we have contact, then here we will have block then we will have sorry our provider. Here are main pages of our website. So the home will be first page and about will be the second page, and block will be third, our provider will be fourth and contact will be last page of our website, select all of them and let's make it center. Then I will select all of them, and let's go to position and click on tied up like this. Then I will change field color to like this blue color. So we will easily able to identify homepage other pages. Okay. Now we can add arrows to those pages. On here, I select arrow, let's increase, then click and drag it like this. Okay. In arrow, we can add this style like this, and now we should have a line to create a line, click line and lets click and press shift, then added lineTo, then let's put the arrow like this. Okay. Actually, let's decrease the size of arrow and let's select those two arrows and let's increase the width. Select the arrows and here, let's add 55 is to be, What about two will be Lo like this. Now, I will duplicate them like this. Like this, increase this here Now let's add let's duplicate this arrow and add this. Actually, we don't need this arrow heads. I will make it and here is it. So in our website, we will need to have sub page on our providers. So let's duplicate it, and let's add that other page URLs view profile. Okay. Then I will decrease this font size to like 30, and let's put it like this and let's change this color to like this color. Okay. And now I will duplicate this arrow and let's put it like this. Then duplicate it again, change the position. Okay. Now I will remove the arrow head of this line and only we need this arrow here. Okay. And if you don't have idea about creating the sitemap for your website, you can check your competitor's website and get an idea. For us, here is the sitemap. Now we all the pages that we want to create. Also, in this block section, we will need to have a single block post. I will duplicate this and put it like this. Then I will add it like single block four like this. Let's see our site map, click on the site map frame and click on this present icon, and here is our site map actually why it's not sure should put this. We have to add this line inside the frame. Okay. Now it's look perfect. 43. Select fonts for website: Hello, everyone. Now it's time to select typography for our website. There are mainly two ways to do this. The first method is check your competitors and design inspirations on moodboard and find out what will work best. Let's see. In here, we have seri font for headline and San seri font as the paragraph. We only need two type of fonts, one for headline and one for paragraph. Let's other designs. In here, we have Sanseris header and paragraph and here we have Sansorifont and here again, we have Sanserifont and here we have Ceri font as header by checking our competitors, you can understand which type of typography will work with our website. In that way, my conclusion is use Sanserifont will be better option for headline paragraph I will use two different San Serif font for the website. So the second method is we can ask for AI and get their opinion. So let's do that. Here I am on hatGPT so I click on Newhat. So I just add our prompt so you can find this prompt on resources section, and in here, I will change this as you are a web designer who design a website for JB Family Clinic then here we can add the task so the task will be, I want you to here I have to change creators, I want you to choose Ty for graphy for JB Family Clinic website. Then I will have to provide more info, so I will provide here, here is more info and then let's add the information. We can get those information requirements. So in here, we have the purpose, so we can copy website purpose, target audience, and primary goal to find out best font. So I will select first, I will select this question, and then I will copy this and paste it like this. Press Enter to make a space. Then also copy this and paste it like this. So let's do it here. This. Now for this one, I will remove, give me three choices and then try to generate the output. Here we have the information. For JB family Kenic website, the typography should replay the value of trust, care, and accessibility while maintaining professionalism. Then we have primary types as sunserifFamily, and we got the font names as Poppins and to Lato Lato or Lato. Then we have the reason and here, where should we put? We should put it on headlines, so we can put them on subheadline. Then we have secondary type phase as if family, then we have those two fonts, but the issue is if we add Serif family fonts to paragraph, it may have readability issue, so it's always better to check those fonts before add to website. We also have accent types, but we only need two type of fonts, one for headline and one for paragraphs. Let's go to Google Fonts and check those two fonts. Even though those fonts will not great for the website, we understand the SanseriFont will be good for headline and here it's a Serif fonts family, but when we check here, our mood each and every project has Sun serif type font. Now let's go to Google fonts. Now I am on phones.google.com. Here we can check the suggest fonts. Let's copy the four pins and then we can directly search font here. Here is the four pins font, in here, we can set headline sizes. Let's set it as 55 and here it will be look and 55 regular font will look great on our website. Let's find out the paragraph font that's suggested by GPT, so it will be this one, let's copy the font and come here and search the font and here will be that font. Let's scroll down, and this is the look of it when we add it as paragraph 16 fixer. As I told before, we have to consider about the readability. If we usually use Serif font for paragraph, it will not easy to read for some users. However, some modern fonts will be best for paragraph, even needs Si font type. Okay. Now, according to this mode board, the headline subheading and Paragraph should be sensory fonts. Let's find out Sanserifon just go to Google Fonts and use filter in click the filter. Then here scroll down, and here we will set the font test Sensorif click on and now let's see fonts for our website. I like these fonts, so let's open right click and open it in nib window the latter fonts suggested by HG PT, so let's open it too and just scroll down and find out best font for the website. However, if you already have a logo and brand guidelines, you have to follow them, use fonts that similar to your logo font and if you can't find the A font, just find similar font. Now here I found three fonts that suitable for headline. Now let's find only one of them to do that, here, I can set it as 60 and we will use regular and it will look like this on website. If we go to to, let's set the size as 60 and we will have to use this regular font, regular or the light, the light size is too thin, regular will be good. I will look like this and we found Manro, Mnro font and let's increase the size to 60 and the regular font will look like this. From those three fonts, I will use this latter font asaer font, so I click on get font and it will add to the bucket. Now we have to find font for paragraphs. I will remove those two font and in browse fonts, we select the sensors and now let's scroll down and see some fonts to use. I will open this phone and also this one and this one. Let's scroll down and here it will look in the paragraph text. So if I click on this about and go to about the most of time, we can see where to use this font. In here, it's a public sense is a strong natural type phase for interfaces, text and headline. We can use it as text, which means paragraph, and then if we go here, not here, if we go to this font, let's see it will look like this on the paragraph. Let's see about the details here we have details and let's read it say it's designed for display purpose but kept legible enough to use in the ismll size as well. This one we can use on paragraph. In here, let's put it as medium. When we add medium, it will look much better. Let's check this one and it will look like this on the paragraph. Let's see about the phone say fi tree is a clean yet friendly geometric sensory font for usage in web band mobile lab. It's harded and crees we used for text. It's clear I say we can use it for text. It's perfect for buttons and short label. In upper case, it's perfect for buttons and short labels and I will use this fit font as our paragraph fonts, so I click on Get font, and now we have these two fonts, and I will remove this work then as I remember, we use this four, learn about Google fonts on our previous lessons. I click on Premo and here will be the fonts that we are going to use. Now what we have to do is we have to define those fonts on the Figma file. In next lesson, let's do 44. What is a sticker sheet: Hello, everyone. Let's talk about something really practical and important for web designers. It's Itigai. What exactly is a Itigahi? Think of it like this. It's a collection of design elements that you will use repeatedly when creating a website. Those elements can buttons, icons, logos, color palettes, and even fonts. It's like a toolkit you prepare before designing your website. Not only before designing, you will add more items to Itiga sheet while you design the website. Why do we need the Itiga sheet? Well, when we design websites, we want everything to look consistent so that everything match across the entire website. So let's start to create a style set. Now, I go to our Figma file and I click conframe and create a frame like this. Let's increase it like this. Then I will change the text to sticker sheet. Okay. I Figma, we styles and variables that we can save them for later use. We can create a color palette font, buttons, icon or anything like that on the Itera sheet and save them as variable or Azur. Let's start it. First, we choose our fonts, I will remove unnecessary tabs then click on this card icon on Google fonts, and here we have our fonts. So let's click here, and I will press T, and let's create a section or test called Typography, then highlight it, and let's increase size to 60. Okay, 60 is too much, so let's decrease it bit like 42 right. Now here, I will duplicate this text and I will change this as header and here we can select the header typography that we choose. We choose Lato as the headline typography. Let's copy this and come here. Then in here, I will set it as lato and let's select size as 60, then let's make it regular. Now I will change the text header 60, 60 is the size and regularize the font tweet. Okay. Now we have header text and I will duplicate this let's add in between size as 20. A here, let's add in between size as 30, and here I will add paragraphs. Actually, double click on it and remove this. This is the correct word, and the paragraph text will be let's check the paragraph text. It's Fk tree. Let's select PF tree. Okay, here we have the and here, let's say the size as 200, and regular will be looks good. Let's in between size like one person. Okay. Now we have paragraph font, header font, and let's duplicate this. Let's duplicate it for two times, and here we will have sub subheading, and here we will have bottle. Actually, if we want, we can add font title two, but let's add it like this. Then for sub fdding I will set the font size as 30. Okay, and let's make it medium. It seems too big, so let's make it 25 and regular will be good. Then let's change it to 25 regular. Now we will have to add button size. Paragraph, we have to change this as 20. Then button size will be 20 regular and let's set the case as upper case. Let's make it medium size. Let's get 20. Now I will change the position like this. Those will be the fonts that we use. Also, we can create this in a better way. That is, I will copy this one and I will rename it as header and let's change its size to 30 and let's add this. Then I will put it here. Put it like this, then here we can change the font name like lato and we can do it here duplicate this here and make it subdin like this, then here we'll change the subwdingo font name. The font name is week tree. Now we have to get this and it will be button, button. Then here, let's change it to Petree and make it space as 30 30. And then let's duplicate this one. It will be paragraph, and here it will be fig three to regular. Okay. Now it's much clear. We just add typography to our istigast and then we can create typography variables or etyle variable. So to do that, select the type for gravy and click here. Then in text style, pop up, click this plus icon. I will set it as header and click creative style. I will click here. Let's do this one B easier. Click here and click text style, click this plus icon and add it like this. So let's do it for button text two and click Concreat style, and let's do this for paragraph text two, like this. Okay. So let's add those Style to text, so I will create test like Hello every one. How are you doing? So this text currently is open sense, so I click the text here is typer graphiton. I click this apply Itis and if I select the header, it will change to header text. And if I click C subbedin it will change to subbedin. If I click Con buttons, it will change to button text. Benefit is think we have a lot of text like this throughout the website, we have a lot of paragraph and think we need to change the size of the text on throughout the website. We can easily click on the text that we created on the stylesheet. In this case, it's paragraph text, and here we can click and then we can click on this Edit Style icon. Then here we can change the size. Let's set it a 16 and press Enter. So when I change that to 16, every instant or every paragraph style that we added to the website will change. If we change it to 50, it will change to 50 like this. This is the benefit of adding his types and creating a sticker sheet. Let's set it as two. Now we found the typography for our website. I will decrease this sticker sheet like this. In the next lesson, we will select colors for our website. 45. Create a color palette: Hello, everyone. Let's select colors for our clinic website. There is a two ways to select main colors or primary color for our website. The first method is we can use color emotion guide and find the matching color. Now we are creating a website for a clinic. When we think about cleaning doctors hospital, what type of emotion will be triggered. In here, we have balanced nature, peaceful growth, health in here, health mean nutrition and the green color related to health of foods. However, then we have trust dependable strength. When we think about doctor, we should able to trust him, especially when we talk about family, the trust and dependability is the must so we can choose primary color as blue color. There is another way. That means we can check our mode board. When we check our mode board, we clearly see blue color is visible in everywhere. Then we have white and black colors. The first one method is use color emotion guide and the second method is check our mood board and select the color. Now we select our color as blue and then we have to create the color palette. To create the color palette, I will go to coolers.co and in here, I will click on start the generator and we use 60, 3010 rule for our color usage, we only need three colors as our main color, so I will remove two of them. Now we have three colors. Let's select our primary color that color will be blue color. I will make this blue color a little bit lighter like this, and then we have to select two more colors. One color will be obviously white and second color will be dark. When I select dark color, I will not go for too much dark. I will go for a little bit less dark like this. Now we just selected three colors for our website. Still, we have to do one thing. That is check the readability of those colors. I will click here and copy the color code, and then I go to colors.adobe.com and in here, I click on this is button. Then from here, I will go to accessibility tool and in here, I will select the copied color as the test color. Actually, we need to set this as the background then let's select the white as text color. Et's copy it from here and let's set the white as text color. In this case, it pale. We can't use white on this blue background. Let's check this black color and white color will suitable to do that, I will add this background color as black color and test color as white and it pass all three test and let's change text and background color is still it pass, which means we find two colors. So let's lock those two colors, and now we have to change this blue color. So let's make it a little bit darker like this, and let's copy that color. Then come here and let's put it as text color. So in small test, it still fail. So let's change the color, but it is still failed, so we need to make this more dark. Let's see how it works with this type of color and copy the color present now it passed, which means we successfully selected the primary color. But if this color is not blue color that you like, we can change the color from here and see what type of color that will be suitable. So when we change the color, the ratio will be changed. So when the number is bigger, which means we will have better accessibility, and users will able to get a good look. So I will select this color as our primary color and now we have three colors. Islet this color because it is a bright color and now we have those three colors. Let's go to our Itagia sheet. Here is our Itiga sheet and let's create new text. Let's duplicate this one and change the to colors. Let's add our color palette. To add our color palette, I will just click rectangle and let's create rectangle like this. Let's set with 150 by 150 and we only have three colors. I will dubligate this for three times. And now let's copy those colors. From here, I click here to copy this blue and click on the first rectangle and change the field color to this blue color. Then we have this white color, copy it and paste it like this. When we paste it, the color will be not visible because our background is white. So if we can change this background to different color like this, let's change it to green color or we can add the stroke for this cube or for this rectangle. Let's add Etroke select the rectangle and click on Etroke. I just added the black astro then here we will select our third color. Copy this. Let's test this color with it. When we test it, it still fail, which means we can't use this blue color in black background. We have to use it in only white backgrounds. Copy it, go here and click here, then add it as next color. Now we have colors. So now we can create style. So click here and click on this plus icon, and let's set this style as black, and let's click the white one and click here, click this plus icon and set this color as it and then click on this blue color. Click here, click the plus icon and set it as blue and click on Createtyle. Okay. Now we have our colors and typography. In the next lesson, let's create a logo for our website. 46. Design a brand logo: Hello, everyone. Let's create logo for our website. We have typography and colors. Now let's create the logo. Our website name is BG Family Clinic, so I will just copy it and come here and just paste it here. Then what I'm going to do is I'm going to create a text, preste and create text here. Then I paste this text, then I will remove this family clinic part. Actually, I can remove this one. Then I will change this typography to header. Then I will click on detach Istile. When I click on Detachtyle, I can freely change the typography. In here, I will make it extra bold and let's increase the sides to 78 like this. Then I will change the fill color to this blue color now we have to design the rest of the logo. I will click on T, click here, pace this text that we copy it and here we have family clinic part. Now I will click here and click Chad. Then what I'm going to do is detach the E style, then put it like this. Let's add spacing as 20. Then I will increase more of this JB part. Now I will click on this text and let's click on line bottom. Actually it's okay. Now let's again increase this 20 and let's highlight both of them and click on Align vertical center. Now I will change this family clinic test color as black. Okay. Now what I do is I will highlight those two items and press Command G to group it. And now we just created a simple logo. We can do a lot more things to this logo, but this is the easy way to create a logo and let's create another version of this logo. So to do that, I will again press T and I will add JB like this. Then click here, set as header text and click on the link to detach it, and then let's increase this size to bold. And now let's increase the sizes like 88, Okay. Then we can click T and add the rest of the text and we only get the family clinic part and click here at headline, then we can put it like this. Then we can increase this text as we like. Let's make it 102 and let's add this spacing at six, then we can select the items and click on line horizontal content. Then we can do something like this. Let's make this family as blue color. Then let's select this B part and let's make it as blue color. It's not looking good. If we want, we can just make this Blow part as the blue color. There are a lot of ways we can add some lines around this logo. For now, this will be good for our work. We can do something like this too. Then increase to 50, 50 is too much, 15, and let's change this color to actually let's make it blue. We can do something like this too, but it's 7.5 and then let's click arrow and let's create arrow like this. It's not arrow, it's a line, click on the line, and again, click like this, then let's put this line here and we have to make the size as one. We can do something like this too. There are many stuff to do this. There are many stuff to do, but the simple and easy way is creating this type of logo. I will all of those information. Now I can click on this logo and click on port. Then set the file type as PNG, then increase the size to two x, then click on Download and it will download like this. I will change its name to JB logo. Let's duplicate this one and make this as logo. Now, we just create a simple logo for our website. 47. What is Figma component: Hello, everyone. I FIGMA we have a feature called components. Components are reusable objects that can help us create and maintain consistent design across the website, so we can turn any elements or item on the Figma canvas to a component. So let's component of this logo. To do that, I just select the logo. When I select the logo, I can see in our right side, we have the item that we selected and here we have a small icon that called create component. I just tap on it. When I did that, this logo turned into a component. When you turn into a component, highlight of the item will be turn indigo. If I click here, it will be show as. Let me increase the design. If I click normal element, it will highlight as blue. But if I click on component, it will highlight as indigos. Also in left side layer section, it will say, it is a component. Now how to use this component to demonstrate this, I will just create a frame and let's create another frame. Now think I need to add this logo to this frame to do that, we have a easy method to use it, we can go to this AZA tab in our left side. I just click on it and when I click on it, I may see libraries here. If I want, I can just search library logo. And the logo will come up or if I click on local asserts, the logo will be here. Now I just have to click on this and click on Insert instant. Now we can edit here. Instance means a copy of this main component, which means if I make changes to this component, it will affect instance of this component. Let's dit this frame to just click on here, click Insert instant, then I will just add it like Okay, to demonstrate the benefit of this component, I will duplicate this like this and then I will click on this detached instant icon. When I click on it, it just turn into a normal element. If I go to file, it just a normal item, and now let's duplicate this one like this and like this. Now think I have to change this JB color to red. So we have two versions. One is a instance of this main component, and here is duplicate item of this logo. So let's change the color. In here, I select the text and let's change this color to like red. I click on detach style from here and change this color to red. When I change that color, it will affect the instance of this main component. So if I change this one oh one, it will change like that. But if you duplicate this normal logo, and let's make changes to this one oh one, this touch better view like this. Okay. Now if we make changes to this logo, it will not affect our duplicate logos. You see, that's the benefit of having a component. Now I will just remove all of them and click here, let's remove the changes and here, let's set the color to blue. In our website, we will going to create 45 pages. So in that case, we can create instance of this component. As we can change the details of this instant. As example, if I change here like one oh one, will not affect main component, but still if I change the color, it will change the color of this instance and if I change here, two it will not affect this edited instance because we edit it and let's try to change the color. Let's change color to blue. Still color will change, I will not change the text because we change the text of this instance. This is the benefit of use component. In future, we will use more components and you will learn more about components, see in next lesson. 48. Learn more about components with buttons: Okay. Now let's try to create components with button. To do that, I will create a new frame and let's set it as desktop frame. Okay. Now here, I will create a button. To create a button, I press on T and let's set button name as button. Name or we can just say label. Then I will increase its size to like 20, and let's change font to railway and click here, then make it uppercase, then change regular to semi bool. Okay, now I press Shift A to create layout or add auto layout to this button and I will set 30 as horizontal padding and 20 as vertical padding. Now I will change fill color to, let's change it to green color like this with darker green. Like this color, then I will add corners like 30, let's make it six. Okay. Now I will change this text color, let's change it to Y. Now we have to make background color a bit more darker like this. Now we have this frame, so I will rename it as button then I will click on this create component and change this button to a component. Okay. Now, as we learned before, we can add this button repeatedly in other places. Let's do it. I go to Asserts and click on Earl component. Here we have the button, then I click on Insert Instance. Okay, here we have the button, and here I will change this text to I learn more about me. Okay. Then if I change this text color to gray, it will change to gray. Like when I make changes like this, it will change to our instance like this because this is our main component, and here is the instance of this component, which means if we go to assess and create more of instance, we can add them anywhere by changing the text, click and we can add this type of button throughout the design. And also, we can duplicate this instance like this still and apply the changes that we make to the main component. I main component, we can create variant. Variant means different version of this button. As an example, let's call this button primary button. This one is a primary button and I think we need a secondary button. And that button shape is same. Only thing it will not have field color in green. Instead, it will have a border of green, and this text will be green too. To do that, we can select our primary component, and when I click select it, we will see this small plus icon, and it's called advarian When I click con, it will create a duplicate version of this button. Then will change the design of this button. Let's add stroke. I just press here and let's add stroke with this color and let's make it too. Now I will change this fill color or remove this fill color. This, then I will change this button text color. Let's change it text color to the same color of this background and it's little light. Let's make it more dark like this and let's add that border color to Okay, now we have the primary button and the secondary button. So let's rename them. So I click on this button, and here I will call this as secondary secondary button. Okay. When I change it and press center, it calls secondary button, and here we have the main button. I called default, we can change this default to primary button. Okay. All right. Now we have two versions of this button and we can create many versions as we want. Okay, for now, let's use this variant in our frame. To do that, I go to ASSETs and here our button. When I button, we can see two, I mean it includes two variants. So I just press on it, and from here, I can select the type of button that I want. So I will click secondary button and click Insert Instant. So here is it, and now we can change this name fine location like this. And now think if we want make this a primary button. So let's think we will have here we have learn more. Here we have learn Me button and find location button. This is the primary button, and this is the secondary button, and I want to make this as primary button. To do that, I click on the button, and in here we have property one, I just click like this and click on primary button. It just change and get all the details of this component. The primary button data. Then if I want to make this secondary, I can just click here and click on secondary button and we can do this to any of these button. This is the benefit of knowing component and knowing how to add variant. Also, let's create another variant. I just press class and for this one, let's change the details, let's first remove the field and let's not create any type border, and let's change this text color to this color. Then let's add icon beside here. Let's add the icon to here. To do that, I go to fins and from here, let's get icon. So I will get icon from plug in. So I just search here font Osome, we got fontosom icons. I just click on it, and from here, let's get icon let's get icon. One arrow. Let's select this type of arrow. Now I just select the arrow and press Command X and cut it. If you are Windows user, you can press Control X and then I press Command V. In your case, it will be Control V. Then we will have design like this. I click on this and I will increase this like this. No longer need this arrow, ALT circle, just delete it. Okay. Now here, I will click on this logo and let's change that logo to this color. Okay. Now I click on this variant and in here, I can change in between size. Let's make it like Okay. Now what I can do is add this to our design. So before we add it, let's rename this button to just click on the button, click on the button, and let's change it to primary secondary simple button, simple button. The name is not important. Okay. Now what I can do is I add this button too. So if I go to AZAS click here and here, change the property to simple button and click on insert instance, we will add that we will able to add that button like this. I go to Fs. And now let's add all of those buttons inside the desktop frame like this. Okay. Now here, I can change the text. Let's change it to go to next step like this. So now if we want, we can just click on the button and change it design like this. See, this is the important thing of knowing about component and having idea about variant. It will help us to keep consistency throughout the website. 49. How to find content for website design: Hello, everyone. I customer is not providing text or image content, we have to find them. First, let's see how to find image content. To do that, we can use free historic image websites like pixadt com or pixabay.com. Those images are royalty free, which means we can use them on our products. In our case, we have to find images related to family clinic. I will just search something like family clinic, and here are the images that we got. I click on these filters and here I will set it as horizontal. Then we only able to filter the horizontal images. I will just select some of those images, so I just open them on New Window. Let's open this one. Now I will go to the pixabay.com and let's search something like doctor presenter. I here I will filter only so just search and find images like this. I already selected the images that we need to complete this project when you design real projects, just find images related to your website niche. Now let's see how to generate content. To generate content, we can use GPT or J Mini. Let's use GPT. I just copy our and let's fill this prompt. So here you are a web designer, and you are going to design website for JB Family Clinic. So let's go to our web design requirement set, let's copy this name, and then I want you to here, we have to add the task. I want you to generate content for each section of the website. I will give you section name, and you have to generate content. Then in here is more info section, we can add all the details that we collected on web design requirements table. So let's start from here, copy this one and let's face this one, then let's go here, past it like this. A here like this, then go here like this. Those are the information that we can provide. Okay, then we give me three choices. We have to change this because we didn't send it to section that we want to get content, so we can can you give me three choices for each section when I give you the section and present, say I am ready to help generate content for each section of the BG family Kenic website. Okay, now I only have to add the section, I will add section like home page rose here we got the hero section. Okay, we have headline, sub headline and call to action. Then if this section is not suitable, we can tell about. I can say, I like option, too, but subheadline and CTA mean call to action. The text on the button is too long. Can you show them? Now I say it's too short. Then I can say it's still too short. And you can you give me only 150 characters subheadline. Here we got the subheadline that has 150 characters. Keep the conversation like this with CGBD and generate the text. However, always read the text that generated by AI before add them to your website. Okay. Now I will see you in real web design and you can get all of these fonts and images from resources section. 50. Design hero section: Hello, everyone. It's time to design our website. So let's start by creating the frame. I will create frame here, so click on frame and then here, let's select desktop size frame. Okay. Now, according to our site map, first we have to create the home page. So I will rename it as home. Then I will bring this website structure to here so we can clearly see those two frames. Okay. Now here, I will add layout grid to this frame. To do that, I click this plus icon and click here, then change grid to column and the column count will be 12. And then let's keep this color. And here we have to add margin. Let's add margin as 140. Data will be 20. Okay. Now let's decrease the opacity of those layout grid like this. Now if I want, I can save it. I just click here, apply style and I click this creative style and let's make this a call grid and present. Now we can reuse that grid data again and again. As the first step, we have to convert this frame to a AutoayoutO we have to add auto layout to this frame. To do that, I can right click and here I can click add OtoayoutO I can click on the frame and press Shift A. When I press Shift A, it added auto layout. Then in here, we have to set it as vertical layout because we are going to design the website top to bottom. Then to this vertical gap between objects, I will make one to 20, which means we will have a space between two section as 120. Then horizontal pattern will be 140 which means content will only available within this section. Let's add top end padding margin as 20. Okay. Now it's ready. First, I will just increase this design and let's add background image to the hero section. Let's create a red triangle, I press on red triangle, click like this, then I will click on this ignoOtoayout, because we are going to add background image. So now I will make WTs 1,440 and let's make heights 800. Okay. Let's put this like this. Now I'm going to add the image to add the image, I click here click on this little down arrow on shaped tos and click on Image video. From here, I will choose Image 04, so I click on Open. And now I will click on the rectangle and that image will be added like this. So now if I want, I can set crop and I can adjust the position. So let's adjust it like this. Okay. Now let's check it on preview mode, so it will look like this. As the next step, we have to add overlay color. Without adding overlay color, we will not able to add text because it will affect the readability of home page. To add overlay, we can just click on this fill and click on AddFll and here we can increase the opacity. What I'm going to do is add the gradient. Radiant mean in one side, we can add darker and other side, we can add lighter color. So let's do it. So the radiant type will be linear. We can change the position like this. So for this one, I will set light color on the top and dark color on the bottom. So let's click here. So here is the light color. Let's set it like 70, and here we have the dark color. So we have to increase dark color. Oh, and from here, I will make it 100. Then we can adjust those colors. So on the top, let's make it bright, let's add like 25 and here, let's make it like 80. Yes. And if I want, I can do it like this. So let's increase a bit more. Okay. Now, it will look like this. So we just add linear gradient and if we want, we can change this opacity to down and make it more light like this. Let's make it like at. Let's click on this I to height our layout grid and it will look like this. Now our background is okay, as the next step, we have to add the content. So let's do it in next lesson. 51. Design menu: Hello, everyone. It's time to create the menu. Before I create the menu, let's create a frame for our whole hero section. To do that, I just click on frame and click on here. Okay. Then what I do is set width as fill container, and let's set height as 800 because 800 is the height of this background. Now this frame bigger than the background. So to fix it, remember, did we add 20 as vertical align the frame on our home frame? So let's set it as zero. When I set it as zero, this frame just fit with the background. Now I will change this name as hero. Okay. Then what I do is I add auto layout to this hero frame, select the frame and press Shift A, and for the layout, I will set vertical layout and let's select the align top center as position and we can change those stuff later. Then I will remove horizontal padding and set it as zero. Then let's click on individual fading. Icon. Then here, let's set it as for the bottom, let's make it zero. All right. Now it's time to create the menu. I am not going to create this type of menu. I am going to create a different menu. So let's start it. First, to create the menu, I will click on frame and click here. Then I will set with a fill container, and let's click Fill and add fill color. Let's add color as white, but it didn't show because we have to put this image above the hero section like this. Okay, now it's showing. Now I click on the frame and let's set height as 130 Okay, much better. We can change those sizes while they're designing. Then I will add corner as 20. Okay. Now in this frame, we will create our menu and it will look much better than this normal Menu, so let's create it. First, I will click on the frame and press Shift A to convert it to a auto layout or add auto layout to that menu. Then I double tap on the frame and change its name to main menu. Okay. Now, let's change the properties. We need horizontal layout because we are going to create left to right menu as this menu so then we don't need horizontal padding, make it zero and we don't need vertical padding to make them zero. Then for now, let's keep horizontal gap between objects as ten. Then I will set a line left center. Then let's add our logo. Did you remember the components lesson, we convert this logo to a component. We can directly access and create instance of that logo using this Assert tab. I click on ASEs and here, I click on Local asserts and here our logo. I just click on it and click on Insert Instant and then I will put it like this. Let's go to files. Now this instance or this logo is outside of our frame, let's add it inside this main menu by dagging it like Okay. Now it's bigger, so we have to change the size to change the size. We can let's check the sticker sheet. Actually, let's press Command X or Control X to cut it and let's put it here like this. Then I will just drag it to here. Then we can decrease the size of this text. It's 84, so let's decrease increase it like this. Let's 40 55 and we have to change this text size like this. Let's make it like 42. Now what we have to do is change this in between size. Let's change it like six and next, let's change this with this. Then let's change. Let's press command or control, then change the size like this and put it center, select those two text and let's make it center and here are center. The logo is still bigger. I? Let's check the logo on present mode. It's still a bit bigger, let's decrease the size, first, let's decrease this text rise to like 50. Okay. Then let's change this to 35. Let's put it like 36. Okay. Now here, click on the middle. Let's change it to zero, like this. And then I click on the main component and press command. If you use Windows, press Control and decrease its size like this. Okay. Now the nu is getting small. The reason is it set automatically to hug, so just change this site to 120. I think we add it as one to 20. Let's see, 120 will be perfect. And now I will put this logo again on the star seat. I just select it and press Command X in Windows Control X, then just come here and paste it like this and put it like this. Okay. Now again, we go to the menu and click on the menu frame, and now let's add horizontal paddins 20. Now it fits perfectly. Let's see it on design and it will look like this. If we want, we can increase the size of this logo, but this look better. Now we have to add menu items to add menu items, we can click on T and click like this. Then I will just add text like this and then let's go to our site map. It first about copy the text and click here. I got the properties of that text while we copy it. So Ipress Control is set to undo the change and just I will type B wood. And then I will click on that text and click here, click on Typography, and let's click on buttons. Okay. Now, what I'm going to do is I will duplicate this for how many times one, two, three, three times. So let's duplicate it. Control C, Control V. Oh, come on, we like this. Then let's add those other texts. We have blocks, so just click here and add Block. Then we have our providers. So let's go here and add our providers. Let's see the text is correct or not by adding to the URL bar of Google Chrome is good, then we have to add contact. Let's add contact. Okay. Content. All right, nice. Now what we have to do is select all of this menu item and press Shift A to create a autoayoutFrame. Now here is that frame, so I will rename it as menu items and press Enter. Okay. Now let's go to the autoayout setting of new item, so let's put in between sides as 20, and we will put all of those horizontal gap and vertical gap as zero. It seems it's perfectly aligned center. Okay. So we forget the home. Why did we forget the home? Let's duplicate about and let's change it to Home. Okay. Now I will change this home fill color to blue color. Okay, now what we have to add is contact details of the clinic. So I want to add contact us number here. So let's add that details. So for now, let's click on the main menu frame and in auto layout, let's add in between sizes like 60. Okay. Now it will look like this. Then I check the design from here, but we can do better. So probably in the next lesson, we will do more stuff. Before I go, let's click on this home frame and did you remember the last time we hide the layout grid, click on this show icon to make it visible again. Okay. Now it will look like this. 52. Design call us element: Hello, everyone. Now it's time to create call us contact number here. To do that, we have to generate fake contact number. I go to GPT, and I will add command like create fake US contact number and Give it's for add to right side of menu. So give clear text to add its present. Okay, this look good, but I don't need available time. I only need to add call us text. I will add command like I don't need open only contact number with CtA type takes CDM in call to action. Let's see, it's like this, but I still don't like this. I will say I won't like call us 247 and add contact number below, but call us two, four, seven must be better than that. Let's see. Okay, reach anytime. Let's say, give me three suggestions. N short version. Okay, let's add this call us 247 and then add the number. So to do that, I will go to the home frame, and here is the place that we want to add it. So I will press T and click here. Then I will add the text. Let's copy it. Here is the first text. I just paste it and let's press Command C and command V obligate it and then pass this text like this. Now what I'm going to do is at Style, first, I will click here and change the typography. Let's set subhding typography. Then here, let's set this like subding typography. Then I always select those two elements and press Shift A to add it to auto layout. Then let's change the position to vertical layout. Then let's put in between sides six. Okay. Now here, I want this class to be bit is smaller and this number should be bigger. I click Conc las 247 and let's change it to button size. That's better. Then I will click here and let's detach the style of this typography of the number, then let's make it bold. Now it's much better. Now what I need is at telephone icon here. Let's do that too. To add it, we need to have a icon. Let's get icon from Figma library. In here, we have actions. I just click on it and from here, I will click on plug in and Widget. And from here, we can get pontosom icon. I just search fontsom Now I just click this pontosom icon, and I think I already installed it, I already installed it. So let's find out icon and add it. Let's get icon code. Let's search like phone. Okay. We have one icon. I just click on this one and it added like this, then I will only select the icon and put it inside our frame like this. Okay. Then what I'm going to do is I will select those two items and pest shift A to make different frames. Here is the first frame that we created for the number section or font section, and here is the second frame. Inside the second frame or inside the second noto layout, we have Claus 247 and that contact number. Then I select the first frame and change it layout to horizontal layout. Then we will get this type of result. Okay. Now I want to create blue background around this icon. To do that, I select the icon and press Shift A and make it Atayou then I click on Align center. First, we add the Outlayou then we make it a line center. Then I will click on plus icon on field color. Then here, actually, I can click directly this blue style like this. Then what I'm going to do is I will add 20 by 20 like this. Now it didn't change according to the changes to fix it, I will change this with to hug content. Now let's make it by two. Two small. Let's make it 15 by 15. Now I will change the corners to 20. It's actually still small, but we may able to fix it, then what I'm going to do is add stroke to this auto layout layer to do that. Now I click on the auto layout, click this plus I can and here, let's select our color as blue. Then I click on this detach style and from here, I will select light blue color. This will work. Then I will increase the size to like ten and let's put it outside, actual let's put it inside and we will change the design more. Okay. Now I will go inside the frame and select the vector. Then I will increase this vector size to 41 by 41. It's 41 by 40. It's okay. Now I will click the vector and change it fill color to white color. Now, let's change it to 30 32 by 32. Like this. If we make this 32. Like this. Now it's much better and hope we have the E space. Here we have six as the spacing. Now let's fix the Alignu because this goes about this frame. To fix it, we only have to click on this main menu and change this 62 auto presenter Now it just adjust according to the Espace that it has. Okay. Now we have full menu like this so we can click on the main menu frame and change left and right to let's make it six. Okay. Let's see. It's like two less. Let's make it like 50. Okay. Now, here is our menu. It looks like it's two compact. So let's fix that first, we can reduce the size of this font like 20 like this, then let's change this cool us takes to 15, 60, then let's click on the menu item and let's make in between size 30. Let's see. Now it's much better and I will see you in the next lesson. 53. Design hero section CTA: Hello, everyone. Now it's time to create this section. Let's start it. First, I go here and click on text, and I just add text to here so let's add text like hero text. Then we should add this text inside. It's already inside the hero section. Okay. Before we do that, in the main menu section, let's rename this frame details. This frame will be call us and it will be call icon and this frame will be let's add on number. Nice. Now let's create the Hero section text or CtA text to do that I press on T or Clec text here and click on here. Then let's a text like Hero. Now I will minimize this main menu section because we are ready. Sign that and now from here, let's select the text and then go to Typography and say header or select the header text like that. Okay. Then let's add the header that is generated using GPT. Here is the headline. I just copy it. So can generate content by yourself using GPT, or you can check the resources section in there. You will see a text file in that text file, you can get the content that we use on this website. Let's add it like this. Now let's add the sub adingT add subheading, I will click T. Sorry. Yeah, I will click T and click like here. Then let's add text like this. Then let's add this text copy it, add it like this. All right. Now let's go to typography and change it to subheadline. Okay, now we have the subheadline and headline. Actually, if we want, we can add another text line and add the paragraph type text, but this is for CtA cod reaction. So Cd action should be clear. Okay, now what we can do is we can create the button. So we will need more than one button. So let's create button and make it a component. To do that, I will go to our Stiger sheet and let's duplicate this and let's call it button Okay. Now I press T, and here I will say, but yeah. Able, then I will select the typography as buttons. Okay. Now I path shift A to add auto layout to this button. And then from here, I will add field color. Let's add field color as this blue color. And then let's select the text of this button, and let's change it to white o, and islect the frame and in this frame, I will change the corner radius as 20. Then for horizontal bddin I will add 20, let's add 30 is bigger. Let's add 20 and top and bottom will be 15. Here is the button. Now we can directly get the instance of this button. To do that, I will go to ASSETs and here I will come to libraries and click here. Okay. Now I will convert this to a component. Before I do that, I will rename this frame as VTN. Then I will click this create component button and it will become a component. Now I will go to our design and here I will click asserts and here we have the button, so I just click on it and click Insert Instant. Now I will go to files, so this button is outside of the frame. Let's add it to the hero frame. Just add it like this. Now let's change this label to request appointment. I will not add today part. Let's add it like request appointment. So when I check it, it seems really small. So let's make it bigger. To make it bigger, you can go here and click on the text. In text, I will click this aligned middle and now click here, then the horizontal padding will be 30, and top and bottom padding will be 25. Is it too much? Let's make. Okay, let's see how it look. Okay, much better. Click here and let's make changes from here so we can clearly see what we can do like this. For this hero section, we should have a bigger button to create it, I will click on the component and from here, I will click this at variant. By clicking it, we can create a variant of our default component, which means it has all the properties of our component, and we can change that property as we like. So let's change it like left and right will be 35 and top and bottom will be 25 yeah, this will be better. Okay, then I click on it. So now I click on the button, and from here, I will change it name to like header button, and press Okay. Now let's go to our button, and from here, we can change the property. It's currently default. Then if I click on header, it will change to the the variant or the variant that we created. Okay, I will select all of them and press Shift A to add auto layout, then I will rename this as CtA. Okay, then here, I will set in between Japa 220 and from here, let's put it like this from here, I will put it like this. Okay. Then I want this to add to the bottom of this hero section. So let's try to do it. So currently, here is the hero section. Inside the hero section, we have the menu, but this CtA is outside of this hero section. So if I close the hero section, the CtA will not close, so we have to add it inside the hero section like this. Okay. Now what we can do is click select the hero section and click on a line top left, and from here, I will set this in between sides as to, then I will make this hero section height as 800. After that, I will add bottom adding as 20. It seems 20 is too small. Let's make it like 60. Okay. It's much better now, and actually let's make it like 40. Okay. Now let's see the look of this design. Okay, here is our design. To make this better, we can add bigger subheadline. Let's try to add bigger one. Actually, if we choose this subheadline on the option two, it will be better. So let's try to add it just like that and then to fix it, I will select the CtA and let's select CtA size as hug container, and here, let's select it as fill actually still we need to make it smaller like this. Let's put it like this. Okay. Now let's see the design. It will look like this. Let's change the corner radius to lie 15. Let's try to do that. I just click here and let's change it 20. No 20, 15. Let's do it for this one, two, and we'll see how it affected to the side. It's much better now. And I click on the background and let's increase the darkness of the background. I click on linear and here I will increase the opacity like unreno here isolate the hero section and in bottom, let's make it like 60. Okay. Now let's see the design. Now it will look like this. We can do something like this, and it will be much better now. 54. Design about section: Hello, everyone. Now it's time to design the about us summary. So let's do that. First, we have to generate the content, so I go to GPT, and here I will tell generate generate about us summary with headline, headline and paragraph with a paragraph with the burden. So we are ready at this command. So now when we give this new command, it will generate the section. Let's add more info, now it's time to generate about us summary section with headline and button. Let's press Enter and let's see, I got three options. Now I want to say, I want to add two buttons in our structure, we have two buttons. Let's Okay, let's read those three options. Okay. I like this first option headline and paragraph and four buttons, I will add one button as learn more and next button as meat tower providers. Okay, let's do this. So here is the text file that I add all the information that I generated with AI, so I will add about summarization to this headline and this paragraph, then we will have to add buttons as learn more and add Learn More button and meet tower providers. It's buttons learn more and second one will be MO providers. Now let's start the design. Now I am on our Figma file, as the first step, I will click on frame and click here. Then I will setFame with that fill then I will add heights. Let's add it like 600. Okay, now we have the section. Then what I am going to do is press Shift A to add auto layout. We just add auto layout to this frame and I will rename this frame as about summary. Okay. Now as the first step, we have to add a image and let's add that image. To add image first, I will click Contract triangle and click here. Okay, our height was changed. Let's click on a summary frame that we already added the auto layout. So let's add this height as 600. Okay, now we also should have to remove the horizontal padding and also vertical padding. Then in here, I will set item in between size as 20. Okay. Now I will increase this image size like this. This. Let's see how many columns do we have? One, two, three, four, five, six. Okay. And for this side, we have one, two, three, four, five, six. Okay. Actually, I will just decrease this size to. Let's set this width as 520. Okay. Now let's add the image. To add the image, I click here and click on image video. Okay, from here, we have to select image, so I was let this IMG zero, three image and press enter. Then here I click on the rectangle like this. Okay. Now what I do is I add corner radice as 20 like this. Let's see it on the design, so it will look like this and let's try to add different image. I click on this red triangle and click here, click on image videos, and let's add this type of image because I don't like this image color. Okay. Now Okay, it looks like this. Okay. Now we will have to add this type of information. Let's add them to add them to do that, I have to create two types of text. Let's generate those text using chat GBT. Let's say IC related action. One now I need to add two text to add around the images, for example, 100% K, we have expert like this. Let's say give me three choices of my English is okay. Let's see what it generates. It's too long. Let's say it's too long. Okay. I like this first option, so I will copy them and let's put it in our document like this. Okay, just added like text around images. Okay. Now let's go to our file, and let's create those texts plus Ist and our first text will be 100% chaos. Let's create another text, and let's put this like this for to get those information. And now I create another text like this, then I will. Sorry, let's create another text. Then I will put text here and 100 per here. Then what I am going to do is click on that text, and in typography, I will add it as header. Then for this one, I will add this as subbedingo. Now for this trusted expert, I will add subbedding. Let's see this font will work. Yeah, it seems it will work. We have space here. I just sing that space, and now I have to add those texts like this to add them, I will just select two of and press Shift A to add auto layout. Then I will click on vertical layout and set it as middle. Then for here, I will just set item in between six like this. Maybe let's decrease to zero. He zero will be perfect. It seems K is too small, so let's see another text from here 100%, let's copy this one and let's try to put that Okay, it seems better than just K. Yep, let's add it like this. Then what I'm going to do is maybe let's try to typography to button, button is too weak. Let's change it to paragraph. Okay, paragraph is much better. Yes. Paragraph is okay. Paragraph size is now what we have to do is add color and add background color. Let's add background color to this frame, select the frame, and let's rename this as 100% K, tag or something. Let's at that like this. Then I will click plus can fill, and for here, I will add Y. Then I will reduce the corners to 20, and now I will go x and click this plus. Now I will add drop shadow and click here. From here, I will set X zero, y zero, and let's make transparency as 15, blur will be 15. Okay. Now I have to add horizontal padin Let's add horizontal padin as six, much better and vertical padding as 62. Okay. From here, let's set it's set it like two Okay, 12 is better. All right, we just create one part. Now what I have to do is I have to select the element that I created, then I click on this IgnoOtoayout, and now I can put it like this. Let's put it here. Let's put it here. We have to add it outside of this about summariection. To do that, I select it and let's add it let's first add it here. Okay. Now what I have to do is bring it down like this. Okay. Now we have that section. Let's put it like like that like this, let's put it like this. Then we have this trusted expert part and for this one, we will have to add a logo. Let's add the logo. To add the logo, I click here and go to plug in San widget. Then click on Fontosm icons here, search is not good. We have nurse. Let's add this nurse. Just click here. Let's put it outside of this frame, just click on this and add it to about a summary like this. Then I will select those two items and press Shift A. Now I just add auto layout to eight. Then I will click on this vertical layout and set it as a line, middle, okay then here we don't need those two phone ALT and nurse frame. We got those two frames when we add icon, so I just remove them. Now I have to increase this size. Let's increase it like this. Let's add it like this will be better. Then for this in between size, let's add it like six. Now let's see this one. This one, we add 12 and six as the in between size. Let's click on this frame and here, let's rename this two trust First tago element like this, then I will come here and change field color. Surely field color is this white color. Then I will go here and on effet, I can add effect like this. Actually, we already have added effect to this 100% care tab, so we can just click on it and on effect, I will press this apply style and press this plus icon. Then I will add it Perfect, 01 and press. Okay. Now here, I can click on this rusted expert tag and from here, I will click on this and click on effXs like this. Then what I have to do is add vertical and horizontal padns like this. Then let's change this size to 20. Okay. Actually, let's add this horizontal pattern to two and vertical pattern will be 220. Okay, it's much better. And then I will change this nurse color to let's change it to blue. Okay. It's look good. Now I have click here and click on this Igno Auto layout. After that, I will just have to put it like this. Let's do here. Okay. Actually, let's put this one here like this and this one in middle like this between size line and here, add it like 60, 50, 50. All right, right. Now let's see the design, so it will look like this. And we always try to create minimalist version, so don't try to add too much stuff. So now it's time to create the text. So first, I will press T and add this type of text. Then let's add the text that we copy it from here. It's on our content. I just copy it and come here. The paste it, then I will change typography to header like this. So let's go outside of this size to fix it. I click here and set this to fill container like this. Okay. Now what I have to do is increase this in between size like this. Let's increases to like 90. Let's increase like 90, not 690. Okay. And now what we have to do is add about summary to do that I press T and create text like this, then I have to highlight those two section and press Shift A. And now we have a new auto layout added frame here, then I change this horizontal layout to vertical layout, and inside this, I will bring this header up and this one will be bottom. So let's change this frame to 22 about summary Okay. Then here I will set the in between size to 20 and this text will be paragraph. Now, let's click here, let's click on our web content text file and I just copy this paragraph like this, then let's put that paragraph and I will change this hug content to fill not fill content container fill container, then it will be added like this. Let's see in real design, it will look like this, and the whole time, I forget to change the fill color. So let's change the filll. Click here and click this black because this is not dark black color. This is a bit light. Let's change fill color to this dark color that is selected in our color palette. Okay. And now from here, we have to put this in the middle to do that we can seal at the a summary and change it position to align left center like this. Now we have to add two buttons. Also, it seems this image is too big, so let's decrease its height Iface command in Windows it should be control. Then I will just change it like let's change it like 500 like this, and then I double click on the image and let's set image like this. Okay. Then I click here and put this here. Okay, now it's much better because we don't have a lot of content to add here, so now it will look like this. And now let's come here and let's add our two buttons. To add two buttons, we can use the buttons that we created as component. So let's do this, to do that. Here, I will go to ASSETs and asserts click here. Then we have this BTN, click on it, and the property will be default because header button is bigger than default button. Let's add devolve button and click on Insert Instant. Then let's go to file, and now we have to add this button inside this about summary t. No, about summary text. So let's add it like this. Okay. Now let's change the button label. Click here and the button label will learn more. Let's add it like this. Okay, now it will look like this, then we will have a button here, too. Let's create that button. In this case, is this one. So to do this, I will create it as a variant of this main button. To do that, I will go to our main component here. You remember last lessons, we create this button. So let's create a variant. To create new variant, I will click on the BTN component and click this plus icon to add a variant. Okay. Now here we need to create this type of button. Creating it is easy, so let's do it. So here, first, I will remove the fill color, and then I click on this label and change it fill color to blue. Then I will select the variant and let's change this variant name to secondary BTN, like this. I think the words are correct. Let's see. Now, the words are wrong. Again, let's change the word like this, secondary tn, present now I click on the variant and here I will change this left and right to like 20 and keep the top and bottom as 20. Then what I have to do is add the icon. Add the icon, I click here and go to Fonosm and from here, I will type like arrow. Okay, those arrows are not good sold. So let's add this type of arrow, click on it and let's find out where adapt Okay. It adapt here, I just press Command X to card it, and then I click here and paste Command V to paste it like this. Okay, now it inside this variant and in between size will be six let's change this color a blue color. Okay, let's decrease the size bit like this. Okay. It's too small. Let's press. Let's keep it this way. And now if we want, we can change this label with bit more because this icon width is bigger, so I will unchange this style or detach the style, then change this to bold. Bold will be okay. All right. Now we have a lab like that. Then I come here and now what I have to do is go to *** in Asats. I click on BTN and from here, I select secondary BTN and click insert. Then I will put it inside this frame that has auto layout, the frame name is about summary text. Here is our bet in or button. I will just drag and drop it like here. I didn't came. Let's try to do it again. I added and now I will change the button position like this. Now I will see those two buttons and press Shift A to create new frame and here I will set it as horizontal layout. Okay, the in between size will be 220, and now I will change this frame as BTN set. I just rename this frame name to TNS, and now I have to change this text. The text will be go to our document. The text is met. Providers copy it, come here and paste it like this. Okay. Now, let's see it in design. It will look like. This is too big, so let's change it size. I just go to variant and let's reduce the weight, select it and change it semivl. Medium. Let's see, let's see, medium will be works well. Then I will increase a bit more of this icon. It's too big. Let's keep it. Okay. Maybe let's make this two not medium to semiv. Much better. All right. Now we just created the A summary. 55. Design services section part 1: Hello, everyone. Now we have to create the services section. Let's do that. First, I will go here and int gB, let's tell now it's time to create services sections. Give me most important services that provide on family clinic and make sure it more than eight services in those vices. I need you to follow this pmtvis name small description, loan description, and also give me headlines title for ServiceonPress Enter. Okay, it's generating Mmm. Now I have to say the small description is too short. Let's add from the small description is too short. Give me a small description that has up to 150 characters. Let's try this. It's better. Here we have the details, this will be the loan description, and I will get all of those details to the file because we can use this small description. On homepage and on a page, we can use this format. So in that way, this will be perfect. So let's go to our document and I will collect all the information. And here we have to set like home page content, like this. Then I will add new section. This will be service section. Okay, to serve a section, let's add these details like this, I will copy all of these details like this. Then I will put and then I will create another section called a page content and add the content that it generated before, this is the content, and I will just copy them for later use. Okay. Now here we have a headline. It generated us a headline. Let's see it's good to let's tell good, can you give me three versions, three choice choices for headline title. Let's this one. Let's get this one as our headline and I will put it here. Okay. Actually, I will put this in Google Doc. Now let's start to design. First, I will go to the Figma file and here as we did before we have to create a frame, and I will rename this frame as our s. Then I will change with fill container, and here, let's say this is 600. Okay. Now what we can do is create this type of design. To do that, I will first click text and this text will be headline. I will make it like headline and then I will duplicate the text duplicate for a few let's only duplicate it for two time. Actually, I forget to add auto layout to this services frame, so let's do that. I press Shift A and then we have to change the height at 600. We are in the services section and from here, I will set this CO because we don't need horizontal or vertical padding, let's add them as C and then I will select those two items and press Shift A to create new auto layout, and I will make it vertical layout, and here I will change this to sng Vs like this. Okay. Then I will just change this takes typography to change it. I will click here and let's make it a sub ding, and then I click here and let's make it a paragraph. Okay. Then what I'm going to do is change the field color. Click here and change this field color as black and change this field color Okay. Now, let's set item in between sizes, 20, all right, all right. It seems it's too big. It seems the item in between sizes is too big, but let's at real content. Here is our title here, then we will have the description like this. Okay, then I will set this text with two container like this. For now, let's keep it like this and I forget one thing. Can you say what is it? It is the headline, so I forget to add headline. Let's add headline. First, isolate our service autoayout and let's make it layout as vertical layout. Then let's press T and let's add some text like this. Then I will go to our document or hat GPT. In our document, we can get the headlines this copy it and let's face it here. Okay. Then let's change typo gravity to header and fill color will be this black color. Okay. Now, I will select this services auto layout and set align top center as the alignment. Then here I will make this space as 20, right. And here, let's try to add it in two so now I want to add this in the middle, so I will set this typography alignment as center like this. Now we have this part first, let's adjust it as we like. I select the single service atlayou and let's add effect. We already have effect, so I will just select it and then add width to this single service to do that, I will increase it like this. Actually, I will put something like this, but it's not permanent. But however, I again select the single services, then let's add left and right paddin 20 and 20 like this. Now if we check the design, we don't see the effect, so let's add field color. When I add field color like white, we can see the effect clearly. Then what I do is I will change this corner radio 20. Okay, so far so good. Now what I'm going to do is add icon like in this one. Let's do that. To do that, I will just go here and let's find icons about pediatric care. Let's open Fantosom. Click here, click fontosom if you don't know about pontosom icon name, you can just search on Google like pediatric autosom now we can see it has children icon, so I will copy the children part and come here. Then let's add it. Actually, it's not showing, but we have a child. Let's see what we can do. Let's see childhood icon. No, we only have a child. Let's get this child. And it's okay to add this type of icon. Figma layout, but in elemento, we can have better icon and I will show you how to get better icon. Here is our icon. I just select only the vector and I will double tap on this single service and put the icon like this and let's remove the unnecessary frames. And here, let's make this bit bigger like this. Before I do that, I will slate those two section and press Shift A. Then it just added to a new auto layout. Let's rename that auto layout as sex and here we have the vector and single service auto layout and then islet single service auto layout and click on horizontal layout like this. All right. Now I will put this in between sizes two and three, like before. Then here, I will click on it and let's change this color to blue. Did you remember our 603010 rule? So for Segan, let's see, actually we did apply the 603010 rule. In this case, we have white as 50 and black color as 30 and this blue ten. But I already told you 60, 30, ten rule is just a rule. So we can break it and every time we create section, we will have to break it and here we have 60 as black and 30 as white and ten as this blue color. Back to work and for here, let's click this contain properties and let's make it as six. Then I will press Shift A to add auto layout to this icon, then I will change its name icon. Then I will add left and right as 20, 20. Actually, we got issue on the icon size. So let's go back and here I will add 60 as, 60 as fixed width, and let's try on here. I will add 20 by 20 like this. The reason is we have fixed on the single service layer. So to fix it, I will create new auto layout or I will add the auto layout to this single service, then I will change service items. Then I will change this with to fill container. Now we can get exact size, today, one, two, three, four, five, set will be height as this and here I will add this height as fill container, and let's make this icon center like this, and we just set with a 120 I think it will be better. Okay. And here I will reduce corners like, make it like 20, and then I will add stroke like this. Then let's change stroke color to blue, and let's increase its ils to actually, we can do this type of design. So let's do that. First, I have to find the size in between size is 20. Let's add that same design style to here. To do that, I will add fill color and blue color. Then click on the icon and the icon color will be white, and then we will have to add Etroke so the stroke color will be light blue. Let's get the light blue color from here like this. Okay. Okay. Now let's see let's find out the size of stroke. It's seven here and's at the size as seven. Okay. Now it will look like this, but we can add more Height less 22. It's added like ten, ten is better, so now we just create a single services section and it will look like this on the design. And here we have a issue. We have to fix that issue. In the next lesson, we will fix them. 56. Design services section part 2: Hello, everyone. So I have better idea for this icon. Let's do it. First, I will select the icon and here, let's make this horizontal pattern as 15 and vertical pattern as 15. Then I will remove this fill color. Then I will copy this Etroke color and add it on the fill color. Then I will remove the stroke to. Okay, now I will select the vector icon, and let's change vector icon to blue. Let's keep the vector icon blue. Let's change vector icon to blue color. Change it like this. Okay. Let's see this design. It will look like this and this effect is not visible in the left side, so let's fix it. To fix it, I go to our home frame and here I will select the service section. Then I click on this IgnoOtoayout. After that, I will increase 20 fixel here. Currently, the width is 1,160, so I will make it 1180 or 70 80. Actually, we have to make it 1,200 because we have to add that extra 20 from both sides. Now I just click on our service frame and press all and now I can see the size that it has to the edge of the home frame. Let's reduce it till 1020 like this and in this side, it will be 1020. Then inside this hour service, we can add left and right padding or horizontal padding as 20. And now if we check the design, it will perfectly align and it is not affected to the shadow or FA. Okay, now for here, I will make this as 60 because it's too close together, so now it's better and now we have another question. That is, if we add a new section, let's add new section like this, it will add inside this section. To fix it, I will just create an empty frame and then I will set the width as filled container and the height will be 600. Then I will rename this frame to our services BG like this. Then if we create a new section, it will be below this frame. So now this is our first service or single service, and this is a repeated object, which means we can convert this to a component and reuse it. If we check here, we have repeated items like this, which means we can create the component of this and use it on page. Let's do that. To do it, I will click on this single service and click on this create component. And now I will just cut it from here and I will go to our sticker sheet, then put it inside the sticker sheet like this. Then I will get this text and let's rename this text as element. Okay. And now for this section, I just click on the service items. So now we have to add this element to that section to do that, I will go to Assens and click here, and here we have single service. I just click on it and clin on insert instant like this and now let's go to file and here, let's put it inside these service items. We can do that like this. Okay. Now I can select this services item section, then go to asserts and then click here, click on this and click on Insert Instance and it will insert it like this. Then I will do it for two more times like this. Okay. Now I go to Pis in Pis, here is the sections. I see that all of them and just drag it this. Okay. And in the service items, I will change it layout to horizontal layout. Actually, I will remove two of those items for now, and then I select the service items autoayout and click on this horizontal layout, and it will look like. This, it seems it's too close, let's set this in between size to 20 and now it perfectly fit. Okay. Now what I can do is duplicate this service item like this. Okay, Again, I will see those two service item layouts and press Shift A to create different group and here I will rename it as service item set and here I will change the in between size to 20 like this. Now it will look like this. Now we have to change the content. Let's change them. I open our document and I will quickly change them like this. I will put this like this and let's change the fast. Okay. Now we just created four of our categories, and my plan is when we hover over this category, the logo image will be highlighted. Actually, we can change this logo image to better. Like if we remove the fill color and add the stroke, let's change stroke color to in here and to blue and let's increase it bit for nine. Let's see it look it look not good. But what if we set like two? Now it look much better, and we will add line icon to this icon. In that way, this will be so much better than this design for now, let's keep it like this. And yes, I just select the component design and you can do that same. Okay. If we want, we can add field color with light blue, like really light blue like this and not that visible, but let's keep it like this. Then we have to change those. 57. Design services section part 3: Hello, everyone. We have a issue here. So if I try to change this icon, let's try to do it. I go to actions and plugins and widget, then font tsm. Then let's change this woman health icon, so I will search like female. Okay, click on it. Now we got the icon. Here is the icon. I will cut it and remove this frame, then click here and try to paste it. When I try to paste it, A, it's always past outside of this component. So if I want to add this inside the component, I can do that. Have a quick solution, but after we do this solution, this instance will no longer instance of our main component, which means if we change the design of this, it will not affect our category here. So let's try to do that. I click on the instance and in here, I click this more actions, and here I will click on detach instance. When I click on Detach instant, it will no longer work as a component. I just a frame that we add to layout. So now I can add icon inside here. So to do that, I can just cut the icon from here, then click on here, paste it like this, and here it. So let's try to add this icon inside that like this. Okay. Now, let's check the size of this icon. It's 60. So now I will change this icon with this. Let's click on this constraint proposition. And now let's change the side to 60. 60 is too big. Let's put it like this. Then I will remove this icon like this. Okay. Then I will click on this icon and change field color to blue. Now this icon size is 120. Let's see the real icon size. Its width 120 and height is 110, let's see height, the height should be 110, like this. Okay. Then I can increase this as I want. Okay. Now let's do the same for this one. Let's try to find the icon like fregan we don't have that type of icon, so let's take here Let's add this hospital icon to this. And when we design the website using Word as an element, we will add better icon. So in here, let's click on the instance of this component, click here and click on detached instance, then click here and card it, then select this section and paste it inside here. Will remove this icon, and then I will set this background to background height as 1,110 like this, then I will increase this size like 60. Okay. Next, I will change field color to blue. Okay, now we have this family magazine. Let's find out family icon in fontosm search, sorry. Let's search like family, family, let's see family. We don't have a family fontosum icon. Let's find different icon or let's find something related to it's at this protection icon to it. I click on the icon, cut it and delete this frame. And here, first, I will select the service item and click detach instance and click here, pace this icon, remove this one, then we have to set the height as 1,100. Sorry, 110. Then let's increase this icon size to six. Okay. Then let's change field color Okay. Now we have four categories, four services, but we have eight services, so let's add this type of slide in button, which means this will automatically change to the next categories within 5 seconds. Let's do it or when someone click on this dot, it will go to the next category set. So let's click here and click Ellips and not here, then I will go inside our service, and then I will add Ellipse inside this. So now it should be let's add it like here. It should be inside this services section, but outside of this services item set, I will put it here. And now let's decrease the size to like 20, and let's change color like blue. It seems we don't have Espace, so let's increase the Espace to like 700 of this service section. Let's add it like 700 and here we have 60, but we can add it less than 60, so I will select this service item set and Ellips then press Shift A to add a auto layout, and then here I can make it like 2020 is not good. Let's make it like 30. Okay. Now what I'm going to do is create three more Ellipse and select all of them and press Shift A and make it you horizontal and space will be 20. Then detach this color and I will change it color to light color. To this color. Okay, and click this one, detach it at this light color like this. Okay. Now let's see the design so it will look like this. And so we add this our services BG, it height is 600, but let's make it 700 like this. Okay. Now we create this about a summary and our services, then we have to create our provider section. Let's create it in next lesson. 58. Generate content for our providers section: Hello, everyone. Now we have to create our provider section. In our provider, we will have the image of the provider and name, roll and small description. Let's create it. First, we have to generate the content. I go to JGBT and here I will say, now it's time to generate our provider section. Give me five providers. Let's add like doctors with name role and soft description. Let's create a loan also loan description. So in here, let's bring this like this because we need loan description for providers. So let's present and let's see what we get. Okay. Here we have the details. I will just copy all of them, and let's go to our content file and pro down let's at this content like this. You will able to open this content file on notepad Wordpad. So let's add those details. Also, you will see images for each doctor on our image file. 59. Design our providers section: Hello, everyone. Let's design this our providers section. Okay, now I will come to the design, and here we have the content, however, we don't have a title. So let's generate Title two. Can you give me title for our providers section? Give me three choices. The choices are wrong, I think. Anyway, I like this one, so I will copy that and actually, let's select this second one. I will copy that and let's face it in here. Then I will say title like this. Now let's go to the Figmfle and here I will create a frame and I will set frame sizes with fill container. Hi, 600. We have to increase the home frame, click on the home frame and pressed command in Windows, press control, and here increase the size. Then for this section, I will press Shift A, and here I will change name to our providers presenter. Okay. Now here, let's add layout as vertical layout and start from top center. Okay. Now here we don't need these in between sizes and here I will add the in between size as 60. As I remember here we add the 60. Now let's create the text. I press on T and let's create this type of text and let's go here and copy these tanks and come here at this text like this, then I will change typography to header and click on the text and let's set with a fill container. Okay, then alignment will be center. Okay. Now it's look good. Now the provider section height was changed, so let's change height again to 600 like this. Okay. Now what we have to do is creating this section. To create that section, I will just create a rectangle like this. Then let's put this rectangle to this side. Then one, two, three, four, then increase it for like this and then let's say height as also that size like this. Okay, then we have to add name, roll and small description. So let's add them. So first, I click on T and set this as name, then again, I press text and set this as roll, and again, press T and add small description like this. Okay. Now here, click on the name and let's change it type to subd and also here, small description will be paragraph and the role will be let's add button text to roll. Okay. Now I will select all three of those items and put it below the rectangle. Then I will select all of those information and press Shift A and a frame and I will change this name to provider. Then I will is this in between size to 20 like this. Now this section is small, let's increase the section like this and now on provider, I will put roll as the top name as the middle and small description as and also it seems the in between size is too long, so let's make it like, it's better. Now what we have to do is add image to here. Let's add the image, click here and click on Image video and in here, we will see provider image and let's add this image and click here like that. Now I select the provider frame and here I will add fill color to white, and then I will effect and I will add this effect like this. Then what I'm going to do is change corners of this image. The above will be two and will be two, then the bottom will be two and two. Let's see is actually no I above it didn't go the right corners, so we have to click on the image and let's reduce the corners of this image. We only need to reduce top corners like this. Okay. Now from here, I will have to add some spacing to add dispasing, I will just click here and let's add six. Okay, but we don't need to apply it to this whole section. We only need to apply it for those three items. Let's highlight those three items. Actually, we will have to add the button. Let's add the button to add the button, I will go to Assens and here we have the BTN, you will see that secondary button and click on insert. Then I will cut it and come to file, and in here, I will just paste it like this. Okay. And this button, we will have to make some changes to make those changes, we can create another instance or add changes to here. The easy ways create a different variant. Let's create a variant. I will increase the sticker sheet size like this and click on variant. Actually, we can click here and then click on variant of then let's remove these paddings like this, like this. Okay. Now, let's rename this variant as card link like this. Okay. Now, let's go here and click on the button, and let's change it to card link. All right. Now I will select all of those four items and press Shift A, and let's rename provide description. Provide a bio, then I will set with a fill container and here I will add horizontal margin as six like this. Okay. Now what I have to do is we have to add space to bottom. To do that, I will click here and on here, I will add spaces 20 Okay. Now if we check it, it will look like this on design. Now if we want, we can convert this to a component. So let's click on the item and click on component to create a component. Okay. Then I will cut this component and come to Style heat and add it on the element like this. I have to come to style heat and paste it like this. Okay. Now, let's go back here, and then I click on ASRs in ASRS, we have the component. I just click on it and click Isa Instance. Okay. Now what we can do is to files and let's put it inside our providers section, so let's and it like this. Okay. Now what we can do is duplicate this. To duplicate it, I will select the provider and press Control C and control V like this and let's highlight those two sections and press Shift A and then let's make it as horizontal layout like this. And again, I will duplicate this one like this. Okay. Now I will change this frame name to prods and here change the in between size to 20. Okay. Now let's add the details to this role, I will change this role to blue color. Come here and click here, then change the field color to blue color like this. Okay, I will effect on the items, and here, let's add the details, and then we can change the rest of the information. So I just come here. Here is the first details, copy it. Change its name. Then again, come here and copy the short description like this and phase the short description like this and here I will set the width as fill container and set the typo gravity to align lab then I will rename this label to learn more. Then more or less rename it as view profile and we have to add the roll. Let's add the. Let's add the roll like this. And I will change this role phone to, let's change it to paragraph. To change it, I will go here and the role text will be paragraph. In that way, it will not look like the link. So now if we go to the design, it will look like this, and let's continue and add the detail. From here, I will copy the name and pace the name here, then come here, copy the roll. Then add the roll like this, then we At the short description. And actually in this actually here, I change it from here. Let's not change it like that. Let's change it from here. In that way, we will able to get it effective for items on the page. So let's do it for this one. And this one. This is the benefit of having auto layout like this. No auto layout. This is the benefit of having components. When I change them, it effect to the item. Then I will here, let's change it to profile. Actually, we can change it from here. Then we change it, it changes. Yep. And here, we have to change the image, click here doctor Michel let's find this photo and here he is click like this, then I will continue. Okay, let's add other doctor details. Here is the details, and let's put it like this. Then let's add the roll. Let's add short description like this. Okay. Now, let's change the photo like this. Actually, it's better to change this doctor image with this doctor according to the name, but let's keep it like this. Then we will see few issues, so let's fix them. The first issue is those sections will not same and we have five doctors here, here, we have five doctors, but we have only space for three doctors, so we will have to add slider to here. We have different height as those boxes to fix it, let's check the size that we want to add, it should be 615. Let's go our component and let's make it height as 615 and we can easily fix it like that. Now if we go to design, it will look like this, but now we need to add this shadow to visible in the left and right. Remember, last time we fixed it, so to fix it, I will select this section, our provider section, and then I will click on this ignotoayo and then I will have to add 40 to this width. Let's add 40. When I add 40 to 1,160, it will be 1,200. Then here I will add Padins 20 like this. Then I will have to put it center. Okay. Now let's see now it's perfectly visible. A here, we have another issue. This view profile is not line, so to fix it, let's find out the longest small description. I think it's this one. Let's find out how much it long is 96. Let's make it like 100. We only come here and click here, then make this heights hundred. Now see what happens. So let's make this text up like this. I just select the text and add this align top on the typography. Now let's see the design. Now it will be perfectly aligned. So far, we don't have any questions, and now we have to add three dots like this for do that, I will just click on here and I will change it name to slide dots and now let's click on Create component. And cut it, go here on the element actually in the styles on element, we just add it. And now let's come here and go to asserts in asserts. Let's click on our slider dot, click on Insert Instance, and let's put this inside our gor reception. In our service, I select in our service and then just paste it like this, and it should be inside this frame like this, it will be pertly aligned. Then we don't need to create it from scratch. We can just go to ASEDs and click on Slider dot and click on Insert Instance and cut it by pressing Command X or Control X and come here. Then we have to add it inside this our provider section. Now I will have to select those two sections and press Shift A, and then I will make it center. Let's see the spacing. I think it should be. It's actually 30, so let's and let's add let's select this one and let's add the item in bits as 30. Okay. Now we will have to increase bit more of this our provider section, so let's increase it. Not this one, select the providers. Let's increase that section like this. And what happened to this? Mm hmm. We don't need to increase this frame 31. Let's select this frame 21. Let's make it like providers container container. Okay. Then I will set it height as hug container. And now it's perfectly here. Here, I will do the same. Actually, I only need to change this to our services container. Okay. Now I will only need to change this our provider section like this. Let's let's see how much it actually, let's make this size to 820 or we can just select this our provider container and check what is the distance in between those two sections. So then I will just decrease its size to 20 like this and here we can do the same. It's 54, let's decrease it and decrease more 20. Perfect. And then we will have to change the size of service BG's change. SletO service BG, perfect. Now we have to add our providers BG too because now if we add let's add ellipse like this, it will appear on here because we ignore auto layout of this providers section. Let's click Con frame and create a frame this frame will be fill container, and height will be 823. And height will be 823. What happened? Here. Then we will have to sedate this provider section and let's bring it up like this match to the provider BG where is our provider? Okay, here is our provider, which is why we just it like our provider G, and then I will put it here like this. Okay. Now let's see the design. The design will look like this. Okay. And in next lesson, we are going to design this preview section. 60. Change the section arrangement: Everyone next, we have to create this review section. But if we check our website, here we have similar patterns. Here we have services, then we have our providers and both of those sections are same and both of those sections have slider. But if we add this review section, this review section also will have slider. That's why my plan is to create contact c section after this our dedicated provider section. After the contact section, we can add the review section and then we can add this footer. To this contact section, I am going to choose this type of design because it will keep consistency of our website. Then we will create a separate page for this form and we will adapt button that feed to that form. Okay, now in next lesson, let's start to design this contact section. 61. Design contact section: Hello, everyone. Let's create the contact section. So let's go to JAD GPT and say, we need to have a quick contact section that has phone number, location, and button to request a request an appointment. Can you generate those information and make them action actionable. Let's see, give me three choices and headline for the section two. Okay, I like the option two, so let's copy the content and let's start to design the section. Here, I will add those details. It's a quick contact section. Okay, now let's start the design. To do that, I go to our frame and select the frame. Let's press command and increase the design like this. Okay. Then what we are going to do is at section like this to do that first, click on frame, click on here. Then I will set with to fill container and let's say to 600. Okay. Now here, my plan is to add image in the right side and add text in the left side. So let's do that. To do it, I press on T and create this type of text, and then before I do that, I have to convert this section to auto layout or add auto layout to this frame, so I just press Shift A and then I will change this frame name to WIC contact then in this frame setting, I will set left and right padding or horizontal fading and zero and vertical fadina zero, then let's set it to a line top left and height will be 600. Now here, I select the text and click here and select it as header. Then let's copy the headline. So here, here is the headline I just copy and paste it here, then we have to add these content. We can add this content as icon box. Let's do that to do it. First I will have to create icon box. Let's press the and let's press T and add text like this. For now, let's change this quick content section as vertical layout. And let's put this down like this. Then I will change text to subdline. Okay. Now, here I will add this features, then I will duplicate this text and let's make this text to paragraph and also I will have to change the fill color to this black color, and we have to do it here also here. Okay. Then I will change this text to call us for immediate assistance or information like this, then I will duplicate this section and put it here and now I will add the phone number. I think this is the phone number that added on the top. Let's see, it's the same. I just press command a phone Mac and control a font Windows and add the text to this search box and here it find a similar content and now I will add it to here, then just click this because we no longer need that. Then I will change this head into, let's make it header, but we will change the font size later. Now what I'm going to do is add the icon to add the icon, I will go here and go to plug in San widget and click CFontsm icon, and from here, let's get on icon like the press here and now we have this phone icon. I just cut it and remove this one ALT frame and come here. Then just paste it. I just paste it inside this pick content, and I pres shift A to add Otolao. Then let's see the size of those icons. So it's 12110. Let's make the same size. Pick here and let's set with a 120 and height as 110. Okay. Then let's make it middle Okay, now increase the size of this icon to do that, I select the icon, click on the constraint propositions, then I will change this to 60 like this. Okay. Now what I have to do is add border to this icon. So let's do that. To do it, actually, I can go to here and check the border. Here is the border, so it's inside size two. So let's add here, reelected stroke blue, size two, and here the corner is two. Okay. Now I will group these three sections together. Select them and press Shift A, and then I will set this with D fill container. Actually, I have to select this one and set it with fill container and looks good. Then I will have to change the fill color. Let's change it to blue like this. Then I will select those two items and press Shift A to add autoa then I will change auto layout to horizontal layout. Then I will go inside this and here select the vector and put the cticon above and select the frame, then set the frame align left like this. Now what we have to do is we can decrease this font size because it seems too big, let's reduce it to reduce it in typography, I will detach style, then here, let's decrease the size. Actually, let's keep that original size. Okay. Also we have to add location section and button that call request appointment. Before I do that, I will add image to here. So let's do that first. And before we do that, we can add name to this section. So this section name will be reachus, and here we will have icon, and here we will have tax icon Okay, now I will add the image to add the image, I will click Contract wrangle and select like this. Then let's find out this image size is 52500. So let's make it 52050520 with 500 s i, then corner will be 20. Okay. Now let's add the image. So to add the image, select the rec wrangle, click here and click Image video. To here, I will select this image five click on here and we can add it just like that. Then I need to put this section in the left side and this image in the right side to do that, I can easily select those two sections and press Shift A, and then I can just select this whole quick contact section and change it layout to horizontal layout. Okay. Now inside this section, I will have to select the text and let's make text with a fill container, and now everything will be looks good. And for the spacing, I will add as item in between sizes. No, no, not that. I will add this item in between sizes, 20, like this. Okay. And here we change the size to 20 like this. Let's make it 60 in between size of these two section. 60. Okay, now much better. Now I will slate this quick content section, and if we want, we can set the align left center like this. Now we can continue the work. As the second section, I will duplicate this reach section like this and here we can add in between size as 20. Before we do that, let's add content for this section to do that, I will open the file. From here, we have to add location section, copy clinic location and put it here. Then copy the actual location. Then I will add that location like this. And for this section, we don't need these numbers. I will just remove it. And here let's copy this text, and let's put it below the location. Duplicate the location text and select it pace the text copy it like this. Then let's try to add link here. Link, I have to go to ASSETs in ASSETs click here and click on Tn and the link will be card link. Card link will be okay. Click on Insert Instance and here our instance and I will just cut it and click here, then paste it and just cut the text and paste this text. We can face the text inside here, but it's too long. We have to add short version of that link to do that, I will go to hat GPT. Okay, here we have the three options. So in three option, I will copy this find us esialzation and just add it here like this. Okay. Now we have to change the icon here to change the icon. I will click here and click on plugins and widget and here, click on Fon tsm icon and here research location Map map icon, click here and add the icon to the canvas and cut the icon. I don't need this frame, then come inside this icon section and paste the icon, remove this icon. Then let's see the icon size, it's 60. Let's make this icon size as six P. Then change color to blue. So far so good and now what we have to do is add the button. Let's see the button text, the button text will be request appointment, and to add this button text, I will not use this type of design. I will just create text and let's add this type of text for now, and let's copy request appointment. Then I will have to add this inside this sections like, Okay, now for this frame 20, I will rename it as I content detail. Then I will rename this unique location. Okay. Then I will duplicate the tanks like this and it not appearing here because the size of this section is 600. I will just change it to 700. Okay. Now, actually, we can select those two items and press Shift A and change this in between size to 220. Then I can add these takes inside that frame. Okay. And let's rename this frame name a contact box like this. Okay. Then let's start to design this section. Isolate this request appointment text and duplicate it, then come here and I will copy this part actually. We can copy it from here like this, then come here, paste it like this. Okay. Then I will go to ASEDs in Assets, click on BTN and click on. Let's find out BTN that's good actually let's default BTN and click on Instance and here I will add the text what will be the text Schedules then I will rename this text. Then I cut this button and go to files inside files, I will highlight this and place the button like this. This should be outside of this quick contact book A. It should be inside. And also this button should inside these too. Then I will select three options like this and press Chief A to make a groove. And now let's add details. For typography, I will select subbeding for test, I will select paragraph, and the button will be this. Actually, if we want, we can add icon here, too. So if we add an icon, it will be perfect. So let's add an icon. First, I will rename this frame 20 to request an appointment, and let's create icon from scratch or we can just copy it from here. Let's copy it from here. I hope you understand how to create an icon. If not, just let me on the commands so I will show you how to do it. Now request appointment layout has a vertical but we need it to be horizontal. So to do that, first I select those three items and press Shift A, and here I will change this as stages. Then we have the icon. So I select this request appointment and change it to horizontal layout. And then we have to change the icon position like this. Okay, then select it and click on this lg left. Okay. Now what we have to do is actually, we have to make this text as fill content and click here and also change this to fill container, and here we have to make this hug content. No no not hug content. It should be fill container and this text layout should be fill container like this. Here we have two section layer, but if it has only one section, it will be great. Let's change other option that JGBT give us. Let's try this one, copy, come here and replace this text like this. Okay. Now it's much better. Here still we have issue. I salt the text and let's change this in between items as to ten. Now it's much better. Now what we have to do is change this icon. Let's change it, go to here, click on plugin and widget and click on antosm icon. From here, let's get is this type. This will be cut the vector from here, then select this icon and paste it inside click here to remove this and then set can height to six actually icon will be 60 and click on fill and click on blue color. Now it seems too close together, so let's make this as twin, not 20, 30. From here, let's make this as 30 like this from here, we will have to change this size to ten. Then let's change this scheduler visit I can type to card link and now it will be perfect. Now we have to add some details to this image. 62. Design review section: Hello, everyone. Now let's design this preview section. Okay, let's go to our design. From here as the first step, I will create a frame, and I will increase this with fill container and height will be 600. Then I press Shift A two at auto layout. Then here I change this name to review. Then I will remove left ten right margin, horizontal padding and vertical pains. Then I will add a text, prest a text like this. Then let's make that text to header like this. Then I again have to select this review section and change the height to 600. Okay. Now I will change this position to align top center like this. Okay, let's go here and let's generate let's say now I want to generate content for review section. Give me five reviews with name of the patient. Then also give me title headline for review section presenter. Here I need three suggestions. Give me three suggestions for headline, not heline headline anyway, what our patients are saying, let's copy this one. Trusted by families like yours. And let's add it to this section. Let's make review review section. Then paste the title here. Let's make it like line headline. Then here we will have to add the review. Copy all of them and come here. Page them like this. Okay. I will say it. Okay, now let's go to the design here and let's first add the title trusted by families like you, then add like this. Okay, now I have to create this review section. Okay, let's do that. First, I create a text and this text will be name, and before I do that, I will select this review section and let's change it horizontal layer, and then this headline will be top. And here we have the name and then review. Okay, name and review. Now what I'm going to do is select the name, change its size to sub din and click on review and change typography to paragraph. Okay. Now will come here and click on Ellipse and create the ellipse like that. When I create it, I will press shift. So the shape will be perfectly aligned like this. Okay. Now I select all of those sections and press Shift A. Then again, I select only those two items and press Shift A to add a different auto layout. Then I select the main frame and make it as horizontal layout. Then I will put this Ellips on the top like this. Okay. Actually this pattern will not work, so I will remove this frame to remove it, I select the frame and then go here, then I select the frame and here I will select remove auto layout, and then I will just put this inside like this and then I will remove this frame and we need to group this reviewer photo and the name. I just select those two section and press Shift A, and then I will make it horizontal layout and set a line left center. Then I select the main frame. Then I will make this as vertical layout, and here I will set it to align top left. Okay. Now we got the design, and from here, I will select this main auto layout to align top left and click here, then make this fill container and change it text to align center. Okay. Now here, I select the frame. Let's rename those stop. This will be preview box, and this will be Avata Avata like this. Okay. Now I will just select the review box and increase its size to like this, like this. Now let's add real details and then add etyle. So I just go to this text file and let's get this name and add name here. Then let's copy the review like this, copy it and pace the review like this. Then set with the fill contain like this. Okay. Now, let's also set the image. I just select this ellipse and click here, then click on Image Video. Then here we will have reviewers Avata. So in here, I select the photo and just put it like this. Okay. Then what we are going to do is select the review box. In the review box, I will set field color as our white color, and then we will add the effects that we already saved. Okay. Now I select the reviews, and here I will set left and right as and top and bottom as six. No, not this one. Not the review section, we have to select the review box, and its horizontal pattern will be six and vertical pattern will be six like this. Again, we have to change the corners to 20 like this. Actually let's at top and bottom as it will look more nice. Now this inside side will be 22. Here, the size will be two. Okay. Then I select the text and change it field color to this black color. I have to do it for section. And here, let's do it at the end, but now we have to add ISAs. To add those five stars in, I will select the review box and let's change this to what happened. Let's make this horizontal layout as. To add the review IAs, I will click here and click on Pontosm icon, and here I will search and here we have stars. I just click this star and come here, cut it, remove the frame. Then select this review box and inside this review box, I will just press the star, and here I will add it like this. Then I will change its color to this golden color. Then I will select the star and duplicate it for five times. Then I select all of them, and let's select all of them. I just press Shift and select all of them, and then press Shift A to add to layout, then I will change it position to horizontal layout, and here I will change the item in between sizes. Let's make it like six. Okay, perfect, and I will keep the size as the size of stars, but if you want, you can just select it and change the width and height. Okay. Now it's look now we can just duplicate them from here or we can create a component. For this one, let's just duplicate this as it is. I just slat the review box and press Command C and command B, like this, then I select those two review box and press Shift A and make it horizontal layout. Then the in between size will be 20 like this. Yes, we have to increase this from one point. We have to do the same here like this. Okay actually let's increase the height, let's increase the height. Let's increase by line 440. Let's do the same here, 440, like this. Then I will add this in between sizes 60, then I will duplicate this again. When I duplicate it, it go outside of this frame, but it's totally okay because we are going to make this as a slider. Okay, good. Let's increase the height, too. Let's try to increase height for 4,040 2,440 like this. Let's do it here, too, for 40 and here 440. Okay. However, we don't have that much bigger reviews, so maybe we don't need it as 440, but let's keep it like 300. Yeah, 300 will be okay. So see the issue that we don't have a component, we have manually adjust the height of those designs. Now, what I'm going to do is if we check on the design, it will look like this, so I will have to change the content and also have to fix this border not show any issues to fix it as we did before we have to select this review section and let's add height as 1,200. Then I will add horizontal patins for both sides and let's fix the issue like this. And Here we have a issue. If you check on the resign, it will look like this, but it has more space to fix it from here. I will click here and make the zero as the side of pain and let's set with a 1,180. Okay. Now it perfectly yes. Now if we see it will look like this. Okay. Now, as the next step, we have to add three dots. To do that, I go to Assets, click on side dot, click on insert instance and let's put it. Let's cut it and go to files. And here inside here, I will press it like this. Then I just press those two items and press A to add the auto layout in here, I will make this as 220 and auto layout will be a line to center like this. Now, let's manually adjust it because this section is too long, so we have to manually adjust it. To manually adjust it, I will remove this frame no, we need to adjust it, I will just select the items and click on Ignotolayout, and I will just manually adjust it like this. Then it will be 20. Okay. Good. And now we have to add background to this review section like this, then the review section will be 600, but we don't need it to be 600. So let's make it contain and let's make it like 500. Let's see, let's see, let's decrease the size like this. Then let's select this one and the height is 492 and where is the frame that we added. This is it. Let's make height 492 and it will be free container. Now let's rename those stuff. Here I will change this to review set and we don't need this frame, so I will just select all the reviews and add it to review and let's change it layout to horizontal layout like this. Then I will review this frame and here I will change this frame to revise G and this frame will be lab one or same day same data, same da tag, and this one will be 24 slash seven tag all of those texts, we have to change the fill color to this black color like this. Now let's add the real gun Let's open file and we have David, copy the text and test it like this. Let's add the image. Then here we have another review. Let's add it here and replace this text. Now change this image like this. Now let's see it in the design. I will look like this, so we can decrease the size of this box. We will do it in the elementor design. Now, let's keep it like this. Now we have section. Now only we have to create the puta section. In the next video, let's design the Puta section. 63. Design footer section: Hello, everyone. Now we only have left to create this footer section. So when I create the footer section, I will create it on dark color, and here I will add logo, and here I will add summary of the clinic, and here I will add social media handle. After that, here I will add useful links. Then this side, I will add this contact leaders. Okay. Let's start. First, I will increase the size of the frame and let's add new frame, and let's make it with a fill container, and he will be let's make it 500 for now, and then I will add auto layout to that, so I will press Shift A, just added the auto layout, then auto layout. Direction will be horizontal layout and here I will set horizontal padding as zero and vertical padin as zero. Then what I do is we have to add black background. If we just change this fill color to black color, it will not set to the size of this frame, what we have to do is click here, click rectangle and click like this, then set with fill and height will be 500 Okay. Now I will click on this Igno Autoayo of this rectangle. Then I can adjust it as I want like this, adjust it like this and here I will be added outside of this frame like this. Then not in the review section just outside of the frame like this and we should click on IgnotlaPut it like this. What happened? Serious Okay, now all good. Here rectangle is here. I will put the retrangle not the top of this, then I will add Itroclor to the rectangle. No Itrolor field color. Field color will be this black color. Then now our field color is same, then we have to add our logo as the first step. Let's go to our style sheet. Here is our style sheet, and here here is our logo. This is our logo, but we need the white logo. Create a white logo, I just slat the logo and in property, I can click on this at variant button and create a variant bring section here I will change this color to set the variant and change the variant name to white logo. All right. Now again, go to the website and here I will add the logo, go to assert Assets. We will have JB logo, click on it, and here slate white logo, click on inserts then I cut TG files inside frame, put it, and let's change this frame name to utter Okay. Now what I have to do is select the footer section like this, then we will have to add top margin as it's at only top margin 60, 60 is too marches kit 30 will be good and item size, I will make it as zero for now. Then I will have to create a text. I press T at this type of text, then from Ty for gab, I will change it to paragraph text and the fill color, let's change fill color to this white color. This text should be inside the footer like this. Now I will see that those two options and press Shift A then I will change this layout to vertical. Here, I need to put this logo about the text. This frame, we will have to change it item in between size to two end. Now next as the next let's add summary to here, let's go to hart GPT, and here, let's say, now I need summary, no, no, I need to design put section, diutertonGive me details. Let's see what type of details that had GPT will generate. Okay, I generate the details like this. Okay, and good. Okay, we got all the details, but I need a summary. So let's say I need summary for clean in 150 characters. Copy, got text. Let's add here. Put a section, some here, change this text like this, then I will set it to fill contain. Now what I have to do is change this size four column. Okay we have to add social media handles here, we have social media link, I will have Facebook, Twitter, Facebook, Sam, Twitter, and link. Let's add the ta I will go here. Now I will click here and click Fontas search pase This pace, I can here, just select it, remove this part then select on the intersection, pace it like this. Pace it below this frame. Let's make this frame clean sum like this. Now here we have just press Shift A to add auto layout. Then I will click on the vector icon and let's change field color to white so we can clearly visible what happened here. So in here, let's rename this saraceb and here I will set it as a line sent and here I will change to hug and the height will be hug content. And now we can change the horizontal and vertical patina 20 is bigger, okay. And now what I do is I will be at field color. Let's add this blue color as the field then radio 20, let's make it by 20. Then let's decrease the corners to nine. Let's here. Not bad, but we can increase this Facebook I just click on the I 2542. Now it look okay now what I have to do is I have duplicate this press sheet, let's select those two icons and press shift A to add auto layout and let's make it horizontal layout. And in between side B 20. And now let's change this vector icon. Let's add link thin. Let's add X Twitter C tweeter. Don't we have new Tita icon? It looks like we don't have new Twitter icon. For now, let's add this old one, and in element, we can add the real one quick here and paste it like this. Then I will remove this Facebook and select the Twitter icon and click on C strain proposition and change with 505250 is a little bit big and decrease the sine. Six will be okay now for high fill let's make hi fill container. With will be two by too small. Let's make it. We only need two. Let's check the width here with 65 77. We can easily 657 like this. Okay. Now we will need to change this fill color to white color. And let's again duplicate this and here let's add linked in icon. We have linked just select the linked in icon, and we don't need this frame and click here, click inside this vector and pace this linked in here. Now we should increase this linked in icon that match to other. Okay. And now let's add Instagram. Go to Font tsm S Instagram. Here, we got the icon and change the Instagram, remove the Instagram frame and click here, paste it like this. This then let's increase this size to change the color to white. Okay, now isolate this set and let's change in between size to two. Okay. Now let's see the look and it will look like this. So if it seems too weak, we can just recrease it by changing the high 60, make it like 65 65. Yep, 65 65 will work all right. Now, you see, now it will look like this. And here we have a white. Let's change it like this. Okay. And now let's change the other section. Actually, I can add actually see the photo section and it's at 30 a horizontal padding. And now let's rename those section, clinic summary and here. So social media. Then we have to add useful links. Let's useful links to do that type ST and here, let's add those type of tanks and let's change it to sub ding the sub edin we don't have sub here let's go judge quickly. Then stat here, let's add text here. Then we have to add our quick link. I will duplicate the t, sle both of those section and press Shift A and change the layout to vertical layout. And here I will change the text to buttons, and then we can add details like home, and this home will be fill in blue color because this is the selected link. Then I will just duplicate them and let's go to our site map and copy those section blog. Then Our providers, our provider, our providers, providers providers, contact about about contact, and then we will have request an appointment hours we don't need our service request and request an appointment. And then and then let's add term and condition page. Okay, now I just select those links and press Shift A, and let's change in between size to 12 and select this frame. And here, let's add it like 30. Okay. Then I will change those color to just select all of them and change their colors to Y. Okay. And here for now, let's add it like 60, but we will obviously change that size. And now let's add our location section. It is our location. Contact copy. And here, let's create another text, press the text, and let's change it typography to subdin again, press Dye text, and from here, let's copy those details. First, we will have phone number, the phone number at the phone number like this, then I will have to select those two sections like this and press Shift A and then change the position to vertical layout. And here I will hit the T and click here, and here we will change this font size to Paragraph. Okay. Now let's add the details. Email. Yeah. Yeah. Duplicate this one at the email. Let's duplicate this for a few times. Just add those dam then again, we will have hours. All right. Now here we have issues, so what if we add it like this? Let's add it like this. Okay. Okay. And now I will select all of those items and press Shift A to add a group, and this in between size will be Datel All right. Now we have those three sections, and I just select the footer section and I will change this in between side to Otto and it will adjust according to the space that it has. And here is that design. We'll have to increase this little bit like this and now decrease this frame size to fit to the footer. Now what we have to do is a copyright section. So let's do that too. To do that, actually, we can use this frame. So to do that, I just increase this rectangle size. Let's make rectangle like footage, B interval. Now here, I will add text where I did it adhere so I just add to the a section. And in this footer section, let's rename those stuff so we can easily understand. So this will be weak link quick rings, and here will be tank in for now we have those inform where is contact in this will be ink This will be contact contact info. Okay. Now we will have those three section. I just press I just select those three section and press Shift A will be putter set, and then I will put a and in this Poa section, I will change it to vertical layout. And now the text go to bottom and here we will set it like fill contain. The inbteen size is 60, that's fine. Now here I will change this tipo gravity to barging typography and change it position to center. Now isolate the puta section in footer section in the vertical padding, I will click here and I will set this zero. Okay. Now what I'm going to do is I will add to layout to this section. I just shift A and then will add 30, 30 to 2020 okay. Now here, let's add the copyright details. Here we have copyrights copyright. No no copyright. We write a 2024, 2024, like this. Now what I can do is I can add a stroke, click on Stroke and here I will change this color to white color and click this one. Not this one, click this one. Let's select only top part and be like this, then I only have to select the puta VG and increase its size like this. Okay. Now we have per weekly design puta section. So I puta set, I have to set the withs will contain something wrong. In here, I will make this 30. Now, let's make it a 60. And in foa set, I will have to add this in between size to Otto like this. Now, it's okay, and here we will not 60, that's like 30. Will look like this. Okay. Now, actually, those icons are too big. Let's remove this and then let's try to add 56 by 60. Let's at 66 by first remove the horizontal and vertical layout, and we don't need a padding and let's change it as 56 by 50 Keep do for all of those items. Again, let's do it fifo. Now it looks like this and her looks good. Now we need to select the homepage and press command or control and put it like this. Okay. Now here our website design. A 64. Design about page part 01: Hello, everyone. Now we have to design about log our providers and contact pages. We successfully created the homepage and now we have those small tasks and to get content for about page, we can use our competitors. Actually, we only need to get an idea of how our competitors create their about pages and what type of content they are used. And by getting those stuff, we can create our own about page. If we go to the website design requirements file, we can see the design inspiration. From here, I will open those competitors account, just double click on here and copy then past on New Tab and I will do it for the all of those competitors. Website like this. Okay. Now here, let's see the about pages. First, we have this website and here we have Autink and this about page only have this section. And if we go here, can we see about page? No, here we don't have any about page, so we can ignore this design. And if we go here, we have about urgent care. And here we have about page. So in this about page, we have about us history, and here we have our mission and values. Then if we go down, we can see our medical professionals and panel of doctors, and we can add this section on our providers page and from here, we can get this section and our mission and value section. If we go here, here we have a section and in this about section, we have content about the clinic and here we have Y Joss and riax&Enjoy then we have details of the clinic. So by checking those is tough, we can get the idea that what we have to add on our About page. And in our guess, my plan is to create this type of section and create section for our mission. Let's do that. To do it, I will go to the Figma design, and in Figma design, I will put this design and let's create a new frame, and the frame will be desktop and I will put it next to our homepage and then change the name to above. Then I will press Shift A to add auto layout, and on auto layout, I will make it vertical layout and here, the in between size will be one to 20, and the left and right padding will be 140 and top and bottom pattern will be zero. Okay. Now we have to add this grid layout. If we check here, we don't have any grid style, but if we click here and here we have already created grid layout, so I can just click on this and click this plus icon. Then I can create style for this grid layout. Let's S is like main grid this. Okay, now if I go to A and click here, we can see the main grid layout. Okay. Now what we are going to do is add this section. So we can just copy those section from here without creating from scratch because now we have clear homepage and we get the approve from our clients. So when we have approved design, we can just copy the content from here. Let's copy this menu to copy it. I can just select this hero and press Command C and paste it like this. Okay. Now, make sure you are at page auto layout set in similar to the homepage autoayout setting. If it's similar, you will not have any issues. And now for the a page, we don't need this button or we don't need this type of spacing. I will reduce this hero section height to 600 like this. Then here we have this white color text, but we can't see them. Let's add background image so we can clearly see it. I'll click on rectangle and click here. Then let's make heights 600 and I will click on this IgnoOtoayout. Then I can put it on here without any issues like this. Okay. Now I will put this about like this before I do that, I have to add the image. So I already created the image. You can check that image on the resources section. Let's add that image. Click here, click on image video. Okay, here. We see images and first project and a page, and here we have image. I just click on Open and click here to add it. Then what I can do is put it behind. But when I put it behind, I don't see this type of black color. So if we go to home page, and here we have linear color that has 80% of the opacity. So here I have to add this linear overlay to this about page. So let's do. Do it first, I click on this plus icon. And here, let's see the setting. Is zero and 84, and the color got this black. So let's add it. First, we have 80 as the opacity and if I click here and click on Linear and here here we have 84. Then let's see 84, zero, and here we have 24. Let's add those details to 24. Okay. Now it's good, but this same style will not match to here because this doctor image is not showing, so let's adjust it as we see it we can drop this. We can drop this to here like this. Okay. And here we may able to reduce the opacity like this and it's much better. Okay, now we don't need this button, so delete the button. Here we have to add the text. To add the text, we have to generate the text and to generate the text, we can use GPT. I opened the hGPT and let's get our prompt. Here we have the first prompt and copy the prompt, then paste the front. You are a content writer. You are a content writer, and I want you to write content for about page of the JB Family Clinic website. Then here is information. So let's add our information about JB family clinic, actually, those information we have on the website content. If we check the website content, here we have the website content. I will just copy those content like this. Maybe it will be enough that we copy the content for here. I will just copy it and then on GBT, I them. Actually, we have content for create loan summary of the categories. So now I want to say actually in here in here, let's say, I want to section. The first section is about us, and the second section is our mission and values. Okay, now presenter to generate the content, and let's see, okay. Now I have to say, I want title for about page and subheading. Need subheading for each section. And actually, we don't need subrit for each section. We only need it for headlines. Okay, here we have title. I will just copy it and come here and click on here, then paste the title like this and let's come here. And pace the subpdin like this. Maybe we need more details to sub peding because this is too low. So let's say subdin need bit more info. Let's Let's copy this one. Maybe it will be a lot of content, but let's see, maybe it will fit. Yeah. It's fit here. And now we have to create this type of section. So I just copy the section and paste it like this. And let's not add this type of content to about page. And here, let's make this in between size as, in between size 90 will be work. And here, let's add about content, and here I will copy the line as the headline of fear like this. And let's copy this content. First, I will copy this and paste it like this, and then I will duplicate it. And here we have this section, just paste that section and actually here, let's make this to like 60 because when we make it like 60, it will have more space. Okay. Now here we don't learn more. We can add this content request to your appointment and here we don't need this button. Okay? Now we have about content and we have to change this image. Before we change the image, let's create the next section. To create the next section, I will just duplicate this one and on here I will change this content name to about three tiers, and here we will have our mission, I think, our mission and values, just copy it, test it here, and what we have to do is put this section first and this image, second, like this. Here let's add those information, just copy our mission and values, put it like this. Then here we don't need subdline, put this takes like this. Let's remove this button. We don't need that button. I will remove this one too, and here we have to add our core values. Actually, let's add it to add it to add it, we can add them just like a list. So what we can do is create new text inside about summary like here, not there inside this. Okay, here we have a subding let's add our core values there like this. Then on here said it as subdin and now I will duplicate it and change it to text to paragraph and here what we have to add is those details first, I will copy these text and my plan is only copy this text. We don't need this much information because user will able to understand this easily if we add simple text like this and I will select the ellipse and create a ellipse like let's make it like 16 by 16. And now let's change this fill color to blue and highlight those two items and press Shift A, then select the horizontal layout and here make it center and the in between size will be 12. Like this, maybe six, six is too close. It will be based. Okay. Now I will just copy it for a few times like this. Now I will add those information like this. Again, let's add the details. Then we have personalized attention. Now I will copy this text and paste it on the bottom. Here we have a issue. The issue is if let's go our mission, the size is smaller than the text. So what we can do is click here and click on content and it will increase like this. Then here let's copy this text and place the text like this. Okay. Now we have about our mission and value section. And I think increasing this image for 600 will be based. 605 20 is okay. Maybe 520 will be okay here, let's do the height 600 like this and we have to now change those images. 65. Design about page part 02: Okay. Now, let's add those images. First I click on this re triangle or the image. Click here, click on maglah Videos and on a page folder in the image file, you can see about us our mission image, just click on it and put it like this. Then on our mission, you can do the same like this. Okay. Now we have about us and our mission sections. Then in website content folder, we can see there are eight categories to add. So let's add them. It's pretty simple. I will increase this about page size, and here we can just copy this section as it is just copy it and paste it like this. Actually seal about page and paste it like this. Why it's not adding O, something wrong. Because we add that Ignotolayo so I just untick it and it fits perfectly. And here we have to change this width. So here we have width as 1001 60, so we have to make this width as the same. So to do that, we can easily remove this left and right padding like this, then it adjust automatically and here, we can just make it fill container and it will feel like this and here we don't need those carousel icons. This will be least like this. Okay. Now we have to add the content. So let's do that. First, in here, we have to add the small description like this, then I will duplicate it, and here we have to add the loan description like this. Okay. And on these takes, we will have to change the typography let's change it like button, button is not going to work. Maybe let's change it to paragraph, and then what if we add underline? Adding underline is not professional and maybe let's paragraph and let's make this regular medium like this. Let's increase the size to 2021, like this. And now I can in between size is 20, but let's make it like 15. 15 will work fine. Okay, we have first category and we have to do the same for of the categories, and I will just copy this text from here and put it here like this. Then pace the tanks at the loan description like this and here we can make this same size and make the align top left as the alignment and let's do the same to here like this. Let's keep going and now we have this third one at this small description, copy small description from here. Ad like dit like here, then copy the loan description, pase the loan description, and just copy just click on this item and click on Copy Property and click here and come here and click on Paste Property. Here in between sizes 15 and also we have to do it to here 15. Okay. Now, then we have to add this one. The small description, let's copy the text from here and paste it like this and put it up and paste it like this. Okay. Now again, here, past property, actually, we have to copy the property again copy property, paste property. Okay, then make it equals item. So now we have this section and we have four more to go, and let's add that four items in the real design. And now what we have to add this footer. So we can just copy this footer and put it here. Actually, I think copy both footer and footer VG and paste it like this. Actually, what we can do is select those items. Click on create component and the component name will be footer. Now what we can do is go to ASSRs, and here we have the footer rag and drop like this. Or we can just click here and click on Istat instance like this. Then let's make the sizes one to 20 and put it like this. Okay, we successfully design the about page. 66. Design blog page: Hello, everyone. Now it's time to design the block page. My plan is to design blog posts like this. Let's start. First, I will create a new frame. Actually, we can just duplicate this about page and remove those contents. We only need the header content and here I will change to block. Now I will go to the har GTP and ask I want block page title and small description. Here we have the title. I will just copy and paste and here we have small description paste it like this. Okay. Now I will use this type of design, so I can just copy this design and edit it. I will just go to fines and here copy our providers and click here and paste like this, then I will put it like this and from here, I will remove this one. Okay, and now I will make the in between sizes, one, two, and and make the left and right equal like this. Okay. Now here we don't need this one, just remove it and we don't need view profile icon to, remove that and here, let's remove this one, two, and here, remove it too. And let's see our design again. Here we have title and small description, then the date of article published. So let's add those in for. Okay, here we should have the date. Let's go to Chat GDP and ask me blog article,sructblogist. It shouldcde include title small description and the date created. Okay, here we have the title. I just copy the title and paste it like this. Then small description, copy the description and paste like this, then here we need to copy this title and place the title this title, not title. It's the date. And next thing is, I want this as two by two because three by three will not have much space, but three by three is okay. Yeah, three by three is okay. Let's keep the three by three like this. But if we want, we can just increase this and add two by two. To by two will be bigger. Let's make three by three and here we have next one. Actually, we don't need for add content for each, so I will paste this for three time before you do that, let's remove those two and just copy and paste for three times. And here we don't need those two items, just remove them. And now I will change this image. I think we already have the images, so Okay, click on the image and click on here and we have the blog page, just copy the text from there and also let's do the same for here. Yep. Now only we have to duplicate this for second time like this and here we have to change this height to content like this. So let's make it a bit bigger like this. Okay. And here we may have to increase this part like 640 and let's do the same for this, it's actually 645. Let's do same here. Okay. Now the block part looks good and go to ASRs and we have to add the footer. Let's add the footer like this. Let's make it one and here reduce this like this. Now we have block about ten block pages. Now we have to create the contact page. 67. Design blog pagination: Our issue in the blog page. I think you have 100 blog post on your website. If someone come to this blog page, it will load all the blog post. There is two way to tackle this first one is add function that load only post when someone scroll the website. We have to use JavaScript and PHP to do it, or we can add a pagination, which means we can load only six post per page. If someone want to see more here, we have a pagination and we can click the second and third page to check those so let's create a pagination. To do that first, I will create a frame and let's increase this frame size to here because we add this content asigno auto layout. Now here we can add the pagination. To do that, I will create a new frame, and it goes here because our frame in between size or in between space is one to, here, one to 20. Select that file. Here is the one and I will add the width as fill container. Okay. Now here we can click on IgnoOtoayout and put it here, so we have to do it. Then I will create a rectangles created here and actually, let's add auto layout to this frame and set it as horizontal layout and here, let's remove this left and right details. Let's make it a zero and the frame should be not fixed with the frame should be like this and here, let's make content in the middle and now I want to add left right arrow, first, let's add left arrow. I click here and on font tsm, let's get this arrow and I see, here we have the arrow. I remove this and click on here. Okay. Now I don't need actually I don't need this one. Now I can just click this arrow and press Shift A to add ayo, then make it middle. And let's add left and right patinas 30, and the top and bottom as also 30. That is too big, maybe twin will be the size. Okay. Now I will add corner radius as Let's make it l two. Okay. Now we have to add background color. In fill, let's add background color. Actually, we can add this light blue color and the corners are too big. Let's make it like six will be perfect. Here we have to increase this icon height and let's make icon 202-20-3203 will be fine and they should be 15 and that should be 15 here let's change the field color to White so far so good. And the icon is bit bigger, let's make it like 15. 15 will be perfect and now I will duplate this and then rotate it like this and let's make in bitten sizes. C now what I have to do is add numbers. Let's add the numbers. First, I click on the tanks and add text like here, so let's add it as one and on typography, let's make the text as sub dit. Then press Shift A to add auto layout and add 15 as left and right. I didn't work. I didn't work it so let's add field color. So let's add this field color. So we have to increase this I can left and right details like this and here 15, here, 15, maybe let's make left and right as 20, not going to work, maybe let's increase it manually. Corners will be in and here the color will be white. Let's make this as also 45, 52, it will same as those two items and here change fill color to white and the test color will be test color will be this black color and let's add small border. Stroke, the stroke colors, let's make this and this better than before, and let's duplicate it. Now here we have two and phase two, let's make this as Let's Let's make the last one as ten. Okay. Now here we have to make this in blue color because this will be the selected item. So to do that, set the tanks, make the text color as blue, and the background color will be this light blue color. Yep. This will work. Here, let's change this color to this black color here, change it to black color and then copy this stroke style here color stroke style, let's forget it here, just right click and click on copy property and here come and click on paste property. Do the same here. Now I will put this here. The page generation will look like this. We can make this left and right as blue that. Then here we can also make these numbers as blue because those are clickable to blue like this. Here just add three dot is this and make it like this. Here let's make this color to black. And now we have the pagination and this pagination will change on the design, but this will be base the customer check the design, we can explain the pagination feature. 68. Design contact us page part 01: Hello, everyone. Now we have here our providers link. For our providers, we don't need a separate page because here we have our dedicated providers. So when someone or when visitor click on our Providers Link, let's make that person rereact to the homepage here. Now what we have to create is contact. To create contact page, as we did before, we can check our competitors website and let's see their contacts pages. Here we have form address, form address, phone and open hours here we have map and let's go to next one for this one, we don't see contact page. Let's see. We don't have separate contact page, but here we have contact us business hours and details on the footer. Then in this website, we have locations and in locations, we have the location details and in this website, it has contact page and in that contact page, we have form and the office location and business hours, then other information. Let's use similar button to our website too. And let's go to hagiDB and say we need title and small description for contact page. Then say now we need location, open open hours. I think actually we have the location and open nos. Yes, we have those details, so we don't need those information, and I think we can continue. Okay. So first, I go to the fig Muddy sign. We can just duplicate one of this. Let's duplicate the block and put it like this. Then remove this section removal of this because we don't need it here we need to add this footer inside the blob like this. Now here, let's change frame No contact copy the title, press the title, copy the descriptions the description like this, then let's make this type of form. Let's ask generate contact, ask form f. Full name, email, phone, subject message. Okay, this is a good one. So let's make the form and we can use the design similar to this. So first I create frame and let's make the frame with pull width like this, then let's make frame height like 800 be like 800, then press a Okay, then let's remove those unnecessary duh. We don't need any of these and in between size, let's make it a 20, and here we are going to create the form. Let's create text like this and let's say gives form title like this. Let's copy this title the title change the type of gravito subheading, subhding is too sm is too big maybe let's keep the size as a bedding and we have to change the frame fit to 800 like this. Now here, we have to create the text. Let's make text for now like this. Then full name, copy these ts and first we have to create different frames. I will highlight those two item and press hip Ao create auto layout and make it vertical layout. And this layout size will be like let's keep it here. The height will be 800 like this, then put it top and here in between size 20 will be okay and now I press Shift A and then I will change the height to fill container and the height will be maybe let's 45 and keep it like this and then on the left, let's make it like six and in stroke, let's change this color. Actually we already had the best stroke here, copy this color and the stroke color will be this and the corner radius will be six, let's make this with 55. We have to change the fill color of this full name actually, it's two here, it's good. I think we're good, then create next text field. Let's copy the email address text field and paste it like this and then phone number, copy the text and get this by passing and dragon drop like this. Then again, I will copy it for a few times. Then we have subject subject should not optional. Actually we don't need subject here, so let's copy the message. Let's add subject anyway. Let's make subject optional like this. Okay. Then what we have to add is preferred contact method, and this one is drop down. So let's add like this and here we have to add drop down icon like this, not good, not good. And at this, then make it like six is too bad. Now let's make position if no at layout and put it right here, then change color to this text color. This is good. Now what we have to add this prepared appointment date is optional. Let's make this. How did you hear about us? Let's make it as optional actually and here we can duplicate this would it like this. Then upload document. Let's upload document field to add attachment, so people can upload attachment like medical reports and let's note that this check box because we separate add term and condition and privacy policy, if you want, you can add that text. Actually, we didn't create message button. Let's create the message button. It's not button, message field. It's required and here, we have to change this. In message, we have to increase this little bit like 150 will be okay and set tip to upper and upper, let's make it like six on the padding and here again, we have to change this. Okay. Now it's looking okay and here we have to add a button so we can just copy this button and come here, taste the button, not here. We have to select this frame and paste the button. Let's increase the frame with this and here change this text to sub submit the poem is ready. Now what we have to do is add in the business hours and other staff. Let's do 69. Design contact us page part 02: Okay, here we have to add the contact details. If we go to the home page, we can here see the contact details, so we can just copy this and paste it directly on the contact page like this. Now let's edit this section. First, I will decrease this height like this that fit to the design and also we need the location and we don't need this one, so I will remove it and here let's make it like this. Then I will put this as a line left center. Now here we can adjust this like this and then what we have to add is actually, we don't need this fine dust easily icon and now what we need is our open hours, I will just duplicate this one and if we go to the footer, we have open hours here, so I will just copy that and come here and let's change this clinic location to open hours and here we have text Monday to Friday 8:00 A.M. 5:00 P.M. Now we have to change this icon, let's change it. To change it, I will go to the pons.google.com slash icons and here, let's search open hours, maybe hours. Maybe clock will work. Let's add this type of clock and here we have to decrease its size like this and let's find out the size of the icon. The icon size is 106 by 106. Let's change size to 100. Let's make it as 100. Okay, let's make it bigger. Now, let's keep this and click on ENG to download it and here, let's go and click on icon and here NV videos, then add the icon. Like this is actually bigger and the color is not quite right, so let's get our color code like this. And let's go here and change the color code and change this gauge. Gauge let's change with to 200 and click on PNG to download it and come here. Again, click CJ Image. Past it like this. Okay, perfect. Now we have open NAs details and details and then I want to add map here. I will just create a new frame and make the frame size like 500 and I will copy this address. This is actually a fake address, let's try it. Just go to Google and search the address. I don't think it actually there is location like that, so here is it. Now I will press Shift Command and photo get screenshot on the Mac and if you work on Windows, you can go to sniping tool or Snipe intol and get the screenshot. Now, here we go. I will click on this video button and let's go here and put it like this. Now I will decrease fit. Actually, I have to decrease this size like this to fit it or I can increase it and make it visually better and here we go. Now what we have to do is add the footer to add the footer, I can go to Assets and input, click on Insert Instance and add it like this, just like this. Then increase bit of frame like this. Okay. Nice. 70. Design about us page part 01: Hello, everyone. Now let's design this a page in Wordpress element of pro. Okay. Here our Figma design, so I go to the WordPress dashboard, and now let's go to pages R page. Okay, here, let's click on at New Page and the page name will be above. Let's copy this headline as the title. And here, let's paste it and click on Edit with element of all right. Now what we have to do is design the website, and if we check the element or website, we have similar section like this hero section, this homepage section is similar to the about section, which means we can use this homepage section to create a section. I mean the homepage hero section. So let's do that. Also this hero section of the about page blog page and contact page always repeated. Let's create this as a template, which means we can use it repeatedly in our Earl pages. Now for now, I will just publish this about page and here I will open WordPress dashboard in New Window, and from here I will go to template and save template here I will go to section and in section, click on add new section here, let's select template type pass section and let's add the name. I will add the name as hero section for subpages and click on create template. I will just remove this library because we don't need that. Now if we check the about page hero section and the main homepage hero session is pretty similar. We can just copy this section from the homepage. Let's do that. Again, I will open the website in New Window and here click on Edit with element of and just right click and click on Copy and let's go to the template section, hero section for subpage template and right click and click on paste. And it just paste like this. Now what we have to do is remove unnecessary stuff. First of all, if we go here, no, not here, if we go to the Figma design, we can see the height. The height is 600, so let's select the container and here it has 800. I just make it as 600 and then here we don't have button, so let's remove the button, delete it. Now the background image. Here we have this background image. I will click on the background image and on Export, change it to JPEG, and click on Export button. Now let's go to tiny png.com and decrease the size of this file size of this cover image. Now I click on JPEG button to download it here let's go here in container style. Let's change this image. Click on the image and here we have the image and it just uploaded and here, let's just add the ALT text or old text and click Conselect it just added like this and we don't need to do anything and now click on Publish. Now we have this template and if we go to the A page and click on this folder icon, we can see our template in my template section. Currently, we don't have the hero section for subpages template, so I will repass repage When I repaste it here we have hero section for subpages. I can just click on Insert and click on apply. Just like that, it just add. Now only we have to change the text. See, this is the power of the element or template. Let's go to the Pigma design and copy the title. Come here, pace that title here and description, copy the description and pase that description like this. Nice. However, if we check the description, here it has small space like this. Let's do it to do that, we can add R here, we have to increase this and let's add R here. Then let's add R here, then again, we have to add R after this take. Let's here, let's add B like this. Okay, pretty good. Now I click C publish to save. Okay. Now let's move on to the next section. This section is also similar to this section. We can just copy this section from the homepage and add it to here. Let's do. Here our homepage and I will just click on this section and right click and click on Copy. Then on a page, click here and click on Paste. Right click and click on Paste. Okay. And for here, we don't need this image box, so I will select it and delete it. We don't need this one. Just select it. Delete it. Okay. Now it is pretty good and we may have to change some stuff we check here, we don't have two buttons. We only have one button. Let's remove this sub button, and if we check the inbten size, the in between size is 60, and let's click on the main container and Column gap 60, we don't need to do anything and just copy the text first like this, then copy the second text, just copy it to here, then let's copy this text. I will click this text and click Condo Bigate and here I will just add that text and here we have to add the request you appointment button let's add it to here. And after we completely design this website, we will create actions for those buttons. For now, let's add hash tag to those links, and now we have to change this image. On image style, we don't have anything. So I will just click on this image and click on Export and the file type is PEG, then go to Ti PNG, add the image and radio the file size like this, then come here. Con choose image at the image like this, then copy the old text like this and click Conceal and it just added like this and we don't have anything to do. Now we have to go to the next section and creating the next section is also pretty easy. This is the way that when we create the main page, we can just copy the content from there. So I can right click on this about section and click Condupl now what I can do is click on the container and I click on this container inside the main container and put it up like this. Now, let's change the text. Here, let's change this text first like this, then let's copy this text and here past the text. Again, we have to add sumin here so copy the tum title and just duplicate this and paste it. Now one tile let's change this text to sued, like this. Then we have to add the unders list. Let's click on Add element and search list. Icon list will work, add it like this. And here I will remove the items and only keep the one item and then click on this text to edit it and copy it, then paste it. Now click on this icon and we have this circle. Click on insert to insert it and go to style on style, the icon color is primary color and let's see icon size. The icon size is 16 by 16. Make it not 60, 16. The gap see the gap, increase it, press and gap is eight, make the gap eight and on text, let's change color to this typography color. Let's see this text is typography so we can keep the text styles typography or paragraph like this. Okay. Now what I have to do is just duplicate these items for times and add the content. Just copy the content, base the content here and copyst the content. T here, then copy this content and copy this one, pass it. Now, let's change the in between size here space between. Let's see the space between and it's 20. Let's make space between 20. Okay. Nice. Now we have to add this copy paste that tastes like this and we don't need the button, delete the button. Okay now, let's see. Now we have to add this image so we the image, export it as JB EG, click on export our mission of Export button to export it. Then on tiny PNG, add the PNG like this. Then click on JPEG to download this image and now let's go to about and click on this image and click on choose image here, let's just add the image. COVID, past it like this. Now click on select nice. Now what we have to do. Now we have this category is with the loan description. So let's do that. It's pretty easy because already we have that section on the home page, but there is some changes, but we only need this design. So I will just copy the whole section from here and let's go to the a page and let's just paste the content, and here we don't need this one. Delete it because there is no button here, Okay. Now here, let's copy the title. I think the title is same like this. Okay. Okay. Now we don't need this carousel feature. Actually, we can fix this very easily with grid, not with columns. So let's try. I click on add element and I will add a grid like this on grid setting, I will set the column mass too and the row will be two and the gaps will be 20 like this. Then what I can do is add those star. First, we have the actual let's put this grid on the top, so I will click here and let's add it like this. Then from here, I will see that the image box and add it like this on the grid, I will remove the margin and paddings and now let's add this one to here. Then again, we have this one, then this one and now we have to increase the grid row count. Click concrete, go to layout and change row to three rows and add them like this. Now I think we add Dt I will mother carousel, click here, click Condolete and also we don't need this one, so I will just delete it too. Okay. Now this is perfectly align and we don't need to do anything. It just appear like this and now we have to edit the contents. Click on the image box and on a style change the vertical alignment. Top. And now let's add those extra details. First, we have the text on description, let's add it like this and add the BR, I think it should work and add another BR, Okay, nice. And now this text should increase a little bit to do that. We can just add B tag like this. I think it's not working. B. It's not working, we will not able to use the image box because we have this extra line, so we have to create this from scribe or we can use CSS, but adding CSS is the easy way. Let's add the CSS and let's see what we can do. So first I will copy this text and replace this text, and as I did before, I will add two BRO break line like this and here I will add new tag called span. This is a TML tag and flash span to close the span tag, and here I will add the class class equal cgory box sub subheading. Okay. Nice. Now, this is a SMLC. TML class I just created, so I will copy it and click on publish and here I will go to the custom web design US or I will go to the dashboard of our website and here we have appearance and click on Customize. On customize, we can add additionals ESS. To add additional ESS, I can copy the CSS again and come here, ad dot because it's a class and a brackets like this, then I will add font size as let's see, let's see. The font size is 20, 20 x. I think this should work now. And let's go to the about page and repress this and see it worked or not. Okay, it's working. This text is bigger than the window text to confirm it, I will open this new window and check this out, right, go to Inspec and this one. On Inspec, we have span and here we have our CSS class. If I actually same size no, it's same size, so we don't need to do it. Those two items are say this one should be 21. On here, I have to make 21 like this and click on Publish. Now if I check it from here, we should see Test 21, click here and here we have 21 and see with the difference, nice. Now we can do the same for the rest of this image box. Click here and paste this text and let's go to here space the real content, so to get the real content, I will go to our content text file and at text from there. 71. Design about page part 02: I have the categories with small and long description. So first one we already created, and then we have woman health, copy the text and herem interesting. I think we miss it. So let's go to the home page. And on home page, yes, we just ignore the woman, but we may do it because we can get perfect shape with those six items. So let's ignore it. So let's go to this health screening and preventive care. And in small description, I will add this one in loan description here we have the loan description. Okay, then we have pediatric care. So to periatric care, I have to copy this description and paste it like this, then copy the text, the text. Actually, we add the same text to the first item, so we have to change the first item and change the first item details like this, pace like this. Now we have this fifth icon. Let's go here, pace like this, copy the text. You may not see the part that I copy in the text because I open it in my second window like this. Then again, copy this whole text and go to mental subord we have your description. Okay. The last one. Let's copy the format from here and paste it. Now, este it like this, copy this one, paste it like this. Okay. Now what we have to do is put this image top like vertical alignment top and we have to do it for a item, but we can just write with and click on copy and writelPaste type paste this type. Oh, it's not copying, so let's click here and copy. Then click here and paste this type. Nothing happened. Let's go to style. Yeah, I happened, but it didn't seem. Let's go here and do it like this. Okay, click on publish and let's check it in the design. I will look like this and which means we successfully created the designer about section. Now we have to design the block section. 72. Design request your appointment page: Now on our FICMA design and the website, if someone visit the website and click on this call to action button, we should have a page to request appointment. So let's create that page so it will have a request appointment form and little description. So let's go to our GPT chat and say we need no. Let's say, I need to design, copy the text from here. Page and it should have headline headline subheadline and request form small cryption. Let's run this code, and here we have the details. All right. Here is the details, and here is the small description, and we have all the information. So let's go here and we can just get the contact form frame to create this one, so I will duplate the I am like this. Then here, let's change the headline, copy and paste. Then on subheadline, copy the subline paste it like this. Now here we can add a small description. Let's copy this first part and add it like this. Then copy this text and I will duplicate this text, press and drag it and drop it like this. Let's add this content. And here, let's change this text to sun subdding. It will be paragraph and here not height, the width will be fill container like this. And here we don't need this section and we don't need this section, we only need this frame and I will increase the frame height. Actually, I can change the height to half content and it will show earl here I will just increase this to like this and for this form, let's make this form center. I will make it like center and those takes should be centered like this. In this button also should be on the center like this. So on this way, actually adding center is not looking good. So in here, we have huge Espace. For this Espace, we can add image because that will be the easiest way to remove the E spacing. I will select here and add this image like this and let's make the image smaller. So let's add this image with this. Let's increase it like this. And if we want, we can add this text here. Let's cut the text and paste it right here. Actually, we have to add frame to those two items, so press Shift A and make it horizontal layout. Then here put this text above, select the text, and put it above. Then the width will be half, not half. Let's let's adjust the text manually like this. And what about the in between size? The inbetween size is two good. And also this text should go here, this put it above like this and now it seems looking good, and now what we have to do is relate the putter and put the putter to top. Let's make it one, 220 like this, then decrease the size. And here, let's change this image. Okay, on the resources section, find the images folder. Okay, now I click here and select the image video. Then here on the images, you will see first project and request appointment page. And here we have a image, click on Open and addit like this. Okay, now our request appointment page is designed and here let's change this page title to request appointment. Okay. 73. Buying hosting and domain: 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 real 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 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. 74. Install WordPress: Hello, everyone. It's time to install WordPress. I go to the C panel and in C panel, we have soft tacular app installer. I just click on it and here we have Wordpress and from here, I just click on Install. And now here I have to select the details. First, I will select TTPs and without this www dot part, so just TTPs as the protocol, then I will select the domain name. So here is our domain name and here I will choose the latest version of the Wordpress and I will not add any directories. I will just install WordPress in the root folder, and here we can change the sit name and site description. But let's change those ITA while we design the website. For now, let's keep those stuff as it is. And here we have to add admin username and admin password. I will add those details also will add a password. Make sure to remember your user name and password because you should have to use this username and password to log in to the Wordpress and from here, I will change this admin email to working email because currently this email is not working. Okay, scroll down and here I don't need this any extra plugins. Remove the extra plugins and now click on this Install button and it will start to install the wordpress on website. Okay, Wordpress successfully installed and from here, I can click this URL and go to the WordPress website in the administrative URL, I can go to Wordpress like this. From here, I just click on no, I don't want to try to try an ET setup process, and here is our WordPress dashboard. To access WordPress dashboard, we can just at our website URL and then add WP Admin at end of website URL. Now here is our website look like. In the next lesson, we will clear up the Wordpress and remove unnecessary stuff from our WordPress website. 75. Clean up WordPress: Hello, everyone. When we install WordPress for first time, there will have some unnecessary stuff. So let's remove of them. First, let's start with plugin. O over here and click on Install plugins and here we have three plugins, so I select all of them and click on Deactivate and click on Apply. Then again, select all of them and click on Delete and click on Apply. Okay. Then let's go to themes. Here we have three themes. Currently, the active theme is 20 to 25, let's click the rest of the teams and remove them like this. Also do it for this one too. Now let's go to commands and here we have another commands, click on Trash and go to Trash Bin and click on Delete permanently. Let's go to pages and Earl pages and here I will keep this only privacy policy page and trash the sample page. Also go to Trash tab and click on Delete permanently. And let's see the media library. Currently, we don't have any media and then go to the post Earl post, and here we have Hello WordPos cash. Go to Trash Bin and click on delete permanently. Okay. Now I will go to the dashboard and on dashboard, I will dismiss those stuff because we don't need any of this for now. Okay. Now we have freshly installed WordPress website and we are ready to design custom websites using WordPress. 76. WordPress walkthrough: Hello, everyone. Actually, I forget to create the WordPress work through video. So let's do it now. First, I will Logout just over here and click on Logout 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, and 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 by 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. So I hover over it and click on this admin Okay, here we have personal propil details. So from here, we can change the admin color. 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 Adnew 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 staff. 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 commments 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 write in, 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. 77. Setup 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 budget, and it has 86 projets, but with the essential plan, we only have 57 projets. Also, if we go to market in ecommerce section with Advanced solo 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 are a freelancer who build website for your clients, you can purchase the expert version. By choosing this type of plan, we will able replace lot of plug ins and add ons and it will help to increase the page load in speed and optimize overall website. So 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 AdneU. First, we have to install the element pre plugin. So from here, I will search Elementor. Then here we have elemento website builder plugin. It's developed by elemento.com, and it's compatible with our Wordpress version. So I click on Install Now. Okay. Then I click on Activate. All right. Now I click on Escape and I will skip those step or I will click on this Close button because we are going 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 add ind 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 then you download will start and now you have the element of plugin. Now let's set up with our website to do that. I will go to the WordPress dashboard and go to plugins and click on Install Plugin. Then I click on add new plugin. Then I click on this upload plug in button. Then I click on to pile, and here we have the downloaded element pro plug in. So it's a C file. So I just select it and click on Open. Then I click on Install now. It will take a few minutes to install. Okay. Then you will see this window. So from here, just click on this activate plug in button. And it will successfully install. So here is the install plug in. Now I click on connect and activate. Then I will come to this type of page. So here I click on activate my license. Okay, elemento pro successfully activated, and now we can use the features of the elemento pro. 78. Clear WordPress dashboard: Hello, everyone. On your WordPress dashboard, you will see this type of item. To remove all of them, you can just click on these Estren options and here you can untick the Istab that you don't like to see. Like this, when you untick them, you will no longer see those tab. A on plugins, I will go to Install Plugin. It automatically install light speed cache on website. Here is a light speed cache plugin that installed in my server. I will click on Deactivate because for now we don't need any cache plugin. I will delete it. Okay, perfect. Let's start to design the website in next lesson. 79. 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 Jar 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. 80. Elementor coming soon page: Hello, everyone. Now if visitor visit our website, it will look like this. And when we design websites for our real customers and real companies, this is a really bad impression for the brand. Let's create a Come insoonPage and set that Coming Zoon page we launch our website. To do that, I go to the WordPress dashboard and from here, I will over the element and click on tools. On tools, we have a tab called maintainers Mode. Just click on it and currently maintenance mode is disabled so we can click on this Db down box and set on come in soon there is maintenance option. So in the maintenance option, if we add this, it affects the search engines, and it say it's not recommended to use this mode for more than a couple of days. So even you are on maintenance or creating brand new website, always select the coming soon page. Then you can change the design. As an example, if you are going to make some maintenance, you can design an elemental template that has details about the maintenance. Now, in who can access, we can set logged in, which means who can access the WordPress dashboard. If we set it as logged in, anyone can log into the press dashboard according to the roles that they have. But if click on custom, here we have option to choose rolls. If we only select administrator role, only administrators can log into the WordPress dashboard. For this highway sealt log in. Now here we can choose template. Currently we didn't create any templates, so we can click on create one now, Link, I just click on it. Now we are in template section. In this element or template section, we can design page layouts and section then we can save them. The benefit is we can insert those pre designed page layouts and sections into our WordPress website design. Here I can just add the name and click on Edit with elemento. Let's do that. I just add the template name as coming soon, then I click on Edit with elemento and it will redirect to the elemento and from here, I will click on this page set in and set page layout as element or canvas. Okay. Now what I can do is I can click on this plus icon and add new container, and I will select the plex box and our page layout will be vertical layout, so I click this one, and then I click on the container, and here I will add Min hight test. Let's add 700 like this, then I click on this plus icon and let's add headline. Let's just add the headline like this. Then let's go to styles, and I will change this text color to black and let's set alignment as center. Then on typography, I click this pencil icon and change the font family to poppin. You can select any fonts that you like, but I really like the fpin. So I will add sizes 60, then I will add the a normal like this. Then good and I will add text like, click click this pencil icon and click on the content, and I will here at the text like something new is come in soon. Present. Now I need to add a paragraph to add a paragraph, I can click this ad element button, and here I will get a text editor like this. Then I will add text like we are excited to launch our brand new website design just for you. Then I will highlight it and then I click this Toggle Toolbg and let's make align center like this. Then I will go to Style, I can make alignment center from here, and then I will change the text color to black and let's change typography to pop ins again. A set sizes 21. Then what I want to do is put these two text on the center to do that, isolate the container and on container layout section, I will add justify content as center like this. Then I want to logo on the top to do that, I will click on Add element and here image. Let's search image and here we have image and I will put it like this. Then here I have to add our company logo. I click on this choose image section and here I recon select file, and now here is the file. I just click on it and it added like this, then I remove this title and I will ALT text. The ALD text will be JB Family Phenic logo. Then I click on select Now I go to Etyle and arignment will be center. That's an the two. Let's make with 30, 30 will be good. Then I need to add more space between those two sections. To do that, I select the image, then click on Advanced and in advanced I click on this link value together. Chain icon link it, then I will at bottom margin as 30 like this. Okay. Now at the bottom here, I need to at N an assistant now link. To do that, I click on this plus icon and click on headline Let's put headline like this. Then let's change it design to this design. To do that, I will just try click on this text and click on Copy. Then I click here and right click, then click on past the style. When I paste this style, the style that we added here will be automatically add to the title. Then I go to E styles and click on Typography, then I will change its size to make it 30 like this. Then let's add later pace in like 0.5, and now I will add the text like need an assistant now actually, let's make the text bit smaller. Let's make it 25 and width will be medium. Now I want to add two text like call us at and email us at. To do that, let's create icon box. To do that, I clic on add element and search Widget like icon yeah, here we have icon box. I just rag and drop it like this. Like this, then then I can edit it from here. So first, let's chang the icon. First, I need to add phone icon to do that. I click on here and let's search line phone. And let's add this phone icon and click on Insert. Then you want to add text like call us at our mobile number. So let's do that. So I just add it like this. Then I don't need the description. I just remove the description. Then let's change this color to change the color, I click on tyle and in style, click on the icon and change the prime color to black, and the size will be okay. Then on content, change the title to black like this. So we can change type of garret. We can change type of gravity to like pop ins and let's make it like 20. Then it will be normal. Now, let's make it like medium. Now what I want to do is add the wrapping around this icon box to do that. Actually, before we do that, let's create the second icon, which is email us and to do that, I can just click here and duplicate this duplicate this element. Rightly can click on Duplicate. Then here I will change phone Icon to envelope change to this like this. Then I will at email us at email us at our email. Then I want to add those two in the horizontal, but currently it's vertical. To do that, we can easily click here and click on New container. And here I will drag the cools at icon boox to the container, so I can do the same and at second icon boox. Then I select the container and set the direction as horizontal. Then let's make it justify center and I will change this gap to auto. Actually, let's make it. Actually, let's make it as space around like this. Then I can click on this icon box and now I click on Advance go to border in border we have box shadow. I just click on this pencil icon. Then let's add details. I will make the blur as 15 and let's make spread as zero, and let's change the color a little bit lighter. Actually, let's not add box shadow, click on back to default. Instead of adding the box shadow, let's add solid border. Just click border and here, let's add size as two. Let's make it like one. Then let's change border color to as like this. Then let's add border reduce as 15. Okay. Now what we can do is on advance layout and add padding let's add Padin as 20. Okay. Now it will look like this. So it's look pretty amazing, and let's do the same. Let's click on this icon box and we can just right click and copy, then right click and paste style like this. Then I click on the main container and here, let's put it let's put it like center, and let's make column gap pas third like this. Let's make this more eye catching. To do that, we can change the colors. So I click here and go to EtylesOEtyle, click on icon and click on this color. Then I click on this color sampler. Now I will change this color to blue color like this. Actually, let's get the same blue color as we have the logo. That. I will add the blue color code here. It's zero, double, F. And then what I can do is right click copy and right click paste the style like this. Now it will look like this on the website. As we can make it center if we add midnight as zero. Then now it will look like this and we can add more styles, but for now, this will be better. So now I click on publish. As we can change the design on the tablet view and mobile view. The tablet view is fine, but on the mobile, I click on this mobile, then let's change this text to text size will be like 38 and the rest will be okay. The rest of the design will look like this and on future, we will learn more. But for now, let's publish and if I click on this I, I can check it on the website. It will look like this. Now what I'm going to do is I'm going to go to the maintenance mode page and here I have to click Save as now if we check, we have this coming soon page, I just click on it and click a changes. So once we do it, it's a maintenance mode on. So I will copy the website URL and let's try with new incogntor window, so we can clearly see the design. So it will look like this. So to access the back end, we can just at slash WP admin. Then here we can add username and password. Then I click on Login. Once I click on Login, I redirect to the WordPress dashboard, and if I check on the website homepage, while we login as administrator, we will see the real website look instead of in one page. So if we need to edit the come in on, we can go to Templates and click on Save templates. On Satemdates here we have Come in zone, so I can click on edit with Elementor and make changes to this Come in Zone page that we are created. So this is a really basic, but in future, we will learn more and use our knowledge to create custom website that grab attention and represent the brand value and identity. And when you ready to launch the website, you can remove this Coming Zone page by clicking here, and you will redirect to the tools page and here on the maintenance mode tab, and from here, you can ooe the mode to disable. Then you can click on Save changes when you hit on the Save changes, and let's copy the URL, then let's go to Incognitor Window and press Enter and you will no longer actually, I have to logo when you log out and let's go to the home page and you will no longer see the Coming Zone page. 81. How WordPress and Elementor made by: Hello, everyone. Before we go further, it's important to understand a bit about the foundation of WordPress websites. Those websites are primarily built using STMS CSS, and other web technologies. When working with Elementor, we don't need to master STML and CSS, but we should be familiar with a few key concepts for example, in TML, you will encounter elements like H one, two, three, paragraph, and tax. In CSS, you will hear terms like margin, padding or top margin, bottom margin, top padding, bottom paddin and CSS ID, class. The terms pop up frequently and knowing what they mean will help you navigate element of it, you don't need to learn those concepts from A to Et instead just get familiar with their names and options. As you work through elemento, you will naturally understand more how they function. Now let's dive into a few of those basics HTML or hypertext markup language structures websites contain. Think of it as skeleton of a website. For example, H one, H two, three, those are heading tags that define the importance of headline on a page. H one is usually the main title while H two and three are used for subhding as an example in element of Canvas, I click on this helloworld text, and if I check the HTM ML tag, it's a H two. If we want, we can select H one, H two, H three like this. Then we have here P. P means paragraph. This tag is used of text. As an example, if we click here and add the text editor, let's add it like this, then here we can see it as paragraph, which means it's a P tag. Then if we want to add the link like this, I will highlight this part and let's click this Inset Edit link and let's add our link as google.com and press Enter. This is the A tag. So if I change this visual to text and if we check here, here is a tag. When someone click on this part, he will redirect to the google.com because we add this google.com as the link of this text. Then if we want to bold this part, I can just highlight it and click on this bold. Then the design, the text change and if we go to text, we got this strong tag like this. We don't need to edit it with SDML editor. We can just visually edit it. Only thing we should know about what we are. If we know the basic about what we are doing, it will help us master the elemento. Then we should consider about CSS basic. CSS means cascade in Style sheet. It's about E styling. It control the look and feel of your website, such as colors, fonts, and I spacing, we can arrange them by using CSS. Usually, we can edit CSS on this Etyle tab. As an example, I click on this pencil button of this headline and click E style and here is the CSS or style set that we can do to the text. As an example, if I want to change the color, I can click here and change it color to something like this, not like this, like this. This is a CSS property of this text that we just. Then we can change the alignment. In this case, alignment will not change and if we want, we can add text shadow or here is the property of the typography. We can change it as we want. When we change them, we change the CSS style of the element. Then you will mostly use margin and padding. Element or simplify all those concepts into visual settings. Margin is the I space outside an element like a gap between headline and paragraph. Padin is the I space inside an element between the content and its border. Element or simplifies all those concepts into visual statins. For an example, to adjust the ispace around an element, we can go to advanced tab and here we have margin and pad. Demonstrate this clearly, I will create a new flex box and create this direct column type container like this. Then let's add the background color. Click here and go to Is dies then click Classic and let's add color red like this. Okay. Then I will duplicate this by right click and click in duplicate and then I will dragon rope it inside the container that we created. Then I will click the headline pencil icon and go to his style. Let's change this text color to black. Also, I will duplicate this one and let's put it inside the container like this. Let's change it color to something like white like this. Now here the yellow text is outside of the container. To fix it, I can add margin top. Let's do it. I click here and now I'm on the container and I go to Advance. Here is the margin and Padin. Here I click on Link value together and I unlink it. Basically, what happened is if I make it link and add ten to top, it will add to the rest of the design. But let's make it zero and if I want to only add top margin, I can add it like this. Margin is the ispace outside than element. When I add margin to pass 60, it at 62 outside of the container, and if I make it one to 20, it at 120 pixel is space to outside of this container, and if I add minus value, it at -120 pixel to this container. So if I want to add pace inside of the container, I can add padding. Unlink the values then I will add top padding as 120. When I add it, I get this type of pacing, and if I do it to the bottom, it will add 120 to bottom and we can do the same to right and like this. Let's make it like 500 so we can easily understand or we can visually see the changes like this. Actually, it's too much. Let's make like 200. 200 is visually appealing, like this. Okay. Now if I want to add more space in between those two texts, I can click on this text and go to advance, and in advance, I can add margin like 60, not top. Actually, I have to add bottom margin. So if I need more space, I can add more pixel to the bottom like this. I can click on this paragraph and at top margin lie 60 and it added to the top of the paragraph. So having a basic understanding of those concepts will make troubleshooting and customization much easier. For instance, if a button doesn't align as expected, you know to check the margin of padding set. With Nina CSS, we can successfully understand and create custom website easier. 82. Design 01 hero section part 01: Hello, everyone. Let's design this hero section with elemento. So this is a Figma UI that we created on the custom website design with Figma part. So check the resources section to get this Figma community file. So let's convert this Figma design into elemento. To do that, I am on the WordPress dashboard. I just over pages and click on at New Page, and let's edit as Hero one. So let's add page title as hero one. Then I will just click on edit with Elementor. Then I get this message. I just close it because we are going to design custom website. We don't need any pre built template. Okay, now we are at the elemento editor. So first, I click on this page setting and select the page layout as elemento canvas. Like this. Okay, now we have a clear canvas. Then first, let's see the size of this hero section. So I select the hero section, and in here, it's width is 1440 and the height is 700. So now I click on this plus icon and here I will set flex box. Then I will select this direction column and get one column section like this. Then I can see the property of this container, and from here I will at min height as 700 fixel. Then for the width, we can slat the content width box to full width. Then here I slate pixel, and the width is 1,400. 40. So let's say this 1,440. Okay. Now looks good. So as the next step, we have to add this background image. To add it, I will select the background image from here. Here is the background image. Then I click on this Export and set the file type as JPG and rates at size as 1.5 X, then I click on export MD one and it's just download however, the kilobytes count is really high, let's reduce the file size. To do that, I will go to tiny png.com, then I will just drag and drop it to here. Then before we optimize it, it has 580 kilobytes, but now it only has 74 kilobytes. I click here to download it. Okay now what I'm going to do is I go to the element or editor and select the container to edit it, then go to Etyle In Etyles I will add background. Background type will be classic and here we have option to add image. I just click on Choose image and now I can just drag and rob that image to our website like this. Then I click on Salt. Now it's appear like this and now what we have to do is did the background image option. So background image resolution will be full and the position will be center center, then attachment is scroll, which means when we scroll the website, the image will scroll. But if we make it as fixed, the image will not Icall when we scroll website. Let's make it scroll. Then on repeat, I will say it as no repeat, then display size will be covered like this and it will look like this. When we check the website preview, it will look like this, but it should cover the entire area. Fix it, I click on the container and go to layout. Then let's change this bit to 100% like this. Now it works like this, then let's go to the side setting, not to the page setting, the side setting. To go to the side setting, we can click this set in icon, and here I will go to layout on layout, we 1,140, I will make it 1,440. Then click on Save changes and close here. Then if we check the design, it will look like this, and if we check it on the preview, it will also look like this. Okay. Now adding the background part is completed. Actually, we can hide this grid by clicking here and we can clearly see the design now what we have to do is add this logo and the menu. There are few ways to do it. So let's go with the easy and simple method because still we are learning about the elemento. For logo, I will just add a text like this, then let's change the text to logo. Now let's the property of this logo. Isolate the logo, it's a text and fonts railway semi bool 35. Let's add those details. I click on headline and here go to e style, then I will change it color to white and click the pencil icon on Typography, and here I will change font family to railway like this. Then with this semi boold and the size is 35. Let's see yes, the size is 35 and field color is white. We already did that. Okay, now we have the logo, then we have to add the menu. So at the menu, I just click on Adeleans and search Menu. And here we have a few menu items. So let's just get this simple menu anchor like this. And here we have to add menu details, currently, we don't have any menus, what we can do is create a new menu. Before I create a new menu, I will just click here and click on Save draft to save those changes. Then let's add the menu to add the menu, I will go to the dashboard of the WordPress website and on WordPress, we have option to add menu in appearance, but currently we don't see menu part because we didn't select a theme. So when we create website with elemento, it's recommended to add Hello elemento theme. So let's add it. Now I am at the WordPress dashboard and appearance and select theme. From here, I click on Add New Theme. And here I search Hello element. Actually, here we get the theme. Let's click on details and preview, and here we have Hello element by elemento, click on Install and click on Activate. Now we have this theme, so we don't need this 20251, just select it and click on delete. Now here is our theme. Now if I check on the appearance, we can see menu link. If I click on Menus, I will redirect to this Menus page. But currently we don't have any menu. Let's create a new menu. Let's name it like Hero menu, then I click on create and I don't add any display location or any stuff, click on Create man when we design real website, we can cover all of them. Okay, now the menu is created. So now we can add menu items. Currently, we don't have any pays pass or categories. Only we can add custom links. So let's select Custom links, and for URL, I will add just hash tag. And for link text, we can copy those texts. First, I copy the home and paste it like this and click on add to menu, and it just added to menu. Then let's create the second menu item. It's about us, paste it like this and put it like this. Then let's add this menu item like this and our coach and C tag. Now our menu is completed, and there are a lot of stuff that we can do with menu. As an example, we can add sub menu items like this, but for now, let's keep it simple menu like this and on real website design, we will go the menu. Now I click on Save Menu. All right. Now I go to the hero section and we save the draft so I will repress this page. When I repress it, here is the menu and Kamenu element, so I click on this pencil icon and here I will search hero actually, we can't use this menu anchor. I will delete it and the search menu again menu. And let's get this wordpress menu element, and I will drag and rob it like this and here we can select the menu like this, the menu is selected as this. Then let's add his ties to this menu to do that. Let's go here and check what type of text that use on this Figma menu item, it's opens and semibold 18. Let's add those details. Here I click style and click on typography and search Open Sans like this, then the size is 18 and with this semivol like this, then in transform, we have to set it to uppercase because here it is in uppercase and good for now, then let's change text color white. Okay. Now here we have logo and menu. Also, we have to fix this Hor details, and to do that, in normal, the text color is white in hover. The text color should be this red color. I slate this text and copy the fill color. And I see, here is it, I will add color as red and we don't need the pointer, so I will just remove it color like this and it will look like this. I just change the opacity of the pointer color. On active, I will set it to red and on pointer, I will remove the pointer color. Okay. Now we have to find the padding in between items, so it's 50 pixel and let's add it from here. So space between will be 50 like this. Okay. Now if we check the design, it will look like this and let's fix issues one by one. The first issue is the logo and the menu is in the same line. To fix it, I will go to the design and then click elements and click on container just click on container and the container added and I click here, then we are in the container setting. I will change the container to full width like this and on advance I will make them as zero. And here I will change the column and row gap as zero, like this. Then what I'm going to do is add those logo and add this menu to the container like this. So here is the container and the logo and the menu item is inside the container. So I select the container from here, then I will change it diction to horizontal. I fix like this, then I will add I space between the logo will be in the left side and then will be in the right side. Now the second issue is on the Figma file is space in between as 140. If we go here, if we click on the layout and check here, the horizontal padding is 140. Let's add horizontal padding to our design too. To do that, I will select the main container. And click on Advance. Then here we have padding. I will add right padding as 140, then left padding also will be 140. Okay. Now it's look like this. Then what we have to do is at this top padding. The top padding is 20. Let's add it to. Go here and click here. Then let's add this top paddings, 20 like this. Okay, so far so good. Now if we check those two design, they are pretty similar. 83. Design 01 hero section part 02: Okay, now we have to create this section. So let's start. I go to the design, first, we need to add a sub headline, so I go here and drag and rope a headline like this, click on the headline and let's put it inside here. So let's go inside this container, but we need it outside of that container like here. And actually, we need it down here. Okay. Now let's go to the style tab and change the type. First, I will make it a line center. Then let's change color to Y. And here, double click on it, and the typography is open sans, semble two. Let's add those details. On typography, font family is open sans and W is semibol and size is 20 and what we have here we have line height that's 31 add to the line height will be 30, sorry, 31 like this. Then we have to make it upper gas, so transform upper gas. Now let's add the rest of the content and fix the alignment tissue. Then we have to add this headline. Before I do that, I have to change the text. I will copy this text from here and come here and click on content and change the content like this. Then I will just duplicate this headline and let's go here. Then here I will copy this and the typography is away bold 60 and line height is auto. Let's make them. Click this pencil icon, go to tile, and typography is railway 60 bold. Then the line hight is auto. To make it auto, I will click here and click this pencil icon. Then I can add text slide Otto like this. Okay. But it's not upper gas, it should be gas, so I will go to the transformation and add default. Then here, go to the content and paste the content. Actually, the transformation, let's see the transformation the transformation is title case here, let's change it to title case in typography and transformation is capitalized like this. Okay. Now what we have to add is this paragraph. So first, I will copy it and let's check the details. It's open sans regular 20, and I can just duplicate this one again, then put it here, and let's add the content like this. Then in the STMLtag, this is a paragraph, so I will change it to P and now, again, the values are open sans regular. Let's make them to etyle the typography is open sans 20 and size is normal, regular means normal. And here the case is default like this. Okay, now we have CTA only thing we need to add this to center. To add it to center, let's try to click on the container and on the container, let's make it like justify center. When I do it, come to the center, that's not going to work. Now what we can do is add this content inside the container. Click ad element and create a container like this, then let's remove all of those details and let's set margin as zero and paddin as zero. Then I will put all of these content inside this container like this. Now I select this container. Now I go to Advance and here in Margin, it as Px or fixel. I just click on it and click on pencil icon. Then what I do is add Margin as auto and then for the bottom, add as auto like this. When I do that, it go to the center. Basically what happened here is when we at top Otto, let's remove the bottom motto. When we at top Otto, the space in between the menu and the CTA filled up till the CtA section hit the bottom. And when we add Otto to bottom, this container full up from the bottom. So we have pulled down from the top and pull up from the bottom, so this content become center. Okay, and next, we have to add a button, we have to add this button. So let's add it. I click this add the element, and here I search button, and here we have a lot of button, but currently, let's get this simple button and put it here. Then I click on this pencil icon, and here first, let's change the text. Let's copy this text, and the text properties are open and sembol. Let's add the text here, and currently the link is hash tag because we don't have Link, then I click on Estyle and in Estyle in typography, the font family is Open Sans 20 and let me see the rest of the details sembl semi bold, and then transformation is Afer case. Okay. Now we have to change the background color, so slate the background and copy the color, then come here. And let's find out the background color. Where is the background color? Okay. On text shadow, we have color as green, but we make it red, and here, let's add takes color as white, and on, let's add color as black. W over over the text be back. And for now, let's keep it like this. Then what we have to do is adding the space in between the text and the border of the button. It's 16 and here we have 20. It's padding of the 16 as top and bottom and 20 as left and right. So let's do that too. Just click here and let's make Let's unlink the value together, and let's make top padding as not 60, 16, right, 20, bottom, 16, and right 20, like this. Then let's set the position as center Okay. Now it's look good. So the items are too tight, so we have to add pad in before we add the pad in. Let's see if the button has rounded corner. Let's check the button. Actually, this button has zero as the corner radius, so we don't need to add any corner radius, and let's see the item in between size, it's 15 and on the button on the button, it's 20, and the rest of them are 15. So currently this is one container. Inside this container, we have the headlines and button. So in layout, I just let the container and layout. Set gaps row as 15, and it just add 15 as the in between size. And here, button is 220, so we have to add another five. To add another five, I click on the button and go to Advance and click on ink value together, and on the top, I add five, and it just has 220 and other item has in between size as 15. Okay, so far so good. And let's see it in the full design ads look like this. And if we see the Figma design, let's review it in view mode and it's look like this. It's on the actual website and we can click on this preview changes and open it in New Window, and it looks like this on the website, and this is the Figma design. Only thing in the Figma design, the homepage is red, but here the homepage home menu link is white. To fix it, I have to add this home men as this current page because if we go to let's go to the design and click here, then click on style to check the menu style and on active Act mean the selected page or active mean the current page. The current page text color is red, but here we just add Dum URL, we just at the hashtag. So let's add the field page URL. So I just go to WordPress dashboard, and here, let's go to appearance and Menus. On Menus, we have this Hero one Menu and on the homepage, we just at custom Link. But in pages, I click on E. So the page is not showing yet to fix it, I have to publish this hero section. Let's click on publish and Live here the page was published, and let's again go to the dashboard and go to appearance sorry, not appearance.'s appearance menus on menus here on pages, I click on VUL and here our page Hero one. I just check it and click on add to Menu and it just added, so I will put it like here, then I remove this homepage link and here, click here and Leg rename this Hero one to home. Click on Save Menu. And let's check the page now, click on icon to preview it, and now it shows the active link because we are now on the Hero one page, and we just add Hero one page as the homepage of this menu. Okay, let's continue to the next hero section design, and if you had any doubt or any issues, you will be clearly understand when you practice with next few lessons. 84. Design 01 hero section part 03: Hello, everyone, we successfully design the hero page. Now let's fix the mobile responsiveness and add animation. Let's start by optimizing this hero section for mobile phones. In element of editor, we have option to view the tablet and mobile version of the website like this. If we go to tablet, the design is okay, but the menu is not showing. Let's so when we go to the tablet version by clicking here, our website will look like this, but we can make this much better. So let's start to fix them. So I click on the main container. Then let's go to Advance. In Advance, we have write padding as 140. The issue is it best for desktop version, but on tablet is not looking good. Let's make this 60 like this. But when I add 60, everything changed to 60, but we don't need everything to be 60. I click on this link value together, icon and let's add top pass 20 and the right as 60. Then also left as 60 like this, it's much better than before. Then when we check the menu, it's not showing. So let's fix it. I just click on the pencil icon of this WordPress menu to edit it. Then if I go down, I can see this mobile drop down. Now we are at the tablet Portrat version. Here I will click full with and if I check it now, it will look like this and this is much better than before. Then what we can do is here we have the hamburger icon. So here, this default icon is hamburger, but its color is black, so let's change the color. To change the color, we have to go to ties IE ties, here we have togal button and let's change toggle button color to white. Now, now if I check it, it's in white color and we can change the size. Let's make it like 36 or 35, and then I click on her on Ha, let's change it color to this red color. I click on this colors blur and let's get this red color like this. Now when however it become red and here is it looks. Now here we can change this color too. Let's change it color to do that, I click on drop down on drop down in normal, let's make taste color as black. Then the background color will be white, let's keep these same colors. So to do that, I will change the text color to white. Then I will remove the background color, let's remove it like this. But when we do that, the design looks not good, so let's add background color as white and let's make test color as black. Only on go and active, let's make test color as this red color. Click on the color sampler and click like this, then let this red color. Now it's look like this. Let's not add the background color. Let's keep the background color as white. But having background color looks good. Let's make it like light ash color like this. El good. Now in active, let's make active link color as this red color to click here and let's make it like this and now good. Also we have to select the active background color as this ash color. Let's do that too, like this. Okay. Now we can add horizontal padding. If I add horizontal pading, let's make it like two, we add padding to horizontal side, and if I add vertical adding, we can change the in between size. Let's make it like 15. Okay, so far so good. And here in the distance, let's keep it zero. Okay, now we have perfectly working menu, and let's go to this section. So here, this text is okay, but we can minimize the text size of this headline. So let's click on this pencil icon and go to E style and here click on Typography, and let's change the text size to like 50. Okay, perfect. When we make changes on the tablet version, it will not affect the desktop. If I click on desktop, the text styles are same, and if we go to tablet, it's changed because we change it to get it more clear. If I click on left here, this text go to left. But in desktop version, it's in center. In tablet version, it's in left. Also when you go to the tablet version, you will see can change here. Here, currently, it's on tablet. If I click here, it's go to Desktop and when we do it from here, that I can change. This is what it called mobile responsiveness. Now we are good to go. Then I click on mobile Patriot mobile version here, let's change those details too. Click on the container. As we can change the mobile preview like this, but let's keep it this okay, now I click on the container, and here we have paddings 60, 60. Let's make it like 15. I click on Link value together. I can remove the link valued. Then I will add top pass 20, then we will be 2020 is a bit bigger. Let's make it like 15 and will be 15. Left will be 15. Okay. Then if I check the menu, it's perfectly working, then we have to change this text so click on this pencil can go to styles and on typography, let's make it like 18, change the size to 18. Then let's change this headline text size to it's too small. 45 will be perfect here I think the paragraph text is okay, we don't need to change it, we want, we can just change it to 18. But it's not necessary. However, I will keep it as 18 for now and also we can change the line height if we want let's change it like this. Okay. Actually, let's set it as 1.5. Okay. Now we have to change the font size of this button, click on the button and go to Iteris and here con typography, let's make it font size to not one, two, three. Let's make it like 16, 16 is. Okay. Now we just fix the mobile version and now it perfectly work in version. Now what we have to do is add animation. Let's add animation. To add animation, I click on advance and on advance we have motion effects. I click on it, and I will of the Icroolineffect and mouset for now because this is just a hero section. So let's change entrance animation. And currently we are at the menu. So the menu, let's make the menu as slide Din right like this. Then let's add low to motion effect like slide DN, left like this. Then here we have this live coaching for high achievers subdin, click on it and go to Advance then click on motion effect and here, let's change it to There are a lot of animations, but let's add some of them. Also we can add animation duration and add delay to the animation, which means if we add like thousand thousand millisecond mean 1 second. I will wait 1 second or 1,000 millisecond to activ this text. Then let's go to the head and advance motion effect. He let's it's bouncing, bound will be okay. A let's add them to the design. Swing swing is not good fading down. But in lot of animation is not professional and it will affect the loading speed of the website, but this is just for learn and fun so let's add those animation. Founds Okay. Now click on the preview change let's see the animation work. Yes, it's work. And yeah, this is how we add animation. So now we only have to click on Publish and it will available on the live website. 85. Design 02 hero section part 01: Hello, everyone. Now it's time to design this hero section. So let's do it. First, I go to the WordPress dashboard. Here I hover over this new and click on page. This is a shortcut to create a new page, and here I will add title as hero two. Then I click on this it with element or button Okay. Now here we have the Elementor page and now click on this space setting and here change page layout to elemento canvas. Okay. Now we have clean canvas and from here, first we have to create this background. To create this background, we have to add a container, click here and click Plex box and click this container. Then let's see with the width is 1,440, the height is 700. Let's add those details. Actually for the width, I will add full width, then for mean height, I will add 700 like this. Now what I have to do is add the background. To do that, I click on the I style and click Classic and here we have to add the image. Let's go here and now isolate the BG. Then I just click on Export and let's make it 1.5, and let's make it GPG, then click on Export, big. Now we go to tiny png.com and click here, then rag image, it has 707 kilobyte. Now it's only have 120 kilobyte. Now I just press JPG and it's downloaded and then go here, click on this image and just and drop it like this. Then we can add old text. Let's add old text like 02g. Actually, this old text used for SEO purpose or if something happened to this image or this image will not load, this ALT text will show on the website. I will click Concealeg and then let's change the setting. So image resolutions will be full position will be center center, then attachment is default, repeat, no repeat, display size cover like this. Now let's see the design. I will look like this. Now what we have to do is add this menu. Before we add the menu, we will have to add margin. Because if we click on the frame on Figma and here, it's a 140 as the horizontal padding. Let's add, here, go to advance and in margin, let's make it. Actually, it's not margin, it's padding. Right padding will be 140 and the left padding will be 40. Okay. Now, let's add this logo. The logo is my finance. I just click on it and here is the details. Let's go to the element and click here, then just drag and drop a headline and let's check the typography. Click on the text and typography is Georgia regular 45 and the fill color is flat. Let's make those details, click on the headline, click style, then go to typography. The font is Georgia GE OR, here we have Georgia the size is 45 and the width is, let's see the width again with this regular make with a normal. Now the text color is black. Now let's copy these tank like this, then come here, then go to Content, paste that text like this, and it will change. If it not change, just press Enter and remove the Enter. It will change like this, then what we have to do is we have at top adding as 25. Before we add it, let's create the menu and the contacts button, then we can add the top adding and other stuff. Now we have to create the menu. Click here and search menu and let's get the word press menu, put it like this. Now what we have to do is click on Edit and here have the Hero one menu and we have to create a menu for this M finer. Let's do it first I click on menu screen and it's redirect to the menu screen and here I click on. Create new menu. Let's name this as Hero two menu, and then I click on. Create men Okay. Now I select here the Hero two menu and click on select. Then here we can add the links first as the homepage, we have to use this Hero two page. To do that, I have to publish this. I just click on publish and now I to the menu and we will have to repress this repress the page. And here we have 02, click on it and add to Menu. Then I will click here and change the navigation label to form. Okay, now we have to add custom link, as the URL, I will say hash tag. And then let's see the menu item, first menu item is service, copy, prestige, click on AT menu. Then let's check the second one its location prestige, hash tag to menu then blow at the hashtag to URL and click on at two menu then a task of at a hashtag, click on at to Menu. Okay, our menu is completed, and you will see here is a contacts button. So this is a separate button, and we will create it using button element and it will not include inside this menu. So now I click on Save and go here, then I have to request the Hero two page. Now I click on the menu and in content, I will set the menu as Hero two menu. It appeared like this, then what we have to do is add the E style, first, I will go to Advance and add margin and padding as zero. Then let's get the detail. First, we have typography as Vertica 16 regular. Let's add those details. Click Estyle typography, one family will be Vertica. I think it's Vertica, and the size is 16. Then with this regular regular mean normal in elemental. Okay. Now transform will be upper again. Okay, good. Then let's check the in between size. The in between size is 25 to check the in between size. In Mac, you can select element and press all and hover over the next item like this. In Windows, you can do the same. When you press the you can see the spacing or see the padding that it has. Okay, now I go to here, then let's make the space between as 25. Now I go to hover in hover should change the color. So the color is black and the font is bold. Let's try to make it. In how the color is not white color is black, pointer we don't need the pointers. Let's swing. The color is black. And also on the normal, we have to make the color as black and on. Now we have issue because here we don't have a way to bold this font while it hovering, so we can only do it from here, like adding here, but when we do it, it affects the so to fix it, we have to add custom CSS, let's do it after we complete this design because it's a bit tricky and let's continue design, the rest of the website. Now what we have to do is add this to horizontal line or single line to do that, I will click here and a container like this. Then let's go to container. I will set the container to full with this. Then on advance, let's remove the margin and padding. Then I will just put them inside this container. Now it's on inside the container and click on the container, go to layout and click on direction as raw horizontal like this and it looks pretty good, then we have to add a button here. To add the button, click here. Search button. Okay, here we have a lot of buttons, but we only need a simple button like this, put it here. Not the outside of the container inside. Yeah, we can add it from here like this. Okay. Now we have to change the style of this button. Let's find out the currenty style, click on the button. And here we have corner radius as 60. Let's make it 60 and the color is black. Let's make them first and here I go to e style and the border radius, make it as 60 and the color is black. Here, the color is black and what is the text that text can us copy. And come here and go to content. And here, change click here to contact us and go to Estyle In Etyle, we can change the typography. So let's see the typography. Typography is Vertica regular 16. So let's make it. Here, font families Vertica 16. Normal and it's on uppercase. Let's make it transform upper case. Now what we have to do is add padding, click on the text and press Alt. When you press old, you can see top and bottom padding as 16 and left and right padns as 37. Let's do it. Go to advance on advance the margin and top as 16, not here. Sorry, not here. Just make it as it is. I just go to style. Actually, let's make it transform upper case and it's here, it's here. Top pattern is 16 and right pattern is 16, right pattern is 37 37, bottom 16, 37 as the left. Now we have perfect button and let's change the hover details on the normal change on hover, let's change text color to black and color to white like this. Looks good. Now what we have to do is add a padding. Let's check the padding. Here, select all of those stuff. Then let's see the padding age 25, let's add top padding or top margin as 25. Let's select the container first and then here let's at top margin as 25. All right. Now what we can do is we can go to lay and here we can set align items center and make all of the mass center. Okay. Now in the next lesson, let's add the active text as bold. So to do that, we will have to use CSS, and it's pretty easy. Let's do. 86. Design 02 hero section part 02: Okay, now let's continue. If I click here and check the design, it will look like this, but we need it perfectly aligned to do that, I will click on the container and on container, justify content will be space even. Then if I check on it again, it will look perfectly fine. Okay. Now next, we have to create this CtA section and this image to do that, I will the new container, so let's click here and container, let's add it like this, and then let's put it. Let's put it below here like this. No here. Let's make it here, all right. Now it's here, then I will go to Advance and remove the design stuff. Let's make the gap to zero. And first, we have to create this headline sub headline paragraph and the button. To do that, I will come here and click add element, then add the headline. Let's add those details. First we have welcome to my finance. Let's copy it like this. Then go to style. The color was black. And let's see the typography Georgia, regular 55. Let's make is 55 fonts, font family is God. And what is the way weight is regular normal. Okay, here we have a issue in small version of the desktop. So let's fix it before we move further to fix it, what we can do. Let's click here and let's remove the gaps as zero, and I think it's okay from here and let's check its size like this and yeah, it's fit perfectly. Okay. Now let's continue the work, and here I add the headline, then we have to add this paragraph for the subbdingT do that, I will just duplicate this part, and let's add the tanks, and one style, we have Vatica regular, 25. Here, Vatica 25 regular. Okay. Now, then we have to add those two buttons. So before we add the button, let's check the inbteen size. It's 20. Let's make this in between sizes. Click on the container and here the row size will be two 21st. I click on Link value together like this, then let's make it 20. Now, let's add the button. Actually, we can get this button, but let's create it from scratch. I search button, then paste it like this. Then let's find out the details. Here, the text is hel VaticaRgular, 20, and in between sizes 18, 18, 35, 35. Let's make it. First, let's copy the then go to style in style, typography, is 20, Vertica. Is it 20? Yeah, it's 20 and it's regular. Then transform Ava gas then if I go to the Figma design and press Alt, we will get 18 as top and bottom margin or bottom padding, then 35 as left and right padding. Let's add those details. Not here. Sure in e style, the padding will be to pen Moten as 18, right as 35, 18, 35. Now the rounded corners will be 60. Water radius will be 60 and the color is black color. This color will be black and on our let's change the text color to black and background color to white like this. Okay, good. Now what I have to do is I have to create this learn more button. Let's do it. First I copy this learn more text. Then we can just Dubligate this button like this rightly, click Condo bligate and here I will change the text to learn more and go to style in E style, I will change this color to 0% visibility and change the text color black color. Then I will have to add the border to add the border, I will click on border type solid. And let's see the border size here, so the border size is one. Let's make it as border will be one. Okay. Now if we check the design, it will look like this, and now we have to make line horizontal. To do that, we have to create new container and put it like this. Then let's add the two buttons to this container like this and it's inside the container, and click the container and change the direction to horizontal. Actually, we have to change the button position like this. Okay. And let's see the in between size, click the button, press all. It's 20. I think already, it's 20. Let's see. Yeah, it's 20. Let's add the column gap plus two. Okay. Okay. So far so good. Now what we have to do is we go to the design. We will have to add some space here. The space should be 30 currently is 220, so I click here and go to not style in advance. I will add margin as top margin as ten. Yeah. When we add the ten, we will get spacing. Now I have to actually, we have to put this container inside the main container like this. Now what we have to do is I just click here and now let's go to advance and on margin, I will click this pencil. I can top will be auto and the bottom will be auto like this. It's just become center and it will look like this. Here is the issue. When we try to increase the design, this one, come here. This one didn't come here, so that is the issue. Let's see what happened here in this container. What we did is adding the space even let's remove that. When we remove it, it just change. Actually, we have to add space bitten. Let's try. Yeah, we have to add space bitwen not space evenly space bit then will look good and will work well. Okay. So here is our main container, and we have to add image here, and its direction is vertical like this, but we need a container that has horizontal direction. To create that one, I will just click New container and add the container. Then let's swim all those stuff here, make it full with Okay. Now I will set the direction as horizontal. Then what I can do is I will no, it's not inside this, I will put it here, then not here. Here, then I will add this container inside that container. Just put it like this. Okay. Okay. Now again, we have to add the auto layout feature. We have to add auto to margin like this, top will be auto, bottom will be auto Okay, now we can add image. So this is horizontal, and let's add image to add image, click here and search Image and let's add image like this. Okay. First repass the image to repress it the image, I will click on this image. This is the image, click on it, select the image, then click on Export and we need it in PNG version because this image don't have any background. Then I click on Export button and it just downloaded. Then go to Tiny PNG. And add it to here, optimize it, click on PNG to download it, then come here, click here, then click on the image and add the image like this. Then I click on Select. Okay, the image adapt and I will change the image resolution to full. Now we have to set it like this. Currently the image looks like this, but it's not working with now if you see a website design like this, you can just decrease this structure section and make it better. Now we have to set up this image like this. To do that, I will click on the image and then go to advance in advance on size, I will set it as grow. Now it becomes bigger, then what I have to do is put it in the corner in the Figma design. Let's do that. To do that, I will unlike the value of the margin and I will add margin lef like this. No margin lef, we have to add margin right and it should be minus, which means this part will be sent by ignoring the main container padding. Let's Okay. When I do more than we need, we see this type of ICO bar to remove it, we can just foot it like this. It's minus 140 and now if we check the design, it will look like this. My screen is 24 inch. That's why this design looks like this. But if we check it on small device like laptop, desktop or other device, it will look like this. Now what I'm going to do is add in the next part. So robot is completed, and now we have to create this part. I select it and its height is 270. So let's do it. Click here. Then I click this plus second to create a new container, and the container will be direct column, and here I will set it to full width, then I will remove all unnecessary stuff like this, then Mint height will be 270. Okay, now we got another problem. Let's think we add the headline to this container. I set up to the left top corner, but we have a 140 margin or 140 pad in here. To add it, I have to click here and go to Advance and then I will have to add right padin as 140 and left padin as 140. Now it's done, then what I have to do is let's make this content to center. Click the container and go to layout in layout, I will make it justify content center, like this. Then let's make the direction as horizontal like this. Again, let's make it a line item center, and here, put it star, justify content star. Okay. Now here, let's check this text. This text is Georgia regular 45, actually, we can get the style from this hero section to do that, I will right click here, copy, then come here, right click paste this style. Now I will have to change this font size to 45 like this. Now what I can do is add this content, just copy it and go to content and paste it like this. Then here we have to add it in two lines to do that, I will add bracket R mean break, then I close the Bagot and now we got it in two lines, same as this. Then let's go to the Estyle. Let's add in typography. Let's add some line height I like. This is better. Now we have to add those three sections. So let's create this one and then we can duplicate it. Before we do that, we have to make this color as black. Let's see the color color is black, but not dark black. So I copy the color code, come here, go to Eastile, click on background classic in color, pase color code. Then click here, then change this color to white. Okay. Now let's start to design those two section. So here, I click here at the headline like this, then let's copy the content. Now, let's check the typography is VaticaRgular, 65. Let's do it. Let's click here. Usually, we have to add the title here. If we add it directly here, we will get unnecessary stuff. So now I click here Etyle typography, font family, Heaica 65, 65, and regular. W is regular mean normal. Okay. Now the color is why and now we have to add this experience. So hel VaticaRgular 25. We can just duplicate this part like this, then click here and add the text here. Then let's change this size to 25. Okay. Now what we have to do is add this section horizontally like this. To do that first, let's see the item inviting size, it's 15. So let's do that. To do it, click here, click on container and put a container like this. Then let's put those stuff inside this container like this. Yes, it's inside the container, and here, I will remove this gap and the row gap will be 15 or 20. Let's see it again. It's 15. Gap is 15, and it should be a line item center. Direction is column vertical. Okay. Now I will duplicate this for two time, duplicate and duplicate again. Now let's add the other details like this. All right. Now we have another problem. Let's fix it. To fix it, let's increase this take size like this. Then, we can decrease this size to fit like this. We can do it to this one, two, and this one, like this. Now what we can do is let's check the inbetween size. The in between size is 57, it's 57. Let's add 57 as the in between size. To add it, we have to add this section inside another container. Click here and let's add the container. Let's this. Then let's add those three section inside that container. First, I will add this one, then this one, then this one, but it didn't add the inside it, so let's add it inside this one like this, like this. Okay, let's make the direction as horizontal. And here, let's add column sizes, 57. Okay. Now again, let's increase those element sizes like this. And here, let's do the same note here, select this one and put it like this ko and okay. Now let's select the main container and click on space around or we can just add column size as 57, like this, 57. Now what we have to do is check the in between size here, we have it as 116, but here what we can do is click on this main container and go to layout in layout, we can click on Ipace between. If we check it in the design, it will look like this. When we compare it with the original design, it looks really good. Thing here we have a small line. So let's try to fix it to fix it, I go to the hero section and click here. Then on bottom the image bottom margin will be dropped like this. Now, it should be fixed. Let's see, let's see. Yes, it's fixed, and here we go. Here is the final website design. Actually, here we have to set space between, then it will look. 87. Design 02 hero section menu highlights: Hello, everyone. Now we need to make these menu items bold in Her stage and active stage. Currently, this home is active, which means this homepage is the page that we are currently on. So when we are here, we have to make this menu item bold. Because on our Figma design, it's bold here. Let's add that functionality. To do that, I will click here to edit the menu. Then I will go to Advance. On Advance, we have a place to add custom CSS. We are not going to talk much more about CSS, but you can learn more about CSS by watching Tutoris on wscos.com, and here let's add CSS code. If I go to the design and right click on the menu item and click on Inspec and you will see this type of STM tags and you already know element or use CSS to style the website and CSS as a feature or item called class if current page URL is equal to menu item in elemento, it's a elemento item active. We are currently at ATAC A mean Ankatag. When I highlight it, you can see the homepage highlighted. If I click here and check this service menu item or service Ankatag, you will see the class, but in that class, you will not see elemento item active class. Now I just copy it and then I go here, press dot and paste the element item active CSS class. And here I will add font with. This is a CSS style to make font with and in this case, it should be bold like this. Then let's attack like important, then publish it. Now it works. What this important tag done? Mostly override the current CSS code. Now one part is done, then we have to make this item active when we oh it. To do that, I will click on this small icon and click on one of these element, and now I have to find the ULL mean unordered list, and this menu is a list, and here we have this ID, but we can add ID from here. Let's add a clear ID. To do that in the edit wordpress menu advance, I will go to lay. On layout, we can add the CSS ID or CSS classes and let's just add the CSS ID like Hero menu, then I will copy it and go to Advance and go to custom CSS and add like Herou and AA mean anchor tag, and here we add H mean however, and how the font tweet will be bold. I just copy it and paste it like this. Now if I check it on the design, it should work here we should add hash tag not dot dot for CSS class and hashtag for CSS ID. You can check those Eta on W three School website. I publish it and let's go to the design and it will look like this. Okay, now we successfully create that part and we'll see you in the next lesson. 88. Design 03 hero section challenge: We successfully convert those two pigma hero designs to elemento, and here is your challenge. Now it's time to convert this Figma hero three design to elemento. So just play around with and try to do it. And in the next lesson, I will do it too. 89. Design 03 hero section part 01: Hello, everyone. Now we have to design this Hero three. So let's start it. Here I am at the website, and in here, I will go to page and click on Add New. Then here I will add the title as 03. Then click on Edit with element of a second. It will redirect to the element or editor and the editor was load, then I click on page setting and on page setting, I will just change the page layout to element or can now let's start to design first I have to find the height of this section. The height is 223, let's create a plex box and it direction will be direction column like this. Then here, click here, go to layout section of the container. And here the size will be mint two, two, three. Okay. Now I will make it direction as horizontal. Then on advance, I have to add this padding. The paddin is 140, as I told before, when you click a section on Figma and press Alt, you can see space in between the item. Here we have 140. Let's add it here. The right will be 140 and the left will be 140. Okay. Now as the first step, we have to add this logo. Select the logo image on the Figma and click on Export image. Let's make it 1.5 a. Now I will go here. And click this at element icon, and here, let's add the image like this. Then click here and drag and rob the logo like this select and set it size as full. Okay, the logo is blurred to fix it, we'll go here and let's make it size as two X, and let's try K. Then let's replace this logo. Click here, click here, then upload this logo like this and click Conceal actually this logo become bigger bigger than the section. So this section min height is 223, but now its height is more than that. Let's click on the logo and go to style. Then let's at the height as 2023 then let's make it 100 plus like this. Now we have to add this menu to add this menu, we have to create a menu first, click here and search menu on the search bar and get the word press menu. Put it here. Now here we have to add the menu to do that, I will click on Menu creen here let's create a new menu, click on create a menu, create a new men. Then let's add those details. First, we have to publish this page because as the home page, we have to set this hero three page. Okay, now it's published and here I have to repress this page again. Then let's add the text like Hero three menu. Then click on Create Menu Okay. And here we have Hero three page, click on it and click on At two Menu and click here to expand it, then change this navigation label to and then we don't have the rest of the link, so let's create custom link as the URL at hashtag and on link text, let's add those takes first about turns second electrical service at URL as hashtag, third, contact, casting and hashtag, click on add to Menu. Okay, now I click on Save click on Savin. And now if I go to the Hero three and currently I don't see the menu. So if I repress this page and now click on the menu and here now we have third menu, 03 menu. Then I will go to E tyle and we have to change the style. So first, let's see the text. Here the typography is cabin, regular 18. First let's add those details typography cabin size is regular, regular mermal and it's 18, and it's in upper guess. Transform will be upper guess. Then let's see the color, the color is black. Here is the black color. The color is black. Then let's check the space between select one of menu and press check its size, it's 50 pixels, paste between will be 50. Okay, and now we have to change the Ha setting. In hover, it will change the color to this dark green color, and we will have a underline. Click here and paste the color like that, and here we have the underline, click paste it color, Okay, and on active, we will automatically get the hover color to active so we don't need to do any Okay, then what we have to do is make this center. Okay, to make it center, I will click on it and go to Content and not on content. Let's go to advance on Advance. Let's click align self, and it just alignel center. It just went to the center. And now what we have to do is add this call icon. First, let's create a container and inside that container, we can create this section. Okay, click here and add a container is bigger, so let's decrease its size bit like this. Now, let's make it like this for now and we can change it later and click here. Then I will search icon box. Actually, we don't need a container. I will just delete it. We can just use icon search icon box. And here we have the icon box, put it like this. Surely, it should be after the tres menu like this, then what I can do is first, I will click here. This icon is a phone icon. Let's search phone and select the phone, I can click on Insert, and here we have to change the content. Let's copy the content from here and now let's paste it on tier then let's copy this number, then paste it on the description. So far so good. And then what I can do is here on the view, I will go to E style in E style. Let's make than position as right like this and vertical alignment will be middle like this and then go to the icon on icon. Let's make the primary color as white, and we have to add the background. So let's the primary color as white, and then I go to the again and in the view, I will add frame. Actually, it's not frame should be stroke and go to style and style on icon. Let's add this stroke color as this blue color copy the blue color from here and the secondary color will be Locally the primary color will be blue and the secondary color is the icon, it will be white. Let's make it designed better after we create the rest. Then we have change this text to cabin medium, 16.5 and the color is this blue let's to make it, I will go to content on content. The title color will be this color. Then typography will be cabin, sorry, 16.5 and the size is medium medium mean 500. Okay. Then we have to change the description. Let's check the description details. The background color is black and cabin wold 25. That background is blank, typography, cabin 25 wold Okay, so far so good. What we have to do is check the padding. Here the padding will be 19 by 19. Let's add the icon padding here pattern will be 19 and the icon size is 25 25. Let's do it after we fix those alignment tissues. As we have to make this center center, click on it and make it align itself. Now I click here and go to layout in layout, I will change this content with full width and then let's make it space between we just code into the website size. Is not good in this small version, let's remove this structure section like this and now here is the view. I just published 90. Fix desktop responsiveness issue: You will see this type of alignment issue. So let's fix it. Most of time this happens because this container already get gaps. If I click here, it will show as zero, and if I go to the side setting and in layouts, we also here get gaps. Let's remove those two gaps to zero. We don't need that and click on save changes, then close it and click on save here. It seems didn't save, and let's save it. Now I click on back to edit Okay. Now what we have to do is set other unnecessary space. In here, I click on this menu and on this menu, I will set this pointer with zero and when I do it, the pointer didn't show, so let's make it like two. Actually, let's see it in the Figma design and here, let's check the pointer. It's actually two. Let's make it two, it's already to and then let's make horizontal padin as zero. And when we do it instantly, the spacing become smaller and let's make the vertical padding as zero, two. Let's make it actually. Let's make the horizontal pading like two. Then here I will remove two point fix from the space between. Now we have clear design. Now I will click on publish and here I go to responsive test tool.com and from here, we can check the responsiveness. I click on preview changes and copy the URL, only the URL part and put it here and click on check on small size screen, it will look like this. Then let's go to desktop bigger version. So in small tablet, it will look like this. Then let's go to the next version and in this version, it will look like this. Let's see it from inches. It's 15.6 inch, so it will look like this. As I remember the previous hero sections that we designed, we had the same issue. Let's go to those hero sections and edit them. So to HER pages. In pages, I open Hero two, let's click edit with Elementor and open it in new window here, let's open this one too. On Hero one, we have it like this. Is mainly happen because of this menu I click here and go to tyleOtyle I will add the pointer with a zero and horizontal padin as zero. Then vertical padding also will be zero. Let's make vertical paddinas default like this, then it will look like this, but now we have a issue. This is not in the center. To make it center, I think in this design, yeah, in the design is not in the center, so it will look like this, and we just fix that issue and then just publish it. Then let's go to the Hero two on Hero two, we will have the same issue. So let's fix it to click here and go to Its on E times, pointer will be zero, horizontal padding will be zero. Vertical padding, let's keep it as default and now it's become closer and now it's pretty similar to this design. This was the issue that messed up with our website. Now I will publish it too. 91. Design 03 hero section part 2: Let's continue the work, and I just click on this icon box. And on the Figma design, we have this light blue border, but in elemento we don't have a way to add it. So we only have the fimary color, which means the background color and the secondary color as the text color. But we don't have a option to add border color. So to fix it, we can use image box. Download this icon as a image. Then we can directly add it as the image. So to do that, I go to the element page, then I click on this add element, and here I will search image box. Here we got the image box. I will just drag and rope it like this. Then what I do is I just try click and click on copy because we are already have the E style so we can directly pase that style by right click here and click on Phase style. Okay, now let's add those information. To add those information, isolate the icon box, go to contact, and here I will copy the title and come here, then just pace the title. Then come here and copy the description, and here just pace the description. Like that. Okay. Now we will have to go to E style and it's already in the middle now let's remove this part, we no longer need this part, so I just delete it. Okay. Then what I can do is I can click here and first let's add this icon. Select the icon. Here we have this panicon layer and go here, click on Export and in here, set PNG and click on Export P pawn icon. It just exported. Let's go here. Click here and I will just drag and rob the icon like this. Now I click this select icon, it added like this and from here, I will set the sizes full and now let's go to the Etyles in Estils. I will click on image. Image, I will set the width as 100%, border type none. Actually, let's make the width like this until it not radice this size. Now I go to advance. Now we have to align this to align this, go to style, in style, click on the box, and here we have image spacing as 15. Let's make it zero. And now it looks like this and we will have to increase it a little bit like this. Then let's fix this correctly. So inbox, I will add vertical alignment as top, then alignment will be left. And then image spacing, let's make it like let's see the image spacing here. It's too. Let's make it. No, it's tool. Then the content spacing is ten. Let's make it ten. Okay. Then let's go to image in image, I will set the width 100%. Yes, then well good here and let's go to advance in advance. I will change this custom with the default. Then here the size in will be string. Okay. Now I will click on publish and let's refresh this page to see the current w. For some reason it's not show in correctly, so let's adjust those stuff, and here the wide should be 100 fixel like this and let's make it. We have a issue with this wed, let's make it 100 should be 100%, and then the content is good in here. I look good and image size should be full. Then go to advance on advance, align itself will be center, which should be default or the hundred percent actually make it devolt then the size. A good, but for some reason it's not showing correctly. So what if we change the width of this? Let's change the width of this image to 50 like this. Now it's much better. Then I will go to advance and set margin and padding as zero. In smaller device, it's not work correctly. Let's decrease this size like this here, let's remove the wide When we remove the wide, it's showing correctly and here in advance, good on image. Let's add custom with this 45 45 will be good. Now let's publish this design and let's see it on the desktop responsive website. We go to the responsive tool and copy here, paste it like this, click on check and let's make desktop size. This is bigger. And what about this size? Okay, it's work for weekly, and about this size, it still work for weekly. And what about here? Okay. When we come to this 280 by 800, it's get messes to fix it, let's see the inten size 50, 64, let's come here and click on this. Then in each dile, let's see the space in between, it's 44. Let's make it bit smaller. Let's make it like 34. And now publish it, then here, we can click Check again, and now it's showing correctly. Okay. Now let's move to the next part of the website, which is adding this border. To add this border, we can go here and click on this main container and go to advance on Advance, we should see the border. In Advance, we don't have border, don't we? Yep, not on advance. Let's go to Etyle InStyle, we have border. So the border will be solid and click here. Then let's see the border from here. Okay, here, border with is two and color is this color. So copy the color, come here. The border with will be two, and here only we need to make it bottom and border color will be this color. Okay. Now it will look like this. Then what we have to do is create this section. To create this section, I click here and click Cplex box and create a new container like this and click on Advance on Advance. The right pattern will be 140 and the left padding also will be 140, like this. Then we have to add this text, so I will click here and Rag androper headline like this and click here. Then typography is cabin medium 24. Let's go to Estyle and typography is cabin 24 medium. Medium mean 500 just copy the text and click on Content and paste the text like this. Then here, we have to change the color. So copy this fill color and put it like this. Then in item in ten s two, and here we have to add pop ins median 50. I just duplicate this one and let's make it style typography, pop in. Medium, 50 like this, then let's copy the text and just paste it here like this. Okay. Now I will again click on this container and go to layout here, the gap should be C row and let's find out the mean height. The mean height is 577. Let's like this. Then here the item will be justify center. And let's make this like this. Then I will click here and go to EtyleOEtyle, click on Background type and click here. Then let's download this background image, click on it and click on Export. Let's set it as JPG, then click on Export, like this. Then let's go to Tiny PNG, click here. Just drag it like this. Then click here to download the optimized image and let's put it here. Click Cslect and it just added like this, and now we can adjust this like this. And here, we have to change the color. The color is black, and the item in between sides should be also changed, which means the line not item in between sides. Let's make line height as 55 and make this bigger like this color should be black. Now let's see the item in between size is tool, so let's click on the container and go to layout in layout, the Crow gap should be two like this. Then what we have to add is the button. So let's add the button, click here, search button, and just add button like this. Then let's see the button takes, copy the button text. So the button text typo gap is cabin medium 24, and it's in per case, put it like this one style, typography, cabin, medium, 24 and the transformation should be upper like this. Then let's see the in between size. Top is 25, the left and right is 30, 30. Let's make it 25 by 25. Click here, go to not on advance in this padding. Let's make it 25, like this. Then the color should be white and this dark blue color and the corners are zero. The color is this and white and this color, the border radius will be zero. Now we have a problem because the text should look like this, to fix it, I will go to advance and advance, let's make this custom with 253 and still it becomes bigger, that's a issue and also the background is not working as it should be. First, let's fix this issue to fix it, I will add this with as full and then what I can do is go to Content and here add BR. Then here add BR sla bracket BR and close the bracket like this. Then it will not change when we change the size of this website. Now we have a problem with the background image. Let's fix it. It's easy. Click on the container because we add this image to the container. And click on image resolution as full and the position will be center right. And when we see it, it will look like this. Then here, what we have to do is repeat no repeat this paise cover. Then if we check it, it will look like this. If we check it in a small device like this, it will look like this. Okay. Here we have another issue. I think because this space is too much no, it's same on the original design. So yes, here we just create the hero section three. 92. Updated Elementor: Hello, everyone. If we go to the website, we will have a update. So I just click on it, and here we have elemento version update. So let's go to the plug ins and click on Install plugins and here we have version 3.25 0.4 as current version, and we got new version as 3.26 0.2. Here we have a message called please backup before upgrade, which means if we are going to upgrade this plugin, we have to take a backup of this website because the plug in updates can break the website. When it happened, if we have a backup, we can restore the backup. Before we update this plug in, let's get the backup. I am on the C panel on Namecheap C panel, I install this Wordpress as Wordpress use in Softacula. If you use different web hosting, just search on Google about their backup system and get the backup. In this case, I click on WordPress managed by Softaculs and here we have our website. I just click on this down narrow icon, and here is the details of our website. And here we have a green button called backup. Just click on it, and here it says this backup is only for 28 days, but it's okay. And from here, we can add a node. So I will add node like element or pro plugin update. And I will set backup location as default and here I click on backup installation button and now we are backing up our WordPress website. Okay. Now we got the backup and I click on return to WordPress Management. And here, if something happens, when we upgrade the element or plugin, we can just click on this fstore backup or restore button. Then here we have the backups and if I click on this node or if I hover over this node, we can check the backup node that we added. So here is the backup that we just created. And if we click this Restore button, this backup will start restore or we can download this backup to our local computer. Okay, now it's time to update the plug in. So just go to plug in page, and here I click on Update now, and it's successfully updated. So I will repress the page, and now our version is 3.26 0.2. And if we go to the website, the website is working fine. So we successfully update the plugin. 93. Clear website backend: Hello, everyone. Now it's time to convert our FIGMA website UI to fully functional WordPress website using Elementor. Let's start to do it step by step. First, I will go to the WordPress dashboard and we use this WordPress website to create our testing pages. Now it's time to remove all of them. So let's do it. First, I go to dashboard, dashboard is clear, then let's go to Fst AposFstPage is clear, and let's go to library in media. And here we have some images. Let's click on bulk select and select all of those images like this, then click on delete permanently. Or if you have a lot of images, you can click this icon and click here, click this checkbox, then you can just delete all the images. Okay. Now let's go to pages on Lpage. We have those pages. I will click here and on bulk action, I will click on Moto trash and click on Apply. Okay. Now I click on Trash box and click here. Then click on Delete permanently and click Apply. Okay. Now command section is clear and elemento is clear, and let's check the save template. And here we have the coming zone template, but we still need it because if we check the view of the page, it will look like this. Actually, here we have a issue. So let's fix it in next lesson. For this new website, we need in sound page. Go back and here, let's go to appearance and themes on themes, we have this Halo element theme and we are going to use this Halo elementor theme, so I will keep it like this. If you have a different theme, you can just click on this at new theme button and search Hello, elemento like this. So when you do it, you will get this type of theme, click on it, and here you will see Install theme, just click and activate the theme. I already did it, so now I close it and on plugins, click on Install plugin. We have elemento and elemento plugin, which we are going to use to build the website from scratch and on user, go to El user. Here we have only admin user, and so far so good, I will go to dashboard. And now it's time to go to the next step, which is set up side set in, and let's do it in next lesson. 94. Elementor global fonts and colors: Okay. Now it's time to set up site setting. So when we check our Figma design, we already have the size of the desktop version and padding of the website. So it's 140. So we can define those stuff on elemento website. So let's do that. Here I am at the Wordpress dashboard, and as the first step, I will go to Elementor home and I will remove this part. In here, we can click on side set in. So I just click on Customize. When I click on Customize, I have to create our first page because currently we don't have any page. So let's start from there. Here we have a message element or data data, I just click on, click here to run it now and let's remove that message like this. Then I click on at New Page and let's add the title. This page will be our homepage and if we go to the website, our homepage name should be this website name. Here we have the web design requirements in here, the company name or website name is JB Family Clinic, so I just copy it and paste it here, then I click this edit with Elementor button Okay. Now I am on the elemento editor. Let's go to sit setting from here. To do that, I I click this site setting icon, and here we have the details. Let's go one by one. First, we have to place that we can define design system. Click here design system is a collection of reusable components with clearly defined standard for use. On elemento we can global colors and global font as design system. We can create reusable colors and fonts. First, click on global colors and here we can set the colors. If we go to the Figma design and on our Ithica sheet, we can see the colors of the website. Let's define those colors. First, we have this blue color just select the rectangle and in fill, we can see the color code, select it and copy it. Then come here. Let's set it as primary. So here, click on the color and paste color like this. Okay. Then let's go here. Here we have the secondary color. It's actually white, so let's add it like this. Then we have to add our third color or text color. So just copy it and here, let's add the text color. And we only have three main colors. But if we check the design, we can see this type of light blue color, so I will just copy it and we can add it as accent color like this. But in your case, if you only have three colors, you can just ignore the accent color. If you have more than three colors, you can click on this at Color button, and here you can add name for the color. So I will add Tn or button color and here I can select the color as I like this. You can create as many as colors, but in this case, we don't need any custom colors. So I over this and here we have delete button, so I click on delete and click here. Do it. Okay. Now what I'm going to do is click on Save changes. And here we have global font section too. Or if we go back, I click on Exit and let's go to sit setting again. And if we check here, we can click this Global font. When we click it, it's redirect to the same page. It's like a tab. Now on font, if we go to our Figma file and on typography, we can see the details of the font that we use in this website. Okay, let's add the font details. Here we have header as lato 60 regular. So let's go to the WordPress website, and here we have the primary, click on it, and here I will set the font family as LTO. Then the size is 60 and height is regular. It's means normal in elemento. Now here we have the font and let's add line height as 36, 36 will be okay. And the benefit of defining those parameters or those fonts and colors are, we can reuse these items in the design. Let's go to an example. To do that, I just click conceive changes and let's go back and I just click Plus and Flexbox, then create a direct column time contain and here, click on add element and let's add a headline. Then I will duplicate this headline for three times and here I click on the headline to edit it and click on I style. In here, we set up the typography. Let's select the primary as the tiogaphy. Now we have a issue. The line height is too close, so let's try to fix it from here. Let's make line hit 55, 55 will be worth. And now what I have to do is go to sit setting and then global fonts and here the primary size will be the primary text line height will be 55. Okay. Now let's save changes and let's go back to the design. Now let's make this color as text color, and here let's make this color as accent color. Okay. Now what I do is I will duplicate this accent color text for two times, and this will help you to understand the power of the predefined colors and typography. So now I click on Fablish it's okay. Publish this page. Now think this type of scenario. So client of this website want to change this light blue color to red color, and think we have this type of text like 60 text filled in this color, text field or buttons in this color. And if we want to change this light blue color to we have to change those 60 text manually by going in style and changing it from here like this. But if we say global variables or global colors, we can just change that color on the side setting and it will affect the fall website. Let's go to sit setting and here I go to global color and we need to change this to red color like this, change it red like this, then I click conceive changes and it apply to the whole website. I click on back to editor, and now you see those two text become red because we set global color property to this text. This is the benefit. And if you need to change this text size to different size, if you use global typography or global font, you can just change that set in on the size setting and it will affect whole website. I hope you understand why are we going to set this type of global fonts and colors. Okay, now let's secondary text. So the secondary text is fig tree 25 regular. Let's make it the font is fk tree, 25, and the width is regular mean nom. Set this line height to auto as the typography on the Figma typography, so it will be easy, set it like Otto like this and let's do the same to here. Line height is auto and if it has a issue, we can just change it from here, then we have to change the text type. The text is this paragraph fonts. Is fig tree 20 regular. Let's change it to fake tree 20 is regular and here line night is auto click here, click pencil and set it as Hto now we have here axon. Actually, I will change this axon to button because here we have it as buttons. If we want, we can change other texts and the button text is victory 20 regular. Actually, it's medium here it should be changed as medium. Anyway, it's factory 20 medium and it's in uppercase. Let's make it. We should be capital here factory 20, not 25 20 with this semivol median means semiv and transformation uppercase. Okay, and line height will be again auto Yes, yes, yes, yes. Okay. Now we can actually rename those names. Let's change primary to header and the subdin is secondary text, and that button text we already change it, and here we paragraph text so we can easily understand it. And actually, we have to change this accent color to light blue because we already make changes. Let's copy the color code and here put it like this. Click on save changes, and now I click on this cross because we need to set up other stuff. Again, I have to go to sit setting, click on site setting. Okay, now we set the global colors and global font. 95. Setup site setting: Hello, everyone. Now here we can ignore the theme style because those set ins inherited by the theme, and we are going to design our website from scratch and the design system global colors and fonts are enough for design the website, and then we have to go to set ins. In setNs first we have site identity. So I just click on it, and here we have to add the name to the site. So let's go to our Figma design. And here website design requirement, I will copy the company name or the website name. Or we can go here and check the leaders from here and I just paste it like this. Then we have to add site description. This is the site description or tag line. I will copy this headline as it description or site title and will look like this, then we have to add the site logo, the site logo is already created. Here is our website logo, and I just click on this BG ogo and go to Export on Export, I slate the format as PNG, then I click on Export GB Logo, I Epoded. Then I will go to the website, click here and let's upload the site like this. Then I will add the old text as JB Family Clinic logo and click on select, it just added, and then we have to add the FVCon. We currently don't have Fv icon, I think, or do we have? No, we don't will create one quickly to do that. I just press on this frame, and here I just click like this and F Vicon should be five well by five well let's set the width and height test f too well, five too well, like this. Then I will change this frame to FV icon. Now I will go to ASEDs in ASSETs click on created in this file, and here we have the JV logo, and I just click on ISAT Instance, and here I will click on the logo, and I will just click on this detach instance icon, and then I will move this family clinic part and here I will increase this text. Actually, we have to increase the font size. Let's make it. I will go to files and in files, select the text and let's increase it. Here, I will add 500, 500 is too big, 200. Here I have to change this size, like this. Let's make it like 300. We can increase this more like this. Now I will increase the and it's look good. Then I see this FV icon and click on Export and click on Export FV icon, and Ilate the Ti fas PNG, click it. Okay. Now I go here, click here, Dangers, drag and drop the Fav icon and add text actually, the Fav icon is empty, so I will not edit. I will click on delete permanently, something happened while we download it. I will. Here is our FV icon frame, but it's in this JB logorame. I just select the JB text and click on FV icon and paste it. Now it's inside the FV icon frame. Then I will Okay, now good, select the Fav icon and click on port FV. Then let's put it like this and cut this, copy it here, then paste it like that. Then click on CLX and now click Save changes to save those items and let's go back. Now let's revise this page to see the new look when we add those is tough. Currently here we got the title and if we preview this website, the JB part or the FAV icon show up on the tab Okay. Now what we have to do is set up the layout, click on layout, and on layout, first, we have content width. If we go to the FIGMA file and check on the homepage select the homepage frame and here the width is 1,440. So let's add 1,440. Then we have to add the padding. Let's see the current padding. Here we have padding as 140 padding mean, the space between the left and right. As an example, if I change it to zero, the design change like this, but if we add it 140, we got this type of paddin or space in between left right. It's 140, here the right side is 140 and left side is 140. It's already there. Then we have gaps. In gaps, we have column and row. If we make it zero, the space in between those item will be zero. But if we add 50, it will be 50. Let's see the item in between size. Here we have 220 and here when I select items or element and click press Y over the next item, we can see the in between size, so it's 220. Let's add Raw Gap ps 220. I click this link value together button to uncheck it, then the raw value will be 220. Then what about gaps? Here the gap is two. Actually, let's not add column gap like gap between two items like this, let's do it by manually. So I will add column gap Co. Then I click Conceive changes and the default page layout will be element of full width, like this. If we select theme, the theme stuff will be inherited, but let's select element of full width, and now click on save changes. Then let's keep the break points as default and let's go back and we successfully set the side setting and now I will close this tab, and here we are in the design, and here I see a issue. So let's click like this. Then the space in between this text is too high. Actually, it's fixed when we reload the page and so far so good now we have to add the header and footer and let's do it in the next lesson. For now, I will remove this part and let's click on Publish to save 96. Design header - part 01: Okay, now we have to start the design. So in element, we have templates. In templates, I will go to Team Builder. So in Team Builder, we have website sections. So those sections are repeated, and when we create one design for the section, it will apply entire site. As an example, the header of the website is pretty similar in the website, which means if we go to homepage, the menus section will be the same, and if we go to about page or contact or any other page, the menus section will be the same menus section or the header will be the same. So we can create templates for headersection, footer and other repeated pages of the website, which means we only need to create it once and we can apply it pages. In this case, we can create the header part using this menu section A, we can create the putter part. Let's start with the header design. To do that in element or theme builder, I will click on this plus icon on the header. Then here we will have prebuilt templates like this, but I don't select any of these, so I just click this close. I will increase this design like this. Then here as the first step, I will create a container. Just click here, click Plex box, click this column container, and let's see the size of this section. So its size is 120, so let's set Mint as 120 fixel like this, then I will make this content with full width and here I will add background color. Let's add a small green color like this because now we can clearly see where are we working? Now first let's add this logo to add, click this plus icon and here we will get side logo, I just drag and row bit like this. Then on container, I will set the justify content center and the direction as row direction as row and justify content as star like this, then a line item will be center. Now let's create this menu section to create the menu. Here I will click on add element search menu and here I will get the wordpress menu and let's put it like this and go to Etyle in Etyle the typography will be button. Yes. Is button size. Then on content, I will set the text align as center and for now, let's set alignment as start. Then on Etyle let's change usually the test color should be the color and it looks okay for now, let's click on the image and in image setting, alignment should be lap and align self should be center like this. Then let's just create this call icon to do that, I will click on a element and here, let's create image bob like this, add it right here. Then from here, go to Etyle and in image position, set it as ef and alignment will be lap. Then let's see the image dispasing six, let's set it at C. Now we have to download this icon. Click the icon here and Export and PNG, click on Export, call icon. Then let's come here and click on the image box on content, we can just click the Content. Again rope this. I can like this. Then click C SLAC. Now let's add those text details, copy the text and add test title, then copy the number and disk like description. Now let's go to headline in headline, click on image and image with should be 100% actual let's not add any size to image with. Then for now, let's keep the image width or image stuff like this and let's go to content in content here, the type of gappy is victory medium 16, and to add it, I will add let's add paragraph text actually, and let's see its size is two, I will just change it 16 and should it be bold? Yes. And should it be upper gas, it should be upper gaze and on transformation, I will say it upper like this. What about with this medium? Not normal, it should be medium. All right. Then the color is black color, this color. All right. Now here, what we have is fig bold 20. Let's add that details too. On description, I will sit the paragraph text and now I have to edit the text, its size is 20 and with this bold so far so good. Now here I will go to advance on advance which should be full with maybe de set the inline auto and it will be fixed like this and we have to change the in between size. Let's see the in between size, it's Z. Let's go to Etylectaspac in, let's make it like six. Perfect. Now it look like this, then what we have to do is go to content, not content, click on the container and on container click on Ispace evenly, so it will be set like this and now we have to add the menu because currently this menu is not the menu that we want, here we have the menu as about block our provider and contact and the homepage. Let's click on this menu item and here in content, I will click on G to menu screen and here we have those menus that we already created. Actually, I will delete them because we no longer need those menu items like this. Let's delete Okay. Now here I will add the menu name as main menu and click on Create Menu and here on pages, click on and here I will select the elementor page as the main page, and here I will change the name to home and now we have to add other pages first about page. Actually, for now, we just add Dammnus like this for about then blog, then our providers and can tank copy, paste it here at Tumenu and click on sameno Okay, now we have the menu, so go to element of page and here I click on publish and actually let's save this. There's a draft, click here and click on Save draft until we complete the menu, then I click here. Actually, I have to repress the page like this. Then click on the menu and here select the main menu. Okay, now go to Estil in EtyleF let's change the colors and on how I will change the text color to primary color. Actually, we don't need a pointer. Let's here and not here, go to style on style, divide or four point will be zero because we don't need a pointer. Actually, there should be a option to remove the pointer here, we have this on content. We have this pointer as none. Let's set it as none, then go to Etie in Estes, horizontal pattern should be zero, vertical pattern should be zero, space in between should be 04. And now let's check those spacing. First, the spacing should be 30 and space between should be 30. 30 is too close. I know the reason for this spacing issue. If we check the Figma design, it has this type of white container. Let's create that container and start editing. On add element, and here is a container. I just drag and rope it like this. Okay. Then first, let's change this main container direction to column, and now we can clearly see the items, and here is the container that I added. So I click this little icon and make it open, then I will put this logo menu an image box inside that container like this. Okay. Now, click on the container and click on direction as row horizontal. And here we have issue with I spacing. The reason is it added the padding as 142 left and right. So let's click on the container and go to advance on margin, remove the margin on padding, remove the padding. Now, click on the main container, then click on the subcontainer and go to layout on layout, set it as space between. Now let's adjust those information. When I select this container, I can see the edge of this container. So here we have a spacing. In image box, I will remove this pacing by changing its size like this and here we can reduce the size of the image box or the logo. Let's make it like this. Now it's showing correctly and now we have a alignment tissue, click on the second container and click on align items as center. Then click on this image on Advance. Here, let's change it like in line auto so it seems there is a margin top and bottom, so let's go to add Dance and remove the margin. Remove the margin, click on link value together and let's add minus margin to top like this. Then on the bottom, we have the margin. Let's remove that margin too. Now it's perfectly align, and if we check it in the bigger window, it will look like this, and then let's decrease this structure size like this so we can get the clear design of this. Now what we have to do is add white color to this container. To add the white color, I will go to Its in background classy then here, let's add the white color. The secondary color is the white color. Then now what I have to do is find out the I space around Menu, actually, we have to select the bigger item in this case, it's this phone icon. So when we check it, it's 29 and 15 as the left and right. So let's add those information. On advance the padding top is no actually, actually click the container, and on top, it's 29. Then on right, 15 on bottom 15 on left 29. Maybe let's make it like not on the left, left should be 15 and bottom should be 30, not 29. Let's make it as 30. Okay. And then we have to find out the space in between the top corner and the menu. So it's 20. We only have to select the item and over the item that next to the item that we selected, then press all and we can see spacing is 20, so let's select the main container and add margin top as 20. Okay. Now we have to add rounded corners, let's see the rounded corners. The rounded corners is 20 or the corner radius is 20, to make the corner radius, go to Itis and tis on board, add the radius as 20. Okay, just like that, we can see design. Now what I can do is click on the background container and remove the background like this. Then click on Publish. Before we click on Publish, click on the header setting, and on header setting, let's change this title to main header and then click publish. And when I click on publish, there is a question called, where do you want to display your template, and here we have button to add condition. So I just click on add condition, and here we can include or exclude the item. So I select include entire site because I want to see this menu in entire site. And we can add more condition as an example. I want to exclude or not show this in homepage, we can click on singular and here we can select the front page and then I can click on San Clause. In this case, we need to include this menu on whole website, so I remove this and click on Save and Clause, then it just published. Now let's go to the pages and ER pages and here we have the homepage, so I just click on Edit with Element and here our menu is show. 97. Design header - part 02: Hello, everyone. Now we have a issue. So I click this plus icon, and let's create a simple container. And as our website design, this image should be cover image of the homepage. So let's try to add that image. Click the image and click on for select the PNG and click export and the image size is bigger, so I will go to tiny png.com and rack the image and drop it on the tiny png.com website, then the image radios click on JPG button to download it and now I have to go to the homepage and here let's make this Min heights 700. Let's see the min height of this section. It's 800, the height is 800, so let's make this as 800, not 700, 800. Okay. Now go to Estils in Estyle click on Background and classic and here I will add this image. And this image ALT tag will be not tied. Hero image and click on C. Okay. When I add it, it added outside of this menu. So we need it inside of the menu. So to do that, we can add negative margin. So I click on this container and go to advance on Advance, click on Margin. And to top, I will add negative hundred. When I add negative hundred, it's go above and what if we add negative 200? It's go above, but we can get the exact size that we want to add because when we click on the menu and check the height is 120, and here we have another 20, which means 140. Let's add negative margin as 140 and we have to add 60, 60 will be work maybe 50. Yeah, the 150 will be work perfectly. So now still we have a issue because we can't see the background. For now, I will click on publish, and then I will go to the header to go to header, I will go to the dashboard, elementor, not element in template, Team Builder. Team builder, we can see the main header, click on it and here click on Edi. We can fix by adding IT index to this container, select the container and go to advance. And if you wonder what is a IT index, It index is a CSS property that control the Iacin order of TML element on a webpage. As an example, if we add one as a IT index of this container, it will appear in the front of an element. So the higher It index value will appear in front of an element and the lower It index value will show on the back. Now I click on Publish and go here, then let's rebash this. See, when I rebash it, our menu just appeared like 98. Remove default footer: Hello, everyone. Before we continue the rest of the design, let's remove this part, and let's go step by or section by section. To remove this part, I will go to tress dashboard. Then in here, I will go to Templates and Them Builder. On Them Builder, here, I click on Footer and close this, then here, I click Plus icon and CilletPlex box, then create a container like this, then I click on Footer set in and here change the title main footer like this, then click on Publish and click on at condition and it will show in entire site. Click Save and Close. Now if I go to the homepage and here, click on Edit with element actually we didn't still set up the homepage, so we have to go to dashboard on dashboard pages, click on pages, and here, click on Edit with element. And now we no longer see the footer part or that content, so let's build section by section. So in that way, we can easily understand what we are doing. 99. Hero section design: Hello, everyone. When I visit our website homepage, Is this type of space because we didn't set up the homepage yet. Let's set up the homepage. To do that, I will go to dashboard of the website. Then I will set in inside set click on reading. On reading, here we have a phrase to set your homepage. I will set it as a static page and here I will set the homepage as JB Family Ginic which is the name of the homepage and I click on Save hanges now if I visit the website, we can see our homepage like this. Now I will again go to dashboard and let's continue the design. On pages, we can find out our home page and here I click on Edit this element and we have to create this section. I already create this part, but let's start from scratch. I will remove that and here is the page look like. When you create a new page, it should look like this because we already set up the header part. In here, I click this class icon, choose Flexbox and select the direction column type container. And on this container, I will set it as full weight. Then on advance margin and paddings, then on layout, we can add minimum height. Let's find out the minimum height. The minimum height is 800 or the height is 800, so let's add it like this 800. Okay. Now, let's add image before we do anything. To add Image, we have to download, select the image like this, then click on Export. I will export it as JPG, then we have to go to tinpng.com, and here I will drag and drop it like this. Then it radios the file size. Click on JPG, JPEG to download it. Now I will go to Style of this container, and here I will select classic type of background. Then here I click on choose Image and here I already uploaded the image and you can upload the download image by selecting aging like this. I already set up the old text and now I click on select here we have to add some settings. The image resolution will be position will be center center, and attachment is scroll and repeat, no repeat, display size cover. Okay, now it will look like this, but the issue is, it should start from here. Actually we already did this part, so this part height is 120, and we add 20 to it, so it will be 140, and let's click the container, and in advance, we have to add negative margin as 140 maybe 50. Okay, 150 work fine. Now we just set up it like this. Now what we have to do is at this section. It's pretty simple. I will copy the text from here and come to the elementor and click on this plus icon and ag and roper headline like this, then put this text. Our headline is inside here, so let's fix it to fix it, I will click on container and on container layout section, we can define where our content should be. If I click on justify content, it will come to here and here, this is the pace that we want to add it, for some reason, the left and right padding were not set up, so let's add them manually to add them, I click on container and go to Advance. On Advance, I will add right paddins 140 and left paddins 140 like this. Okay. Now, let's keep continuing here we can set the typography in here, the typography will be header and the color should be secondary. Is white color. Okay, now we should have a space from here to do that. I will go to content and here I'm at the BR like this. Then let's add the paragraph, copy it and then click here, then add a headline like this and let's change it headline TML tag to P, and here, let's add the text content and go to Etyle in style. Set this text to paragraph see it's regular 225 and what will be the paragraph text details. To check the paragraph text, I can just click this edit by a button. When I check it, it's 220, so that's the issue. What if we add subheadline? Yep, it's the sub headline. I will keep it like this for now, then let's change text color to white. Then what we have to do is add this button, add this button. So to add this button, I click on this add element and here search button and rack a button and drop it like this. Okay, let's add those details. Here, I will copy the text and come here, paste the text like this. For now, let's keep the link as paso as hash tag. Then we have to change the colors. It's easy, go to E style and background color is this blue text color is this white color. Okay, now what we have to add is space. So let's select the t and press all. 252-53-5305. Let's add those details in pad in here, then top 25, right, 35, bottom 25, right 35. Okay, now we have to check the corners. The corners 15. Okay, here, let's at what radio says 15. Okay, now we have headline, text, and the button. Now what we have to do is at BR from those points. So here at the BR and the BR, good content on family and the BR like this. And after that, we have ensure and PR the Bok Nice. Now what we have to do is find the space from this bottom part to this section. So it's 60. So let's add that details. Click on the container, and on advance, we have to add bottom pad in as 60 pixel like this. Okay, it's look good. Now I click on Savedraft and let's repash this. Actually, let's publish this anyway because this website is on Coming zone mode. So now if I refash the page, it will look like this. And here we have a issue. We have a space to e face. Okay, I found the reason for this issue. So when we set up the side setting, we add default layout raw gap past 220, so I will remove it. When I remove it, this issue will be fixed, and now I click on Save changes. Let's add it manually. Click here and here we have already some spacing. So to remove it, we can add negative margin like this. It's actually ten and if we go to the design, the in between size says 20. So here we already have ten. If we remove this negative margin, we already have ten. So if I add ten like this, it will be 20, so we have to do it for a section like this, ten or we can add ten to this container like this. The same thing will be happened. Let's add ten to this container because that's the easy way. And yes. When we do that, the space in issue will be solved and nice. Now I click on Publish and now if we check on the design in real view, it will look like this. Actually, usually the website size will be like this, but as I told you before, my desktop is a bigger one, so that's why it's showing like this. Okay. Now what we have to do is add some animation. Let's add some small animation. First I click here, let's go to advance in Advance I will go to Motion effects. On motion effects, we can set entrance animation. Let's add simple like fading or bouncing is too much, writing down is too much. The fading will be based. Let's add fade in for each section. Click here, click on Motion effects, and on default, let's add fade in. And here, motion effects, click on fading down. No, Padin will be okay. All right. Now can publish and now it will be load like this. It's really simple because this website is for professional and adding too much animation will not looks okay. Okay. Now we have to design this section. Let's design it the next lesson. 100. About summary section - Part 01: Now let's design this section. I go to the page and here I click on plus icon and Plax book, then this one. Then here, let's see I select the section, then press all and check the in between size. It's one, two, 20, and let's here, I go to advance of this container and set the margin top pass one to 20 like this. Then we have to find the height, the height is 600. Let's add height layout in layout mean height will be 600. Now we should have direction as raw horizontal and as the first step, we have to add this image. To add the image, we have to download it, double click on it, click on Export IM and here, let's go to tiny png.com and download Dragan op to here to optimize it. Actually, it download as PNG, but we don't need it on PNG. Let's see if we download it as JPG, we may get more space or we may get imagize as lot more small like C here, we have 90 1 kilobyte, but here we 26 kilobyte. Okay. Now I will go here and click Con plus icon then search image and rag and op image box like this and click on it and here upload the image and the title. For old tag, I will add like doctor at JB Family Clinic, because it will help to increase the search engine optimization. And then I click here and here it's in center, so let's make it center by click this center icon on the container. Now what we have to add those two items. Let's start with this to add this, I can just create a container, then we can add those two as text. Let's do that first. We have to click here and add the container. Let's add a container like this. Now what we have to do is add to headlines at this one and then click here at second headline like this, then let's copy those text here, I copy this and paste it like this, then copy this one and paste it here. Now go to style and this text size should be P regular, which means we already set up it as paragraph like this. Then here I think this is headline. Let's see, it's headline, so let's add color as black like this. Then we have to get the idea of the spacing. It seems the spacing is like six ex it's so let's add the spacing as C. Click here and remove this one, then add as like this. Now we have to make it center, click on line item center. Then I will go to advance in advance, I will set size string. Nothing happens. Let's add a let's add the pad. Let's find out the padding and add it. Then we will try to do something to the spacing. It's 20 by 20 and 12 by 12. Okay. Let's add that details here, top as two, right test well, bottom as two, right test. Then we have to decres this. Let's decrease it like this. It should be like this. I just adjust it manually, then I have background color and this shadow. Let's add background color, we have to make the corner as 20. Let's add those details to add, I click here and click on Background type. Then here select the background as white. Okay. Then click on board and here we have box shadow. Let's go here and check the shadow details. So here we have eff section in the eff section. We have the details. It's position zero, zero, and we 15, then color is black color with 15% of opacity. Let's add those details here, we have to make the blur as 15 and color as black color black, and then we have to set the opacity. To set the opacity, actually we have to get the color code. To do that, first I select the color as black and then change to this HA here we go and also here I set it as Hs L, and here we have zero, zero, and here we have 15. Let's go here and reduce these two until it hits 0.15 as last value of this HSL, and now it's showing like this. Okay. Now what we have to do is add dice corner as 20 like this. Okay, we just created that section, and it seems good, and now what we have to do is add this to here to add it in this position, I will set it as absolute, and now what I can do is I can change the place, but when we set it as absolute, our design change let's fix that issue to fix it, I go to layout and let's value the till it set like this. Now I can go to advance and here I can set off set as I want. Actually, from here, we have a issue, I will set it tas full and for some reason it become more bigger than that we won actually let's change this custom with default like this. Now it's perfect and click here, then set this takes to set it, we have to check the position, so it's here, so let's adjust it. It seems good, maybe we add too much spacing, so let's change this top to two well and bottom to like well. Now we have to make as this now seems good and now what we have to do is create this section. To create that section, I will create a image box. With image box, we can easily create that section, click here and search image or let's add icon box because that's icon maybe let's add image box because in future, we can change it if we want. I just add then here, I have to download this icon, click on the icon, click on Export vector, and here I copy the t and come here, then I will add the headline as this takes, then remove this description because we don't need a description. Let's see the size. The size is regular 25 go to sis and content, the color should be black and the typography should be this. Now we have to remove this space between the icon and the tanks. Let's set zero and on image, we can with the width, but for now then let's gain the image, click here and directly upload this image and remove the title, this like equal concilate here we have big big spacing, good to style in style, change the image space into not happen if we add minus value adding minus value won't change anything. What should we do? I will remove the margin and padding and go to E style in E style. No, I will go to content in content, let's change this title to D and it's a little bit better. Now what we have to do is add background and this shadow to do that, I go to advance in advance, I will go to this background section and here I click on background type as classic at secondary color. Now let's see the spacing, left and right as and top and bottom as. Let's at those details here, top and bottom as 20 and left and right as 20. Now we have to reduce the corners in background here, we have to add 20 because I think it's 20 cent the border radio or corner radio is 20. Okay. Now we have to add this shadow to add the shadow. We have to check the details and here on border, we can check the details here I 15 blur and I will click on this x and copy this color code so we can directly dit from here, click on it and on border, click box shadow, which will be 15 and at this color code. Perfect. Now click here, then we have to position it same as this to do that, check the position, change default to absolute. Now we can set the offset. It's like this. Let's see, let's see the E should be and this should be right here. We successfully created the section and now we have to add this text. Let's add it in the next lesson. 101. About summary section - Part 02: Okay, now we have to create this section. So let's start. First, we have to add a container because this is in vertical way and click here, add a container like this. When we go over the image, we can see the place that we can add container, click here, go to advance, remove all of those stop. And now I will add the lick columns first we have a headline, then we have a paragraph. We need to headline, first headline. And the second headline, the second headline should be P because it's a paragraph and click here, then copy this text, paste it like this, then change it style to take color as black and then here copy this again and paste it and here we should change the typography to paragraph and text color like this. Now we have to add the spacing, so the spacing is 20. Let's add pacing to add it quick on container, and here on layout, let's add raw as 20. Okay. Now what we have to do is add in between spacing. If we check in between spacing as 90. Let's set it, click here, then go to Advance and we can just search left margin as 90. Perfect. Now what we have to do is add the button. I will here search button and dragon opper button like this, then we have to add the text so it's learn more learn more like this and let's forget the link for now and go to E style in E style change typogravito button and the color is background color is this blue color and the text color is white color. Now, let's see the water radio's 15 and let's add it as 15 and we don't need a box shadow, just remove it by setting it like this. Make the as zero and now good then we have to check the in between size. Slate the text and click on and here it's 2020 by 30, 30. Here we have the padding it's top 20, right 30, top 20, right, 30, and good. Here again, we got this spacing, this strange spacing, and that's a big problem, but it's keep appearing and we don't have to do anything. To fix it, I will just add negative margin. Now what we have to do is at this secondary button, it's pretty easy. So Let's click here and add the button or we can just duplicate this by right click and click into obligate, then we have to add a container to here like this. Then let's add these details inside the container and click here and go to advance make it a zero and on layout, add horizontal as direction and the column will be 20. I think it's 20. Yes it's 20. Now what we have to do is remove the background to remove the background color to remove the background color, I will click on the button and here go to style and change the background color to transparent and change the text color to primary like this. Then what we have to do is add icon and also we need to change the text. Let's change the like this and to add the icon, we can easily click on icon Library and here we have fontosm icon library and let's see this icon name. Actually, there is no name to that icon. We can just check it from here. Let's search like arrow here we have the icon click on it and click on Insert, and here we can set icon position. I will add icon position like this and then we can set icon spacing. Let's see the icon spacing. Let's set it as and we have to add custom ESS to increase the icon size. So let's do it in the next lesson. Here again, I click here and we have to set it align item center, so it will be aligned center correctly. Okay, so far so good. Now it will look like this 102. About summary section - Part 03: Hello, everyone. Now we have to increase this icon size. To do that, we have to use CSS. So let's start. I click on this pencil icon to edit the button, and here we have a place to add ID to this button. So I will add ID as our provider BTN. Just add this ID and when I add it, I don't add any spaces because we have to add it in one line. Now I copy it, then I go to Advance. In Advance, we have a place to add custom CSS. Now, I already created the ID, so I select that ID on the CSS to do that Ipress hash tag and paste the ID name and here is how we select ID on the CSS and now I click on Publish. Then here I click on Preview changes and on CSS code, we have to add this type of bracket to add DA code. Now I scrolled down just write here, click on and click on Inspec. Now I click this icon and select the icon like this. Here is the icon. If we check here, our ID is visible and now we have to select this part to do that, I can copy this class and then come and add space, we use dot to select the class like this. Okay. Now here I will add the code to increase the size of this icon. This icon is text, so I will add code like font size, and here I will add it like 30 pixel 30 pixel is too big. When I add it, you can see the live preview. What about 25, 626 is better. When I add 26, it just go down, so we have to make it up. I add semicolon and here I will add small code like margin top, margin top, presenter, then here I will add some. Let's add minus ten px, it's too much. What about five? It's still too much. What about two? One seems one, no, two will be two will be the perfect alignment. We successfully make our button icon bigger and now I click on publish and on the real preview, it will look like this in next video, let's add animation to this part. 103. About summary section - Part 04: Now we have to add animation, let's do it. First, I need to add moment to these two items when we scroll the website. First, let's do it for this container. I select the container or select here. Actually, this is the container. I select container, then in style, you can see scrolling effect. This scrolling effect is apply for the inside items. So it's not working, we need to add scrolling effect to this whole section. To do that, I click on advance in advance, we have motion effect section. In motion effect, we can add this scrolling effect. In scrolling effect, we have a lot of options and here we have feature to select device that we want to use the effect. But for now, let's keep it like this. Then I need to add vertical scrolling. When I scroll this, I need to go this up and down. So to do that, I click this pencil icon, and here when I select scrolling effect, I can set it down or up. So if I set it as up, it will go up when we scroll it. When we scroll it down, it will go up. When we scroll up, it will go down. And I need it down. Now I have to set up the viewpoint. Okay, now I go up and let's see the movements. When our viewpoint is here, we can show this icon on this part, but I don't need it to show it here. So to fix it, I will change this viewpoint bottom to here. Then if I call, it will start from here. You see, when the bottom like this, it starts to scroll down and we have to add this top viewpoint to add it, we have to go down more than this, so I will add new empty container like this. Then let's add it mean height as 800, let's see here 800 is enough. And nice. Now again, I click here on a dance motion ax and here, let's see what if our top at our top part hit like here, I need to come to only this part like this. Now you can see it's clearly changing and if I want to make it horizontal, I can use this horizontal scolin. Now it will go both sides like this, but I like the top and bottom and for this, let's add top to bottom. To do that, I select this image box and go to advance on advance. We go to motion aft and here click on scroll on vertical scroll, I will add direction of, which means when we scroll, this section will go up. Let's fix the w when it come here, I need the top to go down like this. I only need to go like this and see, good. We have to change the position of this to make it better. Let's click this image box and go to layout and in the vertical offset, let's put it here. Now I think it should work better than before or what about putting it here in the middle? Yes, when we add it to middle, it will work perfectly. Nice. Nice, nice. Now let's go to the motion effxs and click here. Then let's set the bottom. Here, I will. Here if this go like this, I will set this top pass here, then scroll up, scroll up will work fine. No, something wrong. Actually, we have to put this layout position more middle like this, here, let's see something wrong with it. But now I think it's work fine. It's work fine. Surely, we have to make this bit. Okay, now it's work Okay. We have to play with those value used to get the best motion effect, and now I think it's looking good. Okay. We just add it and here, let's add the motion effect to this whole section. So I click on the section and go to Advance because adding more motion effects and transaction will slow down the website, so we have to keep it in mind and I add this type of effect. Let's publish it and let's see it on the real website. Yeah, it will work like this, but this should be not similar to the header design. Let's see the motion effect of this header content is fading, so we have to add fade into this section. Motion effects, not patrte fading, like this. Publish it. Now if you check the design, yes, it will look like this, here we have a issue. When we scroll this up and down, this pace is the pace is covered, so we have to fix actually tapen on the bigger screen, but still we have to fix it, no. To fix it on layout, I will add custom with like, then it should be fine. I think. Let's see, can publish and something wrong. What is that? Let's make this structure disappeared and decrease this section too. When I decrease it, this design get bigger and bigger and there is a issue, we have to fix it on advance good and here, let's make it shrink offset is fine. The issue. Let's click on this text and make the text center and remove all of those stuff and with full let's do the same with full width and make it align center, and let's see till we got the issue. Why is it happened? I set it as the fix with something o. Now we can we should set this in fixel. Let's make it like 500, 500 is too weak and 400, 200, 202 small, 300, 300 is for week two. Actually, we can check the size from here. Width is 215. What time I do it? 215 should be the wind. Okay. Now it should be fine. See, small fixel that the pass weight now is good, publish it and let's see in the design. Yes, it will look like this now till it has a issue. Actually, let's try to fix it too. I think in the left and right to it like this. Let's put our custom 250, maybe 200 200 will be fine. No fine. 15 publish. Now it's working well, all right. 104. Service section design - Part 01: Hello, everyone. Now we have to design this section. But before we design this section, we have to find better icons. Those icons are not good looking and it's not represent the service that we provide on the services section. Also, in here, we have other icons and it better at Slim icon. To find icons, we can use website like Adobe Itok and search icons or we can use Google icons to use icons. Google icons are free to go to the Google material icon, you can just search Google Google icons on Google. Will get material symbol and icons click on it and here you have the icon. I need to change the look of those icons, I will reduce the width to 200 and let's make gray dash 200. Then the optical size will be 40 weixel 40 weixel is better and here the style will be rounded and material symbol new. I just select it and here let's make grade as zero and make icon bit bigger like 300 and let's make grade as 200 and here we can search the icon. First, we need to replace this phone icon. To do that, I just click on the phone icon and let's get its size. It's 32 pixel with let's search here like phone, here we have a phone icon and let's select this all phone and here we have to make this size as 32 press Enter and the color the color is white, let's make the color white and click on PNG, and the icon was downloaded and now go here and just click click here image and video, select the icon like this and press Enter and now you can just click on here. We already selected it. Actually, you have to select the co icon here, so now click on the icon and put it like this. Now what we have to do is decrease its size little actually, we have to select the icon and decrease its size like this. Actually, it design 32 pixel. Anyway, now let's make it height as 32 32 is too small, don't you think? Yeah, 32 is too small. Let's make it 48. 48 is better, let's keep the 48 as the size. Now let's go down and here we have a nurse. Let's search here like nurse When we search nurse, we got this type of stuff. Let's search like hospital good. What about health? Okay, in health, let's search. Let's find some icon that's suitable for that pace. Yeah, this icon will be okay. Select it, or do we have different icons better than it? No, from those icon, this icon will be suitable for it. Let's just try to decrease the weight. Get a thin line icon, and the icon color is blue. I just let's just copy this blue color so we can easily change the icon color from here like this. Okay. Then let's check the size. The size is 57. Make it 57. Actually, 57 is too big. Let's make it like 48. And click Copy and GTu download. Now go here and select the icon and click image to add actually it didn't update. Click this whole section to add like this and put it like this. Now, the size is 57, let's reduce this size to 57. The 57 is too small. 98 will be looking good. Let's keep it as nine. Actually, Line 20 is bigger than what I imagine. Can remove this background by click here and click the crop, then we can cop the background like this. Then we will have better icon. Now what about 30 to 57? Now so far so good. Actually thin icon looks better than this icon. Anyway, let's make red as 100 let's see the thin looks of the thin icon. Here is the thin one. Here is the thin one. Click here and it's. Anyway. Now we have to change those icons. First, let's go preamble and search. Looks good. Click here. We have a milk bottle and it look good for here. We have to find the vector icon size. It's 60 by 80. Let's make it a 60 and the color is the color is blue. Click confi eng download and select this icon here and click here. Then just add it like this. I didn't add. Oh, I see why it's not adding because this is a component. Click here and click on Detach instance, and then I can add what happened? What happened here. Now, let's add it here, just click like this and then gout it like this. Now decrease its size. What happened? Here. Actually, I have to remove this oh let's this image like this. What was the image with? It's 60. Let's select the image and make it with 60, no, no good, 120, the background size should be 12110. The size should be 110. Now I have to click on this image and click on Crop and prop it like this because we can make this bigger when we remove this unnecessary size, then I can make this as 60 so pre select the image and press shift and make it bigger. It's six Okay, looks good, and here we have this text, let's copy the pregnancy part. Okay, here we have a pregnancy image and click on PNG to download it and let's replace this image. Click on this image to remove it. And here, let's add that image. We just downloaded it here then double tap on the image and go to crop unnecessary space like this. Now we can decrease its size space shift and decrease its size like this. Now we have woman copy human females. Let's search P and here we have females. We can just add this type of female icon or women's icon like this or or this icon will work Let's download it and let's put it remove this here and not that tight. This is the click on it and paste it inside the box like this and put it. We have to check the size so far so good and now we have family medicine, so let's copy it and paste it like this it like family. I would like to add this type of icon because this type of icon will click on PNG to download it and remove this one. Quickie, paste it like this, then depress fit like this. Now is good. Now what we have to do is add those icons to our WordPress website. Click on this icon and on X what click on Download and go to the website and click here, then click here and we can just download it. It's really small file, so I can Okay. Yeah, just download it and di it like this and it looks good, click on publish to save and now we can start to design this sex 105. Service section design - Part 02: Hello, everyone. Now, let's create this section. So here I go to our dashboard, and here we have to create a container like this and let's see the size. The mean height was 666. Let's make it in here Mnhight 66, six, and now good here, and here we have to add this title to add it, I just copy it like this, then come here and add the heading like this, face title and go to style set Align center and Typograps header and text color should be this black color and the text should be cut from here, so to do that I add Bro I have to check the inbteen size. It's 120. Let's add it, click here and go to Advance the margin top is one to 20. Okay, so far so good. Now what we have to add is this section. If you check this section, we have a arousel. I element to add arousel we can click on this add element and search carousel. And when I search it, we get this type of result and here I just add this car item. Now what I have to do is remove those unnecessary stuff. First, I will remove the first slide and keep only two slide and slide on display will be two. Then I'll for here, let's go to set in, set in is okay. Navigation, navigation is okay. Let's make glo stuff after we complete the design. Now if you check the cas design, it's too close. So to fix it, I click on this edit container, and now if we check here, we can check the via at Slider hashtag one. So if we want, we can rename it too. But for now, I will remove that and here A let's remove the spacing like this. Now we have to add the left and right pad in to add the pad in, I click on the container and here I have to add right padnas 140 and left padnus 140. Okay. Now quick and here we have two containers. I select the causal and go to Advance in advance, remove all of those unnecessary stuff here first, we have to add this title and here I search image box like this, just put image box inside here and with image box, we can complete the task pretty easily alignment will be left and image position is right. Now I go to content in content. Let's add those details like this, then copy this one pace like this and let's download this image, select the icon and export in exxpot, click on Export icon. Then here, I can add this to tiny PNG, but for this one, just upload it like this. Let's add ALD text as this pediatric part and click Consilate now select the image box and let's fix the issues. First, let's find out the in between size is 20 by 20. Okay. Now go to E style in style, Imagepason is 20, 20 contentpacing is 20. Now go to image and image border is non image width will be 100%. Actually, it's not a image width. In that way, the image will use the default size and now we have to make the image in center to do that. Let's change this STMLtg to D and now go to E style and on content, the periodic color should be text color and typography should be subfded like this. Okay. Or remove the margin and padding which will be full width, then here vertical alignment should be middle so far so good and now we have to add this background shadow, rock shadows or click on the rock shadow and it's 15 and here we have the information. Let's do it. We are ready, if you remember, Selet the image box go to advance in advance, we have the per border. Order book shadow, the nerve is 15 and the color should go to HL X then come here and the color should change to click here and HXL select the CSS, copy the color code and come here. Is the color code like this, we just add a date and we have to change the border radius. If we check the border radius, the board reduce is 20, let's reduce as 20. Okay. Now our drop shadow is not working. Did you remember this same issue happened in the Figma design? And what we did is we just create padding as 120, then we add margino here as 20. Let's do it for this one. To do that, I select the container. On advance, I change this 140 to 120 and here also make it 120. Then click here. For this slider, I can add right padding as 20 and left padding will be 20. Okay. When we do that, we can clearly see the border. As we have to add the top padding as 20 and Bottom padding also will be 220. Now what we have to do is add the padding of this image box, it's 20 and click on the image box and here, click on Chain icon then add 20. So far so good and it looks like this, then what we have to do is just duplicate this one and here we have to find out the in between size. It's also 220, so we can just click here. Or to layout on layout, we can add as 20. Now I have to change those details. Let's change them, copy from here, click on here and paste like this and change the image to change it. We have to download this icon and copy this text to add to the old text and click conceal Okay. Now we just create one side and now I will duplicate this slide because we need second side to do that, I go to Carsels and click on this duplicate button to duplicate the slider here I will add slider to as the name, and now we have to change the details as we did before. Like this do the same thing to here just like this. Export, click on Export icon here. At the exported then add Al tag like this, click Consiler now are good and here we have a issue. This one is bigger than this one, to fix it, I click on this image box and here, click on grow and it will grow like this and we can do the same to those items too. Now here we have a big space to remove it. I click on Karasel and incara I will go to style in style, gap between will be zero and the ball reduce pad in, we don't need any of these. Now what we can do is click on the slide one and add right pad in as ten. Then here click this one and go to advance add left pad in as ten. Now is looking good. Here in carousel, we can change the content details. So here we can add carousel name, so I will add services, and then here, we have to add one more slider and when I add the slider, I can see this dot. Let's change those dot details to do that. I should go to navigation in navigation, not on the arrow, it should be page ination. In pagination, it's set as dots and go to Style in style pagination. Let's see the style. So I think style is 220. So let's see here is the D das. I just check on the style it's 20. So let's make spacing as 20. It's space from the slider. Let's see the space from the slider. I think it's also 20, but let's see. Yeah, it's 30, not 20. Let's make it 30 position is center, then size find out the size of this one dot. It's 20 by 20, let's make size as 20. Space between dot will be 20. Isn't it? Yeah, it's 20 what less? It seems too much, so let's make it like ten is still too much. Make it like six is better. And color, I will make primary color as and our color will be this accent color. Okay. Now it's worked perfectly and do we have arrows? No, we don't have arrows, so I will remove those arrows to remove them for navigation, I can just set zero or on content, let's see, is there a way to we can just untake this arrow part and it will just disappear like this. Okay. Now let's add other content. To add them, we have the content list. So let's get it. Okay, here is the content, and we have to add those contents to the next slide. So let's do it. Just copy it and put content and paste it like this. Then again, copy the small description. Actually, not small description. The loan description should be the part that we have to add. No, it's about page content. Here is the content that we have immunity and Maxine, copy it here our service section, add the content from there and be this one, then copy the small description, paste it like this, as it here and let's first add the content, then we can add the titles mental health support, adamall description, paste it, then copy this one, add it here and then paste this. Okay, paste it here. Nice. Now we have to add the images. So to add the images, copy the text from here, let's copy vaccination part and put it on the vaccine will be the text, put it on the Google. Click on PNG to download and here we have to add to add it, I will create a instance of this like this, then I will detach it, click here to detach it, and then I can just replace this image with the icon and click on image and here we have the vaccine it like this. So we the axing part and make it actually, we can just add it like here. Actually, the just on can click like this, then click on it and let's put it let's put it inside the icon and remove this vector and just decrease this size like this and here it should be size as Let's see size 125, 110, let's make this icon size as 125, one Okay. Now this look perfect and click here, then export, click on export icon, and I will keep continue first, I will put this here, then I will keep continuing keep generator, copy this text, go to material and rest it like this. Then let's get this type of icon and put it right here is. I just set up like this, it good, export it, and then mental health, search mental health. Search mentor. Here we have psychology part, download it, go here and an image like this, then select the icon, click on Export icon, and then we have counsel search health. What about nutrition? Nutrition. This icon will be work download it, click here and put it like this. Now I will click on Export icon. Now we can add those icons. Click on this image box, click here and first we have the icon. I think this is the first icon. It should be the icon. Yeah, yeah, yeah, it's the icon, copy it and copy the title to add a ol text. Adding Ol text is really important because it helps to frank your website, frank this image on search engine. Always try to add l tag and then what we have to add, I think this one in mental I think I add the wrong image, but it's it mental image, mental health, and just not add it for now. Actually, health is screen and prevent care. Health is screen and preventive care, click on it, and this should be that search can not this. Actually, I will check it on the design. So, I see this one here is the one. I can pipe now we a space and click on select. Okay, here, we can add the mental health icon like this. Okay. Now here we can add that apple icon. All right, click on Publish. Let's see the design and our design will look like this and we can add more its work perfectly and we can add more stuff like cover effects and other stuff. Let's add them after we design the whole website. I think that will be much better than adding it from here. Here we have issue to fix it. I will just click on Casel and go to set in in set in. I will remove the infinity scroll and I think it will fix the issue, publish it and now let's see, let's see. I just fix no more infinity scroll and no more issue. Now so far so good and I will see you in the next lesson. We have to add icon Her effect. Actually, let's add them after we complete the website. Bye bye. 106. Improve security: Hello, everyone. Before we go further, let's improve the security of our WordPress website. So there are a few things that we need to do as the first step, let's install security plugin. So I will go to plugins and click on at New Plugin. Okay, here I will search Word Pence. Now you will see Wordpens security by WordpensPlug in. So let's install this plugin. Click on Install Now, and it's Installing then I click Activate. Okay. Here I will click, get a Word Pens license. Here we have pricing plan, and I will use Word free Bland. In here, I click on get free license, and here I will click on I am okay, waiting 30 days for protection from new threads, click on it, and here I will add my email. Then would you like WordPress security and vulnerability alert send to you via email, I will click on No and here click on this check box to agree to terms and conditions. Then I click on register. Now it will send an email to our email address. I will go to my Gmail account and check the email and here I got the email. I will just click on Install my license automatically, and here it will redirect to the website and I click on Install License. Okay, now I click on. Go to dashboard. All right, we successfully install the Wordpens security plugin on our WordPress website, and now we have to do some configuration. So as the first step, you will see we have a message to enable auto update of the Wordpress security plugin. So I click on enable auto update. If you didn't see it, you can ignore it, and now first, I will click on this firewall also, you will here see a message call to make your site as secure as possible. Take a moment to optimize your Wordpens web application firewall, so I click on click here to configure. Okay. Now you will get this type of pop up and here I will select this recommended version and click on Download HT Access file to download our HD access file, and here I can just click on Continue and click on Okay. Now we are at the firewall section and the web application firewall status is currently learning mode and it will automatically enable the firewall on our website after a few days to accurate, it will happen in 13th of the February. I will keep it like this and now I can click on Ican and remove this. Then here we can start Ican I will click on start new Ican and it will Ican our website. Then I will go to Login security, remove this and on login security, we can add two factor authentication, but I am not usually enable the two factor authentication for our WordPress website because I have another way to protect our login page, and for now, I will click on set in on set in, scroll down and here I click on Enable recapture on login and user registration page. So with this feature, we can add Google recapture to our website. I click on this recapter admin page and it will redre to our Google recapture. Page. When you log in to this page, you can click on this Create button, and here we can add our website details. Here we have to add a label. Let's add label like our domain name. Like this, I will just add only the domain name and re chapter type will be. Then here we have to add our domain name. I will just copy the domain name and remove the stuff and only use the domame with.com or dots. In this case, dots, then I click on Add Domain and it's successfully added. And here we have to set up Google Cloud platform and I already created some project on Google Cloud, so I will choose one of them, then I click on Subm Now we get the side key and security key, so I will just copy them and pase them like this and let's pace those keys and then I click on. Save we successfully added log in security to check it, I will log out from the website and when I go to our WordPress Login page, we will see this protected by f capter logo, which means it's successfully added to our website. Now I click on Login again. Okay. Then in word pens, let's go to dashboard. Then let's go to scan page and check the result. Currently, we don't have any issues found, and that's a good thing. If you see any issues, you can check them and fix them. Now I will go to L ptionsOEloptions, I will keep most of them as default, and in email preference, I will tick email me if Wordpens is deactive and email me if the Wordpens web application firewall is turned off, and I don't need to alert me with the scan result. If we add it, we will get a lot of emails, and I don't need this one. I don't need this one. If your website has a lot of thread, you should enable those dub, but for is not necessary and I don't need this one, this one, this one, and I only keep this alarm when there is a large increase in attack detect on my site. When we set those email preference, we will get the emails for the most needed updates. Now I click on Save hange 107. Change WordPress login URL: Hello, everyone. We can access any WordPress website, login page using. Hello, everyone. We can access any wordpress login page by type our website. IrlahWpadmin. In this case, custom website design dot slash WP admin. Anyone how to access the word press login page. Most of the time, we use the username as Admin and if someone run a bot on your login page or try to guess the login details, that person will able to access the WordPress dashboard. To fix this, we can change Wordpress login page URL. Let's do that. First, I go to WordPress dashboard by login to the WordPress website, and here I will go to plugins and add new plugin. And here I will search WPs H Login presenter now we got this WPs hide login, plug in and currently it's untested with our Wordpress version. But let's try to install it. When you check this lesson, it may compatible with your website. I click on Install Now and click on activate it successfully activate and now I will over the set in in set in, we can see WPs hd og in. Just click on it and when I scroll down here, we can specify the login URL and four oh four oh page not found URL, which means we can create a custom page four page not found and set it here, and for now, let's only change the log in URL. To do that, you can just change this text, so I will add here GA login like this and always remember to memorize this URL or the text that you are going to add. I will just add login. If you forget this URL, you will not able to access the WordPress dashboard. You will have to edit the database and the plug in file. Always remember it. I will just add login and click on Save changes, and then I will click on Logo. When I click on Logout I page URL change to login, and now if I try to add WP admin, it will redre to the four oh four page. Let's add login here, so now you can share this URL alone with the username and password. If some person who try to add WP admin or try to login, that person will not able to do that, and this will help to keep the professional website and no one will know about the login page of your website. Okay, now I click on Login into the website. Here we can see Word trends activity in the past week. Actually, I don't need dates, so I will go to Screen option and untake this Worden's activity in the past week icon and Earl good. 108. Create custom fields using Advanced Custom Fields plugin: Hello, everyone. Now we have to create this our dedicated provider section. So this is the team member page on element we don't have a widget to create teams. We have ortho box and image box, but if we create this section with this image box or ortho Box, one issue is we can't add this type of link. So as an example, let's just create a Flexbox and let's click here to add element and search image Okay, here is the image box looks like and it doesn't have this type of link, the view profile link, let's check the ortho box and edit like this. Orthobox are not going to work anyway. Another issue is even we use this type of image box, think you currently have ten team members. But in future in within few months, your company will hire three more members, which means that company have to add this new team member by editing the website design. But if we create a different section that we can add our team members, which means let's go to WordPress admin page. If we have a section here like team members, we can easily add team members using that section. So when we add the team members, the WordPress will automatically add that team member to our dedicated providers section. To accomplish this, we can use custom field plugin. Custom field plugins allow us to create custom pose type. Currently we have pose type like posts and pages, but with this custom field plugin, we can unlock the true potential of the wordpress and also we are using the elemento pro. On element of pro, we have loop grid and loop carasa elements, which means we can add whole templates to those sections. Now you may not understand this to fully, but in next few lesson, you will understand clearly about the custom pose types and power of the element of pro. Let's start. First, I will go to the WordPress dashboard and here on plugins, click on add New plug in and search custom pos type presenter. Now we get this type of result and here what we select is this advanced custom fields by WP engine, click on Install now. Then click on Activate. Okay, I activated. If we click on view details, we can see advanced custom field turns Word website into a fully fledged content management system by giving you the tools to do more with your data. Let's start well, now you will see a menu item called ACF. On this menu item, first, I will go to Pose type. In pose type, we can create a new pause type. I click on Add New and here I will set the label as provider. Actually, our providers. Let's add provider. And the singular name will be provider and the post key automatically added and currently we don't have any existing taxonomies, so I will not select anything and the visibility will be public. So here I just click on Save changes. When I click on Save changes, you will see on the menu item, new section called Our Providers. If I click on EO providers, it should be empty and okay. However, the icon is not related to our providers to change the icon, I will click on advanced configuration on advanced configuration, I will click on visibility on visibility. Here we have the icon set, and here we can select an icon that related to our website or our provider section. I will add this type of icon, then we conceive changes. I just change like this. Okay, the first part is completed. And then I will go to field groups in field groups, I will click on Add Nu and here we can add the fields that we want to store the data of our providers. Let's go to our website content. Here is our website content, and in our dedicated provider section, we have the name role and short description, then loan description. Also we have a image. Let's add those details. The first field label will be provider name of provider, name of provider, and this space like this, then I will not add any default value. Before we do that, we have to add field group title. Add field group title, I will add our providers field like this, then here I will. Then here we just add text type field group, and now I click on AddFel to add a new field and here what we need to add this role here copy roll and in here field type, we have a lot of option to select. Let's check the field types, and here we have choice as select. Let's add it as select and then here I will add field label as roll and the field name will automatically added, and here we can add rolls. So currently let's see the roles of these providers. Actually, they different roles. So we can simply add textbox type field type for this because we don't have any repeated roles. So let's change this field type to textbox or text. Okay. Now again, I click on Add New and here we can close here, here, we can click on close field. And okay now what we have to add is short description. Just copy this short description. And let's put it as field label, and here, let's change this text to text area and click on Close and addFil to add new field. And let's see. Now here we have loan description, just copy. And for this one, we can add the editor. Here, we have visivc editor, so we can click on ViswkEditor and here as the field label, we can add loan description click on close and at field, then what we have to add is the image. So for the image, I will just add field label as headshot, then the field type will be image. The return format will be image array, and I think now we have field. So we have the name of provider, roll short description, loan description, and short. Yeah, I mean, just change this to name. No need to add name of provider, just add it as name. Okay. If you're going to create different type of past type or different type of website, you can add this type of field as you want. For this one, this will be great and here we have to set the rule. The rule will show this field group if here we can set the pose and is equal to our provider. Did you remember that we create our pros type as our provider? So we can add it like this and currently, we only need to see this field group inside this providers section. So let's click on Save changes to save this field group. Now if I go to our providers and here click on add New OR provider, and here we have our provider details, so we can let's increase this like this. And here we have name, role short description, an description, and the headshot to add this image. So this is similar to the post, but here we have custom fields that we can use to add our team members details. So let's add this content to the O provider section and continue the lesson. So here, select roll and paste it like this and copy the short description, paste it like this, and here we have the loan description for the loan description, I will just copy this as text like this. But if we want, we can add styles to this loan description, and now we have to add the headshot. Let's add the headshot to add the headshot, I click on Addimage and here we can access our media library and I click on upload files and on select files here we have our providers image, so I select all of them and click on open to upload all of them. Now let's find out the image. The first image is doctor Sarah Thomson. This will be the first image. Add doctor's name to ALT text and click C CLC. I just added like this. Okay. Now here, I will add title as doctor Sarah Thompson and I will not add any description. Then I click on publish to publish the provider details. Okay. Now if we check it here, we can see the doctor's details. So far so good, so let's continue adding our provider's details and I will go here and copy the doctor name or the provider name, copy the role and short description, loan description. Finally, the image, add the name to the title and go to add Image. Then let's see the image. This is the image at ALT tanks and click on CLF, then click Publish. Now we can click this at New Our providers and here let's get next doctor doctor name here, and name here. Actually, we don't need this name field because already we have the title as the name, but for now, let's keep it like this. Face the wrong, short description, long description, then add a image. Doctor Emma, here is the doctor Emma can publish, click on add new Our providers here will add the rest of the doctors and see you. We successfully added our doctors. I will go to our providers section and click on ELO providers and here is the Earl providers that we have. Now if we want, we can click on Edit or send it to the trash or do any kind of stuff. Currently, if we click on, we will not see the details because we didn't config them. Actually, we don't need to configure them as like this and in the next lesson, let's add those details to the homepage like. 109. Design our provider section - Part 01: Hello, everyone, we just added our provider details and now it's time to design the website. In our Figma file, here is the section that we have to design. Here we have a carousel and let's start it. First, I go to the element or editor and let's remove this section because we don't need it and I will click here to create a new section and let's find out the section height. Then I will copy text and here, click this plus icon to add a headline and add headline text like this, then go to style alignment center and typography will be header and the text color will be this color. Now again, I click on the container. In container, I will change contain B to full with and direction will be column, vertical, align item will be center. Okay. Actually, let's make the content with task box and on Advance, click here and add margin top pass 120. Okay. Now here, let's see the in between size. The in between size is 60, so let's go to the wordpress design, and here I will select the container. Container, I will add a 60 like this. Now what we have to add is this section. To add this carousel, we can use carousel loop. Let's add carousel loop. To do that, I will search loop here and when we search loop, we got loop arousel item. I just add it like this. This loop carousel is a loop grid that allow templates or the elements to scroll from slide to slide, which we can create one template and using these queries, we can give elements or give data that we want to add to this carousel or add to this loop. Let's do that. First, we have to create a template. To do that, I will click on create a template, and here I will click on Okay. Now if you check here, we created the elemento loop item, which is our template. In here, I will search element loop item 370. Here, let's change those details and see what will happen first, I will set number of slides as three and I display, which means how many side that we want to show here, it will be three and side on Scroll will be one and here equal height on. Let's go to Query. In query, change is posed to our providers and then good let's click on publish and see that we can edit it or not. Here I will click on Edit template again. Okay. Go back. Okay, now I go to the template and here we can edit the template details. I think something wrong with my browser, so let's do it again so you will understand clearly what I did first I will go to the website homepage and click on Edit with elemento. And here, let's scroll down to here. Okay. Now I will select this loop parasol, and here I select the template type as posed and create a template. Then I add number of slided as three and slide down displays as three. If I make it like two, I will only see two of them, but we need three like this. Then I said the query as source will be our providers and those details will be default and if we want, we can change Okay. Now let's edit the template. So to do that, I click on Edit template. Okay. Now here, I can edit the template. So first, I will click here and check the details, and then I click on add element. I add element, we have post title post content feature mage post information, but we don't need any of them. So I add the textbox like this, and then you will see the dynamic tags. Just click on you click on it, you can see details like adding pause date, force ID, and stuff like that, but we need to add the team member name here. I just click on this ACF field. Okay. Now if we see here, first, we have this role. Let's add the roll first. Here I will click on this ACF field and click here. Then here we have the role. I just click Croll on Advance, we don't need to add anything before or after we need to role. Now the issue is we don't see any information, but we can go to this loop item set in, and here we can select the preview set in and change this specific post or item, set it as our providers and click on Apply and preview like this. When I do that, it will show like this. First, let's pick this space in issue to do that, I click on this container and here let's go to advance, make them as zero, like this. When we do that, we just get rid of that E space. Now I click on this headline that I already added and here go to Estile and in typography, I will change the typography to paragraph. Let's see, is pi 20, let's see our paragraph, it's pit 20 regular. Now I will check here. The name is pose title, but we don't need the pose title here. Instead we need the provider name. If we go to our provider section and click on AD, you can see we add the post title as the provider name. Also, we create our provider name on the advanced custom field, so I will use this name instead of using this post title. Click here and remove it, right click and click Con Dilete now here I will get the headline like this and in here, click on dynamic tags and Affeld then click on the ACFFeld and the key will be named like this. This dynamic tag fields are available on only element of pro. This is a element of pro feature, which we can create one template or we can create a single template and set it for Pago section. Then the data that we request on the dynamic field will automatically added. As an example in here, you think we need to add the force title. We can just click on this dynamic field and click on force title like this and I will duplicate it. Let's see if we want to add time or post time, the post time will show up like this and if we want the post date, the post date will be show up like this. We only need to define this dynamic tag at once the database will connect with that field and give us details. Now let's delete this. Here we set the name, not for title. Let's set the Affeld and click here, click on value add name, then go to Etyle. Let's see the details. It's 25, I think it's subfding. C factory, 25 normal and here we have the same details. Now we have to change the text color to this black color. Before we change the spacing and other stuff, let's add the details here. Then we have to add the short description. To add, I will click element and let's search something like. Let's add another headline, and this time, the STML tag will be P or paragraph. One tile, let's set the typography as paragraph and the color is this black color. Now on content, click on dynamic tag, and here, scroll down, click on ACF field. And click here, the key should be short description like this. Okay. Now we have to add the image. Let's add the image. To add the image, I click here and search image. Okay, here we have the image. I will add the image on the top and set the resolution to fall and click on this dynamic tag. Actually click this dynamic tag and here on ACF image field, click here, select the head shot and the image added like this image resolution will be full, no caption. Links. Okay. Now what we have to add this view profile. For now, let's add just simple button to view profile. I will search BTN or button button and Rager button like this and go to Estyle in Estyle. Let's see the details. We already at this button here. Can just copy the button details from here. Let's do that. Or let's create this again. To do that, go to Estyle and on typography, select the button and on color, just click Context Color and set it as primary and the background type. Actually, we don't need any background and board non box shadow should be like this and still we have the background. Now we don't have any background. Now here, I remove the paddings and on advance, I will remove the paddings, which will be full with, make it as default on content, the type is default and we have to add the icon. Click on icon library in here let's check the icon. Actually, we need this icon. Here we have the icon. Click on it and click on Insert and the icon position will be N. Okay. Now here we have a issue. We have huge spacing and let's see the icon spacing. It's Z icon spacing and style, make the position left to remove the spacing, we can add negative margin like 110. How to use loop carousel - Part 01: On element of, we have cool feature called loop carusel. Let's search loop here, and here we have loop carusel. With this loop carousel, we can add dynamic contents like pause custom fields, pause custom pose types that we already created using advanced custom fields, plug in, and if you run ecommerce, you can add products and create carousel. The benefit of this is we only have make the arusel design for one time and then we only need to create content on the WordPress dashboard and they will automatically adapt to the design that we create using loop Carusel. Let's go deep and do some exercise with post. First, I go to WordPress dashboard of our website and let's create some post. I go to Earl Post. Currently we don't have any post, so I am going to deep seek to generate some post. So here I will addmPmp and did you remember in our previous lessons, we talk about AI prompt, so I just use those prompts, and here I will assign role asm clinic doctor who has writing article, writing experience and tasks I want you to generate ten articles, and here is information. We don't need that one, and here generate ten articles we generate ten articles. Okay, this prompter work, so I press end and let's see what type of articles that we get. Okay, I just generate the article structure or data for article. We don't need that, so I stop it and I will type I need actual article at least with 500 Okay, let's see. Let's see. This is for just an example, so don't try to do this. Those are actually really small articles, but this will work for Beckley. So in here, I have to say I need actual ten articles. Let's say actual ten articles at least with 500 like this. When we generate it like this, we will get actual ten articles. Okay, we just generated ten articles like this, and now what we have to do is add them to the website. Let's go to the website and here I will go to post and click on EL Post. Currently, we don't have any articles or any post, so I click on at New Post, and here, let's copy that title and paste the title here. Then I will just copy this content and paste it here. Actually, we have to make this better. Actually, what if we tell Deepsek to generate this content for Wordpress block editor? So let's tell, can you generate this content for Wordpress block editor? So I can edit without dig and let's copy the content. Let's see what will happen. I generate with the DML content, and here I will remove this all content here DML. We have DML tag, so we can just add this content inside that HTML tag. It may take some time, but let's wait and see it worked or not. Okay, here we have to tell that clinic name should be JB family. Let's tell it in the next part. So for now, I just copy the HTML code and paste the HTML code and click on preview, and it will look like this. And here, let's change this to J. Can't we change it like this. I have to go to TML and find that part. Yeah, e. Yeah, as JV family Clei. Okay, now it's okay, and now I click Compost and here we have to set featured image. To create featured image, I will use Canva, and don't worry, I will all the images and those articles on the resources section. So now here I am at Canva, and here I click on customize and let's make 600 by 400 as with an for the feature mage. And here, let's copy the title. Let's copy like family health. No, not that one, here, here. Yeah, family health, go to elements, pace like this and go to photos. And in photos, we have this type of photo. Let's make it bigger. And you don't need this one. Then I click C Share, click on Download, selected test JPG and click on Download. Okay, now I go to the website, click Concept Featured Image, and let's add the downloaded image like this. Then click Concept featured image. And let's click on Publish Publish. And now I can view the first. Let's right click here and click on Open it in New Window. Here is our post and currently it's not showing quite well because we didn't create template for our blog article, single blog article, we will do it in future lessons, but for now, this will be work. Now I click on at New Post and create the new post to the second post. Here is the second force, copy the fourth title, and this is not good for real article writing. This is just for learn about loop carousel and this post may help us on creating our blog page section. Let's go. And here I will copy the content. Let's say, can you generate the content for Wordpress blog editor? Actually, let's change this from and say, can you generate about post content at about ten post ten post content, the content for adding WordPress blog editor, so I can add it without editing. Also, the clinic name is JB Family Clinic, and let's see what will happen. Okay, it's not working, so now I will copy this command and go to GPT. On Ja GPT, I will add this command, and on double codes, I will add the pose. So here, we don't need the first one. We need them from here. Let's see. The post, five, six, seven, eight, nine, ten. Okay, now put those content, and let's see will this no, no, no, this is not working. I have to say, let's say above nine post content for tress editor in DM in TML, below 94 Okay, now I click consent, and now it should generate in SDML We'll see, Okay, it's not going to work. Okay, it's generated in the SDML format. We don't need this header but we only need text from here, so let's Okay, article was generated, and now I only need to add them. This is the second article. I think we don't need this and need this too, and here we have the title, and here I will just copy this content to this paragraph tag to this paragraph. And here, let's add it. No, no, click here and search THDM and write it like this. In preview, it will look like this. Okay, then go to post in post. We have to add the featured image and let's copy this and let's face childhood vaccination ne download it. Lick Concept feature Dimage, click here and add it like this. Then click Concept feature Dimag and click on publish, publish. Okay, now click on add new post, and here we have the third post, copy this title, and here we have the actual force. I just copy it like this key. Now, here, HTML, custom HTML, paste it, click on Preview, looks good, and here we have to add the stress as family. Let's generate our force. Let's see Then let's click here to set the featured image, and I will continue and create the post and we'll get back to 111. How to use loop carousel - Part 02: Hello, everyone. So now we have the post, and let's start to learn about the loop cars. So what we have to do is create a new page, go to ER pages and click on AdnwPage and here on Adtitle add a title like. Let's call it like Blog. So this is just for testing. Maybe we can use this page for the actual website. So let's publish it and okay now I click on Edit with element of all right, I will click here and click Complex box, then add this direct column container and here I will search Loop Carsel. Here we have loop Carsel, I will just add it and when I add this, I can see this type of design. Here we have option to create template or if we already have a template, we can search it from here but in this case, we have to create new template. Our goal is to show that post in this block page. I will just click on create template and click on save here is our template and if we hover over here, we can see the template name. Now what I can do is add items to this section. First, let's create a direction column type container, and I click here, then in advance, I have to remove the margin and pad then on layout, I will click here, then here we can add element. For example, let's add an image and let's add it like this. Then here we have a image and on element of pro, we have dynamic tags. Using these dynamic tags, we can add customized data. As an example, if we just directly add image from here, let's add this image from our media box and it will stay the same. But if we click here on dynamic tag and in here, we can say images. As an example, let's set feature Dimage and when we set feature Dimage, it will be dynamic. If I explain it more, I can click on Save and back and here we got the post featured Dimage. Did you remember that we already created the post and we got all of that post to here? I click on Edit Template and now click on Edit Template. Then here, click on Edit and let's remove this featured image tag and just add this tic this image from the media section and click on Save and back in here, we only see this static image. This is the power of dynamic tag and on query, we can set what type of data that we want to get to here. So in future, we are going to create our provider section and review section using this loop cars to create them, we will use advanced custom fields. When we create pose types using advanced custom fields, we can select the source as that pose type. Currently, the source is post and here we can set the date that we want to add, but I will make it as and we can set order by details and here I will set order by date and order will be DESC, and we have two type of order. DESC means short term of descending, which means if we order it by date, we can see latest post to oldest post. If we set it as ASC, we can see first on the oldest and last as the latest post. Let's make it as DESC and nice. Now, what we have to do is create the template. Now I click on Edit template and click on San Okay. Now here, I click on this pencil icon, and I think you understand and you now know about the dynamic tags and let's remove this image like this. Now what we have to add is post. Here we have a lot of elements. If we want, we can customized elements. So let's add headline and in headline go to Style, click on the headline as subdin and color will be black. And now on content, I will click on this dynamic tag, and here I can see Earl tags that we add on the post. So if I click on post title, we will get the post title from post that we created. Now what we can do is click on add element and let's add the featured image. Here, I will add the image here. Then as I did before, click on here and on post, select the featured image, and for now, I will keep the default style here if I click here and add another headline, here we can add post expert post date like this, then here let's change this to button and color will be again back and I will click on. Actually, I click the structure and here on container, I will add Roger pass. Let's add to it. Now let's see if we want to add link, I will search here Link and maybe button. Let's add button like this on button to the text, I will search like read more and in Link, I click on dynamic tag, and here we can select the post URL. And on Link option, I can click on Open in New Window. And now if I click on Save and back, we can see our post like this. If I click on US page, and here is our post. So if I click on this Read More button, it will redirect to the post page. So currently we don't create the post page, but if you see the URL, we just redirect to the post page. So now I will click on Edit template again. Here I will on container, I will remove image headline and the button like this. Now what we can do is a prebuilt elements. If I search here post call to action, we can get this type of widget and here, let's set the skin as classic and set the position to left and here we can set the position. But for now, let's keep it like this and using dynamics tags, we can add dynamic content. If I click here and click on dynamic tag, set the featured image featured image will look like this. On content, we can add the title as pause title and description will be. Actually, we don't need the description, so I will remove it and link will be post URL like this and click on open New Window. Now what we can do is at this style, maybe let's change the skin to cover and it will look much better and on this style, we can set the padding so let's add padding as 2020 bit bigger, maybe. Ten will be work and on content, let's change the typography to su pad in and title color will be white, and also we have the button. Let's add button 12 as the left and right, and button text color will be white. On typography, set the button typography, set the background color as this blue color. And on box, we can add height as we like. Maybe let's add height as 450. On Her effect, we can add overlay color. So let's add overlay color as black. Here change the opacity to like this. Okay. So far so good now I will click on Save and Black When I click on Save and Back, here we can see our post like this. And I just click on the loop casel and here we can change the number of slides. So if we make it like four, we will only have four sliders and side for page. Let's make it to make it two, it will only look like this. And navigation, we can hide the arrow if we want like this, but I want to show the arrows on style, we can go to navigation and we can change the icon size like this and let's change color to blue color and position, let's make it outside. In pagination, we can add pagination like this and color will blue color and here is the power of bca usel and elemento dynamic tags. If I go to view pages, the page will be look like this and we can custom this as we want. But for now, this will be a good example of get understanding of the loop carsel in future in future lessons, we will learn and use a lot more loop cars dynamic tags and custom fields using advanced custom field plug. 112. Design our provider section - Part 02: Okay. Now when we compare this button with our original button, the icon is bit bigger. As we did here, we have to use CSS to make the icon bigger. But the issue is in this template, we have repeated buttons. On here, we have only this button, but now we have a different situation. Let's handle this. First, I will click on this button, and as I told before, we than one button, so we can create single CSS code and make it available for A of this button. To do that, we can use CSS class. Here I will add CSS class name as view view profile view profile, TN, and then click Publish to save it. And now we have the WordPress dashboard. To add this CSS code, I can go to appearance and click on Customize on customize I can click on additional CSS. And here I can add the CSS code. So here we can see the design. Even though we didn't complete it, we can see it from here. Okay, now we have to make this button bigger, so to do that, I will paste the CSS code, CSS class code and I add dot because we use dot to cache the CSS classes and I'm not going to go too deep about CSS. For now, I will just add this code to make this icon bigger. If we go to this homepage, let's go to the homepage and here, click on Edit with element and scroll down to here, then click on this Edit and if we go to Advance on Advance, we have custom ESS and here we have the code that we used to make this button bigger. I will just copy it. Let's copy the content and go to customization and edit here. From here, I need only this section because this ID, we don't need it, I will just make this CSS class like this and click on Page two add that content, and when we do that, our icon become bigger. If I remove it, it's small. If I add it, it's bigger. Now I click on publish and here I will click on Refresh. I have to refresh it again because the design didn't quite load well. What's wrong? The website is not logged in as we want. Now I click on edit it element or I think it's cache issue, but let's see, it's cache. Now here, again, I click on Edit template to edit it and here we can edit it from here. When I make edit to this, it will affect the section. If we go to WP Admin and go to dashboard and here on templates, I click on Save templates on save Templates, I click published, and here we have this template that we are editing. Currently, its name is elemental loop item. Let's click on Edit and change this name to something like our dedicated providers like this and click on Update and we can click here to edit and edit it from here. Like this or we can click here to repress this one and edit it from here. Editing in from the actual website is the better way because then we can clearly understand how the design will look like on the hero section. Again, we got that issue, so let's refresh it and click on Edit with element or scroll down, and again, click on Edit. Right. Now here what we have to add is I spacing. If we check the spacing on the pig Mateen Brad, it's two L. Let's add the spacing as two. If I click here, you can see it's a container. If we click here and add raw as, it should look like this and let's see, it's two and it's item as two. Okay. Now what we have to do is add in this corner radios and the shadow. Let's add them. To add them, isolate the container and on container, I go to Estyle on Estyle. Click Obarder and box shadow. Let's add the box shadow. So let's copy the box shadow details from here. Click here the color is this, so click here to get the CSSORGBA colors. Click here. RGBA color is this and add it like this. Now, the blurrns is 15 and X and Y zero. Let's click here. Blurrinus is 15 and other are zero. Okay. Now we have to add radius corners. Actually, the radius corner should be added to do that, here we have border radius. If I click this section and check the border radius here it's 20. So let's make this radio as 20, we'll see the changes. I added, however, we didn't get it to the image to get it to the image, I click on edit on the image and go to Estyle In Estyle, we can add border radios as el, but only 20, not 20, but only we have border radius of the top as the 20. So let's add it. So we don't have bod radios as 20 on the bottom of the image. So let's click here and on top, make it 20 and top 20 right, what about left will be 20 and not on the bottom, we only need to add top ten, right as 20 and nice, then we have to add the space to here, it's 220. Let's add bottom space or let's add this container padding. Clet the container is 20? Yes, it is Clet the container on padding bottom at 20. Okay. Now we have to find the in between size. The in between size is 20. To add it, we have to go to the loop carasel I will publish it from here and click on Save and back. Now it will look like this, but it's not looking good though. We have to make the drop shadow. But for now, let's focus on in between size to do that, go to style and gap between size should be that much, it should be. Okay. And before we fix the drop shadow issue, let's add style to navigation and other stuff. So on navigation, click here. Okay, it's with height ts 220, so let's make with height test, 20, to do that. Let's go to navigation and actually, we don't have left and right navigations, let's remove it first. To remove them, I will go to content and on navigation, we don't need to show arrows and in page generation, we have dots and let's go to Estils in Estes, we have to go to page generation, not navigation and space between will be as I remember, it 20 years and size is 20 by 20, the size will be also 20 by 2021, it's 20 and the color is this primary color and we automatically get the default color as this light blue color. On the O color, I will make it as accent because we don't need to actually let's add primary color as the hover color. Here we have issue. We have this light blue color, but we don't need it to be light blue, but there is no option to fix it, but let's keep that color like this for now and and let's add this in between spacing of this slider and the pagination, it's 30, so let's make it like 30. Okay. Now I will click on publish and so far so good. But here we have a lot of issues. Let's fix them one by one. 113. Design our provider section - Part 03: Hello, everyone. Let's fix the issues that we have with this dedicated provider section. So to do that, I will click on Edit template, and when we go here, we can clearly see this image is not fit well. So first, I click here and select the image, then I go to Advance advance, I will set the size as grow and it now just like that. So now I can publish it and let's see it on the design and on the design, it will look like this. So as the second issue, we can see here we have a padding as zero, but we need some padding to left and right side. So let's see I go to the Figma file and on Figma, let's see the pad in size. I select one of this text and press all the padding is so let's add six as padding. Now if we just add padding to this container, I go to advance and add right Padin as six and left padna six, you can see the image is also stringed. We can't add pattern like this. Instead of adding pattern like this, we have to add padding for the individual fields. So here select the field, go to advance and add Padin six, left a six. Let's do the same right six, left six and for the button. Now I click on publish and let's see the design. Repress the design and now it looks perfect. Now here we have alignment issue, let's fix that alignment issue. I just found the issue. If we go to the template and click on Image in image, we said size as grow. I just remove it. When I remove it, it's just fixed, and here only we need to add align self stretch. Then I click on save one bag and click here, set the equal height on. And now if we check the design, it will look perfect like this. 114. Design our provider section - Part 04: And now we have another issue. If you check carefully on the left and right side, we don't see the dark shadow, so we have to fix it. I found solution to this issue by checking forums and search on Google about the issue. On Google, I just search drop shadow or not showing in element or Luka result. And here are the result that I found on this Gita forum, I got the solution. So let's apply this solution. And as I told before, you will have to do some Google search or if you have any questions, just search it on Google. If you get this right now, probably someone else will get it before you. Now let's start the work. First, I have to remove the current shadow, drop shadow, and the corner radio. I select the container and on container, we have to go to E dies on E dies border make the border as zero and change the box shadow to back to default. Okay, now I click on Publish and now if we see the design, it will not have any drop shadow. On our image, we still have the image corner radios. If we go here and on image style on here, we have Border radios as on the image. For now, let's keep it like that. And now I have to copy this code. Just copy it here and actually you can read this, but I'm not going to already read this and this work with the design. Now I will go to advance advance of this container. The container go to Advance and here on custom ESS, at the CSS like this. Now I click on publish for now and let's see it in the design. If we check the design, now we can clearly see the left and right shadow. Now let's fix this according to our design. First, we have to remove this spacing. Let's go here. If we see the CSS, we have this padding and we don't need it. I just remove it like this. Now if we publish it and see on the design, it will look like this. Actually, we have to add the padding. I will add the padding as 20 by 20 and press on publish. And here, if we check the design, it will look like this. Actually, we don't need the top padding, so I will remove the top padding and here top left, bottom, right. I think the value so let's again see the design, and now it will look like this. Then here we have to change the drop shadow. To change the drop shadow, we have to find our drop shadow. So I will go to our rigma design and select this single provider section. And here we have the drop shadow. And if I click on this Dev moot, I can see the CSS style, and here we have the box shadow style. I just copy it. Let's replace this box shadow with our box shadow. This spec keep this important tag here and let's publish and let's see the design. Okay. Now what we have to do is actually here, we have to add top collins 20 and bottom B 2015. 50. And let's publish it and let's design. Okay, the left and right are 15 mimics none here, top, right, bottom, left, still too weak, maybe ten will be the goods 2010. And hopefully time will be good to go. Okay, so far so good. And now we have to add rounded corners. Adding rounded corners is too easy because we already got the style from here, copy this boat reduce 20 style tag and then put it here like this. Let's this. Okay, now it's okay and come here and repress the design. When I repress the design, it will look like this and it's pretty similar to our design. But the issue is we have this gap. So let's try to fix this gap. According to the previous design, we just add 20 as margin, remove it because we add 20 as padding on the customs and I will refresh like this and now it perfectly say, Okay. Here we have a issue with this view profile button because here it's lower and here is bit upper. So I will keep it like this because it may require CSS to fix it. Okay, now what we will have to do is go here and click Ponce andb then we have to adjust the here and in query not inquiry on layout, we have to adjust the number of slides. Currently, I think we have five have one, 25 of them, five and click publish. And here we got a lot of page generation. Okay, to fix the page ination, we can go to layout and scroll on slides on scroll. Currently, we have one. If we set it to two, we can fix it like this, and now we will scroll two slides at once like this. Okay, now click C publish and let's go to website and see the design. Okay, it will look like this. We have a problem here. If we check carefully on this parcel, we will see the same result again and again. See now this doctors is here and still if we check right now, the doctors is still here. So to fix it, I go here lick on edit Carsel and the issue is currently we have only five providers, but we set side to scroll as two. Let's make this as three, and when we set it as three, it will work fine. See? The reason is we don't have enough providers details to adhere. Now Earl looks good, and now if I refresh here, everything will work fine without any Okay, play around those options and get the best result. If we go to queries, we can set order by as date and if we set it as as a A is arrange items from smaller to larger, which means it will show them first that we add first. Now I pl publish and now if I refresh, we add this doctor Sarah Thompson as the first value on our provider as it on the FIC Maple, and it will show correctly because we change it on the aztino. Now we just completed our dedicated provider section, and here we can add more doctors or more providers and make it better. Then we have to create this get in touch with section. Also here we have to add pop up facia to this view profile link. In future, we will do them too. 115. Design get in touch section - Part 01: Hello, everyone. Now we have to design this section. Let's start. First, I will click on the section and check the height. It's 600. Let's go here and click plus icon, select Flexbox and flexbox tight will be direction column, and here mean height will be six not 300, it should be 600 and we can change it after while we design. Okay, and the direction will be raw horizontal, and here, we have to add this section. First, we have to add the header, and before we add the header, we have to divide this single section to two as we did it in here. So if we check the container, we will have different container at this section. Let's do the same. So here first, I will have to click here to add element and click on container and track and drop the container like this. And then I go to add Dance and remove the left and right of that container. Then what I have to do is on layout, the direction will be column, and now I click here to add a headline like this. The copy the headline text from here, past the text here, and add to break the line, then go to Etyle and typography will be header, then text color will be this black color. Now we have to add this icon box, we can use image box. I think image box will work, maybe not. Let's add the image box, search image box and add the image box inside this container on Etyle set the image position as left. But the issue is in image box, we don't have much feature to add the three lines, so we have to do it by manual. Let's come here and first change this icon. To change the icon, I will go to Google icon. In material symbols and icons, I can find the icons. Search hon icon. We have this call icon, and let's see the details from here. Actually, it's from here. Let's adjust the width will be slim like this. Okay, now I click on this PNG and let's see the color before we download it. The color is this blue color, copy the color code and paste the color code. I think it's the same color code. Okay, now I click on PNG, actually, we have to set the size. So here size is 60. Let's try to add 60, 60 will be work. Then click on PNG and go to fig Musign and scroll here and click on this icon and remove this vector icon, and here, select the icon layout and click here and put the icon like this. Then we have to adjust the select only icon and adjust it like this. Okay. Now we have to get the location icon too. This icon will be work, download it, go here, remove this drop in and select the icon layout on image videos, select the drop pn icon and drop it like this. Then on select the icon and reduce its size like this. Okay. Then we have to at report. Yes, or this one. Let's select this lab profile like this. Remove it. No, not this icon. So I just rightly uncheck the icon, and this will be the icon. Okay. Put it like this. Then and Okay, so far so good. And now we can download those icon, select the icon and click on Export icon. Okay, let's create it. First, we need to have a container like this. Then on advance, let's make container padding margin as zero, then here, let's add image box first and at the image box this then click here and a line will be here, a line will be direction row horizontal, line will be start and now we have to create another container inside this container because this is this container is row horizontal but these sections are in vertical way. Let's see here is the container that we added. Let's put it inside like this and then again, we have to go to adds and it like this. Here go to layout and set the direction as column or vertical line item will be start, and now we can add headline. Let's see what we have headline. Let's add three headlines or we can just duplicate this one. First, let's create the details clicking here, face here on Esty typography will be subbeding sub ding is the typography, then color will be this black color. Then I will duplicate it for three ties like this. Then we have this text copy the text and space the text like this on each tie, change it to paragraph and here the number, I think it will be custom size, so the latter regular 35. Let's change this font family to at 3535 regular. Now let's see the inbten size, select one of these. Ibteen size is ten, let's select the container and set row as ten. Okay, let's go to the main container in main container, click on line item center like this. Now let's see the inbtten size. It's also ten. So here column will be 100 and click the container that has headline. Let's go here and check the inbten size. It's 30, here we can set the row as 30. Okay. Now what we have to do is duplicate this three times, I will right click and duplicate, duplicate. Now if we see it 30. Now let's copy those other details like this first the titl and it has the same wording and the address also has the same wording, and then we have to read three preso, remove this one and add the button and the button will here actually, we can use this same button. I think we can use this same button. So to do that, I will click on Edit template and click on Save and leave and we can just copy that button property from here. Click here and right click and click on Copy. Then click on Save and back to go back because this is a template, and in here, we can easily right click on the button and click on past this tile. When I pace this die, the button style just paste and click here, then we have to add the icon, so the icon will be arrow. And it's not this type of arrow, let's find out the arrow. Here we click it, click on Insert. Okay, so far so good. Now what we have to do is copy the text and pace the text here, and here we have a issue. We have adding right and left as six. Let's make it zero for here because we don't need to act left and right, but in here. Then I will right click duplicate this and put it in here and here also, we don't need this sorry, not that one. Control is set or optione and delete this one. Then here we will have scheduler Vs icon and paste it like this. Then let's change the content. Now we have to change the icon, click this icon and come here. Then click on the in icon and click on Export JPG, we don't need PNG. Slet the JPG icon, click here, upload the icon, click on CLEC and now we have this icon and click on export, JavGOicon and cree and pace this icon like this. Now we have the left side design according to this design, and now we have to create this right side design. Let's do it in next lesson. 116. Design get in touch section - Part 02: Okay, now we have to design this section. So let's get started. First, I will select this image and click on Export and set the type pass JPG and click on Export. And here I will go to Tiny PNG and dragon rope that image so we can optimize it. Then I click on JPEG button to download it. Okay, now we have to add it in the main container. So let's find the main container. So click here. Here we have our main container, and I just click plus icon and search image and let's put image like this Sint it added see, let's see. No, it's not. Let's add it again. We have to add it here. Okay. All right. Now I will click on the image. The downloaded image, then here let's copy this text. Let's add this as text. Okay, I click on Select and the image added. Now what we have to do is select on this container, and let's find out the default with the default with this 550. Let's add with this 550, click here to select Px and 550. Okay. And then what we have to add is space in between, so click here and also we have to make the image resolution full on EtyleEgod and in this main container, let's add column as 90 the inviten size was 90 here. Now what we have to do is click on space between and in bigger window, it will look like this, and then we have to make it center. Click on Align center like this. Now we have to add those two items, let's do. 117. Design get in touch section - Part 03: Now we have to create those two items, so let's start it with here. First, let's find out the width, the width is 213 and height is 152. Let's come here and click on our main container and inside the main container, let's create a subcontainer like this and let's put it after the image. And now the design was changed, but let's keep going and we can fix them. Click here and go to Advance and set margin and add in a zero. Then in layout, we can set with click here and click configre then the width was 213. Let's make width 213 and height as 152. Man height will be 152. Actually, we can adjust the height only thing we need to set with. So we already did it here. So if we check it like this, so we can see we added those details. Okay. Now what we have to do is click on the container and photo advance on advance set position as absolute. Okay, then we can set the Op set like this for now let's keep it here. And now what we have to do is add those texts click here and click on headline and here on style, typography will be head, text color will be this black color and text 247 like this, then I will duplicate it and copy this one, then paste it like this and its size will be sub I think the size is pad in, is it bed 25, let's see. Yep, it's a adding and click here, then add background color to this layout. Go to style on style background, the color will be white color like this. Now we have to add border actually add border radios. If we check the border radius, it will click on this layout and it is 20, let's make it as 20 on layout, make it center to center the value and let's find out the inviting size. The inviting size is ten. Let's set it task ten, not column. Actually, it should be row. Okay. Now we have to add the padding, let's check the padding. The padding is 20, on container, go to adds and on padding set it as 20. Okay. Now we have to add this background shadow to do that, I can go to style and style box shadow, the box shadow, let's copy the box shadow details. Here, click on the box shadow and copy RGBA colors and come here, pace the RGBA colors, and the blur is 15 and others are zero. Let's make this blur as 15. Okay. Now, let's say it's here, so let's make the position. At once the offset will be like this and vertical offset will be actually was it here. Yeah. And we forget to add padding to main container, our padding should be 120. Yes, it's 120. You go to add at margin top for padding 1220. Again, select this one and top set like this. Yep, so far so good and now we have this one, then we have to add the second one. Let's continue the same way first click here to add container. Let's put container like this and let's put under the image like this. Okay. Then on advance it last zero, and let's find out the width, the width is 213 fixel 213. And then let's go to style and add background color like this. Then let's copy the text and add the text here to add text inside that container. Then here to add the real text, and on here, let's say the size same day as the paragraph size, but it's not the paragraph side, no. Yeah, it's a 40 as the font size. So let's make this font size as 40 by manual like this. Okay, then let's duplicate this and copy this one, put that text here. And on style, the typography will be subheading. Okay, now, make it center, make this text center too and click on the container, container on layout, make it a align center, and let's find out the in between size. The in between size is ten, on the row, make it as ten and on padding padding will be two. A make paddings. What about the left and right padding? The left and right paddings are too well, too well, left will be too well. Something wrong. Victory, regular 40. We have to increase the Let's make the left and right, but zero. No, not work. We have to increase this with not that much. 215-22-0220 will work. Okay, so far so good. And now we have to add the corner. So see the corner radius, corner radius as Let's see the corner radius, the corner radius is two style on border corner radius is two empty, we have to add the box shadow, the box shadow color code, we have to copy it from here. Set the CSS and copy the RGPA color here we should make this 15. Now it looks good. Now what we have to do is go to advance and position will be absolute and we can put it right here. And now let's change the offset and here is it. It's in the middle. So let's add it to the middle horizontal. Let's make this horizontal orientation as to get it to here like this, this should be right in the middle. Okay. And we forgot to change the text color. Let's change the text color. Okay, so far so good. And now we have those two items, and now we have to add the animation to this item. So let's do. 118. Design get in touch section - Part 04: Okay. When I scroll down, I want to make this section animate up down and when I go up, it should be go up and the same day container, same day section. When we scroll up and down, it should go left and right in horizontally. So let's add those animation. So click here and then when advance, go to motion effect and on motion effect, at scrolling effect. On scrolling effect, we need this vertical, so click here the vertical and let's see it's in action. Actually, it should be down like this. Okay. Now, let's set the viewpoint. Okay. Now let's create a new section so we can clearly understand the animation, click here and add Maxt as 600 min height as 600 and now it will work like this. It's go down, click here and let's make stop when it like here. So on motion here and let's stop it right. Right here, no, no, right? Okay. Nice. Now we have to add the same effect to this one. Click here and on advanced motion effet, click on scrolling effect. And here we have to add the horizontal scroll. And when I scroll it, it should go like this. So on here, it go like this and on down, when I hit like this should be stop right here. So let's see. Okay. Nice. Now we have fully completed get in touch with JB Family Clinic section. Okay, here, I just found an issue. So if I increase the size of the website, this section will go here. So we can simply fix it, so click here and go to advance in advance set the horizontal orientation as right, and now we can set it here. Is it like here? Let's see. Okay. Nice. Click on publish 119. Fix box shadow issue: When I check the website, I can see this type of background shadow and the corner radius, so we don't need it here, and I know the reason for this, let's fix it. If we go to the R provider, I will value R provider template in Loop carousel and I click on the container. Then if I go to Advance and custom CSS, here we have the CSS, so we open the website on New Tab. Let's see, and here I will remove this CSS by pressing Command, a command to cut it and click Con Pablish now if I check the website, the issue will be fixed. A when we remove it from here, we can see the background for the dedicated provider elements will also go. To fix it, first, I will just put this like this and here I can go to layout and in layout, I will add a CSS class. Let's add our providers panel. This name can be anything, but I will add this type of name. Then I will copy this and go to custom CSS and in here, I will just add our provider panel like this. Let's do ten, add it like this, add ten, add it like this and let's hope this silver and let's see, it's fixed here, but here we have the issue. Actually, we have to add this CSS class two, not on this container. I think we should add it on the Carsel so I will remove here and go to publish, sorry, we have to dit to here. I just remove them. Let's add them like this. And let's hope this will work, please, then click convent back on here, click here. And then let's try to edit the CSS class here. I think it works. It seems it working and click on publish. Then again, let's go to Edit template, the container on CS here again, we have issue. We just have a CSSU. We didn't add the space to here now Allgood, so now I click on publish and now when I check it, it should be work. Okay, now it's working. 120. Design review section - Part 01: Everyone now we have to create this trusted Y families like Q section. This is the preview section. To create this, we can use the same techniques that we use to create our dedicated provider section. Let's start as we did before I will go to the Votress dashboard and here we can create an advanced custom field group to add the reviews. So here, currently we have our providers field and I click on at New. And here I will say the name as client review field. And then I click on Save changes. Actually, before we create the field group, we have to create the pose types. So I click on force types, and here we have our providers pose types, and here we have to client reviews, post type, add rural name as client review and singular name will be client review and pose type e will be client review, and we don't need any text nomonies and the visibility is public and click on save changes. Now in advanced configuration, we can change lab actually we can add icons to this custom field. So currently it has client reviews as this pin icon. So if I go to visibility here, I can see icon here, let's add like star. Okay. What review star will work with that, select the star and click on Save changes. Okay, it's Secky now I go to field groups and here I will edit our client review wheels we already created, and in field, I will click on Edit and first we have to add name, actually, we can add this name as the title. If we go to our providers, providers and here we have our providers, so I click on Edit and when I edit, we can add this doctor Lisa or the title as the revievername, like here in MR is the reviewer name and on the description, we can add the review and we need the custom field for at the headshot. Actually, let's add description field like this image field to the headshot. Let's do that. In here, I will add description field, which means text area and label will be review text. Let's review. No no need to add text just review and field name will be review. We don't need any default value, then I click on at field. And here we have to select this as image. Such image. Okay. And the field table will be head shot, and return will be image array and good. Now I will go to the setting in set in location rule post type will be equal to client review, and now I click on save changes. A good. Now if I go to client Review section and click on at new client Review, here we have place to add title as the name and review, then the headshot image. If I go to the website content, we can see the client's name. Copy the client name and place it as the title. Then here, we have the description, and then we have to get the image. Currently we don't have images. We have those few images. Maybe in image folder, we can see the images. We have this review avatas in our image folder. Here we have the image folder and in first project review Avatas. I will just highlight all of them and let's go to add the Image and I will just paste all of which means we can use those when we add the real image. So here we have the first Avatar and click on Select and click on publish, publish it. Okay, I will add the rest of client reviews. So to do that, I click on add new client review and here copy the name and the description. Copy the name based with a description and place it as review, then find the David and here is the David, we conceal publish publish the review. I will do the rest and see you in the next lesson. 121. Review section with review element: Like to create the review section in the simple way, I will also show you the way. We can just use review elements from element and use it. This lesson will be the lesson before we create the above carousel, so don't worry in the next lesson, you will see how to create the carousel on out. Okay, now I click on plus icon and here search review. Okay, here we have a review box, dragonrop it like this. And here we have to add items. So add the items first, we have to find the item. Okay, on the website content, we have the details, so let's add I will add one by one, but we will have the name and we don't have a title, remove it and we have the review like this, so we don't need the icon, remove the icon to on image. Let's add image like this. Okay. Now let's do the same for the race. I will add those five reviews and see you soon. Okay, add the slides or the reviews, and now what we have to do is set the side for view. This will be three side for view on additional option, currently, I will keep the default option and on the style, we have to change the options. Side between will be 20 and the border color should be none and border radius is 20, Border with should be zero, the border color also should be non and padding was too well, the padding was too well, so if we check it from here, we can see here the padding is too well. So now on header, we don't need a background color for the separator, we don't need background color for the separator. Only thing we need the drop shadow. Let's try to add the box shadow after the complete of this design and we have to go to text, and in text, the name color will be black and the typography is sub editing. Yep, it's sub eding type, and now on the title, we don't have a title, so we don't about that. And the review color will be text and the typography will be paragraph. On image, let's see the image size. Figma design, the image size 64 by 64, make it 64. Now here, we have to find the gap, the gap is not, it's two L and the radius will be 60. Let's make it 60. We don't need icons. We are not going to edit any icon details and here we have a review icon. Let's see the review icon size. It's 23 by 23. We get 23 spacing is what is this it is six, and the color is let's see the color, copy the color code and paste the color code here. The thing is we don't still see the reviews, let's find out how to show the reviews. On additional option, do we have a review? No. Okay, here we have to add the rating. Let's add rating as five like this. Okay? Okay. I got you. I got you. Five. Yeah, the rating is five always because for the website, we add the best rating for the Okay, now so far so good and we got the similar result and still we have a lot to do. So if we go to Etyle and now we have to set the navigation part on the navigation, I will set the arrow as zero because we don't need arrows. Let's see if there has a way to remove the arrows. No. I don't see a way to remove the arrow, one style, we can do that. Okay, and pagination should be two. I think it's spacing the pagination space in between is 20 and the size is 20. So let's make the size 20. The color is primary color, active color will be this color. Sorry color is accent color, and the active color will be this color. Okay. Now, what are missing? So let's see, let's see. Here, we missing the background. So let's go to slides and do we have? Yeah, we have border colors. We have a way to add the border but not at the drop shadow. So let's see, let's see. There should be a way or there should be place to add the box shadow. In advance let's see border, make the border radius as 20 and drop shadow. No, it's added to the all sections or let's not do that we only need to add to the slide. So I slide, background color is okay, borders border with two, and bod radius, boda color will be not white black color. Actually, we don't have a way to add drop shadow, but we already create the CSS maybe adding that CSS code here will be work. So I will select the loop carer. This one, let's select this loop Carsel. Did you remember that we add CSS cast like this? And let's go down in here. Let's go to Advance and in CSS, let's, it's work. Wow nice. Now go to content and I didn't think that work, but it works. So here I will cred the border with a Crow and the border color will be no Okay. That's the power of CSS then we have to remove the separator, of course, and the gap will be k. I think the gap is extinct it's too well, not six too well. Okay. And here we have the rating as the below. I think there is no way to add the ratin as below. Yeah, we have to create custom ESS, but we can use template like this using the loop carasel. Those are the limitations that also go to slides in slides, we have to set the pad. We already set the wedding. Oh, no, we have to set the high to the bottom. Oh, maybe let's click here and let's add bottom as like 30, so we can get the same results. 81 is a bit bigger. Let's add bottom as six. Okay, now it's good. And on the on the navigation, the navigation pagination items are too close, so let's try to fix. I know how to fix it. We have to 60 will be. Yeah, we'll see what we can do. But for now, let's keep it like this, and now we have to add this same effect. To do that, let's see what we can do. First, I will publish this and also we don't have option to create this above effect, so we have to ignore that one, too. And now I will refresh and we have to find a way to add drop shadow here. So this is the drawback that use the prebuilt elements, but with the power of the element orp we can create custom stuff for our website and create fully custom website using templates. Now at least try to fix this pagination issue. I additional set in. Okay, here, I have a way to hide the arrows and vegation should be dot on slides. Okay, here we have a way to add the wed, but we don't need to add the with. Let's make slides is called as three. Let's make it like four. No, it should be three here and the slides be okay. Now that we fix one thing and here we have to still add the padding top, here good on style do we have a no way size 20 space beteen What about on advance. Let's see on advance. I don't think we have a way because it happened when we add this CSS class, so we have to fix this with CSS. Anyway, we are not going to use this review box review, so I will just remove it. This is just for teach you how to do that and we have to add CSS, so we are not focused on CSS in this course. I just remove this part and I will see you in the next lesson, which is creating the footer 122. Design review section - Part 02: Okay, now we added reviews. So let's start to design. So here, first, let's check the size of this container. So it's 492. The height is 492, so let's make it like 500. So first, I will remove this unnecessary container and I click here iPlexbx click on Tired column. Okay, here, let's go to advance in advance. Let's remove all of this is stuck and let's make 140, 140, and right and left. No, no, not margin. It should be padding. Padding is 140 and the padding is also 140, and the top margin will be 120. Okay. Now, let's go to layout in layout. Man height will be 500 pix. Now as the first step, we have to add this header. Let's come here, pick element, and add the header, then copy this text, pace the text, and make it center alignment center. The typography is header and the text color will be this text Okay. Now what we have to do is add this carousel. Let's get loop carousel. I will quick this ad element icon and search loop and here we have loop carousel, add it and now I select the main container and on raw, I will make this as 60 because here we have the inviting size as 600. Now, let's go now let's click this loop casel and first we have to create a template. I will just click on create a template and click on Sato create it. Okay, I was created, and I have to save one back. Okay, now select the container again. Actually, let's select the loop casel and here our template automatically added. And let's not worry about number of slides for now. And let's go to query in query. I will set the source as client reviews and let's creep the default data and then what we have to do is click on Edit template. Okay. Now I will click this plus and click on Plex box and click this direction column and go to Advance and remove the margin and padding. Now as the first step, we have to add the image and name to do that phrase add element and search image and just add the image like this. Here in here, I will click on dynamic tag, and on ACF image field, I will set the key as client review head shot like this, the image added and the image resolution will be full. And to show the result, I can click on Loop item set in and on query on review setting on Query, I will set the source preview setting set the preview a specific post item to client review and click on Apply and preview. All right. Now let's add the rest of the details and then make the design. So now I have to add the name, so I will add the headline inside this and from here I will set the post title as I remember the post title is the or we can click on Edit and see it. Okay, here, the post title is the name of the reviewer. Okay. Now I will just change it color and let's see the font eight regular 25, which means here, it should be sub ding, it is subbed let the sub d in, and now I will duplicate this text and let's here select the pose type here, remove the pose title and click on dynamic tag and ACF field, click on it. The key will be review. Yes, the review just added and its size should be paragraph size. So let's go to set in here, let's set it as paragraph and on container, let's add the in between size, the inviten size is the inviten size is, so I will go to layout and the row size will be two. Now we have issue. Currently we have the icon set all of those icons are five, but if someone at four star revue, we have a place to, we have to make it customized because if we just add four stars or five stars here, we will not able to customize it. Let's try to do the next. Now we added reviews. So let's start to design. So here, first, let's check the size of this container. It's 492, the height is 492, so let's make it like 500. First I will remove this unnecessary container and I click here lex box, click on Tired column. Okay, here, let's go to advance in advance. Let's remove all of this is stuck and let's make 140, 140, and right and left. No, no, not margin. It should be padding. Padding is 140, and the padding is also 140 and the top margin will be 120. Okay. Now let's go to layout in layout. Man height will be 500 pixel. Now as the first step, we have to add this header. Let's come here, p element, and add the header, then copy this text, pace the text, and make it center alignment center. The typography is header and the text color will be this text Okay. Now, what we have to do is add this carousel. Let's get loop carousel. I will quick this ad element icon and search loop and here we have loop carousel, add it and now I select the main container and on raw, I will make this as 60 because here we have the inviting size as 60, Okay. Now let's go now let's click this loop casel and first we have to create a template. I will just click on create a template and click on Sato create it. Okay, I was created, and I have to save one back. Okay, now select the container again. Actually, let's select the loop casel and here our template automatically added. And let's not worry about number of slides for now. And let's go to query in query. I will set the source as client reviews and let's creep the default data and then what we have to do is click on Edit template. Okay. Now I will click this plus and click on Plex box and click this direction column and go to Advance and remove the margin and padding. Now as the first step, we have to add the image and name to do that I phrase add element and search image and just add the image like this and yeah, in here, I will click on dynamic tag, and on ACF image field, I will set the key as client review head show like this, the image added and the image resolution will be full and to show the result, I can click on Loop item set in and on Query. No on review setting on Query, I will set the source preview setting, set the preview specific post item to client review and click on Apply and preview. Now let's add the rest of the details and then make the design. Now I have to add the name, I will add the headline inside this and from here, I will I will say the post title as I remember the post title is the name so we can click on Edit and see it. Okay, here, the post title is the name of the reviewer. Okay. Now I will just change it color and let's see the font regular 25, which means here, it should be sub ding, should it is subbed let the sub d in, and now I will duplicate this text and let's here select the pose type here, remove the pose title and click on dynamic tag and ACF field, click on it. The key will be review. Yes, the review just added and its size should be paragraph size. So let's go to set in, and here, let's set it as paragraph and on container let's at the inviting size, the invert in size is two. The inviting size is two, so I will go to layout and the row size will be two. Now we have issue. Currently we have the icons all of those icons are five, but if someone add four star revue we have a place to, we have to make it customized because if we just add four stars or five stars here, we will not able to customize it. Let's try to do it in the next lesson. Okay, now we added reviews. So let's start to design. So here, first, let's check the size of this container. So it's 492. The height is 492. So let's make it like 500. So first, I will remove this unnecessary container and I click here Vlexbx click on Tired column. Okay, here, let's go to advance in advance. Let's remove all of this stuck and let's make 140, one, 40, and right and left. No, no, not margin. It should be padding. Padding is 140 and the left padding is also 140, and the top margin will be 120. Okay. Now, let's go to layout in layout. Man height will be 500 pix. Okay. Now as the first step, we have to add this header. Let's come here, pick element, and add the header, then copy this text, phase the text, and make it center alignment center. The typography is header and the text color will be this text. Okay. Now what we have to do is add this carousel. Let's get loop carousel. I will quick this ad element icon and search loop and here we have loop carousel, add it. And now I select the main container, and on raw, I will make this as 60 because here we have the in between size as 60. Okay. Now let's go now let's click this loop casel and first we have to create a template. I will just click on create a template and click on Sato create it. Okay, I was created, and I have to save one back. Okay, now select the container again. Actually, let's select the loop casel and here our template automatically added. And let's not worry about number of slides for now. And let's go to query in query. I will set the source as client reviews and let's creep the default data and then what we have to do is click on Edit template. Now I will click this plus and click on Plex box and click this direction column and go to Advance and remove the margin and padding. Now as the first step, we have to add the image and name to do that phrase, add element and search image and just add the image like this. Here in here, I will click on dynamic tag, and on ACF image field, I will set the key as client review head shot like this. Okay, the image added and the image resolution will be full. And to show the result, I can click on Loop item set in and on Query. No on review setting on Query, I will set the source preview setting, set the preview a specific post item to client review and click on Apply and preview. Now let's add the rest of the details and then make the design. Now I have to add the name, I will add the headline inside this and from here, I will I will say the post title as I remember the post title is the name so we can click on Edit and see it. Okay, here, the post title is the name of the reviewer. Okay. Now I will just change it color and let's see the font regular 25, which means here, it should be sub ding. Yeah, so it is sub slate the sub d in and now I will duplicate this text and let's here select the pose type here and here, remove the pose title and click on dynamic tag and ACF field, click on it. The key will be review. Yes, the review just added and its size should be paragraph size. So let's go to set in here, let's set it as paragraph and on container, let's add the in between size, the inviting size is two. The inviten size is two, so I will go to layout and the row size will be two. Now we have issue. Currently we have the icons all of those icons are five, but if someone add four star revue we have a place to, we have to make it customized because if we just add four stars or five stars here, we will not able to customize it. Let's try to do it in the next lesson. Okay, now we added the reviews. So let's start to design. So here, first, let's check the size of this container. So it's 492, the height is 492, let's make it like 500. So first, I will remove this unnecessary container and I click here Plex box, click on Tired column. Okay, here, let's go to advance in advance. Let's remove all of this stuff, and let's make 140, one, 40, and right and left. No, no, not margin. It should be padding. Padding is 140 and the left padding is also 140, and the top margin will be 120. Okay. Now let's go to layout in layout. Man height will be 500 pixel. Now as the first step, we have to add this header. Let's come here, pick element, and add the header, then copy this text, phase the text, and make it center alignment center. The typography is header and the text color will be this text. Okay. Now what we have to do is add this carousel. Let's get loop carousel. I will quick this ad element icon and search loop and here we have loop carousel, add it, and now I select the main container and on raw, I will make this as 60 because here we have the inviting size as 60. Okay. Now let's go now let's click this loop casel and first we have to create a template. I will just click on create a template and click on Sato create it. Okay, I was created, and I have to save one back. Okay, now select the container again. Actually, let's select the loop casel and here our template automatically added. And let's not worry about number of slides for now. And let's go to query in query. I will set the source as client reviews and let's creep the default data and then what we have to do is click on Edit template. Now I will click this plus I can click on Plex box and click this direction column and go to Advance and remove the margin and padding. Now as the first step, we have to add the image and name to do that I phrase add element and search image and just add the image like this. Here in here, I will click on dynamic tag and on ACF image field, I will set the key as client review head shot like this the image added and the image resolution will be full and to show the result, I can click on Loop item set in and on query on review setting on Query, I will set the source preview setting set the preview a specific post item to client review and click on Apply and preview. All right. Now let's add the rest of the details and then make the design. Now I have to add the name, so I will add the headline inside this and from here I will set the post title as I remember the post title is the so we can click on Edit and see it. Okay, here, the post title is the name of the reviever. Okay, now I will just change it color and let's see the font regular 25, which means here, it should be sub ding. Yep, should it is sub set the subbed in and now I will duplicate this text and let's here select the pose type here, remove the pose title and click on dynamic tag and af field, click on it. The key will be review. Yes, the review just added and its size should be paragraph size. So let's go to set in here, let's set it as paragraph and on container, let's add the in between size, the inviting size is two. The inviten size is two, so I will go to layout and the row size will bit too. Now we have issue. Currently we have the icon set all of those icons are five, but if someone add four star revue, we have a place to, we have to make it customized because if we just add four stars or five stars here, we will not able to customize it. Let's try to do it in the next lesson. Okay, now we added the reviews. So let's start to design. So here, first, let's check the size of this container. So it's 492, the height is 492. So let's make it like 500. So first, I will remove this unnecessary container and I click here Plex box, click on Tired column. Okay, here, let's go to advance in advance. Let's remove all of this stuff, and let's make 140, 140, and right and left. No, no, not margin. It should be padding. Padding is 140 and the left padding is also 140, and the top margin will be 120. Okay. Now, let's go to layout in layout. Man height will be 500 fix. Now as the first step, we have to add this header. Let's come here, pick element, and add the header, then copy this text, phase the text, and make it center alignment center. The typography is header and the text color will be this text Okay. Now what we have to do is add this carousel. Let's get loop carousel. I will click this ad element icon and search Loop and here we have loop carousel, add it and now I select the main container and on raw, I will make this as 60 because here we have the inviting size as 60. Okay. Now let's go now let's click this loop casel and first we have to create a template. I will just click on create a template and click on Sato create it. Okay, I was created, and I have to save one back. Okay, now select the container again. Actually, let's select the loop casel and here our template automatically added. And let's not worry about number of slides for now. And let's go to query in query. I will set the source as client reviews and let's creep the default data and then what we have to do is click on Edit template. Now I will click this plus and click on Plex box and click this direction column and go to Advance and remove the margin and padding. Now as the first step, we have to add the image and name to do that I phrase, add element and search image and just add the image like this. Here in here, I will click on dynamic tag, and on ACF image field, I will set the key as client review head show like this, the image added and the image resolution will be full. And to show the result, I can click on Loop item set in and on Query. No on review setting on Query, I will set the source preview setting, set the preview specific post item to client review and click on Apply and preview. Now let's add the rest of the details and then make the design. Now I have to add the name, I will add the headline inside this and from here, I will I will say the post title as I remember the post title is the name so we can click on Edit and see it. Okay, here, the post title is the name of the reviewer. Okay. Now I will change its color and let's see the font regular 25, which means here, it should be sub ding. Yeah, so it is sub late the subbed in and now I will duplicate this text and let's here, select the pose type here, remove the pose title and click on dynamic tag and ACF field, click on it. The key will be review. Yes, the review just added and its size should be paragraph size. So let's go to set in here, let's set it as paragraph and on container, let's add the in between size, the inviting size is. The inviten size is two, so I will go to layout and the row size will bit now we have a issue. Currently we have the icons all of those icons are five, but if someone add four star rev, we have a place to, we have to make it customized because if we just add four stars or five stars here, we will not able to customize it. Let's try to do it in the next lesson. 123. Design review section - Part 03: One, check this out. We have rating IA widget, if we add it here and here we can set the ratingcale let's set it as five and in rating, we can add dynamic t, which means we have to create advanced custom fields that we can have ability to add rating point as number. Let's do that. Before that, if we search review, we can see this review box too and add individual reviews to this review box and customize the design. This case, let's continue with the loop carsel and let's see what we can do. Now I go to Advanced custom field and field group. In field group, we have to select the client review field. Let's edit it. Then here we have to add new field. This field type will be number. Let's add the field label as review is co like this. Now I click on Save changes and now if we go to client review and cover review, we can see new review fields, so I will did five and save it. Okay, let's do it for the rest. Actually here, we don't need to add them manually because we already create this. We can add default value to this field. Let's go to advanced custom field and field group in field group edit the cien review field. And here we have to edit this reviewc here as the default value, I will enter five. No, we don't need to add new field. So here we add five as the default value and click on save changes. And now let's go to client reviews. And if we go to this one of this review, we have to see the review score as five. We just added empty field because I think when we remove that field, it didn't remove so let's go back and here deleted we don't need just delete and click Save changes. Okay. Now in reviews and let's go to MI and it default value is five. Okay, so far so good. And now we have to add the design. Let's go to our elemental item, and here we have these reviews, go to rating and on tin advance custom. Um let's add the as. Actually, we have to rept this. Okay, we already saved and that's a good thing. So if we add at as two, this will be show as two, but in this case, we can set the dynamic tag, click on dynamic tag advanced field and click on Advancnumber wheel we have review. All right, so far so good and now I can publish it and if we want, we can see it in the design. Okay. 124. Design review section - Part 04: Okay, let's edit the template and make the design better. I click on Edit template, and here we go. Let's see, first we have to make this image on the left side and the name on the right side, and the image I see is 64 by 64. As we have to add the rounded corner radius. Let's do it, first I select the image. One style, let's make alignment center and then let's change the peak cell to 64 and radius will be 30, 30 is not good, but about 60, 60 will work perfectly. Looks good, then what I have to do is create new container, let's create a container like this and go to advance, not here. Select the container that we just created and on advance, remove it margin and padding and add the image inside the container name inside the container. Then select the container and on layout, change it direction to row like this, then make it align center here we have a small issue. If we check this image is not aligned perfectly, maybe we have we can set this medium size image because on Advance, we can add padding top pass minus, not padding, the margin top, let's make margin top pass minus. Yeah, now it will be perfect and I click on the second container, and here we have to add the column gap. If we check here and see the column it's too well, let's make it as well. And now we have to take care about this EAs. Copy the stars color and click on the r one style. Let's change this color like this. And what about the size? The star size is 23 by 23 and the space is six. Let's make spacing as six and the size is 23 by 23. Okay. Now, what do we have to edit? Okay, so far so good everything will be perfectly aligned, and in between sizes 12 here. I think I already add that in between. If not, yeah, we already added it. Okay. Now what we have to do is add the background effect like we did it on here. We already created the CSS code and the CSS class. Let's add it. Before we add it, let's add the paddings around this box. Let's see the patterns here. It's two and here, well, and this box size is 300. Let's make those details, seart the container and on advance there's a paddinasTl like this. Then the width will be 300. No, height will be 300. Let's make it. Okay, what about the corner radius? Let's see the corner radius is 20, so in style, border radius 20. Okay, I think everything is good, so click on publish or click on seven badge. And now we only have to add that CSS class. So let's try to find this class, and so on here, we have to select the loop carel In loop carsel in advance here we have the CSS class, so let's copy the class and let's select this loop caruselO advance let's add the CSS plus here and see it just added like this. Now what we have to do is find in the inviting size. The inviting size is 20, here, we have to go to Etyle in style gap between should be 20. Okay. Now, I will publish it and it's so far so good and we just add it. But however, when we check the design, we can see in the third review, we only see the half of that review. Let's create this effect to do that, here we have to go to the content. On content on layout, first we have to find out the number of slides. So let's see currently we have only five slides. So let's make this as five, and slide on display will be two. So now you will only see two, but don't worry. I will show how to fix it, and slide on Icroll will be one. Then if we go to set, here we have offset slide. I will add offset slide as left. When I add it as left, we just see slide from here. Actually, it should be right like this. Now, what if we increase this offset width? When we add the offset width, it just appear like this, but we need it to show more. Do that, we can just simply add the offset with 200. Let's say that 200 will be the size. It should be a bit bigger. Let's make it to 20 to 30 to 52 50 will be the best size so far so good. And now on navigation, I don't need to show the arrows so hide the arrows. In pagination, I want to see the dot as the pagination. Let's add style to those dots. Let's go to le in style on pagination. The dots in between will be 220 and the dot sides will be 20. Space between dots will be 20, size will be 20, and the color will be this primary color. Now spacing should be, I think it's 30, it's 20. Let's make it 20. And now we have a issue we have here a lot of dots on over. Let's make the color as blue color. Okay. Now to reduce this dot count, we have to change the slide on Scroll. Let's make it like two. Then, two will be the perfect. So now two slides will be changed like this. Okay, now I click on Publish and here we have a review section like 125. Design footer section: Hello, everyone. Now we have to design this footer. So let's do that. First, I go to our elemento template and we don't need this section, so let's delete it and click on publish, then we have to create the footer template, so I will go to WP admin, and on WP Admin, I will go to templates and save template. And if we click on Publish, we can see the template, and we already created the main template, but we didn't add any content. However, creating the Puta section is really easy. Just click on this add new template and here you can select the template type. Here, in this case, isolate the foot and add the name and then click on Create Template. I already did that and here I will click on Edit with element. I think you will already did this too. And here don't think about those two, let's start to design. I will close the container that I already created, then I click on pass and click here and click on direction column type container. Let's go here. Then click here to find the height is 42, four. Let's add min height as 42, sorry, 42, four. Okay, and we have to first create this section. To create this section, we can create a new container. So let's make this direction as raw and then click plus second and add a container like this. And in this container on advance remove all the paddings and margin. Okay. First we have to add this logo, select the logo and click on Export and click on Export logo, and here go here and search image and add the image like this, click here and just drag and rob that logo that we just created and click on Select and here on Link, click here and click on custom URL, and here we have to add the homepage title. Here we can just select the dynamic tags and click on site URL, so it will be the homepage URL and we have to make this color in this black color. I will copy the color code from Figma design and click on the main container on Etyle, click on background type and on add the color like this. So far so good. Then on image style set alignment as left and now we have to add this text, so I will just copy the text plus second headline at the headline here, paste it here and the text sizes paragraph and alignment left, then color will be white color. We don't need to think about the width of this content because we can fix it after we complete the design, then what we have to add this social media links. Why here search social social icon and here we have social icon. I just drag and rob them like this and here we can add the icons. Let's see what type of icon that we have. We have Facebook, Twitter or X linked in Instagram. Let's add those system Twitter This is the icon that you want. Facebook, Twitter, linked in, this should be linked in and here we have to add the link URL for now, I'm not going to add any URL, then click on add item and add the next item, which is Instagram. Click here search in star here we have Instagram icon. Now alignment should be lap and the shape should be rounded and one style change official color to custom. In primary color, let's make this fill color as this blue color like this and secondary color will be white like this. So far so good. Let's find out the size of this icon. Is 56 by 56. Let's make this size as 56 56 is too much because we add the space let's decrease the size and let's make it like 28, 28 will be worse. And padding, the padding should be small. So let's see the padding in between those icons. Let's get rough icon. Let's get rough estimate it should be six. Let's make it like six to pixel and six. Okay, now we can change this to 56 like this. Okay? And spacing spacing is two, let's make this has not padding, padding is six spacing is like this. Now let's see the corner radius, click here and the corner radius is nine and let's go here, then at border radius, not corner radius as nine. Okay. And on iconHo the primary color will be primary, secondary color will be secondary, it will be like this and now we have to add the in between size. If we check the in between size, it's 20, add the row gap to the containers. Let the container on layout row gap as 20. This section is okay. Now we have this quick links section. Let's create. Can just duplicate this container like this, right click and duplicate. Now here, what we have to add is link text selected and here remove this image and here change this to weak link and change the type of gravital d like this and then we have to add the so at the menu is easy. I will also remove this section and here search menu. Let's get this word press menu and put it like this and select the menu. For now, let's select the main menu as the menu and layout will be vertical alignment will be start. I think it's start. It's and here we have to change the design. So before we do anything, let's change the design. So typography will be buttons and text color will be this white color like this in between sizes too, let's make pointer No no, we don't need a pointer, so let's go to content and vertical alignment. Pointer is non animation, non su indicators. We don't need it. And mobile breakpoint will be none because we don't need to add mobile drop down or the Hamburger menu to this Putter menu. And now let's go to Etyle in EtyleOH let's make text color to primary and on active, make the text color to primary and Algod now we have to change this vertical padding. Here we have test toll what if we add this S? It worked fine. Allgood. What about the in between size? I between size is 30. Let's make the in between size as 30. Here, no, not here on container, in between the row side should be 30. Okay, let's duplicate this container and create the third menue before we do that we have a issue, so this menu is not on the left, so let's make it left. Add horizontal padina zero and it will be perfect like this. Okay. Now in here what we have to do we have to add the contact information, copy the contact information. Change the title like this, then what we have to do is add those information. I will remove this menu and here I will add a headline into this newly created container and on this style change typography to paragraph and text color will be white. Is it paragraph? Yeah, it is paragraph. Yes, I paragraph. Copy the phone. Content just a phone like this, then add the PR like this and let's duplicate this and here we have the email, copy the email and paste it like this. Then we have address, copy the address, and duplicate this one with the address and the BR to break the line. Then we have hours we duplicate this. On ns at the Bo. Now what we have to do is find the inbten size. The inbten size is two. However, in between here the contact information and the text is 30. The main container in between or size should be 30 and I will click here to add new container in this container. Remove the sorry, I will click here and remove the margin and paddings, then I will put those content inside that container, select the content and put it inside this container like this. I think this should be the top email, good and select that container and row layout row should be toll. And here we have another issue, so we don't need this up padding, what if we remove this? When we remove this, it's fixed, but we need the padding, we can add the space between the two like this. It's two. Yep, it's two. All right, so far so good and now we have the content, and now what we have to do is click the main footer and here we have space as 30 in the top. Let's make the 30. Lick the padding and on the top, make it 30, 140, and left should be 140 like this. Now on layout, we have to add the space evenly or space between should be the way. Again, if we check it, again, if we check it, we have 88 as the in between size. Let's add 88 as the in between size. Here, the column size should be 88 like this. Now it will look like this and it's pretty good here we have a issue. This image should be so only we can do is click on the image and on margin, just add negative margin to the top like this. Okay, this will be based. So now click on publish and now we have a perfect footer, and then we have to create this copyright part. Now if we check this on the design, let's open this new window and scroll down the footer will look like this and here we have to add spacing so we can simply click here and on Advance and on margin, add Margin top 20. Publish it and let's see the design. Now we have to add the photo credit, so let's edit the next lesson. 126. Design footer copyright section: Now let's create this copyright section. Let's start. First, I go to the footer and let's create a new container, and in this container, we have to change the color. The color is the color that we have the above section so we can easily what we style on color, let the color using our global colors. And here, let's find out the size, the height is 64. Actually, we the height using this text, and for now, let's add this white border. Let's find out the border details. Stroke is one pixel, so let's go here and we can easily search HR, we have divider, so just put it like this and one tyle the color should be white color and gap should be zero. Okay. We just add the divider and now we have to add this take copy the t and go to Main Butter and click here to add the headline, add headline like this. Did. Let's add the headline, text here and dragon drop in this container like this. Okay. And on style, change it to I think the size is button size and secondary. Let's see. Let's see. Yeah, the size is button size. Yeah, it should be medium, right? Yes, medium 20, medium. Okay. Good. Now what we have to do is add some spacing. The spacing is 20 by 20 right? Yep, it's 20 by 20. So on the headline, go to advance on advance, top padding should be and the bottom padding should be 20 like this. Okay. Then what we have to do is add the text. So here we have to add the current here. To add it, we can just go to here and on the dynamic tag, we can get the current date. Let's see the current date here. We have current date time, select it and date format will be let's see the date format. Date format is okay, but we only need the date. We don't need we only need the here. Let's see we have set in to get only on custom. On custom, we can just add this Y and remove the rest of details like this. Okay. Now on advance on before, we can add this copyright part. Only add the copyright at then after will be the rest of the After will be the rest of the details like this. Okay. We should have a space. Okay, good. And now glicon publish to publish the design, and now if we see in the real design, it will look like this. And here we have a issue. The icons are too big, so let's fix that click here. And on size, let's make them bit small like 45 make paddy four and the spacing istelo and now it's look good and click on publish. We just design the whole homepage section. Now what we have to do is add the animation and make this design mobile friendly and then we have to do the next lesson. 127. Add motion effect: Okay, now let's add motion effect to our website. So we are already at some motion effect. As an example, if I click on this headline and on advance, go to motion effect, we can see fade in normal entrance animation. So from the second section, I will not add for individual items instead of that, I will add for the whole section. So I click on the section and go to advance in advance on motion effect in entrance animation, make it fade in, like this. Then let's do the the next section and the next section. So each and every time when you design a website, always think about user. User don't need any fancy stuff. He need to have straightforward way to get solution to their problem. So we have to tackle that instead of adding a lot of animations and make our website complicated. So adding this type of simple motion effect will get us the best result. Okay, now I click on Publish and for the footer, I will not add any type Imagine. Okay, now if I check on the design, let's open the design in new tab and it will look like this. Okay. Now in next video, let's fix the responsiveness issue or make the website mobile responsive. 128. Fix responsive issue - Part 01: Okay, let's make our website mobile responsive. Before we go into the mobile and tablet, let's see our website look in the desktop version. To do that, we can use website responsive testing tool. Or you can just Google Mobile Responsiveness checker and you will see lot of results, so I will get this result. And here, currently, if I add our website URL, it will only show us the maintainers mode page, and it's also known mobile responsive anyway, we don't need to worry about the home page. However, we have to make the website live for check the mobile responsiveness. So let's do that. Go to the website, dashboard, here and here, click on the maintenance mode. And here, let's choose the mode to disable and click on Save Changes. Okay, now I click on Check. Actually, I have to clear the cache. We still didn't talk about the cache in, but if you see this type of cache, plug in or this type of, I can just click on perch and go here, click on Check. Okay, here, our website will look on the 1024 size desktop and it's not look great at all, but we can tackle this in the tablet to you. Let's find out different size and click this size and then click the third size, and here this will look this so I just go to our editor, and here we have the tablet version, and tablet fortet will show up to ten to 24 fixel, which means we can ignore the 1024, but from here, we have to consider about the design. Actually, on the 12 18, I think this will also apply for the tablet. Let's see, and then we have to go to this size and Okay, here we have a issue with these buttons. So let's fix it. Go to the design and click here and let's see what is the issue. First, let's see the container setting, click on the container, and container will be full with. Okay, there is nothing to fix. And here, let's see the image on the image that we don't have anything to fix and let's see this container. Okay, here we have 90 as the left padding and margin, so I will remove it. Then I will go to the main container and layout. Let's make it space between. However, here we have a issue because this trusted expert part is on the right to fix it. What if we add column gaass 90 60. Let's add this GaAs 60, and when we add the Gapass 60, everything will be perfectly fine and on here, we have to make justify content start like this. Now it fixed and let's publish it and click on heck to check the design. Here we say this issue to fix it, I will go to the design and click on this button and right side, we have space. If we remove that right side, dispacing we will able to gain some space like this. And here let's make this website there's two because on the design here we have the SS 20 and here we have in between sizes 20. Okay. Now, if we publish and check the design, this should be fixed. We can check. Okay, I fixed like this, and okay now let's go to the next section. In here, we have some align in issues, so there is no much that we can do about it, but I will revit the page and only thing that we can do is remove the equal height and still it will adjust according to the text, but let's go here, but it will be not a big issue. So I will click on carousel and here I will remove the equal height, and you see when we do that, it didn't look quite good, but I will publish it. And now if I check the design, it will adjust only according to the text which means the icon will be aligned with the text, only the services box will be not aligned correctly, but this is much better than before. Now let's go to the next section and here it looks good, and now let's go to the next section and here everything looks good and on the footer, it's look good, let's go to the next size on the desktop. Currently we are at 13 66 let's go to this size in this size looks good, and here we have that same issue that we already had, but it's much better than before. Now let's go to the next size here, let's see till Earl good. Now this part will look good and now here we get big space in the bigger window, it will look like this, but I think it's fine because it's on the bigger window, not in the small window. So let's keep it like this. Okay. Let's move on to the tablet version. On the design, let's click on Tablet Prod create from here. Here we have a lot of stuff to fix. Let's start one by one. First, we have to fix the header. Click on the header to edit and here I think we have the issue with the site setting. If I go to sit setting and on the layout, we add the default padding, actually, I can make this al concept changes and in content padding, we actually add the padding, but we can't change it from here, so let's go back and recon header to edit the header and here slat the container and go to advance on advance, remove the padding like this. When we remove the pading, it will look like this. Then let's add right paten as 30, ma 20 and the left paddins 20. Okay, I select this second container and let's make direction as vertical and justify content will be start and from here, our logo is fine. If I go to advance, we have margin top pass 20. No, it's 20, okay. When we change the options or the values from here, it only apply for tablet Potrit don't worry, nothing will happen. So here on here, we have margin top pass 24. Let's make it zero. Actually, we have two. So here we have margin top pass 24 and the bottom as seven, so I will click here and let's add minus margin again. Okay, I will keep that set in. Here we have adding to pass 30, let's change it to 220 and right, just click here one chain and the right will be zero, bottom will be also zero, left will be zero. Now it's centered and now we have to think about menu on menu, I will change this Bake point to mobile and when we change break point to mobile, we can see the full menu, and then we have this image box. Image box has a custom with, I will make it full like this. Okay, so far so good. Now let's make this input twin size. So the Ibuttwin size should be go to container and layout. Let's make Pros 20, 22 week, 15. Yeah, 15 will be okay. So when we check this Claus 24 icon, it will be bigger. And because of this icon, this menu will be bigger. So when the menu is bigger, this background image will be not show correctly, so I will hide this Claus 247 icon in the tablet. To do that, I select the image box and go to advance on Advance. Click on RSF Sis, then I will click on Hight on tablet. Okay. And now I click on publish and let's see the real preview, but we have to adjust more. But for now, let's see the tablet preview. Check. The tablet preview will look like this, but here we have more to edit. So as the first step, I click here and let's add pad bottom as 20 like this, then I click on publish and click here, Margin top will be 20. Will that be okay? Yeah, that is okay. Now I click on publish let's check it again. Now it's much better and I like this design. If we don't like this at all, we can just hide this whole section on tablet and create a new section. But for now, this is much better and now let's move on to the hero section and the rest of the design. 129. Fix responsive issue - Part 02: Okay, now we have to create this homepage design that suitable for the tablet. I click on Edit page and this will redirect me to the homepage and here we have the hero section, so I write container and click on Edit container. And here, what we have to do is first I go to Advance on Advance, I will change the write pad into 60 left padding will be 60 to 60 is bigger. Let's make it 30 30 like this and the bottom will be 30 and on the top, we have to make it bigger than 150. What about 160? 160 is too short and this should be like this. It's 230. All right, looks good and the font size is okay, I think what is the font size? Its font size is 60, maybe we can reduce it, but for now, I think it's looking good. Click on publish and if we want to reduce those font size, we can just click on side setting and here we have global fonts and click on this edit icon and here we have the tablet Ptrit version, so I can make this as 50. 50 will be fine. Let's make it 52 and subdin let's make it 20, 21, Okay, paragraph will be 18 and the button will be 21. Okay, now click Const changes, we change the global font so it will apply to rest of the design or design like this. Now again, we are here, good looking good and on button, if we want, we can reduce the button size it bit smaller like 20, 30, 20, 30, like this. Now we have the next section and the header is o here what we have to do. First, it's a big mess, first click on container and on advance from the padding and we add the padding as 30. I think we add it as 30. Let's see, right and left padding should be 30. Let's make it 30 is 30, left is 30. Now we have to change this position, so click here and on advance here, we have offset. Let's put it here and it will work like this and we have to fix this image box, the image box and on advance, make the offset like this. And here we have a issue. In the tablet version, we don't have space for both of those two sections, so I can click on the container and on layout, change the direction to row and this will go up and this will go down like this. Then on row, I will add the Gap pass 20 like this. Then here click on here, everything looks fine, and now I have to change this again. Let's change it to offset will be like this. Then here looks good and the buttons looks good here what we have to do, click on this and advance, remove the padding, make the right padding as 30, left paddinus 30. Okay. Here those icons looks fine. If we want more space on Carsel we can make this aside on display as one. The design will look like this and this is much better than before, and other spacing are fine, but if we want, we can change this row 60 to 30 or 2020 and we don't need to worry about the column. Okay, so far so good. Next we have our dedicated providers. Here, we have huge space to remove the space, I can just remove the margin to zero. Now it's look good and click here, then remove the padding here it will be 30, 30.This pretty good, we can add two providers at once and it look good, so I will keep it like this. So far so good then what we have to do here. Here we have, again, a big mess, click here, then on Advance remove the paddings and make right pattern as 30, left padding as 30, as we did before, we can go to layout and change direction to column and everything will be fine and if we want, we can make this image up and the text on the bottom. Let's do that. To do it, we can easily go to advance. We have to note advance have to click the container so click the container and on advance, we can change the order. Let's make it N and it will go like this. But it's not work there, so let's put it. Now we have a issue here, this one will work fine, but the bottom one is not working. I click on this container and at margin top, it's at margin top 70 and here, I click on this one and on advance change offset to like this, so far so good. All right. Now we don't have anything to fix here. Then let's go back and here we have a big mess, click on here and on advance change the two top margin should be one to 20 and padding left should be 30. The right is 30 and the left is 30. Then here we have this loop carousel and here we can just change this side on this plays one. Now it's look good. Yep, this is real easy and I click here and here we have is pacing as 30. Let's make it as like this. So far so good here, we have to change 62 20. If we want, we can make this center, but we don't need to do that now or we can just align self as stretch. We can make align self as stretch. And now we have to edit the Footer. I think the homepage looks good. So let's go to Footer and again, it's weak mess Before we go it, I click on publish to publish the changes. And if we go to the desktop version, anything will not change because we change everything in mobile or the tablet version. Okay. Now go down down down down and here, click on Footer, then click on Save and leave here what we have first, I click here on Advance right padding is 30, and the left padding is so 30. Now what we have to do is the column gap should be less. Let's make it like so 30. Okay. And for better use, we can make this center so it will not get too close to the left side text and here we have a big issue, go to style and change the size like this. Spacing should be six, let's a six and make padding like this. Looks good. Here everything will be look good. We don't have much to edit there, so I click on par live. And here we have a issue on the top, I have to add a padding. It's a part of 20 recon publish. Now let's check it on the design. Now it will look like this. Here we have issue and the rest of the design will work just fine, but we have a issue with this. Boxes, actually, we can remove them. If we remove them, we will not have this type of issue on the tablet and the mobile. Best way is hide them on the mobile and the tablet and let's only keep them on the desktop version. But if you want, you can just adjust them according to the A website, but it's a big hassle. So you can talk with your client and remove them. In this case, I am going to remove all of them. So mo mean hide. I click on Edit the page to edit the home page. And here, see, let's see, here, click on this whole container and on Advance we can go to Responsive and hide Mobile portt and hide on tablet. Now it will no longer see on the mobile and tablet and we can do the same to this on responsive ID, only show on the desktop. Again, here, click on here on Advance hide, here, responsiveness can publish and looks good, then if we test it on the website, we will no longer have that issue. Now we have only the items that we only want to see. We may able to fix this if we add the loop carausel but I create different template and add those details by using advanced cust temple, but I don't know it will work or not, let's keep it like this. 130. Fix responsive issue - Part 03: Okay, now we have to take the mobile responsiveness or make our website mobile friendly. So according to Google or Jamini around 55 to 65% of visitors visit websites using mobile phone. So making our website mobile responsive is really important. So let's start. First, as we did before, we can do this from the header. Go to the header and on header, currently it's look like this. First and past, I will click on the container and in container, let's make padding as 15 by 15, left and right will be 15 by 15 and here we have a issue. We need this Hamburger menu to be in the right side. Let's fix it. I click on the container and on layout, let's make it direction Okay, let's add width to this. I click on this Hamburger menu item and here, set the toggle align left and then layout will be, what about vertical there? No, this should be horizontal. And one style, let's see toggle button on toggle button, let's set a size. Let's set this size as 35 border width, we don't need a border. And let's change color to this primary color. The background color will be accent or let's make the background color as primary color and the color will be white color like this. Then we have to put this here. Let's try to do that on advance, let's change with two in line no default, no full width, no. Let's make it like custom and add the custom. When we add the custom with, it will be aligned perfectly. Let's add custom with a 50. Let's see what will happen. When we do this, it just looks like this. To fix it, I will go here. Let's make it full width. When we put it full width, it just become like this and it look okay. Okay, here, here, this is too close, to fix it for the container, let's at right and left padding. The top will be 20, it's okay to be 20 on the top, and the right will be six and the left will be also six. Then on the layout, the column gap will be will be 15 and the column gap will be also six and now click here on Advance, let's change it with this. Here we still have the issue. The icon is too big so ontiTtal button, the size should be small. The size will be something like this, and now we want to make this lign centers to do that, we can remove this bottom 20 and now it's pretty good. Now what we can do is we can change the width of this image or the width of this logo. Let's make logo with 80, it will be work, and now we can remove the in between size and other stuff then gain more space. Here should be six. And on row, the column should be zero or six t should be zero. And now this button has more width to be breath, so let's increase it. Okay. Now on this style, the toggle button size should be increased. Like this. Now it's pretty good, and now we have to take care of this drop down menu. Okay, to do that, we have to go to dropdown and drop down. Let's make vertical padding as to, and the distance will be zero. Typography will be button. Background color will be this color, text color will be text and text color is this on active, test color is this. On Ha we don't need background color. Let's keep background color as white and on active, it will be same. Now it looks good. Okay, now our menu will look like this, and we good, I will publish it and let's see it in the responsive design. Here is the mobile and let's check the mobile breakpoint. Actually, we have to rotate it like this and let's go up and click on check. O here we have to hide this one. So to hide it, I will click on it and on responsive, it should be hide on mobile port and click on publish and now l check and everything will be work. Actually, we have to add padding to the bottom. Let's add it here the container, bottom pattern should be 20 like this, then we publish and let's check it on the mobile. It looks like this. Let's add this menu list from here to do that, we can easily click on here and one style drop down, the distance will be this and click on publish and see the design. It's pretty good and maybe let's make one point blow and let's check it. Now it's looking good. Now what we have to do is check this on the other mobile. I will look like this on the Apple iPhone eight. Here, what about Samsung Galaxy? It will look like this. And here we have Apple iPhone X, and it's pretty good. So now we have to change the header because header text is not looking good at all. So let's click here to edit the homepage. Okay, on homepage, first, I will click here and then on Ti or Graffy this headline. Typography, let's click here and go to the global phones. On global phones, let's see the header, the head button size or the text size will be 44, maybe 40 will work and the subdin will be 18. What about 20. 20 will be okay. Paragraph will be 18 and the buttons will be 18. Now click on save changes and let's click on back to Editor and here let's go to the headline. So in headline, we have a lot of issues, so we have to select the typography. I don't know the reason that it's not looking good, but let's see let's see. Okay, then we have to go to container and currently we have right and left as 30, so let's make it like 15, 15, the bottom also should be 15 like and this font is not looking good, 40, let's reduce the font with 35 will be 37 38. 36 will be the best size. Let's make it 36 and the button text size should also be reduced. Let's make those changes. First, I will publish the current setting and here, click on side setting, then go to Goble prawns and header on header. This should be 36 and the sub ding let's reduce this for 18 and the paragraph is 18. No, no, f den should be 20 if paragraph is 18, the button is 18. Button size is okay. Button size is okay, click on now. Save angers and click on back to Editor and go to container. Okay. Now we have to take care of this button because the button is not looking good, so let's go to advance. Let's go to style and style. We should have to reduce the padding, so the top padding will be 12, will be 50. What about 15:15, 50. Uh, no top will be 20, right, 15, bottom, 20. Okay, it will be bestie. So if we align those text center, it will look much more clear, but when we make it alignment center, it's hard to read. So let's put them like this. Yeah, good here. So I will publish it. And now let's go to the responsive design and see the design on the phone and it's Apple IPhone X. Okay, it's not bad. Rotate it. Okay, it's looking good. Now we have to continue. So here, this image is okay. And here we have this let's go here. And Okay, we hide this 100% care part on mobile, so we don't need to worry about it. So let's go to the container, and let's make right as 15 and the left at as 15. Okay, here we have a issue with the button, so let's make those two button like this and the row gap will be 15. Okay. And here is this button is on the top. The reason is we at top margin as 20, so I will make it zero. Now is looking good. Okay, that looks okay. Then let's go here and here on advance right, 15, left 15. Easy. Then here, those parts are looking. Okay. The parts are looking okay and I hope this work, it's working. We can reduce this gap. So let's go to Style in pagination. Let's make this gap as 15. Yeah, 15 will work. Then here we have our provider section, and here we have to add some top margin. So 12120 will be okay, maybe we can make it 90, but we already add 120 to those stuff. So let's keep it as one to 20. Okay, we don't have anything to edit. Actually, we have this link is not looking good. So yeah let's edit it before we edit it. Did we change the right and left fatty? No, let's make this 15 by 15. Now, let's publish those changes and let's go to edit template and here, let's select the button. It's not loading right now, but it's okay on this button, sorry, let's make the margin as zero actually here we have bottom as ten. Let's keep it as ten and we have to change the top top to zero, bottom will be minus ten. I think it will Okay, now, click on Publish. Actually, we can click Save and back. And let's see the design. Okay, I will take some time. Okay, I loaded. And here, it's too much below. We may have to add something like 50. So let's click on Edit container and here actually, it's still loading. So let's wait till to load it. Okay, let's again click on the edit template and here let's make it to mobile and on here, select the button and on advance, let's make this top pass minus -15 will be work. Now publish it and good. Now let's go to page. Again, let's go to mobile view and here good. Okay, let's go to the next section and this image look okay. And here what we have to do. Okay, let's click on this container and actually. Let's make those icons in the middle to do that, click on the container. Align items is already middle, so let's click on this image and make it center. I still didn't go to center. However, let's make this center like this, we can easily make it center, but we have to make this button also align center, but not a button. It's a image let's change this to column and it will be center, then we will have to add some spacing here maybe a row as ten. Okay. Now it's look good and let's do the same here. Click on the container and make it center like this, click here, make it center and click on the icon or the link, then the link should be -15 or 15. And make it align center like this. We can also make this item center, yes, yes. Here again, we have to make this one to direction column will be ten here, make it center that take d center and this button should be -15. Then make it align center here we have to good good. Now we just created that section actually did we remove the left and right? No, here we have to make this adding as 15 of the left and right. All right. Now we have to fix this. First, I will click on the container and on advance, let's make right as 15 and the left as 15. Then here we have the carousel. So here we have this loop carousel. This loop carousel, what we have to do is make the side on display to one. And on offset with let's make it a zero. When we make it as zero, it just looks good. If we want, we can just add like ten. Let's add ten because when we add ten, the both side become equal. Okay, we have nothing to edit there. Okay, now I will click C publish, and now what we have to do is edit the footer. It look really bad, but we can easily make this better. So click CFoter and here the top one is okay and we have issue with here. Let's make this right and left as 15. Here, top will be 20, the left will be 15 and also the right will be 15. And here the container, will be 2020, 20 will be okay. And here on the menu, click on align items and this will be align like this. Now let's make it start. Not good. Here, it's look okay. Stretch. When we make it stretch, it will be look okay. Then here, we have to actually, we have to do nothing here, just align correctly and on the copyright section, we have a lot to do and here the right will be 15. Actually, there is nothing to do on the copyright section too. And on this style, everything seems okay. All right. Now click Publish and let's see the design on iPhone X. Apple iPhone X, click on check. Okay, here is our hero section, and here is our Hamburger menu, the hero section, the A section. We can make this button to left. So if we make it to left, it will be much better. So click here to edit it currently on the main footer now we are at the home page. And here, let's make a line item left and also let's do the same. No, no, we have to make this left. We can do this. Let's see, let's see, position left. Okay. All right. Now it's also left and on style, we can remove the left as o. And here we can add the top as 2010, bottom as also 20. No need to add bottom though. Okay, now click on publish, and again, now let's check it in the real design. Okay. Now here is our about section, and here is our category section, and our provider get ten touch, reviews and footer. In footer, we can add some space to this HR tag. Also, if we check this, the first part is in the left side, but from here, it goes to the middle, but it's okay. If we want, we can just make them left, but I will keep it like this and let's make this HR or the divider, top pass, maybe will work. Click here to edit the footer and what happened. In this container, let's go to advance on Advance bottom will be 220. If something happened there. All right, click on publish nice. Now we can check it too. Okay, looks good. Nice. Let's see you in the next lesson, which will be creating the next page. 131. Design about page - Part 01: Hello, everyone. Now let's design this a page in Wordpress element of pro. Okay. Here our Figma design, so I go to the WordPress dashboard, and now let's go to pages R page. Okay, here, let's click on at New Page and the page name will be above. Let's copy this headline as the title. And here, let's paste it and click on Edit with element of all right. Now what we have to do is design the website, and if we check the element or website, we have similar section like this hero section, this homepage section is similar to the about section, which means we can use this homepage section to create a section. I mean the homepage hero section. So let's do that. Also this hero section of the about page blog page and contact page always repeated. Let's create this as a template, which means we can use it repeatedly in our Earl pages. Now for now, I will just publish this about page and here I will open WordPress dashboard in New Window, and from here I will go to template and save template here I will go to section and in section, click on add new section here, let's select template type pass section and let's add the name. I will add the name as hero section for subpages and click on create template. I will just remove this library because we don't need that. Now if we check the about page hero section and the main homepage hero session is pretty similar. We can just copy this section from the homepage. Let's do that. Again, I will open the website in New Window and here click on Edit with element of and just right click and click on Copy and let's go to the template section, hero section for subpage template and right click and click on paste. And it just paste like this. Now what we have to do is remove unnecessary stuff. First of all, if we go here, no, not here, if we go to the Figma design, we can see the height. The height is 600, so let's select the container and here it has 800. I just make it as 600 and then here we don't have button, so let's remove the button, delete it. Now the background image. Here we have this background image. I will click on the background image and on Export, change it to JPEG, and click on Export button. Now let's go to tiny png.com and decrease the size of this file size of this cover image. Now I click on JPEG button to download it here let's go here in container style. Let's change this image. Click on the image and here we have the image and it just uploaded and here, let's just add the ALT text or old text and click Conselect it just added like this and we don't need to do anything and now click on Publish. Now we have this template and if we go to the A page and click on this folder icon, we can see our template in my template section. Currently, we don't have the hero section for subpages template, so I will repass repage When I repaste it here we have hero section for subpages. I can just click on Insert and click on apply. Just like that, it just add. Now only we have to change the text. See, this is the power of the element or template. Let's go to the Pigma design and copy the title. Come here, pace that title here and description, copy the description and pase that description like this. Nice. However, if we check the description, here it has small space like this. Let's do it to do that, we can add R here, we have to increase this and let's add R here. Then let's add R here, then again, we have to add R after this take. Let's here, let's add B like this. Okay, pretty good. Now I click C publish to save. Okay. Now let's move on to the next section. This section is also similar to this section. We can just copy this section from the homepage and add it to here. Let's do. Here our homepage and I will just click on this section and right click and click on Copy. Then on a page, click here and click on Paste. Right click and click on Paste. Okay. And for here, we don't need this image box, so I will select it and delete it. We don't need this one. Just select it. Delete it. Okay. Now it is pretty good and we may have to change some stuff we check here, we don't have two buttons. We only have one button. Let's remove this sub button, and if we check the inbten size, the in between size is 60, and let's click on the main container and Column gap 60, we don't need to do anything and just copy the text first like this, then copy the second text, just copy it to here, then let's copy this text. I will click this text and click Condo Bigate and here I will just add that text and here we have to add the request you appointment button let's add it to here. And after we completely design this website, we will create actions for those buttons. For now, let's add hash tag to those links, and now we have to change this image. On image style, we don't have anything. So I will just click on this image and click on Export and the file type is PEG, then go to Ti PNG, add the image and radio the file size like this, then come here. Con choose image at the image like this, then copy the old text like this and click Conceal and it just added like this and we don't have anything to do. Now we have to go to the next section and creating the next section is also pretty easy. This is the way that when we create the main page, we can just copy the content from there. So I can right click on this about section and click Condupl now what I can do is click on the container and I click on this container inside the main container and put it up like this. Now, let's change the text. Here, let's change this text first like this, then let's copy this text and here past the text. Again, we have to add sumin here so copy the tum title and just duplicate this and paste it. Now one tile let's change this text to sued, like this. Then we have to add the unders list. Let's click on Add element and search list. Icon list will work, add it like this. And here I will remove the items and only keep the one item and then click on this text to edit it and copy it, then paste it. Now click on this icon and we have this circle. Click on insert to insert it and go to style on style, the icon color is primary color and let's see icon size. The icon size is 16 by 16. Make it not 60, 16. The gap see the gap, increase it, press and gap is eight, make the gap eight and on text, let's change color to this typography color. Let's see this text is typography so we can keep the text styles typography or paragraph like this. Okay. Now what I have to do is just duplicate these items for times and add the content. Just copy the content, base the content here and copyst the content. T here, then copy this content and copy this one, pass it. Now, let's change the in between size here space between. Let's see the space between and it's 20. Let's make space between 20. Okay. Nice. Now we have to add this copy paste that tastes like this and we don't need the button, delete the button. Okay now, let's see. Now we have to add this image so we the image, export it as JB EG, click on export our mission of Export button to export it. Then on tiny PNG, add the PNG like this. Then click on JPEG to download this image and now let's go to about and click on this image and click on choose image here, let's just add the image. COVID, past it like this. Now click on select nice. Now what we have to do. Now we have this category is with the loan description. So let's do that. It's pretty easy because already we have that section on the home page, but there is some changes, but we only need this design. So I will just copy the whole section from here and let's go to the a page and let's just paste the content, and here we don't need this one. Delete it because there is no button here, Okay. Now here, let's copy the title. I think the title is same like this. Okay. Okay. Now we don't need this carousel feature. Actually, we can fix this very easily with grid, not with columns. So let's try. I click on add element and I will add a grid like this on grid setting, I will set the column mass too and the row will be two and the gaps will be 20 like this. Then what I can do is add those star. First, we have the actual let's put this grid on the top, so I will click here and let's add it like this. Then from here, I will see that the image box and add it like this on the grid, I will remove the margin and paddings and now let's add this one to here. Then again, we have this one, then this one and now we have to increase the grid row count. Click concrete, go to layout and change row to three rows and add them like this. Now I think we add Dt I will mother carousel, click here, click Condolete and also we don't need this one, so I will just delete it too. Okay. Now this is perfectly align and we don't need to do anything. It just appear like this and now we have to edit the contents. Click on the image box and on a style change the vertical alignment. Top. And now let's add those extra details. First, we have the text on description, let's add it like this and add the BR, I think it should work and add another BR, Okay, nice. And now this text should increase a little bit to do that. We can just add B tag like this. I think it's not working. B. It's not working, we will not able to use the image box because we have this extra line, so we have to create this from scribe or we can use CSS, but adding CSS is the easy way. Let's add the CSS and let's see what we can do. So first I will copy this text and replace this text, and as I did before, I will add two BRO break line like this and here I will add new tag called span. This is a TML tag and flash span to close the span tag, and here I will add the class class equal cgory box sub subheading. Okay. Nice. Now, this is a SMLC. TML class I just created, so I will copy it and click on publish and here I will go to the custom web design US or I will go to the dashboard of our website and here we have appearance and click on Customize. On customize, we can add additionals ESS. To add additional ESS, I can copy the CSS again and come here, ad dot because it's a class and a brackets like this, then I will add font size as let's see, let's see. The font size is 20, 20 x. I think this should work now. And let's go to the about page and repress this and see it worked or not. Okay, it's working. This text is bigger than the window text to confirm it, I will open this new window and check this out, right, go to Inspec and this one. On Inspec, we have span and here we have our CSS class. If I actually same size no, it's same size, so we don't need to do it. Those two items are say this one should be 21. On here, I have to make 21 like this and click on Publish. Now if I check it from here, we should see Test 21, click here and here we have 21 and see with the difference, nice. Now we can do the same for the rest of this image box. Click here and paste this text and let's go to here space the real content, so to get the real content, I will go to our content text file and at text from there. 132. Design about page - Part 02: I have the categories with small and long description. So first one we already created, and then we have woman health, copy the text and herem interesting. I think we miss it. So let's go to the home page. And on home page, yes, we just ignore the woman, but we may do it because we can get perfect shape with those six items. So let's ignore it. So let's go to this health screening and preventive care. And in small description, I will add this one in loan description here we have the loan description. Okay, then we have pediatric care. So to periatric care, I have to copy this description and paste it like this, then copy the text, the text. Actually, we add the same text to the first item, so we have to change the first item and change the first item details like this, pace like this. Now we have this fifth icon. Let's go here, pace like this, copy the text. You may not see the part that I copy in the text because I open it in my second window like this. Then again, copy this whole text and go to mental subord we have your description. Okay. The last one. Let's copy the format from here and paste it. Now, este it like this, copy this one, paste it like this. Okay. Now what we have to do is put this image top like vertical alignment top and we have to do it for a item, but we can just write with and click on copy and writelPaste type paste this type. Oh, it's not copying, so let's click here and copy. Then click here and paste this type. Nothing happened. Let's go to style. Yeah, I happened, but it didn't seem. Let's go here and do it like this. Okay, click on publish and let's check it in the design. I will look like this and which means we successfully created the designer about section. Now we have to design the block section. 133. Design blog page - Part 01: Hello, everyone. Now it's time to design this blog page on Elementor. So let's go to Elementor dashboard, and now I'm on the Earl pages section. And if we go to post and Earl post, we have a post. So let's start to design. And again, I go to Earl pages, and from here, we have the blog page. So for now, let's delete this blog page and start from scratch, click on trash and some reason the website is loading really slow. Maybe it's because of my Internet connection. Anyway, now I go to trash and click on Delete permanently. Now what I do is click on this ad new page. Then I will add title like JB Family Clinic blob. Then I click on publish, just publish this page and then I will again move this part and go to the dashboard and on dashboard on set ins and in settings, go to Red. Readings here we have a place to set up our homepage displays. Here, I set it as a static page and the homepage is JB Family Clinic, which is the homepage and for the post page, I will select this JB family cleaning blow. Now in here, we can set dog pages show at most, but I think we can adjust those stuff after we design the page, but let's set up it from here anyway. And here we need to show six pages per or six post for page. So make it six and click on Save changes. Then we are using element of Pro, so we have pro features to set up this blog page. So to access those, go to templates and click on Save templates. What are we going to do is we are going to create new template for our pages. I Wordpress Earl data, blog post, comment, and other stuff, save as archives. So here I will see that archive and here I will add name as Archiv template. Let's make it like this. Template is wrong. All right, now click on Create template. For this library, I will just remove it or if I go to my templates, here we can find our hero section for sub pages. Let's insert it and click on App Okay, here we have the hero section that we already created, and for here, I click on this headline and on title, I will just select the archiv title like this and the small description, I will select the giv description, and we may have to add those information for now. Let's publish this one and click on Atcdition and include Earl Argives. If we said this Earl gives, we can see or we can all the information related to authors, date, search results, post archive and categories and other stuff will load on this template. So now I click on Save and Close and it published, and now we already set up the blog post page. So let's go to pages and view the blog post page, and we will see the current preview when we view the post page. So currently, it doesn't show anything. So let's fix that. 134. Design blog page - Part 02: I just try different stuff to fix the issue, but still no luck with that. So let's try different method. For now, let's create the archipage and when we have the archipage it will be supposed to load author or category or other stuff if someone request it. Here we add the Archiv title, and now we have to add this arch post part. I click here, click Cplexbx and click on direction column, and here I will press the add element and just drag that chi post section, and here we have to add left and right dash 41 40 and left will be also 140, and the top should be like 60. Let's find out the top space from here. It's 12. Yeah, it's not 60, it's 1220. Okay, now let's adjust this design. And currently, I will keep the same setting for now, then go to E style and from here, let's see the column gap is 220 to 20 and the raw gap will be also 220 and alignment, let's make alignment left on image, the border radius, let's see the border radius, the border radius is mixed, but we have to check it, it's 20. Let's add bod radius as 20 actually we only need the top 20, not left, top and right as the 20 and spacing is okay, then let's go to content and on content, let's see the text color is default colors. Let's make it as text color, and typography will be subeding. Isn't it? Let's check the Figma design. Yeah, it should be sub pedinF some reason this Figma file change. I don't know what happened, but it should be subpding then here again, for the date, we have to change the primary color. Typograph will be paragraph, it's paragraph size and spacing. Actually, this date should go above, but let's keep it here for now and the spacing is to. This spacing will be well, not 12. Now as color will be text color typography will be paragraph and the spacing will be again too. I think it we don't have the freed more link, but it's okay and pagination, we have to adjust this page denation before we adjust the page nation, let's adjust this content parameter and for meta, we don't need comment, just remove the command and the date, then we have to check the exer length here. What is the length? Let's copy this text and go to wordcounter.net and just face the check and there's 150 characters and 22 words. Let's make this as 22, nothing let's make it as 150 here the meta should be dead no, no need separator and we don't need to show read more button for the page ination, let's make page limit as five, what is showing. The settings are good and actually we have to. Let's add apply custom mix up and let's see, then what we have to do is go to style and on advance we have to add border. Let's find out here we have the border. Think let's keep this like this. On pagination, we can change the color to this blue color, and let's see this pagination. And here we have int size as six, but spacing, let's check the spacing. Spacing will be 30 and here we don't have much customization options, so let's keep it like this and click on publish and this is better for the archive pages, but we have to create post custom post page to make our website better. Let's do it in the next lesson. 135. Design blog page - Part 03: Okay, now we have to try another method to design this block page. Let's start. First, I go to our Wordpress dashboard. Then I will go to set in and reading. In readings, I will unselect the post page and it will look like this, then I click on Save changes. Now I go to pages and Earl pages, and here we have the block page, so I click on Edit and click on Edit with element all right. Now what I can do is add the header on the M template, and here we have hero section, subpage, click on Insert, click on Apply. Okay. Now let's add those information. First copy the title, paste it here, copy this. You have to paste it here and let's add BR, BR here. Next BR will be here. Let's see. Let's see. Okay, now header part is done. Now what I'm going to do is click on at new container and add the direction column container. And here as margin and padding and add left and right paddings are as 140, like this. Then also we have to add top margin as one, two, now what we have to add is force, click on add element and search force. Here we have force element. I will just androp it like this. Okay, now our force has appeared, and now what we have to do is make the changes. If we check this design, it will look like this, so let's change skins and see the premiere, so I just change it to card and the card look will be best matched with our design. And what is full content? No, full content is not perking. Cards are the way to show it. Then what we have to show is title and the exerp. The excerpt size will be 100. I think it's 150 like this, yeah, it's 150 characters. Okay. Now we don't need to show the comments, we only need to show the date, and we don't need to show the read more and also no need badgers and no need Avada Now only issue is this time should be on the above, but unfortunately we can't do that. So inquiry, the source will be forced and we don't need to add any include by condition, and let's order it by date and DESC format. Then in pagination, make the page ination as numbers plus previous and next. If we check it in the design, it will look like this or we can add infinity scroll feature, but this will be good. For the previous and next, we have to use this design instead of this design. Now we have to add or edit the E style. Let's go to E style in E style. Let's see the column gap, it was 20, it was 20 and here in between size is 30. Let's make inteen size as 40. Column gap will be two, the row gap will be 40 man lay. And on the cart, the background color will be white color and border for the border. Actually, we don't need a border. The border radius, let's see the border radius gets two. Yep, the radius is at 20 as the border radius, and it will be like this and the horizontal pad the horizontal pademiaC vertical padding, let's see the vertical padding. 830. Let's make it like in will be okay, and how effect, let's not add any effect for the box shadow, let's add box shadow shells, but for some reason, we don't have a option to change the box shadow, so let's keep it as this devolve one and now let's go to Image, Image space. For now, we may be page in a zero and on content, the title color will be text color. The typography will be subheading. The space we see, let's see this space, it's space. What is this meta? I think meta is this date. Let's change the color to this blue color and we don't need a separator. The typography will be paragraph. Then, the except color will be this color typography, paragraph phase should be let's see the space, it's two. Except is too long, so let's content and an length to 20, 20 still bigger, 15, ten custom, nothing happen. Why it's not let's see, let's see on image space, okay, but on the image, we have a issue because it's not aligned the top. 136. Design blog page - Part 04: Okay, I found the issue. So in this image one style on card, we add vertical padding as 20. If we remove it, the image fixed perfectly. And for this text on content, we add length as 20. In this case, we have to add 22 because the exerps show in the word count. So if we add 24 and publish we add the 22 then I go to preview it will look like this. And now, if we just copy this content, it will show as 22 words. Okay, now that problem was fixed and we have to add space to this bottom. So let's try to do that and also the in between size of this headline and the image is too big, so let's try to fix that too. Image, the spacing, let's make it as zero and let's publish and see it in the real design. It's now look like this, and it seems we did everything that we can to create this block section, so now I can click on publish and we have to make changes to pagination. Let's go to pagination set in and see what we can do. First, I will set the text as typography and on normal, the color will be this color and on how the color will be primary color on active, the color will be primary color and the space in between space will be let's make it as 20 and let's see from here, in between size, the spacing will be 20 and the spacing will be 40 like this. Unfortunately, we did this design like this and we have to use custom CSS to do it, but I'm not going to do it in this class, in here, maybe in future, I will create a video lessons for the CSS and Wordpress and now I click on publish it and let's see it in the real design and it will look like this, and if we click on it, we will redirect to the single blog post page and we have to create this page. For now, let's deal with blog page, all right. If we click on the second, it will go to the second page and it will show the rest of the design. And also, we can add the infinity scroll, but I think adding infinite scroll will be better. So in pagination, here we have infinity scroll, which means let's add spinning spinning is okay. Then I will click C publish because this is much more modern than the pagination. Now if I is called, the post will be show up like this. I will repress this again and see the post loading and the post will be load like this and this is much better. I style in pagination, we can change it color to this blue color. The spinning color will be blue, this typography, no more pages, no more post message will be black and it will be on headline, not headline, subheadline sub ding. So the spacing will be 40. And now let's see the design. Here we go see this is much better than before. And now let's create the single blog post page. 137. Design blog page - Part 05: Hello, everyone. Now let's create this single blog post page. We don't have a figma design for the single blog post page. Basically, we need to show the blog post image, then title, then the actual blog post. Let's do that, which means in other case, if someone click or come to the single blog post, it will show in the better design. So to do that, I will go to dashboard on dashboard, I will go to save template or we can go to them Builder. Let's go to Team Builder. I think we didn't use the Team Builder part, but both of them are pretty same. So here is our current templates. Now here we have to add single post. Currently we don't have any, so now I click on this at New button. Then here we have recommended block post libraries. Not going to use this stuff because we are going to design this from scratch. So first, we need to add the header on my templates, we have hero section for our pages, click on Insert and click on Apply and here we need to show the block post title. Click here and click on dynamic tags in dynamic tags, here we have forced title. Just add it like that. Then for this one, I am not going to use the Safed line, so I will just try click and delete it. For this background image, we have to use the Post thumbnail. I will right click and click on Edit container, and one tile here, we have the image. So here, click on dynamic tag, and on post, we have featured image. Let's set the featured image and it will look like this. Set the image resolution as full image and position centers in the noc repeat and display will be auto. Auto is not good default. Cover. Let's make the displays as cover, which means it will show like this. Then on background overlay, let's add the Olay, just add text color like this and increase the opacit little bit like this and now we have the title and the background image. If we publish this and click on add condition, add a singular, but if we want to show the post, we can just add post, which means only this template will apply for the post of this website. Then I click on Save and Close. And now let's go to the blog page of our website. Then if we go inside one of this post, it will look like this, but still we have make this much more better. I will look like this and now again, go to our template and now we have to add the contents. Let's create a text box like this and on element here we have forced content. We have to add the forced content like this, then alignment will be left and text color will be text color and typography will paragraph. On advance, we don't have anything to do and click on the container, and on advance, we have to add margin top pass one to 20, and right will be 140, left will be 140, like this. For this one, 120 is a bit bigger. Let's make it like 60. Okay. Here we have a lot of items. Here we have a lot of items to add. Let's add forced info and we don't need the commando let's add force navigation to navigate other force so let's add table of content. But I think table of content will not work on this case, but let's add it anyway. Here, I don't have much idea, so I click on this at template, and on blocks, we can see other template design. So let's get this one, and in here, we can add this affiliated post part, and let's add it to here, let's satellite relate. Let's click on Insert and here it got inserted, and I want to see this related part section. So before we go further, let's edit those style first, we have here post info, and we don't need to show the author. We only need to show the date no comment, only date and here on style on icon, the icon color will be primary color and the icon size is okay. Let's make it like 16 and on text, that text color will be also discolor and typography will be paragraph. Let's make the in between sizes 12. If we want, we can add a divider, but we don't need any divider. And here, let's add o a pass 20 for this two big 15 for this whole section, and here we have table of content. Let's add table of content here and for the table of content, let's go to style. The background color will be accent color is not working. Let's add ash color like this. Border black border is not going to work, so let's add not any border. Border radius, let's make border radius as on header, the text color will be this color and the type gram will be subheading. For the text color, let's not add underline the marker color will be like this. Okay, now on box, let's make this icon color as blue. I think are good and in content. Let's keep it like this and now the post content is okay because only here we have to add the text color and the typography and all of them are perfect. Then for the previous and next post, let's go to style and the color will be this color, the typography will be, let's make it in the title, what is this title? We don't need a title. So here, let's remove the force title, show the arrow for arrow, let's make the color this blue color and on label, the typograph will be paragraph like this. Okay. I think this is better. What if we change the color to blue? Yeah, changing color to blue will be best. Okay. Now here we have the post content. And if we want, we can add relatd post part. So to do that on ad element, let's go to headline and paste the headline like related hosts. And one style, the typography will be subheading, text color will be text and then click plus icon to add host. Here we have post just at the post, and we only need to for the two hosts like this and let's copy this post style from the post page. Here we have the first page, right click copy, then right click and paste this type like this. And here we again need two of them, and post page will be two and for here, there's at HR. Let's add a divider here to divide those two section, and I think we don't need to do anything on style. Let's change this divider color to ash color like this. Okay. Now, let's click on Publish and see the real preview. Now let's go to this post and what happened? Let's go to FostPage and let's see if fs like this something wrong. Okay, now it will look like this, and this is not good looking. We have to change the affiliated forced section. So to do that, go here, click on Edit, and here on the content, the title color should be black, and it should be on subdin and we don't need to show except for this one. And also no need to show the meta, only need to show the text with read more button and order Bile, let's make order by random like this, then ontile let's make row gap. Let's make column gap 20 is okay. And the box, the image facing 20 is okay, or radius will be 20, but on bottom, it should be zero and the left also should be zero. And on content, read moo will be discolor. The typography will be button. It's okay. Let's make it facing a 20. Now let's go to layout, automatically align buttons. Now in this separator we have to change this skin to card. That was the missing part. Again, we have to edit all the details and force two and no need to show the exert and title should be saw, read more should be saw, no need to show the bench nometao and on style content and read more button color with this color. And what is this big space? Okay, now click on publish, and this is what we can change. And let's see it in the real design, it will look like this, and here we have another issue. We need to clearly show only the force text to do that. We can just duplicate this divider and add it like this. Then again, duplicate it and put it here. Then it will be separate from the rest of design and it will look like this. This is much better, and let's see it in the real design. So let's open five of them like this, and it will look like this. Actually, this text will be much better than this because in previous we just add dummy text, but we need to add better text for see the best result and yeah, I see a issue. We see the background image is repeated. Let's fix it edit container, and the background image should be no repeat. Actually, it's not no repeat, but for some reason, it repeated. Okay, here we go. For this related pose, this is bit bigger. So what we can do is add right and left padding 990, so it will be smaller, maybe one by one. Yep. 90 by 90 will be perfect. And here we have a issue. The line height is so small, so let's at line height, not too big 1.1 0.21 0.4. Yeah, 1.4 will be better. Maybe 1.5 will be much better. Yeah. Okay. Now here, let's edit this post and right now here we have the blog post page and it's work fine. But when we see the URL, we will see the date. To fix this, we can go to WordPress dashboard and set in on the reading. No, not in the reading in the perm olinks, we can set this permalink structure as day and name to post name and click changes. Now let's go post, and now if we check one of these posts like this, the URL will be shown like this and it will look much better. 138. Design contact form - Part 01: Hello, everyone. Now we have to design this contact form or contact page. So let's go toward Press dashboard on pages, click on at New Page, and this page name will be contact and click on Edit Tielemento to open the Elementor Editor. Alright as the first step, I click on this folder icon on my template, I will see this hero section for subpage template just insert it. All right. And let's copy the text. We this, then take this text. Then add B like these two at the breaking points like this. Okay. Now what we have to do is add in this form and this reach out clinic coloration and open our icons. And let's do that. To do it I click on pas icon and Plex Box, then I will select this type of structure, and here K C also here, just make the margin and padding as zero. And if we check this design, we have bigger size here and small size there. So let's go to inside this container. Now here, let's change this two columns like this and okay now as the first step, we have to add the margin top one and the wtf trabm will be 140 by 140. And here we have to add this text per will copy the text and click here on headline at the headline as this text on style typography will be headline and the text color will be this text color. Okay, alignment will be left, and then we have to create the form. So click here search form. So element of four has this form which let's add the form and click here and let's see the in between size. I think it's 220. It's 220. So here, let's at O as 20. Okay. Now, let's add form name as contact. Form. And now we have to add those details. First, we need to add full name, copy the full name part and here let's add placeholders actually the placeholder should be as full name required. So let's make placeholder as full name required and check the required box and column will be 100 and type will bet and for the label, we don't need the label. And then we have to add Emas we have emages not label, placeholder, the label will be nine and then what we have to do is we have to add this phone number, remove this and click here, then change this type to tail tail. Yeah, here we have the tail and place so there will be. Actually, we should add label, and here we can height the labels like this. So we must add labels like this. Okay, labels. Copy labeled as email and here phone. Now the next field is subject, it's optional. Added as subjet and here at this day label text as subjet and this type will be text and the required is no, and here the phone number is required. Email is required. Okay. Now we can change the input size here, but we can change it from the style tag. So for now, let's add those details and now we have messages text area. So the type will be text area. Okay, the row will be five. Let's see, let's see. Four is better than five like this and it does require then let's go to the next one here we have preferred contact method and it should be list. So let's placeholder and it's optional. The label will be preferred contact method, and here we have to change this to CL and here we have to add the options. So let's add options like email, it say enter each option in a separate line to different between label and value. Separate them with the pipeline. For example, first name if Okay, we got it and then here we have a the pipeline and add Emil. And here is sky is sky thin at like to It's a Zoom. No, Zoom is not going to work here. So let's keep those three options. And if we want, we can add multileon option, but here we don't need multileation. We only need to late one no if we check the design, we don't see the placeholder. So to add the placeholder, I will present and add preferred contact method like this. It's a sil preferred contact method. And it will work as play solder and it's not required field, and let's move on to the next item. The next item is Clecoption. How did you hear about us? Cleco there is a lot of field type play around with those field type and learn them all. And I will copy this text here like this. Then label will be, how did you hear about us? And here, let's at amok, let's keep only those items. And I think here we don't need to add the ppe line because we only need to add the five line if we use separate text or try to represent different texts from this text. As an example in email, if we try to get one, which means if someone's email and if we want to get one when submit the form, we can add this pipeline like this. Or in here, in this case, sky will be two and the phone will be three. Then if someone send the form, we will get this text as one, two, three. Okay, we don't need that, so let's remove it. And now what we have to add. Here we have upload the human field. So let's add new item, and here, let's say the type as file upload and the label will be upload document. And here we can define the max file size. Let's make the email with attachment option and it's not required. We can add allowed file types, so here we have allowed file type as PDF, JPG, PNG, JPG PNG. PDF, like this. Okay, now only visitor can upload the JPG PNG or PDF type document, and Maxfle size, let's make it like three. The Max file size should be less than megabyte three. Okay. Now I think our form is completed, but when we check here, it doesn't have a name. So 139. Add css code to show label in file field: Okay, now we have this issue. We hide labels. So when we hide labels, we don't see this upload document label, so it will just choose file button. So to fix it, we have to add the CSS code. So I will just publish this and here will be its look, but we need upload file text here. So first, I will copy the text from and place the text like this, then publish this and now I go to dashboard. On dashboard, I have to add this code, so I will go to appearance and customize. You can find this code on the resources section. Then I go to additional CSS and add the CSS code like this and click on Publish. Now let's come here and review changes. Now we can see the label. Find this code on the resources section. We have to add the CSS code. Before we do that, I feel this size is bit bigger, so let's come here and make this width as 60 and this second container width will be 40. Then we have 100 size of the width. Okay, now what we have to do is addt 140. Design contact page - Part 02: Also we need to change this button title to submit, so let's do that here. Let's find out the button, and let's change send to submit like this. Okay. Now let's go to Etyle in Etyle. Let's make column Gap zero and two row gaps. Let's see the row gaps, row gaps are two. Micro gaps 20, label spacing, let's make label spacing, zero for now, and the color will be text color, and the text will be typography. We don't have DML field, so we don't need to worry about that. Then here we have the field. So field test color will be black and typography will be paragraph. So here, we click on the field, the fill color is none, which means its background color is white, and on border, we have stroke color as this ash color, and width will be one. So let's add the watercolor as this and width this one. Actually, the water color should be this color. Okay, then we have to find the border radius. Border radius is six, and let's find the text color text color This color actually is placeholder color. And let's go to the button. So on the button, the button background color will be this color, and the button is not full with button, so the typography will be button and alignment styles position will be left, text color test test color white. Yeah, text color is white, and let's find out the borders. The border radius is 15 and about the inbetween size 2020 by 30, 30. So bod radius is 15, text pattern will be top 20, right, 30, bottom. 20 left 30, like this. Okay. Water type will be none. Oh, let's go to homepage and check the on hover stage. We didn't still add the on hover details, but let's make on our background same the text color will be changed to black. So, not good. Let's make it like this much better. Maybe let's keep it like default. We don't need to do any. We should add this type of animation like this. B on content, I think the input side should be medium, and now it will be much better like this. Now publish this and let's see the design on I'll leave, so it will look like this. Okay. The form is completed, and now we have to create this section. And adding action to the form will be another must know step. So let's do it after completing the fully website design. 141. Design contact page - Part 03: Now we have to design this section. It's pretty simple because we already designed it. If we go to the home page of our website and scroll down here, we have that similar section. Let's go to edit with Elementor to edit that section and edit the page and copy the section. Scroll down. All right. Let's copy one by one, right copy, come here. No here, here, paste it like this and here, copy it's pretty simple. No. I think we don't need this one. We can do the job with those two items. So first, I will copy I will select the main container and send the justify content to center. And also on the main container, I will go to layout and on layout, the column will be 220, so we will have this space and on the subcontainer, also the row ice will be 20 like this. I think it's 20 isn't it? It's 30. The rose is 30. Okay. Now first, the S is the same, and then we have clinic location, and here we don't need this one, so delete it, and then we have open hours to at the open hours, I just duplicate this one, then download this icon like this, then come here and click like this, then click on icon and add the icon like this, then here select and it will be added like this, then what we have to add this text. Copy the openn paste like this, then here, copy the text, click here and pace the text like this. Now we have those three sections, and now what we have to add this map. To do that, I will click plus icon. Textbox direction column, and here the inviting size will be top will be one, two, and, and the right will be 140 by 140. Now I will search here map. Here we have Google Map, add it. And now let's copy this. Let's copy this map location and just paste it like this and it will show like this. So if we want, we can zoom it a bit further and we can adjust the height. So let's see the height here. Height is 500, so let's make not 400, 500 as the height, and it's pretty good. Alright. Nice. Now I can publish this, and here we have our contact page. This will look better on this type of devices. 142. Fix header: Hello, everyone. Now we just design the Earl pages, but we have a lot of work. We still didn't make those pages responsive. However, let's go step by step again. First, in homepage, we have a lot of work to do. So let's start from homepage and let's make the website functional. The first step, if I check the link on the home page, the home link is working about block our provider so contact any of those links are not working. So if I click on this call icon, it not working two and this call icon is not aligned correctly, so let's fix those stuff first to do that we have to edit the main header. So I click on main header to edit it in Elemental and here we go. So first of all, we have to change this menu and to change the menu, we can click on this, go to the menu screen to manage it. And here is the current menu, but those links are custom links, so we have to change them. So in Admeno items, we have pages. So if I click O view, we can see the pages that we have. So we have to replace this about page, blog page, contact page, and our rider will be section. So for now, let's add those items to the website, and here I will change this navigation label to about then put it right here, then remove this custom link and then we have contact. I will remove this custom link and tag and only keep the contact, then we have the block page, so let's change is able to block and remove the custom link. Now those items should be worked, so now I click on Savino. Then what we have to do is when someone click on this providers link, that person should redirect to the homepage. Me check it redirect to the homepage, our provider section to this section. Let's make that functionality to do that, I will click on Edit with element right, then scroll down to our dedicated provider and click here, then go to Advance. In Advance, I will add CSS ID. I will just here add our provide Ders and copy it, then publish the changes and now go to Menu and on Menu at hashtag our providers like this. So now I click on Save Menu and then let's see the functionality. So as the first step, if we click on A, it will really react to the A page like this and let's go to the home page again. And if I click on our providers, it will relate to the providers section. What pages did this? We just added the ID or we just assign CSS ID to this section, and on Menu, we just add it like hash tag our providers. So when we click on our providers, you can see here we have a OR provider hashtag OR provider, tag like this. Let's see here and let's check again. So let's go to homepage and let's check it again, see When I do it, our provider tag is appeared and this section redirect to the providers page or the page redirect to the OR providers section, and if I click on Con tag, it will redirect to the Contact page. Somehow from here, if I click on our providers, nothing will happen because this URL is not correct. Currently, if I click on Our Provider, it added after this Contact page URL, but this OR provider ID is located in homepage. So if we want to redirect, we have point this URL to home page like this. Now if I try to repress the page or try to go to the page, it will redirect to our dedicated providers section. So to fix it, what I can do is just copy the content and go to Menu and here instead of just adding the URL parameter, I can add the website URL, then Ashtag and the parameter. Then I will click on Save Menu and now let's see action. So first, just go to homepage and now I am at homepage. Now if I click on our provider, it will rerect to the Our provider, and if I click on Contag and then click on our provider, it will again re drect to the Our provider section. See, now it's perfectly working. So now our menu is working. And so this footer menu is working, but we will need to change the footer menu. But for now, this is perfect. And if we check on this call us 247, I can if someone click on this icon should read or we can add functionality to open dialem of the mobile or the PC and currently it's not working. If we check it clearly, we can clearly see there is a issue in the alignment. So let's fix those issues. So now I am again on the main head first let's fix this alignment issue to do that, I click on the image box element, then go to Etyle in Etyle in content. If we check on the tie for graphy, we add line height dash Otto, but I will make it pixel and let's add it like one. Now it go upper and then what I will do is click here change this auto to one like this. Now we just fix, and now what I can do is contain spacing. Let's add it to like this. Now it's pretty good. Maybe nine will be the base. Yeah, nine will be based. So now publish it, and as the next step, we have at call Link. So go to Google and search Call link tag in HTML. And here we have the HTML tag, so we only need to get this tell part, copy that tell part and come here. Then on content, here we have a place to add the link. So here I just add tell and now what I have to do is add this number. So let's add this number like this. This is a fake number, but add it with the country code. Publish it. And now let's go to the website home page and Okay here we have a pri problem. But when we click on this call icon, it will open the pop up that say, Open kip which means if we do this on mobile, it will open the dial pad. Okay. Now here we have a issue. The issue is which we remove the line height here on content, let's make this description typography line height to 30 and on title, let's make it line height is the line ight. Zero, publish it and rest in the design. Okay, I worked perfectly like this. Okay. All right. Now our menu is working perfectly, and now we have to go to the Hero section. 143. Design request appointment - Part 01: Hello, everyone. Now we have to design this request your appointment page. So let's do that. I go to the WordPress dashboard or we can hover over here and click on page, and now I will copy this. Actually, let's copy this title and click on edit with elemento. All right, as we did before, click here, click on my templates and here we have hero section Wasa click on it, click on apply. All right. Now let's add the header and tell first copy the headline, past the headline like this, then we may have to add BR here. But without R is also looks good, and let's copy this part first it, and here, we have to add BR or break line here. Like this. Okay. Now we need to add this form. Actually, in last Figma video, I forgot to update this section, so I will update it and we'll be back. 144. Design request appointment - Part 02: Here on Figma design, we have the contact form fields. So on GPT, we can see the appointment request form field. So let's add those Sp first, we need to have a full name, and currently here we have a full name, then email address. And here we have the email address, then phone number. Phone number, then we should have a selector service drop down. So let's copy it and here, let's just use this slated box as selector request selector service like this and we have to not that we have to click this one and put it like this. Okay. Then we need to have a preferred datetime time, so let's copy it and let's ad it like this. Then we should have message or additional notes, so let's copy this. Then let's ad like this. Actually, it's optional. So let's add that details like this, and then we have consent. Actually, we don't need consent, and the submit button should be request appointment and here I will remove those two options. So this one then change submit button to request appointment. Okay. Now we can use this form to design our Wordpress element or form. 145. Design request appointment - Part 03: Right. Now here we have the form. Let's go here. Actually, we can copy those content from the Contact page. I will open this website on New Window and go to Contact, and on Contact, I will click on Edit with Elementor and here we have this contact form. Actually, I will just copy the whole section rightly copy C right past. Now we don't need those items. Instead, we need this one, so I will just put it like this. Actually it should be inside here. No, not there inside this container like this. Now we don't need those three, so I will just select them and delete them like this. Now here we have the form first, let's edit the form. Here, first we need full name. I think already we have the full name here, and here we have to change this to request appointment appointment spelling song, and now it's request appointment form and here we should have full name. I will close this one and then email address, full name, here we have email address and then phone number, I think we already have the phone number, then select a service. Let's copy the selector service part and we don't need this subject, so I will change the subject label to selector service and placed will be selector service and the type will be Select. Again, I will add the label. Now, as we did before, let's add information first just add the empty option and now we have to add our Earl services. We can find our services from the content page, let's go to the content Okay, here we have the content or here we have the services. So here we have eight services. Let's copy one by one and page them. I will make this smaller like this. Now you can easily see what time copy. So here first, we have pediatric care, and just add all of them. Now we have the services. Let's go to the next field and the next field is preferred date and time, copy it and here I will remove this unnecessary stuff. Add the new label will be prepared date and time. Let's move the request. At place solder, actually, we have to make this date time field. Here we have date field should be required. However, we don't have a date time field. Let's do it like this first. We a preferred date, the preferred date is required field, and here as the placeholder, let's make only preferred date like this, then let's duplicate this date field and change it label to time, and the time is not required, like this time is optional. Let's remove this label right and let's add the placeholder. The placeholder will be this optional. Optional words are. Time is optional. Actually, we have to make this time field, not like this, so we can select the time here and date here like this. Okay, now we have date and time field and then we need to have message and additional no copy it and let's edit the current text area, it's not a required field and this time field is not a required field to Okay, good. So now we have to change the button label. So let's change it copy request appointment and press the button label like this, and it's pretty good. So now I click on publish. And here we have to change the headline and at the text. So let's do here, copy the headline, pass the headline, then Dubligated and copy the paragraph like this and change this typography to paragraph. Okay. And let's see the inbten size in between size is 30, make it 20. Think it should be 2020. Then we have to add this image. It's pretty simple. We can just copy image content from here, or let's create new one. Click on Add element and search image. And here, place the image like this. Click on here, and we can just download this image. Click on export and let's go to Tiny PNG in, reduce the file size like this and download it. Then let's add the image like this and in the title for all text, I will add request appointment and click Conceal Okay. Now I will click here and make this device center like this. Okay, I good, and now we have the request appointment page two. Let's check it in the rear view. Okay, I will look like this, and I think adding those two items here will be much better. So let's do that. Let's try to add this one here, and this one also here. Let's check it. This is much better than before. 146. Link homepage: Now let's link our WordPress website. I will go to the home page and we are ready link and fixed issues on the menu, and now we have to go to the hero section and the rest. I will click on Edit with element of Okay, now we have this request your appointment button, so I click here to edit and go to Etyle in Etyle on hover, let's add hover animation like Grow. So it will grow like this when visitor hover over the button, and this is a simple design, so this is enough. But if you want to change the text color like this, you can do that, but we are not going to do it in this website. Okay, now I will go to content, and on content, we have to link this button. So to do that, we can just copy the page URL and paste here, so to do that, I will go to dashboard of the website, open the dashboard here. Then I will go to pages in pages, copy request appointment, also just copy link address of this u and here, let's just add it in this link option, I will add it as open in New Window. Now visitor click on this button, it will open New Window, and it will request a appointment today page. Okay. Now here we need to have we need to add the learn more UR here is the A summary. So this should go to the A page. There's on the page, let's copy a page link like this. Then come here, page URL like this, and it will open in New Window and here on style, we have to add the H animation, so the animation will grow and it will look like that. I MTO providers, we are ready added here our providers URL, so when someone click on here, this should be redred to our dedicated provider section. Easily what we can do is go to the website and here I just copy this URL and then come and paste it like this. Okay. Now, also one style, we can add our animation like grow like this. Okay. Now the next section and here we have to add pop up. So when someone clicks on view profile, we need to have to add a pop up and let's do it in the next lesson. And before we do that, let's add other links. So here we have to add the call URL, so I will copy this phone number and click on click on the image, and if someone click on the image, let's at this custom URL, and if someone click on the image, he will be open dial pad of the device. So now we have to add this URL. So this will be contact page on pages copying us and here add it, open it in new window and schedule a visit, go to the request appointment today page billing and paste the link like this and open it in new window. And for those links, if we want, we can add the grow animation. It may affect the design, but it's added and it may not affect hugely to the design. So Now, what we have to do is on homepage, Earl Good. Now we think Earl, so if we click on those links, we can see it on the action. So I will publish this. Let me publish it, and then let's check. So if we click on this Hero button, it will go to request appointment today. And if we click this, it should redirect to our provider section and we should have action to this view profile. And here, if we click this one, it read it to the contact page and everything work well. So now let's add pop up to this view profile link, and we'll see you in the next lesson. 147. Create popup: To advance solo to expert plans, we can have pop up Builder, but on essential, we don't get the Pop Builder feature. So in our plan, we got the Pop builder feature, and now we are going to add this Popup builder. When someone click on this view profile, he or she will get pop up and in that pop up, we will have more details about provider. So let's do that. First I go to WordPress dashboard and on WordPress dashboard in templates, you will see pop ups. So click on pop ups. And currently we don't have any pop ups, so I just click on Add new pop up, and here the type is pop up and I will add the name. So this name will be our provider. Let's add it like pop up. Our provider pop up and click on Create tem play. Okay, here we got some Pop art designs, but let's design one from scratch. I will remove this one. And here we have to edit it, so I click on Add Plex Box and click on direction column. And here, if I go to the layout advance in layout and paddings, I will remove all of those details, and for padding, let's add it like top 20, right, 20, and the bottom 20 left 20, let's add padding as 20, then we have to add the details. So let's do that. In this case, first we need the image. So let's click here and search image and add the image like this, then for now, let's add dumb image. So let's add this image. So if you remember, we create this our providers section using advance custom field as a different pose type. If we go to dashboard and on dashboard, we will have this our providers section as dedicated pose type. So before we add those information, let's just create the design. So first, we have this image and I will add it like this, then we need to have headline. So in this case, the headline will be so I will open the Figma design. Okay, we can copy those information from here. So here we will have this title as the first headline, then go to style in style, change to paragraph like this, and on the container, let's add pro as. I think will work. And for now, let's just add basic design. Then again, I create different headline. And if you remember, I always add HTML tag at two, but that's not a good practice. In SEO part, I will explain more, but for now, let's add default details. Then here, let's add the name edit like this, then the name will be subheading and the text color will be this black color. Then here we have small description, but we need to add loan description. So if we go to our providers and click on Edit, let's decrease this. So here we have n description. For now, I will just copy this text because we only need the text. So now I will dublgate this section and add the description like this, and here we will change it to paragraph. Okay, now it's look good, and then I will add button like request appointment. So let's button, actually, we can copy button from here because we don't need to create it from scratch no. So let's edit the home page and just copy this button, copy the button, come here, press the button like this, then it will look like this. And let's make the button as full with button. So make the position as stretched like this. Then change this text to request request a request and appointment. Or let's make request appointment, and it's looking good. And now what I do is go to container and now let's adjust the design, so I will make this as still too low, maybe six will not 60, the six will work. And if we want, we can add more designs, but for now, I will keep it like this and here, click on the image and let's make alignment center and the border radius, let's make it as 220. And let's change this alignment to center like this. And here, let's do it to takes two, and now it will much better. Again, the space the row will be three will be good. And okay, if we want, we can add the social media ons, but I don't think that will good. But if we want, we can add the social media ons, but currently we don't have any, so if you want, we can add the short description too, but I think we don't need short description here. Now, this will be the design look and let's adjust the pop up details. To edit the pop up size and other stuff, just click on this set in icon. I will go to the pop up setting, and here we can change the wide as we like, but I will give the width as 600 maybe 680, this will look perfect and we can add pop up location like this, but horizontal and vertical center will be the best place and let's make height will be to content, which means the height will adjust according to the content and if we want, we can make fit to screen, so it will be bigger pop up. But in our case, I will make it as fit to content and here if we want, we can hide the overlay, but I think cabin overlay will be good on here, we have a close button, and let's show the close button and we don't need any entrance animation or exit animation. If you like, you can add on general setting, there is no much and on preview we can check the preview, but for now, we just add default data, but on next lesson, we will add dynamic tag to all of those items. We have a issue on this button. We will go to this button. We will see this type of issue. Let's make it disappear. To make it disappear, we can just make this center and the content will be center and the button will be smaller. Now again, go to pop up setting and one style, we do more stuff. So for now, let's make border type pass nun and border radius will be two and no need box shadow and overlay. I like this overlay color, but if we want, we can just change the overlay color. But I think the default color is better, and on close button, let's make close button bit bigger. So on size, let's make it size like 22, and the color will be blue color. And onH no need to do anything. And if we want, we can change the position, but I think this position is much better. Okay. Now on Advance, we can add timing, but I will skip those timing. And here we have a lot of options, but I will keep them as default and here we can add margin and padding and also we can add custom code. Okay. Now we have this pop up, so I will just publish it and when published here we have three tabs. Let's go one by one. First one is condition. I say, apply current templates to those pages. From here, we can add those conditions. So I just click on add condition, and here we can include or exclude. As an example, if you don't want to show the pop up on specific page, let's get specific pages for page. We can click on Exclude and change this entire site to singular and here we can select the front page. Like that. Also, if we want to show this pop up only homepage, we can set Include in front page. In this case, we need to set up this pop up to front page. Include singular and front page. If we add this as entire site, this pop up will open in any pages. In this case, it will not work because the pop up button will the view profile button only located in the homepage. So now we have these triggers. I say, what action the user need to do for the pop up to open. So in here, we have different options. So if we want to show the pop up when visit a load, we can just turn on this on page load and here we can add seconds. So if I want to show this pop up after 5 seconds that user come to our website, I can add it like this, but I will make it know, and here we have another option. So if this on ISCall, we can add the pop up when Iscall pour down on the website. Then we have on scroll to element. So if we open this, we can just define a section using CSS class. And when visitor scroll to that section, the pop up will appear. So I will make it known and on click mean if visitor click on the website, we can open the pop up. So if we make this as three, so when user click three times like one, two, three, this pop up will appear on the third time. So here we have a lot more options. Here we have Ad Block detection. So users use ad blockers to block ads on our website, especially you run WordPress blog site that has ad sins or other ads. You can identify if user use Ad Blocker, and if you don't want them to use Ad Blocker, you can just turn this on. Okay, now we have advance rule tab. Here, it a requirements that have to be made for the pop up to open. This case, show after X page weaves. If we own this, we can add the page count that check the user. As an example, if I add this five and user visit five pages, the pop up will appear. There are a lot more triggers, but I am not going to go through all of them, play around with this. There is super cool items that we can use to trigger pop ups and get the attention of the visitor. Okay, now I will go to home page of our website, and let's assign this to a button. So currently, we don't have any button here. So to do that, I will just create a button to test this, so I will add the button here, and I will change button text to pop me don't know like that on style, let's change primary color to this and let's add Padin 22 for better you and here we have to use this link to make this pop up. On link, click on dynamic tags, and on dynamic tags, you will see under action pop up. Now, then you can click here and the action is open pop up. Here we can search our pop up name, our provider pop up. Click on it, and now I will publish this, which means when I click on this button, we should have that pop up. Let's try scroll down, scroll down like this. Then click on it. When I click on it, the pop up just appeared and I can close the pop and when I click on request appointment, actually we didn't set up this request appointment button, so let's set up. Here, this should be redirect to request appointment page, so I will just get the title like request appointment. Here is the request appointment today page title, paste it and let's open it new window and click on publish. Okay, now let's try this again. And here we go. Then here the pop up appeared, and if you click on request appointment, it will redirect to the request appointment today page, and we can close the pop up Okay, the pop up is working well and I will remove this pop me. And now we have to assign the button action to this view profile. Let's set up with pop up and see the action. For now, I will publish this and I will see you in the next lesson. 148. Add dynamic pop ups with loop carousel: Here we got a problem. I just set the advanced custom field for this pop up and then go to pop up setting and on preview, set our providers and click on Apply and Preview. It worked fine. But then what I did is, I just go to carousel and just set up that pop up on this view profile and the result is when we click on the link, we only show this type of pop up. The content is not load into the pop up, and this is a issue with element and they still didn't tackle this issue. But when I check solution for this issue, I found a video from webqudn YouTube channel, and he successfully tackle this issue. So let's apply this to our dedicated providers section. So to fix this issue, we have to add new URL type field to our providers, and then we have to add Popa link there. So let's do that. First, I will go to Advanced custom field, and in field group, we will have our providers. I just click on Edit and here we have the fields, and now we need a new field, so I click on at field, and this field type will be Link. Then I will add field label as pop up ink like this. Then I will click on Save changes and let's move on to the next part. So now I will go back here now here we have only one pop up, but to make this work, we need to create individual pop ups for all our providers. In this case, we have to create five of them. I will rename those pop up as provider names. First, I will copy this provider name and then click on Edit details, and here I will click on Edit and from here, I will change this to the provider name and just click on update and now I click on Edit with element here, what we can do is remove the advanced custom field details and as the first step, we have to add those information. Currently, here is the headshot, choose that headshot image from our media library. Here is it, click Consilate then we have this headline, click here and let's remove the dynamic. And add the roll like this. Let's add roll, and then the next one, I think it's name, remove this one. So let's add the doctor's name or the provider's name like this, and then the next one in next one, we have the loan description. So here we have loan description, just copy and paste it like this. Okay. Now we have first pop up, now I click on publish. Okay, now our first pop up is completed, so I will go back and then go to the pop ups window. And from here, I will duplicate this. To duplicate it, I will just click on Export template, and here, click on Implod template and just put the Jason file like that, then click on Import and click on Continue. Then I click on Enable and import. Okay, now I go to pops and on pop ups is just imported, and here is the original one. Here is the imported one. So let's click on Edit with element. Here, let's change those details. So in our provider, let's get this second one and copy the name. Here is the name. Change the name. Now it's easy the role pace the role like this. Then we have loan description, copy the loan description. Pase the loan description here. Then check the headshot and let's go here. Change the head shot to doctor Carlos. I think it's doctor Carlos. Yeah, select it like this. Okay. Now I will click on publish and on conditions, let's add singular and here front page. Click on Save and Close. Okay, now it's published. And now here we have two pop ups. Let's see, yeah. Here we have two pop ups. Actually, we have to change the title. I forget to change the title. Let's click on Edit and paste it like this. Then click on Update. Okay, now we have two separate pop up. Now what we have to do is add those Pow up to button. Let's go to the home page. Now click on Edit with 112. Now what we have to do is add a button. I will just make a button like this and there's some design to the button, click here. Let's make it click click here and on link, we have to set up this to as pop up, select the pop up and then ear pop up, we have to search doctor name. So I think we have the doctor Lisa. So let's type DR do here we have doctor Lisa's pop up. So now I will change this text to DR Lisa. And again, I will duplicate this button let's create a container and add those items to container without just messing with our website. I will create new container like this, and then let's add button, and here I will remove, I already No, here, I will remove this button, and okay here we add the pop up, it work so now what I have to do is duplicate this button for second time and we can easily do it if the container is direction as a plum gap plus two. We can clearly see it. So now we have to get the second for pally here and on earth change this to DR Garlos and then change the name to uh Okay, now I have to publish this publish it and click on preview. Now I will go down and now if I click here, the doctor Lisa's will appear, and if I click here, the doctor Carlos Propyle will appear like this. So now what we have to do is right click and click on copy Link address. Then if I put that link address on the URL, we will see this type of Link address Actually let's open text editor, online text editor like this, then and then I will put text. So in this text, we only get this text from this hash tag element. Copy that part and go to our providers here, our providers and providers. We just select it from doctor Lisa, so let's edit it and scroll down on pop up link. I will just past the URL like this. Okay. Now I click Csave and let's go back. This should be saved. It's saving. Okay, it's saved, and then I go and here let's go to doctor Carlos profile and from here, rightly copy link dress, space link on text editor and copy the link on this Pop link, just add the URA like this. Okay, now let's save this one too. So for now, let's add only to those two items. Okay, now what we have to do is go to the loop perusal of our dedicated providers and click on Edit Temp. Okay. Now on this view profile, I remove this link pop up part and on dynamic tag, I will add short code. Then we can add a short code here. So this short code should be the short code tag of our pop up link. So if we go to the so let's go to dashboard and here advanced custom field field group, and here we have our providers fields, click on and here we have the pop up link. So this is the name of this field, copy it and come back to our dedicated template and add brackets here ACF field, equal double code and the pop up link. So here what happened is when those details fill with our provider son, this URL will also fill with the pop up link, and when we click on it, the pop up that related to this provider will be appear. So let's try it, click on Publish and now let's go to our homepage and go to our providers section. Okay, when I click on it, nothing happens and we miss one part or we didn't do one part correctly. So let's go to our advance field group and here go to our provider fields and click on Edit. Then in this pop up link, I will change it to the return value is in ink array, but it should be in LinkRL I will set up with LinkRL and now click on Save changes. And now let's repress this page. Let's see. Let's see. I still nothing happen. Okay, let's try it again, but this time, nothing happens. So what we can do is we can preview the item that we added to this place. So to do that, I will go to our dedicated provider section. Then let's add a new headline like this and onti let's make it paragraph and let's change it color to this black color. Okay. Now here, what I'm going to do is just at the short code and the short code will be the short code that we added here. So let's copy that short code. This one, paste it like this. Okay. Now click on publish and see what will happen. Repress the page. No, not this one. Repress this one. And here we go, the ACF shortcde is disable on the side. Okay, now we got this issue, so we have to enable the ACF shortcde. I will just to enable the short code, we can just use this PHP code and I will show you how do that. I will go to WordPress dashboard like this and on plugins, let's click on Add New plugin. We are going to add a new plugin, so this plugin name will be WP code. This is the plugin is compatible with our version, click Install Now, Install in and click on Activate Nice. Here is the plugin, so I will click on Code is NB and currently, we don't have any enable nibbt so we will check on PHP and we only have PHP one, but it's disable. So let's click on Add New. Okay, here, we have a lot of free built Nibbt but we don't need those stub. So in this case, we are going to create our own Snibit click on at CustomNbt this. And here we have to select the type, so our type will be PH script and here I will just pase the code that we copy it from here and you can check the resources section to get this code, and here I will add a title. So this title will be enable ACF short code. Then here, make it any device and keep all the details as default and click on save Snibit and it's still inactive, just click on active. It's update, and then let's go to websites. So make sure to add this code correctly because if you add this code incorrectly, it will break the s. Okay, now let's see the homepage and see what happens. 149. Fix dynamic popups not showing issue: It seems the code provided by ACF document is not working for some reason, and we have new code, I will just add the code and just click on update and you will see this code in the resources section. Now let's see the website in action. Okay, click on our providers and here we have the details. If you click on the icon, it will appear like this because this URL added a short code. Now let's go to edit with Elementor and we don't need this URL part, so let's remove it. Click on Edit template, and here we don't need this text, so I will just select it from here and click on delete and click here. Then we just added the short code and it works. So now I click on publish, and then we have to create Popa for the rest of our providers. Here we got something wrong. So let's make it right. So doctor Carla said doctor Lisa. Just copy the doctor Lisa's address and go here and then paste it. No. Just paste it like this and then copy this part. And on dashboard, let's go to our providers, our providers, and on doctor Lisa's I accidentally add the doctor Carlos URL. I think that was the issue that happened, so let's remove this one and click Concilateink, at the Link, and click on at Link and save. Then let's go to the design and see it in the action. Here we go here and here, it's working now. Okay, now let's do it for the rest of the our provider profiles. So first, we have to create the pop ups and let's create pop ups. I will remove these unnecessary tabs because we don't need those now. And Okay, here, just click on Export template. Actually, we already exported the template. Anyway, click on Import Templates and add the template like this. Continue, and we have to do it again and again for two more times. One more time, please continue. And now let's go to pop ups on pop ups here, we have doctor Lisa, doctor Carlos, and then let's edit this one. This one will be Emma. And let's open three of them. And here we have the doctor Emma's details, and there is pop up. Okay, in here, I will copy the name and click on Edit with elemento. Actually, we have to update after we change the name, then click on Edit with elemento, and it's at doctor Emma's details. Loaded here, the name will be changed and the role and the loan description Okay, now the image. Let's check the image. Okay. Okay. Now click Consilate click on Publish and just save and close, then let's go back and see the next one. On pop up here we go, click on Edit, and then we have doctor Michel it's update. We can edit with element or change the name first and roll loan description. Cello, Michael. I think it's Michael, not Michel Anyway. Let's add the image. Okay, good. Click on Publish and click on Save and Close. Go back. And the last one is Sara Sara Sara. So add the names, update it, then click on Edit with elemento and then let's add those details first change name this one loan description then the image. If we have 20 providers, we have to update this for 20 times. This is not the best way to do that, but we have to do it because the advanced custom fields not working with loop carousel actually Loop Carsel dynamic tags, and advanced custom field, pop ups will not work. Together with the element or actually actually pop ups on loop prosel that has dynamic content will not work on automatically, we have to manually add them. Okay. Now we have providers pop ups for the providers. So let's go to the homepage. Now it's time to copy the URL to copy the URL, click on edit with Elementor and here just change doctor Lisa. Actually, we don't need title now on here, let's search, let's see our provider Emma. Then here right click, actually, we have to change the title to ma and add the title, then we have to add the second one, the Mich. Then again, duplicate this one for two times, I think, two times or one time. So we have this one last provider, and here there's a name like this. Okay, now I click on publish and it's time to get the URL. So the first, we have malik, copy link address, fasink address here, and copy it like this. Then the Ema edit the Emma's file. Here on pop up link at the URL like this, click on a URL and click on Save. Okay. Go back. And then we have doctor Mike here is Michaels URL, copy the Link address, and at ink like this, then click on Save. Then we have doctor Sara Oink address, go here and copy the URL, then go back and we go the last one at link save, then we don't need this section, I will just remove it and click on publish and let's visit the website. So our providers, let's see the pop up. We have a issue. So when we try to open the pop up, it not open, and I know the reason. So let's go to invert dashboard template under template, we have pop ups. So here, let's get this Sara Thompson pop up and let's open all of them. We have to open all of them, and as some setting, Okay, I save options, we can see the display condition. In display condition, we just make it empty, but we have to add a condition like this, so we have to include entire site, or we can add it for singular or singular, but I will make it entire site and click on Save Changes. Okay, then I will do it for rest of the pop ups like this. Okay, now what we have to do is check the website. So let's check it request the page, and now it should work. Yeah, now it's working. See? So this is a little issue that we have to resolve. Now looking good. 150. Make footer functional: Okay, the homepage is ready now, and on footer, we need to make some changes. The buttons or those social media icons are not working and also we have to add more quick links, and here we have to add action to those phone number and email. Let's do that. To do it, we have to edit the footer. So if I hover over this edit with element or here we have main header and main footer, so I will select main footer. All right. Then here we have to add link to this social media icon. I click on here. And here it load the social media icon list and currently we don't have any social media profile for JB family Clinic, so I will just add website URL like here, Facebook, URL and click on Link Option and make sure it open in new Window and here Twitter. I will just add HTTP,scall and slashlashx.com, and then here we have LinkedI I will just add HTTP call and slashlas linkedin.com.com. Actually, this should be dot, like this. And finally, we have Instagram. Instagram, here we go. Then, good. Now we just add link to social media and on Quickink we just added the main menu, but let's create different menu for food and add Puta link. So to do that, I will click on this menu screen, and it will open the menu on new window. And here I will click on create a new menu, and from here, I will add like Puta menu. Then click on Create Meno and don't set any display location or anything. Then in pages, I will click view EL and here we need front page about contact, block, request, appointment. Let's add all of those items and here we have to change the title. In navigation label, I will make first one is home, the second one is about, and the third one contact, and here this one will be block and the third one will be request appointment like this. Now I click on Samno and on here, I will publish these current changes and I will have to refresh this page to load this menu. Let's refresh the page. Okay. Let's click on the menu to edit it and here now we have full time menu option, select it and the fullt menu will appear like this and also we have to add term and condition and privacy policy URL to this weekly section and I will do it on future videos. Now on phone, as we did before, if someone click on this phone text, he or she should open telephone dial fad. To do that first I copy the number, and then I just add tell fallen and let's add the number like this. This is a fake number. You should add a real number in your case like this. Okay. Just add tell and call on the first text on the link. Okay, now we have to go to email, copy the email. Now on Google, I will just search email HDL code, and no email link. The email link, dM code will be mail too. So I just copy it and come here, paste it like this, then pase the email. Okay. Open it New Window, now I click on publish it and for address and open hours, it's good, and now we have to change the copyright section. On the copyright section, here on after, I will just at ancha tag go link AHF HREF equal and close the bracket, then in Hf I will at our website homepage URL like this, paste it, and then at the end, I will just close the A tag like Okay, now it just become URS, so when someone click on here, it will redirect to the homepage. Now click on publish. And if you want, we can add slash Design by our company website URL two, but in this case, I will just add it like this and nice, the footer is ready to view. So let's see here we go. So when we click on those link, it will redirect to the social media account and Nice. So let's move on to the next page. 151. Make the website responsive: Now here we have to fix the A page. I will click on edit with Elementor and now if we check the design here, we have a button, so I will click on Edit and it should go to request your appointment page. I will open the word press dash pages, L pages here, copy the URL on the request to affirm today page and just pace the URL and on linked option adt as open in New Window, and that's it, then what we have to do is make the website mobile responsive. So let's start from top. So on here, it's looking good on the tablet version. The reason is we already use the homepage section to design this. However, in here, we can add some space into this button. So let's select the button and on advance, I will remove this minus top. Yeah. When I remove the minus top, it looks good, maybe add minus ten. Okay, now it's much better, and here's good. And here I will click on this Grid and on Grid Let's make this as one column in mobile like this and not mobile, one column in the tablet view, and now it's look good, right. And on footer, it's all good, but we have some stuff to edit on the footer. So let's publish this and let's go to Mainfooter and in main footer, click on tablet and here, let's make this URL alignment center. A here, alignment it center. For some reason, this text is not aligned correctly, but I think it better to make the alignment start. And from here, let's change the typography. The button typography should be a bit smaller on the tablet version, so let's click here to go to Global phone and on Globalfon the button size let's add it like 18. Save changes. All right, click here to go back, close this window to save and go now it's much better than before. And here, what we have to do is remove the padding and margin and it now looks good. Maybe let's add right padding as 30 by left padding as 30. Okay. Now it's looking good on the tablet, and now let's again go to the about page we will have to go and here on about, then click on edit with Elementor. Then the tablet view looks better. Then let's go to mobile view. On mobile view, the header is fine. Go, go back. On mobile view, the header is look good, and here we have the header text and the background text. If we want, we can add different image, different background image because this image doesn't show it correctly, but I think I will keep it like this because it correctly visible and here looks here, so it's look good. On Footer, it's look good. So nothing to edit on the mobile view, so I will is actually published. So now let's go to the next section. So first, go to the home page, and then now we have Block page. On Block page, click on Edit with element then let's see if we need to make any changes so far so good. So now I will go to tablet in tablet, we need to make some changes. So click here and on this right and left padding, we should change it to like 30 by 30 is too big. Maybe let's make it 20 by 20. Yes 20 by 20 will looks good. I think it should be 30 by 30, 30 by 30. Yeah. When I make it 30 by 30, the alignment was correct, and the rest is Okay, so now I can check on it on mobile. So let's check the mobile view, and on mobile, it look great. We don't need anything to do. Actually, we can change the padding size. The padding will be 15 by 15. Yes the pattern is 15 by 15. Okay. Now click on publish, and then we have to edit the single block post. Let's go to one of this block like this and we have to edit the design of this block page. So to do that, here we have element of single post or we can just go to templates or the team builder inside the template and then here check the single post, and this is the post. So now click add it. All right. Now let's see the tablet preview on tablet. We have to change the two. The header is look fine. Now change this to 30 by 30, and the rest look okay. And also here, we have to make this 30 by 30 like this. Actually, we don't need to make it's 30 by 30 on the mobile on the tablet, and now it's look good. So now let's go to mobile. The mobile will look like this. And here we have to change this to 15 by 15. The container should be set the paddins 15, right, 15 left. Okay. Now, click on publish. Okay, now let's go to the next page. The next page is Avoid. Actually, our id is not a page. It's this section and on homepage, we are ready make it mobile responsive, and now we have to go to contact. On Contact, click on Edited element Okay, now let's go to the design here. We have all the details, and now what we can do is click this image and on the image, we can add custom URL and add this number. Copy the number here. This will be tail, code and like this. Allright. Plus. So as I told before, this is a page number. So don't think about that. Or when you add the number, add it with country code. In my case, it should be plus 94. And here, now I have to go to tablet portratV and let's change it. The header is look fine, and here we have to change this height will be 30 and left will be 30. Actually, it's not looking good. What we can do is we can make the take smaller here. So let's make it like 21. Yeah, 25, 25 will be fine. Now it's look okay. Then on the map, we will make this as 30 by 30. Okay. Now the portrait of the tablet is looking good. Now let's switch to the mobile. On mobile, here we can make this 15 by 15 and then here we can add some space in so let's add margin top pass 30. Yeah, we need space there like this. Okay. Now, if we want, we can make this button center. Let's do button. Let's go to button style on button style. Here we have position center. Okay, now it's much better, and here what we can do is change the right to 15 and left to 15. Okay. Looks good. Now I click on publish and then what we have to do is edit this opening new yeah, edit the request to a appointment page. Click on the page and let's click on Edit with element or Okay. Everything looks good and click on Tablet port rea and here Agod and in here, let's make this right as 30, left as 30. Okay, looking good. Then yeah, we only have one section. Then on mobile, let's make right as 15 and the left at as 15. Okay. Publish it. And on mobile, the menu is not looking. Okay. So let's click on the footer and here on mobile. No, let's make it center. Alignment will be sent. Okay. When we make it Alignment Center, that's look fine. So now publish. Okay, publish it and 152. Setup contact form: Hello, everyone. Now it's time to add action to this contact form. So currently if we just click on submit, actually, we have to fill the form, nothing will happen because we didn't set up this, so now I click on edit with Elementor. In elemento pro, we have contact form feature. So if this was a element of free, we have to use different plugin like contact form seven or W form. So now I click on Edit contact form to edit this. Okay, here is form fields and we correctly set up those form fields, and now we have the action after submid. So let's go one by one. So the button, we already set up the button, and then we have this action after submit. So here we have step that we can do. So if I just remove all of them, let's all of them. So on add the action, I click this plus icon. In plus icon, we have option called collect submission. If we only select this one and when someone add their details onto this contact form, we will able to collect those submissions. To collect them, I can go to dashboard. In elementor, here we have a submission section and from here we can see the submission. Currently we have one of them. It seems is a spam Like this, we can record or we can collect a submission from this table and for more info, we can see where it comes from. And we can click to view the content. This is just a fake code. This is just a IPAM submission and I will show you how to prevent those IPAM two. Now it came from this email. Now I will go back and here we have more options. We have email and email to option. If we select this email option, we can get the form details. If someone fill these form details, we can get an email to our email box, and on email too, we can also send email to the person or visitor who filled this form. So let's add those information. On collect submission, we can also get the user IP and user agent. Check here, we can see here user IV and the user agent is this details. Let's complete all the email process and test it. First we have email section. If we select here email, we can see this email section and in here, I will just remove this and here we can mention the two email, which means we can mention the email that we need to receive those emails from the website, and here we can add subject. So I will keep this same subject. So it's like new message from JB Family Clinic and here we add Earl fields, which means l of those fields will add to the message of the email. And then here we can set from email. I will show you how to create emails with our email account. From email means the email that send email to the visitors or our email box here we can add from name, so just keep the default details and you can change any of these details and here we can add reply to email. Currently we don't have any reply to email. To the reply to email, I will select email field and if we want, we can add carbon copy OCC and BCC. We don't need any of them. And on meta data, we can also add those details. I will add all of them. Now our email one is complete. Then we have email two. Email two men think Visitors send email to us. As website owner, we will get that email. So we will have all of those information and we can send automatic reply message when visitor click on the submit button, we can automatically reply email to his email box because we already have here his email address. So here I will change the subject and messages. Let's use AI to generate. Okay, here I am at JAG PT, so I will sell JAG PT to generate reply email to visitors who fill the contact. Let's see what type of message that we generate by JGBt. It's too long. Let's say, make it short. I will just add this type of message, so I will just copy the message and come here, not here, come here. I will actually remove this one because we don't need it and just add this and let's remove this if it urgent part and only add this type of image. And in here, we can select the first name because if we go to form fields on form fields, actually, we have full name in full name. On advance, we can see the field name. I just copy the field name like this and then past I think this will work. If this not work, let's see what we can do. Just paste it like this and nice. Now we have this email and here we have to add the from email and from name will be okay and here the reply to should be the email that entered by the visitors go to form. On advance, we can fill and let's add 32 as this. Now we have step setting. Actually, we don't have any steps, and in additional option, we are good to go, and we already with the designs, and let's see the results. Now I will just publish this and then we have to create the email box because if we try to send this, this email will never or the email will not go to our email box or this email one or email 2% because we didn't have from email and two emails. Let's do that. To do it, I will go to my name chip account. You should go to the hosting provider and access the C panel. So here I just click on here and click on Go to C panel. Okay, I redirect to the C panel and on C panel, so if you didn't use jeep, it doesn't matter the C panel is same on every hosteM provider. It may have some changes, but it's pretty similar. And if you don't have email account if your service provider don't emails account, you have to contact them and get it from them. On name chip, we are already get the emails. If I scroll down, we can here email account or we can just search here email. Here we go. From here, I will just click on email account. Okay, here, I have my old emails. From here, I just click on Cre and here I just select our website URL and for username, I will add in four and let's generate a password. I will generate a password and we'll be back. All right. Now I click Concreate the email will be info at custom website design dot so you can add any name or any name here as an example, if you Joan, you can add Joan at your website URL, and now I click C Create. Okay, we need another email to add as two emails. From email will be info, and let's create two email as Let's select the domain, and I will add my name. Okay. Then I will set up the password like this, then I click on Create. Now we have those two emails. Let's set those information. Just copy the email and let's go to contact form and on email, I will add from emails this info app custom website design.us, and then I will copy this email, copy it and add this as two email. Then as email to, I will add to email as the email address that user enter here. Go for ps and on compiles on email, advance, copy the shortfall, email one is good, email two will be two, two is the person or recipient or the person who filled this form and the form will be info. Let's copy the info email. Still here, and the reply to will be, I was wrong before. The reply to will be info at custom website design. The two should be the two email should be the email that user ate now cyclic publish and we still didn't set up SMTP, but let's try if this email go through or not and con preview, and now I will fill this contact form. Okay, here we go. I just add the information, and here I didn't add any documents, so now I click on submit, and let's see what will happen. Okay. It's say your submission was successful, and let's see if we actually get the email. To check the email, I will go here and what is the email that is set up as the and the two is a net let's go here and click on jet email. And here we have webmail software just click on Open. Let's see if this email go through or not. Yeah, it actually go through, but I didn't expect that. So when it goes through, we will see it like this. Yeah, it's actually go through. That's a causative sign. However, if you didn't get the email to your email box, when you try this, I will show you how to fix it and I will show you how to set up SMTP here we have this quotation marks on the header so let's here the subjects should remove this quotation is known. We don't need it. And let's see on the email too. It's on the email too. Actually, the email to subject should be changed. The subject should receive message let's go here, just test it like this, and I hope you understand it. If you don't understand any of this part, just let me know. I will create different video. Okay. Now let's see our tested email as the user, I add this GmS let's see if we receive the email to G Okay, here is my email box, and it's received. So here is our message. Hi Gian Gian mean, the full name that I enter, thank you for reaching out. And here we have the email. Actually, the email is in single line. We have to make it better. To make it better, I think we can add STMA Let's try to add STM the BR is break VR and publish. So emails are working perfectly here. As I told, that's a good sign. However, if you don't receive the email in next lesson, I will show you how to fix it. Before I do that, let's go to submission and click on submission, and on submission here, we have the email. We can click here to view and check the email details like this and nice. 153. Fix email not sending issue | setup SMTP plugin: Hello, everyone. If you are not receiving emails from your WordPress website, here is how to fix it. So first of all, let's go to plugins and click on at New plugin. And here, let's search WP mail SMTP. No main mail. Mail. All right. Here is the plugin and it's compatible with our Wordpress version. Click on Install Now. All right. Now, click on Activate. I will just click on go back to dashboard. Okay. Now here we have the setting. Also, we can test if our email working correctly or not. If we go to tools on tools, here we have email test, and here we can add our email address and click on send email, then it's say there is an issuer detected. However, this site email work before. Let's see if we get email this time. Okay, I just log into my Gmail account and I am not seeing the email which means this plugin break email functionality of my website. Let's fix it. First I will go to set in in setting here, I will have to set the prom email. Our Prom email will be this one copy it and pace the Primmil here. The prom mail mean email that we send emails from this website and then here force prom email make it on and here we can set the name. I will keep the default name and I will keep the default data. Then in mailer Iwa the SMTP. Okay, here we have to add the SMTP host. So let's get those information. To get those information, I can just go to C panel, and here is our email, and I just click on Connect Devices. Okay, here we have all the information. First, we need host as host, I will use this email address. Let's go here and add host as our current email address. Then for encryption, select SSL and here SMTP port is 465. Okay, and SMTP host should be this outgoing server. Copy it and paste it here, not the email address and SMTP user name will be the email address. The use and here the password to the email account. Did you remember that when we create email account, we just create the password for it at that password, pace the password, Okay, authentication make on, then I click on Savesetting. If you use Google Workspace or other email provider, just select the mailer that you use and set up the details. In this case, we are using SMTP of the server, so I set up that information. Okay, let's go to tools, and here we got some issue. Refresh it. Okay, here at the send to email and click on Send Mail and let's see what will happen. For some reason, the website is not loading, but let's hope this will work. Okay, it says success and here is warning message. And for now, let's ignore it. So now here we got the email. So if you follow the same step that I use, you will successfully able to fix the email not sending issue. So now let's test our email or test our contact form. Just click on contact form and here, just go to the contact form and let's add those information. And this time, let's upload the file. Click ConchoosFle and let's upload this image and then click C submit and let's see what type of email that we got. Okay, say submission was successful. So let's go to our email and refresh it. Here we got the email and here also we got the attachment. Here we have information. So it's pretty good the emails are working, and here it should be received. We received your email message. Okay, nice. A on element or submissions, we will have record of this email. Here is that email, so nice. Now we have to move to the request appointment, request your appointment form. I request your appointment, here we have the form. We have to make this form working. Let's click on Edit with Eli Mondo to edit it and it work. Click on this pencil icon to edit the form and we already have the form fields and the button is working. Now we have to go to action after submit and here we will have collect submission and email. Let's add Email too. Then on collect submission, let's add userIB and user agent. On email, let's set up the same details that we set up on here. The email will be here will be the two email here. Here will be the two email. Then let's copy this text and put the subject as request and appointment. Then we will see the fields, and now we have to set up the from email. Here we go from email, paste from email here, then from name will be this and reply will be email field. No carbon copy or no CC. Then here we will collect the metadata and now on email, the two will be email address. Let's go to fields and here, go to advance and copy the email short code. So as I told you before, when someone at their email, they will get confirmation message from website. Add this as from email and for the prom name, copy this advance, then past it like this, then the reply will be this email. Copy it reply to, and here we have to add the message. So here, let's just add this message like this. You can make those messages better. I just create it like this, add the BR and remove this part. We don't need this one, add the BR again to break the lines, and here we have to change from field to this field. And first like this, then good. Okay, nice. We can publish and let's see it's work or not. Think if we want to change the success message, we can just go to additional Options and click on custom message on. And here we have the messages. So here we can change. Let's let's give success Mail send message when you try to requests appointment. Let's add this your appointment request has been sent. So hold it here and click on publish and then let's try this out. So from here, I click on request your appointment button, and here we have the form. So let's add those details. Okay, here I fill the information. Now I click on request appointment button, and let's see what will happen. Okay, here we go your appointment request has been sent message. So on submission, if we refresh here we have the email, so if we want to filter it from forms, we can just select here, request appointment and click it will automatically filter the request appointment form emails. Then if we want to export, we can just click on Export filter to CHV and yes, this is pretty cool and let's see our email addresses. Here we got the email. Actually, this is the email. For some reason this email not look good. So let's see and try to fix it. Also we have to change the subject here so let's change the subject to appointment request gchanges V family clinic appointment request like then here we already at the BR break tag. Why it's not working, it should work. Anyway, click on publish and if we see the details here, we got the email with the details like this and we get the meta details too. Now our emails are working well and if we want, we can just write again, but for now, I will not going to write again. If we go to style and on messages, we can change the message colors in success message, let's make it this green color like this, and we can do stuff like this, too. Like this error message will be in red like this, so click on publish. Okay, I will see you in the next lesson. 154. Setup Rank Math SEO plugin: Hello, everyone. Now we have to do the technical and on page SEO. For on page SCO, we can easily set up by following the Rank Math configuration step. So let's do it. First, I go to plugins and click on at New or add Plugin. And here we have seven plugin to update. I already show you how to update website without getting any issues. And now I will search the plug in. So search trend. Math presenter. Okay, here we got the Rank Math SEO and it's compatible with our WordPress version, so I click on Install Now and click on Activate. Okay, as the first step, I have to connect this Rank Math account with my Gmail account. Or Google accounts. Here, I will click on Connect your account, and here we have option to log in, so I just click on this Google option. In this case, I have a account, but if you don't have a account Rang Math account, you can just click on Register now and create a free account with Google Facebook gowordfx.com, or you can use your email address that you use get emails from this website. In my case, I already have account, so I will log into it, click on Google to sign up with Gmail. Now I follow the step, just click on continue here click on active now. The plugin is set up and now we have to complete this set wizard. In here, I will select easy because SEO is a different deep subject. So when we select this easy option as the web designers like us, it will help us to use the knowledge that we already have, and the rest of things will configure by the plugin. Then I click on setup is Okay, here I have to add the details. In this case, my website is a small business site, so the business type is. So in here, I have to select the business type. In this case, it should be health. So I will search health actual here, we have hospital search health. No, we have hospital. Yeah, we have hospital, so select the business type, and here is the website name, and then we have Do logo. So here the in size is 100 well by 100 well and this image should be squared. So my current image is not squared, so let's make squared image. To do that, I just go to our Figma and click on our project. And if we check the sticker sheet, we can see our logo here. Let's create a new frame and let's create it like this. Then let's make this five well by 552 well. Now it's squared and now I will add the logo. In Assets libraries, I will have the logo, select the logo. Select insert instance and put it here. Let's make it bigger. Here I will just detach instance to edit this logo because I want to increase the size. This is text logo, which means I have increase the typography size. If you use image as your logo, you can just increase it. In this case, I will make it then let's make this family part bigger, make it like 100 is too much. Created the logo, and now let's rename it a logo. Google like this and now select it and click on Export, I will make this logo as JPG and click on Export button, Export. Then I go to tinypng.com and let's make this logo minimize like this, then click on this JPG button download it and now let's go here and remove this one and click on add upload file. And here, let's just add this logo, and let's add ALT text like this, then click on use this file, and now we have logo like this and now we fault social sharing image. So this image will appear when someone share our website URL on social media like Facebook, LinkedIn Twitter or Twitter Minix or any other Facebook platform, the image size should be 1,200 and 630. So let's create another frame. Let's did like this and let's put it here. Let's finish it as social yeah, social social and it will be 1,200 and height will be 630 like this and we have to add some image. In this case, I will just add this hero section, select the hero section, copy it and here is our frame. Here just paste it like this and now I will decrease its size like this. Then let's also add this text. Copy this text and this text and paste it, select it and paste it here, then let's make it like this. We have to remove this one. Let's make this 90. Then again, I will copy this globo from here and put it like this, then the text color should change to white color. Okay. Maybe let's decrease this size to 50, here, like 36. Okay. Actually, we can just copy the header, this part, just copy it and come back here, remove this one, then paste it like this. Then I will remove these two parts and here, let's make this size like this and let's put it like this. This is much better. Now I select this frame and go to export, set it as JPG, exporting and on tiny PNG, we can reduce the five size. Okay. Download it. So if you have different type of image, you can also add it, but in this case, we already have the Figma file. That's why we can just create our design using the Figma file. And let's add ALT text like this, click on use this file. Okay, now click on Save and continue. Okay, now we have to connect with our Google account. So future lessons, we will create Google Analytics and Google Search Console profile and config it with our website to get better visibility on Google search ranking. So we have to select the Gmail account that we are going to use for the Google service that we are going to use. So I will click on Connect Google Services, and from here, I will just select Gmail account that I am going to use for the website. Click on continue and click Select, then click on Continue. Okay, currently, we don't have any of those information, and in future or in next few lessons, we will create them. For now, click on Save and continue. Then click on return to dashboard. Okay, we just configure the Rank Math SO with our website. So in here we are at Rank Math SO and title and meta. From here, we can see how our website will look at on Google. And here we have tabs. So with those tab, we can add more details. So as an example, if you want to add your email address, you can just add email address, and if you want to add your address or your business address, you can add it here, then you can add open hours, phone numbers, and in here, you can select the A page search A. Then on Contact page search contact. This is the page that we already created, and here I am not going to add open hours if you like, you can add it. Business type we ready selected for the address, I'm not going to add the address and you can create Google My Business profile, and in that way, you will be able to add all of those information on your Google My Business account and you will be able to set up this website or add this website to your Google My Business profile. Then let's go to ho Helmetta. In here, you can add your Facebook page, and if you have other profiles like X, LinkedI or any other just add them on additional profile. After you make all of those changes, you can click on Save changes, and here we have more stuff. But if you don't know much about SEO, just keep them as default. And in this homepage section, we have to edit our homepage to make our website homepage appear on the Google when someone search like JV Family Clinic. So to do that, click on Edit page and the page name you will see here, just click on and when you go here, you will see this type of place. This is the blog editor, and here you will see this rank math icon just click on it. When you click on it, you will see the Google Preview. Click on Edit Snip and here you can add title. So let's add the title. I will add JB family Clini. Let's make it then on the description, we have to add the description. So when you create those details as an example, if someone says JV Family Clinic on Google, I want to see this website. That's why I include this text on the title. I have to include this text on description too. So in this case, this text is the focus keyword. So to description, I will add this type of text and now when someone search on Google, the website will show like this and to get it on the Google first page, it will take a few days and if you have highly competitive keyword, you may need to do more SEO stuff. In this focus keyword, you can add focus keyword in this case, I just add JB fami Clinic and here we can see the information that we need to make. Now Earl Good, so now I click on ST save this preview. Now I again go back to dashboard and on ER pages, we can add those details to Earl pages. Click on Edit and I will open it on New Window. Then here, click on this rank mat and add the focus keyboard let's add about JV family Clinic and on Edit is nipped we can just add about JV Family Clinic and just copy, copy and add like this. Then here, we can add description too. Always try to add those preview text manually and in that way, you will have a great result. However, if you have a lot of pages, you can just set up the preview that it should be appeared on each page. To do that, go to Frank Map and Title and meta. In here on pages, you can set the way that it should appear. In this case, I don't need this sit ename so I will just remove it. I page title and separator, then if I click here, I can see more stuff that we can add. So in this case, we don't have. So in this case, I will just add title like this and on description, you can add and click Conceive changes. So this format will apply for pages on the website, and on post, we can do the same. Okay. In the next lesson, we will going to set up the site map and set up Google Search Console and Google Analytics. 155. Setup search console and GA4: Up Google Search Console. So when we configure our website with Google Search Console, we can monitor and maintain website presence on Google search. So we can understand or we can get idea about keyword performance like what keywords are ranked on Google and many visits that we get from the Google Search and stuff like that. As we can send our website sitemap to Google Search Console, and it will help to rank our website faster on Google. So let's start. First, let's go to Rank Map SEO and general S on general setting, here we have webmaster tools and here first we have Google Search Console, so I just click on Search Console verification page. When I do it, I can see step that I should follow to set up the Google Search Console. Let's do step by step first. We have to go to Google Search Console website. Then you will see this type of window. Here just click on Start now and here you have to add email account detail. I will add it and we'll see you in the next step. When you do that, you will see this type of window. So if you already have website, it can show here. In here, we have this custom website design.us. The reason is we configure this email account or we create rank count on our Gmail account and then it automatically set up the Google Search Console. So if you go to Analytic, you can see it here. Okay. Now, if you don't see this website, just click on at property and add your website URL here. So I just add my website URL like this, then click on Continue. And I got this verification message. And if you didn't set up the rank math SO and configure it GML account, you will have to add this add an TML tag, copy that DML tag and put it here. The SDMLtag look will be like this. Now I click on go to property and from here, I can first add Sitemap. Click on sitemap and here we have to add the sitemap. Let's go to rank math and sitemap setting. In sitemaps, we can adjust the information. So here I will keep it as default on force, make it default and pages make it default and floating elements, we don't need to rank those items on Google, so I will antique that because those are part of the website design, not a full page or post. So if you remember the client reviews that we created using advanced custom wheels and we don't need to rank them to our providers will no need to rank because those items are part of a full page. Example, the our providers are loaded in the homepage, when homepage rank, it will automatically rank under the homepage. Now I click on Save changes, we don't need categories, just remove categories. But if you focus on blog and have categories, don't untie those two items. Click on save yes and then go to General. In general, here we have the sitemap URL. So if I click on, it will look like this. So what we have to do is just copy this EML part. Here we have our website URL and slash. I copy the text after the slash and go here and paste it like this. Then click on submit. Okay, the sitemap is successfully added and it has information. So now if I go to over here, I see a issue, so just click on Report and see the issue. Okay, say Google has detect harmful content on some of your site's pages. This is a demo website, and if you see this type of error message, just just fix it and click on request review. In this case, I am not going to do any of that. And over time, I will see the performance and indexing data on this search console. Okay. Now what we have to do is set up Google Analytics. Google Analytics will provide insight of how users interact with our website. So this is really important. In this way, we can see what users are doing in our website and how much time they will spend on our website and which countries of the users come from our to our website. Okay, now let's set up it. So in analytics here we have Analytics part, but here we don't have a property. So let's do this from scratch. If I click on click here to KH, we can see more information about the Google Analytics. However, let's search on Google. Google Analytics for login and click on this Google Analytics link. Okay, from here, I select the GML account. Then here I already have Analytics account, but let's create one from Scratch. To create, click on this Create button and click on account. Here, I will just add a username. I will just add my analytics. Then here, click on Next, and here we have to add property name. For property name, I will add JB Family Clinic, the website name JB Family Clinic, like this. Then United States, if you are from different country, just select it, I will select the United States and so you can change the State. I will just keep the default on and currency will be US dollars, click on Next. Here we can select the industry category. I will search like health. No, I have to search it one by one. Let's see here we have health and in Google, the health category has load restrictions, so let's continue and I will add business size as small, one to ten, and click s and I can select business objectives. In this case, I way select view user engagement and retention and I select understand website app traffic and click on. Create here, I click on Accept and click at this check box and click on I accept. Okay. Here I have to choose the platform in my guess web and here we have to add the website, Lou, URL, I will just add custom website design. US and select HTTPS. Here we have to add the website name. I will add it as JB Family Clinic and tick this, then click on, create and continue. Okay, then click on Next. And here, click on Install manually. Actually, we can use the Rank Math plugin to install this. I will repress this page on Analytics, let's see on Analytics, I will click on reconnect and select the email address, click Continue, continue. Okay. Now the search console is okay, and here we have the My Analytics account, and on property, we have JB family Clinic property and datastrem will be JB Family Clinic. Here I will click on Install Analytics code. I say enable this option only if you are not using any other plug in streams to install Google Analytics code, so I'm not used it and now good, click on Save changes. Now Search Console is showing in green and Analytic Analytics is showing in green and it's connected. Now if I go to Analytics and just stream this and let's see, just click here. I will just refresh. Now here I will select my Analytics. ABM. Now it show that it connected. Now let's visit our website. Let's just I just opened a new incognito Window and just custom website design new ways and here we visit our website and let's see this one we should have active users as one, but it's not updated. Let's give it for a few minutes. Okay, now it shows one active user and is from Sri Lanka so that's me. Okay. All good. If you don't see it, it also say it may take up to 24 hours to appear in your Analytics account, and it will not take that much time, and you will see this type of active users count. Okay, now we set up both Search Console and Google Analytics. 156. Use on page SEO analyzer: Rank Math SO has a cool feature called SCO Analyzer. Let's use this feature to analyze the SEO of our website. So it's on Rang Matso& SO Analyzer. You will see this type of design here, just click on Start SO Analyzer and it will scan our whole website and give us the current result of SCO. Okay, currently, its SCO ISCO is 7,400. So if we check here, we can see the issues. And first high priority one is automatically update. So let's enable auto update of this plugin. And now here we have a lot of issues, and let's fix one by one to fix El issue. So here we have warning. It's a H one heading. No H one tag was found on your homepage. So let's add the H one tag to do that clicon visit site from here, cliconEedit with element or here, if we check this text, this is the main text of our website and here's a HTML tag H two. Let's make it H one and click on publish. Then this arrive will be fixed. Also in H two headlines, more than 20 H two tags were found on your home page. So let's keep only subheadings as H two, and let's fix all of those issues. So to do that, I will first copy this text and let's see actually it's this one. So we already make it as H one, and here we have dedicated your family cell so we have to go one by one. So let's keep this two because this is a subdline and here we have 100% as H two, so. Okay, here is the 100%. Let's click on it, and let's make it as H three. So in SDM tag, we can have H three, H four, H five, H six, and Dpantag and PO paragraph tag. We have to make this HTML page structure, SEO friendly by following the SEO guidelines. It will help to rank our website on Google and let's click here. Then let's make H three. Actually, I think we add a lot of H two. Let's make all of them as H three. Here we don't have any issues. On here, we have a lot of H two, so I click on San Li and here we can edit the template. So let's edit it first. We have H two here, make it H three, and make this on three. Three paragraph. Okay, now I click on publish and click on save and back. Okay, nice. Now if I scroll down here, again, we have a lot of Ts, make them three. And if we do it on the design in part, this will be easy, but now we have to do it manually. So I will make this as paragraph. This one should be paragraph, and this one is three is okay. And here, make this as paragraph. No here, this should make as paragraph and here, this should be H three or H four, three will be okay. I think we have to edit this template too, so let's edit it. Okay. Now first, this name should be H two and H three, and this should be HP or paragraph tag, then I click on seven bath and here also we will have to this H three and H four, C four. Now I click on publish and let's see it fix those issues or not. Now here, I click on restart SO analyzer. Okay, it becomes 82 and try to make this SOcore more than 80%. So now we have to add all tag to the images. We can copy this SRT tag and paste it like this and see the icon. So here, it's this icon. So it's on the header. Click on it to edit the header. Okay, now click here at the old tag, just copy the title and put the Old tag like this and click on publish. Then I click on Edit page to edit the homepage. Okay, now I am back. So the easy way is, let's go to dashboard, and on dashboard, we can find Media, click on Media Library. And here we will have the images. Only we have to do is click on Edit, and here we can add ALT tag. Let's add it like social banner, click on update, go back again. Actually, it's more easy when we click on this gallery icon and the images will be show like this, and now we can add like this. Like this. This is the easy method dit like this, Bickst appointment and Clock icon. So I will add all of those icons and see you soon. Okay. Now if we check it again, we will have better result. So click on Rs we start S analyzer. We still have a lot of H two tags, and her, we have to edit this footer too. On the footer, we also have a lot of H two tags. Click CFoter conserve now let's edit all of them. This should be paragraph, and here, this should be paragraph or we can add H two, but let's add paragraph. I see, we have a lot. And here, let's make this as a three. And here, let's make this as a three and the copyright section will be paragraph, click on publish and now let's check it again. Okay, now it's 91, and this is pretty good. So here we have link ratio, so we have to add more external links, but for now, I will not going to add them, and for now, the 91 is much better than before. 157. Page loading speed with LiteSpeed cache plugin: Okay, now we have one more step, complete our full website design. That is, optimize our website and load the website faster on mobile, Desktop or tablet. So let's do that. First of all, if I go to plug in and install plug ins, I can hear here, we have a lot of plug in through update, and here we have Light Speed cache. I will deactivate it. And the reason that it is here, the hosting provider that I use is name chip and name chip will automatically add the Light Speed case. I will delete it, and then I will copy the website URL and let's the page code. I will search on Google, Google page speed, and we can see page speed insights, just click on it. So it is pagespeed dot web dot Dv, so I will just page the website RL and click on Analyze. Okay. On mobile, its performance is 64, and this is better. However, we can make this better than this, and on desktop, it's 89. So let's increase the speed of our WordPress website. To do that, we can use Light Speed, cache plugin, so I click on add plugin. Then I will search Light Speed cache. Okay, here we have Light Speed case plugin and currently it's not tested with our WordPress version. So when we install untested plugins, always try to get backups. In previous lessons, I show you how to get backups. We already have the backup, so I click on Install now. Then click on Activate Okay, now we will have here Lightspeed cache plugin. So I click on dashboard to go to Da for now, it will look like this. So let's add the setting. First, we have presets and on presets, we don't need to do it because we are going to do it manually. Because if we use these presets, it may break our website, and if something breaks our website, then we will not able to identify what part that break our website. So if you are comfortable, you can just click on App presets and move on. But in our case, let's go one by one. First, let's go to general on general, just click on this enable IC Cloudserve and you will see this type of window. So here you have to register. So I will register with Google. Click on I agree and click on Google. Continue. And here I just click on Finish Link set and on general setting, make the guess mode on, and guest optimization will be off. And here, click on check my public IP and copy that IP. Okay, here we got the IP. I just copy it and paste on here on the server IP, and I will of the notification. Then click on Save changes. And each and every time that you make edits use in Light Speed cache, just click on this perch Earl and open your website in Incognito window and check everything work fine or not. And when we do this, we can understand if it break or if it works fine. Okay. Then we have the cache tab. Click on it. On cache, I will untick this cache logged in users and tick the cache mobile, then other stuff will be default and click on save changes and check the website on the Incognitor window. Then on TTL, keep the default setting. On page, you can keep the default setting, and then we have excludes in excludes. If you want to have a page or post that you don't want to use the cache, you can just add that page path in this format. So we don't have that type of issues. So then let's go to SIO ESI, keep the default setting, and then we have object on object, keep the default setting. Then on browser, enable the browser cache and click on Save changes. Then on advance, keep the advance as devolved. However, if you have big storage and huge server, and dedicated server, you can use this instant click, which means when visitor hover over a page link or post link, that content will pre load before the user visit that page. This will require a lot of server power. So always only use this Instant click on if you have that server power. So if you make this on and if you don't have much power on your server, it will affect the speed of your website, and your website will not speed due to overload of your server. So then we have CDN. Click on it. So if you want CDN has this giveic dot Cloud, you can enable it from here, but I am not going to use it. So if you have Cloudfare set up with your website, you can enable it. I will set up Cloudfare on future lessons, but for now, I will keep it like this. Now we have image optimization. Click on it, and on here, we can click on Send optimization request and the plugin will automatically optimize our images. We may have to do this 45 times. So now we say you have images, waiting to be fooled, please wait for the automatic fool to complete or full them down manually now. So for now, let's wait and let it to optimize the images. So when you log into your website next time, check the status of your images, and if this is not 100 wasn't optimized, just click on send optimization request and over time, it will complete 100. Okay, now we have page optimization. Before you do page optimization, as I told you before, get a backup, then do the optimization and check the website stated. So on page optimization, I will click on I will on CSS Minifi and on CSS combine and of this generate Css, then sees in line, then CSS combined external and internal will be then load CSS a synchronously will be on and CCSS for URL will be on inline CSS will be on and font display optimization will be default. Click on Save changes and then click on Purge ERL then go to Incognito Window and check if it RL work fine or not. So the website is working in my case. Okay. Sometimes this can break the website. So if that happens just off these items one by one and see what is the issue. And when you find the issue, just make it turn off. Then we have JS setting. On JS settings, JS minify will be on JS combined will be on JS combined external and in line will be on. Then od JS diver will be officet changes and purge go to Incognitor window and check what happened. Okay, work fine. Then we have SDM setting on SDM setting, make DML minify on DNS, free page control will be on, and remove WordPress Imog will be on. Then click on Save changes and test it again. Then on media setting, if you want to add lazy loadimage, just make it on, but I am do it and here just add responsPlace solder, which means if the image takes time to load, it will show a placeholder and we can change the paylder color here. I will just keep the default color and make this LQIP cloud generator and Lazy load I frame will be on Admion sizes will be on. And here, the image quality will be 82, and here I will also on the lazy load images, sometimes this can break the website, click on Save changes and click on perch now test it here and l work well, let's move on to the next step. I will keep the VPI as off and viewpoint image Crone will be also off and media exclude. If you want some images that you don't want to add lazy load effect or if you want it to prioritize the loading process, you can add the URL here, but in this case, I am not going to add any of that. So now we have localization, make Gavita case vata cache C will be on and keep other stuff default, then we have tuning, click conceive changes and then keep the tuning as default and let's not make any changes to tuning. Now we have database. On database, there is revisions and other list up that we are no longer using just check one by one, and if you think there is things that you don't need, just click on clear or you can just click one by one. In this case, if I want to clear this, just click on it and it will remove all of them. So if you don't need autograph, you can just click on it and clear the database. Then we have CrolerO Croler I am not going to make anything change. I will set it like default, then we have toolbox and I'm not going to use any option on the oh. Now if I visit the dashboard, we will have this type of window and here I can click on Reps and check the page speed disco on this plugin and we can see the page load in time. Let's click repress to check the page load in time before it was 3.76 seconds and now 1.22 seconds. Now what we can do is copy the website URL, go to page speed inside, past the URL, and see the result. Now, did you see it performance increase up to 82% and on desktop, it's 79, and here we have issues that we are pacing, but this is better than we however, on image optimization, I didn't remember that we convert normal image to web P, let's see, go to image optimization and image optimization set in here, we have to make this on and here, make the next gen image format as web P. Then make this off the preserve EXI XMP data of optimized image will be okay. Now click on Save changes and go to dashboard, click on Send optimization. Request, click on auto request tron, and let's make it on, so it will automatically optimize the images. Okay, now let's again see the text of you and see if anything change. Okay, now it's become 90, so now it's better than before. Okay, so after you optimize your website, and if you then make changes or create new pages, update current pages or change images, always use best practices like if you add new image, put it on tinyng.com website and radio it file size and do stuff like that. And here we have a COSCO tab. We don't need this because more features available only for P, so I click on this close and click on. Okay. Now we can see the website like this. Okay. 158. Best content width for Elementor Pro: Hello, everyone. Now I am on our Figma design. And here, the Figma design with this 1,440. And throughout the website design, we also add this 1,440 and on website design, it becomes bigger. But if we go to the site settings and here let's go to layout on layout, it's say default content with this 1140. Let's remove this default one will be added to here or we can just add it like this. Then let's make right padding as 30, and the left padding will be also 30. Then click conceive changes, and for your reference, I just use layout as 1440 as the content to design this whole website, but I realize that is not good thing for website responsiveness. So don't add 1,440 as contend with just add 1,140 and continue the lessons. That's what I want you to follow always at the default value. And if you have any questions, just let me know. 159. Class project: Congratulations. You have made it to the end of the custom website UI design class. You have learned so much from understanding website structure to create unique design that standout. Before you go, we have an exciting challenge for you. You class project. You project is to create a custom website, UI design for a restaurant. Applyin everything you have learned in this class. Don't worry. I will guide you through the steps one more time. In this class project resources section, you will find a question here from the restaurant owner. Copy and paste it into your Figma project and use the information to guide your design. Pick colors and fonts that match the restaurants, then create a simple but professional logo. Brand. Color design ideas and inspiration that fit your concept. This will help you build a clear direction for your design. Use artificial intelligence prompts you learn in this class to generate content for the website. Let your creative design, design the website UI section by section. Once your design is ready, upload it to your project section of this class. This is your chance to showcase your skills and get feedback from others. I am so proud of the process you have made. Completing this project will boost your confidence and add the valuable fees to your portfolio. If you ever feel stuck, revisit the lessons or drop a question in discussion section. I am here to help. Thank you for learning with me. I can't wait to see your amazing design. Now go ahead and unleash your creativity. Let's make the world more beautiful. One website at a time.