หมายเหตุ การเลือกใช้ Layout แบนเนอร์ ถ้าเว็บไซต์มีการเปิดใช้งาน Sidebar ไม่แนะนำให้ใช้ Layout แบบ Fullwidth เนื่องจากจะทำให้ภาพ แบนเนอร์ทับกับ sidebar
- เข้าใช้งาน Smart Slider
→เลือก Smart Slider
→กด GO TO DASHBOARD
- การสร้าง Slider
→กดปุ่ม NEW PROJECT
Create a New Project
- การตั้งค่าเบื้องต้น Banner slider
→Name ให้กำหนดชื่อได้ตามต้องการ
→ตั้งค่า Width กับ Height ได้ตามต้องการ
→Layout
→Full width เป็นการแสดง Banner Slide แบบยืดสุดหน้าจอทั้งซ้ายและขวา แนะนำให้กำหนดขนาด Width:1920 Hight:450 (ไม่สามารถใช้ร่วมกับหน้าจอที่มี Layout แบบ Sidebar ได้)
→Boxed เป็นการแสดง Banner Slide แบบปกติทั่วไป จะไม่ยืดจุดสุดซ้ายขวา
→กดปุ่ม Create
การเพิ่มรูปภาพลงใน Slider
→กดปมุ่ Add Slide
→เลือกรูปภาพที่ต้องการ
→กดปุ่ม เลือก เพื่อนำไปใช้
เพิ่มรูปภาพลงใน slide แล้วจะได้ดังรูป
สามารถเพิ่มภาพลงสไลได้อีกโดยการกดปุ่ม Image แล้วเพิ่มรูปภาพได้เรื่อยๆ
สามารถ Delete = ลบ, Duplicate = ทำซ้ำ, Unpublish = ปิดการเผยแพร่, Set As First = ให้เป็นสไลแรก
ได้โดยการกดปุ่ม … ที่ สไล
5.การเพิ่มลิงก์ลงไปใน slide
กรณีที่ต้องการฝังลิงก์ลงไปใน slider เพื่อให้ ผู้ใช้สามารถกดที่ slide แล้วเปิดไปลิงก์ที่ต้องการได้ ดังนี้
→กดปุ่ม Edit
→เลือก Content
→เลื่อนลงมาจะเจอช่องให้ใส่ Link
ตั้งค่ากำหนดเพิ่มเติมได้ว่าเมื่อกดลิงก์แล้วจะให้เปิด Tab ใหม่ โดยการ
→ที่ Target windows เลือกเป็น New
→เสร็จแล้วกดปุ่ม SAVE สีเขียวที่มุมบนขวา
6.การปรับขนาดรูปภาพ
กรณีภาพที่นำมาใช้ ไม่ตรงกับที่กำหนดไว้ ทำให้แสดงภาพไม่เต็ม หรือไม่พอดีกับที่กำหนดไว้ สามารถดำเนินการได้ดังนี้
→เลือก STYLE
→เลือก Fill Mode
Fill = ภาพเต็มอาจจะมีส่วนที่ขาดหายไปบ้าง
Blur fit = ภาพจะเต็มพอดี โดยส่วนที่เป็นพื้นที่ว่างจะนำภาพนั้นมา Blur
Fit = ภาพจะเต็มพอดี ส่วนพื้นที่ว่างจะเป็นพื้นที่ว่างๆ
Stretch = ทำให้ภาพเต็ม Banner โดยการยืด ภาพจะเต็มพอดี แต่อาจจะเสียสัดส่วน
Center = Focus ที่ตรงกลาง
ในที่นี้แนะให้ใช้ เป็น Fit หรือ Blur Fit
→เสร็จแล้วกดปุ่ม SAVE สีเขียวที่มุมบนขวา
7.การตั้งค่าเพิ่มเติมที่จำเป็นมักใช้กันบ่อยๆมีดังนี้
แก้ไขการตั้งค่าขนาดและเลเอาร์ Banner
→Size →Slider Size
→Size →Layout
เปิดตัวแสดงจำนวนของ Slide (Bullet)
→Controls →Bullets
วามเร็ว Animation ของสไล หน่วยเป็นมิลลิวินาที(ms) คือ 1000(ms) = 1 วินาที
→Animations→Main Animation
เปิดใช้งานการเลื่อนสไลอัตโนมัติ
กำหนดระยะเวลาในการเปลี่ยนสไลได้ที่ Slide Duration
→Autoplay→เปิด Autoplay
8.การนำ Banner slider ไปแสดง
→General→Publish→shortcode
ให้ copy shortcode เก็บไว้ แล้วนำไปใส่ใน block Shortcode ในหน้าที่ต้องการ
เช่น shortcode คือ และต้องการแสดง Banner slider นี้ที่หน้า home
→ให้ไปที่หน้า →home → เลือก block ShortCode →วาง shortcode ไปวาง
ผลลัพธ์
