ไฮไลท์ปลั๊กอิน Divi: DP ข้อความรับรอง Slider

ข้อความรับรองเป็นหนึ่งในองค์ประกอบที่สำคัญที่สุดของเว็บไซต์ธุรกิจ มีหลายวิธีในการสร้างคำรับรองที่สวยงามด้วย Divi รวมถึงโมดูลข้อความรับรอง โมดูลการนำเสนอ ชุดข้อความและรูปภาพ และอื่นๆ อีกทางเลือกหนึ่งคือการใช้ปลั๊กอินของบุคคลที่สามที่มีการจัดการข้อความรับรองและเค้าโครงในตัว เช่น DP Testimonials Slider

DP Testimonials Slider สร้างประเภทโพสต์แบบกำหนดเองใหม่ที่เรียกว่า jvt_testimonials ช่วยให้คุณสร้างข้อความรับรองในตัวแก้ไข จากนั้นให้โมดูลสามโมดูลเพื่อแสดงข้อความรับรองเหล่านั้น คุณสามารถเลือกที่จะแสดงคำนิยมทั้งหมด จำกัดจำนวนที่แสดง และแสดงหมวดหมู่เฉพาะ แต่ละโมดูลมีเค้าโครงหลายแบบให้เลือก และคุณสามารถจัดรูปแบบได้

มาดูปลั๊กอินกัน

ข้อความรับรอง DP

รายการเมนูใหม่ถูกเพิ่มลงในแดชบอร์ดที่เรียกว่า ข้อความรับรอง การคลิกจะแสดงรายการคำรับรองที่คุณสร้างขึ้น

เลือก เพิ่มคำนิยม แล้วคุณจะเห็นตัวแก้ไขซึ่งคุณสามารถสร้างคำรับรองได้ ประกอบด้วยเนื้อหา หมวดหมู่ รูปภาพ และข้อมูลรับรอง นี่คือตัวแก้ไขที่คุณได้รับ ไม่ว่าคุณจะใช้ Gutenberg หรือ Classic Editor

หมวดหมู่ข้อความรับรอง ทำงานเหมือนกับหมวดหมู่โพสต์ ที่นี่ คุณสามารถสร้างและแก้ไขได้

โมดูลตัวเลื่อนข้อความรับรอง DP

เพิ่มสามโมดูลใน Divi Builder:

DP Testimonial Grid View

DP Testimonial Grid View มีการตั้งค่าให้เลือกเลย์เอาต์จาก 3 ตัวเลือก, กำหนดจำนวนข้อความรับรองที่แสดง, แสดงและกำหนดรูปแบบไอคอนใบเสนอราคา, แสดงรูปภาพ, แสดงลิงค์ใบเสนอราคา, เลือกหมวดหมู่, ปรับสีเลขหน้า, ลิงค์ ฯลฯ

รวมถึงการออกแบบมาตรฐานและการตั้งค่าขั้นสูง CSS ช่วยให้คุณกำหนดเป้าหมายชื่อ ชื่อบริษัท และคำอธิบายได้ แต่ละโมดูลมีการตั้งค่าเหล่านี้

DP Testimonial List View

DP Testimonials List View มี 2 ​​เลย์เอาต์และเพิ่มตัวเลือก Order By ให้คุณสั่งซื้อตามอายุของคำรับรอง ชื่อเรื่อง หรือแบบสุ่ม

DP ข้อความรับรอง Slider

DP Testimonial Slider มี 56 เลย์เอาต์และเพิ่มการควบคุมตัวเลื่อน ประกอบด้วย Order By, เล่นอัตโนมัติ, ความเร็ว, การแบ่งหน้า, หยุดเลื่อนเมื่อเลื่อนเมาส์ และแสดงการจำกัดเนื้อหา

DP Testimonials Grid ดูตัวอย่าง

นี่คือเค้าโครง 1 แสดงข้อความรับรอง 3 รายการ มันสร้างภาพวงกลมและแสดงข้อความรับรองแต่ละรายการในการ์ดที่มีเอฟเฟกต์เงา ฉันทิ้งทุกอย่างไว้ที่การตั้งค่าเริ่มต้น

ในตัวอย่างนี้ ฉันกำลังทำงานกับเลย์เอาต์ 2 โดยเพิ่มพื้นหลังด้วยการไล่ระดับสี ฉันปล่อยให้สิ่งนี้เป็นค่าเริ่มต้น และฉันได้ปรับสีข้อความ ขนาด และน้ำหนัก และสีของไอคอน ฉันยังตั้งค่าให้แสดงข้อความรับรองตามลำดับแบบสุ่ม

