วิธีสร้างเมก้าเมนูอีคอมเมิร์ซแบบกำหนดเองด้วยตัวสร้างธีมของ Divi

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

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลด eCommerce Mega Menu Layout ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

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

หากต้องการให้เมนูใช้งานได้ทันที คุณจะต้องอ่านส่วนแรกของบทช่วยสอนด้านล่างนี้ การเพิ่มคลาส CSS ให้กับรายการเมนูในแต่ละระดับ คุณจะต้องเปิดใช้งานคลาส CSS ตัวใดตัวหนึ่งภายใน Code Module ตามที่แสดงในส่วนที่ 5 ของบทช่วยสอนนี้ หากไอคอนแสดงไม่ถูกต้อง ตรวจสอบให้แน่ใจว่าคุณตรวจสอบเนื้อหาไอคอนภายในโมดูลโค้ดแล้ว ไอคอนต้องมีเนื้อหา “\4c” และ “\21” ดังที่คุณเห็นในหน้าจอการพิมพ์ด้านล่าง

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

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

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

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

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

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

รายการเมนูแต่ละรายการที่คุณต้องการกำหนดเมนูขนาดใหญ่แบบเลื่อนลงเพื่อให้ต้องมี CSS สองคลาส ขั้นแรก คลาส CSS ทั่วไปที่เรียกว่า "ระดับแรก" คลาส CSS ที่สองมีตัวเลขต่อเนื่องกันที่ส่วนท้าย "ระดับแรก-1", "ระดับแรก-2", "ระดับแรก-3" เป็นต้น

• รายการเมนูแรกที่มีรายการแบบเลื่อนลง: ระดับแรกระดับแรก-1
• รายการเมนูที่สองที่มีรายการแบบเลื่อนลง: ระดับแรกระดับแรก-2
• รายการเมนูที่สามที่มีรายการแบบเลื่อนลง: ระดับแรกระดับแรก-3

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

ไปที่ตัวสร้างธีม Divi และเริ่มสร้างส่วนหัวส่วนกลาง

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

ส่วนที่ #1 การตั้งค่า

ระยะห่าง

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

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

ทัศนวิสัย

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

เพิ่มแถว #1

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

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

ขนาด

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

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

ระยะห่าง

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

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

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

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

ได้เวลาเพิ่มโมดูล โดยเริ่มจากโมดูลรูปภาพในคอลัมน์ 1 อัปโหลดโลโก้ของคุณ

ระยะห่าง

ไปที่แท็บการออกแบบของโมดูลและเพิ่มระยะขอบด้านบน

• มาร์จิ้นสูงสุด: 3%

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

เพิ่มเนื้อหา

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

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

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

• แบบอักษรของข้อความ: Oswald
• น้ำหนักแบบอักษรของข้อความ: ปานกลาง
• รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
• สีข้อความ: #000000
• ขนาดตัวอักษร: 19px

ระยะห่าง

เพิ่มระยะขอบด้านบนและด้านล่างด้วย

• มาร์จิ้นสูงสุด: 5%
• ขอบล่าง: 5%

Clone Text Module สองครั้ง & วางซ้ำในคอลัมน์ 3 & 4

เปลี่ยนสำเนา

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

เพิ่มส่วน #2

ระยะห่าง

เพิ่มส่วนอื่นด้านล่างส่วนก่อนหน้า เปิดการตั้งค่าส่วนและลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมด

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

เพิ่มแถว #2

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

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

ขนาด

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

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

ระยะห่าง

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

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

ชายแดน

จากนั้นไปที่การตั้งค่าเส้นขอบและใช้เส้นขอบด้านบนและด้านล่าง

• ความกว้างขอบด้านบน:
  • เดสก์ท็อป: 2px
  • แท็บเล็ตและโทรศัพท์: 0px
• ความกว้างขอบล่าง: 2px
• สีเส้นขอบ: #ff6600

เพิ่มโมดูลเมนูไปที่คอลัมน์

เลือกเมนู

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

เพิ่มโลโก้บนแท็บเล็ตและโทรศัพท์

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

องค์ประกอบ

เรากำลังเปิดใช้งานไอคอนตะกร้าสินค้าและค้นหาด้วย

