Search

How to Create Star Rating in Divi (Without Plugin)

You’re in the right article if you want information about creating a star rating in Divi. Adding a star rating on your website can help a business earn the trust of its potential customers. You can put star ratings on your products/services ratings, reviews, testimonials, etc.

There are two types of star ratings, each with different benefits: static and dynamic. This article will focus on creating the static star rating in Divi. Unlike a dynamic star rating (read: How to Add Dynamic Star Rating in Divi), creating a static star rating is more straightforward because we don’t need the help of any plugins.

Examples of s static star rating

Steps to Create the Static Star Rating in Divi

Step 1: Add the Icon Module

Go to your Divi Builder editor, and we will start everything from scratch, so create a section with a single column, select the Icon module, and insert that module into the column. Once you add the Icon module, go to the Icon Settings and navigate to the Content tab, add a star icon from the icon library, and then you can edit and style up as you prefer.

Step 2: Add the Custom CSS

Once you add a star icon to the module, we will add a simple custom CSS into the Icon module. On the module settings, navigate to the Advanced tab -> Custom CSS. Add display: inline; into the Main Element field.

Step 3: Duplicate the Module

As we mentioned at the beginning of this article, a star rating can help your business earn the trust of its potential customers. So, it doesn’t make sense if you only give a rating of your products/services a one-star, right? One star indicates poor products/services, and five stars mean excellent.

Before duplicating the module, please ensure that you’ve already given a margin to the icon to make your star rating have a proportional appearance. In this example, we add a 5px left margin.

Next, duplicate the Icon module four times by clicking the Duplicate Module button, and your static star rating will display inline. That’s it. Don’t forget to save or publish your project if you want to.

The Bottom Line

This article shows how easily you can create a static star rating in Divi without the help of any plugins. Creating a star rating with this method (adding an Icon module and custom CSS) will give a better result than adding an image; sharper and more detailed.

If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud, and you can access that from any website you create.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.