هل تبحث عن طريقة لإنشاء قائمة مذهلة للمساعدة في تحسين واجهة المستخدم / تجربة المستخدم لموقعك على الويب؟ إذا كان الأمر كذلك ، فأنت في المكان الصحيح. هنا قمنا بتجميع دليل مفصل لمساعدتك.
بعد ذلك أولاً ، نعرض لك إرشادات خطوة بخطوة حول كيفية إنشاء قائمة لموقع WordPress الخاص بك. وبمجرد أن تحصل على تعليق من ذلك ، سنوجهك حول كيفية استخدام عنصر واجهة مستخدم Elementor Navigation Menu لتخصيص قائمة WordPress الخاصة بك وشحنها.
قائمة المحتويات:
من الأهمية بمكان معرفة أن قوائم التنقل مهمة ليس فقط لجلب حركة المرور إلى موقعك ولكن أيضًا لتحسين ترتيب تحسين محركات البحث.
في الواقع ، تم تصميم قوائم التنقل بشكل أساسي لمشاركة المستخدم ، ولكن هذا ليس الغرض الوحيد.
العامل الثاني الأكثر أهمية هو الحفاظ على دور "WebCrawler" أو برامج الروبوت المصممة للزحف إلى مواقع الويب وفهرسة المحتوى إلى المستوى المناسب وتقديم التقارير إلى محرك البحث لترتيب المحتوى في المكان المناسب.
لذلك ، إذا كنت تنشئ قوائم معقدة للغاية ، فسيكون من الصعب على الروبوتات ترتيب المحتوى الخاص بك ، ولكنك ستفقد أيضًا زوار موقعك.
باختصار ، تعد "سهولة التنقل" عاملاً محوريًا في تحسين تجربة المستخدم الأفضل بالإضافة إلى أنها تلعب دورًا ضروريًا في تعزيز تصنيف موقعنا وزيادة عدد الزيارات.
إنه سبب ممتاز للعديد من مواقع الويب التجارية للاحتفاظ برمز تنقل واحد بدلاً من شريط قوائم معقد ، والذي يتم تحميله إلى قائمة ملء الشاشة عند النقر فوقها.
بفضل عنصر واجهة المستخدم Elementor pro مع قائمة التنقل سريعة الاستجابة بنسبة 100٪ ، يمكنك إنشاء شريط قوائم مثالي ومرن بشكل لا يصدق دون استخدام أي رمز.
في هذا البرنامج التعليمي ، سنوضح لك كيفية استخدام عنصر واجهة مستخدم قائمة التنقل Elementor للحصول على قائمة WordPress المخصصة والمتقدمة.
قبل البدء باستخدام عنصر واجهة مستخدم Elementor Navigation ، دعنا نستكشف كيف يمكننا إنشاء قائمة WordPress بسيطة باستخدام الإصدار المجاني من Elementor.
الآن ، لإنشاء قائمة WordPress ، لا تحتاج إلى تثبيت أي plugin خاصة. بشكل افتراضي ، يأتي WordPress مع أداة إنشاء قوائم سهلة الاستخدام ، والتي ستساعدك على إنشاء قوائم تنقل بسيطة لموقع الويب الخاص بك.
ومع ذلك ، لن تتمكن من الوصول إلى أي خيارات تخصيص للقائمة. سيتخذ تصميم موضوع WordPress النشط حاليًا. ولكن إذا كان هذا هو كل ما تريده ، فهذه طريقة ممتازة لإعداد قائمة تنقل لموقع WordPress الخاص بك.
أول الأشياء أولاً ، ستحتاج إلى تسجيل الدخول إلى لوحة معلومات الواجهة الخلفية لـ WordPress.
الآن ، من الشريط الجانبي الأيسر ، انتقل إلى المظهر> القوائم . ستجد هنا تخطيطًا من عمودين مع "إضافة عناصر قائمة" إلى اليسار و "هيكل القائمة" إلى اليمين.
ضمن بنية القائمة ، ستجد حقلًا لـ "اسم القائمة". سيكون هذا هو اسم القائمة التي سننشئها الآن. دعنا نسميها القائمة 1.
ملاحظة : لا تقلق. لن يتمكن القراء من رؤية أسماء القائمة. إنها ميزة تساعدك في الحفاظ على تنظيم جميع قوائمك المختلفة.
بعد إعطاء اسم لقائمتك ، انقر فوق الزر "إنشاء قائمة" لإتاحتها. الآن ، تحتاج إلى إضافة عناصر القائمة المختلفة.
الآن يأتي الجزء الذي تملأ فيه قائمتك الجديدة بعناصر القائمة. ضمن قسم "إضافة عناصر القائمة" على الجانب الأيسر ، ستجد قائمة منظمة بالأشياء التي يمكنك إضافتها إلى قائمتك.
بشكل افتراضي ، يحتوي هذا على أي من صفحاتك ومنشوراتك وصفحاتك المقصودة والروابط المخصصة والفئات.
ما عليك سوى تحديد عناصر القائمة التي تريد إضافتها باستخدام مربع الاختيار ، ثم النقر فوق الزر "إضافة إلى القائمة". سيؤدي ذلك إلى ملء قائمتك بكل عناصر القائمة المحددة.
ملاحظة : لاحظ أن كل قسم ضمن "إضافة عناصر قائمة" لديه خيار التبديل بين - الأحدث ، وعرض الكل ، والبحث . تذكر استخدام هذه الخيارات إذا كان هناك الكثير من العناصر.
بمجرد الانتهاء من إضافة جميع عناصر القائمة ، اضغط على زر "حفظ القائمة" ، وانتقل إلى الخطوة التالية.
هل تعلم أن WordPress يسمح لك افتراضيًا بإنشاء قوائم فرعية أيضًا؟ عند إنشاء هيكل القائمة الفرعية ، يكون لديك عنصر قائمة أصلي وعنصر قائمة فرعي.
عندما يقوم المستخدم بالمرور فوق عنصر القائمة الرئيسي ، فإنه سيكشف جميع عناصر القائمة الفرعية المخفية تحته.
رائع ، أليس كذلك؟
الآن لإنشاء بنية قائمة فرعية ، كل ما عليك فعله هو اختيار عنصر قائمة تريد أن تكون في القائمة الرئيسية. بعد ذلك ، قم بسحب وإسقاط جميع عناصر القائمة التي تريدها كعناصر قائمة فرعية تحتها. الآن فقط اسحبه إلى اليمين وأنت انتهيت!
الآن بعد أن أنشأت قائمتك الجديدة وأضفت قوائم فرعية ، حان الوقت لإدارة موقعها.
في الجزء العلوي من محرر القائمة ، يجب أن تلاحظ خيارًا يسمى "إدارة المواقع". انقر فوقه وسيظهر شيء مشابه للشاشة التالية:
الآن ، ستعتمد مواقع القائمة المتاحة على السمة التي قمت بتثبيتها. في هذا السابقين amp جنيه، لدينا موضوع أن يدعم 3 القوائم.
بعد تعيين قائمة لكل موقع من مواقع القائمة المتاحة ، انقر فوق "حفظ التغييرات" وهذا كل شيء.
أنت تعرف الآن جميع ميزات القائمة الأساسية التي يقدمها WordPress بشكل افتراضي. ومع ذلك ، إذا كنت تريد المزيد من التخصيص والوظائف ، فتابع القراءة للتعرف على عنصر واجهة قائمة Elementor Pro Nav Menu.
إذا كنت ترغب في إضافة قائمة تنقل مخصصة إلى موقع WordPress الخاص بك ، فستحتاج إلى إصدار Elementor Pro. يأتي إصدار Elementor Pro مزودًا بعنصر واجهة مستخدم Elementor nav بالإضافة إلى العديد من الميزات الخاصة الأخرى مثل أكثر من 300 قالب ، ومنشئ السمات ، وعناصر واجهة مستخدم منبثقة ، وعناصر واجهة مستخدم WooCommerce ، والعديد من الميزات الأخرى المثيرة للاهتمام.
ما هي الميزات الرئيسية المحددة لعنصر واجهة مستخدم Nav Menu نفسه؟ هنا مقدمة موجزة.
ستحتاج إلى إنشاء قائمة WordPress أساسية كما ذكرنا أعلاه ، ثم ستقوم بتخصيص قائمة WordPress الافتراضية باستخدام عنصر واجهة قائمة التنقل المؤيد. بمجرد إنشاء القائمة الأولية ، فإن الخطوة التالية هي إضافتها إلى الموقع الذي تريده ، أي قسم الرأس.
الآن عندما تنتهي من الإعدادات الأساسية ، دعنا نخصص القائمة باستخدام عنصر واجهة قائمة التنقل.
في الزاوية العلوية من قسم الإعداد ، هناك ثلاثة خيارات متاحة ؛ المحتوى والأسلوب والمتقدم.
قسم التخطيط : لديك ثلاثة خيارات أفقية أو رأسية أو مخفية منسدلة أكورديون.
قسم المحاذاة : يساعدك هذا القسم على محاذاة عناصر نص القائمة ؛ الوسط أو اليمين أو اليسار.
قسم الرسوم المتحركة : سيسمح لك هذا القسم بإضافة تأثيرات الحركة أسفل تأثيرات الرسوم المتحركة أو فوقها أو مضاعفتها. يمكنك أيضًا الانتقال إلى الرسوم المتحركة للإطار والخلفية والنصوص الدقيقة.
الرسوم المتحركة المسطر كالتالي:
وبالمثل ، هناك رسوم متحركة مؤطرة ، وفوقية ، وخطوط مزدوجة ، وخلفية ، ونص. يقدم كل واحد منهم مجموعة الرسوم المتحركة الخاصة به ويمكنك التحقق منها بنفسك لمعرفة ما تحصل عليه معهم.
قسم المؤشر : حدد نوع المؤشر من القائمة المنسدلة.
قسم مؤشر القائمة الفرعية : يتم تعبئة عنصر واجهة المستخدم بالعديد من خيارات تصميم القائمة الفرعية. حيث لا يمكنك فقط التحكم في اللون والنمط وخلفية القائمة.
المساحة المتروكة وتباعد القوائم: يمكن ضبط الحشو بسرعة. يمكنك تغيير المساحة المتروكة الأفقية للقائمة والقائمة الفرعية ، والحشو الرأسي ، والمسافة الموجودة بين المساحات ، وكذلك المحاذاة اليمنى واليسرى والوسطى.
يقترب Elementor من التباعد بين القوائم والحشو بشكل جيد للغاية. لقد عملوا بجد خلف الأبواب للتأكد من أنه يمكنهم إحضار الأدوات إلى المطور حتى يتمكنوا من إنشاء التصميم الذي يفكرون فيه بسهولة.
يوفر تباعد القائمة الكثير من الخيارات بما في ذلك:
لون الخلفية والطباعة : يمكنك الحصول على المظهر المصمم خصيصًا لعلامتك التجارية بمساعدة نظام الألوان المطلوب ولون الخلفية. أيضًا ، يمكنك اختيار خيارات القائمة الشفافة أو شبه الشفافة أيضًا.
كمصمم ، يمكنك اللعب بهذه الخيارات بقدر ما تستطيع والتأكد من تصميم الخلفيات حسب رغباتك.
يعد الجوال جزءًا مهمًا من الويب ، ولهذا السبب يوفر مطورو Elementor أيضًا أدوات حتى تتمكن من إنشاء شريط التنقل للجوال أيضًا.
تتيح لك أداة Elementor التحكم الكامل في خيارات قائمة الأجهزة المحمولة على WordPress. يمكنك التحكم في عرض شاشة الجوال بمجموعة منفصلة من الإعدادات لشاشات الجوال فقط. يوجد خيار لإعدادات شاشة الهاتف المحمول في الجزء السفلي من قسم إعداد Elementor حيث يمكنك عرض خيارات شاشة هاتفك المحمول.
باختصار ، ميزات قائمة الهاتف المحمول Elementor هي كما يلي:
التنقل المتجاوب: يوفر وضعًا سريع الاستجابة في القائمة.
تعد القائمة من أهم ميزات أي موقع ويب. لأنه يساعد الزائرين على التجول في موقع الويب الخاص بك ، وإذا قمت بإنشاء قائمة بذكاء ، فسيساعد ذلك في إبقاء زوارك على موقعك لفترة طويلة. تعتبر القائمة مهمة بنفس القدر مثل تلك الخاصة بالتخطيط الكامل لأي موقع ويب ، والعنوان ، والتذييل.
لذلك ، يجب أن تكون أداة القائمة قادرة على تقديم مظهر علامتك التجارية الفريدة مع جميع الميزات الأساسية. أداة Elementor Navigation مع إمكانيات غنية بالميزات تتيح للعملاء تخصيص قسم القائمة ليناسب صوت علامتك التجارية. الآن ، يمكنك استخدام قائمة أنيقة مصممة خصيصًا عبر موقع الويب الخاص بك ، أو على صفحتك المقصودة ، أو العنوان ، أو أي قسم آخر ترغب في عرضه فيه.
تعتبر رؤوس وتذييلات موقع الويب من العناصر الأساسية. في معظم الحالات ، يوفر الرأس التنقل ...
اثنان من أكثر موضوعات WordPress شيوعًا في السوق هما Astra و OceanWP. احترافي…
لا يتطلب إنشاء موقع إخباري ممتاز أن تصبح مصمم ويب. نحن…
تعد سمة الجريدة واحدة من أهم سمات WordPress التي صممها tagDiv ، وهو ...
عندما يتعلق الأمر بإعداد متجر على الإنترنت ، فإن WooCommerce هو plugin go-to. هو - هي…
عادةً ما يكون العنوان هو أول ما يراه الشخص عند زيارته لموقع الويب الخاص بك ، ...
تعليقات عرض
Hola gracias por el post، cuando añado el nav menú no me aparece mi menú se queda solo un recuadro gris en el editor de elementor y si voy a la pagina donde lo tengo no aparece nada. كومو puedo solucionarlo؟ غراسياس
مرحبا! عادة ، تظهر هذه المشكلة عندما تكون القائمة فارغة أو غير محفوظة. يرجى التحقق مرة أخرى من جانب قائمة WordPress.
Hola، una Consulta، cómo se puede dar la instrucción para cerrar automáticamente un submenu al abrir otro ítem del menu.
جراسياس.
مرحبًا ، آسف لم أفهم سؤالك تمامًا؟ هل يمكنك تحديد؟
ciao quando le voci del submenù sono troppo lunghe come si riesce a dividerle su più righe؟
مرحبًا ، هذا غير موصى به لأن التنقل سيكون معقدًا جدًا للقراءة ، وفي هذه الحالة يكون أسلوب القائمة الضخم أفضل
Menu wersji mobilnej nie otwiera sie. Jak moge je utworzyc zeby wyswietlalo sie na telefonach؟
مرحبًا ، يكون عرض قائمة الجوال تلقائيًا إذا كنت تستخدم عنصر واجهة التنقل Elementor. ولكن يجب عليك التحقق من مكالمة الإعداد "نقطة توقف" في إعدادات القائمة. هذا هو حجم الشاشة عندما يتم تبديل القائمة الخاصة بك.
Tôi dùng thằng này، mà trên destop tôi để chế độ Horizontal mà nó không nằm ngang، nó cứ nằm dọc، tôi dùng theme Creaton. Có gì hỗ trợ mình với nhé.
Sziasztok، az miképp oldható meg، hogy egy vertikális menüben az almenüre kattintás után ne zárja össze a menüt az oldal betöltésekor؟ إيبرو
مرحبًا ، للأسف هذا غير ممكن ، لا يوجد مثل هذا الخيار في عنصر واجهة التنقل Elementor.
تشاو. Vorrei sapere مثل الأجرة الممكنة في modo che il menu rimanga semper visibile anche quando si scende con la visualizzazione della pagina. يمكنك الحصول على قائمة طعام غير مشروعة. جراتسي