ไฮไลท์ปลั๊กอิน Divi – บล็อกพิเศษของ Divi

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

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

ในไฮไลต์ของปลั๊กอินนี้ เราจะมาดูที่ Divi Blog Extras และรับแนวคิดบางอย่างเกี่ยวกับสิ่งที่สามารถทำได้ด้วยปลั๊กอินนี้ รูปภาพสำหรับตัวอย่างเหล่านี้นำมาจาก Unsplash.com

การติดตั้งและการตั้งค่าพิเศษของบล็อก Divi

อัพโหลดและเปิดใช้งานตามปกติ โมดูลใหม่ที่เรียกว่า Divi Blog Extras จะพร้อมใช้งานใน Divi Builder หากต้องการใช้งาน ให้วางลงในแถวเช่นเดียวกับโมดูลอื่นๆ เนื่องจากตัวเลือกต่างๆ จะเหมือนกับโมดูล Divi Builder มาตรฐาน การใช้โมดูลนี้จึงเป็นเรื่องง่าย

การตั้งค่าเนื้อหาประกอบด้วยตัวเลือกที่คุ้นเคยและมีตัวเลือกเค้าโครงหกแบบ ความยาวข้อความที่ตัดตอนมา สีหมวดหมู่ โหลดข้อความปุ่มเพิ่มเติม การซ้อนทับรูปภาพเด่น ข้อความปุ่มอ่านเพิ่มเติม และตัวเลือกสีข้อความ การตั้งค่าการออกแบบประกอบด้วยส่วนหัว เมตา และข้อความเนื้อหา และการกำหนดสไตล์เส้นขอบ เลย์เอาต์ Block Extended เพิ่มตำแหน่งรูปภาพและ Classic เพิ่มไอคอนโซเชียล มาดูเลย์เอาต์แต่ละแบบกันดีกว่า

ขยายกริด

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

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

กล่องขยาย

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

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

ความกว้างเต็ม

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

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

เลย์เอาต์ทั้งหมดเป็นแบบตอบสนอง นี่คือรูปลักษณ์ที่ตอบสนองของ Full Width นี่แสดงสองโมดูลเคียงข้างกันในแถว 2 คอลัมน์

บล็อกขยาย

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

Block Extended มีสามตัวเลือกในการแสดงภาพ ตัวอย่างนี้วางรูปภาพเด่นในพื้นหลังพร้อมข้อความในโอเวอร์เลย์

ตัวอย่างนี้สลับภาพพื้นหลังระหว่างสองตัวเลือกแรก

พื้นหลังความกว้างเต็ม

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

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

คลาสสิค

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

เลย์เอาต์นี้มีตัวเลือกในการแสดงไอคอนโซเชียล การคลิก โหลดเพิ่มเติม (หรือตามที่ฉันติดป้ายกำกับไว้ – ดูบทความเพิ่มเติม) จะแสดงโพสต์ชุดถัดไป ซึ่งเท่ากับจำนวนโพสต์ที่ฉันเลือกให้แสดง ในตัวอย่างนี้ ฉันกำลังแสดงสองโพสต์ Load More โหลดอีก 2 โพสต์ถัดไป

การสร้างเค้าโครงที่ไม่ซ้ำกับ Divi Blog Extras

สามารถใช้หลายโมดูลร่วมกันเพื่อสร้างเค้าโครงนิตยสาร เลย์เอาต์ที่เรียบง่ายนี้ประกอบด้วยสี่โมดูลที่แสดงเลย์เอาต์ Gird Extended แต่ละโมดูลจะแสดงหมวดหมู่ที่แตกต่างกัน สองคนที่อยู่ตรงกลางแสดงสองโพสต์แต่ละโพสต์

ซึ่งจะสร้างเลย์เอาต์นิตยสารที่มีหมวดหมู่ต่างๆ สำหรับส่วนต่างๆ ตัวอย่างนี้แสดงให้เห็นว่า Extended Grid มีลักษณะตอบสนองอย่างไร

นี่เป็นเค้าโครง Divi Builder เดียวกัน แต่ใช้พื้นหลังแบบเต็มความกว้าง ภาพซ้อนทับครอบคลุมภาพเกือบทั้งหมดเมื่ออยู่ในโหมดตอบสนอง

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

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

ใบอนุญาต

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

ปลั๊กอินนี้ใช้ไม่ได้กับ Extra

• คุณสามารถซื้อปลั๊กอินนี้ได้ที่เว็บไซต์ของ Divi Extended

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

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

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

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