Slider Revolution: สุดยอดคู่มือ

Slider Revolution เป็นหนึ่งในปลั๊กอิน WordPress ที่ได้รับความนิยมมากที่สุดในปัจจุบัน ด้วยยอดขายมากกว่า 400,000 รายการและคะแนนเฉลี่ย 4.75 ปลั๊กอินได้รับการพิสูจน์ประสิทธิภาพและความยอดเยี่ยม

Revolution Slider: อะไรทำให้ปลั๊กอินยอดเยี่ยมมาก

Slider Revolution ได้รับการพัฒนาโดย Themepunch ปลั๊กอินนี้เป็นตัวสร้างสำหรับการสร้างเนื้อหาแบบไดนามิกที่สมบูรณ์สำหรับหน้าเว็บ เน้นที่ "ไดนามิก" เนื่องจากช่วยให้คุณสร้างสไลด์ที่น่าตื่นเต้นเพิ่มการเคลื่อนไหวให้กับหน้า

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

• ตัวเลื่อนและภาพหมุน
• ตัวเลื่อนโพสต์เด่น
• ฟีดโซเชียลมีเดีย
• แกลเลอรี่สื่อ
• บล็อกฮีโร่และหน้าแรก

เหตุผลที่คุณควรใช้ Slider Revolution กับเว็บไซต์ของคุณ

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

ปลั๊กอินที่แถมมา

วันนี้เกือบทุกธีมของ WordPress มาพร้อมกับปลั๊กอิน Slider Revolution โดยปกติ แพ็คเกจธีมจะรวมปลั๊กอินเวอร์ชันฟรี ปลั๊กอินที่รวมมานั้นถูกจำกัดไว้สำหรับคุณสมบัติพื้นฐานมาก แต่ก็ยังสะดวกมากที่จะนำธีมไปพร้อมกับตัวสร้างตัวเลื่อน

อย่างไรก็ตาม หากคุณต้องการเข้าถึงคุณลักษณะจำนวนมากของปลั๊กอิน คุณมีตัวเลือกในการซื้อปลั๊กอินอิสระ ใบอนุญาตปกติจะมีค่าใช้จ่าย $ 29 และคุณสามารถหาซื้อได้ในตลาด Codecanyon

สำหรับสิทธิ์ใช้งานแบบขยาย คุณจะต้องจ่ายประมาณ 150 ดอลลาร์ และรับการสนับสนุนทางเทคนิคหนึ่งปีเพียง 9 ดอลลาร์

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

แม่แบบ

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

เพียงนำเข้าเทมเพลตที่คุณเลือกและเริ่มสร้างได้ทันที

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

บรรณาธิการภาพ

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

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

ประสิทธิภาพความเร็วสูง

Slider Revolution นั้นถูกเข้ารหัสอย่างดีเพื่อให้โหลดได้เร็ว แถบเลื่อนทุกด้านได้รับการปรับให้เหมาะสม และใช้ตัวเลือกการดีบักขั้นสูงเพื่อแก้ไขปัญหา โหลดไฟล์หลักโดยอัตโนมัติ และปรับขนาดด้วยคุณสมบัติที่ใช้ นอกจากนี้ยังใช้การโหลดแบบ Lazy Loading ที่ชาญฉลาดและปรับ SEO ให้เหมาะสม

เลย์เอาต์ที่ตอบสนอง

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

Slider Revolution ไม่ได้เป็นเพียงตัวเลื่อนธรรมดา ปลั๊กอินพร้อมตอบสนอง ดังนั้นไม่ว่าคุณจะสร้างสไลด์ใดก็ตาม คุณจึงมั่นใจได้ว่าจะปรับให้เหมาะสมสำหรับอุปกรณ์ใดก็ตามที่จะใช้งาน

Slider Revolution ทำให้แน่ใจว่าได้ตั้งค่าเบรกพอยต์ที่ตอบสนองสำหรับแต่ละตัวเลื่อน ทำให้การออกแบบใดๆ ดูดีบนอุปกรณ์ต่างๆ และหน้าจอขนาดเล็ก ไม่ว่าคุณจะเลือกตัวเลือกใด — เดี่ยว วงล้อหรือตัวเลื่อนมาตรฐาน คุณจึงมั่นใจได้ว่าอุปกรณ์จะดูสมบูรณ์แบบในทุกอุปกรณ์

การปรับแต่งตัวเลือก

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

ปลั๊กอิน Slider Revolution ให้คุณปรับแต่งอะไรก็ได้ เพื่อประหยัดเวลา คุณสามารถบันทึกค่าที่ตั้งไว้ล่วงหน้าเพื่อใช้ในภายหลังในการเปลี่ยนสไลด์ ลักษณะแบบอักษร และภาพเคลื่อนไหวของเลเยอร์

