ดาวน์โหลดเค้าโครงคำรับรองการเคลื่อนไหวฟรีสำหรับ Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลด The Motion Testimonial Layout ฟรี

หากต้องการวางมือบนเลย์เอาต์คำรับรองแบบเคลื่อนไหวฟรี คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

มาเริ่มสร้างใหม่กันเถอะ!

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

สีพื้นหลัง

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

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

ระยะห่าง

ไปที่แท็บการออกแบบของส่วนและเพิ่มช่องว่างด้านบนและด้านล่างที่กำหนดเองตามขนาดหน้าจอต่างๆ

• ช่องว่างด้านบน: 10% (เดสก์ท็อป), 20% (แท็บเล็ต), 30% (โทรศัพท์)
• ช่องว่างภายในด้านล่าง: 10% (เดสก์ท็อป), 20% (แท็บเล็ต), 30% (โทรศัพท์)

เพิ่มแถว #1

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

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

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

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

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

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

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

• แบบอักษรของหัวเรื่อง 2: Questrial
• การจัดแนวข้อความหัวเรื่อง 2: Center
• ขนาดข้อความของหัวเรื่อง 2: 85px (เดสก์ท็อป), 45px (แท็บเล็ต), 35px (โทรศัพท์)
• หัวเรื่อง 2 ระยะห่างตัวอักษร: 2px
• ส่วนหัว 2 ความสูงของบรรทัด: 1.1em

เพิ่มโมดูลตัวแบ่งให้กับคอลัมน์

ทัศนวิสัย

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

• แสดงตัวแบ่ง: ใช่

การตั้งค่าสาย

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าบรรทัดดังนี้:

• สีเส้น: #161616
• สไตล์เส้น: Solid
• ตำแหน่งสาย: Top

ขนาด

แก้ไขการตั้งค่าการปรับขนาดด้วย

• น้ำหนักตัวแบ่ง: 14px
• ความกว้าง: 13% (เดสก์ท็อป), 20% (แท็บเล็ต), 30% (โทรศัพท์)
• การจัดตำแหน่งโมดูล: ศูนย์

เพิ่มแถว #2

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

ต่อแถวหน้า! แถวนี้จะอุทิศให้กับคำรับรองแรกของเรา ใช้โครงสร้างคอลัมน์ต่อไปนี้:

ภาพพื้นหลังเดสก์ท็อป

จากนั้นอัปโหลดภาพพื้นหลังเดสก์ท็อปสีน้ำเงินที่คุณจะพบในโฟลเดอร์ดาวน์โหลดที่คุณสามารถดาวน์โหลดได้ที่ตอนต้นของโพสต์นี้

• ขนาดภาพพื้นหลัง: พอดี
• ตำแหน่งภาพพื้นหลัง: ศูนย์

ภาพพื้นหลังแท็บเล็ตและโทรศัพท์

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

• ขนาดภาพพื้นหลัง: พอดี
• ตำแหน่งภาพพื้นหลัง: Center

ขนาด

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

• ความกว้างสูงสุด: 2000px

ระยะห่าง

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

• ขอบบน: 100px
• ช่องว่างภายในด้านบน: 15%
• แผ่นรองด้านล่าง: 15%

เอฟเฟกต์การเลื่อนแนวนอน

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

• เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
• ออฟเซ็ตเริ่มต้น: -4
• ออฟเซ็ตกลาง: 0 (ที่ 50%)
• ออฟเซ็ตสิ้นสุด: 0
• ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ด้านบนขององค์ประกอบ

เอฟเฟกต์การเลื่อนเข้าและออก

เราจะเพิ่มเอฟเฟกต์การเลื่อนเข้าและออกแบบกำหนดเองด้วย

• เปิดใช้งานการเฟดเข้าและออก: ใช่
• ความทึบเริ่มต้น: 0% (ที่ 19%)
• ความทึบปานกลาง: 100% (จาก 25% ถึง 88%)
• ความทึบสิ้นสุด: 0% (ที่ 93%)
• เอฟเฟกต์ทริกเกอร์การเคลื่อนไหว: ด้านบนขององค์ประกอบ

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

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

โมดูลแรกที่เราต้องการในแถวนี้คือโมดูลข้อความ วางเนื้อหารับรองในกล่องเนื้อหา

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

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

• แบบอักษรของข้อความ: Questrial
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 50px (เดสก์ท็อป), 30px (แท็บเล็ต), 25px (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1.5em
• การจัดตำแหน่งข้อความ: กึ่งกลาง

ขนาด

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

• ความกว้าง: 63% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)
• การจัดตำแหน่งโมดูล: ศูนย์

เพิ่มโมดูลบุคคลลงในคอลัมน์

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

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลบุคคล เพิ่มชื่อ ตำแหน่ง และลิงก์โซเชียลมีเดีย

อัพโหลดภาพ

อัปโหลดรูปภาพสี่เหลี่ยมจัตุรัสที่คุณเลือกถัดไป

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

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

• สีไอคอน: #2b302e

ภาพ

เปลี่ยนรูปภาพเป็นวงกลมโดยเพิ่มมุมโค้งมน

• ทุกมุม: 100px

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

จากนั้น แก้ไขการตั้งค่าข้อความชื่อเรื่องดังนี้:

• แบบอักษรของชื่อเรื่อง: Questrial
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• สีข้อความของชื่อเรื่อง: #ffffff
• ขนาดข้อความชื่อเรื่อง: 24px

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

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

• แบบอักษรของร่างกาย: Questrial
• สีข้อความ: #ffffff
• ขนาดข้อความเนื้อหา: 15px

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

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

• แบบอักษรของตำแหน่ง: Questrial
• ตำแหน่งสีข้อความ: #1b66ff
• ขนาดข้อความตำแหน่ง: 17px

ขนาด

พร้อมกับความกว้างตามขนาดหน้าจอต่างๆ

• ความกว้าง: 25% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

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

• ขอบบน: 100px

องค์ประกอบหลัก

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

display: flex;
align-items: center;

ภาพสมาชิก

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

ยาเม็ด:

width: 20% !important;

โทรศัพท์:

width: 30% !important;
margin-right: 5%;

โคลนแถว #2

เมื่อคุณเสร็จสิ้นแถวที่มีข้อความรับรองแล้ว คุณสามารถโคลนทั้งแถวได้เพียงครั้งเดียว

เปลี่ยนภาพพื้นหลังของแถว

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

เปลี่ยนระยะห่างแถว

เพิ่มระยะขอบด้านบนติดลบในแถวถัดไป

• มาร์จิ้นสูงสุด: -15%

เปลี่ยนตำแหน่งโมดูลบุคคล สีข้อความ

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

• ตำแหน่งสีข้อความ: #ff233e

โคลนแถวสุดท้าย

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

เปลี่ยนภาพพื้นหลังของแถว

เปลี่ยนภาพพื้นหลังของแถวโดยใช้เวอร์ชันสีเหลืองที่คุณจะพบในโฟลเดอร์ดาวน์โหลด

เปลี่ยนตำแหน่งโมดูลบุคคล สีข้อความ

แก้ไขสีข้อความตำแหน่งในการตั้งค่าโมดูลบุคคลด้วย เสร็จแล้ว!

• ตำแหน่งสีข้อความ: #ffbc1b

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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