วิธีเปลี่ยนภาพพื้นหลังด้วย Gif แบบเคลื่อนไหวบน Hover

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

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

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

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

แอบมอง

ดาวน์โหลดพื้นหลัง GIF บนเค้าโครงโฮเวอร์ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

สิ่งที่คุณต้องการเพื่อเริ่มต้น

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

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

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

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

ส่วนที่ 1: การสร้างภาพหน้าจอและ GIF

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

เมื่อสร้างภาพสองภาพแล้ว เราก็สามารถใช้ภาพนิ่งเป็นภาพพื้นหลังเริ่มต้นได้ จากนั้นเราสามารถเปลี่ยนภาพพื้นหลังเป็นภาพ gif เมื่อวางเมาส์เหนือโมดูลประกาศ

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

การสร้างภาพนิ่งหน้าจอ

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

จากนั้นคลิกและลากพื้นที่จับภาพไปรอบๆ พื้นที่ของหน้าจอที่คุณต้องการจับภาพเป็นภาพ

บันทึกภาพลงในคอมพิวเตอร์ของคุณ จากนั้นเปิดกล่อง Snagit Capture อีกครั้งแล้วเลือกจับภาพวิดีโอโดยเลือกภูมิภาคของหน้าจอ ในการเริ่มต้นการจับภาพหน้าจอ ให้คลิกปุ่มจับภาพ

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

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

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

ในป๊อปอัป Create Gif ให้แก้ไขการตั้งค่าเอาต์พุตตามต้องการ ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานการวนซ้ำเพื่อให้ gif ของคุณทำซ้ำ จากนั้นคลิกปุ่มสร้าง

เมื่อสร้าง gif แล้ว ให้บันทึกลงในคอมพิวเตอร์ของคุณ

ตอนนี้คุณมีภาพนิ่งและภาพ gif ที่พร้อมจะเพิ่มลงในการออกแบบของคุณใน Divi

ส่วนที่ 2: การสร้าง Blurb ที่เปลี่ยนภาพพื้นหลังด้วยภาพเคลื่อนไหว Gif บน Hover

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

ในคอลัมน์ 1 เพิ่มโมดูลการนำเสนอ

จากนั้นอัปเดตการตั้งค่าเนื้อหาดังนี้:

เนื้อหา: “ข้อความเนื้อหาอยู่ที่นี่”
ใช้ไอคอน: ใช่
ไอคอน: คลาวด์ (ดูภาพหน้าจอ)

เพิ่มภาพพื้นหลังเริ่มต้น

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

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

เพิ่มภาพ Gif พื้นหลังโฮเวอร์

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

จัดแต่งทรงผมโมดูล Blurb

จัดรูปแบบโมดูลการนำเสนอต่อไปโดยอัปเดตการตั้งค่าการออกแบบต่อไปนี้:

สีไอคอน: #6bb962
ไอคอนวงกลม: ใช่
สีวงกลม: #ffffff
การจัดตำแหน่งข้อความ: center
แบบอักษรของชื่อเรื่อง: Lora
ขนาดข้อความชื่อเรื่อง: 34px
Padding: บน 50%, 5% ล่าง, 3% ซ้าย, 3% ขวา

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

สุดท้ายให้เงากล่องประกาศเมื่อโฮเวอร์ดังนี้:

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

ผลสุดท้าย

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

และนี่คือการออกแบบบนแท็บเล็ตและโทรศัพท์

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

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

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

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

ไชโย!