قائمة التنقل Elementor – أنشئ قائمة مذهلة لموقع الويب الخاص بك على WordPress

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

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

جدول المحتويات:

• لماذا تحتاج إلى قائمة تنقل مخصصة؟
• قم بإنشاء قائمة WordPress أساسية باستخدام Elementor
• 1. قم بإنشاء قائمة بسيطة لموقع الويب الخاص بك على WordPress
• 2. اختر عناصر قائمة التنقل وخصصها
• 3. إنشاء قوائم فرعية - عناصر القائمة الرئيسية والفرعية (اختياري)
• 4. إدارة موقع القائمة الخاصة بك ونشرها
• كيفية إنشاء قائمة التنقل باستخدام عنصر واجهة المستخدم Elementor pro nav
• الميزات الرئيسية لعنصر قائمة التنقل Elementor
• قم بإنشاء قائمة باستخدام أداة nav-menu pro
• القائمة المستجيبة للجوال
• تغليف

لماذا تحتاج إلى قائمة تنقل مخصصة؟

من المهم أن تعرف أن قوائم التنقل مهمة ليس فقط لجلب الزيارات إلى موقعك ولكن أيضًا لتحسين تصنيف محركات البحث (SEO).

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

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

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

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

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

بفضل عنصر واجهة المستخدم Elementor pro مع قائمة تنقل سريعة الاستجابة بنسبة 100%، يمكنك إنشاء شريط قوائم مثالي للبيكسل ومرن بشكل لا يصدق دون استخدام أي تعليمات برمجية.

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

قبل البدء باستخدام أداة التنقل Elementor، دعنا نستكشف كيف يمكننا إنشاء قائمة WordPress بسيطة باستخدام الإصدار المجاني من Elementor.

قم بإنشاء قائمة WordPress أساسية باستخدام Elementor

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

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

1. قم بإنشاء قائمة بسيطة لموقع الويب الخاص بك على WordPress

أول الأشياء أولاً، ستحتاج إلى تسجيل الدخول إلى لوحة تحكم WordPress الخلفية الخاصة بك.

الآن، من الشريط الجانبي الأيسر، انتقل إلى Appearance > Menus . ستجد هنا تخطيطًا مكونًا من عمودين مع "إضافة عناصر القائمة" على اليسار و"بنية القائمة" على اليمين.

ضمن بنية القائمة، ستجد حقلاً لـ "اسم القائمة". سيكون هذا هو اسم القائمة التي سنقوم بإنشائها الآن. دعنا نسميها القائمة 1.

ملحوظة : لا تقلق. لن يتمكن القراء من رؤية أسماء القائمة. إنها ميزة تساعدك في الحفاظ على تنظيم جميع قوائمك المختلفة.

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

2. اختر عناصر قائمة التنقل وخصصها

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

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

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

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

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

3. إنشاء قوائم فرعية - عناصر القائمة الرئيسية والفرعية (اختياري)

هل تعلم أن WordPress يسمح لك افتراضيًا بإنشاء قوائم فرعية أيضًا؟ عند إنشاء بنية القائمة الفرعية، يكون لديك عنصر قائمة أصل وعنصر قائمة فرعي.

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

رائع أليس كذلك؟

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

4. إدارة موقع القائمة الخاصة بك ونشرها

الآن بعد أن قمت بإنشاء قائمتك الجديدة وإضافة قوائم فرعية، فقد حان الوقت لإدارة موقعها.

في الجزء العلوي من محرر القائمة، يجب أن تلاحظ خيارًا يسمى "إدارة المواقع". انقر عليها وسيظهر شيء مشابه للشاشة التالية:

الآن، ستعتمد مواقع القائمة المتاحة على السمة التي قمت بتثبيتها. في هذا amp ، لدينا سمة تدعم 3 قوائم.

بعد تعيين قائمة لكل موقع من مواقع القائمة المتاحة، انقر فوق "حفظ التغييرات" وهذا كل شيء.

أنت الآن تعرف جميع ميزات القائمة الأساسية التي يقدمها WordPress افتراضيًا. ومع ذلك، إذا كنت تريد المزيد من التخصيص والوظائف، فتابع القراءة للتعرف على أداة القائمة Elementor Pro Nav.

كيفية إنشاء قائمة التنقل باستخدام عنصر واجهة المستخدم Elementor pro nav

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

ما هي الميزات الرئيسية المحددة لعنصر قائمة التنقل نفسه؟ وهنا مقدمة موجزة.

الميزات الرئيسية لعنصر قائمة التنقل Elementor

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

قم بإنشاء قائمة باستخدام أداة nav-menu pro

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

الآن، بعد الانتهاء من الإعدادات الأساسية، دعنا نخصص القائمة باستخدام أداة قائمة التنقل.

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

قسم التخطيط : لديك ثلاثة خيارات أفقية أو رأسية أو أكورديون منسدل مخفي.

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

قسم المحاذاة : يساعدك هذا القسم على محاذاة عناصر نص القائمة؛ الوسط أو اليمين أو اليسار.

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

الرسوم المتحركة التي تحتها خط هي كما يلي:

• Fade: تقدم الرسوم المتحركة للتلاشي رسومًا متحركة للتلاشي أسفل عناصر القائمة.
• الشريحة: تقوم الرسوم المتحركة للشريحة بتمرير الشريط الموجود أسفل عناصر القائمة.
• النمو : تنمو الرسوم المتحركة المتنامية من المنتصف إلى الخارج وتعطي إحساسًا بالنمو.
• Drop in : يتدفق الرسم المتحرك المسقط من الأسفل إلى الأعلى.
• التسرب: يتدفق الرسم المتحرك من أعلى إلى أسفل.

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

قسم المؤشر : حدد نوع المؤشر من القائمة المنسدلة.

قسم مؤشر القائمة الفرعية : عنصر واجهة المستخدم Elementor مليء بالعديد من خيارات تصميم القائمة الفرعية. حيث لا يمكنك فقط التحكم في اللون والنمط وأيضًا خلفية القائمة.

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

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

يوفر تباعد القائمة الكثير من الخيارات بما في ذلك:

• المسافة بين عناصر القائمة
• الحشو الأفقي والرأسي لعناصر القائمة والقائمة الفرعية
• محاذاة المركز واليسار واليمين والمبررة.

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

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

القائمة المستجيبة للجوال

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

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

باختصار، ميزات قائمة الهاتف المحمول الخاصة بـ Elementor هي كما يلي:

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

التنقل المستجيب: يوفر تحديد المواقع سريع الاستجابة للقائمة.

تغليف

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

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