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