Star Rating
A score shown as stars, with an optional label.
The Star Rating widget shows a score as stars, out of 5 or 10, with half stars for values like 4.5. Add a label and the number to make the score clear, for example “Average client rating 4.8/5”. You can use any icon instead of a star.
Add a star rating
Insert it
Open Insert in the left panel, find Star Rating under Basic (or type
ratingin Search widgets) and click it or drag it onto the canvas.Set the score
Choose the Scale (0–5 or 0–10) and type the Rating.
Label it
Add a Title and turn on Show number to display the score as a number too.
Settings
Settings marked Per device can differ on desktop, tablet and mobile (see Responsive editing). The Title supports dynamic tags (see Dynamic tags).
Content tab
Rating
| Setting | What it does |
|---|---|
| Scale | Rate out of 5 or out of 10 stars. Options: 0–5, 0–10. Default: 0–5. |
| Rating | The score. Half values such as 4.5 show a half star. Default: 5. |
| Icon | The icon used for the stars. |
| Unmarked style | Draws the empty stars filled in a light color (Solid) or as outlines. Options: Solid, Outline. Default: Solid. |
| Title | An optional label, such as “Customer rating”. Supports dynamic tags. |
| Show number | Shows the score as a number. |
| Number format | Shows the number alone (4.8) or with the scale (4.8/5). Options: 4.8, 4.8/5. Default: 4.8/5. Shown when Show number is on. |
| Layout | Puts the title beside the stars (Inline) or above them (Stacked). Options: Inline, Stacked. Default: Inline. Per device. |
| Alignment | Aligns the rating. Options: Left, Center, Right. Per device. |
Design tab
Stars
| Setting | What it does |
|---|---|
| Size | Size of the stars. Per device. |
| Spacing | Space between the stars. Per device. |
| Marked color | Color of the filled stars. |
| Unmarked color | Color of the empty stars. |
| Corner roundness | Line thickness of the star outline. Higher values give softer points. |
Title & number
| Setting | What it does |
|---|---|
| Title typography | Text style or font, size, weight and spacing of the title. |
| Title color | Color of the title. |
| Spacing | Space between the title and the stars. Per device. |
| Number typography | Text style or font, size, weight and spacing of the number. Shown when Show number is on. |
| Number color | Color of the number. Shown when Show number is on. |
Shared Design sections
Every element also has these sections at the end of the Design tab.
| Section | What it does |
|---|---|
| Spacing & position | Margin, padding, width, alignment in its container, order, position (relative, absolute, fixed), offsets, z-index and global classes. See Spacing, size & position. |
| Background & border | Background, border, border radius, box shadow, overflow and opacity of the whole element. See Colors & backgrounds and Borders & shadows. |
| Mask | Crops the element to a shape (circle, arch, blob, star…) or your own SVG or PNG. See Shape dividers & masks. |
Behaviour tab
Behaviour sections
The Behaviour tab is the same for every element.
| Section | What it does |
|---|---|
| Anchor & classes | An Anchor ID for #links and your own CSS classes. |
| Animations | Entrance, scroll, hover and loop animations from presets or your own timeline. See Motion & effects. |
| Motion & effects | A simple entrance animation, transforms (also on hover), CSS and backdrop filters, and sticky positioning. |
| Scroll & mouse effects | Movement, rotation, scale, fade and blur while the page scrolls, and pointer effects (follow the pointer, 3D tilt). |
| Visibility | Hide the element on desktop, tablet or mobile, or in dark or light mode. See Visibility. |
| Conditions | Show the element only when rules match, such as logged-in visitors, a date range or a URL parameter. See Display conditions. |
| Interactions | Show, hide or change other elements when this one is clicked, hovered or scrolled into view. See Interactions. |
| Attributes | Custom HTML attributes for this element. See Anchor, classes & attributes. |
Tips
- Say where it comes from. A label such as “Average of 86 reviews on Google” makes a rating believable. Only show ratings you can back up.
- Screen readers. The stars are read as the score out of the scale, so the rating makes sense without seeing the stars.
- Testimonials. The Testimonial widget has its own star rating; you don't need a separate widget there.