Hey there, join me in recreating this design and get a sense of what you can do on the Wix Studio Editor.
Before we get started, I recommend minimizing your video player so you can follow the steps with me.
Okay, let’s begin.
We’ll start by resizing the Section to make it the right height for a hero fold.
First, click on the Section to select it. In the Inspector Panel on the right-hand side, change its height to 750px and set its Responsive Behavior to ‘fixed height’.
Next, let’s give our design some depth and dimension by replacing the white Background with a Gradient.
With the Section selected, open the Color Picker in the Inspector Panel. Choose ‘Gradient’ and adjust the angle to 0.
We’ll click these knobs here to choose our color. Let’s change it on the left - to light blue and on the right - to white.
Excellent. We’ve got a nice shade of blue.
Right, let’s add our title.
Click on the plus icon on the top left to open the Add panel. Go to Quick Add and drag a Title into the Section. Let’s change the text to ‘SHAPES CREATIVE AGENCY’ in caps.
Next, resize the Title by dragging the bottom right corner. As we do, we can see our font size changing in the Inspector Panel.
Let’s make it 90px.
Cool. That’s our title sorted.
Time to add a Paragraph.
Again, under Quick Add, drag a Paragraph and place it under the title.
Let’s resize the width of the text box. We can do this either by dragging it from the sides or changing the width value in the Inspector Panel. We’ll go with 350px.
Perfect.
Now to encourage visitors to scroll, let’s add an arrow to the bottom of the fold.
Click the plus icon, select Decorative, and then Arrows. Let’s choose this arrow and place it right about here.
Adjust its size to 50px and rotate its direction, like this.
Okay, let’s apply an animation to the arrow to make it stand out. At the top of the Inspector Panel, from the animations and effects tab, add a Loop animation. We’ll select Breathe.
Click on adjust animation at the bottom of the panel and set the distance to 10px. Click Preview.
Nice. That’s the movement we’re looking for.
Now, let’s really bring our fold to life with a Transparent Video.
Go to the plus icon. Under Media, then Transparent Video, choose to see more options.
We’ll search for ‘Random’ and select this video.
Let’s place it on the right side of the Section and resize it.
Hit preview at the top right of the screen.
And boom, there we have it.
But we’re not done yet.
Let's resize the design to check how it looks on different Breakpoints.
We can see on Tablet and Mobile, our Paragraph and arrow are scaling down.
Don’t worry, this is an easy fix.
Go Back to EDIT > Select the paragraph. Go to the design tab in the Inspector Panel and change the Responsive Behavior to ‘Wrap’.
Next, do the same for the arrow, only this time select ‘Fixed’.
Now, when we move between Breakpoints, we can see we’ve solved our scaling problem. But our arrow and paragraph now overlap.
So, let’s use a stack to prevent this and keep our elements organized.
To do that, we’ll move back to the Desktop. Select all elements and in the floating menu, choose Stack. Great, now use the handle to set the distance between the title and the paragraph.
20px looks about right.
Let’s do the same for the arrow and move it towards the bottom of the Section. We’ll set it at 100px.
Alright, all stacked up and nothing overlaps!
Next, we’ll add a grid to help us keep everything in place.
First, select the Section by clicking the spaace above the title.
In the floating menu, using the dropdown, let’s split the Section into two columns.
To make our transparent video fit the entire cell, click on the stretch icon.
Now, let’s look at how our design behaves on Tablet.
We’ll need to make some minor tweaks.
Select the Section using the breadcrumbs at the top of the Inspector Panel. We’ll resize its height to 600px. Now, select the paragraph and change the width to… say, 270px.
Keep in mind that the edits we make here will only affect our design on Tablet and smaller Breakpoints.
Let’s switch to mobile and see how things shape up. Again, just a few adjustments needed.
Using the breadcrumbs, select the Section and change the Grid layout from Columns to Rows.
And finally, to line things up correctly, select the Stack and in the Inspector Panel, align it horizontally and vertically, go to Layout. Now, align all elements and text to the center.
And we’re done! Our hero fold is looking awesome on all devices!
Be sure to check out more videos like this in the Video Tutorials tab at the bottom left of the Studio Editor.
Now, go turn your blank canvas into a masterpiece.
