Changing grid with gradient buttons

1. On the desktop viewport, add a styled gradient button to your section.

2. From the Inspector panel, set the button height and width to 100%.

3. Under the design tab, click the Fill Picker to choose a gradient. You can also change the gradient on hover using the Button state dropdown above. Then, edit the text.

4. On the tablet viewport, select the section and add a 2X2 grid.

5. From the Quick add tab, add a container to the bottom right grid cell. Then stretch the container so that it takes up the entire cell.

6. Add a 1X2 grid to the recently added container.

7. Then add another container to the bottom cell of the 1x2 grid. Stretch the new container so that it takes up the entire bottom cell, and add a 4X1 grid to it.

8. Fill the grids with additional gradient buttons.

*Tip: Set the button text opacity to 0% to display the gradient only and create an engaging hover effect.

9. On the mobile viewport, you will create an entirely new grid. First, go to the Layers panel, select the previous grid created and click Don’t Display. Then add a 10x20 grid. It’s important to note that deleting a grid will delete it from the site entirely, so be sure to hide the display instead.

10. Add additional gradient buttons to the grid and adjust the design on hover for each one. Then, preview the results to see how the grid changes between breakpoints.