top of page

Gradient grid section

Editor X Team


Apr 20, 2023

Gradient grid section

This distinct section features a grid with colorful gradient backgrounds, curated transparent videos and big typography.

Design: Eliran Vahdi, Tech design: Eliran Vahdi

Learn how to create this design in 7 steps

1. Using the blue plus icons on the left edge of the canvas, add 4 vertical sections to a blank page. Set the first vertical section to 15vw, the next section to 10vw and the remaining 2 to 6vw. You should now have a total of 5 sections.

2. Under the horizontal section on the right, add a new blank section. Set the height of both horizontal sections to 50vh.

3. Add gradient backgrounds to each section.

4. From the Add panel, choose a transparent video and add it to the top horizontal section. Set the video width to 100%, then set the overflow content of the section to Hide.

5. In the Inspector panel, under the design tab, you can adjust the transparent video colors to match your design.

6. Add text to any of the sections. If you want to add vertical typography, place your text inside a square container. From the Inspector panel, dock that container to the section and adjust the rotation to -90 or 90 degrees. Note, you will only see these changes when you preview or publish the site. 

7. Preview your design and adjust accordingly.  

Refresh your skills before you start by visiting Academy X.

More inspiration



Editor X

The rest is up to you.

bottom of page