Create a Simple Website Header with Elementor!! Full Course | Manav Singla | Skillshare

Playback Speed


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

Create a Simple Website Header with Elementor!! Full Course

teacher avatar Manav Singla, I love web and graphic design

Watch this class and thousands more

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

Watch this class and thousands more

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

Lessons in This Class

6 Lessons (15m)
    • 1. Introduction

      0:55
    • 2. Creating Menus For Headers

      2:29
    • 3. Settings Before Header

      1:57
    • 4. Creating Structure of Header

      4:16
    • 5. Styling The Header

      3:51
    • 6. End of Course

      1:06
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

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

22

Students

--

Projects

About This Class

This is a complete course about how to make simple website header with Elementor. I will be using elementor pro for now and if you want to continue, I will highly suggest using elementor pro.

I will tell you how to install the hello elementor theme and also everything related to the tools that are available in the elementor header plugin.

You will get to know these features:

  • Pages for the header
  • Placemenets for the header
  • Best Practices for headers

But before starting why elementor?  Elementor is the easiest and one of the most powerful website builder and drag & drop software. It helps in building the websites easily and with minimum of plugins and it makes the website loads really fast.

I am assuming that you know basics about wordpress like creating pages, posts, basic settings and everything like that.

Ok, with that out of the way we can get started.

Meet Your Teacher

Teacher Profile Image

Manav Singla

I love web and graphic design

Teacher

I am Manav Singla and I am a proffesional web and graphic designer for over 2 years and in that time, I have learned so much about marketing, creating content, dealing with clients and so much stuff. I want to share my knowledge with the world and I am happy to be part of skillshare community.

I am planning to create courses where I am good at. Especially photoshop, instagram, creating engaging content etc. which are my forte for success on various platforms and they have helped me in landing 50+ clients online and a part time job offline as well.

If you are interested in knowing more about me then please watch my courses, they are knowledgeable and fun (according to me, you are the judge) and I hope to see you there. 

See full profile

Class Ratings

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

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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

Transcripts

