Rating

In this article, we're going to discuss the Rating Element and its settings. The Rating Element can be used to add star rating or custom review in pages created in either Cornerstone or Pro's Content Builder (can also be used in Footer and Header as well). So let's dive in!

  1. Setup
  2. Schema Settings
  3. Graphic Settings
  4. Design Settings
  5. Text Settings
  6. Customize
  7. Summary

The Rating element adds a star rating or custom review on the page. To add the Rating Element, simply search for "Rating" and drag "Rating" to the canvas.

Rating Element Add

Setup

The rating element consists of the empty, half full, and full stars section that can be an icon or image. The rating element also contains an optional text section to show the numeral representation of the rating or any other custom text you want to add.

Rating Element Demo 1

The Setup control group in the Rating element options contains a set of options to initialize the Rating element. The following is a details description of each option in the Setup control group.

Rating Element Setup
  • Base Font Size - Use this option to make the stars and text section of the Rating element smaller or bigger.
  • Rating - Use this option to set the actual rating. For example, if you add 3.5 as the value of this option, there will be three full stars and a half full star as the rating.
  • Min & Max Scale - Use this option to set the minimum and maximum stars for the rating. For example, if you set the minimum scale to one, and a maximum scale to five, you will have a five star rating system that can be rated from one star to 5 stars.
  • Width & Max Width - Use these options to set the width and maximum width of the Rating element.
  • Background - Use this option to set the background color of the Rating element.
  • Options

    • Empty Icons - Use this option to decide whether to show the empty stars or not. If disabled, it will show only the full and half full stars.
    • Round Whole - Use this option to round whatever value you add into the Rating option. The end result will be a rating system without half full stars. For example, if you set the Rating option value to 3.5, it will round it to 4.

      Rating Element Demo 2
    • Show Text - Use this option to decide whether you want to show an additional context by adding a text after the stars section in the Rating element. If enabled it will show a text such as 3.5 / 5.

    • Add Schema - Use this option to decide whether you want to add schema code for the Rating element. Enabling this option will show the Schema control group with the options to add schema code.
  • Text - This option will show if you enable the Show Text option. Using this option you can add custom text after the star section of the Rating element. The default text uses the Dynamic Content feature to show {{rating}} / {{max}}. rating retrieves the value you added in the Rating option and max retrieves the value that you add in Max Scale option. You can change the text however you want, for example, if you change the value to {{rating}} of {{max}} the final result will be like this:

Rating Element Demo 3

Schema Settings

The Schema control group will show if you enable the Add Schema option from the Setup control group. Schema is the code for Structured Data, that gives extra information to Google search engine, to help it understand the content of your page, in this case, the Rating element.

The Schema control group gives some options to help you describe the Rating element to Google. Structured Data contains a variety of topics and you can learn more about the schema code here.

Rating Element Schema
  • Type - This option adds Type property and whatever value you add into the option as the value. The Rating element adds the Review type automatically, that is why you need to add a type for your organization or business here and not Review.
  • Item Name - Use this option to add the name of your organization or business.
  • Item Telephone - Use this option to add the phone number of your organization or business.
  • Item Address - Use this option to add the postal address of your organization or business.
  • Item Images - Use this option to add an image for your organization or business.
  • Author Name - Use this option to add the author name which will be added into the Review schema type's author property.
  • Author Review - Use this option to add a review for the Rating element. The value of this option will be used as the value of reviewBody property in the Review schema type.

Graphic Settings

The Rating element has the graphic section which is the icons for the empty, half full, and full states. The default icon for the graphic section is the star icon, but you can change the icons to whatever you want, or use custom images instead of the icons for the graphic section.

Rating Element Graphic
  • Type - Use this option to decide whether you want the graphic section of the Rating element to be icon or custom image.
  • Full - Use this option to select the icon or custom image of the graphic section in full mode.
  • Half Full - Use this option to select the icon or custom image of the graphic section in half full mode.
  • Empty - Use this option to select the icon or custom image of the graphic section in empty mode.
  • Spacing & Color - Use this option to set the spacing between each icon and set the color of the icon. This option will show if you set the Icon graphic type.
  • Spacing & Max Width - Use this option to set the spacing between each custom image that is used instead of the icon and the maximum width of each image. This option will show if you set the Image graphic type.

