Star Rating Element

25/10/2021

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.00 / 5
View Element Demo Page!

Overview

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.

Star Rating Element Example
Avada Website Builder

761,470 Businesses Trust Avada

Get Avada
Avada Website Builder

761,470 Businesses Trust Avada

Get Avada
Avada Website Builder

761,470 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 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 SpacingEnter value including any valid CSS unit, ex: 15px.

  • Display Rating TextSelect whether or not to display the rating text aside the icons.

  • Rating Font SizeEnter value including any valid CSS unit, ex: 20px.

  • Rating Text ColorSelect the color of the filled icons.

  • Icon / Text SpacingEnter value including any valid CSS unit, ex: 15px.

  • Alignment Select the alignment of the icons and the text.

  • MarginEnter 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.

View The Options Screen

Global Options

There are no Global Options for the Star Rating Element.

Avada Website Builder

761,470 Businesses Trust Avada

Get Avada
Avada Website Builder

761,470 Businesses Trust Avada

Get Avada
Avada Website Builder

761,470 Businesses Trust Avada

Get Avada