ส่วนเสริมการปฏิวัติตัวเลื่อน

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

คุณดีไป! Slider รองรับเนื้อหาประเภทต่างๆ เช่น บล็อกโพสต์และโพสต์ปัจจุบัน ช่วยให้คุณใช้ฟีดจากแพลตฟอร์มโซเชียล เช่น Twitter, Facebook, Vimeo, YouTube และ Instagram คุณสามารถเพิ่มลิงก์ วิดีโอ รูปภาพ และข้อความได้ในเวลาไม่นาน ด้วยความช่วยเหลือของคุณลักษณะ Variations คุณสามารถสร้างสไลด์ที่มีคุณลักษณะหลากหลายและมีข้อมูลที่ผู้เข้าชมสามารถใช้ได้

ความปลอดภัย

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

การสนับสนุนทางเทคนิค

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

แหล่งที่มาของเนื้อหา

ปลั๊กอินจัดการการสร้างตัวเลื่อนสำหรับแหล่งเนื้อหาต่างๆ ได้สำเร็จ ไม่ว่าจะเป็นผลิตภัณฑ์ WooCommerce หรือโพสต์ทั่วไป Slider Revolution มีเครื่องมือต่างๆ

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

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

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

การติดตั้งปลั๊กอินและการตั้งค่าหลัก

ผู้พัฒนาธีมหลายคนรวม Slider Revolution ไว้ในแพ็คเกจของธีม

หากคุณซื้อธีม WordPress ระดับพรีเมียมจาก StylemixThemes คุณไม่จำเป็นต้องติดตั้งปลั๊กอินด้วยตนเอง Slider Revolution จะถูกติดตั้งโดยอัตโนมัติด้วยการนำเข้าการสาธิต

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

คุณจะต้องซื้อปลั๊กอิน เข้าสู่ระบบบัญชี Envato ของคุณและทำการสั่งซื้อ หลังจากนั้นดาวน์โหลดไฟล์ — เลือกตัวเลือกการดาวน์โหลดสำหรับ “ไฟล์ WordPress ที่ติดตั้งได้เท่านั้น”

ตอนนี้ คุณต้องเพิ่มปลั๊กอินใหม่ลงในไซต์ของคุณ ไปที่แดชบอร์ดของคุณ — ปลั๊กอิน > เพิ่ม ใหม่ เมื่อการติดตั้งเสร็จสิ้น ให้ เปิดใช้งาน ปลั๊กอิน

ยินดีด้วย คุณพร้อมแล้วและคุณสามารถเริ่มสร้างตัวเลื่อนแรกได้!

วิธีอัปเดต Slider Revolution

Themepunch เผยแพร่การอัปเดตปลั๊กอินตัวเลื่อนเป็นประจำ หากต้องการอัปเดตให้เปิด Slider Revolution จากแดชบอร์ดของคุณและทำตามแท็บอัปเดต ในหน้านี้ คุณจะพบส่วนเล็กๆ ที่ชื่อ “Plugin Updates” มีการระบุไว้ที่นี่ว่าปลั๊กอินรุ่นใดที่ติดตั้งบนเว็บไซต์ของคุณและรุ่นที่สามารถอัปเดตได้

นอกจากนี้ คุณสามารถใช้วิธีมาตรฐานและไปที่ Dashboard > Updates และติดตั้งปลั๊กอินเวอร์ชันใหม่ได้จากที่นั่น

Slider Revolution: เริ่มต้นใช้งาน

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

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

ความสัมพันธ์ระหว่างโมดูล สไลด์ และเลเยอร์

โมดูลคือคอนเทนเนอร์สำหรับสไลด์ซึ่งเป็นคอนเทนเนอร์สำหรับเลเยอร์

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

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

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

วิธีใช้ Slider Revolution: การตั้งค่าส่วนกลาง

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

หากคุณคลิกที่ Slider Revolution จากแดชบอร์ดของคุณ คุณจะสามารถเปิดหน้าจอการตั้งค่าของปลั๊กอินได้

หน้าจอตั้งค่า

ที่ด้านบนของหน้าจอ คุณจะพบแท็บที่มีตัวเลือกต่อไปนี้:

โมดูล อัปเดต การเปิดใช้งาน ข่าว Globals คำถามที่พบบ่อย การสนับสนุน

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

การตั้งค่าส่วนกลาง

เราจะเริ่มต้น ด้วย Globals การตั้งค่าส่วนกลางส่วนใหญ่แบ่งออกเป็นหลายส่วนดังนี้:

• ทั่วไป
• เค้าโครงเริ่มต้น กริด เบรกพอยต์
• แบบอักษร
• เบ็ดเตล็ด

