Divi: วิธีสร้างมาสก์และรูปแบบพื้นหลังแบบเคลื่อนไหวเมื่อเลื่อน

คุณต้องการออกแบบพื้นหลัง Divi เคลื่อนไหวเมื่อเลื่อนหน้าด้วยมาสก์และรูปแบบ? กวดวิชานี้เหมาะสำหรับคุณ...

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

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

ในการทำเช่นนี้เราจะสร้างเลเยอร์พื้นหลังลอยโดยใช้เส้น Divi ซึ่งเราจะใช้เพื่อทำให้มาสก์และรูปแบบพื้นหลังเคลื่อนไหวเมื่อผู้ใช้เลื่อนดูส่วนต่างๆ เนื้อหา. 

เราคิดว่าคุณน่าจะชอบผลลัพธ์ที่ได้

ขอเริ่มต้น!

การสำรวจ

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

แนวคิด

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

จากนั้นเราสร้างเส้นที่อยู่ในตำแหน่ง (สัมบูรณ์) เพื่อให้ครอบคลุมส่วนทั้งหมด (เช่น ภาพซ้อนทับ) เราสามารถเพิ่มรูปแบบพื้นหลังให้กับแถว

ต่อไป เราสามารถเพิ่มมาสก์พื้นหลังให้กับคอลัมน์ได้

จากนั้นเราเพิ่ม เอฟเฟกต์การเลื่อน ไปยังแถวและคอลัมน์ (เช่น มาตราส่วนและการหมุน) ซึ่งจะทำให้รูปแบบเคลื่อนไหวและมาสก์แยกจากกันในพื้นหลังของส่วน

เมื่อเราซ่อนส่วนล้นของส่วน สิ่งที่เราเห็นคือภาพเคลื่อนไหวที่อยู่ในส่วน

เริ่มต้นด้วยการสร้างเพจด้วย Divi Builder

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

จากแดชบอร์ด WordPress ให้ไปที่ หน้า> เพิ่มใหม่ เพื่อสร้างเพจใหม่

ตั้งชื่อเรื่องที่เหมาะกับคุณแล้วคลิก ใช้ Divi ผู้ก่อสร้าง

จากนั้นคลิกที่ เริ่มสร้าง (สร้างจากรอยขีดข่วน)

หลังจากนั้นคุณจะมีผืนผ้าใบว่างเปล่าเพื่อเริ่มออกแบบใน Divi

อ่าน: Divi: วิธีใช้ "Gradient Builder" เพื่อตกแต่งภาพของคุณ

วิธีสร้างมาสก์พื้นหลังเลื่อนแบบเคลื่อนไหวและรูปแบบด้วย Divi

การออกแบบพื้นหลังส่วน

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

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

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

• ระยะขอบ: 80 vh (บนและล่าง)
• ช่องว่างภายใน: 0px (บนและล่าง)

การออกแบบการไล่ระดับสีพื้นหลังสำหรับส่วน

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

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

• ไล่ระดับหยุด:
  • 0%: #4158d0
  • 50%: #c850c0
  • 100%: #ffcc70

จากนั้นเปลี่ยนทิศทางของการไล่ระดับสีเชิงเส้น:

• ทิศทางการไล่ระดับสี: 270 องศา

เพิ่มแถวลงในส่วน

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

จากนั้น ทำซ้ำบรรทัดที่คุณเพิ่งสร้างขึ้น บรรทัดที่สอง (ซ้ำ) นี้จะใช้สำหรับของเรา เนื้อหา ตามปกติ 

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

ปรับแต่งสาย

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

เปิดการตั้งค่าบรรทัด ภายใต้แท็บ ค้นหาระดับสูง, ปรับปรุงสิ่งต่อไปนี้:

• ตำแหน่ง: Absolute

วิธีนี้จะทำให้เส้นซ้อนทับส่วนโดยไม่กินพื้นที่จริงในเอกสาร 

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

ภายใต้แท็บ ออกแบบอัปเดตตัวเลือกการปรับขนาดดังต่อไปนี้:

• ความสูงของคอลัมน์ Aquasize: ใช่
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• ส่วนสูง: 100%
• ช่องว่างภายใน: 0px (บนและล่าง)

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

สร้างรูปแบบพื้นหลังสำหรับเส้น

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

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

• รูปแบบพื้นหลัง: ลูกปา
• รูปแบบ:
  • สี: #f6bef7
  • ขนาด: กำหนดขนาดเอง
  • ความกว้าง: 35vw
  • ทำซ้ำต้นทาง: ศูนย์

Remarque : การใช้หน่วยความยาว VW ช่วยให้มั่นใจได้ว่ารูปแบบจะปรับขนาดตามเบราว์เซอร์ ทำให้การออกแบบสอดคล้องและตอบสนอง

เพิ่มเอฟเฟกต์การเลื่อนให้กับ Line

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

ไปที่แท็บ ค้นหาระดับสูง. ภายใต้ตัวเลือก ผลเลื่อน, ปรับปรุงสิ่งต่อไปนี้:

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

• เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
• ออฟเซ็ตเริ่มต้น: 0,5 (ที่ 0%)
• ออฟเซ็ตกลาง: 0 (จาก 40% ถึง 60%)
• สิ้นสุดการชดเชย: -0,5 (ที่ 100%)

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

เลือกแท็บ "ปรับขนาดขึ้นและลง" และอัปเดตรายการต่อไปนี้:

• เปิดใช้งานการปรับขนาดขึ้นและลง: ใช่
• ขนาดเริ่มต้น: 150% (ที่ 0%)
• ระดับกลาง: 100% (จาก 40% ถึง 60%)
• ระดับสิ้นสุด: 150% (ที่ 100%)

วิธีนี้จะปรับขนาดรูปแบบพื้นหลังของแถวเมื่อเลื่อน

เลือกแท็บ « หมุน  » และอัปเดตสิ่งต่อไปนี้:

• เปิดใช้งานการหมุน: ใช่
• การหมุนเริ่มต้น: 10 องศา (ที่ 0%)
• การหมุนตรงกลาง: 0 องศา (จาก 40% ถึง 60%)
• สิ้นสุดการหมุน: -10 องศา (ที่ 100%)

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

เพิ่มมาสก์พื้นหลังพร้อมเอฟเฟกต์การเลื่อนไปที่คอลัมน์

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

เมื่อต้องการทำเช่นนี้ ให้เปิดการตั้งค่าคอลัมน์ ภายใต้แท็บ หน้ากากพื้นหลัง, ปรับปรุงสิ่งต่อไปนี้:

• หน้ากาก: Layer Blob
• สี: #ffffff
• การแปลงหน้ากาก: พลิกแนวนอน, ผกผัน

เพิ่มเอฟเฟกต์การเลื่อนให้กับคอลัมน์

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

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

ไปที่แท็บ ค้นหาระดับสูง. ภายใต้ตัวเลือก ผลเลื่อนเลือกแท็บ โรตีng และอัปเดตสิ่งต่อไปนี้:

• เปิดใช้งานการหมุน: ใช่
• การหมุนเริ่มต้น: -15 องศา (ที่ 0%)
• การหมุนตรงกลาง: 0 องศา (จาก 40% ถึง 60%)
• สิ้นสุดการหมุน: 15 องศา (ที่ 100%)

ซ่อนส่วนเกินของส่วน

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

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

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

ตอนนี้มันดูดีขึ้น

ดูสิ่งนี้ด้วย: Divi: มาสก์และรูปแบบพื้นหลัง 12 แบบรวมกัน

การเพิ่มเนื้อหาในบรรทัดที่สร้างขึ้นเพื่อจุดประสงค์นี้

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

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

ผลสุดท้าย

มาดูผลลัพธ์สุดท้ายของการออกแบบของเรากัน

ดาวน์โหลด DIVI ทันที !!!

สรุป

การสร้างพื้นหลังที่สวยงามด้วยตัวเลือกพื้นหลังของ Divi นั้นน่าทึ่งมาก นอกจากนี้ การเพิ่มแอนิเมชันด้วยเอฟเฟกต์การเลื่อนของ Divi ยังทำให้งานออกแบบเหล่านี้มีชีวิตชีวาขึ้นอีกด้วย

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

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

ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณ

อย่าลังเลที่จะปรึกษาคำแนะนำของเราเกี่ยวกับ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...