Elementor - Build Amazing WordPress Pages With No Coding | Alexander Oni | Skillshare

Elementor - Build Amazing WordPress Pages With No Coding

Alexander Oni, Web Developer & Cyber Security Expert

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
48 Lessons (4h 34m)
    • 1. Elementor Promo

      3:06
    • 2. Introduction to the Elementor Master Class

      2:29
    • 3. Connect with Me

      3:01
    • 4. Siteground Special Offer

      3:37
    • 5. 1 Month Free Trial Walk Through

      4:29
    • 6. Section Preview

      1:58
    • 7. Elementor Initial Setup

      1:40
    • 8. Elementor Settings

      6:10
    • 9. Setting up the Elementor Homepage

      3:56
    • 10. Setting up the Global Values

      6:00
    • 11. Adding our First Section

      11:10
    • 12. Adding the Who We Are Section

      7:28
    • 13. The Navigator and History Tools

      2:09
    • 14. Creating Advanced Structures

      4:33
    • 15. Elementor Challenge 1

      0:56
    • 16. Adding the Services Section

      8:32
    • 17. Adding the Why Work with Us Section

      9:31
    • 18. Adding the Meet the Team Section

      6:15
    • 19. Adding the Our Clients Section

      3:56
    • 20. Adding the Testimonials Section

      5:50
    • 21. Working with Margins and Paddings

      6:40
    • 22. Working with the Spacer Element

      3:51
    • 23. The Number Counter Element

      2:56
    • 24. Creating the Footer Section

      6:49
    • 25. Creating the Header Part 1

      10:52
    • 26. Creating the Header Part 2

      4:30
    • 27. Responsive Clean Up

      7:44
    • 28. Page Templates and Blocks

      5:10
    • 29. Finder Tool and Round Up

      1:58
    • 30. Introduction to Elementor Pro

      4:35
    • 31. Affiilate Promotion

      1:09
    • 32. Elementor Pro Section Preview

      1:27
    • 33. Recreating the Header

      10:50
    • 34. Adding an Animated Headline

      4:21
    • 35. Adding a Countdown Timer

      5:25
    • 36. Recreating the Services Section

      7:16
    • 37. Recreating the Why Work with Us Section

      8:06
    • 38. Recreating the Contact Us Section

      8:19
    • 39. Conclusion SkillShare

      1:07
    • 40. Updated Section Preview

      2:21
    • 41. Elementor Themes

      5:41
    • 42. Styling the Mobile Header

      6:39
    • 43. Building Popups with Elementor

      16:52
    • 44. Working with Page Templates

      6:58
    • 45. Working with Global Widgets

      2:57
    • 46. Working with the Portfolio Widget

      4:22
    • 47. Building a Post and Archive Templates

      23:24
    • 48. Working with the Font Library

      4:37
55 students are watching this class

About This Class

** UPDATED MARCH 2020 **

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.

Transcripts

