ไฮไลท์ปลั๊กอิน Divi: เนื้อหาเข้มข้น

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

Content Intense เป็นปลั๊กอินจาก BeSuperfly ที่เพิ่มเลย์เอาต์และคุณสมบัติการออกแบบใหม่เพื่อให้โมดูลบล็อกของคุณมีรูปลักษณ์ใหม่ อิงตามโมดูลบล็อกมาตรฐาน ดังนั้นจึงมีคุณลักษณะที่คุ้นเคยทั้งหมด

(ปลั๊กอินมีให้จากเว็บไซต์ของผู้พัฒนา)

ในไฮไลต์ของปลั๊กอินนี้ เราจะพิจารณาคุณลักษณะต่างๆ และดูว่ามีลักษณะอย่างไรในหน้าเว็บ ฉันจะโหลดมันใน Extra ด้วย (แต่แน่นอนว่ามันเข้ากันได้กับ Divi ด้วย)

การติดตั้งเนื้อหาเข้มข้น

อัปโหลดและใช้งาน Content Intense เหมือนกับปลั๊กอินอื่นๆ เมื่อเปิดใช้งานปลั๊กอินแล้ว คุณจะเห็นรายการเมนูใหม่ภายในการตั้งค่าในแดชบอร์ดที่เรียกว่าการเปิดใช้งานปลั๊กอินเข้มข้นของเนื้อหา คลิกที่นี่และป้อนคีย์ API และอีเมลของคุณ แล้วบันทึกการเปลี่ยนแปลง

โมดูลเข้มข้นเนื้อหา

โมดูลใหม่ถูกเพิ่มลงใน Divi Builder ที่เรียกว่า Content Intense

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

หนึ่งในคุณสมบัติที่โดดเด่นที่สุดคือการเพิ่มหมวดหมู่ของ WordPress ลงในเพจ หากคุณเลือกที่จะแสดงหน้า หน้าเหล่านั้นจะถูกเลือกเมื่อคุณเลือกหมวดหมู่

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

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

การตั้งค่าเริ่มต้นแบบเข้มข้นของเนื้อหา

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

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

อันนี้เพิ่มสีสันให้กับพื้นหลังด้านหลังข้อความ ฉันได้ย้ายปุ่มไปทางขวาและตั้งค่าข้อความที่ตัดตอนมาเป็น 150 ด้วย

มีห้ารูปแบบที่แตกต่างกัน ตัวอย่างที่เราเคยเห็นมาจนถึงตอนนี้ใช้ Atlas – เลย์เอาต์แนวตั้ง 3 คอลัมน์พร้อมอวาตาร์ มาดูเลย์เอาท์แต่ละแบบกัน ฉันใช้การตั้งค่าเริ่มต้น

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

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

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

อันนี้คือ Andes – เลย์เอาต์แนวตั้ง 1 คอลัมน์พร้อมอวตาร ใช้รูปภาพเด่นในเวอร์ชันครอบตัดและใช้บรรทัดเล็ก ๆ เพื่อแยก meta และบรรทัดที่ใหญ่ขึ้นเพื่อแยกโพสต์

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

ตัวอย่าง – เทือกเขาแอลป์กับ Atlas

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

ตัวอย่าง – เทือกเขาแอลป์

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

ฉันชอบมันมากกว่าที่ไม่มีขอบ อันนี้แสดงปุ่มบนโฮเวอร์

ตัวอย่าง – Andes

ตัวอย่างนี้ใช้โมดูล Content Intense ที่แตกต่างกัน 6 โมดูล โดยทั้งหมดใช้ Andes และแต่ละโมดูลจะถูกชดเชยมากกว่าโมดูลก่อนหน้า 1 โมดูล ฉันได้เพิ่มพื้นหลังในส่วนที่มีการซ้อนทับ แบบอักษรของส่วนหัวคือ Comfortaa โมดูลสุดท้ายใช้การนำทาง ฉันได้เปลี่ยนปุ่มเป็นข้อความ

มาดูการออกแบบคอลัมน์เดี่ยวแบบปกติกัน ฉันได้เพิ่มโอเวอร์เลย์โฮเวอร์ด้วย อย่างอื่นเป็นค่าเริ่มต้น

ตัวอย่าง – เทือกเขาหิมาลัย

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

ตัวอย่าง – Rockies

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

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

ตัวอย่าง – Extra

Content Intense ทำงานได้ดีกับ Extra ฉันแค่ต้องทำการปรับเปลี่ยนเล็กน้อยที่ฉันใช้ Andes ในตัวอย่างของฉัน ฉันวางพื้นหลังสีขาวสำหรับพื้นที่ข้อความ เนื่องจากฉันใช้ข้อความสีขาว ฉันจึงเปลี่ยนเป็นสีเข้ม ตัวอย่างข้างต้นคือเทือกเขาร็อกกี้ ความแตกต่างเพียงอย่างเดียวคือสีข้อความสำหรับลิงก์อ่านเพิ่มเติม

รูปแบบที่ดาวน์โหลดได้

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

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

เลือกจากใบอนุญาตสองใบ (ไม่อนุญาตให้ขายต่อ):

• ใบอนุญาตมาตรฐาน: สำหรับใช้บนเว็บไซต์เดียว ประกอบด้วย 1 สำหรับโครงการพัฒนาและ 1 สำหรับโครงการสด
• ใบอนุญาตไม่ จำกัด : สามารถใช้ในเว็บไซต์ไม่ จำกัด สำหรับการใช้งานส่วนตัวและไคลเอนต์

การอัปเดตเป็นไปโดยอัตโนมัติ Content Intense หาได้จากเว็บไซต์ของผู้พัฒนา

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

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

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

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

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