สุดยอดคู่มือการสร้าง Divi Slider

เผยแพร่แล้ว: 2020-09-04

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

โมดูล Divi Slider

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

โมดูลตัวเลื่อน Divi
โมดูลตัวเลื่อน Divi ที่มีจำหน่าย

มาดูโมดูลเหล่านี้กัน!

โมดูลตัวเลื่อน

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

โมดูลตัวเลื่อน Divi

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

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

ตัวเลื่อนวิดีโอ

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

โมดูลตัวเลื่อนวิดีโอ

👍 ดี
  • คุณสามารถใช้วิดีโอประเภทใดก็ได้
  • วิธีง่ายๆ ในการสร้างแกลเลอรีวิดีโอ
👎 ไม่ดี
  • ไม่มีตัวเลือกเล่นอัตโนมัติ
  • ทุกครั้งที่วิดีโอเริ่มตั้งแต่ต้น

ตัวเลื่อนโพสต์

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

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

จะสร้างตัวเลื่อน Divi ให้ดีขึ้นได้อย่างไร?

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

หวังว่าคุณจะต้องการทราบว่าปลั๊กอิน Smart Slider 3 สามารถอัพเกรดฟังก์ชันตัวเลื่อน Divi ได้อย่างไร การปรับปรุงที่สำคัญที่สุดอย่างหนึ่งคือคุณสามารถสร้างสไลด์โชว์ที่มีมากกว่า 4 เลเยอร์ในลำดับและตำแหน่งที่กำหนดเอง

ตัวอย่างแถบเลื่อนผลงานเต็มหน้า

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

จะใช้ Smart Slider 3 ได้อย่างไร?

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

หากคุณพร้อมแล้วกับตัวเลื่อน ให้เผยแพร่ด้วยโมดูล Smart Slider Divi

โมดูลตัวเลื่อนอัจฉริยะ

เปรียบเทียบโมดูลตัวเลื่อน Divi และ Smart Slider

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

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

มาดูความแตกต่างที่เกี่ยวข้องกัน!

โมดูลตัวเลื่อน Divi
Smart Slider 3 ฟรี
Smart Slider 3 Pro
เลเยอร์ 5 6 23
ตัวเลือกการพิมพ์
ลากและวางอินเทอร์เฟซ
ภาพพื้นหลัง
วิดีโอพื้นหลัง mp4, WEBM mp4
เอฟเฟกต์พารัลแลกซ์
แอนิเมชั่นเลเยอร์
การเปลี่ยนผ่าน
การควบคุม 2 5 7
ตัวแปรไดนามิก
ซ้อนทับแบบคงที่
เล่นอัตโนมัติ

อินเตอร์เฟซ

อินเทอร์เฟซ Smart Slider

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

แอนิเมชั่นและเอฟเฟกต์

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

การควบคุมที่ปรับแต่งได้

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

ตัวเลื่อนภาพขนาดย่อฟรี

ตัวเลื่อนเล่นอัตโนมัติ

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

ทำไมคุณควรเลือก Smart Slider 3 เป็น Divi Slider ของคุณ

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

ประเภทตัวเลื่อนที่มีจำหน่ายใน Smart Slider
ประเภทตัวเลื่อนใน Smart Slider แถวบนสุด: ธรรมดา (ฟรี) และ Carousel (Pro) แถวล่าง: บล็อก (ฟรี) และตู้โชว์ (Pro)

เหตุผลในการเลือก Smart Slider 3 ฟรี

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

เหตุผลในการเลือก Smart Slider 3 Pro

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