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

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

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูการออกแบบส่วนท้ายโดยรวมของหน้าจอขนาดต่างๆ กันก่อน

เดสก์ทอป

มือถือ

ดาวน์โหลด Custom Global Footer ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

เริ่มต้นด้วยการไปที่ Theme Builder ในตัวเลือกธีม Divi ของคุณ

2. เพิ่มและสร้างส่วนท้ายส่วนกลาง

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

เพิ่มมาตรา #1

สีพื้นหลัง

ถึงเวลาเริ่มสร้าง! เปิดส่วนที่คุณพบบนหน้าและเปลี่ยนสีพื้นหลังของส่วน

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

ระยะห่าง

แก้ไขการตั้งค่าระยะห่างของส่วนถัดไป

• อัตรากำไรขั้นต้น: 6vw
• ระยะขอบซ้าย: 6vw
• ระยะขอบขวา: 6vw
• ช่องว่างภายในด้านซ้าย: 30px
• ช่องว่างภายในด้านขวา: 30px

ชายแดน

เพิ่มเส้นขอบซ้ายและขวาบนถัดไป

• ซ้ายบน: 20px
• ขวาบน: 20px

กล่องเงา

รวมเงาของกล่องในการตั้งค่าส่วนด้วย

• Box Shadow Blur Strength: rgba(0,0,0,0.18)
• เงาสี: rgba(0,0,0,0.18)

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

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

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

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

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

เพิ่มโมดูลข้อความที่มีเนื้อหา H2 บางส่วน

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

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

• หัวข้อที่ 2 แบบอักษร: Poppins
• หัวข้อ 2 น้ำหนักแบบอักษร: กึ่งหนา
• การจัดแนวข้อความหัวเรื่อง 2: Center
• หัวเรื่อง 2 สีข้อความ: #ffffff
• หัวเรื่อง 2 ขนาดข้อความ: 31px (เดสก์ท็อป), 24px (แท็บเล็ต), 18px (โทรศัพท์)
• ส่วนหัว 2 ความสูงของบรรทัด: 1.6em

ขนาด

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

• ความกว้างสูงสุด: 700px

เพิ่มโมดูลปุ่มลงในคอลัมน์

เพิ่มสำเนา

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

การจัดตำแหน่ง

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการจัดตำแหน่งปุ่มให้อยู่ตรงกลาง

• การจัดตำแหน่งปุ่ม: กึ่งกลาง

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

ดำเนินการต่อโดยจัดรูปแบบปุ่ม

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 12px
• สีข้อความของปุ่ม: #000000
• สีพื้นหลังของปุ่ม: #FFFFFF
• ความกว้างของขอบปุ่ม: 0px

• รัศมีเส้นขอบของปุ่ม: 100px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 1px
• แบบอักษรของปุ่ม: Poppins
• น้ำหนักแบบอักษรของปุ่ม: กึ่งหนา
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

ระยะห่าง

เพิ่มค่าช่องว่างภายในที่กำหนดเองด้วย

• ช่องว่างภายในด้านบน: 14px
• ช่องว่างภายในด้านล่าง: 14px
• ช่องว่างภายในด้านซ้าย: 40px
• ช่องว่างภายในด้านขวา: 58px

เพิ่มส่วน #2

สีพื้นหลัง

ไปยังส่วนปกติต่อไป! เลือกสีพื้นหลังของส่วนสีขาว

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

ระยะห่าง

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

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

ชายแดน

เพิ่มรัศมีเส้นขอบบางส่วนด้วย

• ซ้ายบน: 20px
• ขวาบน: 20px

กล่องเงา

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

• ความชัดเจนของเงากล่อง: 135px
• เงาสี: rgba(0,0,0,0.18)

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

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

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

ขนาด

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

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

ระยะห่าง

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

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

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

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

• ช่องว่างภายในด้านบน: 100px (เดสก์ท็อป), 50px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านล่าง: 100px (เดสก์ท็อป), 50px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

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

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

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

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

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

• แบบอักษรของข้อความ: Poppins
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• สีข้อความ: #000000
• ขนาดตัวอักษร: 17px
• การจัดตำแหน่งข้อความ: กึ่งกลาง

ระยะห่าง

เพิ่มระยะขอบด้านบนและด้านล่างที่กำหนดเองต่อไป

• ขอบบน: 10px
• ขอบล่าง: 30px

เพิ่มโมดูลตัวแบ่งให้กับคอลัมน์

ทัศนวิสัย

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

• แสดงตัวแบ่ง: ใช่

เส้น

เปลี่ยนสีเส้นเป็นสีดำ

