Transcripts
1. Introduction: Welcome back to another awesome elemental class with me, can Besser am a WordPress expert, and I've been using Elementor to build my webpages for the last 4.5 years. And I like showing people how to use those same skills to build landing pages for their websites and for their clients. In this class, I'll be teaching you how to design a photographer landing page. So if you're a photographer and you want to know how to build a landing page for your website. This class is for you, but just in case you're not a photographer, but would still like to learn how to use Elementor to build awesome landing pages. This class is for you. By the time you finish this class, you will have gained the skills you need to be able to build world-class landing pages using Elementor. So without wasting any more time, let me show you the landing page you'll be designing in the class and then get started. Just three. So that's what we're designing. If you're ready and excited to get started, I know I am. Let's dive right in.
2. Installing the theme: So the first thing we wanna do is jump inside our dashboard and install the theme that will control how our website looks. And the theme is the thing that defines how your website looks and functions. So let's go inside the dashboard and if you want to learn more about theme, Cisco ahead and look for tutorials on what's a WordPress theme on YouTube or just Google it. So inside our dashboard, we want to go inside appearance themes. And by default, when you install WordPress for the first time, it will have a default theme installed. And depending on the year, the pain will be given the name of that same year. So right now we're in 2020 one, my theme is 2021, but you also have 2019 and 2020 available for you just in case you want to use them. But what we wanna do is install another theme called Astra. And as you can see, Astra is one of the themes listed here for me because it's one of the themes I use most. It has to be among the top for me. But just in case you can't see it, go ahead and type Astra up here in the search bar. Astra override. So I'll go ahead and install it on Friday. So let's go ahead and activate. So click Activate. And now our active theme is Astra, as you can see right here in this pop-up. And they have this message that Astro comes with doesn't so ready to use starter templates and all that. But we're learning how to create our own web pages from scratch. So I'll close that and close that message right there. So now that we've been sold the Astra Theme and activated, if we're ready to hear about Elementor, we're ready to install elementor and have an overview of the elemental workspace. So let's do that in the next class. I'll see you shortly.
3. Quick Update - The New Elementor Setup Wizard: Welcome back. Now, this lesson is
a quick side note or a quick updates to the
Elementor installation process. If you're taking this class
in May 2022 and beyond, you will notice that
Elementor activation now has a setup wizard that's made up of several steps
that you have to go through to set up the basic
parts of your website. While I was creating this
class several months ago, Elementor did not have
that setup wizard. So I just want us to go
through that setup wizard. But everything else
you're learning in this class does not change. It's still the same
process all through. The only addition is
the setup wizard. So as you can see right now, I have a brand new installation of WordPress and
we're at Version 6. And what I wanna do is
go to Plugins, Add New. So we can add Elementor and
go through that process. I'll search for
Elementor install now. And now when I click Activate will be redirected to
that setup wizard. And we can go
through it together. So here we are. I'll just zoom out a little bit so we can see more details. Alright, so now you'll notice that the first thing
elemental wants us to do now is create an account to get the most out of Elementor. So these are some of the
benefits for signing up for an account
with Elementor. But the thing is, you don't
need to have an account with Elementor to use Elementor. So I'll just go ahead
and skip this part. The second step is to accept, to continue with the
hallow theme that Elementor has made for us. This is made by Elementor, but we're using the Astra Theme, so we just go ahead and skip. Astra is a more powerful theme. The third step is to give
a name to our website. While you were installing
your WordPress. You gave the website a name. That's the name that
will show up here. But this gives us
an opportunity to change the name to any
other name we want. My website, and then
let's click Next. And if you have a logo for your website and you want to
add it right now in advance. You can just go ahead and
open the media library and pick it from
the media library or uploaded from your computer. But we're not going
to do that right now. So I'll just keep this step. And of course we
can add the logo later and I'll show
you how to do that. Let's click Skip. And now we get to
the very last step where we have two options. We can start editing
our homepage from a blank canvas with
Elementor editor. Or we can browse
from hundreds of templates or import our own
templates if we have them. But I'll go ahead and skip. That. Will be redirected to the canvas where we can now
start building a website. And here we go. So basically that's all I wanted to show you. It's a new updates. It was not there
some few months ago. Now, it's there. But everything else in the upcoming lessons
remains the same. The process still remains the same to build a landing page. So without wasting
any more time, Let's move on to
the next lesson. I'll go to this burger menu
and click Exit to Dashboard. Let's exit from this page. Now we're inside the
dashboard and we're ready to get started
building the website.
4. The Elementor workspace overview: Welcome back. In the previous lesson, we installed and activated the Astra Theme. We're now ready to install elementor and have a quick overview of the elements are workspace. So we can get familiar with the tools and features will be dealing with when we're building our landing page. So let's go ahead and do that. Let's install Elementor. So I'll go inside, I'll just go ahead and click plugins to begin with. And because this is a brand new installation of WordPress, I have to default plugins installed already. So I'll just go ahead and select both of them. And in this drop-down menu, I'll select delete, then apply that. Let's delete them. And now we have a clean slate to work with. So I'll go ahead and click Add New. And we'll be taken to the WordPress plugin repository where we can search for Elementor. It should be the first result right here with over 5 million active installation. I'll go ahead and click Install Now. And you'll notice that we have many other plug-ins right here that have the name Elementor in them. So why is that? Other developers can go ahead and create features, tools, and functionalities to extend the power of Elementor. And these guys have done that because as you can see, Elementor itself is created by Elemental.com, but these other third party plugins are developed by third party developers. So we'll be using some of these plugins right here as we go along, as we build our landing page, and you'll get to know which plug-in plays, which row. Let's activate Elementor now that it's installed. All right, so now we have just one plugin installed and that Elementor. So let's go ahead and create a page so we can open up the elemental workspace. So I'll go inside pages, all pages. And as I had mentioned, this is a brand new installation of WordPress. So I have to default pages already created right here, but I don't need these two, so I'll select the two of them. And in this drop-down menu, I'll move to trash and apply that. Now we don't have any page, so I'll say Add New. And we can go ahead and give our page a name. So let's say home. So let's assume this is our homepage. Right here on the far right. Under Template, I'll select under the drop-down menu Elementor full width. Then I'll hit Publish. And now our page is published. And now that we have our page ready, let's click edit with Elementor will be taken to the front end where we'll be editing the page. So here we are in the front end. And as we edit the page, this is exactly how it's going to look. So we're actually editing the page and seeing the results in real time. On the far left, right here, we have this bottom pane right here. This bottom area right here has a few options. We have the update button as we make changes here we'll be clicking Update. And we'll be clicking the preview changes icon right here to view the page with the changes and without these tools. And here we have responsive mode. This is where we'll click when we want to make our page responsive to different screen sizes, smartphones, tablets and desktop. And we'll do that as we, as we make this landing page responsive. And the next thing right here is the history area where this is where we'll have a list of all the moves with made, all the changes we've made as we add elements to our page in this session. So if for example, I add a double column section like that, and then maybe add an, a triple column section like that. Now we have two things added. So if we go inside the history, you'll notice that we first added this section and then we added this section. And we can click right here to go back to the point in time when we only had that section. So this is like a time travel area where you can go to any specific point in time when you had certain changes, when you had only certain elements looking a certain way. And we'll get to see what all these other options are for. But the part will be interacting with the most is this area here. And this is the area that provides us with all the tools and features we want to add, all the elements we want to add to our website. So for example, if alco collapsed that panel, you'll notice we have another panel that says Pro. So the tools in the Basic panel are free. If we collapse that and go inside the panel, you'll notice they have the small lock right here to show that these tools cannot be dragged and dropped in there when you try to drag, there'll be this pop up that says you need to, you need to have the pro version of Elementor to be able to use these. And then let's collapse that. Then we have more under the general and many other tools embedded under all these panels. So we'll be working with the panels that have the free elements because they are more than enough for us to achieve the things we need to achieve this landing page right here. The other thing I wanted to mention here is that when we add plugins, remember those third party plugins we added, let me go inside the dashboard and let's go inside Plugins. Let's say Add New. Let me search for elementary. So remember these third party plugins we just talked about. If we install any third party plugin that was created to extend the power of Elementor, like essential add-ons for Elementor, and we will actually install this later. There will show up right here as a panel. So essential add-ons for elementary, we will show up with all the extra tools that it's bringing into Elementor. And you will find that some of those features that are free with that new plugin are listed right here in the Elementor Pro version. So while Elementor itself is charging for those tools, these guys will have created tools that do the same thing, but provided for free. And another thing, let's say we're inside. We're inside here and we're editing stuff and we want to add something. We wanted to drag a tool, an element from here, but we can't see it because right now at the moment what we have these settings for this section, we can go ahead and click that menu right there. And it'll bring up these panels that have tools. So anytime it can't see these tools, click these tiny icon right here and it will bring up the tools. Then in here we have more settings which we'll get to interact with as we progress. So that's a quick overview of the elemental workspace. And to start creating a webpage, all we need to do with Elementor is create a section. And sections are structured according to the different common use cases. So we can have a double column like that. And now this is a double column section. The columns are demarcated by these broken black lines. And the section is demarcated by this blue border. And we can resize, and we can just drag the columns to resize them if we want to. And we can also right-click and duplicate a column. And now we have three columns. To start adding elements inside a web page, all we need to do is click that plus sign right there, or click this to reveal the tools. So if I click that will reveal the elements and we can now start dragging then one by one. And now when we have an element active, like right now it's the image that we're editing is the element name that will appear here. Whatever element is selected right here is the element that will appear up here. So if I select this section, now we're editing the section. If I select this image, now we're editing the image, which means these settings are for the image or right, so that's just a quick overview of the elements are workspace. I hope you're now familiar with some of the tools and features of Elementor that will be interacting with. But of course you'll get to understand how to use most of these other things that we'd not touched as we build a landing page because that's actually the reason why we're having these class in the first place so you can get used to working with Elementor. So the next thing we wanna do now, if I could jump to our point of reference is build the nav bar. And the navbar is made up of two things, the logo and the website menu. So let's begin by adding the website logo. Let's do that in the next class. I'll see you shortly.
5. Adding the website logo: Welcome back to another awesome lesson. So it's time now to add our website nav bar. And we want to start with our logo. But here's the thing. We need to add a plugin that will help us create these Napa because it will be a stand-alone element only space. So we want to install a plugin. So we'll go inside plug-ins in the dashboard. Plugins add new search for Elementor. And that will bring up these elemental related plugins right here. And we're looking for header folder builder for Elementor so or year right here, Elementor header footer builder is told that now. And let's activate that. So now Elementor header and footer builder is activated and we can access it through appearance. Elements are Header and Footer builder. Let's go ahead and click that. And because we've not yet created any header or footer, we don't have any listed here, so let's go ahead and create, Add New. And we can skip this. We don't need that. And we'll give our nav header a name. So let's go ahead and call it, call it whatever you want. So I'll just call it my nav. It's a nav bar. And we have all these options right in front of us. Next thing we wanna do is select the type of template. It's a header. And that will bring up these options right here under display on. Where should we decide whether we want the navbar to be displayed on the entire website, regardless of which web page your own, you're supposed to be able to still have the nav bar at the top user roles. Let's go ahead and say all. So that means if you are an admin and you have people under you who are also editing the website. You can restrict who can edit your nav bar so anyone can edit it. I'll leave it at all. And then let's see, right here on the far right, I want to go inside template, the faults change that to Elementor full width. And under Astro settings, I want to go below sidebar and say no sidebar content layout, full width stretched. And let's disable these default settings that come with Astra primary and let's say Publish. So now our nav bar is published. We want to go to the front end and start building it to look like that. So what we need to do is hit Edit with Elementor. But before we do that, I just want to go inside appearance Elementor, header and footer builder. And you'll notice that now we have it listed right here. We've just created it and now it's listed under our plugin. So if I click Edit will be taken back to these page and we can always make changes to these settings. Then let's hit Edit with Elementor. And now we've been brought to the front end where we can now start building the nav bar. So let's go inside, let's say Add New and we'll add a double column section. And now we can drag this column to be smaller than the right column because of course this column is longer than the then the logo column. So going back inside here, I'll click that plus sign. And then we'll drag an image element in there. And now we can put our logo in here. And remember, because this is our active element is the one we're editing here and we can click in there and add our logo. And because I don't have any images added yet, I'll select upload files and select files. And I had already prepared these assets folder here. If you open it up, it contains all the elements are used on the website. That means including images. All the images are there. Just if you want to follow along, you can use the same images are used in my work. We also have the finished results right here. So you can import these landing pages and they will look exactly like our land, our final landing page, and we have the logo. So I'll import the login for now. Double-click that. And now that it's imported, I'll go ahead and click Insert media. And now our image is important, but because this half of the name is white, we can see for now. So let's do something about the background color. So I'll first hit update that. And now go inside this burger menu. Click that burger menu site settings. And I'll go inside. Background, background type. Click that. And in this small box right here, just drag that and change the background color to black, and then update that. So then now the entire website has a black background. Close this blue area and go back to our editing area. Override. So let's preview the changes. In. That's how our logo looks. The next thing we wanna do is add our website nav menu, and we'll do that in the next class. I'll see you shortly.
6. Adding the nav menu: Welcome back. It's time now to add a web site nav menu. So jumping back inside our workspace right here. So what we wanna do is go inside this box and click the plus sign right there. And in here we'll type nav. And we have a few nav options right here. But remember one of the plugins, we've just installed IIS header footer builder for Elementor, and that's what we have HF be here for. So we'll drag that and drop it right there. So now we're expecting to see a menu, but there is no menu. So let's preview that to see the changes. No menu here. So what's happening? Well, this is still selected. If you look at this area right here, you'll notice that it says there are no menus on your site. Go to the menus screen to create one. So we need to go inside the WordPress dashboard, create a menu which we will display inside this box right here. So what I wanna do is in another tab, go inside the dashboard. So I'll click that, go back inside the dashboard while this tab is still open. And I want to go inside appearance menus. And now in here you'll notice that the first thing at the very top here, it says menu's edit menus. Create your first menu below. And we can go ahead and create a menu. So let's give it a name. My menu. And let's make it the primary menu, then Create menu. This is how to create a WordPress menu, which can then display in the front end. And notice now that we have the menu ready, it says Add menu items from the column on the left, this column right here. These are our menu items. These are menu items 1, 2, 3, 4, 5, 6 menu items. Then in here, the menu items can be webpages, they can be blog posts, be custom links that you've created. They can be content categories. So what we need is to create, you can create any of these types of content and display them on your menu as menu items. I just want to create custom links for now, we're focusing on the landing page so we don't need anymore pages. So I'll create a custom URL. I'll just insert a hashtag right there. I can use that hashtag is a placeholder for an imaginary URL to which these link might point. But for now let's just say about Add to Menu. And now it's a menu item. I'll go ahead and add another, another URL, just another hash. Let's call this blog. But of course, in a real-world scenario, this would be something like http slash slash www dot. Maybe if you have a YouTube video that you want to share with someone right there as a menu item. But of course now let's just leave it as a hash right now. Add to Menu. And I'll do that two more times. One more time. Add to menu. And now we have four menu items. So I'll go ahead and save menu. And because we've saved our menu, now, if we go inside our elemental workspace where we were creating our header, if we refresh this page, I'll hit Control R, or if you're on a Mac Command R. All right, So now our four menu items are showing up inside this element that was brought in by hetero folder builder for Elementor, the plug-in we installed. And because now it's selected. If you look at the place that had the message that we didn't have a menu. Now we have this drop-down and it's listing our main menu as one of the menus. If we had four menus, they will be listed in this dropdown menu. And you can select which many you want to show right here. So that's that. So update that. And while this is still selected, you can select it by clicking anywhere within this blue border. So I'll click anywhere in there. And while it's still selected, I'll go inside layout. Under alignments, I'll click rights to push the, the menu to the right side. And then I'll say, hey there. Let's preview the changes. And now our menu is now starting to take shape. But of course we have quite some few changes to make like these hover effect. And this last item needs to be a button. So let's see how to do that. Going inside here. While this is still selected, collapse layout and go inside menu and we have last menu item. I'll go ahead and hit last item button. And that'll change it to a button like that. Update that. And let's preview the changes. So there we have it. The next thing we wanna do is change the hover color. First of all, the default color of the links, and then their hover color and the buttons hover behavior. So let's go inside here and see how our reference behaves. When it's active, it's yellow on hover, it's yellow, but by default it's wide. So let's go inside here. So while the navigation menu is still selected, I'll go inside style. And the first thing we wanna do is collapse main menu. You'll notice we have four panels right here for drop-down menus. Let's start with a button. Click button. And first of all, let's change the text color right here to white, like that. And then let's change the button background type from that green. So let's change that color. And I want to pull up those colors. I have those colors in this document right here, which I've included in the assets folder I mentioned earlier. You can find it in the description below. So let's grab that yellow color right there, vibrant yellow. I want to grab this code. Go back in here and paste it in here. And now our button is that yellow. Let's click anywhere inside here to get rid of this box. And then on hover, we want to go back and say background type. Should be. Let's go back inside here, copy that. Let's go back inside here and paste that in there. In our own hover, the button is that red. Let's update that. Next thing we wanna do is change the link colors. So let's collapse that button. And let's go inside main menu. Let's look for topography. Text color should be white, so drag that all the way to the top. And on hover, it needs to be yellow. So I'll click that. And I'll go inside there and grab that yellow. Paste it in there. And over now it's yellow. Let's see how it looks on active. When active, no color, so I'll give it that same yellow. Then update that. Let's preview the changes. And now our navbar is behaving exactly as expected. So let's look at our reference and the font here is black. So let's go inside here and change the contact to black. So collapsing that main menu and opening the button color should be black when normal. Let's update that. And on hover needs to be white. Update that. And let's preview it. It changes. By default, it's black on hover, whites. Awesome. So I like where we've reached with the nav bar. Now we can go on and create the hero section with these animated self typing text. See you shortly.
7. Adding the animated text: Welcome back. So right now we want to add this animated texts right here. This is a very nice spot to add important keywords that you want visitors to remember or visitors to have in mind the moment they land on your page. It's a nice spot to inform people very briefly about something you want them to be aware of. So let's see how to do that. So jumping inside our dashboard right here, we want to add a plugin that will enable us to have these dynamic text. So we'll go inside Plugins, Add New, and we'll type essential atoms are just type essential in that should be the first result right here by WP developer. And you'll notice that it's essential add-ons for Elementor. Remember those plugins we say were developed by a third party developers to extend Elementor. This is one of them. So let's install it now. End. It has more than a million active installations. Just to show you how cool the plugin ease or right, so let's activate it. And in this setup wizard right here, you can go ahead and select whichever, whichever option you want. But because you're, I'm assuming you're beginners, you can go with the basic recommended settings. So let's go to next. And these are the settings you've accepted by selecting basic next thing. Let's go to next. Next. Don't install in your days or install any of them if you want to. Next, then finish that. All right, so now we have essential add-ons for Elementor installed and we have access to all those new features that extend elemental. So going back inside where our elemental workspace here. So I will refresh this workspace by hitting Control R or Command R on the Mac. And as I had mentioned earlier, if you collapse these panels right here, you'll notice that now we have more, more panels added here because remember in the previous lesson we added Elementor, header and footer builder. And right now we've just added essential adults. And if we expand that, it has additional elements that we can drag in here and reach our landing page. So one of those features is cold, fancy text. So what I wanna do and I've just remembered, is that we're still inside the header workspace. What we wanna do is exit from this workspace because now we're done editing the nav bar. So let's exit by clicking that and let's Exit to Dashboard. Inside our dashboard will go inside pages. And we have the homepage we created earlier, and that's what we're using as our landing page. So I'll edit with Elementor just in case you don't have this option, it means you didn't click edit with Elementor. We can click edit. And depending on how your page looks, just click edit with Elementor wherever the button is. In our, in the area where we're editing the main content of the landing page. So the first thing you notice is that we have this photo right here, which we don't lie. So going back inside the dashboard, inside pages, all pages Home. You will notice that we have these small Astra settings icon up here. Click that icon. And under site layout, let's say no sidebar, full-width stretched. That's okay. Then let's disable above header. Let's disable primary header below header, mobile header, title. Let's disable the featured image and disabled or folder. Then let's update that. And now if I click Edit with Elementor or go back directly to that page and refresh it. Let me just refresh it. Now that footer is gone. So the first thing we wanna do is add a full width single column section. This one right here. Let's click the plus sign inside there and drag in inside here type fancy. And it will bring up these elements by essential add-ons for Elementor, the plugin you just installed. I'll drop that in the end now because it's the active element. It says Edit fancy text up here. So the first thing we wanna do is look at anatomy of this element. It has these three strings and those are these three words that are changing here. And then we have these first three for words that are not changing. Those are the prefix texts, so we can get rid of that. And we have the suffix texts, which is of the sentence, of the sentence. Let's remove that as well. And let's add a dot, a full stop in there. So that we have, remember we have this yellow full stop right here. So going back in here. So now let's change what these words say. Let's change that to something like creative. Let's change the second one to photographer, videographer. Videographer. And let's update that. So now the three words, let's preview the changes or right, so that's what we have currently at the moment. The next thing we wanna do is let me just close down these extra pages right here. So the next thing we want is to change the color of the text and the size as well. So clicking style. So clicking style. We want to collapse prefix textiles and open up the fancy text styles because what we have left is the fancy text itself. And let's click Topography. Let's increase the size. Something like that, maybe 162, but it all depends on what word you typed in there. So let's click outside there. Then solid color. Let's change that to white. Like that. Let's update that. We can change the cursor color if you want, but I want to leave it at White. Next thing we wanna do is collapse the fancy textiles and go to the suffix textiles because we want to give it a color. Remember right here, it's yellow. So I want to tab over to this document and grab that yellow color. Copy that. Then tap back to our page. And I want to open up the suffix text color and paste that in there. Paste that. So now it's yellow, but now it's too small. Let's click Topography and let's increase the size right there. Somewhere there. I think I like it right there. Alright, let's update it. And now notice that in our page, in our reference page, the animation type is different. This is fading while ours right here is typing. So to change that, Let's go inside content and collapse fancy texts and expand fancy texts settings. And how we can change the animation type from typing to fade, fade up. Let's try theta bounds like that. About Zoom. Rye. I like Zoom. But to keep things simpler, I'll just leave it at FE, go ahead and play around with those other settings right there. And let's update that. Then. Of course you'll notice we have some room up here. We have some margin up here between the one and the nav bar. So let's go ahead and do that. Let's select the section itself. And let's go inside advanced. Let's collapse that padding links. And then let's increase the top padding to something like let's say 50. Let's say a 100. And let's update that. Preview the changes or right? But now our font needs to be a little bit bold. Right now. It seems to be to theme. So selecting that fancy text in there and going inside style, fancy text styles. Let's go ahead and select type Palaeography in here and increase the font weight to something like 900. Now, font-weight is heavier, but now let's change the family to Montserrat. Montserrat. Let's preview the changes. Override. I like that. So that's that, That's how to add the fancy texts. We're heading somewhere we did. So let's go ahead and add these texts. I'll just copy that. Copy and I'll go inside here and click this tiny icon right here to bring up the elements and drag this text editor below the videographer. And while it's still selected, I'll select all this deleted and then paste the small text we just copied from the other side in there. And then while it's still selected, I'll go inside style and align its center. Change the color to white. Then select the videographer. Go inside advanced, break the margin, and then bottom in, decreased the bottom margin. Push the tiny texts outwards. Let's update that. And let's preview the changes. Super awesome. So now we've added our fancy texts and the descriptive text to the hero section. Next, we want to add this button right here. So let's do that in the next lesson.
8. Adding the animated background: So welcome back. So this time we want to create these animated background here. If you look closely, you'll notice that the background has some sort of circles moving around randomly, and they're all randomly sized. So let's see how to do that. What I wanna do is jump inside the dashboard. So I won't go inside the dashboard. So let me just click that. And now inside the dashboard we want to go inside plugins, add new. Because we want to add a plugin that adds those particles. So let's go ahead and type Pi, outlet pi or net. And so we have two pi out net plug-ins here. And the one we want E is botnet add-ons for Elementor. So instill that and the activating or ride. So these are the features that the plugin makes available to us and it also has some procedures. So now that we have the plug-in installed, let's go back to our workspace here and refresh this page so we can load the brand newly installed plug-in or bride. So now it's loaded. Let's collapse basic. It's collapsed pro general, it's collapsed everything. And now you'll notice we have these PAF E free widgets. So that's pilot net add-on for elements of free widgets. And it has of course, the elements it's brought into the project. So selecting our section. Now, let's select this section. And you'll notice now, in addition to the three tabs we've been having here at the top, we have PIFP. So if you click that, were presented with additional settings for the PAF II, so PIFP particles, Let's select on. Now, now it's active. So before we make any changes, I'll click Update. And let's preview the changes. So that's what he looks like by default. So we need to tweak it a little bit to make it look something more subtle like this. So let's go ahead and jump inside our workspace. And because everything is red for now, we need to change these colors. So let's go for something like a very dark gray right there. Somewhere there. I'll go with this color code. I'll copy that. And I'll also, because they also have links, notice they have these lines that connect the dots. So I just want to make the link color the same color as the circles or the elements. So let's paste that in there and let's update it. Let's preview the changes. And that's what we have now. So notice they are moving too fast and we need them to slow down a little bit. So let's see where is this particle's speed? Let's reduce that to 1. But of course, it can play around with the speed and set it to whatever speed you want. So let's preview that. Er, so that's what we have at the moment. I think I like it. Next thing we wanna do is create this button right here. And notice it has these floating effect when you hover over it. And we'll see how to do that. So let's jump right in here, and let's click this More icon right here and type button. And let's click the first button. Or let's delete all that. Collapse that. And let's go inside basic. And let's select the button right here. Let's drop it when that blue line appears to indicate that we're ready to drop. And now by default it's on the left side. Let's push it to the middle. And let's go inside style. No, first of all, let's change what it says under content. Texts, click here. What does he say? View my portfolio. View my portfolio or RI. The next thing we wanna do is go inside style so we can start styling it. I'll collapse that for a moment and you'll notice we have these two options. So let's expand button. And for the color, Let's change it to that yellow. So I'll tab over here and copy these yellow. Remember I provided that document inside the folder in the description below. So let's paste that in there. And now the button is yellow, but the test color needs to be black, like that. And then let's change the typography to Montserrat. Montserrat. I like how it looks. And let's do something about the padding because notice here on our button, here, it has some nice padding that makes it look more conspicuous and that's what we're trying to achieve. So while the button is still selected, I'll undo button. Let's go to padding and let's break this link. And that will distort the button for a moment. Let's increase the left padding 250 and the right padding 250, bottom and top 20. Or RI. Let's update that. And let's preview the changes. Super awesome. So that's what we have at the moment. But now notice that our top hero section goes up to here because that's where the button reaches. We need to increase the padding down here and increase the spacing between the button and this text, just like here. So let's do that. So we can select while the button is still selected. Let's go inside advanced. Let's break that link up there, and let's make it top margin to be 50. Now let's make it a 100. Let's update that. Let's preview the changes. Or right, so now it's on a nice spot. But we want to increase. The next thing we wanna do is increase the padding on the hero section itself, demarcated by this blue border here. So let's select the section itself. And let's go inside advanced. And let's give it a bottom padding of 6060 like that. Let's update that. In preview the changes. All right, so now we have these particles moving around above and below the button. And our hero section now looks great. So the next thing we wanna do is work on this section right here with these nice icon. Yeah, So this will be a very nice spot to feature one of your favorite or most recent projects. So let's go ahead and create this section. I'll see you shortly.
9. Adding the image : Welcome back. So jumping back east side our workspace. What we wanna do is add a brand new section because remember we want to create this section right here and it's directly below our button. So we want to add a double column section. So let's do that. Click that. And now we have a double column N in here. I'll click that in, drag an image element in there. Let's click that and drag a heading element in there. And let's click that tiny button right there and drag a text editor right there, and dropping when that blue line appears. And remember we have this icon right here. So let's go back in here and click that tiny icon to bring up the elements Insight icon and pick this one that has the star. This is the defaults Elementor, elementor, icon elements. Let's drag that and drop it right above the title. And by default it's in the middle. So while it's still selected, let's align it to the left. Update that. All right, so let's preview the changes. All right, so that's what we have. Not looking very nice. We need to do something about that. So let's go ahead and add the image first. I'll select the image and this will change to edit image and outs. Click in there and click go to upload files, select files. And remember I mentioned that I prepared these assets folder and it will be in the description below. You can download it. It has all the images will be using. So I'll select this image. Yeah, let me select that image for now. Open that. And let's go ahead and insert media. Just like that. Update that. And now let's look at what our font looks like. So this is Montserrat. I'll copy this Lorem Ipsum. So we can paste it in there, copy that. And let's go inside here. Let's select that. Every shot counts. And let's select the description. So go inside here, select all, delete that, and let's add our long Lorem Ipsum, right, so while this is still selected, let's go inside style and change the font color to white. Click anywhere in there to get out of that box. And let's click topography. Let's train the family to Montserrat. Enter. I'll select the title, the heading. I will change that. Yeah, that's a H2, I like that. And go back inside style, change that to white as well. So let's select the icon and let's go inside here, inside camera. I don't like that. All right, so let's select that. But you can also upload your own icons if you want. So insert that. And now it's a camera, but we need to make it this yellow color. So let's go inside here while it's still selected style. Going here. And I'll tap over to this note pad right here and copy that. Go inside here and paste it in here. And now it's yellow. But these elements are too close together. So what we need to do is select this section and go in here under Layout, columns gap. Let's select any of these options that you like, but I'll go with wider and then update that. So now the distance between these two columns is increased. So let's preview the changes. So that's what we have so far. I think it's starting to take shape. We need to change these fonts two months Arad family. So let's select that. Go inside style typography. Family, Montserrat. Montserrat. And I want to increase the weight to something like 800 and update that. It's also bump up the size. I'll just use my eyes. Let's say up to somewhere maybe 38 is okay. Update that. And now the distance between the button and this section right here is, is a little bit small. So let's increase that. Let's select the section in coincide advanced. Break this link right here and increase the top margin to maybe something like 50. The app to that spot and update that. And we can preview the changes. All right, I like that. So the next thing we need to do is add this button. And one great thing about Elementor is you can copy and paste elements just like in another normal, the visual design software like Adobe Illustrator or Photoshop. And so going inside here, we can just copy this button right here. Right-click the button and copy it. Then I'll go inside here. Right-click the text elements and paste. So the button will go below the elementary right-clicked. So now it's below there, but now it has the settings that we set for this one, we need to change the settings to suit these areas. So first of all, let's move it to the left. Let's remove these margin. So let's go to Advanced and remove that margin. Maybe did 0. Let's increase the size of the image up to that spot maybe. And let's update that. And let's preview the changes. And that's what we have so far. Right here. It's red and yellow own hover. So let's change that. So let's apply that hover effect. Well, the button is selected. Let's go inside the style on Hoover, who wanted to be the smiled read. So I'll copy that, paste that in there. So no way we want it to be mild read on, wanting to be mild read on normal state and on hover. We wanted to have these yellow, vibrant yellow, copy that on hover, wanting to be these vibrant yellow like that. And then normal state, the font needs to be white. Yup, needs to be white. So normal state font, wide. On hover, we can make it black like that. So let's update that and preview the changes. Let's scroll downwards. And now our button is behaving the way we want it to. Let's go ahead and create this, my services section. And this will be a very nice spots to give a brief description of what you do for your customer. So let's create the My Services section. In the next lesson, I'll see you shortly.
10. Adding the services: Welcome back. So here we are in another awesome lesson. So the next thing we wanna do now is add my services section. So we'll start by adding the title and of course these icons and text. So let's jump right inside our workspace. And what we wanna do is add a single column section that runs all the way from the left to the right. And remember we can copy elements from one place to another when working with Elementor, like we copy this button and use it here. So we also want to copy this title here so we can use it here. I want to quickly show you a very handy feature that elemental provides. And you'll notice when I hover over this corner right here, nothing happens here. Or if I hover over here, nothing special happens. But I want to click this burger menu right here and go inside user preferences. Editing handles. Change that to yes and say update that. So now when we're inside here, when you hover over the corners, brings up these options here that help you do your work faster. So like if I wanted to duplicate these, all have to do is hover over these and click that. And now I can drag this into our full GUI section right here. The next thing I wanna do is duplicate that and drag it inside our section right there. And then I want to remove all that sex so we're left with one sentence. And while it's still selected, let's go inside style and align it to the middle and do the same for the heading. Align it to the middle. And let's click the section itself. Go to Advanced, break the link on margin and give it a margin of a 100. Right? So we have some nice spacing between the two sections. Update that. Let's quickly preview the changes. And that's what we have. So the next thing we wanna do is add these services. So let's see how to do that. Let's click this small icon right here to bring up these elements. And we want to drag an inner section right below that text. In that intersection needs to have a few more columns. One that's duplicated one more time too. In those columns will hold different parts of these areas. So, so right now one column will hold these and other column will hold these. Another column these, and another column these. So that's why we have four. So for this one and drag that all the way to maybe something like for now, let's begin with a nine. Well, as I drag, you'll notice we have some metrics that are changing in real time. The one on the left is a, a, Let's change that nine somewhere in there. Let's pull that to nine as well. Look at the left metrics. Now let's give it a 5.55 g that are 55 as well. Or RI. So in here, what we need to do is click that plus sign and type icon. And let's drag an icon in there. And with that icon clicking there, and select any icon you want related to photography. So let me select that, insert that. And you'll notice the icon is beak by default. But we'll do something about that. The next thing we wanna do is let me copy this text right here. Copy that and the section is my services. So let me select that first n in here. I want to click that plus sign, then drag a heading elements. And while it's still selected, wedding photography, I'll paste that in there. Alright, so the next thing, let's grab this and grab a text editor in the drop it in there. So let's style the texts. Let's start with the icon. Inside here. Let's go to I concise and drag that until you're satisfied. I think 35 is okay for me. And let's change the button color, the icon color to this yellow. So let me jump over and copy that and go back in there and paste that yellow in there. So now it's yellow. Let's select that heading, go inside style, select the college, change it to white. Now want to change the typography family two months Iraq. And I want to change the font weights to maybe 700, but I want to reduce the size a little bit to 25 is okay. Then I'll select these description below here. And while it's still selected, going sides style, change the color to white. Change the typography family to Montserrat. Alright, update that. And I want to change this color a little bit. So be a darker, slightly dark gray so that it's distinguishable from the heading itself. Somewhere there. All right, so there's that slight difference between, between their shades. And then I'll preview that. There we have it, so we have one service. Now, the next thing we wanna do is duplicate that, hover over that and duplicate it and drag it in there. And now you'll notice we're unable to drop it in that small bug, that box because it's small, so I'll make it bigger. Drag it and drop it in there. And remember we had made it 5.5. So let's drag it up to 5.5. That's okay. Let's duplicate that is well, drag it in there. Duplicate that, drag it in there. And that's our second service. So I'll grab that graphic design and paste it in there. The third one is corporate photography. So the next thing we wanna do is duplicate these. Now that we have these two services, we want to duplicate that section like that and duplicate it again. So now we have the set of services all styled cohesively. So let's copy that. We said it's corporate photography. Let's paste that in there. So Graham, select that, that in the event photography. And then finally, video production. Or right, let's update that. And then let's preview the changes. So scrolling downward, override our My Services section looks super awesome, nice and clean. So the next thing we want to do is create this call to action area right here. So this is a landing page and it needs to make people take action to meet needs to call people to action. And this is one of the ways is doing that one to be receiving photography advice from me and someone can join your VIP List. So let's go ahead and create these section. And it has these nice effect where the background image is fixed. So let's see how to do that in the next class.
11. Adding a Call to Action: Welcome to this class. So we already created these services section. Now it's time to create these call to action area right here. We want to be able to call people to take our desired action that will be beneficial to us. And because we're photographers, we want people to join our mailing these. So that's why we have this button right here. So let's see how to create these section in our workspace. So jumping over to our workspace, the next thing, as you've already guessed, is to create a new section. And let's see. Yes, it's a full width section as usual. And notice we don't have any margin right here between these two. So why don't we begin by adding a margin while it's still selected. Go to advance, break that link right here. So let's add some top margin of 100. And now we have some nice spacing between the two. And while this section is still selected, go inside style. Under background, let me collapse background and we have all these panels right here. And we're interested in the background for now. Background type. Click the brush right there and go to Image. Click the plus sign in there, and we need to add the image that will be our background like this. So I'll select upload files, select files. And I think this is a photo. Open that. And let's insert media. So that's what it looks like by default. So the first thing we wanna do, well this is still selected. We'll go to position center, center, and then attachments, Let's say fixed so that when we scroll, remains in one spot like that. And then let's say repeat, no repeat, size, let's say cover or RI. The reason why it's not quite visible these, because our section here is empty. Remember this is our background, but the size of our section will be determined by the amount of content we put inside of it. So let's click that plus. And instead of creating a new heading, Let's duplicate this. Click that, and then let's drag it and drop it in there when the blue line appears. My services. And right below it. Let's duplicate that and drag it below my services. Now, while this is still selected, Let's push it to the center, to the middle. So now it is center aligned. By now we can't read because the background is bright. So select this section again. And under Background type and a background, we have background overlay. Let's expand that background overlay type. And let's give it a color, black. Let's give it a dark black like that. And then let's increase the opacity just to make it a little bit darker. Alright, update that. And let's preview the changes. Awesome, so that's what we have. We can't scroll further than that because we don't have anything below it. But we'll be able to scroll and see for now, what we wanna do is grab the text here, copy that. And I want to select that. And while it's still selected, I want to paste it in here. Paste that in there. And let's go back in here. Yeah, that takes in. And now notice that our texts now runs all the way from the left to the right. And that's because we've used a full width single column section. I think we need to make it a triple columns, so I'll duplicate the columns twice like that. And then now get rid of the content in the side columns. Now let's delete that, delete that, and delete that. And now we have these column in the middle. So now we can drag this, make sure everything is in the middle. Let's give it an, a 20, 20% on the left. Let's also give that it's 20 percent right there, 20% on the right. Alright, so let's update that. And another thing you'll notice is that we don't have enough padding above the text, so it's almost touching the edge of the section. So let's increase the top padding on the section. Select a section advanced padding. Let's break that padding and let's increase the top padding. Just so we could have some nice room in space at the top. Something like 70. And so let's do the same for the bottom. Let's make it a 7070 like that. The next thing we wanna do is go up here and duplicate that button. And let's drag it and place it below the text. It's our call to action. And by default it's on the left. So while it's still selected, let's put it in the middle. And what does this say? Jane, my VIP list. So while it's still selected under content, my VIP list and update that. And let's preview the changes. Scrolling downwards. Awesome, So we have a nice call to action and people can click that because they want to be receiving photography advice from you. So that's a nice spot to have a call to action. The next thing we wanna do is work on this filterable gallery. Someone came view all the projects you've been working on. Or they can view them by category. For example, wedding category. They click that it shows them only the wedding related projects who've had the clique cooperate. They're shown only the corporate gigs you've had. Studio, that's your studio, outdoor. And we can go back to all. So let's see how to create that. So I'll see you shortly.
12. Creating a project gallery: Welcome back. Now, it's time for us to create these gallery right here. So let's jump right inside our workspace. And of course, as we've been doing, the next thing we need to add is another section, a triple column section. And this is the one we want to go with, so I'll select that. And now it's a triple column section. Let's create some room between the two sections by adding a top margin. Select the section top margin, break that link. So we're dealing with the top only. Rash would be a 100. Now we have this room. Next, let's click the plus sign in there. And let's go in here and type filterable. Filterable. And we have these element brought in by essential add-ons for Elementor, which is why I really like these plug-in. So let's drag it in there. And bam, it's already showing some placeholder gallery right here that we can start populating with our own content. So let's update that and preview the changes before we start populating it with our own. Let's preview that. Let's scroll. And that's what we have. So the first thing I wanna do is increase the width of this column. So I'll go back in here and let's drag that all the way to I'll give it an 11 on the left. On the left matrix here. I'll give it a 10, and on this other side, a 10 as well. And let's update that. And while it's doing that, and while this is selected, click anywhere in here. Now it's the active element we're working with. And you can confirm that by looking at the top here. Now the first thing I wanna do is collapse that settings right there. And you'll notice we have this filterable controls and we have Gallery items. Filterable controls, are these controls right here when you click gallery item and click all. These are the filterable controls, right? Then gallery items are the images themselves, the items themselves. So let's begin with the filterable controls by expanding that. And let's add an item. So let's give it a name, maybe wetting. Let's collapse that. There was already a default controls, so let's expand that and give it another name. Cooperate, core, parade. Let's collapse that. Let's duplicate it by clicking that icon or clicking Add Item. Ongoing, say outdoor, outdoor photography. Let's duplicate that. Let's say maybe something like Studio update there. So now we have a few controls. These could be your different projects or whatever types of categories you want to have for your projects. All right, So let's collapse the filterable controls and go inside the gallery items. These are the gallery items that we already have here, so we can go and start changing them. So Control name means the control that will be used to display it. So for example, if you want this gallery item to be visible when someone clicks the wedding, then inside here we will type wedding wedding. Let's collapse that. So if we want this to show up, when someone clicks cooperate, we'll click will type cooperate names. Remember these are the controls we created here. Cooperate, wedding, outdoors and studio. So let's go inside here and just randomly give them different controls. And I've forgotten to give them names. So the first item here can be my best shot. Let's collapse. All right, M before we leave it, while we're still in the my best shots, if we hover in, you'll notice that it's now changed to my best shots. And if we scroll downwards. This is where we add the image. We're still in the first element here. So we select that and we can click, let's go inside, upload files, select files. And now I think I want to import all these images at once because it will be needing them. All right, so let's start selecting one by one. I think I can start with that one. Insert media. And now that's the image that will show up here. Like just like that. So scrolling upwards again, I'll collapse. My best shots. Go to the second image. This is controlled by corporate and the gallery named might be the gallery item might be through your shorts. And then let's scroll here. Click that image in there. Whereas the studio, we had a studio image. Anyway, let's just pick any random images here. Of course, you would take time to peak the best. Let's scroll upwards. Collapsed that expand that. This can be controlled by outdoors know let's say Yeah, outdoor. Let's give it a name. Outdoor shots. And let's scroll downwards and select an image here for it. Let's update that. Let's continue, Let's collapse. Collapse that Next item. And you can go on and create as many gallery items as you, gallery items as you want. But of course, let's finish these six. Let's say this is also control. No way. This is called, may be reading, reading shots and this is controlled by a wedding filter control. Let's go inside the images. The like this wedding photo right there. And then let's keep scrolling the next gallery item here. And just begin by changing the image. Give it that. Let's pick that. And then I'll scroll upwards and give it its name. Sounds shots for example. And it's controlled by, let's say outdoor. Remember you need to make sure that these controls, these controls right here. Wedding control names are the same filterable control names you've used here because they're literally the ones you're referring to when you're filling these areas, right? So the very last one should be controlled maybe by Studio. Studio. And the gallery name. Maybe let's give it something like yes, studio shots. And let's scroll downwards and add an image for that, right? So let's click Maybe, yeah, maybe that one. Insert media, update that. And that's our last gallery item. So if I collapse this studio shots and let me just expand the very first one, my best shot here. And let's look inside so you can add things like prices enabled ratings and all that. And you can also have a link right here, page to t HTTP, google.com. And you can also, whenever someone clicks this very first item here, which is my best shots, which is besides, they, they'll be redirected to Google.com or wherever these leads them to. So if for example you have a, another page that has all your best shot, this will take them to that area. So we can also open up in a new tab. If you check that, will open up in a new tab and let's update that and preview the changes. Let's preview the changes. Scrolling downwards. Super awesome. So now the last thing we need to do is change the background color to be black. So let's go back in here. And while this is still selected by selecting anywhere, click anywhere. Let's scroll down, scroll upwards, collapsed gallery items, and then let's go inside style, background, color, black, like that. And then let's collapse generals tile. And let's go inside controlled style to change the color of these controls. So text color should be white. Update that. Yeah, So I think we're right on target with that. And you can go ahead and play around with all the settings that are available in here. There are many, but that's a challenge to you now, go ahead and play around with all these settings to see what you can come up with. But if we preview the changes now and see what our gallery looks like, Let's scroll and see what we have down there. All righty. So this is super awesome, but now I've just remembered that we forgot to add a title. So let's grab these from our reference page. Copy that. I'll go inside here. And what I wanna do is duplicate that. And now I want to drag that and drop it right above the filterable gallery. And while it's still selected, I'll select all that and paste last projects in there. And then I'll update that. Let's preview that. Right? I like what we have. So if we click cooperate will be only the corporate projects, wedding, outdoor studio, and we can view all of them. So the next thing we want to do is create the Meet the Team section. So let's do that in the next lesson. So I'll see you shortly.
13. Creating team members: And welcome back. So now we're here on the reference page that we're copying. And the next thing we want to create ease the team section, this section. So let's go ahead and do that inside our workspace, right below the filter roll gallery. Let's go ahead and add a single column section like that. And the first thing we wanna do is duplicate that. Drag it and drop it inside the single column section. Let's go ahead and add the margin on the top of this section. Give it a 100. And now we have that spacing there right below these projects. Let's give it this brief description. So let's duplicate that. And let's drag that in there. All right, so now that we have that, let's go ahead and add a triple column intersection. So let's drag an intersection in there. And so let's duplicate this section. Now we have three of them. Let's click plus in there and drag an image element in there. And while it's still active, I'll select one of these images we imported. So let's go ahead and click that guy. He's a team member. And we want to write below him. Let's click that icon and drag a small and a heading right there. And let's give it a name, maybe. Alex rider or something of that sort. Let's align it to the center. Let's make it a hate 3. And let's reduce the size a little bit. Maybe 23. Let's change the family to Monstera. Let's change the color to white. And wallah, let's click that icon in the, drag a text editor in there. Drop it in the, let's give him a title. Director for two graphs photography. Right? And then while this is still selected, is go inside style, align center. And now the distance between the name and the title is too big. So let's reduce the top margin on this while it's still selected advanced. Break that link right there and reduce the top margin. Update. And now let's duplicate this image and drop it in there. Let's duplicate that and drop it in the duplicate that and tidal twice. Drop that in the end, that one in the end do the same for the name duplicated twice. And now we can select this and change it to whatever name under contents we need. Jane Doe. And Jane. Jane go inside content. Let's change that to update that, let's select Alex writer here. Change that to my theme song. Maybe the marketing Marketing Director. Date that. And let's change the images. So I'll select this image. And once I select it, it will bring this up. Click that. Select another member. This guy. Note, let's select this lady because you use the name of a lady here, Jane Doe. Let's select this guy here. Let's select the final team member, Michael Sims on update that. And notice that this is a little bit shorter than the rest, so we can always resize them Till we have a nice feet. Just play around with the size until you have the perfect feed. And then let's preview that. So scrolling downwards. All righty, so now here's our team, but now we need to change this x to read. Meet our team, meet our teams. So update that. And let's preview the changes. Scrolling downwards. And now our team looks super awesome. So let's go to our reference page here we are. The next thing is my achievements in numbers section, this section here, and it's animated. When someone visits the page for the first time. These numbers are animated. Let's see how to do that in the next lesson. So I'll see you shortly.
14. Creating animated counter: Welcome back. We're continuing from where we left off. We now want to create these, my achievements in numbers section. And these numbers are animated. So let's see how to do that inside our workspace. So jumping inside here, I'll go right to the bottom. And, and let's create a single column section. Just like that. And what we wanna do is add an intersection. So clicking that are right before we do that, let's add some margin at the top of these sections. So click that advance, break that link, and let's give it a top margin over a 100. Right? So that's, that's enough spacing right there. So what we wanna do is click the plus sign in the end, drag an intersection. And then let's duplicate it two more times. Just like that. Now we have four columns inside this inner section, that is inside this section. So in this inner section, I'll click Plus. And then I'll type inside here count. And we have a few counts related elements here, but the one would need ease the counter. Let's drag this counter in here and drop it in there. M by default, it just starts doing its job. Do you notice that we have the ending number here, these 100 is right here, so we can always change it to maybe 23 depending on what you want to show. And change these cool number here, we can always change the title down here. So for example, let's see what we have here. Yeah, So the number of photographs is coming here and paste that in there. Now we have 23 photographs. That doesn't make sense. Let's say you have 6,400 photos. All right. So what we wanna do is style this one single achievement here and then duplicate the same for the rest. So first of all, let's change this color to yellow. Know it's white. So let's go inside style and let's change the text color to white. Typography definitely changed it to up. But you're free to change it to any font you want. And then I'll play around with the size just so that it's not too big. To think of 35 will do. And I want to make it bold, so I'll give it a 900. Now let's give it a seven hundred, eight hundred. Yup. And then I'll close that down. I'll go inside the title and change the typography here. First of all, to be Monstera interact. And then I'll change the color to our yellow here. So I'll copy that yellow and paste it in here. And now it's probably still there. Click anywhere in here to get rid of that, update that. And now, of course you'll notice that right here we have this grayish background that lets these achievements stand out like tabs. So let's create this background. It's definitely the sections, so I'll select the section itself. And then I'll go inside style, background, background, type, color. I'll give it that dark gray like that. Then let me click anywhere here. And now it's that great. But now our column has no color. So I want to select the column, Our column here. And I want to go inside style, background type and give it a black color. Now it's black. Update that. And let's preview the changes. Scrolling downwards. And that's how it looks for now. So we need to give it that border and give it a border radius. So while it's still selected, our first one, a go inside style. Border. And we'll give it a border of solid. And let's give it a border radius of five. Now let's give it a seven. And then for the border width, let's give it something like let's give it a four for now and update that previously changes. All right, let's see what our reference has. It has some sort of gray. So while it's still selected, I want to say box shadow because I've noticed we need to add a box-shadow. And when we click the box-shadow, you can't see now because of these frames, these editor frames we have now, but the box shadow is already showing. Let me just update it and go preview so you can see the box-shadow. And then let's select, Let's go. Let's select a section. I want to increase the padding at the top and bottom. So I'll go to select the section first. Vast padding, top. Let's give it a 50. Now that's 550. And bottom 50. And now we've given it some nice room at the top and bottom. And we can do the same for the sides, both sides. Let's give it maybe a 2220 or write update that. And let's do something about these border. It's too bright. So while this is selected, the column itself. Let's go inside border color. And let's give it that dock gray as well, and then update that. Let's preview the changes. Override super awesome. But now the numbers seem to be touching the top of the column and we need them to have some nice padding. So let's increase padding for the column itself. So click in that column. Going inside advanced. Remember we had broken these links a moment ago. So now let's increase the top padding up to 15 maybe. And bottom padding as well. 15. And let's now copy. Right-click the column, the column itself, right-click copy. And inside here, right-click and paste style. So you've pasted this style. And let's repeat the same for these two. We're pasting all this tiling that we've applied to this column. So now it almost looks the same as these. So next thing we wanna do is duplicate that three times and drag that in there. Drag that in there, and drag that in there. And now notice that they're touching on the edges, so that's the right and left margins. So let's select this one. Let's select these single column. And let's increase the right margin through maybe something like 10. And the left padding to 10, left margin, 10, ten or right. And then let's right click and copy that style. And let's paste this style inside these three. And now they've been separated properly. Let's update that. Let's preview the changes. Right? Let's scroll downwards and see what we have. Perfect though. So the only thing that's remaining is a sub-heading for the section. So I'll duplicate that and drag it in here. Drop it right there. And we can call this. My achievements. Numbers are right, but of course we need to change all these numbers here. They can't all read the same thing. So selecting that going inside content can change these to 51. And these could be costumers. Then let's change that to CDs. Cds you covered maybe 15 CD's. And the final May 1 be years of experience, maybe 25 plus. So right now we have 25 here. But we can come here to the number suffix or prefix and add some things. So let's say number suffix. We can add the plus sign, just hit plus, and now it will appear here, 25 plus years. So let's update that in preview the changes. So scrolling downwards. Alrighty, I love what I'm looking at. So we'll finish with that achievements section. The next thing we wanna do is create these latest blog posts area here. And it's pulling all this data from blog posts you've already published. So let's see how to do that in the next lesson. See you shortly.
15. Displaying the latest blog posts: Welcome back. Let's continue. So right now we want to create these latest blog posts, sexual. And as we already mentioned, it's pulling data from our already published blog posts. So that means we need some published blog post. Let's go inside our dashboard and create some posts. So inside the dashboard, I'll go to posts. Click that. And we have a default hello world blog post that comes with every new installation of WordPress. Of course, I'll trash that because we want to create our own, Add New or right in when we're here, let's give a blog post a name. So I'll just go inside here. And I want to grab this name right here. Copy that. And let's go inside Dashboard and paste it in there. So I will not touch anything else here because we're just trying to publish some blog posts quickly. So let's go inside settings and scroll downwards and look for a featured image. Let's set a featured image for this blog post. So let's say for example, what is this about? Let's go right camera settings for, yeah, so let's look at a nice image for the right camera settings like that. Let's set featured image. And then let's update that. Post updated. We can view the post, but let's go back inside here and create some world blog posts. Add new or RI, the second blog posts are going here and grab this name and paste it in here. And of course, in the real-world, you would go ahead and create the blog post and publish it. But now we're not creating any content, we just adding the blog title, right? So before we publish that it's add a featured image. So let's see, I think it's about outdoor photography, so I'll select that. And then published that, publish this callback. We need to create one more. Add New. So this is the data that will be pulled to the front side of the webpage and display there. So let's copy that and paste it in there. Oh, wait, let's set the featured image. I don't even know what this is about, so I'll just sit that publish. So we've now set our featured image, given it a name. Let's go back inside here. Now we have three blog posts. They have a title and a featured image. This is the title and this is the featured image. So what we have, everything we need. So going back inside our Elementor page workspace right here, we want to add a single column section, and inside it, we need to add a post grid, which is made available by essential add-ons for Elementor, but it's not active by default, we need to go back inside our dashboard and activate it inside EIA plugin. So let's go inside the dashboard and click essential atoms. Let's go inside elements. Scrolling downwards, you'll notice that under dynamic content elements post grade is not checked, so check it. Scroll upwards and save settings. Settings saved. Now we've added that elements to our arsenal right here. So let's update this page first. And then now that it's updated, it means we've saved our changes. Let's refresh the page Control R, or Command R on a Mac to refresh the page so that the post grade is available for use. All right, So now if we type greed, it appears here, Post Greed. So let's scroll downwards all the way to the bottom. And remember we had added this single column section. So first of all, let's drag this post greed in there and drop it there. Now you'll notice our three blog posts, our ready showing up. And now let's increase this margin at the top here by selecting the section advanced. Break that link over there, Give it a 100. And now we have some nice margin at the top. The next thing we wanna do is click anywhere inside this blue margin. So we've selected the element, the post grid. So first of all, we need to tell it where to pull the data from. So we could use categories. But right now this class is not about categories, but remember, posts have categories. So you could have posts about outdoor photography, posts about indoor photography. And when someone comes to your website in searches for outdoor photography, there'll be presented with posts that you've sets the category to outdoor photography. But right now, by default, if we don't have any categories, posts are usually categorized as uncategorized, so there's a category that we cannot delete it That's called uncategorized. So we can pull, by default, it's pulling data from there just to be sure we can type and, and categorized and it's appeared over 8 here. And so now we're assured that so it's pulling the data from. And the next thing we wanna do is change. So first of all, posts per page, we want to show three. So if we had seven blog posts, we would still only see three here. So that's what these means. And let's collapse this for a second and expand the layout settings. We want to show three columns or write, update that. And let's preview the changes. Scrolling downwards. Super awesome, So they're already taking shape. So don't be deceived by how they look here. If we refresh the page, let me just Control R to refresh how they look here. Or variety. So going down here. So the next thing we wanna do is of course change the background color to Ryan with our background color here. So while this is still selected, select anywhere within the element. We want to go inside style. So no, go back inside the content and let's hide some of these details here. So let's go to layout styles. And let's not show avatar. Let's not show the author name. It's not show that date. Or maybe we can show the author name. So it's up to you to decide whatever you want to show. I don't want to show the author name. Yeah, I think that's how I like it. Just the title and someone can read more. We can also show the excerpt if we want, but I don't want to show the eggs are. So going inside style, we have the postcard style background color. So let's change that to black. So it's already taking the shape we want. And the next thing we want is to go to typography and change the title color to white. Is it widen here? Here, it's wide. And let's change the typography itself to Monterrey. Monterrey. And let's increase the font way to 800. And I want to centralize it like that. Then let's expand the Read More button style or right. Let's change the text color to white. And then let's pick this yellow color. Copy that. And let's change the background type 2, that yellow color. Els change it to that column, man. All righty. So the next thing what I do is increase the padding on the button right here. As you can see, the words are touching the edges of the button. So. Let's go to the padding and break that. Let's give it maybe a 30 on the left, a 30 on the right. Now let's give it a try. Left and right 2020. And then top and bottom may be 10101055 is okay. All right. And then let's give it a border radius of five to give it that rounded corner like that. And then let's break these margin. And let's give it a top margin. Let's increase and use our eye to see how far we need to go, let's say 15. And on the left margin, let's increase the left margin to maybe, let's say a 100. Yup, a 100 is okay for now. Let's change this font to black to black. And then on hover, Let's change it to white. And then let's change the background type color to these mild red. So let's paste that in there. So on whoever eats that mild read, update that. And now our images here have sharp corners and our reference images here have rounded corners. So let's do something about that. So collapsing that and going inside thumbnail style, Let's give it a border radius of 20. And now it has that rounded corner. Update that. And now let's duplicate this title. And let's drag it in there. Latest blog posts. And then let's duplicate that is well, and drop it right there. Like that. So that's a brief description of what to expect down here. Update that. And let's preview the changes. Scrolling downwards all the way to the bottom or right. So that's what we have currently. I would advise you to continue playing around with the settings to see what else you can be able to produce with these post greed. So the next thing we wanna do is create this form right here. It's another awesome call to action. Get photography tips, a new delivered to your inbox. So this is a nice way to get user email so you can be able to talk to them on a regular basis. Let's see how to create this call to action section in the next lesson. So I'll see you shortly.
16. Adding a form: So the next thing we want to create is this call to action area here that has a sign-up for, and it's a pretty important part of a landing page because it allows you to capture user's contacts. And that's a very important part of online business. So let's see how to do that in our projects. So jumping inside here. And what we need to do is go inside here, up, scroll upwards, and duplicate this section. Remember we already created something like that. And now that we have two of them, I'll just drag this all the way to the bottom. And now we can just edit this. So all we need to do is go inside here, select this section, and then inside style background. I'll choose a different image. I think I'll select this one. Insert media. And there we have it. So now it's a different image. And this is the original. Let's go down here and you'll notice that in our reference page, this one here is a little bit taller and that's because of the form and all the content. Remember I told you, the sections height is determined by the amount of content inside of it. So first of all, let's grab these texts. I'll copy that and select that and select that. Paste it in there. I'll go ahead and select that. And now that's Lorem ipsum or ride. So the next thing we wanna do is create this form. To do that, we're going to use a form plug-in code for terminator. So let's install for me later. But let's first of all, jumping side our page here, update it and preview the changes. Scrolling downwards all the way to the bottom or right. So that's what we have currently. So going inside our dashboard does coincide. Plugins, add new. And in our search bar here, we'll type for minister. Like the Terminator for Minister forms. Where is it? Yeah, right here. 200 thousand active installations by WP Mu dev. So Install now, execute or ride, Activate. And now we have four Minister installed. So we can access it from this left menu right here. So just click four minutes. So we take into these landing page with a summary of statistics. So what we wanna do is create a form. So create will be presented with some pre-made templates. And yeah, let's go ahead and click newsletter sign-up. Continue. Let's give it a name. Sign-up forms, sign up form. Let's create it. And now it's been created. So here it is with its name, has a few options right here on this drop-down menu. And you'll see how we'll be able to use these short code in a moment. For now, let's have a look at what we have. So on the left here we have different panels that have different stages of your form creation. So as you create your form, these are the stages you go through. So you first create the fields, then you style the fields. Then you determine how the form will behave when people submit data, then configure all the settings about email notifications when someone submits data through a form, then if you want to integrate and all that stuff. But right now, what we wanna do is create a form just to display here in the front end like this. So you'll notice here we have two fields and we have these options to insert fields. If we click that, we can add more fields to our form, but we only need it to have the first name and email address. If we preview that, that's how it will look. And let's get out of there. And it has these Subscribe button. So let's preview that. And the button says subscribe. So this is our form. So let's publish that form. And once it's published, will be presented with this short code that we can copy by clicking this icon right here. We've copied it. Short code has been copied successfully. Or we can go up here, sign-up form, click that and copy the short code. Once you click that, you copy the short code. Going inside our page here, our workspace. We need to go up here and click that tiny icon and say short code. And let's drag that short code element here. Let's drop it in there. And then while it's still selected, we can enter the short code we just copied from here. We just copy this short code. And now let's paste it in here. Now, that will display that form for us. Let's get rid of this button and now apply that. And let's be really changes on Friday. So that's what we have for now. Going back inside, Let's go inside appearance. And inside appearance. You'll notice we have these different options here, flat, bold material and none. Let's choose flat, and that gets rid of the borders on the input fields. And then let's go inside costume under colors. Let's go inside costume and scroll downwards and select Submit button. That should bring up the different settings for the button, for the background color. Let's change it to, let me select this yellow. Copy that inside there. Let's paste that yellow and own Hoover, who wanted to be read. So I'll go and grab these mild read going here and paste it in there. And on focus, we want it to be that red is well, paste it in there. And so let's update that and preview the changes. Or right, so it looks awesome. So let's jump right inside here and apply changes. So those changes, these changes with now reflect in our elemental workspace or ride. So let's preview the changes. All righty. So that's what we have now on hover. It's red and in its normal state it's yellow. So let's jump over to the contact area here. So let's go ahead and add the contact section. So what we wanna do is add a six column section. So this section right here with six columns. And let's drag that out to our five-point five mark right there. And let's do the same for that 5.5. And finally for that 5.5, somewhere there. And now what I wanna do is come here and duplicate that. Drag it all the way to the bottom right here. Then duplicate that and drag it all the way to the bottom. Drop it there. Go back and copy that, duplicate that. What we wanna do is say the office. And of course, where the office is, is that area right there. And I want to duplicate that and then drag that in there. Duplicate that, drag that in there. And you know the drill. But now this can be dropped in there because remember this is too small, so I'll drag that, drop that in there. Resize this to 5.55.5, somewhere there is 5.5. I'm unable to get a 5.5, but I'll duplicate that and drop silk and drop it in there. So expanding it, dropping there. The 5.5. Then duplicate that. Drop that in there. Duplicate that, drop that in there. Let's go ahead and grab this number. Drop it in there, paste that in. Email me. Call me. Let's update that and let's preview the changes. Righty. Let's scroll all the way to the bottom. And that's what we have. But we need to do something about these margin at the top. So let's go back in here, select that advanced, break that link. So we're dealing with the top, only a 100. And let's update that. So now that we're done with the contact area, so let's preview that. Dry. Let's scroll all the way to the bottom. Perfect. So now that we're done with the contact section, Let's go ahead and create this map section. This is coming straight from Google Maps.
17. Help Me Teach Elementor to 10,000 Students: Hello my friend. First of all, I just want to say thank you very
much for joining me in this class and
choosing to learn from me. And also want to
say congratulations for coming this far
into the class. The fact that you've
come this far into the class means you're
gaining value from the class. And so I really appreciate you and I hope you are
enjoying the class itself. That being said,
I need your help. I'm on a mission to teach at least 10 thousand
entrepreneurs like you to use elementary to build
their own websites or landing pages to
sell their products. And here's how you can help. You see when a new
student joins a class on Skillshare and then likes that
class and leave a review. It helps other students know what to expect
from the class. And when a class is getting a lot of reviews from students, Skillshare says,
Hey, you know what? This class is getting
a lot of engagement and a lot of reviews
from students. So it must be helpful. So it must be useful. And so let's push it upwards in the library to make it more
discoverable by new students. So the Skillshare
algorithm pushes that class upwards and
makes it more visible, more discoverable
to new students. Because it's been receiving
positive reviews. And that's where you come in. Please join me in this
mission and helped me teach at least 10 thousand
students how to use Elementor, how to build beautiful
landing pages, functioning websites
by leaving a review in this class and letting them know what to expect
from this class. It'll only take you about
two minutes and you're done. But your review will go a long way in helping
new students, prospective students, know
what to expect from the class. Class meet your expectations. Did it exceed your expectations? If you have any
questions, remember, you can always drop them
in the discussion area below this video and I will
be able to help you out. I always respond to
every single question or comments that students
leave in any of my classes. And with that being said, I just want to say
enjoy the class and I'll see you in the next lesson. Peace.
18. Adding a Google map: Welcome back. Now in this lesson, we want to add this Google Maps so that people are able to see us if you're a photographer and someone has booked an appointment with you, or you would like walk in customers to be able to find your office. You want a map on your website, on your landing page. So let's see how to add these map. Jumping inside our workspace right here. What we wanna do is add a full width section, single column, full width section. And let's give it a top margin of a 100. So going inside advanced, breaking that link, so we're dealing with a top margin. Let's give it a 100. And now let's select the plus sign there. And inside here type map. We have a few map options here. The one we want Epi is Google Maps. Drop it in there. And now we have different options here that you can fill in. This, for example, right here, you would input your actual location or the location of your office or your studio. And so let's update that and preview the changes. So scrolling downwards or Friday, so now it's live on the webpage. The next thing we wanna do, and people can switch to the actual Google map. So let's just switch to this part of the city. And there we go and they can move around and zoom in if they want to. This is Google Maps embedded on our website by placing it inside this div. So now that we're done with a map, the next part that's remaining is the footer and we're done with the landing page. So let's see how to do that in the next lesson. I'll see you shortly.
19. Creating the footer: Welcome back. In this lesson, we're just about to finish creating the landing page, but we need to add the folder and of course make the page responsive before wrapping things up. So let's jump right inside our page. And now what we wanna do is exit from this page now because we're done editing the main part of the page. So want to exit here and go inside the dashboard. I'll close that Exit to Dashboard. I'll exit right there. And I'll go inside appearance, Elementor, header and footer builder. And now we want to create a folder. So I'll add new, and it will skip that. And let's go directly to naming the 41st. My footer selects folder. That's the type of template. I want it visible on the entire website and anyone can edit it. So next thing right here, Elementor full width, let's say no sidebar, forward stretch. Let's disable these four settings right there. And then let's publish it. Now and now. Edit with Elementor because we're creating it visually in the front end on our workspace. So the first thing we wanna do is add the logo. So let's add a full width section, single column section, that is for width. And let's add an image element. And we that image selected, I'll select here and select the logo. Insert media. It's the right size. I created it to be very small and that's why it fits properly right here. The next thing we wanna do is click the small icon right here and select text editor. Drag that below the logo. Let's go ahead and copy these copyright text. Copy that. While this is still selected, I'll drop that in there and I'll go inside style, centralize it. Let's change the color to white. And let's change the font family to Montserrat. Alrighty. Let's reduce the size to 12. Because that's copyright information. It doesn't need to be very big. Let's update that. And as we update that, Let's click that and type social. Because we want to add social media icons. So let's drag that and drop it in there. And now these icons are too big, so let's go inside style and size. Let's reduce it up to that point right there. All right, and then let's select this text. Go to Advanced margin, break that link and bottom margin. Let's reduce it so we can bring them a little bit closer. And let's update that. I think I like that. Let's preview the changes. So that's what our footer looks like. So going back inside. So now that we're done with the footer, we can close this page. So I'll go inside contents. No, I'll go inside of clique that burger menu Exit to Dashboard. And now going inside pages. On the homepage, I'll right-click View and open link in new tab so we can view it. And here it is. Let's view it from the top to the bottom because now we're done with all the content. The only thing that's remaining is making the page responsive. Right? So here we go. The animated texts, he's working perfectly. I've just recall that we need to do something about this button. It doesn't have that effect we had on the original page. Let me just scroll upwards. We need to add that floating effect and I'll show you how to do that. Now jumping over to our page, this is the one we've just designed, scrolling downwards. Right? So this is what we have. We've created these. Be proud of yourself. You've created these so far if you've been following along and you made it this far, give yourself a pat on the back. Give yourself a break today, watch a movie or something of that sort. But now notice that our folder right now doesn't have these top margin, and it also needs to have these gray background. Let's scroll all the way to the bottom of this, needs to have these gray background. So going back in our page, no, inside our footer. Let's go to Appearance elemental header and footer. Or we can go to the front end right here. And if we hover over Elementor edit with Elementor, we can click my footer and it will open up the folder workspace and we can edit the photo from there. All right, so here we are. Let's select the section itself. Go to Advanced, break that link. Let's give it a top margin of 50. No. That should be the padding. Sorry about that. So that's the padding top of 50. Like that. And let's give you 50 on the bottom as well. And let's go inside style, background. Let's give it that gray color. Dark gray color like that. Dark gray, I like that. So update that. And now if we go back and right-click our page, right-click View. And then jumping, look at our page. Let's scroll all the way to the bottom. There we have it looking super awesome. But now let's increase the padding right here at the bottom of the map so that it's, it has some more black on the bottom. So let's go back in here. Let's hover over element edit with Elementor, and let's click edit with Elementor. So we can edit the page itself. Let's call the bottom. Here's where we have our map. So what we need to do is click this map section itself Advanced, and let's give it a bottom margin of 50. Yeah, let's give it a 50 in that date, bad. So now we can preview the changes. Let's grow all the way to the bottom. All right, so we have some more room here, some more black right below the map. And that's the landing page. We're done with the design on the desktop. It's time now to make the landing page responsive on different device sizes before wrapping things up. So I'll see you in the next lesson.
20. Responsive Design: The navbar: Welcome back. We've already made the landing page look great on desktop. Time not to make it look great on smaller screens that smartphones and tablets. So without wasting any more time, let's jump inside the dashboard and get started. And we'll start with a nav bar. So in here, let's go inside appearance, elemental, header and footer builder. And let's click edit with Elementor. Let's edit the nav bar with elementor. Alright, so here we are. This is the place we were editing the nav bar. And now I want to make it responsive. So going down here, let's click this responsive mode icon. It'll bring up this bar right here with all these configurations that will help us make the page responsive. As you can see, we have mobile settings, tablet settings, and we're currently right now on the desktop settings. So let's switch to mobile. So there we are. So what we wanna do is if I could just switch back to the desktop mole for a second, I want to show you something. Inside this full width section, we have two columns, the logo column and the menu column. So each of these two columns is occupying a percentage of the full width section. So when we switch to mobile screens, the section is still full width, but we need now to divide these two columns into 100% of this full width column. So we'll do that by selecting the first column here, the column that has the logo. Let's select that. And under Layout column width, let's say 50 percent. Next, let's select the second column. And under Layout column with, let's say 50. And now the two of them are in the same line. What we need to do next, the Select menu, click anywhere inside. And under layout. Let's scroll downwards and find alignment. Under responsive alignment. Let's align it to the right. And now it's in the right side. Let's grow upwards. Go inside style, we want to make it wide. Let's collapse main menu and expand main trigger and close icon. So let's give it a background color of white. So right now it's white. And on hover, let's say the background to this yellow. So let's select the background. I'll tab over to pick this yellow color. Copy that. And let's go back in here. Let's change the color to yellow. So on hover it's yellow. Right, let's update that. And now a new click the icon itself to bring up the drop-down menu. You see the drop-down menu is white in color. So let's collapse the main trigger and let's go to drop-down, expand the drop-down menu. And first of all, scroll downwards and look for top distance. Let's drop it below that point so that the menu, so that the logo is visible. Push it upwards a little bit. And then you'll notice that the fonts are white by default and yellow on hover. So let's do something about that. So scrolling upwards while still under dropdown, topography, text color. But since that to that yellow. And now they're yellow. And on hover, we want them to be white. So on over. The color is white, normal state, yellow. So the next thing we wanna do is change the background color. Under normal circumstances. We want it to be this that gray. Right? Let's update that. And let's preview the changes. All right, so now in order to see how it looks on mobile screens, press Control Shift I or my windows to open up the DevTools. That will bring up the DevTools. And I can click this tiny icon right here, responsive mode icon. And that will switch the view to mimic mobile devices. And in this drop-down menu, we can mimic many different types of devices, including iPads, iPhones, and galaxies. So this is how it looks currently on mobile phones. If we expand that, Let's collapse that. It's expanded. Yeah, I think I like it. Let's do something about this border right here. So while still under drop-down, let's scroll downwards and look for divider. Here, right here, divider, border style. Change that to none. That should get rid of those lines right there. And now the drop-down menus looking much better. So let's update that. And let's preview the changes. All right, so on this page, control shift I, and I'll click that tiny icon right there. Bring up the responsive mode. Let's click the icon right there in our menu. Looks awesome, I like it. So the next thing we wanna do is make the rest of the page responsive. We're done with the nav bar. So I'll see you shortly.
21. Responsive Design: The main body: All right, I like it. So the next thing we wanna do is make the rest of the landing page look awesome on mobile phones. So let's jump back inside here. Now that we're done with the smartphone menus, let's exit from this workspace. So I'll click this burger menu and Exit to Dashboard. Next, let's jump inside pages. And let's find our page. So here we are, our landing page. Let's edit with Elementor. So let's switch to responsive mode and see how it looks. So let's click the mobile view. Let's start with the animated texts. Click that. Now go inside style and the style, I'll go to fancy texts, fancy textiles and typography that's reduced the size up to that spot. And then let's collapse that. I'll go inside suffix textiles. Now want to reduce the size of that dot up to that point. Let's update that. And while it's still selected, let's go inside advanced. And let's break this margin link that should separate them like that. The next thing we want to do is click this column right here, go inside advanced. Let's give it a padding of 15 without breaking the link so that it applies to all the fields in here. So 15, and let's say 20. 20 is okay. We need to push this up a little bit. So selecting this section, going inside advance, Let's break, let's break the padding. And now let's gradually push it downwards up to that spot. I like it there. Next, let's move on to the button. I'll select the button itself. And I'll go inside advanced. Let's break the margin link. And that should get rid of any settings that were there. All right, let's scroll downwards. I think I like where everything is. Some people prefer everything in the middle, but I think I like where everything is positioned from the left to right. We can go ahead and select these columns right here. M for that, we can also give it a padding of 20 without breaking the link. And this 20 has been applied to all these columns because they are inside this main column. These are, this is an intersection. These are intersections. Next, let's go inside here. Pick a light that looks okay. All right, so these boxes are touching here. On the top and bottom. We need to increase the top and bottom margin. So I'll select one of the boxes, go inside Advanced, I'll give it a margin of ten. And now that should apply to all the fields there, any 2D space out everything. So I'll select, I'll right-click, copy that, and then I'll right-click that and paste style. I'll repeat the same for these two, paste style and finally, paste style. And now they're spaced out properly. Let's continue. I like where these opposition, we can select this column, go inside advanced. Let's give it a try knee 20 pixel margin. Like that. I should space out the image from the edges. Right? Next, let's select this column right here. Advanced 20 year, I should create some room between this form and the edges. Let's go down here. Select that subtitle. Let's align it to the center. Select that. I'll select that. Go inside style, middle. Do the same for this. And finally that style. Align center. Think I like where the map is, but we can also give it some padding. So I'll select the column itself, padding of 20. And then I think I like where the footer is, so we're not going to touch it. Let's update that. And let's review the changes. Awesome, so pressing Control Shift I, I'll click that icon right here. And let's switch to mobile view. So this is how it should look on mobile screens. Now, the menu, the navbar looks super awesome. The drop-down menu is working properly. And if we start scrolling, unlike the hero section, I like where everything is situated. So I think with that, this marks the end of the class. I really enjoyed teaching you and I hope you enjoyed watching it. But most of all, I hope you learned something. I hope you gained a new skill that you can now go out and use in real-world projects. My name is Ken visa. It's always a pleasure being with you here. And we'll continue next time.
Ken Mbesa, Web Designer | UI/UX Designer
