วิธีทำให้เว็บไซต์ของคุณมีส่วนร่วมมากขึ้นโดยใช้ Elementor Slider Widget

คุณต้องการเพิ่มตัวเลื่อนแบบตอบสนองไปยังเว็บไซต์ Elementor ของคุณหรือไม่? ก็จะทำให้การออกแบบเว็บไซต์ของคุณมีความซับซ้อน นอกจากนี้ การออกแบบตัวเลื่อนที่มีโครงสร้างที่ดียังช่วยให้คุณมีส่วนร่วมกับผู้ใช้ได้ดียิ่งขึ้น

ในบล็อกนี้ เราจะแบ่งปันวิธีที่ง่ายที่สุดในการเพิ่มตัวเลื่อนไปยังเว็บไซต์โดยใช้ Elementor เราจะพูดถึงประเด็นสำคัญบางประการเกี่ยวกับแถบเลื่อน Elementor และการใช้งาน

มาเริ่มกันด้วยคำถามง่ายๆ ว่าทำไมตัวเลื่อนจึงจำเป็นสำหรับเว็บไซต์ของคุณ

Slider จะทำให้เว็บไซต์ของคุณดูสง่างามได้อย่างไร

ตัวเลื่อนหมายถึงการแสดงภาพสไลด์ซึ่งเป็นองค์ประกอบสำคัญของเว็บที่คุณมักจะเห็นในเว็บไซต์สมัยใหม่ สามารถใช้เพื่อวัตถุประสงค์ต่างๆ ในกรณีส่วนใหญ่ คุณจะพบแถบเลื่อนที่ด้านบนของหน้า Landing Page หรือส่วนฮีโร่ของไซต์

อย่างไรก็ตาม คุณยังสามารถใช้แถบเลื่อนเพื่อแสดงผลิตภัณฑ์ร้านค้าอีคอมเมิร์ซของคุณเพื่อให้ได้รับความสนใจจากลูกค้าได้อย่างรวดเร็ว หรือคุณสามารถใช้แถบเลื่อนเพื่อแสดงคำรับรองของลูกค้าหรือแชร์โลโก้ของแบรนด์อื่นๆ

สไลเดอร์ช่วยคุณได้-

• ทำให้เว็บไซต์ของคุณดูน่าดึงดูดยิ่งขึ้น
• สร้างการมีส่วนร่วมของผู้ใช้
• เหมาะสมที่สุดในการแสดงข้อความรับรอง
• แสดงสินค้าร้านค้าออนไลน์
• ใช้เพื่อแสดงบทความในบล็อก
• สามารถแชร์ดีลหรือโปรโมชั่นทางการตลาดอื่นๆ ได้

วิธีการใช้ Elementor Slider Widget บนเว็บไซต์ WordPress ของคุณ

ในส่วนต่อไปนี้ของบล็อกของเรา เราจะแนะนำวิธีสร้างตัวเลื่อนไปยังเว็บไซต์ของคุณด้วยวิธีง่ายๆ สามวิธี โดยใช้พลังของ Elementor Slider Widget

สมมติว่าคุณมีเว็บไซต์ WordPress ของคุณพร้อมแล้ว ตอนนี้ คุณต้องมีปลั๊กอินต่อไปนี้บนเว็บไซต์ของคุณก่อนที่เราจะเริ่ม:

• องค์ประกอบ (ฟรี)
• องค์ประกอบ (Pro)

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งและเปิดใช้งาน Elementor Free & Premium เวอร์ชันแล้ว

หากคุณยังใหม่กับ Elementor ให้ตรวจสอบคู่มือนี้และเรียนรู้วิธีใช้ Elementor (คำแนะนำทีละขั้นตอนสำหรับผู้เริ่มต้น)

ขั้นตอนที่ 1: เพิ่มวิดเจ็ตตัวเลื่อน

คุณต้องเพิ่มวิดเจ็ต Elementor Slides ลงในพื้นที่ที่เหมาะสมของเว็บไซต์ของคุณเพื่อสร้างแถบเลื่อน คุณสามารถค้นหาวิดเจ็ตได้จากแกลเลอรีวิดเจ็ตทางด้านซ้าย เพียงพิมพ์ชื่อวิดเจ็ตจากแถบค้นหา แล้วลากและวางลงในตำแหน่งที่ถูกต้อง

ขั้นตอนที่ 2: จัดการเนื้อหาตัวเลื่อน

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

เพิ่มและจัดการเนื้อหาสไลด์

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

ตั้งค่าพื้นหลังสไลด์

มาเพิ่มภาพพื้นหลังให้กับสไลด์กันเถอะ เปิดแต่ละสไลด์ก่อน ที่นี่ คุณจะได้รับตัวเลือก พื้นหลัง คุณสามารถเพิ่มรูปภาพ จัดการ สี พื้นหลัง และตั้งค่า ขนาด รูปภาพ เช่น Cover, Container & Auto

คุณสามารถเปิดใช้งาน Ken Burns Effect ที่จะให้คุณตั้งค่าเอฟเฟกต์การ ซูม ให้กับภาพสไลด์ได้ ในบริเวณนี้ คุณยังสามารถเปิด Background Overlay และตั้งค่าสี และเลือก โหมด Blend Mode ที่เหมาะสม

หมายเหตุ: ตรวจสอบให้แน่ใจว่าภาพสไลด์ของคุณควรสวยงามและมีขนาดที่เหมาะสม

เขียนเนื้อหาสไลด์

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

