วิธีผสมผสานส่วนหัวและร่างกายของคุณโดยใช้โมดูลเนื้อหาโพสต์ของ Divi & ตัวแบ่งส่วน

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเทมเพลตหน้าตัวแบ่งส่วนฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

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

เริ่มต้นด้วยการไปที่ตัวสร้างธีม Divi

เพิ่มเทมเพลตใหม่สำหรับเพจ

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

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

2. สร้างส่วนหัวที่กำหนดเอง

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

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

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

• สี 1: #d13232
• สี 2: #fc6a3c

ระยะห่าง

เพิ่มช่องว่างด้านบนและด้านล่างที่กำหนดเองบางส่วนในส่วนนี้ด้วย

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

ดัชนี Z

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

• ดัชนี Z: 99999

เพิ่มแถวใหม่

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

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

ขนาด

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

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

ระยะห่าง

ถอดแผ่นรองด้านบนและด้านล่างทั้งหมดออกด้วย

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

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

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

display: flex;
align-items: center;

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

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

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

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

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

• การจัดตำแหน่งภาพ: กึ่งกลาง

ขนาด

แก้ไขความกว้างของโมดูลตามขนาดหน้าจอต่างๆ ด้วย

• ความกว้าง: 6vw (เดสก์ท็อป), 13vw (แท็บเล็ต), 17vw (โทรศัพท์)

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

เลือกเมนู

ในคอลัมน์ที่สอง เราต้องการโมดูลเมนู เลือกเมนูที่ต้องการ

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

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

เค้าโครง

ไปที่แท็บออกแบบแล้วเปลี่ยนเค้าโครง

• สไตล์: จัดชิดซ้าย
• ทิศทางเมนูแบบเลื่อนลง: ลงด้านล่าง

ข้อความเมนู

ถัดไป จัดรูปแบบข้อความเมนูตามลำดับ:

• แบบอักษรของเมนู: Oswald
• น้ำหนักแบบอักษรของเมนู: เบา
• รูปแบบตัวอักษรของเมนู: ตัวพิมพ์ใหญ่
• สีข้อความของเมนู: #ffffff (เดสก์ท็อป), #202332 (แท็บเล็ตและโทรศัพท์)
• ขนาดข้อความเมนู: 0.8vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 2.5vw (โทรศัพท์)
• ระยะห่างระหว่างตัวอักษรของเมนู: 0.1vw

เมนูแบบเลื่อนลง

เปลี่ยนสีของเส้นเมนูแบบเลื่อนลงในการตั้งค่าเมนูแบบเลื่อนลงด้วย

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

ไอคอน

และตั้งค่าโมดูลให้สมบูรณ์โดยใช้สีไอคอนเมนูแฮมเบอร์เกอร์สีขาว

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

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

เพิ่มสำเนา

ต่อคอลัมน์สุดท้าย! โมดูลเดียวที่เราต้องการคือโมดูลปุ่ม เพิ่มสำเนาที่คุณเลือก

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

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

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

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

ดำเนินการต่อโดยกำหนดสไตล์ปุ่มในการตั้งค่าปุ่ม

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 0.6vw (เดสก์ท็อป), 1vw (แท็บเล็ต), 1.5vw (โทรศัพท์)
• สีข้อความของปุ่ม: #000000
• สีพื้นหลังของปุ่ม: #FFFFFF
• ความกว้างของขอบปุ่ม: 0px

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

ระยะห่าง

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

• ด้านบน: 0.8vw (เดสก์ท็อป), 1.6vw (แท็บเล็ต), 2.2vw (โทรศัพท์)
• Padding ด้านล่าง: 0.8vw (เดสก์ท็อป), 1.6vw (แท็บเล็ต), 2.2vw (โทรศัพท์)
• Padding ซ้าย: 1.5vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 3.5vw (โทรศัพท์)
• Padding ขวา: 1.5vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 3.5vw (โทรศัพท์)

3. สร้าง Custom Body & เพิ่ม Top Divider

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

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

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

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

• รูปแบบตัวแบ่ง: ค้นหาในรายการ
• ตัวแบ่งสี: #fc6a3c
• ความสูงของตัวแบ่ง: 6vw
• ตัวแบ่งแนวนอน ทำซ้ำ: 15x
• พลิกตัวแบ่ง: แนวตั้ง
• การจัดเรียงตัวแบ่ง: ด้านบนของเนื้อหาส่วน

ระยะห่าง

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

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

เพิ่มแถวใหม่

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

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

ขนาด

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

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

ระยะห่าง

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

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

เพิ่มโมดูลเนื้อหาโพสต์ลงในคอลัมน์

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

3. บันทึกการเปลี่ยนแปลงของตัวสร้างและดูผลลัพธ์

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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