How to Use the Ratings Element

The Ratings Element allows you to display visual ratings on your website, perfect for reviews, testimonials, or feedback sections.

1. Adding the Ratings Element

Step 1: Insert the Ratings Element

1. Open your page editor.
2. Click Add Elements → Find Ratings under the elements list.
3. Drag and drop it onto your page.

Step 2: Aligning the Ratings

• Click the Ratings Element to access the toolbar.
• Align it left, center, or right to match your design.

2. Customizing the Ratings Display

Choose a Rating Scale

• Set the maximum number of stars (default: 5 stars, option for 10 stars).
• Choose between visual stars or a numerical rating (e.g., 4.5/5).

Modify the Label

• Show or hide the "Rating" label.
• Position the label left or right of the stars.
• Adjust the spacing between the label and rating.
• Click the label text to rename it.

Change the Rating Icons

• By default, stars are used, but you can choose other icons (e.g., hearts, thumbs-up, custom icons).
• Increase or decrease the icon size.
• Adjust spacing between icons.

3. Styling the Ratings

Customize Colors

• Change the selected rating color (e.g., yellow for stars).
• Modify the background color for unselected ratings.
• Customize label text color.
• Add hover effects (change icon color when hovered).

Adjust Typography

• Modify font, size, and spacing for the label text.
• Match typography with the overall website design.

4. Advanced Settings

• Adjust padding & margins for spacing.
• Duplicate the Ratings Element for reuse in multiple sections.
• Delete the element if needed.

5. Optimizing for Different Devices

Tablet View

• Resize the rating icons and labels to fit smaller screen sizes.
• Adjust alignment and spacing for better readability.

Mobile View

• Ensure icons are not too large or too small.
• Reduce spacing between elements to fit compact screens.

6. Why Use the Ratings Element?

• Enhances Credibility – Displays user feedback in a visually appealing way.
• Customizable – Icons, colors, and typography can match your website theme.
• User-Friendly – Works seamlessly across desktop, tablet, and mobile.

With these settings, the Ratings Element can be a powerful tool to showcase reviews, ratings, or product feedback effectively.