كيفية إنشاء قاعدة معرفة لموقع الويب الخاص بك مع Divi

يمكن أن يكون وجود قاعدة معرفية على موقع الويب الخاص بك أحد الأصول القيمة للغاية لكل من عملائك وموظفيك. وإذا تم القيام به بشكل صحيح ، يمكن أن تصبح قاعدة المعرفة سمة مميزة طويلة الأمد لضمان الجودة لعملك. يمكن أن تكون حلاً رائعًا للأسئلة الشائعة والوثائق وأدلة البرامج والبرامج التعليمية وغير ذلك الكثير.

في هذا البرنامج التعليمي ، سأوضح لك كيفية إضافة قاعدة معرفية إلى موقع الويب الخاص بك باستخدام Divi. للقيام بذلك ، سأستخدم المكون الإضافي Echo Knowledge Base (إصدار مجاني) الذي يحتوي على بعض خيارات التكوين المفيدة التي تجعل من السهل تنظيم وتصميم صفحات قاعدة المعارف الخاصة بك. سأوضح أيضًا كيف يمكنك تصميم الصفحة الرئيسية لقاعدة المعرفة وصفحات المقالات باستخدام Divi Builder.

نظرة خاطفة

فيما يلي نظرة خاطفة على ما سنبنيه.

صفحة قاعدة المعارف الرئيسية

نموذج صفحة المادة

ما تحتاجه لهذا البرنامج التعليمي

• موضوع Divi (مثبت ونشط)
• البرنامج المساعد Echo Knowledge Base (مثبت ونشط)
• حزمة تخطيط المنتج الرقمي (متوفرة مجانًا داخل Divi Builder)

قم بتمكين نوع منشور قاعدة المعرفة في Divi

تجعل Divi من السهل تقديم الدعم لأنواع منشورات مخصصة لطرف ثالث. نظرًا لأن المكون الإضافي لقاعدة المعرفة يستخدم أنواع المنشورات الخاصة به للمقالات ، فستحتاج إلى تمكينها في Divi. سيسمح لك ذلك باستخدام Divi Builder لتحرير تلك المقالات.

للقيام بذلك ، انتقل إلى لوحة معلومات WordPress الخاصة بك وانتقل إلى Divi> Theme Options. انقر فوق علامة التبويب Builder وقم بتمكين نوع المنشور "KB: Knowledge Base".

إنشاء مقالات قاعدة المعارف والفئات

من أجل الحصول على فكرة جيدة عن الشكل الذي سيبدو عليه التصميم ، ستحتاج إلى بعض مقالات قاعدة المعارف وإعداد الفئات. في الوقت الحالي ، لا بأس في استخدام محتوى وهمي.

إنشاء فئات قاعدة المعرفة الخاصة بك

يمكنك إنشاء فئات قاعدة المعرفة تمامًا كما تفعل مع فئات المنشورات العادية في WordPress.

للقيام بذلك ، انتقل إلى قاعدة المعارف> الفئات. ثم أضف اسمًا ، و Slug ، وفئة أصل (إن أمكن) لكل فئة من الفئات التي ستستخدمها لمقالات قاعدة المعارف. في هذا المثال ، أضفت 6 فئات رئيسية لكل منها بضع فئات فرعية.

لإعطائك فكرة عن مكان حدوث ذلك ، إليك كيفية عرض الفئات الرئيسية والفئات الفرعية في الصفحة الرئيسية لقاعدة المعرفة.

تعيين فئات للمقالات الجديدة

الآن الفئات الخاصة بك في مكانها الصحيح ولكن لا توجد مقالات مخصصة لها. ستحتاج إلى إنشاء مقالات وتعيين فئة (أو أكثر) من الفئات التي أنشأتها لكل واحدة.

