Σ Sigma Hosting is mainly a video tutorial website

Σ Sigma Hosting is mainly a video tutorial website that make it easier for you to search within the transcript of videos for solutions of problems you might face during your journey in dealing with different webhosting companies. So, we are very sorry if the text is not well organized and we may work on it in the future but for now we hope you get the benefit mainly from the video then you may need to have a look on the transcript. Thanks for your understanding 🙂

Hi and welcome to this tutorial! In this video we're going to be having a look at How to create a similar Hamburger Menu
using Elementor page builder As you see once you click on this hamburger icon The contents of the menu appear
in the sort of a pop-up The look of which you can later customize
using Elementor page builder In order to be able to create a similar hamburger menu You're gonna need access to creating
custom headers and footers You can gain this possibility in a couple different ways The first one is to look for a free solution Meaning to look for some free
WordPress plug-in But it's not always the safest solution Since no one can guarantee you
flawless performance and technical support The other way is to subscribe to Elementor Pro And you're going to have the ability
to edit custom headers and footers The third one is one that I'm using in this video And it is getting Monstorid2 WordPress theme That gives you the possibility to create
custom headers and footers And a bunch of other advantages Such as a dozen of Jet plug-ins Which are a great functional
and highly performing add-ons for Elementor Also you're getting hundreds and in total almost a thousand of Ready-made pages and sections that you can use anywhere on your website And that can be accessed from a one single place There's a lot more of features to
Monstroid2 WordPress theme so Don't forget to check this thing out And follow the link that I have pulled
in the description under this video If you're not using Monstroid2
you're gonna need one extra plug-in That is gonna help you create the hamburger menu This plugin is called JetBlocks which
is Elementor header and footer add-on This plugin comes with several widgets That are necessary to create
functional headers and footers If you wanna learn more about JetBlocks plug-in
follow the link in the description To access the live demo and the product page on templatemonster.com If you're using Monstroid2 There is one place where you can access all of the Jet add-ons that you have in Monstroid2 You simply click on the Monstroid2 label Go to plugins, and here you can see which ones
are installed and activated If you're not using Monstroid2 – you can download JetBlocks plug-in separately If you follow the link in the description Now let's jump in creating the actual hamburger menu So now there is a number of ways how you
can access your header and start customizing it It can either be from the library Where you can access all of the theme parts Or you can do it easier way,
simply hover over Edit With Elementor And if you're using Monstroid2 –
there you're going to see Edit Header, Edit Footer And we click on Edit Header with Elementor,
and it takes us to Elementor editor Where you can start customizing our
header And if it's a Monstroid2 Once you enter Elementor editor,
you're gonna see magic button Which is that collection of items like hundreds In total they make up almost a thousand items That you can access all of them
are beautifully designed, fast loading And you can use every single element in
here This include pages, headers, footers, sections, archive and single pages So since our header is already created Here we can already see this hamburger menu And this widget that is used to create
the hamburger menu is called Hamburger Panel And it is actually made up of two little things The first one is the toggle Which is the button with the hamburger icon
where you click in order For the hamburger panel to appear The panel is… Now it appears on your right The panel is actually This section which contains the menu And you can also access all the style settings And I'll be sharing them in detail because those are I'm sure that you're familiar with the style settings in Elementor and you can figure this out yourself And here you can change the width of the panel I want you to pay attention to the fact that actually The contents of this hamburger panel Is simply a template And in order to edit what's inside this panel You need to add it a template here You can access the templates that are
already created, that already exists on your website And if you want to edit the
current template that you have chosen For this hamburger panel – you simply
click on edit template button And now it takes you to Elementor editor,
to another window Where we can actually edit this particular
template and change the way it looks So here it is Now we can't actually see anything because we need to
change the background color of this section Like that The background of the section is transparent
because the text is white and we wanted We want to be able to change the color of the panel While working on the hamburger menu so
here In this settings of the template
we'll leave the background as transparent So here you can customize
this template the way you want And you can add as many elements of
any kind of any type of content as you need For example, let's drop a simple widget here Which is called Banner, and it's a
part of JetElements plug-in You might have heard something about
JetElements plug-in which is the most popular And done for Elementor, and, you guessed it,
it goes with Monstroid2 absolutely for free As well as a dozen of other Jet add-ons So here we have added the Banner widget And as you see it sits perfectly
well in there And now what we're going to do
is to just save this template And now you see, once we click on the toggle icon We can see that here all the
contents Which we have put in the template Let's work on padding a little bit There it goes now Let's have a look at how it works in mobile view or in the tablet view It works perfectly well in the desktop mode But it also works great in the tablet mode And in the mobile view If you want to work on paddings or
margins a little bit You can do all that while choosing
a tablet mode or mobile mode There in Elementor settings And set separate padding values and margin values right there in elementary So it fits perfectly and looks beautiful on
mobile devices and tablet devices So it was pretty much it on How to create hamburger menus with the help of Elementor page builder and a JetBlocks plug-in Don't forget to check out Monstroid2
WordPress theme, JetBlocks plug-in And don't forget to subscribe to our channel Thank you for watching! .

Video Discription

A new Elementor WordPress tutorial from TemplateMonster. How to create a Hamburger Menu using Elementor Page Builder. Watch and try yourself. Get JetBlocks plugin ????
Visit Elementor Marketplace ????

~~~~
Subscribe to Our Channel:

Follow us:
Facebook
Twitter
Instagram
Pinterest
Dribbble
LinkedIn

 

InterServer Web Hosting and VPS

Leave a Reply