Learn how to recreate this fun and interactive Italian food-themed section grid with all its moving parts in a matter of minutes. Let’s get started. And feel free to build along as you watch.
First, adjust the section’s height to 670 pixels.
Using the floating menu, we’ll divide the section into grid cells, starting with two columns. We’ll drag the first one out here.
Next, we’ll split the left column into two rows. And then split the bottom cell into another two rows.
And split the middle cell into two columns.
We’ll do the same with the bottom cell.
Then select the two bottom middle cells and merge them together
Let’s make that new cell more narrow
We’ll also split the bottom left cell into two columns and resize them.
Next, we’ll equalize the rows so they have the same size definitions. You can do this in the Inspector panel’s Layout section.
We want to create a small gap between these grid cells so we’ll apply 0.9vw both horizontally and vertically. Like so…
We also want to create some spacing around the grid cells, so we’ll apply 0.9vw to the padding too.
Now to our right column. We’ll split it several times so we create this small cell at the bottom and then merge the ones left above it.
Let’s bring some color to our canvas using the Color Picker. To make our lives easier, we can multi-select the cells we want the same color, like our red, pink and green ones.
Finally, we’ll add our yellow and make one last tweak to the cell’s width.
Okay, let’s soften the look of our grid cells by adding rounded corners. We’ll give them a radius of 17 pixels.
Time to bring our design to life with content. You’ll find the various assets in the Italian section library. Drag each one to its appropriate cell, resize and reposition them accordingly.
In our bottom right cell, we need to stack the Submit text and arrow to ensure these elements stay in order for different breakpoints.
Now let’s add some animations starting with our green title cell. We’ll apply an entrance animation and choose Flip.
Next, I’ll add a hover animation to the cheese illustration. Make sure to select the element within the cell so only the cheese illustration will be triggered. Choose Skew.
Select the cheese illustration again and this time add an entrance animation.
Select Bounce to give it this nice drop effect.
Now let’s make our leaf move. We’ll apply a hover animation and choose Rotate. Let’s give it a 360 degree angle and a duration of 1.2 seconds and see how it looks. Cool!
For this About Section red cell, I want to apply a hover effect that reveals content. First, I’ll add a paragraph to the cell and adjust its width. Then align it to center.
Next, we’ll add a custom hover animation.
In the Layers panel, select the ‘About the class’ text box and give it 0 percent opacity.
Now we’ll go to the initial state, select the paragraph and set its opacity to 0%.
I’ll return to the animation state and click Play here to see how the animation looks. All good. Let’s hit Done.
Finally, time for pizza so let’s add our custom cursor. We’ll choose the pizza slice image in our site files and adjust its size to 85 pixels.
And we’re done. We can now see our Italian section grid in full flow, using our pizza slice cursor to hover over the cells and reveal our animations.
Enjoy this tutorial? You can find lots more and discover what you can do with Wix Studio on our Academy page.
