วิธีเพิ่มวิดเจ็ตเมนูหมวดหมู่โพสต์ไปยังส่วนท้าย Divi Global ของคุณ

เมื่อคุณสร้างส่วนท้ายแบบกำหนดเองภายในตัวสร้างธีมของ Divi มีหลายวิธีในการเพิ่มรายการส่วนท้าย คุณสามารถไปที่ส่วนท้ายแบบโมดูล ซึ่งคุณเพิ่มรายการส่วนท้ายของหน้าภายในโมดูลข้อความด้วยลิงก์ที่เหมาะสม แต่คุณยังสามารถตัดสินใจเพิ่มวิดเจ็ตส่วนท้ายต่างๆ ให้กับการออกแบบของคุณได้โดยใช้ Divi's Sidebar Module และจัดรูปแบบโดยใช้ Divi ในตัว ตัวเลือก. ในบทช่วยสอนวันนี้ เราจะแสดงวิธีดำเนินการเกี่ยวกับตัวเลือกที่สอง โดยเฉพาะอย่างยิ่ง เราจะแสดงวิธีเพิ่มวิดเจ็ตเมนูหมวดหมู่โพสต์ในส่วนท้ายของคุณ รูปแบบการออกแบบที่เราใช้เข้ากับ Food Recipes Layout Pack ได้อย่างลงตัว เราจะเริ่มต้นด้วยการเพิ่มหมวดหมู่โพสต์ต่างๆ ลงในเว็บไซต์ของเรา จากนั้นเราจะสร้างเมนูส่วนท้ายใน WordPress ต่อไป เราจะสร้างวิดเจ็ตของเรา และสุดท้ายแต่ไม่ท้ายสุด เราจะเพิ่มวิดเจ็ตไปยังส่วนท้าย Divi ที่สร้างขึ้นเองภายใน Divi Theme Builder คุณจะสามารถดาวน์โหลดไฟล์ JSON ได้ฟรีเช่นกัน!

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเทมเพลต Global Footer ฟรี

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

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

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

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

ดาวน์โหลด

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

1. ตั้งค่าหมวดหมู่โพสต์สำหรับเว็บไซต์ของคุณ

ไปที่หมวดหมู่โพสต์ของคุณ

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

ตั้งค่าโครงสร้างหมวดหมู่โพสต์ที่คุณเลือก

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

2. สร้างเมนู WordPress หลายหมวดหมู่

ไปที่เมนู

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

สร้างเมนูส่วนท้ายแรก

เพิ่มเมนูส่วนท้ายเมนูแรกและตั้งชื่อให้เป็นที่รู้จัก

• ชื่อเมนู: เมนูส่วนท้าย #1

เพิ่มหมวดหมู่โพสต์

เพิ่มหมวดหมู่โพสต์กลุ่มแรกของคุณลงในเมนูใหม่นี้

สร้างเมนูส่วนท้ายที่สองและสามสำหรับหมวดหมู่โพสต์อื่นๆ

ทำสิ่งเดียวกันกับกลุ่มหมวดหมู่โพสต์อีกสองกลุ่ม

• ชื่อเมนู: เมนูส่วนท้าย #2

• ชื่อเมนู: เมนูส่วนท้าย #3

3. สร้างวิดเจ็ตส่วนท้าย

ไปที่วิดเจ็ต

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

เพิ่มเมนูส่วนท้าย #1 ไปที่ส่วนท้าย #1

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

เพิ่มเมนูส่วนท้าย #2 ไปที่ส่วนท้าย #2

วางเมนูหมวดหมู่โพสต์ที่สองในพื้นที่ส่วนท้ายที่สอง

เพิ่มเมนูส่วนท้าย #3 ไปยังส่วนท้ายของพื้นที่ #3

และเมนูส่วนท้ายที่สามในพื้นที่ส่วนท้ายที่สาม

เพิ่มโพสต์ล่าสุดไปยังส่วนท้ายของพื้นที่ #4

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

3. สร้างส่วนท้ายส่วนกลางภายในตัวสร้างธีม Divi

ไปที่ตัวสร้างธีม Divi ของคุณและเริ่มสร้างเทมเพลตส่วนท้าย

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

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

สีพื้นหลัง

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

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

ภาพพื้นหลัง

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

• ขนาดภาพพื้นหลัง: พอดี

ระยะห่าง

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

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

เพิ่มแถว #1

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

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

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

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

• สี 1: rgba(10,10,10,0.05)
• สี 2: rgba(10,10,10,0.18)

ขนาด

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

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

ระยะห่าง

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

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

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 5%
• แผ่นรองด้านล่าง: 5%
• ช่องว่างภายในด้านซ้าย: 5%
• ช่องว่างภายในด้านขวา: 5%

ชายแดน

เรากำลังใช้เส้นขอบด้านขวาบนเดสก์ท็อปด้วย

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

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 5%
• แผ่นรองด้านล่าง: 5%
• ช่องว่างภายในด้านซ้าย: 5%
• ช่องว่างภายในด้านขวา: 5%

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

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

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

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

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

ในคอลัมน์ที่สอง เรากำลังเพิ่มโมดูลข้อความที่มีเนื้อหา H2 เชิงพรรณนาบางส่วน

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

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

• แบบอักษรของหัวเรื่อง 2: Cormorant Garamond
• ส่วนหัว 2 น้ำหนักแบบอักษร: ปานกลาง
• หัวเรื่อง 2 สีข้อความ: #ffffff
• หัวเรื่อง 2 ขนาดข้อความ:
  • เดสก์ท็อปและแท็บเล็ต: 40px
  • โทรศัพท์: 35px
• ส่วนหัว 2 ความสูงของบรรทัด: 1.3em

เพิ่มแถว #2

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

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

สีพื้นหลัง

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

• สีพื้นหลัง: rgba(10,10,10,0.05)

ขนาด

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

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

ระยะห่าง

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

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

ระยะห่างคอลัมน์ทั้งหมด

จากนั้น เปิดแต่ละคอลัมน์และใช้ค่าช่องว่างภายในต่อไปนี้กับแต่ละคอลัมน์:

• ช่องว่างภายในด้านบน: 5%
• แผ่นรองด้านล่าง: 5%
• ช่องว่างภายในด้านซ้าย: 5%
• ช่องว่างภายในด้านขวา: 5%

คอลัมน์ 1 เส้นขอบ

ต่อไป เราจะเพิ่มเส้นขอบให้กับคอลัมน์ 1

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

เส้นขอบของคอลัมน์ 2

เรากำลังใช้เส้นขอบเดียวกัน โดยมีค่าการตอบสนองต่างกันสำหรับคอลัมน์ที่สอง

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

คอลัมน์ 3 เส้นขอบ

และสุดท้ายแต่ไม่ท้ายสุด เราจะเพิ่มเส้นขอบด้านขวาให้กับคอลัมน์ที่สามด้วย

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

เพิ่มโมดูลแถบด้านข้างให้กับคอลัมน์ 1

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

เลือกพื้นที่ส่วนท้าย #1

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

• พื้นที่วิดเจ็ต: พื้นที่ส่วนท้าย #1

เค้าโครง

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

• แสดงตัวคั่นชายแดน: ไม่

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

แก้ไขการตั้งค่าข้อความเนื้อหาด้วย

• แบบอักษรของร่างกาย: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของร่างกาย: ปานกลาง
• สีข้อความ: #ffffff
• ขนาดข้อความเนื้อหา: 13px

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 5%
• แผ่นรองด้านล่าง: 5%

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

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

เปลี่ยนพื้นที่ส่วนท้าย

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

• พื้นที่วิดเจ็ต: พื้นที่ส่วนท้าย #2

• พื้นที่วิดเจ็ต: ส่วนท้าย พื้นที่ #3

เพิ่มโมดูลแถบด้านข้างให้กับคอลัมน์ 4

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

เลือกพื้นที่ส่วนท้าย #4

ในโมดูลนี้ เรากำลังเลือกส่วนท้ายที่สี่ที่เราสร้างขึ้นซึ่งมีโพสต์ล่าสุดของเรา

• พื้นที่วิดเจ็ต: ส่วนท้าย พื้นที่ #4

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

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

• แบบอักษรของชื่อเรื่อง: Cormorant Garamond
• สีข้อความของชื่อเรื่อง: #ffffff
• ขนาดข้อความชื่อเรื่อง: 30px

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

ทำการเปลี่ยนแปลงการตั้งค่าข้อความเนื้อหาด้วย

• แบบอักษรของร่างกาย: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของร่างกาย: ปานกลาง
• สีข้อความ: #dddddd
• ขนาดข้อความเนื้อหา: 13px

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 5%
• แผ่นรองด้านล่าง: 5%

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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