เพิ่มสไตล์สไลด์ที่กำหนดเอง

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

ขั้นตอนที่ 3: ปรับแต่ง Elementor Slider ของคุณ

นี่คือตัวเลือกสไตล์ที่คุณสามารถใช้เพื่อปรับแต่งแถบเลื่อน Elementor ที่นี่คุณจะได้..

• สไลด์
• ชื่อ
• คำอธิบาย
• ปุ่ม
• การนำทาง

มาดูกันว่าการตั้งค่าสไตล์เหล่านี้ทำงานอย่างไร

สไลด์

ใน Style->Slides คุณสามารถจัดการ Global Content Width เพิ่ม Padding และตั้งค่า Horizontal Position, Vertical Position และ Text Align คุณยังสามารถเพิ่ม Text Shadow ให้กับเนื้อหาสไลด์ของคุณได้

เปิดตัวเลือก Style–>Title และออกแบบชื่อสไลด์ของคุณในแบบของคุณเอง คุณสามารถจัดการการ เว้นวรรค สีข้อความ และเพิ่ม Typography ใหม่ได้

เช่นเดียวกับตัวเลือกชื่อ คุณยังสามารถจัดรูปแบบแถบเลื่อน Description ได้อีกด้วย

ปุ่ม

ต้องการออกแบบปุ่มสไลด์ใหม่และทำให้ผู้ใช้สนใจมากขึ้น ไปที่ สไตล์ -> ปุ่ม คุณจะมีตัวเลือกที่จำเป็นทั้งหมดเพื่อปรับแต่งปุ่มตัวเลื่อน คุณสามารถจัดการปุ่ม ขนาด การพิมพ์ ความกว้างของ เส้นขอบ และรัศมีของเส้นขอบ นอกจากนี้ยังสามารถเพิ่ม สีข้อความ ประเภทพื้นหลัง สี และ สีเส้นขอบ เพื่อการออกแบบที่ดียิ่งขึ้น

การนำทาง

คุณสามารถจัดรูปแบบการนำทางของตัวเลื่อนได้ที่นี่ใน สไตล์ -> พื้นที่การนำทาง คุณสามารถเปลี่ยน ตำแหน่งลูกศร ภายในหรือภายนอกสไลด์ได้ และยังจัดการ ขนาดลูกศร และ เพิ่ม สีลูกศร

เช่นเดียวกับลูกศรนำทาง คุณยังเปลี่ยน จุด นำทาง

ดูตัวอย่างสุดท้าย

หลังจากออกแบบเสร็จแล้ว นี่คือรูปลักษณ์ที่ดีที่สุดของตัวเลื่อน Elementor:

โบนัส: แนะนำวิดเจ็ตตัวเลื่อนของ Happy Addons สำหรับการออกแบบ Slider พิเศษ

หากคุณต้องการเพิ่มฟังก์ชันการทำงานให้กับตัวเลื่อนของคุณ คุณสามารถพิจารณา Elementor Addons อื่นๆ ได้ ที่นี่เราพูดถึง Happy Addons ซึ่งเป็นส่วนเสริม Elementor ของบุคคลที่สามที่เร็วสุด ๆ

ส่วนเสริมพิเศษนี้มาพร้อมกับ วิดเจ็ตตัวเลื่อน ในเวอร์ชันฟรี ซึ่งเป็นขั้นสูง ใช้งานง่าย และปรับแต่งได้อย่างเต็มที่ เพื่อให้ผู้ใช้ Elementor มือใหม่สามารถออกแบบตัวเลื่อนที่ไม่ซ้ำใครได้ตั้งแต่เริ่มต้น

คุณยังสามารถรับคุณสมบัติเพิ่มเติมเช่น...

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

คุณยังสามารถดูวิดีโอสาธิตสั้นๆ ของวิดเจ็ต Slider ของ Happy Addons

คำถามที่พบบ่อยทั่วไปสำหรับ Elementor Slider

ผู้คนมักจะถามคำถามด้านล่างเมื่อวางแผนจะออกแบบตัวเลื่อน Elementor อย่างไรก็ตาม เราได้ครอบคลุมรายละเอียดทั้งหมดเกี่ยวกับการสร้างแถบเลื่อนแบบกำหนดเองโดยใช้ Elementor แล้ว เพื่อช่วยเหลือคุณต่อไป เราจะตอบคำถามเหล่านี้ด้วย

คุณพร้อมหรือยังที่จะออกแบบ Elementor Slider ตัวแรกของคุณ

ในบล็อกนี้ เราได้แสดงวิธีการที่เป็นไปได้ทั้งหมดในการสร้างตัวเลื่อน Elementor แบบกำหนดเองตั้งแต่เริ่มต้น เราได้ตอบคำถามทั่วไปที่ผู้คนมักถามถึงการสร้าง Elementor Slider

นอกจากนี้เรายังได้แนะนำวิดเจ็ตตัวเลื่อน Happy Addons ที่ให้คุณเพิ่มตัวเลื่อนที่สวยงามให้กับเว็บไซต์ของคุณ และได้พูดคุยกันว่าทำไมตัวเลื่อนจึงมีความสำคัญ

หากคุณมีคำถามใดๆ เกี่ยวกับบล็อกนี้ หรือวิดเจ็ตตัวเลื่อน Elementor หรือ Happy Addons คุณสามารถถามได้ในช่องแสดงความคิดเห็นด้านล่าง

อย่าลืมสมัครรับจดหมายข่าวของเรา นั่นฟรี!