Star Rating Element

18/01/2022

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.

5 / 5

View Element Demo Page!

How To Use The Star Rating Element

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

Step 2 – 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.

Step 3 – 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.

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

868,152 Businesses Trust Avada

Get Avada

868,152 Businesses Trust Avada

Get Avada

868,152 Businesses Trust Avada

Get Avada

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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 Tab

Maximum Rating – Select the maximum rating. From 1 to 10.
Rating – Enter the average rating to display.
Display Empty Rating – Select whether to display the rating (eg. 0/5) if no rating is present, or to completely hide it. In the live editor this element will be always be displayed.
Element Visibility – Allows you to control the Separator’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.
CSS Class – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.
CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.

View the Options Screen

Design Tab

Icon – Select an Icon to display the ratings. Click an icon to select, click again to deselect.
Icon Size – Enter value including any valid CSS unit, ex: 20px.
Filled Icon Color – Select the color of the filled icons.
Empty Icon Color – Select the color of the empty icons.
Icon Spacing – Enter value including any valid CSS unit, ex: 15px.
Display Rating Text – Select whether or not to display the rating text aside the icons.
Rating Font Size – Enter value including any valid CSS unit, ex: 20px.
Rating Text Color – Select the color of the filled icons.
Rating Number Rounding – Select how the rating number should be rounded. Choose from Auto, No Decimals, 1 Decimal, or 2 Decimals. 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 – Enter value including any valid CSS unit, ex: 15px.
Alignment – Select the alignment of the icons and the text.
Margin – Enter values including any valid CSS unit, ex: 4%.

View The Options Screen

Extras Tab

Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.
Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.
Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 5.
Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.