วิธีสร้างฐานความรู้สำหรับเว็บไซต์ของคุณด้วย Divi

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

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

แอบมอง

นี่คือตัวอย่างคร่าวๆ ของสิ่งที่เราจะสร้าง

หน้าฐานความรู้หลัก

หน้าบทความตัวอย่าง

สิ่งที่คุณต้องการสำหรับบทช่วยสอนนี้

• ธีม Divi (ติดตั้งและใช้งานอยู่)
• ปลั๊กอิน Echo Knowledge Base (ติดตั้งและใช้งานอยู่)
• ชุดเค้าโครงผลิตภัณฑ์ดิจิทัล (มีให้ฟรีใน Divi Builder)

เปิดใช้งานประเภทโพสต์ฐานความรู้ใน Divi

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

ในการดำเนินการนี้ ให้ไปที่แดชบอร์ด WordPress ของคุณและไปที่ Divi > ตัวเลือกธีม คลิกแท็บตัวสร้างและเปิดใช้งานประเภทโพสต์ “KB: ฐานความรู้”

การสร้างบทความฐานความรู้และหมวดหมู่

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

การสร้างหมวดหมู่ฐานความรู้ของคุณ

คุณสามารถสร้างหมวดหมู่ฐานความรู้ได้เหมือนกับที่คุณทำกับหมวดหมู่โพสต์ทั่วไปใน WordPress

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

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

การกำหนดหมวดหมู่ให้กับบทความใหม่

ขณะนี้หมวดหมู่ของคุณพร้อมแล้ว แต่ไม่มีบทความที่ได้รับมอบหมาย คุณจะต้องสร้างบทความและกำหนดหมวดหมู่หนึ่ง (หรือมากกว่า) ที่คุณสร้างให้กับแต่ละหมวดหมู่

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

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

ตรวจสอบหน้าฐานความรู้เริ่มต้น

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

นี่คือลักษณะของหน้าโดยค่าเริ่มต้น

การกำหนดค่าเค้าโครงฐานความรู้และสไตล์

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

การกำหนดค่าหน้าหลัก

ตั้งค่าหน้าหลัก

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

ในป๊อปอัปเทมเพลต ให้ยกเลิกการเลือกตัวเลือกแสดงชื่อหลัก และตั้งค่าช่องว่างภายในและระยะขอบทั้งหมด 0px ซึ่งจะทำให้เราใช้ Divi Builder สำหรับชื่อหน้าและระยะห่าง

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

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

ตัวเลือกการปรับแต่งหน้าหลัก

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

ค้นหากล่องสี

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

ชื่อเรื่อง: #333333
ประวัติการค้นหา: #ffffff
พื้นหลังปุ่ม: #091c4f

รูปแบบเนื้อหา

ภายใต้หมวดหมู่ เนื้อหา เลือก สไตล์ และอัปเดตสิ่งต่อไปนี้:

ความกว้างของหน้า: ความกว้างเต็ม

รายชื่อบทความ สไตล์และสี

ภายใต้หมวดหมู่ รายการบทความ ให้เลือก สไตล์ และอัปเดตรายการต่อไปนี้:

ไอคอน: Arrow Triangle
ความสูงของรายการบทความ: ความสูงขั้นต่ำ 100px (มีประโยชน์สำหรับการทำให้กล่องทั้งหมดมีความสูงเท่ากัน)

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

ข้อความบทความ: #091c4f
ไอคอนบทความ: #6767ef

หมวดหมู่ สไตล์และสี

ถัดไป ภายใต้ หมวดหมู่ เลือก สไตล์ และอัปเดตสิ่งต่อไปนี้:

ไอคอน ตำแหน่ง: top

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

มีไอคอนให้เลือกมากกว่า 500 รายการ!

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

ไอคอนหมวดหมู่ระดับบนสุด: #ffffff
หมวดหมู่ย่อย Text and Icon: #333333
ตัวแบ่ง: #ffffff
Category Box Heading Text: #ffffff
Category Box Heading Background: #091c4f

คุณสมบัติของหน้าบทความ

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

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

สีข้อความ: #ffffff
สีพื้นหลัง: #091c4f
สีขอบ: #091c4f
ความกว้างของเส้นขอบ: 3px

รูปแบบเค้าโครงหน้าเอกสารเก่า

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

นี่คือตัวอย่างลักษณะของหน้าเก็บถาวรหมวดหมู่ที่มีรูปแบบเริ่มต้น 1

การออกแบบหน้าฐานความรู้ด้วย Divi

ตอนนี้เราได้กำหนดค่าหน้าฐานความรู้ของเราเรียบร้อยแล้ว เราก็พร้อมที่จะออกแบบหน้าหลักของฐานความรู้ด้วย Divi Builder

ขั้นแรก ให้ไปที่หน้าแก้ไขชื่อ “ฐานความรู้” ที่ปลั๊กอินสร้างขึ้นโดยอัตโนมัติ

จากนั้นปรับใช้ Divi Builder เลือกตัวเลือก “เลือกเค้าโครงที่สร้างไว้ล่วงหน้า” จากนั้นจากป๊อปอัปการโหลดจากไลบรารี ให้เลือกชุดเค้าโครงผลิตภัณฑ์ดิจิทัล จากนั้นปรับใช้เค้าโครงหน้าเอกสารกับหน้า

หลังจากโหลดเลย์เอาต์เข้าสู่หน้าแล้ว ให้เลือก “สร้างที่ส่วนหน้า”

คุณจะเห็นว่าส่วนบนสุดมีโมดูลข้อความพร้อมรหัสย่อที่แสดงฐานความรู้รูปแบบใหม่ของเรา

ตอนนี้ สิ่งที่เราต้องทำคือย้ายไปยังตำแหน่งที่เราต้องการให้อยู่ภายในเลย์เอาต์ที่สร้างไว้ล่วงหน้า และปรับการออกแบบตามต้องการด้วยตัวเลือก Divi Builder

สำหรับตัวอย่างนี้ ฉันย้ายโมดูลข้อความที่ถือรหัสย่อ KB ไว้ใต้โมดูลข้อความที่มีชื่อ "เอกสารประกอบ" โดยตรง

จากนั้นฉันก็ลบทุกอย่างจนเหลือเพียงส่วนบนสุดที่มีหนึ่งแถวที่มีโมดูลข้อความ "เอกสารประกอบ" และโมดูลข้อความที่มีรหัสย่อ ฉันยังเก็บส่วนล่างไว้กับ CTA

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

สีพื้นหลัง: #ffffff
แบบอักษรของข้อความ: Poppins
มุมโค้งมน: 10px

นี่คือการออกแบบขั้นสุดท้าย

และยังปรับแต่งได้ดีบนมือถืออีกด้วย

การออกแบบหน้าบทความโดยใช้ Divi Builder

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

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

ตอนนี้ดูว่าบทความมีลักษณะอย่างไร โปรดสังเกตว่าเนื้อหา Divi Builder อยู่ด้านล่างชื่อบทความ Breadcrumbs และปุ่มย้อนกลับซึ่ง Divi Builder ไม่สามารถปรับแต่งได้

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

ต่อไปนี้คือตัวอย่างง่ายๆ ว่าหน้าบทความที่ออกแบบด้วย Divi จะมีหน้าตาเป็นอย่างไร

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

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

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

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

ไชโย!