ในมุมมองที่เผยแพร่ รูปภาพจะเป็นแบบวงกลมและซ้อนทับกล่องที่มีข้อความรับรอง รูปภาพจะหมุนเมื่อคุณวางเมาส์เหนือรูปภาพ ดังที่คุณเห็นที่นี่

DP Testimonials List ดูตัวอย่าง

นี่คือเค้าโครง 1 สำหรับ มุมมองรายการ ฉันทิ้งทุกอย่างไว้ที่การตั้งค่าเริ่มต้น

เลย์เอาต์ 2 ลดขนาดของรูปภาพและเพิ่มการออกแบบกล่องที่หรูหราด้วยมุมวงกลมสองมุม มันแสดงผลเงาเมื่อโฮเวอร์

ตัวอย่าง Slider คำรับรอง DP

สำหรับตัวเลื่อน ฉันต้องใช้ Classic Divi Builder โมดูลนี้ไม่ปรากฏเมื่อใช้ Divi Builder ใหม่หรือ Visual Builder ไม่เหมือนกับอีกสองโมดูลอื่นๆ มี 54 เค้าโครง แทนที่จะดูทั้งหมด เราจะดูบางส่วน

นี่คือเลย์เอาต์ 1 มันสร้างภาพวงกลมและไม่รวมการนำทางสำหรับสไลด์ คุณสามารถปรับสีของสัญลักษณ์แสดงหัวข้อย่อย

นี่คือเลย์เอาต์ 2 ฉันเพิ่มเงาของกล่องเพื่อให้มันโดดเด่นกว่าพื้นหลังและจำกัดข้อความไว้ที่ 50 อักขระ สไตล์เป็นค่าเริ่มต้น

นี่คือเลย์เอาต์ 3 มันลบภาพ ฉันรวมเงาของกล่องและจำนวนอักขระสูงสุดจากตัวอย่างก่อนหน้านี้

นี่คือเค้าโครง 4 โดยใช้การตั้งค่าเริ่มต้น ฉันจะดูว่าฉันสามารถทำอะไรกับสไตล์

เมื่อคุณเลือกเลย์เอาต์ ตัวเลือกการจัดสไตล์ของเลย์เอาต์นั้นจะแสดงในการตั้งค่าสี คุณสามารถเลือกเลย์เอาต์อื่น ปรับการตั้งค่า และกลับไปที่เลย์เอาต์ใดก็ได้และการตั้งค่าของเลย์เอาต์นั้นยังคงอยู่

ฉันเพิ่มพื้นหลังเพื่อให้สีดูโดดเด่นขึ้นเล็กน้อย

นี่คือเลย์เอาต์ 5 ฉันเพิ่มพื้นหลังสีเทาเล็กน้อยลงในส่วนและตัวเลื่อนใช้พื้นหลังนั้น

นี่คือเค้าโครง 6 ซึ่งแสดงข้อความรับรองสองรายการต่อสไลด์

นี่คือเค้าโครง 7 ฉันกำลังแสดงข้อความรับรองฉบับสมบูรณ์ ฉันชอบภาพที่ซ้อนทับกล่องรับรอง

นี่คือเค้าโครง 8 ฉันชอบการออกแบบนี้

นี่คือเลย์เอาต์ 9 ซึ่งคล้ายกับ 8 ในเลย์เอาต์ แต่มีคิวการออกแบบของตัวเอง

นี่คือเลย์เอาต์ 10 ซึ่งสร้างกล่องที่สวยงามรอบๆ ผู้เขียนและเพิ่มเครื่องหมายคำพูดสองชุด

สำหรับชุดนี้ ฉันใช้เค้าโครงสองคอลัมน์เพื่อแสดงสองโมดูล ด้านซ้ายคือ Layout 11 และด้านขวาคือ Layout 12 Layout 11 เพิ่มการนำทางแบบมาตรฐาน

นี่คือเค้าโครง 14 นอกจากนี้ยังมีปุ่มนำทางสำหรับโพสต์

นี่คือเค้าโครงแบบสองคอลัมน์อื่นที่มี Layout 53 ทางด้านซ้ายและ Layout 54 ทางด้านขวา เลย์เอาต์ 54 มีแอนิเมชั่นที่น่าสนใจสำหรับตัวเลื่อน - สไลด์จะย่อขนาด เลื่อนไปด้านข้างอย่างรวดเร็วในขณะที่อีกอันเข้ามาแทนที่ และสไลด์ใหม่จะขยายจนเต็มพื้นที่

