New Elementor Container-Based Workflow (2023): Build a Fitness Website Landing Page from Scratch | Ken Mbesa | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

New Elementor Container-Based Workflow (2023): Build a Fitness Website Landing Page from Scratch

teacher avatar Ken Mbesa, Web Design | Blender 3D Modeling

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Intro

      2:53

    • 2.

      Project Overview

      4:35

    • 3.

      Install Astra Theme

      1:30

    • 4.

      Install Elementor

      6:20

    • 5.

      Elementor Workspace Overview

      9:32

    • 6.

      Understanding Containers

      4:56

    • 7.

      The Hero Section - Adding the Hero Elements

      6:54

    • 8.

      The Hero Section - Styling the Hero Elements

      12:57

    • 9.

      The Nav Bar - Install ElementsKit

      4:29

    • 10.

      The Nav Bar - Add the Navbar Elements

      7:17

    • 11.

      The Nav Bar - Styling the Elements

      8:43

    • 12.

      Body Section 1 - Part 1

      7:38

    • 13.

      Body Section 1 - Part 2

      13:09

    • 14.

      Body Section 2 & 3

      6:08

    • 15.

      Services Section

      17:08

    • 16.

      Testimonials Section

      10:08

    • 17.

      The Footer

      14:25

    • 18.

      Create the Signup Form

      13:08

    • 19.

      Make the Navbar Sticky

      4:07

    • 20.

      Add Motion Effects

      4:28

    • 21.

      Responsive Header

      7:21

    • 22.

      Responsive Body Sections

      10:19

    • 23.

      Responsive Footer

      6:52

    • 24.

      Final Thoughts

      2:44

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

415

Students

3

Projects

About This Class

Would you like to learn how to build beautiful web pages and websites with Elementor?

Would you like to understand how the new Elementor container workflow works?

In this course, I'll be walking you through the step-by-step process of building a landing page for a fitness website using Elementor's latest features and techniques. And we’ll do it from scratch.

Throughout the course, you'll learn how to design and customize every aspect of your landing page using Elementor's intuitive drag-and-drop interface, with a focus on utilizing the Containers workflow

By the time you finish the class, you will have a thorough understanding of how to work with the Elementor Containers to build a fully working landing page for the fictional fitness website I’ve just mentioned.

From selecting the perfect color scheme to customizing the font and creating eye-catching graphics to adding and resizing images, to creating cool backgrounds and motion effects, I'll guide you through the entire process so you can create a landing page that not only looks great but also helps your business stand out online.

And, as usual, we will be using the FREE version of Elementor and other amazing free tools. Therefore, you won’t need to spend money on premium plugins to create this beautiful landing page.

So, if you're ready to take your web design skills to the next level and learn how to build websites with the new Elementor Containers feature, join me in this exciting new class and let’s build an awesome landing page together. 

Let's get started!

Meet Your Teacher

Teacher Profile Image

Ken Mbesa

Web Design | Blender 3D Modeling

Teacher

Ever since I graduated from college and started working, I've always been driven by a strong desire to make a difference rather than a living.

By making a difference in people's lives through the content I create, I know I will never lack.

I joined Skillshare to (1) Help others learn the web design and 3D modeling skills I've gained over the years and, (2) Learn useful 21st Century skills from other amazing content creators.

