كيفية إنشاء قائمة التنقل في Elementor بدون Pro

الوجبات السريعة الرئيسية

• لا يمكن لـ Elementor بدون Pro وضع قائمة WordPress على صفحة أو في رأس، لأن عنصر واجهة مستخدم قائمة Elementor (قائمة Nav سابقًا) يأتي فقط مع Elementor Pro.
• يمكن إنشاء قائمة التنقل Elementor بدون Pro باستخدام أداة قائمة التنقل Master Addons Nav، التي تعرض أي قائمة WordPress وتضبط تخطيطها بشكل منفصل لسطح المكتب والكمبيوتر اللوحي والهاتف المحمول.
• تأتي القوائم الفرعية في قائمة التنقل Elementor من WordPress: اسحب عنصرًا إلى اليمين قليلاً أسفل الأصل في المظهر > القوائم حتى يقرأ “sub item”، ثم احفظ.
• تحتوي أداة قائمة التنقل الرئيسية للإضافات على أربعة أنواع رأسية: يفتح العادي القوائم الفرعية على الجانب عند التمرير، ويقوم Toggle وAccordion بتوسيعها عند النقر، ويقوم الجانب بتثبيت القائمة على حافة الصفحة.
• توفر أداة قائمة التنقل الخاصة بـ Master Addons للهواتف مفتاح همبرغر افتراضيًا، بينما يحتاج الهامبرغر الموجود على سطح المكتب أو الجهاز اللوحي والأنواع المنبثقة وغير القماشية إلى Master Addons Pro.

يمكنك إنشاء قائمة التنقل Elementor دون شراء Elementor Pro. أداة القائمة الخاصة بـ Elementor هي Pro فقط، لكن أداة القائمة Master Addons Nav تسحب أي قائمة WordPress إلى المحرر، وتنشئ كل مستوى من اللوحة وتنهار إلى همبرغر على الهواتف.

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

لماذا لا يحتوي Elementor free على عنصر واجهة مستخدم في القائمة

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

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

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

ثلاث طرق لإضافة قائمة التنقل بدون Pro

هناك ثلاثة خيارات حقيقية بدون ترخيص Elementor Pro. الصف الرابع هو Elementor Pro للمقارنة.

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

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

إضافات رئيسية قائمة ميجا. بالنسبة للمواقع التي تحتوي على الكثير من الفئات، يقوم ملحق Mega Menu بإنشاء لوحات متعددة الأعمدة أعلى نفس الأداة ويعمل بدون Elementor Pro. تجول: كيفية إنشاء قائمة ضخمة في Elementor بدون Pro.

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

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

قم ببناء القائمة، ابدأ بالانتهاء

يحدث البناء في wp-admin ومحرر Elementor، بدون رمز. تأكد أولاً من أن السمة الخاصة بك لا تطبع الرأس الخاص بها، لأن الرأسين المكدسين هما الفوضى الأكثر شيوعًا هنا.

الخطوة 1: تسجيل القائمة

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

الخطوة 2: إنشاء قالب رأس

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

الخطوة 3: أضف عنصر واجهة مستخدم قائمة التنقل واختر القائمة الخاصة بك

ابحث في لوحة Elementor عن قائمة “Nav” واسحبها إلى الرأس (تقرأ اللوحة قائمة التنقل). في المحتوى > عام، اختر القائمة التي قمت بإنشائها في الخطوة 1 من القائمة المنسدلة تحديد القائمة، ثم قم بتعيين التخطيط. يناسب الأفقي الرأس القياسي، مع عنصر تحكم في المحاذاة بجانبه. يناسب الوضع الرأسي الشريط الجانبي ويضيف عنصر تحكم في النوع باستخدام Normal وToggle وAcordion وSide.

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

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

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

الخطوة 5: نشره وتعيينه

احفظ القالب وقم بتعيينه للموقع بأكمله. بدون Master Addons Pro، هذا هو شرط العرض الوحيد المتاح، والذي يعمل عندما تريد رأسًا واحدًا في كل مكان.

الخطوة 6: التحقق من ذلك على الواجهة الأمامية

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

كيفية إضافة قائمة فرعية وتصميم القائمة المنسدلة

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

1. افتح المظهر > القوائم وحدد القائمة التي تستخدمها الأداة.
2. أضف الصفحة الفرعية أو الرابط إذا لم يكن موجودًا في القائمة بعد.
3. اسحبه أسفل الأصل وإلى اليمين قليلاً حتى يظهر عنوان “sub item” بجوار اسمه.
4. انقر فوق حفظ القائمة، ثم أعد تحميل محرر Elementor أو الواجهة الأمامية.

على الرأس الأفقي، يحصل الأصل على سهم مؤشر (تم تعيينه في المحتوى > رمز المؤشر) ويتم فتح القائمة الفرعية عند التمرير.

تقوم القائمة المنسدلة بتصميم اللوحة (العرض والخلفية والحدود ونصف القطر والظل والمسافة من الشريط العلوي). يقوم عنصر القائمة المنسدلة بتصميم الروابط الموجودة بداخلها: الطباعة والفجوة والحشو والألوان العادية والتحويمية والنشطة ومقسم اختياري. تحصل قوائم المستوى الثالث على أقسام قائمة Dropdown الفرعية المطابقة. ال عرض توضيحي لتغيرات القائمة المنسدلة يُظهر العديد من أنماط اللوحات المبنية بهذه الطريقة.

أنواع القائمة الرأسية الأربعة

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

عادي

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

تبديل

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

الأكورديون

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

جانب

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

ال عرض توضيحي لقائمة التنقل العمودية يعرض نسخة الشريط الجانبي.

جعلها تعمل على الهاتف المحمول

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

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

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

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

لماذا لا تظهر قائمة التنقل Elementor الخاصة بك

عندما لا تظهر قائمة التنقل الخاصة بـ Elementor، يكون السبب دائمًا تقريبًا واحدًا من هذه الأسباب الأربعة. التحقق منها بالترتيب.

1. لم يتم تحديد قائمة، أو لا توجد قائمة. إنشاء قائمة لا يربطها بعنصر واجهة المستخدم، لذا اخترها في تحديد القائمة. إذا كان الحقل يقول “لا توجد قوائم في موقعك”، فقم بإنشاء واحدة أولاً.
2. لا يتم تطبيق قالب الرأس. لا يفعل قالب الرأس شيئًا حتى يكون له حالة عرض. قم بتعيين الموقع بالكامل في Theme Builder وتأكد من عدم تغطيته برأس السمة.
3. على الهاتف، القائمة خلف الهامبرغر. تعرض الهواتف التبديل بدلاً من الروابط. إذا كان لون التبديل يتطابق مع خلفية الرأس، فسيكون الرمز غير مرئي وتبدو القائمة مفقودة. امنح التبديل لونًا متباينًا في النمط > همبرغر.
4. التخزين المؤقت أو تأخير جافا سكريبت. يمكن أن تخدم ذاكرة التخزين المؤقت للصفحة الرأس القديم، ويمكن أن يؤدي تأخير JavaScript إلى إيقاف عمليات الإسقاط والتبديل من العمل حتى يقوم الزائر بتحريك الماوس. مسح ذاكرة التخزين المؤقت واستبعاد البرامج النصية للقائمة من تأخير JS.

ما يحتاج إلى Master Addons Pro

يحتاج جزأين من هذا الإعداد إلى Master Addons Pro.

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

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

لا تحتوي الأداة على رسوم متحركة لمؤشر التمرير (تحتوي قائمة Elementor Pro عليها) ولا يوجد إعداد ثابت على أي خطة. لإبقاء الرأس في العرض، استخدم تأثيرات حركة Elementor Pro على حاوية الرأس، أو قم بإضافته selector { position: sticky; top: 0; z-index: 99; } إلى الحاوية من خلال الإضافات الرئيسية ملحق CSS مخصص. ال دليل رأس لزجة يمشي من خلال كليهما.

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

الأسئلة المتداولة

ماذا تفعل بعد ذلك

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

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

القراءة ذات الصلة

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