5 วิธีที่ยอดเยี่ยมที่คุณสามารถกำหนดสไตล์โมดูลรับรองของ Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์สุดท้ายเกี่ยวกับขนาดหน้าจอต่างๆ

เดสก์ทอป

มือถือ

สร้างตัวอย่างใหม่ #1

สมัครสมาชิกช่อง Youtube ของเรา

เพิ่มมาตราใหม่

มาเริ่มกันที่ตัวอย่างแรกกันเลย! สร้างหน้าใหม่และเพิ่มส่วนปกติ

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

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

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

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

อัพโหลดภาพ

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

ตัวกรอง

จากนั้นไปที่การตั้งค่าตัวกรองและเล่นกับเอฟเฟกต์ต่างๆ

• ความอิ่มตัว: 40%
• ความคมชัด: 126%

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 1

เพิ่มสำเนา

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

การตั้งค่าปุ่ม

จากนั้นไปที่การตั้งค่าปุ่มและทำการเปลี่ยนแปลงรูปลักษณ์ของปุ่ม

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 14px
• สี 1: #5400ff
• สี 2: #00fff6
• ทิศทางการไล่ระดับสี: 100deg
• ความกว้างของขอบปุ่ม: 0px
• น้ำหนักแบบอักษร: Ultra Bold
• รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่

ระยะห่าง

เพิ่มค่าการเว้นวรรคแบบกำหนดเองด้วย

• ช่องว่างภายในด้านบน: 10px
• ช่องว่างภายในด้านล่าง: 10px
• ช่องว่างภายในด้านซ้าย: 30px
• ช่องว่างภายในด้านขวา: 30px

กล่องเงา

และปิดท้ายด้วยอายแชโดว์แบบบาง

• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.3)

เพิ่มโมดูลข้อความรับรองในคอลัมน์ 2

เพิ่มเนื้อหา

ในคอลัมน์ที่สอง โมดูลเดียวที่เราต้องการคือ Testimonial Module เพิ่มเนื้อหาลงในฟิลด์ต่างๆ และกล่องเนื้อหา

สีพื้นหลัง

ถัดไป เพิ่มสีพื้นหลังโปร่งใสเล็กน้อย

• สีพื้นหลัง: rgba(255,255,255,0.96)

การตั้งค่าไอคอนอ้าง

เปลี่ยนการตั้งค่าไอคอนใบเสนอราคาด้วย

• อ้างไอคอนสี: #0c0c0c
• อ้างไอคอนสีพื้นหลัง: rgba(245,245,245,0)

การตั้งค่าข้อความเนื้อหา

จากนั้น แก้ไขการตั้งค่าข้อความเนื้อหา

• แบบอักษรของร่างกาย: Verdana
• ความสูงของเส้นร่างกาย: 1.7em

ระยะห่าง

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

• ขอบบน: 15vw (เดสก์ท็อปและแท็บเล็ต), 0vw (โทรศัพท์)
• ขอบล่าง: 50px (แท็บเล็ตและโทรศัพท์)
• ระยะขอบซ้าย: -10vw (เดสก์ท็อปและแท็บเล็ต), 0vw (โทรศัพท์)
• ระยะขอบขวา: 5vw
• ช่องว่างภายในด้านบน: 70px
• ช่องว่างภายในด้านล่าง: 70px
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

ชายแดน

เพิ่มเส้นขอบด้านซ้ายด้วย

• ความกว้างของเส้นขอบด้านซ้าย: 7px
• ขอบซ้ายสี: #5400ff

กล่องเงา

สุดท้าย เพิ่มเงาของกล่องที่ละเอียดอ่อนเพื่อกำหนดรูปร่างของ Testimonial Module

• ความแรงของกล่องเงาเบลอ: 80px
• ความแรงของการกระจายเงาของกล่อง: -10px
• เงาสี: rgba(0,0,0,0.49)

โคลนทั้งสองโมดูล & วางรายการที่ซ้ำกันในคอลัมน์ 3 & 4

