การสร้างเอฟเฟกต์การเลื่อนโดยใช้ Section Divider เป็นเทคนิคที่ง่ายและสนุกที่สามารถเพิ่มชีวิตให้กับ .ของคุณ เว็บไซต์เว็บ ใช้ ธีม WordPress ดิวิ. ตัวแบ่งส่วนยังคงเป็นองค์ประกอบการออกแบบที่หลากหลาย ซึ่งมีประโยชน์สำหรับการเพิ่มความคิดสร้างสรรค์ให้กับการเปลี่ยนภาพของคุณ เนื้อหา เดอหน้า
แต่ด้วยเอฟเฟกต์การเลื่อนของ Divi ตัวแบ่งส่วนจะยิ่งน่าสนใจยิ่งขึ้น! เคล็ดลับคือการแยกส่วนสำหรับรูปแบบตัวแบ่งที่ต้องการโดยเฉพาะ จากนั้นคุณสามารถเพิ่มการเคลื่อนไหวที่สร้างด้วยการเลื่อนทุกประเภทลงในส่วนนี้เพื่อสร้างเอฟเฟกต์การเลื่อนที่สวยงามเป็นพื้นหลังสำหรับ เนื้อหา หน้า
เริ่มกันเลย!
ผลลัพธ์ที่เป็นไปได้
นี่คือภาพรวมของการออกแบบที่เราจะทำได้หลังจากจบบทช่วยสอนนี้
วิธีสร้างตัวแบ่งส่วนการเลื่อนภาพเคลื่อนไหวด้วย Divi
การสร้างเนื้อหาทั้งสองส่วน
เพิ่มแถว
ในการเริ่มต้นสร้างแถวที่มีหนึ่งคอลัมน์ในส่วนเริ่มต้น
ส่วนขอบ (สำหรับการทดสอบ)
สำหรับวัตถุประสงค์ในการทดสอบให้เพิ่มขอบด้านบนลงในส่วนเพื่อให้เรามีที่ว่างสำหรับการเลื่อน เปิดการตั้งค่าส่วนและเพิ่มสิ่งต่อไปนี้:
- อัตรากำไรขั้นต้นสูงสุด: 80vh
เพิ่มโมดูลข้อความ
ในแถวของคอลัมน์ให้เพิ่มโมดูลข้อความใหม่
เนื้อหาของโมดูลข้อความ
ด้านในของ เนื้อหา ของร่างกาย ให้เพิ่มหัวข้อ H2 ต่อไปนี้:
<h2>Section Avec Séparateurs</h2>
การออกแบบโมดูลข้อความ
ภายใต้การตั้งค่าการออกแบบอัพเดตสิ่งต่อไปนี้:
- แบบอักษรของข้อความ: Roboto
- การจัดตำแหน่งของข้อความ: ศูนย์
- สีข้อความของรายการ 2: # bae0d8
- ส่วนหัว 2 ขนาดตัวอักษร: 80px (เดสก์ท็อป), 50px (แท็บเล็ต), 30px (โทรศัพท์)
เพิ่มส่วนเนื้อหาที่สอง
ภายใต้หัวข้อก่อนหน้าเพิ่มส่วนปกติใหม่
เพิ่มแถว
ในส่วนใหม่เพิ่มแถวไปยังคอลัมน์
เพิ่มโมดูลข้อความ
จากนั้นเพิ่มโมดูลข้อความใหม่ลงในบรรทัด
การออกแบบโมดูลข้อความ
เราสามารถเก็บเนื้อหา padding เริ่มต้นไว้ในร่างกายได้ในตอนนี้ ไปที่แท็บออกแบบและอัปเดตสิ่งต่อไปนี้:
- แบบอักษรของข้อความ: Roboto
- สีข้อความ: #dddddd
- ขนาดตัวอักษร: 16px
- ความสูงบรรทัดข้อความ: 1,5 em
- จัดเรียงข้อความ: ซ้าย
- ความกว้างสูงสุด: 400 px
- การจัดตำแหน่งของโมดูล: ศูนย์
การตั้งค่ามาตรา
อย่าลืมลบสีพื้นหลังเริ่มต้นของส่วนออก แต่ให้พื้นหลังโปร่งใสทั้งหมด จากนั้นเราสามารถลบช่องว่างด้านบนและเพิ่มขอบด้านล่างเพื่อวัตถุประสงค์ในการทดสอบการเลื่อน
หากต้องการทำสิ่งนี้ให้เปิดการตั้งค่าส่วนและอัปเดตข้อมูลต่อไปนี้:
- สีพื้นหลัง: rgba (0,0,0,0)
- ขอบล่าง: 80vh
- การขยาย: 0px
การสร้างตัวแยกส่วนเคลื่อนไหว
เมื่อส่วนเนื้อหาสองส่วนเสร็จสมบูรณ์เราพร้อมที่จะเพิ่มส่วนสำหรับตัวแบ่งส่วนภาพเคลื่อนไหวของเรา
เพิ่มหัวข้อใหม่
ไปข้างหน้าและสร้างส่วนปกติใหม่ที่อยู่ตรงกลางของส่วนเนื้อหาทั้งสอง
บริบทของส่วน
และอีกครั้งให้ลบสีพื้นหลังเริ่มต้นของส่วนออก แต่อัปเดตสิ่งต่อไปนี้:
- สีพื้นหลัง: rgba (0,0,0,0)
การออกแบบตัวแบ่งส่วน
ไม่ต้องกังวลเราจะสร้างสีพื้นหลังด้วยตัวแบ่งส่วน ในการดำเนินการนี้ให้คลิกที่แท็บออกแบบและเพิ่มตัวแบ่งด้านบนและด้านล่างลงในส่วนดังนี้:
การออกแบบตัวแบ่งที่เหนือกว่า
- สไตล์ตัวแบ่งด้านบน: ดูภาพหน้าจอ
- สีของตัวแบ่งส่วนบน: # 524fbf
- ความสูงของตัวแบ่งบน: 20vw
- การทำซ้ำแนวนอนของตัวแบ่งบน: 0,6x
- พลิกของตัวแบ่งบน: แนวนอน
การออกแบบตัวแบ่งที่ต่ำกว่า
- รูปแบบตัวแบ่งด้านล่าง: ดูภาพหน้าจอ
- สีตัวคั่นด้านล่าง: # 524fbf
- ความสูงของตัวแบ่งที่ต่ำกว่า: 20vw
- การทำซ้ำแนวนอนของตัวหารล่าง: 0,5x
- เอียงตัวแบ่งล่าง: แนวนอนและแนวตั้ง
ส่วนสูงและช่องว่างภายใน
เนื่องจากส่วนนี้มีไว้สำหรับการออกแบบตัวแบ่งเท่านั้นเราจึงสามารถกำจัดความสูงและช่องว่างภายในเพื่อให้แสดงเฉพาะสไตล์ตัวแบ่งและไม่มีช่องว่างที่ไม่จำเป็นมาระหว่างเนื้อหาทั้งสอง อัปเดตสิ่งต่อไปนี้:
- ความสูง: 0px
- ระยะห่างจากขอบ: 0px สูง, 0px ต่ำ
เอฟเฟกต์เลื่อนส่วนแยก
จากนั้นให้เอฟเฟกต์การเลื่อนต่อไปนี้ในส่วน:
ภายใต้แท็บ การเคลื่อนไหวในแนวนอน ...
- เปิดใช้งานการเคลื่อนไหวแนวนอน: ใช่
เราสามารถรักษาการตั้งค่าเริ่มต้นสำหรับการตั้งค่านี้ในมุมมองของไฟล์ สำนัก .
จากนั้นอัปเดตพารามิเตอร์การเคลื่อนไหวแนวนอนบน แท็บเล็ต :
- เริ่มการชดเชย: 3 (ที่ 0% ของหน้าต่าง)
- ค่าชดเชยเฉลี่ย: 0 (ที่ 50% ของวิวพอร์ต)
- สิ้นสุดการชดเชย: -3 (ที่ 100% ของวิวพอร์ต)
ภายใต้แท็บ การปรับสเกลเอฟเฟกต์ขึ้นและลง อัปเดตข้อมูลต่อไปนี้ใน สำนัก ...
- ระดับเริ่มต้น: 200% (ที่ 0% ของหน้าต่าง)
- มาตราส่วนเฉลี่ย: 150% (ที่ 45% -65% ของวิวพอร์ต)
- End scale: 150% (ที่ 100% ของวิวพอร์ต)
จากนั้นอัปเดตเอฟเฟกต์ Scaling Up and Down บนไฟล์ แท็บเล็ต ดังนี้:
- ระดับเริ่มต้น: 400% (ที่ 0% ของหน้าต่าง)
- มาตราส่วนเฉลี่ย: 300% (ที่ 45% -65% ของวิวพอร์ต)
- End scale: 400% (ที่ 100% ของวิวพอร์ต)
สาเหตุหลักที่เราต้องปรับเอฟเฟกต์การเคลื่อนไหวบนแท็บเล็ต (และโทรศัพท์) เนื่องมาจากค่าการเคลื่อนไหวในแนวนอนโดยใช้หน่วยความยาวพิกเซล (เช่น 3 = 300 พิกเซล) ซึ่งก็คือ แน่นอนและไม่ปรับตามความกว้างของเบราว์เซอร์
ตอนนี้เรามาดูผลลัพธ์สุดท้ายของตัวแบ่งส่วนการเคลื่อนไหวแบบเลื่อนของเรา
คิดสุดท้าย
การแบ่งส่วนที่เป็นภาพเคลื่อนไหวบนม้วนหนังสือเป็นวิธีที่สนุกและมีประสิทธิภาพในการทำให้หน้าเว็บมีชีวิตชีวา หวังว่านี่จะเป็นแรงบันดาลใจในการจุดประกายการออกแบบที่สร้างสรรค์ยิ่งขึ้นด้วยตัวคุณเอง
