21. Rating

Discover how to use and customize the rating element on your page with options for alignment, scales, labels, icon selection and size, text and rating color, hover application, and layout adjustment.


In our recent video, we dove into the nuts and bolts of utilizing the rating element on your webpage effectively. Ratings are crucial in conveying customer satisfaction, thus their correct application can significantly enhance user experience.

To add a rating element, navigate to 'add elements' and select 'rating'. After dragging and dropping it to your desired location, you can adjust various parameters to suit your design needs.

One of the first things you may want to do is align the rating element to match your page's layout. In our video, we aligned it to the left for a uniform look.

The rating element settings offer two scales: five or ten stars. Moreover, you have the freedom to display either stars or a numerical rating. The label positioning can also be adjusted to the left, right, or you can choose not to display a label at all. If you do decide to have a label, you're able to control the spacing between the rating stars and the label for a clean look.

You can easily customize the rating's icons to make it more fitting for your brand. In our demonstration, we switched from the standard star icon to a fun hamburger icon, showing off the flexibility of the tool. Both the size of the icons and the spacing between them can be customized to your liking.

The label can be customized as well simply by double-clicking on it and typing in your desired text. This label's typography can also be adjusted, allowing you to match it with the icon's size for a coherent design.

The colors of the text and rating are fully customizable, offering an additional layer of personalization. You can even apply a background color to the unselected portion of the rating element.

You can apply a hover effect to the rating element, adding an interactive element to your page. And just like with any other design feature, padding and margins are adjustable to fit your design.

Moreover, there are also options to duplicate or delete the rating element. Finally, the responsive view setting allows for easy adjustment of the rating element based on your layout and mobile display. This ensures your design looks great on any device.

With these tools and customizations, you can create a unique and engaging rating system that complements your website's overall design and user experience.

👆 You’re all caught up