วิธีเพิ่มเอฟเฟกต์โฮเวอร์ของภาพใน WordPress (5 วิธีง่ายๆ)

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

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

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

วิธีเพิ่มเอฟเฟกต์โฮเวอร์ของภาพใน WordPress

ในบทความนี้ เราได้รวบรวม 5 วิธีง่ายๆ ในการเพิ่มเอฟเฟกต์โฮเวอร์ให้กับไซต์ของคุณ เลือกวิธีที่เหมาะกับคุณมากที่สุด!

วิธีที่ 1: ใช้ปลั๊กอิน

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

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

การใช้ปลั๊กอินเช่น Image Hover Effects Ultimate ทำให้กระบวนการนี้ง่ายขึ้นมาก ปลั๊กอินนี้ให้บริการฟรีสำหรับทุกคนและมีเอฟเฟกต์หลากหลายสำหรับแต่ละองค์ประกอบ หากต้องการเริ่มต้นใช้งานเพียงติดตั้งโดยทำตามบทช่วยสอนด้านล่าง: 

การติดตั้งปลั๊กอิน

• เปิดพื้นที่ผู้ดูแลระบบ WordPress ของคุณ.
• คลิก เพิ่มปลั๊กอิน จากเมนู ปลั๊กอิน ในแถบด้านข้าง

• พิมพ์ เอฟเฟกต์ภาพโฮเวอร์อัลติเมท ในแถบค้นหา

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

การใช้ปลั๊กอิน Image Hover Effects WordPress

• เมื่อติดตั้งปลั๊กอินแล้ว คุณจะเห็นเมนู ภาพโฮเวอร์ ใหม่ในแดชบอร์ดของคุณ

• คลิกเมนูเพื่อเปิดการตั้งค่าปลั๊กอิน. 

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

เมื่อคุณพบอันที่คุณชอบ คลิก สร้างสไตล์

• กล่องป๊อปอัพจะปรากฏขึ้น ป้อนชื่อในช่อง ชื่อ และเลือกรูปแบบเอฟเฟกต์ (ที่ 1, 2 หรือ 3) จากนั้นคลิก บันทึก เพื่อดำเนินการต่อ
• คุณจะถูกนำไปยังหน้าใหม่ที่คุณสามารถปรับแต่งการตั้งค่าได้ เช่น ความสูง ความกว้าง และความทึบแสง ลองเล่นดูเพื่อหาสิ่งที่ดูดีที่สุด.

• เมื่อคุณพอใจกับการตั้งค่าแล้ว คลิก แก้ไข เพื่อปรับแต่งภาพของคุณ

• ป๊อปอัปอื่นจะปรากฏขึ้น คุณสามารถปรับแต่งตำแหน่งการขยายได้ที่นี่. 

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

• หากต้องการใช้เอฟเฟกต์กับไซต์ของคุณ ให้คัดลอกและวาง shortcode ลงในโพสต์หรือหน้าเว็บของคุณ. 

• ตอนนี้เอฟเฟกต์โฮเวอร์ภาพแบบง่ายของคุณพร้อมใช้งานในทุกส่วนของไซต์ของคุณแล้ว. 

วิธีที่ 2: การใช้ CSS

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

เราจะเริ่มต้นด้วยสิ่งที่ง่ายๆ เช่น เอฟเฟกต์ขีดเส้นใต้เมื่อวางเมาส์ หากคุณต้องการเพิ่มเอฟเฟกต์นี้ลงในธีมของคุณ ให้ทำตามขั้นตอนง่ายๆ ด้านล่าง:

• ไปที่โพสต์ที่คุณต้องการเพิ่มเอฟเฟกต์โฮเวอร์.
• เพิ่มภาพโดยคลิกที่บล็อก หน้าปก จาก +

• ป้อนเนื้อหาของคุณลงในบล็อกหน้าปก ที่นี่เราจะเพิ่มชื่อเรื่องและปุ่ม

• ตั้งค่าฟอนต์และสไตล์ตามที่คุณต้องการ.
• บันทึกหน้าเป็นฉบับร่าง.
• ต่อไป ไปที่ ลักษณะที่ปรากฏ ในเมนูแดชบอร์ดของคุณ

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

