15+ ตัวอย่างตัวเลื่อน WordPress ที่ยอดเยี่ยม (ตู้โชว์)

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

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

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

ตู้โชว์แรงบันดาลใจ Slider

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

CNBC Prime

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

ซีบีเอส

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

ยูนิเวอร์แซล ออร์แลนโด

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

นกพิราบ Cotes ของ Saville

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

แมกโนเลียเบเกอรี่

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

หุบเขาเพลิง

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

ธีมความคืบหน้า

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

แกลเลอรี Smithsonian Freer Sackler

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

โลนลี่แพลนเน็ต

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

อีสต์เบย์

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

Sheetz

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

Xbox

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

ทิม ฮอร์ตันส์

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

Sony Crackle

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

สถาบันสมิธโซเนียน

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

พิพิธภัณฑ์ลูฟร์

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

วิธีสร้างแถบเลื่อน WordPress ของคุณเอง

ตอนนี้ คุณอาจจะสงสัยว่า “ ตัวเลื่อนเหล่านี้ยอดเยี่ยมมาก แต่ฉันจะสร้างมันขึ้นมาสำหรับเว็บไซต์ของตัวเองได้อย่างไร”

โชคดีที่มันค่อนข้างง่ายจริง ๆ ด้วยปลั๊กอิน Soliloquy สำหรับ WordPress

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

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

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

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

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

(ดูแท็บ เบ็ดเตล็ด สำหรับการนำเข้าหรือส่งออกตัวเลื่อนของคุณ)

เพิ่มตัวเลื่อนไปที่หน้าหรือโพสต์

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

ตัวเลื่อนของคุณจะเผยแพร่บนเว็บไซต์ของคุณ:

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

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

• สร้างแถบเลื่อนรูปภาพแบบเต็มความกว้างใน WordPress
• เปลี่ยนเวลาตัวเลื่อนใน WordPress
• สร้างตัวเลื่อนวิดีโอที่ตอบสนองใน WordPress

หากคุณชอบบทความนี้ โปรดติดตามเราบน Facebook และ Twitter เพื่อรับบทเรียน WordPress ฟรีเพิ่มเติม