วิธีเพิ่มสารบัญลงในโพสต์บล็อกของคุณใน Elementor

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

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

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

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

ทำไมคุณควรเพิ่มสารบัญ

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

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

ตอนนี้เรามาเกี่ยวกับวิธีที่คุณสามารถเพิ่ม TOC ที่ใช้งานได้อย่างสมบูรณ์และมีสไตล์ใน Elementor

วิธีเพิ่มสารบัญลงในบล็อกโพสต์ของคุณใน Elementor

ขั้นตอนที่ 1: ติดตั้ง Addons Powerpack สำหรับ Elementor

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

ขั้นตอนที่ 2: เปิดใช้งานวิดเจ็ตสารบัญ

เมื่อปลั๊กอินเปิดใช้งานคุณควรเปิดใช้งานวิดเจ็ต TOC จริง ๆ แล้ว

ในการทำเช่นนี้ให้ไปที่ Elementor >> PowerPack >> องค์ประกอบ ในแผงควบคุม WordPress ของคุณ จากนั้นให้มองหาวิดเจ็ต“ สารบัญ” และตรวจสอบให้แน่ใจว่าการสลับถัดจากนั้นเปิดอยู่ (สีน้ำเงิน)

ตอนนี้คุณพร้อมที่จะใช้ใน Elementor

ขั้นตอนที่ 3: สร้างเทมเพลตโพสต์เดียวใน Elementor

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

นี่คือวิธี:

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

Elementor จะถามว่าคุณต้องการเริ่มต้นจากผืนผ้าใบเปล่าหรือใช้เค้าโครงที่สร้างไว้ล่วงหน้าหรือไม่

ขั้นตอนที่ 4: ใช้เทมเพลตโพสต์ที่ออกแบบไว้ล่วงหน้า (ไม่บังคับ)

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

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

ขั้นตอนที่ 5: เพิ่มวิดเจ็ตสารบัญลงในเทมเพลตของคุณ

ต่อไปเราต้องเพิ่มวิดเจ็ตสารบัญ

ในแผง Elementor ค้นหา “ สารบัญ” เมื่อวิดเจ็ตปรากฏขึ้น (มองหาไอคอน PP ที่มุม) ให้ลากและวางลงในเค้าโครงของคุณ

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

เมื่อคุณเพิ่มวิดเจ็ตมันจะตรวจจับและแสดงส่วนหัวทั้งหมดโดยอัตโนมัติ (เช่น H2S และ H3S) จากโพสต์ของคุณ

ขั้นตอนที่ 6: ปรับแต่งการตั้งค่าเนื้อหา

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

ในแท็บเนื้อหาคุณจะพบการตั้งค่าหลายอย่าง:

คุณสามารถเปลี่ยน ชื่อของสารบัญ (TOC) เป็นบางอย่างเช่น "การนำทางอย่างรวดเร็ว" หรือ "ในหน้านี้" หากคุณกำลังคิดเกี่ยวกับ SEO และการเข้าถึงคุณสามารถ ปรับแท็ก HTML ของชื่อเรื่องและ ตั้งค่าเป็น H2 หรือ H3 ขึ้นอยู่กับว่ามันพอดีกับลำดับชั้นของคุณอย่างไร

จากนั้นมีการตั้งค่าที่จะ รวมหรือยกเว้นระดับส่วนหัวบางอย่าง ตัวอย่างเช่นคุณควรแสดงเฉพาะ H2S และ H3S และข้าม H4S และด้านล่าง และคุณสามารถเลือกสไตล์รายการไปกับ ตัวเลขเพื่อ ความรู้สึกแบบทีละขั้นตอน หรือ กระสุน ที่มีโครงสร้าง

ขั้นตอนที่ 7: สำรวจคุณสมบัติพิเศษ (เป็นทางเลือก แต่มีประโยชน์)

วิดเจ็ต Powerpack Tatere ของสารบัญมาพร้อมกับคุณสมบัติที่ช่วยเพิ่มความสามารถในการใช้งานและการออกแบบ

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

นอกจากนี้ยังมีตัวเลือก มุมมองแบบลำดับชั้น สิ่งนี้แสดงให้เห็นถึงความสัมพันธ์ระหว่าง H2S, H3S และ H4S โดยการเยื้องหัวย่อยภายใต้หัวเรื่องหลักของพวกเขา หากคุณมีโพสต์โดยละเอียดการสร้างสารบัญ (TOC) ทำให้การจัดระเบียบและการสแกนง่ายขึ้น

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

หากคุณมีส่วนหัวเหนียวบนเว็บไซต์ของคุณให้พิจารณา ปรับการเลื่อนสกรอลล์ เพื่อไม่ให้หัวเรื่องซ่อนอยู่ข้างหลังเมื่อผู้ใช้คลิกลิงก์ TOC

ขั้นตอนที่ 8: จัดสไตล์ TOC ให้ตรงกับเว็บไซต์ของคุณ

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

