VISIT WIX
Wix vs. Elementor Review: Which Should You Choose?
Tutorial Hosting
[Music]
hello
everybody this is eric at learn design
with eric
and today we’re gonna take a little look
at
wix versus elementor now elementor
is a plugin for wordpress
and so if you don’t know about wordpress
then you probably have never done any
web design
at all but wordpress is by far
the largest and most popular
web portal besides like full-on html so
let’s see
what percentage of the web
if i can type is using
wordpress let’s see it changes every
month
so uh wordpress market share
statistics so this looks very good
40 of all websites i don’t know how
current this is in any case
let’s just say it’s a crap ton there’s a
lot of people using wordpress and it’s
continuing to rise
uh my small company that i work for we
actually just this year finally
moved over to completely wordpress-based
hosting mostly because of the fact that
our strategy team can go inside the
website and
optimize for advertising and we don’t
have to have as much of a development
team and so it works out great and even
somebody like me who
knows enough to be dangerous but that’s
about it i would not at all call myself
a developer i am
purely a designer but i do know
development in a sense i know enough
html
and css to
discover what’s going on within a
website so anyway i don’t want to
be lagger this too much more so here’s
what i got going on i got this website
right here
that i did several years ago for a
uh men’s uh
it’s basically a men’s event that i am a
part of i’m
um on the board of directors and it’s a
christian men’s event that’s held
in camp tadmor up in the
mountains up outside of
lebanon oregon and it’s a really super
awesome event
and we get really great speakers and
musicians and
you know have a great time and i did
this
website for the for the event several
years back
and last year because of covid we didn’t
even do the event and so
i didn’t update the site and we we did
kind of some other things but
you know steak lots of steak look at
that we do
a lot of steak uh anyway uh the event is
like
a couple thousand guys come up we sing
worship we
have a great time we shoot guns we run
around in the mud
just do guy stuff all weekend long i
play a lot of board games because that’s
my thing
but any case that is what the event is
and i am currently got this thing on wix
and i believe it was like 300 bucks for
three years or something like that so
it’s a hundred dollars a year for
hosting
which i mean isn’t bad in the scheme of
things but
it’s not cheap either and you can get
bluehost
for like a hundred dollars for three
years so it’s three times more expensive
than bluehost
and i uh i need to do
update the website anyway and one thing
that’s kind of a downer with wix
is when you go inside wix and let me
just show you here let me just go into
wix here so you can kind of see
what the back end is like here so let me
go in
to this thing
sign in
and you can kind of see how it
structures it inside
and so um once you’re in here
then you can go into site actions and i
always just right click on this and open
a new tab
or well i try to maybe it’s not gonna
work
okay edit site oh it opens a new tab
automatically
great okay so here’s the site
and when you’re in here when you
originally create the site
you create it in essentially you
you pick a theme so when you start up
the site you originally
pick a theme and then once you’ve picked
that theme you really
can’t change the theme so if you didn’t
like the way it looks
the way this side nav works and all that
stuff
uh and it won’t show it to me because
i’m in
but the way the side nav works and the
way it mobilizes
if you didn’t like that suddenly oh
that’s right this site’s not
wix is not exactly responsive it detects
different uh viewport sizes and then
kind of
adjusts but in any case the point is if
you didn’t like the way it looks
and the structure of it you would be
kind of screwed if you wanted to change
to a different
amount of content if you wanted to
change the content dramatically
and i built this as a one-page site
because really
it’s like a hey here’s the event and
if you just keep reading down this is
you know who’s coming to the event
and there are values and you know you’re
you’re going to start going down and
seeing like all of the
things you can do at the event and
that’s it there there’s not much to it
so
you know the point of having a big long
whole bunch of pages
is kind of silly it’s it’s a it’s a
single event so we have
a landing page basically to get you
there and i’ve got a bunch of call to
action rows and you can
you know interact with them generally
speaking this doesn’t say order virtual
roundup it says
register and that’ll take you to a
payment gateway
so that’s kind of how this site works
and then i’ve got
of course our social media links here
and i’ve got this chat widget installed
so you can chat with the guy that
you know is on the chat side of things
and receives that stuff
so the way that wix works is if i want
to add something so here’s the menu for
the page
and i can literally move stuff by just
doing this i mean it is
pretty sweet and it’ll it’ll change
stuff on the page
and you can add page backgrounds and
they give you a whole bunch
in here of like free stock basically but
you can also add your own image
you can add video backgrounds really
easily
you can add additional items they have
like built-in pre-made buttons
they have you know icons and themed
buttons and i mean there’s just so
much option so many great options
and so this is you know one of the
things that’s really nice about wix is
that you can build a pretty robust
website
without having any knowledge of how to
do
web design and and it’s pretty
user friendly you know
changing colors site colors you can go
in here and create your own
theme and kind of just optimize it you
can
there’s additional apps you can purchase
or some of them are free
to add to the site and basically
you know add additional benefits to it
there’s uh
you know your image gallery you can see
all the stuff that i’ve
well these these are like you can get
shutter stock images you can buy
shutter stock video stuff there’s free
wic stuff and then you can of course
have your own
your own gallery this is all my all my
assets that i have
in you know posted on the site so you
can see there’s
not a huge amount but there’s there’s
certainly stuff there
you can start blogs you know where you
have like kind of like
message boards sort of stuff going on
you can take online bookings those cost
extra i’m pretty sure
and uh you can add coupons i mean
there’s just so
many options so that is kind of a little
once over on how
wordpress or how wix works which is you
know it’s pretty cool i mean it’s it’s a
great
option for somebody that doesn’t want to
and this so this is the mobile version
it kind of shows you like a little
thumbnail of what the site looks like on
a phone
and it basically just squishes
everything up like you know most mobile
systems do and i’ll show you how how
elementor works in just a moment
so when you’re when you’re looking at
the ui and wix
or the user experience piece
you’ve got this little side nav option
and everything’s visual there’s no
you can see i’ve got anchor links here
that’s for the navigation menu
and if you want to move something you
literally just grab it and move it like
it’s
really really really easy to use
[Music]
what do you want your name your site
men’s roundup
sites tagline is going to be
where was that
christian conference
camping retreat for now
might change it later that’s uh
so that anyway we’re here to this part
here
we’re gonna use hello elementor it’s a
freebie
uh yeah got it thank you use this theme
uh the reason why we’re using hello
elementor is i’m going to use
elementor to style this site now
elementor
is a free plugin for wordpress
and it gives you basically a wysiwyg
system in order to design your own
website
i pay the extra i think it’s 50 bucks a
year
to do elementor pro which gives you a
whole lot more options including
custom templates that you can design
yourself
for the site a whole bunch more added
options
and just a much much much more robust
experience whereas with wordpress you’ve
got kind of this
back end here which is not visual at all
and is literally laden with a ton of
options
and can be very confusing for people
that are new
and and certainly a lot overwhelming
i mean there’s all these all these
comments and
just all this stuff and you don’t you
don’t even know where to start
so you might think oh i’ll go to pages
which then gives you a list of pages but
it doesn’t
doesn’t show you anything so we’re gonna
do
uh let’s go to the home page let’s go
view i always open links in new tab
so that i can keep my back end visible
to easily get back to it so here is the
home page and when you’re logged in to
the back end
you see this top bar this kind of gives
you uh
quick access to different things and you
can i’m just going to scroll through the
site really quick so there’s me
some of the things i do and uh sign up
form
and all that so that is the site now
let’s edit with elementor and compare
with what we’ve got over here so
once you’ve gotten logged in and you’re
in a position where you can do an edit
to the site
so here is the site now it’s a little
different than what you got over here
but you
still have all these options over here
and you can you can type in so if you
want an anchor
you go menu anchor you just type in
anchor and just
menu anchor you can just drop that
anchor almost anywhere and you can see
where it kind of
wants to drop wants to drop within these
divs
uh a div is a kind of like a container
on the page so
here’s a div and then this is a this is
a headline
and so uh and then this is you know some
type
some just regular type it’s a title
technically it’s an h2
so and this is an h1 actually this is an
image because this is a font that you
can’t
i didn’t want to pay for a web font for
two words
so it’s just just a graphic element
in any case um just to kind of show you
how this works so if i wanted to like
say move this button to the left
you just click on that and just drag it
and drop it
and it’s so it’s really pretty simple
and then just to show you
what you what you do when you go to
tablet mode
all right so we’re going to show i’m
just going to show you a real once
real quick once over this this is
elementor on
mobile and you can change it from
desktop
so you’re seeing it full width here and
it’ll it’ll
scale to the size of your screen so you
know as you as you move it around it’ll
just automatically do that
and then you can go to tablet mode
and you see everything just kind of
squishes up
and then it’ll go to mobile mode
and i’ve already customized this
obviously that’s not
defaulting to this type of format but i
just wanted to show you that
and then if you wanted to add a new
section the one thing that’s pretty cool
is you can just go in here and
it gives you as pre-built
pages this is in pro again and so
there’s a whole bunch of them in here i
mean there’s just a ton
so you can see there’s like a whole
style of site here a whole style of site
here
and so on lots of options
let’s just quick and look at one of
these just to do it
and so there’s physio care
picture of really scuzzy looking doctor
you know headline sub head body copy
book an appointment button
some kind of default service maybe that
you might put together
and some icon lists along with a graphic
some reviews your contact information so
kind of a
one-page landing site style and
if you wanted to you could insert that
in the page
and it would just go right where that
plus sign was that i
that i clicked there’s a beauty page
which is actually not too bad looking
except for the really distracting type
but uh that is kind of how that works
if you don’t want to do a whole page and
you just want to add a
section you can go into blocks and then
you can look by category so you got 404
pages
clients contact faq features header
hero just look at the heroes for a
second so it
gives you these pre-built heroes but you
can really customize these or you can
just build your own
um you know and and that’s actually not
as hard as you might think as well
here’s some team sections you can see
there’s quite a few here
you could also add in something from one
of these pages like if you liked a
certain part on a page like
let’s just say for a second that you
really liked
this look you could literally paste this
page and then delete all the sections
you didn’t want to keep and then just
keep the one you wanted
so there’s a lot of options on there and
then you can look at my template so i’ve
got my footer template and my header
template that are kind of pre-built in
here
so just to look at my elementor footer
elementor header that’s how that is set
up
and you can name them and search them if
you had enough on a big
big huge website it might be beneficial
so
just for the sake of it we’re going to
create our own so if you did that
you’d select your structure so if you
wanted it to be a single section with
full width
or if you wanted half width or three
column four column
one one third column two third column
two third one third and so on there’s a
whole lot of options
six up five up and so on so let’s just
say we’re going to do
another section like this one up above
which is like that right
and so it comes in and you can kind of
see how it’s set up very similarly here
i’ve got a whole bunch of padding here
so let’s just say we want to have a
similar
appearance you click on this edit
section here just to
confirm that it’s selecting the whole
section
the content width is box or full width
so you can see how it stretched out
those pluses
i’m gonna go back to box because that’s
how my stuff’s set up
we go into style you can change your
background type you could change it to
an
image so you can just grab one of the
images from your library
just for the sake of it i’m going to
grab this this graphical image of
me me paddling down the river and now
you can see it’s really tight there’s
nothing here
so if you wanted to be able to show more
of the image like maybe you just wanted
to have the image in the footer here
you can add what’s called a spacer
to this and then you can adjust that
it’s currently set to 50 pixels so you
can set it to
a higher number or you could do by view
port height so this is like percentage
of viewport height so if the viewport is
currently at like i don’t know what this
is a thousand or something
it’s going to be set to 40 of the
viewport height
that’s a pretty good way to do it if
you’re
if you’re gonna you know do it that way
now also notice that this image is being
duplicated
and so the the default position is
default
uh but you could have it be centered
or which again is duplicating it
the repeat is set to default and
obviously the default is to repeat
and so we’re going to say no repeat the
size is set to default because i
imported this image rather small because
it wasn’t going to be
big on the on the page but let’s just
say i wanted to make it cover
now what that’s going to do is it’s
going to stretch the width of that image
to go the whole width of this
of this page no matter how big it gets
[Music]
and if you wanted to make it extra fancy
maybe that’s not the best example i
usually any effects that i do apply i
always turn them off on mobile because
they tend to not work well on mobile
phones
but uh what i’ll oftentimes do with
these is
make them fixed and what that does is
is this effect right here so if you’re
just putting a graphic
in and you want to just have it kind of
on your page
and not taking up a ton of room you can
have this nice narrow strip
and and you can have it set to you know
background cover
which is going to fill you’d want to use
a higher resolution image this image is
not very big
like i showed you before when it was not
background cover and just default you
could see how
small it was turn that off so here we
are that’s the width
of the image that i imported originally
and set to back outbound cover that’s
not really that great of a
a way to go but if i imported a higher
resolution image that
would probably look pretty good so
that’s a little bit of how you can style
in elementor
and then there’s a lot of other options
it’s you know like i could put a
headline in here
i’d want to get rid of the spacer if i
was going to do that or
lessen it significantly so we can change
this
header to uh you know
my header here
and then maybe we write right align it
or something
and then style it so that it’s not black
so we can see it
and then we could add some padding to
that
so maybe pad that top
50 bottom 50.
so you can kind of see you know it’s
just an example i’m obviously not going
to use this here because it’s ugly
and then if you want to remove it
obviously just click that minus button
and it’s gone
and then you can update your site and it
that saves it and then if you want to
see what it looks like on the page you
click the little three
there and you can view your page and
that will hide
kind of the other elementor elements
that are there
like that section that was gone so that
is kind of how elementor works in
comparison
to wix so wix is really really
functional useful for somebody that
doesn’t know that much about
how to work the internet and elementor
using wordpress as a back end is a lot
more robust a lot more customizable
gives you a lot more options i mean
there’s literally an
endless amount of plugins that you can
install on your wordpress site of course
if you do install an
endless amount of plugins you’re going
to have a really horribly
bad performing site but you know i’ve
got google analytics installed here
and you know this is the bluehost
control panel which i haven’t
uninstalled but maybe i will i’m not
sure
jetpack gives you lots of nice features
that are kind of built into wordpress
and it’s a free thing
there’s actually nothing here that i’ve
installed that’s not free
you can get premium versions of yoast
and wp forms and some of that other
stuff but
i have not found the need for that so
anyway that’s just a quick once over on
wordpress
and elementor elementor being that
really super user-friendly
front-end element to styling your
wordpress or
styling your wordpress site and the way
i build it
and and i’ll show you when i go into the
new site that i started
the men’s roundup site which i’m going
to be covering maybe in the next video
i’m going to kind of start i’m going to
show you how i set up
an elementor site how i start to style
it
kind of where i start with and where i
go to
in kind of a probably a couple part
series because i have to do it anyway
and so
i figure this is something that i know
that a lot of people are probably
interested in
i know i could have used a video series
like this when i was starting up in
elementor just to
get myself a once over before i dove in
but anyway that is what i’m going to be
covering in in the next couple weeks
after this
and i appreciate guys taking the time
today and thank you for watching my
channel and
if you like what you’re seeing i would
really appreciate it
if you would give me a thumbs up or you
know like my video
and if you want to continue to see this
and get the weekly updates
go ahead and subscribe to my channel and
then also if you want to connect on a
deeper level
i have a facebook group that i set up a
private facebook group
if you just go on over to facebook and
there’s actually a link in the
description below
where you can go on over to facebook and
request
a connection and i will go ahead and
approve that and then you guys can talk
to me directly we could even
you know like chat and uh
you can ask more detailed questions than
you can ask you can
you know send videos images whatever
that you’re working on if you want to
have
me look over your stuff and give you
some thoughts
or ideas uh maybe some you know opinions
if you’re looking for that kind of thing
in any case i appreciate it very much
this is eric with learn design with eric
Introducing a series using Elementor to create a website. Today Eric begins his project to convert the Wix Men's Roundup site, where it is currently hosted, into a WordPress site using Elementor for a much more robust experience. Wix is great for someone who has very little web development experience or just wants to build a website quickly and doesn't expect to make major changes to the structure. If things change dramatically often, Wix is probably not the best option for you. Elementor is a free plugin for WordPress that offers WYSIWYG = what you see is what you get… functionality, allowing you to drag in new elements and easily create your own look or use predefined templates. I use the PRO version, which you can purchase here: https://elementor.com/pricing/ The Pro version offers a much more robust experience with tons more options and a really great template creation feature. Join me over the next few weeks as I show you how I build the new Men's Roundup site piece by piece using Elementor and show you some advanced techniques. Join our Facebook group here: https://www.facebook.com/groups/learndesignwitheric Thanks for watching! Don't forget to like and subscribe so you don't miss future videos.
#Wix #Elementor #Review #Choose
