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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• จากนั้น คลิก ปรับแต่ง และไปที่ 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 ตัวแก้ไขจากแดชบอร์ดผู้ดูแลระบบ
• เพิ่มรูปภาพของคุณ.

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

• ในเมนูดรอปดาวน์ Hover Animation คุณจะพบเอฟเฟกต์หลากหลายที่พร้อมใช้งาน. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• ไปที่ Plugins เมนูและเลือกปลั๊กอินโค้ดสแนปเพตของคุณ ในตัวอย่างนี้ เรากำลังใช้ 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 ที่กำหนดเอง หรือตัวสร้างหน้า คุณมีอิสระในการเลือกสิ่งที่เหมาะกับคุณ ทดลองใช้สไตล์ต่างๆ เพื่อหาสไตล์ที่เหมาะกับไซต์ของคุณมากที่สุด