In this lesson, I'll show you how I typically set up advanced Editor X pages.
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!
this entire module is about getting your hands dirty. We're going to build something really cool. I'm hoping with everything we've covered in our previous module, you're ready to follow along as designers. Having a clear structure is key. So it's always best practice to begin with some basic guidelines.
These guidelines can be as simple as what fonts and colors we're planning to use and a wire frame of the project. Check this out in my Figma app, I created a basic style guide. It has all the colors and font families that I need a side field in editor X notice we have six headlines and three paragraphs.
Well, one to add these into our theme manager or site styles.
All right, great. So now let me show you this simple wire frame that I made. We have a fixed navigation bar that can take you to each section. Our hero section will have the value proposition. We mentioned earlier lessons, but notice the circle above I'm thinking this is transparent video of some kind, maybe an abstract shape that as you scroll down the page, it follows you along each of the sections hiding behind this triangle panels only to appear back again at the very bottom.
The pricing section now creating this effect can be a little bit tricky. It requires a bit of optical illusion. You know, that editor X lets us use the key position in any of our elements. But one thing we need to understand is that it relies heavily on how tall that parent container is. For example, take a look at this animation.
We basically have two sections. The first section is a bit taller than section B. And what we want to achieve is the element to hide behind our triangle mask. But because how editor X treats its children elements, we need to place a triangular graphic overlapping our circle shape. The way I solve this was placing it on section B and using negative margins so that it can overload.
Into section a, the value is the total height of the elements. In this case, it's only 600 pixels plan with this technique can get complicated, but the rule of thumb is make sure that your parent container is tall enough so that you can create the necessary scrolling distance. So take a look. Yeah. I already created both graphics to make this work.
Notice they have a transparent background. So let's head over to our editor X workspace. Let's do this with the basic shape. Drop that into our section, just like that. Now let's add a new section below and quickly add a title that was a background image. We're going to use the light. And give our section a white background color.
All right. Old sections are currently 500 pixels as a minimum. So let's make our section a about 1500 pixels. This will give us a good amount of distance for our sticky element to scroll. So we changed the scroll property of the shape to sticky and hit preview. Nice. Let's go ahead and add our triangle mask and drop it into our section B.
Since it's white, we won't be able to see it, but if we move it up just a little bit, you'll notice it's triangular dense. And if you check our margin top on the position properties, you'll see the negative pixel. Let's change the width to a hundred percent. So it expands all the way. And then the minimum height, it's going to be 700 pixels.
Now let's finish by giving it a minus 700 pixels top margin and then hit preview. And that's it. All right. We got it. This trick is basically what we're doing in both the hero and the footer of our page. The difference is we're simply going to swap that shape with a transparent video editor X comes with some really cool ones, but we'll do that.
All right back in my fig mom, I went ahead and started adding some graphics that I wanted to use throughout the build. You don't have to design everything in Figma. You can start with building the skeleton and then start customizing the graphics. In this case, I made a few like. And graphics that really fit well with what we're doing.
I even made this really cool pattern using these simple icons to the right of this. I made a collage of stock photos that I like to use. These all share similar style and mood, and I might not even use them all, but it's always nice to have a good collection to pick from. All right. So here are some transparent virtual reality headsets that can help us tell that story.
So our designs feel fresh. All these assets can be exported and compressed using Figma plugin called tiny image compressor. All right, guys, why don't we jump into our next lesson and start with our hero section? So you're there.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS