วิธีสร้างเทมเพลตหน้า 404 ด้วยตัวสร้างธีมของ Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

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

1. ไปที่ตัวสร้างธีม Divi และสร้างเทมเพลตใหม่

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

หากต้องการเริ่มสร้างเทมเพลตหน้า 404 ให้ไปที่ Divi Theme Builder ในการตั้งค่า Divi ของคุณ

สร้างเทมเพลตใหม่

คลิกที่ 'เพิ่มเทมเพลตใหม่' และตั้งค่าเทมเพลตใหม่สำหรับหน้า 404 ของคุณ

• ใช้เมื่อ: 404 Page

ซ่อนพื้นที่ส่วนหัวและส่วนท้าย

ดำเนินการต่อโดยซ่อนส่วนหัวและส่วนท้ายที่กำหนดเองของหน้า 404 โดยคลิกที่ไอคอนรูปตา

สร้างร่างกายระดับโลก

เมื่อคุณทำตามขั้นตอนก่อนหน้าทั้งหมดแล้ว คุณสามารถเริ่มสร้างเนื้อหาหน้า 404 โดยเลือก 'สร้างเนื้อหาแบบกำหนดเอง'

2. เริ่มสร้าง 404 หน้า Body

เพิ่มมาตราใหม่

สีพื้นหลัง

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

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

ตัวแบ่งด้านล่าง

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

• รูปแบบตัวแบ่ง: ค้นหาในรายการ
• ตัวแบ่งสี: #ffee00
• ความสูงของตัวแบ่ง: 25vw (เดสก์ท็อป), 77vw (แท็บเล็ต), 90vw (โทรศัพท์)
• พลิกตัวแบ่ง: แนวตั้ง
• การจัดเรียงตัวแบ่ง: ใต้เนื้อหาส่วน

ระยะห่าง

เพิ่มค่าช่องว่างภายในที่กำหนดเองในขนาดหน้าจอต่างๆ ต่อไป

• ด้านบน: 4.6vw (เดสก์ท็อป), 23vw (แท็บเล็ต), 25vw (โทรศัพท์)
• ช่วงล่าง: 4.6vw (เดสก์ท็อป), 13vw (แท็บเล็ต), 11vw (โทรศัพท์)

เพิ่มแถว #1

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

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

ขนาด

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

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

ระยะห่าง

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

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

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

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

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

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

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

• แบบอักษรของข้อความ: Monoton
• สีข้อความ: #000000
• ขนาดตัวอักษร: 24vw (เดสก์ท็อป), 35vw (แท็บเล็ตและโทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1em
• การจัดตำแหน่งข้อความ: กึ่งกลาง

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

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

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

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

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

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• สีข้อความ: #000000
• ขนาดตัวอักษร: 1.2vw (เดสก์ท็อป), 2.6vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1.8em
• การจัดตำแหน่งข้อความ: กึ่งกลาง

ระยะห่าง

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

• อัตรากำไรขั้นต้น: 2vw
• ระยะขอบล่าง: 6vw

เพิ่มแถว #2

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

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

ขนาด

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

• ความกว้าง: 32vw (เดสก์ท็อป), 50vw (แท็บเล็ตและโทรศัพท์)
• ความกว้างสูงสุด: 100%

ระยะห่าง

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

• ขอบบน: 7vw (เดสก์ท็อป), 22vw (แท็บเล็ต), 59vw (โทรศัพท์)
• ช่องว่างภายในด้านบน: 0vw
• ช่องว่างภายใน: 0vw

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

สีพื้นหลังเริ่มต้น

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

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

โฮเวอร์สีพื้นหลัง

แก้ไขสีพื้นหลังบนโฮเวอร์

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

ชายแดน

เพิ่มมุมโค้งมนด้วย

• มุมโค้งมน: 20px (ทุกมุม)

ค่าเริ่มต้นกล่องเงา

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

• ความแรงของกล่องเงาเบลอ: 50px
• เงาสี: rgba(0,0,0,0)

เงากล่องเลื่อน

แก้ไขสีเงาเมื่อวางเมาส์ไว้

• เงาสี: rgba(0,0,0,0.12)

มาตราส่วนการแปลงเริ่มต้น

จากนั้นไปที่การตั้งค่ามาตราส่วนการแปลงและตรวจสอบให้แน่ใจว่าค่าเริ่มต้นยังคงเป็น '100%'

• ขวา: 100%
• ด้านล่าง: 100%

โฮเวอร์แปลงมาตราส่วน

เปลี่ยนค่ามาตราส่วนการแปลงเมื่อโฮเวอร์:

• ขวา: 110%
• ด้านล่าง: 110%

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

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

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

เพิ่มลิงค์

เพิ่มลิงก์ไปยังโมดูลถัดไป

• โมดูลลิงค์ URL: #
• เป้าหมายการเชื่อมโยงโมดูล: ในหน้าต่างเดียวกัน

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

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

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
• สีข้อความ: #000000
• ขนาดตัวอักษร: 0.8vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ระยะห่างของตัวอักษรข้อความ: 1px
• ความสูงของบรรทัดข้อความ: 1.8em
• การจัดตำแหน่งข้อความ: กึ่งกลาง

ระยะห่าง

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

• ด้านบน: 2vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 4vw (โทรศัพท์)
• Padding ด้านล่าง: 2vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 4vw (โทรศัพท์)

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

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

เปลี่ยนเนื้อหา

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

เปลี่ยนลิงค์

เปลี่ยนลิงค์ด้วย

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

เมื่อออกแบบเสร็จแล้ว คุณสามารถบันทึกการตั้งค่าของเทมเพลตทั้งหมดได้ แค่นั้นแหละ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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