วิธีการควบคุมเอฟเฟกต์โฮเวอร์ใน Divi 5 (อัลฟ่าสาธารณะ)

เผยแพร่แล้ว: 2024-10-25

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

เรียนรู้เพิ่มเติมเกี่ยวกับ Divi 5 Public Alpha และวิธีดาวน์โหลด

ดาวน์โหลด Divi 5 Public Alpha

สารบัญ
  • 1 การทำความเข้าใจเอฟเฟกต์โฮเวอร์ใน Divi 5 (อัลฟ่าสาธารณะ)
    • 1.1 การปรับปรุงที่สำคัญในเอฟเฟกต์โฮเวอร์ของ Divi 5
  • 2 วิธีการควบคุมเอฟเฟกต์โฮเวอร์ใน Divi 5 (อัลฟ่าสาธารณะ)
    • 2.1 1. เข้าถึงและแก้ไขการตั้งค่าสถานะโฮเวอร์ทั้งหมดในที่เดียว
    • 2.2 2. จัดการการตั้งค่าโฮเวอร์ที่ไม่รองรับได้อย่างง่ายดาย
    • 2.3 3. เพลิดเพลินกับการตอบรับด้วยภาพแบบเรียลไทม์ทันที
    • 2.4 4. แก้ไขเอฟเฟกต์โฮเวอร์อย่างรวดเร็วทั่วทั้งเพจของคุณ
    • 2.5 5. ดูตัวอย่างเอฟเฟกต์โฮเวอร์ด้วยความมั่นใจในส่วนหน้า
  • 3 วิธีสร้างเอฟเฟกต์โฮเวอร์ใน Divi 5: ตัวอย่างด่วน
    • 3.1 1. เพิ่มโมดูล
    • 3.2 2. เข้าถึงการตั้งค่าโฮเวอร์
    • 3.3 3. ปรับแต่งเอฟเฟกต์โฮเวอร์
  • 4 Divi 5 เป็นตัวเปลี่ยนเกมสำหรับการออกแบบเอฟเฟกต์โฮเวอร์

ทำความเข้าใจกับเอฟเฟกต์โฮเวอร์ใน Divi 5 (อัลฟ่าสาธารณะ)

ใน Divi 5 การเปลี่ยนแปลงที่สำคัญประการหนึ่งเกี่ยวกับเอฟเฟกต์โฮเวอร์คือตอนนี้ง่ายต่อการนำไปใช้และเข้าถึงได้มากขึ้น ใน Divi 4 คุณต้องเปิดใช้งานเอฟเฟกต์โฮเวอร์สำหรับแต่ละองค์ประกอบภายในการตั้งค่าด้วยตนเอง กระบวนการนี้อาจยุ่งยาก เนื่องจากคุณต้องค้นหาตัวเลือกเฉพาะและเปิดใช้งานสถานะโฮเวอร์ก่อนที่จะใช้การเปลี่ยนแปลงใดๆ

การใช้การตั้งค่าโฮเวอร์ใน divi 4

ด้วยอินเทอร์เฟซใหม่ของ Divi 5 เอฟเฟกต์โฮเวอร์ โหมดตอบสนองและการแก้ไขแบบติดหนึบได้รับการบูรณาการอย่างสมบูรณ์ ทำให้สามารถเข้าถึงได้ทันที ไม่ต้องเปิดใช้งานทีละรายการอีกต่อไป!

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

สลับระหว่างโหมดโฮเวอร์และโหมดปกติได้อย่างง่ายดาย

การปรับปรุงที่สำคัญในเอฟเฟกต์โฮเวอร์ของ Divi 5

นี่คือการปรับปรุงที่สำคัญบางส่วนของ Divi 5 ที่ทำให้การใช้และแก้ไขเอฟเฟกต์โฮเวอร์ทำได้เร็วและง่ายขึ้น:

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

การปรับปรุงเหล่านี้ช่วยปรับปรุงกระบวนการสร้างการออกแบบเชิงโต้ตอบแบบไดนามิกพร้อมเอฟเฟกต์โฮเวอร์

