Star Rating Element
The Star Rating Element shows a rating as a row of icons, for example 4.5 out of 5 stars, with the number next to it. For a value with decimals, the last icon is shown partly filled, so the icons match the number exactly.
Use it for review scores, product ratings or skill levels. You can swap the star for any icon, change the scale from 1 to 10 icons and style filled and empty icons separately. The rating text next to the icons can be shown or hidden and rounded to the number of decimals you prefer.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Star Rating Element
Add the Star Rating Element and set the Maximum Rating, which is the number of icons, and the Rating itself. A comma works as the decimal separator too, so both 4.5 and 4,5 are accepted. A rating above the maximum is shown as the maximum.
On the Design tab, choose the Icon, its Icon Size and Icon Spacing, and the Filled Icon Color and Empty Icon Color. Display Rating Text shows the number as “4.5 / 5” next to the icons, styled with Rating Font Size and Rating Text Color; Rating Number Rounding decides how many decimals it shows.
If the Rating field contains text around the number, such as Score: 4.5, the text before and after the number is kept in the rating text, which then reads “Score: 4.5 / 5”. Display Empty Rating set to Hide removes the element when the rating is 0 or empty, which is useful when the value comes from dynamic data that is not always filled.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Maximum Rating | Select the maximum possible rating. |
| Rating | Enter the rating. |
| Display Empty Rating | Select whether to display the rating if no rating is present (eg. 0/5), or to completely hide it. Note: In the live editor the element will be always be displayed. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Icon | Click an icon to select, click again to deselect. |
| Icon Size | Enter value including any valid CSS unit, for example 20px. |
| Filled Icon Color | Select the color of the filled icons. |
| Empty Icon Color | Select the color of the empty icons. |
| Icon Spacing | Control the spacing between the icons. Enter value including any valid CSS unit, for example 15px. |
| Display Rating Text | Select whether or not to display the rating text next to the icons. |
| Rating Font Size | Control the rating font size. Enter value including any valid CSS unit, for example 20px. |
| Rating Text Color | Select the color of the rating text. |
| Rating Number Rounding | Select how the rating number should be rounded. The ‘auto’ option will round to 2 decimals if needed or display the number until the left-most significant ‘0’ decimal(Eg: instead of 4.70 will display 4.7). |
| Icon/Text Spacing | Control the spacing between the icons and the rating text. Enter value including any valid CSS unit, for example 15px. |
| Alignment | Select the alignment of the icons and the text. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Screen readers hear the rating as a sentence, such as “Rating: 4.5 out of 5”, so the icons do not need extra text for accessibility.
- The element adds a small block of rating data for search engines. On its own it does not produce stars in search results: those need a complete review or product markup.
- Keep the same Maximum Rating on every rating of a page. Mixing 5-star and 10-star scales confuses readers.
- With No Decimals rounding and the rating text shown, the icons are rounded too, so the text and the icons always match.
- In the Builder the element is always shown, even when Display Empty Rating is set to Hide; the setting applies on the live page.