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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

ตัวอย่าง #1

ตัวอย่าง #2

ตัวอย่าง #3

มือถือ

ตัวอย่าง #1

ตัวอย่าง #2

ตัวอย่าง #3

ดาวน์โหลดเอฟเฟกต์โฮเวอร์การแปลงรูปภาพฟรี

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

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

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

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

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

ดาวน์โหลด

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

ขั้นตอนทั่วไป

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

ระยะห่าง

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

• ขอบบน: 200px
• ขอบล่าง: 200px
• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

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

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

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

คอลัมน์ 2 สีพื้นหลัง

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

• คอลัมน์ 2 สีพื้นหลัง: #efefef

ขนาด

ไปที่การตั้งค่าการปรับขนาดถัดไปและอนุญาตให้แถวใช้ความกว้างทั้งหมดของหน้าจอ

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

เพิ่มค่าช่องว่างภายในที่กำหนดเองต่อไปนี้:

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px
• คอลัมน์ที่ 2 ช่องว่างภายในด้านบน: 10vw
• คอลัมน์ที่ 2 ช่องว่างภายใน: 10vw
• คอลัมน์ 2 ช่องว่างภายในด้านซ้าย: 5vw
• คอลัมน์ 2 ช่องว่างภายในด้านขวา: 5vw

เพิ่มโมดูลข้อความ #1 ลงในคอลัมน์ 2

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

ถึงเวลาเริ่มเพิ่มโมดูลต่างๆ ลงในคอลัมน์ 2 โดยเริ่มจากโมดูลข้อความ ป้อนเนื้อหา H2 ที่คุณเลือก

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

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

• หัวข้อ 2 แบบอักษร: Times New Roman
• ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
• หัวเรื่อง 2 สีข้อความ: #0f47ff
• หัวเรื่อง 2 ขนาดข้อความ: 3.5vw

เพิ่มโมดูลตัวแบ่งในคอลัมน์ 2

ทัศนวิสัย

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

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

สี

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

• สี: #ff961e

ขนาด

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

• ตัวแบ่งน้ำหนัก: 1px
• ความกว้าง: 20%
• การจัดตำแหน่งโมดูล: ซ้าย
• ส่วนสูง: 0px

ระยะห่าง

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

• มาร์จิ้นสูงสุด: 1vw
• ระยะขอบล่าง: 1vw

เพิ่มโมดูลข้อความ #2 ลงในคอลัมน์ 2

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

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลข้อความอื่น ป้อนเนื้อหาย่อหน้าที่คุณเลือก

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

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

• แบบอักษรข้อความ: เปิด Sans
• ขนาดตัวอักษร: 0.7vw (เดสก์ท็อป), 1.7vw (แท็บเล็ต), 2.5vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1.5vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 3.5vw (โทรศัพท์)
• การวางแนวข้อความ: Justify

ขนาด

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

• ความกว้าง: 61% (เดสก์ท็อป), 80% (แท็บเล็ตและโทรศัพท์)

ระยะห่าง

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

• อัตรากำไรขั้นต้น: 2vw
• ระยะขอบล่าง: 2vw

เพิ่มโมดูลข้อความ #3 ลงในคอลัมน์ 3

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

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

เพิ่มลิงค์

ดำเนินการต่อโดยเพิ่มลิงก์ไปยัง CTA

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

ไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าข้อความตามลำดับ:

• แบบอักษรข้อความ: Times New Roman
• สีข้อความ: #ff961e
• ขนาดตัวอักษร: 1.5vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 3.5vw (โทรศัพท์)

ขนาด

เปลี่ยนความกว้างของโมดูลในการตั้งค่าการปรับขนาดด้วย

• ความกว้าง: 48%

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 1vw
• ช่องว่างภายใน: 1vw

ชายแดน

เสร็จสิ้นโมดูลข้อความโดยเพิ่มเส้นขอบด้านล่างด้วยการตั้งค่าต่อไปนี้:

• ความกว้างขอบล่าง: 1px
• สีขอบล่าง: #0f47ff

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

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

สร้างตัวอย่างใหม่ #1

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

ปล่อยให้กล่องรูปภาพว่าง

มาเริ่มกันที่ตัวอย่างแรกกันเลย! เพิ่ม Image Module ใหม่ในคอลัมน์แรก และตรวจสอบให้แน่ใจว่าคุณเว้นช่องรูปภาพว่างไว้

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

เปลี่ยนสีพื้นหลังของ Image Module:

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

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

แก้ไขสีพื้นหลังบนโฮเวอร์

• สีพื้นหลัง: rgba(255,150,30,0.65)

ภาพพื้นหลัง

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

• ขนาดภาพพื้นหลัง: ปก
• ตำแหน่งภาพพื้นหลัง: Center
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ
• การผสมผสานภาพพื้นหลัง: แสงอ่อน

ระยะห่าง

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

• แสดงช่องว่างด้านล่างภาพ: ไม่
• ช่องว่างภายในด้านบน: 22vw
• แผ่นรองด้านล่าง: 22vw

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

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

• ขวา: 0deg

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

เปลี่ยนค่านี้เมื่อวางเมาส์เหนือ:

• ขวา: 180deg

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