• แสดงไอคอนตะกร้าสินค้า: ใช่
• แสดงไอคอนค้นหา: ใช่

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

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

• แบบอักษรของเมนู: Oswald
• รูปแบบตัวอักษรของเมนู: ตัวพิมพ์ใหญ่
• สีข้อความของเมนู: #000000
• ขนาดข้อความของเมนู: 19px

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

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

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

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

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

• ไอคอนรถเข็นช็อปปิ้งสี: #ff6600
• ค้นหาไอคอนสี: #ff6600
• ไอคอนเมนูแฮมเบอร์เกอร์ สี: #ff6600

CSS Class

ตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มคลาส CSS เราจะใช้คลาส CSS นี้ในภายหลังในบทช่วยสอนเมื่อเราจะเพิ่มโค้ด

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

3. สร้างเทมเพลตส่วนหัวของแถวดรอปดาวน์

เพิ่มส่วนใหม่ (เฉพาะรายการเมนูแรกแบบเลื่อนลง)

ขนาด

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

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

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

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

CSS Class

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

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

เพิ่มแถวใหม่ให้กับ Section

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

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

สีพื้นหลัง

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

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

ขนาด

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

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

ระยะห่าง

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

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

ชายแดน

และใช้เส้นขอบด้านล่าง

• ความกว้างขอบล่าง: 2px
• สีขอบล่าง: #ff6600

การตั้งค่าคอลัมน์ 1 & 2

ถัดไป เปิดการตั้งค่าคอลัมน์ 1 และ 2 ทีละรายการ

ระยะห่าง

เพิ่มค่าการเติมที่ตอบสนองต่อไปนี้ให้กับทั้งสองคอลัมน์:

• แผ่นรองด้านบน:
  • เดสก์ท็อปและแท็บเล็ต: 10%
  • โทรศัพท์: 5%
• แผ่นรองด้านล่าง:
  • เดสก์ท็อปและแท็บเล็ต: 10%
  • โทรศัพท์: 5%
• ช่องว่างภายในด้านซ้าย: 5%
• ช่องว่างภายในด้านขวา: 5%

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

พร้อมกับโค้ด CSS หนึ่งบรรทัด ซึ่งจะช่วยให้เราวางคอลัมน์ไว้ข้างๆ กันในขนาดหน้าจอที่เล็กกว่าได้เช่นกัน

width: 50% !important

การตั้งค่าคอลัมน์ 3

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

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

• สี 1: rgba(0,0,0,0.08)
• สี 2: #0a0a0a
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

ภาพพื้นหลัง

อัปโหลดภาพพื้นหลังที่คุณเลือกต่อไป

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

และเพิ่มระยะขอบด้านขวาให้กับคอลัมน์โดยใช้โค้ด CSS หนึ่งบรรทัด

margin-right: 10px !important;

ทัศนวิสัย

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

การตั้งค่าคอลัมน์ 4

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

ต่อไป เรามีคอลัมน์ที่สี่ เพิ่มพื้นหลังไล่ระดับสีเดียวกัน

• สี 1: rgba(0,0,0,0.08)
• สี 2: #0a0a0a
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

ภาพพื้นหลัง

อัปโหลดภาพพื้นหลังที่นี่ด้วย

ทัศนวิสัย

และซ่อนคอลัมน์บนแท็บเล็ตและโทรศัพท์

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

เพิ่มชื่อหมวดหมู่สินค้าลงในกล่องเนื้อหา

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

เพิ่มหมวดหมู่สินค้า ลิงค์

เพิ่มลิงค์ไปยังหมวดหมู่นี้ต่อไป

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

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

• แบบอักษรของข้อความ: Oswald
• รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
• สีข้อความ: #000000
• ขนาดข้อความ:
  • เดสก์ท็อป: 22px
  • แท็บเล็ต: 18px
  • โทรศัพท์: 16px
• ระยะห่างของตัวอักษรข้อความ: -0.6px
• ความสูงของบรรทัดข้อความ: 2.4em

ชายแดน

เพิ่มขอบด้านล่างด้วย

