จะปรับแต่งเทมเพลต Slider ได้อย่างไร?

เผยแพร่แล้ว: 2023-02-05

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

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

วิธีเลือกเทมเพลตตัวเลื่อนสำหรับไซต์ของคุณ

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

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

เราต้องการสร้างอะไร

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

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

เราต้องการสไลเดอร์แบบไหน?

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

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

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

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

การค้นหาแถบเลื่อนที่สมบูรณ์แบบเพื่อเริ่มต้น

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

1. ส่วนหัว


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

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

2. ส่วนปัญหา


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

3. ส่วนอ้าง


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

4. ส่วนประกาศ


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

5. ส่วนการเจ้าหน้าที่


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

6. อาสาสมัคร


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

สัมผัสการตกแต่ง

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

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

จะเปลี่ยน Iceland Adventure ให้เป็นแม่แบบทางการเมืองได้อย่างไร?

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

บทสรุป

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