Learn Elementor and WordPress by Designing a Landing Page | Ken Mbesa | Skillshare
Drawer
Search

Playback Speed


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

Learn Elementor and WordPress by Designing a Landing Page

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

Watch this class and thousands more

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

Watch this class and thousands more

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

Lessons in This Class

    • 1.

      Class Intro

      2:08

    • 2.

      Overview of the landing page

      3:01

    • 3.

      Quick Update - The New Elementor Setup Wizard

      4:25

    • 4.

      Installing the necessary plugins

      3:06

    • 5.

      Installing the Astra WordPress theme

      1:46

    • 6.

      Overview of the elementor Workspace

      10:53

    • 7.

      Adding the company logo

      4:42

    • 8.

      Adding the nav menu

      13:24

    • 9.

      Adding the hero image

      3:40

    • 10.

      Adding the hero text block

      6:22

    • 11.

      Adding hero brush stroke effect

      5:35

    • 12.

      Adding the hero featured icons

      12:01

    • 13.

      Adding the featured episode section

      9:17

    • 14.

      Adding the podcast episodes grid title

      5:45

    • 15.

      Creating the episodes as WordPress posts

      6:22

    • 16.

      Using EA plugin to add the episode grid

      20:00

    • 17.

      Adding the About section

      5:13

    • 18.

      Installing the necessary form plugin

      1:51

    • 19.

      Creating a form with Forminator

      11:09

    • 20.

      Styling the Forminator form

      8:39

    • 21.

      Building the footer

      8:49

    • 22.

      Make the navbar sticky

      3:22

    • 23.

      Help Me Teach Elementor to 10,000 Students

      2:27

    • 24.

      Responsive Design Overview

      3:51

    • 25.

      Responsive mobile navbar

      3:28

    • 26.

      Styling the mobile menu

      4:01

    • 27.

      Positioning the mobile logo

      4:06

    • 28.

      Responsive hero section

      7:19

    • 29.

      Responsive main content section

      7:14

    • 30.

      Responsive mobile footer

      7:06

    • 31.

      Adjusting responsive navbar position

      5:56

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

Community Generated

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

171

Students

--

Projects

About This Class

Do you want to learn how to design beautiful landing pages using Elementor

If your answer is yes, then this beginner class was specifically created to help you achieve that and more.

In this class, you will learn Elementor by designing a modern podcast landing page.

By the time you finish the class:

  1. You will have understood how to work with Elementor sections, columns, typography, media content, alignment, forms, and custom CSS to build responsive landing pages. Every landing page project needs a designer who understands these concepts well.
  2. You will be able to create more effective digital marketing campaigns for your online business because you will be able to make landing pages that have a higher conversion and success rate. Many digital marketing experts will agree that "In the modern world, an online or social media marketing campaign without a powerful landing page is bound to fail".
  3. You will have gained 21st-century skills that you can use to earn passive income by designing and selling Elementor landing page templates on marketplaces such as Creative Market like I do in my shop.
  4. You will have gained the confidence to negotiate better terms with web design clients who want you to design powerful landing pages for them because you will have gained more confidence in your ability to design real-world landing pages that convert visitors into real customers. If you know how to do something well, you naturally feel more confident when discussing a project with people who need your expertise and can therefore price the projects better.
  5. Even if you're doing it just for fun, you will be able to create amazing landing pages that you can show off to your pets and friends.

Meet Your Teacher

Teacher Profile Image

Ken Mbesa

Web Design | Blender 3D Modeling

Teacher

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

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

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

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

<... See full profile

Level: Beginner

Class Ratings

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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

Transcripts

