วิธีแสดงหมวดหมู่โพสต์บล็อกด้วยสายตาในส่วนหัว Divi ของคุณ

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

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

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลด The Global Header ฟรี

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

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

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

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

ดาวน์โหลด

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

วิธีอัปโหลดไฟล์ JSON

เปิดเครื่องรูดโฟลเดอร์ซิปที่คุณสามารถดาวน์โหลดได้ด้านบน จากนั้นไปที่เว็บไซต์ WordPress > Divi > Divi Library แล้วอัปโหลด JSON

เมื่อเลย์เอาต์ของคุณถูกบันทึกในไลบรารี Divi คุณสามารถไปยัง Divi Theme Builder และนำเข้าเลย์เอาต์ที่บันทึกไว้โดยคลิกที่ 'Add Global Header' หรือ 'Add Custom Header' และเลือก 'Build Global/Custom Header' ไปที่แท็บ 'เลย์เอาต์ที่บันทึกไว้ของคุณ' ในไลบรารี Divi เลือกเลย์เอาต์ที่คุณได้อัปโหลดในขั้นตอนก่อนหน้า และบันทึกการเปลี่ยนแปลงตัวสร้างธีม Divi ทั้งหมด

หากต้องการให้เมนูใช้งานได้ทันที คุณจะต้องอ่านส่วนแรกของบทช่วยสอนด้านล่างนี้ การเพิ่มคลาส CSS ให้กับรายการเมนูในแต่ละระดับ คุณจะต้องเปิดใช้งานคลาส CSS ตัวใดตัวหนึ่งภายใน Code Module ตามที่แสดงในส่วนที่ 5 ของบทช่วยสอนนี้

1. เพิ่มคลาส CSS ให้กับรายการเมนูบล็อก

ไปที่เมนูในลักษณะที่ปรากฏ

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

เปิดใช้งานตัวเลือกคลาส CSS

ที่ด้านบนของหน้า ตรวจสอบว่าคุณเปิดใช้งานตัวเลือกคลาส CSS ภายในตัวเลือกหน้าจอ

เพิ่มคลาส CSS ให้กับรายการเมนูบล็อก

จากนั้น ค้นหารายการเมนูบล็อกของคุณและเพิ่มคลาส CSS สองคลาส อย่าลืมเว้นช่องว่างระหว่างคลาส CSS

• คลาส CSS: ระดับแรก ระดับแรก-1

2. สร้างส่วนหัวที่กำหนดเองด้วยตัวสร้างธีมของ Divi

ไปที่ตัวสร้างธีม Divi

เมื่อคลาส CSS ของรายการเมนูพร้อมแล้ว ก็ถึงเวลาเปลี่ยนไปใช้ Divi ไปที่ Divi Theme Builder และเลือก 'Add Global/Custom Header'

เริ่มสร้าง Global Header

จากนั้นเลือก 'สร้างส่วนหัวส่วนกลาง' เพื่อเปลี่ยนเส้นทางไปยังตัวแก้ไขเทมเพลต

การตั้งค่ามาตรา

สีพื้นหลัง

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

• สีพื้นหลัง: #FFFFFF

ระยะห่าง

ไปที่แท็บการออกแบบและลบช่องว่างภายในด้านบนและด้านล่างเริ่มต้นทั้งหมด

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มแถว #1

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและแก้ไขการตั้งค่าการปรับขนาดตามนั้น:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 95%
• ความกว้างสูงสุด: 100%

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มโมดูลเมนูใน Row

เลือกเมนู

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

อัพโหลดโลโก้

อัปโหลดโลโก้ต่อไป

การตั้งค่าข้อความเมนู

ไปที่แท็บออกแบบและแก้ไขการตั้งค่าข้อความเมนูดังนี้:

• แบบอักษรของเมนู: Roboto Mono
• รูปแบบตัวอักษรของเมนู: ตัวพิมพ์ใหญ่
• สีข้อความของเมนู: #000000
• ขนาดข้อความของเมนู: 18px
• ระยะห่างระหว่างตัวอักษรของเมนู: -1px

