Content Controls
Components
In this section, you can define the basic elements of your star rating system. Choose the number of stars to display, set the current rating, select the type of icon for the stars, and decide if a label should accompany the rating.
- Stars – Choose the number of stars you wish to display in your rating system.
- Rating – Set the current rating value that the stars should represent.
- Icon Type – Select the style of icons used for the stars, whether it be default or custom.
- Custom Icon – If you’ve chosen a custom icon type, pick the specific icon you want to use for your stars.
- Show Label – Toggle on or off the display of a text label alongside your star rating.
- Label Text – When the label display is enabled, enter the text for the label here.
Design Controls
Stars
Adjust the visual aspects of the stars in your rating system. You can modify their size, the space between them, and the colors for both marked and unmarked stars to match your site’s design.
- Size – Set the size of the stars to make them larger or smaller.
- Gap – Control the spacing between each star for a more compact or spread-out appearance.
- Stars Color – Choose a color for the stars that represent the active rating.
- Unmarked Color – Select a color for the stars that are not part of the active rating, usually to indicate the maximum possible rating.
Label
Here, you can customize the appearance and position of the label that accompanies the star rating, including its typography and layout.
- Label Typography – Configure the font properties for the label text, such as font style, size, and color.
- Label Position – Decide where the label should be positioned in relation to the stars.
- Vertical Layout – Optimize the label’s layout for different device breakpoints for better responsiveness.
Spacing
The spacing settings allow you to manage the margin around the entire star rating wrapper for precise placement on your page, as well as the space around the label for clear readability.
- Wrapper – Adjust the outermost spacing of the star rating element.
- Margin Top – Increase or decrease the space above the star rating wrapper.
- Margin Bottom – Control the space below the star rating wrapper.
- Label Spacing – Define the amount of space around the label text to ensure it’s distinct from other page elements.
