ตกแต่งหน้าของคุณด้วยการเปลี่ยนรูปร่างบนโฮเวอร์ด้วย Divi

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

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

ไปกันเถอะ!

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน เรามาดูตัวอย่างสั้นๆ สองตัวอย่างที่เราจะสร้างใหม่ตั้งแต่ต้น

ตัวอย่าง #1

ตัวอย่าง #2

ดาวน์โหลดโอเวอร์เลย์รูปภาพที่มีรูปทรง

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

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

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

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

ดาวน์โหลด

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

มาเริ่มสร้างกันเลย!

เพิ่มมาตราใหม่

สีพื้นหลัง

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

• สีพื้นหลัง: #000000

ล้น

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

overflow: hidden;

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและอนุญาตให้แถวใช้ความกว้างทั้งหมดของหน้าจอ

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

เพิ่มโมดูลรูปภาพใน Row

อัปโหลดการวางซ้อนรูปภาพที่มีรูปทรง

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

สีพื้นหลังเริ่มต้น

ไปที่การตั้งค่าพื้นหลังของ Image Module และเพิ่มสีพื้นหลังเริ่มต้นต่อไปนี้:

• สีพื้นหลัง: #6a00ff

โฮเวอร์สีพื้นหลัง

เปลี่ยนสีพื้นหลังบนโฮเวอร์โดยใช้รหัสสีต่อไปนี้:

• สีพื้นหลัง: #ffa216

พื้นหลังไล่โทนสี

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

• สี 1: #ff2841
• สี 2: rgba (255,255,255,0)
• ทิศทางการไล่ระดับสี: 168deg
• ตำแหน่งสุดท้าย: 68%

ขนาด

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

• บังคับเต็มความกว้าง: ใช่

ระยะห่าง

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

• ขอบบน: -22vw (เดสก์ท็อป & แท็บเล็ต), 0vw (โทรศัพท์)

เริ่มต้นการแปลงหมุน

ตอนนี้เราสามารถเริ่มเปลี่ยนโมดูลได้แล้ว! เพิ่มการตั้งค่าการหมุนของการแปลงเริ่มต้นต่อไปนี้ไปยัง Image Module:

• ศูนย์: 359deg

โฮเวอร์ แปลงร่าง หมุน

และเปลี่ยนค่าเหล่านี้เมื่อวางเมาส์เหนือเพื่อสร้างรูปร่างที่เปลี่ยนแปลง

• ซ้าย: 250deg
• ศูนย์: 320deg

CSS ID

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

การเปลี่ยนผ่าน

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

• ระยะเวลาการเปลี่ยนภาพ: 950ms

เพิ่มโมดูลข้อความ #1 ไปที่ Row

เพิ่มเนื้อหา H2

โมดูลต่อไปที่เราต้องการคือโมดูลข้อความ เพิ่มเนื้อหา H2 ที่คุณเลือก

การตั้งค่าข้อความ H2

จากนั้นไปที่แท็บออกแบบและแก้ไขการตั้งค่าข้อความ H2

• แบบอักษรหัวเรื่อง 2: Didact Gothic
• ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
• การจัดแนวข้อความหัวเรื่อง 2: Center
• หัวเรื่อง 2 สีข้อความ: #ffffff
• หัวเรื่อง 2 ขนาดข้อความ: 7vw
• ส่วนหัว 2 ความสูงของบรรทัด: 0.9em

ระยะห่าง

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

• ขอบบน: -68vw
• ระยะขอบล่าง: 8vw
• ระยะขอบซ้าย: 29vw
• ระยะขอบขวา: 29vw

เพิ่มโมดูลข้อความ #2 ไปที่ Row

เพิ่มเนื้อหา

เพิ่มโมดูลข้อความอื่นด้านล่างโมดูลก่อนหน้าและป้อนเนื้อหาย่อหน้าที่คุณเลือก

การตั้งค่าข้อความ

จากนั้นไปที่แท็บออกแบบและแก้ไขการตั้งค่าข้อความ

• แบบอักษรข้อความ: เปิด Sans
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1.8em
• การวางแนวข้อความ: ศูนย์

ระยะห่าง

เพิ่มค่าระยะขอบที่กำหนดเองด้วย

• ระยะขอบล่าง: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 6vw (โทรศัพท์)
• ระยะขอบซ้าย: 30vw (เดสก์ท็อป), 10vw (แท็บเล็ตและโทรศัพท์)
• ระยะขอบขวา: 30vw (เดสก์ท็อป), 10vw (แท็บเล็ตและโทรศัพท์)

เพิ่มโมดูลตัวแบ่งให้กับ Row

ทัศนวิสัย

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

• แสดงตัวแบ่ง: ใช่

สี

จากนั้นไปที่แท็บออกแบบและเปลี่ยนสีของตัวแบ่ง

• สี: #ffffff

ขนาด

แก้ไขค่าการปรับขนาดด้วย

• น้ำหนักตัวแบ่ง: 7px
• ความกว้าง: 15%
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

และเพิ่มแผ่นรองด้านล่างแบบกำหนดเอง

• ขอบล่าง: 5vw

โคลนทั้งส่วน

สู่ตัวอย่างที่สอง! โคลนส่วนที่คุณเพิ่งทำเสร็จ

เปลี่ยนโมดูลรูปภาพ

อัปโหลดการวางซ้อนรูปภาพที่มีรูปทรงใหม่

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

เปลี่ยนสีพื้นหลังเริ่มต้น

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

• สีพื้นหลัง: #2d007c

เปลี่ยนสีพื้นหลังโฮเวอร์

เปลี่ยนสีพื้นหลังโฮเวอร์เช่นกัน

• สีพื้นหลัง: #008089

เปลี่ยนพื้นหลังไล่ระดับ

พร้อมกับพื้นหลังไล่ระดับ

• สี 1: #0c0c0c
• สี 2: rgba (255,255,255,0)
• ทิศทางการไล่ระดับสี: 168deg
• ตำแหน่งสุดท้าย: 68%

เปลี่ยนการตั้งค่าการหมุนเริ่มต้นของการเปลี่ยนแปลง

เรากำลังเปลี่ยนเอฟเฟกต์การแปลงร่างด้วย ไปที่การตั้งค่าการแปลงและเปลี่ยนค่าการหมุนของการแปลงเริ่มต้น

• ซ้าย: 270deg
• ศูนย์: 359deg

เปลี่ยนการตั้งค่าการหมุนเปลี่ยนโฮเวอร์

แก้ไขค่าเดียวกันเหล่านั้นเมื่อวางเมาส์เหนือ

• ซ้าย: 192deg
• ศูนย์: 280deg
• ขวา: 15deg

เพิ่มรหัสที่กำหนดเองไปยังเพจ

เปิดการตั้งค่าหน้า

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

เพิ่มโค้ด CSS

จากนั้นไปที่แท็บขั้นสูงและเพิ่มโค้ด CSS ต่อไปนี้

.hover-state:hover {
z-index: -99; }

เรากำลังใช้คลาส CSS ที่เรากำหนดให้กับส่วนต่างๆ ตลอดบทช่วยสอน

ดูตัวอย่าง

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

ตัวอย่าง #1

ตัวอย่าง #2

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

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