In this lesson, we finish our build module with a basic Editor X sign up form.
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 let's take a look at our wire frame just to remind ourselves what we did for the pricing and sign up. You're going to see that it's very similar to the hero where we have a transparent option. Scrolling down and it hides behind the signup. We already created this. So going back in our workspace, we need to create two sections, these blank sections.
I'm going to add a background color to the very last one. This is going to be our signup section. And then what we want to do is just rename these sections quickly. So it just feels a little bit cleaner to work with. Okay. That looks good for the pricing we want to do is expand it to have a minimum of 1600 pixels.
Remember we need enough length in order for us to create that effect. I'm going to go ahead and make this a great background. And for now, we'll just go ahead and move forward with the sign up. Don't worry. We're going to come back to this and just a little bit, let's focus on adding the offset triangle.
Start by adding the image into our section. And remember we already created this and Figma. So here we can see that it's 700 pixels tall. Of course we can't see it, but if you start dragging up a little bit, we're going to see that corner coming again. That's expanded. And just enough so that we can play around with the position.
So we a hundred percent with, and we're going to put in minus 700 pixels in the margin, notice that it's in fluid mode. So we don't have a height defined, which would be a good idea that we do. But for now, let's look at the focal point. We want to choose the very top middle of it so that we can get both the top left and top right corners to show.
What we want to do is make sure that the margin is minus 700 pixels and the minimum. Is 700. Sure. We clear the height also. So it's auto. All right. So now if we go to the ad section, we want to go into our contact forms
and simply drag subscribe and make sure that it's in this section. Let's go ahead and align it to the very top with negative margins. We can have it overlap between the triangle and the main section, just like that. So for the pricing section, I was thinking we could just have a very big title of monthly pricing plans.
We can go ahead and add in this title, got to style it just a little bit. So we have a nice big font and then we can start inserting all these graphics that we created in Figma. Like for example, these diagonal shades. The consent or that in the middle. Okay. We can balance this design by having an image on the top, right.
And on the bottom left, very similar to how we did the products and add a little bit of shadow. You have distance, the blur and finalize. I mean, go ahead and add the parallax within this image.
Yeah. This is nice. This design. Things are moving. All right. So let's continue here. I'm just selecting an image we've used previously, but with the crop with photo studio, we can prop it. We can rotate it, we can flip it. And that gives us some flexibility without me having to go into another tool and figuring it out.
We might want to change a little bit of that focus point on this image just to make sure we get the right spot. All right. And I think this one looks pretty good. We're going to add the pricing, which is just 9 99. You seem to styles.
And if you remember back when I showed you guys designs in Figma, we created this pattern. The pattern that I'm using are based on those little shapes. And it's very simple. I'm going to export this as an image and let's go ahead and add it in here. What I want to do is center it into place and start fading it out just a little bit.
I created this very simple GIF of those four shapes.
There's another way you can reset the image. You can do this simply by clicking on the cog wheel. There's a button that says reset image, and that will automatically make the image the correct size for us. Let's go ahead and preview this. Okay. This is looking pretty good to me. I think the only thing we're missing now is that transparent video in the middle.
But before we do that, let's go ahead and style the sign up a bit more. We can change the styles. We can always use our theme manager. We can add in our logos that are cleaner and even change the font size since on some of these buttons. Okay. So if we click on the settings for the submit button, we can change the name of the label from there.
And we can decide where this user goes next. So think of it like the action, right? Like what happens when someone submits the form, I'm just going to go ahead and show a success message. And this message is always going to appear right below, but you can place it anywhere. You. I also want to increase the border size of this field and maybe change the typography as well.
Go ahead and use the theme of paragraph two. There we go. And then for the text of our success message, we can make this a little bit stronger and we can even add emojis to make it fun. All right. Once you select the form, we get additional settings.
Settings can let us manage the styles and design. We can customize each individual field this way. For example, here you have layout. We can align the text in a certain way, and you can even add padding within the input field. I'm going to go ahead and just change some of the value of colors and backwards.
And there's really not much you want to do here, except make sure that you have the thank you message. Oh yeah. And don't forget the footer. We can start adding styles to match the sign up section. I see a pretty big gap between the form and the footer. We can simply remove the minimum height of our final section and instead use padding.
So we're adding maybe a hundred pixels would be good. Yeah. There we go. Now that we have that we can go back and start thinking about the transparent object that we want. Let's open up our ad panel under media. We want to select transparent video, just like we did in the earlier lessons.
Okay. Let's quickly change that to the one we really liked, which is the. Make sure that it's on the very top and we can start using the negative margin values that we learned earlier as well. We can also switch the scroll effect to sticky and for the margins we're going to have that go. Maybe mine is 400 pixels.
I think that works. And finally, we want to make sure this is a fixed element. I don't want it to scale proportionate to the viewport. So right now my settings look good.
There we go. I'm adding a 25% offsets that I can see how this looks as I scroll down the page.
Nice to finalize. We need to make sure that each section has an anchor ID. When we go to the top navigation and manage our menu, we can simply change the anchor link to whatever the name of the ID we gave. All right, guys, in later lessons, we'll take a look at custom form integrations and other solutions.
From the marketplace.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS