內容簡介
這款外掛提供一個高效能的 WordPress 新穎區塊編輯器 (Gutenberg) 搜尋區塊。
這個區塊內置了 10 種評論樣式，可讓您分享人們對您產品和服務的正面評價。
功能
自訂背景圖片
自訂背景顏色
自訂字型大小
自訂字體顏色
自訂邊框顏色 ( 或無邊框 )
自訂引號的顏色
提供 14 種美觀的引號樣式
提供 5 種預設的設置來設定投影陰影
可自訂陰影
提供 5 種預設的設置來設定邊框
可自訂角度及邊框寬度
查看更多：
訪問 BlockHandbook 網站
追蹤 Twitter
主題作者
您可以輕鬆地使用簡易 CSS 變數針對預設的 Turbocharged Testimonial Block 樣式設置進行覆蓋。自訂盒子投影陰影、邊界寬度和邊界角度設置的自訂樣式系統。
若要覆蓋前端樣式，請將自訂設置添加至 style.css 檔案中，如下所示：
[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);
}
若要覆蓋編輯器樣式，請將自訂設置添加至 editor-style.css 檔案中，如下所示：
.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);
}
外掛標籤
開發者團隊
② 後台搜尋「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);
}