يمكنك إنشاء مقال جديد تمامًا كما تفعل مع منشور جديد في WordPress. انتقل إلى قاعدة المعارف> إضافة مقال جديد. ثم أضف عنوانًا وحدد فئة للمقالة. ستلاحظ أنه يمكن تنشيط Divi Builder لأننا نقوم بتمكين نوع المنشور هذا في خيارات السمة. سأشارك بعض النصائح للقيام بذلك لاحقًا. ولكن في الوقت الحالي ، يمكنك فقط إضافة محرر WordPress الافتراضي للمحتوى الوهمي. بعد ذلك نشر المقال.

استمر في هذه العملية نفسها لإنشاء جميع المقالات المطلوبة بحيث تحتوي كل فئة على مقال واحد على الأقل مخصص لها.

تحقق من صفحة قاعدة المعارف الافتراضية

بمجرد تنشيط المكون الإضافي ، يتم إنشاء صفحة قاعدة معرفية تلقائيًا لك. تحتوي هذه الصفحة على الرمز القصير اللازم لنشر قاعدة المعرفة الرئيسية.

هذا هو الشكل الذي ستبدو عليه الصفحة افتراضيًا.

تكوين تخطيط قاعدة المعارف ونمطها

يحتوي المكون الإضافي لقاعدة المعرفة على الكثير من الخيارات المفيدة لتكوين قاعدة المعرفة لتتناسب مع تصميم موقع الويب الخاص بك. هناك خيارات قابلة للتخصيص للصفحة الرئيسية وصفحة المقالة وصفحة الأرشيف.

تكوين الصفحة الرئيسية

إعداد الصفحة الرئيسية

أولاً ، انقر فوق زر الصفحة الرئيسية أعلى صفحة تكوين قاعدة المعارف. ضمن علامة تبويب الإعداد ، يمكنك ترك نمط التخطيط الافتراضي والألوان. ولكن في هذا المثال ، سأقوم بتغيير خيار النموذج لاستخدام "قوالب قاعدة المعارف المصممة للمقالات". أفعل هذا بشكل أساسي لأنه يسمح لك بتخصيص صفحة الأرشيف بخيارات نمط مختلفة معدة مسبقًا. ولكن ، إذا كنت تريد الاحتفاظ بقوالب سمة Divi لهذا الغرض ، فيمكنك الاحتفاظ بالخيار المحدد لـ "قوالب السمة الحالية المستخدمة في المنشورات والصفحات".

في قائمة القوالب المنبثقة ، قم بإلغاء تحديد خيار عرض العنوان الرئيسي واضبط جميع الحشوات والهوامش على 0 بكسل. سيسمح لنا ذلك باستخدام Divi Builder لعنوان الصفحة والتباعد.

الصفحة الرئيسية تنظيم وجميع خيارات النص

في الوقت الحالي ، سأترك خياري التنظيم وكل النص على قيمهما الافتراضية ، لكن لا تتردد في تغييرهما بنفسك. ضمن علامة التبويب تنظيم ، يمكنك حتى سحب الفئات وإفلاتها بأي ترتيب تريده. وتتيح لك خيارات كل النص تغيير الصياغة المستخدمة في جميع أنحاء الصفحة (أي عنوان البحث ونص الزر).

خيار ضبط الصفحة الرئيسية

بعد ذلك ، انقر فوق علامة التبويب ضبط. هذا هو المكان الذي يتم فيه معظم التصميم لقاعدة المعرفة الرئيسية. لن أستخدم كل هذه الإعدادات ، لكنني سأغير بعض الألوان وأضيف بعض الرموز. هذه هي الطريقة التي يمكنك بها مطابقة قاعدة المعرفة مع تخطيط Divi الذي تم إعداده مسبقًا. نظرًا لأنني أخطط لاستخدام حزمة تخطيط المنتجات الرقمية ، سأستخدم هذه الألوان لتصميم صفحة قاعدة المعرفة.

ألوان مربع البحث

ضمن فئة مربع البحث ، حدد الألوان وقم بتحديث ما يلي:

العنوان: # 333333
خلفية البحث: #ffffff
خلفية الزر: # 091c4f

نمط المحتوى

ضمن فئة المحتوى ، حدد النمط وقم بتحديث ما يلي:

عرض الصفحة: العرض الكامل

قائمة بأسلوب وألوان المقالات

ضمن فئة قائمة المقالات ، حدد النمط وقم بتحديث ما يلي:

الأيقونة: سهم مثلث
ارتفاع قائمة المقالات: 100 بكسل كحد أدنى للارتفاع (هذا مفيد لجعل جميع الصناديق بنفس الارتفاع)

ثم حدد الألوان وقم بتحديث ما يلي:

نص المقالات: # 091c4f
أيقونة المقالات: # 6767ef

فئات الأنماط والألوان

بعد ذلك ، ضمن الفئات ، حدد النمط وقم بتحديث ما يلي:

موقع الأيقونات: أعلى

ثم انقر فوق أحد مربعات الفئات في المعاينة لتحديده. ثم حدد رمز الفئة تلك الفئة المحددة. افعل هذا لكل من مربعات الفئة.

هناك أكثر من 500 رمز للاختيار من بينها!

ثم حدد الألوان وقم بتحديث ما يلي:

رمز فئة المستوى الأعلى: #ffffff
نص وأيقونة الفئة الفرعية: # 333333
الحاجز: #ffffff
نص عنوان مربع الفئة: #ffffff
الفئة عنوان مربع الخلفية: # 091c4f

ميزات صفحة المقالة

الآن بعد أن تم تكوين الصفحة الرئيسية لدينا ، انقر فوق صفحة المقالة في الجزء العلوي من الصفحة. ثم انقر فوق علامة التبويب الميزات. هنا يمكنك تخصيص عناصر مثل زر الرجوع وفتات التنقل التي ستظهر في الجزء العلوي من تخطيط المقالة.

في الوقت الحالي ، سأقوم فقط بمطابقة زر الرجوع مع التخطيط المسبق الذي سأستخدمه لصفحة المقالة. ضمن الميزات ، حدد رجوع التنقل وقم بتحديث ما يلي:

لون النص: #ffffff
لون الخلفية: # 091c4f
لون الحدود: # 091c4f
عرض الحدود: 3 بكسل

أرشفة نمط تخطيط الصفحة

لتغيير تخطيط صفحة الأرشيف ، انقر على "صفحة الأرشيف" في الجزء العلوي من الصفحة. ضمن علامة تبويب الإعداد ، سترى قائمة منسدلة للأنماط المختلفة المتاحة. أحافظ على الإعدادات الافتراضية ولكن لا تتردد في تجربة الأنماط الأخرى.

فيما يلي مثال لما تبدو عليه صفحة أرشيف الفئات مع النمط الافتراضي 1.

تصميم صفحة قاعدة المعرفة مع Divi

الآن وقد أكملنا تكوين صفحات قاعدة المعرفة الخاصة بنا ، نحن على استعداد لإكمال تصميم الصفحة الرئيسية لقاعدة المعرفة باستخدام Divi Builder.

أولاً ، انتقل إلى تحرير الصفحة بعنوان "قاعدة المعارف" التي تم إنشاؤها تلقائيًا بواسطة المكون الإضافي.

ثم انشر Divi Builder. حدد الخيار "اختيار تخطيط Premade" ثم من التحميل من المكتبة المنبثقة ، حدد Digital Product Layout Pack. ثم انشر تخطيط صفحة التوثيق على الصفحة.

بعد تحميل التخطيط على الصفحة ، حدد "إنشاء في الواجهة الأمامية".

سترى أن القسم العلوي يحتوي على وحدة نصية مع الرمز القصير الذي يعرض قاعدة المعرفة المصممة حديثًا.

الآن كل ما نحتاج إلى القيام به هو نقله إلى المكان الذي نريده أن يكون ضمن تخطيط مسبق الصنع وضبط التصميم حسب الحاجة باستخدام خيارات Divi Builder.

