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.