1. Class Intro: Welcome back to another awesome elementary class with me can Besser, you know, as usual, my job is to show you how to design beautiful landing pages. And they all come with a very special class called design, a podcast landing page with Elementor. So if you have a podcast or are planning to start a podcast and would like to know how to design a beautiful landing pages for it. This class is for you. Even if you don't want to start a podcast or you don't own a podcast, but would still like to learn how to design beautiful landing pages using Elementor. This class is for you. Now there are no prerequisites for these class. So if you've never used Elementor, this is okay. I'll show you everything you need to know as a beginner and as you get used to using Elementor, you'll get to learn how to use the rest of the tools. So right now we're focusing on helping you understand the most important tools and features in Elementor are some of the topics we'll cover in this class include how to add and style titles, paragraphs, buttons, images, and other special effects through your landing pages. How to create sign-up forms to collect user data. How to create sticky menus that when people are scrolling, the Main Menu stays at the top of the page. Loads will be looking at responsive design. We'll do working to make a landing page look amazing on smartphones, tablets, and desktop. Looking at how to extend elemental features with amazing third party plugins. So some of the features that are missing in elementary itself will be able to extend Elementor by using third party plugins. So if you're ready and excited to get started learning how to design beautiful landing pages with Elementor. I'm very excited to show that to you without Western anymore time. Let's jump right in. Right. 2. Overview of the landing page: So as we prepare to get started, I think it would be crucial for us to have a quick look at the results we should be expecting. So I've already opened up the landing page or designing today. And here it is, we have a nice-looking nav bar over here. Pretty simple. The logo to the left and the menu to the right. And this menu here has a button, and I'll show you how to add that button to your nav bar just in case you want it to stand out. I'll show you how to do that. Then we'll see how to create these wavy brush lines, special effects there were landing page. Next we have the hero section. Pretty simple. Two columns. The column that has the hero image and the column that has a block of text and these partner logos right here. Next we have another double column, has an image element and this block of text with a button right here. And we'll see how to do that. Then here we have the episodes section. These are basically post and I'll show you how to create the episodes as post. And when someone clicks, listen, now they'll be redirected to the page that has these episode. And they'll find a player there. And they can click right here and load more episodes. There'll be redirected to the page that has all other episodes or more episodes. Then we have another double column section with an image area and a block of text on the right. Then we have this section right here that has a data capture form. Some of the main elements you need to add your landing page to make it more effective include stuff like forms. Forms are important because they help you capture customer data or user data and its data that is important to you because it helps you understand how your website is performing and it allows you to be able to stay in touch with the people who have submitted their e-mails to you. And we have a very simple footer with a logo, the nav bar right here in the middle, some copyright text. Then we have these social media icons. This is basically what we're building. The most important thing right here to understand is how to use these free tools provided by Elementor and other elemental related plugins to come up with a nice modern landing page for your podcast. And these skills, you can also be able to design more websites, more landing pages for any other purpose, not just necessarily podcasts. Let's go and start designing. And of course we'll start with the nav bar, this section right here. So let's jump over to the dashboard and I'll see you in the next lesson. 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. Installing the necessary plugins: Welcome back. So here we are on the WordPress dashboard. Now this is a brand new installation of WordPress that I prepared specifically for this class. So I don't have any plugins installed right now at the moment. So if I could just click plugins, you'll notice that we don't have any plugins installed. The first thing we need to do to create the nav bar, to install a few of the plug-ins will be using, we'll be using plugins to create a few of the things inside here. That's one good thing about WordPress. It allows you to extend its features and functionalities by installing plugins that can do much more than WordPress can. Wordpress itself already has tools to create all these things. But plug-ins make the work of creating landing pages much more easier because they provide specific tools that are easy to use. So the first thing we need to do is install elementor and any other plug-ins will be using as we build a page. So let's go back to the dashboard and inside plugins, I'll say Add New, or you can also click Plugins, Add New. So I'll go to Add New. And inside the search bar, I'll search for Elementor. There we have it. I'll install elementor website builder by Elementor.com. And I'll scroll downwards and look for Elementor header and footer builder, and click Install. Now, this is a plugin that's created. So extend the features and functionalities of Elementor. And you'll notice that many other plug-ins here when you search for Elementor, share the name for element or something Elementor. So that means these are plugins that are created to extend the functionality that come with Elementor website builder. Before we activate these Elementor and Elementor header footer builder, we also need one more plugin called sticky header effects for Elementor. So install that as well. So those are the three plugins will be using to create our Elementor nav bar. So now that they're installed, let's go inside the install plugins list and activate them all together. So we're inside here by clicking installed plugins. I'll select all of them. And I'll go inside this drop-down menu and select, Activate, then apply. So now we have the three plugins installed. We're ready now to build our navbar. So let's do that in the next lesson. 5. Installing the Astra WordPress theme: And welcome back. So the next thing we want to do now that we have plugins installed is install a theme. So right now, what we need to do is go inside appearance themes. And because this is a brand new installation of WordPress, by default, the 2021 theme is active. Then we have the 2019 in 2020 themes which are, which are optional and you can activate any of them. But I'd like to add a third party theme called Astra. Astra is one of the most powerful free themes out there in the marketplace. And it's a multi-purpose theme that you can use to build any type of website you can imagine. Let's say you want to build a dentist website, you want to build a school website, you want to build a website for a lawyer. Astro will help you do that because it comes fully packed with features and tools to help you build websites flawlessly. So let's type Astra in the search bar right here. And it's a first result that comes out right here. So let's say install. All right, So now let's activate it. And now you can see it's the active theme at the moment. So now that we have the theme installed and our plugins are ready, Let's have a quick overview of the workspace, the Elementor workspace, while you'll be looking at when you're designing your website. And we'll do that in the next lesson. 6. Overview of the elementor Workspace: Welcome back. Let's continue. So we already have our theme and a few of the plug-ins will be using are installed already. So let's have a quick overview of the workspace as we build the nav bar. So inside appearance, I'll go down to Elementor header and footer builder. And of course, because it's a brand new installation of the header and footer builder. We don't have any headers or footers listed right here, but once we start creating our own, they'll be listed here. So let's say Add New. And so let's give it a name, nav bar. And you'll notice we have all these options right here. So on the right side we have this template setting under posts attributes. So change it to Elementor full width. And then an astro settings. These are the settings that come with the theme. We want to set the sidebar to know sidebar, because we don't want a sidebar, no sidebars. And we want the content layout to be full width slash stretched. Then we want to disable a few of these sections. We don't want the default primary header that comes with Astra. We also don't want them mobile header that comes with Astra. Neither do we want the title or the footer. So let's publish that for now. All right, Now you'll notice that we have this type, type of template option here, and it has a drop-down menu. So select header in the drop-down menu, and that will reveal more options. Display on all entire website if you want it to be displayed on particular parts of the website or the entire website, or even on a single page, we have all those options that come with this plugin. So one is visible on the entire website and user roles. So who can use it, who can have access to the nav bar and who can edit it just in case you have other people working on your website and you're the main admin on Wordpress. You can allow, you can set who can edit this header and footer. So Select All. And let's make it available for Canvas template. And Canvas is one of the options below post attributes. Remember we've said these two Elementor full width. We also have elementor canvas. And as you get used to using elementary, you'll get to understand what templates are. But for now, just know that if we want to get these results on our page, we need to work with Elementor full width, and that's, this is pretty much the template I use for almost every single web page I created. Now with those options, let's go ahead and click Update. And now we're ready to edit with Elementor. What we were doing right now was creating if I could just go back to appearance, Elementor, header and footer builder. So what we just created is the nav bar right here will also create a folder, but we'll do that later. So right now we have the Napa. And if we click Edit will go back inside here where we can, where we can configure all the settings. But to build it visually, to look like this, in the front-end, will need now to go and edit with Elementor will be redirected to the front end from where we'll be able now to start assembling the whole thing. And now this gives us a great opportunity to have an overview of the Elementor workspace. So here we are on the Elementor workspace. This is where we'll do all our editing in the front end. Basically what we'll be doing is dragging any element we need from these panels right here. Let me just collapse this and that and that, and all of them. So all these paints right here contain elements and these elements can be dragged and dropped in here depending on what you want to add. So for example, if we want to add, let's say for example, we pick that triple column, you see it's been generated. So if we wanted to add something inside there, we would click that Plus. And these elements will appear here and we can drag anything we want inside there. If we want to add something in here, Let's click the Plus and drag an image elements in there. And while the image is still selected, we can edit stuff in here. We can add that image. Insert media. We can drag and resize the columns. Basically in Elementor we work with columns. The blue area right here that has three columns is called a section. And the section is a triple column. And there are different types of sections right here. And you can also create your own. So for example, if we create a single column section which has once one column right here, we can duplicate that column like that. Just in case when you hover over elements, you don't see these pop-up menu like that. Go inside these preferences and go inside user preferences and make sure editing handles is set to yes. Let me go back. So basically you just dragging items into columns. And then when the item you've just dragged is active, you can make changes to it because notice that when this is selected, it says Edit divider because it's a divider elements when you click the Text right here, notice it changes to edit heading. If we click the image, it'll change to edit image to tell us that that's the current item we're editing right now. And so we can make any types of changes we want. Configure this image to be bigger, to be opaque, add drop shadows to it and all that stuff and we'll see how to do all that. I just wanted to give you a quick overview of what you should expect on your elemental workspace. So your, so you get used to it as we go along. Remember, if you open up these other panes right here or these panels, you'll notice that we have we have the Pro panel that has elements that you only have access to if you're a Elementor Pro member. If you have the Elementor Pro, right now we're using the free version of Elementor. But remember we also installed tool plugins for Elementor. That was Elementor header and footer builder. And sticky header effects, it's somewhere within here. But basically, whenever we install a plugin that was created to extend Elementor, you'll find it listed here and it comes with its own elements to extend the power of Elementor. So that's something you should remember. So I don't want to bore you to death. Let's jump right in and get started building this website right now. So let me just get rid of everything right now. Let's update that page. And I forgot to tell you what we have down here. So we have this is where we'll be updating our progress. If we want to preview the changes, this is where we'll click and I'll show you when we'll do that. Then here, this is where we click when we're ready to make the page responsive, when we want to design it to be responsive on mobile and tablet. Then the next thing here is the history. So if we click that, you'll see a list of all the moves we've made since we started editing the page. And if, for example, we click this point in time. As you can see, this icon looks like a clock moving anticlockwise. It shows this is like rewinding and going back in time. So if we click that, it'll take us back to the state the page was in during that moment. So if we go back to Section added, this was a time we added a section. So that's the history. Then here we have the navigator just in case you have so much stuff right here in your page that you don't even know where you are when you're editing stuff. You can click this navigator and you'll be able to now see a breakdown of everything you have on your page as an outline. And right here we have more changes, more settings that we'll get to learn about as we progress. And right here at the top, just in case you want to add some, an element from here and maybe you're inside there. Let's say for example, let me just add something here quickly. Title there. And then now because this is what's active, edit page title, if we want to add something in here, we don't necessarily have to always click this plus we can just go directly and click that icon right here. And Ido reveal the paints, all the pains. So if for example, you're not, you can see the paints and you want to add something. Click that and it'll reveal the pains and you can select the element you want to drag. All right, so that's enough about the workspace for now. The rest will get to know as we progress with our Western anymore time, Let's jump right in and start designing the header visually. In the next lesson. 7. Adding the company logo: So welcome to this lesson. Now that we've had an overview of the elemental workspace, It's time to now get started adding these elements. So the first thing we wanna do is add the company logo. So going back inside the nav bar, what we need to do is select a double column. And this double column section is divided like that. Of course will be able to resize it as we progress to give it the right size. And I suggest you do the same right now, what will add on this side is this nav bar, nav menu. And on the left side will add the logo. And the logo is an image element. So click that plus sign right there. And under the basic panel, let me collapse that under the basic panel, which contains the basic elements of any website. Let's pick the image element and drop it in there. Without clicking anywhere else. The active element to edit is now the image. Just to confirm, just click it, and this will appear here. So let's choose an image click inside there. We don't have any elements for now, so let me upload a file. And I've already prepared this folder for you. It's called Podcasts landing page class, and I'll provided in the description below, be sure to download it. It contains all the elements we've used on the website. So inside that folder we have project assets and we have all the images including the logos. So I'll double-click that and import the logos or RI. And so you'll notice that we have two large logos and two small logos. We'll use the small logos for the website branding. And I added these two just in case you needed to add the logo anywhere else and get creative with it. So I'll go with this one that has the cast in white. So I'll select that. Then insert media. And you'll notice that the white part is not visible because the background itself is white. So what we wanna do is change the background to this blue. So let's go inside there. And we'll select this whole section, the blue section that has the two columns. And just to make sure you're editing this, it should say Edit section up here. And so going inside style, Let's go inside style. Under Background. Click the first brush icon right here, and click right here next to color. And let's give it that blue. And instead of guessing these color codes, I had already created that blue color and say it enough. In this file, project assets. I'll provide this README project guide inside the podcast landing page class folder that I just talked about. So let me open that. And as you can see, we have different colors right here, the nice blue, light green, and dark gray. But of course you can use your own colors. So I'll copy this nice blue. Copy that. Let me minimize that, close that folder. And in here, background, normal color. I'll paste it in there. And now we have that background and the logo is visible. Let's update that. And let's preview the changes. So there we have it. Our logo is ready looking all good. Next thing we want to do is add the nav menu. So let's go ahead and do that in the next lesson. 8. Adding the nav menu: Welcome back. Let's continue time now to add the nav menu right here. And as you can see, we have four menu items, landing page Home About Us contact. And these are essentially webpages. When you click any item right here, it should lead you to the page. So for example, About Us will lead you to an About Us page. So essentially the first thing we need to do is create these four pages. So going back inside the elemental workspace, Let's click this plus sign in near this plus sign here. And in here, type nav, nav. And remember one of the plugins we installed was header footer builder for Elementor. So one of the Navigation Menu elements here will be navigation menu with this HF on the corner. So that's the one we need. Let's drag and drop it in there. And once we do that, the menu doesn't appear yet. So why does it need appear? Because there are no menus in your website and it says clearly that there are no menus in our website. So we need to create a WordPress menu, which we will use this element, this navigation menu element to display. We will display it right here. And so how we do that is, first of all, let me update that. Let's update that. So I'll jump inside the dashboard without closing this workspace right now. So in here, we need to go inside appearance menus. So will be redirected to this page. And this is where we can create menus for our website, we're press menus and you'll notice that under menus, it says create your first menu below. And then we can give on menu a name. So maybe something like new menu. And let's make it our primary menu. So let's create it. Now the menu has been created, but we don't have items. See right here it says Add menu items from the column on the left. And the column on the left right here has add many items and one of the menu items here can be a webpage, can be web pages, and we can add web pages, which are going to do right now. But, but the menu items can also be posts. For example, you can have blog posts, one blog post and another blog post and then another blog post. That's also possible. You can also create your own custom links. So you can create a link right here, hey, HTTP, WW dot something, and then the link text maybe you want to say calculator and then add that calculator item here so that when someone clicks it, they're redirected to this URL. You can also have categories as menu items. So what we wanna do is create the four webpages that we want the nav menu to lead to. So let's go inside pages. And obviously I don't have any page because this is a new installation of WordPress. So I'll say Add New. And I'll go ahead and close this down. And we have this workspace here. This is the backend editor that comes with WordPress and it's called Gutenberg. And this is the equivalent of Elementor, what we have here, we have an editor that we can use in the front-end WordPress default editor is called Gutenberg and it works in the back-end right here. But what we wanna do is just give this page a name and edit with Elementor. So let's give it any name. And then on the right side right here, before we hit Publish, Let's go to template and set it to Elementor full width. And right here below Page Attributes, Astra settings, let's say no sidebar and content layout, full width stretched. Then let's go ahead and disable these three as usual, disable the footer as well. Then publish. Now that it's published, Let's go back to the pages least. And now it's listed here. I want to create three more pages so that we have four pages. So I'll fast-forward this part and create more pages. Then we'll continue from there. All right, so now we're back. We have created four pages. I hope you've done the same. You can create as many pages as you want, as long as they can feed right here. Now that we have our pages ready, we can use them as menu items. So let's go inside appearance menus. And now you'll notice that under pages we have the four pages we just created. And this part of the new menu we've created tells us we can add items from the column on the left. So let's check all of them. And then add some menu. Watch what happens or ride. So they've all been brought right here and we can use them as our menu items, just the same way they're stacked from top to bottom. There'll be displayed from left to right in the same order. So generate quote will be the first item right here. So I'll drag home here to be the first item that will bring it right here. Drag home to be the first item on the left, then the blog, then the shop. And then I'll say Save Menu. Over in now our WordPress menu is ready to be displayed with the header footer. Build a plug-in we placed in the front end using Elementor. So going to the front side of this page in the elemental workspace and having saved our changes, I'll hit Control R to refresh the page. And now you'll notice that the menu is now displaying. So I'll go ahead and select it. Click anywhere within the blue line, within the blue border. And you'll notice that the message that was here has changed because now we have a menu end. This is the menu we created, the new menu. New menu, and the items we created these webpages that we added as menu items to the new menu are now being displayed here in the front end. Now we'll want this menu to be on the right side. So while it's still selected under Content menu, you'll notice we have last menu. First of all, let's put that to be a button. Generate quote will change to a button like that. Then let's open up Layout. Under alignment. Let's go to the right. And we want the menu to be white in color. So first of all collapsed that layout and go inside style. Then under main menu, we have many options and if I collapse main menu, we have four paints. So let me just open up main menu first. So we can go right here where it says say pornography. I'll click Topography and let's change it to Montserrat. Let me just scroll right there. So I clicked typography, family. And then in the box right here, type months around. Thus a font that looks awesome, but you can choose any font you like. Click anywhere outside that box. Then undertake text color. Let's click that color right there, and let's change it to white. And you'll notice it's changing too wide in real-time. Let's update that. Now we want to work with this shade of green that rhymes with the logo. Let me drag that a little bit. So I'm going to jump over to where we had our colors and pick this light green. Copy that, then jump back to where we're working from. And under topography, we've changed the text color to white or normal state. But on hover, right now currently it has that shade of green, but we want the shade of green. So on hover will want to click that and paste that beautiful green right there. No, let me pick that. Copy that and paste it in there. Paste it in there. And when we hover over it now that it has that shade of green, Let's change these buttons shade of green. So clicking anywhere outside this box to get rid of it, I'll collapse the main menu and I'll open up the button. And under Background type, I'll click that brush icon. It will reveal this current green. I'll click that. And then I'll get rid of that and paste the green that we copied from, from the text document. And now it has that shade of green, but now own over, that text is disappearing so we wanted to remain white. So clicking outside there for the text color on hover, we want the text color to remain white. So on hover, it remains white or we can change it to this blue. So first of all, let's update that. And let's preview the changes. Or RI. So our navbar is taking shape. I like what I'm seeing, but of course we will need to do some more work to balance out these margin right here. But we'll do that, don't worry. So back in here, what we need to do is on hover will want the text to change color. So while the whole element is still selected by clicking anywhere within the blue border, I'll go over to this text document and copy the nice blue. Copy that. And then in here, I want to go, while we're still editing the navigation menu. Texts on hover should change to that Lou. Now when we hover over it, it changes to that blue. So let's review the changes. Or RI, awesome, I like that. So there we have it. Next thing we wanna do is work on this brush stroke right here before we move on to the hero section. And we'll do that. Well, we're doing the hero section because this brush is actually part of this section, not part of the nav bar. So we're done with the nav bar. I'll see you while we're working on the hero section in the next lesson. See you shortly. 9. Adding the hero image: Welcome back to another lesson. We're now ready to build a hero section. Now that our navbar is ready, it's time now to build the hero section. And this hero section is divided into two columns. The column that has the image and the column that has the hero text and these icons right here. So the first thing we wanna do is add the hero image. So let's go ahead and do that. So inside here, I want to close down this page because we're no longer using this workspace. Remember, we were building the nav bar. Now that we're done editing the navbar, we can make sure first of all, we save our changes. So if you, if this is green, make sure you click Update. And then yeah, Let's Exit to Dashboard. So we can now create the landing page itself. So here we are in the back-end will go inside the pages because our landing page is definitely a page. And we can choose one of these pages to be the landing page. And by default, I just wanted to be the homepage. So this, Let's click on Edit under Home. And of course will be taken right here because we're press assumes you want to edit it right here in the back-end using Gutenberg. But we want to click Edit with Elementor so we can start creating it visually. All righty, So here we are. Now. First of all, once you open the space that the one thing you'll notice is that this navbar is now not editable. This is not the workspace to edit the nav bar. To do that, we would have to go back inside the dashboard under Appearance Elementor, header and footer. And then under navbar, we would click Edit and or edit with Elementor. And we would go to the front end and be able to edit it. But right now, I'll close that down. And then now here we're editing the landing page itself, the main content of the landing page apart from the header and footer. So let's go ahead and add, let's go ahead and add our hero image. So I'll click that to add a double column. Because you can already tell it's a double column. I'll drag the edge just a little bit because the image is not as big as the textContent. And in here, I'll add an image element just like that. Then I'll click in there. And because I don't have that image here, we'll have to go inside. Let me upload those images from our folder. Remember I mentioned you can get it, you can download it from the description below. So I'll go inside the models image and I'll upload this one. Certain media. And there we have it. Next, we want to add the Hebrew texts together with these icons right here. So let's do that in the next lesson. 10. Adding the hero text block: So now it's time to add these hero text block. One thing I need to mention is that it's important for you to have one H1 on your landing page or on any page for that matter. In just in case you don't know about HTML headings. Html has six levels of headings. The largest is H1, and the smallest is H6. H1 is the most important and it's what tells browsers and search engines what your webpage is all about in simple terms in a short phrase. So keep that in mind. You cannot have more than one H1 on your page, but you can have multiple H2, H3, H4, H5, and H6. And let's go ahead and jump inside the workspace. And then the first thing we need to do is click this plus sign to bring up these elements and then drag the text heading right there. And you'll notice it says add your heading texts right here and we can do that right here. So I think it says, Welcome to the podcasts. Podcasts, right? Like that, and make it one sentence like that. And now, while it's still selected, let's go inside style, text color, and let's change it to 40, 40, 40. So that's a dark gray, not black, it's a dark gray. And let's say let's click anywhere, Let's click anywhere outside the box to get rid of it. Let's update that. And while it's updating, Let's go inside topography. And let's change the family two months around. Let's grab this size knob right here and pull it to increase the size. Let's leave it somewhere there for now. Of course, we'll tweak it until we have the results we're looking for. I just wanted to take its low so that you understand the things we're doing. So click outside anywhere there. And the next thing we wanna do is create this description right here. So I'll copy that. And I'll click this small icon right here to bring up these elements. And then I'll drag these text editor. And when this blue line appears below the h one element, I'll drop it there. Now while it's still active, I'll select all of these texts deleted and paste what we just copied from here. Then update that. Now before we go any further, I just remembered that if we select the H1 right here, it's actually, we've not set it to be an H1 under the content, while this is selected under the content tab, down here, HTML should change it to hey, one. And as you can see from the drop-down, we have H one all the way to hate seeks then these other elements. But we want it to be one. And let's update that. All right, so let's preview the changes. So that's what we have at the moment. So the first thing you'll notice is that we need to push these items down. So let's do that. Let's increase the margin at the top. And we do that by selecting the whole section, this whole section, right here, right-click and edit section. And now it's the active element here. Let's go inside advanced. And let's remove this link and give it a top margin of a 100. Let's make it 80 year, and let's update that. And let's preview the changes. Or right, so that's what we have. Next thing we wanna do is add these brush stroke right here. So let's go inside. Let me close down that preview and let's go inside our workspace. And I'll click the section itself. So to increase the margin at the top here, Let's do that inside the columns themselves. Let's go inside these column, select that, and now it's active element, we're editing. And let's go inside advanced, break this link. And then for the top margin, let's give it something like 70. Now that's 770 for the model as well. Let's go ahead and click his column. And then let's go inside advanced. Break that link. Let's keep that column 50. Yeah, 50, top margin. Let's update their own right, so let's review the changes. Awesome, so that's what we have at the moment. 11. Adding hero brush stroke effect: Next thing we wanna do is add these brushstrokes right here. So we want to add that brush effect. And we do that on this, on the top of the section. As you can see, that section right now is intersecting with the top nav bar. And so we can add that brushstroke here. So let's select the section itself by clicking that area there or right-clicking and edit section. And then let's go inside style shaped divider. And then we want to say for the top shape divider, we want waves brush in this drop-down menu, you can choose any option you want. But in this case we want to go with waves, brush, and then we want to give it a height. And now you can't see it because by default it doesn't have any color. So what we wanna do is copy this blue, this blue color right here. So I'll tab, so this page right here, you have these already in the description below. I'll copy that nice blue. Then I'll go back in here. And while our sexually selected and we're insights tile shape divider will go inside the top area and change the color to that blue. So now it's already taking shape. Let's try to give it maybe a height of 60. And let's update that. And let's preview changes or ride. So I like how are we going? But now notice that that curve has now reduced the margin here. We need to increase the margin on this column. So let's select this column when we hover over it. Let's go inside advanced. Let's increase it to, let's us use our eye up somewhere there. For me, it's 110. Update that. Now. Now you might be wondering, wait a minute again, these podcasts, podcasts on our reference page is a little bit thicker than welcome to the. So what's happening right there? Now there are two methods we can use to achieve these results right here. So if we go back inside our workspace, the first method we can use is delete that, so I'll highlight that. Then. Let me highlight that, then Control X to cut it. And now that we're left with this, we can duplicate that. And then while this is selected, we can paste that text in there. And then we can edit each one of them individually. So I can come and say, so I can make this slightly smaller, maybe something like 44. And then select this any side style typography. I can give it a weight of 800. And now it's thicker than this other one. I can give this a weight of, while it's still selected under style typography, give it a weight of 300. Like that, then update changes. So there we have it. So if we preview the changes on the page itself, that's what we have. And it looks something similar to this. But now there is a quagmire here. While we've separated the, well, we've separated the two of them. Now. We now have two H 1s and we don't want them to be 20. Which one's on this landing page, we need only one H1. So we can't have them both as H 1s. So weak what we can do is select this and under content, change these to H2. So let's say that and preview the changes. Let's preview the changes. And we have something close to what we have on the final page. But of course, as you will notice, our description right here is a little bit longer than, than our reference. And that's because first of all, we need to, first of all, we need to make this column a little bit narrower. So let's grab that and pull that up to probably that point. So that means we need to reduce the size of podcast up to that point. Then update that and preview changes. All right, awesome. So this is where our featured section will go and we want to add these icons right here. So let's see how to do that in our next lesson. 12. Adding the hero featured icons: All right, So now it's time to create these featured on section. So going back to our workspace right here, the first thing we wanna do is add these featured on. So I'll go ahead and grab that, copy that. Then I'll come in here and click that icon, drag a heading. When the blue line appears there, drop it there. And now because it's the active item here, I can paste the featured on texts right there. And for now it's a little bit big, so let's make it, first of all, let's change its color to 40, 40, 40. And then let's change it to Roboto. It's a monster. Ok. And let's reduce its size to maybe something like 18. Font-weight 700. And let's update that. Or right, next thing we wanna do is create these icons right here. And these icons are held inside columns. So this is an intersection and another intersection with columns inside of it. So the first thing we wanna do is go inside here and select an intersection. And that's basically a section that can be dropped inside another section or inside a column. So I cannot drop this whole section inside another section, but I can carry an intersection and drop it inside a column or another section. So we that remember we can duplicate columns, so I'll duplicate this as well. So now we have three columns. And as you can see, it's already starting to take shape. N is you guessed it right here. We will add image elements. So what I wanna do is just style one of the elements and then we can just duplicate and add them inside the rest of the columns. So for this image, Let's go ahead and open files. Select files. And I want to navigate inside the podcast partner, podcast partner logos. And I'll select all of them because we want to use all of them. So now that this is loaded already, let me select that and insert media. That's the first one. So right-click Edit Column and then go inside advanced know Let's go inside style first, and let's go to Border. Next box shadow is on Edit icon, so click that. And the moment you do that, you'll notice the box shadow appears and we can start styling it. So the only thing I wanna do for now is reduce the opacity so that it's, the box shadow is less visible like that to that degree, maybe a 22. And then I'll click somewhere inside there are one is blurred a little bit more and then spread it out a little bit more. Let's say up to that point. I also want to reduce, Let's reduce that opacity a little bit. And with that, let's click outside this box and let's make the border-radius something like 10. And let's update that. That gives it a rounded corner like that. So let's see what we have. Let's preview the changes. So that's what we have at the moment, you'll notice that this logo seems to be very tiny. Let's see what we can do about that. Clicking while the column is still active. Just to confirm, I want to come here and break this link. Now that says resets all the padding around the logo. And let's leave it like that for now, I like the size. So what we wanna do next is select the image itself, hover over the image. Not this is the column, and then this is the image. I want to duplicate that. And once again duplicate there, drop that in there, drag that and drop it in there. And then I'll select this column right here, right-click copy. And I'll say right-click. Paste style. And now these inherits this in now this, this column also gets the styling of the first column. And I'll do the same for these right-click paste style. Now the three columns have the same styling, but notice that there's still touching on the sides. We want to increase the margin. So while this is still selected, Edit Column advanced, Let's go and break that link. And then for the left margin, let's give it a five. And for the right margin, Another five. All right, so let's right-click copy and let's paste that new style, paste style. Let's do the same here. Paste style and now we have enough spacing around them. Update that. And let's preview the changes or righty. So the next thing we wanna do is click inside here, and that will select the image itself, not the column. And while the image is selected, let's choose a second logo bus route. Let's do the same here. Let's select the third logo, Google Play. And then now that we have those three, Let's duplicate this section like that. And let's repeat the same here. Apple Podcasts. Let's pick a Ford logo, then the fifth logo, and then the very last logo, or right. But now notice that they're touching on the top and bottom. So we need to increase the top margin on this section. So what we need to do is select the section intersection itself, go to Advanced, remove that link right there. And then for the top margin, let's use our eye to positioning accordingly. I think that's the right spot. Let's update that. But now I think these drop box shadow is a little bit dark. So I want to select one of the columns here. And inside style, I'll go inside the border. Box shadow. So click that MNR, want to reduce that opacity further somewhere, maybe 11. And then I'll copy, copy the style. Right-click paste style, and repeat that for all of them. Paste style, paste style. And finally, paste style. Let's update that and preview to changes or variety. I like the results are getting so far. I think you'd actually live in looks better than regional. Awesome. So now you'll notice that when we hover over these icons right here, there are actually links and they lead to a different website when you click them. So we need to make these links. So how we do that is select the image itself and one of the options and the content here will be a link. You can say custom URL, and you can input any URL you want to lead people to. So for example, if these, if it's Apple Podcasts, something like www dot apple podcasts.com, slash listen. And if you want the link to open up in a new tab when someone clicks it, you can click that cogwheel and say open a new window, update that. And let's review the changes or ride. And so when someone clicks that, knowing me hover over it, it's a link and when someone clicks it were taken to a new page and our pages still intact. So let me close that page. So let's go ahead and repeat the same for the rest of the images. So I'll click that image in there. Then I'll just add a hash sign for now. Go ahead and add the links you want. For your case because it's yours is a real website. Let's go ahead and say open in new window. Like that. Remember to open in new tab. And finally, Spotify or right. So let's go ahead and preview the changes. And now when we hover over any of them, it's a link. And when you click it, it takes you to a whole new page. So now that we're done with the hero section, Let's move down to the main section of the landing page in that begins from right here from the featured episode. So the list of episodes to the gallery of episodes, all the way to the bottom right before the footer. So, so let's go ahead and create these featured episode in the next lesson. 13. Adding the featured episode section: Welcome back to another lesson. So right now we want to create these featured episode section. And one thing I like about Elementor is the fact that you were able to reuse elements. You'll notice that we have a similarity between this block of text and this block of text right here. So inside here, inside our workspace, what we can do is create a double column. And this double column will hold this block of texts with a button and this image. So let's first of all add an image elements in here. I'll click the plus sign there and drop an image there. But notice that we have no margin right here at the top. So with the section selected, I'll go inside advanced. Break that link. And then for the top marginal, give it maybe 90. Let's give it a 100. Right? So that's the position. And then what we can do is duplicate these elements right here. So I'll just duplicate that and drag it inside there and drop it when the blue line appears. I'll repeat for this other heading. Drop it right there and then duplicate that and drop it right below the H1. But now on our reference page, this is not an H1. We can't have more than one page one. So let's add, let's change that. Let's make sure that this is not a one. Let's make it a HA2 and let's reduce its size. And let's also reduce the font-weight, the font weight to something like 700. And now let's chain, Let's grab that. Let's grab that first. I'll just copy that. No need to retype all this. I'll click inside there, and then in here, I'll paste What we just copied. Copy that. And then I'll select that. And inside content, I'll draw, I'll paste that other wording right there. So you'll notice that it's taken too much space. First of all, the image on this side is a little bit small, so let's resize it accordingly. Then let's reduce the size of this H2 up to somewhere there. You'll notice that the spacing here is almost touching. So I'll go select the edit section. And then inside layout, under Columns gap, I'll go to, I'll choose wide. And that'll increase the spacing between the two columns a little bit. So let's update that. And let's preview the changes. All righty, I like what we're getting so far. So going back in here, I'll select the image. And let's go inside here. And let's upload the image of that model we have right there. These podcaster image to awesome, so insert media. And there we have it, but it's a little bit big, so let's reduce the size like that. And then let's say update. Let's preview changes. All right, so now let's go ahead and add this button. So I'll go inside here. And I'll select the button elements and drop it right below there. And by default, it has this green that, that our nav bar had at some point. So we'll need to replace that green with this screen. So tab a crossing, grab this. So I'll grab that green. Copy that and go back in here, select the button anywhere within these blue border. And while it's still selected, I'll go to style color. And then I'll paste that in here, paste it in there, and now click anywhere in there. Now the green is that shade that we want. But we want it to have these blue font and on hover each will be white. So we're wanting to have this blue color in normal state and on hover wanted to be white. So let's do that. First of all, what does it say? Listen to this episode. So let's, while it's still selected, let's go to the content. Let's go to icon, icon library. Let's do something like headphone, maybe something like that. Insert. And now we have an icon and we can choose to put it before or after the text and change the texts while still under content. Let's go to text and say, then let's update that. And of course we can specify where we want the button to redirect users to, so we can input our URL right here, https, www.dot_com. And if you want it to open up in a new tab, when someone clicks the button, click that COG wheel, and of course select that opening new window. Go ahead and try it and see what it does. But now, then again, notice how this has some proper padding on the sides. So let's go ahead and add some nice padding to this button. First of all, let's change this font color. Let me tab right here and get these blue. I'll copy that. And while it's still selected under Style button, I'll go to text color. No normal state should be that blue. And own home over the text color needs to be white. Then let's update that. And while it's updating, I also wants us to add that padding. So let's scroll downwards and look for padding. Here it is. So I'll break that link and that will distort the button completely. But what we wanna do is first of all, for the right and left, let's give it a 50 padding. 50, 50 m for the top and bottom. Let's give it a 20, 20, 20, and 20. So now it has proper padding and it looks much more presentable. Think we can also make these, hate to use the same blue as these. So let's go ahead and grab that blue copy. Let's select that. While it's still selected, I'll go inside sex color and give it that blue. Same case for this or ride. I like it. So let's, let's preview changes. And let's scroll downwards and see what we have. Awesome. Next thing we wanna do is create these episodes gallery right here, and we'll do that in the next lesson. So I'll see you shortly. 14. Adding the podcast episodes grid title: Welcome back. I hope you've grabbed a glass of water. Now it's time to get back to business. So basically now we are creating this gallery of episodes right here. So let's get started by creating these heading. Then we'll get down to creating the gallery itself. And so if we could jump right inside the workspace, let's go ahead and create a single column section. The first one right here. And now inside here we can drop this gallery. But before that, let's create these heading. So I'll just copy that. And then in here I'll just duplicate that and drop it in there in the single column section. Then I'll select that. And while it's still selected, I'll paste the text I just copied from here. This text. All right, so the next thing we wanna do is bring it to the, align it to the center. Align it center. And let's give it this blue background. I want to give it this blue pad. Well, so let's grab that blue from this font right here. Well, this font is selected. I'll click that and I'll copy the blue. Then I'll go inside this section, Edit section, style for the background type of paste, that color code right here. And now it has that blue. Now this font, this heading is blue. So let's change it to the screen. So I'll copy this, I'll select this button. And then I'll, because it's now highlighted under Style, I'm going copy these green. Or if you still have this document open, It's the screen. I'll select these heading. And while it's still selected under style text color, I'll paste that green in there. And now it has that green. Click anywhere inside here to get rid of that. Then I'll update the changes. Next thing we wanna do is add these brush effect right here, the same way we did for the top section. So the way to add it right here above this section, because right now as you can see, we have a straight line. We can't add that brush1 top of these is added inside this section right here, these featured episode section. So let's go inside the section itself, edit section, and then under style shaped divider, bottom, because now we want that the curation right here, bottom. Let's choose waves brush, and now the color is invisible. So I'll copy that. Nice blue. And while it's still selected. And while we're still here, under shaped divider, under style, color, paste that in there. And that's too big. So let's reduce the height to something like 60. I want it at 60. Update that. And let's preview the changes. Scrolling downwards. It looks awesome, but now this guy is touching the brush stroke. So let's go and add some padding below this guy. So we'll select the image of this guy. And inside advanced, we'll go and break that link right there. And then for the bottom padding, let's push it down until we are satisfied with the distance. So for me, I think that's a nice spot. Actually that's a 100. So you can just input a 100 for the bottom padding. Update that, and then let's preview the changes. All right. That's super awesome. We can't go beyond there because we don't have anything below. Below here. Let's add the gallery now. Now the way to add these gallery is simple. These gallery items right here, our posts, they are WordPress posts. You can create a blog post. You can create an episode is a post. You can create a product as opposed. You can create different types of content as posts. And so let's go ahead and create a few posts, will create maybe about six, so we can display them here. So the way we do that is by going inside the dashboard. Let's go inside posts. Remember this is a new installation of WordPress, so I don't have any post. So I'll have to add those six posts. 15. Creating the episodes as WordPress posts: So let's go ahead and add a few posts. I'll say Add new. And what's the name of this first one right here? Episode 6, networking for podcasting. So copy that. They sit right there. Then for the template, Let's set it to Elementor full width sidebar, set it to no sidebar. Full width stretch right there under Content Layout. Then let's disable those four items and publish it. Or right, so there we have that. So in order to display with this excerpt right here, we also need to have the eggs are somewhere. Now, the goal of this class is not to show you how to design the individual episodes. When we click here, the page you'll be taken to needs to be well-designed and that's the space that we're creating. So to create it, we would, of course go inside edit with Elementor. And then of course we will now add something like a double column there. And on this side we would maybe have an image. Then we would maybe have a header. Let me add a header. And the header would be this particular, particular header. So I'll paste that in there. And maybe this this excerpt would be the content of the episode. Brief description of the episode. Let's add some margin to the top of this. I just want to show you this quickly so that you see the relationship between the two AD right there. And so let's assume, let's make this, even if it's for illustration purposes, let's make it a little bit more presentable. So let's say that the episode, and then we have, Let's change that to Montserrat. And then let's update that. Then let's preview the changes. Now this is one single episode we're creating, just so that when we click this, we're taken to a page that's a little bit more presentable. We're not taken to a blank page. But this is how maybe an episode would look when someone opens into viewing to listen to it. So let's change this image. Let's go here and upload an image weekly. Maybe that lady right there. She looks like a podcaster. Let's insert media. And let's update that. Then preview changes. So maybe I could even borrowed out what our button right here just right-click copy because we're editing the same website, we're able to copy elements from one page to another page so it can come in, paste that button right here. Just like that. Then let's update that. I also don't like the spacing right here, so let me select the section itself. And under Layout, columns gap, let me increase it to wider. Then let's say update that. All right, and then let's preview the changes. So that's an example of what maybe a podcast episode would look. So what we wanna do is go back inside our dashboard. Let's Exit to Dashboard. And let's go to the list of all the episodes we have. Now you'll notice we have 1 because we've just created one, but we need five more. So let's go inside the dashboard and create the remaining five. So I'll add new. Let's copy that. And of course I'm doing this manually, but there are plugins that can help you. They can help you duplicate posts or pages or elements on WordPress with one click. So let me just paste that in there. That's Episode 5. Under the templates, Let's say Elementor full width, no sidebar, full width stretch. And then I'll disable these four items, then I'll publish it. Let's go ahead and create the rest. And I'll fast forward this section and allow you to create the remaining four. So let's talk after this. So here we are. Let me just refresh this page of managed to create the six episodes. So now that we have all the episodes we need, we need a way to display them as agreed, like this greed. So we need a third party plugin for that. A plugin that extends the power of Elementor. 16. Using EA plugin to add the episode grid: Remember we saw that we have many elemental related plugins in the plugins repositories. So inside plugins, add noon. I'll search for essential add-ons. It should be the first result, essential add-ons for elementor. Alright, let's activate that. So here we go. Now it's in the list of all of our Installed plugins. So we'll go inside settings, and let's go inside elements. So by default there are some elements that are not checked that we will need. The element we need right now at this moment is post greed. Because we want to display a grid like this one. So with Post Greed, now Chet, Let's scroll downwards and save settings. All these are features and elements you can add to your Elementor. And some of them are very cool. And most of them are free, while others are premium you have to pay to access them. So now let's jump back to the page where we're editing the landing page. And let's update the page before we refresh it. Now let's control R or Command R. Refresh the page so we can load up the plug-in we just installed. All right, so coming here to the left side, Let's collapse that panel. And that panel. Let's collapse all panels to see if it's been loaded. And now here we go. Essential add-ons for Elementor and all these are, all, these are the elements we saw in the back-end. Now, we're looking for post greed. And this is what we're looking for with this label EA for essential add-ons. So scrolling downwards below here. Let's drag this essential add-on pause greed, and drop it right below the texts. And you'll notice that now we have four episodes showing. So we'll, we'll edit it to look like this. The next thing we wanna do is first add that brush effect down here. So what we wanna do is add another full width section like that. And for this full width section, Let's go ahead and select the section. Go inside style shaped divider, top. Because now it's the top of this section, not the bottom. Waves brush. And let's give it a height of 16. But now we need to give it this blue background. So let's select the section because it already has that blue background inside style. Let's click in there and let's copy that. Then click the section. Make sure it says Edit section up here. Shape divider, M for the shape divider color. Let's paste it in here. Awesome. All righty. So now let's preview the changes just to see what we have. So far. Here's our top part. Let's scroll downwards. So now let's sell these greed. So selecting the greed. Let's first of all decide where we want to get our episodes from. And we can get the episodes by author. We can get episodes by categories. We can get the authors by tags, formats, or we can decide what you want to exclude from what we're displaying here. And you see we have many options, but these are beyond the scope of this lesson. You can learn more about categories or the end tags by Googling that. So while this is selected and we have these options here, Let's first of all say we want to get, Let's look at where we're getting our posts from. Let's look at the post categories. So under posts categories, we have only one category. By defaults. We can't delete these category. It comes with WordPress by default so that any post or page that is not categorized will automatically fall under the uncategorized section, uncategorized category. So right now we want to say, we want all episodes from uncategorized. So I'll type on categorized. So I'll select and categorized. And because we've not categorized any of our any of these, they automatically fall under uncategorized. So that means we're displaying all six of them. You can add as many categories as you want. So in here you can add more categories. Productivity, hit Enter. And now we have two categories. So if I, first of all save this and then type here, please enter three or more characters. So proud. Already shows up productivity and it'll show posts from that category as well. So then again here we want to say posts per page. We want to show six posts. And now notice that we have four columns and two rows. We want two columns and three rows. So that comes under the layout setting. So let's collapse query, and let's open up layout settings. Under column. Let's select two. And then let's update that. And let's preview the changes. And there we have it. So let's refresh this page control. Are we refresh the page to reflect the changes on these. Great, so here we are. So the next thing we wanna do is get rid of this image right here, the author image, we don't want to see that. So selecting anywhere within this grid, we can go here and say collapsed query, then expand layout settings, then scroll downwards. And now we have these checkboxes right here. So we can say we don't want to show maybe we don't want to show the eggs are. And this is the excerpt. So we might also say we don't want to show the author name, or we don't want to show the author avatar. That's this image. Let's update that. Sorry guys, my internet is a little bit slow. That's why they seems to be faded right now. I will need to refresh the page to reflect the changes. All right, just like that. So now we've gotten rid of the avatar, that image of the author. We can also decide the position of these metadata of these Meta details. So let's say for example, entry header. Just like that. That's exactly what we have here. And then now you'll notice that here we have listen now that's basically these read more. So we'll go ahead and style that read more. So let's update that for now. And let's go inside style to style the button inside the greed. So let's go inside style, scroll downwards and find, Read More button style. Let's expand that. And what we wanna do is give it a background color. So right now it's not set to anything. We want to give it this blue. So that's definitely these blue. So I'll select one of these sections with a blue background and grab that blue click anywhere within there. And else I'll select anywhere within the grid is to make sure we go inside Postgres style. And let's go to the Read More button style. And back again to background type. Let's change it that blue. So now it has that blue. But now we need to add some padding so that the text doesn't touch the edges of the background. So first of all, let's release that link. Then for the right, Let's try 20. And for the left, Let's try 20 years. Well, all right, for the top and bottom, Let's give it 55. Then for the margin, space between the button and the other elements around it, let's increase the spacing right here. So top margin. Let's give it a 20. And let's update that. Now since we, let's, let's not disable the excerpt. So let me go back inside content. Inside layout settings. We show excerpt. And now you'll notice that we don't have any excerpt and we can add that inside pose. Let's go inside all posts. And if we go inside any of the post and say Edit, for example. To add the excerpt, we would need to go inside Elementor and created from there. But for right now, we'll use the back-end. So I'll copy that. And I'll go inside here and basically paste that takes in here. Then I'll update that. And now if we come inside these workspace and update that. Before refreshing it, I want to refresh this page Control R to reflect the changes we made here in the back-end to reflect them in the in Elementor. If we scroll downwards, you'll notice that now we have an excerpt, but it's showing just a few words. So selecting anywhere inside here, inside the grid, we can come, let's collapse query and expand layout settings. And in here we can decide how many excerpt words we need. So show excerpt then excerpt words, let's say 30 words. And now it shows more words. So i'll, I'll go ahead and repeat the same for the rest of the episode. So they all have excerpts. So let's update that. Then while it's updating, I'll go to the backend exit from there. So now next is this. Let's open that. Let me open that in a new tab and just paste that in there. So I'll go inside here, make sure this is copied. And then in here, Episode 2, I'll paste that in there and updated episode three. Paste that there and a data episode for paste that in there and update that episode 5. Paste that in there and update that are right. Now, let me refresh this page, our workspace, and see if the change is reflecting here. And while we do that, let me close down these extra tabs. All right, so let's have a look at what we have. So this is what we have. It's already starting to take the shape of our reference page. So let's go ahead and preview the changes home. So it's looking good already. But of course we can do much more. So first of all, you notice this has some rounded corners and it has a box shadow that makes the episode stand out from the blue background, really makes them pop. Let's go ahead and do that. So while we're select, while this is selected, click anywhere is side. Let's go inside style, post grid style. Let's go to border-radius and give it well, the link is still active. Let's give it maybe a 10 year attorneys enough and it's already taking shape. Next thing we wanna do is give the button itself a rounded corner as well. So like that. So let's collapse that post greed and go to Read More button style. For the border-radius while the link is still active, Let's give it a five. And now it has that rounded corner. Let's update that. Let's go ahead and collapse. Read More button style. And let's go back to post grids style. Let's give it that box shadow by clicking that Edit icon right there. And you'll notice it's already now popping. But I want to reduce that opacity to somewhere. Somewhere there so that it's not so obvious. It's right there, but it's not so obvious. So let's go ahead and open up a preview. See what we have. So there we have it. That's what we have so far. Now, this episode seems to be a little bit bigger because this is the first, if you remember, this is a first episode we created and we created it with Elementor. So if we click Read more, it's taking all that text from here, starting from Episode 6, all the way to here. If we go back, you'll notice it has all that sex here while these others start from how can I grow? So that's why it seems to be a little bit bigger, but that should not worry you. So the next thing we wanna do is add this button right here. And to do that, remember, a Elementor, we can always recycle stuff. So let's copy this, copy that end. Well, this greedy still selected. If you want to paste anything, always select the item under which you want to paste the element you want to pace. So because we want to paste the button below the grade, we need to select the grid and paste right there. So the button will go below the elementary, right-clicked and paste it. So let's click the button right here, and then let's center it. And let's go inside advanced while we're still selected. And let's give it a top margin. Let's remove that link and give it a top margin or 50. In a bottom margin of maybe 50 or right. So let's update that. Let's preview changes. And let's start scrolling to see what we have so far. We will need some margin up here. But I like what we have currently. It looks awesome already. It's almost similar to what we have here. Given mod sum, we can come up with something better. So let's add this margin right here at the top. So let's select this section. And let's go inside the Advanced tab. And let's release that. And then let's give it a top padding of maybe 50. Like that. Then let's say uptake. Let's review the changes. I liking. Or right? So the next thing we wanna do is create this section right here, which should be very easy because we'll just recycle the text blocks we already have in the button in the image. So let's do that in the next lesson. 17. Adding the About section: Welcome back to another lesson with me can Besser. We finish this episode grade section. Next we want to create these about Alex section. And this should be pretty simple because we'll be duplicating the elements we already have on our webpage. So to do that, I'll first of all create a double column right here. Double column section like that. And you'll notice that we have a margin right here at the top and the bottom. So let's give it that margin in advance. So selecting the double column section and going inside advanced, Let's remove that link. And let's give it a top margin of a 100 and a bottom margin over a 100. Alright, so now whatever content we add will have these room at the top and bottom. So what we need to do next is click that Plus and select Image. I want to drop this image of Alex in there. Insert that. Of course you'd have the US nice images of yourself or, or if you are creating the landing page for a client, you would advise them to provide you with nice images. Let's go ahead and duplicate this heading. And let's drag it inside there. Let's drag and drop it inside there. And let's say about our next copy that select that, paste this in there. Let's also duplicate that. Drag, drag it downwards, drop it in there. Now copy that. Go inside here. While this is selected, I'll select all of that, deleted and paste that in there. And then what do we have next? A button getting touch. So we'll go inside here. I'll copy that. And I'll right-click inside these elements, these texts element and paste so that the button goes below it. Then we'll change these while this is selected. Get in, get in touch. And then we'll change that icon to maybe a phone and insert that. And let's say we wanted before getting such update that. Let's review the changes. Let's scroll downwards. I like it so far. So let's increase the margin on this column so that the text moves a little bit lower than where it is right now. So selecting this column, right-click Edit Column, advanced. Break that link. And let's give it a top margin of 50. And let's give it a 150. Now let's say a 100. And let's increase the size of Alex. And let's say update that. Let's be really changes. Super awesome. I like what we have so far. So now the next thing we want to create is this call to action area right here. And this is a very important part in any landing page. There are elements that are landing page must have in order for it to be an effective landing page in one of them is form a way to collect customer or user data. We also need buttons that are conspicuous. And you'll notice that we've been using buttons that are very conspicuous, easy to see because a landing page is meant to make people take action. That's why we need to have call to actions. This is a call to action. Listen to this episode. So let's go ahead and create these form in the next lesson. See you shortly. 18. Installing the necessary form plugin: Welcome back to another awesome lesson with me can Besser. So right now we've reached a point where we've created all these sections. And we just have two more sections to go. We have this call to action section that has a form and we have the footer section. So right now, let's go ahead and create this form. And to create the form will be using an awesome third party formed plugin called formulator. So let's go to the backend and install for Minister so we can create these Forum. So inside the dashboard, I'll go inside Plugins, Add New. So in here, I'll type formulator. And these by WPA AMU dev, install it. Now. Let's get inactivated. And now we have four minutes listed under installed plugins. So you'll find it almost at the bottom of your left menu, right here. So hover over foreign minister and go inside forms. Now if you want to learn more about how to create WordPress forms for your website, just go ahead and look for how to create forms in WordPress on YouTube. And you'll find a lot of tutorial showing you how to do that. But right now we're using for Monitor, which is my favorite form plugin. So let's go ahead and create a form with formulator. In the next lesson, I'll see you shortly. 19. Creating a form with Forminator: So I'll say Create. Now for our purpose, we want to sign up people to our newsletter so they can be receiving our emails from time to time. So let's say newsletter sign-up and continue. So let's give it a name sign-up form, and let's create it. So the goal here is to create a form with formulator, and then we'll display it in the front end of this page using a short code and we'll see how to do that. So now that the form has been created, as you can see by the name sign-up form. And we have the fields that come by default because it was a template that we selected. It has the first name, email and the subscribe button. And if we preview it, this is what it looks like. Firstname, e-mail subscribe, firstname, e-mail subscribe. And if I click firstName, it expands and shows those placeholder details we just saw firstName and all of these, but this, but this class is not about how to create forms. So just know that you can edit these form to have the details you want. You can change this place holder to know where.com apply that. And if we preview that, the placeholder now for the email input will be Kim at Nowhere.com. And we can change those details and we can add more fields. But I'll go ahead and publish that form just the way it is. And when I publish it, you'll notice that we have these pop-up that presents these Copy option. We can copy this short code. So let's copy that short code and you get this message. Short code has been successfully copied. And if we go inside our workspace, and right below these About section, Let's open up. Let's create a new section and it should be a double column. Let me close this window. So what we need is a double column. And inside these double column, we want to add inside the right column a short code. Short code. So drag and drop it in there and before you click anything else while this is selected. Now we can paste that short code in here. I'm talking about these short code that we just copied from formulator. Paste it in there, and click Apply. Then let's say update and preview changes. So let's scroll downwards and see what we have currently. So that's what he looks like right now at the moment. We will need to do some styling to it. But most of all we need to have these background. We'll start with these top brush right here. And to do that, what we need to do is select this section that has the About ALEKS details. Select the section itself. And let's remove the bottom margin so that they're both attached to one another. And then inside this edit section, let's go to style shaped divider and then bottom. Let's select waves brush, and let me tab and grab that green right here. Copy that. Let's go back in here. And while we're still under Edit section, style, shaped divider, bottom, Let's change the color there to that green. Paste it there. That's the stop brush right here. So it's two, separate it from this image right here. Let's go ahead and add some padding to this image. So selecting the image itself. Advanced. Let's release that padding and then padding bottom. Let's bump it up till we're satisfied. I'll give it a 100. Let's give you 110. Now give you 120. And then let's go back inside style shape divider. Let me select now let's go inside. Edit section, shaped divider, bottom. I want to give it a height of 60. Year. Like that. Let's copy the screen again. Let's select this section, Edit section style, background, and let's give it that green. Update the color. And then let's create another section right here. We can create another section to create these bottom brush. Or we can just duplicate these. Remember this, Let's duplicate that. And let's drag it down there. Then let's, while it's still selected, let's go to style shaped divider. I still have that green selected, so I'll paste it in here. And then update that. Let's preview the changes. Override. That's super awesome. So now let's jump over to the side and grab this text. Copy that. Let's get inside here. And in here, we can add these heading. And I'll paste, paste the text right there. Now grab this description right here, copy that. I'll, I'll grab that text editor. And in here I'll select everything, delete it, and then paste what I had copied from the other side. Update that. And now you'll notice that the color of the font here is these blue. So let me just grab that blue from the seller side. Copy that. And let's get in here. While this is still selected, I'll go to style text color and paste that in there. Now, go and select this style sex color, paste that in there. And I want to change that to Montserrat. So while it's still selected topography, Montserrat. And then I just want to give it a font weight of 800. Let's also increase the size of these fonts, wanted to be bigger, more conspicuous. And let's also change these to Montserrat typography. Let's make it size 16. Update that. Then let's preview changes. Scroll downwards and see what we have down there. Super awesome. I like what we're having so far. So now let's increase the margin right here. So make it a little bit more presentable. And we do that by selecting this section. Let's go inside at vast. Can increase the padding, top padding and see your satisfy. I think that's a nice size. Let's make it 45 and update that. Then let's preview the changes. Super awesome. So let's increase the spacing between these two columns. Because as you can see right here, there's some nice spacing between them. So I'll select this section that's holding the two columns and go inside layout. Columns gap. Let's say wider. And then let's just pull this little bit towards the center and update that. Then let's preview the changes. I like that. So far looks awesome. I don't like the borders around the input fields. They look misplaced. I want it to be flat. And by flat I mean no borders, just simple, plain background. So let's go back inside our foreign minister and make those changes right there, because we did not create these form using Elementor. We created either in the back-end right here inside formulator. 20. Styling the Forminator form: So we make the changes to how it appears by going inside the formulator forms appearance tab. So let's click inside the appearance of our form. And once you click appearance, we have different options here that we can play around with and affect how the form loops. So for example, you'll notice if we click flat here, that display removes the borders. If we click Bold, it adds very bold borders, material and none. So I want to go with flat, then update that. So if we preview the changes, you notice now our, our input fields don't have any borders. And that's good. So the next thing we want to do is edit the colors of our fonts. So like here, our font is white. We might want to give it a darker color like this color. So what we wanna do is go inside colors right below design style. Second section, Colors, Custom. And then we have the different input form fields. We have all the fields that you might have on your form can be edited here. So what we're interested in for now is the field basics. And inside the field basics is where we have stuff like the label, the first name and email address labels. You can edit the colors inside here. So we can say, we want it to be this blue. Copy that blue pasted in there. Enter. So let's click Update. And if you preview it, the labels now have that blue. So let's go ahead and see what else we can change. Let's go inside our Elementor page right here, and select the short code element that is holding our form. And click Apply or right. Then let's click preview changes so we can have a look at it. Let's scroll downwards and see what we have so far. So that's our form stake in a different shape so far. And now you'll notice that this form, our reference page, has rounded corners and the button itself has rounded corners. But ours doesn't have that. Let's open it up. Ours has very sharp corners. So how do we achieve those rounded corners? So four minute or provides us with a way to add additional CSS and add CSS means cascading style sheets. So every webpage you view on the Internet has been styled and given that appearance by CSS. So we can add some additional CSS by checking that. And they've already provided us with some basic selectors here. Now in case you don't know CSS, you really don't need to understand anything right here because that's something you can learn later. This is just to help us achieve something that the formulator plug-in doesn't provide out of the box. They don't, they have many options right here to edit by clicking stuff, but we can't click somewhere and make these corners rounded. We have to use some code. And that's one of the good things about WordPress. You're able to go beyond what a plugging gives you and add your own code. And plug-ins even provide you with a place to throw in your code and it will combine with their code and provide you with both you, you're really looking for. So in our case right now, I want to select our input fields. And we have a selector here called input. So if I click that, it will select all inputs, all these input fields. And whatever rule I give it inside these two curly brackets will apply to the input field. So right now I want to give it a border radius that is a bit rounded. So border-radius 50 pixels. So if I preview it now, you'll notice that our input fields have a rounded corner because we've selected them with our selector input here and giving it some rule that is supposed to apply to it. So let's update that in see what we have in the front end. Update that. Then let's go to the front end. Scroll downwards, select the form, and apply that override. So let's go ahead and click Preview Changes. And the corners are now rounded, but our button is still not rounded. Now, right now at the moment, we don't have a selector for the submit button inside these plug-in, there is another way of locating that selector and that's by using the dev tools. But I don't want to get deeper into doing that. So right now we can just leave the button like that. We can leave the button like that because I don't want to start getting inside the DevTools here and talking about how to find the selector you are looking for because that's beyond the scope of this lesson. So let's just leave the button like that. I like it so far. But I want to pull this a little bit closer together just to increase its height. Let's see what will happen when we refresh the page. Let's scroll downwards. Yeah. No, let's revert to the original. Let's increase the size of this heading just so that it's more eye-catching. And let's update that. Then let's preview the changes. Or ride. I like it so far. Now we're done with this call to action section. You are able to collect user data. You're able to sign up people to your mailing list and stay in touch with them and market stuff to them. Next thing we want to do, as you finalize the desktop version of the landing page is the footer. So we're going to create the footer in the next lesson. And after that, we'll go ahead and make the whole website responsive on mobile, desktop and tablet. So let's create the footer in the next lesson. See you shortly. 21. Building the footer: We're now almost done with the desktop version of this landing page. The only remaining part is the food is so let's go ahead and jump in the dashboard and create the footer. I'll go inside appearance, Elementor, header and footer builder. And you remember we created a nav bar. So this time we're creating a folder. So click Add New. And we can go ahead and give it a name. So footer. As usual, the templates should be Elementor full width, no sidebar for width stretch for the content layout, disable the footer disabled titled Mobile header, primary header. And let's publish that. So next thing we want to do is set the type of template should be a footer, should be available on the entire website, should be editable by everyone. And let's go ahead and make it. I just like enabling these because sometimes I might want to use the Canvas instead of the full width stretched option. And let's update that. Then let's edit with Elementor. Alrighty, So here we are. We're working on the footer. And you'll notice that what we have are four basic elements. A logo, which is an image element, a menu element which already created. Then we have a paragraph element and these icons right here. Let's go ahead and create a triple column section. So here we are. I'll select this triple column. And in the middle here, we'll go ahead and add a nav. Remember we had a nav by HF be Header Footer builder, Nav Menu. Now by default, it goes to the left. So what I wanted to ease, go to Layout and alignment. Put its, set it to center. In here. Let's add an image element. Let's go ahead and grab that. One of the logos we created for the folder. I believe it should be this one, the small version. Insert media. And let's go ahead and insert social media icons right here. Let's drop that in there. And let's expand it a little bit. So inside styling, while this is still selected, let's reduce the size a little bit. And let's align them to the right. Let's update that and preview the changes. So that's the food that, that's how it looks. We need to push these down, as I've mentioned. So well, they're still selected advanced padding. Top. Let's push it out to somewhere there. Then update that. Now the next thing we wanna do is click this icon right here so we can add a text editor and drop that text in there. Then under style, while this is still active, let's align it to the center. Let's go ahead and copy that copyright text right there. Copy that. And while this is still selected, let's go to content, select all that and delete it, and paste that in there. Update. Go inside style of this topography, and let's make this size 12. Now let's select the navigation menu. And let's go inside style. Under Main Menu typography. Let's change the typography to Montserrat and update that. Now on hover, this is the green that comes by default from Elementor. This is not the green we want. So I'll just tap to this document and copy that green. And tab back to the menu. Select it. And then inside style typography hover. I'll change that color to the color we just copied. And now it has that nice green update that let's preview the footer or Friday. Now that the folder is ready, I don't think I want to make any more changes to these icons. I think they look awesome, but you can play around with them by selecting them. And in here, making all the changes you want under Edit social icons. What I wanna do is Exit to Dashboard. Because I have all my changes saved. Then I'll go inside pages. N. Homepage was a is our landing page, of course. So I want to view it. So let's change the tabs to that page. So here we are, from the top to the bottom, Let's scroll downwards away. So our 40 looks awesome, but we need some margin between the two. So we can add a bottom margin to this brush section or we can add a top margin to the folder. So to edit that, I'll go back inside the list all pages, and I'll say Edit with Elementor, but I want to right-click that and open the link in a new tab and switch to that tab. So we can make the changes from there. So let's scroll all the way to the bottom. And what we'll notice is that we need some margin right here at the bottom. But the margin we need 0s on this bottom brush. So let's select that edit section. Let's go to Advanced and then releasing that linking. Let's add the bottom margin to be 50. Now let's say a 100. Update that. And let's preview the changes. Scrolling all the way to the bottom. Now we have some nice margin right here in between the two. Super awesome. Now, I just remembered we were supposed to do something about the nav bar so that when we're scrolling, it never disappears, always stays at the top. So let's go ahead and do that in the next lesson. So I'll see you shortly. 22. Make the navbar sticky: Welcome back. It's time now to make the header sticky. Let's get started. So let's jump right inside the dashboard. Let's go inside appears header footer, builder. And let's edit the nav bar with Elementor. So I'll right-click and edit the nav bar with Elementor and switch to that tab. So here we are on the navbar workspace. And what we wanna do is to let the section edit section and go inside advanced. And remember one of the plugins we installed in the backend, let me just switch to the backend and go inside plugins, installed plugins. One of the plugins was sticky header effects for Elementor. So inside here, while this is still selected and this reads Edit section advanced, you'll notice we have sticky header effects here. Expand that. You have this option to enable it, and that presents more options down here. So what we wanna do is first of all change the Skoll distance to one. That's the amount of scrolling you wants before the head or become sticky. So what I need to do here is changed scroll distance to one. And then let's see what else do we have here? Transparent header. No, we don't want it to turn transparent. So we want to maintain the blue color even when it's sticky. What I wanna do is switch that on, on. And for the color, I want to tab here and pick this blue color. Again, copy that tab back here, and paste it in there. And update that. I don't want to shrink the header or the logo on scroll. I just want them to remain the same size. So let's preview what we have. But of course we won't be able to see the stickiness because we're previewing the nav bar itself. So we would need a page that is scrollable. So let's view, view that in a new tab page that is scrollable. So we can see this Tiki effect. So now let's start scrolling and notice what happens with the header. So it remains sticky. No matter how much we scroll it, it will always be visible for the user and they can quickly navigate the website. So that's that, that marks the end of this desktop section. The next thing we wanna do ease now make the whole landing page responsive on desktop, mobile and tablets. I'll see you shortly. 23. 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. 24. Responsive Design Overview: So we're almost done with our page now. We've already designed it for desktop and it looks awesome on desktop. How does it look on tablets and mobile devices? So to see what he looks like on other devices, we have two options. We're going to use. It builds in elementary device viewer, responsive design feature. And I'll show you how to do that. Or we can also use the browser's DevTools. And I want to show you that quickly before we jump into Elementor. So while we're still on their landing page, I want to hit Control Shift. I. That'll bring up the DevTools. Every browser has these DevTools. And just in case yours is on the bottom right here, don't worry about that. You can always change where their tools is located by clicking this menu here and choosing any option here. So if I choose this, it'll go to the bottom. I'll just leave it right there for now. Now let, let's let's put it on the right side. And then to see how the landing page will look on different device sizes, we can get into responsive mode. Toggle device toolbar. You should see this icon. If you click that. We now have all these options up here to help us mimic different device sizes. So if we click this drop-down menu right here that has responsive, we have responsive and responsive mode means we can drag Screen manually to increase it in size. And you'll see the dimensions changing here in real time. We also have presets of different devices. Let's click Galaxy S five to see what the landing page will look like on that device. Let's go ahead and click an iPad and see what it will look like on an iPad. And we can increase the zoom right here just to bring it closer. So this is what it looks like on an iPad. How about on an iPhone X? That's what it should look like an iPhone X. And you'll notice that we have this burger menu right here. And when we click it has these options, the, the navbar. But we need to do something about that because it doesn't look good. Currently. Scroll all the way down and see what the footer looks like. So that's what the photo looks like. We also need to do something about that. Basically, I think the website is already in good shape, only a few tricks, and we'll have it looking good on mobile devices. Let's have a 100 percent there. So now to exit from the responsive design mode, click that same icon again right here, and the death tolls, and then close the dev tools. And then now we want to get inside the edit mode or workspace of Elementor. So while we're still on this page, I'll go up here and if I click that will open up these workspace. And if we hover over here and click the navbar instead, we'll open up the nav bar editing workspace. Same case applies to the footer. If we click, that will be taken to the place where we'll start editing the footer. So let's start with the nav bar. So I'll see you shortly. 25. Responsive mobile navbar: Welcome back to the responsive design part of this class. Now to start using elementals built in responsive design features and tools will have to jump into the editing mode. And so I'll hover over here. And if I click Edit with Elementor will be taken directly to editing the page itself, the main content, the hero section, and the main body content. But if we hover over here and click navbar instead will be taken to the place where we'll be editing that. Now Bar, Only. Same case applies to the footer. So the first thing we wanna do is edit nav bar because we want to start by making the navbar responsive or right. So here we are. We're able to edit the navbar and make it as passive. So to get started, the first thing we wanna do is go down here and click this responsive mode icon to activate the responsive mode. And a new notice that there's a pop-up bar right here at the top with all these options. And as you can see, we have a tablet, tablet size, and a mobile size. We want to start by looking at how the nav bar looks on mobile screens. So in a clique that, that's how it looks. It doesn't look quite presentable. So the first thing we wanna do is push the logo to the left and this menu to the right. Now, one thing you need to bear in mind is that these are two columns housed within this section. Let's change desktop mode for a second. So remember, this here is a double column section. It has one column, two columns. And so it occupies a 100 percent of the screen. So essentially these two columns are divided into percentages of that 100%. So this could be 20 percent in these could be 80 percent. So when you switch to mobile device to bring this logo to the left and the menu to the right, what we need to do is divide this 100 percent width by two, so that's 50, 50% percent. I'll click this column right here. The column that's holding the logo. And under layouts, column width, I'll type 50 percent. Just 50 like that. And now it's occupying 50%. You can tell by the border right here. So I'll select the menu column as well. And I'll do the same under Layout, column width 50 percent, and now the two of them are on the same line. Next thing we wanna do is make these menu visible. Right now it's black. It's not easy to see by default. So in the next lesson, Let's add some styling to the mobile menu. I'll see you shortly. 26. Styling the mobile menu: And welcome back. It's time to make the mobile menu loop more presentable. So let's get started. So I'll select the menu itself. And now going under content, I'll go inside layout. And under responsive alignment. Let's push it to the right, like that. And now let's make it white and color. So let's go inside style and let's collapse the main menu settings. We need to go inside menu trigger and close icon. We can set the background. Let's set it to white for now so it's visible. And update that. And when we click the menu itself, notice what happens right here. So the font by default is white and on hover is green. So what we wanna do first of all is give it a background. Let's give it this green background. And I just want to tab over to the place where we have this green. I'll copy that and go back in here and collapse main trigger and close icon. Because we're interested in this drop-down menu. Go inside drop-down menu. And for the background color, I want to change it. I want to paste that code we just copied from the other side. So now it's green. And as you can see right now, on hover, because it turns to green, it's invisible. So we need to change the hover state of the texts color to, let's give it this color. 40, 40, 40. In our own hover, it changes too bad color. But now it's hiding the logo. So we need to push the whole drop-down menu down. While we're still under drop-down. Let's scroll downwards and look for top distance. And let's just manually increase that. Push it down. And I like where it is right now. Let's update that. And for the divider, let's say none. So that to get rid of those lines. And now no border, update that. So let's preview there. If we hit Control Shift I to reveal the DevTools and then click this icon right here we just saw. This is how it looks right now on tablets. So this is how it looks on an iPad. We'll get to the tablet size shortly, but let's switch to a phone view and that's what it looks like on phone. I think I like where we get in, but we can get rid of these white line by pushing it up a little bit. So let's go back here, top distance and reduce it maybe to 25. Update that. And let's preview the changes. So let's click that. Yeah, so I like that position. But right now, notice that the logo is indented much more than, much more than the nav items. So let's position the logo properly or mobile screens. In the next lesson, I'll see you shortly. 27. Positioning the mobile logo: Welcome back. It's time now to position this logo properly on mobile screens. So let's get started. Let's go back in here. Select the logo. And while the logo column. And while the logo column is selected, Let's edit column, go inside advanced and let's remove this link and this as well. And now to push it to the left, all we need to do is reduce the margin on the left, like that up to that point. And let's increase the margin at the top, just so we can create some room at the top. Let's give it something like 20. And now you'll notice that the logo is almost touching the bottom border of the section. So let's do something about these padding right here. The first thing we need to do is push down the whole drop-down menu. And let's do that by first of all, making sure we're, we've selected the burger menu and select anywhere within that blue border. And now this is the item we're editing right here. Next thing, let's go inside style, scroll downwards and look for dropdown menu. And then let's go down to top distance and increase it. Or right. Next, let's select this top section that's holding the logo and the menu. I had already removed this link right here. Let me also remove that. Let's increase the bottom padding. Little bit like that. And let's update. Let's preview changes. Control I to open up the DevTools. And that's how it looks. So let's, let's toggle the burger may need to see what we have. And now it looks awesome. But now this menu itself, the Menu icon, needs to be properly aligned, like the logo. So let's go back and do that. While it's still selected. On a go inside here and break those links as well. And let's increase the right margin a little bit up to 10. And also the top margin. Let's increase it to that point. Just use your eye to see if you can position it properly. Then let's update that and preview the changes. Right? So now we need to push the drop-down menu up a bit to get rid of that whitespace. So while it's still selected, I'll go inside style. Collapsed the main menu, open up the menu, drop-down menu. And for the top distance, let's reduce it up to that point. Update. And let's preview the changes. Awesome. So now we're done with the responsive menu. It's working properly. Next thing we wanna do is work on a responsive hero section and the rest of the body. So let's go ahead and do that in the next lesson. 28. Responsive hero section: Let's continue from where we left off. We already have a responsive mobile device menu. And here it is. Next thing we wanna do is make the rest of the page responsive, and we'll start with the hero section. So to do that, let's jump inside the dashboard and go inside pages. And then let's edit our landing page with Elementor. I'll open that in a new tab and switch to that tab. Here we are. So we definitely want to jump into responsive mode for starters. So let's switch to mobile. So just by looking at it, you can already see an imbalance. The margin here is tiny wells, margin here is B. And these brush strokes seem a little bit steep, so we need to flatten them a little bit. But as we scroll downwards, this is what we have currently. Scroll downwards. I don't think we have a lot of work because all the content seems to have aligned itself properly when we switch to responsive mode, but we need to tweak some of the elements a little bit like this button, just so it's properly aligned. So let's go back right here at the top. And the first thing we wanna do is flatten this brush stroke. So let's select the section that's holding it. And let's go inside style shaped divider. And let's reduce the height to maybe 30 percent. That's half of what we have currently. Yeah, so I like that. That's that. Let's move on to this column right here and do something about this margin. So the first thing I want to do is select the column that's holding all this text blocks and icons. And what we wanna do is right-click and edit column. And while we're still there, Let's go inside advanced. And let's remove this link, the default padding and margin. And that will reset everything so we can start adding our own margins and padding. And now I wanted link them together once again now. So I'll do that. And let's give them a padding of 15 or right. So from all sides, from the top, right, bottom, and left. Within this column, all the texts will have a padding of 15. Right? So that's that. Let's select this. Welcome to. And let's align it to the center. And I think we need to reduce the size a little bit because it's on mobile screens, just so it's in one line. Let's do the same for podcasts. Podcast. Let's align it to the center and reduce the size a little bit. They can pop it up a little bit. Just because this is our H1 and it's a summary of our landing page content. And then next, let's do the same for the paragraph right here. Go inside while it's still selected. Let's go inside style and align it to the center. And let's update that. Next. Select the featured on. I don't mind having it there, but let's get rid of this column and align it to the center that looks more presentable. Let's preview the changes so far. Let's hit Control Shift I or Command Shift I on the Mac. It's already starting to look awesome. So let's do something about these featured icons. Remember we added the left and right margins on these individual columns, but we did not add a top or bottom margin. We added the top and bottom margins on the section that's holding it. That's why there is this continuous space all the way to the end. But for the individual columns, we did not add top or bottom margins. And that's why when we switch to mobile view, they have no margin. So let's select the first one here, going inside advanced. And for the margin, I'll first of all break this. And then I'll increase the top margin by maybe up to five. Let's say five. And then I'll copy that that styling. And if I paste the same styling on the second column, it will have a top margin of five. And the same case applies to the rest. So I'll select that every column advanced. Let's make this a 10. That's more like it. Let's make this a 10 as well. The top one doesn't really count because it doesn't have any item on above it. But let's copy that styling and pastes the styling inside these others. Now let's remove the top margin on this one. Because as you can see, it's on this new section that's a, that's an intersection holding these three and another intersection holding these three. So the sections themselves have their own margin. And those margins are not equal to the margins we have for the column. So we have to treat them a little bit to make them look consistent. So let's reduce this just a little bit. Let's give it a ten. Update that. And let's preview the changes. Scrolling downwards. Awesome. Our icons look great. Let's move on to the featured episode section and make it responsive. Let's do that in the next lesson. I'll see you shortly. 29. Responsive main content section: So welcome back. Let's continue making our main content section responsive on mobile. So the next thing we want to do right here is the select that subheading. And let's reduce its size. Of course, you're free to give it any size you want. Serrano have it in one single line. And let's make sure it's aligned to the center. So under content center, Let's do the same for that. And I just want to reduce the size a little bit like that. Let's select this font, this description as well. Let's go inside style, align, center. Select the button, align center, update that. And let's review the changes. Alright, so let's continue scrolling. I like the position and size of the image. Let's do something about this brushstroke. So I'll select this section that's holding that brushstroke. Remember if I could switch to desktop mode? This brushstroke right here is inside this section, not on the blue section. So let's go back in here, scroll back in there. Select this section. And while it's still selected, let's go inside style shaped divider, bottom. And let's keep that at 30. Update that. I think it looks good. As for this section, I think alike where everything is positioned. But one thing we can do is select this column going site advanced. And let's give it a padding of 15. All right, so we've pushed these cards a little bit inwards. Let's preview the changes. Super awesome. I already like were these images position, but let's do something about this brush stroke. So let's go back in here. Select this section. Let's go inside style sheet divider. And that's at the top because this is a small section we added just to add the brush strokes. Let's give it a 30 update that Let's continue scrolling to see what else needs improving or right, so Let's select this column that's holding the text description advanced. Remove that link right there. And remove those links right there. And now we can select that, give it a 15. 15. That's how it looks. Let's reduce this margin right below the image. So selecting the image advanced. Let's remove, remove that margin right there. And for the bottom margin, Let's use our eye and reduce it up to the right spot. Think I'll go with the 75. And let's select about Alex. Align center. Select this text. Align center. Select the button. Align center. Right. So the next thing we need to do is push this green section downwards and separated from this block of text. So let's select the button. And let's go inside advanced. Break the link right here, and increase the bottom padding. So let's see. Let's use our eye up to that point. And now we want to do something about this brushstroke like in the previous brush stroke right here. Let's see where it's located by switching to our desktop view. And you'll notice that it's inside this section, the section that's holding the image and the block of text. So to edit the brushstroke, we need to have this selected edit section. A switch to mobile view. Still selected. Style, shaped divider. Bottom 30. Yeah, so now it looks much better. Let's select this font. Put it in the middle. The same font here. Push this to the middle. Like where the form is located. But of course you can play around with the positioning until you're satisfied. And let's do something about this as well. So selecting that, go inside style shaped divider 30. Let's update that and preview the changes. Are right. So we're almost done with the mobile responsive design. The only part that's remaining is the footer. So let's make the food are responsive. In the next lesson, before we wind up. I'll see you shortly. 30. Responsive mobile footer: So let's continue. We want to make the footer responsive. So at the moment we have our logo here. Then we have our Nav Menu, which if you click, opens up like that. And we have these copyright information and our social media icons seem to be misaligned. Let's jump inside our dashboard. Let's go inside appearance header footer builder. And let's edit our photo with Elementor, open link in new tab, and let's switch to that tab. Super awesome. So now the footer is editable. Let's switch to responsive mode. And let's click the mobile icon. So here we have it. So I think right now, let's select the icons and align them in the middle. Update that. And let's see what we have. Control sheep eye to bring up the DevTools and switch to devise view. And that's how our footer looks. I already like how it looks, but you can always do exactly the same thing we did if you want your logo on the footer to be on the left side and the menu on the right side just divide them up into, into percentages of the, a 100 percent width. So going back in here, let's switch to the desktop view. As I mentioned, when we were making the navbar responsive, the section that's holding all these elements has a 100 percent width and they're basically divided up into percentages of that 100%. So in here, on the footer, if we want to bring this logo to the left and the menu to the right, or we have to do is select that. Remember we have three columns, unlike the nav bar that had two columns. So this time we're dividing the 100% into three different percentages. So let's click that. We can select the logo column, which right now runs all the way to the left. Each column, by default, runs all the way from left to right on mobile devices. So what we need to do is select the first column and give it something like maybe 20 percent or 55%. And let's give the menu 45 percent. All right, so that aligns those two right there. But remember we had a third item. Let's just leave it at a 100 percent by default so that it's at the bottom. That's another way of doing that. But I prefer what we had a little bit earlier. I just wanted to show you how to structure the foot at the same way we structured the nav menu using percentages. Update that. Let's preview the changes. So right now everything looks scattered all over. And the goal was to show you that you can move stuff around the different columns and resize stuff. I prefer elements on the footer stacked on top of each other as we had them initially. So let's go back to what we had originally. So I'll give this a 100 percent. I'll give the menu at a 100 percent width as well. And of course, the social icons are a 100 percent update that and let's preview the changes. Yep, so that's what we have. So clicking that reveals the drop-down menu, but drop-down menu is not styled. So what can we do about that? So we can style it the same way we had styled the top nav bar. So going back in here, expanding it. And let's go inside style. That's not the main menu. We want the drop-down menu for the background color. Let me grab that green very quickly. Copy that. Go back in here. Let's face it in there. And for the text color, we want it to be white and own hover. We want it to be this blue. That blue. And when it's active, we also want it to be that blue. Let's get rid of these lines. So let scroll down all the way still under dropdown. Scroll down to divider, border style, none. And let's click Update. Let's preview the changes. Or Friday, I like what we have. So now our page is fully responsive. We have a responsive navbar, responsive body and a responsive footer. So let's have a quick look at the page at the moment. So let's go inside pages. And I'll right click on View, open link in new tab, and let's switch to that tab. So this is the final result we have for the desktop view. And if I click Control Shift I, or Command Shift I, let's view what it looks like on mobile screens. Will do something about this, don't worry. So that's what we have. So let's get rid of this blank space up here. In the next lesson, I'll see you shortly. 31. Adjusting responsive navbar position: Let's go and do something about this. So let me just exit from the DevTools, close that. And then I'll hover over these and click nav bar so we can edit it. So in here what we wanna do is switch to responsive mode unless it's a mobile view. So what we wanna do is push the whole section upwards by reducing this top margin right here. So let's go ahead and select the whole section and say Edit. Let's go ahead and remove these links right here. And then for the top margin, first of all, let's increase the top padding to something like 40. And let's reduce the top margin by the same amount, but in the opposite direction. So that's a negative 40. And what that does is it pushes this blue section that we just added upward. So let's reduce it to, Let's say negative negative 40. And now the extra blue area that we got when we increase the padding, let me just remove the margin. This extra blue area here has been pushed upwards and it will cover this area. So let's return that negative 40. And let's update that. I think we should also increase the bottom padding here to something like 15. Oops, connection lost. Let me just update that. And let's preview the changes. Control Shift I, so we can view it on mobile and let's start scrolling. No way we can scroll this because we're editing the nav bar only. We need to go inside the actual landing page. Let me switch to that. Let me refresh that. At least we don't have that blank space there. And just so that we don't have too much space up here, what we can do is reduced the top margin on these elements. So selecting the individual columns and going inside advanced for the top margin, let's say something like 10. We didn't set the margin for the logo column. We said it directly on the logo element. So let's say 0. Update that. And let's go inside our landing page and refresh that page and see what we have. Right. So we reduced all that spacing that was at the top. I think right now we have a landing page that is working and looks super awesome. Of course, if you have more time, you need to do more practice and play around with all the tools and features provided by Elementor. I hope so far you've understood how to use some of the tools and features provided by Elementor to build a world-class landing page. Let me just shut that down. Let's preview the whole page now with all the changes we've made or right, so let's start scrolling all the way to the bottom. And let's switch to mobile view. Let's start scrolling. And our landing page is working properly and we can switch through different devices and see how it will look. So that's how it will look on an iPhone X, on a Galaxy S5, and so on. Now you might be wondering, Hey, can we haven't done responsive design on tablet? So if I click responsive mode, we still have the tablet mode. And we haven't done that. I left that deliberately so you can have some exercise to do before the end of the class. So go ahead and try and make this page responsive on tablet using the same principles we've used to make it responsive on mobile. Remember what we did to put these two elements side-by-side on the nav bar, does the same thing you will do for the tablet. And as you can see right now, this is what we have, but it needs some touching. So this will be a good way for you to exercise responsive design. You already understand how to do it on mobile. Same, same exact principles apply here on tablet. So go ahead and do that, and let's see what you will end up with. And this marks the end of our class. I hope you had as much fun watching it and following along as I had creating it. And I hope most of all, you learned how to create a beautiful landing page for a podcast. My name is Ken visa. It's always a pleasure teaching you how to create beautiful web pages. I'm already working on the next class, which I hope you will find helpful. And I hope to see you soon until next time. Take care, Stay cool, piece.