เมื่อคุณแก้ไขโมดูลในคอลัมน์ 1 และ 2 เสร็จแล้ว คุณสามารถโคลนโมดูลและวางโมดูลที่ซ้ำกันในสองคอลัมน์ที่เหลือ

เปลี่ยนภาพ

อย่าลืมเปลี่ยนภาพรับรองที่สองของคุณ

เปลี่ยนพื้นหลังการไล่ระดับสีของปุ่ม

เปลี่ยนพื้นหลังการไล่ระดับสีของปุ่มด้วย

• สี 1: #ff001d
• สี 2: #3700ff
• ทิศทางการไล่ระดับสี: 100deg

เปลี่ยนสีขอบคำรับรอง

และจับคู่สีเส้นขอบกับพื้นหลังแบบไล่ระดับปุ่มใหม่

• สีขอบซ้าย: #ff001d

สร้างตัวอย่างใหม่ #2

เพิ่มมาตราใหม่

สู่ตัวอย่างที่สอง! เพิ่มส่วนปกติใหม่ในหน้าของคุณ

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

โดยไม่ต้องเปลี่ยนแปลงส่วนใด ๆ ให้เพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

ดำเนินการต่อโดยเปิดการตั้งค่าแถวและทำการเปลี่ยนแปลงการตั้งค่าการปรับขนาด

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

ระยะห่าง

ถัดไป ให้เพิ่มค่าการเติมที่กำหนดเองลงในแถวและคอลัมน์

• ช่องว่างภายในด้านซ้าย: 200px (เดสก์ท็อป), 30px (แท็บเล็ต), 25px (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 200px (เดสก์ท็อป), 30px (แท็บเล็ต), 25px (โทรศัพท์)
• คอลัมน์ 1 ช่องว่างภายในด้านซ้าย: 5px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ที่ 1 ด้านขวา: 2.5px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ที่ 2 ช่องว่างภายในด้านซ้าย: 2.5px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ที่ 2 ด้านขวา: 2.5px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ 3 ช่องว่างภายในด้านซ้าย: 2.5px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ 3 ช่องว่างภายในด้านขวา: 5px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)

เพิ่มโมดูลวิดีโอลงในคอลัมน์ 1

ลิงค์วิดีโอ

โมดูลแรกที่เราต้องการในคอลัมน์ 1 คือโมดูลวิดีโอ เชื่อมโยงวิดีโอนี้กับวิดีโอรับรองของคุณ

ภาพซ้อนทับ

เพิ่มการซ้อนทับรูปภาพด้วย

เพิ่มโมดูลข้อความรับรองในคอลัมน์ 1

เพิ่มเนื้อหา

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

ปิดการใช้งานไอคอนใบเสนอราคา

จากนั้นปิดใช้งานไอคอนใบเสนอราคาในการตั้งค่าองค์ประกอบ

• แสดงไอคอนใบเสนอราคา: ไม่

สีพื้นหลัง

เพิ่มพื้นหลังสีขาวต่อไป

• สีพื้นหลัง: #ffffff

การตั้งค่าข้อความเนื้อหา

แก้ไขการตั้งค่าข้อความเนื้อหาด้วย

• สีข้อความ: #000000
• ระยะห่างระหว่างตัวอักษร: -0.5px
• ความสูงของเส้นร่างกาย: 1.7em

ระยะห่าง

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

• ขอบล่าง: 30px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านบน: 50px
• ช่องว่างภายในด้านล่าง: 50px
• ช่องว่างภายในด้านซ้าย: 80px
• ช่องว่างภายในด้านขวา: 80px

ชายแดน

นอกจากนี้เรายังให้โมดูลมุมล่างซ้ายและขวา '30px'

กล่องเงา

และสุดท้าย เพื่อสร้างความลึก เรากำลังให้เงาของกล่องข้อความรับรองโมดูล

• ความแรงของกล่องเงาเบลอ: 80px
• ความแรงของการกระจายเงาของกล่อง: -10px
• เงาสี: rgba(0,0,0,0.3)

โคลนโมดูลสามครั้ง & วางซ้ำในคอลัมน์ที่เหลือ

