Elementor – Basic Editing

  • Web Builder
  • Web Developer
  • Web Marketer
  • Search Engine Optimization (SEO)
  • Google Adwords
  • Search Engine Marketing (SEM)
  • Social Media Marketing
  • Website Management
  • Website Training
  • Content Services & Search Engine Optimization

in this video we will go through just a

quick run-through of how to use element

or how to get into it and just do some

very basic edits so once once you have

Elementor on your site you’ll notice

that instead of using the usual

WordPress editor area when you go to

there and you turn on element or if it

doesn’t show that edit with element or

option it’ll show just you know the

basic WordPress content editor area and

then you’ll click Edit with element or

elemental reload up and then you’ll be

able to use that with your page so we

just kind of let it load there we go and

now elemental would be loading you can

see the bar at the top it’ll be going

across just loading the page and this is

where Elementor is so from here you can

kind of see as you hover over stuff if

there’s anything on the page you can

hover over and just shows you you know

what box you’re in what column you’re in

what row you’re in and just you can just

see how much functionality you have

using this you know but you can just do

a quick column change you know you can

do just just everything very quickly and

keeping the you know keeping a good

design and you know you can kind of come

in here do the text let’s say you want

to change this bit of text right here

click in here I would recommend doing

the text tab and then there you go

there’s your text edit the text it’ll

edit the page so if we want to take you

know maybe this out right here

there it is it’ll show the update right

in the preview window let’s see here

about the padding and the margin around

stuff this will come in handy when

you’re adding your own

rose and just adding your own content is

you may need some space within you know

your your row or your column wherever

you’re working with so what you can do

is in your row so like this blue this

blue these blue tabs appear show this

blue you know

border around this section which makes

this a row and if you click the edit

section button right here this is where

you have control over your row you can

say if the content is going to be full

width or boxed within you know the

content grid you can say if the content

position you want it towards the middle

of you know the columns at the top the

fall it doesn’t look like they have much

of room so they’re not going to move too

much you can change the style of the

section over this row so like you can

give it like a background color right

here let’s maybe give it a little bit of

a grayish background like that or we can

give we can put an image we can set an

image as the background right there if I

don’t want it to repeat so we’ll say

no-repeat a position Center size cover

you know stuff like that so that’s just

kind of that little bit of stuff that

you can do with the rows and then the in

the Advanced tab up here this is where

you can control the padding which you

know will come in handy when you’re on

different devices so about the different

devices right now we’re on desktop and

if we change that down to tablet there’s

tablet and we can see that the padding

it changed to the tablet so you can see

the tablet is now blue so we can

actually give custom padding only on the

tablet and if we change this to a mobile

device right there we can then give it

some custom padding just for the mobile

device let’s go back to desktop looks

like it’s just a bunch of more text

stuff to edit

there are some some custom elements that

you know the little counter element

which is kind of nice you can you know

say how many clients you have probably

completed stuff like that a little call

to action there so if we want to build

something custom like we want to let’s

see let’s do this right here add a new

section right there so now we have our

new row we have our own row we can go in

here find maybe we want to put an image

in there put an image okay so maybe we

don’t want an image so huge maybe we

should add a couple columns and then put

the image in the middle column so let’s

do this go up to the column right click

it click add new column so now we have

two we’ll add another one now we have

three so we can take this move it to the

center and now we can choose our image

let’s make it full size and we can

choose an image put it right there in

the middle and there’s our image and we

if we think it’s a little too close to

you know the top or the bottom like

let’s say we put it maybe somewhere

about right here so it might be a little

too close to the top content so let’s

add a little bit of padding to the row

there we’ll go into the row this thing

right here you can link the values

together so if you edit one of them it

will edit all of them or we can turn

that off like this you can unlink it

like that so we just want to add some

top padding give a little room there we

go maybe about 40 pixels okay now we’ve

got a little room above our image and it

looks like the bottom is pretty good and

then what we can do is we can then check

on tablet make sure it looks good yep

good padding and good pay

okay so that’s just adding rows and

putting some stuff into them to remove

this we will just click the X to delete

the section and it’ll do that if you

accidentally delete a section you can

always go back to the history option

right here click history and it’ll tell

you what you did section removed so we

can actually go back to this before we

remove that section and now we have it

back so that’s always an option there

we’ll just remove that so we want to

keep that removed okay we can look at

the different elements let’s see about

adding a section right in here okay so

what I did there was each row has this

little plus icon and what that does it

adds adds a section right above the one

that you’re editing so if we do this

it’ll add a little section there and

then we can add anything we want to

there let’s go back to our elements

maybe grab a Google map put in there we

can add an address there we go put one

for Indy change the zoom and if you put

in a custom designed address of a

business it will most likely grab the

business name up here if not you’d have

to go the route of going out to Google

getting the iframe and then putting it

into the it’s called raw HTML or

actually let me see HTML there it is

it’s called HTML and you’d have to put

the iframe code of the Google map in

there to do that so there’s our Google

map if there is a little spacing around

at what we can do is we can go to the

column settings just kind of remove the

space

make sure there’s no padding no margin

go to our go to our row settings make

sure there’s no padding margin MX

that it is full width okay so there we

go perfectly full width google map on

our page let’s go through any other

items I’m spacer if you want just a

little bit of space or something but

Patti’s usually used for that you can

add padding but if not you want to add

maybe some quick space to something

there you go

you can add space tell how many pixels

and you can also change that on

different devices we don’t want that so

let’s right-click it and delete it I’m

here some this is just the basic stuff

you know icons pro items if you have

that option there’s the different Pro

items we don’t really need to go into

detail too much about them let’s see

yeah so there’s like the slider a

navigation menu if you want that

somewhere yeah just kind of

self-explanatory stuff there you know

you can add Facebook embeds to your page

some share buttons and here are just

some more general items if you want to

add then like accordion or toggle like

where you have you know the text like

you have some text and then you can

toggle it like that that one comes in

handy a lot like we use it pretty

frequently with like the fa Q’s si tab

options

image gallery and image carousel we use

that quite often too it’s nice to have

like a image gallery somewhere just kind

of you know maybe it’s like a grid or

like you can you can change it actually

you can have like you know different

columns add columns you can make them go

to into a like a lightbox when you click

on them it blows them up into a lightbox

so you can see them easier just stuff

like that so that’s kind of image

gallery and that’s about it so that’s

kind of just a very basic run-through of

how to use Elementor once

it’s installed it is it is a little bit

to get used to I had to get used to it

from using visual composer and then

switch into this because Elementor has

it’s it’s very own you know page builder

area so I kind of had to get used to

that but once we did it was worth it and

a lot a lot easier to use and it it

makes it makes a you know designing

pages a whole lot faster

Categories
Get Website Results
to our Youtube Channel

Follow Us

Stay in the Know Via Email

Request Free Consultation