ทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับกลุ่มโมดูล Divi 5

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

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

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

ลองสำรวจสิ่งที่เป็นไปได้กับกลุ่มโมดูล

กลุ่มโมดูลคืออะไร?

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

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

ทำไมกลุ่มโมดูลจึงมีความสำคัญ

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

1. พวกเขาเป็นส่วนหนึ่งของอนาคตของ Divi: กลุ่มโมดูลถูกสร้างขึ้นด้วยสถาปัตยกรรมการคิดล่วงหน้าของ Divi 5 พวกเขามีคุณสมบัติที่จะเกิดขึ้นเช่น FlexBox และ Query Loop Builder ซึ่งจะทำให้การสร้างเลย์เอาต์แบบไดนามิกเป็นเรื่องง่าย การลงทุนในกลุ่มโมดูลทำให้คุณประสบความสำเร็จในระยะยาวโดยเฉพาะอย่างยิ่งเมื่อ Divi 5 วิวัฒนาการ
2. พวกเขาประหยัดเวลา: ด้วยกลุ่มโมดูลคุณไม่ต้องจัดการกับการแก้ไขซ้ำ ๆ คุณสามารถจัดรูปแบบการเปลี่ยนตำแหน่งหรือเลย์เอาต์ที่ซับซ้อนในการกระทำเดียวการตัดเวลาการออกแบบอย่างมีนัยสำคัญ ค่าที่ตั้งไว้ล่วงหน้าสำหรับกลุ่มโมดูลจะนำสิ่งนี้ต่อไปโดยให้คุณบันทึกและใช้การกำหนดค่าที่กำหนดไว้ล่วงหน้าทันที
3. พวกเขาส่งเสริมความสอดคล้องของการออกแบบ: กลุ่มโมดูลช่วยให้คุณมั่นใจได้ว่าทุกองค์ประกอบในกลุ่มตั้งแต่ปุ่มไปจนถึงข้อความเป็นไปตามกฎการจัดแต่งทรงผมเดียวกัน สำหรับผู้ที่จัดการไซต์ที่มีแบรนด์กลุ่มโมดูลสามารถทำการออกแบบที่ขัดเงาและเป็นมืออาชีพทั่วทั้งเว็บไซต์ของคุณ
4. อิสระที่สร้างสรรค์มากขึ้น: กลุ่มโมดูลให้คุณทดสอบโดยไม่ต้องแก้ไขแต่ละองค์ประกอบเป็นรายบุคคล คุณสามารถสร้างการออกแบบที่โดดเด่นได้อย่างง่ายดายแม้ว่าคุณจะยังใหม่กับ Divi การรวมแถวที่ซ้อนกันและกลุ่มโมดูลสามารถช่วยคุณปลดล็อคภาชนะบรรจุที่มีรังได้อย่างไม่ จำกัด

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

วิธีใช้กลุ่มโมดูลใน Divi 5

การเริ่มต้นใช้งานกลุ่มโมดูลนั้นง่าย เพิ่มแถวใหม่ลงในหน้าใน Divi 5 และเลือกเค้าโครง 3 คอลัมน์

ใน Divi 5 คุณจะสังเกตเห็น โมดูลกลุ่ม ใหม่ คลิกเพื่อเพิ่มลงในคอลัมน์แรก

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

ในคอลัมน์แรกของแถวซ้อนกัน เพิ่มโมดูลรูปภาพ

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

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

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

กรณีการใช้งานจริงสำหรับกลุ่มโมดูล

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

1. กรณีการใช้งานในอนาคต: โพสต์และผลิตภัณฑ์

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

2. การเรียกใช้ส่วนการดำเนินการ

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

3. ส่วนข้อความรับรอง

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

4. หมวดหมู่ผลิตภัณฑ์

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

5. เมนูร้านอาหาร

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

กลุ่มโมดูลในบริบทของ Divi 5

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

แถวซ้อนกัน

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

ตัวแปรออกแบบ

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

หน่วยขั้นสูง

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

เคล็ดลับสำหรับการเพิ่มกลุ่มโมดูลให้สูงสุด

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

1. วางแผนเลย์เอาต์ของคุณ: ก่อนการจัดกลุ่มโมดูลให้ร่างโครงสร้างส่วนของส่วนของคุณหรือใช้เครื่องมือสร้างต้นแบบเพื่อช่วยคุณวางแผนองค์ประกอบที่คุณต้องการใช้ การวางแผนล่วงหน้านี้ช่วยป้องกันการทำงานพิเศษและทำให้มั่นใจได้ว่ากลุ่มของคุณมีเหตุผลและสามารถใช้ซ้ำได้
2. ใช้ Divi Cloud: บันทึกกลุ่มโมดูลที่คุณชื่นชอบเพื่อ Divi Cloud เพื่อเปลี่ยนเป็นสินทรัพย์ข้ามโครงการ ตัวอย่างเช่นคุณสามารถบันทึกกลุ่มสมาชิกในทีมที่ขัดเงาและดึงลงในเว็บไซต์ใด ๆ ด้วยการคลิกเพียงไม่กี่ครั้ง
3. ทดสอบการตอบสนองด้วยจุดพัก: ใช้จุดพักที่ปรับแต่งได้ของ Divi 5 เพื่อให้แน่ใจว่ากลุ่มโมดูลของคุณดูไร้ที่ติในทุกอุปกรณ์ ปรับระยะห่างหรือขนาดตัวอักษรสำหรับมือถือภายในการตั้งค่าของกลุ่มเพื่อหลีกเลี่ยงการปรับแต่งด้วยตนเอง
4. ใช้ประโยชน์จากตัวแปรการออกแบบ: เพื่อเพิ่มการทำงานร่วมกันในการออกแบบของคุณให้ตั้งค่าตัวแปรการออกแบบสำหรับสีข้อความตัวอักษรหรือกฎตัวเลข (เช่นการคำนวณแคลมป์ () การคำนวณ) เพื่อให้การเปลี่ยนแปลงเล็กน้อยง่ายขึ้น
5. รับความคิดสร้างสรรค์ด้วยการจัดแต่งทรงผม: ทดลองกับเอฟเฟกต์ตัวหนาเช่นภาพเคลื่อนไหวโฮเวอร์หรือการเปลี่ยนผ่านแบบซิงโครไนซ์ภายในกลุ่มโมดูล ตัวอย่างเช่นเพิ่มเอฟเฟกต์สเกลลงในปุ่มที่จัดกลุ่มและรูปภาพสำหรับ CTA แบบไดนามิก
6. ทดลองกับ Divi 5: Alpha สาธารณะของ Divi 5 เป็นสนามเด็กเล่นของคุณ - สร้างไซต์ทดสอบเพื่อสำรวจกลุ่มโมดูล ลองจัดกลุ่มการรวมโมดูลที่แตกต่างกันหรือทดสอบแนวคิดการจัดแต่งทรงผมใหม่เพื่อค้นหาสิ่งที่เป็นไปได้

ออกแบบอย่างชาญฉลาดด้วยกลุ่มโมดูลใน Divi 5

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

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

เราขอแนะนำให้คุณเข้าร่วมชุมชน Divi เพื่อแบ่งปันการสร้างสรรค์กลุ่มโมดูลของคุณ โพสต์การออกแบบของคุณในกลุ่ม Divi Facebook หรือ TAG @ElegantThemes บน X.

มาสร้างสิ่งที่น่าอัศจรรย์ด้วยกันกันเถอะ!