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

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

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

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

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

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

ลากวิดเจ็ตรูปภาพไปที่คอลัมน์ด้านซ้ายและแทรกรูปภาพจากไลบรารีของเรา

ในคอลัมน์ทางขวา ให้ใส่ a วิดเจ็ตชื่อเรื่อง ชื่อว่า เลือกสิ่งที่ดีที่สุด ในแท็บ สไตล์ คลิกเลย วิชาการพิมพ์ และแก้ไข ความสูงของเส้นที่1.

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

มาเพิ่มด้านล่างวิดเจ็ตชื่อ a วิดเจ็ตแก้ไขข้อความ.

เหนือวิดเจ็ต Title ให้วางวิดเจ็ตตัวแยกลงในแท็บ เนื้อหา, มาคว้า 270 สำหรับความกว้าง คลิกที่ Text for Add element แล้ว enter แนวโน้ม เป็นข้อความ ในแท็บ สไตล์, แก้ไขจาระบีและ ช่องว่าง sur 2.

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

ในส่วนข้อความ ให้คลิกที่ วิชาการพิมพ์, มาเปลี่ยนฟอนต์กันเถอะ, the ขนาด sur 18ที่ จาระบี sur 600.

ด้านล่างวิดเจ็ตตัวแก้ไข เนื้อหามายื่นไฟล์ก ส่วนภายในให้ลบคอลัมน์ใดคอลัมน์หนึ่งของส่วนภายในแล้ววางลงในคอลัมน์หลัง a ปุ่มวิดเจ็ต

มาแก้ไขปุ่มโดยไปที่แผงด้านข้างและในแท็บ เนื้อหา, คลิกที่ ห้องสมุดไอคอน sur ไอคอน และใส่ไอคอน กระเป๋าช้อปปิ้ง, มาล้างเนื้อหาของปุ่มกันด้วย ตำรา

ไปที่แท็บกัน สไตล์ ของปุ่มและใน รัศมีชายแดน, คลิกที่ % และคว้า 50 สำหรับรัศมีขอบทั้งหมดและใน ระยะขอบภายใน, มาคว้า 20.

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

จากนั้นคลิกที่แท็บ สูง ของปุ่มของเรา จากนั้นบน การวางตำแหน่ง และ ความกว้าง มาเลือกกัน อินไลน์ (อัตโนมัติ). ในส่วนขั้นสูงของแท็บขั้นสูง, มาคว้า 10 สำหรับ ขอบขวา.

มาทำซ้ำปุ่มนี้ 4 ครั้งและปรับเปลี่ยนสีของปุ่มเหล่านี้

ต่อไป มาทำซ้ำวิดเจ็ตรูปภาพของเรา 4 ครั้ง แล้วแก้ไขรูปภาพ

ใน L 'แท็บขั้นสูง, มาคว้า ภาพทั้งหมด ในสนาม คลาส CSS ของภาพของเราแต่ละคน

แล้วในสนาม CSS ID ป้อนรูปภาพสีแดงสำหรับรูปภาพที่มีไฮไลต์สีแดง รูปภาพสีเขียวสำหรับรูปภาพที่มีไฮไลต์สีเขียว และรูปภาพสีน้ำตาลสำหรับรูปภาพที่มีไฮไลต์สีน้ำตาล เป็นต้น

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

.all-images{
    display: none;
}
#red-image{
    display: block;
}

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

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
        
        $('.all-images').hide()
        $('#' + showme).show()
    })
})
</script>

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

data-showme|IMAGE-ID-NAME

มาแก้ไขส่วน IMAGE-ID-NAME โดยใช้ ID ของปุ่มของคุณกัน ซึ่งได้แก่ ID ภาพสีแดง ภาพสีเขียว และภาพสีน้ำเงิน และอื่นๆ

ดังนั้นสำหรับแต่ละปุ่ม เรามาเปลี่ยนรหัส IMAGE-ID-NAME เป็นสีของปุ่มที่เหมาะสมกัน

อัปเดตงานของคุณและดูตัวอย่างในโหมดเดสก์ท็อป แท็บเล็ต และสมาร์ทโฟนขณะทดสอบปุ่มของคุณ

ในโหมดสมาร์ทโฟน คุณสามารถจัดตำแหน่งปุ่มต่างๆ ให้อยู่ตรงกลาง ลดระยะขอบ และอื่นๆ อีกมากมายได้

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

รับ Elementor Pro ทันที!

สรุป

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

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

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

...