JetReviews. How to Change Style and Layout of Review Widget

From this tutorial you’ll learn how to style up Review widget.

  1. After you created and customized your Reviews widget you are ready to change its style settings to create your own layout. Navigate to Style tab and find the following blocks:
  2. Click on Title block. Here you are able to change title Color (e.g., #12a4e2), Background Color (rgba(110,193,228,0.4)), set Padding and Margin parameters, select title Alignment. Also, you can add Border if you want to, and set its Width, Color and Radius.
  3. Click on Typography editing icon and set the values you need.
  4. Here’s what how the Title of our Review widget looks on this stage.

  5. Now, click on Fields block. Here you will be able to change field with review values depending on layout type selected before. Let’s look at each of them closer.
  6. Fields Box Customization
  7. Fields Box allows to style up widget’s area with review featured labels. You can add Border here and select the most suitable options.
  8. Label
  9. Here you can change Color and Typography of review featured labels.
  10. Value
  11. This option works in the case you selected Points or Percentage option in Content tab > Field Settings > Layout. Here you can style up your value parameter: select its Color, Typography, Background Color, change Padding and Margin settings, add Border and style it up.
  12. Here’s what we’ve got.

    Stars Rating
  13. If you selected widget’s review layout as Stars in Content tab, you need to use this block to style up. Here you can set stars size by moving slider or inputting numeric value, select Filled and Empty Stars Color, and set Gap between stars.
  14. Here’s what we’ve got.

    Progress Styles
  15. If you selected Points or Percentage option in Content tab you are now able to style up progress bar appearance. Select Height, set Colors, add Border and change Padding and Margin parameters if needed.
  16. Here’s what we’ve got.

    Summary Box Customization
  17. Click on Summary block and locate fields available for customization.
  18. Summary Title and Summary Content
  19. Here you can select Color and Typography options.
  20. Summary Box
  21. On this step you need to select Background Color, Alignment, Padding and Margin parameters, add Border if you need.
  22. Here’s what we’ve got.

    Summary Average Box Customization
  23. Click on Summary Average block and locate fields available for customization.
  24. Legend and Value
  25. Here you can select Color and Typography options
  26. Here you can set Background Color, Alignment, select Padding and Margin parameters, add Border if you need.
  27. Stars Rating
  28. If you selected Stars to be displayed in Summary Average field, you can customize them is this block. Change Stars Size by moving slider or setting numeric value, select Colors for Empty and Filled Stars, change Gap between them.
  29. Progress Styles
  30. If you enabled Progress Style option in Content tab > Summary Settings block, you’ll have options to style it up active. here you can set Progress Height, add Progress Canvas Color and Progress Bar Color, set Padding and Margin parameters and add Border if needed.
  31. Finally, here’s what we’ve got!

    Congrats! Now you know how to style up JetReviews widget and you are able to create your own astonishing widgets!

Was this helpful?