ต้องการทราบวิธีการเพิ่มเอฟเฟกต์เสียงของปุ่มบน Elementor ? ค้นหาข้อมูลในบทความนี้
คุณเห็น 2 ปุ่มนี้หรือไม่?
เมื่อคุณคลิก ของแมวจะทำให้มีเสียงร้องและเมื่อคุณคลิกที่ปุ่มบน เชียน, มันจะผลิตเสียงเห่า. ในบทความนี้เราจะแสดงวิธีการเพิ่มใน Elementor เอฟเฟกต์เสียงของปุ่มเมื่อคลิก
วิธีเพิ่มเอฟเฟกต์เสียงให้กับปุ่มใน Elementor
ขั้นตอนที่ 1: สร้างปุ่ม
ก่อนอื่น คุณต้องสร้างปุ่ม คุณสามารถปรับแต่งปุ่มตามที่คุณต้องการเพราะ Elementor มีตัวเลือกมากมายที่จะทำให้ปุ่มของคุณสวยงาม
ขั้นตอนที่ 2: เตรียมลิงก์เอฟเฟกต์เสียง
เมื่อปุ่มพร้อมแล้ว ให้เตรียมเอฟเฟกต์เสียงสำหรับปุ่มและอัปโหลดไปยังไลบรารีสื่อของ WordPress คุณสามารถใช้รูปแบบไฟล์ MP3 หรือ WAV สำหรับเอฟเฟกต์เสียง
ในการอัปโหลดไฟล์เสียงไปยังไลบรารีสื่อ WordPress ให้ไปที่แดชบอร์ด WordPress และคลิก สื่อ -> เพิ่ม. คุณสามารถลากและวางไฟล์หรือคลิก เลือกไฟล์ เพื่ออัปโหลด
เมื่อดาวน์โหลดไฟล์แล้ว ไปที่ไลบรารีสื่อและคลิกที่เสียงใดเสียงหนึ่ง จากนั้นในหน้าต่างที่ปรากฏขึ้น ให้คัดลอก URL ของไฟล์ เพื่อรับลิงค์สำหรับเอฟเฟกต์เสียง
ขั้นตอนที่ 3: เพิ่มโค้ด HTML ต่อไปนี้
ในการสร้างเสียงจากปุ่ม เราจำเป็นต้องใช้โค้ด HTML ต่อไปนี้
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
//Audio 1 Starts
var audio1 = new Audio('Sound-Effect-URL')
$(".button-class").mousedown(function() {
audio1.load();
audio1.play();
});
//Audio 1 Ends
});
</script>เพิ่มวิดเจ็ต HTML ในพื้นที่ผ้าใบและวางโค้ดในบล็อก โค้ด HTML.
ใช้ลิงก์เอฟเฟกต์เสียงของคุณเพื่อแทนที่ เสียง-เอฟเฟกต์-URL ในแถลงการณ์
var audio1 = new Audio('Sound-Effect-URL')เลือกคลาส CSS สำหรับปุ่มและแก้ไขรหัสของคลาส CSS คลาสของปุ่ม
$(".button-class").mousedownหลังจากแก้ไขโค้ดแล้วจะเป็นแบบนี้
ขั้นตอนที่ 4: เพิ่มคลาส CSS ให้กับปุ่ม
ในการเชื่อมต่อปุ่มกับโค้ด เราจำเป็นต้องเพิ่มคลาส CSS ให้กับปุ่ม เพื่อให้โค้ดรู้ว่าปุ่มใดถูกคลิกปุ่มและทริกเกอร์เอฟเฟกต์เสียง
และนี่สำหรับปุ่มที่มีเอฟเฟกต์เสียง ตอนนี้คุณปรับแต่งปุ่มได้แล้ว และถ้าคุณต้องการเพิ่มปุ่มที่มีเอฟเฟกต์เสียงเพิ่มเติม ก็สามารถทำได้โดยการคัดลอกโค้ดบางส่วนแล้วแก้ไขเล็กน้อย
เพิ่มปุ่มเพิ่มเติมพร้อมเอฟเฟกต์เสียง
สร้างปุ่มหรือคัดลอกปุ่มที่มีอยู่
คุณสามารถคัดลอกปุ่มที่มีอยู่ได้โดยคลิกขวาที่ปุ่มที่มีอยู่แล้วเลือกคัดลอก จากนั้นวางลงในส่วนใดก็ได้โดยคลิกขวาภายในส่วนนั้น
คัดลอกโค้ดบางส่วนและปรับตัวแปรและชื่อคลาส CSS ของปุ่มที่สอง
มาคัดลอกบางส่วนของโค้ด HTML ก่อนหน้านี้ที่เรียกใช้เอฟเฟกต์เสียงกัน นี่คือรหัสด้านล่าง
//Audio 1 Starts
var audio1 = new Audio('Sound-Effect-URL')
$(".button-class").mousedown(function() {
audio1.load();
audio1.play();
});
//Audio 1 Endsหลังจากคัดลอกโค้ดแล้ว ให้วางที่ด้านล่าง โดย เสียง 1 สิ้นสุด. แก้ไขตัวแปร เสียง 1 และโค้ดทั้งหมดที่ใช้ตัวแปร เสียง 1 บนรหัสที่สร้างขึ้นใหม่ใน เสียง 2.
ดูเพิ่มเติม: Elementor: วิธีสร้างการ์ดเอฟเฟกต์จากพอร์ตโฟลิโอ
จากนั้นแทนที่ URL เอฟเฟกต์เสียงหากคุณใช้เอฟเฟกต์เสียงใหม่สำหรับปุ่มใหม่และเปลี่ยนรหัส คลาสปุ่ม ในคลาส CSS ปุ่มที่สร้างขึ้นใหม่ของคุณ
รหัสสุดท้ายจะมีลักษณะเหมือนภาพต่อไปนี้
แทนที่ชื่อคลาส CSS ของปุ่ม
ปุ่มที่สร้างขึ้นใหม่ของคุณจะมีเสียงประกอบเมื่อคลิก คุณสามารถสร้างได้มากเท่าที่คุณต้องการ
องค์ประกอบเสียงเป็นส่วนเสริมที่ยอดเยี่ยมสำหรับa เว็บไซต์เว็บ. พวกเขาไม่เพียงแต่ให้องค์ประกอบที่น่าสนใจสำหรับเว็บไซต์ แต่ยังช่วยสร้างความประทับใจไม่รู้ลืมแก่ผู้ใช้ปลายทาง
อ่าน: Elementor: วิธีโยกย้ายเว็บไซต์ WordPress
อย่างไรก็ตาม การกระทำหรือผลลัพธ์ควรมาพร้อมกับเสียงเท่านั้น หากเป็นการตอกย้ำหรือชี้แจงข้อความสำคัญต่อผู้ใช้อย่างมีนัยสำคัญ แจ้งให้ผู้ใช้ทราบถึงบางสิ่งที่ต้องการความสนใจเพื่อไม่ให้ส่งผลกระทบในทางลบต่อคุณ เว็บไซต์เว็บ แทน
รับ Elementor Pro ทันที!
สรุป
ดังนั้น ! นั่นคือทั้งหมดสำหรับบทความนี้ซึ่งจะแสดงวิธีเพิ่มเอฟเฟกต์เสียงของปุ่ม Elementor. หากคุณมีข้อกังวลใด ๆ เกี่ยวกับวิธีการเดินทางไปที่นั่น แจ้งให้เราทราบภายใน ความเห็น.
อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