1. Introduction: Hello students. So welcome to the elemental headers will goes. And in this course you will learn how to create beautiful headers with using the plug-in named elemental, an element that is this plug-in that I need to create websites to create a doodles. And we will learn all about how to create headers. So for that, I just asked you that you should know some basic information regarding WordPress, which means that you do not need to be awfully export on making websites, WordPress, but you should know some basics like creating pools, creating pages. And if you are familiar with the WordPress workspace, then you get beginning with the schools. And you should also have a plug-in named element that blue because elemental offers of the version 2, but you require approval to sticking with this course. So I will see you in the next one. 2. Creating Menus For Headers: Welcome students. In this lesson, we will learn how you will make menus which are derived from the peaches, okay, if you have ever looked at a website's header closely than you may have noticed that both unjust pages, those are just the length means C, I will click on. This is a website name disposed pits and the amines. There is this min where if I will click on Lexi dogs, then they will get the dots. Okay? And this is just page, so means this speeches are made so that we can make a hidden, okay. So the main these pages, then you should just go to the Pages section of your WordPress dashboard. Then click on Add New. And you can make four to five betas. So I have already made three visit. This is my fourth one. I will create this food page. Dia, you go. And now then I will go to my basis. There are food business, okay? So now you need to make a menu of topic. You just need to go to Appearance, then go to the menu sections. And this is my Min, okay? But I will just delete it and we will make another menu. You need to give a name to the menu. So I will name it Minow, and I will click on Create menu. Then these are the pages, okay? You can also add post to the many. You can add custom links, you can add categories, but unrealistic to the pages. The four pages I have created, I will add them all to the menu. Then you can rearrange the order. And just like I would, I want my home for standby about us first and then my contact forced. And then at last, I will need privacy. Okay? Then you will save the menu. And there you go. After creating the menu, we will start to create our Hegel for which you need element of probes. So in from the next lesson we are going to be start using element approved. So I will see you there. 3. Settings Before Header: Hello, stewing. In this lesson, we will learn what you need to do and what you need to set up before the eventually create our header. Okay, so first of all, as I have already said, you eliminate the blue eye. If you want to check that you have eliminated pro, then you can just go to your plugins. And after going to the plugins, you will see that there is this elemental and then there is something named element of proof which you definitely require. Okay, Elementor Pro is one of the best login to get hit O for doing everything like that. They can customize anything. Okay, and after that, you also need, need this team named Hello Elementor. Okay? This is not absolutely necessary just like element of cost, element approach is absolutely necessary by the team. Hello Elementor gives you full freedom, okay? Hello Elementor is a team that comes with the Elementor plug-in and that is fully customizable, the Elementor plug-in. So you just need to go to the ACT team. And after going there in the search team section, you just need to search for Hello Elementor. Okay? And then you will be greatly to this hello animators. And I doubt that you can install that just, just like this is a team name, hello HV, and you just need to click here and it will automatically be installed. And then you can just activate this team and then you are ready to go. And from the next lesson we are going to create outcrop or header I ve are going to replicate this head of its B. This is a header that we have made for one of our client. Yes, now, we will create our headers, so I will see you in the next lesson. 4. Creating Structure of Header: Okay, students. So after we have completed our installing of the hello element, the team, and we have also installed the element of blue login. Now we are finally to create a new header. Okay, So for creating the header, you just need to go to the templates. And then you will need to click on add new section. After clicking on Agnew, this plugin will pop up. You just need to click, Click on that. You will need to create a header and then you can name it anything. I will name it. And we will just click on Create template. And now we will be ready to create a beautiful template. Okay, I fought this. See, these are some of the customized Teams that you can use, but I will not suggested because we can create a beautiful custom header. So I will just cross it. And after that, you just need to click on this plus icon and then you can derive your structure, okay? Most of the websites structured just like this one has these three points structure, okay? First is this logo, then there are these links. And then in the third section there is a search bar. Okay, this is the tree structure header. So I will create this tree structure header myself. I, after that, you can do some things like there are two, contain quick session. First is boxed and then there is pulled back. For this lesson. I am going for the full bit, okay? And after that, I am here. Here, these other dots, okay, you just need to click on them. Then there is this thing names site logo, and you came down and drop it. And after that, you can means go for them in site logo. I, you can do this also, but I will not recommend it. So either just delete it. And we have the liquidate. After that, you just need to go to the image because image is much better than this. I will just wait a second. Here is my logo. And I think I have made a local heal. And you just need to drag and drop this file here. And for some reason it didn't happen. Again, just click. So I'll open the file here. And you just need to insert the media. I hear is our logo. This is how our site is looking right now, okay? And we're just creating the header so you can just leave this content area to its finest. I don't know. I VE can easily reduce the size of this logo as well, is no issue. You just need to go to the style. Then you will need to define the width of it. Yeah. This looks fine, I guess. And yes, in this is looking really good. I, after that, remember that we have created a menu. You just need to drag and drop this thing im Nav Menu here. And yes, it is as easy as dark. And you can now see what is the power of four days and what is the power of AD might approve. And you are means lower AD for good. Now me, I, after that, I will just add a search firm heel. And via Indiegogo, this header is looking so good, okay? There is no issue in my mind that if I presented you with this header, then you will say, Yeah, this is a work of professional. So yes, this is a simple header to customize it, you need to attain the next lesson and I will see you there. 5. Styling The Header: Okay, So in the last lesson we bake this simple header and today we will learn how to style this herder, okay, so forth styling an element of a header, you just need to click on the element, just like I am clicking on this logo. And in the last lesson also, I adjusted the vertex of this local. But before that I see in the content section you are just defining the container or deal with be written what, what they will be made and everything like that. And you can means change the alignment of it. In the blue section means there is a blue border, right? And in the blue section, I can say that it is in the center. It would be in the left, it will be in the right. And you can just do that. Then there is this caption, and then there is this link. And you can also add a link to another website for clicking on this logo. And it means you can do all sorts of stuff. Now in the styling, I mean, you can define the width of the logo, okay? In the blue border, you can see that it is growing or shrinking according to the site I am putting. Then there is this thing named max-width. And that is doing the same thing. Then there is height, okay? You just need to adjust it according to your taste. And then there is this thing called capacity and howsoever you will means improving it. I think they just start looking. There is this shadow effect. Dark, you can also do from the opacity section, and then from the body you can go for solid. This looks really bad. I do not recommend you to anybody. And yeah, these armies, some B6 stylings that you can achieve through CSS. But in the workplace you do not need to cool a single lines. So yes, it is really helpful for the beginners. Then there is this tingling margin. This, if you will, means use it like this, then there will be no benefit of trusting on that. And you just need to click here and see if you can means do some positioning like this. But again, I will not recommend it because it messes up the mobile system, which is really bad because our website needs to run on mobile. Yes. And as you can position these things like that. Okay. And then there are motion effects and you can also use the background. I will just go for the background. And you see it is this thing, again, not recommended in the logo section of cost and it is broader than this mosque, then there is positioning and responsive is also really great. And if you want to write custom CSS, here you go, okay? Yeah, these are some of the basic stuff in the styling. And it is the same for this header as well. And yeah, there is nothing more for me to say then means if you will use this on a regular basis and you will know that this is really powerful and you can use, use it in a really cold. And then you're going to style the content like this. And there are so most of that I cannot even go. Okay, WordPress is really vast. And if you will practice daily, then you will become familiar with the workspace. And when you will become familiar with the workspace, then there will be no need for me to even make you understand, okay, via emptying the coasts, so on, please again, in the next lesson. 6. End of Course: Hope we have made the course very, very fun for you. And yes, this was the end of the course and give us nothing more, nothing less about behavior section. And as I said, when you will get familiar with that books based in, you will automatically get to know that yes, that this is really easy. So just go for it. I if you asking me that what should be learned, extend, of course I will tell you go and learn the full element of goals, okay, that is really important. You need to learn what is elemental, how to use elemental Ang gives. Just go for it means again, I had given a project in the link below in the project section. Just go and complete that project. And after you have completed project, there is me on our LinkedIn profile as mano singular, you can search me up or you can just, yes, you can just enjoy means. I trust you that you will complete that project until then. Bye-bye.