วิธีแทรกโมดูล Divi หรือแถวภายในโมดูล Divi อื่น ๆ (ไม่มีปลั๊กอิน)

เผยแพร่แล้ว: 2020-12-31

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

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

มาเริ่มกันเลย!

แอบมอง

ต่อไปนี้คือตัวอย่างสั้นๆ ที่เราจะสร้างในบทช่วยสอนนี้

แบบฟอร์มการติดต่อภายในโมดูลสลับ

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

โมดูลสลับและโมดูลปุ่มภายในโมดูลประกาศ (คอลัมน์ขวา)

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

แถว Divi ภายในโมดูลสลับ

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

ดาวน์โหลดเค้าโครงฟรี

ในการวางเลย์เอาต์จากบทช่วยสอนนี้ ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์
ดาวน์โหลดฟรี

ดาวน์โหลดฟรี

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

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

สมัครสมาชิกช่อง Youtube ของเรา

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

กล่องแจ้งเตือน Divi

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ขยายแท็บมุม

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

  1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
  2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
  3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

สิ่งที่ควรทราบ

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

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

คุณสามารถแทรกโมดูลหรือแถวภายในโมดูลที่สามารถเพิ่มข้อความ/html ได้เท่านั้น

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

ส่วนที่ 1: วิธีแทรกโมดูล Divi ลงในโมดูลอื่น

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

ตัวอย่างที่ 1: การแทรกโมดูลแบบฟอร์มการติดต่อภายในโมดูลสลับ

เพิ่มแถวใหม่

ในการเริ่มต้น ให้เพิ่มแถวหนึ่งคอลัมน์ใหม่ในส่วน

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

เพิ่มโมดูลสลับ (โมดูลปลายทาง)

ภายในคอลัมน์ เพิ่มโมดูลสลับ

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

สำหรับตัวอย่างนี้ เราต้องการแทรกโมดูลภายในโมดูลสลับนี้ ซึ่งเราสามารถอ้างถึงเป็นโมดูลปลายทางของเรา ในทางเทคนิค ปลายทางจริงจะอยู่ภายในเนื้อหาเนื้อหาของ Toggle Module (ซึ่งคุณสามารถเพิ่มข้อความ/HTML) ในการกำหนดตำแหน่งปลายทาง เราจำเป็นต้องแทรก div ใหม่ด้วยคลาส CSS ที่จำเป็น ซึ่งจะทำหน้าที่เป็นตำแหน่งเป้าหมายสำหรับโมดูลแบบพกพาของเรา (โมดูลที่เราต้องการแทรก)

ใต้แท็บเนื้อหาของการตั้งค่าสลับ ให้เพิ่ม HTML ต่อไปนี้ลงในเนื้อหา อย่าลืมคลิกแท็บ Text ก่อนแทรก HTML

<div class="divi-module-destination"></div>

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

เพิ่มโมดูลแบบฟอร์มการติดต่อ (โมดูลแบบพกพา)

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

เมื่อต้องการทำเช่นนี้ เพิ่มโมดูลแบบฟอร์มการติดต่อใหม่โดยตรงภายใต้โมดูลสลับ

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

คลิกแท็บขั้นสูงภายใต้การตั้งค่าของแบบฟอร์มการติดต่อ (ของโมดูลใด ๆ ที่คุณต้องการแทรก) และเพิ่มคลาส CSS ต่อไปนี้:

  • CSS Class: divi-portable-module

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

เพิ่มคลาสคอลัมน์

ต่อไปเราต้องเพิ่มคลาสที่กำหนดเองลงในคอลัมน์ที่มีทั้งสองโมดูล เปิดการตั้งค่าคอลัมน์และเพิ่มคลาส CSS ต่อไปนี้:

  • CSS Class: parent-column

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

เพิ่มรหัส

รหัสที่จำเป็นในการทำงานนี้ค่อนข้างสั้นและเรียบง่าย โดยทั่วไป เราต้องการใช้ JQuery เพื่อค้นหาแต่ละโมดูลที่มีคลาส "dvi-portable-module" ที่มีคอลัมน์หลัก (อันที่มีคลาส "parent-column") และผนวกแต่ละโมดูลภายใน div ด้วยคลาส " Divi-โมดูล-ปลายทาง”.

โค้ดนี้ยังรวมถึงข้อมูลโค้ดเพื่อแทรกโมดูลปุ่มไปยังโมดูลอื่น และตัวอย่างข้อมูลเพื่อแทรกแถว Divi ลงในโมดูล

ในการเพิ่มรหัส เพิ่มโมดูลรหัสใหม่ภายใต้โมดูลแบบฟอร์มการติดต่อ

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

ก่อนที่คุณจะวางโค้ดที่จำเป็น ให้เพิ่มแท็ก สคริปต์ที่ จำเป็นสำหรับการฝัง JS ลงใน HTML ภายในกล่องโค้ด:

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

