How to Add Testimonials in a Gutenberg Block
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.
A testimonial template will display.
- Click on the placeholder avatar and select a new image.
- Add an “Alt” text.
- Click Select.
- Add a job title and testimonial text.
Notice that additional rich-text options available when you click the three dots in the top left corner.
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.
- 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.
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.
- Leave the Text color options at their default setting.
- Click Publish twice and take a look at the post.
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.
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.
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.
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.