في هذا المثال ، قمت بنقل الوحدة النصية التي تحمل الرمز القصير KB مباشرة أسفل وحدة النص مع العنوان "الوثائق".

ثم قمت بحذف كل شيء إلى أن كان الشيء الوحيد الذي تركته هو القسم العلوي الذي يحتوي على صف واحد مع وحدة النص "التوثيق" والوحدة النصية التي تحتوي على الرمز القصير. احتفظت أيضًا بالقسم السفلي مع CTA.

لإنهاء التصميم ، افتح إعدادات وحدة النص التي تحتوي على الرمز القصير وقم بتحديث ما يلي:

لون الخلفية: #ffffff
خط النص: بوبينز
الزوايا الدائرية: 10 بكسل

ها هو التصميم النهائي.

كما أنه يتم ضبطه بشكل جيد على الهاتف المحمول أيضًا.

تصميم صفحة المقالة باستخدام Divi Builder

نظرًا لأننا قمنا بتنشيط نوع منشور قاعدة معارف KB في خيارات سمة Divi ، يمكنك تصميم مقالاتك باستخدام Divi Builder. يحد قالب مقالة قاعدة المعارف من Divi Builder بالمحتوى الموجود أسفل عنوان الصفحة وفتات التنقل وزر الرجوع. كما أنه يحد من محتوى divi builder بعرض أقصى يبلغ 1080 بكسل.

في هذا المثال ، سأبدأ في تصميم مقالة قاعدة معرفية بتخطيط مسبق الصنع. للقيام بذلك ، انتقل إلى تحرير إحدى المقالات ونشر Divi Builder. حدد "اختيار تخطيط Premade" ومن التحميل من Library Popup ، حدد Digital Product Layout Pack وانشر صفحة الاتصال الرقمية للمنتج.

انظر الآن إلى شكل المقالة. لاحظ أن محتوى Divi Builder يقع مباشرة أسفل عنوان المقالة ، وفتات الخبز ، وزر الرجوع الذي لا يمكن تخصيصه بواسطة Divi Builder.

ولكن لا يزال لديك بعض خيارات التخصيص القوية للمحتوى الذي يسمح لـ Divi Builder. يمكنك استخدام خلفية القسم العلوي لتخطيط صفحة جهة الاتصال للبحث كخلفية قسم للأقسام (أو الخطوات) المختلفة من المقالة. ويمكنك بسهولة إضافة لقطة شاشة باستخدام وحدة الصورة. في الأساس ، لديك إمكانات غير محدودة لـ Divi Builder للمقال بأكمله.

فيما يلي مثال بسيط لما يمكن أن تبدو عليه صفحة المقالة المصممة باستخدام Divi.

بالطبع ، يمكنك إضافة بعض CSS المخصص لضبط عرض حاوية المقالة من أجل الحصول على تخطيط كامل العرض. ويمكنك إضافة بعض التعليمات البرمجية لإخفاء العنوان ثم استخدام محتوى Divi الديناميكي لوضع عنوان المقالة في أي مكان تريده داخل Divi Builder.

افكار اخيرة

يعد المكون الإضافي Echo Knowledge Base قويًا بشكل مدهش ، حتى بدون توفر جميع الإضافات المتميزة (تستحق المراجعة على الرغم من ذلك). تتيح لك خيارات التكوين تنظيم صفحات قاعدة المعارف الخاصة بك وتصميمها لتتناسب مع تخطيط Divi الخاص بك بسهولة. لإيقافه ، يمكنك حتى استخدام Divi Builder لتصميم صفحة قاعدة المعرفة وصفحة المقالة. آمل أن يكون هذا البرنامج التعليمي مفيدًا لأولئك الذين يتطلعون إلى إضافة قاعدة معرفية إلى موقع Divi الخاص بك.

أتطلع إلى الاستماع منك في التعليقات.

هتافات!