• สีของเส้น: #000000

ขนาด

แก้ไขการตั้งค่าขนาดของตัวแบ่งด้วย

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

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์

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

ดำเนินการต่อโดยเพิ่มโมดูลข้อความอื่นลงในคอลัมน์

เพิ่มลิงค์

เพิ่มลิงค์ไปยังเพจที่คุณต้องการให้โมดูลนี้อ้างถึง

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

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

• แบบอักษรของข้อความ: Poppins
• น้ำหนักแบบอักษรของข้อความ: เบา
• สีข้อความ: #777777
• ขนาดตัวอักษร: 15px
• การจัดตำแหน่งข้อความ: กึ่งกลาง

ระยะห่าง

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

• ขอบบน: 10px
• ขอบล่าง: 10px

โมดูลข้อความโคลน #2 เท่าที่จำเป็น

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

เปลี่ยนเนื้อหาและลิงก์

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

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

เมื่อคุณสร้างคอลัมน์และโมดูลเสร็จแล้ว คุณสามารถโคลนทั้งคอลัมน์ได้สองครั้ง

คอลัมน์ 2 สีพื้นหลัง

จากนั้นเปิดการตั้งค่าคอลัมน์ 2 และเปลี่ยนสีพื้นหลัง

• คอลัมน์ 2 สีพื้นหลัง: #f9f9f9

เปลี่ยนเนื้อหาและลิงก์

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

เพิ่มคอลัมน์ใหม่

จากนั้น เพิ่มคอลัมน์ที่สี่ลงในแถว

สีพื้นหลัง

เปลี่ยนสีพื้นหลังของคอลัมน์ใหม่

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

ระยะห่าง

พร้อมกับค่าการเติมของคอลัมน์

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

เพิ่มโมดูลการติดตามโซเชียลมีเดียในคอลัมน์ 4

เพิ่มโซเชียลเน็ตเวิร์ก

ดำเนินการต่อโดยเพิ่ม Social Media Follow Module ลงในคอลัมน์ 4

รีเซ็ตสไตล์เครือข่ายโซเชียล

รีเซ็ตรูปแบบรายการสำหรับแต่ละเครือข่ายโซเชียลที่คุณเพิ่ม

การจัดตำแหน่ง

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

• การจัดตำแหน่งโมดูล: ศูนย์

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

ปรับเปลี่ยนสีของไอคอนด้วย

• ไอคอนสี: #000000

เพิ่มโมดูล Optin อีเมลในคอลัมน์ 4

ลบเนื้อหา

ดำเนินการต่อโดยเพิ่มโมดูล Email Optin ลงในคอลัมน์ 4 และลบเนื้อหาชื่อเรื่องและเนื้อหา

บัญชีอีเมล์

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

ลบสีพื้นหลัง

ดำเนินการต่อโดยลบสีพื้นหลังของโมดูล

• ใช้สีพื้นหลัง: ไม่

การตั้งค่าฟิลด์

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

• ฟิลด์สีพื้นหลัง: rgba(0,0,0,0)
• ฟิลด์ข้อความสี: #000000
• ฟอนต์ฟิลด์: Poppins

• ขนาดข้อความของฟิลด์: 13px
• ความกว้างของเส้นขอบฟิลด์: 1px
• ฟิลด์เส้นขอบสี: #000000

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

กำหนดรูปแบบปุ่มของโมดูลของคุณด้วย

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 12px
• สีข้อความของปุ่ม: #000000
• สีพื้นหลังของปุ่ม: #FFFFFF
• ความกว้างของขอบปุ่ม: 0px

• รัศมีเส้นขอบของปุ่ม: 100px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 1px
• แบบอักษรของปุ่ม: Poppins
• น้ำหนักแบบอักษรของปุ่ม: กึ่งหนา
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

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

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

เนื้อหาแบบไดนามิก

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

จากนั้นเลือกตัวเลือก 'วันที่ปัจจุบัน'

• เนื้อหาแบบไดนามิก: วันที่ปัจจุบัน

และแก้ไขการตั้งค่าเนื้อหาไดนามิกดังนี้:

• ก่อนหน้านี้: ลิขสิทธิ์ ©
• หลัง: | สงวนลิขสิทธิ์
• รูปแบบวันที่: กำหนดเอง
• รูปแบบวันที่ที่กำหนดเอง: 20y

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

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

• แบบอักษรของข้อความ: Poppins
• สีข้อความ: #000000
• ขนาดตัวอักษร: 16px

ระยะห่าง

ตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มระยะขอบด้านบน เท่านี้ก็เรียบร้อย!

• ขอบบน: 50px

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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