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

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

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

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

เริ่มกันเลย!

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

นี่คือภาพรวมของการออกแบบที่เราจะทำได้หลังจากจบบทช่วยสอนนี้

ภาพเคลื่อนไหว Divi

วิธีสร้างตัวแบ่งส่วนการเลื่อนภาพเคลื่อนไหวด้วย Divi

การสร้างเนื้อหาทั้งสองส่วน

เพิ่มแถว

ในการเริ่มต้นสร้างแถวที่มีหนึ่งคอลัมน์ในส่วนเริ่มต้น

เพิ่มส่วน Divi

ส่วนขอบ (สำหรับการทดสอบ)

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

  • อัตรากำไรขั้นต้นสูงสุด: 80vh
กำหนดค่าระยะห่างของส่วน Divi

เพิ่มโมดูลข้อความ

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

โมดูลข้อความ Divi

เนื้อหาของโมดูลข้อความ

ภายในเนื้อหาของร่างกายให้เพิ่มชื่อ H2 ต่อไปนี้:

<h2>Section Avec Séparateurs</h2>

ส่วนที่มีตัวแบ่ง

การออกแบบโมดูลข้อความ

ภายใต้การตั้งค่าการออกแบบอัพเดตสิ่งต่อไปนี้:

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

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

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

เพิ่มส่วนเนื้อหาที่สอง

ภายใต้หัวข้อก่อนหน้าเพิ่มส่วนปกติใหม่

เอฟเฟกต์การเลื่อนของตัวแบ่งส่วนตัวแบ่ง

เพิ่มแถว

ในส่วนใหม่เพิ่มแถวไปยังคอลัมน์

เพิ่ม Divi ส่วนที่ 1

เพิ่มโมดูลข้อความ

จากนั้นเพิ่มโมดูลข้อความใหม่ลงในบรรทัด

เพิ่มโมดูลข้อความ Divi

การออกแบบโมดูลข้อความ

เราสามารถเก็บเนื้อหา padding เริ่มต้นไว้ในร่างกายได้ในตอนนี้ ไปที่แท็บออกแบบและอัปเดตสิ่งต่อไปนี้:

  • แบบอักษรของข้อความ: Roboto
  • สีข้อความ: #dddddd
  • ขนาดตัวอักษร: 16px
  • ความสูงบรรทัดข้อความ: 1,5 em
  • จัดเรียงข้อความ: ซ้าย
  • ความกว้างสูงสุด: 400 px
  • การจัดตำแหน่งของโมดูล: ศูนย์
ปรับแต่งโมดูล Divi สไตล์ข้อความ

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

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

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

  • สีพื้นหลัง: rgba (0,0,0,0)
  • ขอบล่าง: 80vh
  • การขยาย: 0px
การกำหนดค่าส่วนระยะห่าง Divi

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

เมื่อส่วนเนื้อหาสองส่วนเสร็จสมบูรณ์เราพร้อมที่จะเพิ่มส่วนสำหรับตัวแบ่งส่วนภาพเคลื่อนไหวของเรา

เพิ่มหัวข้อใหม่

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

เพิ่ม Divi ส่วนปกติ

บริบทของส่วน

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

ค้นพบเครื่องมือที่ดีที่สุดสำหรับเว็บไซต์ของคุณ

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

  • สีพื้นหลัง: rgba (0,0,0,0)
ส่วนพื้นหลังส่วนบุคคล divi

การออกแบบตัวแบ่งส่วน

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

การออกแบบตัวแบ่งที่เหนือกว่า

  • สไตล์ตัวแบ่งด้านบน: ดูภาพหน้าจอ
  • สีของตัวแบ่งส่วนบน: # 524fbf
  • ความสูงของตัวแบ่งบน: 20vw
  • การทำซ้ำแนวนอนของตัวแบ่งบน: 0,6x
  • พลิกของตัวแบ่งบน: แนวนอน
การกำหนดค่าเส้นขอบส่วน Divi

การออกแบบตัวแบ่งที่ต่ำกว่า

  • รูปแบบตัวแบ่งด้านล่าง: ดูภาพหน้าจอ
  • สีตัวคั่นด้านล่าง: # 524fbf
  • ความสูงของตัวแบ่งที่ต่ำกว่า: 20vw
  • การทำซ้ำแนวนอนของตัวหารล่าง: 0,5x
  • เอียงตัวแบ่งล่าง: แนวนอนและแนวตั้ง
ตัวเลือก Divi ที่ต่ำกว่า
ส่วนสูงและช่องว่างภายใน

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

  • ความสูง: 0px
  • ระยะห่างจากขอบ: 0px สูง, 0px ต่ำ
Divi ส่วนแบ่งต่ำ
เอฟเฟกต์เลื่อนส่วนแยก

จากนั้นให้เอฟเฟกต์การเลื่อนต่อไปนี้ในส่วน:

ภายใต้แท็บ การเคลื่อนไหวในแนวนอน ...

  • เปิดใช้งานการเคลื่อนไหวแนวนอน: ใช่

เราสามารถรักษาการตั้งค่าเริ่มต้นสำหรับการตั้งค่านี้ในมุมมองของไฟล์ สำนัก .

Divi เลื่อนแนวนอน

จากนั้นอัปเดตพารามิเตอร์การเคลื่อนไหวแนวนอนบน แท็บเล็ต :

  • เริ่มการชดเชย: 3 (ที่ 0% ของหน้าต่าง)
  • ค่าชดเชยเฉลี่ย: 0 (ที่ 50% ของวิวพอร์ต)
  • สิ้นสุดการชดเชย: -3 (ที่ 100% ของวิวพอร์ต)
Divi ตารางความเสียหายแนวนอน

ดาวน์โหลดเครื่องมือมากกว่า 11 ล้านรายการ

Envato Elements นำเสนอทรัพยากรที่ดีที่สุดในการสร้างและพัฒนาเว็บไซต์ของคุณทุกด้าน คุณจะพบเทมเพลต WordPress กราฟิก แหล่งข้อมูลเสียง และอื่นๆ อีกมากมายนับล้านรายการ เหมาะสำหรับผู้เริ่มต้น

ภายใต้แท็บ การปรับสเกลเอฟเฟกต์ขึ้นและลง อัปเดตข้อมูลต่อไปนี้ใน สำนัก ...

  • ระดับเริ่มต้น: 200% (ที่ 0% ของหน้าต่าง)
  • มาตราส่วนเฉลี่ย: 150% (ที่ 45% -65% ของวิวพอร์ต)
  • End scale: 150% (ที่ 100% ของวิวพอร์ต)
การกำหนดค่าเค้าโครง

จากนั้นอัปเดตเอฟเฟกต์ Scaling Up and Down บนไฟล์ แท็บเล็ต ดังนี้:

  • ระดับเริ่มต้น: 400% (ที่ 0% ของหน้าต่าง)
  • มาตราส่วนเฉลี่ย: 300% (ที่ 45% -65% ของวิวพอร์ต)
  • End scale: 400% (ที่ 100% ของวิวพอร์ต)

สาเหตุหลักที่เราต้องปรับเอฟเฟกต์การเคลื่อนไหวบนแท็บเล็ต (และโทรศัพท์) เนื่องมาจากค่าการเคลื่อนไหวในแนวนอนโดยใช้หน่วยความยาวพิกเซล (เช่น 3 = 300 พิกเซล) ซึ่งก็คือ แน่นอนและไม่ปรับตามความกว้างของเบราว์เซอร์

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

Divi ผลลัพธ์สุดท้ายที่เป็นไปได้

คิดสุดท้าย

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

%d บล็อกเกอร์ชอบหน้านี้: