{"id":2424,"date":"2021-06-22T06:42:30","date_gmt":"2021-06-22T06:42:30","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2424"},"modified":"2023-04-24T12:54:00","modified_gmt":"2023-04-24T12:54:00","slug":"how-to-add-the-star-rating-widget-to-your-wordpress-website","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-add-the-star-rating-widget-to-your-wordpress-website\/","title":{"rendered":"How to Add the Star Rating Widget to Your WordPress Website"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2424\" class=\"elementor elementor-2424\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f5975b3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f5975b3\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-13804af\" data-id=\"13804af\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4ed5b924 elementor-widget elementor-widget-video\" data-id=\"4ed5b924\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=3J6LcRzknTc&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3506fbf5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3506fbf5\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7d9e06db\" data-id=\"7d9e06db\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-21e90511 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"21e90511\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-5681\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-5681\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-5682\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-5682\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-5681\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-5681\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-5681\" tabindex=\"0\" hidden=\"false\"><p>Using Elementor, you can easily add star ratings to your WordPress website or blog. In this video, we&#8217;ll go over all the setting and options so you could set up your own star rating in minutes.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-5682\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-5682\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-5682\" tabindex=\"0\" hidden=\"hidden\"><p>hi guys zip from elemental here today<br \/>I&#8217;ll introduce you to the new Elemental<br \/>star rating widget this widget is great<br \/>for displaying rankings by reviewers for<br \/>things such as films restaurants hotels<br \/>and more the star rating widget lets you<br \/>add star ratings to different elements<br \/>of the page letting you add social proof<br \/>of consumer opinions which has become a<br \/>necessary part of the user experience so<br \/>let&#8217;s dive in for this tutorial I&#8217;ll be<br \/>working on this page our setup before<br \/>now let&#8217;s drag in the star rating widget<br \/>go ahead search for it and drag it into<br \/>the column let&#8217;s go over the many<br \/>settings you can use to customize the<br \/>rating widget to your liking first off<br \/>in the content tab we can control the<br \/>rating by selecting the rating scale<br \/>there are two options a scale of 0 to 5<br \/>and 0 to 10 after choosing your desired<br \/>scale you can go ahead and enter your<br \/>number in the rating field below the<br \/>icon option offers two types of design<br \/>to choose from font awesome and Unicode<br \/>I am leaving it on the default setting<br \/>the unmarked style has two options solid<br \/>and outline solid fills in the unmarked<br \/>stars and the outline option leaves them<br \/>empty I&#8217;ll set it to outline cool in the<br \/>title option you can type your design<br \/>text it will appear to the left of the<br \/>stars the alignment setting allows you<br \/>to position the star rating widget<br \/>relative to the column there are four<br \/>options align left center right and<br \/>justify now let&#8217;s go over to the style<br \/>tab here we can customize the title as<br \/>well as the star settings in the title<br \/>drop-down we can set the typography<br \/>color and the gap go ahead and style the<br \/>title to your liking the gap slider<br \/>determines the distance between the<br \/>title and the stars in the Stars<br \/>drop-down we can control the size of the<br \/>stars as well as the spacing between<br \/>each one we can also set the Cal<br \/>of the stars that are marked as well as<br \/>the unmarked stars as you can see this<br \/>widget is very versatile and allows you<br \/>to customize and create multiple and<br \/>unique designs well that&#8217;s it<br \/>now you can design and create your own<br \/>custom elemental star writing widgets<br \/>and boost your website design don&#8217;t<br \/>forget to subscribe to our YouTube<br \/>channel to see more videos and tutorials<br \/>see you later<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview Using Elementor, you can easily add star ratings to your WordPress website or blog. In this video, we\u2019ll go over all the setting and options so you could set up your own star rating in minutes. Transcript hi guys zip from elemental here today I\u2019ll introduce you to the new Elemental star [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":9714,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-2424","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Add the Star Rating Widget to Your Wordpress Website - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-add-the-star-rating-widget-to-your-wordpress-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add the Star Rating Widget to Your Wordpress Website - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Using Elementor, you can easily add star ratings to your WordPress website or blog. In this video, we\u2019ll go over all the setting and options so you could set up your own star rating in minutes. Transcript hi guys zip from elemental here today I\u2019ll introduce you to the new Elemental star [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-add-the-star-rating-widget-to-your-wordpress-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-22T06:42:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-24T12:54:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Star-Rating-Widget.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add the Star Rating Widget to Your Wordpress Website - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-add-the-star-rating-widget-to-your-wordpress-website\/","og_locale":"en_US","og_type":"article","og_title":"How to Add the Star Rating Widget to Your Wordpress Website - Academy","og_description":"Overview Transcript Overview Using Elementor, you can easily add star ratings to your WordPress website or blog. In this video, we\u2019ll go over all the setting and options so you could set up your own star rating in minutes. Transcript hi guys zip from elemental here today I\u2019ll introduce you to the new Elemental star [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-add-the-star-rating-widget-to-your-wordpress-website\/","og_site_name":"Academy","article_published_time":"2021-06-22T06:42:30+00:00","article_modified_time":"2023-04-24T12:54:00+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Star-Rating-Widget.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-add-the-star-rating-widget-to-your-wordpress-website\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-the-star-rating-widget-to-your-wordpress-website\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Add the Star Rating Widget to Your WordPress Website","datePublished":"2021-06-22T06:42:30+00:00","dateModified":"2023-04-24T12:54:00+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-the-star-rating-widget-to-your-wordpress-website\/"},"wordCount":478,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-the-star-rating-widget-to-your-wordpress-website\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Star-Rating-Widget.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-add-the-star-rating-widget-to-your-wordpress-website\/","url":"https:\/\/elementor.com\/academy\/how-to-add-the-star-rating-widget-to-your-wordpress-website\/","name":"How to Add the Star Rating Widget to Your Wordpress Website - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-the-star-rating-widget-to-your-wordpress-website\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-the-star-rating-widget-to-your-wordpress-website\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Star-Rating-Widget.jpg","datePublished":"2021-06-22T06:42:30+00:00","dateModified":"2023-04-24T12:54:00+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-the-star-rating-widget-to-your-wordpress-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-add-the-star-rating-widget-to-your-wordpress-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-add-the-star-rating-widget-to-your-wordpress-website\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Star-Rating-Widget.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Star-Rating-Widget.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-add-the-star-rating-widget-to-your-wordpress-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Add the Star Rating Widget to Your WordPress Website"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2424","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=2424"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2424\/revisions"}],"predecessor-version":[{"id":9465,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2424\/revisions\/9465"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/9714"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}