เราทุกคนทราบดีว่าการปรับแต่งที่ไร้ขีดจำกัดด้วย Elementor Website Builder ด้วยการปรับแต่งดังกล่าว เราจึงสามารถปรับปรุงประสบการณ์ผู้ใช้และสร้างสรรค์สิ่งที่เราสร้างขึ้นได้
เอฟเฟกต์ Logo Swap on Hover คือเมื่อผู้ใช้วางเคอร์เซอร์บนโลโก้ที่วางบนเว็บไซต์ของคุณ มันจะเปลี่ยนรายละเอียดโดยอัตโนมัติ เช่น สี รูปร่าง หรือเค้าร่าง ในบทช่วยสอนนี้ เราจะทำความเข้าใจวิธีสร้างการสลับโลโก้บนเอฟเฟกต์โฮเวอร์ด้วย Elementor
วิธีสร้างการสลับโลโก้บนเอฟเฟกต์โฮเวอร์โดยใช้ Elementor
คุณรู้อยู่แล้วว่าเอฟเฟกต์คืออะไรและมีความคิดในใจเกี่ยวกับสิ่งที่คุณต้องการสร้าง ไปต่อและดูว่าจะเป็นอย่างไร
ในการเริ่มต้น ให้เพิ่ม ส่วนด้านใน สำหรับวิดเจ็ต
สร้างเว็บไซต์ที่น่าทึ่ง
ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด
เริ่มเลย
ถัดไป คุณต้องเพิ่ม คอลัมน์ ในส่วนที่คุณสร้างขึ้นครั้งแรก สำหรับบทช่วยสอนนี้ เราจะ ใช้โครงสร้างสองคอลัมน์
จากนั้นลากและวาง วิดเจ็ตรูปภาพ ลงในคอลัมน์ที่คุณสร้างขึ้น
เพื่อให้ได้ผล คุณจะต้องมีรูปภาพสองรูป รายการหนึ่งจะแสดงตามปกติ ในขณะที่อีกรายการหนึ่งจะแสดงเมื่อผู้ใช้วางเคอร์เซอร์
คุณสามารถใช้โลโก้เดียวกันได้สองรูปแบบ หรือใช้รูปภาพสองรูปที่ต่างกันโดยสิ้นเชิง ความเป็นไปได้นั้นไร้ขีดจำกัด
หลังจากการเลือกรูปภาพ ในฟิลด์ CSS ที่กำหนดเอง ให้ วางโค้ด CSS ต่อไปนี้เพื่อให้การสลับโลโก้บนเอฟเฟกต์โฮเวอร์ทำงาน
selector img:hover{
content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
opacity: .50;
transition-duration: 3s;
}และเสร็จแล้ว! เผยแพร่เพจของคุณเพื่อดูตัวอย่างและดูว่าเอฟเฟกต์จะมีลักษณะอย่างไรบนเว็บไซต์ของคุณ กลับมาทำการเปลี่ยนแปลงหากต้องการ
นี่คือวิธีที่คุณสามารถสร้างเอฟเฟกต์ Logo Swap On Hover ด้วย Elementor อย่าลืมเข้าร่วมกับเราบน Facebook และ Twitter เพื่อติดตามข่าวสารล่าสุดเกี่ยวกับโพสต์ของเรา
