วิธีการแปลงหลายองค์ประกอบสำหรับเอฟเฟกต์โฮเวอร์นามธรรมใน Divi

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

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

มาเริ่มกันเลย.

แอบมอง

ดาวน์โหลด Transform Multiple Elements บน Hover Layout ฟรี

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

ไปที่บทช่วยสอนกันไหม

เริ่มต้น

สมัครสมาชิกช่อง Youtube ของเรา

สำหรับบทช่วยสอนนี้ คุณจะต้องมีสิ่งต่อไปนี้:

1. ธีม Divi ติดตั้งและใช้งานอยู่
2. ไม่กี่ภาพ ฉันกำลังใช้รูปภาพจากเค้าโครงที่สร้างไว้ล่วงหน้าซึ่งสามารถเข้าถึงได้จากภายใน Divi Builder

เมื่อคุณพร้อมแล้ว ไปที่แดชบอร์ด WordPress ของคุณ จากนั้นสร้างหน้าใหม่ (หน้า > เพิ่มใหม่) ตั้งชื่อหน้าของคุณ และปรับใช้ Divi Builder เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

ตอนนี้ผืนผ้าใบเปล่าของคุณกำลังรออยู่!

เอฟเฟ็กต์โฮเวอร์นามธรรมสำหรับรูปภาพ

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

นี่คือวิธีการทำ

ขั้นแรกให้สร้างส่วนปกติใหม่ด้วยแถวหนึ่งคอลัมน์

จากนั้นเพิ่มโมดูลรูปภาพในแถว

ถัดไป เพิ่มการอัปโหลดรูปภาพไปยังโมดูล

เพิ่มเอฟเฟกต์โฮเวอร์โมดูลรูปภาพ

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

เปลี่ยนสเกลแกน X และ Y: 110%

เปลี่ยนแกนหมุน Z: 9deg

เปลี่ยนแกน X และ Y เอียง: 3deg

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

การตั้งค่าแถว

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

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

อัปเดตการตั้งค่าแถวดังนี้:

ความกว้างสูงสุด: 400px

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

ช่องว่างภายในที่กำหนดเอง: ด้านบน 0px, ด้านล่าง 0px

ตอนนี้เราต้องเพิ่มภาพพื้นหลังในคอลัมน์แถว ภาพพื้นหลังนี้จะปรากฏในมุมมองเมื่อใดก็ตามที่โมดูลรูปภาพเปลี่ยนเอฟเฟกต์โฮเวอร์เอียงและหมุน

ภาพพื้นหลังของคอลัมน์ 1: [ป้อนรูปภาพ]

อัปเดตแถวด้วยกล่องเงาบนโฮเวอร์ดังนี้:

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวนอนของกล่องเงา: 0px (ค่าเริ่มต้น), -30px (โฮเวอร์)
ตำแหน่งแนวตั้งของกล่องเงา: 0px (ค่าเริ่มต้น), -15px (โฮเวอร์)
สีเงา: #002f66

เงากล่องนี้จะเพิ่มเอฟเฟกต์ของรูปภาพอื่นที่ปรากฏด้านหลังภาพพื้นหลังของแถว ซึ่งจะปรากฏขึ้นเมื่อเราเพิ่มเอฟเฟกต์โฮเวอร์การแปลงที่จะหมุนและเอียงภาพพื้นหลังในมุมมอง

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

เปลี่ยนแกน X และ Y เอียง: -3deg

ผลสุดท้าย

นี่คือผลลัพธ์สุดท้าย

และจะปรับขนาดได้ดีบนมือถือเช่นกัน

เอฟเฟ็กต์โฮเวอร์นามธรรมสำหรับคำกระตุ้นการตัดสินใจ (ตัวอย่างที่ 1)

การตั้งค่าแถว

สร้างส่วนปกติใหม่ด้วยแถวหนึ่งคอลัมน์

จากนั้นอัปเดตการตั้งค่าแถวดังนี้:

คอลัมน์ 1 พื้นหลังไล่ระดับสีซ้าย: rgba(34,43,58,0.71)
คอลัมน์ 1 พื้นหลังไล่ระดับสีขวา: #222b3a
ภาพพื้นหลัง: [แทรกรูปภาพ]
ความกว้างสูงสุด: 400px
ช่องว่างภายในที่กำหนดเอง: ด้านบน 0px, ด้านล่าง 0px

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

การตั้งค่าโมดูลการเรียกร้องให้ดำเนินการ

เปิดการตั้งค่า Call to Action Module และอัปเดตเนื้อหาดังนี้:

หัวข้อ: เดินทางด้วยคะแนน
ข้อความปุ่ม: คลิกที่นี่
เนื้อหา: ในช่วงเวลาจำกัดเท่านั้น
URL ลิงก์ของปุ่ม: # (เพียงเพื่อเปิดใช้งานปุ่มในตอนนี้)
ใช้สีพื้นหลัง: NO

