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

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

لماذا تعد قائمة التنقل مفتاحًا لتجربة مستخدم إيجابية (UX)

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

هناك أنواع مختلفة من القوائم التي يمكنك الاختيار من بينها. وتشمل هذه:

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

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

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

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

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

كيفية إضافة واستخدام وحدة قائمة Beaver Builder (في 5 خطوات)

الآن بعد أن تعرفت على بعض مزايا استخدام القائمة ، حان الوقت لمعرفة كيفية تنفيذ واحدة على موقع الويب الخاص بك. في هذا البرنامج التعليمي ، ستحتاج إلى تثبيت مُنشئ الصفحة Beaver Builder على موقع WordPress الخاص بك. دعنا نتعمق في!

الخطوة 1: إنشاء قائمة

قبل أن تبدأ ، ستحتاج إلى التأكد من أن لديك قائمة متاحة للوحدة الخاصة بك. يمكنك القيام بذلك عن طريق الانتقال إلى Appearances> Menu في لوحة معلومات WordPress الخاصة بك:

بناءً على ما تريده في قائمتك ، يمكنك الاختيار من صفحاتك المتاحة. يمكنك العثور عليها في المربع Pages ضمن إضافة عناصر القائمة :

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

أنت الآن جاهز لإضافة قائمة إلى صفحتك.

الخطوة 2: أضف وحدة القائمة إلى صفحتك

من لوحة معلومات WordPress الخاصة بك ، انتقل إلى PAGES ، واختر الصفحة التي تريد إضافة قائمة بها. انقر فوق الزر Launch Beaver Builder لفتح المحرر:

في مربع المحرر ، سترى مجموعة كبيرة من الوحدات. ستتمكن من العثور على وحدة القائمة أسفل علامة التبويب الإجراءات :

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

بهذه الطريقة ، سيتمكن زوار موقعك من الوصول إليه بسهولة.

الخطوة 3: تكوين إعدادات القائمة الخاصة بك

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

التخطيط الافتراضي أفقي. ومع ذلك ، يمكنك جعله رأسيًا إذا كنت تفضل هذا المظهر:

يمكنك أيضًا اختيار نوع الرمز الذي يتم عرضه في قائمتك الفرعية. يمكنك تحديد Arrow s أو Plus sign أو None :

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

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

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

هنا ، ستجد علامة التبويب متجاوب :

الخيار الافتراضي R esponsive Toggle هو رمز Hamburger ، والذي قد تكون على دراية به.

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

هنا يمكنك الاختيار من بين الخيارات التالية: أيقونة همبرغر ، أيقونة + ملصق هامبرغر ، زر القائمة ، أو لا شيء :

يمكنك أيضًا تعديل النمط المتجاوب ونقطة التوقف في علامة التبويب هذه. بمجرد الانتهاء من تحديد اختياراتك ، انقر فوق حفظ .

الخطوة 4: تخصيص القائمة الخاصة بك

حان الوقت الآن لتخصيص قائمتك. للبدء ، انقر فوق علامة التبويب " النمط " في مربع محرر وحدة القائمة.

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

بعد ذلك ، إذا كنت ترغب في ذلك ، يمكنك اختيار لون الخلفية لقائمتك.

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

لاحظ أنك ستتمكن فقط من رؤية ألوان التمرير في الواجهة الأمامية لموقعك. يغير Link Padding التباعد بين عناصر القائمة. قم بالتمرير لأسفل ويمكنك أيضًا تعديل عائلة الخط وحجمه ونمطه والتباعد في قسم الخط .

إذا كنت ترغب في تعديل النمط بشكل أكبر ، فيمكنك القيام بذلك ضمن Style & Spacing . على سبيل المثال ، يمكنك تبديل الخط إلى كل الأحرف الكبيرة أو الصغيرة ضمن التحويل :

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

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

بالإضافة إلى ذلك ، إذا كان لديك متجر WooCommerce وترغب في عرض عنصر عربة التسوق في قائمتك ، فانتقل إلى علامة التبويب WooCommerce :

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

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

الخطوة 5: انشر الصفحة واختبر قائمتك

أخيرًا ، إذا كنت راضيًا عن قائمتك ، فيمكنك المضي قدمًا والنقر فوق تم ونشر في أعلى يمين الصفحة:

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

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

على سبيل المثال ، ستتمكن من إضافة وحدة القائمة إلى قالب Beaver Themer Header. يمكّنك هذا من اختيار الصفحات التي تريد عرض قائمتك عليها بسهولة.

هذا هو! يجب أن يكون لديك الآن قائمة تعمل بكامل طاقتها. ستساعد هذه الميزة الجديدة زوار موقعك في العثور على ما يبحثون عنه بسهولة أكبر.

استنتاج

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

للتلخيص ، إليك كيفية إضافة واستخدام وحدة قائمة Beaver Builder في خمس خطوات:

1. قم بإنشاء قائمة.
2. أضف وحدة القائمة إلى صفحتك.
3. تكوين إعدادات القائمة الخاصة بك.
4. تخصيص مظهر القائمة الخاصة بك.
5. انشر الصفحة واختبر قائمتك.

أسئلة ذات صلة

ما هي الوحدة النمطية في Beaver Builder؟

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

ما الفرق بين Beaver Builder Page Builder و Beaver Themer؟

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