• สไตล์กล่อง: คุณสามารถปรับสีพื้นหลังของ TOC ประเภทขอบและรัศมีเส้นขอบและเพิ่มเงากล่องเพื่อให้โดดเด่น หากคุณกำลังจะไปหาเค้าโครงที่สะอาดเส้นขอบที่ละเอียดอ่อนและพื้นหลังเบาทำงานได้อย่างสวยงาม
• สไตล์ส่วนหัว: ต้องการปรับแต่งชื่อ TOC หรือไม่? คุณสามารถตั้งค่าการจัดตำแหน่งข้อความเปลี่ยนช่องว่างและปรับแต่งสีการพิมพ์และไอคอน คุณสามารถเพิ่มสายคั่นและปรับความกว้างและสีของมัน
• รายการสไตล์: นี่คือที่ที่คุณปรับแต่งรายการ TOC จริงลิงก์ส่วน ปรับช่องว่างเปลี่ยนข้อความและตัวอักษรหัวเรื่องเลือกการเยื้องสำหรับหัวเรื่องย่อยและปรับแต่งรูปแบบเครื่องหมาย (เช่นสีกระสุนและขนาด)

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

ขั้นตอนที่ 9: เผยแพร่และกำหนดเงื่อนไข

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

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

คลิก บันทึกและปิด E แล้วเสร็จแล้ว!

ไฮไลท์ที่สำคัญของวิดเจ็ตสารบัญ Powerpack

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

ปรับแต่งชื่อตารางได้อย่างง่ายดาย

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

รวมหรือแยกส่วนหัว

หนึ่งในคุณสมบัติที่โดดเด่นของวิดเจ็ตนี้คือความยืดหยุ่นที่ให้คุณเมื่อมันมาถึงการจัดการระดับส่วนหัว คุณสามารถเลือกแท็กส่วนหัว (H1, H2, H3 ฯลฯ ) ควรปรากฏใน TOC ยิ่งไปกว่านั้นการใช้ฟังก์ชันการเลือก CSS ในตัวคุณสามารถรวมหรือยกเว้นส่วนหรือส่วนหัวเฉพาะจากตารางของคุณโดยเฉพาะทำให้คุณสามารถควบคุมสิ่งที่ปรากฏได้อย่างสมบูรณ์

เลือกสไตล์รายการที่คุณต้องการ

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

หัวข้อยาว? ไม่มีปัญหา

หากหัวข้อของคุณมีความยาวไม่ต้องกังวล คุณสามารถเปิดใช้งานตัวเลือก Word Wrap เพื่อให้แน่ใจว่าข้อความแตกหักอย่างเรียบร้อยและสารบัญ (TOC) ของคุณยังคงสะอาดและจัดเรียง

ยุบ TOC ตามประเภทอุปกรณ์

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

สารบัญเหนียวสำหรับโพสต์ยาว

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

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้สารบัญในบล็อกโพสต์

เพื่อใช้ประโยชน์สูงสุดจาก TOC ของคุณโปรดจำเคล็ดลับเหล่านี้ไว้ในใจ:

• ใช้โครงสร้างส่วนหัวที่เหมาะสม: เริ่มต้นด้วย H2S สำหรับส่วนหลักตามด้วย H3S และ H4S ตามต้องการ หลีกเลี่ยงการข้ามระดับเช่นไปจาก H2 ถึง H4 เนื่องจากอาจทำให้ผู้อ่านและสารบัญ (TOC) สับสนได้เอง
• ทำให้หัวเรื่องของคุณชัดเจนและรัดกุม: จำไว้ว่าผู้อ่านของคุณจะใช้สิ่งเหล่านี้เพื่อนำทางโพสต์ของคุณ รักษาสารบัญ (TOC) ให้สั้นและยุบได้ โดยเฉพาะอย่างยิ่งสำหรับผู้ใช้มือถือการเปิดใช้งานการล่มสลายสามารถทำให้เค้าโครงของคุณสะอาด
• ดูตัวอย่างบนอุปกรณ์ทั้งหมด: ตรวจสอบให้แน่ใจว่าสารบัญ (TOC) ของคุณปรากฏอย่างถูกต้องและฟังก์ชั่นอย่างถูกต้องบนเดสก์ท็อปแท็บเล็ตและโทรศัพท์มือถือ

คำถามที่พบบ่อย

คำถาม ฉันสามารถซ่อนสารบัญ (TOC) บนอุปกรณ์มือถือได้หรือไม่?

ตอบ ใช่คุณสามารถใช้การตั้งค่า“ การล่มสลาย” เพื่อให้ TOC ลดลงโดยค่าเริ่มต้นบนมือถือหรือแท็บเล็ต

คำถาม มันจะอัปเดตอัตโนมัติเมื่อฉันเพิ่มส่วนใหม่ลงในโพสต์ของฉันหรือไม่?

ตอบ ใช่! วิดเจ็ตดึงแท็กหัวเรื่องจากเนื้อหาของคุณแบบไดนามิกดังนั้นจึงอัปเดตโดยอัตโนมัติ

คำถาม ฉันสามารถใช้วิดเจ็ตนี้นอกโพสต์บล็อกได้หรือไม่?

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

ห่อ!

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

ด้วย Elementor และ Powerpack Addons การเพิ่มและปรับแต่งสารบัญ (TOC) เป็นเรื่องง่ายอย่างน่าประหลาดใจ คุณสามารถควบคุมได้อย่างเต็มที่เกี่ยวกับลักษณะและพฤติกรรมทั้งหมดโดยไม่ต้องเขียนรหัสบรรทัดเดียว

คุณสามารถทำอะไรได้มากขึ้นด้วย Powerpack Addons สำหรับ Elementor มีวิดเจ็ตสร้างสรรค์มากกว่า 70 ตัวที่คุณสามารถใช้ในการปรับแต่งหน้า Elementor ของคุณ หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Powerpack Addons สำหรับ Elementor ให้ตรวจสอบที่นี่