{"id":2094,"date":"2026-10-14T04:40:48","date_gmt":"2026-10-14T04:40:48","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/?post_type=docs&p=2094"},"modified":"2026-10-18T06:12:53","modified_gmt":"2026-10-18T06:12:53","password":"","slug":"testimonial","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/testimonial\/","title":{"rendered":"Testimonial"},"content":{"rendered":"\n

The Testimonials Block lets you display customer reviews and testimonials in a structured grid. You can add each customer’s picture, name, designation, review, star rating, and quote icon or company logo. Choose from three testimonial styles, configure responsive columns where supported, and customize the appearance of testimonial cards and their content.<\/p>\n\n\n\n

How to Add a Testimonials Block<\/h2>\n\n\n\n

Step 1: Add the Testimonials Block<\/h3>\n\n\n\n
    \n
  1. Open the page or post where you want to display customer testimonials.<\/li>\n\n\n\n
  2. Click the + (Add Block)<\/strong> button in the Gutenberg editor.<\/li>\n\n\n\n
  3. Search for Testimonials<\/strong>.<\/li>\n\n\n\n
  4. Select the Testimonials Block to insert it into your page.<\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Step 2: Configure the Testimonials Block<\/h3>\n\n\n\n

    Select the Testimonials Block and open the block settings panel. The available tabs are:<\/p>\n\n\n\n

      \n
    • Settings:<\/strong> Add and manage testimonials, including customer details, reviews, pictures, ratings, and logos.<\/li>\n\n\n\n
    • Layout:<\/strong> Choose a testimonial style, configure columns where available, and adjust alignment and spacing.<\/li>\n\n\n\n
    • Style:<\/strong> Customize testimonial cards, names, designations, descriptions, author images, ratings, logos, and quote icons.<\/li>\n\n\n\n
    • Advanced:<\/strong> Configure the block’s spacing and background using the available advanced controls.<\/li>\n<\/ul>\n\n\n\n

      Settings Tab<\/h2>\n\n\n\n

      1. Testimonials<\/h3>\n\n\n\n

      Add and manage the testimonials displayed in the block.<\/p>\n\n\n\n

        \n
      • Picture:<\/strong> Select or replace the customer’s image from the WordPress Media Library.<\/li>\n\n\n\n
      • Name:<\/strong> Enter the customer’s name.<\/li>\n\n\n\n
      • Designation:<\/strong> Enter the customer’s job title, role, or designation.<\/li>\n\n\n\n
      • Description:<\/strong> Enter the customer’s testimonial or review.<\/li>\n\n\n\n
      • Rating:<\/strong> Choose a star rating from 1 to 5.<\/li>\n\n\n\n
      • Quote Icon:<\/strong> Select the quote icon displayed with the testimonial. This option is available when Style 1<\/strong> is selected in the Layout tab.<\/li>\n\n\n\n
      • Logo:<\/strong> Select or replace a company logo. This option is available when Style 2<\/strong> or Style 3<\/strong> is selected in the Layout tab.<\/li>\n\n\n\n
      • Move Up \/ Move Down:<\/strong> Change the order of a testimonial.<\/li>\n\n\n\n
      • Duplicate:<\/strong> Create a copy of a testimonial.<\/li>\n\n\n\n
      • Remove:<\/strong> Delete a testimonial.<\/li>\n\n\n\n
      • Add Testimonial:<\/strong> Add a new testimonial entry.<\/li>\n<\/ul>\n\n\n\n

        2. Display Options<\/h3>\n\n\n\n

        Control whether customer images and star ratings appear in the testimonials.<\/p>\n\n\n\n

          \n
        • Show Image:<\/strong> Enable or disable customer images across the testimonials.<\/li>\n\n\n\n
        • Show Rating:<\/strong> Enable or disable star ratings across the testimonials.<\/li>\n<\/ul>\n\n\n\n
          \"\"<\/figure>\n\n\n\n

          Layout Tab<\/h2>\n\n\n\n

          1. Preset & Columns<\/h3>\n\n\n\n

          Choose the testimonial design and configure its grid layout.<\/p>\n\n\n\n

            \n
          • Style:<\/strong> Choose one of the three available testimonial styles.\n
              \n
            • Style 1:<\/strong> Displays the author image, name, designation, rating, description, and quote icon.<\/li>\n\n\n\n
            • Style 2:<\/strong> Displays the company logo, description, author information, and rating.<\/li>\n\n\n\n
            • Style 3:<\/strong> Displays the company logo, rating, description, and author information.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
            • Columns:<\/strong> Set the number of columns for desktop devices. Available when Style 2<\/strong> or Style 3<\/strong> is selected.<\/li>\n\n\n\n
            • Columns (Tablet):<\/strong> Set the number of columns for tablet devices. Available when Style 2<\/strong> or Style 3<\/strong> is selected.<\/li>\n\n\n\n
            • Columns (Mobile):<\/strong> Set the number of columns for mobile devices. Available when Style 2<\/strong> or Style 3<\/strong> is selected.<\/li>\n\n\n\n
            • Alignment:<\/strong> Set the content alignment to Default, Left, Center, or Right. This control supports responsive settings.<\/li>\n\n\n\n
            • Author Info Alignment:<\/strong> Align the author information to Start, Center, or End. Available when Show Image<\/strong> is enabled and supports responsive settings.<\/li>\n\n\n\n
            • Item Spacing:<\/strong> Set the spacing around each testimonial item. This control supports responsive settings.<\/li>\n<\/ul>\n\n\n\n
              \"\"<\/figure>\n\n\n\n

              Style Tab<\/h2>\n\n\n\n

              1. Item<\/h3>\n\n\n\n

              Customize the appearance of the testimonial cards.<\/p>\n\n\n\n

                \n
              • Background:<\/strong> Set the card background color or gradient.<\/li>\n\n\n\n
              • Border:<\/strong> Customize the card border.<\/li>\n\n\n\n
              • Border Radius:<\/strong> Adjust the roundness of the card corners.<\/li>\n\n\n\n
              • Box Shadow:<\/strong> Add and customize a shadow around the testimonial card.<\/li>\n\n\n\n
              • Padding:<\/strong> Set the inner spacing of the card. This control supports responsive settings.<\/li>\n\n\n\n
              • Gap (px):<\/strong> Set the spacing between elements in the testimonial layout. Available when Style 1<\/strong> is selected and supports responsive settings.<\/li>\n<\/ul>\n\n\n\n

                2. Name<\/h3>\n\n\n\n

                Customize the appearance of the customer’s name.<\/p>\n\n\n\n

                  \n
                • Color:<\/strong> Set the name text color.<\/li>\n\n\n\n
                • Typography:<\/strong> Customize the name typography, including font settings. This control supports responsive settings.<\/li>\n\n\n\n
                • Margin:<\/strong> Set the spacing around the name. This control supports responsive settings.<\/li>\n<\/ul>\n\n\n\n

                  3. Designation<\/h3>\n\n\n\n

                  Customize the appearance of the customer’s designation.<\/p>\n\n\n\n

                    \n
                  • Color:<\/strong> Set the designation text color.<\/li>\n\n\n\n
                  • Typography:<\/strong> Customize the designation typography, including font settings. This control supports responsive settings.<\/li>\n<\/ul>\n\n\n\n

                    4. Description<\/h3>\n\n\n\n

                    Customize the appearance and dimensions of the testimonial text.<\/p>\n\n\n\n

                      \n
                    • Color:<\/strong> Set the description text color.<\/li>\n\n\n\n
                    • Typography:<\/strong> Customize the description typography, including font settings. This control supports responsive settings.<\/li>\n\n\n\n
                    • Margin:<\/strong> Set the spacing around the description. This control supports responsive settings.<\/li>\n\n\n\n
                    • Min Height (px):<\/strong> Set the minimum height of the description area. This control supports responsive settings.<\/li>\n\n\n\n
                    • Max Width (px):<\/strong> Set the maximum width of the description area. This control supports responsive settings.<\/li>\n<\/ul>\n\n\n\n

                      5. Author Image<\/h3>\n\n\n\n

                      This panel appears when Show Image<\/strong> is enabled.<\/p>\n\n\n\n

                        \n
                      • Author Info Gap (margin):<\/strong> Adjust the spacing around the author image within the author information area. This control supports responsive settings.<\/li>\n\n\n\n
                      • Image Size (px):<\/strong> Set the author image size in pixels.<\/li>\n\n\n\n
                      • Image Border Radius:<\/strong> Adjust the roundness of the author image corners.<\/li>\n<\/ul>\n\n\n\n

                        6. Logo<\/h3>\n\n\n\n

                        This panel appears when Style 2<\/strong> or Style 3<\/strong> is selected.<\/p>\n\n\n\n

                          \n
                        • Logo Height (px):<\/strong> Set the height of the company logo. This control supports responsive settings.<\/li>\n<\/ul>\n\n\n\n

                          7. Rating<\/h3>\n\n\n\n

                          This panel appears when Show Rating<\/strong> is enabled.<\/p>\n\n\n\n

                            \n
                          • Color:<\/strong> Set the star rating color.<\/li>\n\n\n\n
                          • Size (px):<\/strong> Set the size of the rating stars in pixels.<\/li>\n<\/ul>\n\n\n\n

                            8. Quote Icon<\/h3>\n\n\n\n

                            This panel appears when Style 1<\/strong> is selected.<\/p>\n\n\n\n

                              \n
                            • Color:<\/strong> Set the quote icon color.<\/li>\n\n\n\n
                            • Size (px):<\/strong> Set the quote icon size in pixels.<\/li>\n<\/ul>\n\n\n\n
                              \"\"<\/figure>\n\n\n\n

                              Advanced Tab<\/h2>\n\n\n\n

                              1. Spacing<\/h3>\n\n\n\n

                              Control the spacing around the entire Testimonials Block.<\/p>\n\n\n\n

                                \n
                              • Padding:<\/strong> Set the inner spacing around the block. Use the available responsive controls to adjust spacing for different devices.<\/li>\n\n\n\n
                              • Margin:<\/strong> Set the outer spacing around the block. Use the available responsive controls to adjust spacing for different devices.<\/li>\n<\/ul>\n\n\n\n

                                2. Background<\/h3>\n\n\n\n

                                Customize the background of the entire Testimonials Block.<\/p>\n\n\n\n

                                  \n
                                • Background:<\/strong> Set a background color or gradient for the block.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

                                  The Testimonials Block lets you display customer reviews and testimonials in a structured grid. You can add each customer’s picture, name, designation, review, star rating, and quote icon or company logo. Choose from three testimonial styles, configure responsive columns where supported, and customize the appearance of testimonial cards and their content. How to Add a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[19],"doc_tag":[],"class_list":["post-2094","docs","type-docs","status-publish","hentry","doc_category-showcase-block"],"year_month":"2026-10","word_count":891,"total_views":"6","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Showcase Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/showcase-block\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2094","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=2094"}],"version-history":[{"count":2,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2094\/revisions"}],"predecessor-version":[{"id":2476,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2094\/revisions\/2476"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=2094"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=2094"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=2094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}