วิธีสร้างสารบัญที่คลิกได้สำหรับโพสต์ในบล็อกด้วย Divi Layout Block

การเพิ่มสารบัญที่คลิกได้ในโพสต์บล็อกเป็นวิธีที่ยอดเยี่ยมในการปรับปรุงประสบการณ์ของผู้ใช้ ในหลายกรณี สารบัญโพสต์บล็อกใช้ลิงก์สมอเพื่อช่วยให้ผู้ใช้นำทางผ่านเนื้อหา และสารบัญ (พร้อมลิงก์สมอ) นั้นง่ายมากที่จะสร้างโดยใช้ HTML พื้นฐาน อย่างไรก็ตาม การเพิ่มการออกแบบที่กำหนดเอง/CSS เพื่อปรับแต่งนั้นอาจเป็นเรื่องท้าทาย นี่คือจุดที่ Divi Layout Block มีประโยชน์

ในบทช่วยสอนนี้ เราจะออกแบบสารบัญที่คลิกได้สำหรับโพสต์บล็อกเดียว (ใน Gutenburg) ที่ใช้ลิงก์ Anchor เพื่อนำผู้ใช้ไปยังหัวข้อที่กำหนดตลอดทั้งโพสต์ ในการทำเช่นนี้ เราจะใช้บล็อกเค้าโครง Divi เพื่อสร้างสารบัญด้วยเครื่องมือการออกแบบที่ทรงพลังทั้งหมดของตัวสร้าง Divi ที่เรามีอยู่

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

แอบมอง

ดาวน์โหลดบล็อกเค้าโครงสารบัญที่นำกลับมาใช้ใหม่ได้ฟรี

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

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

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

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

ดาวน์โหลด

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

วิธีใช้การดาวน์โหลดเพื่อนำเข้าบล็อกเลย์เอาต์นี้บนไซต์ของคุณ

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

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

จากนั้นคลิกปุ่มนำเข้าจากปุ่ม JSON เลือกไฟล์ JSON จากโฟลเดอร์ดาวน์โหลดแล้วคลิกปุ่มนำเข้า

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

แค่นั้นแหละ!

ไปกวดวิชากันเถอะ

สิ่งที่เราต้องเริ่มต้น

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

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างโพสต์ใหม่ใน WordPress และใช้ตัวแก้ไขเริ่มต้น (Gutenberg) เพื่อเพิ่มเนื้อหาจำลอง (ชื่อ หัวเรื่อง ย่อหน้า รูปภาพเด่น ฯลฯ) ตรวจสอบให้แน่ใจว่าคุณสร้างส่วนหัวอย่างน้อยสามบล็อกที่มีเนื้อหาอยู่ข้างใต้ เนื่องจากเราจะเพิ่มลิงก์สมอลงในสารบัญ เราจึงต้องมีสามหัวเรื่องเพื่อเชื่อมโยงไปยังส่วนท้ายของโพสต์

หลังจากนั้นเราก็พร้อมที่จะเริ่มต้น

การสร้างสารบัญที่คลิกได้สำหรับโพสต์บล็อกด้วย Divi Layout Block

เพิ่ม Divi Layout Block

ขั้นแรก เพิ่ม Divi Layout Block ใหม่ที่ด้านบนของเนื้อหาโพสต์ในบล็อกของคุณ

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

เพิ่มแถว

ในตัวแก้ไขเค้าโครง เริ่มการออกแบบโดยการเพิ่มแถวหนึ่งคอลัมน์

เพิ่มตัวแบ่งด้านบน

ภายในคอลัมน์ เพิ่มโมดูลตัวแบ่ง นี่จะเป็นหนึ่งในสองตัวแบ่งที่เราจะใช้เฟรมสารบัญ

การตั้งค่าตัวแบ่ง

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

• สีเส้น: #eeeeee
• ตำแหน่งเส้น: กึ่งกลางแนวตั้ง
• น้ำหนักตัวแบ่ง: 3px
• ความกว้าง: 25%
• ช่องว่างภายใน: 30px บน, 30px ด้านล่าง

เพิ่มตัวแบ่งด้านล่าง

ในการสร้างตัวแบ่งที่สอง ให้ทำซ้ำตัวแบ่งก่อนหน้า

สร้างหัวเรื่องสารบัญด้วยโมดูล Blurb

เมื่อตัวแบ่งอยู่ในตำแหน่งแล้วให้สร้างหัวข้อของเราสำหรับสารบัญ

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

เนื้อหานำเสนอ

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

• ชื่อเรื่อง: “สารบัญ”
• ใช้ไอคอน: ใช่
• ไอคอน: ดูภาพหน้าจอ

การตั้งค่าการออกแบบ Blurb

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

• สีไอคอน: #eeeeee
• ตำแหน่งรูปภาพ/ไอคอน: ซ้าย
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 100px
• ระดับหัวเรื่อง: H2
• ความกว้างของเนื้อหา: 100%
• ส่วนสูง: 38px

โปรดสังเกตว่าความสูงของการนำเสนอน้อยกว่าความสูงของไอคอน ซึ่งช่วยให้ไอคอนขยายด้านล่างถัดจากรายการประกาศที่เราจะเพิ่มต่อไป

เมื่อใส่คำบรรยายแล้ว เราก็พร้อมที่จะเริ่มเพิ่มรายการ/ข้อความแจ้งที่คลิกได้ซึ่งประกอบเป็นสารบัญของเรา ในการทำเช่นนี้ เราจะใช้โมดูลการนำเสนอด้วย

เพิ่มรายการ # 1 ประกาศ

เพิ่มโมดูลการนำเสนอใหม่ภายใต้ชื่อประกาศ

เนื้อหานำเสนอ

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

จากนั้นอัปเดตเนื้อหาด้วยไอคอนลูกศรขวาบนเดสก์ท็อป

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

การออกแบบ Blurb

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

• ไอคอนสี: #b856c7
• ไอคอนวงกลม: ใช่
• สีวงกลม: #ffffff
• แสดงเส้นขอบวงกลม: ใช่
• สีเส้นขอบของวงกลม: #b856c7
• ตำแหน่งรูปภาพ/ไอคอน: ซ้าย
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 16px
• ขนาดข้อความ: 16px
• ความสูงของบรรทัดหัวเรื่อง: 2em
• ความกว้างของเนื้อหา: 100%
• ขอบ: 118px เหลือ
• ช่องว่างภายใน: 10px ด้านบน
• Padding (โฮเวอร์): เหลือ 10px

ประกาศซ้ำสำหรับรายการเพิ่มเติม

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

การเพิ่ม Anchor Link URLs

ขณะนี้รายการประกาศของเราไม่สามารถคลิกได้ เราจึงต้องเพิ่ม URL ลิงก์ของ Anchor ที่จำเป็นลงในแต่ละรายการ URL ลิงก์สมอจะเริ่มต้นด้วยแฮชแท็ก (#) เสมอ ตามด้วย ID ใดๆ ที่คุณต้องการรวม

สมอลิงค์ #หนึ่ง

เพื่อความง่าย เราจะเพิ่มลิงก์สมอ "#one" ลงในข้อความแจ้งรายการแรกในรายการ ในการดำเนินการนี้ ให้เปิดการตั้งค่าสำหรับโมดูลการนำเสนอแรกในรายการ (ไม่ใช่การนำเสนอชื่อ) และอัปเดตสิ่งต่อไปนี้:

• URL ลิงก์โมดูล: #one

Anchor Link #สอง

จากนั้นเปิดการตั้งค่าของรายการประกาศที่สองและเพิ่มลิงก์ต่อไปนี้:

• URL ลิงก์โมดูล: #two

Anchor Link #สาม

สุดท้าย เพิ่มลิงก์ต่อไปนี้ไปยังรายการประกาศที่สาม:

• URL ลิงก์โมดูล: #three

กระชับระยะห่าง

การตั้งค่าแถว

ขณะนี้ มีช่องว่างมากเกินไปเล็กน้อยระหว่างองค์ประกอบของแถวของเรา ในการแก้ไขปัญหานี้ ให้เปิดการตั้งค่าแถวและอัปเดตความกว้างของรางน้ำและช่องว่างภายในดังนี้:

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

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

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

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

บันทึกเค้าโครง

เราเสร็จสิ้นการออกแบบสารบัญของเรา ตรวจสอบให้แน่ใจว่าคุณบันทึกและออกจากตัวแก้ไขเค้าโครง

ตอนนี้คุณควรเห็นสารบัญใหม่ของคุณภายในตัวแก้ไขบล็อกเริ่มต้น

การเพิ่มจุดยึด HTML ให้กับส่วนหัวของโพสต์

เราได้เพิ่ม URL ของลิงก์ Anchor ให้กับแต่ละคำประกาศที่ประกอบเป็นรายการในสารบัญของเรา ตอนนี้ เราต้องเพิ่ม CSS ID ที่เกี่ยวข้อง (หรือ HTML Anchor) ลงในบล็อกส่วนหัวที่อยู่ด้านล่างของโพสต์

HTML Anchor one

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

สมอ HTML: one

โปรดจำไว้ว่า การนำเสนอรายการแรกของเรามี URL “#one” ซึ่งจะเชื่อมโยงไปยัง URL นี้ แต่อย่าเพิ่มแฮชแท็กลงใน HTML Anchor นี้ ไม่จำเป็น)

HTML Anchor two

จากนั้นเลือกบล็อกส่วนหัวที่สองและอัปเดตสิ่งต่อไปนี้:

• สมอ HTML: two

HTML Anchor สาม

และสุดท้าย เลือกบล็อกส่วนหัวที่สามและเพิ่ม HTML Anchor ดังนี้:

• สมอ HTML: สาม

ผลสุดท้าย

มาดูผลสุดท้ายในโพสต์สดกัน

และนี่คือวิธีการทำงานของลิงก์สมอ สังเกตเอฟเฟกต์โฮเวอร์บนไอคอนและวิธีที่ลิงก์เลื่อนไปยังจุดยึดที่เกี่ยวข้องด้านล่างหน้าอย่างราบรื่น

การเพิ่มสารบัญเป็นบล็อกเลย์เอาต์ที่ใช้ซ้ำได้

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

ในการดำเนินการนี้ ให้คลิกที่ Divi Layout Block ที่มีสารบัญและเปิดเมนูการตั้งค่าเพิ่มเติม จากนั้นเลือก "เพิ่มลงในบล็อกเลย์เอาต์ที่นำกลับมาใช้ใหม่ได้"

ป้อนชื่อบล็อกที่ใช้ซ้ำได้ (“สารบัญ”) แล้วคลิกบันทึก

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

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

ในการดำเนินการนี้ ให้เปิดเมนูการตั้งค่าเพิ่มเติมของบล็อกเลย์เอาต์ที่ใช้ซ้ำได้ แล้วเลือก "แปลงเป็นบล็อกปกติ"

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

ฉันหวังว่าบล็อกเลย์เอาต์ของสารบัญ Divi นี้จะเป็นประโยชน์สำหรับโพสต์ที่ยาวพอที่จะต้องการ หากคุณสนใจที่จะทำสิ่งนี้ให้กับคุณแบบไดนามิก (เช่น การสร้างสารบัญสำหรับคุณโดยอัตโนมัติตามหัวข้อของโพสต์) มีปลั๊กอินอยู่เช่น Table of Contents Plus ที่ทำสิ่งนี้ให้คุณ โพสต์นี้เหมาะสำหรับผู้ที่ชื่นชอบการออกแบบด้วย Divi และไม่รังเกียจที่จะสร้างสารบัญในแต่ละโพสต์

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

ไชโย!