ในการสร้างผลทันที เราจะลบระยะเวลาการเปลี่ยนแปลง:

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

สร้างตัวอย่างใหม่ #2

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

ปล่อยให้กล่องรูปภาพว่าง

สู่ตัวอย่างที่สอง! อย่าลืมเว้นช่องรูปภาพว่างไว้อีกครั้ง

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

ไปที่การตั้งค่าพื้นหลังและเพิ่มสีพื้นหลัง (โปร่งใสทั้งหมด) ต่อไปนี้:

• สีพื้นหลัง: rgba(255,255,255,0)

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

แก้ไขสีนี้เมื่อวางเมาส์เหนือ:

• สีพื้นหลัง: rgba(0,0,0,0.65)

ภาพพื้นหลัง

เราใช้ภาพพื้นหลังแทนการอัปโหลดภาพไปยังโมดูลอีกครั้ง รวมภาพพื้นหลังด้วยการตั้งค่าต่อไปนี้:

• ขนาดภาพพื้นหลัง: ปก
• ตำแหน่งภาพพื้นหลัง: Center
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ
• การผสมผสานภาพพื้นหลัง: แสงอ่อน

ระยะห่าง

จากนั้นไปที่การตั้งค่าระยะห่างและแก้ไขช่องว่างภายในด้านบนและด้านล่าง:

• แสดงช่องว่างด้านล่างภาพ: ไม่
• ช่องว่างภายในด้านบน: 22vw
• แผ่นรองด้านล่าง: 22vw

มาตราส่วนการแปลงเริ่มต้น

ตรวจสอบให้แน่ใจว่าค่ามาตราส่วนการแปลงเริ่มต้นยังคงเป็น '100%'

• ขวา: 100%
• ด้านล่าง: 100%

โฮเวอร์แปลงมาตราส่วน

และเปลี่ยนค่าเหล่านี้เมื่อวางเมาส์เหนือเพื่อสร้างเอฟเฟกต์การปรับขนาด

• ขวา: 120%
• ด้านล่าง: 120%

Default Transform Translate

โดยค่าเริ่มต้น เราจะเก็บ '0px' ไว้สำหรับตัวเลือกด้านล่างในการตั้งค่าการแปลการแปลง

• ด้านล่าง: 0px

โฮเวอร์แปลงแปล

แก้ไขค่านี้เมื่อวางเมาส์เหนือเพื่อเปลี่ยนตำแหน่งองค์ประกอบ

• ด้านล่าง: 9vw

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

เรากำลังสร้างการเปลี่ยนแปลงที่เร็วขึ้นเล็กน้อยโดยการเปลี่ยนระยะเวลาการเปลี่ยนในแท็บขั้นสูง:

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

สร้างตัวอย่างใหม่ #3

เปลี่ยนโครงสร้างคอลัมน์

สู่ตัวอย่างต่อไปและสุดท้าย! เริ่มต้นด้วยการปรับเปลี่ยนโครงสร้างคอลัมน์ของแถว

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

อัพโหลด 1:1 รูปภาพ

จากนั้น เพิ่ม Image Module ลงในคอลัมน์แรก ตรงกันข้ามกับสองตัวอย่างแรก เราจะอัปโหลดรูปภาพที่มีอัตราส่วน 1:1 (ความกว้างและความสูงเท่ากัน)

ขนาด

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

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

ระยะห่าง

ลบช่องว่างด้านล่างภาพในการตั้งค่าระยะห่างถัดไป

• แสดงช่องว่างด้านล่างภาพ: ไม่

เส้นขอบเริ่มต้น

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

โฮเวอร์ชายแดน

ลบมุมโค้งมนที่คุณเพิ่มเมื่อวางเมาส์เหนือ

ตัวกรองเริ่มต้น

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

• ความอิ่มตัว: 100%
• ความสว่าง: 46%
• ความทึบ: 3%

โฮเวอร์ฟิลเตอร์

เปิดใช้งานตัวเลือกโฮเวอร์ในแต่ละการตั้งค่าที่แก้ไขแล้วใช้ค่าต่อไปนี้:

• ความอิ่มตัว: 300%
• ความสว่าง: 46%
• ความทึบ: 100%

มาตราส่วนการแปลงเริ่มต้น

จากนั้นไปที่ตัวเลือกการแปลงและแก้ไขตัวเลือกมาตราส่วนการแปลงเริ่มต้น:

• ขวา: 68%
• ด้านล่าง: 68%

โฮเวอร์แปลงมาตราส่วน

เปลี่ยนค่าเหล่านี้เมื่อวางเมาส์เหนือ

• ขวา: 130%
• ด้านล่าง: 130%

Default Transform Translate

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

• ขวา: 0px
• ด้านล่าง: 0px

โฮเวอร์แปลงแปล

แก้ไขค่าเมื่อโฮเวอร์

• ขวา: 1vw
• ด้านล่าง: 8vw

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

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

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

ดูตัวอย่าง

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

เดสก์ทอป

ตัวอย่าง #1

ตัวอย่าง #2

ตัวอย่าง #3

มือถือ

ตัวอย่าง #1

ตัวอย่าง #2

ตัวอย่าง #3

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

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

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