ข้ามไปยังเนื้อหาหลัก

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

Divi: ธีม WordPress ที่ใช้ง่ายที่สุด

Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

ขึ้น ดาวน์โหลด 901.000 แล้วDivi เป็นธีม WordPress ที่ได้รับความนิยมมากที่สุดในโลก สมบูรณ์และใช้งานง่ายและมาพร้อมกับเทมเพลตฟรีมากกว่า 62 [แนะนำ]

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

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

Let 's go

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

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

การเปลี่ยนระหว่างส่วน divi

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

เพิ่มส่วน # 1

การเว้นวรรค

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

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

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

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

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

ปรับขนาด

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

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

การเว้นวรรค

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

  • ขอบบน: 200px
  • ขอบล่าง: 200px
การกำหนดค่าระยะห่างระหว่างบรรทัด Divi

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

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

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

บริการของเรานำเสนอโดยผู้เชี่ยวชาญในขณะนี้

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

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

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

การเว้นวรรค

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

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

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

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

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

กล่องข้อความ Divi เนื้อหา

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

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

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

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

ความชัดเจน

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

  • แสดงตัวแยก: ใช่
ตัวแบ่งที่มองเห็นได้

ออนไลน์

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

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

Elementor ช่วยให้คุณสร้างการออกแบบเว็บไซต์ได้อย่างง่ายดายด้วยรูปลักษณ์แบบมืออาชีพ หยุดจ่ายเงินแพงสำหรับสิ่งที่คุณสามารถทำได้ด้วยตัวเอง [ฟรี]

  • สีของเส้น: # 000000
พื้นหลังสีแบ่ง

ปรับขนาด

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

  • น้ำหนัก Divider: 3px
  • ความกว้าง: 28%
ขนาดตัวคั่น Divi

การเว้นวรรค

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

  • ขอบบน: 10px
ระยะห่างระหว่างโมดูลตัวคั่น Divi

เพิ่มส่วน # 2

การเว้นวรรค

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

  • การเสริมด้านบน: 0px
ส่วนที่ 2 ระยะห่างระหว่าง Divi

ล้น

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

  • ล้นแนวนอน: ซ่อน
  • แนวตั้งล้น: ซ่อน
ซ่อนโมดูล Divi มากเกินไป

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

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

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

เลือกเค้าโครง Divi

ปรับขนาด

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

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

การเว้นวรรค

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

  • การเสริมด้านบน: 0px
  • ช่องว่างภายในด้านล่าง: 0px
การตั้งค่าระยะห่างโมดูลบรรทัด Divi 1

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

สีพื้นหลัง

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

  • สีพื้นหลัง: # f7f7f7
การกำหนดค่าพื้นหลังโมดูลบรรทัด Divi

การเว้นวรรค

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

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

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

การเว้นวรรค

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

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

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

ความชัดเจน

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

คุณกำลังมองหาธีมและปลั๊กอิน WordPress ที่ดีที่สุดหรือไม่?

ดาวน์โหลดปลั๊กอินและธีม WordPress ที่ดีที่สุดใน Envato และสามารถสร้างเว็บไซต์ของคุณได้ง่ายๆ ดาวน์โหลดมากกว่า 49.720.000 [EXCLUSIVE]

  • แสดงตัวแยก: ใช่
แสดงตัวคั่น divi 1

ออนไลน์

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

  • สีของเส้น: # 000000
การตั้งค่าตัวคั่น Divi

ปรับขนาด

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

  • น้ำหนัก Divider: 3px
  • ความกว้าง: 50%
ขนาดตัวคั่น Divi

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

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

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

การตั้งค่าส่วนเนื้อหา Divi

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

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

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

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

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

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

การตั้งค่าโมดูลข้อความ Divi

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

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

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

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

เพิ่มสำเนา

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

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

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

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

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

การเว้นวรรค

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

  • การเสริมด้านบน: 50px
  • ช่องว่างภายในด้านล่าง: 50px
  • ช่องว่างด้านซ้าย: 100px
  • ช่องว่างภายในขวา: 100px
การตั้งค่าระยะห่างของปุ่มโมดูล Divi

ตำแหน่ง

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

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

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

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

โมดูล Divi โคลน

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

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

แก้ไขเนื้อหาส่วน Divi

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

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

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

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

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

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

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

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

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

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

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

สร้างร้านค้าออนไลน์ได้อย่างง่ายดาย

ดาวน์โหลดฟรี WooCommerce ปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในการขายผลิตภัณฑ์ทางกายภาพและดิจิทัลของคุณบน WordPress [แนะนำ]

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

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

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

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

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

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

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

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

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

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

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

ผลสุดท้าย

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

การสาธิตขั้นสุดท้าย

คิดสุดท้าย

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

บทความนี้ประกอบด้วยข้อคิดเห็น 0

แสดงความคิดเห็น

ที่อยู่อีเมลของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมาย *

เว็บไซต์นี้ใช้ Akismet เพื่อลดสิ่งที่ไม่พึงประสงค์ เรียนรู้เพิ่มเติมเกี่ยวกับวิธีการใช้ข้อมูลความคิดเห็นของคุณ.

กลับไปด้านบน
0 หุ้น
หุ้น
ทวีต
Enregistrer