In our last video, we started building this website in Editor X and in this video, we're going to keep that momentum going. Let's go to friends. Welcome to Creative X. My name is Brad Hussey and I'm a web designer. This is the second video in a short series where we're taking a figma design file and converting it into a fully functional and responsive website using only Editor X. So far, we've already set up our Global Design Library and built out our navigation header section.
And what we're going to do now is we're going to keep building the rest of the site. So let's do that. All right. Here is our design in figma we're looking at the hero section. We've got a heading with some subtext, a button, and a nice hero image in the background with a bit of a fade. Over here we have the tablet view, just a modification to the layout and then the mobile view it stacks. And so that's what we're going to create right now. Okay. So here we are in our Editor X site. I'm going to open up the layers panel, and we're going to be working with this section called Hero, what I labeled it. I'm going to add an element, choose title. I'm going to make that a level one heading so it matches our design library. And then I'm going to go ahead and add another text element here. Paragraph. Drag that in.
We're not going to worry about positioning just yet. We're going to edit the text and choose paragraph one. So it's the right size and then we're going to add another element and that's going to be our button. So I'm going to choose assets. And then our creative agency website library and then our primary button. I'm going to drag that in Now, what I want to do is select all three of these items and make them a stack, and that makes them behave a little bit like a Flexbox group.
And now I can adjust the spacing between each of the items to make it nice. And even so, in the inspector panel on the right, I'm going to go down to display an item spacing, make it 50 pixels nice. So now I'm going to drag this whole stack to the left and line it up with our logo, and I'm going to vertically align it to the center And as you can see right now, it's docked to the left and it's a 10% margin. I'm going to change that to be 150 pixels to perfectly match with the logo I'm going to make this stack about 50% of the width.
Now when I choose 50% here, it's not going to look right because we have that left margin. So I'm going to drag this to the center of the actual viewport, and that's about 42%. Now let's put the actual text in the website. I'm going to copy this from our Figma file. Just paste it into our heading want adjust the width of this text element by clicking layout and then making the width 100% of the container that will fill that out. I'm also going to edit the text and adjust the line spacing here or the line height rather. And I'm going to make that about one to 1.1. That's a pretty good rule of thumb for large headings. It looks much better. All right. Now let's add the text for our subtitle. All right. Now it's time to do this button. So we are going to click this button here.
We're going to change that to say learn more and then I want to adjust the size of the button. So let's check out the design. It looks like we're about 180 by 70 ish and then I'm going to adjust that here in the width, 180 by 70. That'll make that button match the design. Now, I want to add that image so we can do that by clicking the plus icon to add an element.
Go to our media section under my uploads. Already uploaded that file and I'm going to find it right here. I'm going to add that to the page. There it is. I'm going to drag that into position. I want it docked to the right and the top. Okay. Looking at our design file, it looks like the image goes about two thirds of the way across so I’m going to select that and make the width about 66% to get the same effect. And then I'm going to select the image in the Layers panel, and I want it to go behind that hero text. So I'm going to drag that image and drag it below the stack in the Layers panel. So the Layers Panel works much like your Figma design file where the layers on the top will be displayed in front of the layers below it. So this just is really intuitive for designers because it's the same thing in Figma In fact, sometimes switching from Figma to Editor X, they look so similar.
Sometimes I forget which tool I'm actually in. Now, as I compare my editor X version to my Figma design, they look almost identical. Now we're going to start making this responsive. So I'm going to check out the tablet view. Obviously a few things look a little bit wonky. So comparing to our Figma file, looking at the tablet view right here, looks like the font size is a bit smaller and obviously we have to adjust the layout. So the font size for this heading, we're going to make sure that we use that. It's about 56. So we're going to change that to 56 pixels. I can also use this scale text feature which will dynamically scale the text up and down based on the viewport size, but I'm going to keep it 56 just to exactly match the design. Now we want to make sure that this body subtitle is 15 Pixels to match the design. The button looks to be the same size. So we're going to leave that. We're going to select the stack here and make sure that the margins between each of the items is now the margins that we see in the design.
So that's about 30 pixels. So I'm going to select the stack change that item's spacing to 30 pixels that looks better. And I going to make the left margin match the logo. So the logo is 60 pixels from the left docs on the left. So we're going to do the same for that stack. There All right. Now, the width of the stack, I want it to, to match this design and figma. So that's about 60% across. So we're going to select that stack and make that with 50%. Actually, that looks good to me. Now I'm going to drag this image to be a bit taller. It'll fill that container better. That's looking better. And I'm also going to adjust the focal point by clicking this icon right here. And you can move this little dot to choose where you want the image to stay focused. No matter the screen size looks better matching the design, the fade looks good. I'm loving it.
Now we're going to check out our mobile view and editor x looks a little bit wonky, so we need to make some adjustments over in Figma, we're going to copy the mobile styles right here. Everything is stacked. The font size is a little bit smaller. Let's see what that is. So the heading is 40 pixels. And then the subtitle is 15 pixels and the button is 18 so we're going to make those adjustments.
We're going to select that stack, adjust the font size of the heading. I'm going to change that one to 40 pixels. And then the body we're going down to 15. It looks like it's already there. Perfect button's good. We want to make this width, the full width. So we got the stack selected and we're going to make the with 100%. Obviously we need to center that. We're going to click that center icon, give it some padding on the left and the right. We want to match the logo. So that looks to be about 20 pixels from the left. So the padding in the stack is going to be 20 pixels on the left and 20 pixels on the right. That looks good. Okay, now I'm going to take this image and I wanted to span the full width, so I'm going to select that. And in this inspector panel, make it 100%. I'm gonna adjust the height. This one looks to be 200 pixels high, so I can set that specifically to 200 pixels and that will adjust that for me.
Now I'm going to select the stack and I want to position this properly so I'm going to shut it up against the bottom of the image there. I'm going to dock it to the top of the page and I'm going to give it a padding on the top of 60 pixels and a padding in the bottom of 90 pixels. Now we're matching it design much more closely Looks good to me. Okay, so now let's test it on our tablet and our desktop. We're going to preview this actually just to see it a little better. So we're going to adjust the screen size.
So desktop looks good and our tablet view perfect. And then our mobile view. Wow, this is awesome. Okay, so we're making good time on this build so far, and I'd like to get started on the next section of the website here. So if you're liking in this tutorial and you also want to move on to the next section, I'm going to need you to tap that like button Do it. Do it. Do it. Do it. Do it. What are you waiting for? Thank you. Moving on. Okay, so we're going to move on to this section right here. We've got our image on the left out text on the right.
A little embellishment here. Perfect. And then we'll tackle this section after that. So let's go there. Back to Editor X, going to click the plus icon to add a new section. We can choose Grid to do half and half. So let's actually try that out And we're actually going to make this two by one, apply that. So it's going to split it down the middle. So it's going to allow us to add our image in the left side and change the color in the right. So this is kind of like CSS grid. I'm going to go to our elements in our media and a find that upload image was this one.
We're going to add that to the page. We're going to pull it into the left side here. And I can actually just fill it to fill the container. Now, it's obviously not the right height. So what we can do is just adjust the size of the grid layout in advanced mode. We can make height be what we want it to be. So let's check what it is in the design. And it looks like we are 980 pixels tall. So let's make the minimum height 980 and that looks better.
So now in here we're going to add our text add that heading two and we're going to add some body copy as well. And a link which is merely body copy with an underline and a link Okay. Now we're going to take each of these where to stack them. It's going to allow us to adjust the item spacing, which is 50 pixels going to align each of these items, make sure they fill out the container and the width of this is probably the stack should be about 80% now let's add our text design is strategic, we can make that proper color and schedule a call but let's select the stack and place it in a container by selecting these three dots and then clicking place in container.
Then we can stretch the container to fill the entire space. I want to change that background to match the design. I believe it's that dark blue gray color, so I'm going to select that. Just confirm. Yep. And now I want to reposition this stack to be vertically centered, and then I'm going to make the width 80% and then horizontally center that. So I want to change the color of this text. I'm going to select the dark text and make it white. Select this dark text the paragraph. Make that white as well.
That looks good to me. And referencing the design here, it looks like the text container is not as wide as I made it in Editor X, so I'm going to adjust that to make that width more like 60%. That looks better than the line in the heading drops down to a second line I want to adjust that line height, not level two heading to 1.1. That looks much better to me. Now let's add that little red wave we see in the designs by click on add element media and we can find our BG pattern wave red SVG file.
We're going to add that to the page. It's going to drag that to about the center of that heading there and should line up nicely and resize it. It's about 135 pixels wide. So let's make that adjustment center that in the page and with the heading. All right, looking pretty good. All right, so we want to now design this for tablet. So in Figma, I'm going to go over to our tablet design it looks a little bit shorter and the text is a bit smaller. Okay. So go to Tablet View and Editor X and we're going to make some adjustments. It's obviously pretty tall here, so let's find out the height that looks to be about 658 so we'll make it about 650. So to do that, I'm going to go to the Layers Panel and select section, the one that we just designed, changed grid layout, advanced mode. And then on the left we can change the min height to about 650 pixels and that will make the height better match the design. All right, so we're going to resize the text and select the text here.
The heading and I going to change that to match the design which is 32 pixels. So we're going to change that to 32 pixels. The body copy is 15 pixels Make that adjustment as well. And the same goes for the, the link at the bottom. That's 15 pixels as well. Right now I want to reposition that curly wave. It looks like it is 60 pixels wide. I'm going to make that adjustment in Editor X as well. I'm going to drag that to the center of the screen in the grid and the center of the headline, Perfect Tablet View is done. And now let's go to our mobile view. It looks like it changed the layout a little bit here. That's a very cool we've got our mobile view and now we're going to select our layers, our section, change the grid layout, and we're going to stack this on top. Okay. And now I want to adjust the padding and the spacing and everything on the second grid cell. So select that stack and we want to make some adjustments to the width to make that 100% to fill the container, give it some padding all around.
We got 20 pixels on the left, 20 pixels on the right and on the top and bottom. I want 60 pixels Now I want to take this squiggly line and make it look like the design in mobile view. So I'm going to drag it over to the left, try and make it easy on this line here. Oh, not working. And that's because it wants to stay in this top cell. And if I were to drag it further down, it will just pop down and stay into the second cell. Like this. But I don't actually want that. I want to span both of the cells and be on that line in between the two. So if we look over here in the right hand side, if we hold shift, it will expand the element across multiple cells.
So I'm going to drag this element and hold shift at the same time, and then I can move wherever I want and that's where I want it right there. All right. So now that that's in place, I want to see what it looks like on our other viewport sizes. So let's go to desktop and it seems like that squiggly line is not in the right position. So what I'm going to do is reposition this on this view, and it should stay where I want it to go. So I'm going to drag it back where I want it, and I'm going to resize that to something bigger. Maybe we'll do inside of pixels. We'll do a percentage, so let's say 20%, and maybe that will resize on the tablet view as well to better match the screen size and it looks like it did perfect.
We're just going to drag that to reposition it for tablet view. That looks good. And let's check our mobile view. All right. So that squiggly line is not wanting to play nice on mobile view when we reposition it. So the problem here is something to do with the stack or the container. So I'm going to duplicate this vector art and I'm actually going to get a little creative here. I'm going to create one for mobile and one for the other views. So I'm going to hide one of them and I'm going to use the one that's visible for mobile. And so I'm going to make sure that this one is positioned properly. So I'm going to select that and I'm going to center that and going to bring it to the top. And then I'm going to hold shift to span both grid cells, move it to the left, shut it in about 20 pixels there we go.
Make sure it's nicely centered and aligned. Okay, so that is our mobile squiggly line and let's go to our tablet view and we should have two there. So we're going to hide one of them, which is the mobile one. We're going to not display it and we're going to check on desktop. We're going to not display it as well.
And so now let's actually rename this. This is going to be Vector Art Mobile, and the one that's visible is Vector, our desktop slash tablet. So let's check out tablet, perfect mobile. Okay. So that one's hidden for some reason. Let's just make sure to display it. So our mobile one is displayed on mobile view and our tablet view is desktop view. Mobile is hidden desktop, our squiggly line works and the mobile view is hidden. All right. That's what we're looking for. Look at mobile view. We've got our desktop view tablet. Mobile. Yeah, we're good. This is awesome. All right. So now that we've finished the hero section and a little of the body section in Editor X, it's time for the homestretch.
So up next, we're going to finish up the body, add some interaction functionality and maybe even a little animation. So make sure you subscribe to the channel so you don't miss that video. And I'll see you in the next one..