How to Add Testimonials in a Gutenberg Block

Testimonials

The most important asset of a business is its customers without a doubt. People deposit their trust and do believe in persons like them, with the same needs and requirements. That is why a testimonial section on your site takes the focus out of your business and places it on the customer. This is a very effective selling strategy, and to some point, also an application of Word-of-mouth marketing.

The Testimonial block in PublishPress Blocks has many configuration options to allow you to show customer testimonials on your site.

Keep reading to learn how to use this feature!


Step #1. Install the PublishPress Blocks Plugin

  • Click Plugins > Add New.
  • Type PublishPress Blocks in the search box.
  • Click Install Now.
  • Click Activate.

Step #2. Create a Post

Let's create a post that will contain our testimonials:

  • Click Posts > Add New.
  • Write a proper title.
  • Click the “+” symbol to add a block or type “/”.
  • Search for the Testimonial block.
200812 Adv Testimonial 001
200812 Adv Testimonial 001

A testimonial template will display. 

  • Click on the placeholder avatar and select a new image.
  • Add an “Alt” text.
  • Click Select.
200812 Adv Testimonial 002
200812 Adv Testimonial 002
  • Add a job title and testimonial text. 
200812 Adv Testimonial 003
200812 Adv Testimonial 003

Notice that additional rich-text options available when you click the three dots in the top left corner.

200812 Adv Testimonial 004
200812 Adv Testimonial 004

This is the basic functionality of the block and you can already notice how well-structured it is. However, this way of arranging information suggests a column layout with multiple testimonial blocks.

Remember: people like to get as much information as possible from people who are similar to them (in this case, other customers).


Step #3. Additional Block Configuration

The block has multiple configuration options. You can see them in the right sidebar:

  • Change the column number to 2.
  • Add another testimonial.
200812 Adv Testimonial 005
200812 Adv Testimonial 005
  • Click the Avatar section.
  • Change the border-radius option to 0.
  • Increase the border width to 5px .
  • Change the Avatar size to 130px.
  • Leave the default Avatar position.
200812 Adv Testimonial 006
200812 Adv Testimonial 006

You have additional options to change the color of the background. This is useful with images with a transparent background. The most common image format that supports transparency is png.

200812 Adv Testimonial 007
200812 Adv Testimonial 007
200812 Adv Testimonial 008
200812 Adv Testimonial 008
  • Leave the Text color options at their default setting.
  • Click Publish twice and take a look at the post. 
200812 Adv Testimonial 009
200812 Adv Testimonial 009

Step #4. The Testimonial Slider

Now let's take a look at the slider display for the testimonials:

  • Edit the post.
  • Select the testimonial block.
  • Change the number of columns to 1.
  • Enable the slider Setting.
  • Use the arrows to find and edit testimonials 3 and 4.
  • Leave Items to scroll 1, items to show 1.
  • Open the slider settings and toggle the arrows off.
  • Change the Autoplay speed to 1000ms (1 second).

Notice: by default, the job title option has a CSS rule with the property text-transform: uppercase.

200812 Adv Testimonial 010
200812 Adv Testimonial 010

Once you are done with editing, click Update and view the post. You will see a nicely designed slider for the testimonials of your customers. Or perhaps you can use this for profiles of your employees.


Step #5. The Global Settings

Every block in PublishPress Blocks has individual settings. You can also choose global settings for all the blocks of a particular type.

  • Click PublishPress Blocks in your WordPress admin menu.
  • Go to the Default Blocks Config.
  • Click the cogwheel beside Testimonial.
200812 Adv Testimonial 011
200812 Adv Testimonial 011

You will be presented with the global configuration for all testimonial blocks, that is, in case you want to display a default testimonial block with the same appearance and settings everywhere.

200812 Adv Testimonial 012
200812 Adv Testimonial 012

I hope you liked this tutorial. Thanks for reading! If you liked this feature, you find enjoy other PublishPress Blocks features including the table of contents, accordion block, image slider block, contact form block and count up block.

Tags: , ,


Leave a Reply

Your email address will not be published. Required fields are marked *

Professional publishing plugins for WordPress! Get PublishPress