จากนั้นวางโค้ดต่อไปนี้ระหว่างแท็ก สคริปต์ :

(function ($) {
  $(document).ready(function () {

    // Option #1: Move Divi Module(s) into a Module
    // Limit: One Instance per Column
    // Use following code if you want to move 
    // a module inside another module. Each column with the
    // class 'parent-column' will append any module(s)
    // with the class 'divi-portable-module' to the div
    // with the class 'divi-module-destination'.
    // Only one instance of 'divi-module-destination' should
    // be added per column.
    $('.divi-portable-module').each(function () {
      $(this).closest('.parent-column').find('.divi-module-destination').append($(this));
    });
    
    // Buttons: Insert Button Module(s) into a Module
    // Adding a custom CSS class to a button module
    // is applied to the 'a' tag which is a child element
    // of the module wrapper. This code makes sure to append
    // the entire button module wrapper (the parent element)
    // as well. This functionality is the same as option #3 above.
    // Siimply use the class 'divi-portable-button' on a button module
    // instead of 'divi-portable-module'.
    $('.divi-portable-button').parent().each(function () {
      $(this).closest('.parent-column').find('.divi-module-destination').append($(this));
    });

    // Option #2: Move Divi Row(s) into a Module
    // Limit: One Instance per Section
    // Use the following code if you want to move 
    // a row inside a module on more than one section
    // of a page. Each section with the
    // class 'parent-section' will append any row(s)
    // with the class 'divi-portable-row' to the div
    // with the class 'divi-row-destination'.
    // Only one instance of 'divi-row-destination' should
    // be added per section.
    $('.divi-portable-row').each(function () {
      $(this).closest('.parent-section').find('.divi-row-destination').append($(this));
    });

  });
})(jQuery);

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

ทำความเข้าใจกับฟังก์ชันการทำงาน

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

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

หากคุณตรวจสอบรหัสบนหน้าสด คุณจะเห็นว่าโมดูลแบบฟอร์มการติดต่อถูกแทรกลงใน div ด้วยคลาส "dvi-module-destination" สำเร็จแล้ว

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

จัดแต่งทรงผมโมดูล

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

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

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

ผลลัพธ์

นี่คือผลลัพธ์สุดท้ายเมื่อดูหน้าสด

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

ตัวอย่างที่ 2: การแทรกโมดูลสลับภายในโมดูล Blurb

สำหรับตัวอย่างต่อไป เราจะใส่ Toggle Module ใน Blurb Module กระบวนการนี้เหมือนกับเมื่อก่อน ข้อมูลโค้ดจำกัดการใช้งานโมดูลปลายทางหนึ่งโมดูลต่อคอลัมน์ กล่าวอีกนัยหนึ่ง คุณสามารถมีโมดูลแบบพกพาได้หลายโมดูลด้วยคลาส “dvi-portable-module” ที่สามารถเพิ่มไปยังโมดูลปลายทางได้ แต่คุณสามารถมี div ได้เพียงอินสแตนซ์เดียวที่มีคลาส “dvi-module-destination” ต่อ คอลัมน์.

เพื่อแสดงสิ่งนี้ ให้ทำซ้ำขั้นตอนเดียวกันกับกลุ่มโมดูลอื่นในคอลัมน์อื่นในแถวเดียวกัน

เพิ่มคอลัมน์ใหม่ให้กับ Row

ขั้นแรก เพิ่มคอลัมน์ใหม่ในแถวที่มีอยู่

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

เพิ่มคลาสคอลัมน์

ให้คลาส CSS ต่อไปนี้แก่คอลัมน์ใหม่เหมือนที่เราทำในคอลัมน์แรก:

  • CSS Class: parent-column

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

เพิ่มโมดูลประกาศ (โมดูลปลายทาง)

ภายในคอลัมน์ใหม่ เพิ่มโมดูลการนำเสนอซึ่งจะทำหน้าที่เป็นโมดูลปลายทางของเรา

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

ภายในเนื้อหาของการนำเสนอ ให้วาง HTML ต่อไปนี้ที่มี div เดียวกันกับคลาส “dvi-module-destination” ที่คุณต้องการให้แทรกโมดูลแบบพกพา (ในกรณีนี้ภายใต้ข้อความเนื้อหาจำลอง):

<div class="divi-module-destination"></div>

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

เพิ่มโมดูลสลับ (โมดูลพกพา)

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

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

จากนั้นเพิ่มคลาส CSS ต่อไปนี้ในโมดูล Toggle เพื่อกำหนดให้เป็นโมดูลที่เราต้องการย้าย/แทรกลงในการนำเสนอ:

  • CSS Class: divi-portable-module

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

ผลลัพธ์

