You should never ever, ever start a web design project inside of Elementor, but you should start in a design tool
like Adobe Xd. Let me explain why. First of all, I wanted
to create this video because I've been getting
some questions lately on why I use Adobe Xd before I start building a
website inside of Elementor? Because Elementor looks
like a design tool because you can
drag and drop. So, why do I design a
website like this in Xd before I go to Elementor? Let me explain why. First of all, the difference between Adobe Xd
and Elementor for the people that
don't understand. Adobe Xd is not a
development tool. Elementor is. Adobe Xd is only for design. You cannot export
an Adobe Xd file into a website not yet. There are some companies that have tried to do this,
but it's really hard. Because it has to do
with columns and code and even if they find a tool, that's what I believe to export an Adobe
Xd file to Elementor then the code will probably
be not that clean. So, now that that's
out of the way, let me explain why you can't really
make a good website without first designing it in a tool like Adobe Xd. You can also use
Sketch or Figma or any other design tool. Don't use Photoshop, because that's
also really slow. Back in the day, that was the only
possible way to do it. But now, you have
tools like these. So, point number one. You can't really
check consistency if you cannot zoom out. Because if you're
working in Elementor, you are working in a zoomed in view
of the website. And in that way, you
can't really check all of the pages how
they look together. But in a tool like this, you can zoom out and
you can actually see like do the pages fit
nicely together? Is this page not too busy compared to the homepage? Is the white space consistent on all of your pages? And consistency is
one of the things that beginning designers don't really pay
attention to. And that's why the design doesn't look as nice
as it could look. Point number two, you can't really
have an overview of the web version next to the mobile version, because in Elementor, you can go to the
web version, or you can go to the
mobile version. But for a website like this, I also wanted to
make sure that the mobile version
looked clean enough before I started to
build the website, because sometimes
on a mobile view, you want to hide
certain elements. On this website,
I didn't do that But sometimes your
texts are really long and then in mobile, it
doesn't look as good. So, maybe you want
a different design for your mobile phone. So, because you can see them in one overview over here, you can already make these decisions much
better upfront. Point number three. Putting old versions
next to new versions. If you're working
with clients, it never almost happens that your first design is
actually what they want. So, a lot of times, for
example, with this website that you can find on my
portfolio by the way. It's a website for
a yoga school, there were 10 versions
of the homepage before we actually landed on the homepage version
that we wanted. Because in the first
version over here, you can see that I added
plants to the design. The client didn't
really like that So, I deleted it like
you can see over here. And then, we had a few
discussions about the colors. Because the client
thought that this color was a little bit
too much pink. So, that's why finally, we ended up with a design
that looked like this. Where it's more
like a red color. And also the titles were a little bit less harsh. So, you can see how much the design changed in like a few weeks of going back and forth
with the client. And this is not
really possible if you're working
with Elementor because if you click save and you close your website, and the next day
you come back, you can't really see
the last version. And of course, you can create a duplicate of your
homepage 10 times but that's not really a
nice workflow, right. You want to see it like, hey, why is this version better
than the other one? And sometimes it
even happens that the client says,
well, you know what? Let's go back to
version number five. And then when you
have already built version 10 in Elementor,
that's a lot of work and in Xd it's just dragging, deleting a few things and you have a new page. Argument number four. Sometimes it happens that the client already
has a website and they want an update. This is what I did
for this website. Now, you can see
the old version of my client's
website over here. And what's nice
about Xd is that you can just screen shot
the old website as it is. You can import those images and then you can
put your homepage next to the old version. Because you can just drag
an Artboard like this and put it next to
the new version that you've created. You can also send a picture
of this to your client so they can actually
see the difference. But this is also nice
for your design process because you can really see what things you need and what things you
maybe want to remove. Argument number five. You can start
with inspiration. You can drag an inspiration in your Adobe Xd and put that next
to the Artboard that you're designing on. That's not possible
in Elementor. So, for example,
for this website, I had downloaded two designs from other websites
that I liked. So, I've just taken a screen
shot of those websites that are found on
Behance or on Dribble. I've dragged them
into Adobe Xd. And then, I just tried to recreate some elements that my client liked
about this website. And then I just made a different version
in his style. And then you could
say like, yeah, well, Elementor
has templates. Yes, well, a lot
of good design is not found within the
templates of Elementor or on a template website, but from other designers on websites like
Behance and Dribble. So, here you can work
with a screen shot. You don't have to
import a template, you don't have to
buy a template. You can just import an image and work from that image. Argument number six. Are we on six? I
think we're on six. You can make an
inspiration board. This is what I also
did for this client. So, before I
actually researched full screen shots
for this website, I made an inspiration board. And I sent this inspiration
board to my client. And then I told my
client like, hey, what style do you want
for your website? And then he said well, I like the fourth and the sixth
version, for example. And then I knew what
kind of style he liked. And from there
on, I moved on. So in Xd, you can
really easily make an Artboard like this and put a few pictures in it and send it to your client. You can export this Artboard as an image and then
send it in an email. So, to sum this
first part up, if you think you're faster by starting in Elementor, you're actually not. Because in the
design process, the client doesn't know what they want
from the start. You don't know what the client wants
from the start. So, if you can make
those decisions upfront before you start in Elementor you're going to
save a lot of time. And yes, you have to do a little bit of
preparation work, but at least you
don't have to change the Elementor
website 10 times. Because when I start in an
Elementor build process, then I know that the website will almost not change maybe a few things
here and there. But it's a really
nice experience because if the client
agrees to my design, then I know what
I have to build, I could just build it. And you know, not a
lot will change. So, for example, if
your client says, well, I don't know
if I want a blog. You can say like, okay, I can make a design,
you can look at it and then you can tell
me what you want. Well, if you need
to create a blog inside of Elementor, you have to create
an archive page and then you have to create a single blog post template and you have to connect
those all together. It takes at least 10
minutes, I would say. But in Xd, it takes
a few minutes. All you have to do is just create a block like this with the repeat grid tool, nothing has to work. You just make a
screen shot of this and you send it
to your client. And then, they can say like,
oh, yeah, that's nice. I want that or I don't
want that, right. So, you won't waste any time by building and all
the technical things that are required
in WordPress. Because in a professional
design process, you always have four steps. The first step is deciding what kind
of pages you need. So, the client maybe says well, we have one homepage, we have an about page, we have a portfolio page, and a contact page. So, that is step one. And this is very important to let your client
decide what they want. Because then they have committed to that choice and they know it's
not very nice to start up the conversation if you've already
built something. So, that's the first step. Then step number two
is the sketches. You create a sketch on paper, or maybe on your iPad. Something like I
did in this video. Or you even create
a Wireframe like I've done
for this client. Because this was
a big project so, I really wanted
to make sure that the client knew
what he wanted before I even started the
visual design and WordPress. So, that's why I
made a Wireframe. And I said to him like, hey, do you like this idea? That we first
have this section and then you have a
little bit of about. Then I explained to him like, hey, this is my idea
for the website. This is where your
tourists come in, because he sells tours. And this doesn't
take a lot of time because I don't have to
worry about the colors. I don't really have to
worry about defaults. I can just put in
all the content that I think that
this website need, I can send this
picture to my client. And then my client
can decide like, hey, do I like this
structure or not? And if you don't use colors, they also cannot
comment on the colors. You just have to say like, hey, this is just
for the structure. Do you agree with
this Wireframe? And if they then say yes, then again, for them, it's really hard to say no when you actually start
building the website. So, you just forced them
at the right moment to make the decisions
for their website. And of course, you can
also help them of course. I'm not saying put all of the decisions on their side, because you actually already make a
lot of decisions when you design this
Wireframe, right. And then the next step is the actual visual design. So, that's what I did
for this website, I created a few
different versions. And that's when I
put in his logo, I put in some images that he already had
on his Google Drive. I put in some images
of Unsplash website I always use to
get free images. And I really made
it feel real, but it's still a picture.
It's just Adobe Xd without having to worry
about all the techniques for example, this. To create this in Elementor, that's very hard
because these blocks are connected to a
custom post type. So, then you have to
install a lot of plugins. First of all, you have
to have Elementor Pro then you have to
custom post type, you have to have ACF, you have to have
all those plugins to make this section. And in Xd, it's
just drag and drop, put in an image, and
then you're done. It doesn't have to work, but the client
understands what it is before you actually
build the website. So, what I did is I exported all of the images for the most important pages and I put that in
my Google Drive and sent them the link. And then, I said to them, if you agree to the design, then, I will start
building the website. Because if I start
to build a website it's very hard to
change it later. So, please make sure that you really think
about the design. And only if you agree, then I will start to build
a website in Elementor. And again, this
really forces them to really think about is this really what I want? And if it's not
what they want, it's really easy
for me to change without having to worry about plugins or anything else. Okay, so if you
still think now that you are faster by
starting in Elementor, then I really want to
hear your arguments because I don't really
agree with that. It's so much faster
to design a website in Adobe Xd than
in Elementor. And I want to show
you a few examples on how fast this is to design a website
compared to Elementor. First of all, if
you want to start you can just create a new
Artboard pretty easy and you can start
within 10 seconds. If you want to do
that in Elementor, you have to have hosting, you have to have a domain, something to put it on, you have to install Elementor and Elementor Pro
to actually start. And then you're
already one hour in before you actually design
your first pixel, right. Moving elements, you see how easy
this is in Adobe Xd. If you have to do
this in Elementor, you have to go
into the margins and embeddings and
change all of that. Scaling titles, just click and drag. If you want to do
that in Elementor, you have to go
and do the style and do the theme and then do scale. Oh, importing images, if you want to import a few images in a
folder like this. You can just drag it in. And then, all those images are imported into the design. Now, try that in Elementor. Grouping elements, sometimes you want
to group elements because you're
working on design and you're moving
things around. So, it's really nice that you can group within a group. So, you won't have to select all the
elements all the time to move certain parts
of your design. If you want to do
this in Elementor, you have to think
about the columns, the sections, the
intersections. That's really complicated. And in Xd, that's just easy. If you want to use custom
fonts on Elementor, you have to go into the
Elementor settings and then install that
font in the settings. But in Xd, if it's installed
on your computer, you can just select it right inside of
Xd and it works. Alignment grid,
that's a big one. In Elementor you don't
really have those lines to make sure that all of your elements
are aligned on the grids that you want. You don't even have
a grid options. So, those things
are really handy when you're designing
a website. If you want to know the space between certain elements you can just click on
an element, hold Alt, and then you can see
that there's 55 pixels between this title
and this block, super easy. And this is very important if you want to keep
your design consistent. You have the
repeat grid tool, which makes it super easy to adjust the size
between elements so for example,
between the rows or between the columns. If you want to test with a menu on your homepage, if you're working
with Elementor, you have to create
a header template. And then, you have
to go back and forth into the elements to see
if it actually works. And yes, you can technically just do it on your home page. But then you have to do it
again inside of Elementor. And in Xd, you could just put in a header like this, because it's just
a prototype. Speaking about prototyping, that's also really easy. So, if you click on prototype and you click on an Artboard, you can link, for example, the links inside of a
menu with other pages. So, for example, if you want to link this
button to the other page, you can just drag
it like this and then you're done. You don't have to
search for the page, it's all super visible. Oh, if you want to test with a web shop for example, in Xd, you could just create a fake web shop like this. It doesn't have to work, you don't have to
install WooCommerce to create something
like this. It's just a few pictures, a few lines of text, and then you can test if this is what
your client wants. And like I said,
this is the same if you want to create
a blog, for example or a portfolio page. You can do it without
all the plugins. And of course, if you want to
create a Wireframe, that's also really easy
to do in Adobe Xd. So, if you want to
do this in Elementor and you just want
to drag in a title or you want to drag in
a widget of Elementor, Elementor has already applied certain colors and styles to the elements
that you drag in. So, it's not a real Wireframe because a Wireframe
with colors is actually not a Wireframe. or you could call
it a Wireframe, but colors impacts
the quality that a Wireframe can
have on your process because it's a distraction. And lastly, I
want to give you a few missing features that Elementor just
doesn't have that Xd has. First of all, the icons, you can design an
icon or an SVG file and then export it and use it in Elementor. So, for example, I
have this thing before the latest post. So, in Xd, I could
just select this, make it a group and then export this as an SVG because those are
just two lines created with the
line feature. So, I can export
that as an SVG, which is a vector file and I can use
that vector file inside of Elementor. Or for example, this arrow. I can design this arrow with the block and the
triangle feature in Xd and then export this, which is a custom icon and then use it
inside of Elementor. So, that's a huge benefit because it's simply not
possible in Elementor. I can even make changes
to vector icons. So, I've downloaded icons from a website like Flaticon and then I've imported
those SVG files into Adobe Xd and I can make adjustments within Xd to those SVG files. So, I can come and
click on this and move it a little bit
to the right if I want to. Or maybe this bird, I want to move his eye a little bit to the left. You can't really do that
inside of Elementor. So, in this way, you can make the icons a little
bit more custom before you actually use
it on the final website. And also, you can import all of the images,
the real images that you want to use
for the website before you actually upload them to WordPress. Because a lot of times
what happens is that your client has photos that are one, too
small or way too big in terms of resolution. So, what you can do is just create the Artboards with the exact sizes
that you want. Because I already
knew that this image would not be bigger than 900 pixels in width so that I created an
Artboard 900 pixels. I put picture in
and then I export all of those pictures at once with compression before I upload
them to WordPress. And this keeps your
websites super-fast. And it's also nice
to get an overview of all the images
next to each other before you upload
them to WordPress to see if they fit nicely. Maybe you want to a
change a picture here and there in Photoshop before you start
uploading it. So, that's also
a nice feature. And then one more thing, sometimes you want to export images with Artboards. So, for example, I have this logo
section right here on my client's website. But not all the images have the right
size of padding inside of the images. So, then when you just
export those images and use them inside
of Elementor, Elementor doesn't know that the size between this one needs to be bigger
than this bigger logo. So, what I then do is I create a few Artboards and I make sure that I size the logos
in the right way before I actually
start exporting it. I can even change the
names of the Artboards, which when I export is the actual
name of the file. So, in this way,
I'm sure that my design looks good whenever I start working
inside of Elementor with a logo grid for example. And there are probably a lot more features
that are really nice in Adobe Xd compared
to Elementor. But I think I've
made my point. it's very important
to use a design tool before you start
building the website. And the most important one is you want to be able
to make decisions. Design decisions,
compare things, let the client choose before you actually
start building because changing
things in Elementor like a blog, like a header, like all of the
elements of a website are very hard to
do compared to Xd inside of WordPress
and Elementor. So, if you have any
more questions about the workflow or things that I recommend then please let me know. Also, if you want
to learn Adobe Xd because you're
interested right now, I have a course
about Adobe Xd. It's a basics course. So, if you've never designed
a website in Adobe Xd and maybe you're still
working in Photoshop or you're working
with Elementor and you're like,
well, I want to design my first
website in Adobe Xd. Then I have a course
in the description with a discount code. It's 40% so that's
a huge discount. The course is still
available on my website, so you can check
that link out. If you want a discount, you will get a few emails with a discount
code in that email if you're interested. But if not, then I hope
that you liked this video. Again, if you have
any questions then please let
them down below and then I hope to see
you in the next video.
