Editor X intro webinar | Discover the Editor X workspace

all right so if you've just joined um welcome i'm maria from the from the editor x team welcome and welcome not just to this webinar but also welcome to editor x uh we're doing this webinar especially for you guys who are new to the platform who want to help you get started find your way around uh find all of the features and tools it's really exciting to see so many of you you here and joining what you're gonna what we're gonna cover today is uh you'll see a live walkthrough of building a site on editor x by one of our very own product managers uh sebby who's he who's here with us and we're going to cover a lot of the key features on the platform we'll take do an overview of the workspace itself get you familiar with the canvas we'll walk you through the structuring of a site we'll dig into some of the responsive layout tools like your css grid some of the flex layouts we've got and we'll also dig into customizing across breakpoints super useful um flipping between screen sizes and redesigning your site and again if you if you've just joined we will be recording this session and it'll be available soon on our from our homepage you'll be able to to get a link to it so you can watch and recap and re-watch some of the things because there's going to be a lot that said we will show you today so you might want a little recap afterwards other useful links uh if you go to samilodesign.com you'll be able to see the website that sebby is recreating so you can check it out and uh if you try and recreate it yourself uh after you're watching this webinar and another really important note before we get started what semi will cover today is literally the tip of the iceberg in the editor x world so anything we do cover you'll find tons more info and learning resources about it in our academy there are lots of videos and exercises there and and lessons and images to explain stuff so if you go to editorx.com academy you'll um you'll see a lot of the resources there and during the the webinar if you have questions about certain things we might refer you to some of these lessons if you want to dig a little bit deeper um but this resource is always here for for you um to dive in and learn and one other and then i'll shut up and let's have you talk is one other important resource is the forum you can also access it from our home page it's called communityx and product managers like sebby are there answering questions sharing new products and feature releases there and there's lots of lively discussions and people sharing their websites and asking technical questions so it's a really great place to join if you want to continue building on editor x you'll get lots of useful information there um okay i'm gonna stop talking now and hand you over to sebby would you like to just introduce yourself well thank you so much maria hi guys i'm sevi i'm a product manager for editor x and i'm also the beta program manager i my free time i enjoy replying to users feedback and also speaking to users they call me the people's champion here on the team so uh today today we're going to go and cover a few things of the basics of editor x and we're gonna be actually looking into the site and and showing you how we actually built this site so what we're gonna cover so we're gonna see here we have a a proportionally scaling site and you can see also that we have in the same exact site we have a grid and in this grid you can actually find uh all these really responsive capabilities that we have available in editor x and we can also see here we have an image with parallax scrolling we're going to learn a little bit about uh responsive uh repeaters as well and also we'll show you some some video options and also we'll go into layouters which is our flexbox technology that we use for edirex but let's just take one more look and see the site and see how it actually is responsive so we can see that everything is kind of scaling here and it switches between breakpoints this is a tablet you can see how it actually is a little bit different now and it actually can be adapted per breakpoint so we're going to be looking at understanding how we can achieve all these designs today so let's go ahead just if guys if you if you do have questions as sebi's going along do drop them into the q a box and we have lots of people from the team who'll be there collecting your questions and uh there'll be a q a section at the end so we'll hopefully get to all of your questions if there's anything really pressing that's stopping you understanding something and i see it keeps coming up then i'll i'll interrupt you sadly if that's all right yes that's okay yes i love questions from from our users great so um let's go ahead and and let's get started with editor x uh so i opened up this blank editor here and as you can see just from the start we have a really blank uh canvas and workspace so we can go ahead and actually just so i can show you guys the canvas we can resize this canvas and work in different screen sizes and different viewport sizes and if i want to go ahead and work on tablet i can go to tablet i can go to mobile as well and i can actually just use these these buttons here as well to navigate between the different breakpoints so it's this is a really really great experience because you can edit and check your design at the same time um so to make sure that you're doing the right actions that you wanted okay and then we can take a look at the top bar in the top bar we have the typical site actions under here preview publish all these things here dev mode this is if you're trying to add some logic on your website or even build some robust applications um help help is where you can find a lot of resources in order to continue learning uh you can also find the academy x and the forum there that maria mentioned before and some really great tools in order to communicate with the product team we have uh the feedback option uh requesting features and also reporting about this actually goes directly to my team and we answer these ourselves great uh so let's let's uh take a look and see what how we can edit on the actual website so on the left hand side we have the add button this is actually the add panel the add panel actually is where you can find all the different components that you can add on your website here's a section where you can quickly add any component on your site and all you do is just drag and drop the simple experience of just dragging and dropping stuff onto onto a stage and then you can find other other types of content here you can find sections these sections are pre-built designed sections by our very skilled editor x designers and these aren't just sections that you you can use throughout your site to lay out your your content you can also use these to learn learn and understand how to build the same exact layout or a similar layout because you can just drag them into a site and just see how they're actually built there's also wireframes in here if you're looking to get something that's a little bit more easier to work with um great and then we have layouting tools so we have container boxes which are just containers on your site layouters which are flexboxes that you can use on your sites repeaters repeating content light boxes are any pop-up banners anything that's appearing on top of the page you can go ahead and do that set triggers on your page all these awesome things this typical content you add on your site text button media and then we can see some some business solutions as well available here uh blog e-commerce online bookings events members area and also we have a content manager where you can create one design and create a dynamic pages off of this design and also manage your content inside of here just like any other cms great and moving on to the next icon here we have the layers panel layers panel actually represents the current structure on your page so this is where you can see anything related to your page you can click into any element and it will actually navigate to it you can see here if i click on this this text it navigates there if i click on this box it navigates there and navigates there so it's easy for me to find and work on what i need to and understand what's going on in my page at the current time uh then we have the sitemaster sitemasters is where you can save and reuse sections uh you can just right click on here and set set as master and then this will basically be a section that can reuse on different pages and select which pages it shows up on uh pages panel you manage your pages theme manager where you can manage your text and color themes and also use this as a means of of you know improving your workflow and you know saving time and not having to do the same changes over and over you change it once a year and it updates across your site then we have the app market where we have hundreds and hundreds of different professional business solutions available for you for any project type i really advise you when you get a chance to see our our full catalog here all right now moving over to the right hand side we have actually this panel that we created specifically for our directs called inspector the inspector panel actually shows you all the properties related to the current selected element so in this case i've selected the section and i have a site the size option here that's selected and i can see all the different properties of that i can see the scroll behavior if i click on this text i added before i will also see all the different options on here so great so now we've we've covered the the basics of the workspace so let's go ahead and actually get to building the site uh so for the sake of this webinar demo i've gone ahead and already uploaded all the media that we need for a site so that way we don't need to work on but i'm gonna go ahead and access my media manager and i've actually i'm very i'm very particular and i really like to have everything nicely organized so i actually organize everything by section type i'm going to go ahead and just add this in here and i'm going to go ahead and add an image great so we'll go ahead and start working on this image so first thing you'll notice as i drop this image is that basically as i click and drag this around you'll see that basically there's these these uh dotted lines these dotted lines actually represent the docking so what is docking docking actually represents the alignment and margins of an element so in this case this image is aligned to the left side of the of the of the section and also to the bottom of the section but you can also see how far away it is from it as well uh so in this case let's just see since it's it's it's basically a line to the bottom when the bottom moves the image moves when the left moves the image moves so this is what docking it does actually so helps you kind of create this uh this responsive behavior right off the bat you can actually move it around you'll see that it actually keeps on changing where it's aligned to and if you actually just want to keep it aligned somewhere you can hold command i'm holding command or control for those of you on pc and you can actually override the auto docking so it can actually won't override whatever you're doing um cool so let's uh go ahead and start working on this image so from start you'll you would you probably have noticed that when i was resizing this it actually kind of scales down so what's going on here is that most elements on editor x we set them up to automatically be as scaling or be fluid while you're actually uh resizing the window so this fluid element basically when once the the window becomes smaller so does the element in this case we can see here that the width is 20 percent and basically this indicates that it's taking 20 percent of the section size so that's what is going on here and also images and other media containers such as videos are set to scale proportionately on the site so uh that means that any time that the the width decreases so does the height and vice versa basically so basically let's go ahead and add some values in here so we'll go ahead and set up here a width of 25 percent and we'll go ahead and put seven from the left and seven from the right so i'm adding what i'm doing here is i'm adding margins from the inspector and you would see that it actually reflects directly on stage you can do it on stage or you can do an inspector i because i have a very particular design i'm trying to achieve and i'm very i really like to be pixel perfect i prefer to to lay it out on stage and then you know put the right numbers on the on the inspector great so now we have this is docked here scales like this let's go ahead and add a second image now okay hero section okay now we're gonna go ahead and put this on the top right now in order to put it on the top right i can either just drag it in there put the margins or i can just use uh this alignment tool so i can just align it to the top and then align it to the right and now you can see it's aligned to the top right and you can actually just trust it to double check you can see the margins inside the inspector that they represent zero values all the way so that means it's aligned perfectly on the top right let's go ahead and resize this a little bit so we'll put it at 30 percent and great so now let's uh let's just take a look and see we're working with just resizing nice so they're both scaling proportionately looks really good thus far remember we're trying to create here a section that is scaling proportionally everything is scaling together as the width of the screen also changes great so uh we're going to go ahead and add some text i'm gonna add it from the add panel okay let's give this this uh sam milo okay this text is a little bit too small so let's go ahead and just make it visible for everyone and you know it's a nice title it's big title so let's go ahead and do that okay actually i want to drag this section down for a second here just so you have some space okay so now we have the text here we're going to go ahead and do a little bit more formatting i'm going to go ahead and give it some loud color here one second just putting in the value here nine cc zero okay there we go that's saved okay great um so let's go ahead and uh take a look at uh what we have here i'm just gonna add some margins here actually i'm sorry i mean uh it's facing uh there we go just saw it saw the extra spacing i wanted to make it smaller okay so i'm gonna go ahead and um just take a look and see how this resizes now so here we can see that once i'm resizing it's actually uh you know the the text is not scaling like the images so i want this to scale because like i said i want everything to scale proportion so let's go ahead and actually modify the size of the text a little bit so when i'm editing the text you'll see this icon right here which is actually the scaled text icon i can click on it and change the values here i'm just going to go ahead and put 24 by 200 okay that's great and now let's take a look nice so now it's scaling proportionally by the way what i'm doing here is i i really enjoy to add an element modify and see how it behaves you know along the way so this is the great thing about using header x where you can just just use these track handles and just check to see if it's working as you you wanted it to work so nice so it's looking great uh so i'm going to go ahead and add a second text box in this case i actually want to add it directly from the right click under right click you should be able to see that it says quick add so i can just click on here and select title and that just adds a title to my screen and then let's go ahead and do the same modifications that we did before um real quickly just give me a second here sorry actually we're just gonna do copy element from design just to save us some time we can just copy i just basically did right click and showed i can copy the elements design and paste it into the new element okay so we're going to go ahead and change the text here ui ux designer that's what sam does we're going to have to give it a little bit of space here okay move it right about here okay great so now i'm gonna resize the window um you can see the text is scaling just like we wanted so that's great but there's an issue the text is getting smaller and the space between them is also getting really small sorry it's increasing so let's go ahead and actually see what we can do in this case so what's going on here is basically that we there's no relation between the two elements uh and we want to create some relation between them so what we can do is actually multi-select them and then you're going to get an option it's called stack so when i click stack it adds this little thin line here which is a margin between the two elements so now these two elements have a margin that's defined and i can just resize and you can see that they actually keep that margin that is defined along the way uh for this case i'm just going to put zero margin because i want them to be pretty close to each other so let's just put zero margin great um so now let's just work a little bit more with the stack i'm just gonna modify the the sizing here just so that we can make sure that it looks how we want we have the right positioning here need to dock it to all sides and just put zero values here okay great and then we're going to go ahead and also move these text boxes using the margins so i'm going to go ahead and add margin of six percent actually first i need to dock it to both sides before i do that and then i'll do margin of six percent and then we're gonna go ahead and move this one as well dock it to both sides and add a margin of 28 we can also remove this one because it's not needed okay so everything is looking a lot cleaner let's go ahead and add some some color here just so that we can make sure that everything looks as we wanted it to look um go ahead and just i'll put in clear there we go great so now we have this text here we'll change a little bit of coloration just so that it's uh you know pops out a little bit more the name of sam milo there we go great so now let's take a look and see what we're working with you can see that now the text seems to be really well positioned it's not moving weirdly or anything like that but the image here is still moving down so what's going on here is actually something related to sizing of this section we we have a section that is defined with 993 sorry 939 pixel minimum height and also high auto so what does high auto mean high auto indicates that the height of the section is going to be relative to whatever content is inside so the content side is controlling the size of the section but because we have a minimum height the section has to be at least 939 pixels high and because the count is not more than 139 basically we have we run into an issue where the size of the section is not the height is not changing but the width is and we want everything to scale together so in this case we're going to go ahead and actually modify the minimum height and just get rid of it we can just keep the height as auto and we'll see now what what behavior has you'll see that when i scale it actually kind of keeps everything proportionally scaling now so great um now we'll just kind of add some some more spacing stuff just that basically the image is in the right position we're just going to push the the section down a little bit so i'm going to go ahead and add a margin from the top of a percent and the margin from the bottom of 13 there we go and then let's just let's just round off this uh this section here by adding um you know our logo sem milo okay great and we're gonna go ahead and just resize it just a bit okay and one second and then we're going to go ahead and just put our value of what we want this by the way is an svg image that i'm using and i want it to be from the top and left both two percent seems like i was able to get it on stage so that's amazing uh great so just what we wanted let's see what it looks like as we scale down so thus far we've only showed you um desktop design i haven't showed you what it looks like as i scale down to to tablet or mobile but let's go ahead and take a look and see what happens so you can see as we scale down it actually keeps a pretty nice design still even though you know the screen is way smaller and this is because we took the approach of creating a proportionally scaling site so every uh section so everything looks you know pretty pretty well in this case so next up um in this this this header you know we're probably missing one of the most important parts of the website which is obviously the navigation so uh what we what we're going to do now is actually add a navigation but we're not going to add it on the top we're actually going to add it on the sides we're going to create a sidebar navigation um just so you know we have in editor x we have these sections that are horizontal and then we also have vertical sections and you can add the vertical sections off these buttons on the left hand side when you click on it you should be you should get the option to to you know add content in here just like any other section it works the same thing you can also resize them and you know however it wants and actually what it does it actually puts pushes the grid the page grid you know to uh resizes it in order to fit all the content inside the page so it's great that it does this uh let's go ahead and just get rid of this for a second um i've actually taken the liberty uh beforehand of designing a sidebar because i i wanted to to save us a time uh here uh but this is actually inside of inside the ad panel we have this section called uh that is my designs this section is in is any design i've saved from previous projects i can right click on any section and select save to my designs and this will be usable across any projects i have in the future as well and i can also reuse it on the same site obviously um so in this case i'm going to add a sidebar just give me a second here we're going to add this one it's going to add it here and if i want to move it to the right all i need to do is just click on it i right click on it and select move to right it's over here now something you'll notice right away that when i moved it to the right is that the you know that you can see that the actual menu is not visible on the first fold so much we want everything you know the whole sidebar should be moving with the page so it's accessible at any point so what i'm going to do is i'm actually going to change this sidebar to be fixed i can go ahead and select fixed and then beautiful now it scrolls with the page and it keeps its place at all times and we'll see what it looks like on tablet and on mobile still a mobile doesn't look so so uh so good but we'll go ahead and make some changes in a few seconds so great so now um now it's it's time for us to make some changes on the smaller breakpoints uh so in this case we're going to be making some changes on on our tablet uh now the way that that designing across breakpoints works inside of editor x is that we follow a cascading rule so any changes i made on desktop will automatically cascade down from to tablet and also to the mobile phone but if i want to override those changes i can go ahead and override them at any point just by going to the tablet and also overwriting them so let's just make a simple change right now i can go ahead and right click on this image and select don't display don't display it basically just hides it for for the break point so i don't see it anymore if i go over to desktop now you can see the desktop version still has it so they're not affecting each other they're separate great so now that we have done that let's go ahead and make a few more changes let's first of all let's move this image i want to make this a little bit smaller so let's go ahead and do 40 percent sorry and then also we'll dock it to the bottom as well to zero pixels so now you'll see it's kind of stretched to the bottom um and also we want to make a few other changes as well i'll just get rid of this minimum height because we don't need it and we'll change also the text scaling as well to be something better for the tablet okay and you'll say you'll see here as well do the same thing okay and we'll also we'll change this color to white there we go nice beautiful and i want these two text boxes oh sorry i guess i didn't press to apply my bad okay there we go and then we're gonna go ahead and uh set the the margins same because i want these two text boxes to be uh right on top of each other so i'll go ahead and put six percent just like we put before and you'll see that they're both right on top of each other now it looks like one one uh uniform title um great and then we're gonna go ahead and also make a few changes to the stack we'll change this to ten percent and 10 there we go um something you also notice is that logo became a little bit small so i'm going to go ahead and just add a minimum uh minimum width to this logo so that way it doesn't become smaller than 80 pixels there we go so now we can see we have this these changes between desktop to tablet it adapts the design according to whatever overrides i set and actually on mobile because the design is cascading down to mobile it also makes those changes i did on best on that sorry on tablet on mobile as well and if i want to take it one step further in my design i can go ahead and just design the mobile as well so i'm gonna go ahead and right click on this sidebar because it's really large it's in the way i don't need it right now so let's go ahead and set it to not display okay i'm gonna make my screen a little bit wider just so everyone can see really well um okay and then we're gonna go ahead and work on our mobile redesign so we're gonna go ahead and change the text back to green just to change it here change it to green and then we're going to change the margins of this stack to well we're giving it some margin so there's space later on to add a menu on the top so we're going to go ahead and give it a top margin of 35 and a bottom margin now excuse me actually i prefer to do it this way 20 and then 35 for the bottom margin okay there we go so now we have this and we'll also make some changes to the docking here um we'll do 40 docking for this image okay so now we have a little bit of space to add a menu so what type of menu can we add here i want to add a hamburger menu because those are very popular with um with mobile sites nowadays so let's go ahead and just drag and drop this into place i'm going to give it a size that i want so i'll do 30 by 30. and then also let's just change the color because no one can see it with the same color as the background and then i want to keep the distance between uh the sides of these two so let's go ahead and do we'll go ahead and put this as top two percent and write two percent and then we'll go ahead and put zero for this second sorry i did it the wrong side guys made a mistake yes no wait it's about these numbers i see you're you've got so many very specific numbers and styling and the docking and the margins and everything i i guess as a designer you do initially trial and error and figure out what works best by eye and now you've recorded what you think was right yes yes yes i've uh i built many sites on editor x and uh you know over time you start learning uh what what you like what you don't like uh but yes these numbers i i'm not just pulling out of a hat i'm actually uh you know i've i've used them before in other sites so thank you for asking great question okay great so um now we have the hamburger menu set up uh now let's actually set up the actual menu so um if we click on the hamburger menu you'll get the option to open the menu and this actually opens a container this container is called the menu container where you find the actual navigation of your menu but just like any other container editor x you can even add a grid to it or you can even add elements any type of elements in here in this case i really want to show my logo anytime anyone's accessing the menu so i'm going to go ahead and find logo from the media second it's just the same logo i used before i'm gonna resize it so that it fits according to how i want go ahead and put 30 percent okay put it right about here and then also i want to add a social bar here as well so i can just drag a social bar into place and just resize it however i want as well and maybe let's put make it vertical and make the icons a little bit smaller okay so once i do have other pages obviously we're only working on the homepage right now so it looks a little bit empty but once we have other pages you know everything will look a little bit more cohesive great so um i can also just close this later on and just it hides like that great so let's take a look and see what we have thus far so we have a design for for desktop a design for tablet and design for mobile and they all look very they're all very fluid in terms of how you know how it looks across all the different breakpoints so it's great great so uh we're going to go ahead and move on to to the next section um i've actually already added it created it from from a previous site and i'm gonna add it right in here um we're not gonna go ahead and cover every single section on the site because this is an overview and there's gonna be future webinars where we're gonna cover a lot of different topics including the grid layouters anything related to editor x we'll have very specific webinars for those right maria oh i was on me right great okay just to show you guys this this section for the about section is actually scaling proportionally it's very simple scaling of text and also we have a stack here so that's what's doing the trick in this case okay cool so moving on to the next uh next section we're going to actually start working with some grids um i've actually already created the the the title of this section so we can go ahead and just use that actually i put it in the wrong place so let's go ahead and move it up in place there we go now it's in the right place uh so we're going to be working with grids um if i go ahead and click on this section there's going to be an option that says apply grid so what i i can do in this case is just apply a grid to my section and these grids are are not just any type of grid these are css grids so basically uh if you if you're if you've used css codes before you probably know what i'm talking about but those of you that haven't used it so much uh you know css grids are basically an easy way for you to create a layout inside of a container section uh where basically you're separating the different parts into cells or grid areas so in this case we have four cells here four cells here one one one you know we have all these different areas and i can create my own custom areas so just to show you we're gonna go ahead and add a um let's add some media here sorry so let's see here recent collaborations all right so now we have this image i'll make it a little bit smaller and move it around first thing you'll notice as i'm playing around with the grid is that the image is docking to the grid lines not to a section anymore and this is because with the grid you're basically creating separate areas inside of it so in this case this image is docking to its the area of the grid cells that it's covering so in this case it's covering these four grid cells so it's part of this grid area now and what i actually wanted to do for this particular design is actually have it stretched so i'm going to stretch it okay and now it's it's covering those four grid cells that i was covering before so you didn't see it basically there's a stretch button on on top of the image and this is available for most of our components on editorx okay so then we have the image next up is adding some text so let's go ahead and play around with some text so quick add again add some title um okay put the title here i will go ahead and change the coloration so everyone can see what we're working with let's set it some some green okay and then we're going to go ahead and also change the font type um i'm going to put helvetica because everyone likes helvetica so let's go ahead and uh put helvetica in this case and then we're also gonna make it scale what we want to achieve essentially in this section is also the the proportional scaling just just like we have throughout most of the website everything's going to be kind of proportionately scaling so we're going to do the scaling again here for the text from 16 to 70. see how it looks okay great and now we can add the text that we wanted so i wanted to say here rose and may are two collaborators sam worked with and then we're gonna also add some docking options here four percent and then we'll do excuse me we'll do three percent and then four percent here and then three percent i actually put the wrong value here so let's go ahead and fix it there we go um oops wrong value click the wrong button sorry there you go okay three four three great so now we have uh this grid area set up let's go ahead and work on a on a few more of these so let's go ahead and add a container so i'm going to go to quick add drag and drop a container from here let's just stretch it onto this this grid area as you can see because it's only covering this these two grid cells it only stretches across the two the two grid cells it's covering so i click on the the brush icon we can go ahead and remove the icons from here so i'm designing this section let's go ahead and actually put the loud green again okay um and then we're gonna go ahead and add some text again so in this case i just want to duplicate i don't want to have to do the hassle of redesigning the text again so let's just drag and drop it in here we'll change the coloration let's put some white in this case great um great so now we have the text here and then we'll go ahead and just set up just making sure everything is the same great and then we're gonna go ahead and just go here and put three four three make sure it's also docked to the right just make sure we stretch in here as well we just want to make sure it's uh it's stuck to all sides so i'll fix this one as well there we go um here the the text should actually say uh we'll say magic clinic this is another collaborator and i think that maybe i need a different color actually let's just put black there we go that's easier to read sorry for those of you that were having a hard time reading that let's go ahead and just add another container here okay let's resize it there we go and then we're going to go ahead and give it some coloration again one more time yes yes we just have a very specific question here about the uh stretching an image across a grid cell the actual question is how can you adjust an image so it only stretches out to two of the eight boxes in the grid to two of the eight boxes um i did do it before i'll i'll show you guys in a second basically when i have this image what wherever whichever grid lines it's covering or grid cells it's covering that's where it's gonna stretch so if i only want to stretch over two i can just go like this it doesn't matter what size it is right now because i can stretch it anyways and i just click stretch and then it stretches only those two great cells and there's also a manual way you can do it uh there's another question here about you can start from row this end on row that i think it's in the inspector yes so you can you can manage yes you can manage the location of the actual uh the element inside of the inspector panel and find grid area for those of you that have used css grids before you would understand that basically you can set where the which column the the element starts and ends in so in this case if i change this to two you'll see that it actually now is indeed in here and also all the way to here but i want it to be in three uh sorry press the wrong button happens sometimes and then uh yes so yes we have if you need to if you're one of those that likes to use the inspector more than welcome to use it in this case it's actually very useful for the cases where you have a lot of layers on the on the on the grid it's very useful okay yeah thank you uh we'll go ahead and duplicate this okay we'll just resize it let's go ahead and uh give it a new name um this one will make white for sure we have to have one with white text there we go okay so now we have the white text uh we'll go ahead and set the the values for this as well so we'll go ahead and put six eight six there we go that looks good and we'll do duplicate of this as well so let's go duplicate paste it right in here and then to six eight six uh oh coloration okay let's set it to dark color there we go okay great so now we have it designed uh so let's take a look and see the responsive properties of this grid um i haven't played around with it too much so you know we might need to make some adjustments so as you can see one of the things that you'll notice just just by looking by the eye is that you can see that the width is actually changing but the height isn't changing so much as the width is um so what we need to do in this case is actually take a deeper dive into the grid and understand what values we need to go and adjust so if i click on the grid and select edit grid it brings me to the edit grid mode this grid mode allows you to basically you know change any value in your grid and adjust the columns and rows as well so in this case we have four columns all with one fr fr indicates that it's a fraction so we have four fractions of this section uh that are cut into equal pieces if i was to if i wanted for whatever reason to make this a little bit larger then i go would go ahead and put it like this and now you can see it's twice as large so let's go ahead and just put it back to 1fr um and basically you know inside of the inside of the grid you can actually manage a lot of different uh unit types we have fractions we have auto we have percent pixels viewport width viewport height all these different types we're going to take a deeper look into the grid in a future webinar um but there's a lot of power here inside the grid and you can be really precise on on how you want the behavior of of your grid to have so in this case i'm just i think sorry but i think someone from the team maybe they'll share in the in the chat with you guys our advanced grid lesson on editing grid um that might help you really dig into all of these uh adjustments there um maybe sharon or somebody will share it sorry go ahead and that's okay okay so now we're going to go ahead and set it to 1fr for both of these because i want them to equal the basically before we had a minimum and we don't want the minimum because we wanted to just scale without any limitations so let's go ahead and put for fraction again okay um oh i should have changed this text let's go ahead and just change it real quick free mass okay and now let's just go resize okay so it's looking okay there's a one more thing that we're missing here and what's happening is that basically the width is getting smaller but the height isn't changing so much so what we want to do because we wanted things to scale proportionately we can actually relate the height to the width of the screen so what we're going to do here instead of using a pixel for minimum height we're going to go ahead and use a little trick of putting minimum height minimum height with vw viewport width so one vw unit indicates one percent of the viewports the viewport indicates the screen so we're taking one percent times 40 so 40 of the viewport screen is what the the height will will get and now you're gonna see that they all scale proportionally now the reason why this is happening is because these these cells are all perfect squares and we're scaling both the width and the height at the same rate in this case so that's how it works so you can see how it scales and it can go really really well as you scale down to tablet still looks good you go to mobile and it looks okay maybe we want to make some adjustments in this grid so let's go ahead and click on it and select adjust grid in adjust grid you can actually select a new layout for your grid just with us with a simple click of a button and what this does is that in in editor x we actually created uh the logic and you know the a smart system that allows us to relay out your your grid into uh different layouts so when i click two to four okay now we have a new grid layout and it looks pretty nice uh most likely it's a little bit too large for me right now so let's go ahead and just put 500 pixels there we go and now now we have a beautiful scaling website that will continue to scale down and move along the way um by the way there's an issue yeah we had a specific question now about the um customizing at breakpoints um just uh could you explain uh briefly um what changes uh made to smaller breakpoints can affect the larger breakpoints in general we have this cascading rule but is there any true desktop yeah yeah so basically um breakpoints are not a technology we created ourselves this is something derived from css media queries and the way that breakpoints work is that they're basically overriding anything in terms of design so anything that you're changing in design like text color text size uh position size these are all design properties but there's a few properties that are specific to html which is the structure of the page so anytime you change the structure of the page for example if you if you if you were to assign you know attach an image to a new container you're basically changing the structure of the page so in these cases because you're changing the structure the html it affects every single breakpoint even if you're editing from the mobile i'm just going to show you guys real quickly i'm on the mobile and i've moved this around it says attach to container at this point i'm going to be changing the structure of the page so if i do that you'll see that when i go to to desktop it did affect it um so you know just keep those things in mind that any changes to the actual structure of the site will affect across uh every single breakpoint the other one is data so data indicates anything where if i change the text here if i make a change here if i put an e at the end here it's also going to appear on desktop obviously so uh just keep that in mind as well that uh data and lay and the structure are the two things that basically will will change cool thanks i hope that that answers the question thank you yeah great uh so let's go ahead and um and continue on on our website so we'll go ahead and actually add a new a new section in this case uh this section uh i'm not going to go super in depth but i want to kind of show you guys a little bit about images and how they work on editor x when you upload an image we have a a system called the smart focal point which we basically identify the subject and we center the image on the subject this case we have three but it finds the center subject and centers the image on on on the subject so these three models here and in this case you know we have the image that you know is being covered by the text you know the gentleman right here and we want to change the focal point that was defined previously so all i need to do is just click on the image and click on focal point it will load up this little panel over here and i can just move this focal point around to any part of the image if i want to drop it here it will actually change if i put it here you'll see how it changes and in this case i just want to put it right on on the chin so that way it's still visible let's face okay just a little bit more up okay great so now we have um this image that is uh you know repositioned and we can also add some nice scrolling effects to this image so if i want to just click on scroll behavior and select parallax parallax basically gives you a depth uh effect of the image basically it scrolls at a different rate let's take a look and see what we've built so far and also see this this image how it behaves okay so let's just scroll down and you'll see how great this is and this also will work on mobile as well if you go down all the way to mobile you'll see that it actually will also have this parallax effect and you can see the rest of our design so everything's coming along pretty well guys so pretty happy with the design we're creating but let's go ahead and continue adding some stuff here i'm gonna go ahead and go into edit site again and we're gonna actually add a new section that goes along with this section for latest designs uh it's going to be the repeater section repeaters are another container type that we have inside of editor x which allows you to basically create a design for your section and sorry guys my internet's a little bit slow here it allows you to to create a design for for your uh for a the container and each item basically has the same design across across the way so here in this case we have all these different items along the repeater and if i move one if i move this around you see how it moves across every single item as well i'm just going to put it back so that way it doesn't move too much other things you can do with repeaters is you can actually manage the layout and change how many how how many items are per you know per row so if i want each row to have two if i want to have one or three i can go ahead and do that as well in this case i don't want eleven i want three just keep it at three oh sorry about that and you can also see that if i if i go to this other breakpoint i can just customize it because i i want this to actually be two so let's just switch it to two and now you can see on on desktop we have three on here we have two and then on mobile i actually want to do a little bit be a little bit more fancy change the layout again and change it to a slider slider basically creates overflow that you can actually scroll you can create like a scrollable container where people can see the rest of the content just by scrolling to the right great awesome how are you doing with questions there maria i think it's looking good okay great i'm excited i'm excited to hear you guys questions so ask them away yeah we're running a little bit out of time so um we have one more section right and then we can yes last section okay so let's go ahead and move over to the last section so this i'm going to show you guys one of my favorite uh section types which is the layouter that's our container types not section types which is the layouter the layouter is our flexbox technology sorry just to go here okay let's do that again uh the layouter is our flexbox technology uh basically what happens inside the layouter is that all this all the items that you have inside of it are are equally or distributed the space in a really smart manner and it allows you to actually create a responsive section or container with a few simple steps you don't really need to do too much you can see here that it kind of changes as you go away and i i haven't done anything to it yet this is a blank layouter um other things you can do this inside the layouter it's built out of items and here you can see that i have four items i can move them around and reposition them wherever i want them to be i can resize them i can also duplicate them and create new ones so we have five and just you know just play around with the the layout in this case so um we also have by the way we have inside the layout managed layout we can see very similar options to what we had in the repeater columns rows mosaic slider um let's go ahead and just add the our last section here so that we can go ahead and continue sorry excuse me guys i clicked on the wrong thing actually what i did just there um is i selected the wrong element uh the right way to do it is when you click on an element you should be able to see that there's this blue breadcrumbs right here and these blue breadcrumbs allow you to navigate to the next available parent so if i click on on there i can click on the item the layouter now i've selected a layout or i want to delete the layout or x and delete the wrong item this can happen a lot specifically when you're stretching stuff or you have um large items on the page well that's really useful thanks for explaining that that's good yeah no worries um okay so then let's go ahead and just add our last section here the layouter section just like i showed you guys before we have i just need to move this around okay so just like i showed you guys before uh you know every all these items can be resized and as you resize them the layouter will take care of all the all the hassle of relaying all your content um you know you don't have to move stuff around it kind of helps you along the way so all i wanted to do in this in this case i just want this to be on tablet let's go ahead and make some changes here i want this image to be on the left hand side excuse me there we go drop it right there and then maybe the get in touch let's make it a little bit smaller and then there we go uh this maybe we can make it bigger as well there we go so you can actually resize them as however you want and do the same thing on mobile and also on on the desktop so just like anything else all the changes cascade down and uh that's pretty much it for today guys uh but let's take a look a final look at what we built today so we built this responsive section using text scale and scaling images and the sections also scaling uh we built this section using uh the grid where it also is scaling and we're using vw units in order to do some magic there and then we have parallax effect repeaters and the layouter as well and uh that's it for today awesome thank you so much sevi i think that was i think our brains are all exploding that was so much uh to take in and and i know it was like a very quick deep dive actually not a deep dive a very quick overview and there will be future webinars where we will deep dive into different sections but i hope this gave you a little bit of a um an insight into the basics of getting your site uh up and running on editor x um sebi if i i know maybe some of you need to go because i know we've run over slightly but um i do have a couple of questions that um i'd love to ask you that the guys have been collecting um for us so um first up um oh my god i don't see i'm sorry sorry one second give me a sec it's okay um uh okay i'll i'll just go for it i don't i don't see the ones in the dock so i'll pick some from here um can you manually add an anchor and place it wherever you want uh in the ad panel could you could you show us that it's not from that we don't have the option to add the anchor directly from the ad panel but what you can do is click on any single element and then inside the inspector you can find the anchor option and just add an anchor to it and just you give it a name and just add it to anywhere so you can basically just add an anchor anywhere uh just needs there needs to be an element in that location basically okay so i i hope that answers your question also uh another question here um somebody's asking i don't think we will cover adding code today um but might there be another webinar in the future about adding custom code yes there is i can answer this and there is there are lots of custom code capabilities on editor x um and we will in the future hopefully the near future do a webinar where we talk about all of the the coding possibilities with the ide connecting to apis and stuff will be covered soon another question here um about the product pages where was this one rotum [Music] uh moving across a catalog from a store is there a way to migrate a product catalog from the old version of uh of from the wix editor um if you have built one on the on wix can you migrate it over to editor x i have a feeling there's something like that in the pipeline okay so first of all i know that everyone's really interested in in figuring out if they can migrate from wix to editor x currently we don't have the possibility of migrating them but it's something we we're really working hard on and we really want to give you guys this possibility as far as the product catalog is concerned um actually in the in the store you can actually export your catalog and then just re-upload it into a new site so that's like a little bit of a hack that you can do in order to save yourself some time and not have to wait for us to get to a solution but we're definitely working on it we've heard all your guys's feedback and we know that it's a really top priority for you guys as well okay cool i'm i know we've run out of time so i think that's uh all the questions we can do for uh today um so thank you so much but if you do have questions which we haven't answered uh um please go over to uh editor x slash community you'll find our forum there and um the product managers are live and online there maybe not right now they might want to have some supper um but they are there answering questions and uh feel free to keep the conversation going there and we'll try and get to all of your questions um just to just thank you so much uh maria just to correct you it's editorexcommunity.com sorry is there that's okay thank you guys so much for for your time and i hope i wish you guys the best of luck with x and i hope to hear some feedback in the future from all of you guys thank you thank you so much debbie thank you

Channel: Editor X

Views: 9,177

Keywords: Editor X, responsive web design, responsive design, responsive, website builder, create a website, build a responsive website, how to make a website, CSS, CSS grid, layout, graphic design, web design, flexbox, flexbox technology, breakpoint control, advanced web design, responsive layouts

Id: mdWHYvQoY8g

Length: 61min 6sec (3666 seconds)

Published: Thu Aug 27 2020