How to Build a Landing Page in Elementor v4 | Step by Step

In this tutorial, I'm going to show you how to build this boxing, gym landing page from scratch using the brand new Elementotor V4 editor. We're talking boat hero sections, dynamic training cards, theme profiles, the full thing. Along the way, I'll walk you through everything that makes V4 a game changer, how to set up global variables, how to use classes to keep your styles consistent, how to nail responsive web design across every screen size, and how to build reusable components that save you serious time. This is a full thing step-by-step walkthrough where I talk you through everything. So, by the end, you'll know exactly how it was built and why. Now, let's get into it. Hey, before we get started, if you wish to learn a little bit more about the Elementor V4 editor, you can go to element.com/roucts/website-builder or you can go here under products build with Element V4 and check it out. If anybody wants to try it out, I will put my affiliate link in the description below. In this video, I'm going to be using this one here, but as long as you've got Element Pro, you should be able to follow with this video. And if you wish to try it, I will leave my affiliate link in the description below. They do give you 30 days money back guarantee. And they also offer agency tiers here with unlimited websites if this is something that you're interested at. Currently, this one is on a launch offer which gives you 25% off and they have a couple of new features that are worth checking out like like the AI generated code, copy, images and layouts, image optimization, site accessibility. We also have email deliverability and site management. I've already made a video on those apps and I'll link that in the description below if you wish to check it out. Now, let's get started. I've already installed Elementor. So, I'm going to close this. And I've already set up the Hello Element theme just so we have a blank canvas to work with. We're going to be building the landing page. And before we do that, we need to set up some of our branding guides. What I mean by this is I've created a little cheat sheet here for the colors that we're going to be using and some of the variables basically. So, we're going to have a couple of branding colors here that we're going to try to use through the entire website. And this is going to allow us to then basically easily update those values through the entire website if you ever need to. The same goes with the headings. We're going to do this later on. The font and so on. So if you ever change your mind about the base font or the headings font, you don't like it, you should be able to change the font from the variable and that will update globally on your entire website as long as you've done it correctly obviously. So let me show you how we can do this. So first of all, let's go to our website and we need to edit this with element. I'm going to click edit page. Let's click edit with element. And the first thing that I'm going to do is remove this heading because this is going to stay on otherwise. And to remove this, you can go to the page settings and then just take the height title here to yes. And it'll be gone. That's all you need to know here. And then let's jump back to the elements here. And let's remove the text as we don't need it. So let's publish this and let's have a look. So here we have all the new atomic elements. And if you scroll down even further, you'll see that we've also got an atomic form, which is pretty cool. It basically allows you to change any of the elements inside the form, which is quite handy. But, uh, today we're going to be focusing mainly of these here. So, in order to get to the variables manager, the only way I know of is to drag an atomic element. Let's say this div and then if you click on it and then if you go to any of the styles that for example spacing and if you go here you will see that when we hover over this property we'll get this variables icon. If you click on it and then if you click on the variables manager this will now open. There must be a way of opening this but I didn't really see it anywhere. This is what we need at the moment. So I'm going to zoom in quite a bit so you can see a little bit better. And now we need to basically transfer these variables inside our element. I'm going to put this to the right side. And I'm just going to copy and paste them super quickly. Let's create the first variable here. And this needs to be color. So I'm going to copy the first one. This is going to be a hex value like so. Create a new one. Color primary. This is going to be a yellow color. I also want to hover for the primary. So, let's create a new one. Color primary here. And this is going to be a slightly darker yellow. Then we need another one for the body text here. This is going to be slightly darker. We're going to have one for the headings. This is going to be white. So, we don't need to change anything. And I also from time to time I'll be using white on the website. So, I'm just going to create a white one. I know this is very specific. So if you ever change this to red, it won't make any sense. But I think this will be fine for now. Uh let's do it this way. The next thing that I want to do is to add two more variables for the base font and for the headings font. So I'm going to click add new font. Let's give it a font family base. And this is going to be another Google font called Monroe. And I'm going to add one more for the headings. So font, let's put it inside here. And this one is going to be another Google font which is called epilogue. I don't know how you pronounce this but here it is. And the last one that I'm going to create is kind of like a set width for the inner containers. For example, even though that website is sort of full width, looking full width. I want the container to be in the middle and I don't want this container to go above a certain point. So what I'm going to do, I'm going to create a new one. This time it's going to be size and I'm going to put container width. So on this one I'm going to put it to 1280. And you can put this as whatever you want. And this will be nice because as long as we use this we can always change the container width to whatever we like. So I think this is nice setup. Let's save this. And another thing that I need to mention is that in certain situations, for example, only the header in this case, we're going to need to use some of the pro old features. For example, the menu, any of the basically old elements, we might need to use them from time to time. In this tutorial, we only going to be using one. But what I wanted to say is that there is an easy way of syncing those colors with the global colors. So, what you can do is here if you hover over the color, you can click on the three dots here and you can sync this to your global colors as well, which is really, really handy. And I'll show you how this works in a second. So, let's do that for all colors, like so. And we should be good to go as long as we save. And the last thing that I'm going to mention is that you can reorder these if you wish to, but I like this order, so that's absolutely fine. And now we can start focusing on actually creating our layout. So let's go back to Elementor here and let's click on the theme builder and we're going to start with the header. I'm not going to spend too much time on the header itself, but I'm going to just build something basic just to show you how those colors will work on all the elements. It's going to be super simple. This one, if we click on the header here, let's create a new one. And from here, you can either choose one of the blocks that they've already got. And if you have the new one version of Elementor, then you can even generate variations, which is pretty handy. But in this case, we're going to build everything from scratch. So, let's close this. And let's build this. Let's start by going to elements and then we're going to drag a flexbox element inside here like so. And this is going to be our header. Now before we do anything else, I want to publish this and I want to make sure that this header is applied on every single page of our website. So I'm going to add condition and leave this to the entire website. So save and continue. And if we go to the website, I mean we won't see much. Basically, you'll have a blank space here, which is absolutely fine. The first thing that I'm going to do is go back to general here and change the HTML tag to header. And then you can even change the flexbox name here. If you double click, you can do header like so if you wish to, but this is just to stay organized. It doesn't really do much. The rest is going to be styling. Let's go to background and change the background to B2 or background color. If you hover over the color here, you should be able to see the variables. Click on it and then select color background. Here it is. Our background color is black. And now we can start dragging elements. So I'm going to go to the element panel and drag. So the actual logo can be done with image, it can be done with SVG, whatever you like. And maybe these are better ways of doing it. It's very easy. And you can link them as well. It's not a problem at all. But I'm going to use the site uh logo here. And then I'm going to change it super quickly. So I've already got the site name to jab, which basically stands for the punch jab, and B for boxing. That's pretty much it. And then let's change the image. I can put those images in on my blog, by the way, if anybody wants to download them and follow along. So, I'm going to select this logo and maybe select the five icon, which is this one here. Let's save this. And I think once we save this and go back, the logo should reflect. Oh, let me close it. Yep, the logo is now here. And now we can drag the menu. So, I'm going to be using the WordPress menu here. Let's drag it just after the logo like so. And here it is. Now, the reason that this is looking a little bit broken is because I've zoomed in so you can see a little bit better. But if I zoom out, you'll see that this is looking better. So, let's style the position of those two elements. And this is where the flexbox element is great because it allows you to basically position elements inside this div however you like. If we go to the layout, you will see that this is ticked as flexbox and you have a lot of options like the direction you can have as road at the moment. You can have as column where the logo stays above and then the actual menu is below. You can reverse stuff you can reverse column and so on. So let's keep it as row. But the beautiful thing about the flexbox here is that we can justify the content and we can push those two elements to be space between. So the logo goes to the left and then the menu goes to the right. Then we have another option here of aligning the items. And if I click the center one, you'll see how the logo is now aligned with the navigation here, which is awesome. This is pretty good. The other thing that I would personally do is to do a little bit of space. So what I'm going to add is under spacing, I'll probably just add a little bit of padding on the left and the right. So on desktop, we can do 40 to the right and 40 to the left. And this is going to trickle down to tablet and mobile. As you can see, we've got it. But I don't really like that much space. So maybe we can go back and I can change it to 20 on desktop. Like so. And that looks much better. But now on tablet looks fine. But on mobile, the next step would be to style the actual menu here. I'm going to click the edit button. First of all, I created a little menu from the menu screen and called the main menu. And I've got two pages. Nothing special here. Under settings, I'm going to remove the pointer because I don't want the underline. And then I'm going to put the actual mobile dropdown to be full width because this one looks kind of ugly. So I'm going to do full width. And this is way better. The next bit would be to actually do the styling. Styling is very easy in here. We can start with the topography. Let me just grab the name. Unfortunately, we do need to change this one manually. So, let's click on it and change it to mind rope. Can't use the variables unfortunately here, but that's absolutely fine. But for the colors, we can actually use the colors from the goble colors that we synced in earlier. So, I'm just going to choose the color text white in here. And this will be for the main menu. Uh, which is this one here. I don't know why it's not changing, but um maybe we can change it for the hover. And for the hover, I'm just going to choose something slightly darker white. And for the active, maybe slightly darker white as well. And that will be fine. I'm not going to spend too much time on the header itself here. That's all good. Let's publish this. And let's have a look how it looks. Yep, that's looking good. And for the tablet one, maybe we can just change the color from the drop down here. Uh, I'm not going to mess around with the dropown. I'm going to just change the toggle button to this one here. The background color should be fine. I don't know why. Let's change this one here as well. I don't know why it's gone dark. Let me just try it super quickly. Right click, inspect. And yeah, I think it's working. Maybe if I refresh, it will be fine. Yep, everything is looking the way it should be, which is good. And I am zoomed in a little bit, by the way. Um, the last thing that I would probably do is maybe change the font size here on the main menu. So, let's go back to main menu and go to typography. Change the font size to 0.9 RAM, I would say. And that'll look a tiny bit better. Yeah, I am zoomed in by the way. And this will be your header completed. Just like that. Now, we can focus on the fun part of this website, starting with the hero section. So let's go here and click on the homepage because that's what I want to edit. And we should have a blank canvas that we can start working with. So we are currently on the homepage here. We can click edit with element and we can start building it. So for this I'm going to drag a flexbox element on the page here and I'm going to give it a size so of and then we're going to change the height to 95. And this is going to be the VH which is the viewport height. And now we can add an image to this. So let's go to background, select an overlay here. This will be an image that I can select. And I'm going to use this one here. Let's select it. And from here we have a couple of more options. For example, resolution position. In this case, I want this to be center. And then I don't want this to repeat. So, no repeat. And I want this to cover the the entire div. So, you can just select the size to cover. And that's pretty much it. You can mess around with the attachment as well if you want this to be fixed when you scroll, but I like it the way it is. And then I'm going to do one more overlay. And this one is going to be for the gradient. So, let's click on gradient. I'm going to swap the gradient here with the white. In fact, yeah, let's swap it with the white. Let's change the black color here to be this one here. So let's see if I can do that. So this one is the same as all variables. Unfortunately, let's see. I don't think that we can select the color from our variables. And then this is going to be linear as it is basically. The other thing that I'm going to change is the white here. I'm also going to change this one to black. So I'm going to change to the same color, but this time I want to change the opacity of this. So if you click the on the actual color, you should see this percentage sign here. And if you put zero, this will change the black color to be zero. So opaque. And now you can mess around with the fade essentially to whatever suits you. And I'm going to leave it to something like this. And this is basically going to act as a separation because when we add the text, I want the text to be readable. And that's pretty much it. So if I was to publish this and if I was to go to the front end of the website here, you will see that all hero image is starting to look good. Now inside here, I'm going to add another flexbox. One thing that you might want to do here is if you select the flexbox here, you can change this to whatever you like. For example, you can have it as section if you wish to. And you can rename this to hero because we're going to have a lot more sections later on. Okay. inside our hero section. Let's add the title and the body text. In fact, let's add all of them. So, we're going to drag a title. We won't style it just yet. We're going to drag a paragraph. Let's see. And then we're going to drag a button. Here we go. So, we should have all of these in here. And they do look a little bit odd, but if we click on the hero section here, make sure you go to style and then make sure that we have flexbox. In this case, if we change the direction to column, you will see that they're now stacking, which is great. And we can justify them in the middle of the page and align them in the middle of the page like so. So, the last thing that we need to do inside here is to basically style each individual element. And then one thing that I was going to mention is that if you're not happy with the size on tablet, you can always click on tablet and you can go to size for example and maybe change this to I don't know 80, something like this. And you can even go to mobile. And I believe that this is not too bad. Make sure that you save continuously while you work on this. And uh let's start with the title. So for the title, first of all, this is going to be an H1. So click on it and make sure that under general settings, we change this to H1. And let's change the title to something that we actually want. So I'm going to put unleash your inner champion like so in two lines. And then we can start styling it. If we go to style, I was thinking that we can create different class names for the headings. For this one, for example, we can have heading dash H1. And we need to create the class. So click create class. And here we go. The trick here is that if you want to change the class styles, make sure that this is lightening up. Otherwise, if you click on local, you're only going to be changing this specific text here without applying it to a specific class name. But in this case, we do want to create a heading H1 class just so we can reuse it throughout the entire website. So, a couple of things here. We're going to go to typography and here under font family, we're going to use a variable that we created earlier and we're going to be using the headings one. Here we go. For the font weight, I'm going to go black. And then for the font size, I'm going to go with, we don't have a variable for this. Whoops. So, for the font size, I'm going to go with rims. And I'm going to go with something like 8.2. Now, this actually looks great on the front end of the website, but because I'm zoomed in, it obviously it's going to look a little bit broken. So, I could potentially just for the sake of this tutorial change it to 7.2. two. And this needs to be a rim. And it doesn't really look that much better. So maybe I zoom out. And this is how I want it to look like. Now, let's go and change the text color. Don't change the text alignment just yet, and I'll tell you why. But if you go to text color, let's select a variable, and I'm going to choose the text headings. So it's white. This is now applied to this specific class name. And I don't really want to apply text align because some of our headings will be left align, some will be right aligned. And I want that to be specific to the heading that we're working with. So in this case, what I would personally do is I would deselect it and then I would align this text in the middle like so. But we haven't actually finished with this. So let's go back to the heading and let's continue. So there are a couple of things I want to change here. Um, of course I want the text to be slightly bigger than this. Maybe we can even make it 7.6. And then now for the height, I was thinking that we change this a little bit. And maybe we can put it as seven rim. Let's see. Yep, that's already looking good. And for the letter spacings, I was thinking that we can put a negative of five pixels. And that puts the text a little bit closer together, making it look cool in my opinion. And I think that's more or less it. The other thing that I would personally do here for the specific class is the text transformation. I always want this to be uppercase. Even if we type the actual thing with lower cases. Now you won't be able to see it, but even if we type the text with lower case, I want this to be always uppercase. So it's styled the same way everywhere. Let's handle the responsive design in here. So if we go on tablet, this text is way too big. So what I would do is basically just change the font size from here. And I'm just going to have a complete guess to be completely honest. We are maybe looking at around 5.3, maybe even 5.2. And just like that, we'll probably have to change the height as well because that one isn't good enough now. So maybe four, maybe five. Five looking good. And the letter spacing is absolutely fine. Now for mobile, that might be really big. So again, we'll probably change it to 2.5, sorry. And as you can see now, the letter spacing is looking a little bit odd. So we can reset this. And the height is looking a little bit odd. So we'll just have to mess around to see what we like. 2.2, let's say, or 2.4. I think this would work. Just like that. You can mess around to fit it to whatever you like. And this will be all applied to this heading H1 class. The last thing that I'm going to do for this specific U H1 class is put some space in between. So I want to add a little bit of margin. So we can push the body text here. And we can unlink this and maybe give it a 40 pixels like so. That looks pretty big actually. Excuse me. But don't do this just yet. go on desktop and do it here because the styles are going to trickle down. So, let's do a link and let's do 20 pixels. I think that might be just okay. We'll have a look later. And just like that, we can publish this and have the title here. On the actual intro of the website, you've probably seen that I had this text highlighted. So the trick that I'm thinking of using is to go back and here when you select the text you'll see that you're getting this little menu. So you can actually make the text bold itallic underline it uh strike through it and so on. So I'm going to use this to my advantage in order to be able to make this stylable. But not all of the headings on this website are going to be like this. So what I can do is I can maybe create a new one. Maybe we can put highlighted text and create a new class. And now we can focus specifically on this class here. And then essentially every time we have a heading like this. And I was thinking when we underline it, we can use this class name to style it. So at the moment it doesn't look the way I want it, but I can now use this class name. And to be fair, you could have done it on the heading itself. Uh it's not that big of a deal, but this will be a little bit better. I believe if I was to publish this for a sec. And if we go to site settings and if we go to advanced here we have custom styles. So what I'm going to do is use this class name. So dot highlighted text dash text sorry. And in this case because this is underlined. So we're going to be using the underline um property. And then inside here we can style stuff. So for example I want to remove the text decoration which is this line. So we can do text dash decoration to none. And as you can see this is now gone. And now the other thing that we can do is use the global variables that we predefined to this layout. And this will go something like this. So color and then I can do variable dash and then the color name will be color primary. Let's see. And here we go. So the way I know this is first of all when we started this video I added color primary to the global variables and that's why it's picking it up. But the other way you can check out this is if you go to the website and if you right click inspect and if you click on the here on the HTML at the top you should be able to see your global variables as well if you don't remember what they are but here they are. So these are my root ones. So this is the one that I'm using now. You can just copy it and put it in there. And that's it. And as you can see, this is already looking better on mobile. Perfect. Tablet, perfect. And then if I go to desktop, it's looking good. I don't want a slightly big on desktop, but because we have limited space here. I've zoomed in a little bit. I'll leave it as it is. So this was my little hack of creating this. Obviously, there are many ways of doing this. By the way, let's continue. Now we have our body text here. And for the body text, we could potentially do exactly the same thing. We could go here. First of all, let's change the text. I'm going to copy and paste some. Here we go. You can change the tag from here. Mine is going to be paragraph. And let's change the style. Before we change the style, let's apply a class name that we can reuse if we ever wanted to. So, I'm going to put body text like so. And create it. Now, let's go and style this super quickly. We can go to topography for the font family. Let's select the variable. This is going to be the font family base. From the font weight, maybe we can just go with medium here. And then let's go for maybe one rim. Or that needs to be a little bit bigger, I think. Okay. 1.4 on desktop. And then maybe we can scale it down for tablet and mobile. Text alignment already in the middle. That's fine. Color needs to be white. So, in this case, we could try this one. Okay, this one actually works, I believe. Or you can just go with the white one. Whatever you prefer. Um, maybe somewhere in the middle of the body text. But yeah, maybe we can change this one a little bit to be slightly brighter. And that's it. That's all I want. Now, let's quickly see whether this works well on tablet. That's not too bad. Maybe we can change it to 1.2. And then on mobile, that's probably going to be too much. So, I'm going to change it to one like so. And that's fine. Now, one problem that we might face is if we go to the website, this text looks a little bit too white for me. So, what I would do personally is I would probably give it a max width. So, I'm going to go back, select the text, go to size, and go here at max width and give it 600 pixels. And that's it. But, we don't want to apply this to the body text. I just want to apply it to this specific element which is logo. So let's click logo and redo this. Here we go. And now we can even center line the text as well. And that's it. That's what I want. The other thing that we could potentially apply on the body text itself or maybe locally maybe a little bit of margin to the bottom. So let's do that. Spacing unlink margin bottom will be I don't know 20. And I think that would look fine. One thing that I don't like is how dark this text is. So, we can always go and update the variable. Let me check it out. I think this would be a good sopography. We have the color variable in here. Let's see if I can update it. Yep, we can update it. Maybe we can have a tiny bit darker like so. And save it. Changes will go live right away. That's what we want. Don't show this. Our hero is now taking shape. The next bit will be to style our button. Let's do the same thing. So, let's go to the button and select it. First of all, I'm going to change the text here. Start your fight. And we could uppercase this as well. But anyways, let's go to styles. And maybe we can give this a class name of btn primary. And now we can set some rules for this. For example, let's go to topography. Let's change the typography from here to the base. The font weight I'm thinking of around 500. Font size, I don't know, maybe like around one rim. And then I was thinking of changing, let's change the text color to be the color background I'm going to use here because we're going to change the background to be the primary like so. And that's it. And one thing that would change as well is the text spacing. So I don't know how much, but let's see. One pixel is looking good already. Now a cool thing that you can do here is you can actually set effects. So if you ever if we add a hover effect, we can do different transitions, filters, and so on. But for example, let me show you this. I'm going to add a very easy transition here. I'm just going to set all properties to 200 milliseconds. And now if I wanted to add a hover effect to this, I can go here under the class name, select it, go hover, and then I can change whatever I like. In this case, we're going to change the background color to the hover one. It's not too much of a difference, but hopefully when I deselect this to normal and save, we should be able to see a little bit of a difference. I'm not seeing it to be fair. Let me just double check this. So, we have Oh, okay. So, we have selected the wrong color here. That's why. Here we go. This is the correct one. And now, if I hover over, you'll see the difference straight away. And it has a little transition, which is nice. So, just like that, you can even make kind of like a base button if you want or you can make different variations. So, what I would do now is I'm going to duplicate this. Ctrl and D. And then, as you can see, those buttons are now stacking, which is a problem. One way of fixing this is to wrap them in another in another flex box. So, let's add another flex box in here like so. And make sure that we drag the buttons inside here, both of them like so. And now we can just click on the flexbox and justify it in the middle. Perfect. The beautiful thing about flexbox is that it gives you gaps as well. So, I can just put 20 and we're done. Now, what I wanted to show you with this button here is that we can create a new style for this one. We can either override this one or we can just create a brand new one. I'm going to create a new one. And I'm going to do something very similar. So, let's remove this class. Let's do btn ghost or primary ghost. Here we go. So, this is btn primary ghost. And let's do something very similar. Topography, it's going to be here. Phone weight, I don't know what I choose. Maybe 400 or 500. That's fine. Font size is going to be one rim. The text is fine. Color in this case is going to be set to white. I'm going to change the spacing to one so it looks similar. But then we need to also Okay, this one weight is slightly larger. Sorry about that. going to change it to this one. Yeah, these are now the same. All right. The thing that I wanted to fix now is I want to remove the background. So here where we have the background, we can click on it and we can put the opacity to zero like so. And that's it. We don't have a background there. If we go to border, I also want to add a border weight of two. And the border color is going to be set to white. And border type is fine. And I don't want any border radius. I want the button to be square. So, sharp edges. Here we go. And we have two buttons. And in fact, I believe this one has a little bit of a rounded corner. So, I definitely want to fix this in a second. Let me click on it. Let's go to border. Maybe this is like a default behavior. I don't know. But let's do it. Okay. Yeah, that's much better. And now I can do the same thing for this one. I can change the background. So if I click on it, let's select the hover. By the way, you can do focus and active as well. But let's just do hover through this one. And where we have the background, what we can do is maybe just put this to 20. And now if I hover over it, let's see that. As you can see, it gives us a little kind of like background color. But this color is actually bad. This is blue. I want it to be white. Here we go. That's much better. Make sure you save. And now let's check the responsiveness. If we go to tablet, this is looking good. And if we go to mobile, this isn't looking good. So what we can do here is click on the flex box and make sure that the direction is set to column. And this is starting to look much much better. And by the way, those buttons can be linked by going to general and then adding a link from here if you wish to. I'm not going to link them purely because I don't have any pages to link them to, but that's how you do it if you wanted to know. Let's publish this and let's check it out. So, we got this. I'm going to put this at the bottom. Whoopsie. And now, let's scale. Yep. Let's scale down. Perfect. That's exactly what I wanted. And I think that we're done with the hero section. The next section that we're going to develop is going to be the why us section which is going to be right below the hero. Let's go back to our editor. Go to desktop and let's go underneath hero. So, we're going to have to create another flexbox. I'm going to drag it here at the bottom. Here we go. And here we go. Maybe we can rename this to Yus. And this can be changed to a section if you wish to. In terms of uh styling for this, I'm going to go to layout and I'm going to make sure that everything is kind of like center lined because I'm going to be adding the container inside and I want that container to be center aligned. We can also align items in the middle. Probably not necessary, but let's do it anyway now. And let's go to background and just change this to black. That's it. The next bit will be to add our container which is going to be in the middle. This container can be again a flex container. So let's drag one in. And then let's go straight to size. And let's make sure that the max width here is set to the container width that we set originally in this tutorial. And now we can start building our little containers inside here. To do this, I'm going to create another flexbox. Drag it inside here. And this is where we're going to be actually creating the little YS sections. So, let's drag some elements. I'm going to go to the elements here and I'm going to drag an SVG. I'm going to drag a heading and I'm going to drag a paragraph. So, let's make sure that these are all inside the second flex box. So, I'm going to go with SVG heading and then paragraph. That's the order that we want. And here we are. So since this is a flexbox, we can go to layout and we can change the direction. And we are all ready. And the other thing that we can do is to kind of like align this in the middle like so. And we just need to make sure that we have the correct heading. So the tag here I'm going to change to H3. And the paragraphs will be fine. All right. Let's u change some of these things so we can style them and I'll show you how we can create this as a component. So, if I was to select an SVG, this would be the expert coaching one. So, let's do this. Sorry, this is going to be the modern equipment one. So, let's do this. Let's put the texting inside here. Modern equipment. And I'm going to put a little bit of text as well for the paragraph. Make sure that they're all on the same line, not like mine here. Here we go. And we should be fine. Now, starting from top to bottom, let's st them a little bit. I think this is a little bit too wide for me. So, I'm going to change the width to 50 and and the height I think I'm going to set to auto like so. Perfect. The other thing that I want to do here is to push the icon out. So, we can add the margin or you can do it through the flexbox. Now, I would like to control every single element individually. So you could do it this way and they will going to have equal spacing, but I don't want this. So what I'm going to do instead is select the icon and do it through here. So let's go spacing. Let's go margin unlink. And then let's say 10 pixels. That's fine. And we can do the same for the others. So on the modern equipment, we can create a new style. And this one can be heading H3. H3. And let's give it a little bit of styling. I am going to go to spacing and I'm going to do maybe like 15 pixels. I don't know, maybe that's too much. Let's go to size. Sorry, not size. Let's go to typography. That's what I wanted to change. And let's focus on this. So the typography, this is going to be the heading. For the font weight, we're going to go with something like bold. For the font size, we're going to go with two rem. We're going to go with text white, which is the headings one here. And also, I want to change the text transform to be always uppercase, like so. And that's more or less it. I think I'm definitely going to add a little bit more margin at the bottom of the icon now that I see. Let's now focus on tablet. Do I think the text size on tablet is absolutely fine, but maybe on mobile we can scale it down slightly. So, we can go to, let me just close all these cuz I've got everything open. So, for the font size on here, maybe we can do 1.8. Even this looks a little bit big, but I think that might be fine. And I think we should be good to go with a heading. So, what I would do now locally, I'll diselect this class and just make sure that this is center aligned everywhere. So, let's have a look. Yep, it's looking good. So, it's just specific to this heading. The last bit that we need to do here is the body text. So let's style that super quickly as well. And I'm just going to style this without giving it a class name, I think. So let's go to typography. This is going to be one row. Font weight is going to be fine the way it is. In terms of size, I'm going to go with one rim or 1.1 rim. That looks better. Text is going to be middle. Color is going to be the body one. Let's have a look. This one here. and and that's more or less it. So let make sure that you publish this. And now we can create this as an actual component and we can duplicate it. So let me show you how this is going to work. If I right click on the flexbox here and we can create component. Let's click create component and I'm going to put this as y as box like so and click create. So what this means is that we can now select what properties can be changed. So what I mean by this is for example if I go here on the icon and if I go to general you will see these uh icons here. If you click on this you'll be able to override this icon and you can give it a name of image for example. And then let's do the same for the heading and I'll show you how this works. If we click on general we can override the title as well. So we allowing basically our clients to be able to change this which is super useful or yourself as well. And then we not allowing the clients to change anything else. So the last thing that we need to do is the body text here. Make sure that this is also updatable. And I'm going to put the body text like so. And publish. Now let's go out of this component and I'll show you how this is going to work. So if I was to click on this, this is the actual component. You will see that the icon here has changed and also we can now only change the image, the title and the body text. Obviously, you can still edit the component and make changes and this is going to apply to every single component available. What I mean by this is now if I was to duplicate this by doing Ctrl and D twice. Now I can change the text for each individual component but the styling will stay the same. So, if I ever change the heading or like some sort of the spacing or whatever, you will see how this works. Let me do this super quickly. Let's say this text is too big. So, I'm going to go and edit the actual component itself. And I'm going to go and change the topography. And let's say the body text maybe is too big. I can just put it as one. And as you can see, all of those followed. If I was to save this, let's go back. And now let's just change the text and the icons. Let's go with the first one here. Let's select it and let's just change the title to modern equipment. And then I'm going to change the text. I think I've already did this one, but let's do it anyway. Here we go. And now I can change this one here. Let's select another icon like so. This is going to be expert coaching. Expert coaches, sorry. And then let's change the text here. So I'm going to do that super quickly. And then the last one here is going to be high intensity. So let's change the icon, change the title, and change the text. Here we go. And we're good to go. Save this. And now let's test this on tablet. So, one thing that I don't like here is that we don't have much space between the sections. So, personally, I'll probably go here on the wire section. Maybe I'll go to the spacing and I'll probably just give it a little bit of padding at the top. So maybe like 20 or 40 and maybe 20 at the bottom as well. That's much much better. If we go to tablet, you will see that this is not too bad. But one thing that we can do is if we click on the flex box here and if we click on spacing, we can definitely give uh not here, sorry, the layout, we can definitely give the columns and the rows a bit of spacing just so they don't touch each other. And the same goes if we go on mobile. You will see that now this is breaking. And we can easily fix this by changing the direction of the flexbox to column like so. And we should be good to go. And again, you can change the row spacing here if you wish to, but I think this one works quite well. And just like that, we have this section also completed. And it should be fully responsive. But this icon seems a little bit bigger than it is. So I'll show you how we can fix this in a second. And if I scale down, as you can see, it's working really, really well. Let me go up. And I believe that this is because of the height is auto. So maybe that was my mistake. So what I have to do is edit this component one more time. Go to the image itself. Style and then it would be size maybe. So instead of auto maybe we can put it as width can be auto instead. And this can be 50. And now these are going to look much much better. Let me show you. Here we go. That's better. Again, a little bit more spacing would have been fine, but that's something you can always do. Let's now focus on the next section, which is going to be choose your weapon section. Now, we've already got some uh elements that we can reuse, but let's start. So, we have hero wires and then choose your weapon. So, let's start with adding a new element here at the bottom. I'm going to choose a div block. And this div block is going to have a background of black. So let's change it. Maybe we can push the spacing a little bit at the top. So let's do that. Of 20. We can always change it later on if doesn't suit us. And now we can create a wrapper that is going to basically push all the content inside here like these. Basically where the content is always in the middle. I'm going to do this as another div. So let's create another div. And this is going to be basically our container or wrapper, whatever you like to call it. Choose your weapon. That's fine. And let's apply the max size to this. First of all, this needs to be flex because we're going to have to center align this container. Sorry about that. Let's go here. Let's go layout flex. And just make sure that we align it in the middle. And we could also align item center, but that's not required. Okay, let's go to the container. Let's go to size and make sure that we set the max size here. Here it is. And now when we add elements, they should be in the middle of the screen. Let me copy this heading here. Ctrl and D. And let's put it down here because I'm going to be reusing this for this specific heading. First of all, let's change the text to choose your weapon like so. And then if you want to highlight this, make sure that you have the highlighted uh text, the highlighted class in here added. And all we can do is select the text and just underline it. Just like that. And we're good. We also want to put this on the left side. So I'm going to align text to the left. And that's more or less it. If I go to mobile or tablet, it should work absolutely fine. The next one would be to add a little text to the right side here to break the layout to make it look cool. So I'm going to add one more text. This is going to be a paragraph. And then let's just write three disciplines, one go domination. This in itself is going to be very easy. We're going to go to typography. Change it from here to this one. Font weight is going to be maybe like 500. Phone size I'm thinking of changing it to 1.2 ram. Yeah, that's looking cool. The text is going to be right aligned. And then the text color is going to be the primary. I think this is looking cool already. And there is not much that we need to change here. Maybe if you want to slightly smaller on mobile, you can do because it looks quite big. So maybe one on mobile and that's fine with me. Cool. Save this. And now the next section is going to be a little bit harder. Essentially, I want to create three boxes. One is going to be larger on the left side and two stacked on the right side. Now, there are a lot of ways that you can do this. We need to have one container that's going to wrap in uh kind of like two columns, one on the left side and one on the right side. The one on the right side is going to have two boxes. So, let's drag a flex box here. Whoops. And what's happening? So I think because this is a flex box, we need to change the direction to be like this. This one here column and we're good. Okay. Now this is going to have two divs that's going to hold the images. But let's start with one one inside here. And and inside this div, there is many ways of doing this, but I'm going to try to do as properly as I can. Now there is one downside of uh this by the way is that the images don't seem to have a property for lazy loading. What I mean by this is ideally we want to add an image and we want to add a property of lazy loading. So when we visit the website and we scroll down then the images load instead of when we visit the website they will load because that's going to slow down our website. But unfortunately that isn't an option just yet. And maybe I need to put this into the GitHub of Element and ask them about it. But I'm going to do it the proper way. And maybe if you're using a plug-in which allows you to add properties like lazy loading, that would be beneficial. Anyways, this div in itself, let's go and change it to flex. Let's change the items to be aligned at the bottom because when we add text, I want that to be pushed at the bottom. You'll see how it works in a sec. We also want to change the spacing. So I'm going to go to spacing and I'm going to add 20 on each side. And if this is too much for mobile, maybe we can change it to 10 for example. Let's say 10 like so. Okay. And the last thing that we need to change is the position. So if we go to position, we need to make sure that this is set to relative because the image is going to be set to absolute. And I think we should be okay. Now if we add an image element and let's select it. Let's change the image super quickly. It's going to be this one here, like so. And now we can go and style it. For this image, we want to change the size to be 100%, like so. We want to change the overflow here. The object fit is going to be set to cover. And I want to make sure that this is center like so. And that's it. We also need to change the position. So, this is going to be set to absolute. And we need to change it to top zero, right zero. and bottom zero and left zero like so. I do need to check whether this box here has overflow hidden and I believe that it does. So if we go to position okay overflow under size we have overflow hidden just like so. So the image or any other components don't go outside here. Another thing that we need to do is to add our heading and paragraph. So I'm going to add another flexbox inside here. if I can now because it's all absolute. Okay, so that needs to be outside here. And inside this flex box, we're going to add a heading and we're going to add a paragraph. Okay, let me save this and see how it looks. Okay, so we do have a problem here. This needs to be center aligned, but this is looking okay. So in order to center align this one here, we can just go to the actual container and we can maybe self align it. So self align center and hopefully now it should work. Perfect. I don't understand. Okay, this flex box, sorry, needs to be inside here as well. So now they should all be center aligned. Here we go. This is all working the way it should now. Okay, so this flex box here we can convert into a column one here. So this flex box here we can convert into column. So let's do that. And now the text is stacking up which is the way we want it. And also on the actual div block here maybe we can give it a little bit of size for now. Maybe height 100%. I think that would be fine because we're going to have two more boxes in a minute. Sorry about this. It is getting a little bit more complicated. But now let's apply a heading to this. So style, let's do heading H3. and we are good to go. Let me change the title. So, I'm going to put boxing foundations. Let's change the text. Maybe we can put style body text like so. And I'm going to put this one here. This body text, it is a little bit larger than I want it. So, yeah, maybe we need to change it to 2.2. I think that would be better or 2.1 something like this. Okay, let's have a look. It's already looking good. And now we can also apply the highlighter class to this one here. So let's do highlighter text. And as long as we highlight this with the underline, we should have the same effect, which is great. Now that we have this, technically speaking, we have a flexbox in here. And technically speaking, if I duplicate this, we should have two of them. Now let's go to the flex box here and give it a little bit of space. So 20 between them. But what I want to achieve is I want this box to be a little bit bigger and those two to be kind of like taking equal space. All right. Let's say this is box number one. Let's say this is box number two. We want to create box number three. But then we want to wrap these into a flex box themselves. So let's do that. Let's add a flex box somewhere. And I'll probably just drag it inside here. And now I can drive box two and box three. Box three needs to be outside. Okay. So we have box two and box three inside this flex box. And this fax box we can basically put the layout to be like this. And we can put the column to be like this. Okay. Okay. So for some reason this div here has a bit of padding which I don't want. So let's go to spacing padding. Yeah, it has some default padding which I don't want. So I'm going to reset this to zero. The idea here is that those two boxes are going to be 300 in size. So 300 pixels. This one is going to be again 300 pixels. And I could have created a component for this to be fair, but here we go. And then this one needs to be 100%. Yeah, it's already 100%. Okay, I think that's correct. Let me check the layout super quickly. Make sure that you have direction is fine. I wonder whether the actual div block here needs size. Let me check it out. So this is a flexbox. And if you go to size, it says 100%. So I think this needs to be auto. Okay. So that fixed it. And just like that, you could convert these into um components. And maybe this is what I should have done in the first place to be completely honest with you. Uh, but you already know how to do this. Essentially, you grab this box here and you right click on it and then you say create component and then we can just say whatever this is. Y, choose your choose your weapon box. Create it. And now we can go to general and make sure that we can update only the things that we want. For example, I want to be able to update the image. So if I select the image, I can click on it and put image. Then I want to be able to update the title. I want to be able to update the body. And that's more or less it. So if I was to go back now and if I go container, excuse me. There we go. So now I should be able to delete this box three and I should be able to duplicate this one. And now these two are the same. And if I was to duplicate this one more time, let's see if I can put it inside here. Okay. And remove this one. Sorry. Now I've put it in the same box. Here we go. Here we go. But this one needs to be changed. Okay, this is a problem. Now we'll need to change the height for this one as well. So, okay, let's see how we can solve this problem. This is interesting. I'm going to edit this box and then I'm going to set that we can change maybe the height to it. We can't do this. Okay, maybe this is where we can't really change the height for individual ones. I'm not so sure because there is no way of me just selecting. Oh, I'll just change the height if that makes sense. That's not too bad. So maybe I can just dink this, deattach it, and then I can change the height for this specific box by going to size and putting the height to auto. So, let me change the text super quickly here and make sure that this is also working responsively. So, let's start with the images. So, I'm going to click here, select an image, and this one is going to be okay. And I don't actually have the image for this. So, let me upload it. Here we go. This is the one. And then let's change this one as well. Select image. And it's going to be this one here, I believe. Okay. Let's update the text super quickly. Click on it. Make sure that these are underlined. Let's change the other text as well. Let's not update this one here. And we should be good to go. Publish this. And now let's fix this on mobile. If we go to tablet, this isn't too bad on tablet. I don't mind it. But if we go on mobile, obviously this isn't usable. So what we need to do is go back to So we have the flexbox here. Essentially, we could potentially just go to mobile and put this as columns and that would be absolutely fine. And the other thing that I could do now is change this specific box here to height of 300. And this is going to match the rest. And just like that, it should be all good to go. There we go. Perfectly fine on desktop. Uh I did this image needs to be fixing, but that's the image itself. And if we go and scale this to tablet, as you can see, it's looking nice. And then mobile, they're stacking up. Perfect. Of course, all of these cards can be linked. And in fact, when I was creating the component, maybe that needed to be changed as well. So you could always edit the component here and add the link like so. And this is going to be link like that. And then publish. So, if I was to go back and if I was to click on one of the cards, you should be able to now link the cards as well. Perfect. Let's move on to the next section which is the enforcers. So, this is basically the coaches. I'm going to create a new div here. Let's change the background. Let me see if I can minimize this. Nice. Okay. So, this is going to be the coaches. Let's change the background super quickly to black. Let's put a little bit of spacing. So, maybe top is going to be 40. Whoops. Top. Bottom. We're going to need a title. I'm going to copy this title here and go down. Since this is its own section, we can go to general, change this to a section. Let's change the title here. As long as you have the underlined here, so the underlined enforces, we should be good to go. And one thing that I'm going to do with this specific text in here is to center align it. So if we go to topography, sorry, not center, but enter line like so. And that's it. Now we can create the coaches. This is going to be another component that we can do. Essentially, we need another div. And we need another container. Let's make sure that this is set to flex. And let's make sure that this is center aligning. Center aligning everything. But we need to add one more div for our container. So, let's do that. One more div. The heading goes inside this div. And this is going to be our container. All right. Let's go here. Let's give it a size of max width. Here we go. And let's just quickly test it. Okay, perfect. That's exactly what I want. And now inside this container, we can add another flexbox. Whoops. Like this. And then we can add three cars essentially. So let's add one more flexbox. And this is going to be the first coach. So coach one. And then we can do image. Select image. And I'm going to choose coach one. Let's go and give it a name. So heading we can choose here. And then the heading is going to be Petra. And then we need to put this as a layout column. And then here we go. I also want this text to be actually I want everything in this flex box to be in the middle. So let's do that. Here we go. And then I want to add a little bit of margin to the image. So it pushes the text. So we're going to go to spacing margin of 20. And now we can style this text here, which I'm going to use the style of heading three. Perfect. That's all I want it. I say that we convert this into a component itself as well. So we right click on it and create component. And I'm going to say coach box created. And now since we're in this Oops. And now let's uh get into this component and make sure that the image is changeable. So we can change it to image. Make sure that the uh name is also updatable here. Uh im no sorry this is going to be title. And then if you need the link obviously do that as well. But I should be good to go. So this is one component and this component lives in this flexbox. Let me show you. So let's go here. Container heading flexbox and then the coach. So now if we duplicate this coach twice, we should be able to have a fully responsive design already. And if you want to fix the spacing a little bit, you can click on the flexbox, go to spacing or actually layout. In this case, because we're using flexbox, we can maybe do 20 on each side for the columns and the rows. If we go to tablet, this isn't too bad. But if you wish to, we can maybe just check the row to be like this. This will look better on mobile and tablet. So that's what we can do. And now we can start updating the kind of like the content. So let's select the second coach. This one is going to be coach Miller. Here it is. Select it. Update the name. And then the last one is going to be this coach here, which is coach Peter. Okay, let's publish this and try it out. So, we have the reinforcers. We scroll down and here the coaches. Now, I did show you how we can do hovers. So, if you wish to, you can do hovers on each card. You can link them, do whatever you like. And definitely probably have a little bit more space in between the sections themselves, but that's not too bad because I'm pretty much improvising here. The last section can be basically a copy of the hero. So, what we can do is we could you could have even turned this into a component itself, but I'm not going to do that. I'm just going to duplicate this and move it to the bottom. And now what I'm going to do is change the image here. So, let's click on the hero and then let's select Oh, okay. This is a background image. So, background. Go to the background image and just update it to this one here. Here we go. And then I'm just going to change the text to be something else. Here we go. No mercy, no excuses. Let's change the other text here at the bottom. Like so. And then maybe we can remove this one button. And I'm gonna say instead of start your fight, get free trial. Like so. Save. And that's it. And just like that, we can make the footer now as well if you wish to. So, let's finish up with the footer super quickly. I'm going to go to the dashboard. Let's go to element site builder and let's build a footer. All right. On footer here, let's add a new one. And you could either use one of these, but these are believe that these are still using the old element. So I'm just going to create my own one super quickly and do it. Yep, let's do that. So for the footer again, let's drag a let's add a div block. Here we go. Make sure that the background is set to black. Let's give it a little bit of spacing. So this is going to be top of 40, bottom of 40. Maybe we can add another flexbox. Let's do flexbox. And then inside this flexbox, we can add a menu, website menu, like so. We can style this if you wanted to. We can even copy the one from the header, but that's fine for now. And then let's add a little bit of text. So, paragraph. And then this is essentially going to be a fake phone number here. And maybe push this. And maybe we just need to this needs to go inside the flex box here. We need to click on the flex box. Go to layout. Space around. Make sure that the text is okay. Space around. Align items in the middle. Make sure that the text here is set to white. So typography it's going to be base. Font size is going to be one. This is going to be white for this uh flexbox here. Maybe we can do something fancy with the border. Let's do one pixel. We're going to have it as this one here. Okay, I want this to be dashed, but I want this to be dashed only at the bottom. So, we need to remove the top, right, and left. So, we only have border at the bottom. And let's have a look. Yep, we can see it now a little bit here. That's what I wanted. So, if I publish this add condition, so it's on the entire website and save it. Let's go back to the website. And here is a footer. It doesn't have its full width, but we can always put it in a container just like we did with the others. I don't mind this so much, but this obviously needs fixing. Before we do that, let's change this to one. And I can mess around just like this. And let's just do one more. And this is going to be another div. Maybe just below. So let's drag this down here. And let's add a little bit of text paragraph. Here we go. This could be a span or whatever you like. Designed by RD. And that is not correct. It's 2026 now. Cool. Let's style this a little bit. Topography. Font size is going to be one. Text is going to be white. That's more or less it. Maybe we can push this box a little bit down. So, let's go and select it and let's do spacing and maybe give it a margin of 40 or 20. So, I was thinking about margin in this case. So, let's unlink this and let's put 40 or 20. Okay, this is looking much better. I would need to change the text on this one because it looks kind of ugly, but these are easily fixable things. So, we can just change the text to white. And if you are afraid, you can change the hovers like so. And we can change the underline here. I don't like. Okay. And if we wish to, we can put this into a container. So it's in the middle as well. So let's finish that. Add a block. Where do I drag it? Here we go. And now this block is going to be kind of like our container. So, we need to give it a max size. Here is our max size. And let's drag everything inside. Oops. Brilliant. And I just need to make sure that this is now this div block here which needs to be set to footer is styled as flex. And we have everything centered in the middle. That's one way of doing it super quickly. And as you can see everything is working well. Now, if I wanted to make the site of the width much larger, it would be very easy to do. I would literally have to go to any of the variables. So, let's say variables, open this, and let's say I change it to let's say I changed it to 1400 1,400 just so it's something a little bit more visible. If I was to refresh the website, you'll see that everything goes wider. And that's why I tried to set it up like this. The same goes for the fonts. You can do pretty much uh anything with them. Let me save this by the way. Uh for the fonts, let's say the heading here, I'm going to copy this one because I don't want to lose it. But let's say we do something uh totally different. Let's say that we do something totally different like this one here. I don't know how it's going to look like, but we save it and we go back. You will see that well it's messed up because we didn't really uh design it this way. But as you can see the font changes everywhere which is let me see let me try one more. This one here maybe let's go. And as you can see the font now changes. I've selected a very similar font by the looks of it. But it looks very Yeah, as you can see the font changes everywhere which is the beautiful thing about these variables. So, I'm going to go back and just change it to what it was. And I think that this is going to be everything from this tutorial. I hope that you found this useful. If you like me to explore more elemental stuff like this, let me know in the comments below. And that's it. Thank you very much for watching.