ไฮไลท์ปลั๊กอิน Divi – โมดูลบล็อกที่กำหนดเองของ Divi

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

Divi Custom Blog Module (ปัจจุบันเรียกว่า DTS Blog Module Pro) เพิ่มโมดูลใหม่ให้กับ Divi Builder ที่จัดเตรียมสไตล์และฟีเจอร์ใหม่ๆ รวมถึงแท็กโซเชียลมีเดีย สีพื้นหลังสำหรับเมตาและหมวดหมู่ และอื่นๆ ใช้งานได้ทั้งแบบความกว้างเต็มและรูปแบบกริด เพิ่ม CSS ของคุณเองเพื่อปรับแต่งให้ดียิ่งขึ้นไปอีก เพิ่มตัวเลือกเครื่องมือปรับแต่งใหม่ 12 แบบเพื่อให้คุณปรับสีได้แบบเรียลไทม์ นอกจากนี้ยังมีวิดเจ็ตใหม่สามรายการที่จะวางในแถบด้านข้างของคุณ

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

การติดตั้งและการตั้งค่า

อัปโหลดและเปิดใช้งานปลั๊กอินเช่นเดียวกับปลั๊กอินพรีเมียมอื่นๆ เมื่อเปิดใช้งานแล้ว คุณจะพบรายการเมนูใหม่ในแดชบอร์ดที่เรียกว่า Divi Custom Modules

เมนูนี้ให้คุณเลือกรายการเพิ่มเติมที่สามารถเพิ่มลงในส่วนย่อยของบล็อกได้

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

ตัวเลือก DCM – Meta ที่กำหนดเอง ช่วยให้คุณสามารถเปิดหรือปิดใช้งานฟิลด์เมตาที่กำหนดเองสำหรับผู้แต่ง วันที่ และความคิดเห็น

ฉันได้รวมตัวเลือกเหล่านี้ไว้ในตัวอย่างของฉันแล้ว

การสร้างเค้าโครงบล็อก

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

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

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

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

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

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

ต่อไปนี้คือรูปแบบโพสต์ WordPress ปกติที่มี Divi Custom Modules ทำงานอยู่ แม้ว่าเพจนี้จะไม่ได้สร้างด้วย Divi Builder แต่ก็ยังคงแสดงโพสต์โดยใช้ Divi Custom Blog Module ในเค้าโครงแบบเต็มความกว้างพร้อมเนื้อหาเพิ่มเติมที่เหมือนกันทั้งหมด

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

สามวิดเจ็ตใหม่

ปลั๊กอินยังเพิ่มวิดเจ็ตใหม่สามรายการ:

DCM-เกี่ยวกับ – ชื่อ ตำแหน่ง ตำแหน่ง รูปภาพ คำอธิบาย และเครือข่ายสังคมออนไลน์

Divichild โพสต์ล่าสุด – ชื่อ, จำนวนโพสต์, หมวดหมู่

Divichild โพสต์ยอดนิยม – ชื่อ, จำนวนโพสต์, หมวดหมู่

เช่นเดียวกับ Divi Custom Blog Module วิดเจ็ตสามารถกำหนดสไตล์ด้วย Theme Customizer

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

เครื่องมือปรับแต่งธีม

แน่นอน แบบอักษรและสีสามารถปรับเปลี่ยนได้ตามใจชอบ และคุณสามารถเพิ่มการซ้อนทับด้วยไอคอนได้เช่นเดียวกับโมดูลบล็อกมาตรฐาน เราสามารถปรับแต่งได้มากขึ้นโดยใช้ Theme Customizer

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

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

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

อันนี้ใช้เลย์เอาต์กริด รูปแบบการ์ดบล็อกทั้งสองดูดีมาก

ใบอนุญาต

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

• นี่คือปลั๊กอินระดับพรีเมียม ตามลิงค์นี้เพื่อซื้อ: Divi Custom Blog Module

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

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

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

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

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

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