How to Use the Divider and Star Rating Elements
The user interface of the Thrive editor has been upgraded!
Please, check out the changes here, before proceeding.
This article will explain how to use the “Divider” element, as well as the “Star Rating” one. If you want to find out how to add the elements and customize them, keep reading.
The "Divider" element
The divider is a simple line that you can place inside your website or page to separate two pieces of content.
Add the element
In order to add the element to your post or page, click on the plus sign from the right sidebar:
This will open the list of all the Thrive Architect elements. Scroll down and look for the “Divider” one or search for it in the search bar:
Then, drag and drop it anywhere in your page, where you want to use it:
Use the Main Options
Once you place the element, you can start customizing it. You will notice the “Main Options” section open in the left sidebar:
Choose Divider Style
The first section of the Main Options is the “Choose Divider Style” one. This means that you can change the element’s style by selecting one from the list of existing styles.
To do that, click on the field next to the option:
This will open a drop down menu with all the available divider styles. Click on the one you prefer, and then click on the green “Apply” button”:
Next, you can change the color of the divider. To do that, click on the color box next to the option:
A color pop-up will open. You can manually choose a color using the color picker, or you can enter a HEX/RGB code inside the box. Click on “Apply” when you’re done choosing a color:
Another thing you can customize is the thickness of your divider. You can simply drag the slider in order to modify the thickness, or you can enter a numerical value in the box next to the slider:
These are the options that you can use in order to change the aspect of the "Divider" element. Don't forget to click on the green "Save Work" button when you're done customizing. You can find it in the bottom-left part of the editor:
However, besides the main options, you there are some other general options, as well. You can use them in order to further customize the element, such as change the “Layout & Position” or “HTML Attributes”. If you want to find out how to use them, we have separate articles for each of them in our Knowledge Base.
The “Star Rating” Element
This element allows the users on your website to rate something on your page using the star rating system.
Add the Element
Just like in the case of the divider, the first thing that you need to do in order to add the element to your page is to click on the plus sign from the right sidebar:
Then, scroll down until you find the “Star Rating” element, or search for it in the search bar:
Then, drag and drop it on your page, wherever it fits best.
Use the Main Options
Just like in the case of any other element, after you’ve placed it on your page, the main options will appear on the left sidebar:
You can first choose which state you want to modify: normal or hover. To change the state, click on “Normal”, next to the "State" option, and choose the state from the drop down menu that opens:
The “Normal” state is how the element looks like normally, whereas the “Hover” state represents the way the element looks like when someone hovers over it.
Next, you can choose how many stars you want to display on your rating. The default is “2.5 out of 5”, but you can easily change that by clicking on each number field:
For each value that you click on, a drop down will open, where you can choose the value that best fits your needs:
Next, you can choose a style for the element. To do that, click on the field next to the option:
This will open a pop-up where you can choose the prefered style. Select it, and then click on “Apply”:
The next option is the “Fill” one. This is where you can choose the color of the stars. To do that, click on the color box:
This will open the color pop-up, that you can use just as described above.
This is how the star rating element looks like if you modify the "Fill" color:
Then, you can choose a “Background” color, which means that you can choose a different color for the stars that are not being selected.
In order to change the background, click on the field:
Then, the color picker pop-up will open. After you select the color you want, make sure to modify the default opacity value, which is set to 0:
Don't forget to click on “Apply” when you’re done.
This is how the star rating element looks like if you modify the "Background" color:
The last color that you can set is the outline color of the star rating element. To do that, click on the field next to the option:
After you choose a color, similar to the cases above, click on “Apply”.
This is how the star rating element looks like if you modify the "Outline" color:
The last option from the “Main Options” section is the “Size” one. You can modify the element’s size. To do that, simply drag the slider or manually enter a numerical value in the field next to it:
Besides the main options, you can also customize the element by using the general options, also available in the left sidebar:
If you want to find out how to use them, you can check out our Knowledge Base, where you can find information about various options and elements.
After you're done customizing the element, don't forget to click on the green "Save Work" button found in the bottom-left corner of the editor:
These were all the ways in which you can customize the two above mentioned elements, the "Divider" element and the "Star Rating" one.
I hope this article was useful for you. If that’s the case, make sure to reward our efforts with a smile below :)