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

In this “dashboard achievements”  tutorial, you’ll learn how to customise this section 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.

The component named “Widget - certificate” can be edited in the right-hand panel on Framer. 

To edit the component design itself, such as the colours and text styles, double-click and make changes there. 

Please note that this Widget - certificate is also used on the homepage and will update every instance across the Learnoverse template.

All text in this section can be edited by heading over to the right panel and editing there.

To edit each of the achievement badges, either head over to the left-hand panel and single click on the purple diamond shape “Widget - Badge” component or click directly on the page. 

You can change text and responsive variants by heading over to the right propertiespanel.

To change the “Widget - Badge” component styling, double click on the purple diamond shape in the left-hand menu or directly on the page and head over to the component page.

Once on the component page, you can update the colours, styles, and animated icon.

The icon animations are licensed and free for you to use.

However, should you wish to change these, including the colours, you’ll need to head over to Lordicon to choose your new icon. 

To change the icon, simply download the icon you want in JSON file format. 

Then, with the current animation clicked, head over to the right panel, click the small cross next to the existing icon, and upload your new icon. 

You can change the colours of your animation directly in Lordicon. You can change the titles and subtext in the right panel under “Text”.

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 Achievements section now, and I’ll see you in the next tutorial.