จะเพิ่มเอฟเฟกต์โฮเวอร์รูปภาพใน WordPress 2024 ได้อย่างไร [4 ขั้นตอนที่ดีที่สุดในการติดตาม]

เอฟเฟกต์โฮเวอร์ใน WordPress คืออะไร? เว็บไซต์ของคุณควรถูกสร้างขึ้นให้มีเอกลักษณ์ มันยากเมื่อคนอื่นคิดเหมือนกัน ข่าวดีก็คือเทคโนโลยีร่วมสมัยทำให้การออกแบบเว็บไซต์ง่ายขึ้น

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

จะเพิ่มเอฟเฟกต์โฮเวอร์รูปภาพใน WordPress ได้อย่างไร? 4 ขั้นตอนที่ดีที่สุด

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

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

เมื่อใช้ปลั๊กอิน สิ่งต่างๆ จะซับซ้อนน้อยลงอย่างเห็นได้ชัด

พื้นที่ ฟรีปลั๊กอิน WordPress Beaver Builder ลดความซับซ้อนของกระบวนการสร้างเว็บไซต์ WordPress ที่ทำงานได้อย่างสมบูรณ์และสวยงาม

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

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

ขอแนะนำให้คุณใช้ธีม Beaver Builder ของเรา ใช้เทมเพลตโพสต์ WordPress เพื่อสร้างโพสต์ประเภทต่างๆ อย่างรวดเร็ว รวมถึงหน้าต่างๆ

ด้วยวิธีนี้ แทนที่จะกังวลเกี่ยวกับการพัฒนาเลย์เอาต์ คุณสามารถมุ่งความสนใจไปที่การสร้างคุณสมบัติที่น่าสนใจ เช่น เอฟเฟกต์โฮเวอร์ได้ ในทางกลับกัน คุณสามารถใช้ Beaver Builder กับธีม WordPress ใดก็ได้ที่คุณเลือก

ขั้นตอนที่ 1: การเพิ่มโมดูลภาพถ่าย

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

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

ขั้นตอนที่ 2: เปิดใช้งานโมดูลภาพถ่าย

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

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

ขั้นตอนที่ 3: เพิ่มคลาสที่กำหนดเอง

หลังจากตั้งค่าโมดูลรูปภาพแล้ว ให้เลือกขั้นสูง นี้เป็น องค์ประกอบ HTML.

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

ขั้นตอนที่ 4: รวมเอฟเฟกต์ CSS

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

เลือกการตั้งค่าส่วนกลางจากแถบชื่อเรื่องด้านซ้าย ตอนนี้เพิ่มโค้ด CSS ลงในแท็ก CSS

ในทุกหน้า Beaver Builder ให้ไปที่ Tools > Global Settings และบันทึก นอกจากนี้ เนื้อหาที่ไม่ใช่ Beaver Builder ยังอยู่ภายใต้กฎ CSS ของคุณ

หน้าเดียวใน LayoutCSS&Jscript บันทึกการแก้ไข CSS ของคุณ ดู EFF เลื่อนเมาส์ไปเหนือภาพเพื่อทดสอบ

ใช้เอฟเฟ็กต์กับแถวหรือคอลัมน์ของภาพถ่าย

ลิงค์ด่วน:

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

สรุป: จะเพิ่มเอฟเฟกต์โฮเวอร์รูปภาพใน WordPress ได้อย่างไร?

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

คุณมีเอฟเฟกต์โฮเวอร์ที่คุณต้องการใช้หรือไม่? วางไว้ในพื้นที่แสดงความคิดเห็นด้านล่าง!