body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f0f0f; margin: 0; font-family: Arial, sans-serif; } .hover-underline { font-size: 2rem; color: #ffffff; position: relative; display: inline-block; } .hover-underline::after, .hover-underline::before { content: ''; position: absolute; width: 100%; height: 2px; background: linear-gradient(to right, #ff0000, #00ffff); bottom: -5px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease-out; } .hover-underline::before { top: -5px; transform-origin: left; } .hover-underline:hover::after, .hover-underline:hover::before { transform: scaleX(1); }
 

• คลิก เผยแพร่ เพื่อบันทึกโค้ด

• ตอนนี้กลับไปที่โพสต์ของคุณและเลือกข้อความที่คุณต้องการใช้เอฟเฟกต์ขีดเส้นใต้.
• เปิดส่วนขั้นสูง ในแถบด้านข้างของบล็อกและป้อนunderline-hover ในช่องคลาส CSS เพิ่มเติม

• บันทึกหน้าและพรีวิวเพื่อดูเอฟเฟกต์. 

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

วิธีที่ 3: ใช้ตัวสร้างหน้า (เช่น Elementor)

ตัวสร้างหน้า เช่น Elementor ช่วยให้คุณสร้างเว็บไซต์ของคุณด้วยความคิดสร้างสรรค์มากมาย มีเอฟเฟกต์โฮเวอร์ในตัว พร้อมใช้งานเพื่อทำให้ไซต์ของคุณมีชีวิตชีวาโดยไม่ต้องใช้การเขียนโค้ด.

คุณยังสามารถใช้มันเพื่อสร้างเอฟเฟกต์โฮเวอร์รูปภาพใน WordPress ในส่วนนี้ เราจะทดลองใช้เอฟเฟกต์โฮเวอร์ในตัวภายในตัวสร้างหน้าเอง.

เพื่อตั้งค่าผลลัพธ์:

• เปิด Elementor ตัวแก้ไขจากแดชบอร์ดผู้ดูแลระบบ
• เพิ่มรูปภาพของคุณ.

• เลือกภาพของคุณ จากนั้นไปที่แท็บ รูปแบบ
• เลื่อนลงและคลิก โฮเวอร์

• ใน เมนูแบบเลื่อนลงภาพเคลื่อนไหวเมื่อวางเมาส์ คุณจะพบเอฟเฟกต์ที่หลากหลายพร้อมใช้งาน

• เราได้เลือกเอฟเฟกต์ Grow เป็นตัวอย่าง คุณสามารถปรับแต่งระยะเวลาการเปลี่ยน ความทึบแสง และการตั้งค่าอื่นๆ ให้ตรงกับการออกแบบไซต์ของคุณ

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

วิธีที่ 4: ใช้ปลั๊กอิน Flipbox

หากคุณกำลังมองหาวิธีลัด คุณสามารถติดตั้งปลั๊กอิน flipbox ได้ เอฟเฟกต์ flipbox คือเมื่อภาพพลิกเพื่อแสดงเนื้อหาที่ด้านหน้าหรือด้านหลังเมื่อคุณวางเมาส์เหนือ.

เอฟเฟกต์นี้เหมาะสำหรับภาพถ่ายที่คุณสามารถแสดงภาพถ่ายที่ด้านหน้าและรายละเอียดกล้องที่ด้านหลัง แต่ความเป็นไปได้ไม่มีที่สิ้นสุด.

• จากแดชบอร์ด WordPress ของคุณ คลิกที่เมนู ปลั๊กอิน จากนั้นเลือก เพิ่มปลั๊กอิน
• พิมพ์ ฟลิปบ็อกซ์ - Awesome Flip Boxes Image Overlay ในแถบค้นหา

• คลิกติดตั้งทันที จากนั้นเปิดใช้งาน ปลั๊กอิน

• ในการสร้างฟลิปบ็อกซ์ ไปที่ Flip Box เมนูและคลิก Create New
• เลือกภาพเคลื่อนไหวที่คุณชอบ เมื่อคุณพบแล้วให้คลิก สร้างสไตล์

• ป๊อปอัปจะปรากฏขึ้น เลือกรูปแบบที่ต้องการ (ที่ 1, 2 หรือ 3) และป้อนชื่อเรื่อง. 

• คลิกบันทึก เพื่อดำเนินการต่อ
• จากนั้นคุณจะถูกนำไปที่เมนูปรับแต่งซึ่งคุณสามารถกำหนดเอฟเฟกต์และเพิ่มเนื้อหาของคุณได้.

• เลื่อนลงเพื่อค้นหาแท็บ ตัวอย่าง คลิก แก้ไข เพื่อปรับแต่งเนื้อหาสำหรับทั้งด้านหน้าและด้านหลังของฟลิปบ็อกซ์

• เมื่อเสร็จแล้วให้คลิก ส่ง เพื่อบันทึก

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

• และนั่นแหล่ะ นี่คือผลิตภัณฑ์ที่เสร็จสมบูรณ์! 

วิธีที่ 5: การใช้บล็อกกูเทนแบร์ก

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

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

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

• ไปที่โพสต์หรือหน้าที่คุณต้องการเพิ่มเอฟเฟกต์โฮเวอร์.
• คลิก + เพื่อเพิ่มบล็อกใหม่ จากนั้นเลือกบล็อก หน้าปก

• ภายในบล็อกหน้าปก ให้เพิ่มบล็อกย่อหน้า

• ป้อนชื่อเรื่องและคำอธิบายสั้นๆ.
• ปรับแต่งขนาดฟอนต์ ความทึบ การจัดแนว และสีตามความต้องการ.

• จากนั้นเลือก Cover บล็อกเพื่อเพิ่มคลาส CSS ที่กำหนดเอง
• เปิด ขั้นสูง ส่วนในแถบด้านข้างขวา
• ป้อน fade-hover-effect ใน ฟิลด์คลาส CSS เพิ่มเติม

• หลังจากนั้น ให้บันทึกหน้าเป็นฉบับร่าง.

• ไปที่เมนูปลั๊กอิน และเลือกปลั๊กอินข้อมูลโค้ดของคุณ ในตัวอย่างนี้ เราใช้WPCode
• สร้างชิ้นส่วน CSS ใหม่จากนั้นวางโค้ดต่อไปนี้:

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

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

คุณสามารถนำเอฟเฟกต์นี้กลับมาใช้ใหม่ได้โดยการเพิ่มคลาส fade-hover-effect ให้กับบล็อกหรือรูปภาพใดๆ แต่ถ้าคุณกำลังจัดการกับรูปภาพจำนวนมาก ลองพิจารณาใช้ปลั๊กอินเช่น WP Media Folder เพื่อจัดระเบียบไลบรารีสื่อของคุณให้อยู่ในโฟลเดอร์ ทำให้ง่ายต่อการค้นหาและนำเนื้อหาที่เกี่ยวข้องกลับมาใช้ใหม่

การใช้เอฟเฟกต์มากเกินไปส่งผลกระทบต่อประสิทธิภาพหรือไม่?

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

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

สรุป

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

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