Skip to main content

Star Rating

After Turning on Blocks from Grigora's Kit Dashboard.

We can use Star Rating Block in Site Editor/Blog/Page from Toggle Block Inserter.

Insert Star Rating from listed Blocks.

Once Star Rating is inserted, select the Star Rating.

After selecting Star Rating , Go to block settings, in block settings we see Geenral, Styles and Advanced of settings and we'll be exploring them one by one.

General​

Total Number of Stars : The total number of stars can be increased or decreased by dragging slider back and forth.

  • Minimum Value 1
  • Maximum Value 20
  • Default Value 5

Rating : Rating allows you to display rated stars by dragging slider back and forth.

  • Minimum Value 1
  • Maximum Value Depends on total number of stars
  • Default Value 3

Set Icon Size : Icon size can be increased or decreased by dragging slider back and forth.

  • Minimum Value 1 px
  • Maximum Value 150 px
  • Default Value 18 px

Icon Spacing : Space between icons can be increased or decreased by dragging slider back and forth.

  • Minimum Value 0
  • Maximum Value 150
  • Default Value 5

Icon Settings

Change Icon : Icons can be changed of Active and Inactive icons by selecting change icon after that select desired icon.

Text

  • Prefix Text : Text can be added before Icons.

  • Suffix Text : Text can be added after Icons.

SEO (Rating Schema Upcoming Feature)

Styles​

Rating Colors​

Here Active and Inactive colors of star rating icons can be changed using Color picker and Color palatte

Advanced​

On Scroll Animations​

Animation : On Scroll Animations can be set here from listed animations with Delay(using text box) and Transition Time(Using range slider)

  • Minimum Value 0 sec
  • Maximum Value 5 sec
  • Default Value 1 sec

Transform​

(Transform can be applied normal and On-hover)

Perspective :

Rotate : Group can be rotated in the x, y, and z axis.

Skew : Skew tilts the Group in x axis and y axis.

Offset : Offset moves the Group in the x and y axis.

Scale : Group's scale can be increased or decreased using Scale.