How to Use the Ratings Element

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

1. 添加评级元素

Step 1: Insert the Ratings Element

1. Open your page editor。
2. 点击 添加元素 → Find Ratings under the elements list.
3. Drag and drop it onto your page。

Step 2: Aligning the Ratings

• 点击 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.
• 点击 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。
• 添加 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.
• 可定制 – 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.