Turbocharged Testimonial Block

Turbocharged Testimonial Block for the new WordPress Block Editor ( Gutenberg ).

This single gutenberg block is packed with 10 terrific testmonial styles for sharing positive things people have to say about your products and services.

Features

• Custom Background Image
• Custom Background Color
• Custom Font Sizing
• Custom Font Colors
• Custom Border Colors ( or no borders at all )
• Custom Quotation Mark Colors
• 14 Beautiful Quotation Mark styles
• 5 Designer Default Settings for Drop Shadows
• Add your own Custom Drop Shadow
• 5 Designer Default Settings for Borders
• Add your own Custom Border Radius & Border Width

Learn more:

• Visit the BlockHandbook website
• Follow on Twitter

Theme Authors

Easily override default Turbocharged Testimonial Block styles with your own styles using super-simple css variables. Add custom style systems for box-shadow, border-width, and border-radius settings.

To override frontend styling, add custom settings to your style.css file like so:

[class*="turbocharged-testimonial-block"] { /* Turbocharged Testimonial Block (ttb) Style Variables */ /* Border Radius */ --ttb-border-radius-sm:2px; --ttb-border-radius-md:4px; --ttb-border-radius-lg:8px; --ttb-border-radius-xl:24px; --ttb-border-radius-2xl:9999px; /* Border Width */ --ttb-border-width-none:0px; --ttb-border-width-sm:1px; --ttb-border-width-md:2px; --ttb-border-width-lg:4px; --ttb-border-width-xl:8px; --ttb-border-width-2xl:16px; /* Box Shadow */ --ttb-box-shadow-sm: 0 1px 3px 0 rgba( var( --ttb-box-shadow-color ), 0.1), 0 1px 2px 0 rgba( var( --ttb-box-shadow-color ), 0.06); --ttb-box-shadow-md:0 4px 6px -1px rgba( var( --ttb-box-shadow-color ), 0.1), 0 2px 4px -1px rgba( var( --ttb-box-shadow-color ), 0.06); --ttb-box-shadow-lg:0 10px 15px -3px rgba( var( --ttb-box-shadow-color ), 0.1), 0 4px 6px -2px rgba( var( --ttb-box-shadow-color ), 0.05); --ttb-box-shadow-xl:0 20px 25px -5px rgba( var( --ttb-box-shadow-color ), 0.1), 0 10px 10px -5px rgba( var( --ttb-box-shadow-color ), 0.04); --ttb-box-shadow-2xl:0 25px 50px -12px rgba( var( --ttb-box-shadow-color ), 0.25); } 

To override editor styling, add custom settings to your editor-style.css file like so:

.editor-styles-wrapper [class*="turbocharged-testimonial-block"] { /* Turbocharged Testimonial Block (ttb) Style Variables */ /* Border Radius */ --ttb-border-radius-sm:2px; --ttb-border-radius-md:4px; --ttb-border-radius-lg:8px; --ttb-border-radius-xl:24px; --ttb-border-radius-2xl:9999px; /* Border Width */ --ttb-border-width-none:0px; --ttb-border-width-sm:1px; --ttb-border-width-md:2px; --ttb-border-width-lg:4px; --ttb-border-width-xl:8px; --ttb-border-width-2xl:16px; /* Box Shadow */ --ttb-box-shadow-sm: 0 1px 3px 0 rgba( var( --ttb-box-shadow-color ), 0.1), 0 1px 2px 0 rgba( var( --ttb-box-shadow-color ), 0.06); --ttb-box-shadow-md:0 4px 6px -1px rgba( var( --ttb-box-shadow-color ), 0.1), 0 2px 4px -1px rgba( var( --ttb-box-shadow-color ), 0.06); --ttb-box-shadow-lg:0 10px 15px -3px rgba( var( --ttb-box-shadow-color ), 0.1), 0 4px 6px -2px rgba( var( --ttb-box-shadow-color ), 0.05); --ttb-box-shadow-xl:0 20px 25px -5px rgba( var( --ttb-box-shadow-color ), 0.1), 0 10px 10px -5px rgba( var( --ttb-box-shadow-color ), 0.04); --ttb-box-shadow-2xl:0 25px 50px -12px rgba( var( --ttb-box-shadow-color ), 0.25); }