การตั้งค่าเหล่านี้รับผิดชอบตัวเลือกกริดตอบสนองเริ่มต้นที่ใช้ในการสร้างตัวเลื่อนใหม่ การโหลดฟอนต์แบบกำหนดเอง การสร้างฐานข้อมูล และอื่นๆ

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

ใน ส่วน เบรกพอยต์กริดเค้าโครงเริ่มต้น คุณสามารถกำหนดความกว้างเป็นพิกเซลสำหรับอุปกรณ์ประเภทต่างๆ: เดสก์ท็อป โน้ตบุ๊ก แท็บเล็ต และมือถือ

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

• จอภาพเดสก์ท็อปมาตรฐานมีความกว้าง 1920px
• อุปกรณ์โน้ตบุ๊กซึ่งรวมถึงแล็ปท็อป MacBooks และแท็บเล็ตแนวนอนทั้งหมดมีความกว้างประมาณ 1600px
• แท็บเล็ตแนวตั้งมีความกว้างไม่เกิน 778px (อิงตาม iPad)
• และอุปกรณ์พกพา นี่เป็นส่วนสำคัญ เนื่องจากในปัจจุบันมากกว่าครึ่งหนึ่งของปริมาณการใช้อินเทอร์เน็ตทั้งหมดสร้างขึ้นผ่านอุปกรณ์พกพา และจะไม่เป็นที่น่าพอใจหากผู้ใช้ไม่เห็นแถบเลื่อนบนเว็บไซต์ของคุณอย่างถูกต้อง อย่างไรก็ตาม สิ่งนี้อาจสร้างความสับสน และเหตุผลก็คือว่าสมาร์ทโฟนรุ่นใหม่มีขนาดแตกต่างกันโดยสิ้นเชิง เราขอแนะนำให้คุณใช้ตัวเลขนี้ไม่เกิน 500px

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

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

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

การสร้างแถบเลื่อนใหม่

ตอนนี้เมื่อเราตั้งค่าหลักเสร็จแล้ว เราก็สามารถสร้างสไลด์ใหม่ได้ เปิดการตั้งค่า Slider Revolution และคลิกที่ New Blank Module

คุณจะได้รับคำแนะนำให้อ่านคู่มือฉบับย่อ คลิกที่ Start Guide หากคุณต้องการเรียนบทเรียนสั้นๆ หรือออกจากคู่มือเพื่อข้ามขั้นตอนนี้

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

ตัวเลือกทั่วไป

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

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

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

สำหรับ ประเภท คุณมีสามตัวเลือกให้เลือก:

• ตัวเลื่อน — สไลด์เคลื่อนไหวหลายสไลด์ที่หมุนเพื่อแสดงทีละรายการ
• ฉาก — สไลด์เดียวที่สามารถใช้เป็นโมดูลเนื้อหาได้
• ภาพหมุน — หลายสไลด์พร้อมหลายสไลด์ที่มองเห็นได้พร้อมกัน

การตั้งค่าต่อไปที่เราต้องระบุคือการปรับขนาด นอกจากนี้ยังมีสามตัวเลือก:

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

เต็มความกว้าง — ตัวเลือกตัวเลื่อนความกว้างเต็มความกว้างจากซ้ายไปขวา (คุณยังต้องกำหนดความสูง)

เต็มหน้าจอ — สำหรับแถบเลื่อนขนาดใหญ่เต็มหน้าจอ ไม่ว่าคุณจะใช้เบราว์เซอร์หรืออุปกรณ์ขนาดใดก็ตาม

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

ปรับขนาดการตั้งค่า

การปรับขนาดแบบคลาสสิกหรือเชิงเส้น ช่วยให้แน่ใจว่าตัวเลื่อนของคุณจะบีบอัดตามนั้นหลังจากกำหนดการตั้งค่าขนาดหน้าจอหลักของคุณ (เช่น ตัวเลื่อนขนาด 1000x400px จะบีบอัดตัวเลื่อนขนาด 500x200px ด้วยแบบอักษร รูปภาพ และองค์ประกอบตัวเลื่อนอื่นๆ)

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

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

การตอบสนองของสไลด์

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

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

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

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

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

มองใกล้ที่ตัวเลือก

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

เราไม่ได้ล้อเล่นเมื่อพูดว่า Slider Revolution มีตัวเลือกมากมาย มีองค์ประกอบมากเกินไปที่จะกล่าวถึง เราจะอธิบายองค์ประกอบทั้งหมดเล็กน้อย จากนั้นจึงทบทวนองค์ประกอบที่สำคัญที่สุดอย่างละเอียดยิ่งขึ้น

1. ตัวเลือกทั่วไป