I started as a self-taught graphic designer back in 2014 (I'm an Adobe Illustrator and Photoshop expert), then morphed into a WordPress web designer around 2018 (I started with Divi, and now I build websites with Elementor) and learned Blender 3D modeling by taking online courses and watching free tutorials (Starting from 2021).

<... See full profile

Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Intro: Welcome back to another awesome elemental class with me can better. It's always a pleasure to have you here and I'm very excited to introduce to you a brand new class on how to build a beautiful landing pages and websites with Elementor. As usual, whether you're a business owner, a freelancer, or just someone looking to enhance your web design skills. This class will teach you everything you need to know to create stunning websites with ease. Elementor is a WordPress page builder that has revolutionized the way websites are built. And now with their new container-based workflow, creating professional looking websites that look great on all devices has never been easier. In this course. I'll be walking you through the step-by-step process of building a landing page for a fitness website. Using Elementor is latest features and techniques. And we'll do it from scratch. You don't need to have any experience get started. Throughout the course, you will learn how to design and customize every aspect of your landing page using elementary, intuitive drag-and-drop interface with a focus on utilizing the container workflow. We'll be looking at the containers in detail and by the time we finished the class, you will have a thorough understanding of how to work with the elemental containers to build a fully working landing page. The fictional fitness website I've just mentioned, from selecting the perfect color scheme, to customizing the font and creating eye-catching graphics, to adding and resizing images, to creating cool backgrounds and motion effects. I'll guide you through the entire process so you can create a landing page that not only looks good, but also helps your business stand out online. And as usual, we will be using the free version of Elementor and other amazing free tools. Therefore, you want me to spend any money on premium plugins to create these beautiful landing page. All I need from you is deep desire to learn Elementor. If this is your first time seeing me, my name is Ken and I've been using elementary to build websites for myself and customers for the last five years. I've also been teaching elementary to thousands of students, just like you right here or Skillshare on YouTube and other online platforms for the last two-and-a-half years. So if you're ready to take your web design skills to the next level and learn how to build beautiful websites with a new elemental containers feature. Join me in this exciting new class, and let's build an awesome landing page together. So let's get started. 2. Project Overview: Now the best way to grasp a new concept or reinforce a skill is to build a project. So throughout this class, as I've mentioned, we'll be working on a fully working real-world landing page for a fictional fitness website. So let's have a quick overview of the landing page. So here we are. This is the landing page will be building with Elementor. And before we have a quick look at it, I need to mention that I went ahead and created this as a reference landing page while preparing the class. And the good thing about having a reference landing page or reference website is that it allows you to see what we are creating. So when it's time to create this part, at least I can show you that we're creating something like this. So together we will go through this page and rebuild it from scratch. So let's have a quick scroll from the top to the bottom. As you can see, let me first of all refresh it. So let me reload that page. Now as you can see, we have these animations on the hero section. And the animations are all across the landing page, not just from the hero section. As you can see, we have this video player here. And when you click that, you can have a video here telling the visitor what this landing page is all about or what your website is all about. And when they click play, there'll be able to view a video. Click outside. So as we scroll, we have different sections here where you can list your services and the user can click the Learn More button to be taken to the page as obscene. We have that animation. So scrolling downwards. And this and this testimonials is supposed to be right here in the middle. I must have forgotten to align it to the center right here. But of course, in the final page we're building, it will be well aligned. Going down to the footer, That's a folder. And if I hit Control Shift, I to mimic different devices. If I click this icon right here, as you can see, the landing page also looks awesome on a tablet. This is the iPad Air. Lets me make an iPhone 12s pro. So that's what the landing page will look like on an iPhone 12s pro. And of course, the menu here is a burger menu. And when we're in tablet mode, it's still a burger menu. So let's scroll down all the way to the bottom. And that's how it looks on a smartphone. So basically, as you can see, the landing page looks awesome on all devices. It's responsive and we'll see how to make it responsive as well. So in a nutshell, I created this as a reference landing page. The good thing about creating the reference landing page is that when it's time to create this section, at least I can show you beforehand what we're about to create, rather than just winging it and telling you to follow along without you knowing what we're building. So that's just a quick overview of what we'll be working on by the time we finished, you will have this landing page fully working and ready to be used on a website. So that's what we'll be designing. And to achieve this landing page, we will need to use several elemental features and tweak a lot of settings which will equip you with the skills necessary to confidently build your own web pages with Elementor in the future. And to help you follow along in this class and reproduce the same landing page. I've prepared all the images for you and I'll provide them in a folder called assets. Simply download it from the Projects tab right below this video player. Now that you've seen what we'll be working on, I have a feeling you're super excited to get started. So without any further delay, let's go see you in class. 3. Install Astra Theme: And here we are. As you can see, this is a brand new installation of WordPress. This is WordPress version 6.2. And the first thing I always do when I'm working on any WordPress project is to install a WordPress theme. So without wasting any time, let's go to Appearance Themes. Now, of course, because we're in 2023, the active theme by default is 2023. Last year it was 2022, and the year before that it was 2021. But we're not going to use these default WordPress themes. We're going to say Add New. And we'll install one of the best themes on the marketplace by the name Astra. So I'll click Install. Astra is one of the best themes in the WordPress marketplace. Alright, so I'll go ahead and hit Activate. And now Astra is the active theme. As you can see, we have these thank-you for installing Astra notification. So let me just close that down. And that's how to install a WordPress theme. In the next lesson, Let's install elementor. I'll see you shortly. 4. Install Elementor: We're back. So now that we have our theme installed, it's time to install Elementor before we can start building our page. So let's go directly to plugins. We can click Add new, but first of all, I just want to click plugins so we can go to the install plugins list. And these are the plugins that came by default when I installed WordPress. So I just want to get rid of all of them. Before I can do that, I'll select these two and deactivate them. Select the activate from this drop-down menu. And then let's say Apply. You might have different default plugins from me. I suggest you just delete all of them. Now that they're all deactivated, I'll go ahead and select all of them by clicking this checkbox. Then in here I'll go to Delete, apply. Okay? Alright, so now if I refresh the page, we don't have any plug-in installed. So I'll go ahead and say Add New and will be redirected to the WordPress plugin directory. So I'll go ahead and search for Elementor in here, Elementor. And be the first results in the list of results by elementary.com with 5 million plus active installations. Click Install. Now, this is how to install every plugin in WordPress. Alright, so let's go ahead and hit Activate. There we go. So Elementor is now activated. Now, before we move on, sometimes if it's a very first-time installing Elementor, you might be redirected to a setup wizard where you need to go through several steps to set up your website. Because I had already installed Elementor on this particular domain. I have not been redirected to that wizard. And just in case you've been redirected to that setup wizard, where you have to go through those steps. The next few minutes will be a step-by-step process. I had pre-recorded for a different class where I show you how to go through all those steps. So here we go. So I'll hit installed, right? So when I click Activate will be redirected to the Elementor setup wizard. So let's hit Activate. And this is the wizard right here. So let me zoom out a little bit so you can see everything. As you can see right now, we have about five steps to set up everything before we can start using Elementor. And the first step here is to create an account with elementor.com if you want to enjoy these benefits, but you don't have to have an elementary accounts to use Elementor. So I'll go ahead and skip this part. So the second step here is to decide whether you want to use the hello theme that's developed and maintained by the elementary team. But you also have the option to skip this step if you have another team that you want to use, I like using Astra. Astra Theme is one of the lightest and fastest and most SEO friendly themes in the marketplace. So I'll go ahead and skip this part. The third step here is to give your website a name. And by default, the name that shows up in this field is the name you gave your website when you were installing WordPress. So this is the name I gave my website. I'm not going to change it. So I'll just keep I'll just hit Escape. Then if you have a logo, you have an opportunity to upload it at this moment, but this is something you can always do later while you build your website so we can go ahead and skip. And then finally, we can go directly to edit a blank canvas and start building a web page from scratch. Or we can browse from hundreds of templates created by Elementor that are within the Elementor workspace or import our own element of templates that we might have bought or created ourselves previously. I'll go ahead and skip that. And by default, when you hit Skip, it takes you directly to a blank canvas where you can start building your webpage. So to exit from this place, click this burger menu, and Exit to Dashboard. So we're taken to the back end of the editor for that specific blank canvas we just left. But what we want to do is click this to be taken the actual dashboard where we have all the Wordpress settings. And now if you look on the left menu here, you'll notice we have Elementor and templates. Both of these show up after installing Elementor. And if we click Elementor, we can play around with all the settings here. But usually you won't need to make any changes to the default settings of the plugin. You will just go directly to start building your webpages. But of course, feel free to check out what all these other settings are for. If you open up a template here, this is where you'll find a list of all elementary templates you might have uploaded or built. If you want to build a new template that you can keep reusing in your project. You can add new. If you want to import a template that you had downloaded, you can import it from here. Alright, so now that we've installed astro, the theme and Elementor, we're now ready to start building the landing page. And we start with the hero section. That's the top part of any landing page that the customer sees when they get to the page. So in the next lesson, let's start building the hero section. I'll see you shortly. 5. Elementor Workspace Overview: Welcome back. So now it's time to build the hero section. And to do that, let's first of all have a look at what the hero section is. So jumping over to this reference landing page I created in preparation for this class. This here is the hero section. It holds the main H1 or heading of the landing page, which is a brief description of what the landing page is all about. Some call to action buttons. We have this Video button here. Then we have this lady. This video button here brings up a video player from YouTube. You can showcase what your website is all about. And visitors can play and see what. Let me close that. So let's see how to create these. So jumping back inside our dashboard, go straight to pages. And because this is a brand new installation of WordPress, we have default pages that come with every new installation of WordPress. So I'll select both of them by checking that box there. And in this drop-down menu, move them to trash and apply. So now we don't have any pages. I'll say Add New. And because this is our landing page, I will assume it's the homepage. So I'll say home, That's the name of the page. And now up here we have a couple of settings. These are the Wordpress settings, and these are the Astro settings. If you've not installed Astra, you won't have these settings here because they come with a theme and we need them. So first of all, let's go ahead and change the template here to Elementor full width. Just like that, because we want it to run from the left to the right or from the right to the left. So Elementor full width. And that's all we need from the WordPress settings. Now let's switch the Astro settings. And here we have several drop-down menus here that we need to open up. First of all, we want to say full width stretched. That's what the content layout should be like. Of course, these are the options are also usable, but I like using full width stretched. Let's go to sidebar. We don't want a website or landing page to have a sidebar. So I'll go with no sidebar. We can always change these settings on the page itself while building it using Elementor. And I'll show you where we can change that. And then finally, let's go to disable elements. We don't want the default Astra header or footer because we're going to build our own with Elementor. So with those settings set, I'll say Publish, click Publish once again. And now our page is published. Now let's click edit with Elementor and will be redirected to the front end builder where we can start building our page. Now, if this is your very first time using Elementor, the latest version of Elementor introduces what we call containers. Before the introduction of containers, we were using sections and columns. And that's the workflow you will find in all my previous elemental classes. And that workflow is still very relevant. You can choose to work with sections and columns if that's what you're comfortable with. But now elementor gives us the option to use containers, and this is what we're going to learn today. So I want to activate the container functionality. So I'll click that. It will open a new tab that will take us to the settings where we can activate Flexbox container. So just go to Flexbox container. This is inside features and the Elementor settings. Drop-down menu activate. And then let's scroll downwards and save changes. Alright, so with those changes, Let's go back to the page. Here we are. And of course, before we refresh the page, the UI of the editor here looks like the old UI that had the sections and column workflow. But now when we refresh this page to reflect the activation of the flexbox container will now this will change slightly. Notice now we have container and the columns are gone. So now the first thing we need to do is have a quick overview of how the containers work. So I'll just drag a container in here. And now we have this container here runs from the left to the right. And this is what we'll hold our hero section. And inside this container we can drop more containers that we hold different types of content. So to reveal the draggable elements, once again, we can click this icon up here. And that will reveal the elements. Once again, if I can collapse all these panels right here. These are different elements that we can drag onto our page to create content. So e.g. we have the pro area. These are the elements that are only available with Elementor Pro. You have to pay to use Elementor Pro. But now we have the basic elements like the heading, image text editor and all that. Then we also have general elements. These are still free. Pro elements have a small lock icon on the top right. Like in here. We can drag this and put it up there. We can drag this and drop it in there. Let me just undo that control Z. So basically this is where we will be getting our elements and dropping them in here and then making changes to them. So going back to our basic panel and expanding layout, the layout panel holds the container element. And as we get started, there's one very important setting we need to change. And I'll show you what that is. Whenever you hover over any container, you can select it by going to one of these corners. So if e.g. I. Go in here and drag a heading in there, I can select it by going to this corner right here. And now these changes to heading. If I want to select the container itself that's holding these contents, I can select it by clicking this. And now it's elected these container. And if I wanted to select this outer container, I can click this. And these changes to contain a steel. So now when we hover over these selector right here, we can reveal some quick shortcuts that will save us a few steps in our workflow. So if I go inside this burger menu, user preferences and change this and switch editing handles on. Now, if I hover over any of these corners, we have this duplicate shortcut and delete shortcut. Rather than going to this. If I switch this off, rather than going here, right-clicking and then duplicating. When this is on. All I need to do is hover over these and then duplicate over the Delete. Now, going back inside this burger menu, we also have more settings. So if I click this site settings, we have global colors and we will see how to work with global colors, global fonts. We can change the behavior of all the phones on the website right here, and all these other settings. But we won't need to touch these for now. You usually need to touch these when you're working on the entire website. But right now we're focusing on the landing page. So let me close down these settings. And now that's a quick overview of the elemental workspace. In the next lesson, we'll now start actually working with containers to build the hero section. So I'll see you shortly. 6. Understanding Containers: Hey there, welcome back. So now that we've had a quick overview of the elemental workspace, it's time to start understanding how containers work. So let me just go ahead and delete that. And then instead of dragging this container here, let me click this plus icon here. Now, here are pretty build structures of a container. Dragging and dropping it in here is the same as adding any of these containers. But now these containers that have divisions inside of them are containers that have other containers in them as templates. These two don't have any containers in them. And they are the same as dragging and dropping it in there because it doesn't have any container. If we add this here, as you can see, it's a container. You can see by the border. And it has this container. And this container. If we add maybe this one here. As you can see, it's the container, and then it has six other containers inside. And now, if I delete this, let's have a quick look at this. Now because this outer container contains two containers inside of it. If we select it and display it settings, you will notice we have these items section down here under layout items, and we have the direction setting. And what these directions setting means is simply how the containers inside another container are arranged. So row, horizontal means they are arranged from the left to the right. Because now currently that's what we have left to right. If we want these containers to be stacked on top of each other, that is from top to bottom. We can choose this vertical setting like that. And now this is on top of base. Just to help us understand visually what we're doing. Let me drop a heading there and go back in here and maybe drop a button in there. So now remember these are still containers. And each container now contains an element. So this contains a button element and this contains a text element. So now going back and selecting this outer container here, we're now back to eat settings. Remember, we went from left to right. Let me select left to right, left to right, then to top to bottom. But before I click this top to bottom, we can reverse it. And that means the container on the left now be put on the right and the one on the right will be put on the left. So let's see that reverse and now they are reversed. And now let's stack them from the top to the bottom. That means the first container will now be on top and the second one will be on the bottom. And the opposite is from the bottom to the top. And now there will be reversed. So that's how a container works. And of course, it doesn't matter how many containers we have. What really matters is what direction you've selected for that outer container that's holding the other containers inside of it. So if we go back in here and add a container in here, Let's drop it inside there. And now we have three containers. And if we arrange them from the left to the right, select this. If we arrange them from the left to the right. Now we have three containers. And if we add some, maybe let's add a, let's add an icon there. So now selecting the outer container, we can reverse them. And the middle one doesn't change because when we reverse them, it will still remain in the middle. So now, as we build the different parts of the landing page, you will get to see these containers in action. And they allow us a lot of flexibility in how different elements flow on our webpage. And that's just a quick overview of containers. In the next lesson, let's get more practical and see how to put them to work to produce a beautiful hero section. That's the only way you'll be able to understand how to really use them. So I'll see you shortly. Piece. 7. The Hero Section - Adding the Hero Elements: Welcome back. So now let's put the theoretical knowledge we've learned about containers to work. So let's go ahead and delete everything from here. And now let's observe these section for a second. We have this container here that's holding the text and buttons. And we have another container holding the hero image. So let's add a double container. Container. In other words, a container that has two containers already. There we go. So now in this container, let's go ahead and add an image element. In this container. Let's add a heading. Let's go back in here. Text editor, in other words, a paragraph. Drop it as soon as that indicator appears. And then let's drop a button element. Alright, so let me first of all hit Update. And let's preview the changes. So that's what we have. Very basic. So now let's first of all add an image right here, an actual image of this lady. Remember I mentioned, are provided all these images in a folder called assets. Right below this image, just look at the projects tab below this image. So going back in here, I'll select the image element and this will change to edit image. So these are settings of this element. I'll select that box in there. For now. I don't have any images yet in the media library, so I'll go to upload files, select. And now this folder is in my desktop. I'll just click that. It's called assets. You can download it in the projects tab. So let me open it. This is the lady open. And it's now uploaded. So let me say select. There we go. So there's the lady. Second thing we need to do is change the font and font color. So going back in here, if we change the font to white, you won't be visible. Which brings us to the next step, which is changing the background of our website. So going inside this burger menu, Let's go to Site Settings. That will reveal all these settings right here. And we want to go to Background, background type. And let's select this color and turn it to black. I update that back to editor. Now we can change this font right here. We want to use a font called Montserrat. So to change these texts, we select the heading element, and this will change to edit heading. And we can go inside style. Change this to white. First of all, click anywhere in here in the editor to get rid of that box. And then let's go inside topography. And in this drop-down menu, type, Montserrat, select months, Iraq, and as you can see, it's changed to monitor rack. Next thing we wanna do is change the font weight. I like using black. That means a very bold text because this is our main heading on that landing page. I'll just go ahead and copy this. You will need to type it. Go ahead and copy that. And while this is still selected, go inside content, inside the title, paste it in there. Strong body, mind and soul. I'll select these texts. Going insights, tile text, color, change that to white. Click anywhere in here to get rid of that. And then of course, you will notice that this is Roboto. Elemental comes with default fonts, and mainly for the paragraphs, it's Roboto. And that means every time we add a brand new text editor element, it will always be Roboto unless we change it manually. Now, to avoid having to change it manually every time, we can go inside the burger menu, once again, site settings. And this is where now we change global fonts. Primary, that means the headings. We already changed these specific one to Montserrat. But notice that it's Roboto. That means every time we add a heading, it will always be robots. So unless we specifically say we want it to be Montserrat and we want it to be black. Let's go to secondary. Let's change that to Montserrat. Let's go to texts. Now. That's the paragraph texts. Change that to Montserrat. Let's go to accent. Change that to Montero. Update that back to editor. Now, for some reason this hasn't changed, but we can always change it manually. I'll find out why. So let's go in here. Inside, while this is selected, text editor topography, Montserrat. Update that. Let's review the changes. There we go. 8. The Hero Section - Styling the Hero Elements: So now we want to change the button to have these rounded corners. And at the same time, we need to give it this green. And I have that green color code right here. Let me just pick it from my other screen. Going inside here. Select that. I'll also provide these specific green color code just in case you want to go with that with the green color code selected, I'll select this button, coincide style. The button. We have topography. We've already changed to Montserrat, but we also have color. Select that, paste that in there. And you'll notice the button color has changed. Now for the text color, Let's change that to black, and now it's black. On hover. We want it to be white color. Now when we hover, it's white in color. We want the text to remain black. Let's also now go to the padding. We want to add the spacing between the edge of the button and the content, the text. The spacing right here. As you can see, it's slightly bigger here. So go to padding, break that link. To edit the individual sides. Without breaking the link. It means whenever you make a change to one of the cells here, it affects all sides. Want to edit individual sides. So uncheck that. Select the left, give it 50 there, right? 50. The top and bottom can be 20. And now for the border radius, Let's give it 50. To give it that rounded corner smaller than number here, the less rounded it is. So if we give it maybe 20, you see it changes to less rounded. If we give it ten, it's much less rounded. If we give it zero, It's not rounded. So let's give it 15. If you break this link like that, you can have one side without the rounded corner. Update that. Let's preview the changes like that. Fact I'll leave it like that. Now, one thing you'll notice is that we have two buttons. So how do we add the second button here? If we drag a new button here, it will come below this button right here. And that's because the buttons, the text editor and the heading are all inside one container. So if I select the container, if we look at the direction, they are all arranged from the top to the bottom. So all elements are going from the top to the bottom. If you want them to go from the left to the right and select row horizontal. Everything including the tax will be rearranged from the left to the right. But we don't want that. We only want the buttons to be arranged from the left to the right, not the text. So going back to this setting here, top to bottom, what do we do? We can use a container in here, drag a container and drop it in there. Then let's drag this button in there. And let's also drag these other buttons inside that container when that indicator appears. And now they are both inside the container. And now when we select this specific container here, we can change the direction to be from left to right. That's the power of containers. So now select this button, right-click, Copy. Select this button, paste style. And now it's inherited all the styles of these other button. But now we want it to be white in color. So while it's still selected, I'll go inside style. Color. Change that to white. And on hover. On hover, or does it change to changes to some light gray? On Hobo, we also want it to Bob. So while it's still selected on hover, wanting to be that light green like that. And while hover is selected, you will see hover animation. In this drop-down menu. You can select any animation you want. I like Bob and Bob, Just like that. Let's select this. Under hover, hover animation. Bob. All right, so let's go ahead and update that and preview the changes. Alright, now going back in here, let me select this heading. Go to style typography. And let's change the size to maybe somewhere there. Update that. And let's preview the changes. Alright, so now you will notice that they are not aligned well vertically. The text and the button seem to be slightly more elevated than the girl. Because if we draw an imaginary line here, these should be slightly lower. So now the best way to do that is to use justification. So if we select this main container and go to align items, this is where these are the settings come in. If we say center. Now, everything in reference to the outer container will be vertically on the center. That is the spacing from here. And spacing here will be equal. Just like that. Update that. And let's preview the changes. There we go. But now notice that this content is pushed all the way, almost to the edge and ours is pushed inwards. So going back in here, select the main container and content width in this drop-down menu, select full week. And now we have a full width container update that. Let's review the changes. There we go. But now we don't want it to touch the edges completely. So going back in here, while this is still selected, we can say maybe 80%. So 80%. And now it's occupying 80 per cent of the screens. Weep. Let's update that and preview the changes. There we go. Now, the next thing we want to do is add this background, these waves that adds some aesthetic value to them. Landing page. So going back in here, while this is still selected, I want to go inside style, background, background type. I'll select Classic. And now we have this image space here. Click that image because we want to add those waves as an image background. So I'll go to upload and you'll still find that wave in here. This is the neon background hero section. I already created it in Adobe Illustrator for you. And now we've uploaded it. So select. And there we have it. But now you will notice that it's cut off right here. So one thing we wanna do is go inside position and say center, right? Like that. And we also want to say no repeat, no repeat. Update that. And let's preview the changes. There we go. So now this brings up a small challenge here. As you can see, it's cut off because the edge of this section goes up to 80 per cent of the width of the page. And what we want is to have it go all the way to the very end like this. So we need to get creative here. Remember this, this container holds two main containers. It holds the textblock container and the hero section container. And the settings are running from the left to the right. And so if we want to add a container here, we need to add it right there. So now we have three containers, but we want to put this container, these two containers inside the new container. So I'll drag that in there. And then that in there. And now we have this container that contains those two containers. But by default, everything is running from top to bottom. So we need to tell it to run from the left to the right. And now these two containers are inside this container, that is inside this outer container. And if we make this outer container full width, now the background runs from the left to the right, edge to edge. Let me update that. And let's preview the changes. Alright, so now the inner container that's holding these two containers is still boxed. We want it to be full width, but now we want it to be 80 per cent. And we want to select the outer container to push this inner container to the center. So we want it to be center. Update that. And let's preview the changes. There we go. And so now at least we're starting to get somewhere. This text is slightly bigger, so let's select the heading, going site topography, make it bigger like that. Update, preview changes like that. And now let's align everything to the center vertically. Within this container. Just like that, update. Preview changes. Now everything is aligned properly. So that's how to build the hero section. But now you might be wondering, that's a beautiful Heber section, but we don't have a navigation bar. Where is the menu bar? Where is the logo? Don't worry, that's what we'll be doing. In the next lesson. Let's see how to add the navbar, which holds the menu and the logo. Just like this. The logo and the many. So I'll see you shortly. 9. The Nav Bar - Install ElementsKit: Welcome back. So now we've already worked on the hero section. Of course, I know we've not added this video button right here, but we'll do that, don't worry. But what we wanna do is create the napa. So going back inside our editor, this is the landing page, but this is not where we will create the napa. So I just want to exit from here. We'll be back here to build the rest of the page, all these other parts. But for now, let's leave this page. So I'll click this burger menu. And at the bottom here, there is exit. When you kick it for the first time, it'll give you a drop-down menu to select where you want to always be redirected every time you click Exit. So I'll choose WP dashboard. That means every time you click exit right here, you will always be redirected to the dashboard. This only happens once, so I'll select WP dashboard, then apply. First of all, let me cancel and update the changes are right. Since I've already selected where I want to be redirected, if I click Exit, You won't bring up that pop up. It'll just take me to the dashboard. So now that we already know this is version 6.2, let me dismiss that. And now to create these navbar, we will need to install another plugin, which is an extension of Elementor by the name elements keep light plugin. So let's go back inside our dashboard. Plugins, add new. And in here I want to search for Elementor. Elementor. And now you will notice, of course, in addition to Elementor, there are many other Elementor based plug-ins. These are plugins created by third-party developers to extend the power and features of Elementor. Elementor is developed by elementary outcome, but essential add-ons for Elementor is developed by WP developer, premium add-ons by leap 13. And what we need is elements keep elemental add-ons by WP met. So I'll click Install Now. We will also need the sticky header effects for Elementor, and I'll show you where it will be used. For. Now, let's note install it. We will install it when we need it. So now that elements kit is installed, let's click Activate. There we go. Now we have elements key light installed, and here it is in our sidebar. So select elements kit will be redirected to the step-by-step wizard where we can set up the plugin or add-on. The first step here is to select any of these three options here. Basically what these options mean is, depending on which option you select here. Some of the widgets and features here will not be active and available to you in the front-end while you're using Elementor. So e.g. if I select Advanced here, look at what happens to some of these widgets. E.g. the widget builder has now been activated by default. That means when I'm using Elementor in the front-end to build to build a page that we did build a will be available to me in the front end. And so will other several features down here. So I like using advanced. So let's click next step. Next step. Next step, share some nonsensitive diagnostic data. Next, max, save changes. Now elements kit is now ready for us to use. Let me get rid of that. 10. The Nav Bar - Add the Navbar Elements: And now you will notice under Elements kit, we have what we call header and footer. This is where we want to go, click Header and Footer. And this is where we can create different headers and footers that will show up on different pages depending on our settings. So I'll go ahead and add new. Let's call it header. The type is header. We can only have a header or footer. Conditions is that I want it visible on the entire website. Now, if you buy the Pro version of this plugin, you can decide you want this particular header to be available or visible only on specific pages. So I want it to be visible on the anterior side and I want it activated when you're doing some maintenance and you don't want this navbar to be visible while you're doing that maintenance. You can deactivate it. So save changes because I want it to be visible. I will leave it as activated and save changes. And there we go. So now it's active. Let's say edit. Edit content will be redirected to the front-end where we can now build it visually. Here we are. Now you will notice we don't have the hero section we already created. And that's because we left that part where we were editing the hero section. Now this is the part where we're editing the navbar. So let's go ahead and add a double container, container. The structure, this will hold the logo. So click this Plus at image because our logo is essentially an image. And while that's selected, this will change to edit image. Going here, upload files, select files. Fitness. That's the logo I created for this project. There we go. Select that. The next thing we wanna do is add our menu. So let's go in here and say plus. And in here, Let's type nav. Now, you will notice that we have to nav elements. We have the nav by elements kid, and then now by Elementor Pro. And we can't use these Elementor Pro nav element because it has this lock icon here. It's a pro element. So let me drag and drop this in here. And now when you drop it there, while it's still active, it's of course, edit elements get Nav Menu. These are its settings. And you will notice the first thing here is select menu, a menu like this. And this menu is made up of menu items. And these menu items are actually pages, web pages, the about page, Videos page, the sharp page, and the Contact page. That means we need to have a bunch of web pages created to be our menu items. So going back in here, I'll just hit Update. And then let's preview the changes. And of course we don't have a menu here. So going back in here, I want to go back to the dashboard, so I'll exit. And let's go inside pages to create a few pages. We already have the homepage. So I'll right-click this and open link in new tab. I'll do that again and again. So now going to those tabs, Let's change this. Let's call that about. We're not really concerned with these changes for now published. We just want to have some menu items that's published. Let's go on to the next videos published. Let's move on to the shop. Publish. Lots also have the contact published. So now going back in here, if I refresh the dashboard, now we have all these pages. Now the next thing we need to do is go inside appearance menus. And this is where we create the menu that has all those pages as menu items. And you will notice right here on the left that this part is faded out because we've not yet created a menu. Create your first menu below. So I'll call it fitness menu. And I'll make it the primary menu. Then Create menu. Now that it's created, we can add menu items from the left column, right here. And if I collapse this, menu items can be pages, which is what we're going to use. But they can also be posts like blog posts. It can be custom links. We can expand this and have a specific link right here. And then the link texts maybe learn more. And we can say Add menu, or we need to provide a link, I'll just put a hash. So now we've added that there. Or they can also be categories. But right now we want the menu items to be pages. And if we expand that, here are all our pages. So let me select all and add to menu. Let's remove these. Learn more custom link because we don't need it. And let's drag in, rearrange these menu items. Home. Contact because it's on the furthest right side. Home about videos sharp. Home about videos sharp. And now we're in that's done. Save Menu. So our fitness menu is saved. It has been updated with these menu items. So now going back inside elements kit header folder, header, edit with Elementor because we already started working on it. If we select the nav item that we added to this half and go to Select menu. Now we have the fitness menu available to us. If we select that. Our menu has been added. 11. The Nav Bar - Styling the Elements: But by default everything is black, so we need to, while it's still selected, go to style. Let me first collapse the menu wrapper panel. Go inside. Menu, item style, item, text color. Let's make it white. There we go. Let's go back inside content and say horizontal menu position, right? That will push it to the right side. Let's go back inside style. On however we want it to be this green. So let me just pull that green color. Copy that. While this is still selected, I want to collapse menu wrapper, menu item style, itemsets color, however, we want it to be that green. And when it's active, we still want it to be that green. I'll say Update. And let's preview the changes. There we go. But now of course this logo is too big. Let me close down these tabs. So going back in here, select the outer container and let's make it full width. Update that. Let's preview the changes. And now it seems to be off. So what's the solution here? The same solution we used for the hero section when we put these two containers inside a container that was inside the outer container. Let's see how to do that. So going in here, Let's drag a container right here. Because remember the outer container has everything stacked from the left to the right. And now let's drag the logo inside here side these new container. And let's also drag these container inside these other container. That means it should be below the logo. Just like that. Alright, so now let's select it. While it's still selected. Let's select left to right arrangements like that. While it's still selected, let's make it full width. And let's select the logo container and make it 20 per cent in width. Like that. Fact, let's make it 1010 per cent in width. And now you will notice we have this space here because we haven't given a specific percentage to this. And it should be 90 because this is ten per cent. The logo container is ten per cent, so they should occupy the remaining 90%, 90% like that. Update. And let's preview the changes. So there we go. But now on our reference website here, they were not very close to the edges. So going back in here, we can make this inner container that's holding these two containers. Full width, but 90%. Now of course, it starting from the left to the right. So selecting the outer container, we can put everything in it in the center. Just like that. Now it's smack in the middle. Update. And let's preview the changes. Just like that. So now that's how to create the nav menu. Going back in here, because we are done with the Navbar. Let's exit to the dashboard. Go inside pages. Homepage because we had started editing it with Elementor. It has this option. If you haven't edited a page with Elementor before, you won't have that option. So edit with Elementor. And there we go. So now notice this part is editable, the hero section. And the Napa is visible on our hero section or our landing page on the entire page. But it's not editable. And that's because this is not where we were editing or this is not where we created the nav menu. So let me just preview the changes. There we go. Of course we can push these outward. So let me first close this down. While we're here, we can just, we can select this inner container and make it 90%. Just like the navbar. Update that. And let's preview the changes. And there we go. So now looking at these and comparing it with our reference landing page, almost looks. Identical. So now let's add this video player before we call it a wrap. So going back in here, I'll open up the elements and then search for video. Video. And the one we want is this one by elements kit. So drag and drop it in there. We want to drop it right there. And then drag it all the way to n. Update that. Preview the changes. And there we go. So on however, this one turns green. But by default on however, the one we've added will not even change colors. So let's sort that out while this is selected. Let's go to style. Where is it? Button style, glow color. Let's first of all give it that green color. Background type. On hover. Let's make it green. Just like that. Update. Preview the changes. We want this icon to turn black on hover. That's the text color on hover. Let's make it black, even in its normal state. Let's make it black. Update, preview the changes. Now it's black on hover. In fact, they don't like that. Green and pink. I don t think they rhyme. So let me just change the glow color back to pink Update. And the reason I chose to go with bad pink default color is because it makes it stand out. Almost everything else is white and green, but this is pink, so it really stands out. And that glow wave also pulls the viewer's attention and just makes them want to click it. And if you click it, of course now it has that video. While it's still selected, you can add a URL to your video here. So if you have a YouTube video, this is where you can add it. And when people click it, it'll play that video. And that's how to add the nav menu. In the next video, let's see how to start creating the rest of these sections. So I'll see you shortly. 12. Body Section 1 - Part 1: We're back. So now that we're done with the hero section and the navbar, it's time to start building these different sections that make up the body of the landing page. So let's get started with this street right here. So going back inside our landing page editor, right below our hero section, let's add a container. Just like that. And inside this container, of course, let's add a text. I want to add a text editor, not a heading, just like that. Now, let me, let me just grab these texts right here, of course now you will type whatever text you want. So copy that green back in here. I'll paste it in there. But I don't want to paste it with its formatting, so I'll undo that. And then Control Shift V that paste the text inside these editor without any former team. Alright, so now while it's still selected, I'll go inside style, change it to black. And I'll change this background of the outer container to that green. So let me select this button, coincide style. Select this green. Copy that, and go back to this container here. Style, background type, classic color. I'll paste it in here. So now it's that green. The next thing I want to do is, of course, first of all, select these texts. As you can see, it has some padding or margin that comes by default. So while the text is selected, go to Advanced. Remove, break that link. And that link as well. I want to first of all go inside style and centralize it like that. And then typography. Let's increase the size up to that point. Maybe go inside advanced while it's still selected for the bottom padding, for the bottom margin. Let's reduce it just like that. And I'll see it's spaced out. So while it's still selected ongoing sites though, topography, letter spacing, Let's space it out like that. And don't worry that it's wrapping. All we need to do is go select the outer, select the outer container. Under Layout, let's make it full width. Just like that. Let's increase the top margin. Now let's reduce the bottom margin further up to somewhere there. Update that. Of course we'll need to add some margin between the hero section in this strip. So selecting the outer container, advanced margin, remove that link so we can edit just one cell, the top cell. Let's give it maybe 15150 is too much. Hundred. Update that preview the changes. There we go. So we have that strip. And of course we can increase as much, we can give it as much padding as we want on the outer container itself. So outer container padding, Let's break that. And let's give it a top and bottom padding, maybe 20, bottom, 20 top like that. Update. Alright, so there it is. Let me just preview changes. There it is. But now you will notice that this background is a little bit cut off by the border of the container holding everything in here. This one right here, as you can see, it's cutting off part of that. So let's select these container. And under the height, minimum height, Let's choose viewport height. Update that. And let's preview the changes. Alright, That doesn't change it. So we can just say 100%. Let's try that. That's trying to make it 100% of the screen. So with that, let's just reduce the margin at the top. But at the bottom, we've actually, we've gotten rid of that cart. Let's try maybe 80% of the viewport height. Preview the changes. I think that's much better, but we can do much better. Let's try 70 per cent. Update that. Let's preview the changes. Preview the changes. There we go. So now selecting this, we could actually reduce the top margin to maybe 50. Update that. It's all about playing around with these numbers until it looks good in your opinion? Yeah. So because we want it because I wanted it to be visible when you're on the landing page. So that's that. So basically that's how to create that strip. In the next lesson, let's go ahead and create this section right here. And if I refresh this page, let me just refresh it. You'll see these animations. This guy bounces in together with the texts, will see how to do all that. So I'll see you in the next lesson. 13. Body Section 1 - Part 2: We're back. So now it's time to see how to create this guy right here together with this textblock. One thing you will notice is that the background isn't moving. As we scroll, these waves remain fixed in one spot. So how do we achieve that result? Let's do that first before we start creating this guy. So going back in here, when we scroll, you will notice our waves are moving with the container. So selecting the container that has these waves as the background. And going inside style, we have attachment and it's set to default. We can make it fixed in one place. And now when we scroll, It's fixed in that spot. Update that. Let's preview the changes. Now if we scroll up, we don't have enough content below these to scroll. This is the last content we have here. So let's add a section. So I'll go down here and click the plus sign. And let's add, once again, I just want to add a container less container. So just like that. And now let's add the first container that should hold the image. Let me just add some dummy text there. And now let's add yet another container. So I'll drag and drop it outside the container we've just created. So now we have two containers, but I want this container that's holding the text to be after the image container. So let me drag this image container before the texts container, just like that. Now that we have them stacks like that, Let's go to the container that's holding them. This outer container. And let's change the direction to left to right, like that. So in here, let's add an image element. Well that's active. I had uploaded this image with this guy, so I'll just select it. There we go. And in here, we want to say get stronger faster. So I'll just grab that, select that under contents title. Paste it in there. And notice that when we add headings, they are Montserrat black, that is very strong, bold, and this is what we set as our global font for the headings. So while it's still selected, say style, text color, white, slightly bigger. This is a text editor, dummy text, so I'll just say add a text editor, Lorem Ipsum by default. While it's still active, let's go to style text color. Change it to white. Just like that. And we have these lists right here. So going back in here, select the elements list and it's an icon list. So I'll drag the icon list below that. And if I click the first item, I can change it to whatever I want. What is this? Heavy lifting. So heavy lifting, endurance training, bodybuilding, building, bodybuilding techniques. And you can also make the changes right here instead of here. So leased item number three listed two num three can just select that text. Endurance training. And of course now you will notice we can change the icons here. So if I select this, Let's type check. Because I wanted to check box, that's okay. Insert, Checkbox, collapse that, expand that, go inside the icon. Check. Insert. And finally, heavy lifting. Check. You can start that. And there we go. Now let's go and do. And you can add, as you can, add more items here if you want. So below here we have add item, maybe yoga sessions. It's also say check. Insert and now we have yoga sessions. Now to change the colors would go inside style icon. Let's change it to this green. I think they're white or are green. So selecting these, selecting these container going inside style, select the color, copy. Select the list style. Icon. Color. On hover. Color should be white. Just like that. Now, let's also do something about the texts. On normal state. We want it to be white. And on hover we want it to be green. Just like that. Update. And now of course, just like on the hero section, we want everything balanced vertically so that we have the same spacing down here as up here. These texts seems to be elevated to the top and we want it in the middle somewhere here. So we select the container that's holding these two containers. Go to items, Align and align them in the center vertically just like that. And now, of course, now you will notice this image is larger and it's almost at the edge. And that means that container itself is full width. So let's make this container full width selected for width just like that. And now let's add its background. So going inside style, classic, I think I had already uploaded these background. It's this background right here. Neon background left. I had already uploaded it. So bring insight media library. Here it is. Select. And now there we go. Update, preview the changes. Scrolling downwards. There we go. And notice that the pattern is repeating and we don't want that. That's what happens by default. So repeat defaults, no. No repeat. Update that. Preview the changes. Scroll downwards. And now it's not repeating. There we go. Wait, and I've just noticed we somehow lost the video editor. I don't know what happened to it. So of course it's very easy to add it once again. So just give me a moment. Video. He kids. Right there. I won't even work on it because you already know what to do. So let me just update that. And then let's preview the changes. There we go. So scrolling downwards. Now this container is too close to the stream. We want them to be separated. So let's select the container itself. Advanced. Break that link. Let's give it 150. Top margin. So that's spaces it out completely. And I feel like there's too much space up here. I feel like we need to push these elements upwards a little bit. So selecting this container that's holding everything advanced, margin, top, Let's reduce that spacing like that, maybe negative 85, depending on your preferences. And let's preview the changes. There we go. I think now that's very well-positioned. So scrolling downwards. Now, let's make this background fixed before we call it a wrap. So selecting that container style attachment fixed. Just like that, update. Preview the changes. Scrolling downwards. There we go. So now, of course, it's very easy to add. We forgot to add the button. And the button has an icon, so we forgot to add that icon. So selecting this button under Content icon, we can select from the icon library. I want this arrow insert. And we can put it after. So I can position after, just like that. And they say, join us today, view classes. So while this is selected and the text's content text, join us today. And this should say courses or classes. Let's do. Now. Let's duplicate this. So I'll just duplicate that button dragging. Now I'll drop it right there. And of course you'll notice we have too much spacing up here. So I'll select this text advanced margin bottom. Let's reduce it up to that, up to that point, and then select list, list, advanced, break that margin bottom. Let's increase that to separate the button. Update that. And let's preview the changes. Scrolling downwards. There we go. So that section is now complete. As you can see, the principles remain the same. The same things we did on the hero section, or the same tips and tricks we're using to create these other sections. Now of course, let's go on and create this next section here, we'll use the same principles, but the image will be on this other side. Let's do that in the next lesson. See you shortly. 14. Body Section 2 & 3: All right, So let's get back to business. So now we've just finished creating this part. Let's move on to create this section right here. So going back to our editor. So let's go ahead and add a double container like that. And in here, in fact, we can just drag, we can just duplicate this container here like that. Then drag it in here on the side of that other container there. Let's get rid of this. And we can also duplicate this. And drag mixed bag just like that. So let's get rid of that. That's how elemental makes things easy for you. You can just simply duplicate and reuse elements. So of course now selecting the outer container advanced. Let's add some top margin of 150 for uniformity. And while this is still selected, let's go inside layout and align everything to the center, vertically. Select this image going here so we can replace it. I'll go to upload this lady right here. Open. There we go. So there's our girl. Does she have a background? Of course, she does, but this is a simpler background. So going in here and selecting outer container style background, classic, let's select that background upload files. This is the BG elements. That's the background we created for that section. There we go, selects and now we have that nice background over there. Of course, we can increase the padding, the spacing between the edge here and the contents at the top and the bottom. So selecting the outer container. Let's go to padding, break that. At the top, let's make it 50 and at the bottom, 50. So now we have that nice spacing over there. While it's still selected. Go back inside layout. Now let's go inside style attachment, fixed. Now while we're scrolling, looks like one single background update there. Let's preview the changes. There we go. So let's start scrolling. Just like that. And there we go. But of course, let me change these texts slightly and the text size is larger than what we have on ours. So selecting that, go into content, paste that in there a man, Let's make the text bigger by going inside style. Typography. Think that's the perfect size for the perfect body. Then while this is still selected, right-click Copy, select this right-click paste style. So it makes it the same size as this. If it was maybe a different color, this would also be that color. Alright, so let's update that. And of course now in the next lesson we would have created these. But rather than wait till the next lesson, we're just going to duplicate this. Let's duplicate that container there, like that. Now we have to drag this below that container. Now it's here and it's still the copy is here. Select this image. We need those gloves. So I'll go here. Selected gloves. Select. There we go. World-class boxing. Copy that. Select that. Then in here on the title, world-class boxing. Now of course, you can change all these content at your own discretion. Customize it to your own specific needs. Were just looking at how to lay out every single element on the landing page. Alright, so now we have these services, and that's what we're going to be working on in the next lesson. So first of all, let me say this update. Let's see what do we have in the yeah, the background here is still the same as the background on this. Just like that. So let's preview the changes. Scroll downwards. And there we go. So in the next lesson, Let's see how to create these. Let's see how to create these features or services before we get to the testimonials. So I'll see you shortly. 15. Services Section: Hey, welcome back. So now it's time to create these services section or features section. And this part is a little bit more complex than the previous parts because it involves containers within containers, within containers. And so let's see how to do that. So going back in here, let's first of all create the container that's holding everything. So there's a container that's holding all these items. So let's first of all create that. And I just want to start from a blank container like that. Let's go inside advanced. Break that link. Top margin of 150, just like that. And let's update that. And while it's updating, let me just go ahead and duplicate that heading because we'll need a heading in there. And also these brief description dropping below the heading. And while this is still selected, I'll go inside style, align it to the center. While this is selected out, go inside content alignment center. Let me first of all change that to our features while this is selected title. That will remain like that. Update. So now going back in here, this here is a container and these are two elements. And they are arranged within the outer container that's holding all of them. And they are arranged from top to bottom. So let me illustrate that very quickly. Let me just zoom out slightly so we can view everything up to there. Let me now pick the snipping tool. So now, here we go. So assume this is a container. All of these is a container. And that container we have this element. And this element. And this here is a container as well. So those are three elements and they are arranged from top to bottom. So going back in here, they are arranged. Let me select this outer container. This outer container is this outer container, the black container here. And it has three elements, the heading, the description, and a container inside of it. And it's arranged from top to bottom, just like this. Alright? So that means we need to have a container right below these two elements. So let's add a container in here. So this container is what will hold these other containers. Alright? So, but now looking at this heading and this description, these are two elements arranged within a container from top to bottom, just like here. So a heading and its description within a container arranged from top to bottom. And then this container in this image are inside another container arranged from the left to the right. And this here is a column, contains this here is a container that is a column with three containers like this, arranged from top to bottom. Alright, so now that's what we're trying to achieve. I hope you've understood that. I hope you've understood these drawings, although they look like doodles, at least you've followed and understood how the containers relate to each other. So now we're working on. So now let's first start by creating this container here, CrossFit and its description. So let's go in here and duplicate this. And then duplicate that. So now let's draw this. In the container and this right below it. So they are both inside a container. That is this container here arranged from top to bottom. So if we select this container, it's arranged from top to bottom, just like that. Now, let's create this outer container that has the image in this container. So that means we're adding a container. Let's add a container in there. In this container. Let's drop these other container. Just like that. In this outer container. This outer container. Let's drop the image. So let me add an image in there. So now we have this container that's inside with the text and its description. And the second element is the image. So now it's time to select this container. And it needs to go from the left to the right, just like that. So now we have this container here. Next thing we want to do is create these container that's holding, that's like a row with three services, 123. Now let's drag another container in here, right below the text. And let's drag this container in there. Now. That's a service in there. Let's duplicate the service. Let's duplicate it once again. There we go. So now we've just created these column. But now remember we also have two columns. So those two columns are inside another container. And they are arranged from the left to the right. So we need to have another container and duplicate this column. So now let's add another container. And let's drag this container in there. So there we go. So now this container is holding three services. It's inside this container. So now let's duplicate it. But of course, by default, this container that's holding the two columns now is arranged from the top to the bottom. And if we scroll, we have that column up to there with three services. And then this second duplicated column. So what we wanna do is go and select this column or this. I'm using the word column because that was the previous workflow in element. So selecting this outer container here that has these two columns. Selecting it. Let's change it from the left to the right. Now we have two columns. That's that. Now that we have that, what else do we need? I think we have everything covered. So now it's just creating the content that's needed in here. Selecting this image. What do we need, this girl? So let's go inside and upload files. This girl. Open. All right, So select that. So we have that image. Let's first of all reduce the size of the heading. Need to reduce it drastically up to somewhere there. And we want it to be left aligned. So content left align, like that. Then I want to select these texts and remove most of it because that's just a brief description. And while it's still selected, style, left align. Now I'll select this copy. Select it. Right-click, copy. Select this right-click paste style. Select this right-click paste style. Select. Paste style. Select, right-click Paste. Select, right-click paste style. Select this. Align left, like this style, line left. Of course now this will be replaced with your specific content. I wanted to reduce this once again. Use that, use, that, use that like that. Update. And now the headings are green in color, and in fact they're not even any fact that note that bold. So I wouldn't go too. 700. Yeah, I think that's the right. Boldness, texts, color. Let's give it that green. So select that button. Style. Copy that. Go in here. Under style heading. I should've done everything I needed on this and then pasted it. So right-click Copy, Paste. I'll do that for every other heading here. Paste style like that. Let me select this image, cardio based. And then while this is selected, I'll go in here. Select the cardio image. Select. Go ahead and select this. This is CrossFit. Select that CrossFit, endurance, weight loss. And finally strength. So put that there. And let me just quickly these images. So elementary will automatically resize them for you to be same size. Although in reality the images do not have the same dimensions. And finally, let's add the weight loss image. There we go, so that this is what I mean. So if we select that, as you can see, elemental has resized it. So now let's select this image, go inside style, border-radius. Let's give it 20 to give it a rounded corners. Give it rounded corners. Let's repeat the same for the rest. 20 in here, style, style. It's running style. Ronnie. Finally, style training. So update that. And now remember, what would the about the alignment of texts that seems to be elevated upwards within a container. Or we need to do is select the container itself, this container, and align everything center just like that. So let's repeat that for all the services. Center. Select that center, select that center. Select that center, and finally select that center. Update. And let's preview the changes. So scrolling downward. There we go. Our services are now done. If you want, you can make these container full width. So select the container itself. Let's see. Yeah, select this container for width. Update. And let's preview the changes. Scrolling downwards. So the container that's holding them should also not be boxed. So let's select this. As you can see, it's still boxed, so full width, but let's make it maybe 70 per cent. Now, let's say 80%, 80%. And let's select the container that's holding these container. That's the outer container. And align everything center just like that. Update. And let's preview the changes. So scrolling downwards, It's a little bit more spaced out. And that's how to create these features section. In the next lesson, right before we go on to create the folder, let's create the testimonials. So I'll see you shortly. 16. Testimonials Section: Welcome back. So now it's time to create the testimonial section right before we go on to create the footer. So without wasting any more time, Let's jump right in. So going back inside Elementor, right below our services section, Let's click this plus sign and we just want a simple empty or blank container. And then in here, let's add a testimonial. Now we have the default elementor testimonial element and we have a elements, kit elements. So let's use the elements, keep one because it's very, it's much better. And as always, let's give it a margin at the top. So select the outer container, advanced, rate that link. One-fifth. Nice spacing up there. The next thing we want to do is select the testimonial itself, the testimonial element. While it's selected, we have different formats here. The one I like is this or this. So let's go with this one. And there we go. Let's go inside settings. And we can show two slides at a time. So let me just say two. Now we have to, right before we do anything else, let's make, let's go inside style. And for the border-radius, let's give it 20. Just like that. So let's go ahead and change the background color. Under Layout. Under layout, we have the background type, classic. Let's give it maybe a dark gray so that we separate it from the black background. Just like that. Click anywhere in here to get rid of that. And then let's collapse that for a second because we want to go and change the description. Before we change the description, Let's go to the content testimonial. Testimonial one. I just want to grab these testimonials here. So that's Emily Chan. Okay, I can't grab that. Can I? I can't drag that. So I'll just have to use some of these texts. So let's say this is Julia Roberts designation, maybe marketer. Now let's paste that testimonial in there. I'll duplicate it again. And now we have some substantial amounts of texts there. So going back inside, style collapse that go inside description, change color to white. Now that our testimonial collapsed that Let's go to the rating. You can change it to that green. So let me select this style. Copy that. Select the testimonial elements, collapse Layout, go to rating, color, change it to green, and now we have some nice consistent green collapsed rating. Let's go to the client. First of all, client's name color. We can make it that same. Green. Expand clients again. So go to discreet clients designation marketer. So the color should be white. Like that. What else? What's down here? Client image, we don't need to charge the client image. I think it looks okay. Or we need to do is added. So now let me just collapse client. Go inside the quotes, quote icon. You can also make it green in color like that. And then maybe reduce the opacity after somewhere there so that it's not screaming. On hover. We can just make it white or reduce the opacity. Once again, just like that. Maybe like that. We can copy that active. Let it also be that same color. Although these activities irrelevant here, because you can't click and make it active. So on however, it's just that color. Let's go back inside content settings. And now we can also enable loop. That will mean it's not going from the left to the right, left to right. It's just going in one direction in a loop. Show dots. We can show the dots so someone knows Which testimonial you're viewing now. Yeah. Leave that just like that. Then let's go inside. Testimonial. Testimonial one, Julia Roberts, clients, avatar. Let's go and upload files. These are the three clients. I'll upload the three of them. Select. So that's Julia. There we go. Let me collapse that. Second one. Maybe team hooks. Maybe. Jim mast. Let's copy some block of text. Copy that. Let's paste it in there. And then he's image. That's him. Let me collapse team. Let's expand. Maybe. Moniker. Their wings. The wings call, designation. Musician who likes health and fitness. Let's also paste some of the texts in there. Of course, Let's pick her image. Let's update that. So now we have three testimonials and I've just noticed we forgot to peak the heading and its description. Testimonials still undecided, this is what our customers had to say. So we can just simply duplicate this and drag it downwards. Drop it in there above. This container. Go here as duplicate that. Dragging. Drop it in there. So update that. And let's preview the changes while it's updating. Let's change this to test two monomials. Update. Once again. Let's preview it. Scrolling downwards. There we go. So our testimonial is now looking awesome. We're almost done with the landing page and I liked the results so far. But the most important thing is not to get the perfect website or landing page at this moment is for you to learn the workflow. I'm pretty sure you can do much better and produce a much better landing page with time. So take your time, improve on these skills. And this is just the tip of the iceberg. There are many more things, many more tips and tricks that you can learn. All right, So now that's how to create the testimonials section. In the next lesson. Let's go ahead and create the folder. Read before we make the website or landing page responsive on different device screens. So I'll see you shortly. 17. The Footer: Welcome back. So now it's time to create the footer. So without wasting any more time, Let's jump right here onto our landing page. And of course, just like the napa or the nav section, we're not going to be building the folder right here. This is where we build the body of the page for the footer and header, we build them separately. So now all I need to do is exit from here will be redirected to the dashboard. And we can go inside elements kit, header and footer. And we can say Add New. So let's call it folder, select footer here. That's the tag we wanted on the entire side. And we want it to be active. So say changes. There we go. So because it's not edited it with Elementor, it doesn't have these option. Click Edit. Edit contents will be redirected to the front-end where we can now build it visually. Let's do that. Alright, so now let's start with a blank container. There we go. And now we want to start with this. We want to start with this container here. It has the local and the brief description and everything is arranged from top to bottom. We've already now gotten used to those containers. I hope. So. Let's drag a container in there. And let's add an image element and a text editor right below the image. Just like that. It's just one container with two elements. Select the image elements, and let's choose the logo. Just like that. Select the description. I want to copy this. Copy that. And I'll select all this control Shift V to paste it without any formatting. And while it's still selected, I'll go inside style. The color needs to be white. Update that. There we go. Now, the next thing we want to do is create this part. And now just like we did with the snipping tool here, I want to show you how we're going to go about this. So once again, this is a container that has an image. And these texts. Then here we have a container that has two elements to Icon lists. And they are arranged from the left to the right. And then this here is a heading element. Together with this container here. They are inside a container and they are arranged from the top to the bottom. So we have the text and then the container in right here. Ignore this. Right here we have this icon, this social icons. And we have these sign-up form. These are two elements inside this container, and they are arranged from top to bottom. And then all of them are arranged inside a container from the left to the right. So we've already created this container that's holding these two. And that is this container right here. So what we want to do is create this outer container before we create these other two. So let's add a container in. They're going in here. Drag and draw up a container outside this inner container. No, I won't eat outside. All right. Let me drop it there for now. Alright, so, yeah, so it's outside this container. So now we want to drag this container in there. And let's duplicate it. One. Two. So now that we have three columns, those are like these three columns. Let's pick the container that's holding all of them. And for the direction, let's change it to three columns. Now in here, what we need is, remember this was also a container. So let's drag a container in here. Let's drop it in there. Get rid of that. Let me add an icon box, icon list in there. And because it's a container, if I duplicate that, there'll be stacked. But if I select the container, we can go to the directions and change them to two columns, just like here. Now, we need this text. That text will come here because select a heading. Drop it up above this container. Let's get rid of this image. Update that. Then in here, let's get rid of that. And let's get rid of that. Plus sign. Let's say social icons. I'll go with the elements, kids social icons. And that's how they look by default, you can't see them because the background is black. But while this is still selected, of course, by default, we have Facebook, Twitter, LinkedIn, and you can add as many as you want if you want Pinterest, Instagram and all that. So first of all, even before we go any further, let's open up Facebook. And let's go to color. By default, it's that gray, but we want it to be green. Do I still have that green? No, I don't. So let me just grab it from this other side. Copy that in here. Let's paste it. And now it's green. And in fact, I wanted the background to be green, not the icon. So paste it in there and they should be black in color, just like that. So on hover, we want it to be a white background. Just like that. Let's repeat the same for Twitter. Color. That's the text color, black, background color. Paste it green. And then on hover, we want the background to be white. Let's do the same for LinkedIn. Text color, black, background color green. On hover. We want this to be white. Alright. There we go. We can also align all of them to the right or left or center. Like that. If we go inside style, we can also reduce or increase the icon size. Update that. I wanted to select this text. And what does it say? Quick Links. So I'll copy that. While this is selected. Go inside. Quick Links. Style, white typography. Let's make it font-weight 700, just like that. Now, notice that this is spaced out. So that means this is full width. Let's first of all make the outer container full width. It's now full width. But now we also have the inner container that's holding all of them. Also needs to be full width. But we needed to be 90%. So it goes all the way up to here. Let's put it in the middle, selecting the outer container. Let's put everything in the center, just like that. Select this logo. Let's go insights tile width. Let's push it, may be up to 30%. And let's align it to the left. Like that. Let's select the icon list going in here. Can change that to check, Check, Insert. One about classes at item, let's say contact. It's also changed the icons. Check. Let's change these to check. Finally, this one to check. Insert. In. There we go. So let's do before we duplicate it, while it's still selected, let's go inside style icon. Let's change it to dark green. Do I still have that green? No. Let me select it from here. Content. Facebook copy that. Select these style icon. Need it to be green like that on hover, we need it to be white. Then for the text, typography, color needs to be white in color. And on hover needs to be green in color. Just like that. Let's duplicate the icon list. Delete that. And now for this, Let's change the items to privacy, policy, terms of service, and maybe licensing. Let's close that down. Update. Let's preview the changes. And that's what we have. So now notice here we have some more spacing between these two. And we have these sign-up form, which is very important. Going back in here. Select a container that's holding everything in here. This container advanced. Let's break these padding right here. And for the padding left, that is the spacing from the edge. Let's make it maybe 50, or let's make it one-fifth know, 100, 100. Update. Let's preview the changes just like that. But now what we need to do is create that sign-up form, and that's what we wanna do in the next lesson. So I'll see you shortly. 18. Create the Signup Form: Hey, welcome back. So now we've already created the folder, but what's missing is the sign-up form right here, on the right here on the right side of the photo. So how do we do that? We need to install a form plugin. There are several form plug-ins in the WordPress plugins repository, but I love forming later. So we'll need to install for a minute or so. Let's exit from here for now. Exit. And the reason I love formulator is because nominator is very powerful and it's free for you to use. And some of the most important features that it provides you for free are actually paid for in other form plugin. So you have to pay for those features when you use other form plugins. Use formulator and you get them for free. So let's go inside Plugins and Add New. And I'll just type four-minute are here. For terminator. The terminator. And here we are. So it's by WP MU Deb. So installed now. Right now it's installed. So let's activated. And here we go. And it's right here are almost at the bottom of the side menu. So let's go to formulator. You can click for me later or go directly to forms, but I want us to go to the formulator dashboard. So here we are. This is the home of the four monitor plugin within WordPress. So as you can see, we have different options. We can create a form or a poll. Right now we're interested in a form. So create. And we have templates here we can choose from that are already pre-built. So we want a newsletter sign-up. So let's go ahead and say newsletter sign-up, continue. Sign up. Let's just call it sign up or right. So now it's created. And now we have two fields. First name, email, and then a subscribe button. And if you want to preview it, you can just say preview. So we have first name, email and subscribe, firstName, e-mail, subscribe. And we can drag and rearrange these fields. E.g. we can put the fear, we can put them side by side like that in the free preview them. Now they're side-by-side. So I don't want to include the first name, so I'll just delete it. And now we're left with the email address. Just like that. Close that down. And now we want to give that button this green color. So let me just grab that green from this side. Once again. Copy. Going back in here. I wanted to go inside appearance. And this is a preview of the changes you're making. So if you go to flat, I like it flat without that hard border. Can also go bold material or none. I like that flat. And you can also adjust the colors, which is what we want to do. So click costume. This reveals every single part of an existing form. As you can see at the bottom, we have the Submit button. If I click that, we can change its color by clicking background color. Select that, I'll paste that green in there. Click outside. Then for the texts, Let's make it black. On hover. I want the button to be white. And on focus, I want it to be white. Let's preview that. On hover. Alright, so on hover, Let's make the text white, black. Unfocused. The text should be black on hover and should also be black preview that just like that. Publish. And when we probably sheet, we're given a short code. A short code is just basically a tiny code like this, and I've copied it. It's a tiny code that you paste anywhere on your website. And this form will show up. This tiny code represents a form. These 243 is the number or is the ID of the form. If you have like ten forming native forms, you've created four different pages. Maybe the contact page has its own form that has more fields. It might have a different number. Each form has its own unique number so that each short code displays a different form. So let me copy that. Shortcut has been copied successfully. Close that. Now, going back inside our dashboard, I want to open up our footer. So fitness portal, let's go inside the dashboard. I still have this page open, but I'm opening up the dashboard on a different tab so we can go inside elements kids, header, footer, edit with Elementor. And now in this container we want to drop a short code element, short code element. So let's drag and drop it in there. And this is just basically a field to enter our shortcodes. So let's paste that in there. And now, as you can see, the form is now appearing on our folder. If we drag this short code elements to any other part, the form will appear in that part. So update that. And let's preview the changes. And there we go. So this edit form is just a link to our editor. If I click, it will be redirected to the dashboard To continue editing it. But when you're not editing it, if you're a visitor or a customer to their website, you won't see these. Only the Admin can see these because they are actively editing the website. Alright, so there we go. There is our footer. Now, if we go inside the dashboard, dashboard pages, all pages. And let's view the homepage. Scrolling downwards. There we go. Our folder is now ready. But one thing I want to do is increase the margin between the testimonials and the footer because we need some nice spacing there. So while we're here on the page, we can go to Edit with Elementor. We can click header to edit the header folder to edit the folder. Or just click edit with Elementor to edit the page content itself. So now we're editing the page. Let's scroll all the way to the bottom. Select the testimonials container advanced for the bottom margin. Let's give it 100. Update that. And let's preview the changes. Scrolling all the way to the bottom. We don't yet have enough spacing. So while it's still selected, let's give it one. Update that and let's preview the changes. Scrolling downwards. Yeah, so now we have that 150. Maybe we can give it 200. Let's say 250. Update that. Let's preview the changes. Scrolling all the way to the bottom. Yeah, so now that's some good spacing between the two. And notice we need some more spacing here. So going back to our folder, select these two. If we select the container that's holding these two and go in here, we have justified content. We can center the content. We can justify from Start, which is what we had originally. We can push them to the end. We can have space between like that. We can have space around or we can space even. So I think space evenly looks okay. But now this is misaligned with the heading. So another thing we can do is just make these start from the very start and select this element itself Advanced. Let's go to margin, margin left. Let's make it 20, or let's make it 50. Up to that point. Update that. Let's preview the changes. There we go. So now if we go to our page and refresh it, scrolling all the way to the bottom. Now we have some nice spacing. We also have our sign up for and all that. Remember we can also make this logo a link. So going back inside our editor, if we select this image, we can turn it into a link, maybe a custom URL. And now you can maybe say your website.com, That's the homepage. And if you want this link to open in a new tab, click this cogwheel and select Open in a new window. Preview the changes. If we now click this, it will open up in a new tab. But of course that website doesn't exist. Your website.com. This is where it leads us to host. These are domain sellers. So basically that's how to build your landing page. We're almost done. In the next coming lessons, we're going to make this landing page responsive on smartphones and tablets because it already looks awesome on desktop. I hope you enjoyed the class. If you are, this is a good moment to take a minute and leave a review. Let other students know what you think about the class. How have you benefited from it? What do you like about the class? That will be very helpful? Now, let's get back to work. See you in the next lesson. 19. Make the Navbar Sticky: So right now we want to work on the navbar. We want to make some improvement. And to be more specific, we want to make it sticky at the top. You will notice right now if we start scrolling, the navbar disappears. And if you want to access other pages on the website, we will have to scroll back to the top to access the menu. That's not very user-friendly and our goal is to make the website as user-friendly as possible. So let's go inside our dashboard. And I want to go inside Plugins, Add New, because we want to add a plugin that will enable us to make the navbar sticky at the top. So in here, let's type sticky. I hope he brings that. Oh, yes. So it's sticky header effects for Elementor. So just like elements, heat, sticky header effects for Elementor is another plugin created as an add-on for Elementor. So let's install it now. Activate. And there we go. And it seems I need to update the elements, get light. Let me just click Update. Now. It's always good to keep your plugins updated. Alright, so now that we have sticky header effects installed, let's go back to the page. And now I want to hover over edit with Elementor. But because we want to edit the header, I'll click header. And here we are. So first of all, let me close down these navigator. And now, well this container is selected. I want to go to Advanced Collapse layout and expand sticky header effects enabled. Let's update that. Let's review the changes. Alright, so what we're previewing is the navbar. But what we want to see is a sticky effect in action. So let me click home to go to the landing page. But now we've already made the navbar sticky. So let's start scrolling. And now you will notice it's remaining at the top even as we scroll. So we still have access to the menu no matter what part of the website where at. But there's one little problem. Notice if we scroll to some text here, e.g. these texts, we can't read the menu because there's some texts in the background. So what do we do that we can introduce a background on the navbar. So going back in the editor, you will notice we have settings down here under sticky header effect. So scrolling downward. Background color, choose what color to change the background to after scrolling. So i'll, I'll switch that on and then I'll change that to black. Let's update that. Let's preview the changes. As usual, let's go to the homepage so we're able to scroll a. Now, if we start scrolling, you will notice the background on the menu is black. And that allows us to still read the menu content regardless of what's in the background. And that's how to make the navbar sticky to allow the user to access the menu no matter what part of the website they're at. And this gives them a good user experience. It's all about UI UX. In the next lesson, Let's add some motion effects to the different elements we have on the page. So I'll see you shortly. 20. Add Motion Effects: It's time now to add some of those motion effects we saw on the reference website. So let me just jump over to the reference website. You will notice that different elements are animated and that just basically add some cool effects to the website and makes the website more memorable. Just like that. So some dramatic entrance of the different elements we have. So let's see how to do that. So going back to our editor, now, this is the page we're creating. I'll go to Edit with Elementor and click that. So we can start editing the elements on the page. And here we are. So the page is now editable. So the first thing we need to do is select the container that's holding the textContent together with the buttons. This container here go inside Advanced Collapse layout. And we have motion effects. We have several. So click this drop-down menu. E.g. on the reference website, I have bouncing left. On this. Of course, I can use bouncing right. Go, select it. Go inside Advanced Collapse layout, expand motion Effects, drop-down menu, balancing, rights. Just like that. Update. Let's preview the changes. And there we go. So now basically we'll just use different effects on the different elements on this page and you can get as creative as you want. So going back in here, let's see. You can even animate these if you want, but I'll just jump that. It's up to you. Let me select the container that's holding this image. Going say Advanced Collapse layout. Once again, motion effects. Let's just say I'm zooming left or right. Let's select this outer container Advanced. I'll see zooming right. Update that. Let's preview the changes. First, the hero section, scrolling downwards. As you've seen, they've zoomed in left and right as we've set them. So basically just go ahead and do the rest of the motion effects. Add the rest of the motion effects. Every single element you add it can have a motion effect. So get creative. Let's see what you'll be able to come up with. And before we finish this lesson, I just remembered, I did not show you how to set the homepage. And it's very crucial because you want the roots domain two points to your homepage so that it's not your root domain.com slash home. It's just your root domain.com so that if it's fitness.com, it points to this homepage. It's not fitness.com slash home fitness.com. So how do we set that? Going back inside our dashboard? I'll go inside Settings, Reading. And here we have your homepage displays, and then we have options. So choose a static page and for the homepage, select home save changes. And now if I right-click this and open link in new tab, if we go to that, you notice now we're on the homepage and it's the root domain. And basically that's how to add the motion effects and set the homepage. In the next lesson, Let's see how to make the landing page responsive on tablets and mobile phones. I'll see you shortly. 21. Responsive Header: So right now we want to make this website responsive, or rather our landing page responsive. And we want to start with the header, in other words, the Napa. Let's see how to make the navbar responsive. So first of all, let me close down all these tabs we had opened. And now we're left with a landing page. So let me hover over this and then click header. Because we're working on the header. Now we want to make it responsive. So I'll go ahead and click this responsive mode button. And that will show these settings up here. And what we're really interested in, these three icons here, as you can tell, this is the desktop. The landing page already looks good on desktop. So let's work on the tablet version by clicking that I from up there. And now here we are. So immediately we switch to tablet mode. You will notice the menu has disappeared and that's because it's changed to a burger menu. If I hover over here is a burger menu and by default, in its inactive state, it's black and on hover it's blue. So we can change it to our green. So what I wanna do is select the menu itself. Go inside style because we want to change the burger menu styling. Let's collapse the menu wrapper and open up the hamburger style. And let's go to the background type. Let's change. I want to paste in the green color here. Just like that. I'll click anywhere in here to get rid of that. And we don't really need to change the whole bird settings because when you're using a tablet, you don't hover your finger over your tablet to click something, you just touch. So the hover effects won't really have any effect. Now, when we expand this menu by clicking it, it will bring up the side menu. So we need to change this background. So going inside the menu wrapper, which is the first item, background type, Let's change that to black. Now of course, it's black in color and it inherits the colors we set for the desktop. And I think I will leave it at that. But now we also have these toggle icon here. We can change its color by collapsing the menu wrapper. Going inside hamburger style. If I'm not wrong. And down here we have closed toggle. So scrolling downwards we have the background type. Select the color here, and paste that green in there. And now it's green in color. And I think I like that. Well, the menu is still selected. We can also go to the content and mobile menu settings. We can add logo here. Select that, select. And now when we touch this icon, it will bring up the logo, but it looks distorted. So going inside style, we can go inside mobile menu logo and work on the weep 100% and battled k. We can also work on the margin. Let's expand that. Push it in from the left. So margin-left update that. Now let's preview the changes. Now, we can use the dev tools that come with every browser to mimic different devices. So if I click on my Chrome control shift, I, it will bring up the Chrome DevTools. And if you click this responsive mode icon here, we can toggle between different devices. So right now this is the pixel five. If you click the drop-down menu, we have different devices here because we're working on the tablet version. Let's click iPad Air. And that's how it looks on an iPad Air. So going back in here, we want to make the logo slightly bigger. And what we wanna do is work with percentages of these container that's holding the logo and the menu, selecting the logo itself. Let's change these units to percentages. And let's also select these container that's holding the menu and change that to percentage. And now let's make these may be 20%. And I think that's a good size update there. Now if we preview the changes, I think that's a better size than we had before. Going back in here, Let's reach the mobile version. So clicking that, now you will notice the logo and the menu are stacked, but we want them side-by-side. So right now it's just playing with the percentages. We can give the logo maybe 50% of the width of that outer container. And of course, gives these other container 50 per cent. What about 149 per cent? I think maybe let's give the logo 30%. And this lets give it 70%. Let's reduce the percentage up to somewhere there. Update that. And let's preview the changes. And let's switch to any mobile phone we want here, maybe the pixel five. That's how it looks on a pixel five. Let's look at the iPhone Pro, iPhone 12s pro. That's how it looks on an iPhone 12. We expand that. That's how it looks. These are setting icons. The logo is visible on an actual phone. And basically we're done with the responsive mode settings for the header. In the next lesson, Let's see how to make the main body of the landing page responsive. So I'll see you shortly. 22. Responsive Body Sections: So right now we've just finished working on the responsiveness of the header or the navbar, and we're done with that. Next, we want to work on the responsiveness of the body itself. So if I go inside the menu and click home so we can, so we open the homepage. This is how it looks currently before we do anything. So as you can see, we don't really have a lot of work to do on the page. Fact it's going to take just a few minutes. So let me toggle away from the responsive mode settings and closing down the dev tools. Now let's go to Edit with Elementor. Now we're editing the page just like that. So let me get in here where we were editing the header and actually just close that down. So we're left with this. And then as always, click the responsive mode icon up here. And let's switch to tablet mode. So that's how it looks on tablet. Let's begin by selecting the container that's holding the textblock and image. And I think this is it. I'm unable to select it. So I'll go to Control I to bring up the navigator. And now this container here is the topmost hero section container. And inside it, it has the container we're looking for. This container. And inside that container we have the two containers. This one holds the textblock and this one holds the image. So select this container. Now it's selected. Let's go inside advanced. Let's break first of all this margin to push it down that. And let me select these texts. And let's reduce the size by going inside style typography. I think that's a good size. For the buttons. I think we can have them stacked on top of one another. So I'll select the container holding the buttons. Then for the direction, I'll change to column vertical, like that. And then let's align them to the start. To the start. Just like that. Update. Now, we have, I think we have too much margin or padding around this inner container. So selecting it. What are the settings here? About the outer container? Weight? We need to select this. And in the layout. Let's make it 100%, 100% not beat cells. I think that's a good size. 90%. Update that. And I like it like that. But of course, if you want to make the image bigger, you can also decide to make them stacks instead of having them side-by-side. So you can select this outer container holding the image container and the texts container. And for the direction, switch to that. Then select this container. Switch to 100%, 100% like that. And for the image, also, change that to percentage, 100% like that. So it's all about how creative you want to get and different people will have different settings for their landing pages. I think that looks good already. But of course, if you want to make changes to it, you can just select the text editor itself. Go to style. E.g. I want to edit the topography, line-height. Think they're too close to one another. Like that. I think this already looks good, but we can reduce the size of this heading. Style typography. Let's reduce it to maybe 45. And everything else looks good. Going inside here. You can also select this style typography in the text size 45, like the other one. And because it's too close to the edge, I'll, I'll select the outer container. Advanced padding. For the left. That's the right. We can give it 20. And for the left, 20. So that will push everything inwards from the edge. I think this looks good as well. You can select this style typography. Size 45 is okay. We can also work on the padding like we've done with this other one. Now. Here the solution is very simple. Simply let's go inside each service container like this service, and stack everything from top to bottom like that. And then let's select the text here. Align it center, description, style, aligning center. Let's repeat the same for these other services. So here's a container direction, top to bottom, center, aligned center. Select the service direction. Almost done. Direction top to bottom, center, style center. And finally, direction top to bottom, center, center. Awesome. And now this text is too close to the edges as well. So going back in here, select the container that's holding everything advanced. And let's go and change the padding on the left and on the right. So now we have some nice spacing there. Well, we can also reduce the size of this heading. 245 for uniformity. Testimonials, 45 as well. Select a container that's holding them. Advanced padding for any left, 20, right? That looks good. And basically that's it. Oh, we can select this hero section header and also put it on the center. Just like that. Then the text style center. And we can also select the buttons, container and push everything to the center, align items to the center, like that. Update. And let's preview the changes. So now Control Shift. I then told her this. Let's switch to iPad Air, and that's how it looks on an iPad Air. Think everything is looking awesome. If we switch to a mobile phone. Let's go to the more. Let's go to the iPhone 12. I think it already I think it already looks good even if we have not touched it. And I will leave that to you so you can make any changes or improvements you feel are necessary for the mobile version. But I think it already looks good. It's inherited the settings we've set for the tablet. So of course now if we scroll to the folder, you will notice we have some misalignment, and that's what we'll be working on in the next lesson. So I'll see you shortly. 23. Responsive Footer: Right now we're right here on the folder. We just need to make a few adjustments and we're done with a footer. So without wasting any time, let's toggle this icon right here, and let's close down the DevTools. And then of course, hover over these and click Folder to edit the food itself. And this is where we were editing the main contents. So let's close that down because we've saved the changes. Now, this is where we're editing the folder. Click the responsive mode icon once again. And let's switch to tablet. Right off the bat. That's how it looks. If we select this container that's holding the quick links and go inside advanced, you will notice we're inheriting this 100 left padding from the desktop mode. Just like that. So going back inside tablet, Let's break these grabbing. That resets everything and we can set the values we want for the tablet version. But if we go back to desktop mode, it still has its hundred. So let's go back inside tablet. So let's see what we can do here. If I select this container that's holding the links and go to the direction and make everything start from the beginning. We had some padding or margin on this. So selecting that advanced, Yeah, we had left margin of 50. If we remove that, we have those two sets of links. I think now it looks much better. Actually. If I select the logo itself, go inside, style, can increase the width up to that point update. And let's preview the changes. Of course we need to control Shift I and then toggle this. That's how it looks on mobile phones. But what about iPad Air? That's how it looks on iPad Air, I think it already looks good. Let's switch to iPhone Pro. I think it also looks awesome on iPhone or mobile screens. So we don't really need to make any changes as far as I'm concerned. But just in case you want to make changes to the mobile version, all you need to do is click this icon here. And e.g. if you want to centralize everything. So let's select this image. Content, align it to the center. Select this text style, align it center. Select this container here. Layout. Let's align everything to the center. This is also another container. Align everything to the centre. Select this container here. Align everything to the center. And now you have a different setting. But I will go inside this history and go back to where we were a moment ago. I think it was right there. I like that setting. This is where you can have a look at all the moves you've made since you started editing. Content on the page or on any editor. And as you can see, this is the earliest, this is editing started and this is the latest change we've made. We can go back in time and restore the way things looked a moment ago. I wanted to hear update that. Let's preview the changes. And that's how it looks. So of course, you can do much more. This is just a workflow for you to get started. The more you use elementary, the more creative you would get, the more you will discover different ways of achieving the same results. So it's up to you to keep practicing and getting better and understanding how to use all the features of this awesome tool. So let's get away from this area. I'll just over that and close that. Going back to our editor. In fact, let me exit from here because we are now good. Or let's preview changes and then click home. Well, let me just remove that and go to the homepage Control Shift. I toggle that so we can have a look at it from the top to the bottom. First of all, before we scroll, It's open the menu. That's how he looks. Escape. Scroll downwards. And there we go. So let's switch to tablet mode, iPad Air. That's how the food looks on iPad. Scrolling upwards. Now exiting there to look at it from the desktop version. So basically that's how to build this landing page, as mentioned towards the class, my intention was to show you how to use the containers to build a beautiful landing page. The containers are the brand new way of building web pages using Elementor. You can always use the sections and columns workflow that I've been teaching in all my previous elemental classes, which you can check out by visiting my profile. Now, before we wrap things up, I have a few more important tips I want to share with you. And then we call it a wrap. So I'll see you in the outro. 24. Final Thoughts: Congratulations, you've finally reached the end of the class, which means you finish building your landing page. I just want to take a moment and thank you for joining me in this course on building landing pages with Elementor. And I sincerely hope that you found the content helpful and informative and that you've gained valuable skills that you can apply to your own web development projects. Now that you've learned how to build a beautiful landing page with Elementor and by extension, beautiful website with Elementor. It's important for you to ensure that it's SEO friendly. There are several things you need to do to make your landing pages and websites visible to search engines because that's how you get discovered. E.g. you must have noticed when we were uploading images from our computer to the WordPress media library, we had text fills that we did not bother to fill. But these texts fields are very crucial for your SEO. You must provide details such as the alt text to make the images more accessible, making the page more SEO friendly. Another example is that we used headings on our landing page, but we did not set a hierarchy for them. Starting from one all the way to H6. It's very important for you to understand how to use headings in a hierarchical fashion for better page structure, which improves your SEO. And this is just the tip of the iceberg when it comes to the actions and steps necessary for search engine visibility. If you're interested in learning more about WordPress SEO, I have a full step-by-step class available for you on my profile right here. And I highly recommend you take it immediately after this class so you can understand the things you need to do in your future websites to make them more visible. And finally, if you found this class useful, I would highly appreciate your feedback. Please take a minute to leave a review about the class to help other prospective students know what to expect from me and also helped me improve my future classes. What did you like about the class? How are the lessons? Was the teacher engaging? To leave your review, simply click the Review tab below this video player, and it will take you less than a minute to do so. Once again, thank you for taking the class and I hope to see you in my other elements of classes very soon. Until next time. Have a good one piece.