ไฮไลท์ปลั๊กอิน Divi – ตัวสร้างหน้าทุกที่

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

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

สำหรับการทดสอบ ฉันสร้างบล็อกง่ายๆ ในรูปแบบกริดที่มีสี่โพสต์ ฉันต้องการขยายเลย์เอาต์นี้ แต่ฉันจะทำด้วยปลั๊กอิน รูปภาพนำมาจาก Unsplash.com

เค้าโครง Divi

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

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

พื้นที่วิดเจ็ต

ปลั๊กอินเพิ่มพื้นที่วิดเจ็ตใหม่ห้าส่วนให้กับ Divi และอนุญาตให้คุณวางเลย์เอาต์ของคุณในตำแหน่งเหล่านั้น:

• เหนือส่วนหัว
• ด้านล่างส่วนหัว
• ส่วนท้าย
• เหนือเนื้อหา
• ด้านล่างเนื้อหา

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

ลอจิกแบบมีเงื่อนไข

วิดเจ็ตช่วยให้คุณใช้ตรรกะแบบมีเงื่อนไข คุณจึงตัดสินใจได้ว่าจะให้เค้าโครงปรากฏเมื่อใด ฉันเลือก Header with message แล้วคลิก Where ซึ่งจะแสดงตรรกะตามเงื่อนไขขึ้นมา เพื่อให้คุณสามารถเลือกได้ว่าจะแสดงหรือไม่ เลือกประเภทโพสต์ และเลือกผลลัพธ์จากกล่องดรอปดาวน์ คุณสามารถเพิ่มเงื่อนไขได้มากเท่าที่คุณต้องการ พวกเขาใช้ตรรกะ OR ดังนั้นมันจะแสดง IF This = That OR this = That OR...

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

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

ตัวสร้างเพจทุกที่ ตัวอย่าง

ฉันสร้างแถวตัวอย่างที่ฉันต้องการย้ายจากที่หนึ่งไปยังอีกที่หนึ่ง เรามาดูกันว่าจะมีลักษณะอย่างไรในส่วนต่างๆ ของหน้า ฉันจะเพิ่มตัวอย่างอีกสองสามตัวอย่างเมื่อเราไป

เหนือส่วนหัว

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

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

ด้านล่างส่วนหัว

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

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

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

เหนือเนื้อหา

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

ด้านล่างเนื้อหา

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

ส่วนท้าย

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

หน้าผลิตภัณฑ์ WooCommerce

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

เลย์เอาต์ที่สองจะอยู่ด้านล่างของผลิตภัณฑ์และมีโมดูล ข้อความ และโมดูล ร้านค้า

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

ผลลัพธ์คือหน้าผลิตภัณฑ์ที่มีเลย์เอาต์ Divi ด้านบนและด้านล่างของผลิตภัณฑ์

404 หน้า

ฉันสร้างเลย์เอาต์เพื่อใช้เป็นหน้า 404

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

นี่เป็นวิธีที่ยอดเยี่ยมในการสร้าง 404 หน้าโดยใช้ Divi Builder

ตัวสร้างเพจทุกที่ ตัวปรับแต่งเอง

เครื่องมือปรับแต่งใหม่ที่เรียกว่า PBE Customizer ถูกเพิ่มลงในเมนูแบบเลื่อนลงที่ส่วนหน้าและภายในเมนู Theme Customizer ประกอบด้วยส่วนสำหรับ:

• หัวข้อหลัก
• เหนือส่วนหัว
• ส่วนท้าย

มาดูทีละอย่างกันเลย

หัวข้อหลัก

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

เลือก Remove Default Main Header เพื่อซ่อนส่วนหัวเดิม คุณลักษณะสำหรับส่วนหัวหลักใช้งานได้ทั้ง ด้านบน และ ด้านล่าง ของส่วนหัว

เหนือส่วนหัว

ด้านบนส่วนหัว ช่วยให้คุณสามารถซ่อนเนื้อหาเหนือส่วนหัวเมื่อผู้อ่านเลื่อน

ส่วนท้าย

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

ราคาและเอกสารประกอบ

Page Builder Everywhere ราคา 14 เหรียญ หน้าการขายมีคำแนะนำและคำถามที่พบบ่อยเพื่อช่วยคุณในการเริ่มต้น

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

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

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

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