นี่คือเลย์เอาต์ 55 เพิ่มสไตล์มุมและสร้างแบนเนอร์สำหรับชื่อ ฉันชอบการใช้สี อันนี้มีแอนิเมชั่นเดียวกันกับ Layout 54

นี่คือเลย์เอาต์ 56 มันลบรูปภาพและสร้างกล่องที่สวยงามพร้อมแบนเนอร์สำหรับชื่อ

การรวมแบบฟอร์ม Caldera

ไซต์ของผู้จัดพิมพ์มีเทมเพลตสำหรับแบบฟอร์ม Caldera เพื่อสร้างแบบฟอร์มการส่งคำรับรอง รวมอยู่ในเอกสารที่ดาวน์โหลดได้และมีคำแนะนำในการใช้งาน

เมื่อใช้แบบฟอร์มนี้ ทุกคนสามารถส่งคำรับรองผ่านแบบฟอร์มและจะบันทึกเป็นฉบับร่างเพื่อให้คุณตรวจสอบได้ นอกจากนี้ยังส่งอีเมลถึงผู้ดูแลระบบพร้อมข้อมูลทั้งหมด

ใบอนุญาตและเอกสารประกอบ

DP Testimonials Slider มีอยู่ในเว็บไซต์ของผู้พัฒนา มีใบอนุญาตสามใบ:

• 1 ไซต์ – $30
• 5 ไซต์ – $40
• ไม่จำกัดไซต์ – $50

เอกสารประกอบเป็นไฟล์ที่สามารถดาวน์โหลดได้ในหน้าการขายของปลั๊กอิน ประกอบด้วยคำแนะนำในการใช้ปลั๊กอิน คำแนะนำในการใช้งานกับแบบฟอร์ม Caldera และเทมเพลต Caldera Forms

จบความคิด

DP Testimonials Slider สร้างคำรับรองที่หรูหรา การสร้างคำรับรองและการใช้ทั้งสามโมดูลนั้นใช้งานง่าย โมดูลกริดและมุมมองรายการทำงานได้ดีในตัวแก้ไขแบ็กเอนด์ใหม่ สำหรับโมดูลตัวเลื่อน ฉันต้องใช้ตัวสร้างแบบคลาสสิก ปลั๊กอินทั้งสามทำงานได้ดีในตัวสร้างแบบคลาสสิก ดังนั้นหากคุณมีสิทธิ์เข้าถึง นั่นคือสิ่งที่ผมแนะนำจนกว่าจะเพิ่มฟีเจอร์ส่วนหน้าลงในโมดูลตัวเลื่อน

แม้แต่การใช้เทมเพลต Caldera Forms ก็ทำได้อย่างง่ายดาย ฉันเพิ่งนำเข้าไฟล์ JSON และใช้งานได้ในการลองครั้งแรก

ปัญหาเดียวที่ฉันมีคือการได้รับพื้นหลังเพื่อแสดงในโมดูล พื้นหลังของส่วนและแถวแสดงพร้อมข้อความรับรองโดยไม่มีปัญหา นอกจากนี้ยังไม่ชัดเจนว่าจะใช้ลิงก์โซเชียลใดในคำรับรอง พวกเขายังไม่แสดงในการสาธิตบนเว็บไซต์ของผู้จัดพิมพ์

ฉันประทับใจกับจำนวนเลย์เอาต์ของโมดูลตัวเลื่อนที่มี ฉันยังชอบแอนิเมชั่นของพวกเขา สไลด์จากด้านข้างจำนวนมาก แต่มีแอนิเมชั่นการเลื่อนอื่นๆ มากมาย รวมทั้งจากบนลงล่าง การย่อขนาด การขยาย ฯลฯ การอัปเดตที่จะมาถึงจะเพิ่มวิดเจ็ตและรหัสย่อ

หากคุณสนใจที่จะจัดการคำรับรองของคุณและแสดงด้วยโมดูล DP Testimonials Slider ก็คุ้มค่าที่จะดู

เราต้องการได้ยินจากคุณ คุณลองใช้ DP Testimonials Slider แล้วหรือยัง? แจ้งให้เราทราบเกี่ยวกับประสบการณ์ของคุณในความคิดเห็น

ภาพเด่นผ่าน Blan-k / shutterstock.com