Smart Slider 3 เป็นปลั๊กอินที่ใช้สำหรับสร้างสไลด์ใน Woprdpress เป็นปลั๊กแินยอดนิยมเป็นอันดับต้นๆ ของปลั๊กอินการสร้าง Slide โดยดูได้จากปัจจุบันมียอดดาว์นโหลดไปแล้วกว่า 9 แสนครั้ง มีทั้งแบบ Free Version และ Pro Version
ด้วยหน้า User Interface ที่ใช้สร้างและแก้ไข Slide ที่คล้ายกับการใช้งาน Page Bulider โดยใช้วิธีลากวาง Layer และจัดโครงสร้างด้วย row และ columns ทำให้ปลั๊กอิน Smart Slider 3 เป็นปลั๊กอินที่ทรงพลังและใช้งานได้ง่าย
คุณสมบัติเด่น
- หน้าจอแก้ไขสไลด์แบบสด เห็นเหมือนแสดงบนหน้าเว็บจริง
- สร้าง Layer ได้หลาย Layer แต่ละ Layer รองรับข้อความ รูปภาพ ปุ่มกด
- รองรับ Responsive Mode ปรับแต่ง Slide ได้หลายขนาดหน้าจอ
- มี Template Slide แบบฟรีให้เลือกเยอะ
- รองรับ Page Builder มากมาย Elementor, Divi, Beaver Builder, Page Builder by SiteOrigin, Visual Composer, WPBakery Page Builder, Gutenberg และอื่นๆ
การติดตั้ง
ไปที่เมนู Plugins -> Add New Plugin
ที่ช่อง Keyword พิมพ์คำว่า Smart Slider 3
Install และ Activate ให้เรียบร้อย
ก็จะมีเมนู Smart Slider เพิ่มขึ้นมาที่แถบเมนูด้านซ้ายของหลังบ้าน WordPress
เมื่อเข้าไปที่หน้า Dashboard ของ Smart Slider ครั้งแรก จะมีหน้า Welcome มีคลิปวิดีโอแนะนำ ถ้าไม่ต้องการให้โขว์หน้านี้อีก ให้คลิกที่ Don’t show again
การสร้าง Slider
เมื่อคลิกที่ Don’t show again ก็จะมาที่หน้า Dashboard ให้คลิกที่ New Project เพื่อเริ่มต้นสร้าง Slide
จะมีหน้าจอให้เลือกว่าจะสร้างเอง 100% หรือเลือกจาก Template ที่มีอยู่ แล้วแก้ไขส่วนต่างๆ ตาม Tamplate ในที่นี้ขอเลือกแบบ Create New Project
ให้ตั้งค่าต่างๆ
Project Type เลือกว่าจะสร้าง Project แบบ Slider หรือ Block ซึ่งในที่นี้จะเลือกแบบ Slider
Slider Type รูปแบบของการสไลด์ เนื่องจากเป็นเวอร์ชั่นฟรี จึงเลือกได้แบบเดียว คือ Sample
Setting สำหรับตั้งชื่อ Project กำหนดขนาด Width, Height ของสไลด์ และ Layout
เมื่อตั้งค่าต่างๆ เรียบร้อยแล้ว ให้คลิกที่ปุ่ม Create
หน้า Project ที่สร้างขึ้น
เริ่มต้นให้คลิกที่ปุ่ม Add Slide หรือ คลิกที่ Slide one เพื่อสร้างสไลด์แรก
ก็จะมีตัวเลือกว่าจะสร้างสไลด์แบบไหน มีทั้ง Image, Blank หน้าเปล่า, Post จากบทความ, Static Overlay, Dynamic Slides ในที่นี้ขอเลือกเป็น Image
ระบบจะให้เพิ่มรูปภาพ โดยเลือกภาพที่มีอยู่แล้วหรือ Upload ลงไปใหม่ก็ได้ เมื่อเลือกภาพได้แล้ว ให้คลิกที่ Select
ก็จะกลับมาที่หน้าที่ใช้ปรับแต่งค่าต่างๆ ของ Slide
อธิบาย Tab Menu ต่างๆ ของ Smart Slider 3 แบบ Free Version
General ใช้ปรับแต่งค่าทั่วไปของ Slide
Publish – จะแนะนำการนำ Project ไปใช้ มีสองวิธีคือ Shortcode สำหรับไปวางในหน้า Post, Page หรือเป็น PHP Code สำหรับไปใช้ในไฟล์ PHP โดยตรง
General – Simple Slider ส่วนนี้สามารถเปลี่ยนชื่อของ Slide, ส่วน Thumbnail จะเป็นการใส่รูปตัวอย่างของ Slide เวลาแสดงที่หน้า Dashboard
Alias – เป็นการใส่ Anchor Link ที่สไลด์
Slider Design – จัดตำแหน่งของสไลด์ในกรณีที่ใช้ Slide แบบไม่เต็มหน้าจอ รวมถึงกำหนด Margin ระยะห่างของของสไลด์กับหน้า Browser
Size ใช้ปรับแต่งขนาดต่างๆ ของ Slider
Slider Size – ปรับขนาดของ Slider เวลาแสดงผลในหน้าจอต่างๆ
Breakpoints – กำหนดจุดปรับเปลี่ยนขนาดของ Slider เมื่อมีการปรับขนาดของ browser (ใม่ใช่การแสดงผลในอุปกรณ์จริง เช่น Tablet, Mobile)
Layout – กำหนดรูปแบบของ Slider ว่าจะให้แสดงผลแบบ Box หรือ Full
Controls เป็นส่วนที่ใช้ปรับแต่งการเลื่อนเปลี่ยนภาพ Slider
General – สำหรับตั้งค่าเมื่อมีการคลิกค้างลากที่ Slider เพื่อเปลี่ยน Slide จะให้เลื่อนเปลี่ยนทางแนวตั้งหรือแนวนอน, ใช้ลูกกลิ้งเมาส์ในการเปลี่ยน Slider หรือใช้ลูกศรคียบอร์ดในการเปลี่ยน Slider
นอกจากนี้ก็จะเป็นการตั้งต่าของปุ่มที่ใช้กดเพื่อเปลี่ยน Slider เช่น Arrow, Bullets
Animation ตั้งค่ารูปแบบของการเปลี่ยน Slider
Main Animation – รูปแบบการเปลี่ยน Slider เช่น เปลี่ยนตามแนวนอน แนวตั้ง แบบ Fade หรือไม่มีรูปแบบ
Background Animation – เป็นการกำหนดรูปแบบ Animation ของภาพพื้นหลัง
Autoplay เป็นส่วนที่ใช้กำหนดให้ Slider เลื่อนโดยอัตโนมัติเมื่อเข้าหน้าเว็บ
ถ้าเลือกเปิด Autoplay จะมีส่วนต่างๆให้ตั้งค่าดังนี้
Slide Duration – ความเร็วในการเลื่อนภาพ Slide ถัดไป
Stop On Click – หยุดการ Play เมื่อมีการคลิกที่ภาพ Slide
Stop On Mouse – ตั้งค่าให้การใช้ Mouse มีผลต่อการ Play SLide
Stop On Media – สำหรับตั้งค่า Slide แบบวีดีโอ ให้ Slide หยุดดาร Autoplay เมื่อวิีดีโอนั้นกำลังเล่น
Button – ต้องการให้มีปุ่ม Play เพื่อหยุดหรือเล่น Slide หรือไม่
Optimize เป็นส่วนที่ใช้ปรับแต่งค่าเพื่อให้ Slider ทำงานได้เร็วขึ้น
Slides คือการกำหนดรูปแบบการแสดงผลของรูปภาพที่ใช้เป็น Slide เช่น
Fill คือแสดงผลเต็มหน้าจอไม่ว่าภาพที่ใช้จะเป็นขนาดใดก็ตาม ซึ่งถ้าภาพไม่พอดีกับขนาดหน้าจอ ก็จะมีการ Crop ภาพออกให้พอดี
Blur Fit คือการแสดงภาพแบบไม่ Crop โดยส่วนที่ขาดไปจะเป็นภาพพื้นหลังที่ถูกเบลอ
Fit จะแสดงภาพเต็มขนาดหน้าจอ Slide ที่กำหนด ไม่มีการ Crop หรือเบลอพื้นหลัง ซึ่งสัดส่วนภาพก็จะผิดเพี้ยนไป
ซึ่งตรงนี้จะคล้ายกับการกำหนด Object-fit ใน CSS
Developer เป็นการปรับแต่งค่าเพิ่มเติมอื่นๆ รวมถึงยังสามารถ Custom CSS ได้เอง
การเข้าไปแก้ไข Slide
ภาพแต่ละ Slide ที่เราเพิ่มเข้าไปนั้น สามารถเข้าไปแก้ไขหรือเพิ่มข้อความลงไปได้ ทำได้โดยคลิกที่ภาพ Slide ที่ต้องการ
หน้า UI ของ Slide
โดยแถบเมนูด้านซ้ายจะใช้เพิ่ม Layer ต่างๆลงไป เช่น Heading, Text, Image, Button, Row สามารถคลิกที่ปุ่มนั้นๆโดยตรง หรือจะคลิกที่ปุ่ม + สีเขียวแล้วคลิกเลือกก็ได้
ตัวอย่าง ต้องการเพิ่ม Layer Heading ก็ให้คลิกที่ไอคอนรูปตัว H ก็จะมี Layer Heading ขึ้นมาให้ใส่ข้อความ ใส่ Link ปรับแต่ง Style ต่างๆ
ถ้าเพิ่ม Layer Row จะเป็นการเพิ่ม Row ซึ่งจะสามารถแบ่งเป็นหลาย Columns ได้
และเพิ่ม Layer ที่ต้องการใส่ใน Column ได้
การใช้งานและปรับแต่งค่าต่างๆ จะมีใกล้เคียงกับการใช้งาน Page Builder
ที่ไอคอนด้านบนรูปหน้าจอคอม เมื่อคลิกจะสามารถเลือกดู Slide ในหน้าจอ Mobile, Tablet และ Desktop ได้
เมื่อแก้ไข Slide เรียบร้อยแล้ว ให้คลิกที่ปุ่ม Save
จากนั้นที่มุมซ้ายบน เมื่อคลิกที่ชื่อ Project จะกลับไปหน้า Project ถ้าต้องการแก้ไขภาพ Slide อื่นๆ ก็ทำได้ตามต้องการ
เมื่อสร้าง Project เสร็จแล้ว ให้คลิกที่ปุ่ม Save
การนำไปใช้
ให้ก๊อปปี้ Shortcode ที่แสดงในอยู่ Tab General แล้วนำไปวางที่หน้า Post หรือ Page ที่ต้องการ
เมื่อแสดงผลที่หน้าเว็บไซต์
สรุป
ปลั๊กอิน Smart Slider 3 เป็นปลั๊กอินที่ใช้สำหรับสร้าง Slider ที่มีฟังก์ชั่นการใช้งานค่อนข้างครบสำหรับการใช้งานพื้นฐาน แต่เนื่องจากการที่ปรับแต่งได้เยอะนี่เอง ทำให้มือใหม่ที่ยังไม่ชำนาญการสร้าง Slide จากหน้าเปล่า ก็ยังมีตัวเลือก Free Template 15 แบบให้เลือกใช้และนำมาปรับเปลี่ยนภาพและข้อความตามที่ต้องการ โดยถ้าเป็น Version Pro ก็จะมี Template ให้เลือกใช้ถึง 158 แบบ และเป็นการซื้อแบบครั้งเดียวไม่ต้องจ่ายรายปี สำหรับใครที่กำลังมองหาปลั๊กอินสำหรับสร้าง Slider ดีๆ ปลั๊กอิน Smart Slider 3 ก็เป็นตัวเลือกที่ดีทั้งแบบ Free และ Pro ครับ
Related Posts
