The Complete Elementor Masterclass 2022 | Alexander O. | Skillshare
Drawer
Search

Playback Speed


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

The Complete Elementor Masterclass 2022

teacher avatar Alexander O., Web Developer & Cyber Security Expert

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.

      Introduction to the Course Elementor

      4:21

    • 2.

      First Things First

      2:22

    • 3.

      Installing Elementor and General Settings

      9:57

    • 4.

      Elementor Overview

      9:38

    • 5.

      Sections Columns Margins and Paddings

      7:49

    • 6.

      Setting up Our Global Values

      11:38

    • 7.

      Building our Custom Headers

      13:19

    • 8.

      Building our Global Footer

      12:19

    • 9.

      Adding the Homepage Banner

      8:09

    • 10.

      Blending the Header and Homepage Banner

      2:35

    • 11.

      Alternative Video Background

      2:42

    • 12.

      Building the Homepage Part 1

      6:23

    • 13.

      Building the Homepage Part 2

      5:18

    • 14.

      Adding the Homepage Gallery

      4:49

    • 15.

      Adding the Blog Section

      9:28

    • 16.

      Adding Our Call to Action

      2:59

    • 17.

      Adding the Testimonials Section

      5:31

    • 18.

      Home Page Review

      1:30

    • 19.

      Building the Blog Page

      12:12

    • 20.

      Building the Contact Us Page

      9:00

    • 21.

      Introduction to Responsive Design Elementor

      3:04

    • 22.

      Responsive Header Part 1

      7:32

    • 23.

      Responsive Header Part 2

      9:55

    • 24.

      Responsive Footer

      3:58

    • 25.

      Responsive Home Page

      15:32

    • 26.

      Building the Homepage Header with Elementor Pro

      12:44

    • 27.

      Building the Contact Page with Elementor Pro

      9:01

    • 28.

      Building the Single Post Template

      9:19

    • 29.

      Elementor Pro Tips

      4:10

    • 30.

      Course Conclusion Elementor

      1:04

  • --
  • 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.

674

Students

--

Project

About This Class

Would you like to learn how to build amazing responsive pages for your WordPress website with ZERO coding? If so then you have come to the right course. 

With more than a million downloads already, Elementor is one of the very best and most popular plugins for building pages in WordPress. The plugin is extremely fast and comes with a variety of widgets and elements making it very easy to build any kind of web page imaginable without using any code.

Course Content:

The course is divided into two main sections.

In the first section, we are going to use the FREE version of Elementor to build a full one page website for a fictional company known as the White Hat Hackers. This company specializes in cyber security and they help companies fight against cyber attacks and hackers.

In the process of building this website, you will learn the following

  • How to work with sections, columns and widgets

  • How to build a header section complete with the site logo and social media icons

  • How to work with title widgets

  • How to work with video and text boxes

  • How to build an image carousel

  • How to insert number counters as well as toggle elements

  • How to add a Google map to your web page

  • How to create and insert a contact form

  • How to build a complete footer section for your WordPress website

  • How to build responsive web content and structure

  • How to work with page templates

  • and so much more

In section two, we are going to use the PAID version of Elementor to further enhance the functionality and design of the website. In addition to learning about the extra features that come with Elementor pro, you will learn about the following as well - 

  • How to add a countdown timer to your page

  • How to create an animated headline

  • How to add a contact form

  • How to enhance design and style using flip boxes

This course will be updated continually to ensure that it always describes how to use the latest features of Elementor.

By the end of the course, you would have mastered how to use the Elementor plugin to build any type of web page that you want.

Meet Your Teacher

Teacher Profile Image

Alexander O.

Web Developer & Cyber Security Expert

Teacher


My passion is teaching people through online courses in a fun and entertaining manner.  I have been teaching online for about 3 years now and during this period, I have created over 25 different courses on different platforms including my own personal platform - The Web Monkey Academy.

What would you like to learn?

