ไฮไลท์ปลั๊กอิน Divi – Owl Carousel Pro

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

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

มีปลั๊กอินเวอร์ชันฟรีให้ใช้งาน ฉันกำลังดูรุ่น Pro ซึ่งเพิ่มคุณสมบัติใหม่หลายอย่าง ได้แก่ :

• ประเภทโพสต์ที่กำหนดเอง
• แสดงฟิลด์ที่กำหนดเอง
• ข้อความค้นหาที่กำหนดเอง
• เปลี่ยนขนาดย่อ
• เปลี่ยนจำนวนภาพที่แสดง
• เปิดภาพในไลท์บ็อกซ์

รูปภาพสำหรับตัวอย่างนำมาจาก Unsplash.com

การติดตั้ง Owl Carousel Pro

อัปโหลดและเปิดใช้งานปลั๊กอินตามปกติ จากนั้นคุณจะเห็นโมดูลใหม่สองโมดูลใน Divi Builder: DP Owl Carousel และ DP Owl Image Carousel โมดูลมีสีแตกต่างจากโมดูล Divi มาตรฐานเพื่อช่วยให้โดดเด่น นี่เป็นความชอบของฉันสำหรับโมดูลของบริษัทอื่นเพราะช่วยให้ค้นหาได้ง่ายขึ้น

DP นกฮูกม้าหมุน

DP Owl Carousel แสดงโพสต์ โปรเจ็กต์ และประเภทโพสต์ที่กำหนดเองภายในภาพหมุน มันจะแสดง 10 โพสต์ล่าสุดของคุณหรือจากหมวดหมู่หรือแท็กที่คุณเลือก แท็บเนื้อหาประกอบด้วยการตั้งค่าสำหรับเนื้อหาและองค์ประกอบ แท็บการออกแบบประกอบด้วยข้อความ, ข้อความชื่อโพสต์, ข้อความเมตาของโพสต์, ข้อความที่ตัดตอนมาของโพสต์, ข้อความในไฟล์แบบกำหนดเอง, ระยะห่าง, ลูกศร, ตัวควบคุม และรูปขนาดย่อ

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

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

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

หมายเหตุ – ลองใช้โค้ดบนไซต์ทดสอบเสมอก่อนที่จะเพิ่มลงในไซต์ที่ใช้งานจริงของคุณ

ตัวอย่าง DP Owl Carousel

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

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

ข้อความนี้แสดงหัวข้อและข้อความที่ตัดตอนมาโดยใช้อักขระเริ่มต้น 270 ตัว

ในส่วนนี้ ฉันได้ตั้งค่าข้อความที่ตัดตอนมาของโพสต์เป็นอักขระ 70 ตัว

ในส่วนนี้ฉันได้ปิดการใช้งานลูกศรและตัวควบคุม แอนิเมชั่นยังคงใช้งานได้ แต่ผู้ใช้จะสลับไปมาระหว่างสไลด์ไม่ได้

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

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

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

DP นกฮูกภาพหมุน

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

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

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

ตัวอย่างภาพหมุนภาพ DP Owl

โมดูลมีลักษณะดังนี้บนหน้าโดยใช้การตั้งค่าเริ่มต้น ฉันได้เพิ่มพื้นหลังในส่วนเพื่อช่วยให้โดดเด่น

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

อันนี้แสดง 4 ภาพ ฉันได้เพิ่มขนาดรูปภาพและลดระยะขอบของรายการจาก 8 เป็น 4 ต่อไป ฉันได้ปรับขนาดและสีของแบบอักษร ลูกศร และตัวควบคุม แบบอักษรชื่อเรื่องมีระยะห่างเพิ่มขึ้น

อันนี้ใช้พื้นหลังสีเข้มพร้อมสีใหม่สำหรับแบบอักษร ตัวควบคุม และลูกศร

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

ประเภทโพสต์ที่กำหนดเอง

ในโมดูล Owl Carousel Pro ตรวจสอบให้แน่ใจว่าได้ปิดใช้งาน Custom Query (ใช้เฉพาะในกรณีที่คุณต้องการสร้างตัวกรองแบบกำหนดเองของคุณเองแทนที่จะเลือกหมวดหมู่จากรายการ) และเลือกประเภทโพสต์ของคุณภายใต้ชื่อประเภทโพสต์ที่กำหนดเอง ฉันติดตั้ง WooCommerce และตอนนี้มี Product เป็นตัวเลือกโดยอัตโนมัติ

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

สินค้าจะแสดงแต่เพื่อแสดงราคา ฉันต้องเปิดใช้งานฟิลด์ที่กำหนดเอง เลือกฟิลด์ที่จะแสดง และเพิ่มป้ายกำกับเพื่อแสดงสัญลักษณ์สกุลเงินที่ต้องการ เลื่อนลงและเปิดใช้งานแสดงฟิลด์ที่กำหนดเอง เพิ่ม _price ให้กับชื่อฟิลด์ที่กำหนดเอง และ $ ให้กับป้ายกำกับฟิลด์ที่กำหนดเอง

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

การใช้ Owl Carousel Pro พร้อมปลั๊กอินเสริมและ Divi Builder

Owl Carousel Pro ใช้งานได้ดีกับ Extra เช่นกัน นี่คือภาพหมุน

ต่อไปนี้คือตัวอย่างปลั๊กอินที่มีปลั๊กอิน Divi Builder ที่ติดตั้งในธีม WordPress Twenty Seventeen อันนี้แสดงผลิตภัณฑ์ WooCommerce ของฉัน

ใบอนุญาต

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

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

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

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

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

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