ต้องการเจาะลึกการตั้งค่าใหม่หรือไม่? ลองดูการทำความรู้จักอินเทอร์เฟซ Divi 5 เพื่อดูว่าอินเทอร์เฟซดังกล่าวจะทำให้ขั้นตอนการออกแบบของคุณง่ายขึ้นได้อย่างไร

รับ Divi 5 Public Alpha

วิธีการควบคุมเอฟเฟกต์โฮเวอร์ใน Divi 5 (อัลฟ่าสาธารณะ)

1. เข้าถึงและแก้ไขการตั้งค่าสถานะโฮเวอร์ทั้งหมดในที่เดียว

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

การตั้งค่าโฮเวอร์ในแถบด้านข้างขวา

ซึ่งจะทำให้การเพิ่มเอฟเฟ็กต์โฮเวอร์แบบกำหนดเองหรือแบบซับซ้อนดำเนินการได้เร็วขึ้น

2. จัดการการตั้งค่าโฮเวอร์ที่ไม่รองรับได้อย่างง่ายดาย

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

ทำให้การตั้งค่าโฮเวอร์ที่ไม่รองรับเป็นสีเทาใน divi 5

3. เพลิดเพลินกับการตอบรับด้วยภาพแบบเรียลไทม์ทันที

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

4. แก้ไขเอฟเฟกต์โฮเวอร์อย่างรวดเร็วทั่วทั้งเพจของคุณ

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

5. ดูตัวอย่างเอฟเฟกต์โฮเวอร์ด้วยความมั่นใจในส่วนหน้า

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

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

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

ดาวน์โหลด Divi 5 Public Alpha

วิธีสร้างเอฟเฟกต์โฮเวอร์ใน Divi 5: ตัวอย่างด่วน

ตอนนี้เราได้กล่าวถึงคุณสมบัติหลักๆ ของเอฟเฟกต์โฮเวอร์ของ Divi 5 แล้ว เรามาดูตัวอย่างสั้นๆ เพื่อแสดงให้คุณเห็นว่าการสร้างเอฟเฟกต์โฮเวอร์ใน Divi 5 นั้นง่ายเพียงใด:

1. เพิ่มโมดูล

ในตัวสร้างภาพ Divi ให้เพิ่มโมดูลที่คุณต้องการปรับแต่ง สำหรับตัวอย่างนี้ มาเพิ่มปุ่มกัน

เพิ่มปุ่มใน Divi 5

2. เข้าถึงการตั้งค่าโฮเวอร์

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

3. ปรับแต่งเอฟเฟกต์โฮเวอร์

ขณะอยู่ในโหมดโฮเวอร์ คุณสามารถเปลี่ยนคุณสมบัติสไตล์ต่างๆ ได้ เช่น สีพื้นหลัง เส้นขอบ การปรับขนาด หรือภาพเคลื่อนไหว มาเพิ่มเอฟเฟกต์ การแปลง ให้กับปุ่มของเราเพื่อให้ขยายใหญ่ขึ้นเมื่อโฮเวอร์

อย่าลืม. แผงการตั้งค่าแบบง่ายของ Divi 5 มีการควบคุมทั้งหมดในแผงเดียว ดังนั้นให้ทำการเปลี่ยนแปลงตามต้องการ จากนั้นคลิก บันทึก เมื่อดำเนินการเสร็จแล้ว

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

Divi 5 เป็นตัวเปลี่ยนเกมสำหรับการออกแบบเอฟเฟกต์โฮเวอร์

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

พร้อมที่จะยกระดับประสบการณ์ผู้ใช้เว็บไซต์ของคุณแล้วหรือยัง? ดาวน์โหลด Divi 5 Public Alpha วันนี้และเริ่มทดลองใช้เอฟเฟกต์โฮเวอร์ใหม่เพื่อดูการออกแบบของคุณที่มีชีวิตชีวา!

ดาวน์โหลด Divi 5 Public Alpha