• ความกว้างขอบล่าง: 2px
• ขอบด้านล่างสี:
  • ค่าเริ่มต้น: rgba(0,0,0,0)
  • โฮเวอร์: #ff6600

โคลนและแก้ไขโมดูลข้อความได้หลายครั้งตามต้องการ

เมื่อคุณทำอันแรกเสร็จแล้ว คุณสามารถโคลนได้หลายครั้งเท่าที่คุณต้องการ และกระจายสำเนาที่ซ้ำกันทั่วทั้งคอลัมน์ 1 และ 2

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

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

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

เพิ่มหมวดหมู่สินค้า Name

ไปที่คอลัมน์ที่สาม เพิ่มโมดูลข้อความใหม่และใส่ชื่อประเภทผลิตภัณฑ์

เพิ่มหมวดหมู่สินค้า ลิงค์

เพิ่มลิงค์ด้วยนะครับ

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

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

• แบบอักษรของข้อความ: Oswald
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 3.4vw
• ความสูงของบรรทัดข้อความ: 1em

ตำแหน่ง

เปลี่ยนตำแหน่งโมดูลด้วย

• ตำแหน่ง: Absolute
• ตำแหน่ง: ล่างซ้าย
• ออฟเซ็ตแนวตั้ง: 2%
• ออฟเซ็ตแนวนอน: 2%

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

คุณสามารถโคลนโมดูลข้อความในคอลัมน์ 3 และวางสำเนาในคอลัมน์ 4

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

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนชื่อหมวดหมู่ผลิตภัณฑ์พร้อมกับลิงก์

โคลนทั้งส่วนเพื่อนำมาใช้ซ้ำสำหรับรายการเมนูอื่นๆ

ทันทีที่คุณสร้างรายการดรอปดาวน์ส่วนแรกแล้ว คุณสามารถโคลนได้สองครั้ง

เปลี่ยนชื่อและลิงค์หมวดหมู่สินค้าทั้งหมด

เปลี่ยนชื่อหมวดหมู่ผลิตภัณฑ์ทั้งหมดในดรอปดาวน์ใหม่

เปลี่ยนคลาส CSS ของส่วนอย่างต่อเนื่อง

พร้อมกับคลาส CSS ส่วนสุดท้ายสำหรับแต่ละรายการที่ซ้ำกัน ตรวจสอบให้แน่ใจว่าคุณกำลังปฏิบัติตามคำสั่งที่ต่อเนื่องกัน

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

• CSS Class: dropdown-menu dropdown-menu-3

4. เพิ่ม CSS & JQuery Code

เพิ่มโมดูลโค้ดใหม่ด้านบนโมดูลเมนู

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

ใส่โค้ด CSS

เปิด Code Module และเพิ่มบรรทัดต่อไปนี้ของโค้ด CSS ระหว่างแท็กสไตล์ดังที่คุณเห็นในหน้าจอการพิมพ์ด้านล่าง :

/* 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);    
  
position: absolute!important;
top: 75px;
bottom: auto;
left: 0px;
right: auto;
}
  
.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: #FF6600; 
}  
  
.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: '\4c';
color: #FF6600;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
.category-menu .et_pb_menu__menu>nav>ul>li {
position: static !important;
}

.category-menu .et_mobile_menu .dropdown-menu {
visibility: visible !important;
}

ใส่รหัส JQuery

เพิ่มโค้ด 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 อีกต่อไป แต่คุณจะสามารถเข้าถึงได้ในโหมดโครงร่างและ/หรือปิดใช้งานคลาส CSS ชั่วคราวเมื่อทำการเปลี่ยนแปลงในส่วนดรอปดาวน์ของคุณ หากต้องการเปิดใช้งานคลาส ให้ลบวงเล็บ '/* */' ที่จุดเริ่มต้นและจุดสิ้นสุดของคลาส CSS

6. บันทึกการเปลี่ยนแปลงตัวสร้างธีม Divi

เมื่อคุณทำส่วนหัวส่วนกลางเสร็จแล้ว อย่าลืมบันทึกการเปลี่ยนแปลง Divi Theme Builder ทั้งหมดก่อนที่จะดูผลลัพธ์บนเว็บไซต์ของคุณ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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