ไฮไลท์ปลั๊กอิน Divi: ตัวสร้างโมดูล Divi

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

ในบทความนี้ ฉันจะดูที่ปลั๊กอินและดูว่าสามารถทำอะไรได้บ้างและใช้งานง่ายเพียงใด ต้องใช้ Divi 3.0.50 หรือสูงกว่าและใช้งานได้กับทั้ง Divi และ Extra มีให้จากเว็บไซต์ของผู้พัฒนา: DiviPlugins.com

การติดตั้งตัวสร้างโมดูล Divi

เมื่อคุณเปิดใช้งานปลั๊กอินแล้ว ให้คลิก หน้าการเปิดใช้งาน DMB อีกวิธีหนึ่ง คุณสามารถดูหน้าจอนี้ได้โดยไปที่ Custom Modules ในแดชบอร์ด และคลิก License

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

เพิ่มโมดูล

โมดูลถูกสร้างขึ้นในเมนูแดชบอร์ดภายใต้ Custom Modules , Add Module มีสองส่วนที่คุณจะใช้เพื่อสร้างโมดูล พื้นที่ทางด้านซ้ายเป็นที่ที่คุณจะสร้างฟิลด์ พื้นที่ด้านขวาเป็นที่ที่คุณจะเพิ่มโค้ดที่ฟิลด์จะใช้ คุณสามารถสร้างโมดูลมาตรฐานหรือเต็มความกว้าง คุณสามารถบันทึกฉบับร่างหรือเผยแพร่เมื่อคุณพร้อม เมื่อเผยแพร่โมดูลแล้ว โมดูลจะปรากฏใน Divi Builder

ทุ่งนา

โมดูลของคุณสามารถมีฟิลด์ได้มากเท่าที่คุณต้องการ แต่ละฟิลด์มีคุณสมบัติของฟิลด์อยู่ภายใน มาดูคุณสมบัติของแต่ละฟิลด์อย่างละเอียดยิ่งขึ้น:

ป้ายกำกับฟิลด์ – ป้ายกำกับที่จะแสดงเป็นชื่อฟิลด์ในแท็บเนื้อหาของโมดูล

ตัวระบุฟิลด์ – ค่าเฉพาะที่คุณจะใช้เพื่ออ้างอิงฟิลด์ใน HTML ใช้เฉพาะตัวอักษรพิมพ์เล็ก ตัวเลข และขีดล่างสำหรับตัวระบุฟิลด์

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

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

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

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

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

รหัส

เพิ่ม HTML, PHP, CSS และ JavaScript ที่กำหนดเองเพื่อควบคุมเอาต์พุต ฟิลด์ HTML สามารถใช้แบบสอบถามที่กำหนดเองและ PHP คุณจะต้องเปิดใช้งาน PHP ก่อนจึงจะรู้จักรหัส มิฉะนั้นจะพิมพ์รหัสบนหน้าจอ ทั้ง HTML และ PHP ใช้ตัวระบุฟิลด์เพื่ออ้างอิงฟิลด์

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

การสร้างโมดูล

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

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

โมดูลนี้จะปรากฏใน Divi Builder ฉันสามารถเพิ่มลงในหน้าได้เหมือนกับโมดูล Divi ใดๆ

แท็บเนื้อหาประกอบด้วยฟิลด์ที่ฉันเพิ่มด้วยป้ายกำกับของฉัน

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

โมดูล

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

การตั้งค่าโมดูลแบบกำหนดเอง

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

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

เพิ่มการพึ่งพา

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

ตัวอย่างตัวสร้างโมดูล Divi – ตารางบล็อกที่กำหนดเอง

แทนที่จะสร้างโมดูลที่ 'โอเค' เป็นตัวอย่าง ฉันกำลังแสดงตัวอย่างที่ยอดเยี่ยมที่นักพัฒนาสร้าง - Custom Blog Grid (สามารถดาวน์โหลดได้ที่เว็บไซต์ของผู้พัฒนาฟรี) ประกอบด้วย 3 ฟิลด์ HTML, PHP และ CSS มาดูทีละอย่างกันเลย

โมดูลกริดบล็อกแบบกำหนดเอง

ฟิลด์ 1 มีป้ายกำกับว่า หมวดหมู่ ใช้หมวดหมู่เป็นตัวระบุ และตั้งค่าประเภทฟิลด์เป็น ข้อความ

ฟิลด์ 2 มีชื่อว่า B&W Image Effect ตัวระบุคือตัวกรอง และประเภทที่ยื่นคือ Yes/No Toggle ตัวกรองถูกสร้างขึ้นใน CSS

ฟิลด์ 3 มีชื่อว่า Post Title และใช้ post_title เป็นตัวระบุ ประเภทฟิลด์ถูกตั้งค่าเป็นข้อความและเปิดใช้งานแท็บออกแบบ เราจะเห็นการปรับแต่งสำหรับฟิลด์นี้ในโมดูล ฟิลด์นี้ได้รับคลาส H2 ใน HTML

เลือก PHP เพื่อให้สามารถใช้ในกล่องโค้ดเอาต์พุต HTML

CSS ที่กำหนดเองถูกเพิ่มลงในกล่องเอาต์พุต CSS

นี่คือจาวาสคริปต์ คุณจะต้องมีความเข้าใจที่ดีเกี่ยวกับ HTML, PHP, CSS และ Javascript เพื่อใช้ประโยชน์สูงสุดจากปลั๊กอินนี้ กล่าวอีกนัยหนึ่งนี่คือปลั๊กอินสำหรับนักพัฒนา

โมดูลกริดบล็อกที่กำหนดเองใน Divi Builder

เมื่อเผยแพร่โมดูลแล้ว คุณจะพบโมดูลดังกล่าวใน Divi Builder

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

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

ผลลัพธ์กริดบล็อกที่กำหนดเอง

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

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

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

มีใบอนุญาตให้เลือกสามแบบ: เดี่ยว ไม่จำกัด และตลอดชีพ สิทธิ์ใช้งานแบบไม่จำกัดครอบคลุมเว็บไซต์ไม่จำกัดและรวมถึงการอัปเดตและการสนับสนุน 1 ปี ใบอนุญาต Lifetime Unlimited Sites รวมถึงการอัปเดตและการสนับสนุนตลอดอายุการใช้งาน

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

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

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

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

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