ตรวจสอบหน้าสดเพื่อดูผลลัพธ์ ตอนนี้การสลับจะอยู่ภายในโมดูลการนำเสนอ

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

ตัวอย่างที่ 3: การแทรกโมดูลปุ่มภายในโมดูล Blurb

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

เพิ่มโมดูลปุ่ม (โมดูลพกพา #2)

ในการดำเนินการนี้ ให้เพิ่มโมดูลปุ่มใหม่ภายใต้โมดูลสลับที่แทรกลงในการนำเสนอแล้ว

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

จากนั้น เพิ่มคลาส CSS ต่อไปนี้ในโมดูลปุ่ม:

  • CSS คลาส: divi-portable-button

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

ผลลัพธ์

ตอนนี้ตรวจสอบผลลัพธ์ในหน้าสด โมดูล Blurb ตอนนี้มีโมดูลสลับและโมดูลปุ่ม

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

และนี่คือข้อมูลโค้ดที่เกี่ยวข้องซึ่งใช้ในการแทรกโมดูลปุ่มภายในโมดูลด้วย div "destination" ความแตกต่างหลักกับข้อมูลโค้ดนี้คือ เรากำลังกำหนดเป้าหมายองค์ประกอบหลัก ( div wrapper ของปุ่ม เบื้องหลัง) ของคลาสปุ่ม "dvi-portable-button"

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

ส่วนที่ 2: วิธีแทรก Divi Rows ลงในโมดูล

หากคุณต้องการแทรกทั้งแถว (หรือแถว) ภายในโมดูล กระบวนการจะคล้ายกับการแทรกโมดูลลงในโมดูลอื่น เราจำเป็นต้องเพิ่มคลาส "ส่วนหลัก" ในส่วนที่มีโมดูลปลายทางและแถวแบบพกพาที่เราต้องการแทรก เราจำเป็นต้องเพิ่ม div ด้วยคลาส "dvi-row-destination" ให้กับโมดูลปลายทาง และเราต้องเพิ่มคลาส “dvi-portable-row” ให้กับแถวที่เราต้องการแทรกลงในโมดูลปลายทาง

นี่คือวิธีการทำ

เพิ่มมาตรา

ขั้นแรก เพิ่มส่วนปกติใหม่ลงในเพจ

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

ภายใต้แท็บขั้นสูงของการตั้งค่าส่วน เพิ่มคลาส CSS ต่อไปนี้:

  • CSS Class: parent-section

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

เพิ่มแถวสำหรับโมดูลปลายทาง

เพิ่มแถวหนึ่งคอลัมน์ใหม่เพื่อเก็บโมดูลปลายทาง

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

เพิ่มโมดูลสลับ (โมดูลปลายทางของแถว)

สำหรับตัวอย่างนี้ เราจะแทรกแถวภายในโมดูลสลับ ดังนั้น ให้เพิ่ม Toggle Module ใหม่ในแถว

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

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

<div class="divi-row-destination"></div>

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

สร้างแถวแบบพกพา

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

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

เติมแถวด้วยเนื้อหา

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

เพิ่มชั้นเรียนในแถว

จากนั้นเปิดการตั้งค่าของแถวและกำหนดให้เป็นแถวที่คุณต้องการแทรกลงใน Toggle Module โดยกำหนด CSS Class ต่อไปนี้:

  • คลาส CSS: divi-portable-row

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

มันทำงานอย่างไร

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

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

ผลลัพธ์

หากต้องการดูผลลัพธ์ ให้ตรวจสอบหน้าสดและเปิดโมดูลสลับ ตอนนี้มีทั้งแถว

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

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

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

การแทรกหลายแถวภายในโมดูล

ตราบใดที่คุณเก็บอินสแตนซ์ของโมดูลปลายทางไว้หนึ่งอินสแตนซ์ (เช่น div ที่ มีคลาส “dvi-row-destination”) ต่อส่วน คุณสามารถแทรกหลายแถวไปยังปลายทางนั้นได้ง่ายๆ โดยให้คลาสเดียวกัน “dvi-portable-row ”

ตัวอย่างเช่น คุณสามารถเพิ่มแถวอื่นด้วยโมดูลแกลเลอรีเหนือแถวที่มีรายการเมนูที่สร้างไว้ก่อนหน้านี้ จากนั้นให้แถวคลาสเดียวกัน "dvi-portable-row"

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

ทั้งสองแถวที่มีคลาส "dvi-portable-row" จะถูกแทรกลงในโมดูลสลับ

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

การใช้ปลั๊กอิน/รหัสย่อ

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

แทรกโมดูล Divi หรือแถวลงในโมดูลอื่น

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

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

นอกจากนี้ ให้นึกถึงแอปพลิเคชันที่เป็นไปได้ทั้งหมด!

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!