Star Rating Element

Last Update: March 18, 2024

The Star Rating Element allows you to add a manual or dynamic star rating anywhere in your content. You can use any icon you like, and determine both maximum and average rating. Read the document to see the full range of options, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Star Rating Element

Select where you’d like to place your Star Rating. Add the Start Rating Element from the Element Dialog.

Configure the Element as required. Choose the maximum and average rating to display, and choose whether to Show or Hide the Element when the rating is empty.

Configure the style of the rating on the design tab. Here, you can choose the icon to display, as well as the size and color of both filled and empty icons, and various other options.

You can choose to animate the Element on the Extras tab if you wish.

Star Rating Element Example

Element Options

Note: Please note that the displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
Maximum RatingSelect the maximum possible rating.
RatingEnter the rating.
Display Empty RatingSelect 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 VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
IconClick an icon to select, click again to deselect.
Icon SizeEnter value including any valid CSS unit, ex: 20px.
Filled Icon ColorSelect the color of the filled icons.
Empty Icon ColorSelect the color of the empty icons.
Icon SpacingControl the spacing between the icons. Enter value including any valid CSS unit, ex: 15px.
Display Rating TextSelect whether or not to display the rating text next to the icons.
Rating Font SizeControl the rating font size. Enter value including any valid CSS unit, ex: 20px.
Rating Text ColorSelect the color of the rating text.
Rating Number RoundingSelect 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 SpacingControl the spacing between the icons and the rating text. Enter value including any valid CSS unit, ex: 15px.
AlignmentSelect the alignment of the icons and the text.
MarginEnter values including any valid CSS unit, ex: 4%.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article