การตั้งค่าเมนูแบบเลื่อนลง

เปลี่ยนสีบรรทัดเมนูแบบเลื่อนลงด้วย

• สีของเมนูดร็อปดาวน์: #FFFFFF

การตั้งค่าไอคอน

ถัดไป เปลี่ยนสีไอคอนเมนูแฮมเบอร์เกอร์ในการตั้งค่าไอคอน

• ไอคอนเมนูแฮมเบอร์เกอร์สี: #000000

CSS Class

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มคลาส CSS

• CSS Class: หมวดหมู่-เมนู

3. สร้างการออกแบบบล็อกแบบเลื่อนลง

เพิ่มแถว #2

โครงสร้างคอลัมน์

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

สีพื้นหลัง

เปิดการตั้งค่าแถวและใช้สีพื้นหลังสีขาว

• สีพื้นหลัง: #FFFFFF

ขนาด

ไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าการปรับขนาดดังนี้:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 80vw (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)
• ความกว้างสูงสุด: 50vw (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)

ระยะห่าง

แก้ไขค่าการเติมถัดไป

• ช่องว่างภายในด้านบน: 10px
• ช่องว่างภายในด้านล่าง: 10px
• ช่องว่างภายในด้านซ้าย: 10px
• ช่องว่างภายในด้านล่าง: 10px

กล่องเงา

เรากำลังใช้เงาของกล่องที่ละเอียดอ่อนเช่นกัน

• ความแรงของกล่องเงาเบลอ: 30px
• เงาสี: rgba(0,0,0,0.13) (เดสก์ท็อป), rgba(0,0,0,0) (แท็บเล็ตและโทรศัพท์)

CSS Class

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

• CSS Class: dropdown-menu dropdown-menu-1

ตำแหน่ง

ไปที่แท็บขั้นสูงและเปลี่ยนตำแหน่งแถวด้วย

• ตำแหน่ง: Absolute (เดสก์ท็อป), ญาติ (แท็บเล็ต & โทรศัพท์)
• ตำแหน่ง: บนขวา
• ออฟเซ็ตแนวตั้ง: 100px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• ดัชนี Z: 11

องค์ประกอบหลักทั้งสองคอลัมน์

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

width: 50% !important;

เพิ่มโมดูลข้อความลงในคอลัมน์ 1

เพิ่มชื่อหมวดหมู่

ได้เวลาแสดงหมวดหมู่บล็อกของเราด้วยสายตาแล้ว! เพิ่มโมดูลข้อความแรกลงในคอลัมน์ 1 และเพิ่มชื่อหมวดหมู่ลงในกล่องเนื้อหา

เพิ่มลิงค์หมวดหมู่

เพิ่มลิงค์ไปยังหมวดหมู่ของคุณต่อไป

พื้นหลังไล่โทนสี

จากนั้นใช้พื้นหลังไล่ระดับสีต่อไปนี้:

• สี 1: rgba(0,0,0,0.08)
• สี 2: #0a0a0a
• ตำแหน่งเริ่มต้น: 60%
• ตำแหน่งสุดท้าย: 60%
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

ภาพพื้นหลัง

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

• ขนาดภาพพื้นหลัง: ขนาดจริง
• เล่นซ้ำภาพพื้นหลัง: ทำซ้ำ X (แนวนอน)

การตั้งค่าข้อความ

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าข้อความตามลำดับ:

• แบบอักษรข้อความ: Roboto Mono
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 1.9vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 3.5vw (โทรศัพท์)
• ระยะห่างของตัวอักษรข้อความ: -0.1vw
• ความสูงของบรรทัดข้อความ: 1em

ขนาด

เปลี่ยนการตั้งค่าขนาดต่อไป

• ความกว้าง: 99%
• การจัดตำแหน่งโมดูล: ซ้าย

ระยะห่าง

แก้ไขการตั้งค่าระยะห่างด้วย

