كيفية إضافة فتات الخبز إلى موقع ويب Elementor الخاص بك باستخدام أداة Breadcrumbs

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

باستخدام أداة Breadcrumbs Widget من PowerPack ، يمكنك عرض تمثيل هرمي لارتباطات التنقل على الصفحات التي تم إنشاؤها باستخدام Elementor. توفر إضافة مسارات التنقل طريقة سهلة للزائرين للتنقل في الموقع ومساعدتهم على فهم بنية الموقع بسهولة.

قبل أن ننتقل إلى عنصر واجهة مستخدم Breadcrumbs Elementor من PowerPack ، دعنا أولاً نفهم فتات الخبز وسبب فائدتها.

ما هي فتات الخبز؟

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

دعونا نفهم فتات الخبز بمساعدة مثال:

هذه هي صفحة عنصر واجهة مستخدم فتات الخبز الخاصة بـ PowerPack. الجزء المميز باللون الأحمر (الصفحة الرئيسية> عناصر واجهة المستخدم> أداة فتات الخبز) يُعرف باسم مسار التنقل. شريط التنقل يبرز الصفحة الحالية التي نشاهدها. كما أنه يرتبط بالصفحات (الصفحة الرئيسية> Elementor Widgets) التي وصلنا من خلالها إلى صفحتنا الحالية (Breadcrumbs Widget).

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

أنواع فتات الخبز

يوجد عادة ثلاثة أنواع من فتات الخبز:

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

لماذا فتات الخبز مفيدة؟

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

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

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

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

الآن بعد أن أصبح لدينا فهم جيد لفتات الخبز ، سأشرح كيف يمكنك إضافة فتات الخبز إلى موقع ويب Elementor الخاص بك باستخدام أداة Breadcrumb Elementor Widget من PowerPack.

أضف فتات الخبز إلى موقع Elementor على الويب باستخدام أداة Breadcrumbs

من أجل إضافة فتات الخبز ، سيتعين علينا إضافة أداة فتات الخبز إلى أي صفحة على الموقع. ستحتاج أيضًا إلى تثبيت وتنشيط كل من Elementor و PowerPack Elementor Pro plugin على الموقع.

قم بتشغيل محرر Elementor

بمجرد تثبيت وتفعيل كل من Elementor و PowerPack Addons على الموقع ، يرجى التوجه إلى لوحة معلومات WordPress> الصفحات . حدد الآن الصفحة التي ترغب في إضافة أداة Breadcrumbs فيها وانقر فوق الزر "Edit with Elementor" .

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

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

تخصيص عنصر واجهة مستخدم فتات الخبز في PowerPack في علامة تبويب المحتوى

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

تتمثل الخطوة الأولى في تحديد نوع فتات الخبز التي تريد عرضها على موقعك. كما ترى في الصورة أدناه ، تساعدك أداة Breadcrumb في PowerPack على إنشاء فتات تنقل لموقعك وتخصيصها. إلى جانب ذلك ، يمكنك اختيار عرض فتات الخبز التي تم إنشاؤها بواسطة مكونات إضافية أخرى مثل Yoast و Rank Math و Breadcrumb NavXT و SEOPress.

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

ومع ذلك ، إذا اخترت PowerPack في علامة التبويب "تحديد النوع" ، فيمكنك تخصيص بنية مسارات التنقل الخاصة بك.

ستظهر لك خيارات مثل إظهار الصفحة الرئيسية والنص الرئيسي وأيقونة الصفحة الرئيسية ونص المدونة التي يمكنك استخدامها لتخصيص فتات التنقل الخاصة بك. سنشرح الآن هذه الخيارات أدناه:

• إظهار الصفحة الرئيسية: افتراضيًا ، يتم تمكين هذا الخيار. إذا قمت بتمكين خيار "إظهار الصفحة الرئيسية" ، فسيتم عرض رابط الصفحة الرئيسية في روابط التنقل الخاصة بمسار التنقل. وبالمثل ، إذا قمت بتعطيله ، فلن يظهر رابط الصفحة الرئيسية في روابط التنقل في مسار التنقل.

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

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

• نص المدونة: تمنحك أداة Breadcrumb من PowerPack خيار تغيير نص رابط التنقل في صفحة "المدونة" الذي يتم عرضه على صفحة المدونة الخاصة بموقعك.

الفاصل: هذا هو القسم التالي من أداة فتات الخبز. هنا ، ستحصل على خيار اختيار نوع "الفاصل" . هناك نوعان من الفواصل التي يمكنك الاختيار من بينها: نص وأيقونة .

إذا اخترت نوع الفاصل كـ "أيقونة" ، فستتوفر لديك أيضًا خيارات إما تحميل رمز كملف SVG أو استخدام الرمز المحدد مسبقًا أو ببساطة عدم استخدام أي رمز في روابط التنقل في مسارات التنقل.

ومع ذلك ، إذا اخترت نوع الفاصل كـ "نص" ، يمكنك وصف الفاصل الذي تريده بين روابط التنقل.

كان هذا كله يتعلق بتخصيص Breadcrumbs Widget الخاص بـ PowerPack في علامة تبويب المحتوى. الآن ، دعنا نرى كيف يمكننا تصميم أداة فتات الخبز الخاصة بـ PowerPack.

نمط فتات الخبز الخاصة بـ PowerPack في علامة تبويب النمط

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

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

Current : هذا هو القسم الأخير من علامة تبويب نمط Breadcrumbs Widget في PowerPack. هنا ، يمكنك إعداد الألوان والطباعة والحدود للصفحة الحالية التي تشاهدها . إذا كنت ترغب في ذلك ، يمكنك تعيين نمط مسارات التنقل للصفحة الحالية بحيث يكون مختلفًا تمامًا عن روابط التنقل الأخرى.

قم بتغليفه!

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

أود أن أقترح عليك التحقق من العرض التوضيحي لـ Breadcrumbs Elementor Widget من PowerPack مرة واحدة للحصول على فكرة عن كيفية ظهور Breadcrumbs على موقعك.

إذا أعجبك هذا المقال ، فشارك أفكارك في قسم التعليقات أدناه. لمزيد من دروس PowerPack ، يرجى الاشتراك في قناتنا على YouTube.

يمكنك أيضًا الانضمام إلينا على Twitter و Facebook.