Elementor Navigation Menu - إنشاء قائمة مذهلة لموقع WordPress الخاص بك

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

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

قائمة المحتويات:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

أول الأشياء أولاً ، ستحتاج إلى تسجيل الدخول إلى لوحة معلومات الواجهة الخلفية لـ WordPress.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

إنشاء قائمة مع عنصر واجهة الملاحة قائمة الملاحة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• مسافة بين عناصر القائمة
• حشوة أفقية ورأسية لعناصر القائمة والقائمة الفرعية
• محاذاة إلى الوسط واليسار واليمين وضبطها.

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

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

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

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

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

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

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

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

تغليف

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

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