เราได้สัมผัสองค์ประกอบบางอย่างจากตัวเลือกทั่วไปแล้ว เช่น ชื่อเรื่องและเลย์เอาต์ อย่างไรก็ตาม นอกเหนือจากนี้ ยังมีสิ่งอื่น ๆ ที่คุณต้องปรับ

สรุป แล้ว ตัวเลือกทั่วไปช่วยให้คุณตั้งค่าต่อไปนี้ได้:

ชื่อเรื่อง — เพื่อระบุชื่อตัวเลื่อน
เค้าโครง — เลือกประเภทตัวเลื่อน (ตัวเลื่อน ฉาก หรือภาพหมุน) และขนาด (อัตโนมัติ เต็มความกว้าง หรือเต็มหน้าจอ) ซึ่งช่วยแก้ไขความกว้างและความสูงของพื้นที่เลเยอร์ ตำแหน่งของโมดูล สีพื้นหลังเริ่มต้นหรือรูปภาพ และอื่นๆ
เนื้อหา — ระบุวิธีการเพิ่มเนื้อหาไปยังตัวเลื่อน คุณสามารถเลือกจากแหล่งเนื้อหา 9 แหล่ง

• ค่าเริ่มต้น — ในที่นี้ เราขอแนะนำให้เน้นที่พารามิเตอร์ที่สำคัญตัวหนึ่ง — ระยะเวลาของสไลด์ (แต่ละสไลด์จะอยู่ได้นานแค่ไหน)
• ทั่วไป — ส่วนนี้ประกอบด้วยการตั้งค่าสไลด์โชว์สำหรับการหมุนอัตโนมัติ หยุดเมื่อโฮเวอร์ วนสไลด์ และเลือกสไลด์แรกที่กำหนด ที่นี่คุณยังสามารถซ่อนหรือปิดใช้งานตัวเลื่อนของคุณบนมือถือหรือภายใต้ความกว้างของพิกเซลที่ระบุ
• On Scroll — ตัวเลือกนี้ให้ผู้ใช้เลือกเอฟเฟกต์การเลื่อน เช่น พารัลแลกซ์ ความลึก 3 มิติ ไทม์ไลน์ เฟด เบลอ สเกลสีเทา และอื่นๆ เอฟเฟกต์ทั้งหมดมาพร้อมกับการตั้งค่าที่ปรับแต่งได้
• สปินเนอร์ — หรือพรีโหลด และปลั๊กอินมีตัวเลือกสปินเนอร์ 15 แบบให้เลือก
• ตัวเลือกขั้นสูงช่วยให้คุณสามารถเปิดใช้งานการโหลดแบบ Lazy Loading เลือกรูปภาพสำรอง หรือลดความซับซ้อนของตัวเลื่อนของคุณในเบราว์เซอร์รุ่นเก่า
• CSS/jQuery — คุณสามารถเพิ่มโค้ดที่กำหนดเองลงในแถบเลื่อนได้ที่นี่ โปรดทราบว่าควรใช้โดยผู้เชี่ยวชาญหรือผู้ใช้ที่คุ้นเคยกับแนวคิดการเขียนโปรแกรมและการเข้ารหัส
• เป็นโมดอล — ตัวเลือกนี้จำเป็นในกรณีที่คุณต้องการสร้างตัวเลื่อนที่ปรากฏเป็นป๊อปอัปหรือไลท์บ็อกซ์ และมีตัวเลือกสำหรับตำแหน่งตัวเลื่อน สีหน้าปก และรหัสย่อเพื่อใช้เมื่อแทรกตัวเลื่อนโมดอลในหน้า
• สกิน — สกินแสดงพรีเซ็ตที่คุณสามารถสร้างและกำหนดให้กับเลเยอร์ข้อความได้ (ระบุสีของไฮไลท์ หัวเรื่อง ข้อความเนื้อหา)

ส่วนเสริม — คุณจะพบส่วนเสริมที่นี่ (หมายเหตุ – ส่วนเสริมจะใช้ได้เฉพาะเมื่อคุณซื้อใบอนุญาตตัวเลื่อนของคุณเอง)

2. ตัวเลือกการนำทาง

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

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

องค์ประกอบการนำทางประกอบด้วย:

• ความคืบหน้า — แถบความคืบหน้าหรือวงกลมที่แสดงภาพความคืบหน้าของสไลด์ในปัจจุบัน
• ลูกศร — ทำให้ผู้เข้าชมคลิกผ่านสไลด์ของคุณได้อย่างง่ายดาย
• สัญลักษณ์แสดงหัวข้อย่อย — จุดนำทาง 14 รูปแบบเพื่อเพิ่มลงในสไลด์ของคุณ
• แท็บ — มีประโยชน์มากสำหรับตัวเลื่อนเนื้อหาที่ต้องการการนำทางแท็บ
• Thumbs — ต้องใช้เพื่อแสดงภาพขนาดย่อเป็นตัวเลือกการนำทาง มีให้เลือก 5 แบบ
• ขนาดก่อนหน้า — ระบุขนาดของภาพตัวอย่าง
• สัมผัส — มีตัวเลือกสำหรับการเลื่อนบล็อก ความเร็ว และทิศทาง
• แป้นพิมพ์ — คุณสามารถเปิดใช้งานการนำทางด้วยแป้นพิมพ์ได้ (แนะนำสำหรับการช่วยสำหรับการเข้าถึง)
• เมาส์ — เปิดใช้งานการควบคุมเมาส์ เช่น ฟังก์ชันหมุนหรือการเลื่อนย้อนกลับ
• ตัวแก้ไขการนำทาง — ส่วนนี้มีไว้สำหรับกำหนดลูกศร สัญลักษณ์แสดงหัวข้อย่อย แท็บ หรือนิ้วหัวแม่มือด้วยโค้ดที่คุณกำหนดเอง

3. ตัวเลือกสไลด์

ส่วนถัดไปของการตั้งค่าเกี่ยวข้องกับตัวเลือกสไลด์

• พื้นหลัง: เลือกพื้นหลังสำหรับสไลด์ของคุณ เลือกจากโปร่งใส เป็นสี (คุณสามารถเพิ่มการไล่ระดับสี) รูปภาพ รูปภาพภายนอก หรือวิดีโอ (YouTube, วิดีโอ หรือ HTML5)
• ภาพขนาดย่อ: กำหนดภาพขนาดย่อที่ผู้ดูแลระบบมองเห็นได้ และภาพขนาดย่อที่ใช้สำหรับการนำทาง
• แอนิเมชั่น: เลือกแอนิเมชั่นการเปลี่ยนสำหรับสไลด์ของคุณ
• ฟิลเตอร์ — 22 ฟิลเตอร์ต่าง ๆ เพื่อเพิ่มลงในสไลด์ของคุณ
• ความคืบหน้า — อนุญาตให้กำหนดความยาวของสไลด์ หยุดชั่วคราว และการมองเห็นบนสไลด์ได้
• กฎการเผยแพร่ — ควบคุมว่าจะเผยแพร่หรือไม่ได้เผยแพร่สไลด์ของคุณ
• แท็กและลิงก์ — ช่วยในการเพิ่มข้อมูลคลาส ID และ HTML แบบกำหนดเองสำหรับสไลด์ของคุณรวมถึงลิงก์
• พารามิเตอร์ — เพิ่มพารามิเตอร์ที่กำหนดเองได้สูงสุด 10 รายการเพื่อใช้ภายในสไลด์และการนำทางของคุณ
• เลเยอร์ลูป — จัดการการตั้งค่าลูปหากตัวเลื่อนของคุณมีเพียงหนึ่งสไลด์
• On Scroll — ปรับแต่งเอฟเฟกต์พารัลแลกซ์และเลื่อนตามสไลด์

เพิ่มสไลด์ใหม่

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

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

เพียงเลือกตัวเลือก Colored จากดรอปดาวน์ Type ในแผง Source จากนั้นคลิกปุ่ม BG Color เพื่อเลือกสีของคุณ หากคุณต้องการใช้วิดีโอเพียงเพิ่มแหล่งที่มา

การเพิ่มเลเยอร์ใหม่ให้กับสไลด์

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

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

ตัวเลือกเลเยอร์: วิธีใช้

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

เมื่อคุณต้องการเพิ่มเลเยอร์รูปภาพลงในสไลด์ของคุณ ให้คลิกที่ Image ใน เมนูดร็อปดาวน์ Add Layer แล้วอัพโหลดภาพที่ต้องการ

ถัดจากเฟรม คุณจะพบตัวเลือกเลเยอร์ต่างๆ (เนื้อหา สไตล์ ขนาดและตำแหน่ง ฯลฯ)

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

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

ตัวเลือกถัดไปคือการ เว้น วรรค การเว้นวรรคช่วยให้เราย้ายเลเยอร์จากบนลงล่าง จากซ้ายไปขวา จากล่างขึ้นบน และจากซ้ายไปขวา พวกเขาจะทำเครื่องหมายด้วยตัวอักษร 'M'

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

หลังจากนั้น คุณสามารถกำหนดตำแหน่งด้วย Vertical Offset จากตัวเลือก Aligned Position เล่นกับพารามิเตอร์ X และ Y เพื่อย้ายเลเยอร์ของคุณบนสไลด์

ตัวเลือกขั้นสูงของเลเยอร์

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

