ตัวโหลดล่วงหน้าซึ่งเรียกอีกอย่างว่าตัวโหลดคือแอนิเมชั่นที่เรียบง่ายหรือซับซ้อนหรือ GIF ที่ยังคงทำงานบนหน้าในขณะที่เนื้อหาอื่นๆ ของหน้ากำลังโหลด
เป็นสิ่งสำคัญมากที่จะให้ผู้ใช้ของคุณได้รับความบันเทิงในช่วงเวลาสั้นๆ ที่เว็บไซต์ของคุณใช้ในการโหลดเนื้อหา ไม่เพียงช่วยรักษาผู้ใช้จำนวนมาก แต่ยังช่วยสร้างสถานะที่ยั่งยืนในจิตใจของผู้ใช้ ในบทช่วยสอนนี้ เราจะเข้าใจวิธีสร้างตัวโหลดล่วงหน้าโดยใช้ Elementor
วิธีสร้างตัวโหลดล่วงหน้าโดยใช้ Elementor
Elementor เต็มไปด้วยตัวเลือกที่ช่วยให้คุณนำเสนอเว็บไซต์ของคุณในระดับที่แตกต่างอย่างสิ้นเชิง ในทำนองเดียวกัน มันยังช่วยให้คุณสร้างตัวโหลดล่วงหน้า ซึ่งคุณสามารถจับผู้ใช้ที่เด้งออกจากเว็บไซต์ของคุณได้อย่างรวดเร็ว
ในการเริ่มต้น ตรวจสอบให้แน่ใจว่าคุณได้สร้างตัวโหลดล่วงหน้าสำหรับหน้าเว็บที่ต้องใช้เวลาสักครู่ในการโหลดเนื้อหาและเป็นส่วนสำคัญของเว็บไซต์ของคุณเท่านั้น
สร้างเว็บไซต์ที่น่าทึ่ง
ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด
เริ่มเลยเมื่อคุณตัดสินใจว่าจะวางตัวโหลดล่วงหน้าไว้ที่หน้าใดแล้ว ให้ค้นหา SVG หรือ GIF ที่เหมาะกับเว็บไซต์ของคุณและหน้านั้น Icons8 เป็นแหล่งที่มีชื่อเสียงมากสำหรับแอนิเมชั่นตัวโหลดล่วงหน้า
หากคุณไม่ทราบวิธีนำเข้าไฟล์รูปแบบ SVG บน Elementor โปรดอ่าน บทแนะนำ ของเรา
ต่อไป มีสองวิธีในการใช้ตัวโหลดล่วงหน้าบนเว็บไซต์ของคุณ โดยใช้สำหรับหน้าใดหน้าหนึ่งหรือใช้สำหรับทั้งเว็บไซต์
- หากคุณต้องการใช้ตัวโหลดล่วงหน้าสำหรับทั้งเว็บไซต์ ให้สร้าง ส่วนใหม่ ใน เทมเพลตส่วนหัว
- หากคุณต้องการใช้ตัวโหลดล่วงหน้าสำหรับหน้าใดหน้าหนึ่ง ให้สร้าง ส่วนใหม่ ที่ ด้านบนของหน้า
ในทั้งสองกรณีนี้ อย่าลืมเปลี่ยนการตั้งค่าของส่วนเป็น No Gap
เมื่อคุณตั้งค่าเสร็จแล้ว ให้ไปที่ แท็บ Elements ทางด้านซ้ายของหน้าจอและเลือก HTML
ในฟิลด์ HTML ให้เพิ่มโค้ดต่อไปนี้ในขณะที่ตรวจสอบให้แน่ใจว่าได้เปลี่ยน Preloader URL ด้วยตัวคุณเอง
>div class="loader" /divscript/scriptstyle/styleการเขียนโค้ดมีคำอธิบายคำอธิบายสำหรับผู้เริ่มต้นเพื่อทำการเปลี่ยนแปลงบางอย่างหากจำเป็น
สุดท้าย ไปข้างหน้าและ เผยแพร่ Preloader ของคุณและตรวจสอบว่าทำงานได้อย่างสมบูรณ์หรือไม่ นี่คือวิธีที่คุณสามารถสร้าง Preloader ด้วย Elementor บนเว็บไซต์ WordPress ของคุณ
เราหวังว่าบทช่วยสอนนี้จะช่วยคุณในการรักษาผู้ใช้เว็บไซต์ของคุณและทำให้ดูเป็นมืออาชีพมากขึ้น นั่นคือทั้งหมดจากเราสำหรับบทช่วยสอนนี้ อย่าลืมเข้าร่วมกับเราบน Twitter และ Facebook เพื่อรับข่าวสารล่าสุดเกี่ยวกับเนื้อหาของเรา