เมื่อคุณแก้ไขทั้งสองโมดูลในคอลัมน์ 1 เสร็จแล้ว ให้ทำการโคลนสองครั้งแล้ววางรายการที่ซ้ำกันในสองคอลัมน์ที่เหลือ

เปลี่ยนลิงค์วิดีโอ เนื้อหา & ภาพซ้อนทับ

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

สร้างตัวอย่างใหม่ #3

เพิ่มมาตราใหม่

ต่อตัวอย่างที่สาม! เพิ่มส่วนปกติใหม่ในหน้าของคุณ

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

คอลัมน์ 1 สีพื้นหลัง

จากนั้นไปที่การตั้งค่าพื้นหลังและเพิ่มสีพื้นหลังให้กับคอลัมน์แรก

• คอลัมน์ 1 สีพื้นหลัง: #f9f9f9

คอลัมน์ 2 สีพื้นหลัง

คอลัมน์ที่สองจะต้องมีสีพื้นหลังสีขาว

• คอลัมน์ 2 สีพื้นหลัง: #ffffff

ขนาด

จากนั้นไปที่การตั้งค่าการปรับขนาดและลบความกว้างของรางน้ำ

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

ระยะห่าง

เพิ่มค่าการเว้นวรรคที่กำหนดเองต่อไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px
• ช่องว่างภายในด้านซ้าย: 0px
• ช่องว่างภายในด้านขวา: 0px
• คอลัมน์ 1 ช่องว่างภายในด้านบน: 100px
• ช่องว่างภายในคอลัมน์ 1 ด้านล่าง: 100px
• คอลัมน์ 1 ช่องว่างภายในด้านซ้าย: 50px
• คอลัมน์ 1 ช่องว่างภายในด้านขวา: 50px
• คอลัมน์ที่ 2 ช่องว่างภายในด้านบน: 100px
• คอลัมน์ที่ 2 ช่องว่างภายใน: 100px
• คอลัมน์ 2 ช่องว่างภายในด้านซ้าย: 50px
• คอลัมน์ 2 ช่องว่างภายในด้านขวา: 50px

ชายแดน

และให้เส้นขอบแต่ละอัน '20px'

กล่องเงา

สุดท้ายแต่ไม่ท้ายสุด ให้เงาของกล่องแถวของคุณ

• ความแรงของกล่องเงาเบลอ: 80px

เพิ่มโมดูลข้อความรับรองในคอลัมน์ 1

เพิ่มเนื้อหา

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! โมดูลแรกที่เราจะต้องมีในคอลัมน์ 1 คือ Testimonial Module เพิ่มเนื้อหา

อัพโหลดภาพ

ดำเนินการต่อโดยอัปโหลดรูปภาพในการตั้งค่ารูปภาพ

ปิดการใช้งานไอคอนใบเสนอราคา

ถัดไป ปิดใช้งานไอคอนใบเสนอราคา

• แสดงไอคอนใบเสนอราคา: ไม่

ปิดการใช้งานสีพื้นหลัง

ปิดสีพื้นหลังด้วย

• ใช้สีพื้นหลัง: ไม่

การตั้งค่าข้อความเนื้อหา

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

• แบบอักษรของร่างกาย: Abril Fatface
• สีข้อความ: #000000
• ขนาดข้อความ: 20px

เพิ่มโมดูลข้อความลงในคอลัมน์ 1

เพิ่มเนื้อหา

โมดูลที่สองที่เราต้องการในคอลัมน์ 1 คือโมดูลข้อความ เพิ่มข้อความรับรองในกล่องเนื้อหา

ระยะห่าง

จากนั้นไปที่แท็บการออกแบบและเพิ่มระยะขอบบนและล่างแบบกำหนดเอง

• ขอบบน: 50px
• ขอบล่าง: 50px

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

อัพโหลดโลโก้บริษัท

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

โคลนโมดูลทั้งหมด & วางรายการที่ซ้ำกันในคอลัมน์ 2

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

