تسليط الضوء على البرنامج المساعد Divi - وحدة Divi Breadcrumbs

عندما أتنقل في موقع ويب ، فإن إحدى أدوات التنقل التي أبحث عنها هي مسارات التنقل. إنها رائعة لإظهار مكانك داخل التسلسل الهرمي للتنقل وتسهيل العثور على مقالات أخرى داخل الهيكل. يمكن إضافة فتات الخبز إلى Divi باستخدام مكون إضافي يسمى Divi Breadcrumbs Module.

Divi Breadcrumbs Module هو مكون إضافي تابع لجهة خارجية من CodeCrater يقوم بإنشاء فتات تنقل تعتمد على الموقع. بمعنى آخر ، يعرض لك التسلسل الهرمي لفئات الصفحة التي تقرأها حاليًا. يوفر أيضًا روابط لكل عنصر في التسلسل الهرمي بحيث يمكنك بسهولة مشاهدة أحدث المنشورات لكل فئة من الفئات. فتات الخبز قابلة للتخصيص بدرجة كبيرة.

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

لماذا نستخدم فتات الخبز؟

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

تعمل وحدة Divi Breadcrumbs على تحسين مُحسّنات محرّكات البحث من خلال تزويد Google بمعلومات هرمية حول موقع الويب الخاص بك. هذا يعني أنه يجب عليك اختيار الكلمات الرئيسية لفئاتك التي تريد ترتيبها. يؤدي هذا أيضًا إلى إجبار المصممين على استخدام أسماء الفئات التي يسهل فهمها.

تعمل مسارات التنقل على تحسين كل من UX و UI. لا ينبغي أن تحل محل قائمة التنقل القياسية الخاصة بك ولكن يمكنها إثارة الاهتمام وإبقاء الزوار على موقعك لفترة أطول.

وحدة Divi Breadcrumbs

قم بتحميل وتنشيط البرنامج المساعد كالمعتاد. ستظهر الوحدة باللون الأحمر الفاتح تسمى Hollywood Cerise. تتطلب العديد من مكونات فتات الخبز الإضافية Yoast لأنها تسحب فتات الخبز الخاصة بها من المكون الإضافي Yoast ، لكن Divi Breadcrumbs Module لا تتطلب Yoast. بدلاً من ذلك ، تقوم بإنشاء فتات الخبز الخاصة بها. لذلك لا توجد مكونات إضافية أخرى مطلوبة.

تتضمن إعدادات المحتوى إخفاء مسار التنقل في المنزل ، وإضافة نص مسار التنقل الخاص بالمنزل ، واختيار رمز الفاصل (من بين 12 اختيارًا) ، وإخفاء الصفحة الحالية ، وإعدادات الخلفية ، وتسمية المسؤول. تتضمن إعدادات التصميم نمطًا للرموز والنصوص والارتباطات وخيارات التباعد القياسية.

أمثلة على وحدة Divi Breadcrumb

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

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

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

إضافة فتات الخبز ضمن قائمة العرض الكامل

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

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

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

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

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

تصفيف الفاصل

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

يستخدم هذا المثال الخط الافتراضي باللون الأرجواني وحجم خط 20 للفواصل.

إليك نفس الفاصل باستخدام خط جورجيا للفاصل. يكفي تغيير خط الفاصل ببساطة لإضفاء مظهر جديد عليه.

إليك نفس الفاصل باستخدام خط Black Ops One. إنه أكثر جرأة ويبرز أكثر.

هذا هو Droid Serif بخط 20 نقطة مع تباعد أسطر يبلغ 4 بكسل. لقد جعلت الخط أحمر غامق.

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

استخدام وحدة Divi Breadcrumbs مع Extra

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

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

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

الترخيص والتحديثات والدعم

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

• انقر هنا لشراء: Divi Breadcrumbs Module

افكار اخيرة

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

إذا كنت مهتمًا بإضافة فتات الخبز إلى تخطيطات Divi ، فقد تكون Divi Breadcrumbs Module هو المكون الإضافي الذي تحتاجه.

نود أن نسمع منك! هل جربت وحدة Divi Breadcrumbs؟ أخبرنا عن تجربتك في التعليقات أدناه.

صورة مميزة عبر Yevgenij_D / shutterstock.com