Building a Website with Editor X - Part 1

in today's video we're going to dive into editor x and start building this product website for this wine company editor x is an advanced responsive web creation platform made for designers and agencies it's a super powerful tool if you want to check it out there's a link down in the description they're sponsoring today's video so thanks to editor x let's go ahead and get started with today's video so here in editor x let's go ahead and create a new site i'm just going to start with a blank canvas so with our blank site we have a section in the center and our master header and footer for us to work with for our design we're not going to use this master header just because i'm going to put my navigation inside of my main hero section which is going to be our first section here also we have these handles on the side so i'm just going to scale this website in making sure i keep it in the desktop view but i want to make sure that when i open these panels on the left and the right for the inspector and the quick add for example i don't want to cover too much of my website just to speed up my workflow just a little bit so our page is in a dark theme so i'm just going to quickly select the section and go to page here in the breadcrumbs to make sure i have that selected and we'll just apply our custom color by clicking the plus and we'll just say 1c1c1c which is the black color we're using in our design now that we have that let's go ahead and update our footer master and i'm just going to hit edit text and i'm just going to paste in my copyright information and i'm also going to set this to a paragraph 3 and we're going to update this style to poppins and extra light and for now we're going to leave it at 14 size we may need to adjust that later and let's also apply a straight white color to it since we've updated paragraph 3 you'll see the little asterisk here if we click the drop down arrow we can update our theme and apply that theme so everywhere we use paragraph 3 it's going to apply that same styling and this is using our theme manager so we can open that by this tab right here and we can manage our typography and colors of our site with these just to speed up our workflow and to keep us from having to style things repetitively so let's go ahead and select our first section and with most of my hero sections on websites i like to apply a 100 viewport height so i'm going to type in 100 vh and so the height of our web browser is going to determine the height of this section and we'll just leave the minimum height at maybe 6 just so that it doesn't collapse too small because we're going to have a fairly tall image here on the right so to add our first element i'm just going to go to the add elements panel and go to media and then let's upload some of our files i've already exported all of my images and assets from adobe xd so i'm just going to drag and drop those in here once everything's uploaded i'm just going to select my first image and add it to the page next i'm going to select the section itself and apply a grid and let's just do a 2 by 1 grid so we have two columns and i'm going to drag my image into the right side column and click the stretch button and it's going to fill that entire column for the left hand side let's go ahead and add our first h1 and our button so go to the quick add and then we'll just go title and i'm going to edit the text and select heading 1. so for our heading one we're going to use a poppins semi-bold and i'm actually going to select this icon for scale text and this is the range at which our text is going to automatically scale for different break points for us so the maximum size it can be is going to be let's go with a maximum size of 60 which we're on the desktop view so that's how large it's going to be and then for the smallest size let's go with 36. i'm also going to change the color to a straight white color and then let's apply some of our text from our design now that i think i've made all my changes i'm just going to update my theme and apply the theme so now all of our h1s will have that exact styling let's just drag out the width a little bit going back to the add panel and grab a button and just drag and drop it in and for our text place an order and if we head back over to our design let's just grab our main pink color that we're using and just copy that and then we'll click the paint brush here for design go to fill and then we'll just add a new color and we'll paste that in i'm just going to drag it straight below our heading and just give it a little bit of space there and then with that selected i'm going to hold shift and grab the text so since we have this multi selected we can add this as a stack to quickly explain what the stack is doing it's allowing you to control the relationship between these two elements by putting them in a flex container so that's going to prevent this button from ever overlapping this heading so you can see the highlight of our spacing here in this stack showing us that this space is going to be respected and it's going to make sure that is maintained throughout different sizes in our design so with that stacked selected i'm just going to drag it to the center of this grid and to make sure that it's centered i'm going to go over here to the inspector and you can just click the second one to align to center it's going to make sure it's perfectly centered inside of there our hero section is very basic so this is pretty much all we need besides the actual navigation itself so let's go ahead and do that i'm going to click the add elements button and go to quick add and just drop in a basic container i'm going to drag this basic container all the way to the top of the canvas and let's just give it a height of about 70 5. that'll work perfectly and i'm going to go to the width and i'm just going to set this to 90 just so we have some spacing on the left and the right side of 5 inside of here we're going to need two things we're going to need our logo on the side so we can go to add element media and i'm just going to grab my logo and i'm going to set this to a fixed size because i don't want this to change at all and then i'm going to drag it all the way over to the left hand side of the container and make sure it's centered vertically so let's just align that properly and i want this to dock on the left and probably the top as well next let's add a menu so i'm going to go to the menu section and just grab this straight text menu and drop it in so now that's inside of my container i'm just going to align it to the right side so we'll just make sure that's aligned there and centered vertically so we can select manage menu and we're gonna have a home button by default so i'm gonna click these three dots and actually change this link since we're only having a one page product page i'm just gonna use anchors so that when people click these links it's going to scroll into different sections of the page so for now we're just going to leave all of them set to top of the page just because we don't have any anchors set up we're going to do that later so i'm just going to hit done and then i'm going to change the name of this so we have vintage wine we'll add another link same thing make it an anchor currently shipping and then finally we have one more link to add for placing an order so we have all three of our links temporarily set up let's go and add some style so i'm going to click the design and i want to go to the text and change the color to white since we have a dark colored background i also want to change the style of these to poppins extra light and bump them down to 14 pixel font so now let's adjust the layout so i'm going to click the layout button so i'm going to line the text to the left and i'm going to untoggle both of these and align this to the right just so our navigation is on the right side and i'm also going to scale this up a bit just so we have a larger container just because we only have this logo over here on the left so that's going to do it for our navigation we just need to select the container itself change the design style and remove the border so i'm just going to put that to 0 opacity and 0 pixel width so that's pretty much the section done one thing i want to do is just check to make sure that everything is docked properly so i'm going to go into the inspector and here with this container selected i'm just going to dock it on the left and the right so that's going to change this to fluid if you notice that's slid over so what docking is going to do is it's going to determine the vertical and horizontal position of elements within the section container or grid cell when the screen is resized so now when i resize my design so if i grab one of these handles and scale it down docking is just going to make sure that it keeps that distance on the left and the right so we want to make sure we're docking things appropriately so i'm going to select my stack and just make sure i have the docking on the left so these are just helping me align things inside of each section so this is determining the position based on the top and the left for this element and for the image we don't need to do any of our docking because it's already done for us since it's stretched to the full section size we just need to change the focal point to exactly where we want it to be so when it scales down i want to make sure that i get this bottom of the box kind of always in the view so i'm just going to drag the focal point down just a little bit so let's move on to our next section so here at the bottom of our hero we can hit add section and let's go with a css grid just by clicking grid there and i'm going to do a 2x2 grid and apply that if we go back to our adobe xd design so here in our design we have this image on the right and then these two cells here on the left so let's quickly add an image so i'm going to go up to quick add and just drag in an image i'm going to make sure my image is in both of these cells on the right so i can stretch that to fill them out i'm also going to go into the grid itself so here i can select adjust grid with these sections selected and i'm going to edit the grid i want to specify the height of these cells so i'm just going to drag down on these two bars to about 450 pixels in size just so both of these cells have some good room to them so i'm just going to drag this one down to 450 and done to apply now we need a container for each one of these so click add and just drop a container in and stretch it to fill that first grid cell and we'll do that again for the bottom left so first let's do the top grid cell heading back over to our design i'm going to select this background color and just copy that hex code and with our container selected let's select design go to fill and just apply a custom color code of our blue color and we also need to remove the border of that container and for the one below it we'll just make sure that it is white and that we remove the border as well first for our blue section let's quick add a title and this is going to say 2014 vintage and we could do this in a smaller heading such as a heading 6 but since we already have the paragraph 3 set up i'm just going to use that since it's the exact same styling so now that we have that in there let's also add a another title and just paste in some text and for this one we're gonna use the heading two since it's a step down from our heading one and with this one we're gonna set it to a scaled text and we're gonna scale it up from 24 to a max size of 36. also going to change this to a white color and then we'll update our theme so now we have our h2 and our h1 styled just gonna drag this slightly below the smaller title and then finally let's add a button and we'll change the text to place an order so we have these vertical elements here so let's select the button hold shift and grab both of the text and convert them to a stack same thing here with the stack selected we'll go to the inspector and center inside of this grid cell and with this one we're gonna change the docking just to the exact and with this one we're just gonna make sure the docking is set to center for the next grid cell let's add in a paragraph this time and we'll copy and paste in our type from our design and with this we're going to set this to paragraph 1 pop in extra light and we're going to scale this font from 22 all the way up to a size of 30. and with that we can update our paragraph it's going to make sure it is centered inside of this grid cell and finally let's grab our image and we'll just change it to our product photo and we'll set the focal point and we have our second section now done that's gonna do it for part one building a website using editor x thanks to editor x for sponsoring today's video i'll see you guys in the next video where we finish building this website as always have a great day and i'll see you guys in the next one

Channel: Caler Edwards

Views: 20,180

Keywords: Intro to Editor X, Get Started with Editor X, EditorX, Editor X, Building a Website with Editor X - Part 1, Build websites with Editor X, Editor X tutorial, Web design tutorial Editor X, create responsive websites with Editor X, Design to Product with Editor X, Part 1, Design Tutorial, Web Design Tutorial, No Code, NoCode, Caler, Caler Edwards, CalerEdwards, UI Design, UX Design, Web Design, UI/UX

Id: DPiwMHMvZPQ

Length: 14min 16sec (856 seconds)

Published: Thu Oct 15 2020