จากนั้นอัปเดตการตั้งค่าการออกแบบสำหรับข้อความและระยะห่างของโมดูล

แบบอักษรของชื่อเรื่อง: Gilda Display
ขนาดข้อความของปุ่ม: 16px
สีข้อความของปุ่ม: #ffb238
ปุ่มสีพื้นหลัง: rgba(0,0,0,0)
ความกว้างของขอบปุ่ม: 0px

ช่องว่างภายในแบบกำหนดเอง: บน 20% ล่าง 20%

ตอนนี้เพิ่มเส้นขอบให้กับโมดูล

ความกว้างของเส้นขอบ: 2px
สีเส้นขอบ: #222b3a

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

เริ่มจากเอฟเฟกต์โฮเวอร์แถวกันก่อน

Row Hover Effects

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

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวนอนของกล่องเงา: 0px (ค่าเริ่มต้น), 90px (โฮเวอร์)
ตำแหน่งแนวตั้งของกล่องเงา: 0px (ค่าเริ่มต้น), 80px (โฮเวอร์)
ความแรงของการกระจายเงาของกล่อง: 0px (ค่าเริ่มต้น), -40px (โฮเวอร์)

Shadow Color: #ffb238

โปรดทราบว่าเงาของกล่องจะสืบทอดตัวเลือกการแปลงที่เราจะเพิ่มต่อไป

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

เปลี่ยนแกนหมุน X (โฮเวอร์): 10deg
เปลี่ยนแกน X เอียง (โฮเวอร์): -4deg
เปลี่ยนแกน Y เอียง (โฮเวอร์): -4deg

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

เอฟเฟกต์การวางเมาส์ของโมดูลการเรียกร้องให้ดำเนินการ

เปิดการตั้งค่าโมดูลการเรียกร้องให้ดำเนินการและกำหนดเอฟเฟกต์โฮเวอร์กล่องเงาดังนี้:

กล่องเงา: ดูภาพหน้าจอ
กล่องเงาตำแหน่งแนวนอน: 0px
ตำแหน่งแนวตั้งของกล่องเงา: 0px (ค่าเริ่มต้น), 30px (โฮเวอร์)
สีเงา: #ffffff

สุดท้าย เพิ่มขนาด หมุน และเอียงคุณสมบัติการแปลงบนโฮเวอร์ดังนี้:
เปลี่ยนสเกลแกน X และ Y (โฮเวอร์): 115%
เปลี่ยนแกนหมุน Z (โฮเวอร์): 9deg
เปลี่ยนแกน X เอียง (โฮเวอร์): 3deg
เปลี่ยนแกน Y เอียง (โฮเวอร์): 3deg

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

ผลสุดท้าย

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

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

เอฟเฟ็กต์โฮเวอร์นามธรรมสำหรับคำกระตุ้นการตัดสินใจ (ตัวอย่างที่ 2)

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

อัปเดตการตั้งค่าแถว

ขั้นแรก อัปเดตการตั้งค่าแถวดังนี้:

เปลี่ยนแกนหมุน Z: -5deg
เปลี่ยนแกน X และ Y เอียง: -4deg

อัปเดตการตั้งค่าโมดูลการเรียกร้องให้ดำเนินการ

ตอนนี้ มาปรับแต่งการตั้งค่าโมดูลดังนี้:

ขั้นแรกให้เอาเส้นขอบออก…

ความกว้างของเส้นขอบ: 0px

จากนั้นอัปเดตกล่องเงาดังนี้:

กล่องเงาตำแหน่งแนวนอน: 0px
ตำแหน่งแนวตั้งเงาของกล่อง: 110px
(ตรวจสอบให้แน่ใจและปิดการใช้งานเอฟเฟกต์โฮเวอร์ที่สืบทอดมาจากการออกแบบก่อนหน้าที่คุณทำซ้ำ)
Shadow Color: #ffb238

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

อัปเดตตัวเลือกการแปลงต่อไปนี้:

เปลี่ยนสเกลแกน X และ Y (โฮเวอร์): 110%
เปลี่ยนแกนหมุน Z (โฮเวอร์): -9deg
เปลี่ยนแกน X เอียง (โฮเวอร์): -3deg
เปลี่ยนแกน Y เอียง (โฮเวอร์): -3deg

การสร้างเค้าโครงกริดสำหรับแถวของคุณ

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

ในการทำเช่นนี้ ก่อนอื่นให้ทำซ้ำแถวที่มีโมดูลของคุณสองสามครั้ง เพื่อให้คุณมีสามแถวในหนึ่งส่วน

จากนั้นเพิ่มระยะขอบแบบกำหนดเองให้กับแต่ละแถว:

ระยะขอบที่กำหนดเอง: บน 50px, ด้านล่าง 50px

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

display: flex;
flex-wrap: wrap;

ตอนนี้คุณมีแถวสามคอลัมน์ที่จะตอบสนองกับขนาดเบราว์เซอร์ของคุณ

ความคิดสุดท้าย

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!