ตัวเลือกแอนิเมชั่นเลเยอร์

แอนิเมชั่นเป็นตัวเลือกหลักในการปฏิวัติสไลเดอร์ แนวคิดหลักของปลั๊กอินคือการเพิ่มองค์ประกอบภาพเคลื่อนไหวลงในไซต์ของคุณ แทนที่จะเป็นภาพนิ่งแบบมาตรฐาน

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

มีสองบรรทัดสำหรับตัวเลือกการปรากฎและทางออก: IN และ OUT

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

ส่วนด้านล่างนี้ใช้สำหรับ Animation Duration, Animation Easing และสำหรับการกำหนดภาพเคลื่อนไหว Start Duration กำหนดระยะเวลาที่ภาพเคลื่อนไหวจะเสร็จสิ้น ตัว เลือก Start กำหนดระยะเวลาหลังจากที่ภาพเคลื่อนไหวจะเริ่มเมื่อโหลดสไลด์ การค่อยๆ เปลี่ยนกำหนดความเร็วที่ภาพเคลื่อนไหวจะดำเนินไป

ไทม์ไลน์ของแอนิเมชั่น

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

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

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

ตอนนี้ มาดูตัวเลือกของ Timeline กันดีกว่า

1.ดูรายการ

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

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

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

3. ดูตัวอย่างไทม์ไลน์

ในการ ดูตัวอย่าง ไทม์ไลน์ คุณต้องคลิกไอคอนเล่นหรือลากบล็อกที่ไม่ได้ใช้งาน

4. เปลี่ยนชื่อเลเยอร์

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

5. เลเยอร์ z-index / คำสั่งซ้อน

ในการตั้งค่าลำดับดัชนี z/การเรียงซ้อน คุณเพียงแค่ลากเลเยอร์ในไทม์ไลน์

6. แอนิเมชั่น

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

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

ตัวเลือกลูปเลเยอร์

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

คุณสามารถเลือกได้ 8 ประเภท: กำหนดเอง, ลูปเพนดูลัม, ลูปเอฟเฟกต์, เวฟ, วิกเกิล, การหมุน, สไลด์และโฮเวอร์ และพัลส์ แอนิเมชั่นลูปแต่ละอันมีชุดตัวเลือกของตัวเอง

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

Effect Loops ให้คุณเลือกจากตัวเลือกต่างๆ — Grayscale, Blink, Flattern และ Lithing เอฟเฟกต์ทั้งหมดดูแตกต่างกัน ดังนั้นเราขอแนะนำให้คุณดูทุกตัวเลือกเพื่อเลือกตัวเลือกที่ดีที่สุดสำหรับคุณ

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

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

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

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

แอ นิเมชั่น Pulse ทำให้เลเยอร์ของคุณซูมเข้าและออกอย่างต่อเนื่อง ระบุการเริ่มต้นการซูมและสิ้นสุดการซูม ค่าเริ่มต้นที่นี่คือ 1 สำหรับทั้งจุดเริ่มต้นและจุดสิ้นสุด ซึ่งหมายความว่าเลเยอร์จะยังคงอยู่ที่ขนาด 100% กล่าวอีกนัยหนึ่งมันจะไม่เคลื่อนไหว หากคุณป้อน 0.5 สำหรับการเริ่มต้นการซูม เลเยอร์ของคุณจะเริ่มที่ 50% ของขนาดและซูมเข้าที่ 100% ของขนาด จากนั้นกลับไปที่ 50% เป็นต้น

ตัวเลือกเลเยอร์โฮเวอร์

เอฟเฟกต์โฮเวอร์เป็นส่วนสำคัญของ UX ที่ดี เอฟเฟกต์การวางเมาส์มักจะบ่งบอกว่าต้องมีการดำเนินการหรือดำเนินการ โดยเฉพาะอย่างยิ่งเนื่องจากวิธีนี้ใช้กับแถบเลื่อนอย่างแข็งขัน ด้วย Slider Revolution คุณสามารถเปลี่ยนเลเยอร์ ข้อความ และรูปภาพได้เมื่อวางเมาส์เหนือ

การเพิ่มเอฟเฟกต์โฮเวอร์ใน Slider Revolution

ขั้นแรก คุณต้องเปิดเลเยอร์โฮเวอร์ เลือกเลเยอร์ที่คุณต้องการเพิ่มเอฟเฟกต์ จากนั้นคลิก Hover ใต้ Layer Options คลิกที่ Enabled เพื่อเปิดใช้งาน

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

การตั้งค่าโฮเวอร์

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

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

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

โฮเวอร์นิเมชั่น

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

นอกจากนี้ คุณยังตั้งค่าการค่อยๆ เปลี่ยนสำหรับการเปลี่ยนได้ คุณมีหลายทางเลือกให้เลือก

