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

หากคุณไม่รู้ว่าเราจะพูดถึงเรื่องอะไรในวันนี้ เราขอเชิญคุณชมวิดีโอต่อไปนี้:

เปลี่ยนรูปภาพเมื่อวางเมาส์เหนือข้อความด้วย Page Builder Elementor

ถ้าอย่างนั้นเราก็กลับไปดูว่าทำไมเราถึงมาที่นี่

ค้นพบคำแนะนำของเราเกี่ยวกับ:  วิธีการสร้าง Portfolio Effect Card ด้วย Elementor

เพื่อให้บทช่วยสอนนี้สมบูรณ์ คุณจะต้อง Elementor เวอร์ชัน Proเนื่องจากเราจะใช้โค้ด CSS ที่กำหนดเองซึ่งรองรับโดย . เวอร์ชันนี้เท่านั้นElementor.

มาสร้างส่วนที่มี 2 คอลัมน์กัน จากนั้นในแผงด้านข้าง มากำหนด การวางฟอร์ม sur ความสูงขั้นต่ำแล้วก็ ความสูงขั้นต่ำ คลิกเลย VH และตั้งค่าตัวเลื่อนไปที่ 100.

เปลี่ยนรูปภาพเมื่อวางเมาส์เหนือข้อความด้วย Page Builder Elementor

ในแท็บ สไตล์ มาเลือกกันเลย ประเภทพื้นหลัง คลิกที่ คลาสสิกจากนั้นแก้ไข Couleur sur#F9F9F9

เปลี่ยนรูปภาพเมื่อวางเมาส์เหนือข้อความด้วย Page Builder Elementor

ในแท็บ สูง, แก้ไขทั้งหมด ระยะขอบภายใน sur 25

ตอนนี้เรามาเปลี่ยนความกว้างคอลัมน์เป็น 40% สำหรับคอลัมน์ด้านซ้ายและ 60% สำหรับคอลัมน์ทางขวา

เปลี่ยนรูปภาพเมื่อวางเมาส์เหนือข้อความด้วย Page Builder Elementor

ในคอลัมน์ด้านซ้าย ให้ปล่อย a วิดเจ็ตแก้ไขข้อความจากนั้นวางข้อความในนั้นและแก้ไข ขนาดชื่อเรื่อง ข้อความบน หัวข้อ 3.

ในแท็บ สูง, ป้อนเป็น ระยะขอบภายใน 10-25-10-30 ตามลำดับสำหรับ ระยะขอบภายในบน ขวา ล่าง และซ้าย

ในส่วน พื้นหลัง แท็บ สูง, คลิกที่ ภาพรวมจากนั้นเลือก ประเภทพื้นหลัง sur คลาสสิก, เข้ามาเลย สี #DFF5FF et ระยะเวลาการเปลี่ยนผ่าน sur 0.5.

หากวางเมาส์เหนือข้อความ เราจะมีโอกาสค้นพบสีพื้นหลังที่สวยงามเมื่อวางเมาส์เหนือ

ตอนนี้ไปที่ส่วน พรมแดนและคลิกที่ ภาพรวมจากนั้นเลือก ต่อ เพื่อ ประเภทเส้นขอบ et มาปิดการใช้งานลิงค์ระหว่างชายแดน เข้า 4 สำหรับ ขอบซ้าย. มาเลือกสีกัน #002FA7 และเพิ่มระยะเวลาการเปลี่ยนไปที่ 0.5

หากเราวางเมาส์เหนือกล่องข้อความอีกครั้ง เราจะเห็นภาพเคลื่อนไหวที่โดดเด่นยิ่งขึ้นโดยมีเส้นขอบทางด้านซ้าย

ในส่วน ชายแดน, กลับไปที่แท็บกัน ปกติมาเลือกประเภทเส้นขอบกันเถอะ ต่อ, มาปิดการผูกระหว่างเส้นขอบกันเถอะ grab 4 สำหรับขอบด้านซ้ายและทำให้โปร่งใสมาก

หากเราวางเมาส์เหนือข้อความอีกครั้ง เราจะเห็นการเปลี่ยนแปลงที่ราบรื่นมาก

อ่าน: วิธีแสดงข้อความเหนือรูปภาพด้วย Elementor

ทำซ้ำข้อความนี้สองครั้งแล้วเปลี่ยนข้อความของแต่ละรายการ เนื้อหา แบบนี้.

ในคอลัมน์ทางขวา ให้ลาก วิดเจ็ตรูปภาพและแทรกรูปภาพจากห้องสมุดของเรา

เราจะสร้างช่องว่างรอบๆ ภาพนี้โดยไปที่ แท็บขั้นสูง ของคอลัมน์และป้อน 10 – 10 – 10 – 50 สำหรับระยะขอบภายในทั้งหมดของ บน ขวา ล่าง และซ้าย

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

เข้าเรื่องกันเลย สูง จากแท็บขั้นสูงและเพิ่มชื่อคลาสลงในฟิลด์ CSS Classes มาเลย ทั้งหมด-img img-1

ทำซ้ำภาพของเรา 2 ครั้ง

เลือกภาพที่สองแล้วเปลี่ยน img-1 เป็น img-2 แล้วเปลี่ยนภาพเป็นภาพใหม่

ดูเพิ่มเติม: วิธีสร้างแกลเลอรีรูปภาพด้วย Elementor

สำหรับภาพที่สาม ให้เปลี่ยน img-1 เป็น img-3 แล้วเปลี่ยนภาพเป็นภาพใหม่

เปลี่ยนรูปภาพเมื่อวางเมาส์เหนือข้อความด้วย Page Builder Elementor

เลือกส่วนของเราแล้วไปที่แท็บ สูง. ในส่วน CSS ที่กำหนดเองคัดลอกและวางข้อมูลโค้ดต่อไปนี้:

selector .all-img{
    display: none;
}
selector .img-1{
    display: block;
}

(หากคุณไม่มีส่วนนี้ แสดงว่าคุณไม่มีเวอร์ชัน Pro หากต้องการดำเนินการต่อ คุณต้องอัปเกรดเวอร์ชันของคุณ).

เปลี่ยนรูปภาพเมื่อวางเมาส์เหนือข้อความด้วย Page Builder Elementor

มาเลือกโปรแกรมแก้ไขข้อความตัวแรกของเราและไปที่แท็บขั้นสูงและ ส่วนคุณสมบัติ. ในสนาม คุณสมบัติคัดลอกและวางข้อมูลโค้ดต่อไปนี้:

data-showme|img-1

ทำสิ่งนี้กับโปรแกรมแก้ไขข้อความอื่นๆ ในขณะที่เปลี่ยน img-1 เป็น img-2 หรือเป็น img-3

ตอนนี้ มาเพิ่มวิดเจ็ต HTML ในหน้าของเรากัน คัดลอกและวางสคริปต์ต่อไปนี้:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').hover( function(){
        event.preventDefault();
        var showme = $(this).attr('data-showme')
        
        $('.all-img').hide()
        $('.' + showme).show()
        
    })
})
</script>
เปลี่ยนรูปภาพเมื่อวางเมาส์เหนือข้อความด้วย Page Builder Elementor

ตอนนี้บันทึกหรืออัปเดตหน้าของคุณแล้วดูตัวอย่าง

เปลี่ยนรูปภาพเมื่อวางเมาส์เหนือข้อความด้วย Page Builder Elementor

ไปแล้ว คุณเพิ่งทำภารกิจนี้ได้อย่างง่ายดาย

รับ Elementor Pro ทันที!

สรุป

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

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

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...