Would you like to learn how to build and manage your WordPress website? Would you like to learn advanced skills that will make you a true WordPress developer? Would you like to learn how you can establish a successful career as a web developer? Would you like to learn the basics of information and cyber security?

 If you want to do any of these things, just enroll in the course. I'm always improving my courses so that they stay up to dat... 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. Introduction to the Course Elementor: All right, so welcome officially to the course. And before we get started, lambdas give you a few points, has and tips on what to expect when taking the course. Now, this is gonna be the website we will build together. It's called our passport travel. It's for a fictional travel agency. They basically help tourists plan their dream vacation, if you will. So as you can see right now from the homepage, we do have the logo on the left, the main menu on the right. I'm also going to have the background band now blending into the header. Here we do have a static image. However, I will show you an alternative on how to use the video, our background instead. If you prefer using videos, I will show you how to do that. For the rest of the homepage, I will have different sections with different kinds of content. I will have the Services section. There will be a gallery section with images from all over the world, a blog section highlighting tilde lithos posts from the blog. But also going to have to do some packages section we've used section. And then finally, we'll have the footer. We're also going to build two additional pages. In addition to the homepage. I'll show you how to build the blog page limiters get it all here. We do have the articles all add up the blog page. Here you're going to have the blog posts. So I'll show you how to create this kind of design where you have, let us suppose two and on top. And then you will have the different posts from the different categories. And then finally, I'll also show you how to build the contact page that will have a very simple our contact form. Let me just show you. This is gonna be the contact form. So initially we are going to use the free version of elemental and because it doesn't have quite a number of features the paid version of elemental has. We're gonna make use of three additional plug-ins as compensation. One will be the element or Header and Footer by brainstorm force to build our header and our footer. We'll make use of the essential add-ons plugins to provide us with some additional elements which are going to use to build certain kinds of content. And then we'll also use the WP forms plug-in for our contact form. But once we use elemental pool, we're not gonna need any of these plug-ins anymore. With elemental pool, we can do so many things and I'll show you how to make use of them. Plus, it's not just about the styling and the Zan. I'm gonna show you how to make the website responsive as well. So that if it's viewed on a mobile device or on a tablet, it will be responsive. As you can see, this is for mobile and it is responsive. Now I'm also going to offer you all the videos and images I have used. And in fact, all the images with exception of this one eliminated right now. All these other images, these images that they actually took myself because I do a lot of traveling. And if you'd like to make use of the images, you can. But if you're gonna use it for commercial purposes, please do indicate that she could then for my Instagram account, my Instagram account is chosen Xander, I do have a very, very small following, but I am trying to grow my following on Instagram because I think a lot of pictures. So if you do enjoy traveling around the world, are some pictures from all over the world. Be sure to follow me on Instagram shovels of Sandra. Welcome once again to the course. I sincerely hope and believe that you will enjoy this course on elemental. And the course is divided into several sections, like I said, the first section. Actually before we jump into elemental propria itself, I will assume that you're brand new to building websites and you don't know anything about web hosting a web domains. In the very next section, I'm gonna show you how you can get yourself a web host and the web domain as well. If you already have those or you are familiar with this topic, skip this section and move straight to the section where we'll begin building the website using the free version of Elementor. And then the next section we'll focus on the responsive design, how to make those at responsive. And then we'll have the paid version of elemental elemental pool. Also you how to work with elemental pool to improve the functionality and design of your website. And then the very last section in this course will contain the updates are additional content where specifically choose different kinds of elements of different kinds of features of elemental. And expand on and show you how the walk out to the fullest soap. Once again, I really do hope you will enjoy and love this course. Thank you so much for watching. Let's now get started. 2. First Things First: All right. So first things first, before we get started, there are a few things I would like you to do. First of all, and the first thing here is I want you to install a theme called the halo theme. This is a simulator. It's actually by Elemental of themselves. We're gonna be welcomed with this theme. So please go ahead install and activate the theme. And then what I want you to do is go ahead and create some posts which are going to walk in with. I have already created about nine posts in here you can see I've got three different categories of Asia, Europe, and South America. And each of these categories have three different posts. Now, I'm actually going to provide for you the XML file. They'll contain all these posts. You can simply import them onto your website. And then for the images as well, I'll also provide probably a link to Dropbox. You will have access to all these images which you can use. A lot of these images actually for my own Instagram account, but you're more than welcome to use them on your own website. The only thing I ask for is that if we're going to use my images on your website and you're making money, funny website, please do mention that you've got these pictures from my Instagram account, so please do that. Bomb Levite for you all the posts content via an XML file and also the images that I have used. Now I've also created a few pages as well. I do have the About page, the Articles page, which would be like the blog page, a contact page, a featured pigeon, of course, the homepage. Also. When you're done, come down here to Settings, go to read in, and then set your homepage to the home page. So basically choose a static page right here. And then said homepage to be home. Last but not least, I've also created a menu. Go down here to Appearance Menus and then create your main menu. Can say I do have my many, many nameless called MainMenu. And I've added home about articles are featured and contacts. So that's a little assignment for you to do. Again, I'll provide for you the XML file for the posts and pages, as well as a link to Dropbox for the images being used. 3. Installing Elementor and General Settings: So now that you've added all the necessary content onto your science, it is now attempt to install some plugins. And of course, the very first plugin we're going to install will be elements of before I do that, I do have three plugins already active on my site, Saigon optimizer and security because I'm hosting with SiteGround. And then WordPress importer, if you've imported the XML file that I provided for you in the previous video, you're most likely would have used the WordPress input our plugin. So I did the exact same thing for myself. So that's why I do have the plugin active there. But we're gonna do now is we're going to add three different plugins. And the first one obviously is going to be elemental. That's the main plug-in it we're gonna be working with. It's the one right here. And of course it's the free version of elemental. But because it's the free version of Elementor, it's a little bit restricted in terms of features available. In order to compensate for that, we're going to install two more plug-ins on the very first one here is right next to elemental. It's the essential atoms for elemental by WPF developer. I'm gonna go ahead to install the plug-in as well. And then finally, we're going to install the one down here, which is the elemental header and footer buildup by brainstorm force. So let us go ahead install the plug-in. And yeah, I'm gonna go ahead and now to Installed plugins. This is going to go ahead and activate them one at a time. Activates header and footer builder and then activate essential Adams for air. Mentor. Now, once you activate the essential atoms for Elementor, you may see a page. In fact, let me go ahead and click on the link right here. Because this isn't the first time that I have installed the essential atoms plugin on my page. You're not, I'm not seeing the welcome page. So it's very likely that you may have seen a different page where they will say, Hey, welcome. Choose which elements you want to walk with. Just click on Next, Next, Next, Next they will also offer you the upgrade to pay for the paid version of essential atoms. Just ignore that. Just click on Next, Next, Next and then Finish. And then this would basically be the page that you would see. But more on that a bit later. Let's take a look at elements are first of all, settings. What exactly do we have in here? The first thing here is going to be the post types. If you're working with custom post types, you will have the option to check them in here as well. But I'm just working with posts and pages. So I'm going to keep this to check. Now it says disabled default colors. Checking this box will disable elements default colors, and make elemental inherit the colors from your theme. Now if you're using an advanced theme like let's say Astra or ocean, WP and so on. And you want to use the colors from your theme. You will uncheck those two boxes right here. But because we're using the halo theme, which is a very, very lightweight theme, Elementor is going to be doing all the heavy lifting for style, design and functionality. So what I'm gonna do is I'm actually going to check these two boxes. I'm sorry. I'm going to uncheck these two boxes because we do in fact want to use the default colors are provided by our elemental, so I'm going to keep these two boxes unchecked. And finally improve element. Or if you'd like to contribute to Elementor, you can come in here and check the box plot. I am not going to do that. Let's move on to style. We'll talk about this one a bit later. Actually, integrations if you are working with Google Maps and you need to install the API key, this is exactly where you would install it. Also, if you end up installing other plug-ins like let's say PayPal or Stripe or things like that. And you need to integrate them with elemental. It will be on this page where you will find the options to do so. You do have the Advanced tab. We don't need to change anything in here. Basically, most of these are for security and for our speed. If you notice an issue with elemental, maybe your site is becoming very, very, very slow. You can come in here right now and switch the CSS print method from external files with internal embedding. But only do this if you're having issues with your speed. And it's not because you're using some other bloated plug-in or your web host isn't good enough or things like that only changed this as a last resort. Same goes with the switch, our editor loader method. If you want to troubleshoot issues on your website, you would come in here and enable this. The unfiltered file uploads elemental has kind of like an in-built security where if you try to upload images to the elemental system, elemental, we'll take a look and see whether or not the file is actually a safe to work with by enabling this feature, which is to enable unfiltered file uploads. You do want the risk of uploading files onto your website. So I would recommend you keep this one disabled. Same goals with Google Fonts load again, you don't need to change anything in here. Just keep that one on default. If you want to work with Font Awesome For you can come in here right now and enable that feature. And then finally, you have experiments. This is where you will have access to all the latest features that elemental are currently working on. You can see the status of most of these is set to beta, beta, alpha, beta, and so on. In most cases you want to keep this one's on default. But there is one academic command that you activate. And as the improved asset loading, this is meant to reduce the amount of code on each page built with elemental. What that means is that your pages will typically load faster as a result, even though it's in beta, I have been using this for quite some time and it seems to be working. So I'm going to go ahead now and activate the improved asset loading. I'm also going to activate the improved our CSS loading as well, please even the future. On this website you've been working on, you notice that an issues you may want to come back in here and disable this too, but I believe it should be fine. So I'm gonna come down in here and save those changes. Okay, one more thing I want to mention really quickly is you have rule manager. If you have several kinds of users on your site with different kinds of roles. In here, you can determine who can actually use elemental specific example. You don't want a user with the role of contributor to work with elementary common here to contribute all and simply check no access to edit tool. With the paid version of elements you have access to more features. And then our tools in here. This one is actually very, very, very importantly regenerate CSS and data. If you make changes like the color of your text that says if a text you save those changes and you're not seeing those changes take effect on your science as long as there should at it isn't caching from your computer or from your server. You may want to come in here and try to regenerate files and data. Well, this will do is that it will rebuild the CSS style sheet and hopefully that should fix the problem and you'll be able to see your changes. Sync library safe mode debug bar will ignore that one for now, replace URL. If you are a broken links on your site, you want to point them to new links. You come in here at the old link, go to the second box, add the new link and I simply click on the police URL. And you fixed the book and link version control. If for some reason in the future you upgrade to the latest version of Elementor and something breaks on your side, maybe your site doesn't work as well as U22. You can come in here right now and simply roll back to the previous version. That's what his future is in here for. If you want to become a better taster and work with the unofficial on officially release versions of elemental that are still in progress. This typically have plenty of bogs and issues. So if you're interested in being a bulk horns are four elements or you can come in here right now and enable. And then maintenance mode again. If your site is under construction or you're making some immediate changes, you don't want anyone to be able to access your site during that time. You can come in right now and choose coming soon or choose maintenance. And then you will have to build a page Dolby displayed for maintenance or comments when you will choose that template right here. And then while your pages on the maintenance or coming soon, you can choose who built to have access to your website at the time. Then finally, import, export kids. You can export your template kits to use on, on, on, on another website. Or you can even import it's implicated form an XML site if you wanted to. So you simply click on the Input kits and then right here you'll be able to do so. I might show you how to do this a bit later in the course. And finally, finally, system info. If you need to troubleshoot your website and you go to elemental support the SEC and they say, Hey, can you provide us with the information of your setup? This is where you can provide all the necessary information. It's simply come in here and download system info, sends it to support guys at elemental, and then they will be able to help you. So that's essentially it for the main settings for elemental. Thank you for watching and I'll see you in the next class. 4. Elementor Overview: All right, so with all the boring stuff out of the way, lemon, I'll show you the UI for elemental of the user interface and how elements are actually works. Now I'm on my pages right here and what I'm gonna do is I'm gonna go ahead and edit the homepage. What you're gonna do is what you will see light up here. You will see Edit with Elementor. It's gonna be this big blue button right here. So let's go ahead and click on that. And what will happen here is that elemental will be launched to walk on this particular page. Okay, this is the homepage. Now on the left, obviously you can see the box for elemental, the UI. The very first I want to show you here is the three buttons right here, the menu basically, you click in there. You will have access to things like the site settings, FIM buildup, which we'll talk about a bit later. But very quickly, Let's come down here to use up references. And I don't know about you. Maybe you like the light theme. I do like the dark theme. So what I'm gonna do here is for the UI theme, I'm gonna switch form, auto detect. Too dark. I prefer just a black background and white text is just so much cooler. In my opinion, again, this is entirely subjective, but I'm gonna keep it that dark. Let's go back. In here. You can find something within element to anywhere. Anyway, elements if you want to, you can view the page, then you can exit to the dashboard. But let's go back. Now. Right here, you have elements and then you have global. Global only works with the paid version of element. And that's when if you want to save your particular block of content and use that same block on another page anywhere on your website. That's what global basically refers to. But don't worry, we'll talk about on a bit later. But these are your elements. You've got basic elements like your intersection. You'll head in image text editor. So say for example, you wanted to add an image to your page. You would simply click on the image element and then simply drop it inside the box right there. And then from here, you can choose the image that you want to work with. So just as an example, let me choose the image of this girl right here holding the Brazilian flag. And there it is. The thing is most of the elements it will welcome with typically 3.5 main compartments. If I concluded outweigh, you will have the content area. In this case, this is where you can add either texts, image, video files, audio and so on. Then you will have style where you can do things like maybe changed the coal law, change the size, add a background image since the height and so on. And then you will have the Advanced tab. But you can do things like add margins, patterns, no spacing. You could also add some motion effects, are some borders and so on. So you usually, most of the elements you've been working with will have these three different tabs or compartments. So going back in here and you click on the button up here, this will give you access to all the elements. So you can see we've got the basic elements in here, Video button, spacer, and so on. Now, you can see the ones on parole under the paid version of elemental posts portfolio gallery. So many of them. So you can see right now, because we're not using the paid version of elemental, we don't have access to all these elements. But thankfully, because we are working with the essential add-ons plug-in, we do have access to quite many additional elements for free. You can see right here on the essential atoms. You've got things like the advanced accordion, call to action, bottom creative button, and so on. So we're going to walk in with quite a few of these elements. But going back to elements or under general, we do have access to more blocks as well. I'm just close this coordinate. So the general with the free version of elements that we have access to, more elements like the icon box, testimonial, social icons and so on. Let me close this one. And then you've got site. Unfortunately these elements are only available with the paid version of elemental. You've got WooCommerce, again, only available with the paid version of elemental. We've talked about the essential atoms. So this is the other plug-in. We installed the header and footer. This plugin will allow us to build a custom header and the Custom Footer for our website will have access to elements like the Navigation Menu elements, page title, site title, site logo, and so on. And then last but not least, we do have access to the WordPress widgets like your pages, Callender audio made our search, and so on. Okay, that's that for the elements. Now, down here, you have access to a few more settings. It may sound kind of overwhelming, but don't worry, once you begin welcome with elemental, It's actually not as overwhelming. It's actually very, very easy to work with. Here under settings. In here, you can do things like change the title of the page, change the status from published to Penn and review, you can add your featured image. You can also choose to hide the title, which in fact, let's do that. Okay, I'm gonna hide the title. I mean, how many times do you go on a website and then on the homepage it says home trivalent do that. So let's just go ahead and hide the title and then the page layout. I'll explain this one a bit later as we progress in the course. Then you have the alarm, Sorry, you do have the reading progress bar. This is provided by the essential add-ons plug-in. Basically, the point here is that you may have seen in some episodes before where as it begins to scroll down the page, you'll see like a bar IDA moving horizontally or vertically indicating how much of the quantity of actually read and how much more content you still have to eat. So you do have that future inhale. We'll take a look at that a bit later. And then Table of Contents go to top. Don't worry, we'll talk about those later. And then under style right here, you can change the body type. You can add a background color if you want to. You come in here right now, choose like the primary color of blue and so on. But for now I'm just going to go ahead and uncheck down one. And then finally, you've got the advanced where you can add your own costume, our JavaScript code, or some custom CSS code, which unfortunately is only available with the paid version of elemental. Okay, let's move on. Next to sentence. You, you've got the Navigator. Now the thing about navigate TO is that once you begin to add elements and content onto your page, the navigator bottom will allow you to see basically the entire structure in a hierarchical format of your entire page. So it can be very, very easy for us to quickly look for a particular element or book that you want to work with. That's what the navigation or navigate important is. Therefore, Next is the history. So if you make things like change the color or basically if you do anything at all, it will be in the History tab and you can see it right here, right from the very beginning when we started editing, if we changed the user preference for the UI theme from light, from our auto, too dark, you can see it's right there. We added an image, we hit the page title so you can easily come in here right now and reverse any one of these actions. And then you've got revisions. Revisions is a bit more, What's it now? A bit more robust. Typically on the revisions, this is where once you've updated and you've saved your page, you will see those changes on your vision stops. So he's a bit more robust and actions. So that's the fat. And then in here, you've got the responsive mode. You click in here. Now you can choose either desktop view, Tablet view, or the mobile view. And the thin is you can even become very, very, very specific with the width of your screen. So say for example, if I chose table it right here you see these handles left and right. You can actually move to a certain dimension. And of course OPIA, you will have the width and the height. If you have a specific kind of device that you want to see how you have set will look like on the particular device. We very specifically dimensions. You can come in here and change the dimensions for the width as well as the height as well. But I'm gonna go back, switch to the desktop and then divide here. You can preview your changes once you've made them. And then finally, you can update all light you under Save Options. You can save as a draft or you can save as a template strand. As a template means that you can reuse the exact same content on another page. So this is basically like a breakdown of how elemental walks behind the scenes, the user interface, how to add elements. Again, don't worry if it seems very, very overwhelming, Azure begins to walk with elemental. It'll become very easy for you to work with. That was basically a crash course on the elemental user interface. Thanks for watching. Join me in the next class, we will now begin to set our global variables. I'll see you then. 5. Sections Columns Margins and Paddings: I just want to spend a few more minutes to walk you through the general concepts of sections, columns, as well as elements and patterns and margins. As I showed you previously. If you want to add an element, you can just simply drag from the left-hand side and then they'll simply drop it in slide. Now the thing is automatically whenever you're adding elements with Elementor, a section and economy will be created for that particular element. We just dropped in the text editor elements. And now you would notice right up here we have this blue line here. This is gonna be this section holding the column that's holding the text edit. All. Notice right here, you've got this brown button right here. And if I hover over it, it says Edit Column. Now this is the actual element itself, the actual text edit tool. Once again, the way elemental walks is there you will have an element, whether it's an image, video or button. And then a column will hold, will contain that element. In both the column and the elements will be inside a section. It's kind of like a hierarchical structure section column then the actual element. Now just like with editing, the element where you will have access to content style advanced. You can also edit the column holding that element. You can see I've hovered on the bottom here, it says Edit column. You click in there. And then you will have access to layout style and advanced. With layout, you can do things like maybe reduce the length of the column. You can change the alignment. You can add an HTML tag fluids. You can style the column and we want to add a black background like in a red background. And you want to add an image, things like that. So that a lot of things you can do all with the column. Now, if you right-click on the Edit Column button, you can do things like add a new column, duplicated column. You could even copy and paste the style. Maybe you added a black background, you change the font style of the text and you want to reuse that style, you simply copy the style and then you can pierce his style are elsewhere. The same thing goes with this section in here as well. If I click on the edit section button up here. Now you see I have access to layout style advanced. Like with layout, I can change this to full width. I can maybe change the size or the length of the width naked, very, very wide availability now I will, I can change the height as well if I wanted to. I can do a lot of things. Same goes with his style. Again, I can add a background color. If I wanted to. I can do several things like add motion effects and so on. Just like with the column environment, click on the edit section button right here. You can sit and do things like edit section and I can duplicate. I can even save as a template which we'll talk about when we are using Elementor Pro. Now, let me quickly talk to you about the concept of margins and patterns because this is gonna be very, very, very important. Now, I've got a section in here holding this text editor writes. What I'm gonna do is I'm going to add an image into another section. Lambdas quickly choose an image to walk with. Let me go to my media library. Let me choose this image right here. Now, take a look at this. Let me add a background color to the section here. Don't worry, I will show you all this a bit later. All right. What exactly are margin's? Margins are used to add space between sections. So right now we've got a section here holding this text editor with the red background would have another section in here holding the image. If I wanted to create plenty of space between these two, I could actually use an element in here called a spacer element. You can say conjugate spacer and then drop it in-between these two sections. But another way to do so would be to go to either one of these sections. I'm going to go to the first section in here. I'm gonna go to Advanced and variety of got margin. Now please note that by default, you can add margins and patterns to all four sides of a section to the left, right, top and bottom, right. Now if I was to add a margin to either top or bottom, you can see they are chained, which means whatever you add to top, it will be added to the bottom as well. If you wanted to add values for one specific side, you want to start from 0. First of all, Zero. You come in here and then you can see you can unlink the values. So right now you can simply add for top are right and left margins for elemental are set to auto by default, you can't make an ingenuous in there. But now notice that if I begin to add margins to the bottom of the first section, notice that it's section holding the image is not being pushed down. That's because I'm creating space between this first section and this second section. Also, if I wanted to, I could do the reverse for the second section. I can go to Edit section here near for the second one, go to Advanced. Unlink develops. And now instead of an imagined at the bottom, I can add at the top. So now you can see we are pushing this section holding the image downwards from the first section that says what the margins are useful. They're useful creating spacing between sections. One of patterns, because they've got patterns. Patterns are used to create space between an element and its border or its column. As an example, I'm going to use the text editor in here. All right, so I'm gonna go in there. I'm gonna go to Advanced. And now right here, you can see I've got the pattern available. I'm going to unlink the values. And now if I begin to add padding right here, you can see I'm creating space between the text editor and its own section right here at the top. I can go to the bottom, do the exact same thing as well. So you can see right now I'm basically creating space for my texts, a tool within its own section. That's what patterns are used for. They use to create space for an elements inside of its own column or their section. That's basically what patterns are useful. So that's the difference between margins are patterns. Margins are used to create space between sections. Patterns are used to create space between a section and the element contained inside of it. Hopefully, you now have a good understanding of what our margins and paddings up. One more quick thin, you could also rearrange sections by simply clicking and dragging. If I wanted to move the section holding the margin, I'm also holding the image to the top. I'll simply click and hold the edit section button. Now you can see it's allowing me to move. I can move it all the way up your nose. Wait for the blue dash or the BlueLine to appear, and then simply release an intro of the image light day. You do have this option in here with elementwise what that allows you to rearrange our sections. You could also rearrange columns and I'm just quickly duplicates this column in here. Let me change this image real quick just to give you a very, very quick demonstration, let me choose this image. So I can simply click where you have the Edit Column button. And then we arrange. They can see where range back as you can see. So you do have that option available with elemental as well. So don't worry as we begin to walk with elements or you begin, it begins to discover a lot more features and functionalities of elements. And thank you for watching. I'll see you in the next class. 6. Setting up Our Global Values: Welcome back. So now that I've shown you a brief introduction to the user interface of Elementor. Let's take a look at the global variables and how you can set the kinds of font families you want to use, the colors and so on. Now, on the same UI interface right here, you're going to go to the Menu button up here, and then now go over to your site settings. Right? Now Here's the thin. We could set global colors, colors that can be used all across our website to do that, click on global colors. Now this would be the default clause that you would have a blue, darkish gray, light gray, and then lime. So this would be for your primary our head does your secondary headers, your texts, this would be a regular body takes on an accent is usually for like links or buttons. Now, what I'm gonna do is I'm actually going to change these to some clothes I have over here. Now to change them, I'm going to click inside. And if a primary, I'm gonna go with white. Okay, So why it is going to be fff, FFF six Fs is basically for White Album my primary. And then for secondary, we're actually going to keep this as it is. But then for texts, we're gonna go with black. Black is going to be six zeros. So 123456, these are what we call the hexadecimal values. Okay, so six zeros for black, six F's for white. And then lastly for the accents, which would be for the links. I do have my color in here. Let me just quickly grab the color for my other screen. Come right here and paste that. So it's a shade of orange, It's basically a DECA 570. Now, you could decide to add your own custom colors as well. It can come in here, click on Add color. You can name this one like anything could give a like or let's say the special special color. I'll show you how this works a bit later. Let us call this one special colo. And in here I'm gonna click on the box. And let's just choose something reddish. So I have my own custom color called special column. I'm going to go ahead now and simply updates. We've set our global clause, which, which we can use throughout the site. But then we also have access to global fonts. Font families are very, very, very important. So check this item. I'm gonna go down global fonts. The first one here is going to be primary. This would be for your primary headers. Now let's just take a look at my other screen in here, because I have chosen to go for the font family of citizens go with Oswald. Oswald is a particular Google font that I like. I'm gonna choose Oswald for the font-family. The weight here is going to be 700s, there's gonna be a little bit heavier. Then I'm going to transform these two uppercase. And then I'll leave the other ones line-height, letter spacing, what spacing, and so on the slip those as they are up. Next is going to be the secondary. And then secondary again, I'm going to go with Oswald. Also all for secondary. And then the size here, I'm actually going to go with our 20 pixels because there's gonna be a little bit smaller pixels. And then the weights here would be our 600. And there you go. That's for the secondary. And then text, this will be our regular text. I'm actually going to switch from families of our two new D2 sands. So let's search for new door. I said, I'm sorry, isn't new veto Nieto. I'm sorry. Even wear my glasses. I still can't see properly. Millions of sensors is gonna be full text. And then the size here would be 18 pixels and the width is going to be 500. And that is that last but not least, we do have the accents. Accents is going to be Roboto. Let's stick with Roboto for that one and then wait till will be 500. So we're not changing anything in here. I'm going to go ahead now and update. The point here is that we can actually use this font families, this font colors anywhere on our site. As an example. Let me close this and let me go ahead now and add a heading. So I'm going to click drag, drop the head and elements in here. Now take a look at this. If I was to go to Style, alright, right here you can see we have the typography option to choose what kind of topography wanted to work with all the text color. Now take a look at these. If I click on this icon right here, this global looking icon, I click in there. Now see we can choose from the five options, primary, secondary texts, accent, and even the special color that we added. That's how you can make use of the global caused octave just set same goals with the typographic clicking here again. And now I can choose either to go with the primary texts, secondary texts, regular texts, or the accent. That's how these would work. But let me show you something even more interesting. If I go back to the site settings, just underneath the design system, you have your theme style. If I click on typography in here, this is where we can now set specific font families, colors, sizes for our H1 or H2 tag, h3 and so on. But in order for us to be able to make use of this particular system, we're going to need to disable the default colors and fonts from the settings page. Remember, let me just quickly go ahead update this. I will show what I'm talking about. If we go back to the backend, let me come right here, go to Exit to Dashboard. If you go back to your elemental sets in Elementor settings, right here, we're going to have to disable the default colors and fonts in order to make use of this new theme style editor. So I'm gonna check this two boxes. Save those changes. And now let me close this. Let me refresh this page again. Now take a look at this. If I go back in here, go to Site Settings and accompany on native topography. Now I am able to set a specific text color for the body, tech size, for the links, and so on. Also, if I go back, if I go back to the regular lab back-end and then just close this and then added my heading again in here. If I go to style, right, you haven't go to text color. I still have access to the colors upset Alia. And then also for the typography, I still have access to the secondary texts. Basically the same options. I said ls, you'll have access to them. So basic litigious. Go back to the set that one more time and then I just wanted to treat it. I still have access to those options. Let's go back to the theme style typography. I do have my options in here that I've already set. So what I'm gonna do here is this. Okay, Let's first of all choose the typography for our body. So right here for body, I'm going to go over here to text column. We're gonna choose our black that'll be for the text. For the typography. I'm simply gonna go with texts. Remember we said texts to be Newtonian to sands, size of 18 pixels and then the weight of 500. That's going to be for the body. Good. Now for the link. And just check what I have in here for the link. I'm gonna go with color, the accent color typography. I'm going to go with accent as well. Now for the age warns, okay, this is gonna be a little bit different for the F1's. What I've done right here is for the family upset that I want to default. But the size here is going to be 100 pixels. Very, very, very, very, very massive. And then the weight here is going to be 600. We're hardly going to use H ones on our site, so don't worry about the huge size. I'm going to keep that one at 100. Now let's go over to the H2. For H2, I do have the size here. I'm going to click on typography. The size here, I've set it up to 32 pixels. 32 pixels, and then I do have the weight here to be 700. Basically, this is the main header we're gonna be working with. Actually, my apologies, I said it to 36, sorry, six-by-six pixels for H2. Then for the age three, Check this out. For age three, the color here is going to be the accent color, the orange color. Then the size here is going to be 22 pixels. Then the family here is going to be primary, which would be also old limit also said the primary font family here to be our Oswald I will be for the H12. So basically h twos, we'd be 36 size and pixel, the family of Oswald. There'll be uppercase and then 708 and waits. And then finally, I've also said for the H4, same color would be the axon color. And then the size here is going to be our 18 pixels. Okay, so let's choose Oswald again. Then the size here would be our 18 pixels, the same size as our body texts. And then one more. The very, very last one will be the age five, which I don't really think we're going to walk with that multiple legislated up H5 and then topography would be the same secondary or primary if you want. And then the size here would be 16 pixels. There you go. So I'm gonna go ahead now and simply update this. And that's it now, I know this was a very, very long video with me just talking about car loans and stuff. But it points here is that on our site, if wherever add an H2 automatically, it's going to inherit the values from here. So our H2 is right now, would have the font family of Oswald, size of 36 pixels and then a weight of 700. And then the same goes with the age threes, fours and so on. Mou basically set up the global values fall or I hit us as well as our body texts. But also, we have said that global colors, which we can use over and over again. We've said five of them primary, secondary texts accent, especially when I don't use special ecologist In, wanted to show you how you can audio on additional custom colors if you wanted to. But as basically are setting up our global font families, colors and sizes. Germany, very next video where we'll now begin to build out the header full of website. 7. Building our Custom Headers: Alright, now let's go ahead and build the header for our website. And this is exactly what it looks like right now, and it does not look good at all. This is what we're trying to accomplish. You can see the header right here we have the logo on the left, and then we have the main menu on the right. However, show you something like if I was to go to another page, Let's say the About page as an example, right here you can see that the header is different. This one has a black background, while the header on the homepage doesn't have any background at all, it's simply blends into the background image here, basically, we need to create 82 different headers. One specifically for the homepage and then the other for the rest of our pages. Now how do we do this? Before I show you that, let me just drag the demo website away. Now before I show you how to do that, I want to show you something else. If I was to go to Edit with Elementor, I went to site settings. In addition to being able to set your global phones and your colors and all that, you can also make changes to the site identity right here we have Settings. If I click on inside the density right here, we can change the site name too. I'm going to call mine passport travel. That's the name of the website. And then the tagline will be when travel meets adventure. For the logo, I'm going to choose the logo right here. Let's insert that one. And then for the Phi of icon, I'm going to choose the image of IT with the one with the green background. I'm going to insert that. And there you go, we have our site identity. Now you could also come down here to header and make different kinds of changes you can choose to hide the logo, show the tagline, increase the content width or reduced the content width is all up to you. But since we are going to create our own custom headers, we don't need to change anything in here at all. So I'm going to go ahead now and simply update. And then I'll check this out. Okay, I'm gonna go back to the backend Exit to Dashboard. And now let's create our header. I'm gonna come down here to our parents. Here you will see elements or head-on foods are builder. This is from the plugin. I'm going to click in there. And now I'm going to click on Add new. And now let's call this one the homepage header. Then right here where you have type of template. We're going to choose header, and then we can choose, okay, where would we like to display this header? Since it's specifically going to be for the front page, I'm going to choose down here you have specific targets. I'm gonna choose specific pages and invite here are simply type in home. And there you go. Now at this particular header will only be displayed on the homepage. And then for user roles right here you can choose, okay, maybe you want to display these header only to logged in users are logged out users or edits or you have a lot of flexibility. I'm just going to keep this blank because we wanted to be for everyone. Now here, you've got this option enabled layout for us template. Now the thing with Elementor is that in addition to the default template and one provided by your theme, elements, that gives you two custom templates. One is called the elemental Canvas Data, full-width, full-width simpler means that your content can extend to the edges of your screen. So basically goes full width that I'm like no margins are patterns. Elemental Canada as implements that you're not gonna have any header or footer. It's basically a blank element or our templates, we're not going walk with a canvas template. So there is really no need to enable this layout, but I'm going to choose the elements of full width template. Let's go ahead now and hit Publish. Now I'm going to click on edit with Elementor. So what we're trying to achieve here is this, let me bring back the demo site. It's basically going to be a section with two columns. The one on the left, the left column we'll have the logo, while the column on the right, we'll have the main menu and we also want the column on the light one containing the main menu to have more width. So check this out. Okay, right here, I'm going to click on the Plus button here. And now we can choose our structure. And I'm going to choose this one divide here. This one will have, the first column will have a third of the entire section, while the second column will have two thirds. So right here, since we're editing the section, as you can see, for the content width, we could actually go full width if you wanted to. But I'm going to go with box and I'm going to choose 1240 pixels. This is just my own personal preference. I loved ones 1240 pixels. Now, in here for the very first column, I'm going to click inside. I'm going to scroll all the way down here. And we're trying to add the logo. So I'm going to add site logo. Click, drop it inside. And now we have our logo. Now you can see because the logo has white text and this is a white background. But just bear with me. Okay, I'm gonna choose. The image size here I'm gonna go with full for now. Then let's go ahead and click on the Edit button for this section. All right, So I've clicked in there. I'm gonna go back to style. And then he went to where you have begun type. I'm going to choose classic. Now I'm going to choose the color black. So now you can actually see the logo, right? Okay. Now let's go over to the second column. We're going to add our navigation elements. So writing against the navigation menu, click drag, drug that inside. And then you can see main menu is selected by default. However, when it's to make quite a number of changes, notice right here that will remain with the main menu. The text is in capital letters, it's in white. It's also aligned to the right and also in the center. So we need to do for thins. Let's go back in here. First thing I'm gonna do is while editing the navigation menu right here, you have layout clicking there. And now we're going to choose align to the right. As you can see right now it's to the right. Now let's go over to style. And we're gonna come down here to typography. Click on the Edit button. Com non-hairy transform, choose uppercase. Okay? And then for text color, Let's click on the global icon right there and then choose primarily for White. Good. But now how do we align the menu items in the middle vertically? What you want to do here is you're going to click on the Edit Column potency here, this particular button right here, you click in there. And now here you can see we have Vertical Align. We're going to choose middle. There you go. That is it. But we're not done yet. For the logo. Let's click on the Edit button for the site logo. And then the alignment here, we're gonna go to left. Like you can't really see the difference just yet, but Just bear with me. We're going to choose that one to the left. Okay, let's go ahead now and updates. Now let's just take a look at what we have. View the page. And there you go. Now you can see our homepage has this particular header right here, but then evolves to go to, let's say the About page as an example, you can see we don't have that header at all. If it wants to go to the contact page. As an example, you can see we don't have that header. So this right here, the homepage now has this particular handout with the black background, the logo, and then the menu items. Now to round this up, I'm actually going to make a few changes. Let's go back to the section. Okay, and I know I said the content width to be 1240 pixels, but I've done some further tests in, and I think it's best we go with the full width. So let's go with full width for now. Then this column, the one holding the logo, we're going to reduce it to 2525% percent. While the column holding the manual items will have 75%. Then let's also make a change to the logo. I'm going to click Edit logo. Let's go to style. And then for the max-width, we're going to set this to 75%. And a question you might have is why obviously the max-width and not the actual width. Here's the thing. When you set the width for the logo, the logo will always have that width. We godless, of the screen size. You're working with max-width. You're basically saying, Hey, the logo should never exceed this width. Then in situations where the screen size isn't large enough documented the full width of the logo reduce the size of basically max width is much better for responsive design. And you always want to be responsive. So we're going to set that to 75 pixels. And now if we update, if we take a look at our header, you can see right now that it looks so much similar to what we have are over here on the demo website. Last thing to do is we're going to duplicate this header for the second header. So basically he has what we're gonna do. Okay, well I'm gonna go back to the backend. Instead of creating the second header for the rest of the website, we're simply gonna come in here and then you'll see EA duplicates or that's the essential atoms duplicates all. I'm going to go ahead now and simply duplicate the homepage header. Now you will see drafts Elementor. Let's go ahead and I'll click on Edit. And then we'll look at few changes in here. We'll call this one the global header. You can give it any other name that you want, but I'm going to call this one global header. And then right here, pep of templates, Yes, it's the header. Then the display on. We're gonna go with entire website. But then to be on the safe side, I'm gonna come in here and say add exclusion rule. We're saying, Hey, do not display this one on the homepage down here. He has specific page. I'm gonna come in here and simply type in home, making sure that this header will never be displayed on the homepage. It will only be displayed across the entire website. And there you go. So template full width as well. Let's go ahead now and hit Publish. And there you go. So just to go back in here, let's refresh this page. So that's the header for the homepage. But now take a look at this. Okay, If I was to go to any other page, let's say the About page as an example. Now, you will see that the duplicate header isn't showing. Let's go to the Articles page as well. You can see again, the duplicate header is not showing, despite the fact that we said the duplicate header to show on every page except the homepage, what exactly is going on here. And trust me, it took me several hours. Just China figure out exactly why this was not working, but I figured it out. What you want to do is just go back to the duplicate header right here. This is the duplicate hit every created. What you want to do is this, okay, Just try to initiate, actually let us go back to the back-end so you're not confused. All right, from here, from here, just click on edit with Elementor. Edit with Elementor. And then what you're gonna do is right here, just initiate any kind of change. Let's say you add the heading elements in here, for example, okay, drop that in there. Now do you see that the update button is available? Okay, I'm gonna go back in here, close this. The whole point here is you want to make some sort of change on the header so that this Update button downhill would be triggered. Now we can update. And now it should work. So if asked to go back to my articles page in here and now refresh. Now you can see that the duplicate header is now showing I go back to the homepage, is exact same header. I go to the About page. And of course it's the exact same header as well. That's exactly what you should do whenever you tried duplicating your headers and footers on the duplicates. Simply go inside edit with Elementor, add any element, remove that element just to trigger the update button. Update. And now that new duplicate header or footer will now be in full effect. So that's it for the video we've created our two headers. Thank you for watching and I will see you next class. 8. Building our Global Footer: In the previous video, we successfully created our two headers, one for the homepage and the other for the rest of the website. But now we're going to create our Global Footer. And the good news here is that we only need to create one of footer and this is exactly what we're trying to create. We're going to have this image here on the left and then some contact information, social media icons. And then the side copyright basically down here at the bottom. Let's go ahead and quickly do this. I'm going to click on Add New. And we're going to call this one the global footer. Select option here will be Footer and of course display because the entire website. And we'll change the template to full width. And there we go. Let's go ahead Publish. And now let's edit with Elementor. Now, I want you to pay very close attention to a massive difference between the header and the footer and the header that we have here. We basically have just two columns. The one on the left holding the logo, the one on the right holding the code, the main menu. But for the footer, notice that it is a little bit different. Yes, we still have two columns, one holding this image, the other one holding the contact information. But then down here, this copyright text is actually a third column. It's not under this first column here. It's actually a separate column on its own. In order to create this kind of multi column section, we're going to make use of a new element called the e-mail section in the survey. It's actually the very first element that you have, this one right here in a section. I'm going to click drag and then drop it inside. Okay, so first things first though, is I'm gonna go ahead and edit the very first section. If you're having trouble trying to click on the parents sec section, basically, you can always use your navigator right here and you can see right here we have this section column and then intersection. So I'm going to click on section right now. We're going to change the content width right here to full width. And then columns gap. We're gonna choose no gap. The reason is that if you pay close attention, you can see right now the way you have the image, there is no space, there is no padding margins whatsoever. The image is directly right there at the border of the bottom. That's where we're choosing our node gap here. We don't want to have any gaps at all. The same is going to go with the inner section as well. But before we jump in there, Let's add a background color. I'm going to go to Background type. And of course we're going to choose are black. So I'm going to have a black background for the footer. Next up now is going to be the ina sections. I'm going to click on inner section right here from the navigate TO again, we're going to go full width. And then columns, columns gap here. We're gonna say no gap as well. Alright, awesome. Now let's go ahead and handle the very first column in here, which will have our image. So I'm going to drop the image element in there. Choose this image right here. And in case you're wondering this is actually in Peru. It's a place called Horeca kina or who are Cocina. I'm not exactly sure how it's finance-based, basically kind of like a desert area. You can do soundboard and, and so on. Pretty awesome place to check out. And I'm gonna go ahead and switch this one to fool. But then here's the thinner, right? We're gonna change the column widths. We're gonna make the first column in here. We're going to actually make it a bit wider. So we're gonna go all the way to 63 pixels, 63% actually, so 63% and then 37% for the second column. But we're gonna make a change to the image. The image is way too tall. So let's go ahead and edit the image. And then we're going to go over here to style and are here, I'm going to choose 450 pixels. So it's just about tall enough and wide enough. Okay, that's the image right there. Now, I'm just closing navigator. For the second column, we're going to add a series of different elements. The very first one here would be the heading element, and this one will be our contacts. I'm going to type it all in capital letters. Contact. It's gonna be an H2. For the style of wisdom. We're going to go to the text color and simply choose primary. Now we're going to choose another heading. Again. I'm going to drop it just underneath the contact right there. This one is going to be a telephone. Again, capital letters to phone. However, we're gonna make this one an age three. Actually let's make it an H4. We're going to make it an H4 and we're going to add some information. So what I'm gonna do right here is I will simply right-click and then simply duplicate. And now we're gonna make this one an age five. The actual telephone number will be an h5. So let's change the number right here to 090 space 645, space 3417. That's going to be the telephone number. And I'm gonna go back to style and the topography. Let's actually choose texts. I prefer this text pattern, so we're going to choose that one. Then we're also going to duplicate the telephone. Again, drag it down here just underneath the telephone number. We're also going to duplicate the telephone number itself. Okay, and then drag on the NIF telephone. Now, oops, sorry, that went all the way up there. Let's bring it back down here. Okay, now we're gonna edit telephone, the second telephone right here. We're gonna change this one to e-mail. This is basically how to walk smart. Just simply duplicate whenever you can and simply make the necessary edits. Now we're going to edit the telephone telephone number. We're gonna change the an email. My email is Alex. Pass ports will become does not look correct. Alex at passport travel.com. Okay. Yep. That is correct. And then last but not least, we're going to have an address. Let's also duplicate the e-mail, adding one more time. Let's drag, drop that in here. Change email too. Ip address. Now for the actual address, we're going to use a text editor as opposed to a hidden, because there's going to be multiple lines of texts are going to drop the text editor right there. I do have a very interested in address right here. I don't know if this is actually a real address. I don't remember. But it's fits in r2, Emile Zola. Now I'm going to press Shift Enter, not just anti, because if you press Enter you're going to have a double-space in, use Shift key and then enter. So you have a single line spacing. And now I'm going to type in 609002, leon, Shift Enter again. And then we're going to type in France all k. And we're gonna go over to style typography. We're gonna go with texts. And of course, text color will be primary. And there you go. And last but not least, we're going to have our social media icons. Very, very, very important. Social media is going to be down here on the general. Let's add a social media. And of course for Facebook, well, we're gonna change the color from efficient code to custom. The primary color here would be white, the secondary color would be black. Basically, you will have the white background and then the actual icon themselves will be black. If this was a real website you are building, this is where you would add the link to your Facebook page. That's for Facebook. Lets us do the exact same thing for Twitter as well. Why it will be the parameter color black as a secondary color. The last banal is YouTube or fuchsia color costume. Primary color is white, secondary colon is black. And then the shape here, we're going to change its shape to circle, right, and then alignment, I'm actually going to align it to the left. We're almost there. But then notice that there is some spacing, the actual contact information and then the image. What you're gonna do right here is we're going to go right here to the column holding all these contact information, you click in there. Go over first, Vertical Align, let's align to the middle. Then go to advanced, and then eventually you have padding. I'm going to unlink these values together because the thing about this is by default, whatever value you add to your padding, to the top, right, bottom, or left. It will duplicate a course of the remaining three sides. So we don't want this, we only want to add padding to one side. So I'm going to click this button right here to unlink the values just in case you don't know, Pattern basically is a way of creating space between your content and its border. We're going to add padding to the left, as you can see, looking much better already. And I'm going to go all the way to 40 pixels. We're almost there. One of them we're going to add right now is going to be the copyright texts. So I'm going to scroll all the way down here. So right here under your elemental header and footer, you see copyright texts. Click drag. And I'll be very, very careful. We're not dropping it on the this first column holding the image. We're dropping it on a separate clinic considered blue line appearing, signifying that, okay. This is gonna be a separate column. Notice right now that the BlueLine only is underneath the image, underneath the column holding the image. But if I drag my mouse just further down just a little bit now you can see the blue line extending across both columns. So now I'm going to drop the copyright text in there. And there it is. Text color in here will obviously be primary typography. We're going to go with text aligned to the center. And we're actually going to go over to typography, a gain. And let's make this one just a little bit smaller than usual. I think 16 pixels is about right. But we also want to add some padding as well. So let's go over to advanced. Again, we're going to unlink the values. We're going to add padding of 20 pixels for the top ten pixels for the bottom as well. We've done quite a lot. Let's go ahead now and updates. Let's see what it looks like. So I'm gonna go over here, refresh the page. And there you go. This is our footer right there. Now I know you can see whitespace down here, but that's simply because we don't have any content yet on the homepage. That's why you have this whitespace. I already added some contents to the about page. So this is more like what it will now look like. You can see there is no more whitespace on an int because we actually do have some content on the page, but there it is. We now have our footer well-built out with the image from Peru, copyright texts, as well as some contact information. Thank you for watching, and of course I'll see you in the next class. 9. Adding the Homepage Banner: Now that we've built the headers and footers, it is now time for us to build our homepage. And the very first section we're gonna be building will be the banner you can see right here we have the background image with the tropical trees, palm trees and the beach. And then of course, the texts, we're traveling with adventure and then the button that says our book, your trip now. Also, of course, you would have noticed that the background basically blends into the header. How do we do that? Well, we're going to go ahead and go to edit the homepage. I'm gonna say Edit with Elementor. Right here. You can notice that we have basically two columns, one on top, the one that contains where traveled means adventure. And then we'll have another column containing the button book, your trip. Now, what I'm simply gonna do here is this. We do have a heading text in here, but just in case you don't see anything, just simply drag the heading element and drop it inside your box right here. And I'm simply going to say where we're travel meets adventure. That is the major tagline for All website. And I'm gonna make this one on one. But we're going to make some changes to the actual topography itself. So let's go to style. And for the typography in here, I am going to change the transform to uppercase. And we're also going to make the weight 900 just to make it a very, very thick. And then the style will make it italic as well. That's that for the text for now. Let's go ahead now and add the background image for this section. So I'm gonna click on the edit section button right here. The content width, we're going to keep this one box, but then the width here we'll do 1240 pixels. And our checklist advocate for the height, we're gonna set it to a minimum height of a thousand pixels because we really wanted to show as much of that background image as possible. So let me make this 1 thousand. And now we're gonna go over to style, background type classic. And I'm going to choose the image. And it's going to be, I do apologize. Actually do have two separate ones in here for now. I will delete the woman are going to use, we're going to use the big out version. This one is just 859 pixels in height, but this one is 1274. So we're gonna make use of this one. So I'm going to insert that. And there you go. Now, let me show you some tricks regarding positioning your background image. You've got different kinds of positions in center, center, center left, center, right, and so on. So it's really up to you to choose the ideal angles of position for your background image. Mine here that I've chosen is going to be bottom center. Here you get to actually see the palm trees, the beach as well. So it's familiar is the best position. And then for the size, you do have several options in here I'm gonna go with cava. The difference between Kovach and contain is the containable show the entire image. Content isn't always the best option because when you show the entire image, if the image isn't big enough for the entire screen, it will start to repeated study. You can see in the background here you kind of have the image repeating itself all over again. But with COVID, you basically, you're basically saying, Hey, try to ensure that the image will cover the entire screen. That's why I've chosen are covered here, but also going to add a background overlay. So check this out again. I'm going to go back on overlay. I'm going to click in there. I want, I'm gonna do is I'm gonna go to the background type as usual, we're gonna choose a black overlay. And then the opacity in here, I've actually gone with the 0.23. Of course you can change this if you don't want to use Zope and 23. But now we're gonna go back to the actual texts. Let's go back in here. And of course, the text color, we're going to make this one white. And there it is, okay. We'll also going to change the size as well. So I'm going to go all the way to a 120 pixels. And again, this is an entirely subjective. You can make yours a little bit bigger, a little bit smaller. But we're also going to change the alignment as well. Let's go to the content. We are going to align it to the center. And there it is, we're traveling meets eventual. And then what we're gonna do right now would be to add our button. I'm going to drag the button right here, Element and I will jump it just beneath the headline. Of course right here, we're going to say, book your trip. Now. Of course, this is where you would add the link to maybe a page or an XNOR website like a golden or Booking.com. If I went seven, do that and we could just say book kin dot com. Let's just do that. We can.com just for the fun of it. And of course we're going to align it to the center. Size here will be medium. Let's add an icon as well. Okay, so I'm gonna choose the icon library in here. Let's search for plane. I'm going to choose plenty, my bear insert. You do have the option to change the icon position to after or before the text. We want to keep that on before. And then the icon spacing. You could also add some spacing between the icon and the image. So I'm gonna go with aids just to give it a little bit off some spacing. Now we're going to go over to style. This is where we're gonna make some major changes. So the first one we're gonna make in here would be the topography, the weights of the texts. There's going to be 600 and then transform to upper case. Now because this is a link, you would notice that there is the underlining idea, but we don't want that one. So I'm gonna go to Style, I'm going, I'm gonna go to declaration and then choose none. We don't want any of the texts in any of the underlying texts in there. All right, typography, color, text, color right here. We're gonna go with the white. Alright? Then for the button itself right here, you will have the background type and let's click in there. And we're going to go with classic color here would be orange. Now we're going to set a border as well as solid. Then what we're gonna do for the border is we're gonna change the border color to the orange color as well. And then we'll add a border radius just to make the circles, the edges just a little bit circular. We're going to go with ten, I'm sorry, we're gonna go with 12 pixels right here. And that is it. I'm going to go ahead now and updates. And let's see what it looks like. Let's exit to the dashboard. Let's click in here, go to the homepage, and there it is. So by traveled in its eventual then of course we have the button right here that would link to our booking.com. But then how do we achieve this? Where you have the background basically blending into the head up Germany. Very next video where I'll show you how to do that. 10. Blending the Header and Homepage Banner: How do we now blend the homepage banner into our header? Well, just like what we have over here, what we're gonna do here is this again, we're going to head back in here and let's edit the homepage Hadar. First of all, what I'm gonna do is I'm simply going to remove the black background we no longer needed. So I'm gonna go over to style and then simply click on the classic button again to basically reset it back to its default background, which is just basically the white color. I'm gonna update. All right, let's view the page. Let's go back to the homepage profile. All right, Now here I'm going to now edit the actual homepage itself. So I'm going to click on edit with Elementor, the very first link up there. Now let me show you the power of negative margins going to edit this section holding the banner. Come down here to Advanced, unlink the values for the margins. And now I'm simply going to go all the way to negative 222 pixels. And there you go. Just like that, we have been able to blend in the header with our homepage banner. Let me update. Let's view the page just to make sure there it is. That's our brand new homepage banner and Heather, Just like that. So that's basically the power of adding negative margins. However, let me point out that this only works well on your desktop view. The thing is if I was to go to the responsive view, you will see that a negative margins will begin to show. And it's quite ugly. Down here where you have responsive mode. If I switch this one to tablet, it's still or ki, kind of, although you can now see that the menu, the hamburger icon right here isn't looking about grades. But then if you go to mobile, becomes really, really bad. You can see right now that you don't. The logo basically is with the text-to-speech travel meets adventure. And you can build even see the humble got many soul. We obviously are going to have to make several changes for the responsive design. There'll be for later, but for now, Dexter applies. This looks pretty good. So Germany, the next video where I'll show you an alternative homepage banner. 11. Alternative Video Background: It says premise, I want to show you an alternative homepage banner isn't exactly a banner, It's more of a video. So you're gonna have a video background as opposed to the traditional background image. So it's quite simple. This is the video I would like to add to the background. It's a made for myself, basically compulsion of self, my travels around the wall. So I'm gonna go ahead and simply grab this link right here. And we're going to edit this section. Now because of the negative margins, you may not be able to see the edit section button up here. Or what you want to do is to simply use the navigator. Okay, so come down here, click on navigate TO click on section, and now you can edit the section. So again, the navigates all our button being very, very useful. We're going to go now to the layout style rather. And then right here you have background. We're gonna go with the video. You click on video and are in here. I'm going to paste the link to the YouTube video. But you can also paste the link to from Vimeo as well. And then you can choose the start time, the end time. You can choose to play once or mobile enabled to privacy mode. If you're gonna go with the background video, I would highly, highly recommend that you choose a background fall back. So for the background fall back, I'm simply going to use the same image. The reason is because it's a video, sometimes it may not play and because it's from YouTube, maybe YouTube as an issue or for one reason or the other, the video doesn't play. Elemental would use the background as a fallback options. I'm gonna go ahead now and update. Let's take a look at our page. Coming in here, refresh the page. And there you go. So now you can see we have the background video. Now play an end. Of course, I'm not going to deny that the videos aren't more powerful than an image. Obviously, videos are a lot more interesting. But please note that videos do have sets in drawback certain disadvantages, okay, it may slow down your website. So if you're gonna use a video, please try to make sure that the video isn't that long, maximum maybe ten seconds, because the longer the video is, the longitude takes load and that will slow down your website. So please make the videos very, very, very short. Make sure you add a background image as a fall back shrewd in case the video doesn't load. But that's the alternative for your homepage. But I thank you for watching and of course I will see you in the next class. 12. Building the Homepage Part 1: Welcome back. Let's continue with building the homepage. And as you can see, I've switched back to the traditional background image. But like I said, if you want to use the video, that's fine. The next section we're going to build out will be the two columns section that will have some texts on the left, an image on the right. And then the third section in here is very, very similar. It's just the columns reversed. In the third section, we have the image on the left and then the text on the right. So how exactly are we going to achieve this? This is very, very, very straightforward. We're gonna go to a homepage. Let's edit. And you can see right now it's basically two columns, 5050. So very easily we're gonna come down here, create a new section with two columns, 5050. I'm going to edit the section, makes sure it goes full width. And then the columns GAAP are going to say no gap. All right, so the first section in here, it's going to have some texts. Let me draw the text editor in here. Lambda squiggly copy the Lorem Ipsum dummy text I have over here. Let me just go ahead and paste that. And then we also have the header. Let me drop that by dare. It's an h2. Here. I didn't actually create any actual header, any real title. So let me just type in. We'd love to travel. Just something. That's that. And then for the second column in here, we're going to add the image, and I'm going to add this image I took in Istanbul. This were a group of our college students. I was walking around and I said, Hey, would you like me to take a picture of this idea? So I took the picture. So make sure you set this image to fool. Because again, we want the image to occupy the full width and height of its column. But then we also need to add the Learn More button. So what I'm gonna do of course, is to go back in here, drag button, drop it in here. And then I'm going to say learn, learn more. Then this link can go to maybe the about page. So I'll just simply say forward slash about. And there it is. I'm going to align to the center. Let's make some changes. Style typography. I'm going to say transform to uppercase. The declaration on non within what an integration. And then the text color. I'm going to switch that to black. Now for the actual button itself are gonna go with a background color of white. Background typing here is going to be color white. But then we will set a border of solid so we can actually see the button. And if you wanted, you could add some border videos as well. But I'm not going to do that. One final thing to do would be to align our content in the middle. So I'm going to click on the Edit Column button, comments, Vertical Align, sets middle. And then one more thing we doing to have some space on the left and right is against right now the text isn't exactly right off the edge of the column, so we need to add some spacing. So I'm gonna go back in here. What we're gonna do is very, very simply, we are going to go to advanced for the same column. Right here. We're going to unlink the values for the pattern. And then I'm going to give 50 pixels by 50 pixels on the left. And there it is. We have built out our second section very easily, since the third section is very, very similar in design, what we can do is to simply right-click on the edit section protein and then duplicate. And now what I'll simply do is I'm going to drag this first column in here, drag it all the way in here, switch the columns. And now very simply, let's go ahead and edit this image. I'm going to choose this one which I took in Argentina. Mount fits in L, color fatty. And then of course, for the texts in here, did I add anything traveled to the best places as the header, okay, so let me just switch that header in here and say travel to the best places. There you go. All right, let's go ahead now updates. Let's say what the page looks like. Come on, let's go. Do bear with me. Unfortunately, these are the occupational hazards of an instructor, a teacher. Sometimes you incident begins to mess up and finally it's updated. Okay, thank you. Now, let's view the page. Let's scroll down and there it is. Okay, one more thing. Just as a bonus, we could add some animation so that the images maybe like, you know, this slide in from the left and right. So what we can do is to simply go back and check this allegory for the first image, the one with the students in here, I'm going to edit the image. Go to Advanced lighter, you have motion effects. I'm going to say entrance animation. Let's slide in from the lights. Okay, so slightly in from the right, so slicing from the right. And then for this image was simply do the opposite slide in from the left. Motion effects. Slowed, informs or loved. Okay, that was kind of weird. I'm not sure exactly what they did. Let me just do that again. Okay. For some reason the image window over to the second column. I don't know why that happened, but alright, I'll just go ahead and update. There we go. Let's view the page. Let's scroll down. It makes sliding from left, misled and delight, and there it is. And just like that, our homepage is beginning to take effect. So join me in the next video where we'll now take a look at how we're going to build out the next section, which would be the unique travel design. 13. Building the Homepage Part 2: All right, so we're moving on. And the next section is going to be the unique traveled design section, which will look a little bit tricky, but it's not that trickier. We basically have one very big section with multiple columns. One column will hold the header. Unique general design and we're going to have the divider element will have some texts and then we'll have an inner section element with three columns, with three different headings, diagrams, and some texts. So let's go ahead and edit the homepage one more time. And I'm going to scroll all the way down here. And the first node is simply do is just to drag the header in here. And I will add the edit that says all unique, unique travel designer. Of course, I'm going to align this one to decenter. Since we now have content in our section, I'm going to go ahead and edit this section. We're going to set the width to 1240 pixels. Then style, we're going to add a background color of FATF eight. So it's this sort of grayish white color. I really don't know the exact color, what it's called. But the point here is that we're trying to differentiate the section just above it from the new section we're creating. So one of the best ways to differentiate, differentiate sections is by adding different colored backgrounds. So I think truffle design, I'm gonna go back to advance as well. Add some padding. So 50 pixels top, 50 pixels bottom as well. And there it is. The next element will be the divider elements which are drop just below our unique travel design. Look into Atlanta center and then the width here would be about, let's go with 50%. I'll maybe that's a bit too much. How about 40%? All right, so for the percent, next is going to be the texts in here, locks where it's not about the stars actually stole this texts from some website. I don't remember, but I didn't come up with this with this text. Okay. I'm not too, I'm not that smart, so I'm going to drop the text editor all just beneath the divider and paste that text right there. And of course we are going to align it to the center are then last but not least, we do have our three columns section in here. So we're going to use the ina, section. We're going to walk smart again. Basically, each column has the exact same design. You have a diagram, you have a header, and then you have some texts. So we'll simply do is, we'll design the very first column Jabbar image in here. And it's the image with the world plane can offenders one right here, insert that media, make it a full size. Then we're going to add a header. Just move the image. We're gonna make this one an h3. I do have some text in here and it's called, this one has got to be featured. Destinations, that will be the headline future destinations. Let's make a change. Okay, I'm going to align to the center, but then for the style, we're going to change the typography from uppercase to just normal light. And then last but not least, we'll have the text edit tool. Let's drag that in there. So let me just grab this text right here. Similar them Ipsum dummy text. I'm going to go ahead and paste that. I think it's actually the exact same texts, different, silly me. Okay. Well, his style, This aligned to the center. There it is. So what was simply needs to do now is to come in here, right-click on the Edit Column button and simply duplicates, and then duplicate one more time. And then we'll come in here and delete the fourth column. It is. So this is going to come in here right now, change this image to the mall with the map. And I do have the texts in here that says travel guides. So in addition to being able to feature a certain destinations to their customers, passport travel also offers are travelled guides as well. And then the last one in here, I'm going to switch the image to the one with the plane tickets. I do have the header here that says affordable. Further bool. To get it is. There you go. So I'm going to go ahead now and simply update this. And let's view the page. And voila ionic travel design. There you go. So hopefully you enjoyed this particular lesson, Jimmy, in the next one, where we'll continue to build out our homepage. I'll see you then. 14. Adding the Homepage Gallery: Let's go ahead now and add the gallery to our homepage. Now I know that in a demo site here, you can see I created a services section, but of a sudden not to do the same thing because it's actually very, very straightforward and I don't want to waste too much time teaching you the same thing over and over again. Basically, if you want to build out this same kind of section, you will have your white background and you will have three columns. The first column here would all be headline or services. You will have the next column that will use the inner section element for the three columns. And then you can simply repeat that same section for the monetary columns down here. Now the element I used that has the image right here, the headline, it's the info box. You will find it on the UN essential add-ons. So it's the one right here on the and social add-ons you will see in full box. And it's the one variety, so you simply drag, drop it inside. And now here you can choose your image. You will add the tide tool, the content in there and so on. So you can think of this as an assignment if you want to build out a similar structural. But I'm gonna go ahead now and create our gallery instead. For the gallery, it's actually not a gallery, but more of an image carousel. So I'm gonna go to general right here. And then you see we have the image carousel right here. Click drag, drop it inside. And I'm gonna choose on images. And then I do have six images I have selected. Let me just take a quick glance at my other screen right here. I have this image, this image, this image in here as well, this one That's four. I also have this one from Cengage and this one from Verbit lot J or K. Let me go ahead now and create a gallery. Now the trick here is that all these images have the exact same height of 800 pixels as you can see, and also the width of 1200 pixels. So whenever you're adding images to your gallery or carousel, make sure tried to make sure that they're as close as possible in terms of dimensions. They didn't have to be exactly, but they shouldn't differ by more than, let's say five or ten pixels, give or take. So try to make the images had the same size as much as possible. So we're going to insert that into the gallery. And we're going to choose a full size. Slaves to show would be two at a time. Slice to scroll would also be two. You don't want to stretch images because this could lead to them being blurred. So we'll keep that on no navigation hours endorsed? Yes. Or you could just go with dots. They'll show down here, which is also a possible. Then the link you could link them to a media file if you want to. But I'm not going to link them. I'll just leave them on. The caption will go with titles. So there'll be the titles of each image being displayed. And there it is. All right, so I'm going to edit this session right now. Choose a full width and then columns gap, no gap. And there you go. I'm gonna go ahead and I'll simply updates. And let us view our page. I can scroll down here. And there you go. That is our gallery light there. One thing you could also do, you can think of this as an assignment. You could add the bottom for Instagram. So basically what you could do is again, you go over here to edit with Elementor. If you have an Instagram page on Instagram link, you could just simply come down in here. You just drag your button, you drop it right here, and then just simply customize and say view our pictures on Instagram. And then if can add the link to Instagram if you wanted to do that. So again, you do have the option to do that as well. We're going to go ahead and delete. One more thing just to ensure is for your image carousel right here, you will have the additional options for autoplay. Pause on Havas, pause on interaction. So pause on hover. You can choose know for that one just to ensure that the energies are always colon by. Of course, you can set your infinite loop. Your direction may be left or maybe go to right. Instead. You have all these options and it's really all very subjective. Okay, so I'm gonna stick with left, just updates. And there it is. So that's it for adding our gallery Germany. When next video available now, add our blog. I'll see you then. 15. Adding the Blog Section: Let's go ahead now and add the blog section on our homepage. And you can see this is what we're trying to accomplish. We will have our headline, it divider and two blog posts, which will have the featured image, the title of the post, the excerpt, as well as a read more link. And then the read more posts bottom dealt actually linked to the blog page. But here's the thing though. Let me drag the same demo site right here, but with the backend you will see I have access to certain elements in here, like the pulse grid as well as the post time line. But if asked to go to my own site right here. And if I scroll down to the essential atoms section, you will see that I don't have access to those elements and you will not see them either. And that's because we need to activate them in the back-end. What am I talking about? Let me first of all drag this page away. Let's go to the back end, the actual WordPress backend, and you will see essential add-ons in here. Go ahead and click on it. And now right here where you have elements, you click in there. And you right here, this is where you can activate or deactivate elements that you'll walk in width. So let's do this. Okay, I will actually go ahead and disable every single element or an aldose, activate a few, the ones that we would probably use. I'm going to activate the testimonial element right here and then right here under your dynamic content elements, I'll activate the post grid as well as the post time line. Let's go ahead and save our settings. Now we'll go back to the homepage edit with Elementor I. If I scroll down to the essential add-ons section, you will see we now have access to just a few of the elements I not show. Are we still while you can still see a better payment, easy jobs, carrier pages, elements, I don't know why, but it's fine. At least now, we have access to the post grid as well as the post timeline. So here's exactly what we're gonna do. First of all, we're going to drag in our header, which would say visit our blog. So I'm going to drag the heading right here. So I'll say visits blog. Let's align it to the center. Next up will be the divider. So let's add down as well. I'm going to align to the center with very, very short width of about, let's say 20% should be fine. Now here's going to be the main thing. We're going to go back. We're gonna make use of the post grid, post timeline. I'll show you how that works when we build on the blog page. But I'm going to drag the poles grid right here, just underneath the divider. Let's drop it in there. Okay. Now, posts per page, I'm going to switch this one to two. We only have two pages in here. And a thin is you can source by maybe the author. You can also pick specifically by categories as well as you simply come in here and type in the name of the category whose posts you want to show. So on you can offset by maybe one post you can order by the Date descending, and so on. You have access to all these settings. But the main one that actually wants to walk with is going to be the layout settings right here. In here, you have just one template layout, which is the default lit, which is fine. But then the columns are going to make this one too. Now right here, the image size, we're going to go with full. And there you go. So now things are starting to look a lot better. But then of course we can also do things like the show our Lord more if you want to. So when you activate this, you'll see this button right here that will load more blog posts as well, but we're not gonna do that. You do have access to a grid style, which isn't much of a difference between good and missionary. I guess, when you, when you are shooting more posts and welcome with more columns, that's when you'll see the difference ball would just took with masonry for now. Okay. Showed a title? Yes. We want to show the title. Should they accept yes, but we're going to extend the except to 50 words. Okay, so there you go, 50 and then 50 letters rather. And then in here the show we'd More button, yes, we want to do that one. Show post terms. We can show this. This would be things like your tags, your categories, and so on. But we're not gonna do that one, so we'll just go ahead and hide that. Now. Show meter. This is going to be for the author, the date it was published. I'll go ahead and hide that. But again, of course this is entirely subjective. You are more than welcome to display. You'll need the information if you want to. Alright, links right here. You can do things like Target blank for your images are no full of this would be for SEO purposes, are and so on. All right, let's go over to style and let's see what we have in here. The post grid style default, you've got style to, which would have the dates. You've got style three here, which won't have the date which is kind of similar to the default. I guess there wasn't that much of a difference. And of course in here you can do things like change the posts background color, add some more spacing if you want to. We're gonna come down here to color typography and style. So right here when you hover on the title, you can see right here, it has this color right here. We can simply just change that to black so there is no change, is just basically a link. It's not going to change. But again, very, very subjective. You can add a link by day if you want to tackle style. I'm gonna come down here to typography. For the declaration. We can go with none, so it's not on the line, but again, until you subjective or style, we can go with italic bulb. I'll just stick with the default. All right, That's what a typography. And then it down here, you have the hover cut style. Right now when you hover on the featured image, you have kind of like this animation, this fading animation. And then with the black background, you can click in there. This is where you can change the animation. So instead of fading in and you can do maybe like a zoom in where it zooms in. Or you can do a slide up, so you can see that. And then of course you can change the background color was well, maybe make it something less darkish me, something like this. You can also change the icon, They'll be displayed. You have all these options are available for you. But I'm just going to leave this as it is. I'm just changed the color back to something a bit darker. And that's okay, that's perfectly fine. And that's it. All right, so lastly we're gonna do is to simply add the Read More post button. So let's drag a button in here. And I will say read more. And now this link will go to the blog page, so forth. Large blog aligned to the center. And we're gonna make some changes as good to style. The background. For the bottom will be the orange color, and then the text color, of course would be white. Let's go to the topography which transform uppercase. And let's actually say read more posts. Read more posts, I believe them just take a look. Yeah, it says Read more posts. So we'd more posts. And that's it. Let's go back to style again. For the typography, we're going to go back in here style, the curation non. So we don't have any on the line button in there. And that's it. You can add your borders and do other things as well, but I think this should be fine for now. So let's go ahead and update. And that's it. So you're more than welcome to style this. Anyway, you want to, you don't necessarily have to use the exact same colors or the exact same texts and so on. And that's it. So one more thing, one more thing we should do before I round this up is to add some space in between the gallery section and a blog, as well as the block and the FUTA. Let's go back real quick. And of course we're going to edit this section for our blog and we're going to add some padding. So let's go in here and it's section go to Advanced unlink these values. So top, Let's add 50. Then bottom, we're going to add 15. And then that should be enough. Let's go ahead update. One more time. View the page. Scroll down, and that is it. So we've built out the blog page, German vin, next video where we'll build out the deals and packages section. 16. Adding Our Call to Action: Let's go ahead and add the next section, which is going to be the deals and packages. And this will be very, very simple, very straightforward. We're going to make use of the call to action button for the essential atoms. So please go to your essential atoms backend. And you would find the button and your marketing elements section. Go ahead and activate the call to action. Let's go ahead and save settings. That's it. I'm gonna go back to my homepage refresh. Now let's scroll all the way down here. Let's actually actually edit with Elementor first before scrolling down. Alright, let's scroll all the way down here. And now I'm going to go to my essential add-ons. And where is our call to action button is right here. Call to action. I'm going to drop that in there. And it's very, very straightforward. All we're gonna do here is just to simply change the content style from basic to flex grid. So you now have the button on the white and then the text on the left. And of course we'll just simply change the title here. Two deals, packages. Packages. I'm gonna change this to an H3 with the orange texts. You can of course change this to white or black. And for the texture right here, I'm sorry, I'm not going to provide any costume to x. We'll just leave it as it is. And then the button text itself, we can change that one right here where you have primary button texts will simply change this one to our shop now. Shop now. And this would link to an external site or maybe another page on your site as well. We're gonna go over to style light. And then for style right here where you have the primary button style, I'm going to click in there. What you want to do here is there's a again, right now when you hover on Shop Now you can see that he changes to the blue collar. Personally, I don't like that. So what I'm gonna do is I'm gonna go over to hover on your perm important style hover. Then a variety where you have the background color. I'm simply going to just change that one to orange. Now you can see it's orange and not the blue color. So we're trying to keep consistent with the colo pattern that we have on our side. That's the only change I am going to make. Let's go ahead now update. Let's view the page. Scroll down. There it is, deals and packages. Now I know of course the we need some spacing between the deals on packages as well as the footer bulb. We're still going to add the reviews section. So that's where we'll add the space and that's it for adding the deals on packages section. Thank you for watching. I will see you in the next class. 17. Adding the Testimonials Section: Last but not least, we're going to add the reviews section. And of course, this is very often a very important part of any website because customers or potential customers want to know that other people have done business with your company and that they liked your service. So we're gonna go ahead and add three reviews from beyond under sin, Vanessa Carlton and Raul Gonzalez. Now, the thing is because we've already activated the testimonial element with the essential Adams plug-in. We do have two choices when it comes to adding testimonials. Version of elemental does provide you with one. You would find it on the general, the general idea, you will see it. It's right here, testimonial right next to tabs. But there were their social add-ons. We also have the testimonial element. So let me just show you briefly the difference with the one from the essential add-ons. You do have access to the waiting button right here. The style is a little bit different. You can see with the, this is the one that from the a free version of elemental. Here you can have the thumbnail or the avatar of the person providing the testimonial below the actual testimonial itself. But with the one for essential atoms, It's a little bit different. Bore. You do have access to the written button in here and you can do several things like, no, of course not as usual, change the layout alignments, so that'll select your style. You can even have things like the testimonial here on top, you will have the icon and then the image. You have all these options in here. And it gives you way more options than the one provided by the free version of Elementor. But with that being said, I'm going to use the free version of elemental just to get this exact same kind of structure. Okay, so let's go ahead and do this. I'm going to remove the element and we'll add a header. And it will say reviews, reviews from past customers. And of course we're going to align to the center. And we're going to add our divider as usual. So let's add the divider. Think they should be about 25. Loops are not 25 volt, 45% for the 5%. Now we're going to add the ina, section element because we're gonna be working with three columns. So I'm going to drop that in there. Just like before. What was simply do here is that we will provide the first testimonial form beyond Anderson. And they will simply duplicate and then change the names as well as the location and other tasks for the rest of the testimonials. So very quickly, let's go over here, go to general. And let's add the first testimonial in here. And this is by beyond, beyond Anderson. Now, for the type tool, you could just add the country they have instead, okay, So instead of the person's job title, you can simply add the country. So beyond Anderson is from Iceland. And right here I'm going to choose the image. Whereas our friend beyond areas you can see it's all smiley, very, very happy. And there it is. All right, so you can see the text size here is pretty small. So what we're gonna do right here for the content is we're gonna go to style. And then where you have to progress in here. Let's go ahead and then choose the topography button. Now for the size, we're going to go with 18 pixels away it is. And what else? That's pretty much it. So we're going to simply go ahead now and then duplicate this section or this column and duplicate one more time. Delete the last column. And then always simply doing here right now is change beyond Anderson to Vanessa Carlton sheets, which is smiling. She's very happy. Vanessa Carlton. And Vanessa is from the US. And then we have our last testimony right here from Gonzalez and roll is yeah, it's kind of smiling exactly, but he's not angry either. So Gonzalez and he's from Spain espanol. How do you spell spin? Spin is SPA IN? Okay. There it is. We are done. One more thing. Let's add our padding to this section. So advanced, we're going to go with 50 and top 50, bottom as well. Updates. And voila, let's go ahead and view the page. And there you go, right down there. That's pretty much how to add testimonials to your website. Thank you for watching and as always, I will see you in the next class. 18. Home Page Review: Well, welcome back, Felicitas Sian. We're successfully built out front page including the header and the footer. And I hope you're enjoying the course thus far. Now moving on, we're going to build two more pages, the blog page and then the contact page. And now I know that in the main menu we do have the Features page as well as the about page, but I'm not gonna build those just to save time. I don't want to make these costs way too long. And also because at this point, you already have an idea of how elemental works. All that's left right now is just for you to imagine what you want your About page to be like. Do you want to have a big banner? Do you want to have a section with three columns? One column has an image, another one has some texts, one other one has a video. You can do all of that. So I'm gonna challenge you to come up with a credit creative ideas of building your own About page of fetal featured page or any other kind of page you might be building on your own site. But we're going to build the blog page specifically because it's a little bit different from your traditional static pages. The blog page contains all your posts. I'm gonna show you the different ways how you can build a blog page. And then the contact page will build because it doesn't involve using a plugin called the WP forms plugin, which many people don't know how to use. So hopefully once again, I hope you're enjoying the course thus far, you have yourself a wonderful homepage. Let's not progress to building out the rest of our pages. Let's continue. 19. Building the Blog Page: All right, so let's go ahead now and build out the blog page, which we've named the Articles page on the main menu, but it's actually the blog page. The first thing we're gonna do here is we can't edit with Elementor directly just yet because we actually need to edit the page first from the backend, from the traditional work is back-end. Right here. We can now click on Edit with Elementor. This will now give us access to the elemental interface for the page. The first thing I'm gonna do is I'm gonna come down here to sit-ins and simply hide the page title. Then we'll simply use our own heading. And we'll call this one our blog. We're gonna sell it as an H1, go to style. Actually let's align to the center first go to style. And then for the typography, we're going to set it as our primary. If you're not working with the global fonts, you can set this to about maybe 60 pixels or something like that. Make sure it's pretty big, right? Next, we're going to add our divider for the blog and we'll align it to the center. Set this at fits he present. Now, check this out. Okay, we're going to add posts from different categories. We're gonna make use of our posts grid from the essential add-ons down here. Now you do have post timeline, which is actually very interested in what this will do is that it'll display your posts in a vertical timeline and it is a different style. Personally, I'm not a big fan of it, but you do have this option if you want to. But I'm not gonna walk with it. I'm simply going to use the post grid. Alright, so I'm gonna go ahead and drag the pose grid, jump ridges underneath of the divider. And now look at this. The source is going to be our posts obviously, but we can query based on the author, the tax Fermat's and so on. But we're going to go with categories. Here. I'm going to type in Europe. Alright. We're gonna pull in posts from Europe. The postpaid page here would be set to three, and then the layout sets in. So we'll go with three columns for the image size. We're gonna go with full as usual. Now, you would notice that because I'm using different sizes of my images for the posts, there is a misalignment in terms of heights. Like obviously the fashion in Istanbul has the taller image. And then for their sins in Pittsburgh and Glasgow posts have shorter images. There is a way around this and you will see it right here. You have image height. You can simply set a fixed height for your images. The only drawback to this is that sometimes you may not get the best angles. Like for example, you know, if you made this one taller than, you may miss out on the best angle in your images and so on. So that's the only drawback. Ideally, you'd want to use images of the same width and height when it comes to featured images, but it's not a problem. It's okay. Alright, so we've got that. What else simply do is let's add a heading to indicate that, okay, this is our posts from Europe. So I'm gonna come in here and say Europe. Alright, now let's make some changes to the actual pose good itself. Layout settings. In here. The accept words we're going to go with 15. Show read more. Yes, show metta. Yes, Bot Loves. Go over to style. What I'll do here is I will select style number two. This one will show us the date A2 ensures the avatar or the, the author's name. So I do prefer this particular style. Now from understand itself, we're gonna go over to the color typography and spacing. Hey, again, you have the title hover color. We did this earlier, I'm going to change this one to orange. So when they hover on the posts link, it turns to orange. Then for the typography, we're gonna make some changes in here as well. I'm going to make this a little bit smaller, just so that majestic city of Glasgow can be on one single line. The style, I'm gonna go with italic decoration, none. For the Read More button. Let's also change down as well. I will find out on down here with Mo button style, the text color. We're gonna go with orange just to keep things constant. And then of course for the typography, I'm gonna click in here, go to declaration and then sit down to none. And that's it. We've set it up. Europe, we've got a three posts. What else I want to do right now is to simply duplicate Europe, duplicates the Postgres right here. I will drag Europe, the second one, drop it above here, and then set this one to Asia. That's going to be the next category. Now for the actual Postgres itself, we're gonna change the categories in here to Asia. So let me type in Gia There it is. There you go. And then last but not least, let's do the exact same thing again, duplicates, duplicates. Now I'll drag Asia. Changes wanted to South America, come down here to the Postgres. Changes, one to America. Recall South America. And there it is. So one more thing we could do is to add some space in between the poles grids. So check this out. Okay, I'll go to my postgraduate work, either one for Europe, go to advanced on link the values and then I'll sets bottom pattern. Let's say 25 pixels. Nothing too drastic, will do the sentence for Asia as well. Laying bottom 25 pixels. And then last but not least we'll do for South America as well, on laying bottom 25 pixels. Let's go ahead now updates. And let us view the page. There it is. Okay, so we're gonna add some spacing for the blog title itself bought. Take a look at this. This looks pretty neat and it's actually quite cool. Let me just quickly make that quick change to the blog title. Let's add some spacing. So we're going to go, actually will go to the section button right here holding all the content will go to advanced on link and they will simply set 50 pixels for the top and then fit 50 pixels for the bottom as well. Okay, OR gates. Now, one more time, let's view the page. And voila law, There you go. That is the blog page all built out. However, I want to challenge you. To make things more interesting. I'll show you an example of what I'm talking about. Both with elemental and with the essential atoms are plugin. You have access to so many elements to make your pages look more exciting, more dynamic. As an example, for the essential atoms have activated yet another element. And it is the image accordion. You'll find it on the creative elements right here you'll see image accordion. Go ahead, activate it. Now let's go back to the page in here and let me show you one thing we could do. I'm going to edit with Elementor. We're going to make use of the image accordion. Now check this out again. I'm going to scroll down here. Are essential atoms. We have the image accordion element right here. I'm going to click drag and drop it just above you up. All right. Now before I begin to edit this, I'm going to add another heading just above the image accordion. And we can call this one latest posts. Just as an example, I'm actually going to add some padding from the top. Let's go 25 pixels. Just to give you some distance between the actual block title and let us posts. And I'll take a look at this again. I'm gonna go to my image accordion and invite here. We can do so many things for the very first according in here, I'm going to click inside, change the image in here to be one of the posts. This one right here, the Saint-Petersburg posts, I'm going to choose the featured image. Insert that. And now writer you'll see make it active. Yes, we want to make this, I couldn't active so that it will actually linked to the posts in here right now, I'm going to change that title. Two visits in St. Petersburg. That's going to be the title. And then in here would be the excerpts. This would be the except for the text, which we can change it now right here where you have enabled her to link, you want to show this and now right here, this is where you would add the link to the post. So let me just quickly do this. Let me view the page real quick. For days in St. Petersburg. So right here I'm going to grab this link right here. Again, notice that you don't need to copy the domain name itself. Just go with the forward slash and then the name of the post or the URL of the posts. I'm gonna copy this. Go right here, go back to Edit. Click on the very first image accordion in here. And now down here, title link. I'm going to go ahead now and simply paste that. So this will now link to the post or four days in St. Petersburg. Again, I could do the same thing for the second. According in here as well. Our list choose the one for the Rainbow Mountain. And then again, I can come in here and change the title to the Rainbow Mountain. Little quick, Rainbow Mountain, and so on. That's for the second accordingly, the third quarter. And I will just change this one to the one who Rapa Nui. And then of course, the last but not least, let's go with the one for Turkey, fashion and fashion in Istanbul. Insert that one. It is. I'm gonna go ahead and now updates. And now we'll take a look at the improved blog page. Now look at this. You've got blog posts, for instance, in Pittsburgh, you will have this rainbow mountain. They can click on this one for Rapa Nui, this one for fashion and Istanbul. And then if they're not interested, they can simply now scroll down to view the posts from Europe, Asia, South America, and so on. So this is one way, another way how you can make your pages more interactive, more dynamic. You can also add animation as well, like you can set it up so that you are maybe slides in from the left or from the right. I've shown you how to do that in the homepage. So just try to be creative. If you're not happy with how static your page feels like, you can always spice things up by making use of creative elements, adding some animation. And you will see a massive improvement in how dynamic your pages are. That's it for building out the blog page. Thank you so much for watching. I will see you in the next class. 20. Building the Contact Us Page: I just sort of built out the blog page and now let us build out another very important page, and that's going to be the Contact page. Now ideally, of course, on your contact page you want to have some sort of contact form, maybe even some Google map. If you have a physical location. Or we don't have a physical location, but we're going to add a contact form. Now, there are several plugins out there for creating contact forms. And in fact, if you're using the paid version of elemental, you will have the form element. But we're using the, the free version of elemental. So we're going to install another plugin. And this plugin is called the WP Forms plugins. So let me type in WP forms. And it's the one right here. Alright, so let's go ahead install. And we're going to now activate the plugin. All right, so we're just gonna go ahead and click on create your first form right here. The good thing about this particular plugin is that it's integrates very well with elemental. I'm going to type in a name right here. So that's going to be the contact form. That will be the name of this form. Contact Form are in here. You do have our different templates, are gonna choose the simple contact form factor. We can view the demo in here. You can see this is the demo right here. Very, very simple. You will have the name, email and then message fields. So that should suit our purposes on, I'm gonna go ahead and simply click on Use template. That's itself, but just gonna make a few changes the way the plug-in works as they're right here, you've got the fields available for you with the free version, there is a paid version where you have access to these fancy fields and the payment fields and so on, but we don't need them. So the ginger I'm gonna make here would be to edit the name field. So I'm simply going to click inside. And right here you do have the format. I prefer the simple format where you just have one single line for the name. But you have forced middle, last, and first, last, and so on. On the Advanced, you can change the field size to launch two small, depending on your taste and what you prefer. You can add your CSS glasses in here. You've also got smart logic, which, oops, I'm sorry about that. I forgot. This is only available with the paid version anyway, for the field options. That's it. So you can go back in here and add additional fields like a drop-down checkboxes. If you wanted to. Under setup in here, I'm sorry, under settings, whether right here, this is where you can change things like the actual form name itself. You can change the text for the button and influence applications. This is where you can setup the kinds of notifications you want to receive whenever anybody sends the fills out the contact form. We want to be notified in here by default, the admin email associated with your WordPress website will be in here, but you can add your own custom e-mail elements. Show you something, okay, right here, where you have from name. By default, it will be set to your website's name, but will make a lot more sense to set these to the actual name of the person sending the message. So right here I click on Show smart tags. Simply choose the name field, or your FirstName, LastName, depending on the kind of feel that you have for the name. And then same for from e-mail as well. We'll simply choose the email field. And I'm gonna go ahead and simply save. You do have the conformations in here as well like okay, what happens once they filled out the contact form? Do they get a message? If so, this is where you can edit the message. You can show them at particular page and it'll be a special beauty of created all. You can simply redirect them to an external URL if you wanted to go. We're not gonna do any of that. Let's go ahead now simply TO save one more time, close this. Now we're gonna go over to the contact page. Let's go ahead and edit the page first of all from the WordPress backend. Then from here I'm going to click on edit with Elementor so we can now use the Elementor interface and check this out. All right, oops, I forgot to do one thin. My apologies. We need to enable the WP forms are add-on for the essential items plugins. So let's quickly do this. I'm gonna go to essential atoms in here. Let's go to elements. And then down here you have the form styling elements. You will see WP Forms. Let's go ahead and now activate that. You can see you have access to other kinds of forms like fluent forms, Gravity Forms, which is actually very, very good Ninja Forms and so on. Anyways, let's go ahead and save our settings. And I'm going to close this. Let's refresh this page one more time. Okay, so the thing about WE forms is that even with the free version of elemental, you will have access to the element. Once you've installed and activated the plugin, you can see it right here on the basic, you have WP forms by Elemental. I'm going to click drag inside in here. And I'll show you the difference between this one and the one provided by essential add-ons. Let's go back, scroll all the way down here. Let's add the one for essential add-ons into a different section. Now you're going to see the main difference, okay? This is the one for the essential atoms. I'm going to choose the contact for mortality rate. It says select form. Let's choose that. Now right here. Compare this one with the one up here. Let's go with the one for elements of first. Let's choose the contact form as well. The thing is, you only have access to the kind of form to choose. The display options are good. You want to shoot the form name, description and then advanced. There's nothing more to it. However, for the one with essential add-ons, you have access to a lot more. You can show the description labels, please hold her. You even have our error messages. You want to show error messages or do you want to hide them? So for example, if somebody didn't fill out the name field and then the press Submit you wanted to display the error message or not. You have access to plenty of styling options. You can add a form background color. You can align the form at your width margins. You have all sorts of styling options for the title and description labels and so on. All this time options, you don't get them with the one with the element provided by the free version of elemental. That's why I prefer to use the one provided by essential atoms. So I'm gonna go ahead and close this one by Elemental. Let us walk on this one. Very, very simple. We're not gonna make any huge changes in here except we will simply hide the title of the phonebook. Everybody knows it's a contact form, so there is no need to change anything in here. One thing we will do though, is to hide the page title. And then we'll add our own heading. All right, and we'll simply choose this one's on it as an H1 go to style typography, which is primary. And we'll simply coldest Swan our Contact Us. That's it. We'll add some padding to the section link values. We're gonna go with 50 on top and then 50 below. Actually come to think of it. The Contact Us is actually very, very large book. It's okay, let's just align this one to the middle. And we'll just add some pattern for the actual form itself. I'm going to click on the form element. Let's go to Advanced. And we'll also add some padding as well. Just give it some distance between the actual title and the form itself. So go ahead and update. That's what I'm going to go ahead now and view the page. And that's it for the Contact Us page. Now again, you can make this a bit more exciting. You can go with maybe two columns as opposed to on section. The first column you can add a, an image of somebody who maybe calling or somebody send in an e-mail, stuff like that. So there are different ways to modify the Contact Us page and make it more exciting if you wanted to. But this is very, very simple, very straightforward, and it suits our purposes. So thank you for watching and I will see you in the next class. 21. Introduction to Responsive Design Elementor: Alright, is so technically we have finished building our website. We have the homepage, we have the blog page, and we'll also have a contact page as well as the header and footer. But there is one very, very important thing that we need to take care of and that is going to be responsive design. Always remember that so many people nowadays use their mobile phones to browse the Internet. And if anybody stumble, stumble across your website on the mobile phone, you want to make sure that it looks good. So what we're gonna do in the rest of this section is I'm going to show you how you can reconstruct the header, the homepage, the footer, and the other pages to look responsive. So that if it's viewed on a tablet device or on a mobile device, it will look good. Lambdas give you a very, very quick demonstration right now this is for the tablet view. You can see I have reduced the size of my screen to that of a tablet. And you can see right now that it still looks very, very, very good. We don't have any issues with space in the header. Looks fine. Testimony notes section looks fine. The photo looks fine. But now if I scroll all the way down to the smallest screen size, which will typically be your mobile phone. Let me go back to the top now you can see that the header looks different. We have a black background. We do have our logo. We do have the main menu right here, which is now the hamburger menu, which you've seen many times before. And then if I scroll down again, you can see that it looks good all the way down here to the footer. So responsive design is extremely important. So coming up, I'm gonna show you how you can make changes to your website so that it looks good on any mobile device. Lambda's also quickly mention that when it comes to a responsive design, there are a few concepts that should be aware of. One would involve doing things like reducing margins are patterns that you've added in the desktop version. For example, you remember there with the homepage banner. For this section, we had to add an outrageous amount of negative margin and I think it was minus two to two pixels when it comes to mobile versions. So responsive versions, you might have to reduce that size or Mabou, or maybe even in certain situations increase the size. Adjustment to imagines or patterns will be necessary. Also, there are times when you just need to hide setting kinds of elements when viewed on a mobile device because it might look great on the desktop. An example would be a video editor will look great on desktop. But on a mobile device, it may not necessarily be that great. Same thing applies with animations as well. And the measures will look good on a desktop, the walkways on a desktop, but mobile phone might have trouble displaying that animation. So the whole point of this massive design is sacrifice. You make changes, you remove certain features so that when viewed on a mobile device will be Uber grid. So that's it for the very quick induct introduction to responsive design. Let's now get started with it. 22. Responsive Header Part 1: All right, So let's begin to design our header to be responsive and Lambda show you the states as it is right now. Desktop is pretty much done. When we begin to minimize the screen of our browser. You can see now that at this point this would be the tablet view. And you can see that the logo becomes lot smaller. The menu has also transformed into the traditional hamburger menu. And it's okay, but it can definitely be improved. But then if we go a little bit smaller now you can see this is where things look really, really bad. This is the mobile view, the one for the mobile phone. So we needed to make some changes in here. I'm gonna go ahead. And actually before I do that, let me show you the other header, the global header. Let's go to the contact page and you will notice that this one is a little bit better. We have the black background and then on mobile view, even though the hamburger menu is misaligned with the logo, it's still much better because we don't have any white space at the top. Alright, I'm gonna go ahead and edit the homepage headers. Let's go to Edit with Elementor and then homepage head up. Now we're gonna switch to the responsive mode down here. Responsive mode, Let's switch to table it first. Now, I want to show you something real quick. All right, let me go back to responsive. By default, your main menu or a featured menu enabled turned into the hamburger menu on tablet view, however, note that you don't always have to follow the default settings. Right now if I switch to table, as you can see, it has turned to the hamburger menu. And that's because if I was to click and edit the main menu on the layout, you will see the US positive breakpoint tablet screen sizes of 1025 pixels and below. Sure, the hamburger menu blot. If we don't want to do that, I'm gonna switch this one to the mobile view, instead. A tablet view. We will still have the main menu showing and we only transform to the hamburger menu once we reach the mobile view. Let's go ahead update. And let's see what this little, little change has done for us. View the page. Go back to the homepage or case. So now at this point, this is tablet view. And you can see that it's actually not that bad. You don't have to switch to the mobile, to the hamburger menu once, which is tablets. Of course, if you had many menu items, say 678 items than years, obviously you won't have enough space. But institutions where you've got like four or five menu items, it's perfectly fine for its display. Them as they are in the tablet mode. There's two changes I'm going to do in here. One would be to increase the size of the logo just a little bit. And then we could also try to reduce the size of the menu items just a little bit. Let's do this real quick. I'm gonna go back to the homepage header. We're going to switch to respond SUV, tip tablet. Alright. I'm gonna click on the menu. I'm sorry, the logo either here at UT logo go to Style. Now notice right now that the dimension in here has been set to tablet. As you can see, it's all SASE tablet, tablet. So here I'm going to switch the size to 100%. We're gonna show the full size of the logo. Now for the main menu, I know it's all in white. You can't see, but just bear with me. I'm going to click on edit, the main menu, go to style. Then we're gonna go to typography right here. Now, watch this, makes sure the size here is set to tablet. We're gonna make this 114 pixels just a little bit smaller than usual. Let's updates. Now let's take a look. Add the new homepage header and responsive mode. And there you go. There you go. So up until this point, it's looking quite good. Obviously, we're gonna make some major changes to the banner headline, the winner we're traveling, It's adventure. We're going to reduce the size, but just pay attention to the actual header. Okay, it looks good up until the mobile view, which will now have to walk on. But for now tailored wise, this is looking quite good. Let's now take a look at the header for the global, global header. Let's pick a page, Let's pick the Articles page. And from here we're going to go ahead to edit the Global Header. We're going to handle the tablet mode first. So let's come down here to your responsive. Go to tablet. Alright, we're going to handle the bread points. We're going to switch that one to mobile. And it will just do the exact same thing for the style as well. We're going to align to the right, for the main menu, alignment to the white and then the style. We're gonna come down here to typography. Make sure this is set to tablet. So we'll go with 14 pixels as well. And there it is. Okay, Next is going to be the logo. Let's not forget, we need to make the logo or 100%. Make sure this is set to tablets. 100%, fine. Now we're going to switch to the mobile view. The only thing we need to do right here would be to outline the navigation menu to the center. Actually, we shouldn't have touched the alignments in the tablet mode, so it's okay, we'll just set this back. I'm going to go to Content Layout and then the alignment here. Let's just keep it on the center. I think they'll be better. All right. That is it. I'm gonna go ahead and I'll update. Let's take a look at what we have. Let's view the page. Let's pick the Articles page. Reduce the size. What do we have in here? All right, Is tablet, tablet is looking good. And now here this is going to be the mobile view, but there seems to be a misalignment with the logo and then the menu itself. So let's quickly fix that. Let's go back. We need to make the logo actually maybe a little bit smaller. I think it's a little bit too big as well. So let's make those changes. Go back to responsive mobile. Okay, let's edit the logo first alignment here, let's set it to the center. Let's say this one is a dissenter. And then maybe the size, maybe a 100% is a bit too large, not thinking about it. So let's bring this down to 75%. Let's go ahead and dates. And let's see what this will look like. Let us go back view the page. Article. I minimize, okay, Much better now and now you can see the alignment is at the center. And there it is. So looking much better, much better right now. Of course, there are still gonna make some more, a few more changes to the headers, but for now at least it's looking a lot better than what we had initially. Both the homepage header and the Global Header are looking better. We will handle the whitespace in, in the homepage header in the next video. 23. Responsive Header Part 2: Welcome to part two of redesigning the responsive header. And I forgot to mention in a previous video when I changed the signs of the menu items in here, for some reason it seems to have affected the desktop version. You can see right now that the texts and no longer uppercase, if something like this happens, just simply go back to editing the homepage header. What you want to do is just simply to go to the menu element. So I'm going to click on many elements right here. Go to Style, go to typography right here, and just click on it. That's all you can see right here. It says Transform to uppercase. So we're basically just reaffirming that, Hey, we do want the Let us to be uppercase. So I'm gonna go ahead updates again and let's just go back, view the page. Let us go to the homepage. Okay. And there you go. So honestly, I'm not quite sure why that happens, but just in case it does happen to you, just simply do what I just did. Okay. Now, previously we were able to get the tablet view to look like this, which isn't bad at all. But now it is time for us to take a look at the mobile view. And you can see right now it looks really, really bad is plenty of whitespace and the logo and the menu, the hamburger menu online, but we do need to fix the whitespace. Now actually this is the second time I am recording this particular video because in the previous one, I actually was able to fix the mobile header to have the exact same kind of style there you will have the banner blending into the background. However, I have decided to go with a different route and instead use the same kind of header we have for the rest of the pages, like the one here where you have the black background, decided to use these header for the homepage head out in mobile view. The reason why is because I actually wanted to use this opportunity to show you a very cool trick that you can use whenever you're working with responsive design. Let us go back to the homepage. And I want to show you something, right? I'm gonna go to Edit with Elementor by editing the homepage header. Here's the thing. Okay, I'm gonna go ahead and duplicate this header section. I'm going to right-click in here. Duplicates. Basically now we have two headers. Difference is, I'm gonna come in here, go to this Edit section. I'm gonna go to style, background type, give it a color of black. Okay, Now, check this out. I'm gonna go to Advanced, come down here to Responsive, and then invite here you have visibility options. When exactly would you like to show this section based on a screen size? I'm going to hide it on desktop. Yes. We don't want to shoot it on the desktop yet because we're still using the homepage header on tablet. We also want to hide it until that. But then we want to show it when it gets to the mobile view. As such, I am now going to go to our original header and do the opposite. Go to advanced, Calm down hetero responsive, and then hide on desktop. Nobody want to show, we want to show until that. But when I go to Hide on Mobile, let me go ahead and now updates. And take a look at this. Let's go ahead now, view the page. Let's go to the homepage. Okay, so you can see we still have the same header. But now for the tablet view, you can see we still have the same header, the same header at the same header. Now, once it gets to the mobile view, we now have the black background with the logo idea of the center and then the hamburger menu down there. And then we have the homepage banner. And there you go. So this is one trick that you can use whenever you're working with responsive design. You can choose to show a particular section on specifically on desktop. And you can choose to show particular section specifically only maybe on tablet or on mobile. A question I might have yet though is okay, why didn't I just simply duplicate this particular header and then simply use that header on the homepage and then simply hide it on desktop and tablet and then displayed on mobile. You can have two head does been displayed on any page with elemental, at least that's how this plug-in works. Okay, So if you are thinking, I'll just simply duplicating this header and showing two headers on the same page, hide one on desktops or they don't want a mobile, it's not gonna work because actually tried it. That's why I had to go to the homepage header. And then on that same header, create a second section which will now display specifically on the mobile view. But we're not done. Actually want to do something else. See, you don't always have to go with this tomato. You have the logo and the center on top, and then the hamburger menu or below it. We can still use two columns here. How to log on the left and have the menu on the light. Let us do that. I'm gonna go back edit with Elementor, the homepage header and pallets with for this page to load, okay, some editing. The second header right now. But I'm going to switch now to responsive mode. Let's go to the mobile view. All Kn has exactly what we have. Right here. I'm gonna do this. I'm going to click on the column holding the logo. Right here. I'm gonna say 50. Then I'll come down here to the logo column holding the logo, I'm sorry, all in the menu either. And then change the one to 50 as well so that they are side-by-side. Now, let's make some changes. I'm going to click on the Edit menu, icon, come down, hits layout. Let's try to align to the white. And then we're gonna make it big. Let's go over to style. Down here you will have the menu trigger and close icon click inside. And now Icon Size, I'm gonna make this one above 40 pixels. Keda should be big enough. And then for the logo, Let's edit the logo as well. Image size is set to full, aligned to the left. Let's go to style max with a 100%. Okay, Let's go ahead now. Updates. Actually before we do, let us hold. Let's also do this. When you click on the hamburger menu. This is going to be the job done. But you can see right now that we can see the text. The text is all white, so we need to make some changes in here. Here's exactly what I'm gonna do. I'm gonna go to drop down on the sign drop-down right here. And then background color. We're gonna go with black, text color, we're gonna go with white. And that should be that. I don't know why we don't see it here yet, but It's okay. I'm gonna go ahead updates. Let's go back, view the page. Go back to the homepage, minimize the window. All right, so now you can say, Okay, we've got the logo on the left, the menu on the white. Now if we click on the menu right here, it opens up. Bobby still can't see the text that is interested in. Okay, let's go back and see what might have happened. And this is going to be very interested in. I'm not quite sure why we don't see the texts. All right. No worries. I'm gonna come in here to responsive mode, switch back to Mobile. Click on the menu right here, click on the drop-down. Why don't we see the text? Let's go to style. Let's come down here to typography and wow, I'm not entirely sure why the size here instead to one, but it shouldn't be one. It should be a little bit bigger than one. That's a probably faults in pixels. So my apologies, I'm going to tell issue why me one pixel, sometimes I feel element is trying to prevent me from making good videos. I, I honestly don't know why. It said won't pixel. That's just, that's just bizarre. Anyways, you can see that at least the menu items are now showing, Wow, that's very, very interested in, I'm telling you web design can be a very strange, very strange occupations. Sometimes you feel, you feel like all these elements have in mind that they won't go back. All right, so now I click in here. There it goes. Now you can see I've got the menu items and of course you can now close. So that's basically it for redesigning the responsive header. I'm actually going to go ahead and do the exact same thing for the global header for the mobile view, where I will make the first column 50% and then make the second column holding the menu item are 50% as well. And also make the menu hamburger icon a little bit bigger. So you can go ahead and do that as well. But that's it for creating the responsive or headers for the website. Thank you for watching German event next video where we'll now take a look at redesigning the footer to be a bit more responsible. So you then. 24. Responsive Footer: It's now let's take a look at the footer and try to make it responsive. And let me go over to the tablet view first. And from here it actually has two. Looks pretty good. I don't think we need to make any changes in the tablet view. But once we get to the mobile view, this is where we have a bit of a space and issue can see the contact heading is a bit too close to the image. If we go really small, then it's the same thing. Except the image right now looks very, very blue. Perhaps the best option for us on the mobile view would just be to simply remove this image. Let's go ahead and edit with Elementor, the Global Footer. I'm going to switch to responsive tablet first of all, just to confirm. So responsive mode, I was good at tablet. Tablet looks fine. It looks fine. I don't think we need to change anything except maybe actually, you know what? From the template view, the image Jody looking kind of blurry. That's because it's a bit too tall. What we can do is this. We can reduce the size of the first column and increased the one off the second column. So let's see what 50 we'll do. It's 50 and then the one on the right as well is going to be 50. But the image is still a little bit blurred. So that's not that great. All right, let's go back in here. Let's try to make some adjustments. Maybe make this one. Let's say 66. I think 66 is fine and they will supplement the second column, 33 so that it could be on the same line. This is still fine, I guess. But what about the mobile view or key? Now, he can see that the image is just way too blurred. And sometimes it's best to just we move and not sure certain kinds of elements in the mobile view. So always simply do here is this okay? We're gonna click on the column edit column will go to Advanced. And just like we did previously, we're going to hide on mobile and that's it. So let's go ahead and update. Let's take a look at what we're going to have this view the page. Go to the homepage. Let's scroll down. Okay, so the only thing we need to do ANS to add some padding for the contact heading. Lambdas go back to the go back to the tablet view, just to confirm that it's okay. So yeah, template views is fine. It's the mobile view where we're going to need to add some space in the contacts our button. So let's quickly do this. We're gonna go back edit with Elementor global footer. We'll just add some pattern to the, to the footer itself. That's what we'll simply do. All right, let's go to responsive mode, mobile. Okay, so we're going to edit this section right here, editing section advanced. And we'll just add some padding. I guess the pattern from the top 25 pixels should be reasonable. Not from the top, but but are actually from the top. Yes, from the top. Sorry. Go ahead. Bates page. Page minimize scroll down. And that is now the food tail looks much, much better. Okay, so join me in the next video where we'll now take a look at making the homepage responsive. And in particular, the homepage banner. 25. Responsive Home Page: All right, so let's take a look at making the homepage or responsive. And for the most parts, it's actually not that bad. This is for the tablet view. Obviously we can make the headline a little bit smaller. Make the banana also a little bit shorter in height. Right here. Of course, we can add some padding to the ball off to travel section as well as teachable to best proceed section as well. But I think that's all we need to do because the rest is actually quite good. The unique channel design section looks fine. The gallery is fine. Visits, our blog section is fine. It doesn't packages reviews, all fine. However, for the mobile view, which is what we have arrived here, obviously, we're going to have to make the text much, much, much smaller as you can see. Also add padding in here as well for the travel section. And we need to do something about the fact that we do have the two images for the second section lining up next to each other ideally should be, I will love to travel. Then this image and then our children, the best places, and then the image of this mountain. So we're gonna have to do something about it as well. Other than that, the rest of the page looks quite good to consider. The gallery is now one single row, which is fine. The blog section is also one single row as well. I want a 22 rows, I'm sorry. Then it doesn't packages reviews all now and the own separate column and then also produce as you can see, that at. All. Right, so let's go ahead and begin to make the changes. So let's edit with Elementor. We're going to handle the banner first because that's the that's the main That's the main issue. Alright. Responsive tablets. What do we have here? We're gonna go ahead now and edit the text. And the text was about 120 pixels. As you can see. We're gonna have two big break this down, just a little bit much smaller. So let's say 88 pixels wide. But don't forget that we set a height for the section. Let's go over to this section right now. We have the minimum height here. We're going to reduce this as much as we can. Don't worry about the text overlapping the header for now. But let's try to give you a reasonable height for the table. And I think 519, my baby, too small, let's say seven hundred. Seven hundred seems fine enough. Then from here, don't forget that we also give it a negative margins as well. Now that we've reduced the size from one hundred, ten hundred to 700 women as well also go to Advanced invite here. Don't be fooled by the fact that you don't see anything inside the margin boxes. It's actually inheriting the margins from the desktop view. So here, let's go ahead now and try to reduce this. Oh sorry, I forgot to unlink. Let's make this 10. All right. I'm gonna keep on going up again. This should be about, let me just give it 150 minus, okay, I can't do that. Let me just try this. Minus 150. Okay? I think that's a bit too much. Let's go down. Let's go down. Okay, So it should be around 123 leisure speaker one twenty five, twenty five pixels. Now for the text itself or the header, we could make this a little bit smaller again. And that's it. What do you think? I think this is fine. 80 pixels for the header. Reduce the height of this section to 700 pixels, reduced negative margin as well. And I think this is fine, although be careful, do you see right now that if we expanded the table to the maximum screen size, you can see we now have the whitespace showing up. So that should tell us right now that all okay, hold on a second. We need to increase the negative imagines, actually, that's another thing you should be a well-off. Whenever you are applying negative margins and responsive mode, make sure you are applying negative margins to the biggest screen size possible. This is the biggest concise as possible for the tilted view at 1024 by 878, we're going to increase, or rather in this case reduce the negative margin. Because when you are negative we are reducing that. It's all 158. Just about does It's, so now, if we bring this down to the smallest size for tablet, we're still not gonna see any white space. And that's that. Okay, I think this is fine for the tablet. Let's now make some changes to the first or the second section. And this gives right now, what do we need to do? For the tablets? We can add some padding. Alright, we're going to go in here and it's section. Let's go to Advanced. And right here, let's just add some padding. We can go to the usual 25 pixels and then an effect pixels for the bottom as well. Let's cool down here. We'll do the exact same thing in here as well. I'm going to show you something really cool. 25 pixels from the top and then 25 pixels from the bottom as well. I, now, if you look at this, you'll realize that it actually doesn't look that great. I mean, you've got an image right here ball, the texts, the texts column is a little bit too large. It's a little bit too tall. Awesome goes with the second section as well. So what exactly can we do? The simplest thing we could do would be to simply make each column go a 100% in width. So instead of having two columns will have to come side-by-side. We'll have two columns on top of each other. So as an example, right here, if I gave this first column in here, we're just going to give this one or one hundred, one hundred. And then we're gonna give this column and also 100. And there it is. Right now, even if we expand to the biggest possible size on a tablet, I think it looks okay. This looks fine on a tip, but just make sure the images are large enough. One change would just need to do right here would be to add some padding to this Learn More button. I'm going to click in there, go to advanced pattern and the Buddhists add at the bottom. We'll add some padding in here. Let me say 25 pixels might be a little bit too much. In this case, maybe 15 pixels. 15 pixels is fine. And there it is. Okay, let's do the exact same theme symptom here as well. I'm going to click on this column right here. The goto, the column width. I'm going to give it a 100. And then the second column in here as well, 100. Okay, and then take a look at this. Ideally we want to have this column right here on top of this column. How do we do that? Well, we're going to do is to simply go to this section, holding these two columns, go to section, go over here to Advanced. Any right here on the responsive. You're going to see this option to reverse the columns. We're gonna do that on tablet. We're gonna do that and mobile as well. Now you can see that the child, the best versus column is now on top of the mountain. And that's exactly how to do that. I'm just gonna go ahead and add some padding to the landlord button in here. Padding at the bottom, 2515 pixels. I believe it was an M&A is okay, so let's go back on top. Scroll down. K. We got plenty of spaces. All righty. Okay, Looking good, looking good. Now let's try to reduce the size to the smallest and see if there's anything we need to do in here. It looks okay. Looks perfectly fine. And there it is. Okay. That's it for the tablet view. What about the mobile view? Let's switch to mobile. Alright, so obviously the banana in here, we'll need to fix that one. Well, I'm just quickly scroll down in here and see the rest of the page. The rest of the page looks actually quite good. Yep, This looks good. Everything is now in one single column in which we've used in one column, and then the Contact page. So all we need to do right now we'd be to handle the banner. So let's do this. I'm going to scroll up here. Let's go over to the section. All right, The first thing we will do right now is for the heights. It's a minimum height, 700 pixels. This is of course inherited from the tablet view. Let's see if we can actually maybe increase the size a little bit. Actually. I think 879, Let's try to get something a little bit, even like 870 pixels maybe. Let's try to increase the size a little bit to the largest size for the mobile view. Now you would notice that there is a little bit too much of a negative margin because you can see the blue line and you can see the logo are shown up above. So what we're gonna have to do right now is to go to Advanced. And then for the negative margins, let's try to, actually, we don't need it in any negative margins. Actually was gonna make it 0. Yeah, Let's just make it 0 since we have a blackout background anyway. So what does McDonald's 0? This is for mobile. Alright, so from here, let's reduce the heights. We're going to reduce the height off the page now of the banner rather something reasonable. Let's see. I think 535. What about 530? I think this is fine. Five-thirds hill looks fine. Scroll down. Okay. Yeah. I think you'd be fine. That's making are very small. And see. Okay, So the texts can become, is a bit too large actually. So let's do this. I'm gonna go back to edit the heading epigraphy. We're gonna do is we're going to try to make this as small as we can. And now if we expand the largest for the mobile view, what you have here is, okay, so this brings us to a new discussion. Silicon is right here at the largest size for mobile, the Texas, it'd be too small. If we try to increase the size here, it looks good on the highest possible screen size for the mobile. The issue I know is that if we reduce the screen size so the smallest possible size for mobile, now that text is a bit too large, what you can do in this kind of scenario is to switch the style size unit from pixels to the view port rated review the VW or option in here, the VW is the viewport width. What we will try to do is to try to adjust the size of the text based on the width of the screen size. So check this out. I'm gonna go switch over now to VW. And let's try to go with a size of ten. For the highest. This is the highest size, screen size for mobile. And then if we reduce the size up onto the smallest, you can see that the text is actually also reducing. As we reduce the size of the screen. That's one tip I can give you right now, just simply switch to VW as opposed to pixels or K. So perhaps, maybe one little thing we could do. One final thing we could do again will be to reduce the height a little bit further. Let's say 450 pixels. That should be the last change. Let's try to make this one smaller. And there you go. Okay, I think this is, this is fine. This is fine at this point. All right. There you go. Let's just scroll down, see what else we can do. That's pretty much it. I think we're fine. Let me just make this one really small. Evidence, one column. And there it is, okay, One last thing, last thing we could do is maybe reduce the size of the button here just a little bit. So let's go ahead and edit the bottom right here we're gonna go to style. Actually, gonna go to style. Then for the typography right here, Let's quick in their size mixture. Of course, this is set to mobile, and then we'll just go ahead and maybe make this one. Let's see. Faults and pixels, maybe 14 pixels, or what else can we change? We can of course change the border radius as well. Let's bring this one down to, let's say five pixels. And there it is. Okay, now here we could try to make the size too small. Actually haven't tested this. I'm not sure if this would affect the tablet view. Is is going to affect the tablet view and even the desktop view is will always be small. This is up to you could decide to just make, make the button small. All across all three are screen sizes. Or you could just go with a medium. I think medium will be fine for mobile. All right. That's it. I'm going to go ahead now updates. And there it is. We have successfully built out in a responsive our homepage. Thank you for watching and of course I will see you in the next class. 26. Building the Homepage Header with Elementor Pro: Alright, so let's start working with elements approved by rebuilding our header. And I'll show you how templates work with elements are pro. The first I'm gonna do is I'm gonna go over to the backend and let's go ahead and deactivate the elemental header and footer builder. We no longer need that. So I'm going to deactivate and let's just take a look at the non-existent header that we don't have anymore and of course, no footer. Now you can still see the one shovel misadventures and then the corporate texts in here, this is the hello theme displaying these foods are for us. All right, let's go back in here. And once you've installed and activated Elementor Pro, you will see right here where you have a template on the LM elemental, you'll see the theme builder. So go ahead, click in here. And right now you can see the different kinds of templates we can build. We're gonna build out the header. So I'm going to click on plus to add the header. The good thing about Elementor Pro is that you'll have access to a very wide variety of templates that you can use. You can see them right here. Different styles for the header. You can see some, you know, you'll have the logo on the left, the social media icons on the right, the main menu below. So you can just quickly insert any one of these templates that closely match the kind of design that you want. But I'm gonna go ahead and simply build us from scratch because I want to show you how this works with the elemental per elements. So I'm gonna close this. We're simply gonna rebuild just like before. I'm gonna come in here right now, create our two columns. Section. One there'll be about 30%, the other one about 70%. And now if I go over here to the elemental backend, and right now you can see we have the site logo right here. So I'm going to drag that one and drop it inside. Another thing is you might notice a change with the elemental pro logo element. That is the fact that you actually have access to the heights. The logo on the style with the logo element provided by the elemental header and footer builder plug-in. You don't have these options, so you can actually control the height of the logo from here. But we're not gonna touch that just yet. I'm gonna go over to the back-end again, choose the Nav Menu elements right here, drop it inside here. And of course, Main Menu will choose. Let's align to the right big points. We're gonna set this one to mobile. Remember, let's go over to style our typography. We'll make this one uppercase. Let's go back to the main session itself holding both columns. Let's make it full width. For the logo, I'm just go ahead and add a black background. So at least temporarily we can see the logo. Okay, So much too large. Let's go back in here. For the max-width, we'll just go ahead and choose 75%, just like we did previously. Know, nipped to use the height in this case, one more change. Let's align the menu items vertical, align them to the middle. And there you go. And of course, the color as well. I forgot about that. Let's change the color. Ticks ClO2 primary. And that is that. Now take a look at this. Down here you have publish. When you hit Publish, this is where elements are pool and I'll say, hey, where would you like to display this particular template? We're going to add the condition, not the antacid because this is going to be for the homepage. I'm gonna come in here right now and choose singular. And then for singlets will say, okay, all single pages, no, wanted to split specifically on the front page. So I'm going to choose that one. And that is I'm gonna go ahead and I'll simply save and close. And that is it. Let's go ahead now and refresh. And I'm gonna show you something very, very interesting. All right, let me do a hard refresh. So here's a thinner line. You can see that we do have the menu items right here showing up. Oh, by the way, the hover effect that he can see, the dash apparent on the age menu item that's provided by Elemental pool, menu, menu element by default. So you can change that on the hover effect if you want to bore the manager here at now is that we no longer see the logo. We can see the menu items, but we don't see the logo. What is happening here? This is where I would like to introduce to you the concept of the Z index. Now let's go back in here. Very first of all, we move the background color for the header. We no longer needed. But take a look at this. I'm gonna go over to advanced. Right here you have this. Option but very, very important, very powerful called the z-index. I'm gonna give this one a value of two updates. Let's go back in here. Let's do a very hard refresh. And just like that. Now you can see the logo appearing. Board. Hold on a second. What exactly just happened? See this Z index value right here. Whenever you have one element, one section overlapping another section, you might want to be able to tell Elemental which of those elements you want to show first basically, which won't. You want to bring in front of the other? In this case, right now we do have the binary image overlapping our header. We want the header to be influenced so we can see the logo and the main menu. As such, you will have to give a higher z-index number to the element that you want to appear in front. Since we've given the header the Z index value of two. Let me actually go to the section holding our banana. So let me edit with elemental. Let's go to the navigator section right here, advanced. You can see right here that we don't have any value for the Z index for the section holding the banner. But if I came in here right now and I give it a value of three. Now you can see we no longer see the logo, we no longer see the main menu either. That's because the xin index value of this section holding the banana is now greater than two. But if I give it one now you can see we have the main menu and the logo. That's exactly how the Z index works. Now, a question you might have an, a very good question is, Alex, hold on a second. Before we gave the value of this index of two to the header. How can we still solve the main menu? But we didn't see the logo. I will be 100% honest with you. I'm not exactly sure why that happened. I'm guessing maybe there is some code within elements that always gives priority to the main menu to always show. Again, it might be something very, very simple that I'm simply missing. I'm not entirely sure on edge. Apologize for that, but I'd like to be honest with you. But just take it for what it is. Whenever you want to introduce kind of situation where you have one element overlapping the other and you want that auto elements behind the show in front simply give it a higher Z index value. One thing you may have noticed is the sudden whitespace that's not appearing right here at the very top. And this happens because elemental by default in many instances, we'll add a pattern of ten pixels around the elements. So one way to bypass these kind of issue, it's a simply edit the section that has the whitespace in this case right now it's my header. So let me go ahead and edit the elemental header. Gonna go to this section itself. So edit section and then invite here where you have the columns gap. I'm gonna say no gap, no gap at all. Let's update basically by saying no gap. We're saying, Hey, we don't want any patterns anywhere. Now, this will get read off the whitespace. But now note that because we've said No, no gaps at all. Now the column holding a logo no longer has any pattern between the logo and the top of our screen. So very simply just go to the column holding the logo. Go to advanced pattern right here, we just give it say, ten pixels of padding at the top. Updates that will solve the issue or incidences. So these are some of the very little annoying issues you might run into when using elemental and how to bypass them. But almost done. Let's go ahead and create the mobile header for our header for the front page rather. And is the exact same thing that we did previously. We're going to come in here right now, duplicate the entire section. And let's come out, come down here to the mobile header edit section. We're gonna go to style classic color of black. And then what do we need? What else do we need to do? We need to switch to the responsive mode. Go to mobile. And now right here, edit column, we're gonna say 50%. Do the same thing for the column holding the main menu. And then say 50%. We can edit the menu right here, aligned to the right. Maybe make it a little bit bigger. So let's go to style. Come down here to the toggle button. The size, make it a little bit big. For the logo as well. Go to style, max width, 100%. Yeah, we also need to do the show hide or options, so advanced. Let's go to the responsive. For this section and this section holding the logo and demand menu. We're going to go in here to Advanced and then responsive. I'm going to say hide on deck, Stop, Hide on tablet, but then show on mobile. Let's now go to the old original header, edit this section. Go to Advanced, go to responsive. Simply hide on mobile, and that's it. So let's go ahead and update. Hopefully I didn't forget anything that's come back in here. Refresh the page. Let's see what we have. Okay, so original ahead or I dare. And this is oblique view looking good. And then now this is gonna be the mobile view. And David is thus exactly how to do the exact same thing on Elementor product we did with the Elementor header and footer are plugin. One final thing before I close this video, let us go to the back-end. Now on the templates. I'm sorry, under the theme builder rather than our templates on a theme builder, this is where you will see the new header you've created. You can click inside to edit. Once again. Then if you want to change the name, it's very, very simple. You come down here to the Settings button and then right here, we can call this one the home header. We can call it home, home, the home header basically. And then we can give the order header the name of global. If you want to change the conditions for this plane, the head or maybe you want to use the same header on a different page. Down here, you have the save options, you click in there. Now here you will have access to the display. Our conditions option. This is where you can now go into, now maybe change to a different page and so on. And that is basically it for creating the homepage header, both on the desktop and mobile versions using Elementor Pro. Thank you for watching. I will see you in the next class. 27. Building the Contact Page with Elementor Pro: Illumina show you how to rebuild the contact page using Elementor Pro. And specifically we're gonna be working with the elemental pro form element. I'm gonna go to the backend. And first of all, I'm going to disable the WP forms plug-in we no longer needed. So I'm going to deactivate. And let's go back to the contact page. And obviously when they're gonna say any contact form anymore. But I'm gonna go to Edit with Elementor right now. Since of course we're using elements are pro, we do have the form element, which is absolutely fantastic. You will find it on the pro, you see right here form. I'm going to let me click inside here and actually remove this block because we didn't have the lipid forms anymore. But don't take any form and then just drop it on the Contact Us title. Just like with the WP forms plugin by default, you will have a very, very simple contact form that it will have three fields of name, e-mail, message, right here. These are the fields you can add. Another field like you click on Add Item right here where you have type, you will have different kinds of fuels. You can add day time. It can even add file uploads. So if you want your potential subscribers or customers to attach files to send to you, you do have that field. You can also integrate elemental with Google capture. And then you can use the recapture version one and version three in here for security. And then you also have like the honeypot and so on, not adding any additional fields. So I'll just leave these three. However, this is of course very subjective, but I prefer not to have the labels. I prefer just happened to place holders instead of each field indicating what kind of field that is. So I'm gonna go ahead and hide the label. So just have name email message. Now to edit the actual fuels themselves, you click inside each one specific sample name. I'm going to click on Name and invite here I can change the label itself, can change the placeholder. And of course we're gonna make it required. And then under advanced, you will have things like the ID as well as the short code which we will make use of very, very soon. Same goes with e-mail in here. It's required and then message of course all make the message if required as well. You can make this field is smaller or larger depending on your tastes, and that's it. Okay? In here you've got the input size for the actual impute for each field. You can make it small, medium, large. It's entirely up to you. You've got buttons. Do you want to make the buttons medium-sized, large size, but that's just the send button itself. You can change the text right here for the submit button itself, and so on. Now, this is where things get very, very spicy. Actions after submit, what happens once the user has clicked on Send? Right here? By default to actions have already been enabled. Collect submissions, which I'll show you in just a second. And then email, because these two are active by default, you have clicked submissions right here and then you have e-mail. Now collects submissions you would actually see in the backend. Let me just quickly show you. You will see in the backend, once people begin to submit the contact form right here where you have elemental at UCI submissions in here you could have submissions. And this is where you begin to see the person's name and so on, in fact, will perform an experiment very, very, very soon. But that's it for the submissions. Now, email right here. You want to receive an e-mail that somebody has submitted a contact form on your website. Right here, you can choose the email address to receive identification. Of course, I'm gonna put my own admin email light there. And then of course by default you have to subject new message from and then your website's name. You can customize this of course. Then the message will contain all fields. However, here you have the from email, from name you want to use or choose the data provided by the user. Basically the from email should be the e-mail, all of the user. What you want to do here is this, okay? You would go to the form fields, go to e-mail, go to Advanced, and then invite here, grab the short code. So copy the short code, come back down here to email. And anybody here from email. It was not simply paste the e-mail ID so that you can actually see the person's email and then from name as well, do the exact same thing, go to the Name field Advanced, and then simply grab the shortcut for the name field. Go back to e-mail and then provide here from name. Simply paste that. And then they reply to be set to the e-mail, of course, because you'd like to respond to the person's e-mail address. And that's it. You can add your CC, you're blind, you're blind, copy, and so on. You can add the metadata in here as well, such as like the page you're a real person visited, the date, time, and so on. Sin as HTML or plane. This is very, very, very subjective. It'll depend on your email service provider. If also got steps sentence lambda squiggly, show you what this is. If you go back to your form fields, maybe you want to create like maybe you'll form is actually very, very long for some reason and you want to break it down. When you're adding your item on the type, you will have step. Once you have step now you have next. So after the step you can then begin to add more fields again. So what happens is once they fill out the false fuels in the first section and click on Next. It will take them to the next section for the form, that's basically what the steps, as you can see, this is step one right here. And then you can see step two there on the right. That's what that is used for. That's your steps are Settings. And then you've also got the additional options like Hey, do you want to customize messages like, okay, the thermo sense successfully, you will get back to you in 24 hours, things like that. You have that option in here. But they'll let me forget going back to the actions after submit, you have many, Apart from clicked submissions, e-mail, you can have e-mail to you can you can redirect them to a separate page. You have a webhook. And of course, if you're using email management software like our Mailchimp, active campaign, you can connect them in here as well. You can connect them to Slack Discord, open provide a pop-up message as well. So you've got plenty of options to configure. Alternate turn. What happens once the user has submitted the form? That is basically it. Let us go ahead and close that one. And that's, I'm gonna go ahead now and simply updates. And of course, let's take a look at the new page right here. Oops, my internet is misbehaving. Yet again. My apologies. Okay. That's right Now you can see the new Contact Form built with elements of Pro Arte lemon. I'll show you an example of the submissions. I'm gonna pause the video and simply submit a message and then you will see the results in here. Welcome back. And as you can see right now, I've actually sent to contact forms, filled out to contact from one to seven browsers. One from John James and then one from Bob Billy at yahoo.com. Now, I should have pointed this out previously. For the contact form, you can change the name right here where you have the form name. So you can see I've just gonna have to change mine to contact form. And I noticed this when I send the first form from John gyms. You can see righted the form, Nemo's new form. That's why new form because we didn't change the name. So the second time I changed the name to contact form, submitted a new form from mobility and that's where it can now say that the fall now says our contact form. So that's basically it. You've got the IDs, you've got the page that the formal submitted in. And of course you can view the actual message itself. So you click on view right here. You can see the full name, the email, and then the actual message from the user and invited. You've got the additional metadata information when the message was sent, what browser was used, and so on. That's basically how the contact form with Elementor Pro Walks. Thank you for watching. I will see you in the next class. 28. Building the Single Post Template: Now let me show you one of the coolest things you can do with elements of pro and that is building a template for your single posts. Before I do that, let me just show you very quickly how you can rebuild the blog page. Remember we used the posts element from the essential add-ons for this page. Both elements are pro of course, you do have the elements specifically for displaying your posts. I'm just show you very quickly how it works. You will find it under Pro, this is it right here, posts. You drop it in there. And of course you can choose the skin number of posts, show image, height, image. You have all those options in there. You've got the query do you want to pull from posts are due on it, pool from a manual selection or pages. Would you like to include by term? This way you can now add things like categories, tags, and so on. You've got your pagination options. You could just try and options and all that cool stuff, but that is not what we're here for. Let me show you how to build the template first angle posts. Now let me pick one posted right here fashion in Istanbul. This is what we have by default. And you can see it does not look good at all. That's because the hello theme is the one that's been used to display this post. And it's very, very, very ugly now, I very specifically have made the content area for this post very, very long as you can see. But there's a reason for that. I'm gonna show you exactly why I chose to do that. Let me first of all go ahead and build the template for our posts. So let's go to elemental, I'm sorry, templates. And then right here, theme builder. And we're going to add the builder for single post right here, clicking there. No templates found want to create one. Yes, so I'm going to click on add new like they're of course with elements are poor. You will have access to a wide variety of templates. You can see them right here. All four single posts, so many, but I'm going to go ahead and close this. Let's build out our template. Now by default, since we're building the template for a single post, you'll have access to these elements under the single category. These are for your posts, so obviously won't display the post title, so I'll drop that in there for the post title. Now by default, elemental will pull in the latest posts to use as a sample when viewing the template content. If you let you change the selection, come down here to settings. Right here you will have the previous sentence, you click in there. And then right here, I can simply type in fashion. And instead will, because this is the one I want to use all choose fashion in Instanbul. Click on Apply and preview. Now elemental will use the content from this post for our sample. Okay, let me make a few changes. Inhalers make these and H2 aligned to the center. Let's make the text just a bit bigger. Maybe 58 pixels, 56 pixels as fine. Let's add some padding. At the top, 25 pixels, two pixels at the bottom as well. All right, What's next featured image? Let's drag that in there. Make this one f2. And of course you can see the featured image from the post-session and Istanbul. What's next? You do have the post info. You can drop that in there. By default, it will show the author the date, time comments. I don't want to display the author. I don't want to display the name and also the time, so we move those. It does leave date and comments. You can modify these two, of course, simply click on data as an example and say for example the icon, I can just go ahead and remove the icon, fill out one. You can add extra metadata, so you click on Add item. And then right here, you can do things like add the terms like the category and so on, costume and so on. All right, I'm gonna go ahead and close that. So we only have date and comments. Let's go back to our elements right here. Next time we're gonna add will be the post our content. So we're going to jump into post content down there, just below the information. Let me just confirm why this seems to be grayed out. I'm just okay. It is displaying in here we've got the post content very, very, very long or wide. What next? What do we do like to display? We can display the post navigation. We have posts navigation. Let's drop that in there. Now we have the previous post, the next post, of course you can style them as much as you want. And finally, we can add our post comments. So post comments right there at the very bottom. And that is it. This is going to be our template. Now, why did I make the content area very, very long. I want to show you how to make use of a very, very cool new element called the progress tracker. You may have seen this on some certain blog before where You'll have a bar telling you how much of the content has been consumed or how much content you still have to read before you finish the article. That is the progress tracker right here. So what I'll do is this, okay, I'm going to drop it at the top right here, just above the title. Let me just share how it works right now you can see the progress bar idea moving, we're moving. But the problem is, is that once we school passed the bar, we no longer see it. What's the point of having this by if you scroll down here and you didn't even see how much of the content is left. Well, let me show you a very, very cool trick. Go to Advanced. We're editing the progress tracker, by the way, goods to advanced go-to motion effects. Right here we have sticky. Say yes, we're gonna stick it at the top. What this means right now is that once we scroll, you will see that the bow will always be there. And you can see right now until we get to the very bottom, that's when the bar finishes. So that's exactly how to do this as a very, very, very cool effect. You can do that for the bottom as well. Which I don't think doubt would work because you will actually have to scroll down at the bottom air. No, it actually doesn't work. I'd never tried it. So just go with top. Go with top. And of course, on the style, you can change the progress call law. You can add a border, you can have a hide border radius, and so on. For the actual progress checker itself, the progress will always be relative to the POSTAR content. So switch this to post content and not anti page post content. You've got to check our types, so-called or horizontal. This is the circular style, which can see I don't personally like that, so I'll just go with horizontal. You can add percentage if you want. So it will say twenty-five percent, thirty three percent, and so on. You've got all those options in there for you. That's it. I'm gonna go ahead and now hit Publish. And just like with a template, you will have to choose where you would lead to display this particular templates. Let's add the condition now by default it will say all singular. Be careful all single hour refers to all single-page is included in your front page. So it's not all singular. Click on the drop-down arrow in here. Now you'll see posts. Just simply choose posts. That's it. That's it. That is all you need. Gonna go ahead and now click on save and close. And that's it. So let's go to the front-page first, just to confirm front-page as go to articles. And let's pick, let's say the majestic city of Glasgow will have to refresh this page. And there it is. Okay. Scroll down. Scroll down. Now obviously the scroll bar moves very, very quickly because the content area here is very, very, very short. As you can see, it's just one paragraph or two paragraphs, basically. Maybe not the best example. Let's go with the fashion in Istanbul. Again, I'll have to refresh this page to clear the cache fashion in Istanbul. And they you go, that is the template for our single posts. We have the TI tool, we have the featured image, we have the information about the pose that data was published, number of comments, the content area, the post navigation for the previous post and the next post. And of course the comments section. So that's how to build a post template for your posts using Elementor Pro. 29. Elementor Pro Tips: All right, so we're practically at the end of the course. And before I conclude, lambdas give you a few more general tips and advice on how to work with the paid version of elemental. Now you obviously have access to so much more pro elements which we are unable to cover. But there is one which I really should have added in the single post templates, and that is the share buttons. You will find it just below table of contents by an extra countdown and block codes, the share buttons. What this does is that it allows your users or your subscribers to basically share your articles on social media. So when you drop that in there, you can choose the platforms. Maybe you want them to be able to share on Facebook, on Twitter, or even via e-mail. You'll do have that option in there. It's very, very easy to use, be sure to check it out. Now with Elementor Pro, you also have access to things like saving templates and saving widgets or elements as Global. An example here is this. Okay? Let's say for example, for this entire section, let me use the Navigator button right here. For this section containing the banana as well as the headline. If I wanted to reuse this section elsewhere, I could right-click and then simply save as a template. I save it as a template. I can give it a name, let's say the global bana, just to reuse on another page, I can save the page. And it's gonna be under templates in addition to the headers and footers that we created before. But now take a look at this. Okay, if I wanted to reuse this template elsewhere, let me go ahead and view this page and open up another page. So say for example, the contact page. If I wanted to reuse that by not here, simply go to Edit with Elementor. Then make use of the template element, which you will find in pro at the bottom, I believe up if I'm not mistaken, it's right here. You'll see template right here. Just simply drag job that template in there. And now it will ask you to choose the template that you want to use, since we called ours global banner. Now you can see global by now. I've added it and there you go. So now you have the header idea or that the banal idea with the headland where travel means adventure. So that's how you can reuse sections over and over across your website. But we could also save single elements or even columns as global widgets. As an example, Let's say I wanted to reuse, let's say this particular, our call to action or idea by this deals and packages. I'm going to click inside. And I could right-click on the dose and packages element itself and then divide here you will see save as a global. Click on save as a global. And I can call this one the Call to Action widget. Just as an example, I can save that. Another thing is if asked to go to another page again, let's say the contact page one more time. And I wanted to use that exact same elements. All only to do is to go to global right here. And now you can see that the calls to actually read it is now available. I can simply click drag and then just drop it anyway, I want to drop it into, so just small little difference sections. You can say them as templates and we use, but the actual elements themselves, you can use those. You can see them as global widgets. And we use them across your website as much as you want. So these are other additional features available for you with elements of Probit, again, you have access to so many other very interesting elements, slides, gallery, even the login elements. So you want to customize your login page With Elementor Pro. You do have the element for that animated headline applies list. 30. Course Conclusion Elementor: Well, that's it. We've got to the end of this Courseware are showing you how to build a fully functional website using both the free and paid versions of Elementor. It's been a pleasure. I hope you've enjoyed the course if you did, please do construct, given it a five-star review, a written review, let people know how much you enjoyed the course plus all. So just in case you haven't bought element of probe, which are plenty to do so. Please do use my affiliate link. What that means is that I will get a small commission. When you use my link to by Elementor, it's a great way to support me and support what I'm doing. Here. Finally, the very next section, we'll content updates to the course, our special topics, special lessons. So if you're interested in learning more about elements or be sure to check out. The very next section are down below. My name is Alex, has been a pleasure. I hope to see you in one of my other courses as well. I think as much if everything Questions or comments about anything covered in this course, of course, always feel to reach out to me. Reach out to me. More than happy to answer all your questions, chairs, and all the best. See you soon.