• ขอบล่าง: 10px
• ระยะขอบขวา: 1% (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านบน: 60% (เดสก์ท็อป), 40% (แท็บเล็ตและโทรศัพท์)
• แผ่นรองด้านล่าง: 4%
• ช่องว่างภายในด้านซ้าย: 2%

องค์ประกอบหลัก CSS

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มโค้ด CSS หนึ่งบรรทัดลงในองค์ประกอบหลักของโมดูล

cursor: pointer;

โมดูลข้อความโคลน & วางซ้ำในคอลัมน์ 2

เมื่อคุณสร้างโมดูลข้อความแรกเสร็จแล้ว ให้โคลนโมดูลและวางโมดูลที่ซ้ำกันในคอลัมน์ 2

แก้ไขโมดูลข้อความในคอลัมน์ 2

เปลี่ยนชื่อหมวดหมู่ & ลิงค์

แก้ไขชื่อหมวดหมู่และลิงก์ในโมดูลที่ซ้ำกัน

เปลี่ยนภาพพื้นหลัง

เปลี่ยนภาพพื้นหลังด้วย คุณสามารถหาภาพประกอบได้ในโฟลเดอร์ดาวน์โหลด

• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ

เปลี่ยนขนาด

เปลี่ยนการจัดตำแหน่งโมดูลในการตั้งค่าการปรับขนาดถัดไป

• การจัดตำแหน่งโมดูล: ขวา

โคลนทั้งสองโมดูลครั้งเดียว

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

เปลี่ยนชื่อหมวดหมู่ & ลิงค์

เปลี่ยนชื่อหมวดหมู่และลิงก์ภายในโมดูลที่ซ้ำกัน

เปลี่ยนภาพพื้นหลัง

พร้อมกับภาพพื้นหลัง คุณสามารถหาภาพประกอบใหม่ได้ในโฟลเดอร์ที่คุณสามารถดาวน์โหลดได้ที่ตอนต้นของโพสต์นี้

• ขนาดภาพพื้นหลัง: พอดี
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ

• ขนาดภาพพื้นหลัง: พอดี
• ตำแหน่งภาพพื้นหลัง: ล่างขวา

4. เพิ่ม CSS & JQuery Code

เพิ่มโมดูลโค้ดด้านล่างโมดูลเมนูในแถว #1

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

เพิ่มโค้ด CSS

เพิ่มบรรทัดต่อไปนี้ของโค้ด CSS ลงใน Code Module:

<style>
/* Enable class below once you're done editing the menu */  
  
/*  
.dropdown-menu {
visibility: hidden;
}*/
  
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;

-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);  
}
  
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}
  
.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
}  

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}

.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #00C995; 
}  
  
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\37';
color: black;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\36';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
visibility: visible;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
</style>

เพิ่มรหัส JQuery

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

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

$('.dropdown-menu').each(function(i){
  
i = i + 1;
  
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
  
});  
  
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');

$firstLevel.off('click').click(function() {

$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 

$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');

var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();

var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  

});      
  
});
});

5. เปิดใช้งานคลาส CSS เมื่อคุณทำเสร็จแล้ว ปรับแต่งรายการดรอปดาวน์ของบล็อก

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

6. การเพิ่มรายการดรอปดาวน์หมวดโพสต์เพิ่มเติม

โคลนบล็อกหมวดหมู่แถว

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

เข้าถึงแถวที่ซ้ำกันในแผงเลเยอร์

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

เปลี่ยนคลาส CSS แถวที่ซ้ำกัน

เปลี่ยน CSS Class ที่สองในแถวที่ซ้ำกันของคุณ ตรวจสอบให้แน่ใจว่าหมายเลขที่คุณใช้อยู่ติดต่อกัน

• CSS Class: เมนูดรอปดาวน์ dropdown-menu-2

เพิ่มคลาส CSS ให้กับรายการเมนูในลักษณะที่ปรากฏ

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

• คลาส CSS: ระดับแรก ระดับแรก-2

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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