คุณต้องการเปลี่ยนภาพเมื่อวางเมาส์เหนือข้อความด้วยปุ่ม สร้างหน้า Elementor ? ในบทช่วยสอนใหม่นี้ เราจะแสดงวิธีการทำ
หากคุณไม่รู้ว่าเราจะพูดถึงเรื่องอะไรในวันนี้ เราขอเชิญคุณชมวิดีโอต่อไปนี้:
ถ้าอย่างนั้นเราก็กลับไปดูว่าทำไมเราถึงมาที่นี่
ค้นพบคำแนะนำของเราเกี่ยวกับ: วิธีการสร้าง Portfolio Effect Card ด้วย Elementor
เพื่อให้บทช่วยสอนนี้สมบูรณ์ คุณจะต้อง Elementor เวอร์ชัน Proเนื่องจากเราจะใช้โค้ด CSS ที่กำหนดเองซึ่งรองรับโดย . เวอร์ชันนี้เท่านั้นElementor.
มาสร้างส่วนที่มี 2 คอลัมน์กัน จากนั้นในแผงด้านข้าง มากำหนด การวางฟอร์ม sur ความสูงขั้นต่ำแล้วก็ ความสูงขั้นต่ำ คลิกเลย VH และตั้งค่าตัวเลื่อนไปที่ 100.
ในแท็บ สไตล์ มาเลือกกันเลย ประเภทพื้นหลัง คลิกที่ คลาสสิกจากนั้นแก้ไข Couleur sur#F9F9F9
ในแท็บ สูง, แก้ไขทั้งหมด ระยะขอบภายใน sur 25
ตอนนี้เรามาเปลี่ยนความกว้างคอลัมน์เป็น 40% สำหรับคอลัมน์ด้านซ้ายและ 60% สำหรับคอลัมน์ทางขวา
ในคอลัมน์ด้านซ้าย ให้ปล่อย 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 แล้วเปลี่ยนภาพเป็นภาพใหม่
เลือกส่วนของเราแล้วไปที่แท็บ สูง. ในส่วน CSS ที่กำหนดเองคัดลอกและวางข้อมูลโค้ดต่อไปนี้:
selector .all-img{
display: none;
}
selector .img-1{
display: block;
}
(หากคุณไม่มีส่วนนี้ แสดงว่าคุณไม่มีเวอร์ชัน Pro หากต้องการดำเนินการต่อ คุณต้องอัปเกรดเวอร์ชันของคุณ).
มาเลือกโปรแกรมแก้ไขข้อความตัวแรกของเราและไปที่แท็บขั้นสูงและ ส่วนคุณสมบัติ. ในสนาม คุณสมบัติคัดลอกและวางข้อมูลโค้ดต่อไปนี้:
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>
ตอนนี้บันทึกหรืออัปเดตหน้าของคุณแล้วดูตัวอย่าง
ไปแล้ว คุณเพิ่งทำภารกิจนี้ได้อย่างง่ายดาย
รับ Elementor Pro ทันที!
สรุป
นั่นไง ! บทความนี้จะแสดงวิธีเปลี่ยนรูปภาพเมื่อวางเมาส์ไว้เหนือข้อความสำหรับบทความนี้ หากคุณมีข้อกังวลใด ๆ เกี่ยวกับวิธีการเดินทางไปที่นั่น แจ้งให้เราทราบภายใน ความเห็น.
อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...