กรอง

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

สไตล์

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

บนตัวเลือกเลเยอร์เลื่อน

ในตัวเลือกการเลื่อนทำให้สไลด์สามารถเลื่อนด้วยการเลื่อนเมาส์ได้ There are three options – Parallax , Timeline Scroll Based , and Filter Effect Scroll Based .

Layer Action Options

Actions make your layers interactive. For example, you can make a layer open a link when a user clicks on it.

Click on the Action icon to choose the type of action you need. The first dropdown is where you can choose the type of action that you would like to occur . There are a lot of options here: Link Actions, Slide Actions, Layer Actions, Media Actions, and Fullscreen Actions. Your chance is full depends on you and your goals, whether you want the layer to open the link or to switch the slide.

After you made a choice of what action to add, you need to set this particular option. For example, we are going to add a link. Select the option of Simple Link, and on the new screen, you will be offered to enter some parameters such as the URL itself, selecting the interaction and action type, and more.

Layer Visibility Options

If you want your layer to be visible on all devices , then make sure the switches shown in the image below are all turned ON under the Visibility section . The first one is for desktop, the second one is for laptops and horizontally oriented tablets, the third one is for vertically oriented tablets, and the last one is for mobile phones.

If you don't want your slider to be shown on some devices, simply turn off this option.

Text layer

After we review most of the options that we need for the layer setup, let's move to the other type of layer and try to add some text to our slide.

There are two options to choose from Quick Style heading or content. The main difference between them is pre-styled options.

Let's just point out some primary options you need to set for the text layer. They are the following:

• In the Content section, we add our text, and aligned it.
• In Style changed the font and its size, weight, line-height
• Customized the Size & Pos to change the location of the layer within the slider
• In Animation, we add some effects and speed for our text.

When adding a text layer there will appear a black box. You need to enter your text there. Everything you change will be visible in your work-frame.

Moving on to the Style tab. By default the font style that is applied to the text is Roboto. Choose the font family you prefer from the dropdown. Make sure that you selected the text layer before you start editing it.

Besides choosing a font family, you can also determine the font-size, line-height, font-weight, and letter spacing here as well. All these options adjust the look and feel of the text. So take your time to set it up and play around with these options to find the best combination.

Next, choose the color for your text. You can use the color picker and find the color that suits your page and slide perfectly. After that, you can save the change and see how the slider looks on your page.

If everything is good, you can move to the next step which defines the horizontal and vertical alignment of the text layer. For instance, you would like to have your text layer start 300px from the left edge of the screen, and 100px from the top. According to this, the horizontal alignment will be set to left, and vertical alignment to top. Fill in the X and Y fields respectively and save the changes to check how the text looks.

For customizing options you can use the same options we went through during the image layer setup. You can add animations, define visibility, create actions, etc.

You can also input HTML code into your text layer field. Thanks to this option, you can insert different shortcodes and create your own HTML elements using text layers.

วิธีสร้างเอฟเฟกต์พารัลแลกซ์ด้วยการปฏิวัติตัวเลื่อน

Parallax เป็นหนึ่งในเอฟเฟกต์ยอดนิยมที่ทำให้เว็บไซต์น่าประทับใจและเป็นไดนามิกมากขึ้น คุณอาจเคยเห็นเว็บไซต์และธีมมากมายที่รวมเข้ากับเอฟเฟกต์นั้นๆ และตอนนี้เราจะแสดงให้เห็นว่าคุณสามารถสร้างมันขึ้นมาเองโดยใช้ปลั๊กอิน Slider Revolution ได้อย่างไร

Parallax คืออะไร?

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

มีหลายวิธีในการบรรลุผลนี้บนเว็บไซต์ของคุณ โชคดีสำหรับเรา Slider Revolution มีฟังก์ชันทั้งหมดเพื่อช่วยให้คุณได้รับเอฟเฟกต์พารัลแลกซ์

การสร้าง Parallax ใน Slider Revolution

ขั้นแรก ให้เปิดพารั ลแลก ซ์ ไปที่ Module General Options > On Scroll > Scroll Based Features > Parallax และเปิดสวิตช์ Parallax Enabled เป็น On

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

การเพิ่ม Parallax ให้กับภาพพื้นหลัง

ในการเพิ่มเอฟเฟกต์พารัลแลกซ์ให้กับภาพพื้นหลังของคุณ ให้ไปที่ Slide Options > On Scroll > Parallax & 3D Settings และเลือกความลึกที่ต้องการจากรายการดรอปดาวน์

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

การเพิ่ม Parallax ให้กับ Layers

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

เลือกเลเยอร์ของคุณ ไปที่ Layer Options > On Scroll > Parallax & 3D tab และเลือกระดับความลึกที่ต้องการ

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

