Customize Banners เทมเพล็ต

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

การใช้งาน Breakpoints

ค่าที่เห็นในรูปคือค่าเริ่มต้นของ breakpoints ที่ระบบให้มา โดยฟีลด์ดังนี้

• Breakpoint คือขนาดหน้าจอที่ต้องการให้แสดงผล
• Slides Per View คือจำนวนรูปที่ต้องการให้แสดงผลในหน้าจอต่อครั้ง
• Centered Slides คือการจัดให้รูปแสดงตรงกลางหน้าจอหรือไม่
• Space Between คือระยะห่างระหว่างรูปแต่ละรูป

ตัวอย่างการใช้งาน Breakpoints

การแสดงผลบนหน้าจอมือถือส่วนใหญ่จะแสดงแค่รูปเดียว (เนื่องจากขนาดหน้าจอแคบ) ดังนั้นเราจึงต้องปรับค่าของ breakpoints ให้แสดงผลเป็น 1 รูปต่อหน้าจอ หรือใช้เป็นค่า Auto ก็ได้

จากค่าพื้นฐานของ breakpoint ที่ระบบให้มา คือจะมีจุดที่มีการเปลี่ยนแปลงจำนวนรูปครั้งแรกที่ขนาดหน้าจอ 768px ซึ่งถ้าเราทำการแก้ไข Slide Per View จาก 2 เป็น 3 จะทำให้เกิดการแสดงผลที่แตกต่างกัน

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

การตั้งเวลาแสดงผล

เลย์เอาท์นี้มีการเพิ่มฟีลด์ให้สามารถตั้งเวลาแสดงผลได้ โดยผู้ใช้สามารถเลือกช่วงเวลาที่ต้องการให้แสดงผลได้

การแสดงผลรูปเป็น popup

ในเลย์เอาท์นี้จะมีฟีลด์ Card Zoom ที่จะทำให้รูปแสดงผลเป็น popup โดยจะแสดงผลเมื่อผู้ใช้คลิกที่รูป

การเปลี่ยนลำดับการแสดงผลด้วย Drag & Drop

ผู้ใช้สามารถใช้การ Drag & Drop เพื่อเปลี่ยนลำดับของ Slide ได้