Divi: วิธีสร้างส่วนคำรับรองในรูปแบบของกริด

คุณต้องการสร้างส่วนคำรับรองในรูปแบบของกริด บนหน้าเว็บของคุณด้วยโมดูลคำรับรองของ Divi ?

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

ในบทความนี้เราจะมาดูวิธีการจัดเรียงคำรับรองในรูปแบบของตารางด้วยโมดูล Testimonials de Divi. เราจะเห็นเค้าโครงที่แตกต่างกันสองแบบ ดังนั้นคุณสามารถเลือกรูปแบบที่ตรงกับความต้องการของคุณมากที่สุด

ขอเริ่มต้น!

การสำรวจ

นี่คือภาพรวมของสิ่งที่เราจะทำในบทช่วยสอนนี้

เค้าโครงกริด

การจัดทางเลือก

ออกแบบเลย์เอาต์แรกด้วย Divi

เราจะแสดงรายละเอียดของทั้งสองเลย์เอาต์ แต่เลย์เอาต์ที่สองจะใช้โมดูลจากอันแรก

สร้างไลน์

ขั้นแรก สร้างแถวใหม่แล้วเลือก a เค้าโครง 3 คอลัมน์.

จากนั้นเปิด พารามิเตอร์เส้น โดยคลิกที่ไอคอนรูปเฟือง

เลือกแท็บ ออกแบบ และเปิดใช้งาน ใช้รางน้ำแบบกำหนดเอง Withdh และตั้งค่าเป็น 1

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

จากนั้นเลื่อนลงไปที่ การเว้นวรรค และเปลี่ยนการตั้งค่าระยะห่างดังนี้ ปิดแถว. เราจะสร้างแถวที่สอง แต่เราจะสร้างแถวนี้ให้เสร็จก่อนแล้วจึงโคลน

• ช่องว่างภายใน (บนและล่าง): 0px

เพิ่มโมดูล “คำรับรอง”

แล้วเติม โมดูลรับรอง ในคอลัมน์ด้านซ้าย

การตั้งค่าเนื้อหาโมดูล

จากนั้นเพิ่ม เนื้อหา ของประจักษ์พยาน. รวมถึงชื่อผู้เขียน ตำแหน่งงาน ชื่อบริษัท เนื้อหา ของร่างกายและรูปถ่ายของผู้ให้การเป็นพยาน

• ผู้เขียน : ชื่อผู้แต่ง
• ตำแหน่งงาน: ตำแหน่งที่ถือในบริษัท
• บริษัท: ชื่อบริษัท
• เนื้อหาในร่างกาย: คำรับรอง
• ภาพ: ภาพที่เลือก

พารามิเตอร์การออกแบบโมดูล

จากนั้นเลือกแท็บ ออกแบบ.

ไอคอนใบเสนอราคา

เปลี่ยนการตั้งค่าไอคอน สีไอคอนจะถูกใช้สำหรับชื่อของบุคคลนั้นด้วย มันจะเหมือนกันสำหรับทุกโมดูล

• อ้างไอคอนสี: #fd335a
• อ้างไอคอนสีพื้นหลัง: #ffffff

ภาพ

จากนั้นเลื่อนลงไปที่ ภาพ และเปลี่ยนการตั้งค่าต่อไปนี้:

• ความกว้างของขอบภาพ: 4 พิกเซล
• สีของเส้นขอบรูปภาพ: #000645

เนื้อความ

จากนั้นเลื่อนลงไปที่ เนื้อความ และเปลี่ยนฟอนต์

• แบบอักษรของร่างกาย: Roboto Mono

ผู้เขียนข้อความ

จากนั้นเลื่อนลงไปที่ ผู้เขียนข้อความ.

• แบบอักษรผู้แต่ง : Oswald
• น้ำหนักแบบอักษร: กึ่งหนา
• รูปแบบตัวอักษร: TT
• สีข้อความ: #fd335a

ข้อความตำแหน่ง

จากนั้นเลื่อนลงไปที่ ข้อความตำแหน่ง (ตำแหน่งงาน) และเปลี่ยนแบบอักษร

• แบบอักษรของตำแหน่ง: Roboto Mono

ข้อความบริษัท

จากนั้นเลื่อนลงไปที่ ข้อความบริษัท และเปลี่ยนฟอนต์ด้วย

• แบบอักษรของบริษัท: Roboto Mono

ชายแดน

สุดท้ายเลื่อนลงไปที่ ชายแดน และแก้ไขเส้นขอบดังนี้

• ความกว้างของเส้นขอบ: 24px
• สีเส้นขอบ: #000645

ทำซ้ำโมดูลข้อความรับรอง

แล้วก็ ทำซ้ำโมดูลสองครั้ง แล้วลากโมดูลที่โคลนทั้งสองไปยังคอลัมน์อื่นในแถว

ปรับแต่งโมดูลข้อความรับรองที่สอง

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

ภาพ

จากนั้นเลือกแท็บ ต้องการ และเลื่อนไปที่ ภาพ. เปลี่ยนสีขอบ.

• สีของเส้นขอบรูปภาพ: #acf8f5

ชายแดน

สุดท้ายเลื่อนลงไปที่ ชายแดน และเปลี่ยนสี

• สีเส้นขอบ: #acf8f5

ปรับแต่ง Testimonial Module ที่สาม

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

ภาพ

จากนั้นไปที่แท็บ ออกแบบ, เลื่อนไปที่ ภาพ และเปลี่ยนสีขอบ

• สีของเส้นขอบรูปภาพ: #fccaa0

ชายแดน

