How to know if your design can be built in Elementor on Wordpress

how do you know that when you design something in a tool like adobe xd that your design can actually be built in a tool like elementor can you prepare for this this is one of the main questions that i've been getting lately so in this video i want to answer that question hey guys welcome back to the channel as most of you know i've uploaded this video i think a month ago or two months about why you should always start in a design tool like adobe xd before you start in elementor and i've been getting great responses to this video also a lot of people who didn't agree but most people agree with me so that's super awesome and in that video i explained my workflow that i always design my website first in a design tool before i go into elementor so if you're curious why i do that then i will link the video in the cards and in the description but in this video i want to answer that question that i've been getting under this video which i think is a very good question if you saw that video because what can you do in elementor i mean in adobe xd you can design everything you want right because the tool is so creative you can drag and drop but there are limitations when you're working with real code like you're working with elementor you don't actually go but in the background it's all code right so there are limitations so i've divided this video up in a few points so let's just get started with the first one and the first point that i want to make is that don't worry almost everything is possible with an elementor so for example we are here now on dribble.com and i am just in the web design category by the way if you don't know what dribble.com is it's a website where you can get inspiration in terms of visual design also a little bit for ux but mostly for visual because people just want to make pretty things on this website but there are a lot of creative ideas on this website and as you can see this is pretty creative there are a lot of things overlapping this is not a very standard design and this is all possible within elementor so i just wanted to give you a few examples of what is possible if you work with elementor also a design like this it looks very creative but it's actually really simple it's just divided in a few columns and main sections and some intersections and then you can create a design like this also let's take a look at this website for example everything you see right here is possible to create with elementor if you just know how to work with the tool but in this first point i just wanted to stress that almost everything you can think of is possible with an elementor so point number two make sure that you learn how to use columns sections and intersections inside of elementor because you may look at these designs right now and then you're thinking like yeah well reno you know how to create these things but i don't know but that is because you're just missing some information about columns and intersections because i look at a design like this and i'm just like okay what is this this is a main section from here to here so let's just focus on this section over here so how i look at this section so here i see a main section then i see one column for this text box which just has a negative margin so it will be pushed down then there's one column over here one column over here and one column over here and then this column is pushed a little bit to the right so that it overlaps the image so that's a possibility which but what you can also do is just have this as a main section and then divide this into a column this into a column and then make this first intersection give that a negative margin on the bottom so then this column this column and this column which are part of one intersection can overlap the other ones right and this is just a background so that is how i look at this design so if you know how to work with these columns and the intersections then you're all good so this is something that you can now dive into so that you know what you can design in adobe xd or figma or sketch or whatever tool design tool you use and if you guys want me to make a video about those intersection sections and columns then please tell me because then i will just create a tutorial about it and then you can just watch that and then you will have more confidence in what you can design so let me know if you want a video like that and then i will create one tip number three and that is make your designs simple when you're starting out in a website project so what i always do before i start an elementor is that i make a wireframe of what the website will look like and in this way i already know if this is possible with an elementor from a technical perspective but also a little bit from a visual perspective so for example this is a project that i've done for a magazine and i already laid out the basic structure and this is not pretty this is pretty ugly but it's the technical structure where i already can see what kind of columns and sections i need so if you start out simple like this with just sections intersections actually this first part is a little bit complicated but if you start out really simple like this and you let your client agree to this design then you can make it more creative afterwards but then you know at least that the basic structure of your website is something that you can build right so in this phase of your process you can say to your client like hey this is not the pretty design this is just the functional design but i just want to make sure that we both agree what i'm gonna build for you so that's what you say to your clients and then if they agree to this then you can make a visual design and make it more pretty and more interesting and then you can do your research whether some visual things that you have in your mind are possible and when they are not possible then you're still okay because you decide when you're gonna send this screenshot to your client right so you can first try to find out if it actually works but you can also just keep it simple so in this way you have a little protection for yourself for your own process and you also don't promise things that you can't build to your client so to sum this point off start with a simple functional design also called a wireframe and make sure that your client agrees on that before you move on tip number four use elementor templates as ux inspiration so when you are designing your wireframe what you can also do if you really don't know if it's possible is you just go to one of your elementor websites maybe your own website like i have over here i've just created a test page on my personal website that nobody can see because it's on private and i can just go over here and click on the template icon and then i just go to blocks and then i just pick a category so for example when i am designing a about page i just go to the category about over here and here i can see some inspiration for my design and because these are all elementor templates i know that this design is possible right so this is also a great little tip and i have to say that these designs right here from those templates are a little bit simple but again you want to start out simple and then make it more creative afterwards um because that's just a safer way to work especially when you don't know the tools that well right when you are more experienced then you can start a little bit more crazy but when you're just starting out or you just don't have a lot of experience then this is a great uh way to do it so just go to a category maybe you want to create a contact page just look over here and be like hey i can create a design like this this is something that will fit this client project okay and the last tip that i have for you is use the elementor widgets as input so for example this is my own portfolio website and on my about page i have this section which is the faq right so here are some questions um and these are tabs that you can open and then you can see the answer to that question well actually this is not a design that i made myself because as you can see this is just a screenshot so what i did is i just went to elementor and i just dragged in a widget so let's just say that you make a new section like this maybe give it a little bit of height maybe even gave it a background color and then drag in a widget let's say that you need to design an faq page then you just scroll down over here and you can see two options over here accordion and toggle i think that i use the toggle so let's just drag in the toggle like this yeah and then you can see that this design looks very similar to the one that i have here in in adobe xd and for this part i actually was a little lazy i didn't want to design it by hand because i knew that i would design this portfolio website a lot more in the future because it's my own website i use that for a lot of tutorials but what you can do for example is just try something like this and just add a few things and just see if you like this design maybe change up the style here a little bit something like this and then be like okay this is something that i can create in elementor because this is already an elementor pro widget so let's now design this in adobe xd and then you are 100 sure that you can do this right so sometimes make it easy for yourself just use the widgets that are already available for example this is also perfect for the testimonial because a testimonial section you can design it in a hundred ways but for most websites it doesn't really matter and to be honest there are enough design variations that you can do that you can achieve with this widget of elementor pro so for example you have layout over here image stacked like this image above image left you can change the fonts over here you can change the colors and then you already have the base and then you already have the perfect input for your adobe xd design that you are 100 sure that you can build inside of elementor most of the widgets that i use are from elementor pro if you don't know what elementor pro is yet or you just don't know if you actually need it and i also have a video about the basics of elementor pro which you can find in the card but i think that most people that watch this video already have elementor pro so i hope that these tips will improve your workflow a little bit more let me know if you also have other tips that other people can use so we can help each other out and if you want to learn a design tool like adobe xd because you still design everything with an elementor and you want to improve your workflow and you understand why this is important then you can check out the description for my adobe xd course i received a lot of positive reviews on the course so thank you so much if you've already taken the course so if you've already taken my adobe xd course then i really think that these tips can improve your workflow so that's it for this video everything is in the description like i said and then i want to thank you for watching and i will see you hopefully in the next [Music] video [Music] you

Channel: LivingWithPixels

Views: 51,602

Keywords: livingwithpixels, living with pixels, elementor adobe xd, adobe xd elementor, elementor design, elementor wordpress, wordpress elementor, elementor tutorial, elementor basics, adobe xd, adobe xd web design tutorial, elementor design tutorial, elementor web design, adobe xd process, web design process, never start in elementor, adobe xd website, elementor wordpress tutorial, web design adobe xd, what is possible in elementor

Id: a_MDNGaXRnQ

Length: 11min 3sec (663 seconds)

Published: Sun Oct 04 2020