Welcome to this “dashboard hero” tutorial, part of a 5-module series on how to use the Learnoverse template. 

In this “dashboard hero” tutorial, you’ll learn how to customise the hero for your own Learnoverse.

Let’s get into how. 

Head over to the left panel in Framer and ensure you are on the “Dashboard” page.

Click the “layers” panel at the top to expand all layers and see how this section has been structured.

To edit the top circles that navigate to each of the modules, double-click on the “module reel” component.

Once you’ve clicked through to the “Module reel” component page, you can then click on the individual circles to edit the text, link, and background fill colour. 

To update the size and interactive states of the circles themselves, double-click on any of the “Module circle” components.

Once you’re on the module circle component page, you will see there are two variants; 1 for desktop and one for tablet. 

You’ll also see that each variant has the “default”, “hover” and “pressed” states. 

It’s important to note that the primary circle will update all other variants, but updating the hover or pressed states will only affect these variants. 

Head over to the right panel to change any colours or text styles.

To change the main hero image, head back to the dashboard, on the left panel, and expand any hidden layers to see where to edit the image. Alternatively, you can click the image on the dashboard itself, head over to the right panel, scroll down to “Fill” and click the image. Here, you can easily upload a new image to customise your hero.

To edit the text areas, click on the text areas, either directly on the page or in the left panel, and head over to the right panel to make edits to styling, effects and colours.

That’s it for now.

For more information on how to edit text styles, colours, padding, shapes, and scroll sections, head over to the official Framer Academy resources. I’ve popped the link on this Learnoverse lesson page.

Start customising your Dashboard hero section now, and I’ll see you in the next tutorial.