هل تبحث عن طريقة لإنشاء قائمة مذهلة للمساعدة في تحسين واجهة المستخدم/تجربة المستخدم لموقعك على الويب؟ إذا كان الأمر كذلك، فأنت في المكان الصحيح. لقد قمنا هنا بتجميع دليل مفصل لمساعدتك.
أولاً، نعرض لك إرشادات خطوة بخطوة حول كيفية إنشاء قائمة لموقع الويب الخاص بك على WordPress. وبمجرد أن تتقن ذلك، سنرشدك حول كيفية استخدام عنصر واجهة المستخدم لقائمة التنقل Elementor لتخصيص قائمة WordPress الخاصة بك وتعزيزها.
جدول المحتويات:
من المهم أن تعرف أن قوائم التنقل مهمة ليس فقط لجلب الزيارات إلى موقعك ولكن أيضًا لتحسين تصنيف محركات البحث (SEO).
في الواقع، تم تصميم قوائم التنقل في المقام الأول لمشاركة المستخدم، ولكن هذا ليس الغرض الوحيد.
العامل الثاني الأكثر أهمية هو مراعاة دور "WebCrawler" أو الروبوتات المصممة للزحف إلى مواقع الويب وفهرسة المحتوى إلى المستوى ذي الصلة وتقديم التقارير إلى محرك البحث لتصنيف المحتوى في المكان المناسب.
لذلك، إذا كنت تقوم بإنشاء قوائم معقدة للغاية، فسيكون من الصعب على الروبوتات تصنيف المحتوى الخاص بك، ولكنك ستفقد زوار موقعك أيضًا.
باختصار، تعد "سهولة التنقل" مساهمًا محوريًا في تحسين تجربة المستخدم بشكل أفضل كما تلعب دورًا حيويًا في تعزيز تصنيف موقعنا وزيادة حركة المرور.
إنه سبب ممتاز للعديد من مواقع الويب التجارية للاحتفاظ برمز تنقل واحد بدلاً من شريط القوائم المعقد، والذي يتم تحميله إلى قائمة ملء الشاشة عند النقر عليه.
بفضل عنصر واجهة المستخدم Elementor pro مع قائمة تنقل سريعة الاستجابة بنسبة 100%، يمكنك إنشاء شريط قوائم مثالي للبيكسل ومرن بشكل لا يصدق دون استخدام أي تعليمات برمجية.
في هذا البرنامج التعليمي، سنوضح لك كيفية استخدام أداة قائمة التنقل Elementor للحصول على قائمة WordPress المخصصة والمتقدمة.
قبل البدء باستخدام أداة التنقل Elementor، دعنا نستكشف كيف يمكننا إنشاء قائمة WordPress بسيطة باستخدام الإصدار المجاني من Elementor.
الآن، لإنشاء قائمة WordPress، لا تحتاج إلى تثبيت أي plugin خاصة. بشكل افتراضي، يأتي WordPress مزودًا بأداة إنشاء قوائم سهلة الاستخدام، والتي ستساعدك على إنشاء قوائم تنقل بسيطة لموقعك على الويب.
ومع ذلك، لن تتمكن من الوصول إلى أي خيارات تخصيص للقائمة. سيتولى تصميم سمة WordPress النشطة حاليًا. ولكن إذا كان هذا هو كل ما تريده، فهذه طريقة ممتازة لإعداد قائمة التنقل لموقع الويب الخاص بك على WordPress.
أول الأشياء أولاً، ستحتاج إلى تسجيل الدخول إلى لوحة تحكم WordPress الخلفية الخاصة بك.
الآن، من الشريط الجانبي الأيسر، انتقل إلى Appearance > Menus . ستجد هنا تخطيطًا مكونًا من عمودين مع "إضافة عناصر القائمة" على اليسار و"بنية القائمة" على اليمين.
ضمن بنية القائمة، ستجد حقلاً لـ "اسم القائمة". سيكون هذا هو اسم القائمة التي سنقوم بإنشائها الآن. دعنا نسميها القائمة 1.
ملحوظة : لا تقلق. لن يتمكن القراء من رؤية أسماء القائمة. إنها ميزة تساعدك في الحفاظ على تنظيم جميع قوائمك المختلفة.
بعد تسمية القائمة الخاصة بك، انقر فوق الزر "إنشاء قائمة" لإتاحتها. الآن، تحتاج إلى إضافة عناصر القائمة المختلفة.
الآن يأتي الجزء الذي تقوم فيه بملء القائمة الجديدة بعناصر القائمة. ضمن قسم "إضافة عناصر القائمة" على الجانب الأيسر، ستجد قائمة منظمة بالأشياء التي يمكنك إضافتها إلى قائمتك.
افتراضيًا، يحتوي هذا على أي من صفحاتك ومنشوراتك وصفحاتك المقصودة والروابط المخصصة والفئات.
ما عليك سوى تحديد عناصر القائمة التي تريد إضافتها باستخدام مربع الاختيار، ثم النقر فوق الزر "إضافة إلى القائمة". سيؤدي هذا إلى ملء القائمة الخاصة بك بجميع عناصر القائمة المحددة.
ملاحظة أن كل قسم ضمن "إضافة عناصر القائمة" لديه خيار التبديل بين - الأحدث وعرض الكل والبحث . تذكر استخدام هذه الخيارات إذا كان هناك الكثير من العناصر.
بمجرد الانتهاء من إضافة جميع عناصر القائمة، اضغط على زر "حفظ القائمة"، وانتقل إلى الخطوة التالية.
هل تعلم أن WordPress يسمح لك افتراضيًا بإنشاء قوائم فرعية أيضًا؟ عند إنشاء بنية القائمة الفرعية، يكون لديك عنصر قائمة أصل وعنصر قائمة فرعي.
عندما يقوم المستخدم بالتمرير فوق عنصر القائمة الرئيسية، فإنه سيكشف عن جميع عناصر القائمة الفرعية المخفية تحته.
رائع أليس كذلك؟
الآن لإنشاء بنية قائمة فرعية، كل ما عليك فعله هو اختيار عنصر القائمة الذي تريده أن يكون في القائمة الرئيسية. بعد ذلك، قم بسحب وإسقاط جميع عناصر القائمة التي تريدها كعناصر قائمة فرعية أسفلها. الآن فقط اسحبه إلى اليمين وقد انتهيت!
الآن بعد أن قمت بإنشاء قائمتك الجديدة وإضافة قوائم فرعية، فقد حان الوقت لإدارة موقعها.
في الجزء العلوي من محرر القائمة، يجب أن تلاحظ خيارًا يسمى "إدارة المواقع". انقر عليها وسيظهر شيء مشابه للشاشة التالية:
الآن، ستعتمد مواقع القائمة المتاحة على السمة التي قمت بتثبيتها. في هذا amp ، لدينا سمة تدعم 3 قوائم.
بعد تعيين قائمة لكل موقع من مواقع القائمة المتاحة، انقر فوق "حفظ التغييرات" وهذا كل شيء.
أنت الآن تعرف جميع ميزات القائمة الأساسية التي يقدمها WordPress افتراضيًا. ومع ذلك، إذا كنت تريد المزيد من التخصيص والوظائف، فتابع القراءة للتعرف على أداة القائمة Elementor Pro Nav.
إذا كنت ترغب في إضافة قائمة تنقل مخصصة إلى موقع WordPress الخاص بك، فستحتاج إلى إصدار Elementor Pro. يأتي إصدار Elementor Pro مزودًا بأداة التنقل Elementor بالإضافة إلى العديد من الميزات الخاصة الأخرى مثل أكثر من 300 قالب، ومنشئ السمات، وأداة منبثقة، وعناصر واجهة المستخدم WooCommerce، والعديد من الميزات الأخرى المثيرة للاهتمام.
ما هي الميزات الرئيسية المحددة لعنصر قائمة التنقل نفسه؟ هنا مقدمة موجزة.
ستحتاج إلى إنشاء قائمة WordPress أساسية كما ذكرنا أعلاه، ثم ستقوم بتخصيص قائمة WordPress الافتراضية باستخدام أداة قائمة التنقل الاحترافية. بمجرد إنشاء القائمة الأساسية، فإن الخطوة التالية هي إضافتها إلى الموقع المطلوب، أي قسم الرأس.
الآن، بعد الانتهاء من الإعدادات الأساسية، دعنا نخصص القائمة باستخدام أداة قائمة التنقل.
في الزاوية العلوية من قسم الإعداد، هناك ثلاثة خيارات متاحة؛ المحتوى والأسلوب والمتقدم.
قسم التخطيط : لديك ثلاثة خيارات أفقية أو رأسية أو أكورديون منسدل مخفي.
قسم المحاذاة : يساعدك هذا القسم على محاذاة عناصر نص القائمة؛ الوسط أو اليمين أو اليسار.
قسم الرسوم المتحركة : سيسمح لك هذا القسم بإضافة تأثيرات الرسوم المتحركة أسفل تأثيرات الرسوم المتحركة ذات الخطوط المزدوجة أو فوقها أو عليها. يمكنك أيضًا اختيار الإطار والخلفية والرسوم المتحركة النصية الدقيقة.
الرسوم المتحركة التي تحتها خط هي كما يلي:
وبالمثل، هناك رسوم متحركة مؤطرة، وخط علوي، وخط مزدوج، وخلفية، ونص. يقدم كل واحد منهم مجموعته الخاصة من الرسوم المتحركة ويمكنك التحقق منها بنفسك لمعرفة ما ستحصل عليه معهم.
قسم المؤشر : حدد نوع المؤشر من القائمة المنسدلة.
قسم مؤشر القائمة الفرعية : عنصر واجهة المستخدم Elementor مليء بالعديد من خيارات تصميم القائمة الفرعية. حيث لا يمكنك فقط التحكم في اللون والنمط وأيضًا خلفية القائمة.
الحشو وتباعد القائمة: يمكن تعديل الحشو بسرعة. يمكنك تغيير الحشو الأفقي للقائمة والقائمة الفرعية، والحشو العمودي، والمسافة البينية، وكذلك المحاذاة اليمنى واليسرى والوسطى.
يتعامل Elementor مع تباعد القائمة والحشو بشكل جيد للغاية. لقد عملوا بجد خلف الأبواب لضمان قدرتهم على جلب الأدوات إلى المطور حتى يتمكنوا بسهولة من إنشاء التصميم الذي يفكرون فيه.
يوفر تباعد القائمة الكثير من الخيارات بما في ذلك:
لون الخلفية والطباعة : يمكنك الحصول على المظهر الخاص بعلامتك التجارية بمساعدة نظام الألوان ولون الخلفية المطلوبين. يمكنك أيضًا اختيار خيارات القائمة الشفافة أو شبه الشفافة.
كمصمم، يمكنك اللعب بهذه الخيارات بقدر ما تستطيع والتأكد من تصميم الخلفيات حسب رغبتك.
يعد الهاتف المحمول جزءًا مهمًا من الويب، ولهذا السبب يوفر مطورو Elementor أيضًا الأدوات التي تمكنك من إنشاء شريط التنقل للجوال أيضًا.
تتيح لك أداة Elementor التحكم الكامل في خيارات قائمة الهاتف المحمول على WordPress. يمكنك التحكم في عرض شاشة الهاتف المحمول من خلال مجموعة منفصلة من الإعدادات لشاشات الهاتف المحمول فقط. يوجد خيار لإعدادات شاشة الهاتف المحمول في الجزء السفلي من قسم إعداد Elementor حيث يمكنك عرض خيارات شاشة الهاتف المحمول الخاصة بك.
باختصار، ميزات قائمة الهاتف المحمول الخاصة بـ Elementor هي كما يلي:
التنقل المستجيب: يوفر تحديد المواقع سريع الاستجابة للقائمة.
تعد القائمة واحدة من أهم الميزات في أي موقع ويب. لأنه يساعد الزوار على التجول في موقع الويب الخاص بك وإذا قمت بإنشاء قائمة بذكاء فإن ذلك سيساعد في إبقاء الزوار على موقعك لفترة طويلة. لا تقل أهمية القائمة عن تخطيط أي موقع ويب بالكامل، وقسم الرأس والتذييل.
لذلك، يجب أن تكون أداة القائمة قادرة على تقديم المظهر الفريد لعلامتك التجارية مع جميع الميزات الأساسية. أداة التنقل Elementor مزودة بإمكانيات غنية بالميزات تتيح للعملاء تخصيص قسم القائمة ليناسب صوت علامتك التجارية. الآن، يمكنك استخدام قائمة أنيقة مخصصة عبر موقع الويب الخاص بك، أو على صفحتك المقصودة، أو رأسك، أو أي قسم آخر ترغب في عرضه فيه.
تعد رؤوس وتذييلات موقع الويب عناصر أساسية. في معظم الحالات، يوفر الرأس إمكانية التنقل...
اثنان من سمات WordPress الأكثر شيوعًا في السوق هما Astra وOceanWP. احترافي…
إن إنشاء موقع إخباري ممتاز لا يتطلب منك أن تصبح مصمم ويب. نحن…
يعد موضوع Newspaper واحدًا من أهم سمات WordPress التي صممها tagDiv، وهو…
عندما يتعلق الأمر بإنشاء متجر عبر الإنترنت، فإن WooCommerce هو plugin المناسب. هو - هي…
عادةً ما يكون العنوان هو أول ما يراه الشخص عند زيارته لموقع الويب الخاص بك،...
عرض التعليقات
مرحبًا بفضل المنشور، عند إضافة قائمة التنقل التي لا تظهر قائمتي، سأقوم فقط بحفظ اللون الرمادي في محرر العنصر وإذا كنت أتطلع إلى الصفحة دون ظهور أي شيء. كيف يمكن أن أحل المشكلة؟ شكرا
أهلاً! عادةً ما تظهر هذه المشكلة عندما تكون القائمة فارغة أو غير محفوظة. يرجى التحقق مرة أخرى من جانب قائمة WordPress.
مرحبًا، استشارة كيف يمكنك فتح قائمة فرعية تلقائيًا عند فتح عنصر آخر من القائمة.
شكرا.
مرحبًا، آسف لم أفهم سؤالك بالكامل؟ هل يمكنك تحديد؟
هل تشعر عندما تريد أن تقسم أصوات القائمة الفرعية بشكل كبير ?
مرحبًا، لا يُنصح بهذا لأن التنقل سيكون معقدًا جدًا للقراءة، وفي هذه الحالة من الأفضل استخدام نمط القائمة الضخمة
القائمة w wersji mobilnej ne otwiera sie. هل ترغب في استخدام الهاتف؟
مرحبًا، يتم عرض قائمة الهاتف المحمول تلقائيًا إذا كنت تستخدم أداة التنقل Elementor. ولكن يجب عليك التحقق من إعداد استدعاء "نقطة التوقف" في إعدادات القائمة. هذا هو حجم الشاشة عندما يتم تبديل القائمة الخاصة بك.
هذا هو المكان الذي يوجد فيه كل ما هو أفقي، وهو عبارة عن موضوع Creaton. Có gì hỗ trợ mình với nhé.
Sziasztok, az miképp oldható meg, hogy egy menüben az Almenüre katintás után zárja össze a menüt az oldal betöltésekor? EPro
مرحبًا، للأسف هذا غير ممكن، لا يوجد مثل هذا الخيار في عنصر واجهة المستخدم للتنقل Elementor.
تشاو. يمكنك معرفة ما إذا كان من الممكن أن تظل القائمة مرئية دائمًا عند ظهورها مع عرض الصفحة. قم بإخراج كل ما تريد من خلال إظهار القائمة العلوية مع عدم ظهور لون خلفية القائمة بشكل غير مقروء عمليًا. غراتسي