Skip to main content
Version: Beaver Builder 2.10

Star Rating

The Star Rating module makes it simple to showcase feedback, reviews, and ratings directly on your site.

Star Rating module

Usage​

Easily display feedback and highlight quality across your site with customizable star ratings. Adjust the number of stars, style, size, and color to match your design, creating a seamless way to showcase satisfaction and credibility. Common use cases include:

  • Displaying customer ratings within testimonial sections.
  • Showcasing product or service ratings on sales pages.
  • Adding star ratings to pricing tables for comparison.
  • Highlighting feedback in review or case study layouts.
  • Enhancing landing pages with visual trust indicators.

Settings​

The Star Rating module consists of two primary settings tabs: General, and Style, along with the customary Advanced tab.

General​

The General tab lets you control the total number of stars, set the rating, and choose the star icon.

  • Total Stars - Enter a numeric value to define the total number of stars to display.
  • Start Rating - Enter a numeric value to set the star rating, which determines the displayed rating. This value cannot exceed the Total Stars setting.
  • Star Icon - Choose the star rating icon you want to use. You can select from any icons available in your installed and enabled icon library sets, such as Font Awesome.

Style​

The Style tab allows you to customize the star rating, including fill and background colors, alignment, size, and spacing. It is divided into two sections: Colors, where you control the fill, background, and border settings, and Layout, where you adjust alignment, size, and spacing.

  • Colors

    • Star Fill: Sets the color of the filled stars that represent the actual rating value.
    • Star Background: Sets the color of the unfilled stars, representing the remaining stars up to the total number set.
    • Star Border: Sets the border color of the star icons, applied to both the filled stars representing the rating and the unfilled stars representing the total number.

  • Layout

    • Star Alignment: Choose the alignment of the stars (left, center, or right).
    • Star Size: Set the size of the star rating icons.
    • Star Spacing: Adjust the space between each star rating icon.
    • Star Stroke: Set the border stroke for the star icons.

Advanced tab​

There are all the usual Advanced tab settings for margins, visibility, animations, and advanced HTML settings.