In this lesson, we apply the lessons learned and make our site responsive with Editor X.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
So one of the things that I like doing when I start working on any project is I typically hide all the sections on the page. And that way I can focus just on one particular section. This little quick tip will also help you. Work a little bit faster when you have a very large page in our tablet mode, you can see our signup button is on top of our hamburger menu.
I'm going to select the menu and then I'm going to change the color so that we can actually see it.
You're going to see that in our layers panel of selected the hamburger menu and you have a floating menu that you can play with. You can access additional hamburger menus using the add panel. So you see here, you have all these types that you can choose from. And what we're going to do is we can open up the menu and what this does is just, it triggers an interaction and we have additional information in our layers panel.
Right here. We can start customizing some of these elements. For example, the background let's go ahead and change that to our primary green
and for our vertical menu. We can start increasing the font size. All right. So let's go ahead and select our heading six. This size. That's pretty good. In one thing you'll notice in our attributes panel is we have a spacing one for our mini. We can space out all these elements vertically and you can use the pixel value.
We can offset and even have a soft menu offset, but because we don't have any sub menu items, we don't need to worry about it. All right. So let's go ahead and close this and going back to our signup button, we can align it just a little bit to the right. We make sure that everything looks good on this view.
So it looks like the title and subtitle look pretty good from here. We're going to start seeing things break apart. All we have to do is make sure that we start using the side handle bars to make sure that there's no additional break points that we might need in order for us to make this design. For example, you can see here on the mobile break points, the signup is actually using the percentage value on the margin, right?
So let's swap that out to me. Pixel value in stat, maybe give it a hundred pixels. There we go. This way, we have a nice spacing between both the tablet and mobile notice how it cascaded that effect. Act down to the mobile break point for the logo. We're going to change that to 75 pounds. And again for the title now start experiment with, with the font size, for the purpose of this demo, I'm not actually using the font scale.
I'm just using a fixed font size. It just feels a little bit easier for me to have more control over. And again, we want to make sure we give that a hundred percent to the sub-headline so that it stretches out as much as it can. If you select our section or hero section, we can see how it's using a hundred VH to expand all the way down.
Let's give that a maximum height and we can adjust just a little bit more so that it's not so tight, just like that. You can see here also that the footer needs some work. So I'm going to go ahead and quickly fix this. I think it just needs to be a smaller font size. There we go. Now, if I scaled down, you're going to notice that I removed the video from the mobile experience and on desktop, we have that video pop back in.
Is this always good practice? Because on mobile devices, some browsers don't support auto-play. So let's go ahead and move over to our overview page. We want to make sure that everything starts to look good on different breakpoints, making sure that the title is. We want to make the focal point change just a little bit.
These logos within a grid, let's move them out of that top area. Not much needed to do here. Maybe we can expand this text and maybe decrease the font size. Our offset looks pretty good, and it doesn't seem to need any changes. So let's keep moving forward here. We can start changing a little bit of the side.
Of these floating VR headsets, we can always reset the image from the cog wheel. There's a reset image button that will help us get this to where we need it. Now I'm going to go ahead and skip through a lot of this work because it's just basically moving things around in our canvas, changing the font size, adjusting a little bit of how we want this to look on tablet mode.
What I really love about editor X is everything is so visual. Like we don't have to worry about weird CSS code or anything like that. It's just moving things in your canvas. Like you would do it on any other design tool.
So you can see here, we have this beautiful layout. We can move now towards our mobile break points. Again, just changing the focus on those areas. Changing the font size and adjusting the width. Basically, this is pretty much what you really have to do when you're working for responsive behavior. You're just adapting and changing things and just make sure that whenever you're doing that, you're not moving things for objects out of their parent containers, because that would be Repairenting.
We don't want these elements to break apart. When we go back into our tablet or desktop mode.
Check this out, this looks really good. This is the mobile break point for our products and everything looks pretty good. One thing before I forget is the overview has that cool, transparent video. So we want to make sure that this transparent object is visible and it works well on other break points too.
Let's go ahead and do that. The first thing is just make sure you select the content. And just start playing with the size, the width, the height, the margins, make sure you align it in a way that it doesn't affect or hide any other elements. For example, here, I'm just going to make this taller, this little section taller so that we can have a little bit more room for that.
We can also offset that so that we can make that nice readable text before you get into the rest of the section. One thing to notice is that on mobile breakpoints, overlapping elements, like in this case, the VR products, we need to start resizing and rescaling them so that they yeah. Overflow. And we don't want to hide the overflow in this case, because then it would hide them from going from one section.
And another section. What I'm going to do is I'm just going to adjust this so that our mobile break point allows enough space. So maybe just rescaling them, removing the rotation. And you can see if I scroll to the right, there's this little gap that's happening. And that's because some of the elements that are still overlapping or overflowing our design, again, just rescale them.
Everything is visual. So just make sure that you're designing everything like you would design it in any other tools. One thing I'm noticing is this sign up button doesn't fit very well. It seems crowded. Let's just go ahead and hide it on the mobile. Great point. Let's go ahead and test this out. Yeah, this looks really good.
Our mobile menu works great, but again, this is an iterative process. We need to start testing it out. We need to make sure that everything looks good. That's what I love about this, because you can actually design it here. Not having to worry about creating multiple bright points in a different design tool.
You're literally doing everything right here within our features layout or, or grid. We can start playing around with the font scale to go from 30 to 50. Another cool thing is the idea with using grids to transform or rearrange our information. So for example, here, we have that image being on top. But what I'd like to do is really, I want to have these titles to be on top of that image, but just in the mobile break point.
Well, remember this is a great system. So we want to make sure we go into the grid, then edit grid. And on the first row, we can actually delete it. Now what's going to happen is both the image and the title are both within that grid area. So here, if I stretch this image out, it's going to be part of the grid area from one to two, which is what you can see here.
Because they're both in the same area. We can start playing with a title, font, size and colors, just so that we have a completely different design in this break point. You'll notice that the image has expanded all the way.
So if we just a grade and go ahead and change the row height to one fraction, I'm just playing around with the layout. Again, this is totally looks different from our desktop view, but that's the whole point. We're trying to make something exciting and different. And if we take a look at our layout or section, and it's just a matter again, of adjusting the padding, just in the spacing and the size of these font size, for example, here, I think this is a good spot where we can use this scalable font.
So it goes from 25 to 70. And then again, we want to make sure that everything looks good, both on desktop and. So you always want to test out by resizing these handlebars and, uh, uh, remember one of the cool things about it. Erect. If you're zoning out and putting all these different sizes and they don't come back to tablet mode, you can always select the shape and then copy from a break point.
Choose the break point you want and then apply to the current break point. Now layout errors are doing a lot of the heavy lifting. As you scale it down to a mobile bright point, it goes from mosaic view into a stacking view. This is starting to look really nice guys. And could you imagine how long this lesson would be if I went step by step?
All right. So for the movies and games, this was a slider. And so there's really not much to do here. We have that nice header. We can adjust the font size, make sure that it looks good. And then for the actual slider, just making sure that it's a hundred percent of whatever our viewport is. I think this is just pretty basic stuff.
Want to make sure to look at the settings and the reason why is because as we scroll through, notice that it just lands in the middle. What it loves to do is that it snaps in the middle. We can select the repeater and then under change layout, there's a toggle for scroll snap. We turned that on and that's it.
Let's go ahead and preview and then you can see how pissy you scroll it automatically snaps to that. To finalize our pricing is all about alignment of elements and size. For example, our mobile break point needs a little bit of work and a little bit of love. I just went ahead and started rearranging things.
And also for the signup we just needed to make that logo a little bit smaller. And some of the texts a little bit smaller as well. All right, guys, that's pretty much it for this lesson. I am super excited to see what you guys come up. This was a pretty long lesson, but it was mostly for me to give you a sense of me tackling these issues of break points and responsiveness.
You've got to make sure you test everything else, not just on your browser. Try running it through Chrome inspector. I'm pretty confident you've got enough information here in this video alone to start going out there and building out amazing responsive websites.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS