วิธีการสร้างการเปลี่ยนแปลงอย่างราบรื่นด้วยเอฟเฟกต์เลื่อนบน Divi

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

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

Let 's go

ผลลัพธ์ที่เป็นไปได้

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

1 สร้างโครงสร้างขององค์ประกอบ

เพิ่มส่วน # 1

การเว้นวรรค

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

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

เพิ่มบรรทัดใหม่

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

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

ปรับขนาด

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

• ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 90%
• ความกว้างสูงสุด: 1580px

การเว้นวรรค

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

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

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

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

ถึงเวลาเพิ่มโมดูลโดยเริ่มจากโมดูลข้อความในคอลัมน์ 1 ป้อนเนื้อหา H2 ที่คุณต้องการ

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

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

• ตำแหน่งตำรวจ 2: รายไตรมาส
• ส่วนหัว 2 ขนาดตัวอักษร: 80px (เดสก์ท็อป), 50px (แท็บเล็ต), 40px (โทรศัพท์)
• ความสูงของบรรทัดที่ 2 ของหัว: 1.2em

การเว้นวรรค

จากนั้นเพิ่มระยะขอบล่างบนแท็บเล็ตและโทรศัพท์

• ระยะขอบล่าง: 50 พิกเซล (แท็บเล็ตและโทรศัพท์เท่านั้น)

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

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

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

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

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

• แบบอักษรของข้อความ: ห้องโดยสาร
• รูปแบบตัวอักษรข้อความ: ตัวพิมพ์ใหญ่
• สีข้อความ: # 000000
• ขนาดตัวอักษร: 18px (เดสก์ท็อป), 15px (แท็บเล็ต), 13px (โทรศัพท์)
• การเว้นวรรคตัวอักษร: 3px (เดสก์ท็อป), 1px (แท็บเล็ตและโทรศัพท์)
• ความสูงของบรรทัดข้อความ: 3em

เพิ่มโมดูลการแยกเข้ากับคอลัมน์ 2

ความชัดเจน

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

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

ออนไลน์

จากนั้นเปลี่ยนสีเส้นของโมดูล

• สีของเส้น: # 000000

ปรับขนาด

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

• น้ำหนัก Divider: 3px
• ความกว้าง: 28%

การเว้นวรรค

นอกจากนี้เรายังเพิ่มอัตรากำไรขั้นต้น

• ขอบบน: 10px

เพิ่มส่วน # 2

การเว้นวรรค

ไปยังส่วนปกติถัดไป ลบช่องว่างด้านบนเริ่มต้นจากส่วน

• การเสริมด้านบน: 0px

ล้น

ยังซ่อนโอเวอร์โฟลว์

• ล้นแนวนอน: ซ่อน
• แนวตั้งล้น: ซ่อน

เพิ่มบรรทัดใหม่

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

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

ปรับขนาด

โดยไม่ต้องเพิ่มโมดูลเพิ่มเติมให้เปิดพารามิเตอร์ line เข้าถึงพารามิเตอร์การกำหนดขนาดและทำการแก้ไขต่อไปนี้:

• ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 90%
• ความกว้างสูงสุด: 1580px

การเว้นวรรค

จากนั้นลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดออก

• การเสริมด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

การตั้งค่าคอลัมน์ 1

สีพื้นหลัง

จากนั้นเปิดการตั้งค่าสำหรับคอลัมน์ 1 และเปลี่ยนสีพื้นหลัง

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

การเว้นวรรค

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

• ช่องว่างภายในบน: 200px (โต๊ะทำงาน), 100px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างด้านล่าง: 200px (โต๊ะทำงาน), 100px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างด้านซ้าย: 8%
• แพ็ดดิงขวา: 8%

การตั้งค่าคอลัมน์ 2

การเว้นวรรค

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

• ช่องว่างภายในสุด: 100px (เดสก์ท็อป), 50px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านล่าง: 200px
• ช่องว่างด้านซ้าย: 150 พิกเซล (โต๊ะทำงาน), 0 พิกเซล (แท็บเล็ตและโทรศัพท์)

เพิ่มโมดูลการแยกเข้ากับคอลัมน์ 1

ความชัดเจน

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

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

ออนไลน์

จากนั้นเปลี่ยนสีเส้นของโมดูล

• สีของเส้น: # 000000

ปรับขนาด

ทำการเปลี่ยนแปลงพารามิเตอร์การปรับขนาดด้วย

• น้ำหนัก Divider: 3px
• ความกว้าง: 50%

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

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

โมดูลถัดไปที่เราต้องการในคอลัมน์ 1 คือโมดูลข้อความที่มีเนื้อหา H3

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

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

• ตำแหน่งตำรวจ 3: รายไตรมาส
• สีข้อความของรายการ 3: # 000000
• รายการ 3 ขนาดตัวอักษร: 50px (เดสก์ท็อป), 40px (แท็บเล็ต), 35px (โทรศัพท์)
• ความสูงของบรรทัดที่ 3 ของหัว: 1.1em

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

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

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

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

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

• แบบอักษรของข้อความ: ห้องโดยสาร
• รูปแบบตัวอักษรข้อความ: ตัวพิมพ์ใหญ่
• ขนาดตัวอักษร: 18px (เดสก์ท็อป), 15px (แท็บเล็ต), 13px (โทรศัพท์)
• การเว้นวรรคตัวอักษร: 3px (เดสก์ท็อป), 1px (แท็บเล็ตและโทรศัพท์)
• ความสูงของบรรทัดข้อความ: 3em

เพิ่มโมดูลปุ่มไปยังคอลัมน์ 2

เพิ่มสำเนา

โมดูลถัดไปและสุดท้ายที่เราต้องการคือโมดูลปุ่ม ป้อนสำเนาที่คุณเลือก

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

จากนั้นจัดสไตล์ปุ่ม

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 20 พิกเซล
• สีข้อความปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: # 000000
• ความกว้างเส้นขอบของปุ่ม: 0px

• แบบอักษรของปุ่ม: รายไตรมาส
• น้ำหนักแบบอักษรของปุ่ม: หนา

การเว้นวรรค

เพิ่มช่องว่างภายในที่กำหนดเองด้วย

• การเสริมด้านบน: 50px
• ช่องว่างภายในด้านล่าง: 50px
• ช่องว่างด้านซ้าย: 100px
• ช่องว่างภายในขวา: 100px

ตำแหน่ง

และย้ายตำแหน่งปุ่มตาม:

• ตำแหน่ง: สัมบูรณ์
• ที่ตั้ง: ด้านล่างซ้าย

โคลนบรรทัดได้บ่อยเท่าที่จำเป็น

เมื่อคุณเสร็จสิ้นทั้งบรรทัดและโมดูลทั้งหมดแล้วคุณสามารถโคลนทั้งบรรทัดได้สามครั้ง

เปลี่ยนเนื้อหาทั้งหมด

ตรวจสอบให้แน่ใจว่าได้แก้ไขเนื้อหาทั้งหมดในบรรทัดที่ซ้ำกัน

2. ใช้เอฟเฟกต์การเลื่อน

ผลการเลื่อนแถวแรก

การเคลื่อนไหวในแนวนอน

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

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

จางเข้าและออก

ใช้เอฟเฟกต์เฟดขาเข้าและขาออก

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

ผลการเลื่อนแถวกลาง

การเคลื่อนไหวในแนวตั้ง

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

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

จางเข้าและออก

เปิดใช้งานเอฟเฟกต์จางหายเข้าและออก

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

เอฟเฟกต์การเลื่อนบรรทัดสุดท้าย

การเคลื่อนไหวในแนวตั้ง

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

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

จางเข้าและออก

ด้วยเอฟเฟกต์จางขาเข้าและขาออกและคุณทำเสร็จแล้ว!

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

ผลสุดท้าย

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

คิดสุดท้าย

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