Design Settings

The Design settings consist of control groups to set the positioning, padding, margin, border, and other design-related aspects of the Rating element.

Flexbox

The Flexbox section contains controls to set the positioning of the Rating element graphic and text sections using the CSS Flexbox display.

Rating Element Flexbox Margin
  • Child Placement: Use this option to decide if the items of the Rating element should be laid out vertically (Column) or horizontally (Row).
  • Reverse: Enabling this option will cause the Rating elements to be laid in a reverse manner.
  • Wrap: Enable this option to wrap the Rating elements when there is not enough space in smaller devices.
  • Align Horizontal: Use this option to layout the Rating elements horizontally.
  • Align Vertical: Use this option to layout the Rating elements vertically.

Click here for more information about the Flexbox display.

Margin

Use this option to set the margin of the Rating element. You can change the settings for all the sides of the Rating element or modify them individually.

Padding

Use this option to set the padding of the Rating element. You can change the settings for all the sides of the Rating element or modify them individually.

Rating Element Padding Border

Border

Use this option to set the border of the Rating element. You can set the style, width and color of the border on all sides or each side individually.

Border Radius

Use this option to set a border-radius for the Rating element. You can set the curve on all sides or set them individually.

Rating Element Border Radius Box Shadow

Box Shadow

You can set a shadow over the Rating element using the box-shadow control group.

  • X-Offset - Use this option to set the X offset of the shadow in the Rating element.
  • Y-Offset - Use this option to set the Y offset of the shadow in the Testimonial.
  • Blur - Use this option to set the intensity of the blur effect in the Rating element.
  • Spread & Position - Use this option to set the spread amount of the items section shadow and decide if you want the shadow to sit inside or outside of the Rating element.
  • Color - Use this option to set the color of the Rating element shadow.

Text Settings

The Design settings consist of control groups to set the characteristics of the text section of the Rating element.

Text Format

You can use this control group to set the format of the text in the Rating element.

Rating Element Text Format
  • Font Family - Use this option to set the font of the Rating element text.
  • Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
  • Font Size - Use this option to set the size of the font.
  • Letter Spacing - Use this option to set the spacing between letters.
  • Line Height - Use this option to set the spacing between each line.
  • Font Style - Use this option to decide if you want to have a normal or italic style.
  • Text Align - Use this option to set the alignment of the text. Possible values are left, center, right, and justify.
  • Text Decoration - Use this option to force an underline or linethrough style.
  • Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
  • Text Color - Use this option to set the color of the text.

Text Margin

Use this option to set the margin of the Rating element text section. You can change the settings for all the sides of the text or modify them individually.

Rating Element Text Margin Text Shadow

Text Shadow

The text-shadow control group contains settings to set a text-shadow for the Rating element text.

  • X-Offset - Use this option to set the X offset of the text-shadow.
  • Y-Offset - Use this option to set the Y offset of the text-shadow.
  • Blur - Use this option to set the intensity of the blur effect in the text-shadow.
  • Color - Use this option to set the color of the text-shadow.

Customize

The customize section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

Rating Element Customize
  • ID - Use this option to set an HTML ID for the element. The ID should be unique on the page.
  • Class - Use this option to set an HTML Class for the element. You can use the class for your custom CSS code.
  • Element CSS - Use this option to have better control over the element to access the inner tags of the element using $el as the CSS selection. Click here for more detailed information.
  • Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
  • Custom Attributes - Use this option to add custom attributes to the wrapper HTML tag of the element. Such as data-info=123. You can use the option to inject custom information into the element to use on your customization code.

Summary

To sum up, we've discussed the Rating Element. We've discussed that a Rating Element is an easy tool for adding ratings and star reviews on a page and we've learned how to change it's content and design and delved into details of the Rating Element settings.

See something inaccurate? Let us know