Responsive Gutenberg Addons
Search…
Responsive Gutenberg Blocks Library
Getting Started
Pattern Importer
Blocks
Testimonial
Testimonials are customer reviews that can be displayed on the site to add credibility. Testimonial block allows you to display a single testimonial block on your site.
How To Add The Testimonial Block
- 1.Open a page or a post and click on the plus icon to add a new block and look for the Testimonial or you can search for it if it doesn’t pop up quickly for you.
- 2.Be default, you'll get the below design-
.png?alt=media&token=aae13852-87b8-447e-b581-dc956271836f)
How To Configure The Testimonial Block
To configure the Testimonial block, switch to the ‘Content’ tab.
General
Number of Team Member Boxes - Increase or decrease the number of cards.
Gutter - Set space between the blocks with this setting.
Cite Alignment - Choose left, center, or right as the alignment of the text.
.png?alt=media&token=af093068-1e3e-4241-b0a5-74e8cbf7d787)
Image
Image Shape - Select the shape of the image as square, circle, or blob.
Size - Select the size of the image as small, medium, large, or full.
Width - Select the width for the image.
.png?alt=media&token=e5a7761f-9552-4ffc-abd4-2077afe76eb5)
How To Style The Testimonial Block
Switch to the ‘Style’ tab to customize every element of the Testimonial block.
Colors and Background
This section offers various color options for Text, Name, Designation, and Background.
.png?alt=media&token=860b17c9-2011-4432-ad46-5c9290c2e1a4)
Gradient Background - Hide or Display Gradient Background. Upon enabling the toggle, you will see the Secondary Background Color option to select the second color for the gradient effect. You can also customize the Gradient Degree.
Background Color Opacity - This allows you to set the opacity of the background color.
Background Image - You can select a background image for the block from here.
Background Position: You can select the position of the background image for the block from here. If you want to show the top left part of the image, select the position as a left top. Similarly, choose the part of the image that you want to display from Left Top, Left Center, Left Bottom, Right Top, Center Bottom, etc.
Background Repeat: You can choose to repeat the image on the x-axis, y-axis, or on both axis.
Background Size: You can select the size of the background image for the block from here.
.png?alt=media&token=741436e7-679c-4ecb-8efd-18fc1616ad64)
Typography
Under the Typography tab, options for font-family, font size, font-weight, line-height and text-transform are available for Content, Name and Title separately.
.png?alt=media&token=b3fb6548-5008-48ea-8a86-44b44975bdfe)
Border
Border - Select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it.
Border Width - Set a width for the border from here.
Border Color - Set color to the border from here.
Border Radius - Set border radius to the box to control corner roundness.
Box Shadow - You can give box-shadow to the block with a number of options available for customization such as color, blur, spread, position, etc.
Hover Box Shadow - This option allows box-shadow on hover to the block with a number of options available for customization such as color, blur, spread, position, etc
.png?alt=media&token=c8aaaf45-07f3-4dca-8127-cc6350d75b47)
Spacing
The Spacing tab offers options to customize the Padding and spacing for Content, Name, Image, and Title.
You can also set responsive padding to the content for Mobile and Tablet view.
.png?alt=media&token=90604588-d661-44de-bdc8-59f47e7187da)
Last modified 9mo ago