In this lesson, we're going to build our hero section by stacking elements together and making things pop with Editor X animations.
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!
now that we dominate the sticky technique. That's creating a new section right above. This will be our hero. Let's start by giving it a hundred VH height and inserting one of our cooled photos. Notice how we also have some really cool way to crop and edit our selected image before actually placing it on our canvas.
It's like having our own Photoshop directly in here. I can even add who'll overlay filters. Take a look at this cool fog motion. Hmm, not bad. Once you start growing your library of assets, it's good to use the tags to help you and others in your team. Find images quickly. And remember to check the file info panel, check the file size and resolution before using it.
Every kilobyte matters on the web. Nice. Let's expand it. You'll see that that's the size properties. Get dizzy. Doing this this soon, we'll also remove the ability to act quickly more elements. So you might want to hold off expanding it until you have all your elements within your section. For example, I still want to add our stream VR logo and a couple of other headings.
We're going to use our semantic tag to be H one, but our heading style is heading to, well, one to align the text centered and adjust the size horizontally to fit nicely into our canvas, just like that. Okay, great. So we'll do the same thing for the subheading. We want a paragraph and we want to type in an immersive new way to experience movies and games.
Here we go choose our paragraph style center and please hit just below our hero title. Nice. And let's go ahead and bring our logo from the media files. Since our logo is not a restaurant image, but want to add a basic shape and swap it with ours. Okay. In our media panel, we can search for SVR logo. And choose the file within our site files.
Well, one to adjust the sizing, remember this is a visual editor, so resize to fit your. And center it just above the hero title right now. It's a little hard to see, but all of our elements are now set. Let's go ahead and expand the background image again and make these titles white so that they are readable.
We'll want to decide if we want our logo to be fluid or fixed. We're going to get into this in another lesson, but personally, I don't like that. The logo scales, you know, as you have the viewport street, So let's change that back to a fixed instead. Okay. So now that I'm looking at this, um, I think the background image is still a bit distracting.
So if we select the image and head over to it, it's design properties, we can give it a background color and increase its opacity to a hundred percent. Then right below we can reduce the image opacity so that our hero title pops a bit more. 60% should do it. There we go. All right. The line spacing on that title seems a bit too much.
Let's adjust it and set it to 1.1, click outside in it should look much better that
create some conflict as you resize the viewport, even though we're docking both of them to the center, there's a better solution to this problem. So if we check our docking property, We'll see how each one of these is docking to the top vertically, but centered or recently, we want to make sure that they are all docked to the center.
Why? Well, because we want to make sure that these are always centered no matter what the height of the candidate. Remember a hundred VH will always change based on the user's device. So let's do it with the logo first. And all you really have to do is click the blue dot from the top, and it'll automatically set the logo distance, always doc, from the center for these other things.
We can do the same and make sure we have Ciero left or right margins so that it stays completely centered. Be aware that we're using a percentage value on these text elements and they are bound to change. As you resize the viewport, simply select both elements and choose stack. This will group them in a container called stack and it acts just like the container.
Let's go ahead and center it and expand it to a hundred percent. Give a line gray right after the video on demand. So we can appreciate the statement in two lines. Okay. Stacking is great because now these are flexible. These will push each other. If the text or viewport changes, just note that this only works with elements that are stacked directly above each other.
If you need to give each element, some breathing space, you can always use the top or bottom margins. Let's go ahead and on staff. And repeat it, but this time let's include our logo and make sure we centered everything nicely. Cool. There we go. We can start bringing a bit of color into the picture as well.
Maybe we can sprinkle a little bit of that bringing into that hero. That'll give us a bit more pop. This is looking good. Now that we have created a stack, we can add quick items. Let's finish by adding a button. Notice how it adds it in between our stack. We'll need to change its design properties. Let's start with background color and change that to the primary colored green.
Let's remove the border and make the font. Avenir 22 pixels. Yup. The width should be 200 pixels and at least 50 pixels tall. Okay. Now let's go ahead and change the text to say, get started. Here we go. Great. Okay. This is looking good, very clean in balance, but actually thinking this would look great if it was framed somehow.
So let's add it using the padding property. Let's say like our hero section and under panning, let's give it about 10 pixels. We go ahead and hit that lock icon so that it affects all of the four sides. But we need to make it pop. So let's go ahead and bring that bright green into the border. There we go.
There's this little neat effect that I want to show you. If you, um, select the image elements, you get this little cog wheel in the floating menu. It's a quick access point to the adjust panel, but right below it, we have something called scroll behavior. If we change it to parallax and then hit preview.
Check it out. It's a very cool little parallax effect that we can use to bring our designs to life. Now, if you want to experiment even further, you can use video. Instead of the background image, I took the Liberty and created a slide show with some stock photos. I actually put this together using containers.
Now let's go ahead and drop that in using a video box into our hero section, change the video to the slide show that it just created and then click update. We'll want to send it back using the keyboard shortcut, command, arrow down, or using the layers panel and simply drag the layers below the stack container.
All right. So by default, this video won't play so we can click on the behaviors button on the floating man. And choose how you want this video to play in this case, we want it to play automatically and we want to disable the ability to pause. Make sure you can also loop it when it finishes now under design properties, we can set a cover image as it preloads and apply a pattern overlay.
You can get really creative, just mind that every little extra CULA bit matters. So for now, let's just keep it. This is looking real bad-ass but I think we're still losing readability. Let's go ahead and insert an empty container. Adjust the background color to help darken our video. This black color could be, I don't know.
Well maybe 60%. Yeah, let's remove the one pixel border that comes by default. That's positioned it behind our stack and expanded. Beautiful. Okay. To finish up. I want to animate everything into place. Editor X comes with a powerful built-in animation tool and it's super intuitive to use click on the video layer on the floating menu.
We have animation button. This opens up a pop-up with a bunch of predefined animations that you can experiment with. And just by hovering, it gives you a little preview. Let's go ahead and select. Then if customized, this one only works for images and videos, but I think it's subtle and it's very professional select reveal from the bottom and have it at least 800 milliseconds or 0.8.
We're going to make this very first element to appear. So let's keep the delay at zero right now. If we preview it'll show the original photo we had behind it. So let's quickly hide it by selecting it from our layers panel and under the three dots we choose don't display. Now it's us. If the green background is really.
But in reality, it's just the background of our section. Let's do the same with the rest of the elements, but instead let's use this light in animation, which is pretty cool. It wraps the element within a mask and you can choose the direction and strength for now. Let's do logo a 0.8 and have a delay of 0.4 seconds.
We'll do this with the rest and use the delay to have each element appear right after the previous one. You'll find this familiar if you've used PowerPoints before, make sure that we have each delay spread out, but at least 0.2 seconds.
That's preview and wow. Yeah. I love it. Give yourself a break and give it a try. Remember putting your new learned skills into practice is how you unlock the power of added address. Let me know how it goes in the car. And if you're ready, but some to the next lesson.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS