Transcript
In the last video, we built a teaser page from scratch. Today, we’re building on that foundation by adapting our teaser page into a full landing page.
So, what makes a landing page different?
A teaser gives your audience a quick preview. A landing page goes deeper. It’s designed to inform, engage, and most importantly: encourage action.
Let’s get started.
First, I’ll adjust the canvas height to create more vertical space for additional content.
I’m extending the height to 3200 pixels so I have room to build out multiple sections.
Next, I’ll turn the full-page background from our teaser into a hero image. I’ll move it to the top of the canvas, then round the bottom corners to soften the visual transition into the next section. I’ll also center my text here to help guide the viewer’s eyes down the page.
Since visuals play a huge role in keeping users engaged, I’m going to add a few additional images provided by our design team. I’ll space these out in a clean, scrollable layout that tells a story as you move down the page.
To create a strong visual centerpiece, I’ll use the Stock Media Library to drop in a video component. To keep it looking clean, I’ll set it to autoplay, loop, and hide the controls.
Now let’s focus on our call to action.
I’ll take the CTA button from the teaser and move it into the header section.
Since it’s now sitting on top of a dark, rocky background, I’m changing the button color to white so that it stands out more. Of course now my text blends into the white button, so I’ll have to update my text color as well.
Once I’m done with my button, I’m going to copy the animations that are applied to it, and paste them onto my scroll arrow. Originally, we had a looping animation here, but I’ve replaced it with the same fade-in animation as the button. Using the contextual toolbar for this process is a quick and easy way to stay consistent across your project.
To make the scroll icon more interactive, I’ll first add an anchor to the canvas. Then, I’ll add a hotspot over the icon. I’ll add a Scroll to Position interaction, with that anchor as the target destination. Now, when a user clicks the arrow, they’re smoothly taken to the next section of the page. I also applied a hover state to the hotspot that turns the arrow black, giving users a subtle visual cue that it’s clickable.
Next, I’ll update the copy. Teaser text is short and punchy, but a landing page gives you space to expand. I’ll add a few content blocks that outline key details like who this is for, what the offer includes, and why it matters. Think of this as answering the questions your visitors are already asking.
In the footer, I’ll swap in a black version of our logo so it stands out better against the lighter background. Then, I’ll duplicate our button and place it at the bottom of the page, this gives users another opportunity to click after scrolling through.
Now that all my content is in place, I’ll take a moment to organize the Layers panel.
As you can see, I’ve created folders for the header, body sections, and footer to keep things clean and manageable.
And that’s it—a teaser page, adapted into a full landing page.
It’s still visually clean and easy to navigate, but now includes richer content, more context, and stronger calls to action.
In the next video, we’ll take this landing page and adapt it into a mobile variant, so it looks great on every screen.