Star Rating
Use Star Rating to display a configurable star rating with custom totals, fill levels, icons, colors, and sizing.
Usage​
Use Star Rating to display a visual rating made up of stars, with control over the total number of stars, the current rating value, and the icon used. The module renders both filled and unfilled portions of the rating using CSS, and supports fractional values so partial stars represent ratings such as 3.5 or 4.2 accurately.
Use Star Rating on review pages, product showcases, testimonial layouts, case studies, and any context where a numeric score benefits from a visual representation. Pairing the Total Stars and Star Rating fields with Field Connections lets you drive the rating from custom field values stored on the post or another dynamic source.
Module Settings​
The Star Rating module settings control the rating value, the total number of stars, the icon used, and the colors, alignment, size, spacing, and stroke width applied to the stars.
General Tab​
The General tab sets the rating value, the total number of stars, and the icon used to render each star.
Total Stars Default: 5; Supports: Field Connections
The total number of stars displayed in the rating. Accepts whole numbers between 1 and 10.
Star Rating Default: 0; Supports: Field Connections
The current rating value. Accepts decimal values between 0 and 5 in 0.1 increments to support partial stars.
Star Icon Supports: Field Connections
The icon used to render each star. When left empty, the module falls back to the default star character. Selecting an icon replaces the default with the chosen icon for both the filled and unfilled portions of the rating.
Style Tab​
The Style tab controls the colors, alignment, size, spacing, and stroke width applied to the stars.
Colors
The Colors section controls the fill, background, and border colors used to render each star.
Colors
Star Fill Default: #fd0; Supports: Responsive, Field Connections
The color used for the filled portion of each star, representing the rating value.
Star Background Default: #fff; Supports: Responsive, Field Connections
The color used for the unfilled portion of each star.
Star Border Default: #000; Supports: Responsive, Field Connections
The outline color applied to each star.
Layout
The Layout section controls how the stars are positioned and sized within the module.
Layout
Star Alignment Default: Auto; Supports: Responsive
The horizontal alignment of the stars within the module wrapper.
- Left: Aligns the stars to the left edge of the wrapper.
- Center: Centers the stars within the wrapper.
- Right: Aligns the stars to the right edge of the wrapper.
Star Size Default: 30; Supports: Responsive
The size of each star in pixels.
Star Spacing Default: 5; Supports: Responsive
The horizontal space between stars in pixels.
Star Stroke Default: 1; Supports: Responsive
The width of the star outline in pixels, drawn using the Star Border color.
Advanced tab​
The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.
See the Advanced tab section for more information.