In this video, we will see how to create header and footer using elementary for free
So as you know in elementary pro, we can easily create header and footer. But in this video
I will show you how to create the same header and footer using elementary free version
And not only header and footer, we will get a complete theme builder with which we can create blog page
block, archive page, single page, woocommerce, product page and single page and obviously header and footer
And why we need a limiter for creating and foot is because 15 provides us specifically for hidden and foot
which we can customize a little bit while using element. We can create head and foot the way we want
we can have multiple columns, multiple videos, we can put a logo
quick links, recent post gallery Instagram feeds and every element available in the limited in its
we can use them inside header and footer. And this is the photo that we will be creating in this video
As you can see we have a logo here, some text, then we have contact info
quick links, listen, first sign a form we have social icons and you can customize this based on your needs
Let's say you don't need listen first, you can put together here. You can have the contact form instead of this one
you can display your logo, text, you can display contact section over here
so on and so forth. The limited here, the flexibility to customize and the best part of this tutorial is the mobile photo
Let me show you quickly if I switch to mobile view here
you can see we have this type of photo. This is like we have in mobile apps
And if I scroll the page, you can see this is sticky to the bottom. And basically these are menu items
You can change the icon, the text and you can link them to a specific page
And uh we have this menu as you can see this is opening to the website. And by default
this will open to the side, I'll show you how you can make this to our website and this is our menu
As you can see, this is also sticky and obviously you can also change these items and text and can link them to specific pages
So while using a limiter, we can have different in header input for mobile and desktop
So let's see how we can create head and input using elemental. And before that
if you want to learn more about word and elemental, then you can watch my previous videos in which I have covered all the topics
including how we can make a complete word website. Now, let's start creating this photo and uh for that
we will need two things. First one is the elementary obviously. And now to get elementary and connect to your website with elementary
you just need to follow the link in the description. Don't worry, we don't have to buy the pro version
We just need the free version of Elemental. So just follow the link in the description which will take you to this page here
You can try the free version and this will take you to sign a page where you can sign up using your email or you
can just continue with your gmail. So I already have an account here
I'll just sign in, sign up, sign in, you will see your website that you have connected
Now let's see how we can connect our website to Element so far that you just need to install Elemental first
Then you can go to its settings and here you can click on connect account
then you will have to go to your website URL and you choose your account and then click on connect and that's it
Now, we have connected Elemental and now for getting hidden photo, we need another free plug in
So again, go to the second link in the description which will take you to this website and we need this plug in which is
Royal add ons and here you have multiple wis available for free
So you can use these in your website as well. And we have a theme builder also
So to install this plug in, you can just download this here or you can go to your plugins
click on add new and here you can search for Royal Adams and you will see this plug in Royal Air Dance header and footer
builder pop ups, post grade and so on. Just instantly activate this plug in
And once you to this plug in, you will see another menu here, Royal Air Dance. So here you can find the Royal Air Dance
widgets, you can find templates and theme builder. So as we are creating hidden footer
so we will go to theme builder and as I said, we can create photo archive pages
single pages, product pages and so on. So in this video, we are going to create a photo
So we will go to photo and here as you can see
we already have a photo, which is this one and I'll create another one for you
So to create a photo, you just need to click on create template and give this title
So I'll call this custom footer and then create and then you
can give this a condition. So click on that condition and uh we want to display this on the entire website
So you will see the condition. OK? And this will open up elemental page better where we can start designing the photo
So as we are creating this page, so for that first, we will need a section
So you will click this place icon and we will create a blank section and we'll give the same penny
So I'll go to advance and uh we will give this top and bottom padding and now we will give this background color
So let me pick this color. We go to style play type color like
this. And now we have four columns. And as I said, we can have multiple columns
So let's create four columns for that. We will at an intersection and it have two columns which we can duplicate
So the first thing here is the logo. So I'll search for logo and as you can see
we got a logo which is by Rojas. So we can display our website logo using this plug in also
And for that, we can choose an image. So I choose this one
we insert this and you can display another image of devices and mobile devices
But this is fine for me and this is the site title. You can change it or you can just hide this
you can do the alignment for this and so on. I'll not cover everything in detail because this is just to show you how we
can create a photo and then we have this text. So I'll just copy this and will add a text will
play us to that, then I can go to its style and can change its color to this
And now we have contact section. So I have this title. So for that
I'll add a heading. OK. Let's drag this to the column. And uh we call this contact and
we will change this color to that yellow color, this one. So
changes add up to this and uh then we have this contact section for that
We can use list which is I can list and uh remove the two
And for the first one, we will use the phone icon. So search Harpoon and uh we have this one in it and
we can write a phone number like this. Now go to style and you can go to icon
and you can change its color, OK? To that yellow color and the text color here is half white
So go to text schedule and uh you can change this color to this color and to make things simple
Let's quickly add these two colors in our theme builder. So I think uh let's copy the text color first and
uh let's update this. Let's go to sightseeing and global columns and
uh let's add a color. So we will call this text two for example
And uh we will add that color. You don't have to do this if you are OK with this
But I just want you just to make things simple. And uh I'll call this yellow he
milk paste, the yellow color. Now we have these two colors. So let's update this
And will you go back to editor? And now if I click this
I can go to style and I can choose the text to same for this
And uh we have email and location so we can replicate this like this and we can change the second which
is annual insert and you can write email. And if you want to link this email
to your email, then you can just write mail too and fast your email
Now this will be clickable. And uh one more thing is we have location
So for that, you can duplicate this and change the second. So you will search for map
we will use this one and uh you right location. OK. That's it
Now we have quick links. So for that, we can duplicate this
drag this one here again, we can copy this list and we can paste it
Now, you can delete this and you can remove the icon for the first one
You can write home and you can link this to your home page
Then you can duplicate this and you can write about, you can link this to your record page and so on services
and the services page. So this is how you can create a menu or you can search for a menu and
using ra and plugins. You can display your menu here. If I drag this as
as you can see it, got our menu and this look. So this is the menu I have on this website here
And again, you can customize its colors and so on. But for now this is fine
So we will remove this and uh let's duplicate these to make things quick
So for example, this is our menu and OK, we will change this to quick links
What else we have recent post. So let's copy the title and uh simply duplicate the column
We will change the title. You need to remove this and we will add our recent FS
So search for FS and you will see for great slider carrier
This is by Roy Air Arm for free. So just drink this and now you can change the style here
So scroll down and inside layout, we will change this to list and
for the columns, we will choose one alignment is rive which is fine and we will hide filter and
we hide pagination and now let's hide the sticks and the red wall
So for that, we can go to the limits and uh we will only give title and we will remove everything else
date, comments, excerpt, read more. And uh now we only have titles
Let us go to query and we will change this to only three posts
I am just matching this layout here. OK? And we'll change the type out of here a little bit
So go to style and uh go to title and uh for the color
we will use the same color text two and uh typography. We will change this way to 500
and 16 point size. OK. That's it. Now, we have recent posts also and then we have this sign a form
So for that, you can just add a new column. Don't worry
this will be OK. In the review. If I and uh to add this sign a form again
you will use Royal Airlines. So if you click this icon and this will open up all the elements that are available in this plug
in and you can go to category and you can choose mailchimp
This will show you the forms so you can use all of these and I have used this one
So I'll just insert this. And now as you can see, we got that form
let's quickly fix this. So we reflect this. We'll go to style
OK? We'll go to General and we can hide this head. So click on this
This will hide everything. Now you can just copy the column and can paste it here like this
Let's remove this because we don't need this. Now, you can click on this and you can go to style and here you can customize
everything about the form. I'll just go to button and uh I'll change its color
So I'll choose that yellow color. This is the ingredient. You can choose a simple color like this
And now we have subscription form and uh this is the title
So I'll copy this and uh let's duplicate this and bring this over here and uh changing
And now you can align this to the right side. So click on this and uh go to advanced
you can remove the padding. OK? Now we have this form and we need these icons now
So for that again, we will copy this and we will face it under the form and we'll call this all of us
And then uh we will search for icons and you will see so I can drag this one here and now you can change the
styles. So instead of ground that you can choose a circle and you can go to your style and instead of official color
we will use custom color. We have this yellow sofa date, make sure you make the frame color too transparent and
uh the secondary color will be yellow like this and uh you can notice the circle around
So for that, you can go to border, you can choose solid one fix
And again, that color like this and uh what else we have this divided and this text
So we led a divider, he will change its color to
that takes to then we need this privacy policy and copyright. So let's copy this and uh we
will add text here. OK. We will need another an intersection first to have two columns and then
we can copy this, paste it here, copyright text. Then again, we can paste
the text here and uh we can write our links for privacy policy and
terms and condition or something and you can go to style and you can align this right side like this
And only one thing is we need to fix the size here. So for that
you can click on this, go to state typography and you can change it straight to 500 and you can change the size to
something like 26. OK. Let's find this out. Be here 25. So
25 and the weight will be 600. I can copy this and paste it style
on all of these. And we need a little
space in here so far that you can add a special like this
This will be 233 and now we can click on this, we can align these to the right or left side and good
style and we can change the size like uh 22 or something 18
and uh change its spacing also like this. If you want to add more items
you can go to this and you can add item, change your cycle like Instagram and insert
that's it. You can change the link here. So now we have the foot and uh let's review this looking good
One thing we have this bottle over here so far that you can click the logo
OK? Go to style, scroll down and uh you can change the bottle to none
That's it. So this is our photo that we just created, same as this one
Now, let's see how we can create the mobile photo. So if I inspect this
OK, let's close this and uh go to mobile view we have in this portal
OK? So let's see how we can create this. And for creating this, we will just add a new section first and that will be
uh five columns. Now we will add the section and now we can start adding our icons
So we will add icon dots. This is right the the and uh we will change the icon first to how and
for the heading you right home, we can remove the text because we don't need this
We can link this to home and now go to style and you can change the spacing here
You can change, I can size and you can go to OK
This is and you can go to content and uh here you can choose the spacing to be zero and you can change the title
Typography as well. So let's make this 18 R 16 and
uh 400 15. And uh we will change this color to h like
this one. We can change the line to me. Now go to
I can say and especially like the. Now that's it. That is how you can make these items
So I'll just duplicate these. And now we only have to add
our menu here so we can search for our menu and we will use this navigation mini wire earlier
just drag this and this will display the menu and as we are not displaying this put and disturb you
so we can hide this menu and we can use the token. So for that, you can go to mobile menu
you can see this on tablet and mobile. Now to quickly show you you can switch to mobile or tablet view and you will see
this. Now if I click this, this will open up the menu and uh that's it
And now we will hide the first photo for mobile and tablet
So to do that, you can edit this section, you can go to it once responsiveness and you can hide this on tablet and
mobile. And same goes for this one. We will only display this on mobile and tablet
So we'll have this on the top. So this is our photo
Now we can update this. So this is the previous order. And if I refresh this
we will get the new photo. As you can see, we have just missing also and one link is missing
So again, you can go to disturb you to fix it, you can click on this and you can make this pull with update
and refresh, that's it. So this is our photo now. And uh if I switch to mobile view
then one thing you notice is the photo is not fixed and we have this layout
So let's see how we can fix this. We will switch to mobile view for all these columns
We will change the bit so 20% and I'll copy it style
play style on all columns. And now we have this butter and let's update
this and let's refresh. I scroll down, we have this now, now this is not
fixed in the bottom. So to do that, you can just go back, click on this section and inside it
one settings you can see make this section tricky enable this. And now you can enable this for the devices
So we do need desktop, we only need mobile and tablet and uh you can fix this on the top or on the bottom
So you will choose bottom and for the position, choose fixed. Now you can update this and
the address. Now you can see we have this foot and we just need to change its background
So again, click the section style and uh we will make this wide and
that refresh. And if you need some shadow hair, then you can do it easily
just go to style again, go to water and go to Bob's shadow
you will see the shadow just change its color, that's it. So as you can see the shadow here
Now we only need to fix this menu. If I click this, then this is opening to the bottom side which is not showing you
can notice. So let's see how we can fix this for that
Let's go to advanced and I need to copy its ID. So I'll make this unt sticky for now
And now if I open up the menu, then this is our menu, I can copy its ID
So this is the ID can just copy this. And now we need a two line of CS S code
So for that, again, you can enable the thickness and update. So as you know
in the broad and we can add our CS S here. But if you install this plug in
you will also be able to add your CS S here or you can just go to customize and you can put the CS S
over there. So just go to customize, then you can scroll down
go to digital CS S, you can switch to mobile view to see it and now you can write this code
So I have the ID. So I'll just enter that. This was for the previous photo
OK? I'll just add that ID with the hash temple and, and we will give you some top margin in minus so margin
top minus 200 K. For example, let me show you if I click this then
as you can see this is overriding the menu. So you can increase and decrease the value here
Let's make this 50 and this is perfect. Now, if your menu is long
then you can change the value here to something like 350 and that's it
Now, let's go back to 250. And this is our menu. Can you just publish this and
refresh your website? So this is all the staff. And if I go to mobile view
this is our mobile photo. And now you can customize this based on your needs
You can display another icon here as I showed you earlier. And if I close this
you can also change these things. Like you can display a gallery here
you can display Instagram widgets, so on and so forth. So this is how you can create a photo using free limiter and I'll show
you how we can create here in the next video. We will also go the other things like the product page
the single post page using element for free. So stay tuned for the next videos
And I hope you learn something new in this video. If you have any questions you can ask in the comment section
Thanks for watching and I'll see you in the next