Editor X - The Most ADVANCED Visual Website Builder?

hey everybody what's up gary simon here so today we have a sponsored video from editor x and this is basically a new app it's actually from wix.com i'm sure you a lot of you have seen their videos but this is a really robust tool that's in beta right now that you can check out for free and it's basically i would say it's probably the most robust visual website builder that i've personally ever seen because they allow you to actually use a visual site builder to structure flexbox based positioning elements and user interfaces as well as the css grid and i have to say it's very fun and that's we're going to be doing in this video i'm going to be showing you how to build a layout i with just some of the features of editor x because there are many you can actually build dynamic apps with it i was really impressed especially coming from a company like wix which really like is traditionally catered to your average joe who doesn't know anything but even developers who have worked with and css they can actually benefit with this so as always make sure to subscribe and let's get started all right so after you create your free editor x account at editoreditorx.com if i can talk uh and you log in you'll be presented with a similar ui to this uh obviously you won't have any other sites but basically find an area where you would create a new site they make that very obvious and easy and it first asks um just to know a little bit about the site to kind of give you a starting point um what kind of website do you want to create i'm just going to put like portfolio and then we can choose you know how do you want to actually start you want to start from scratch which is what we're going to do however you can scroll through all these uh predefined templates and you can see at the bottom here it's a small button see all design expressions as they're called but for us we're just going to start with a blank canvas otherwise if you choose one of these it's going to start you with what you see here so you can kind of preview them by clicking view and it'll show you kind of like uh what it looks like on desktop or tablet or phone all right so you can choose you know just start from there if you wish but let's go ahead and start from blank i like this loading graphic here by the way it's kind of cool anyhow so here it is so i'm going to i make this a little bit larger so we can see everything clearly i might go a little bit larger than that and what we have initially what i'm going to do here is just really quickly go over the ui and like kind of like how it's structured so here in the middle we could see that we have uh what's really just kind of like the canvas area this is the actual site uh what it will look like and i this is where we're to mainly be you know having all of our work done as you can see they kind of give you it's not completely blank they start you off with a header and like a nav bar but you could still delete that if you wanted to outside of this area though here up here we have a little toolbar where you can add elements so there's a lot of stuff here that you can look at um so for instance i you can quickly add you know things that are very common like ui elements like text paragraph buttons etc there's just a bunch of other things that you can do but i'm not going to get into those just yet but this is just like the area where you add stuff to your layout over here is layers so if you're familiar with uh other design applications such as adobe photoshop who basically invented the concept of layers or sketch or adobe xd or figma it just works in the same way they're kind of just grouped up into various sections based on what's inside of them all right and also over here we have what are called masters so think of masters as being sections of uh repeatable repeatable content so anything that will be present in multiple pages like a header like a footer anything like that will appear here and you can define here as well site pages obviously you're going to want more than just a homepage although not always sometimes you have a one page or a one page site that's fine but most for most people they're going to have multiple pages and you can create them here and then also we have what's called a theme manager where you can quickly change up the topography and the colors associated with the given layout over here and then finally we have i this uh robust app market where you can add all sorts of functionality to your your site so you can have uh pricing plans i it's all categorized i'm gonna go i'm not gonna go through all them but you can have like visitor analytics for analyzing your traffic just a whole bunch of stuff that you can go through on your own so it is quite capable all right next up over here in this section let's go ahead and toggle that off we have which current page is selected we also have uh the viewports all right so these are the the devices and as you can see if i make this a little bit larger i edit for 1000 pixels and up so this is like a desktop or laptop uh this right here is for like tablets and then this right here is for phones all right so what's really cool is you can even add your own break points your own custom break points i'm not going to but just understand that you can if you wish and then finally if we select an element over here in the right-hand panel is the property inspectors very simple um a very standard convention for design applications to have the all the individual modifiable i you know sections for your your your elements and this all happens to be basically uh for every element you select it's just a visual editor for css properties so that's really cool so you don't have to work with css code you're working with these uh these visual ways of of quickly adjusting things plus you don't have to necessarily know css and all the properties and the correct values to use this stuff over here so we'll get into that as well um so let's go ahead and real quickly let me deselect this let's pull pull this in just a bit all right so as you can see when we bring this in it's letting us know our current width right here and obviously if we go down to low enough we'll hit the next breakpoint so that's another way that we can switch between these three breakpoints or any other custom breakpoints that you create so let's go ahead and just create something very simple for basically like a home page i'm going to leave this section up now this right here this little sample logo right here again when you click most elements outside of just having this property inspector over here you do also have this little floating toolbar right here as well and what you select can change i can change uh this toolbar so for like an image you might have different properties here so for this one like you could change the vector art uh obviously that's not gonna show here in the menu it just says manage menu so they're all they're contextual right so if we wanted to change this change vector art we click on that and you can insert like their their custom vector graphics here or you can upload your own svg like if you have your own logo in svg format which you should definitely have um we're not going to change that though we're just going to leave this one here right here like it says manage menu i'm going to show you real quickly just how this works and it's very simple as you can see choose a menu to display so you can create you know multiple different menus like maybe you want to have a different menu in your footer as opposed to your header for us how exactly would we add uh oh you can also add a drop down here i didn't notice that before but what we can do is let's say i all of your pages in your site they would be listed here but we only have one page was the home page but i do want to show you how you can add other ones so you can click just to create a link item right here so which page well we could say home this or we could just go to web address so we can make it go to http designcourse.com and we'll open that in a new window hit done and then we can get the anchor text right here the label of the actual link and we'll just say about us i don't know something like that and obviously it adds it right like that so of course you have other things that you can change like the design of this area you have fill and opacity corner shadow text basing this is something that shows up on a lot of the elements that you select you can add animations to it i which are predefined right here and you can even customize these very cool and then also you can copy these uh the properties from breakpoint as well for now we're just going to leave this section as is so the way a layout is structured here in editor x is everything is is structured into sections as they're called you can add a new section down here by clicking this button you can add section up there you can also move sections around i so let me just show you if i create another section and just make it a blank one we have two sections now and so what if i wanted to move this section up on top of that one well we just simply click on this little menu here and just choose move up and that will move it up and you'll see how that works it's not quite obvious because they're both white but you'll see how that works going on and by the way if you want to undo something ctrl z and you can keep going back as many times as you want all right so you have to do you have to ask yourself what do i want in this section right so you have options you can start from scratch and drawing out uh different containers or you can come over here under this plus section right here and you have what are called sections so you can just create entirely or rather just i select entirely predefined sections and there's a lot of them and then we also have uh what are called layout tools and so you can create uh these container boxes this is kind of if you're doing stuff from scratch um they also have what are called layouters all right so kind of interesting name but basically they're just kind of like skeleton slash prototype sections uh with predefined columns and or rows and they're automatically responsive all right so it takes some of the work out so it's basically the middle ground between doing something 100 custom which is what we're going to do for this section but also the opposite of course being these predefined sections up here which has all the the colors and pictures and stuff which the pictures themselves are customizable so what we're going to do like i said is we're going to structure this in such a way that we're doing it custom for this top section so what we can do is when we close click on um this area right here change design you can change the background by the way but we can also if we select this we can go ahead and click what's called apply grid or if we click here we could choose a section layout where it's just blank and this is a blank section already or you can use a grid or a layouter if that makes sense so for us we're going to use a grid all right so i'm going to click grid and when we choose that we can choose kind of like this uh we have a selection from these predefined little grid templates i guess you can call them um you can have like two by one which means two columns here's just one row three columns four um and they're they're also at the very end customizable as well so we're just gonna do three a three column one row grid layout all right we're gonna hit apply all right so now let's close this out and we can see we have this we can see these two dashes right here if we select it now if we choose adjust grid and then edit grid we can see we have what are called 1fr fr is a fractional unit and if you're not sure what that is especially if you've never dealt with css don't worry but if you are familiar with the css grid you will recognize this and what you can do this is so cool i've never seen a really good editor for the css grid it allows you to adjust you know visually all these proportions here at this specific viewport or you can just type them in as well so we can go back to one fr and then one fr here we can do so you can also increase the grid gaps for instance so if we want to have a gap between these grids we can go ahead and increase this maybe to say 10 and maybe i'll make that 8. so now we can see those let's hit done and now we can put content into each one of these columns so let's put a picture into each one of these columns how would we do that well let's go over here to the plus area and let's go ahead and add we can choose quick add or we could choose media down here and let's just do single images so they have like a few single images and that's all we're going to use but guess what you can upload your own images as well which is what most of you would probably be doing so let's just choose this mountain graphic and we're going to put it right inside of this left this very first column and we want to make sure it's completely inside of it so that then if we choose stretch it stretches automatically into this grid section right here so otherwise if you don't do that and you have it spanning between two and we increase it guess what it's going to take it's going to to assume that you want it for to span both of those uh columns very very cool how it automatically knows to do that based on the position of your photograph so now let's go ahead and repeat that process all we have to do is come over here click plus single images maybe we'll use this one and we'll expand it there we go and then we'll go ahead and add another one uh maybe we'll do this watch that's a cool graphic and we'll expand that as well all right so now we have this cool sortify i guess you could call it a three column photograph based hero section let's put some text on top of it to see what that looks like so again we click add quick add text or a title rather let's put a title maybe right here and for this title it's just going to be random i it's really serious serious business and what we can do is of course because this is a text layer we have things that we can um you know we have a specific contextual menu edit text we can make it larger i yeah maybe around yeah we'll see we're gonna have some big bold serious text right here now one problem is notice this this graphic right here um it's black so it's black on black you can't really see it very well which is a big no-no in ui design we can click we can take this image and we can double click into it and if it were a larger image i in a certain dimension we could uh move things around but what we can do here is if we select this image here and we take that off uh the stretch so now it's at fluid and scale proportionally if we just increase this to the edges of this container and then double click into it we can scale this up higher and also position it around so that that black part is not there and then now we've hit apply and now we can see the title so that's how you can move around the images which is very cool the photographs um it's really serious um let's go ahead and we'll do the same thing with this one so we'll take this in we'll scale this up and down here and then we'll double click into it make it a little bit larger and then push this down there we go and then we can go ahead and copy this ctrl c ctrl v just to copy and paste we'll edit the text and this is going to be a sub headline uh maybe like now let's go like the 24 and let's also make it not so bold and we'll have a set behind line so we'll say in a matter of seconds you can change your life whatever that means okay so now we'll push this down there we go and then maybe we'll have a call to action button so a clickable button come over here quick add button it's already a nicely designed button it would actually work quite well but just to show you how you can change the button for instance we can come over here to design so fill color and opacity all right well first i'm going to get rid of the border there's a black border so we'll go ahead and take the opacity down on that and then we'll go ahead back to our design fill color let's give it a fill color of not white but maybe like this blue right here and then the text color come down here change the from white or from black to white rather and also i want some borders some corners like smooth completely like a pill shape so we'll do 30 pixels and look at that how quick was it to do that i and it's all done by hand and it's all done in a really nice ui that makes sense um so yeah i like this a lot all right so here's our hero section and let's see what it looks like at different devices and we'll see if it's really responsive or not now of course it's probably not going to be perfect um it's probably going to be kind of broken and so there's a couple things we can do that make that really easy so right here we're on desktop we're going to go here to around a tablet size and we can see right away our text is breaking and they're overlapping each other and of course this is even more exaggerated when we see what happens here so like i said there's a few things we can do that will really help fix this problem so the first thing we're going to do is we're going to use what are called stacks and stacks use flexbox and if you're not sure what flexbox is but it's basically a way to handle layouts in css and so if i select these three elements right here we can see we have this stack little floating nav right here we click stack nothing seems to change but it is now a stack and it's using flexbox to remember the the arrangement between these three elements that i selected so now if we click here guess what they don't overlap anymore now of course there's still things that need to be fixed about this but at least they're not overlapping here we have our big overly large headline right here we have our sub headline and then the call to action they don't overlap each other anymore so that's what's great about stacks now the next thing that's an issue that we could see is when we bring this in i this right here is too large at this size um even right here it's still a little bit too big but coming down here this text is way too big right so the way we could fix that issue is we could select on our text element edit text and then we can choose this little option right here scale text now before i click on it you can see right now it's just a flat default 72 size now when we when we click on scale text it's going to give us two different options i this is a value right here for how small it will be so at the smallest device you know viewport like add a phone it's going to be at size 10 and then right up here it'll be size whatever 50 for instance so let's see what happens now i as we can see it's it grows and shrinks down in relation to the size that you specified for those two values so right here it's really too small in my opinion so what we'll do we'll take it edit text and we're going to change this maybe up to like 80. so now if we bring it down now it's starting to make a little bit more sense but really i think it's too small right here right i mean that's quite small so what we can do edit text maybe we'll change this to 30. and now it's looking actually pretty good okay so another thing let's say let's say for instance i we really want to do the same thing with the the sub headline as well so let's let's do that just for some muscle memory so we'll take our edit text we choose to scale the text and we're going to change this here we'll say change that to 25 and maybe about 15 perhaps again it might be too small a lot of this is about experimenting that's actually looks pretty good of course we have these other issues which we're going to fix the background issue here but i just wanted to get all this part this stuff set up correctly so now it's actually at least they're not overlapping and they're also scaling so really what is happening here though notice how this image is taking up the full column but this these images are not stretching so what we can do is notice how these are smaller we can double click in here or rather click on it once and then we're going to click on stretch now it's stretching out all the way as we need it to be and same thing with this one right here all right so now we're actually making progress all right so now let's say for instance on the mobile viewport this is kind of looking a little bit crazy right it's really there's too many overlapping elements and it just doesn't look as good as it does say right here where it's only overlapping two of the columns or on desktop as well so what we can do if we want to make serious adjustments to this we can go ahead and click on design fill color and opacity and just take the opacity all the way down we'll do the same thing for this one and then for this element right here we can actually just i take this we'll unstretch it except we're going to make this span right here across all three columns all right so now let's go ahead take a look at this one problem is uh that one thing i don't like is how this is kind of this graphic here is kind of coming up on it um into this start now um so what we can do to fix that and also look how high this is like we have this massive amount of white white space so one thing that we can do to fix that which we'll tackle that problem right here we could take the graphic and we could just pull it up now that looks better from a design standpoint but however because we made that change this is going to really go up high right so now it broke the layout again but what we can do to fix that issue is we can take this image the background image and notice where it says minimum h for minimum height so we can make this either a percentage or a pixel value and maybe we'll make it like around 400 and that's looking a little bit better i think maybe we can go ahead and looks like i had internet issues there it looks like basically what we can do now is just maybe try 500 pixels now that looks better for a a mobile device now it's looking and re-behaving much much much better all right so i real quickly just change this text off screen um all you do is though to change the text is just to select the text layer edit text and you can edit right in line also change this text and this button text right here and so we're just going to pretend this is a photography website i decided to give it context given the cool photographs that we have here so now what if we want to add another section of content beneath this that maybe elaborates on more services that this photographer offers maybe like in a three column setting so these these type of uh i guess you can call them ui patterns are very common and instead of having to create these from scratch you can actually choose from a predefined set of what are called layouters which we're going to add now so i what we can do here with this is again remember your layers so we have what's called a section here we want another section that will go just underneath this section at the bottom right here so we're going to click plus and we're going to choose layouters and here's all the different layouters that we have a lot of them like three column layouts uh here's a layout here just a just a variety of different areas that we can choose from what we're going to choose is this one right here i believe so we're going to choose this one notice it came on top but in order to fix that all you have to do is select it and just choose move down and now it's down beneath there you may have to do this on the subsequent eye viewports but that's no big deal just move down each time and now everything is is as it should be essentially so here's our layouter section right here what's really cool is everything is adjustable is adjustable and customizable about this so let's say for instance the first thing we want to change is the background i think it's just like a gray color we get to select the background and we could choose change design and we have a background fill and opacity over here so we could change the opacity down to zero or we could just click this and we can adjust the background this way so if we choose this color which is what it currently is we can actually choose add color and we have access to this color picker right here where we can just change it to anything anything and move around the color hues and all that crazy stuff very easy to change so i'm just going to do still very light i ain't but quite to saturated but we're going to work in a little bit colors to kind of match this area but still be a little bit lighter i think i like that one a lot this is the color code a hex color code right there we're gonna click add and then now we can change the background of each of each one of these now what's really cool is yeah we have three different columns of different content right but if we change one thing about one of these columns it's going to reflect that change in all the other columns so here's what i mean we're going to change this background as because as we can see the background of these little cards right here is slightly different than this background we want them to match so there's a couple ways we can do that we'll select it we'll choose the design and you can see we could just take the opacity all the way down and there we go and notice how all three of them changed now we could still edit the text and those say they essentially stay the same but for us we i don't have to do that so what i want to do with this is we're going to take this one this image we're going to change the image here so i'm going to click change image and we can see we can upload media and you can just upload the photographs like the jpegs or whatever or gif files png files straight from your computer i or you can drag and drop them as well onto this area now i've already uploaded what i want to use so i'm just going to click here from my already uploaded media right here so for this one we're just going to choose wedding and then hit update there we go isn't that very cool so now we can go ahead and change up these titles so for instance this one we could double click and just change it that way we'll say weddings so this photographer handles weddings they also handle corporate photo shoots and also graduations all right now that's very cool so now again change image i corporate is next hit update see how fast this is and then finally we'll also change image here and then we'll choose graduation and we'll update it as well very very fun stuff so we can even change the color of this text so we can choose edit text and right here is the color and we could just choose um something really light maybe over here it's kind of so it'd be kind of like a watermark if you will all right and you can also move these around by adjusting the position and the docking of everything right here so for instance if we wanted if we hover over it this means the bottom um if we wanted to we could take this from less than 20 pixels maybe to 15. or opposite i think i wanted to go the opposite maybe 30. so you could just push things around however you personally see fit so i'm going to leave it at 20 right there all right so what about changing like this button color right here very easy so again we go to the modification settings now depending on what type of element you're selecting you may have more options like for instance when we change this background color we can see we only have fill color and opacity but because we have above button we have additional items that we can actually change so i let's go ahead and change the button to make it stand out more so in that case the fill opacity and color let's just choose this bluish color right here kind of like that but now there's not enough i so what do you call contrast with where it says click here so what would we do about that well we come out to text change the color we'll use white now we can see it much more easily i you can also change the font the font size we can make it bold i think i'll do that and if we change text we'll just do schedule a shoot or maybe not i we could choose schedule shoot make this wider or what we could do is just do schedule shoot there we go i like that so now this is all sold and guess what with the with the layouter it's already responsive for us by default so notice how it's automatically stacking when you're on a smaller device awesome stuff all right so let's do yet a another one so by the way just to describe something here a little bit further notice in this section uh this section was made with what's called a layouter but it also has a repeater in here as well so this repeater again like i said is based on items it has any number of uh these items that you can actually add more items to which is very cool so for instance i if we select on manage items right here you can actually duplicate an item where we can have any number of these items let's do it a couple more times that way we have now two columns which is really cool we go in there and then of course adjust each of them uh as we see fit but you can also go ahead and just delete these copies of these items and what's also cool is you can move them around like that very very powerful i like that a lot so coming back here when we add when you go to the plus section in the layout tools again you can just choose straight out flat repeaters or some of these layouters will actually have repeaters built into them so let's say for instance i will do one more section uh let's say for instance you want to have an area where they can uh maybe they can click on a button to schedule a actual photo shoot or something like that so let's go back here and i think we're going to use another layouter for this but this time it won't include a repeater i so what we'll do is we'll choose our layouters and the one that i want to use is right here because i think this will work well so once again it put it right up here so what we're going to do is make sure we move that down so select it move down and we're going to write our title here so a good title for this section uh would be let's see here we're going to double click schedule a shoot today notice how it automatically adjusted the design to account for the fact that there's two lines for there's a little tag line here which you know you don't have to use all the elements you can just click this and delete it i'm going to choose to use it because i like it so we're going to say ready to rock i also want this background see how this background color is like slightly different and i don't like that so i'm going to take this change design take the fill color opacity and just make this a flat white now this looks a little bit strange because these two these two sections these two rows i have the same background color so what i can do is just change this and we'll come out here and maybe we'll use this color or maybe just something slightly lighter uh and maybe a little bit more into blue spectrum yeah right around there i yeah sorry i clicked off that you want to make sure you hit add there we go all right so now we have that new color and a good separation now for here i think this would be a great um like image uh for the purpose of showing like the photographer or something like that so we'll hit update look at that so right here probably want to change the text so instead of click here i schedule now that works very well and again you can change a lot about this button right here for instance if we want to change uh let's let's do a change where we change it i like the button as is but just to show you i think we'll do a change where i will take the border get rid of it we'll take the background now white can work that definitely works yeah i think we'll just leave it at that um i think because this is pill shape like with the rounded corners and this one's not we should be consistent so we'll just take corners and we'll increase this to like some high number and now we have our rounded corners look how cool that is and of course because it's a layouter responsiveness is already built into it and again we have to change this to down on that and then as well we'll do down here as well all right so now we can check this out and everything is i automatically responsive and working quite well i must say so we'll come out here to tablet this still works well this would work on a tablet so the column and row structure is still maintained and yeah fantastic so now you can preview it which basically gets rid of the user interface so you can see what it looks like without a lot of the user interface here and then you can also go back to edit site you can publish it as well so when you click publish you can click on view site which will actually load it into the browser and this is what people will see and you can also upgrade to add a custom domain so that you can go like whatever.com and then it'll show the site for now though this is the site url right here which you can copy and then click view site to see what it looks like in the browser so here's the site in the actual browser and basically responds just as we would expect it to very very cool stuff all right so i hope you really enjoyed that editor x i believe is one of the best if not the best visual website builder out there that i've seen so far being that of course it can handle flexbox based layouts as well as the grid and it's just really intuitive and quite easy to use um so ultimately make sure you check it out here in the very first link of the youtube description below it's free there are some things that i you can upgrade on a per site basis but you can check that out on your own time and yeah as always make sure to subscribe and i'll see you soon goodbye [Music] uh [Music]

Channel: DesignCourse

Views: 33,854

Keywords: web design, site builder, website builder, flexbox, css, web development, css flexbox, editor x, responsive web design, flexbox css, responsive design, css grid layout, website creation, website editor

Id: 2gI2FKhi56U

Length: 38min 47sec (2327 seconds)

Published: Thu Sep 03 2020