ไฮไลท์ปลั๊กอิน Divi – ตัวเลื่อนอะไรก็ได้

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

Anything Slider เป็นปลั๊กอินของบุคคลที่สามจาก CakeWP ที่ช่วยให้คุณใช้เลย์เอาต์ Divi ภายในสไลด์ได้ คุณสามารถทำอะไรได้มากกว่าแค่ตัวเลื่อน นอกจากนี้ยังมีโมดูล AS Menu ที่สามารถใช้ร่วมกับโมดูลตัวเลื่อนเพื่อสร้าง:

• แท็บ
• ม้าหมุน
• ส่วนโต้ตอบ
• สลับราคา
• แกลเลอรีที่กรองได้
• CTA เชิงโต้ตอบ
• ผลิตภัณฑ์ที่กรองได้
• หน้าเว็บ

Slider อะไรก็ได้ที่ใช้งานได้กับปลั๊กอิน Divi, Extra และ Divi Builder ในไฮไลต์ของปลั๊กอินนี้ เราจะมาดูกันว่า Anything Slider ทำอะไรได้บ้าง รูปภาพมาจาก Unsplash.com

• ดู CakeWP.com สำหรับข้อมูลการซื้อ

ติดตั้ง Slider อะไรก็ได้

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

เพิ่มโมดูลใหม่สองโมดูลใน Divi Builder: Anything Slider และ AS Menu พวกเขาร่วมกันสร้างการออกแบบที่น่าสนใจ

การตั้งค่าโมดูลตัวเลื่อนอะไรก็ได้

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

การตั้งค่า Slider Slider ใด ๆ

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

การตั้งค่าโมดูลตัวเลื่อนเมนู AS

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

ชุดเริ่มต้น Slider อะไรก็ได้

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

การสร้างแถบเลื่อนแบบกำหนดเอง

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

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

แอนิเมชั่น

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

ปุ่มนำทาง

ปุ่มนำทางสามารถกำหนดสไตล์ได้อย่างอิสระ จัดรูปแบบทั้งแบบปกติและโฮเวอร์สำหรับไอคอน เส้นขอบ สี ฯลฯ

ในตัวอย่างนี้ ฉันกำหนดรูปแบบปุ่มนำทางอย่างอิสระและเพิ่มขนาดของจุด (คุณสามารถระบุขนาดพิกเซลที่ต้องการสำหรับจุดต่างๆ ได้) แอนิเมชั่นโฮเวอร์จะเปลี่ยนสีและรัศมีของเส้นขอบ ประกอบด้วยคุณสมบัติการจัดสไตล์แบบเดียวกับโมดูล Divi ส่วนใหญ่

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

AS เมนูโมดูล

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

โมดูล AS Menu สร้างเมนูเพื่อให้ผู้เยี่ยมชมสามารถเลื่อนดูสไลด์ได้ สไลด์นั้นมีแท็กการนำทางที่ส่วนท้ายของ URL (ในแถบที่อยู่ของเบราว์เซอร์ของคุณ) ใช้แท็กนี้สำหรับรายการเมนูแต่ละรายการ ในตัวอย่างนี้ แท็ก URL ของสไลด์คือ #s_1

ฉันวางเมนูไว้ที่ด้านล่าง เพิ่มขนาดแบบอักษร และเพิ่มพื้นหลังเพื่อให้โดดเด่น คำต่างๆ นั้นคลิกได้ แต่ในตัวอย่างนี้ดูเหมือนไม่ใช่ปุ่ม ที่เปลี่ยนได้ง่าย

ฉันได้เพิ่มช่องว่างภายในแบบกำหนดเองและปรับสีโฮเวอร์และพื้นหลังแล้ว

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

ฉันปรับเลย์เอาต์เป็น 2 คอลัมน์ (3/4 + 1/4) และวางการวางแนวเมนูเป็นแนวตั้ง

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

การสร้างเพจที่ไม่ซ้ำ

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

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

สำหรับสไลด์ ฉันสร้างเลย์เอาต์ด้วยโมดูลบล็อกเดียวโดยเลือกหมวดหมู่เดียว

โมดูล AS Slider จะแสดงเค้าโครงบล็อกทั้งหมดเป็นสไลด์เดี่ยว ฉันได้ปิดการควบคุมถัดไป/ก่อนหน้าและจุด

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

เอกสาร Slider อะไรก็ตาม

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

ใบอนุญาต การสนับสนุน และการอัปเดต

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

• 1 ไซต์ – $30.00
• 5 ไซต์ – $50.00
• ไม่จำกัดไซต์ – $120.00

ใบอนุญาตทั้งหมดรวมถึงการสนับสนุนและการอัปเดตหนึ่งปี

• ดู CakeWP.com สำหรับข้อมูลการซื้อ

ความคิดสุดท้าย

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

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

เราอยากได้ยินจากคุณ คุณเคยใช้อะไร Slider หรือไม่? แจ้งให้เราทราบเกี่ยวกับประสบการณ์ของคุณในความคิดเห็น

ภาพเด่นผ่าน VectorsMarket / shutterstock.com