ไม่ว่าจะเป็นภาพพื้นหลังหรือแต่ละเลเยอร์ การเพิ่มเอฟเฟกต์พารัลแลกซ์ Slider Revolution นั้นง่ายมาก แม้ว่าตัวเลื่อนทุกตัวไม่ต้องการพารัลแลกซ์ ใช้มันเป็นส่วนใหญ่สำหรับตัวเลื่อนทั่วไป เนื่องจากตัวเลื่อนแบบไดนามิกที่มีแอนิเมชั่นจำนวนมากน่าจะทำได้ดีกว่าหากไม่มีเอฟเฟกต์นี้

การเพิ่มเลเยอร์ปุ่ม

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

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

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

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

คุณสามารถเปลี่ยนรูปลักษณ์เริ่มต้นของปุ่ม เปลี่ยนข้อความ เปลี่ยนการแสดงผลเมื่อวางเมาส์เหนือ และตั้งค่าภาพเคลื่อนไหวได้

วิธีทำให้ Slider ตอบสนอง

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

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

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

ตอนนี้ คุณสามารถเลือกอุปกรณ์ที่คุณต้องการจำลองจากเมนูดร็อปดาวน์ เปิดอุปกรณ์ที่คุณต้องการตรวจสอบการแสดงผลของแถบเลื่อน อุปกรณ์ที่ใช้ได้ ได้แก่ เดสก์ท็อป โน้ตบุ๊ก แท็บเล็ต มือถือ

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

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

สุดท้าย ให้บันทึกแถบเลื่อนของคุณ และดูว่ามันมีลักษณะเป็นอย่างไร

การเพิ่ม Slider ให้กับเพจ

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

หรือถ้าคุณเปิด Slider Revolution จากแดชบอร์ดของคุณ ค้นหาโมดูลปัจจุบันและเลือกตัวเลือกฝัง

ในหน้าต่างป๊อปอัปให้เลือกตัวเลือกสำหรับหน้าและโพสต์และคัดลอกรหัสย่อ

รหัสสั้นควรมีลักษณะ ดังนี้ [rev_slider alias=”title”][/rev_slider] โดยมี “title” ตามนามแฝงที่คุณกำหนดให้กับตัวเลื่อน

การแสดงแถบเลื่อนด้วย Elementor

การใช้วิธีย่อเพื่อแสดงแถบเลื่อนบนหน้านั้นง่ายพอสมควร อย่างไรก็ตาม มีวิธีที่ง่ายกว่านั้นอีก คุณสามารถแทรกแถบเลื่อนทั้งหมดที่คุณสร้างด้วยปลั๊กอิน Slider Revolution บนหน้าโดยใช้วิดเจ็ต Elementor เลือกหน้าที่คุณต้องการแสดงแถบเลื่อนและเปิดผ่านตัวแก้ไข Elementor จากนั้นเพียงลากและวางองค์ประกอบลงบนเฟรมการทำงาน บนแผงวิดเจ็ต ค้นหาวิดเจ็ต Slider Revolution 6 และเพิ่มในหน้า เมื่อคุณลากวิดเจ็ต คุณจะต้องเลือกตัวเลื่อนที่คุณต้องการใช้

ใช้วิธีนี้เป็นทางเลือกแทนรหัสย่อ เนื่องจากเจ้าของเว็บไซต์บางรายพบว่าการทำงานกับวิดเจ็ตตัวสร้างหน้าทำได้ง่ายขึ้น

วิธีการส่งออกแถบเลื่อน

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

วางเมาส์เหนือภาพขนาดย่อของโมดูลที่คุณต้องการส่งออก คลิกลูกศรเล็ก ๆ ที่มุมล่างขวา ในบรรดาตัวเลือกที่ปรากฏทั้งหมดให้เลือกการส่งออกและคลิกที่มัน

คุณจะเห็นกล่องโต้ตอบการยืนยันซึ่งจะแจ้งให้คุณทราบว่าการส่งออกอาจใช้เวลาสักครู่ คลิกที่ 'ใช่ส่งออก Slider' และการดาวน์โหลดจะเริ่มขึ้น เมื่อการดาวน์โหลดเสร็จสิ้น คุณจะมีไฟล์ .ZIP ของแถบเลื่อน

สรุป

ธีมเกือบทั้งหมดที่พัฒนาโดย StylemixThemes รวมถึงปลั๊กอิน Slider Revolution ในแพ็คเกจ เราชอบซอฟต์แวร์อันทรงพลังนี้ที่เปิดโอกาสให้เราทำให้เว็บไซต์น่าดึงดูด น่าดึงดูดใจ และโต้ตอบได้มากขึ้น

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