สร้างโมดูลของคุณเองด้วยกลุ่มโมดูล Divi 5

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

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

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

กลุ่มโมดูลใหม่ของ Divi คืออะไร?

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

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

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

วิธีสร้างโมดูล divi ของคุณเอง

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

1. สร้างโมดูล Blurb ของคุณเอง

โมดูล Blurb ในตัวของเรา

โมดูล Blurbs เป็นวัตถุดิบในการออกแบบ Divi มากมาย มันเป็นโมดูลไปสู่ ​​แต่เมื่อคุณทำลายมันมันมีเพียงไม่กี่สิ่งที่ทำให้มันคลิก นั่นคือ:

ภาพ/ไอคอนชื่อเรื่อง/หัวเรื่องและเนื้อหาของร่างกาย เราสามารถสร้างกลุ่มโมดูลและวางโมดูลเหล่านี้ไว้ข้างใน: ภาพหรือไอคอนหัวเรื่องและโมดูลข้อความ ร่วมกันทั้งสามโมดูลสามารถทำซ้ำเนื้อหาเดียวกันที่ใช้งานได้ในโมดูล Blurb

กายวิภาคของโมดูลประกาศ

การสร้างกลุ่มโมดูล Blurb ของคุณเอง

นี่คือตัวอย่างของโมดูล Blurb ที่มีไอคอนทางด้านซ้ายและการจำลองแบบที่เหมือนกันของโมดูล Blurb โดยใช้ A:

กลุ่มแถวด้านในคอลัมน์ (1) พร้อมโมดูลไอคอนและคอลัมน์ (2) ที่มีส่วนหัวและโมดูลข้อความ

เอ็กซเรย์เปิดขึ้นเพื่อดูโครงกระดูกของแต่ละคนเพื่อดูความคล้ายคลึงกันแม้ว่าพวกเขาจะสร้างแตกต่างกัน

สิ่งเดียวที่พิเศษสำหรับการจัดเรียงนี้คือคอลัมน์แรกถูกตั้งค่าเป็นความกว้าง 18% และที่สองใช้ความกว้าง 82% (ตัวเลือกการปรับขนาดคอลัมน์ใหม่ด้วยการอัปเดตคุณสมบัติแถวซ้อนกัน)

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

2. สร้างโมดูลกำหนดราคาของคุณเอง

โมดูลตารางราคาในตัวของเรา

โมดูล Divi บางตัวมีอะไรอีกมากมายเกิดขึ้น นั่นเป็นกรณีของโมดูลตารางราคา มีหลายฟิลด์ ต่อ ตารางราคาตามที่คุณเห็นด้านล่าง

กายวิภาคของโมดูลตารางราคา

การสร้างกลุ่มโมดูลตารางราคาของคุณเอง

หากเราสร้างโมดูลตารางราคาใหม่โดยใช้กลุ่มโมดูลและโมดูลเดี่ยวเราจะได้ผลลัพธ์นี้

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

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

3. สร้างโมดูลข้อความรับรองของคุณเอง

โมดูลข้อความรับรองในตัวของเรา

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

การสร้างกลุ่มโมดูลข้อความรับรองของคุณเอง

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

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

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

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

บันทึกโมดูลที่กำหนดเองของคุณเป็นองค์ประกอบทั่วโลก

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

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

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

คุณสามารถเข้าถึงองค์ประกอบทั่วโลกที่บันทึกไว้ทั้งหมดและรายการห้องสมุดอื่น ๆ ในแดชบอร์ด> Divi> Divi Library การแก้ไของค์ประกอบทั่วโลกที่นี่จะอัปเดตผ่านเว็บไซต์ นอกจากนี้คุณยังสามารถแก้ไของค์ประกอบทั่วโลกได้โดยตรงบนหน้าเว็บที่ใช้ใน (และจะอัปเดต Sitewide)

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

รับ Divi Cloud

สร้างสิ่งใหม่ ๆ ในวันนี้

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

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

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