เปลี่ยนรูปภาพรับรอง & คัดลอก

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนเนื้อหาของข้อความรับรองพร้อมกับรูปภาพ

สร้างตัวอย่างใหม่ #4

เพิ่มมาตราใหม่

ต่อตัวอย่างที่สี่! เพิ่มส่วนใหม่ในหน้าของคุณ

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่ในส่วนของคุณโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

คอลัมน์ 1 ภาพพื้นหลัง

เปิดการตั้งค่าแถวและเพิ่มรูปภาพพื้นหลังในคอลัมน์แรก

• คอลัมน์ 1 เล่นภาพพื้นหลังซ้ำ: ไม่เล่นซ้ำ

คอลัมน์ 3 ภาพพื้นหลัง

ทำเช่นเดียวกันสำหรับคอลัมน์ที่สาม

• ทำซ้ำภาพพื้นหลังของคอลัมน์ 3: ไม่เล่นซ้ำ

ขนาด

จากนั้นไปที่การตั้งค่าการปรับขนาดและทำการเปลี่ยนแปลงบางอย่าง

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มโมดูลข้อความรับรองในคอลัมน์ 1

เพิ่มเนื้อหา

ดำเนินการต่อโดยเพิ่ม Testimonial Module ลงในคอลัมน์แรก เมื่อคุณทำเสร็จแล้ว ให้เพิ่มรายละเอียดคำรับรอง

พื้นหลังไล่โทนสี

ให้พื้นหลังไล่ระดับสีแก่โมดูลด้วย

• สี 1: #8b32ff
• สี 2: #ff35ae
• ทิศทางการไล่ระดับสี: 120deg

การตั้งค่าไอคอนอ้าง

จากนั้นทำการเปลี่ยนแปลงการตั้งค่าไอคอน

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

การตั้งค่าข้อความ

และเปลี่ยนสีข้อความในการตั้งค่าข้อความ

• สีข้อความ: เบา

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 100px
• ช่องว่างภายในด้านล่าง: 100px
• ช่องว่างภายในด้านซ้าย: 100px
• ช่องว่างภายในด้านขวา: 100px

กล่องเงา

คุณจะต้องเพิ่มความลึกให้กับข้อความรับรองโดยใช้เงากล่องที่ละเอียดอ่อน

• ความแรงของกล่องเงาเบลอ: 80px
• ความแรงของการกระจายเงาของกล่อง: -10px
• Shadow Color: #ff35ae

ตัวกรองเริ่มต้น

แนวคิดเบื้องหลังข้อความรับรองนี้คือเมื่อคุณวางเมาส์เหนือข้อความรับรองจะหายไปและรูปภาพจะปรากฏขึ้น เพื่อให้บรรลุผลนี้ เราจะใช้ตัวกรองความทึบในการตั้งค่าตัวกรอง ตรวจสอบให้แน่ใจว่าความทึบเริ่มต้นคือ '100%'

• ความทึบ: 100%

ตัวกรองโฮเวอร์

และลบความทึบทั้งหมดเมื่อวางเมาส์ไว้

• ความทึบ: 0%

โคลนข้อความรับรองไปยังคอลัมน์ 3

เมื่อคุณแก้ไข Testimonial Module ในคอลัมน์ 1 เสร็จแล้ว ให้โคลนและใส่สำเนาในคอลัมน์ที่สาม

เปลี่ยนพื้นหลังไล่ระดับ

เปลี่ยนพื้นหลังไล่ระดับสีของรายการที่ซ้ำกันต่อไป

• สี 1: #32b0ff
• สี 2: #89009e
• ทิศทางการไล่ระดับสี: 120deg

โคลนโรว์

และโคลนทั้งแถว

ลบพื้นหลังไล่โทนสีรับรอง & เปลี่ยนสีพื้นหลัง

สิ่งต่อไปที่คุณต้องทำคือลบพื้นหลังไล่ระดับของ Testimonial Modules และใช้สีพื้นหลังสีขาวแทน

• สีพื้นหลัง: #ffffff

เปลี่ยนการตั้งค่าข้อความรับรอง

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