1. Elementor Promo: Well, hello and welcome to this course. Elemental build. Amazing. What press pages a bit civil code in My name is Alex, and I'm going to be your instructor. Now, if you've never heard of Elemental, it's actually one of the very best page buildup Logan's for what press. And with this blogging, you can build amazing weapons websites without the need to coat. So in this course, you're gonna master the art of using this particular plug in. Now, this course is divided into two main sections. In the very first section, we're going to make use of the free vision of elemental to build a full one page website for a fictional company known as the white Hat Hackers, The white hat Hackers air basically cybersecurity experts who helped companies fight against cyberattacks and hackers. And here is the website we're gonna build using elemental. You can see right now that we've got the main menu. We've got the logo. We've got the video played in the background have got the main headline saying, Don't get hacked. I'm going to show you exactly how you can create sections like what is the company? What they stand for. We're going to create the services section. I'm gonna show you how you can walk with columns and sections. To achieve this. We're gonna build out the why Walk with those section as well. We're gonna build out the team section. We're also gonna walk with Elemental to create the our clients section. I'm going to show you how you can add testimonials and also how you can add a contact or section as well. Now, in section two, off this course, we're gonna use the paid vision of elemental to now further enhance both functionality and design off this particular website. So with the paid vision of elements, I'll show you how you can add an animated headline, which you can see right now. This is much better than the static headline that we had in the first trip site. So, using the pay division of Elements, I'm going to show you how you can have a countdown timer. It's there. You can see it, but trust me, it's that but going to redesign the service sections now have this new kind of design where when you hover over the image, the image slides to the right, and then the text containing the actual service will slide in from the left. As you can see, we're gonna recreate the wild walk with a section will now have this image in the background It zoom in in. I was zooming out and you will also have the text showing Oppa's Well, we're going to recreate other sections as well. And then finally we will be created Contact exception to now contain a Google map as well as alleged contact form. So by the end of this course, you'll have mastered how you can use elemental to build any kind of website that you have in mind. I will regularly update this course so that it's fresh. It's updated using the letters features off elemental. So don't you worry about this Cosby now dated, I promise you I will always make sure this course is updated. So if you've ever wanted to learn how to use elemental, this is the perfect course for you. I am so excited to show you how I can use this plug in, and I hope you will in the course today and help this year on the inside. But by 2. Introduction to the Elementor Master Class: All right, so welcome officially to my elemental master class and let me just say thank you so much for enrolling. And I do believe that by the end of this course, you will have learned how to use elemental to its fullest capabilities. Now, this course is divided into three major sections. In Section one, we are going to cover the free version of elemental. I'll walk you through how you can actually build a decent websites using the free version of elemental. And then section two is going to cover the paid version of elemental. Obviously with the paid version of elemental, you get access to a lot more features is a lot more powerful. And I'm gonna walk you through hike and make use of this additional functionality that you get with the paid version of elemental. Let me mention that I am an affiliate with elemental min. And if you do decide to buy the paid version of elemental using my link, I will get a small commission. So please, if you'd like to support me, support what I'm doing, please use my affiliate link. I'll provide a link for you later in the course, so please take a plea. So please do use my link to by the provision of elemental. Section three is going to cover the updates to elemental. And as you can imagine, Elemental is constantly improving their constantly changing new features, adding new functionalities. So Section three is going to be where I Coval all these functionalities. So if you notice that, ok, some things have changed between the time you bought this course and how elements are, is you can check out section three. Section three is where I'll have everything covered for you. If there comes a time when I do need to redo the entire course, I will do super for now. There is no need for me to do so because the interface is still pretty much the same, they're just a few additional functionality that have been added since I made this video, since I made this course about that. So I cover all of those in section three. Also in section three is where I make video responses to questions posed by my students. I've had students who had very peculiar issues. They asked for my help, animated videos describing how they can solve those issues with elemental. So even in a situation where you have a particular problem that's not been covered in the course, feel free to message me and if I fill in it and to make a video about it, I will make a video describing how you can solve that issue. So please feel free to message me and let me know what your issues with elemental. Ah, so that's it for the formal introduction to the elemental masterclass. I sincerely hope that you will find this course useful. And lambda say thank you once again for him to Olin and without Was any more time. Let's get started. 3. Connect with Me: thank you once again for enrolling in the course, and I wanted to use this opportunity to official introduce myself to you. Now, if you're watching this video and you notice that the bagman is different, I look a bit different from the rest of the course. Do not be alarmed. This is because this particular video is very, very new. It's a lot newer than the rest of the videos they're gonna watch in this course. So that's why things look different. But I wanted to make this video to introduce myself officially to you and also provide you with several were upset that you could learn more about me or get in contact with me. So I do have a YouTube channel. It's called the Web Monkey, and there it is right there. So if you're interested in learning more about what press and letting extra tips and things like that, I do have a channel for that. You can subscribe. Hit the bell so that you notify whenever I upload new tutorials. I applaud Eli's once every week. Try to so if interested, I do have YouTube channel for you. I am also on Facebook. I do have a page on Facebook about Bunky on line again, just like YouTube by post tips and things like that. So if you're interested, you could like the page on Facebook and follow me right there. I also I'm also on LinkedIn. So if you're each connecting with me on a professional level, I'm on LinkedIn. Alexander only that's me. Simply send me a message saying that you're a student of mine and then police tell me the course you enrolled in, but also the platform you're in accordance Whether you're involved in my course on your enemy on skill chair or non profit platform. Do let me know I'll be more than happy to accept your invitation to connect. And speaking of my own personal platform, it's called Bad Monkey Academy calm. I do have similar courses in there, but you would find also on skill share or you to me. The only difference is that on Lemack Academy, you're not only my student but also my customer. So students here to get a bit more for special treatment from May, plus the courses you'll find inherited to have more content than what you would find on you , Timmy or on sculpture, so it's entirely up to you. But if interested, be sure to check out my own personal platform. I also have a blawg monkey. Orlando. Come where again? I write articles and articles on topics like What process? Your security plug ins, themes, things like that. So if you're interested, be sure to check out the Blawg. I also do have a newsletter to get here. All you need to do is to simply click on Animal of the blogged articles, and then at the bottom you will find you can subscribe to my newsletter. I send out newsletters for more tin, my new courses providing with tips and things like that. So if you're interested, be sure to check it out. And then finally, I do have my own personal upside. Alexander only dot com. So if you're interested in any more about me, how I became a course create or things like that website is there for you. So that's it. Thank you so much again. All of this is entirely up to you. You don't have to do it. But if you're interested, these are the websites where you could follow me or get in contact with me so that I think if watching now, let's get on with the actual course itself. 4. Siteground Special Offer: All right, so before we begin with the course, officially, I wanted to introduce to you and offer that you might find very interesting. I've been able to partner with side gone. If you don't know who they are. They are in my humble opinion, one of the very best web hosting companies in the world support us. Amazing. They have wonderful features and they are willing to provide you with a one month free Trojan, which means for one full month, you get access to Saigon hosting and you don't have to pay a dime. It is so free that you don't even have to provide credit card details or anything like that. You fill a form and you get access to Saigon hosted for one month. The very next video in this course is going to walk you through all the steps. I'll show you how you can get started and how you can also install WordPress on the domain that they will provide for you. So I have taken care of that for you. Now. Obviously, this is not going to be for you if you plan on working with what person locally on your PC or if you already have hosted with the company that you're happy with, then you don't need citing Guang bodybuilder for free hosting. Or if you're not happy with your current hosts and you're looking for something better. I can recommend side because they are simply awesome. Now one thing I should mention is that because this is going to be a free each file there is setting features you will not be eligible for. For example, you will not be able to create a new domain or create a sub-domain, things like that. But nevertheless, they will provide you with a temporary domain with which you can do plenty of walk with. Now, if you do decide to become a paying customer after one month free trial is over. I do have a full tutorial on my YouTube channel, The Web Monkey. It covers all the features that second offers you and I cover everything from security to speed to email accounts to backups. It's one hour long. I cover everything you need to know about site go and how to make use of the features that they provide for you. So I have taken care of that for you as well. Again, I'll provide the links for you into resources that is especially if you have to click on, that will take you to this particular page. As you can see right now, it's a special offer for the Web Monkey students. That's you. This is exclusively for my pain. Are students. I should also mention why not? That I am partnered with cloud ways now Cloud ways is a different company from Saigon in that they offer exclusively cloud hosts. And now sad gone offers you something called shed hosting, which is less powerful but still powerful. It's less powerful than cloud hosts. And cloud hosting is basically you host your resources on the cloud. It's much faster, it's much more powerful. This would be for websites getting plenty of traffic and it's of course, a bit more expensive. But I am potent with them as well because they're awesome. And I do have a special deal with them for you. If you sign up with my link, you'll get 20% off for the first two months. It's Sunday, not that I would mention. Now, as at the time of the making of this particular video, I don't yet have a tutorial walking you through how you can make use of all the features that cloud hosting offers you. It is high on my list and I will try to get video don't as quickly as I can. But I just thought I would mention it just in case you do eventually decide to move from shadows tend to cloud hosting. And you have an amazing deal for you with Cloud was I'll have the link, of course, in the resources as well. If you have any questions about this, do let me know what we're more than happy to answer your question. So of course, check out the very next video where I'll walk you through how you can get started with the one month free trial from site ground. 5. 1 Month Free Trial Walk Through: Welcome back. So this video is for you if you've decided to go with the one month free trial with Saigon, now, I am going to provide you with the link. And depending on where you are taking this course, you will either see them the products section or maybe even in the resources section. So be sure to check out the link when you click on it. This is the homepage that you're gonna see. It says special offer for the Web Monkey students, that's me. So one month free trial, you click on sign up now. And what's going to happen here is that you'll be taken to this page where you will have to provide your username, your password, your country, where you live, things like that. So let's just okay, so here's the page. So basically your email password, your information. And then over here, very, very, very important, where you have data center goal with the datacenter that's closest to your physical location. Because this will make it faster for you to access your website when your datacenter is closest to where you are physically. So choose the appropriate data center right here. And then basically you just go ahead and click on Painter. Oh, don't forget to check the box that says I confirm I've read the terms of service, which I'm sure you haven't. I haven't either. Nobody has, but just like the books and the ng-click on pay now and when that happens, you'll get an email from a side going to welcoming you and you'll have a button that telling you to click on your cleaned area. Basically when you click on a plain area and you access your account, this is basically the homepage are going to see. Now what you wanna do is you want to go to websites up here. And what's going to happen is that automatically set when we create a temporary domain for you? Mine in this case, I have now is CALP dot SG.edu dot site. And this is the one limitation with the free trial. You can create a real domain or you can transform it. You can transfer a domain from another hosting company to set gone with the trial account. All you can walk with as a temporary domain, but still you're getting a one month free trial. So to install WordPress, what you wanna do is you want to click on Cite tools, okay, now this will take you to the cPanel and then from here, you go over to what press. You click on install and manage. You click on select WordPress. And then down here, basically, all you need to do is first of all, uncheck this box that says the WordPress data. You don't need that one. Uncheck that box. And then in here, provide a username that you're going to use to login to your WordPress website. Very, very important, and then provide a password as well. So now let's go ahead and provide a very strong password. And then I'll also provide my email. Don't check the box that says Install WordPress multi-site, you don't need that. So right now, if I just access the temporary domain, let's just go with it and see what we have. So if I go here, you can see basically this is all I see. Awesome sets into making. This is going to change very, very, very soon. Let's go back in here. And What's going to happen is down here, I'm going to click on install. Okay? So it's gonna take maybe two minutes or there about for what first to be installed on the temporary domain. So just let you know if you're gonna get yourself a real domain and you get yourself a real hosts in account. This process is a little bit different on you do have to do some extra things, but, you know, that's that's that's for later. So right there you can see what place has been installed. And all I need to do now is to click on view sites. And let me refresh this page. And there you go. So now you can see what place has been installed. So from this point on, you can now go to the video where I talk about access in the backend of WordPress. But let me stress that if you decide eventually to pay for set gung-ho soon after the one-month trial is over. And you wanna get Giuseppe will domain name. I will have those videos covered and how you can go about installing WordPress on your website and also kidney, so the domain name and so on. So be sure to check out those videos. But this is basically how you can install WordPress using the free trial. And let's now continue with the rest of the course. 6. Section Preview: All right. Welcome officially to the course. And before we get started, I wanted to give you a very quick preview over the waves that we're going to build using the free vision off elemental and basically, you can see. Right now it's a website for accomplice known as the white Hat Hackers. They basically specializes in cybersecurity, the whole objectivist to help companies our prevent cyber attacks. So we're gonna build out this full one page website. You can see the header has the logo transplant logo. We have the main menu in there. We do have the men headlines saying Don't get hacked. We have a video planet background. So I'm gonna show you how you can, you know, do all of this using elemental world and create a special section describing what the company stands for, who they are. We're gonna add this image over there to the left, will then create these services section where we're basically advertised that we main kinds of services that the white hat hackers offer to the potential clients. But also gonna create a why walk with us section. Let me let me, in fact, refresh this page. So you see the animation that comes so you can see the animation of what you have, the four our reasons, like comin in from the left and right. So I'm gonna show you how you can create that kind of animation. We're gonna create the myth of the team section Israel. Every business website typically has a mitt that seems section where they'll talk about most of the key staff members, such as the CEO to CEO on so on. So we're going to create that using elemental. Well, then we want to create the our clients section. Of course, every business would like to advertise to the potential new customers the previous customers that they've walked with. So we're going to create the our clients section also gonna have a customer testimonials section as well. I'm gonna show you how you can add this number counter. And finally, we're gonna have create the Contact us section as well. So I'm really excited to teach you this. And, uh, let's get started 7. Elementor Initial Setup: Oh, but before we begin this incredible journey towards learning about elemental, I wanted to give you a very quick preview off my current set up. Right now, I do have my site called the White Hat. Hackers don't test, Competed will come. And this is basically a fresh installation of all Chris. I don't have any pages. Zero pages for posts. I do have one post, which is a sample post that Saigon will create for you if you choose to host with them for plug ins. I only have the elemental plug in installed. An active. You will note that I also have the element of pro, which is installed but not active. Like I said, we will build the website first using the free vision of elemental and then proceed to use the pro version so you can go ahead now and simply download in. Stolen activates the elemental plug in. Over here, you can either go streets to what President Ogg for such bargains elemental. Or you could just go tell mental to comment down with the free vision off the plug in. Now, in terms of themes, I will be using the 2019 theme But to be honest in this course, the thing is not gonna matter. It's not gonna matter if using the twin 19 theme or the 2017 2016 theme doesn't matter because we're gonna build the website purely using elemental. We might use one or two additional plug ins to add some functionality, but in terms of themes, it's not gonna matter at all because again what everything we choose to walk with, it's not going to play any role and the set up and the design off our war press website. So that is that join me in the next class wearable now begin to officially walk with elemental. 8. Elementor Settings: before we begin building out content with elemental. I wanted to walk you through the general settings will quickly. So when you install elemental, you will see the tab in here that say's elemental and you have access to all this tabs. The very 1st 1 here is my templates. Now, with elemental, you have the ability to either create your page templates, which can then save and we use over and over again. Or you can also import templates. We'll take a look at this a bit later. You've got the settings, and on the general, you can choose the kinds of post types you want elemental to have access to. Typically, you want to choose every available option in here. You can also choose to disable the colors and fonts that elemental provide if you want to stick with those that your theme provides so you can check this two boxes of. But like I said earlier, we're not going to making use off any themes, settings or options. We're gonna be building outside primarily with elemental. So I'm not gonna check any of these two boxes, and then you can also opt in for usage data tracking if you wanted to on the style in here , you can set major changes as to how your work that will look like. So you've got the default generic funds, which means if you don't choose a particular kind of fond family for a practical a piece of text, son Saref will be the default will be used filthy to come in here and add your own chosen funds. The content with again you can determine how wide the with off diversity will be in here. The default is 11 40. I'm going to stick with that. And then, of course, you can choose the space between widgets. And if you're into CSS, you can choose the what kind off selector your stretch sections will fit to. You can also choose a particular class for your page title sector if you wanted to, and then for responsiveness, you can choose the breaking points for your tablet and mobile. Don't you worry. If you don't understand what this break points exactly, I'll talk about them a bit later, and then you also have the option of opening your image links in a light box again. Don't worry. If you don't know What a lead boxes. I will show you exactly what that looks like. A black box is actually pretty cool. Sold. Recommend you keep this. Our check box ticked. Okay, so that's it for the general are a beautiful style under advanced. The only thing I wanted to show you here would be the switch, and it'll load on. Method by default is disabled, but he can choose to enable it. And you'd only want to do this if you have in some sort of difficulty, technical difficulty that is using elemental. You can switch this to enable and you will be provided with setting information and that information you can provide either to your Web hosts or the developers off elemental. So that's it on those settings, not for world Manager. You can determine who has the ability to edit pages post content with elemental. So if for some reason you don't like your contributors, you can come in here and simply say no access to the editor, and your contributors will not be able to use elemental on your website. So that's what we will manage. It will do under tools. Most of this stuff here is pretty at fan stuff, but you've got something there called the sink library. So what happens here is every day your plug in will automatically try to sync with the elemental library. And elemental library is basically where all the futures and little updates of elemental are in. So there is a new feature that's been added, a new kind of two that's been added to their mental library. Your plugging everyday will sink itself so that it can import that letters change. However, if for some reason you are reason against time and you need to get the letters vision off elemental or letters to from elemental as quickly as possible, you can come in here and medically sink your library. But again, I don't know why you would ever want to do that right on the replace. You are well in here if you're changing the address. If your website you can come in here and do that, however all strongly commend that you make it back up off your database. Before doing this, you've got something called the Vision Control, which is an excellent excellent to provide of elemental should, in case you've updated to the little vision of elemental. And for some reason that update ends up waking your website. You can come in here and go back to the previous vision off elemental. And I think this is just fantastic, really, really fantastic Tool. Now, over here, you can also opt to become a better tester if you're not familiar with this concept, Typically, whenever developers of a plug in our walking on the new version of the plug in, they might want to release the better vision to people so they can test and provide feedback. So if you're feeling bored or you a geek like me, you can choose to opt in and become a better tester, and you will be notified whenever a better vision of the plug in is available for you to spend. Time are testing out. You've got the maintenance mode, and in here you can actually choose to provide a coming soon or website on the maintenance are page, and you can come in here and shoes those two and then when you choose one of them, you can then choose who has access to this particular page, but who has access to the back and you can actually see the real content off the website. But to actually enable this, you need to create a template. Don't worry. We'll take a look at this a bit later in the course as well. And then finally, we've got the system info again. Most of all, this stuff is technical Jagan's, and you might just only need to provide any of this information if you're trying to troubleshoot a particular problem. And then, of course, you got to getting started Knowledge Base, Yellow Yanagawa and then custom forms. You can add custom funds, but that is only available with the pro vision off the plug in so well, that is it for the general settings and tools with elemental. Let's not begin to build out contents using this fantastic plug it 9. Setting up the Elementor Homepage: let's now create our homepage using the elemental plug in. Now you can either just go to your dashboard and click on the create new page under the elemental section. Or you can simply go to pages click on add new and with elemental active You will see this big blue bolt into say's edit with elemental clicking there. And this will take you to the elemental into phase. And okay, Okay, okay. So right now you can see that my page title has been named elemental Hashtag 11. For some reason, yours may be different. Doesn't matter. But this is basically the elemental interface now on the elements over here. This are basically the building blocks which you can use to our create content on your page . So you've got the basic elements. You've got the general elements as well. And then, of course, you also have access to the ward press widgets, and naturally you will have more access with the pearl vision of the plug in. But the basic elements and general are more than enough for you to create some really awesome looking pages. Now, down here, you will notice that we have these gear button I'm going to click on the gear button right here. It's for settings and in here. This is where we can now add the page title. So I'm gonna call this home, All right? It's gonna be the home page. The status will live it on draft nor featured image. I'm going to hide the title as well. We don't need to display the title. And now in here, under the page layout, you have access to three different layouts. You have the default layout, you've got the elemental canvas, and then you've got element of full with the difference between this too, is that with element of full with you're basically going to include the header and a footer from your theme. However, you will be able to create content goes full with on your website using elemental but with elemental canvas. We are not important. They had a photo from the theme which is going to start off with a blank template. And that's exactly what we're gonna do. Because remember, I said we're gonna build everything using elemental, so I'm gonna choose the elemental canvas, and I'm simply going to go ahead now and publish the page and it says who? A. You're looking at his life. Have a look. We can either click on, have a look or click on this. I right here and you can preview changes. So this is exactly what you should see. Right now there's big, wide, empty screen, and this is exactly what we want. Because, like I said, we're gonna build everything using elemental before I round up this video. Just want to give you a very, very quick tour off some of the options in here. You see this button right here? The one with the circles with the nine circles, This would always take you to the page. Well, you can access your elements and then this one right here, the one of those like a menu. With this, you can choose your default cause and from sports, you'll take a look at never next our class. But from here, you can also exit to the what press back. And I know you probably might want to do this every now and then. Go to your backhand, make one or two changes. So this is where you would be able to access your our wordpress dashboard. So that is it. We have successfully created our homepage and before we actually round the suppers, go to settings, go to reading and make sure that we have set our homepage to display the home page. Let's save changes. Make sure this is actually walk in and cook. All right, so our homepage has been set to the home page with no content German. The next vote in the very next video well will now set our default values. 10. Setting up the Global Values: What we're gonna do now would be to set up a global values. And what I mean is we can set default fund families, full architects, and we can also set default colors of our text, which will be walking with. So question might have here is why set up global values? What is the advantage of this? Well, the advantage here is dead. Once you said global values for your phone family and your colors, elemental will continually use those values for the specific text that you've said. Those values too continously over and over again. When I mean here is say, for example, you set your H one to be a particular from family and in particular from color. Whenever you add an H one tag on your website, Elemental will automatically use that phone call. Oh, and family, so you don't have to constantly go to all your H one tags and said the color there said the family there got another H one tag and repeat the process. So global values just's is just you, adding your values once and for all and elemental using those values over and over again. You can always, of course, choose to change those values. Change is a global follows. Or you could just change the individual values for specific tags when you want to. So to do this, I'm just gonna click on the edit with Elemental Link right here and just go straight to our elemental into face. So what I'm gonna do is I'm gonna click on the menu button right here, right click in there and how in here we've got on this style, we've got default collars. All right, so I'm gonna click in here. So over here right now, by default, you've got this four colors which are used for your primary secondary texts and an accent primary will simply mean your major H one and H two tags. Secondary, I believe will be h three h four till h six and then text refers toothy actual text of your main content your body text and an accent could be used for things like lists. I think headers for your are corden styles and someone. So what I'm gonna do is I'm gonna choose this pallet wide here. These one you could choose any kind of politics world gold with your design. So all you need to do. Like I just don't just to click on any of them. And then you cannot begin to change the actual colors on the inside. So, for example, I want to change the primary color over here. I'm gonna changes over here. Teoh, these vision of challenge, I like this particular color. So I'm gonna click out site now I'm going to do the same four secondary as well. I'll paste up color right there. Click outside editing for the actual body text. I'm gonna go with pure white if f that's for White. And then for the accent. Honestly, actually, haven't decided. On what? Call on a gold with this one. I guess I'll just go with the same orange for now. I could always come back here and change this. Right? So this is basically my color palettes. Not the most. Declarative is just two colors orange and white. But this will do me just fine. I'm gonna hit apply for that and then going to go back in here, go to default fonts. Now I am by no means on experts Web designer. I can build up sites, but I'm not exactly the best designer out there. But from what I've learned from most weapons that has evoked with is that you typically want to go with two different fund families One for your actual contents, your text and then one for your headers. Right? So probably headline I'm gonna go with the rail way. I'm gonna go with railway for the primary headline. The weight, of course. The 1st 2 How bold. It's going to be a will Stick with 600 for now. Ah, Secondary headline. I'm going to go with railway Aziz. Well, all right. Stick with the 400 for the wait. I think that's okay. Body text. Now I'm gonna go with monster vets for this one. I'm gonna go with Monserrat. Weight is 400. Cool for the accent text move. Consecutive a bottle, like changes a bit later. But this is what I'm gonna go with for now. I'm gonna hit apply, and that is it for our fun. So let's go back to the menu and we've got the color picker over here. And this is where you can choose the colors that you want to walk with whenever you're adding text to your content. So you can choose whatever color palettes are. Suit your fancy, going to go back and ah, well, that's pretty much it for the global collars and funds. We've also got the global settings, and this is exactly what we saw. If you are videos ago, but you can choose your content with choose the default generic fonts and so on. What else do we have here? We've got the dashboard settings. They want to go back to your back, and, as usual, this is where you would go to you. Convey your page exited dashboard, and that is pretty much it. Now, unfortunately, we can't set universal background Kahlo's or back on images while pages. But we can set background colors or even images for our individual pages such around this video. I'm going toe add the black background specifically for our homepage, and to do this, I'm gonna come down here where you go to settings for the page and I'm going to go over to style and another style. We can choose to different kinds of backgrounds. We have the classic, we have the greedy, and I'm going to go with a classic and then we can choose an image. All we can go with a call. I'm gonna go with the color. And of course, I'm going to go with black and well, there you go with edit the black Pagan cults homepage hit updates. Let's take a look at what we have now from the front hand and that is it. All right, so now we already to begin adding content to our website. 11. Adding our First Section: Okay, The moment of truth has arrived. Now we're going to add content to our website is an elemental and we're gonna add would be a Hedda with some text and in the background they're gonna have a video plane. Now we're going to ignore the actual real head off for now, which would contain the logo off our website and quite possibly also a menu will ignore that for now. We'll added much later, so let's just go ahead now and add the text and the video backgrounds. I'm gonna click on edit with Elemental and of Right, So this is what you are going to see. All right, you're gonna see this black background and going to see in here where you can drag a widgets into this particular box the way the whole thing works here. Is this all right? Basically, you've got your elements to the left, which you can drag and drop. So you have different elements, like one for an image, one for video button heading, and so one, it's What I'm gonna do right now is I'm simply going to drag the header and I'm going to drop it inside off this particular section gonna drop that in there and there you go. So by default, you're going to have some Texas and add your head in text here. I wanted to pay very close attention to what we now see on the screen. Over here in blue, you can see we've got three different buttons. You've got one that stays add to section one that stays, edit a section and then another one that stays. Delete the section inside you're going to find in kind of like dockage gray. You will see this blend that stays at it. This is for the column. All right. And now, over here, to the right, you will see another blue button with like a pen. This is to edit the actual text. So the basic structure off an elemental page is as follows. First you have your section, and then inside of that section, you're gonna have a column. It is now inside off the coma. You'll now have your element, whether it's an image video or some text. Now it's possible to create more advanced structures by simply dividing dissection into several columns and then inside of those clubs have even more columns or in the columns and then finally, in those inner Columbus, you couldn't have your elements. I'm gonna change the default texting here right now to don't get hacked. Okay? All right. So for our head on the content, we have access to a link. We can have that link specifically for this piece of text. We can change the size at Attacked India LTD wanted to on the style we can change the default text, call off orange and give it a very specific color. If you wanted to are, we could also changed the topography as well. Make changes to the default fund family, which is a boon to but we've set full are head as we can change the size, the weights, transformation style and so on. You have access to all of these wonderful options. And of course, you can add a text shadow and then blend mode. I will take a look at this much later in the course and then under advanced, you have access to things like margins. Patterns are entrance animation, which we will take a look at in just a moment. You could also add a background two types. You can either go to classic. They can add a bag on color specifically for the text, or add an image you can even control. What happens when you hover over this particular text can at border as well responsible. Take a look at this a bit later, right? That's it for this particular text. Let's add the video to our background now. And to do this, I'm gonna click on the button here that says edit section. All right, Now for the section we have three different tabs. We have layout, we have style. We have advanced under layout. You can control how wide you want the contents off this particular section to go. Now there is an option in here to stretch the section. But I don't want to go into details about this. What you should concern yourself with are the two options in here where you have boxed and he got full with with box. You're basically saying you don't want the with to go fool. You don't want the contents of the section to go full with you want to keep it that they controlled with. In such an instance, you can come in here right now and indicate how wide you want the section to be or you could simply go with full with. And in this case right now, you're basically saying, I want the contents off this section to extend to the ends off my screen and you can control the Columbus Gap will take a look at this a bit later. And then for height you can set they had to fit the screen or give it a minimum height as well. Content position. You can position the content either in the middle, the top or the bottom. And on the style, this is where we're going to add off video. No, not the for the bad gun type. You can go with the classic, which would be a color all an image you gotta Grady int. But now you also have a background video click on back on video, and in here it stays YouTube link or video file. MP five's recommended, so you can either add a link directly from YouTube vim you. But if you have a video in your media library, well, it's very easy to add it. I have one in my media library, so I'm gonna come in here right now. Click on the menu button and I'm gonna click on the dashboard settings. This will open up a new tab. We're gonna go to my media click on library, and Ah, this is my video. I have a video off. This serious looking individual are staring at a screen right there. So I'm simply gonna go ahead now and grab the Yarnell in here. Let's copy that copy. And then I'm gonna go back to my elemental I'll go back to edit the section link, go to style background and in here for the video link. I'm gonna go ahead now and peace. That's Oh, yes. Okay, so we can kind of see his mouth and nose, at least, But with the video right now, we can control when we want the video to start the start time on the end time, Aziz. Well, we can also add a background overlay, but let's just see how this looks like. OK, I'm gonna hit update right now, okay? And let's just close this Media Liberia, Let's now preview Ah, Page and see what we have. Lets people the changes. Okay. Uh, all right. Yeah, that's done. We are good to go. And, uh, I'm joking. I'm joking. This isn't This is this is a very good okay. This video is too short to make it a bit tall up because all we can see right now is just the guys knows. And now, offender. Well, we need something are better than what we currently have. All right, I'm gonna go back to edit with elemental, okay? And ah, wait for this to load. All right, let's go back to you. Edit this section. Go back to the hide in here. So if a default, I'm gonna changes right now to minimum height. Okay? This is much better right now, and I'm going to make this a little bit taller. Let's go with, uh Oh, that's good. 500 for now. Ah, 500 pixels. Okay. All right. Now for the text, I can click inside off the actual text data, and she'll take me straight to the area. Bacon. Now edit the particle ahead up. So I'm going to go with style and for the topography. I'm gonna click in here, and I'm going to change the size right now. We're going to go old. We make it really big. All right, let's go with a 1 15 and I'm gonna click in here. But we had to text area. I'm gonna press enter. So now we have Don't get hacked. Going to two lines. Let's update this and for me. I'm gonna click on the preview changes. Let's see what we have and Ah, okay. Not bad. Not bad at all. The video looks much better, but I still don't make this a little bit biggest. I'm gonna go back and we're gonna do is we're gonna go to that. It's section We're gonna change the height now to 640 pixels. Make it really big ed. And for the texted, I'm gonna click inside again. I'm gonna go to style and we're going to go with a size off 170 pixels Make it really big update. Now let's go over here to see and by the way, you can see that the changes have taken effect. So whenever you make changes to elemental any hit update, if you have a browser or window currently displayed the picture editing into a fresh automatically, so you can see right now cooled about video is much bigger right now. We've got out six and I like this. Let's quickly add some animation. So I'm gonna go back in here going to click on the text area now to add animation for ahead Now I'm going to go over to advanced come away to entrance animation and they've got different times of animation can play with You've got the fading left You've got the zoom in and so on. The one I want to use is delight Speed in And it's the one right here. Let's be it in, OK? They can also control the situation. Like how quickly joined the admission to run. You want to go with slow? You gonna go it fast? Okay. I'm going to stick with the normal. You can also add your animation delay if you wanted to, but that is it for our text. I'm gonna go to the edit section area and what I want to do. It has to go to style. And what I'm going to do is to school old way down here. So you have to back on overlay. I'm gonna click in there, and I'm gonna add a bag. An overly off black. I'm gonna click on the color right here. And when the shoes black as the overlay. Okay, so from here, right now, I can change the opacity. I can either go with, like, full passes that no one can see anything. Oh, I can just make it about Let's school a bit down here to point for two. Okay, I think this is pretty cool. Yep. I like this Something. Go ahead now and updates this. Now let's see what we have or fresh and boom Don't get hacked. Pretty pretty awesome, right? So that is it. This has been a long, long video, but we've successfully been able to add background video. And if it had some sex is over some animation and some overlay. So I hope you enjoy this video and I will see the next one will will continue to build out our website. 12. Adding the Who We Are Section: all right is a welcome back and in a previous video is successfully added all background video with the heading Don't get hacked. So now we're gonna add a second section, and this one is going to be a little bit more advanced because it's going to be a two column section, and we're gonna have one image in the very first column and then two elements in the second column. So let's do this. I'm gonna click on edit with elemental off course, and I'm gonna scroll down here. I'm gonna click on the plus button right here. Click in there and I'm gonna choose these particular structure. You can see it's two columns. I'm gonna click in there. So now we've got two columns. One on the left, one on the white. Cool. Now the one on the left. I'm going to go to my elements, and I'm going to drag the image element. I'm gonna drag that in here. And by the way, note how we have a light blue background that pops up when we tried to add an element that tells us that the column is ready to receive that particular elements. So there you go. I'm gonna release my mouse. Drop the image in there and I'm gonna choose my image for my media library. And I've got a few of them. By the way, if you want to know, where can I get, like, really cool images to use on the website? Check out our picks abate dot com They've got thousands and maybe even tens of thousands of free images you can use on the website on various kinds of topics. Right. Nick and C. Aftab in cyber security. And these are all the images that can use for free on the web site. So, as an example, if I liked this one right here with the hand, I can click in there and then over here to the weather or just go to free download to choose my size, and that is it. So check out our picks up eight dot com to date. All right, I'm gonna choose this image right here. It looks very techy. Steal your stock. I like it. Gonna click on instant media now for the image size we can choose from a variety of scientists. I'm gonna go with the large size because it's pretty big. No captions. New alignments, no links, knows talent. Let's just leave that as it is. I'm gonna go back to my elements block. And now for our second column. I'm going to drag the head in in here, and I'll pace that right there. Now for the ticks. I'm gonna say, What is W h h? Like, who are these guys? All right. Okay. No styling, no, nothing else. Let's just close that. Now. I'm going to drag a second elements, which is gonna be the text a tool, not check this out. All right, I'm dragging. I'm dragging. It's going. It's going. It's passing the first column. It's past the first column. It's got into the second column. Now, as you can see, I can either drop the text data just beneath the header or I can go above the header. They consider difference between the two. That's below. That's above. I'm gonna drop this below. And now we have some text. I'm going to remove all of this, and I'm gonna pitch some text already copied by day. And it stays are established in 2014 where a group of white hat hackers and our mission is to you know, blah, blah, blah, blah, blah. Fight. Crime has to be where we are here and your game is over. Ooh, la la All right, I'm gonna go ahead and updates this and let us see. Well, we have Let's preview changes and ah, not too bad. Okay, this is cool. However, we can improve this. You can see right now that the image is a bit small in comparison to the height of the text on the white. So let's do this. I'm gonna go back in here and the first I'm going to do is to expand with of our sexual is go full with Ah, let's update. Let's see how this will look like now this looks better By getting there now, the Texas would be too bold for my liking. So let's go to our global funds right here. And we're gonna change the body, text the weight from 400 to 300. Let's do that. Let's apply the change and OK, let's come in here right now. Let's refresh this page and see if that has taken effect. OK, it's taking effect now that sex is a bit lighter. I like that Okay. This isn't to bed at all. Ah, let's see. Maybe the text. We can change the actual size of the texts also. Let's go back in here. Go to style. Go to Topography. For the size, we're gonna go to be a C 21 pixels, maybe, or 20 pixels. 18 pixels. I think this is school. 18 pixels on light. Let's update that. Let's see how this looks like Scroll down and okay, this is actually too small. Let's go back in here. Shane's is back. Teoh, Let's go 21. No, I think to anyone should be just fine. That's updates. And now let's see how this would look like and okay, all right, not too bad. Now, before I round this up, you may have noticed a small issue, and that is the fact that the actual text for Hedda's doesn't match what we have in the end . It in section right now you can see the way our W looks like right here. It's different from what we have over here. So clearly this is a different fund. This is not the will weigh fund that we've set as, ah, our default funds for hitters remember when he came in here? And we said that primary headline to have real way as the front family So permit headlines is H one to H six, actually with elemental that's your primary headline. So it's very obvious that this is not real way. So if you're having this kind of issue, what you need to do is to simply go to your back end. You want to go to your elemental, go to tools and then from tools. But you have regenerate. CS says you want to go ahead now and click regenerate files. Basically, you're telling elemental to like refresh all this Yes, has changes to Europe, so that's basically what that means. So now let's take a look and see if there is a difference. And well, there you go. Now you can see that we now have the w looking exactly as it should. This is the railway are formed in actions. Awesome. Final change. Before we round this up, I'm going Teoh center. Our text was sent it. Actually I think that my better alignments to the center and for the actual size of the text itself, I'm going to go to style click on Topography and let's go with 60 pixels. 60 pixels, Mickey. Quite big. Um, schooled on here 60. And we can even change the tag from H two to each one. Let's go with each one. Update that. And there you go. So let's see how this looks like. Now, let's go down and see what we have. And ah, well, not bad. That is it. All right, So that's it. We've successfully created a second section with the image, the head and some text. If you have any questions about this over, we don't so far. Do let me know. Thank you. Fortune Video. And I was in the next class. 13. The Navigator and History Tools: before we progress any further, I quickly wanted to draw your attention to two different tools that you might find useful. Been working with elemental. And the very 1st 1 here is gonna be down here called the History Tool. And when you click in that, you're gonna have access to two different tabs actions and revisions. Actions will show you the changes that you have. Did you currently are making to your document now because this page has been saved? I haven't made any changes. Those far the history here is empty with revisions. On the other hand, this will be four changes that you've made Ah, while ago. So maybe changes that you've made up until the time you actually saved your document. And you can see right now that we've got changes all the way till one day ago, 18 hours ago, 56 months ago. So to restore it reservation, just click on the time so very strong. But toe one hour go. And this was how our page looked like another go. And that's exactly how you would walk with the revision step and also with the action stabbers. Well, once you begin to get the history available. The second tool is going to be the navigato. This is more applicable. Linda's Refresh this page. First, make sure this is refreshed on art. So with the Navigator, this would be more useful when you have, like, very long pages with lots of content. This quickly helps you to locate columns or elements on your page. There's an example. Right now the navigator tells us that we have two sections, and if I clicked on the second section, I can expand it. We have the first column. We have the second column right there. So if I click on any one of these elements to the left, you will now see will be taken straight to where we can edit that particular element. And there is also an eye to the right of each element in here. I can choose to hide that particular Ellen just to see what the page would look like so that you go and that's it for the Navigator, it's a various for two for quickly identifying and tracking down elements of columns on your Web page, that is it. Think of watching, and now let's continue building our website 14. Creating Advanced Structures: the next section we're gonna build will be this services section. And over here what you're looking at is actually a mock up off what we're gonna be building and you can see we've got services as they made headlines. And then we're gonna have three columns on the very first section and then another three columns in this second sexually can see they are filled with images as well as text. So I know this might be a little tricky. Like how exactly would you create this kind of structure? Because whether what's happening here is we have one big section that contains two sections , and each of those two sections have three columns and them. So what I want to do here is to show you how you could create this kind of structure. So let's go. I'm just close this and go to actual website. So first things first. I'm gonna go ahead now and create the very first section by simply Dragon. The header in here gonna drop their right there. All right, so this is gonna be very first, our section inside of the main section. Now for the 2nd 1 Here's what I'm going to do for the second section. I'm going to go back to our elements. I'm gonna make use off the inner section element right here. I'm gonna drag that and I'm gonna drop that just beneath the main header. And there you go. Out. So now we've got this section inside off the main section, but there is a small challenge. This is two columns, Will, again for three columns. Now, over here on the structure. You do you see that? We can change the with off each particular comic and go there three by 66 or 66 by 33 public can. There is no option in here to add more columns. So how exactly are we gonna add 1/3 column here? Oh, wow. This must be a very, very, very difficult challenge. Have a permit to do some, like experts coding to get this done. But it's actually very, very simple. You know what you're gonna do? Just right. Click right there and you call them. That's pretty much all you need to do. Just like leak anyway, inside of that section of a click on your mouse and then look for the agony column and then simply at that comb, that's all you literally need to do. It's a simple how some of this tax tasks can actually be achieved. The actual look very tricky at first. But then, once you know what to do, it becomes so simple eso to add the second section that will contain the next elements you might be thinking. Okay, well, then I'll have to go back. Teoh. The elements in here dragged in a section and simply repeat the process. All you actually need to do is just to go to this first section in here and then just simply by click, where you have the edit section by clicking there and then click duplicate. And there you go. We instantly now have three columns in the second section. So that's how to make use of some of these little tools that you have with elemental. It makes you work so much faster, so much more convenient. Now I might as well mentioned that with elemental, you can actually be very, very precise with how wide you want each our individual column to be. Right now they're all at the 3.3% off the with off the entire section. But if you dragged your mouse to the edge off one column by day, you can see the symbol now has changed. Ah, them just did it again right there once. Houston, the symbol. That means you can now expand. You can increase or decrease the with so institutions click, and then you can, and either move to the left, moved to the right or move to the left so you can very, very precise with how you want your individual clumps to be white. And once that's done, you can simply just come in here. Click on the reset structure button right here. I'm sorry it is clear back in here. Then click on recent structure. They need to take you back to the original with off each individual calm. So that's how you can also increase and decreased with off individual columns if you wanted to. So there you go with successfully created are one main section, continent one column that has a Hedda and then two intersections that have three columns in each one of them. So that's it. Thank you so much for watching this. If you have any questions, do let me know. I will see you in the next class 15. Elementor Challenge 1: Now that we've got the structure laid out for our third main section, I want to give you a small assignment. I wanted to pause this training and trying to replicate exactly what I have over here. You can see I've got services centered in the middle, and I have got my images on my text in the individual columns. So I want to try and replicate what you're seeing in here right now on your website. If you don't have access to this images, please feel free to use any images that you want. You can also use your long type of text. You don't have to follow or used exact same words used in here. Just try to get your image is set up and your text set up. Also, pay attention to the fact that with a text, it's centered in the middle off the column. It's done position at the top of the bottom. It's right day in middle, so try to do that. So please take some time. Now pause the training try togethers dawn, and once you don't get them, we want to have an experience. I'll show you how to actually provided this kind of content 16. Adding the Services Section: already. I trust that you've tried your best to solve the assignment. And if you gave an honest attempt Well, congratulations and proud of you. And if you didn't Well, shame on you. I'm just kidding. I'm just getting I know not everyone has time to make attempted the same in some things like that. So it's okay. Let's try and replicate Morrison right now on our menu up site. So the first on here is the services. Okay, We're gonna go ahead now and add the services header. Make it scented as well. So let's just do this Gonna clicking here. And I mean to say them. Just go over here. I'm gonna call this services. Ah, the alignments were going to take its you the center. Okay, let's update this looking good. And so that's done with services next, right now is going to be a very first image, so nothing too complex in here. I'm going to click on the plus button right here to add a new element. I'm gonna drag my image in here and drop it into the box. I'm gonna choose my image, and it's the one with the shallots of people's I'm gonna insert my media and all right, now, here is something that you obviously most likely may not have done. And I also didn't give you any hints to this, but it's okay for the image size. I'm not gonna go with the large default size. I'm gonna go with a custom size and the custom size, you will be full 60 by full 60. I'm gonna apply that. And if you want to know, why have I gone with this particular image? Science is just for the benefit of hindsight. I've tested our different sizes and 4 60 by 4 60 looks to be the best. Full had the websites. I'm gonna stick with that. All right, so that's it for the very first image oils do we have in here? We've got the text. We perform ethical hacking, blah, blah, blah. All right, I'm gonna copy this text. All right, so this is obviously going to be a text box. I'm gonna go back to my elements. Let's drag the text at it all in here first. All right? And I'm going to paste the text. They're just copied by death. But then the head of itself, the analysis is going to be a different element. So I'm gonna go back in here, go back to my elements drug header, and I'm gonna dump it right in here just above the text. And they're Ugo. So what was the analysis like announces with the header. So and I'll assists. And it's also positioned in the center or its analysis wetness and center. Now the Texas sell the text size. We're gonna change that. So let's go to style, and I'm gonna go to the topography and we're going to go with the 50 pixels. So it's not your small It's not too big like that as it is, and we're gonna do the same for the text itself as well. I'm gonna go to style, and we're going to go to the alignment idea center and then topography. Ah, let's go with 20 pixels. So it's not too small not to bagel. So cool. So that's it done for the text. However, notice that it is centered or position in the middle off the column. So to achieve this, what we're gonna do is we're gonna go to the column button right here, click on it, and then in here for content position. We're gonna go with middle and there you go. So that's exactly how you can piston content in the middle of your column. Note that we could do the same with this section as well. If we go to edit section right there, you have the exact same option in here to position your content in the middle. However, note that evey applied this change on this section to affect all the columns inside off that particular section. So be careful about making so changes on your main section. All right, cool. So that's it done for our first image and are forced piece of text. The second thing I know about the third element would be the same image, this one with the headlock. So what I'm gonna do very quickly to achieve this is just to light click on the first image idea copy going here and simply pays that image. And then from here, I'm simply going to go ahead right now and change the image to the one for the padlock and certain media. And there you go. So that's a very, very, very quick wit have achieved what we just did. And I'm gonna do the same again in here for the Fifth Column. This is the one that has the guy stand at the computer. So I'm gonna do the same item going to right click again inside. I'm going to paste the image, going here. Just change that image to the guy. And there you go. Very, very, very quickly. So these are some of the ways how you convey very quickly just copy and peace content. And then just edit the content as you need to very, very quickly. Elemental. All right, so the last two columns are going to be some more text. We've got consultancy, and then we also have our prevention. There's a few ways how he could quickly achieve this one as well. You could simply just copy the entire column in here. You could just go ahead and say, OK, copy coming here and then just Ah, right. But you have the boat, My dear paste, you could do that. However, when you do this way, it will automatically create an additional column so you could stick with this and then just simply co over here and delete the first column. All right. So that's one way how you can quickly achieve that. And we could do the exact same thing here in here as well. Again, Right? Click on the column and then paste additional new column. And then we can go back in here and then deletes the empty column. So now there you go. Now we've got two new text columns or we need to do it now would just be to change. Ah, the text. So let's quickly do that. I'm gonna go ahead right now and copy the one for consultancy going. Hear clicking here. Remove the texts paced up. And then, of course, the head out will change this to console 10 c and then the last one is gonna be prevention . Why? Let's go ahead and copy this and go back in here clicking here and there's gonna go ahead and pay stats. And then, of course, changed the head of to pre venture in. And there you go updates. And while let's take a look and see ah website right now and see what we have done. Okay? Not bad at all. I like this. All right, we're getting there. So just a few things to point out whenever you go ahead and copy a column or you copy an element, basically, you're gonna be copying both the actual content and whatever styles that you may have applied to that particular up are elements of column take for example. Look at this. All right. If I go back in here to the very first text calmer, we have the analysis. If I go over to style and I changed elements to left Okay, now, if I right click on the text said it all and I click copy. If I now go back, let's say two consultancy, right click on the text area. You can see we've got the option here that stays paced style cooking, pay style. And there you can now see that it takes us also now shifted to the left because we copied the style off the very first text a little in here. So that's a very quick tip for you when it comes to copy and paste, and you can either copy just a style and the content, and it could just be that pays to both. The content and style are just simply paste on Lee. This style, So I'm just do my control z control z to go back to how it was. So well. There you go. That's it. Thank you so much for watching the video. You have any questions about what we've done in here? Please do. Let me know and ah, let's continue. 17. Adding the Why Work with Us Section: Welcome back. Hope you're enjoying the course so far. And in the previous video was successfully added the services section where we highlighted that we main kinds of services that we offer. But now it is time to add the why walk with US section. So, ideally, has a business. Once you've told your clients the kinds of services that you offer, you typically want to tell them why they should do business with you. So here's exactly why we're professionals. We got the experience with proven and we are affordable. So we're going to create this section right now. So let's get this party started. I'm going to go over here to my back end. I'm going to drag the heading element like the dribble in there and ah, title here would be, Why walk with us? Because we're the greatest and the best. My book with us with a question mark, a line that to the center cool. Let's update that and then next is going to be the first textbook right here with the icon . So, for this particular kind of content, we're gonna make use of an element known as the Aiken box and slight hates on the General Aiken bucks. But before we can actually begin adding these elements we have to create in new section. So I'm gonna click on the big red button right here. Add the new section, which is now three columns on a click that in there. So for the very first column right here, I'm going to go and add the I can box, click and drag. Drop that in there and cool. So the Eiken itself right now is the A S L into prison. That's the I can. And then for that sex. I'm just gonna go ahead and cover this technical quick cup of that. Ah, the title is professionalism. Uh, that perf fresher. And no, there's them. And then we got a text. I'm gonna pace that. Okay, cool. This right now is a little bit too big, so we'll have to change the size off the title as well as the text and also the color because we want to make it white as opposed to orange. So let's go over here to style. All right, so, on the style, we can change the sentence for the icon or the content. Let's start with the icon. It's orange, which is good. But we can also change the size. Make it really big. Make it really small. Are we're going to go with 50 pixels? I believe by the fortified is good for the five pixels for the five pixels. And then, if you want, you can fortitude to the left Went 3 61 80 However you wanna play with your icon entry McGonagle rotated at all will live it on zero. That's for the Eiken. Now, for the content. We want to change the color off the title. So we're on the title, as you can see. So I'm gonna go over there to collar, and we're gonna make this just pure white. No lights and then for the topography, we're gonna change the size we're going to go with. I believe 25 pixels should be about fight. It was just It is 25 pixels, okay. And then, for the actual text itself will go over here on the color and we're gonna change the Ecologist. Just make it a little bit different from the pure white, which is detailed. Tal I believed when I was looking for was 999 That's the hex dismal value. So this is kind of like Gracia Darkish Grey just to make it different from the pure white off the main title. So that's that for the color and then the size. We're going to go down. Tiu. Let's see. Oh, I'm sorry. I'm editing the title description. Topography the size here. Where is it? Over here with science is going to be eight and pixels. I think a things should be it should be about right. It's in pixels. Okay, let's update this. And let's see how this looks like. Let's preview changes. Please be good. Let's see high school down here while work of this. Okay, this has not been at all. What do you think? I think this is good. Yeah. Besides, it's all good. It's all eligible. I like this. I like this a lot. So let's continue. Let's go back. So next now is going to be the proven solutions sections. I'm gonna copy this now to add that here's what I'm going to do, OK, I'm going to go back to my elements. I'm gonna drag the Eiken box and I'm going to drop that just beneath the first Aiken box Here. You can see we have the blue background a highlights in saying hey and ready to accept this new element. Little drop that in there. And there you go. All right, So for the icon, that's gonna be the bull's eye. Bull's eye is the I can and then the head and right here is gonna be our Purvin Solutions. Okay. And then the text. We're gonna pace that right there. All right, Okay. Lets school down here and see. Ok, good. All right, So here's we're gonna do it now for the actual style in. We're not going to go back in here and begin to change the color transit size. All that's for amateurs. But we're professionals. Okay, so here is exactly what we're gonna do. I'm going to, right click inside off the first Aiken box. Why? Click right there. Just click copy, and then I'm good. I'm gonna go away to the second Aiken box right click again, and then I'm going to paste this tile, and that's it. A very, very quickly. So that's what we've done. The first column right here. Professionalism and improving solutions. And then for the second man column right here. Very, very easy, But just gonna add the image elements tripping right there. Let's choose our image. And of course, I have my futuristic looking image right here with the I insert that media right there in family can see the sun is launched 10 24 by 10. 24. OK, and I'm gonna align this Why? During the center's I'm gonna go to edit column and then for me, I'm going to change the composition from default to middle. Oh, okay. We're gonna go back to the actual image itself, go to style, and let's add some opacity making able to beat Doc. And ah, I think this is OK. 0.44 Let's go ahead and update this. And let's see what is looks like right now. Let's check this out. Now, let's go school down and ah, okay. Not bad. Not bad at all like this. So next up right now, we're just gonna add to do a meeting. Teoh Aiken boxes. Welcome back. And as you can see, I have added the imminence you Aiken boxes for experience and affordability. Now, I also want to draw your attention to the fact that each Aiken box has exactly three alliance of text. This is very deliberate, and it's a trick that many of those Web developers and designers tend to do whenever we're building websites. It just helps with the alignment and mixed Web page. Look a lot better when you have equalize of text are in each column. So a few things to do before we realm this up. First, I'm going to expand the with off our section because this is very congested. So let's go Teoh Edit Page and we're editing the main section containing all these columns in here. So we're gonna just be content with from box to Fool with okay and then for the club's gap , which would represent the gap between the columns were going to give this wide okay wide. And then for the first column right here, I'm gonna click on Edit Column. Let's give this an animation that will zoom in what I was 18 down left, so that's like That's and then we'll do the opposite for the third column that's going to be rotate in down, right? Okay, like that, Let's updates. And now let's see how this would look like. Let's refresh this page. Come over here. Okay, this looks much better. The old last change right now we need to make would be the actual image itself. This is a bit too tall, so I'm just gonna do this. Let's click on the image image. Science will go with, Ah, costume image. And so I already said 500 by 500. So let's go ahead and apply that. And that's update this and ah, let's see, how does it look like? Let's refresh this page and this looks much, much, much better than always, really. So that's it. We've successfully created the White walk with US section and it's got the Akram boxes has got the animation. It's got the future's looking image. Anyone who says this website will be more than convinced that we are the best guys to go to full ethical hacking and cyber security. So that's it. Thank you for watching you have any questions to let me know. I will see the next class 18. Adding the Meet the Team Section: welcome back. And the next section we're gonna build here would be the meet the team section and this is a rough sketch of a we're gonna build. We have 16 members with their black and white images, the caption identifying their name as well as the position and also some text just described who that particular person is. So let's get this done pretty quickly. I'm gonna go over here to my back end and I'm gonna go ahead and create the section for the team. Members are going to go with the pre column section. However, we need to also add the section for the header me to the team So we can do this very simply again. Does drag header down in here again. And now I can move the header above the section for the team members by simply clicking on the edit button for the particular section. Clinton in the header, click and then just drag that a bulls this section of the three columns. So this is exactly how you can move sections from one position to another. All right, so for the header, just say really quickly meats the team and of course, we'll outline. That's a dissenter. Let's go back to our elements now for the team members Very, very quickly. I'm gonna go ahead and add image for forced team member, and that's going to be persuading himself. All right, for the image size, I'm gonna go with a custom size off to 75 pixels by 275 pixels. Let's apply is that and then we're gonna go with the caption is gonna be a custom caption. And so the name here is gonna be our Bruce Wayne and then CEO. Okay, let's go to style. And let's close one for image, not for the capture. And we're gonna make some changes. First of all, we're gonna change the text collar. We're going to go with our orange color, which is e 55512 to keep it standard. Okay, that's for the color. And then for the topography itself. Let's click in here, and as a few things we can do here, we can actually change the style from default. We can go with italic, and I think that's okay. We don't really need to change any other thin. I like this as it looks okay. Cool. Let's go back to our elements. Next up right now would be the text editor. I'm gonna click and drag and all those Job that beneath Mr Bruce Wayne. Let's come in here and just copy this text, will. Quick. All right, let's go ahead. And ah, piece this text. So, founder of wh age and father of two beautiful kids, Bruce has a passion for fighting. Step Requirement is a huge Batman fan. Hold of guest. Okay, lets go. The style at the text color again. We're gonna go consistently. 999 Make it a little bit. Little bit dark. All I'm it'll be to the center, and then for the size, we're gonna go. Let's go with, Ah, 20 pixels, maybe 10 pixels. Okay. Yeah, I think it should be fine. Let's updates and let's just take a quick look and see how this actually looks like. Let's go down here. Okay. Not too bad. All right. Made the team. Bruce Wayne CEO. Okay, cool. Now to create a next one, which would be for our Maurice Jones. I'm going to go over here, goto elements, and then just very easily again, I'm gonna drag the image and then just drop that beneath the text full. Bruce Wayne dropped image right there and then I can go back to my elements once again. Simply drive the text little and drop that beneath the image. So this is exactly what I'm gonna do right now. I'm going to repeat the process for the second column and then the third column. So please go ahead. Repeated process. Add your image at the tags and then at some text deal styling. So I'm going to do that for this six team that I defined remaining team members and post the video and atavism the video. Once I am done, welcome back. And as you can see, I've added the community members with God clock cans Kelly, Jean Good, Morris Jones, Close Blind and Stanley Jobson. Now, to round this up, you may have noticed that over here on the markup, when I hover over the image, it kind of moves up slowly. And if I remove, the mouse's goes back down, you see that it goes up slowly goes back down, goes up, goes down. So you really create something like this, this kind of effect, it's very simple. Simply go to the image and then go to style and an understand you will see the hover option clicking there and then in here you can choose your hover animation right here and one that I had is the our float seeking to a day it goes up, goes down, goes up, goes down. But that's very quick. So if you wanna reduce the speed, make it a bit slower, make it more elegant. You can add your transition to a shin, and I'm gonna gold way to 1.9. Let's go to even, Let's go to All right, so there you go. You can see right now it over up goes down, it hovers up, it goes down so you can apply the same effect. Told the 1,000,000 images. If you want to live just off, Davis will quick and finally for the section itself I'm gonna add its own animation was good, too. Advanced entrance animation. Let's zoom in. Yep, I love that zoom in. You can also reduce the do Ishan as well. Slow, fast will go normal. I like that updates and OK, so let's see how this looks like. Now let's go back down here schooled way down with the team. Awesome. I love I love that. I love that. That's pretty pretty good. So that is it for creating the meet the team section and I will see the next class. 19. Adding the Our Clients Section: the next section we're going to build right now would be the our clients section. And as a business, you want you showcase all declines you've worked with to create some authority and credibility with your potential new clients. So how can we create this particular section with the images slide into the left? Well, it's fairly easy. We're gonna go over here to a back end and first things first. Let's odd the header, and this is gonna be ah, clients. All right, let's make this an H three tag. Let's center that Now we're going to go against the default orange call up. We're gonna make this just appeal lights just for variety purposes. So our clients, and then next year is going to be driving. Well, there's gonna be driving security for leading brands. So we're gonna add a second header just underneath that And this is going to be, ah, drive in security for leading brands. Okay, so we're gonna make this an H four tag aligned that to the send her. We're going to change the color. Aziz. Well, we're going to go with the 999 German security for leading brands and distance to be still a little bit big. So let's go back to content. Maybe. Make this an H five tag. Okay. All right, let's go back to style. Let's whales. We can do on the topography. Ah, let a space in. We can because space just a little bit more. Okay, I think this is. Let's see, 4.34 point 24 We're living on four for now. I think this should be it should be. Okay, We'll leave it on for for now. All right, so our clients driven security for leading brands. Okay, let's update this. Now, how do we create this carousel? You can see images in there, and ideally, they should be moving from lights to left. Let's do this. I'm gonna go back in here, and then I'm gonna go ahead now and drag in new Element. And that element is going to be our image carousel right here. I'm gonna drag that, and I'm going to dump that right in there. All right, so in here, right now, we can add our images, So I'm gonna go to my back end, and I've got all these images from all the companies we work with all five of them. I'm going to who ate my gallery right there inside the gallery. Now, for the size, I'm going to go with the medium 300 by 300. And in here, you've got all different kinds of options. You can go with the slights to show how many doing a show at a time. Slights to scroll. Do want to start the images. Do you want to show hours and dots? Or maybe none do wanna add links. Do you want to add captions? And so on down here on the additional options again, you can go with the Paulson over or to play infinite loop and so on and so forth. So you've got all these options in here and you can feel free to choose whatever options are, Tickles Your fancy? Basically. So I'm gonna go ahead now and update this and ah, let's check this out. Let's see what we have. Let's go all the way down here. My work with us with team our clients and both. There you go. So, really, there isn't any need to add instead of animation in here, since the image is already moving themselves from right to left. It would just seem like overkill if we start, add in additional animation in there. So that's how to add the clients section and, ah, I will seen an exception. 20. Adding the Testimonials Section: welcome back. And now they were displayed the clients section It is now time to also display testimonials from actual people. This is another great way to build credibility. And this is kind of like the mock up of organ of build way now customer reviews. And then we'll have some testimonials in three different columns. So let's get this done. Will quickly. I'm gonna drug my header in here, and I'm going to say Coster, Maher, test T mony Els. We're going to send to that. Keep the orange color. We're gonna go back in here right now. We're gonna add a new section with three columns. And now I want you to guess which element we're going to use to display our testimonials. Not that much of a puzzle. We're gonna use the testimonial Tabassum gonna drag that trip that in there and ah, for the text itself. I'm gonna leave the default text as it is. I I'm feeling kind of lazy because I don't want to create, like, riel text, so I'll just leave the default. Texas it is now for the image. Well, I do have this guy who looks like a like a James bond. Villain. It looks like one of those guys who want to take over the wall. You know anyone? Anyway, I'm going to use this guy's image, so I'm gonna insert that in there. Ah, in his name. Ah, let's call him Maximus. Maximus? Ah, uh, Yvonne, That sounds very like that. Sounds like a movie villain. Maximus. Yvonne and Ah. OK, so his job will call him an entrepreneur, obviously, entrepreneur. And Ah. So that is it. Now, you can also decide to change the alignment to you. Maybe left or center. Ah, the image position. You can maybe take it to the top instead. So it's above the name of the person and the job title. Or you can go with a signed I like aside a bit better. Now for the text itself. This is a bit too large. So what I'm gonna do is I'm gonna go to style. And then, first of all, let's change the text color. We're going to go with the 999 today. It's a little bit dark, okay? And then typical free. We're going to go with size and we're going to go with Ah, I think. Was it 18 pixels eight and pixels Simms about right every 20. Now let's go. Let's go with 19 Nansen pixels. Should be fine. So there you go. Let's take a look at the markup. All right? So the title is also the job title was also a bit a little bit dark. So let's do that. I'm going to change his name first of all, so let's go to name change, text color. We're gonna go with ah White. And then for the job title. We're going to change the text color. We're gonna go with the 999 again. Make that two be dark and that is it. Let me update this and see how this would actually look like. Ah, let's preview changes. Let's see Maximus in action school down here. Customer testimonials. Okay, Not too bad. All right. So, as usual, I'm going to pause the video right now and add two more testimonials. Welcome back and is against CF. Added the two women in testimonials for Roger being an inventor and Lee Han odd CEO. Now, I made two changes as well the text. I decided to go with the full white collar and also change the font size from 19 pixels to 16 pixels. I think this looks better this way. Now, one more thing to add it will be the border. You can see each off our testimonials have the white border. So to do this, it's fairly easy. I'm going to go to the column contingent that the semiannual I will go to style and under style. I'll click on border I'm gonna choose my borders have we've got different types I'm gonna go with solid and do with I'm gonna go But just let's go The 11 pixel for the with. And then you would notice that the border also has like a curve right there on the edge is on the left, right bottom as well. You can see there's like a very slight curve. So to create this curve effect with after increased border radius. So I'm going to go all the way to five pixels and then the color itself for the Buddha will be set to white. As you can see, I'm gonna update this and ah, let's see the effect that we have. Let's cool down. And there you go. So you can't really see the bottom. But don't worry, it's because a de moment we don't have any content beneath the testimonies. That's why we can see the bullet. Don't worry. Once we add content in the next video, you will see the border. But that's how you can add the border to your testimony also very quickly. I'm just gonna go ahead now and copy the column. I'm gonna go to the second column right here, right click paste a style. Do the same thing right here for the third column. Pista style. Let's update. Let's go back in here and see testimonials from real people and OK, so you can see right now that we still have a slight change to make. And that's because there seems to be no space between the columns. The borders are pushed up right next to each other. So German over next video, where I'll show you how you can walk with spacing 21. Working with Margins and Paddings: so far, so good. We've been able to add lots of different kinds of content to, ah, Web page. But you may have come to the conclusion that we need some space. We need to add some space in between our sections. I mean, take a look at MIT, the Tim, for example, and then the our clients. There is very little space between our clients and then the last section off the mid it him area. You can see there's very little space right there. And even between our clients and customer testimonials, we can do it some space. We can quit more space between these two sections and then also our borders. The borders for our testimonials are right up next to each other. We also need to create space between the testimonials. And when it comes to space in there are two different kinds of space that you can create a walk with. First, you can create space between an element and its immediate bottle container. And and second, you can create space between elements themselves. So between sections or between columns, you can create that kind of space. What we're gonna do here is we're gonna create space now between our columns for the customer testimonials. So to do this, let's go to the back end. And now over here. All right. Now what? I'm gonna click on the edit button for the very first column and then go to advanced right now on the advance. We're going to see margin and pattern. Now, if you've ever worked with each similar senses before, you probably already know what these two things are. But if you don't let me explain, you see margins and pardons can be used to create space. However, there's a difference in the kind of spacey create. If you want to create space between let's, say, the text off the testimonial and the border or the container, you would use patterns. Some patterns are basically used to create space for the inner element. However, if you were gonna create space between one column to the other, you would use margins. So basically, margins are used to create outer space. So let's check this out. Okay, I'm gonna go back to edit button for the column, go to advanced, and I check this out. Okay. If I came in here right now and for the pardon, I said, Okay, I'm going to give a patent off 30. Note By the way, that 30 has been applied to all the four sides. Top right bottom left. I'll explain why in just a moment, but notice the difference, even though, if added parting to delight and the left the borders are still right up next to each other . Although we now have more space between the top and bottom, but he can see that pattern did not push the borders off are forced column away from the borders of the second column. See the difference. But if I came away into margin and I give the exact same 30 now look at that. Now we've got more space between the borders off the force testimonial and the border of the second testimonial. But we now also have space between the top of border over force testimonial and then the head in the customer testimonial headed. We now have more space because margins again will push a column away from its immediate surrounding columns or even the section continued a particular column. So that's the difference between margins and patterns. Now there isn't why the values are applied all together at once is because the values are linked together. So I came in here and made this 30 warned it would apply to all because again, the votes are linked. So don't you only DeVos and give different values to each side, just unlinked them. And now you can add individual our values to whatever say that you wanted to go to. So I'm going to do this. I'm gonna give patterns zero because we're not welcoming patterns in here and then for the margins. What I'm gonna do is I'm gonna give a margin off 16 pixels on the bites off the free first column. So there you go. Let me go ahead and update this. Let's jump in here and see the effects. Let's cool down. And there you go. So we now have 16 pixels of space between the White Board of the Force column and the left border off the second column. So let's go back and add some more space in here again. I'm going to go over to the talk column now and I'm gonna do this. I'm gonna go to advanced. I'm going to on link the fathers of the margin, and then I'm going to give a value off 16 pixels to the left. So now there is space between the white border off the second column and the lived bought out over the third column. Let's go ahead and update that and let's come in here and let's see the change. And there you go. That's exactly how you can create space between columns in your section before. Around this up, let's take a very quick look at patterns. All right, I'm gonna go in here. So let's say, for example, I wanted to add some padding, full testimonials if I came in here right now and added, Pat in, Let's go with Ah, let's make this very obvious. Let's go with Let's see 50 pixels. All right, so now you can see if at 30 pixels, it's on the left, it's on the right. If I on chained these and excite increasing the values for the right, you can see right now that the text has now been pushed from right to left. If I give this zero on the other hand, and I came over to the left and I give this value of, let's say, 70. Now you can see that we have space on the left because now we're pushing our content to the right off its border. So this exactly how patterns what Petters will affect the content itself. Inside off either a column or a section. I'm gonna go back and give these guys a value of zero again. Because again, we're not looking to create any space for patterns zero Lingling, but links back together. And ah, there you go. So that's basically the difference between patterns and margins. If you have any questions about this, please do let me know. Thank you so much for watching and I will see the next last. 22. Working with the Spacer Element: let me now introduce you to a different way off. Add in space between your sections and what I want to do here is to add some space between the mid the team section as well as the our clients section and also between the our clients section and also the customer testimonials. You can see that all this sections are too close to one another now. Technically, we could do this all right. I could go to the mid the team section, and I could add Imagine at the bottom so it pushes our clients section down. All I could do the opposite. I could go to the our clients section, go to edit section, go to Advanced, and I could add margin at the top. So let's say, for example, I could go with 25 pixels. Now you can see our clan's section has been pushed down, are biting a five pixels, so you could technically add imagines either at the top or the bottom off your sections. But there's a different way, however, could also do this, so I'm just go back to zero in here. Well, im just updates to create space. We could make use off a new element known as the space are It's right here. So what we could do easily is to drag this space element. And we could drop that just above the our clients section. Note that it's going full with all right. It's not in here. It's not on the the Chloe O Brian column. It's actually just above the our clients Header. I'm gonna each other in there and what is those is It just creates space by default. The value here is 50 but we could go all the way to 1000 or whatever. So 50 I think, is actually ah, pretty good number. So that's it. 50. Let's go ahead and updates It's page and let's see what we have. Let's cool down here and there you go. So now more space between Mitt, the team and our clients like that list of the same inartful our clients and customer testimonials. I'm going to go Teoh elements and then just a both custom artist, someone else, less direct spacer, and then drop that in there. I'm gonna live it on 50 pixels as well. No need to increase that. Let's update this. Let's take a look at what we have. Let's see how this looks like. And there you go a lot more space now between our clients and customer testimonials. So that's how you could make use off the space element. What are the spacer element? There's another one known as the divider. The difference between these two is a divider would actually create a line like a ruler to credit line between your sections. Personally, I really ever use it. But if you wanted to, it's available for you to use before we around this up. I want you to pause for a moment and think of how you can create space between the customer testimonials text right here. And then the borders off the actual testimonials themselves. You can see it's way too close. So posed very for a second and try to figure out how you could create the space. Did you pause? Have you tried? Okay, well, I'm gonna continue right now, so let's go back to the back end. What I'm gonna do is I'm gonna go straight to edit the head up, go to advanced, and very simply, I'm going to add some margin at the bottom right there. Let's go between five pixels, 25 pixels. Okay, that should be enough. Let's go ahead and updates, and I think that should be good. Let's check the South. Let's school all the way down And there you go to the five pixels of space between customer testimonials and the actual testimonials themselves. So that's it. Think of watching and the walls in the next class. 23. The Number Counter Element: All right, We're getting to the finish line, and the next sexual gonna add here would be a two column section within number counter on the left, and also a powerful message on the light. What am I talking about? Well, let's go ahead and add our two columns section, first of all. All right. Now, over here, I'm gonna go and add a new element known as the counter. Gonna drag that. I'm gonna drop that in here. So basically, weaken create this kind of effect where number stats from sets in or read over the counter stuff from a certain number and ends at a certain number as well. So the same number is zero, and the end of number here would be 1 24 All right, let's remove cool number. We don't need that text. Let's go to style. Let's go to the topography. We're gonna make this very big 200 pixels, which is the maximum. All right. And then on the lines, we're gonna add the header, and the text is going to say the number off businesses attacked every hour. And then we're going to say, Don't be one of them, you know, like there you go. So a few things to change in here. Let's go to style text color. We're gonna go with White. Let's go back to the content. I lined out to the center. Go back to style, Go to topography. Ah, the size. What pixels, I believe, should be enough. Let's go to the edit column section right now for the actual header, clicking there and then the position of the content. We're going to go to middle, Okay? And then let's go back to edit section. Let's add so margin at the top. That's on Link. This Imagine it up here will be 25 pixels, and I think that should be Let's go ahead and updates The number got out O plates on new section. Let's check out the changes and see what we have done. It was cool the way down here. Make the team clients cause with testimonials. And there you go. Okay. All right. So the number of businesses attacked every are don't be one off them. Let's add some animation in here for the section itself. Let's go Teoh the engines animation and we're looking for one called the Role Ain, which is a special information and that's it. That's how it rules in rolls in from the left. Let's go ahead and updates and ah, let's take a look at what we have. Let's gold way down here And there you go. 124. The number of businesses attacked. Every are don't be one of them. So that's had to make use off the number counter. Thank you for watching, and I will see the next class. 24. Creating the Footer Section: Alright. So I've come to the footer now for website and this is the part where we're going to add some social media ICANN's and will also provide animal address which potential customers can use to which help to us. So let's go over here to a back end and the first things first. Let's go ahead and add Ah, spacer element. So I'm gonna drop that into a new section. But we're going to go a bit more space here with 75 pixels. The 75. Let's go back to our elements. I'm gonna dragged the head out job that just beneath the spacer on our other here will simply be contact contact. Let's give this an H five tag. Make it small island into the center. Let's go to the style. The text color. We're gonna go with White in this case. Go back to title. Go back to topography. Now for the size, I'm gonna make this actual. Let's go. 12 pixels, toe pixels, actually small. Let's go to 20. Actually, 20 pixels let the space in. Let's pays this out as much as we can. 6.5 should be fine. Okay, Since been five nice. Next is we're gonna go back. We're gonna add a second header just beneath the contact. And for this one, we're going to see full inquirer is please send and email to. All right, let's go ahead. Incentive. This one go to our style and for the text color again. We're going to go with White for the actual size itself. We're going to go all the way with 65 pixels, so make it really, really big. Ah, the weights. We could go with 900. Make it really thick, as you can see right now, like so for enquiries. Please send an email to And then finally, we're gonna add the next header just beneath the four enquiries. And in here we're going to simply add our email address is going to be Ah, contact. It's w h h back home contact at White Hat Hackers Com Let's go ahead and add the alignment of the center and then we're gonna change the size as well. Topography signs. Let's go 23 pixels. We can space this one out a little bit more as well. Ah, for the weight. Let's go with 300. So it's not too thick. Actually, 300 is kind of small. Let's go with 400. How about that? 400? Okay, that's better. And Ah, that is it. Then go ahead and update this. Let's see what is looks like. Let's cool. Old way down here. Contact for enquiries. Police in an email to a contact at w h h dot com. All righty, then. So the last time I'm gonna add now would be the social media Aikens, and we do have the element for that. And where is it? It's right over here, Social Aikens. So I'm gonna drag that and drop that just beneath the contact. W th is dot com. So by default, we've got Facebook. We got Twitter and Google, plus spoken ad some other social media platforms. Let's see, what else do we have here? We don't want what press was clicking here. Let's find a different I could have got YouTube. Okay, so we go YouTube, possibly. Let's add another one. Let's see, what else do we have here? Let's look for a link, then tingling. That will be appropriate. So I got linked tonight. So that's what got Facebook, Twitter, Google, plus YouTube and length in. So if this was an actual riel website, you would have to click inside each icon and they can add your link right there. And of course, that will simply link the user to your Facebook our page whenever they clicked on the Facebook icon. Let's go ahead now to the style. So in here we could go with the official color. But since we don't have a colorful Brookside, our purpose that is basically just three colors, we're going to go with a custom color. And the practical in disguise right now is gonna be black and, ah, let's go with a secondary color. I'm just click outside in here. Secretary Cola would be greyish. Oh, okay. So there you go. So you can see this is exactly how it's going to look like. I like that. That's great. And then for the size, let's go with Terry pixels. That should be okay, Space and we could add some space in this world to space them out a little bit more. 20 pixels. That's OK. And then we've also got the icon hover, so I'm gonna click in there. So what will happen when we hover over the icons. Let's add an animation off grow, so it's going to grow. However, for the icon, however, the premise Kahlo will be black. Okay, and then let's see what the second recall is going to do. Let's go with our default orange as a second, Tikolo. And there you go. So this exactly how it is going to look like and I like this. All right, let's go ahead and updates. Let's see what we have but put up about. Let's go all the way down here and contact from quarries. Please send an email to this. And then we've got our social media icons right there. So just to quickly around it. So I'm gonna add some space at the bottom right here just to push the social media icons a bit above the very bottom of the website. So of course we're gonna go and use this spacer. Elemental is a strip that right in there, live it on 50 off dates. Let's see how ah foot looks like Let's go all the way down here and that you go Awesome! Awesome! Awesome! So that's is we've successfully created the footer for our website with an email and also some social media Aikens, thank you for watching and I will see the next class 25. Creating the Header Part 1: Well, well, we've come to the final section and here we're going to build the head out for our website . Now, Once we had done once we finished building the head up, this is exactly how it's going to look like We're gonna have the logo on the left and we're gonna have our main menu on the right. Also note that this the main menu is going to be built purely using elemental. We're not going to use the default are what press menu system to do. This is gonna be purely from elemental. I have also introduced ankle links, which means if I clicked on any one of the menu items in here, it will take us straight to the section that contains that particular content. So, as an example, if I clicked on the team is gonna go straight down to the meat the team section. If I clicked on contact, it's gonna go all the way down to where we've got the contacts section. So that's what we mean by ankle links. And also note that the head out is also gonna have the video bag on plane in its own background as well. So I'm going to show you exactly how we can create these kind of headed. So let's get started, all right? So the first we're going to do right now would be to create the ankle links for our men menu and to do this is very easy. Let's go ahead and edit the page with elemental. Now there is an element known as the menu ankle. That's exactly what we're going to use. And it's right over here just under your general, you will see down here it's called the menu Ankle element. That's it. So what you're gonna do very easily is just to drag the element above the area you want to make or you want to turn into an ankle link when I'm going to do for the what is wh it? Because it's very, very close to the top. But we can start from services. Okay, so I'm going to drag the menu ankle and I'm going to drop it just above the services area for the job in there. Now, over here, another for the ankle to be effective, you have to give it an I D. So what I'm gonna do here is I'm gonna call the 80 here Services. That's gonna be the I D for our services section. Let's go back. Teoh elements. It was cool down here. Now I'm going to do the exact same thing for why walk with us. I'm gonna drag the menu ankle just above. Why walk with us? And I'm going to name this one. Why dash us? Okay, Why there's us. Let's go back to our elements. Let's go to meet the team again. Let's cool down. Drug the menu ankle. Drop that above. Meet the team. I'm gonna call this one the dash team. All right, Let's cool all the way down again. Clients is next Many Uncle Joe the Bulls? The clients called this idea just simply clients. You know what? And then it's called down. Go back to many ankle job, just one above the testimonials and will coldest test t more knee yells all we can ever called his reviews. Leicester City views instead reviews reviews and last but not list. We're gonna we're gonna skip the counter will just go straight to contact So let's drag menu Uncle, just above Contact ammo cold is contact. All right, let's go ahead and now and updates. And now from here, I'm simply going to go ahead now and create the structural for our header. So let's do this. Let's scroll down here. Let's are Our new section is gonna be two columns and I'm gonna change the size off our columns. We're gonna reduce the size of the 1st 1 all the way down to 25% for now, I think eventually might bring it down to 20. But we'll see. So it's 25% for the first column. 75% for the second column. Let's go back to our elements. Now I'm going to drag the intersection element job that into the second column. So now we've got two columns for two menu items, but we have six many items in total. So we have to create for more selections. Right? Click at a new column, right click right there at a new column, right click at a new column, right click. Add one more column. All right, so this is a structure. And now for a header, the left will have a logo. And then we have our six columns for our six individual menu items. Now we're gonna do this? I'm gonna click on the edit section button and I'm gonna drag this all the way up all the way. Oh, the way to top of the hill. Quite veil. Strip that right there. And there you go. So that's its we've created are ankle links. We've also created a structure for head up. And now what I'm gonna do is to simply add the logo. So let's go, Teoh Elements. I'm going to drag the image over here to our logo. First column. I'm gonna choose my logo, which is the one wait here and said that over there. That's it for the logo. And now for the individual menu items. Here's exactly what I am going to do. I'm gonna go back to our elements. I'm gonna drug the heading element. I'll drive the 1st 1 Drop that in there. Now, take a look at this. Okay? For the 1st 1 I'm gonna change the title. Obviously this is going to be services. Okay, Services, I will change the size from default. We're gonna go with 16 pixels. Make it pretty small right now. Here's the thing to create the actual link to the ankle I'm gonna go back to content and then over here, where you have the link, I'm gonna This I'm gonna say hashtag and then I'm going to use the i d. That were useful. Quit in its link, which is services, services. And that is it. I'm going to go ahead now and updates. And now let's see if this would actually walk. Let's go ahead now and preview changes. Okay, Now, if I click on services boom, it takes us straight down to the services, Avia. So that's it. We've created the first ankle. Link them. Go ahead now and quickly create the 2nd 1 which I believe should be the one for the why walk with us and if remember correctly, the many uncle here was Why dash us so again? What I'm gonna do very simply, I can copy the text in here, go over here and then simply paste at. And then we're gonna change this to why w h h all right. And then the link is going to be hashtag. Why dash us again? Let's go ahead now and updates. Let's check this out. Let's see if it works. Why? Wh h And there we go, it actually works. So what I'm gonna do right now is I'm gonna pause the video and I will add the remaining for menu items and the ankle links Well, come back. And as you can see, I have successfully added the remaining full many on its aims and they all work. If I click on reviews, for example, it goes all the way down Teoh testimonials. If I clicked on contact, goes all the way down to contact and so on and so forth. Now let me quickly address this and I do apologize. I probably should have mentioned this much earlier. In the course, you may have noticed that every single time we add a header, we end up having this grayish background at the very top off each particular header. The reason why this is happening is because we are using the 2000 and 19 theme. This particular theme automatically had this kind of border at the top off each header. Now, because of me making this particular website, I initially did not mind the head. I even thought it was kind of cute the design, but now it's kind of getting a little bit annoying, especially now that we've added our menu items so I could use two or three lines of scissors called to get rid off this particular our border. But if you don't know how to use, CIA says, what you can do very easily is simply to change the theme. Just change the theme. Okay, so I'm gonna go to the back end. Let's go to appearance, go to themes and let's just go ahead and use the 2016 theme. Okay, let's use 2016 as an example. So let's active. Activate that it's active now let's go back in here. Let's refresh our page and let's see. Well, there you go. No more borders for our head as and that is it. And you can see right now that the structural hasn't changed at all. There are some few changes. For example, our customer testimonials. Our clients also made the team. The text has become smaller, but as because we've changed the theme. But it's very, very easy to fix this all we have to do to go back to back end. Let's refresh this so it will flex t 2016 theme. So just to change the font size again. It's very easy. All we have to do is just go to let's if example, army to the team, go to style, go to topography, the size inherit and gold way to let's see what we have here. Let's Ah, I think 44 pixels will be fine. And then I could do the exact same thing for our clients and customers, decimals and so on. So no big deal there at all. Lynda's update this. And before we round this up, I'm gonna make warm, final change to the menu for the column. The main column holding the six columns. I'm going to go there and click on Edit Column. All right, and then the common position. I'm going to switch that to the middle and that's it. Let's go ahead now and updates and let's go to our Blawg. Let's refresh the page. And now let's see what we have. Let's called it up and there you go. Awesome! So that's it for pop Long. We've successfully added the ankle links with added the menu with added the logo in the next part, which is coming up. I'm not going to show you how you can make it so that the video also plays as a background Full main head up. I'll see you then. 26. Creating the Header Part 2: welcome to part two. And now that we've got the logo and the menu items all set up, it is time to now implement some design. And here's exactly what we are after. We want to make it so that the video will also play in the bag round off our main header. So how exactly are we going to achieve this? Magic will? It's actually quite simple. And to do this, I'm gonna introduce you to a fairly advanced CSS feature known as the Z Index. Now you will find a Z index. If you go to edit, section off any element you go to advanced, you will find Z index value right here. Right that Z index to explain what this does. I'm just gonna do this right now, okay? Just follow me. I know this. This can get confusing to just follow May I promise you you're going to understand exactly what I'm doing in just a moment. Okay? I'm gonna go to the edit section, the one that contains the video as the background. Okay, let's go over to advanced and then on the margin. I'm going to give this in negative values now. I know that as we're increasing the negative value, the video is going up. It's going up. It's going up. It's going up. It's going up. It's going up. Let's take it all the way to the very top. So all right, so that's at negative. 115. What's happened right now is that the video is basically now in front off our main header. Okay? The man had that. It's still there. It's just behind the video. So what are we gonna do now To get the video on how to get the men had to display? We'll have to give it a higher Z index value. Then this section that has the video plane is the background. So I'm going to give this particular section That won't be the video back when I'm going to give it. Is the index off four? Okay. Now, to get the section that contains our header to find it, I'm going to go over to a navigator. Let's go over to the first section right here. There you go. I'm gonna go to advanced, and then for these index, I'm going to give it a fellow off five, and that's it. That's all that we needed to do to get ah Header to know display. So, basically the best way. How I can describe this Z Index is that it's useful in this kind of situations where you may be displaced the contents of one particular section because now you've have another section being displayed in front of it. So if you want to display the contents of the section behind, simply give that section a higher volume for the Z index over the one that's in front of it . And that's pretty much how the Z Index works. If we gave this a value or full or in the field list on four, these section could continue to bargain. Will display inside because it's the one that's in front. But we give it a any volatile had, and four and now the contents of a Hedda now displays. So that's exactly how you can make use of the sea index. Don't worry, I can understand if you're still in to be confused. If you have any questions about this, please do let me know. I'll do my very best to our answer them for you, but we're not done. Still gonna make a few little changes in here. Let's go over to the section. Contained are Header And what I want to do right now is to go to the layouts and I'm gonna change the with to 1200. What? And then for the actual ahead of itself, the one that says I don't get hacked. What I want to do right now is to reduce the seismic it So it goes into one straight line because I just feel it'll look better that way. Let's go to style, go to topography and then the size in here. I'm going to go down to one or 40 all right. And I'm also going to go back to the content and I will remove the break tack that I added over here. Gonna remove that. So there you go. It now goes online. Don't get hacked, let's updates. And now let's see how this looks like. And there you go, don't get hacked. And we also have our Hedda with the logo and menu item with the video as the background as well. So that is it. We have successfully built our website using elemental German. The next video. We'll will not take a look at responsive design 27. Responsive Clean Up: all right. It's another We finished building the Web sites on the deck. Stop. It is time to now. Take a look at how the website of look like when it's viewed either on the table. It's all on a mobile phone. Keep in mind that more people now actually spend time surfing the Internet on their mobile devices than they do on the computer. So the way Europe's that looks like on a mobile device is extremely important. And thankfully, elemental is such a fantastic plug in. And it's so easy to see how your website will look like when it's viewed on a mobile device . So to do this, I'm going to go over here to my back end and now down here. But you have the deck stop. I can. I'm going. I'm gonna click on it, and then I'm going to switch over to tablets. And there you go. So this is exactly how a website look like when it's viewed on a tablet weaken school down , and for the most part, it actually looks quite good. Why? It's nothing since tree of really changed. Ah, the structure looks good. Our claims looks good to someone else looks good. Everything's looks pretty good, which is awesome. I like that. However, let's not switch over to mobile, which is probably more important. And let me just cool all the way over here to the top, See what is looks like. And Okay, so now we have a bit more of a challenge. You can see right now that the text don't get hacked is way too big, full on mobile phone. So I'm gonna have to make and edits to this dilemma. School down and see what else it looks like. And, ah, for the most part of this actually looks quite good. It looks quite good. When viewed on the mobile for merges into bed. Testimonials can be improved. You can see it's a bit clunky. Ah, the borders don't much off to each other. But that's because of the margins that we added will fix that in just a moment. Let's cool down and ah, okay. All right. So we do have two main issues that we can walk with with the mobile view, testimonials. And, of course, the head rd. Don't get hacked. Head up. All right, so how can we fix this specifically on the mobile device. The first and I want to let you know, is that when it comes to the actual elements themselves, like the headers, images, the text, you can choose to hide them when they're viewed either on a tablet or on a mobile device or on the phone. How would you do that? Well, if you go over to advanced, you will see responsive again. Keep in mind, this is specifically for the elements, not sections of calm spot for the elements themselves. If you go to responsive over here, you will see the option to the Highland tablet or even hide on mobile. Unfortunately, elemental cannot give us a life preview of what I will look like. It would have to make the change here and then go to an actual phone and see the changes for yourself hopeful in the future, Elemental will be able to provide this particular are fit about. This is available for you can choose to hide certain elements when viewed on set in our screen sizes. But if you want still show the text, here's what we can do. Okay, we can click on the text. We can go over to style. Click on Topography. Now note that in here we've got the three different views deck stop tablets and then mobile phone mobile device, no de mobile devices now highlighted in blue. This lets you know that whatever change we make right now will reflect on Lee when it's viewed on a mobile device on the mobile phone. So for the size right now, let's go ahead and choose something decent, something that's not too big. And let's stick with 60 pixels, right? 60 pixels. So I'm gonna go ahead now and update this. Okay, so we reduce the science to 60 for the mobile phone. If I go back to my desktop and I refresh this page, you can see that the size hasn't changed. It's still one forte, belief or text up, but now it's gonna be viewed on 60 pixels when it's up, have been displayed on a mobile phone. Okay, good. However, we still have some space in issues too much of our black space between the menu above and below. And the reason why is because this section has a minimum Head off 6 40 pixels set to it on the deck. Stop soap to access this section. Continent this head up, I'm gonna bring up my navigato, go over to the section and in here for the mean height. I'm going to change that from 6 40 which was set for the deck stop. And we're just going to go with something that's doesn't that isn't too big. And let's go with 390 pixels. Maybe 400 actually has good 400 and they go, let's go ahead and update that. And ah, that is it for the for a section. Okay for the header. That's it. All right, That's good. Not too bad. Not too bad at all. Let's no school down over to where we have the testimonials because we have some issues with the but the margins to be the borders right here. So the reason why we have this is because remember, we added margins off six in pixels to divide for the first column, and then six MPX sources left for the third column. So we're gonna fix this. Let's go over here to edit column and again notes that the Tiber view that the mobile view is highlighted. Let's go over to advanced all right and then for the margins. I'm gonna make sure that if what 1st 1 it's set to zero. And there you go. What? Let's go over to the 3rd 1 go over to the margins and then left. We're gonna said that 20 as well. And oh, I made a mistake. I'm sorry I added the margins to the testimonials and not the actual clubs. Let's go to column. Go to advanced. Okay, margin to the left is zero. OK, so that's it. I should have added the margins to the column and not the actual testimonial. So that's it. We've successfully fixed the testimonials section as well. So that's basically one of the major chips when it comes to are fixing little changes for the responsive our design, if you've added any margins or padding. So you've changed the phone sizes for some of your text, and it doesn't look too good responsive just going and said, if I was back to zero or set of others back to the default, and it should look good on your mobile device, so that's pretty much it. If they're all the changes you want to make again, remember that you can choose to hide elements when viewed either on the tablet on a mobile phone, you can increase the size of specifically for either tablet or mobile phone test to see how it looks like. Just make sure that over here you're actually edit in using to light kind off. You remember if you choose table right now, any change you make would only reflect when the website is viewed on a tablet. If you switch over to mobile any changes you now make to your sections, your corns, your earnings, basically anything a new page will only be reflected when they were set. Is viewed on a mobile, the vice. So that is it for responsive as usual, if you have any questions to let me know. Thank you so much watching and I will see in the next class. 28. Page Templates and Blocks: Let's talk about one of the most powerful features off Elemental, and I'm talking about features off blocks and page templates now at the bottom of your screen right here, where you have the white full the icon. If you click in there, you will be taken to a page where you will have access to different kinds off pre built templates. Over here, you can see we've got designs for home page business page on AP Page into your design. We've got so many off them now. You would also know that some of them have the text pro. This means you can only use this template of medical vision of elemental. Another reason why you might want to go for the pro version. But basically you've have all this pew build temples that you can just simply apply on to any particular page. So, as an example, Okay, let's go over to how back end and let's just say I wanted to add a new page, so I'm gonna go over here. Let's add a new page, and I'm just gonna go ahead now and edit with Elemental. Let's go about here to the back and and from here. I'm gonna click on the template icon and take a look at this like I'm gonna go ahead now and simply insert the very 1st 1 in here. Click on insert. Now, this will take a few seconds to maybe one minutes, depending on the amount of content that is to be imported. But there you go. Right now you can see that we have all the content from that particular template. All the sections that columns, the design, everything has been inserted. White, therefore loss. So this really is a very, very quick way on how you can quickly just create pages for your website. So you go back in here, you have access to different kinds off templates. But it's a homepage template. A contact page template itself, suspects template You have so many of them available and elemental keeps on adding new templates every single time. Also, you can actually save your very own costume templates. So, as an example right now, now that we've built out our home page for the website, which is practically the entire upset itself, I could decide to reuse this entire template. But to do that, I will need to save these pages a template. And to do that come over here, click on the sieve options and then click on Save as Templates second company right now and just just simply, say, our front page template. That's gonna be the name. Click on safe And there you go. It's now saved. So if I go over to you, let's say a new page 12 on his existing page. I could really use the front extended by simply going back to the Eiken folder and then go over to my templates. So I need to refresh this page. Let me do it. Measures to load this. All right, So if I go back in here gold way back down here, go to the Eiken folder and we go to my templates. Now you can see it's available force to use. And if I go ahead and simply click on insert it say's Do you want to also import the documents sentence of the templates? Attention, important may over white people setting so and this gets right now you're basically saying , yes, we want the page to go full with. We want to use the elemental conversations like that. So I'm gonna say yes, Let's go ahead and import all the settings And there you go. We have all the content light there. The sex, of course, isn't white. You can really see that. And that made the team. Everything is in there, so we'll just in to make the future, just like making the background for the page black so we can actually see all the text. So that's exactly how you can make use off pitch templates and also save your own custom pistols. They can we use over and over again on different pages. But we also have access to blocks. So you think about to the Eiken folder. Any click on blocks right here, you will be able to use pre build blocks off content, and over here we've got the categories, so you can go with a 44 page on about section. For example, a call to action section. Have any clients sexual stick of the clients section. So eating right now, you can simply just go ahead now and insert this particular block and you'll have access to the design section, the columns, that logo's everything. And of course, you also have access to some, but these are, for the pro version off elemental. Say again, another reason why you might want to consider going for the provision of elemental, and that's it. So just like the priest, templates simply click on insert, and that's it. So with elemental, you can very, very quickly just build out pages, add content at blocks of content, and within an hour you could have like a full website. And all you need to do is just edit the text of the images at their own custom styling, and you are done. So that is it for the page templates and blocks. If you have any questions about his do, let me know thinking fortune and I will see the next class. 29. Finder Tool and Round Up: already. Well, we have just about come to the end off this section about before. Be around this up. I won't introduce you to one final tool known as the finder to with elemental ends right here. See if you can find the basically in here, you can search for anything. You can search for either an element or widgets on image, text, anything. It's basically kind of like the Google search engine for your website. If that makes sense, so as an example, I can come in here right now and typing team. No. And you can see right now that the war team appears on my home page. It also appears on my phone page template. It also appears on a separate page, which is the elemental hashtag gone it for. So basically, whenever you type in a piece of text or anything, basically elemental will show you the particular pages that might contain that particular text or element that you're looking for. So that's one of the very cool features off elemental that they just recently are added. So that's it for the finder tool. And, uh, before around this up, I know we did not make use off all the elements that you have available with elemental that will take way too long. But you do. You have some really cool element that you can make yourself, such as the button element of Google maps. You've got the image box star waits in so Phil free. In fact, I recommended you spend time playing around with all these available are elements. Whether you want to walk with statistics, you've got the Progress bar. You got your icon layers to Accordions and so much more you've got everything available for you to test out to it. So do you spend some time to really make use and try lots of all these elements that elemental has provided for you and keep in mind that elemental are constantly improving. So don't be surprised if a month from now you go back in there and you see a new elements that has popped up. Eso That's it's let's now roundup. This section 30. Introduction to Elementor Pro: all right. So before we round up this section where we've built out this site using the free vision of elemental, I thought it best to now introduce to you the paid vision of elemental and give you six reasons. Six reasons why you might want to construct going for the paid vision off elements on the very first weighs in is a simple fact that with the vision of elemental, you now have access to an additional wide variety off elements. So basically, with the FRA vision, you only have access to the basic and the general as well as the war press widgets. However, with the pro version of elements, you now have access to the pro elements or you now have our elements like polls to God slides, the log in and middle headline price table culture, action reviews and so much more. It is amazing. You also gonna have access to the site elements we can now add. Just say logo. The site. Actual Adenauer menu search form A menu cats. It's so much more. If you have postive interest of the increasing posts, maybe you'll have a blawg. You now have elements for your block posts as well, where you can add elements like the post Tatchell, the featured image, the comments, post navigation and so much more. If you have wool commerce installed on your WORDPRESS website, you also now have would walk Hamas elements such as the products custom at a cat, four categories and so much more So basically the paid vision of elemental you have access to so much more elements. The second reason why you might want to go with the paid vision of elemental is the fact that with the paid version, you now have access to global widgets. And what do I mean here? Basically, if you wanted to save a particular Paula Morris section and we use that sectional column over and over again on different pages, you can do so using the page vision off elemental. So, as an example, if I wanted to be used the don't get hacked headline, I could civil coming here right click. And now you can see I have the option off safe as a global so I can be used this particular headline with all the design and functionality on author pages. This is a feature not available with the free version of Elemental. Now Reason Number three is a simple fact that with the paid vision of elemental, you can now actually see your life changes whenever you're edits in in a responsive mode. Remember when we walked with the free vision of elemental on? We tried change into designed either on a tailored view a mobile view we could not see the life changes right. But with the paid version of elemental, you can come in here right now. Make some changes to your text and you would actually see the life changes. Read it so you don't have to go and take a mobile device and then see your changes. You can see everything live and direct from the elemental back end. Reason number four is the fact that with the prey division of Elemental, you now have access to all the page templates. All the pitch blocks. You're no longer restricted and with the paid version of elemental, you can quickly build out pages quickly building websites. You're no longer restricted. Everything right now is available for you from contact us templates to meet it, Tim Temples to homepage templates. Everything will now be available to you And reason Number five is the fact that with elemental pro, you're gonna have access to the integrations where you can now integrate elemental with abs like a recapture with freeze book mill Chimp trip active campaign So if you use any one of the services, you can now integrate them with elemental. Using the paid vision off the little plug in and last but not list is the simple fact that the paid vision of elemental is actually cheap. Now license for one rep side is just $49 for a whole year. This is not going to cost you an amul. Your leg. It's it's cheap is just $49 for the whole year, and you have access to all the benefits of elemental probe. And if you're a business, maybe you in the business of building up sex for clients, you could consider going for either the business subscription, which would be $99 for three sites or quite possibly, the on limited vision, which would be $109. And you can use elemental on as many upsets as you want, so elemental with all the fantastic pictures it provides. It's actually really village chip. So those are the six major reasons why you might want to construct going with the paid vision off elemental. It offers so much more powers, so much more customization. And it's also really village chip, so hopefully have been able to convince you now to go with the pay division off elemental. 31. Affiilate Promotion: before we begin using elemental pro. It is my responsibility to inform you that I am an affiliate for Elemental. And what this means is, if you decide to buy elemental produce in my link, I will get a small commission. Now, I'm not in any way trying to force you to buy elemental pull. It is up to you to decide it on your own. But, however, if you decide to buy elemental poll, I want to encourage you to use my own links so that I can get a small commission. So if you feel like saying thank you or you feel like supporting me, you can use my fiddle link to buy elemental pro. I would really appreciate it again. You're more than welcome to not use my field link. You can simply go straight elemental dot com, go to the price and page and then simply by whichever version of day lamentable. You want to go with their three our basic visions out there, So I will provide you with my fitted link. Either and resource is section or in the very next electoral. So again, you're more than welcome to skip using my field link and just go straight, a lamentable calm and by the provisional element. But if you do decide to use my film link, I would really appreciate it. So thank you so much. And now let's get started. 32. Elementor Pro Section Preview: Oh, it's welcome, Teoh. These new section where we're gonna be building out. Ohata and Hansen are current website using the paid vision of elemental so you can already see some changes. This is what we're gonna be doing. It will recreate the header using some new elements. We're going to add a new animated headline. We're also gonna have these countdown timer, the whole display. A message wants the countdown has expired. I'll let you know what the message is. As we progress in the course I would show you right now we're gonna be created this services section that you can see It's different. We now have just one single roll and then we've got three columns. So, basically, whenever anyone now hovers over the image, the actual service will now appear behind the image, as you can see, so the image will slide to the right. The message behind image will now our slide in from the left. We're also going to recreate the wine walk with those section again. It's different now. We're gonna have a background image zooming in or zooming out, will have the overlay effect, are also gonna have some text showing exactly the main reason why the businessmen want to walk with us. The white hat hackers. What's gonna make if you changes here and there but finally will also walk the contact or section of are gonna add the Google maps and also a contact from using the provisional off elementos. So if this sounds good to you and you're ready to learn how to use elemental pro, let's get started. 33. Recreating the Header: already. So welcome to this brand new section. We're going to enhance our website using elements off element to pro and the very first part are gonna walk on would be the head on with elemental pro. We do have access to two different elements we can use to build out ahead of the very 1st 1 here is going to be under the site category and it is this side logo. It's right there. Now take a look at this. If I drag the logo and drop it right here, we cannot choose the image you want to use as the local directly from this window. In order for this to actually work, we're gonna have to come in here. You have to go to your appearance, cost demise under your dress back end and then on the site identity. You want to go in here right now and choose your local so basically elemental will pull the logo from this particular location. Solemnity is really quickly. I'm going to choose my logo. It's right. They're gonna go ahead and select it. And ah, I'm just crop everything right here. I think it should be about just fine. All right. Let's crop the image. All right, so that's the logo. I'm gonna go ahead now and publish this. Awesome. It's published. So let me go back in here right now and delete this element. I'm going to go ahead now and refresh this page so that elemental now knows that the logo has been uploaded on the back end. And now from I'm gonna scroll down, let's go back. Teoh the side category. Dresser, set logo. Drop it on if I'm in logo. And there you go. So now you can see that Elemental has pulled the logo from a walker's back. And I'm gonna go ahead now and delete elements here because we don't need that anymore. So with the site logo elements, you have access to things like bacon, the image size fool. You can go with the medium size thumbnail size or just give it a very, very specific size in this case. But I'm gonna give it a very specific size of let's say two fourty by maybe 2 40 I guess. Let's apply that and see. Okay. Well, it's okay. I mean, it is gonna always be ah, be change. It's OK for now. so on the style as well. You can increase that. We've if you want to make it. Is wine is you want? Actually, you know what? I think this is fine. 75% is okay. I'm gonna live with that. So there are other things you can do. You can add your border radios at it. Books shadow things like that on the advanced. You have access to your scrolling effect so you can decide to make this sticky at the top. Which means if you now scroll down, you can see that the logo doesn't shift. It's right there. It's always at the top in its position. And then you can choose whether or not you want to make it stick in your text up on your table to your mobile. And it can also add a new offset and also basically means how far would you just displace it from the top? So if I go with 1234 if I increase this, you can see right down to the logos that's dropping down from the very top off the screen. I'm gonna live it on zero. And, uh, yeah, I'm gonna I'm not gonna make it sticky because we don't need that. So that's it. I'm gonna go ahead now and updates our page. So that is it for the local. Next is going to be the main menu. And with elemental co, we do have access to, ah, particular element known as the knave menu element right here. So with this element, we can actually a display our menu. However, you need to create your main menu first from the WordPress back and which I have already done. It's right here. I used custom links to quit menus and, of course, the euro. Well, make sure it has the hashtag and then the i D that you used for your ankles. Make sure you do that so you can pause this video. Go ahead now and create your main menu. I'm gonna go ahead now and simply save the menu for now. And I'm gonna go back in here. All right, So let's do this right. I'm gonna go ahead now and simply drag and drop. Didn't have menu. Just a ball in here. And so right now you can see that automatically. Elemental has pulled my men many from the back end If you have multiple menus, you'll be able to choose it from the drop down box. Right here. So before we start and it's in the many lenders, go ahead and remove this particular section. All right, Cool. Awesome. So what can we do with the now menu element? Lots of friends. All right, first of all, the layout do you want to go home is until or join a goal. Vertical vertical is not the best option. In my opinion, it really depends on the design off your website. But traditionally you want to go with horizontal. That's typically the better choice. But you've also got dropped down, which would be ideal for mobile devices where you have this hamburger icon. And then these will have to click on the icon. And then the many will expand. So far, Dexter, basically, I'm just going to stick with the traditional horizontal for now. And then you've got the alignments you want to go with. Send her line to the left, right, And so I'm gonna go with center. You've got the point of which is basically is what happens when you point your mouse on a menu item. So right Now you can see that we do have an effect. The menu item turns orange and then as a line underneath the menu item. So it's right here. The pointer is on the line, but you have access to different types like background, for example, which I kind of like olive background more so you can play around with the options in here . You've got the animation. What happens? Will it go? Will it shrink soup left? Let's try outgrow and ah, okay. I like grow again. No, and none of these options is right along. It all depends on your designed your style, which, like I'll stick with the growth for now, some menu. Unfortunately, we don't have some menus, but if you have so many on your own menu, you have several options. You can choose in here to display that particular menu, and then you've got the I'm. So you've got the mobile drop down so anywhere you can indicate when you actually want to make your many responsive disruptions. In here are tablet and mobile. Before you decide in here, you can always come down in here, choose your responsive mode, so let's go with table for now and see. Let's make this mobile first. Okay, so with tablets, it doesn't look too good idea. Can see right now that contact jobs don't benefits it a little bit. It's not too neat. So, yeah, I'm gonna go with Tibet from tablets. Wanna make it? I had to drop down a lot of the hamburger menu icon. So right now users will have to click on the hamburger. I come to expand the menu. That's okay. I think we can stick with that for now. Let's go back to the text of view and then click in him. All right, So basically, what happens when it actually goes to the mobile view? Let me actually do that. Sorry, I'm go back in here to table it. Okay. So from here, what actually happens? Do you wanna line into this center or aside? So when you click, drop down right now, you can see the menu items are the center, or you can go with a side where it drags the menu items to the left. I like center. And then to total Bolton. Traditionally, it's always the hamburger. This is the hamburger, but you can choose not to have any, which would be kind off odd. So, yeah, you typically want to go with the hamburger option for this, and then the Tuggle are lined. You want to go with the left or right? I like right for that. For this one's I'm going to stick with white and that's it for the content. Let's go over to style. And again in here you've got are so many options that switchback festival to the text of you. All right, so again, text call, you can change the color to something else. Black red, whatever you like. Ah, you've got options for hover. What happens when someone actually appoints the mouse in there? You can choose your point of Coehlo at pad in all sorts of different kinds of options for this, for the for the main menu. But whatever they want to focus on right now is going to be the drop down. Because as of now, I don't like the way this drop down. Excuse me. I don't like the way this drop down actually looks like. Let me click. It's a little hard for me to click on the hamburger. I can, uh okay, let me quickly. Ah, do this. Let's go back to you Content and Ah, let me Ah, line. It's to the left. OK, so I'm sorry the edit button was interfering with the hamburger menu. I can, So let's go back to style. So from here, how does this actually look like when we click on the hamburger menu and to drop down? So I don't like this. I don't like the fact that the background is and why I really want to change its OK, so from the drop down the text polo, I'm gonna change this from black. And I'm gonna go with my orange color. Which is that? Okay, that's the orange color. Let me click outside. Okay. Back on color. I'm gonna go with black. All right. So this is what I like this So orange text. Kahlo, black background. What else do we have? Your horizontal padding. No effects vet school. Padden. Yes, We can maybe put this down to eight. So it's not too tall. Too short and Ah, that is it. Okay, so that's it. Full the drop down. Now, the toggle button, which is this big X right here. The size we can make it like really big if you wanted to, you could give it a decent size of 30 pixels and any kinetic border radios on the border If you want to, you can change the color at a very specific background color for it as well. But I like this. I think this is This looks fine as it is and then finally under advanced in here. Just like with the logo. You can add your school and effect if you wanted to make it. Ah, sticky at the top. So basically, if anyone school done right now, they will see the menu I can at all times. So again, this depends on your own style and what you alike. So that is pretty much it for the ah, head up build. Now the head are using The elemental pro is in the logo element as well as the knave. Many elements. If you have any questions about this, do let me know. Thank you for watching and I will see the next class 34. Adding an Animated Headline: moving on and we're gonna do next is we're going to change the headline that we have over here. That's a Z. Don't get hacked. We're gonna add a new headline, but it's going to be an animated headline. And with elements A probe. You do have access to the element right here. That's it. It's called The Animated Headline. So what I'm gonna do is I'm gonna drag this and I'm gonna drop this right there. Let's get read off the old header. We don't need that anymore. All right, So what can we do with these animated headline? Well, first of all, you've got to major styles highlighted or rotating. So the major difference here is that we've highlighted you get to choose a particular piece of text, and then you can choose how you want to highlight that text so you can go with a ship, maybe circle or double and ah, in here you're typing the highlighted text and then inhale type. The textile should appear before the highlighted text. My preference, though, is Devo Tatum, because with rotating, you can do things like add text doubled rotates with other types of text. So as an example, what I'm gonna do here is this. Okay, let's do this the before. Texting is going to be defeat. Okay? And then do a Texan text here, check this out. I'm gonna go with defeat hackers, and I'm going to say to fit malware and defeat exploits. All right, so here's exactly what we're going to do with the animation since we've chosen rotating, there were different types or we can choose specifically for the rotating text, so I don't go with wave as an example. You can see how that will change. My preference here is actually our clip. I like the way the crystal like moves and changes to see you said that animation it moves to the left, moves to divide changes, brings out the new text. I like that. I like that a lot. So here's what I'm gonna do. I'm going to stick with the before text defeats and they voted in text, would be hackers malware and then exploits. Awesome. Let's go over to style. And I'm gonna choose the topography specifically mouthful the headline in general. So let's make this like a pretty big right. Let's make this very big. Let's see how big we want to make this. Ah, 110. All right, let's take with 100 10 4 Now the text color will be orange. Let's leave it at that. That's for the headline. And now specifically for the animated text, I'm going to choose a different color and I'm gonna go with the default red here. Let's see if we can make this a bit more pronounced. Let's go over here. Let's see when it's something very, very red. Let me drive this up here and see bad. Nope, that's not going to do. Let's come over here a pink. No, we don't want to go with pink. Ah, let's see. OK, this is more like it. All right, I'm going to stick with this color. Let's go back in here and then for the topography you can actually choose a different kind or phone family specifically for the highlighted text are the weight. In this case, I'm gonna go with something very heavy. 900 So it's like very, very pronounced. Maybe 900 is a bit too much. Let's go with 800. Let's see 800. Okay. 808 100 school like that and That's it. Let's go ahead now and updates. Ah, head up and let's see how this is gonna look like. And there you go so you can see how the animated headline now looks like it's so much better than the original static Helen that we had. All of this, I like this are a lot. So that's exactly how you can walk with the animated headline you could get really creative . You can even add some after text system textile up here after the animated headline you get at dealing. Since the alignments style change colors, feel free to play around with all these available options and you can really create are very, very creative animated headlines. So that's it for the animated head, laughing if Fortune and I will see the next class. 35. Adding a Countdown Timer: we are moving on, and never next element we're going to add will be the countdown element. Basically, we're going to count down from 30 seconds and once 30 seconds was expanded, we're going to display a message. What message? Well, you'll just have to stick around and find out. So let's do this. I'm gonna drag the countdown over here. Let's jump that into a new section and from him just simply gonna drag this. Let's take this all the way to the top. Just beneath the main slighter. I was jumped that in there. All right, so what do we have over here? First of all, I'm gonna make the entire with for the section go full with. Okay, that's the first change. Let's now go to the actual timer itself. So what do we have here? Basically, we've got two types of got a due date and we have the evergreen time. A I'm gonna go with the evergreen time A because it works for our purposes. The hours I'm gonna change this to zero because we want the temperature can down 30 seconds just once and then display a particular message four minutes again. We cannot specifically indicate we want to start a countdown from 30 seconds. But will you can do Here is we can say 0.5 minutes, which is basically half a minute, which is 30 seconds. So the countdown will start from 30 seconds. So let's go ahead and hide the days. Hide the hours, hide the minutes. So now you can see the counter essentially start from 30 seconds. So I'm gonna add a custom label, which is going to be Guess what happens every 30 seconds. Do you know what happens every 30 seconds? Well, you're about to find out now. The actions after the countdown has expired. World do we want to happen? Well, check this out. First of all, we could choose to redirect the user to a different link. A different page if you wanted to, but we're gonna hide the time a first of all. And then we're going to display a message. What message? It's a mystery, but here it goes. We're gonna say one company gets hacked every 30 seconds dot, dot, dot Don't let it be yours. So we're really trying to market our services, retrain. It creates this sense of urgency in our, ah, potential customers. So, by the way, I don't know if this if this is actually true. I'm just making this up, So don't tell me. Hey, Alex. I did some research, and I found out that what you said is not true. Yeah, I had. And I'm just making this up, All right? So let me just go ahead and update this and let's see how this would actually look like, Let's go ahead and preview the changes. And let's see, I am so excited on. Okay, So here's the problem with doing the previews. Using the same browser. Missing crewman, sinister of stored my cookies so the countdown doesn't actually start are from 30 seconds. So what I'm gonna do here is simply I'm gonna open up a different browser, which is ready with heavy. I've got Firefox over here, right? So let's try with Firefox instead. Hopefully, the kind of will actually start and let's see. Awesome. All right, so this actually starts. All right? So you can see we have got the countdown way there. And for some reason, my internet services slow today. Today, Saturday you could see the images. Just this image is just loaded. How atrocious. I'm going to demand a refund. Right. So let's just see what happens once the countdown expires. And really, a lot of people will come to this site and will be curious. Like, what actually happens when that countdown are expires? Am I going to get a gift? You know, Is a bomb gonna explode? Okay, so there you go. We've got the message. One company gets hacked every 30 seconds. Don't let it be your second seed actually works. So one simple change we can make right now would be to make this text actually big, bold and pronounce. So let's let's make that change, right. I'm gonna go in here, go back to the back end. All right? So from here, we can go over to the style. Might got style. So we've got the boxes, we've got the content itself, and then we have the message. So we're dealing with the message right now, and we're going to go with topography and then the size. Let's see, it's a shame I can't really see the preview from here. All right, let's go with 45 pixels. Let's update that and I will see Let's just go straight to Crume here because we don't need to city count on anymore. Let's just see how this looks like. Okay, so this takes it to two lines. We don't want that. So we may need to change the science a little bit. Make it a little bit smaller. So let's go with, let's say, 42 pixels. Updates that and let's see the change. Let's see how that looks like. Okay, One company gets every 30 seconds. Don't let it be yours. I like that. I think this actually works. So that's how to walk with the countdown time. I thank you for watching the video, and I will see in the next class. 36. Recreating the Services Section: the next section of the walking on is going to be the services section. And while these actual looks quite good as it is, this could be improved so much more. I'm gonna make use off a pro element known as the flip box. This is going to change the way we display our services. So let's do this. All right. First of all, I'm going to drag the intersection element our job, that just beneath our services, All right. And then I'm gonna add an extra column. So we've got three columns right now for our three different services. So let's go ahead now and add the very first service, which is, of course, consultancy with this particular image. So let's go back to our elements. Now. I'm gonna go over to the pro, all right? And here's exactly what we're gonna use. We're gonna make use off the flip box element right there. Flipped box. Let's drop that in here. Boom. Okay, so right now you can see the immediate effect of using the flip box. So here's what we're gonna do, OK? On the front, we're going to display the background image, and then when flips over we will now display the text which represents the bad gun image. Right. So let's do this first of all right, So front over here, we've got content. You can add content at the front. All we can go with a background, we're going to go with the background. And of course, we're going to go with an image. So click on classic choose image. And here's the image we're going to use the one with the shallots of people. Let's cool down. Beer, is it? Here it is. Okay, let's go ahead and use this one and said that as the media. All right. Okay, so there you go. That's the image right there. Now for the contents. We don't need any contents were going to go ahead and delete the content for the front. Let's go ahead and remove that and the icon as well. We're not using any icon. We only going with the background image. Now let's go back to background. And from here, I'm gonna make sure that the anti image actually shows. So to do this, we're going to go over here to size on of the image ever going to go with contain you can either go would contain all you can go with cover. It really depends, but in this case right now, I think I'm going to go with contain. All right. Actually, let's go with cover. I'm sorry. Cover is a much better option, I think. Yeah, cover will be a better option in my, in my opinion, so that we've got the cover next. Let's now go to the back. Right. So that's for the front. Now let's go to the back. Like what happens when the image actually are flips. So here's the content. The kind of we're gonna walk with right now would be the consultancy. So let me just go ahead right now and grab this text for consultancy. Let's copy that. Let's go back to the flip box. Make sure we edits in the back, not the front. So the content every right now, let's go ahead and add that now for the head. And obviously this is going to be a console tan. See, we don't need any button, but you've got the option right there. I'm gonna go ahead and remove that. All right, so that's the content now for the bag on the bag on here is blue, but we can change the Let's go with black. And I was like, black So background time We'll go with the color instead, but we'll go with black. All right, so that's it. It's black collar. Okay. Like this. All right, so from there, we're gonna go over to the settings now, and in here we can control the kind off animation it happens. So by default, we've got the flip to the right. But we can go with Slide as an example. You've got the slide where you've got the text, just pushing in from the right. I like this. However, if you're gonna go with the flip, there is a very interesting and mission, which is the tweet three D depth, which kind of gives you some sort of extra to be the animation. So you might actually like that animation. I don't know if you can see it from here, but it kind of like wobbles the image a little bit from the top. Uh, anyway, it's really up to you. I'm going to go with this line like slide and into the light and ah, that's it. So I like this. So the few lessons we need to change it would be the size of a text and also the color. So let's go over to style. And, Franz, we're not dealing with the front of dealing with the back specifically and the title in this case right now, I'm gonna go with the traditional orange color for our title. So let's cool down here tight, ill. Ah, text color. We do have the orange color right there. I mean this up a little bit. That matches okay like that That's for the color. Are the signs we can make the size a little bit bigger. Consultant. See, So we'll go with 34 pixels. Should be fine. So that's for the title. And then, of course, we've got the description. I like the default by color, but we can change the size. Make it a little a little bit bigger in the school down here sighs. Let's see. Limits. Callback of actually, it's science science on its size. For the description, I think 16 pixels might be okay. 16 pixels to this 16 pixels. Okay. I think we should be fine. Let me go ahead and updates this and Let's see how this would actually look like from the front. And let's cool down here. All right, so what services? And they go Consultancy. Awesome. I like this. Except the orange glow actually doesn't match. So I'm just quickly do this. I'm gonna grab the color. Can I just copy this color? Go quick. Let's go back in here a title. I'm gonna pace the colleges carpet so it actually matches completely. OK, so there you go. That's the real orange color. Awesome. So that is it for the very force textbook. I'm happy with what we have in there. That's what I'm gonna do. Very quickly, As usual, I'm just gonna copy Dan Tab books and him gonna go ahead and paste that in there and then pays that over here as well. So I'm gonna pause the video right now, and I'm simply going to change the image and the text to add the analysis and prevention services. Welcome back. And as you can see, I have added the additional services for analysis and prevention. So this is the brand new services section, and as a result, we no longer need the old sections. Let's just go ahead and delete that delete fete and their year goal. It's update that once more Let's go back to front and let's take a look at the newly improved services section a lot. Look at that beyond consultancy analysis and, of course, prevention. So that's exactly how toe walk with flip bucks is. Thank you for watching, and I will see you in the next class. 37. Recreating the Why Work with Us Section: now that if we walked the services section, we can now go ahead and we work the why walk with US section. And yes, I know this looks quite good, but we can actually improve this by making use of a pro element known as the slides element . It's right here. So I'm gonna drag that. I'm gonna drop that just beneath the title. Why walk with us? Was that in there? So with the slight element, we can add headers, text buttons, Bagram images, backward colors, animations, lots of biblical stuff. So let's do this like I'm gonna click on slide one head and first of all, on the background, I'm going to change the color from the purple to black, all right? And then for the image. I do have an image in here, which I'm going to use, which is what we have over here going to insert that you know what? And the text is supposed to be our profession. Al ism. Right. So let's do this. We've got the size which is cover. Now, over here. Look at this. We've got an effect known as they can burns effect. And to be honest with you, I never knew what this effect was until actually started working on this course. And it's actually a very, very cool effect. Look at this. If I turn is on, look of it, it zooming in and you can actually even change the direction of the zoom from in or out. Look at that. Oh, I love that. This is really, really cool. I like that. Let's add some background overlay. I'm gonna go with some black color. Let me school down here. All right, So what did we get? We want to make it quite dark so that detects can be illegible. Okay, I think this is perfect as it is. Okay, that's what it background overlay. But that's in the back on. All right, So that's what the background Overly now the signs. I'm going to go all the way to 500 pixels. I do have the benefit of hindsight of tested. This and no, 500 pixels is just about right. All right. So 500 pixels and cool. All right, so that's it. Full of the design. Now, what about the actual content itself? Let's go back over here. So that's where the background next is gonna be the content rights. I'm gonna click on content. And the very first reason here is a belief. Professionalism. Okay, so let's add the head and right here. Pro fish and knowledge is, um and I do have some text professional cybersecurity experts. Okay, We don't need the buttons. I'm going to remove that, and Ah, well, that is it. And finally, we've got style and with style in here, we can choose a very specific are styling options for this particular slide. So in this case, we'll click on costume. And then from custom, you can change the position of the content gently content, color, and so on. What I'm gonna do here is I'm going to keep this Thailand consistent across all the four slide, so we don't need any customs telling for professionnel is them. All right, so what I'm gonna do right now is I'm gonna pause the video, and I'm gonna add the remaining reasons for our experience proven solutions. And then affordability is in the exact same way. I created the 1st 1 for our professionalism. Welcome back. And as you can see, I have added the remain in reasons which are prevent solutions, experience and, of course, affordability. All right, now, let's go ahead and add some actual style into art sex because they're kind of small. So I'm gonna jump over here to style. And of course, in here you can change the width of the slots. To begin with, we're gonna go all the way to ah, 100. So it expands to the extreme edges off our screen. And then, of course, you can choose to add pat in horizontal positioning for the content. Physical position as well, Textile line. You've got all these options available. That's for slides. Now, for the title itself, I think this size should be just about right. The text color. I'm going to stick with the white. I'm not gonna change that description. On the other hand, Joe, we need to eat. Make this a little bit bigger. So I'm so let's go with 30 topography. So for size, let's make something a little bit big. Maybe not too big. 24 pixels. Okay, this seems to be all key and ah, all right. So if you had a button in here, you can change how the bottom would look like and finally the navigation, Which is the arrows do on a position. Position them on the inside on the outside. I kind of like them on the inside. Yeah, let's go outside. Actually, let's give it outside. And then, of course, you can change the size of the arrows at some text. Actually, you know what? Let's change the color of the hours. We're gonna go with the orange color that we use regularly on the sites. So let's do that. I'm gonna go over here with orange, and it make this just a little bit lighter, so it matches what we have and Ah, okay. I think that should be Ah, close enough. All right, let's be close enough. Okay, Let's go ahead now and update this and let's see how new. Why walk with us section and let's see, Let's go down. And ah, OK, this looks good. However, we can make some for the changes. We can expand this to go full with. So let's do this like I'm going to go back to the back and and for the main section Orca pine or continuing the white Walker. This I'm gonna click on in here. And when the change economy with from box to go full with Let's go ahead and update this. Let's see the new change and C have a looks like Let's go down and Voila. There you go. Pretty awesome, right? We've got the condom going full with the background image expanding to the edges of our screen. I like that. I like that a lot. A few things Teoh point out really, really quickly. If I go back in here, go to the slides, you could make additional changes to the slider options. So over here, for example, you can choose your kind of navigation. You can choose to pause the slide on hover I'm gonna go with No, actually, you can also change the auto play speed. So maybe we can make this a little bit longer, maybe go with 7000. And then, of course, you've got the transition effect. Whether it's fade or slide, you've got the transition speed, the content, animation, all different kinds of options to choose from and then also with the slides themselves. Whenever you're trains, you add a background overlay. You may have noticed this option here, known as the blend mode, and whatever you choose in here will have a direct effect on how your bag over there would look like. So, for example, if you went with color, take a look at that. That's a whole new effect. Now you have some color showing. We do have another one, like lighten, which will bring out even more caller as well. Ah, you've got different times. You've got d color burn, which is again, like a different kind of effect and so on. So feel free to play around with all these available options. Really? Your limit is your your cure. Creativity is basically your limit in this case. So I'm just gonna stick with normal because I'm a bit lazy on. And, uh, I'm just gonna go ahead and hit updates, so well, there you go. We have successfully re walked the Why walk with us section. And as usual, if you have any questions, do let me know. Thank you for watching. And then we'll see the next class 38. Recreating the Contact Us Section: a light. So we've come to the final section of a going to improve with the elemental pro, and that's going to be the contact section. And over here, this pretty basic. We've got a message and we've got an email address and some socially Aikens s, so we can definitely make this look a lot better. And here's exactly what we're gonna do. Let us gold way down here and with Elemental Pro. We do have access to a particular element specifically for forms. It's right there. But before we do this, I'm gonna drag and creates in a section first of all, So let's do this intersection. I'm gonna drop that just beneath contact, all right? And now, inside the very first column, I'm going to drag an actual basic element, which is the Google Maps. So let's track that was Drop that in there. So over here, you obviously have the option of choosing your address. If you have a physical address, you can change zoom the Hyatt and so on. But when I really concerned about that, what we're really constant about is going to be in the second column, and this is we're gonna add our elemental pro element off form. It's right there. Drag. Am I gonna drop that in there? And a lot just like that. We have a sells a form. Now you can choose to change the foam names. Let's do this. I'm going to say this is the contact contact form. And over here, by default, you've got three fields. Name, email, message, every click on an individual for text. You will have access to the content so you can change name, for example to, let's say, an email, you can change the label. You can add it, place older. You can make it required if you wanted to. And then under advanced, you have access to things like the custom I D. And also the short code, which will talk about in just a moment, Gonna click outside. So we got email message. You can add additional fields, you click in there and then our inside the field on the type you can choose. But there it's a text area. You're well check, box number, date and so on and so forth. We're going to keep it simple. We'll just stick with the name E mail and message all right. That's it for the form fields Now the submit button. You can also customize the text I like send. I think it's pretty standard. You can, you know, change the text or something else if you wanted to. Now, over here, actions After submit. This is very, very important. What happens once the user has hit the scent or submit bottom? What happens? You click in here and you have different kinds of actions. By default. You're gonna have email where you will receive an email, but you can also add other things, like at a secondary email. You can redirect the user to some other page. You can have the Web hook. And if you have, like a mail in service like Mill Champ Active Campaign, you can include all of them in here if you wanted to. So dependent. How many options to choose in here? You will see them stock just underneath email. So if that Milton So now we have access to the military option, and with mill chimp, we'll need to add an A p I key and then choose the least. We want to add this particular our e mail chute. But when I don't stick with milk. Shame. I'm gonna remove that. We don't need milk, champ. I'm just gonna stick with the big like email, all right? And so for the email itself, we can customize this. Where would you like to send the email to? You can add your address in here and then you can change the subject. That default subjects, I'm going to say Ah, new contacts from websites as an example. So every time someone sent me an email, I'll get the subject. New contact on website Now, over here is the actual message you will receive now by default. It's been set toe all fills all fills men, the name, the email The message will be displayed to you. However, you can customize how your message look like by making use off the short codes. You see every single field you having here with its name, email the text area. They all have their individual short codes. How do you get the short codes? If you go back to the farm fields, say, for example, let's go to name on the name you want to go to advanced and then under advanced, you will see the shot code. Here it is filled. I d equals name. So I can copy this as an example. I can copy this, and then I can go back to my email and then in here I can customize the message and say, Ah, this e mail is from and in the camp is a short code so the president will be here and so on and so forth. So you can customize your message by simply using the shot coats now over here as well. From the email, you also wanna customize this so that they from email, will be from the person's actual email address. So to do this, let's go back again to form Fields. Let's go to email, go to advanced and we're gonna grab the short code over here. Copy that. Go back Teoh email. And now, over here from the email, which is the email of the person that sends the email, I'm going to go ahead now and paste that one over there. And then, of course, the from name you can add, the field ID equals name so that the person's name will be displayed as the name of the person, naturally so you cannot your CC or BCC if you wanted to, you could also add some extra meta data such as the dates when the email send the time. What patriota will the I P address and so on? And so for the time that all those in there and finally you've got the send us either in html all as a plain text. Alright, so that's it for the email now, Finally, additional options in here. He could choose a unique from i d. And then you've also got the custom messages What happens under sets in cancer scenarios like, for example, if the message was sent successfully by default, this is the message will be displayed. You can customize that. You can customize that for required messaggero, misted involved message and so on and so forth or cape last I'm gonna do here is to go to style and I will change the background color for our fields. Let's go to field background color. I'm gonna make that black and ah, there you go. I like that. I'm not gonna make any other change. Feel free to play on the topography now, but the button you can add your background, Kahlo, text color and so on and so forth By now, I'm pretty sure you already used to all these additional options. I'm gonna go ahead now and updates contact form. And let's take a look at what we have. Let's go old way down here to the contact section and Ah, there you go. Awesome. So I'm gonna make a few little changes. I'm going to make the map a little bit told us so. It matches the height of our contact form, and I'm gonna remove this text because we don't need that anymore. Let's do this. Let's go back to the Google Maps. So that heights, let's make this late, actually matches. Okay, There you go. It matches now. The height off the form. Let's scroll down. Ah, we don't need this text anymore. So let's go ahead and delete that. We'll delete this one as well. And, um, that is it. Let's go ahead now on the dates and you'll check this one more time. One more time. We're gonna sally bread. Oh, yeah. Okay. Well, there you go. So that's the new improved contact form. If you have any questions, is always to let me know thinking fortune and I will see in the next class 39. Conclusion SkillShare: Whoa. Well, there you have it. We've come to the end off this course on how to use elemental on a CSL. We hope and believe that you enjoy this course, your compass course useful. And if you did, please consider writing a review. Reviews really do help me a lot. It will let me know that you enjoy the course and it really would help me. I would really appreciate it now, just as a reminder. Elemental is a plug in that gets updated on a regular basis. So whenever there's a new feature of available with elemental, I will be sure to make it to Terrel, discovering how to use that future. And I will post the updates to the course. This is all in an effort to ensure that this coast remains updated and fresh. Now, I also want to use is a peculiar to inverted, to take a look at my other courses here on this platform. I do have several courses on what, Chris. So if you're interested, be sure to check out all my other causes of half courses on WordPress theme developed man on security on SC Oh, and so much more so feel free to check out my portfolio off audible first courses. My name is Alex. It's been a pleasure teaching you how to use Elemental. And I will see you next time. Bye bye. 40. Updated Section Preview: Well, hello. Welcome to this very special section. And before I continue, let me just say thank you so much for being a student of mine. I really appreciate you and I really hope and believe that you've enjoyed taking this elemental course. Those for you now have the skills necessary to build out your website using elemental. Now, one thing I love about elemental is the fact that they're constantly improving the plug in The developers spend a lot of time adding new features, and it's great as an elemental user, I love it. Unfortunately, as a course, create all this can be a nightmare. I mean, imagine spending several weeks or even months creating this course on Elemental. You published the course and then one week after you published the course, elemental goes on to release new features. That can be a nightmare for course creator such as myself. But I made a promise to you, and the promise was I was going to keep this course or dated, keep it updated as often as I can, and this is a promise I intend to keep. So basically, this section, this very special section is gonna be basically where I will cover all the new features. Elemental have added So rather than me having to create a whole new course all over again, how does it with a very short tutorial describing the very latest feature that elemental has produced and how you can make use of that future? So we're that been said. This section doesn't have any particular structural order. You can watch any video at any time. You don't have to start from the beginning and then go all the way to the end. Just look at old. It's deals available. And then, if you're interested in say, for example, learning how to build pop ups with elemental, you can jump straight to their video. Watch the video and you would have learned how you can create problems with elemental. All the videos in this section are independent off one another. You don't have to follow any particular order. I'm also going to try and add as many assignments and maybe short exercises as often as I can, just to make sure you you practice what you've just learned. So that's it. Thank you so much once again. And if you have any questions about anything What I had this morning. Maybe just joking. If you have any questions to let me know. Thank you for watching. And let's move on with this brand new elemental section. 41. Elementor Themes: Let's talk about what Chris themes and specifically, let's talk about the best things you can use with elemental. Now it's important to keep in mind that when you're building your website with elemental, elemental typically takes about 95% off the entire burden, right? It's basically the plug in you useful building out your site. Now, even though elemental is a plug in, it actually acts like a thin because with the plug in, you can build out pages, you can add design and functionality as well. However, the question might have right now is okay, well, doesn't really matter which theme I use with elemental. I mean, after all, I'm still gonna build the website using elemental and not the theme. Well, it does matter, because themes are built in different ways. You have themes that I extremely lightweight, which means they have very little code and don't offer that much functionality as a result , while you have other themes that are robust, have a lot of code, and such provide a lot of functionality. He was a thin. The lightweight themes have an advantage in that they are very fast. They load very, very quickly, so for s your purposes. These kinds of themes are perfect, especially when using a plug in, like elemental with which you can build the pages and content on your website. If you are not using the page builder, if you will not use an elemental that yes, it was perfectly fine to go ahead and use themes that provide a lot more functionality. So without been said, what are the best themes to use with elemental? Well, there are two off them that I have used that I can vouch for the very 1st 1 Here is the page builder framework thing. They do have a paid version of this theme. The deal's off a free version. There isn't why I like this thing is because its light weight, but yet provide you with some really cool functionality. Now, if you're interested in trying out this thing, I do have a full tutorial on how to use this film on YouTube. You can just search for but monkey, that's my YouTube channel. I just happen. The page color film ultimately view and you will see me are explaining what's so cool about this particular theme. Now, if you try this theme and you feel like it's OK, but you want something more. Well, guess what? Elemental only a few days ago released their very own watercress fame, and they're claiming that is the fastest WordPress theme ever created. Personally, I don't know how true that is. I have, however, tested it, and it's very, very fast. It loads very, very quickly and, of course, because it's built by the developers of elemental. It works perfectly with elemental, so it's called Hello, thin. So if you're looking for a theme to use with elemental, you can either go with the hello thin from elemental or simply the page builder. Freemark Thim. However, keep in mind that when you're switching themes, you might need to change one of two things. As an example. Let me jump over here to the back end and then go to appearance. Go to themes, and as you can see, I have downloaded the Hello theme. I've also downloaded the page but our film milk theme and have used both of them. However, when you're switching themes of the first time, if I going to come down here to Hello Elemental and I activate it now, if I go back to my home page, you can see right now that the header is screwed up because, well, the logo it's supposed to be taken for our customization settings. And the consider menu is also our screwed up as a result. So whenever you switch themes and something like this happens, what you need to do is to specifically go to customize and then you go to site identity and then you'll have to add the local over against the coming here at logo. Let's go ahead and choose my logo, which I cannot find. Okay, there it is. What had hackers select? Let's make sure the entire logo is shown me lingers over here a little bit. Okay, cup the image and let's see what happens. And there you go. Let's go ahead and hit, Publish and let's close this and let's go. OK, so there you go so you can see the head of right now looks just fine. So this is something to take note off whenever you switch themes, switching things would also affect widgets. See, if you've added widgets to your sidebar, that could also be affected. Note that not everything provides you with the exact same kinds of sidebars and widgets. So keep that in mind. So these are basically the two main themes I have tried with Elemental and that walk very well. Hello from element of themselves and then the page buildup from I don't even recall guys who created this particular fame, and it just you can try both of them. The major difference between these two is that hello. Theme is very, very light. Weight doesn't really have any functionality at all. However, Page Builder is also like what numbers light with as Hello. But it does offer some additional cool features which complement elemental as a pit bull. That, of course, be sure to check out the editorial if interest didn't learn how to use this particular film . So that is four elemental themes. Thank you for watching. I will see you next class. 42. Styling the Mobile Header: I'm making a special video in response to a lot of requests have gotten from students complaining that they're having issues were trying to stylized the menu items and the logo for a mobile screen size. So it's a perfectly understandable request, and in this video I'm going to attempt to show you different ways how you can ensure that's Your header is presentable on a mobile defined. So let's take a look at what we currently have right now. Let me just jump over here and let me try to minimize the screen. And right here you can see that we do have, ah, a bit of an issue. First of all, the animated text is kind of annoying. It's jumping all over the place, and we do need to fix that. Secondly, is the fact that while the logo is to the left over Hedda, the humble gum menu is right there at the center. So this isn't exactly the best kind of alignment. You typically either want to have your logo centralized as well, Just like with the humble gunmen, you or you can go with the hamburger menu to the right over the head up. But The first thing we're gonna do is we're gonna hide the animated text for responsiveness . And it's typically a good idea because animations generally don't do well. We interviewed on mobile devices. So do slight aside, Doesn't do as well either. So I'm gonna go over here and I'm going to click on the column holding the emitted textile , clicking there and right under advanced You will see responsive. I'm gonna go ahead now and hide on mobile Now here's the thing, though, because I've discovered this bug with elemental. If you come down here and you choose the mobile responsive you you might still see the text right there. Don't worry, though. This is just a bog because if he now viewed on an actual website, which I will do so right now, I'm just save. Let me come down, Henry. Fresh. So you've actually effected Now view this on a browser and we minimize the screen size. You we notice now that the logo and I'm sorry the and genetics has gone. Now a question might have here is OK, Alex. But what if in place of the and Magnetics, I wanted to display something else? Well, you can do this so you can choose to creates and other section and add maybe, like a bagel, a text or something. And then in the same way that you hid the animated look them in the text for Responsive, you can choose to hide that other text for text up. So it's basically be like the vice versa. So you're just coming here right now and where you have the responsive you'll just choose hide on deck, stop hiding table, but then choose specifically on mobile. That's the kind of way how you can display some elements in place off the animated text. Okay, so that out of the way, let's come back in here and let's take a look at what else we need to fix. So right here would be the alignment right logos to the left, the menu east to the light. My preferred choice is usually to centralize the logo as well as the hamburger menu. So in this case right now, all we need to do is to go back in here and while with views on the Responsive our mobile view, I'm going to go over to the column holding the logo. I'm gonna click in day and I'm going to choose are 100% instead. Now is going to be 100 as opposed to the 45. And there you go. Now the menu is, since I'm not, the logo is centralized, but the image may be Abie to big the logo, and maybe it would be too big, so you can click on edit logo and invite. Here you have image size. You can just choose, maybe go with the custom and a with A with love. Let's say 200. You don't need the feeling the height elemental will automatically decide the best heights that will match developed with that you've given. So click on apply and there you go. So now this is a lot more are presentable. However, if you want to display the logo and your hamburger menu side by side, you just need to change the wits off the column. So I'm gonna go back in here to do with their two column holding the logo. Our changes back to 45 and then I'm going to do the same thing for the navigational menu, go to the color might there Emmick and said this to 45 as well. And there you go. But another problem I have noticed is that sometimes you might notice that the hamburger menu isn't. I land exactly at the centre with the local, but let's go ahead now and updates, and we'll just take a look at this on a Brussels. Let me just refresh this and let's minimize this. Okay, so right here, it's It's it's it's It's kind of a line that the center maybe, maybe not. One thing you could do, though, is you could always come in here and where you have the column, you have the option of the vertical align, so to be on the safe side, all typically come and you go with middle. All right, so this should now perfectly align your hamburger menu with the logo, and you could do the same thing for the logo's will go to the column my day. Choose a vertical line, choose middle, and you shouldn't have any more problems in there. I'm gonna go ahead now and updates, and let's take a look at what we have. Let's refresh the page again, minimize a screen and, um, yeah, I don't think it's Ah, just minimize that. I don't think it's Yeah, this should be fine. I guess I should also remind you that you can choose to change the default color for your toggle lines. Say we go to this styling section on that, the enough menu element right here, where you have total button you can go to color and simply choose the color you want to go with. Just make sure it's, ah, something that you users can actually see so that they know that you do have a hamburger art menu. Light them. One last thing is pay attention to the margins that patterns that you may have set while viewing while creating the head on in fact marketing website in the normal deck stop mode. Just remember all the Mudge's you've applied because sometimes when you change the screen size over to mobile, those models might not be needed anymore, and you may just need to remove them enough for your elements. Look a better when viewed on a mobile device to just keep that in mind. So that, I think, is much for watching and I will see you the next last 43. Building Popups with Elementor: so recently Elemental just released a new feature known as the Pop up Builder. And with this feature, you can build amazing pop ups with which you can use to get a build your mailing list. You can capture the email addresses off your customers, or you can even advertise if you're currently having sales or promotions on your website. So it's a brand new feature that Elemental has just produced and what I want to do, Mr. Tools to show you how you can build and create your very own pop ups using elemental to create our pop up. We need to jump down here to templates, and then you will see pop ups just looking pop ups. Enough from here. Click on the green button that say's had new pop up. Now make sure your template here is set to pop up, and then you can give an optional name. I'm gonna go with pop up one. Just as an example, I'm gonna click on create templates. Let's wait for a few seconds for the page to load and a few more seconds and there we go. All right, so in here, right now, you can see all the pre built templates for our pop ups. But over here, to the left of the top, you've got the category, so you can choose as an example the bottom bar pop ups. So this will be displayed typically at the bottom off your screen. You do have the classic as well. Will you have problems that will maybe promote some sort of sale that you have going on like, you know, 50% off, 20% off. You've got some other really interesting pop ups in here. Let's fight together. Keep in touch. Don't worry. Be happy things like that. You've got other categories fly in force Korean Hala bar, slide in and so on and so forth. I'm going to go with the slight end just as an example. So let's see what we have over here. Which one can we are go with going to keep schooling down and let's just as an example, I'm going to go with the one over here. That's a Z. Are you in? Okay when I click on insert right now, So let's see what this would actually look like. Okay, so it stays. Are you in for the thousands of crabbers already enjoy our premium stuff. Subscribe now is it's basically a pop up to grow your mailing list. So in here you can just click inside the individual sections. You can edit the necessary text if you want it to in here as well. You can change your image if you have something else that you wanted to use, so that's for the content. You've got this style so you can increase the with all of your problems if you wanted to. You can such a max with your opacity, just usual regular kinds of features you have available with your regular are elements and , of course, advanced. Or you can add your margins and so on and so forth. I'm gonna go ahead now and hit. Publish. Now, this will take me straight to this particular page where you can now really and truly configure all the way your pop up is going to function. So the first in here right now is the D condition. Apply. Cohen Template to this page is so basically we're saying, Where would we like to display? This particular pop up can click on add condition. So in here you can just go with the entire site. You want to display this pop up regardless of whether it's on the page, post your front page. But let's say we want it to be very precise, right? I can come here right now and say, Well, I only want you to display this on single ah pages and specifically the front page. So this will Onley display a pop up on the front page. But what if you wanted to display the pop up on another page in addition to the front page ? Well, you'll have to come in here and add a second condition and then again goal with Singler and now in here you can go with the all pages, but I'm going to switch from all and I can come in here right now and type in any piece of takes. Angel's Show me all the available pitches I have on the website. I don't have too many. In fact, I only have two pages the home page and this sample page second clicking right now. So basically this probably Onley displayed on my front page and then also on this particular page so you can add as many conditions as you want to. You have access to your archives. Singler. You can specify whether you want to go with oppose the page media child pages of another page and so much more. So you have a lot of power to determine exactly where you want to display your pop up. Now, you can also go with the exclude, which will basically be the reverse. Richmond's the probable be displayed on every page except the ones you specifying in here. I'm gonna go ahead and remove the last two conditions. So this will only display of my front page. Good. Let's go ahead now and hit next. Now, in here, you've got access to six different kind of triggers that will determine when the pop up should be displayed. And the very 1st 1 here is on page load Second, coming here. Turned it on and then say Well, once the page has loaded, wait for four seconds before you actually display the pop up. What? You've got the on scroll, which is okay. If the user is scrolling down or school and up and then within a certain percentage display the pop it right, you can go with the on school to a particular element. This is quite advanced. So in this case, you will have to choose a particular kind off class or i d. These are basically CSS selector. So if you don't know anything about this, well, don't bother yourself. You can go with the on click as well. Which say's Okay, Well, how many times should use a click on a page before the pop up is displayed and then in activity? Maybe the user has been idle for the last 30 seconds. Maybe, you know, 40 seconds, whatever. Display the pop up, all right. And then on page exit intent. This is one of the most powerful triggers, and this is extremely useful for capturing peoples are email. So basically, what this does is if the user moves the mouse towards the close button for the window. That's when the pop up will now be displayed. That is extremely powerful. And really, these two this top to the on page load and then the on page exit intent. These tend to be the most common types off triggers. But so in this case, I'm going to go with the latter on page exit intent All right, let's go ahead now and hit next. And now in here. This is where the elemental papa becomes extra ordinarily powerful. We've set the triggers which basically determine when the public should be displayed. But now it advanced rules. You can actually set conditions that need to be satisfied before the pop up is actually displayed. As an example, you've got the show after X page view. So how? Let's say the user has viewed a particular page or page is an outside three times. At least then you can display the pop up, but then you can say, Well, maybe after two sessions. What this means is labour. The first time user comes to our side, they take a look at a side to leave and then the second time they come to a website that becomes the second session. So maybe only then, should you now display this pop up so you can get really creative, you can create a pop up that specifically welcomes to use our back to website and then you can come in here and say OK after the second session, you can and say, Hey, welcome back. Thank you so much. is your second time visiting my site. I mean, you can really personalize the pop ups, and then you've got the show up to X number of times I'll when Irving from a very specific you are. Well, you can come in here and choose to u R l specifically where you'd like to display the pop up so you can go with show or hide. You can also go with the Veg X reg. Exe is quite advanced this way you can, especially if I particular year old patterns and only when those patterns are satisfied. That's when you would actually display the pop up. This is fairly advanced, and I don't think you would really need to use this. And then you can go brother and then say show when arriving from either search engines, excellent links, Internet links. You can gold brother in this case, and now in here, you definitely want to go ahead and hide this particular one for most pop ups, right? Because the idea here is either a user is already looked in. Then you don't really need to capture the images because the belief here is that you already have the email address. So unless you specifically are creating a pop up for looked in users, you want to hide the populace from users who already look and is really no point. And then in here you've got the show on devices. If you've tested the pop up and you feel it doesn't look too good on a mobile device, you can come in here and simply click X next immobile. And now this will only display on your deck stop and then on your tablet. So again, you can get really creative and really personal with when and how you want to display your propose by using the triggers and also the advances. And of course, the conditions as well. I'm gonna go ahead now, hit safe and close. And there you have it. Say's who? A. Your document is alive. Awesome. I can click on, have a look from here. But then, depending on your kind of theme that you using this when you look too good so she can see right now. Well, these actually sucks, But hey, not a problem. I do have fire folks open right here. So what I'm gonna do right now is I'm gonna refresh my page and we're going to see whether or not they probable actually that be displayed. So keep in mind that we have about two conditions. One is it should display on the front page, which is this page right here and then on the exit intent. So I'm gonna move my mouse. Now you can see I'm gonna move over to the extra clothes and look at that. The pop up has magically now appeared, and there you have it. That's exactly how pop ups walk with elemental pro. Now that you've created your very first pop up, you can access that pop up and any other pop ups my coming down to your templates and then click on pop ups. Cash? How many times have I said the what Popes in this video? I don't know, but it's all hot. So anyway, in here you can see the one we just created pop up one I can click on edit with Elemental and here I will actually be able to change the design as well as the functionality off the pop up. So from here right now, on those settings we have the layout. I can change the with to make it as wide as I want to. I can change the hides, change the position as well, maybe at the top, the bottom. Depending on the particular pop up, you can change the position as well. Make it aligned to the center, to the right to the left, to send with the critical. You can also show the overlay we told Recommend Show the clothes Bachmann without also recommend. And then you can change the entrance animation. Do you want to go with it? Rotates in, slide in, slide out, you name it and then you've got your animation duration. You got your general settings. We can change the title off the pop up, changed its status from published to draft private whatever. And then you got your preview settings in here as well. On the style, it's pretty much basic. You can add your background, maybe a bag on color on image. You can add borders, overlay and so on. But under advanced is where things can get quite interesting. So in here you can decide to show the close button. After a settin amount of seconds, you can also automatically close the pop up After a certain number of seconds, you can prevent closing on overlay. You can also prevent closing on escape key. You can disable page schooling, which means that basically, if the public has loaded, the user will not be able to scroll down up until they either opt in for the pop up or that it's had to close the pop up. And then you can avoid multiple problems on our health. Recommend you go with this option because you don't want to annoy the users on your website . If you start displaying Popes every time, that can get quite annoying. So we're basically saying, Well, if one pop up has already been shown to the user, do not show this Onley. Show this pop up if it's the first pop up the user is going to see. So I held recommend you go with this particular option. So I'm just gonna go ahead now and hope dates and ah, that's been much how to design, build and then configure and show your pop up. But before I round up this tutorial, I want to show you one quick new feature. See you now actually have the ability to pull in the information off the user that is looked in on your site. So, as an example, take a look at this. Okay? Rather than saying all you in, what if I wanted to use the user's name and then invite him to join the mailing list? Just as an example, I can click on the text, and this will take me to where I can now edit the title. Are you in over here? I've got the dynamic content that can click in there. And then if I scroll down here on the site, you will see user in four again. Keep in mind that the user needs to blogged in most of the time for this to actually work. I am looked in as white hats. So I'm gonna go with the user info and now in here you can and choose the particular field . Do you want to go with the I D. Off the user? The display name, user name, bio and so on. I'm gonna go with the user name And just like that, white hats. My user name that I am using to look into my site has now appeared. So this is a very powerful new feature that elemental have added, and you can use this with your pop ups to create really powerful e personalized pop ups. Told really impressed. Whoever the user is, that's on your site. So you go with the user name first name, last name. It really depends on what you want to go with. And then you've got the advanced tab. Do you want to display this before a certain amount of text or after it says amount of text ? Or if the user doesn't have that particular information, then there's a fullback. So in this case right now, I can just say, uh, just as an example, uh, my friend. Okay. So just as the exam, I'm gonna say it, my friend. Okay. So let me go back in here. Change the field under sets its chance to fill from user name to Let's go with first name because I don't have a first name. So and then you go right now. You can see that because I don't have a first name registered with my site. It's now using the full back, which is my friend. So that's how you can make use off the advanced options on the the dynamic user in full feature, So that's pretty much it. Let me just go back to my back And and just as a gentle reminder, you do have access to, ah, wide variety of different kinds off pop ups. So feel free to jump back in here on the templates and then choose any particular kind of pop up that you want to walk with. You've got pop ups for capturing their email addresses, pop ups to promote some sort of new product. You've got problems for promoting some sales. You got problems for notices. One ends things like that. So you have a wide variety of different kinds of Popes you can walk with. You can edit them and then choose exactly when and how away you want to display those pop ups. 44. Working with Page Templates: I got a question from one of my students, Pranav e. Who asks will making ahead of, like this work on a website that is not a one page website, men. And if I have six pages on the website and I build the head of just like you did in this video, how can I make it show on all the pages? Well, whenever you thank you so much for your question and to answer this, I'm gonna introduce you to the concept off templates, how you can build yourself a template either for your header or footer. And then we use the template over and over again already. How do we save the head of that? We've just created with the logo and menu, and we used the head over and over again. Well, it's quite simple, but I'm going to do here is click on edit with Elemental. So let's go to the back end here. And what I'm gonna do is I'm gonna click on the edit section button right there. I'm going to right click, actually, and simply save as templates. Go ahead, say that there's a template and then from here, you can give it a names. I'm gonna go with the custom header. That will be my template name saved the templates And there you go. So let me just quickly go ahead and view the back end for our science. Let's go to dashboard settings. So over here in templates can click on saved templates And then in here you will now see the head of that you just created. So this is sort of like a confirmation that indeed we can we use this header over and over again. So how exactly would we use this head out on a new page? Well, let's go ahead and add a new page. I like. I'm gonna click on edit with Elemental Papa. Papa. Papa. Okay, so from here, let's just wait for the pitch to load. All right? So from here, what I'm gonna do is just very quickly. Let me just make some quick changes in here. Limit chance to pitch layouts to canvass Linda's go to style. Real quick style. Changed the background to black. Okay, cool. So how do we now add? They had a Well, I'm going to click on this button. Hit it Say's add templates. So I'm gonna click in there. And then from here, I'm simply going to click on my templates and then I will choose the custom header. Just go ahead and click on insert. Now, over here you have the option of important the document settings, which means that you might import the page, title the bag on cola, things like that because I am making custom. I'm just It cost him back on color, which is black, and I'm using the elemental canvas template. I'm gonna click. No. So I'm not important any document settings, and there you go. So, just like that, we now have the exact same Hedda like we did on our front page. We have the logo and we have our main menu. So that's exactly how you can save your head or your foot as a template. And then we use that template over and over again on different pages on your site. Another question might have related to templates would be How do we create global template , like a header or footer that are applied automatically whenever we add a new page or maybe even a new post? Well, it's fairly easy as well. What you want to do in such an instance is, let's go to the back end. So let's go to Dutch. But set ins. All right, so in year you will see templates. You can click on theme builder. So from here, right now, you can create eight very special templates for your header footer, your single which would be your posts and then maybe even your archive page. So let's go ahead and create one for the header star Click on header right there and I'm gonna click on Add the new Hedda. So right now we can choose a template name. So I'm just gonna say, Ah Global Hedda as an example of this would be, ah, global template for the head out. So let's go ahead now and created the template and this will take us to this page. Well, we can now choose out of this pre build blocks that we have with elemental. By the way, this is a future only available with elemental pro. So it is instance right now, I do like quite a few off these head as right here. I'm gonna go ahead and choose the one right here, so I'm gonna go ahead now and click on insert. So now you can see we now have a better idea of how these header actually looks like. So I've got a phone number here and email and then we have, like, dates or times when the office is open and then we have a social media icons to the right. So actually like these kind off Hedda, we can actually make changes in here. Just click on the Penn button right here and and from here, you can come in here and make whatever changes that you need to make. But once you're satisfied with the head as it is, just go ahead now and hit. Publish down here Now From here, you have to add a condition. When you actually wanted this, play this head up so by default, it's gonna choose the entire site. So whenever you create a new page and you post these head other you've just published would be applied automatically. But you could be more specific. You can say Well, Onley, show this on Singler pages and then in this instance right now, you can choose whether it's gonna be for all posts, all pages if it's for one particular post. Simply click on all posts right here, and then you can choose the very specific post where you'd like to apply these header to. But for the purpose of this lecture, I'm just gonna go ahead and choose our entire site. All right, so let's go ahead now and simply click safe and close. And there you go. It's It's through a your document is life awesome. Now let's go ahead and add a new page. So let's see if this actually works. Let's go to pages at a new page, and I'm just gonna go ahead and click with Edit with Elemental and let's see, Let's see, let's see, let's see. And there you go. Just like that, we have ah, Hedda applied automatically, And that's exactly how you can build a global template for your header or for your footer, or even for your single our posts. So that's it. If you have any questions about these, do let me know. Thank you for watching the video, and as always, I will see you in the nick class 45. Working with Global Widgets: already so in the previous video is successfully talked about how we can create templates and we use them for the head are for the food. But what if we wanted to reuse one? We did specifically on another page. So as an example, What if on our page right here, let's say we want it to be used this image Note that we've really added the image. We've changed signs will change the alignment, provided a few custom musicians here and there. So how would we reuse this exact image on another page? Well, very easy. All you have to do is to right click on the image and then you'll see safe as a global. I'm gonna go ahead now and say Save as a global and let's just say, Ah, image just as an example, Let's go ahead and save that as a global widget. All right, so right now you can access your global widgets on the the regular page, but instead of elements, you just click on global, and then you will see all the witches you saved as a global. So how would we use this image? Well, let's go ahead now and access the back end. And, of course, let's go to pages. That's at a new page. Let's just go ahead. Edit with elemental Uh oh. So from here, what I'm gonna do very, very simply is I'm just gonna click on the global. It's going quite here, and I'm just gonna go ahead and drag and drop the image light there. And now you will see this message saying, Hey, your budget is now locked. So what happens here is we can either decides to edit this image as it is right now. However, if you make any change to the widget as it is right now, it will affect every other instance off this widget wherever it's been displayed elsewhere . So if you're gonna make a custom change to the widow that you've just used, you want first of all on a link on link the widgets. All right, so from here, right now, just go ahead and on link. There you go. So now whatever change you make in here will not affect the widget elsewhere. This in this case on the front page where we initially create head, though, which it So this is exactly how you can simply save very specific regents as a global widget. We use the rigid elsewhere. And there you go. So if you have any questions about what we've just don't in here to let me know before I go , let me just show you where you can actually access all your global widgets that would be in your back end. And then on the templates, you go to your saved templates and then you will see global, which it over here just clicking there. And now you will see all the bridges that you've saved as global. Do you have any questions? Let me know. Think if watchin, I will see you in the next class. 46. Working with the Portfolio Widget: I have another question here from Antony, who say's I was wondering if you could help me with the portfolio, would it? How the add items to be Do you need to plug in when I go to query source? It doesn't have but for you in the least and in the dashboard there is no tactful portfolio to add items and categories. Well, Anthony, thank you very much for your question. And yes, the portfolio element. Those walk a little bit differently from your typical standard are put for your plug ins. Lebanon's Shia. Exactly how you can make use off this element. All right, so I'm over here on my personal blawg. I'm not using the White Hat Hackers website because I don't have any posts on that website . So it's gonna be a bit more difficult for me to demonstrate how portfolios walk there. So that's why I have chosen to use this particular block. So let's say, for example, I wanted to use the but for your widget over here, and what I'm gonna do is of course, I'm gonna drag the portfolio. We didn't gonna drop it in here. Now the thing is, the portfolio widget for elemental walks differently from your typical standard are put for your plug in. Typically, if you're gonna use a plug into created put for you, you would need to indicate three images that you're going to this play in that portfolio with elemental. It works a little bit differently. So right now, by default, you can see that the portfolio widget has taken in the featured images off six off my latest. What? Purse posts. Right now you can see on the layout We have three columns, so I can change this to form if I wanted to. 3 to 6. It all depends on you. And then, of course, you got the options for posts per page and then image size, masonry item ratio. And so one. The most important aspect of the portfolio elements is on the query. This is where you really want. You spend your time. And so right now you can see we've got the source by default, the elements the portfolio elements will take the featured images from your posts. However, you can go with pages if you wanted to, and then you've also got the option for a manual selection. Wake and then choose to go with both our posts and pages. So, for example, right now I could come here right now and type. He lets a security. I do have a post on security five because several of them second go with the seven top tips . For what? For security. I can click that one so the portfolio element will now drag or get the federal image of the post. I am coming here right now and type in, Let's say contacts, which would be the contact page typing contact fully like it. Contact us so I can click their in there as well. We can say I don't have a future image for the contact with speech, so there is no featured image. We can see how you can combine both your posts pages. In fact, if you have any other types of custom our post types, you can combine them in here as well. The last one coin query. I hardly ever use this, and to be very honest with you, I really don't know what this those exactly. That's it for the queries. All the under here is well under advanced. You can choose the order an order by dates Random Order title. You can go with the order, but it's in a descending or ascending this endorsing an order, and then you can exclude certain kinds of posts or pages If you want to. You can choose to avoid duplicates, which is usually a very, ah, good idea and then over here for the filter bar. So let's say, for example, I was gonna go with posts. I'm only here for the filter ball. You can choose to show either your categories or you can go with the tags. So that's how the field up bar walks as well. So there's quite a few things you could do with the portfolio element. And then, of course, under style, you have access to change in the way it looks, and then on the advanced, you can add your usual margins, your patterns, your background effects and things like that. So that's basically how to walk with the portfolio element with element. If you have any questions about this, of course, do let me know. Thank you for watching, and I will see the next class 47. Building a Post and Archive Templates: I got a question here from parental of my students who say's there, Alexander, Thank you so much. I have learned a lot of elemental skills from your lessons, but I don't know how to use elementary to add blogged ruler pages. Can you damn it? How to use elementary to Kuwaiti foreign templates A categories, post templates, single post page templates as well as a side ball template, including a recent post, was in comments, archives categories and how you can apply these temples to block pages. Well, brand, thank you so much for your question. And yes, I can show you. And in fact, I am going to show you now how you can use elemental to build out these templates. Nobody. So how exactly do we create eight A template for our block posts? Well, before I show you how to do so, let me point out a few things now, for the purposes of this particular video I have created are three sample posts. We have the art off the hacker mobile cybersecurity as well as but it's fishing. I've also quitted three assemble categories. Attacks, hacking and mobile, and then each post actually has tags associated with them. They can see right now that the template on display right here is pulled from the theme. So in what ways can find a template assisted with elemental for your posts, it will use the themes tempted by default. So we need to change that. I have also installed and activated a certain plug in this building is known as the WP discussed plug in its used for basically are making the comments section modified and enhanced. And I'll tell exactly why I just to go with this plug in later on. It's not terribly important, so you don't need to go ahead now, install this plug in. I will tell you exactly why I did so much later. And then if you feel like you need to plug in and go ahead and install it as well, all right now, before I actually begin to could ate the template full our posts. I'm gonna do something very, very quickly. You said this header right here where we have the logo and then we have a menu. I like the structure. I like the way this was built out. So I'm going to save this head out and we use it on the template for our block posts. So how am I gonna do that? I'm gonna click on edit with Elemental Lady. And now let's with for this to load. Okay, Now, over here. Right now, This is the section continent, the menu and logo. So right. But you have the edit section button. I'm gonna like, click. And then I'm gonna say, save as templates. Let's do that Service templates. And they could give it a names. I'm going to say, Ah, global head out. Maybe. Let's save that. Okay, so now we Can we use these Heather over and over again? As much as we want. Awesome. Now let's go to the actual back end. Now, let's get started. So I'm going to jump over here To what? We have templates. I'm gonna click on add new right here. All right, so over here, right now, we can choose to create a specific kind of template. So you have page section, header footer, archive single. If you're going to create a template for categories your archives and so on, you would go with archive. But since we're dealing with posts, I'm going to go with single I'm gonna click on single and then for the post. I'm gonna go with Post just to confirm that. And then the template name. I do have single post right here, so I'm gonna just use single post as a template name. Let's quit it. Templates and we all good to go. All right. So by default, elemental will provide you with a few pre built templates that you can just simply insert and it will look perfectly. It's against right now. These all look actually pretty good, I must admit. So if you like any of these, you can just simply click inside, take a closer look. And if you like, the way this looks like, for example, I just go ahead and hit Insert. It's a It's a simple as that. But I'm not going to do this. I'm gonna create a template from scratch. I'm gonna show exactly how you can build your very own custom our template. So I'm gonna go back to the library. I'm going to click on my templates over here, and guess what? I'm gonna go ahead now and instead the global header, which we just saved. So I'm gonna go ahead now and instead of the global head a click? Yes, Over here. And there you go. Just like that. We now have a logo, and we have ah, menu. Awesome. All right, So how do we now actually begin to build this template? Let's go over to our elements block over here. You have single. We have access to a variety off different kinds off data for our posts. So I'm gonna do I right of the bed is I'm gonna drag the featured image element. I'm gonna dump that fighting here. So we have the featured image so elemental will pull in the latest positive published. So this is the one right here. This is a pretty large image. You can reduce the size if you want to, but I'm gonna living on large, kind of like the way it's so big. I would go back to our elements and then under the fitted image, I'm going to go ahead now and drug the post title. I was dragged their white underneath there. All right, so the title of this post was art off the hacker. Okay, let's aligned out of the center MK this in h two. I'm gonna make this a little bit bigger, actually. Much, much bigger. A lot of the hacker, Okay? And then for some effects, I'm just gonna go ahead now and at some little space in. Okay, kind of like That's okay. That's fine. It's cool. Let's go back to our elements now, under the title, I'm not going to display the date of the posters published attacks the category stint like that said to access that, we're gonna go with the post in full. So when a drug post info underneath out of the hacker. So by default, we have the author date time, and then comments. I'm going to remove time, because for May, I just doesn't make sense. All remove time. And now we don't see the categories or the tags associated with this particular post. So to pull that information, I'm gonna click on add item and end the type. I'm going to go with terms and another trembling with true the taxonomy. I'll go with categories. All right. Now, the cool thing here is you're gonna actually also add some text to stress that Yes, this is the category of this particular post, So there you have before. I'm gonna type in cat catty, gory space and in a dash. Okay, so you can know. So we have category hacking. Awesome. I'm gonna add another item again. Once again, it's gonna go with terms. Texas is gonna be tags before I'm gonna type in tags and then dash. And there you go. So we now have the tags associated with this particular our post. You can change the icon, by the way, you can go with the custom and just come down here and then choose a very specific kind of icon you want associate with the tags. Let's see the, um which I'm gonna use. I don't know. We'll just use Firefox spent so much time over this. Okay, So cool. Let's go back. Teoh the style over here. So the alignment Well, let's go. Let's go. We descend her. All right, So we have the author, the dates, number of comments, actual. Let's remove comments. Let's go back to you Content. I'm gonna remove comments. Okay. So All right. So we have the author that dates the category, and then the tax. Awesome. Okay, so this is already looking pretty cool. Now we have the option off going back to our elements and simply dragon in the post. All content if you wanted to. However, if you would like to add a sidebar template as well with your posts. What all recommend over here right now is you can simply go with the intersection element. Drop that in here. Okay? And what you can do is you can simply save let's if example Let's go with this. 6626 By fitted to be so, your content area will be 66% and then the sidebar will be 53%. And of course, our changed this by simply coming over here. Make sure you have this icon displayed and then can simply click and then drag to change. The individual are lifts off the column self exam. You can go with 75 by 25. All right. And then from here, very simply, I can go back to my elements, drag the post content and then drop it right inside this first column right here. So now you can say I have the content for this particular article pretty cool. And then over here to the right will deal with the sidebar in Just a moment. Cape. Don't you worry. I'm letters gold all the way down here. Go back to our elements. Now, if you wanted to, you could drag the author box and drop its inside a new section over here if you wanted to . However, I don't have, like, a featured image for myself. I don't have it. Buyer, so this looks kind of out of place. But if you do have authors listed on the website, they have featured images. They've got their own bio. This might be a pretty good way to introduce the author of the posts. Whoever read the post or have a read the article. But I don't like this. I'm just gonna go ahead and, uh, delete this. We don't need that. One other thing I can add in here obviously will be the post navigation. So I'm gonna drop that in here. So we have the post navigation so you can change the style. Of course. Make the text in here. Ah, big if you want to. Let's go to typography, for example, can change size. So the reason why you don't see next is because this was the last post was published. So if I was viewing maybe the second post, you would see previous for the very first person and next for the third post. Because this is 1/3 and final post on my website. You don't see the next on this place. I just wanted to point that out. So cool. We've got the post navigation in there. Feel free to customize this any way you want to. I'm gonna go back with to my elements. And finally, we can also add some sharing buttons, right? You also want to make sure that users can share our posts on social media, sold drugs, share buttons element right here and ah, oof! This this call, it looks so out of place. I'm going to go and center of this First of all outlets, Ginger style. Okay, let's go to style. And then under column. When the change official color to custom call. Oh, so primary color right here. I'm gonna go with the orange color. Let's this bit up here. Ah, the thing that should be fine. Okay. And then secretary call. I'm gonna go with black, which would be for the actual text itself. There's a few other things You can, of course, customizing. If you want to go back to content so you can change the label and say I don't show any labels. I'll just show the individual seam balls off the social media platforms if I want to, you can show the number of times they've been shared if you want to. I don't spend so much time going over this, so just feel fits you. I explore all the options available in here now. Last but not least, we also have the post comments. Okay, let's see what happens. I'm gonna drag this right here and dump that in there. So here's the thing. Elemental at this point in time don't have a specific way off styling the comments. So if you're gonna display your comment was gonna happen, is elemental will simply display the comments the way they will be displayed normally all new website without elemental. So the reason why I chose to install the WP discuss plugging that I talked about earlier is because WP discos has a much better way off this plane, your comments section than what pres by default. So that's why I chose to install WP discos. However, if you're using a theme that has a very nice way off displaying your comments by default, then you don't need to install the develop. It is cause plugging, so I'm just putting that out there. Okay, so that's pretty much it for that template. Now let's take a look at the sidebar and what you can do for your sidebar. Let's go back to the elements. So over here elements actually provides you with the sidebar element along just fine. OK, it's over here, so you can simply drag that in here and then drop it inside your sidebar and then you can choose the site, but that you want to display. So by default right now I do have, ah, the search all widget Recent Post was in comments, archives and so on. The challenge here is that just like with your comments, war press at eso, elemental at this time doesn't have a way off style in your individual widgets. So right now this, of course, looks a little bit out of place with the style in the half of the actual contents. So what you can do is if you're in this kind of scenario. You could either apply custom CSS. But if you don't not apply custom, CIA says the best thing you can do it. And that would just be too. Uh, just delete that element. What you can do is very simply, just add the items individually. So, for example, let's say on it to display the search bar. Just as an example, I could simply come over here, go back to my elements, right. Ah, let's school down here. Let's look for the search bar. I believe it's old way down here where you have sites and then all right, so we have the such from Okay, so I can drop the search form in here. Okay. And then, Aiken, style this. Let's go with. Minimal as I was good with full screen, full screen, add the elements to the right. Okay, so let's say I wanted to display my recent posts just the titles, and maybe should accept a virus and posts next. What I can do is I can go back to my elements, and then I can school down over here. So you have pull, okay? And then I can drug posts waiting here and said my side ball. Okay. And now, before I do this, actually, let's go back to the elements. I'm gonna drag the head in chiller just above, and I'm going to call this the ah, recent posts. Okay, I can make this in h three. All right, so now that's edit the actual post themselves. So over here, right now, I'm gonna go with the one column. So we have the featured image. We have some. Except we have the title, the comments section. I'm in comments and the dates so I can come over here right now and remove the comments from that month so we only have the title and then the dates and then it should accept, except length as well. You can modify it. This if you wanted to Ah, you can change the number of posts I can go with. Maybe just for the purposes of this, let's go with just one a z just as an example. But now you can see that the recent post right here is the exact same post there were currently viewing. So if you want to avoid something like this, what you can do is you can close the layout, Jump over to query and then over here, click on Exclude. And then inside those books right here, just click inside and then choose our current post sex look by crane Post. So elemental will then choose the next post of this. Will you avoid having duplicates? You can also use the officers future right here as well. You can click Avoid duplicates in here as well. Just to avoid are constantly repeats in the same poll, so over and over again. So let's go back to the elements. So again, you've got access to a wide variety of different kinds of elements. Here you can add your videos. You can add an image header, different ways of adding content to your sidebar if you want to. However, let me just stress here that if you're signed, bond isn't necessary. Then you might just be better off just displaying your content full with without a sidebar Again. There is no vital, longer option in here. If you feel like another sidebar, go for it if you feel like you will side. But it's not necessary that you probably better off not this planet Sidebar at all. So what I'm gonna do here is well, how much they're going to go ahead and remove. This entire section isn't her column. I don't need this column. I don't need the sidebar. I only did that just to show you how you would add a sidebar. Okay, Before we round this, I'm gonna add a very quick, cool feature to the featured image. So I'm gonna click inside in here, and what I'm gonna do is on the advance. I'm gonna click on motion effects. Now, I know I haven't heard about this, but elemental very recently. A few days ago actually introduced our school and effects and now effects. I can create some really destination. Ah, cool animations for your elements out. Don't worry. I'll make a very separate tutorial now to make use of this, but very quickly. But I'm going to do here is I'm gonna click on schooling the fix. I'm gonna turn this on and I'm going to go over to transparency. Click on the pan, Go to fade out. Yes. And their level 10. That's why I'm going to go all the way in here. So what is this is whenever anyone begins to scroll down. You can see the deficient image stats to fit out. And do I love the future? Was it again? Look at that. Ah, School down, defeated image goes, move! I love that. All right, so that's it. I'm just gonna go ahead and add that effect. And I think the temple right now is good to go. We have everything in place. Awesome. So I'm gonna go ahead now and hit, Publish. And OK, so right now we have to choose the condition. Where exactly would you like to use this temple? So by default, elemental will say. Well, do you want to use this template on all your posts? So yes, your typical to say yeah, you click on save and close. However, if there is a setting kind of post that you don't want to use this particular template for you guys, come in here at a condition change, include to exclude, and then you can go with in here. You can go with post where you have posters, go with posts and then in here you can search for the particular posters, type in the keywords, and then you can just choose that post and then our elemental would not use this template for their particular post. So again, you can use this template full. The regular opposed your pages media category. Things like that saver. And to use this, top it for a very specific category. For example, what you would do here is I'm just close. This. You would go in here in category, for example, and then you would choose the specific category that you want to use this particular template for. So you can use different templates for different categories if you want it to. I don't think I'm just gonna go with all posts and save and close and want law. That is it. Let's have a look at what we have. And there you go, school down and that is it. Let's click on the next about the previous post right here. Let's see, and then you go school down, the image goes and you go. So that's exactly how to create eight. A template for your wallet purse posts to create a template for your categories in our archives. It's pretty much the same process all you and introduce to come down here to templates. Click on Add new And then over here you would choose archive instead. A case to choose archive and then template name, I can say archive template, just as an example, create template and again elemental provide you with some pre built layouts. I'm gonna ignore them. I'll go with my templates. Go ahead and set my global head. Ah, first of all, Okay, so now over here. Because you're creating a temple for your archive. Elemental automatically add the archive section with three different kinds off elements. You can you specifically for your archives. So for me, right now, I can first of all, go with the head in congest. Drag this in here and I can call this, for example, Blawg posts as an example. That's a Lend this to the center. Let's make this pretty big as well. Okay. Oh, that's a bit too big. Okay, that's fine. Let's go back to elements now under archive. I can drag the archive posts and then simply job that in here and then from here, you can modify the way you want to display your posts. How many of them? How many columns and so on. And then once you're don't just hit publish, and then in here you will have to set your condition. So click on add condition right here and then you can specify. Okay, doing a display this on all your archives which would be author archived at archive post archive categories, tags. Or you can be more specific and simply say no. I'm gonna go with specific kind of offers. You click on Author archive and then in here you can search for the name of the author and then simply add that condition so you can fully customize where you want to use a particular kind of temperament. It's for your your regular Alcantara categories, such results and so on. And then once you've done just hit saving close and that's been much it so that's how you would create a template specifically for your archives. 48. Working with the Font Library: All right, welcome to this very quick update. So apparently elemental has just released a brand new icon library which would give you access to more than 1500 free our front. Awesome Aikens. So this video's been made on July 7th 2019 end. Even though this is not like a groundbreaking updates, it's still every mind of it, the folks over at Elemental at constantly looking for ways to improve the functionality off their plugging. So what I want to do right now is to quickly show you this new feature and how you can access the ICANN's. So the first thing you will introduce, of course, to update your version of Elemental. And I believe ah, the version right now should be who actually don't remember what the version is. Anyway, I just make sure you hell mental plugging is operative every latest vision. So once that is done, if you go to any page, the way this works is you would have to click on a widget that would actually work with icons. A very good example right now would be like your social media Aikens. There's an example right here. I do have my social media likens. So if I clicked on, say, the Facebook, which it as an example and then in here you have Social Aikens. If I clicked on the Facebook link right here and now have access to this known as the icon Library. However, because this is the first time I am working with this Ben, you Aikens. If I click on Aiken Library, I will say it is a message saying that we need to update the icon libraries. I'm gonna click on updates and this will take us to the back and bell and I'll click on Upgrade to Fund Awesome five K and then you'll see this weren't in its fine. Let's go ahead and click. Continue. And OK, so the upgrade has successfully completed and, uh uh, cape right. So if I go back down here and go to like Facebook as an example, let's just wait for this to load. I came and then click on Facebook right now. So in here right now, if I click on Icons Library, this is what you now have access to the different kinds off our icons available. There are over 1500 of them and you have the three main categories. So you have the fund Awesome. Which is would be the like, the irregular Aikens. Then you've got the solid Aikens inhalers will. And then, of course, you've got the brands and this is actually pretty cool. You have access to depictions of icons Drew Pul e bay, Dropbox Discord Dig. I mean, this is really, really cool because now you no longer have to go online and begin searching for our icons for this particular kinds off companies or brands. If you wanted to. It's really amazing hop sports as well. Job. Ah, that's what else do they have here? They've got left link. Then of course you've got line. This is really awesome. Operate as well. Ah Finnic Spin, Celeste. Cool. Well, there you have it. They've got different different kinds of icons in it, so that's pretty awesome. I can also click on just all Aikens if you wanted to and just get like the glance it every single kind of liken they have in here. Or you can just come in here filter by name. You can type in our elemental and of course you'll have access to the elemental I can as well you click on recommended. And of course, this will also give you access to certain kinds off Aiken's that will go best with water trying to and again, If I could train to add in this case right now, I'm going to add on Facebook. So naturally the system would recommend our icons that are related to social media. So in here right now, for example, if I click of a community can sweat never got YouTube, Twitter, twitch, Spotify and so on Steam, Vermeule and so on and so forth. You can, of course, also upload your own actions as well. Just click on the apple button right here, and you would be good to go. So once you've chosen your silicon of I can you click on ah inserts once that's done, of course, gonna comedian begin to our customized tends to call if you wanted to and do the rest of the customers cause musicians that you need to do so. That's it for the quick update toothy Aiken Library. Think it so much for watching. And of course, if there are any upcoming updates, I will do my very best to inform you about them. Think of watching and ah, I will see you in the next class