วิธีให้เค้าโครงหน้าเอกสาร Divi ของคุณเป็นแบบก่ออิฐ

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

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

มาเริ่มกันเลย!

แอบมอง

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

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

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงเทมเพลตไปยังเว็บไซต์ของคุณ คุณจะต้องไปที่ Divi Theme Builder และใช้ตัวเลือกการพกพาเพื่อนำเข้าไฟล์ .json ไปยังตัวสร้างธีม

ไปที่บทช่วยสอนกันไหม

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

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

หลังจากนั้นคุณก็พร้อมที่จะไป

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

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

โมดูลบล็อก

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

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

ชื่อโพสต์/ที่เก็บถาวร (เนื้อหาแบบไดนามิก)

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

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

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

วิธีสร้างเทมเพลตหน้า Divi Archive ด้วย Masonry Layout

ในการสร้างเทมเพลตหน้าเก็บถาวรด้วยเค้าโครงก่ออิฐ สิ่งที่คุณต้องทำคือออกแบบเทมเพลตใหม่สำหรับหน้าเก็บถาวรทั้งหมดโดยใช้ตัวสร้างธีม

การสร้างและกำหนดเทมเพลตที่กำหนดเองสำหรับหน้าเก็บถาวรทั้งหมด

ในการเริ่มต้น ไปที่แดชบอร์ด WordPress และไปที่ Divi > Theme Builder จากนั้นคลิกพื้นที่กล่องสีเทาว่างเพื่อเพิ่มเทมเพลตใหม่

ถัดไป กำหนดเทมเพลตให้กับหน้าเก็บถาวรทั้งหมด

การเพิ่ม Custom Body Area ใหม่ให้กับเทมเพลต

ในการสร้างเนื้อหาแบบกำหนดเองสำหรับเทมเพลต ให้คลิกที่ส่วนเพิ่มเนื้อหาแบบกำหนดเอง แล้วเลือก “สร้างเนื้อหาแบบกำหนดเอง”

จากนั้นเลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

เพิ่ม Dynamic Archive Title

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

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

จากนั้นสร้างแถวหนึ่งคอลัมน์ใหม่ในส่วนปกติ

จากนั้นเพิ่มโมดูลข้อความในแถว

ลบเนื้อหาเริ่มต้นและคลิกไอคอน "ใช้เนื้อหาแบบไดนามิก" และเลือกตัวเลือก "ชื่อโพสต์/เก็บถาวร

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

จากนั้นอัปเดตพื้นที่ป้อนข้อมูล Before และ After เพื่อรวมเนื้อหาในแท็ก H1 และเพิ่มเนื้อหาสแตติกเพิ่มเติมหลังชื่อไดนามิกดังนี้:

ก่อน:

<h1>

หลังจาก:

</h1>

เราจำเป็นต้องใส่ชื่อในแท็ก H1 เพื่อวัตถุประสงค์ในการทำ SEO

ชื่อไฟล์เก็บถาวรแบบไดนามิกสไตล์

เมื่อเนื้อหาไดนามิกเข้าที่ เราสามารถจัดรูปแบบโดยใช้สิ่งต่อไปนี้:

• แบบอักษรของหัวเรื่อง: Mulish
• แบบอักษรของหัวข้อ: น้ำหนัก: หนัก
• การจัดตำแหน่งข้อความหัวเรื่อง: Center
• สีข้อความหัวเรื่อง: #3a405a
• ขนาดข้อความหัวเรื่อง: 70px (เดสก์ท็อป), 40px (แท็บเล็ตและโทรศัพท์)

เพิ่ม Dynamic Archive Sub Title Text

เนื่องจากเราสามารถใส่ชื่อหน้าเก็บถาวรแบบไดนามิกด้วย HTML ที่กำหนดเอง เราจึงเพิ่มคำบรรยายที่ดึงชื่อหน้าเก็บถาวรแบบไดนามิกภายในข้อความคำบรรยายได้

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

ลบข้อความเนื้อหาเริ่มต้นและเพิ่มเนื้อหาแบบไดนามิกของชื่อโพสต์/ที่เก็บถาวรลงในเนื้อหา (เช่นเดียวกับที่เราทำก่อนหน้านี้)

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

ก่อน:

<h3>Here are the articles on 

หลังจาก:

 </h3>

ตอนนี้ชื่อเรื่องจะแสดงตามบรรทัดข้อความก่อนหน้า

ชื่อไฟล์เก็บถาวรแบบไดนามิกสไตล์

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

• หัวข้อ 3 แบบอักษร: Mulish
• การจัดตำแหน่งข้อความหัวเรื่อง 3: Center

การใช้โมดูลบล็อกเพื่อแสดงโพสต์สำหรับหน้าปัจจุบันแบบไดนามิก

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

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

ก่อนที่เราจะเพิ่มโมดูลบล็อก ให้เพิ่มส่วนใหม่ให้กับหน้าก่อน

เพิ่มแถวหนึ่งคอลัมน์ใหม่

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

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 2;
• ความกว้าง: 95%

เพิ่มโมดูลบล็อกเพื่อแสดงโพสต์สำหรับหน้าปัจจุบันแบบไดนามิก

ตอนนี้เราต้องเพิ่มโมดูลบล็อกในแถว

จำไว้ว่าเราต้องตรวจสอบให้แน่ใจว่าได้เปิดใช้งานโพสต์สำหรับหน้าปัจจุบันสำหรับหน้า archvie เพื่อดึงที่เก็บถาวรของโพสต์ที่ถูกต้อง อัปเดตตัวเลือกเนื้อหาดังนี้:

• โพสต์สำหรับหน้าปัจจุบัน: ใช่

โมดูลบล็อกการออกแบบ

เมื่อตั้งค่าเนื้อหาเรียบร้อยแล้ว เรามาทำการเปลี่ยนแปลงการออกแบบกัน ภายใต้แท็บการออกแบบ ให้อัปเดตเค้าโครงดังนี้:

• เค้าโครง: Grid

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

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

อัปเดตรูปแบบข้อความของชื่อเรื่อง

• แบบอักษรของชื่อเรื่อง: Mulish
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• สีข้อความของชื่อเรื่อง: #eee
• ขนาดข้อความชื่อเรื่อง: 34px
• ความสูงของบรรทัดหัวเรื่อง: 1.3em

อัปเดตรูปแบบข้อความเนื้อหา

• แบบอักษรของร่างกาย: มอนต์เซอร์รัต
• สีข้อความ: #ffffff
• ความสูงของเส้นร่างกาย: 2em

อัปเดตรูปแบบข้อความเมตา

• แบบอักษร Meta: มอนต์เซอร์รัต
• สีข้อความเมตา: #ffb100

อัปเดตรูปแบบการแบ่งหน้า

• น้ำหนักแบบอักษรของเลขหน้า: ตัวหนา
• สีข้อความการแบ่งหน้า: #3a405a

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

ผลสุดท้าย

หากต้องการทดสอบผลลัพธ์ ให้ไปที่หน้าเก็บถาวรประเภทต่างๆ บนไซต์ของคุณ

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

นี่คือเทมเพลตหน้าไฟล์เก็บถาวรของผู้เขียนที่แสดงโพสต์ทั้งหมดสำหรับผู้แต่งเฉพาะ

นี่คือหน้าคลังแท็กที่แสดงโพสต์ทั้งหมดที่มีแท็ก "ข่าว"

และนี่คือเทมเพลตหน้าเก็บวันที่ที่แสดงโพสต์ทั้งหมดสำหรับเดือนตุลาคม 2019

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!