• สีข้อความ: Dark

สร้างตัวอย่างใหม่ #5

เพิ่มมาตราใหม่

ไปยังตัวอย่างถัดไปและสุดท้ายของบทช่วยสอนนี้! เพิ่มส่วนปกติใหม่ในหน้าของคุณ

สีพื้นหลัง

เปลี่ยนสีพื้นหลังของส่วน

• สีพื้นหลัง: #ededed

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

จากนั้น เพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

ทำการเปลี่ยนแปลงการตั้งค่าการปรับขนาดด้วย

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 2

เพิ่มโมดูลข้อความลงในคอลัมน์ 1

เพิ่มเนื้อหา

ดำเนินการต่อโดยเพิ่มโมดูลข้อความลงในคอลัมน์แรก เพิ่มข้อความรับรองในกล่องเนื้อหา

สีพื้นหลัง

และเปลี่ยนสีพื้นหลังของโมดูล

• สีพื้นหลัง: #ffffff

การตั้งค่าข้อความ

จากนั้นไปที่แท็บออกแบบและเปลี่ยนการวางแนวข้อความในการตั้งค่าข้อความ

• การวางแนวข้อความ: ศูนย์

ระยะห่าง

เพิ่มค่าระยะขอบที่กำหนดเองด้วย

• ระยะขอบซ้าย: 50px (เดสก์ท็อปและแท็บเล็ต), 20px (โทรศัพท์)
• ระยะขอบขวา: 50px (เดสก์ท็อปและแท็บเล็ต), 20px (โทรศัพท์)

เพิ่มโมดูลข้อความรับรองในคอลัมน์ 1

เพิ่มเนื้อหา

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

อัพโหลดภาพ

อัปโหลดรูปภาพในการตั้งค่ารูปภาพด้วย

พื้นหลังไล่โทนสี

และเพิ่มพื้นหลังไล่ระดับ

• สี 1: #5b32ff
• สี 2: #32e5f2
• ทิศทางการไล่ระดับสี: 100deg

การตั้งค่าไอคอนอ้าง

ดำเนินการต่อโดยไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าไอคอนใบเสนอราคา

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

การตั้งค่าข้อความ

เปลี่ยนการวางแนวข้อความในการตั้งค่าข้อความด้วย

• การวางแนวข้อความ: ศูนย์
• สีข้อความ: เบา

การตั้งค่าข้อความเนื้อหา

ถัดไป ลองใช้การตั้งค่าข้อความเนื้อหา

• น้ำหนักแบบอักษรของร่างกาย: Ultra Bold
• รูปแบบตัวอักษรของร่างกาย: ตัวพิมพ์ใหญ่
• ขนาดข้อความเนื้อหา: 15px
• ระยะห่างระหว่างตัวอักษร: -0.5px
• ความสูงของเส้นร่างกาย: 2.1em

ระยะห่าง

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

• ขอบบน: -25px

กล่องเงา

และเสร็จสิ้นการออกแบบข้อความรับรองโดยให้เงาของกล่องข้อความรับรองเป็นเงา

• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.3)

โคลนทั้งสองโมดูลสองครั้ง & วางซ้ำในคอลัมน์ที่เหลือ

เมื่อคุณแก้ไขโมดูลในคอลัมน์ 1 เสร็จแล้ว คุณสามารถโคลนโมดูลเหล่านั้นสองครั้งแล้ววางโมดูลที่ซ้ำกันในสองคอลัมน์ที่เหลือ

เปลี่ยนเนื้อหาและรูปภาพรับรอง

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนเนื้อหาและรูปภาพที่ใช้ในโมดูล

เปลี่ยนพื้นหลังไล่ระดับข้อความรับรอง

พร้อมกับพื้นหลังไล่ระดับ

• สี 1: #a632ff
• สี 2: #f7a131

• สี 1: #3281ff
• สี 2: #2cf483

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์สุดท้ายในหน้าจอขนาดต่างๆ กัน

เดสก์ทอป

มือถือ

ความคิดสุดท้าย

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