สุดท้ายเลื่อนลงไปที่ ชายแดน และเปลี่ยนสีขอบให้เข้ากับขอบภาพ ปิดการตั้งค่าโมดูล

• สีเส้นขอบ: #fccaa0

สายซ้ำ

แล้วก็ ทำซ้ำบรรทัด โดยคลิกที่ตัวเลือกซ้ำที่ปรากฏขึ้นเมื่อคุณวางเมาส์เหนือเส้น เนื่องจากเราเพิ่ม 0px ในช่องด้านบนและด้านล่าง บรรทัดใหม่นี้จะแตะบรรทัดด้านบนโดยอัตโนมัติ เราจะเปิดแต่ละโมดูลในส่วนที่สองเพื่อเปลี่ยนเนื้อหาและสี

ปรับแต่งโมดูลคำรับรองที่สี่

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

ภาพ

จากนั้นเลื่อนลงไปที่ ภาพ และเปลี่ยนสีขอบเป็น #6eea9d

• สีของเส้นขอบรูปภาพ: #6eea9d

ชายแดน

สุดท้ายเลื่อนลงไปที่ ชายแดน และเปลี่ยนสีเส้นขอบเป็น #6eea9d เพื่อให้ตรงกับเส้นขอบของรูปภาพ ปิดการตั้งค่าโมดูล

• สีเส้นขอบ: #6eea9d

ปรับแต่งโมดูลคำรับรองที่ห้า

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

ภาพ

จากนั้นเลื่อนลงไปที่ ภาพ และเปลี่ยนสีขอบเป็น #fff67f

• สีของเส้นขอบรูปภาพ: #fff67f

ชายแดน

สุดท้ายเลื่อนลงไปที่ ชายแดน และเปลี่ยนสีขอบให้เข้ากับขอบภาพ ปิดการตั้งค่าโมดูล

• สีเส้นขอบ: #fff67f

ปรับแต่งโมดูลคำรับรองที่หก

สุดท้าย เปิด การตั้งค่า ของโมดูลคำรับรองที่หกและแทนที่เนื้อหา

ภาพ

จากนั้นเลื่อนลงไปที่ ภาพ และเปลี่ยนสีขอบเป็น #593a94

• สีของภาพเส้นขอบ: #593a94

ชายแดน

สุดท้ายเลื่อนลงไปที่ ชายแดน และเปลี่ยนสีให้เข้ากับเส้นขอบของภาพ ปิดการตั้งค่าโมดูล

• สีขอบ: #593a94

ผล

นี่คือผลลัพธ์ที่เรามีจนถึงตอนนี้

การออกแบบเลย์เอาต์ที่สองด้วย Divi

ตารางคำรับรองที่เราสร้างขึ้นนั้นใช้งานได้ดีหากข้อความรับรองมีขนาดใกล้เคียงกัน 

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

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

สร้างบรรทัดสำรอง

ครั้งแรก เพิ่มแถวเป็น 2 คอลัมน์ ด้วย คอลัมน์ 1/3 ไปทางซ้ายและ a คอลัมน์ 2/3 ด้านขวา

จากนั้นเปิดการตั้งค่าบรรทัดไปที่แท็บของ ออกแบบ, เลื่อนไปที่ การกำหนดขนาด และเลือก ใช้ความกว้างของรางน้ำแบบกำหนดเอง. เปลี่ยนความกว้างของรางน้ำเป็น 1

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

จากนั้นเลื่อนลงไปที่ การเว้นวรรค.

• ช่องว่างภายใน (บนและล่าง): 0px

แล้ว ทำซ้ำ ไลน์.

เลือกตัวเลือก เค้าโครงแถวที่สองและเลือกเค้าโครงด้วย เหลือ 2/3 et 1/3 ขวา.

เพิ่มสี่โมดูลข้อความรับรอง

enfin, สร้างหรือลากโมดูลข้อความรับรองของคุณ ไปที่เส้น เรากำลังใช้โมดูลเดียวกันกับในตัวอย่างก่อนหน้านี้ แต่เนื้อหามีการเปลี่ยนแปลงเพื่อสร้างขนาดต่างๆ

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

เปิดการตั้งค่าของโมดูลแรกและไปที่แท็บ ออกแบบ. เลื่อนไปที่ การกำหนดขนาด และป้อน 100% สำหรับ "ความสูง" 

ทำซ้ำสำหรับแต่ละโมดูล .

• ส่วนสูง: 100%

ผลสุดท้าย

เค้าโครงกริด

ต่อไปนี้คือรูปลักษณ์ของเค้าโครงกริดของเรา วิธีนี้ใช้ได้ผลดีหากข้อความรับรองมีขนาดเท่ากัน

การจัดทางเลือก

นี่คือรูปแบบอื่น เหมาะอย่างยิ่งสำหรับการรับรองขนาดต่างๆ

ดาวน์โหลด DIVI ทันที!!!

สรุป

นี่คือรูปลักษณ์ของเราในการสร้างส่วนคำรับรองในรูปแบบกริดด้วยโมดูล Testimonials ของดีวี การตั้งค่าแถวและโมดูลของ Divi ทำงานร่วมกันอย่างสมบูรณ์แบบเพื่อสร้างตารางที่มีหลายแถวและหลายคอลัมน์ 

ตัวอย่างที่เราได้แสดงไว้ที่นี่สามารถขยายได้อย่างง่ายดายเพื่อสร้างกริดที่ใหญ่ขึ้น แนวคิดยังใช้งานได้กับโมดูล Divi ประเภทอื่นๆ

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

ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณ

อย่าลังเลที่จะปรึกษาคำแนะนำของเราเกี่ยวกับ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...