يحتاج كل موقع إلى قائمة، ونادرًا ما يتطابق الرأس الافتراضي للموضوع مع تصميم Elementor المخصص. مجاني أداة قائمة التنقل في الإضافات الرئيسية للعنصر يعرض أي قائمة WordPress داخل محرر Elementor: تخطيطات أفقية أو رأسية محددة لكل جهاز، وقوائم فرعية مصممة، ومفتاح همبرغر يتولى مسؤولية الهواتف.
يتنقل هذا الدليل عبر عنصر واجهة المستخدم من السحب الأول إلى قائمة مصممة مع قائمة منسدلة عاملة على الصفحة المباشرة.
ما تفعله أداة قائمة التنقل #
تقوم الأداة بسحب القائمة التي قمت بإنشائها ضمن المظهر والقوائم وتعرضها كعنصر عنصر Elementor. يمكنك اختيار التخطيط والسلوك، وتصميم كل حالة من العناصر، والنماذج المنسدلة، وتبديل الهاتف المحمول، كل ذلك من لوحة Elementor. تظل عناصر القائمة نفسها وتسمياتها وترتيبها وقوائمها الفرعية مُدارة في WordPress، لذلك لا يلمس محررو المحتوى Elementor أبدًا لإضافة صفحة إلى القائمة.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
- تم تمكين عنصر واجهة مستخدم قائمة التنقل في لوحة خيارات الإضافات الرئيسية، ضمن عناصر واجهة المستخدم للتنقل.
- قائمة تم إنشاؤها تحت المظهر والقوائم في لوحة المعلومات الخاصة بك. يستخدم العرض التوضيحي قائمة “main” مع الصفحة الرئيسية والتسعير والفريق وجهات الاتصال، بالإضافة إلى قائمة فرعية للأسئلة الشائعة ضمن جهة الاتصال.
كيفية إضافة عنصر واجهة المستخدم لقائمة التنقل #
في محرر Elementor، ابحث في عناصر لوحة ل قائمة التنقل واسحبه إلى الصفحة، عادةً إلى قسم الرأس. تعرض الأداة قائمة WordPress الأولى على الفور.
اختر القائمة والتخطيط #
ال عام يقوم القسم بتشغيل الأداة بأكملها. حدد القائمة يسرد كل قائمة من شاشة القوائم الخاصة بك؛ اختر الذي تريد تقديمه. تخطيط عروض أفقي, عمودي و همبرغر (Pro)، ويمكنك ضبطه بشكل منفصل لكل جهاز. للقوائم الرأسية، يكتب يضيف السلوك: عادي, تبديل, الأكورديون أو جانب. إليك القائمة التجريبية في تخطيط عمودي:
بالنسبة للرأس، الأفقي هو الاختيار المعتاد. محاذاة يضع العناصر يسارًا أو وسطًا أو يمينًا أو مبررة. لا يوجد إعداد واحد لنقطة التوقف: قم بتبديل Elementor إلى عرض الجهاز اللوحي أو الهاتف واختر التخطيط لهذا الجهاز. تستخدم الهواتف تبديل الهامبرغر افتراضيًا. يستحق المحاولة عموديًا مرة واحدة حتى لو لم تكن بحاجة إليه؛ رؤية كلا التخطيطين تجعل خيارات المحاذاة تنقر.
تكوين القائمة المنسدلة #
ال القائمة المنسدلة يتحكم القسم في سلوك القائمة الفرعية ومؤشرها:
- مؤشر الهبوط: إظهار السهم أو إخفائه بجانب العناصر التي تحمل قائمة فرعية.
- موضع المؤشر، الفجوة بينهما، حجم الرمز: أين يجلس السهم وكم هو كبير.
- أيقونة الإسقاط: قم بتبديل الشيفرون الافتراضي بأي رمز، مع الحالات العادية وحالات التمرير وعنصر التحكم في التدوير.
- عرض الهبوط والمحاذاة: حجم لوحة القائمة الفرعية ومحاذاة النص.
- مؤشر القائمة الفرعية: أيقونة قوائم المستوى الثالث.
قم بإعداد تبديل الهاتف المحمول #
عندما يستخدم الجهاز تخطيط الهامبرغر، تنهار القائمة خلف زر التبديل. ال قائمة همبرغر القسم يشكله: محاذاة, يكتب (أيقونة، نص، أو كليهما)، منظر (افتراضي أو مكدس أو مؤطر)، شكل (مربع أو دائرة)، وأيقونات منفصلة للحالتين العادية والنشطة. قم بتبديل المحرر إلى معاينة الهاتف المحمول وسيظهر التبديل مع القائمة المكدسة أسفله
قم بتصميم عناصر القائمة #
في ال أسلوب علامة التبويب، عنصر القائمة الرئيسية يغطي روابط المستوى الأعلى. الطباعة يعالج الخط:
تحته، عادي, تحوم، و نشط علامات التبويب يحمل كل منها لون, لون خلفية العنصر، و ظل النص، بالإضافة إلى المشاركة الحشو الأفقي والرأسي, الفضاء بين، وضوابط الحدود. يقوم العرض التوضيحي بتعيين لون تحوم أزرق، ومعاينته مباشرة عندما يتقاطع المؤشر مع التسعير
قم بتصميم قائمة التبديل والقائمة المنسدلة والعناصر #
ثلاثة أقسام أخرى للأسلوب تنهي المهمة
همبرغر أنماط التبديل: اللون، والخلفية، ونصف قطر الحدود، والظلال، وحجم الأيقونة، والحشوة، مع الحالات العادية، والتحويم، والنشطة.
القائمة المنسدلة أنماط لوحة القائمة الفرعية: لون الخلفية، والفجوة من الأعلى، والحدود، والحشوة. القائمة الفرعية المنسدلة يغطي قوائم أعمق.
عنصر القائمة المنسدلة قم بتصميم الروابط داخل اللوحة، بنفس الحالات الثلاث بالإضافة إلى أ مقسم مجموعة للخط الفاصل بين العناصر:
النتيجة على الصفحة #
في الصفحة المباشرة، تعرض القائمة التصميم الخاص بك: حالات التمرير التي يتم تشغيلها، وتنخفض القائمة الفرعية للأسئلة الشائعة ضمن جهة الاتصال حيث تضعها إعدادات القائمة المنسدلة بالضبط.
حالات الاستخدام الشائعة #
- رؤوس مخصصة تم تصميمه باستخدام Elementor، حيث لا يمكن لقائمة السمات اتباع التصميم.
- الصفحات المقصودة مع قائمة رفيعة خاصة بهم، منفصلة عن القائمة الموجودة على مستوى الموقع.
- الملاحة الشريط الجانبي استخدام التخطيط الرأسي في الوثائق أو صفحات الفئات.
- قوائم الجوال أولا الاعتماد على خيارات الأيقونة والعرض والشكل الخاصة بالتبديل.
- قوائم متعددة المستويات مع المنسدلة ولوحات المستوى الفرعي.
نصائح لقائمة تنقل أفضل #
- قم ببناء القائمة في WordPress أولاً. تعرض الأداة قوائم من المظهر والقوائم؛ لا ينشئهم. الهيكل هناك، النمط هنا.
- امنح Hover وActive ألوانًا مختلفة. يحوم يجيب على المؤشر؛ Active يخبر الزائرين بالصفحة التي يتواجدون فيها. نفس اللون يهدر الإشارة.
- تحقق من كل جهاز على هاتف حقيقي. قد تناسب القائمة المكونة من أربعة عناصر الأجهزة اللوحية بشكل جيد، بينما قد تحتاج القائمة المكونة من سبعة عناصر إلى تخطيط رأسي على الأجهزة اللوحية أيضًا.
- قم بتصميم الخلفية المنسدلة بشكل صريح. القائمة الفرعية الشفافة فوق محتوى الصفحة هي شكوى القائمة الأكثر شيوعًا التي نراها؛ تعمل خلفية القائمة المنسدلة القوية على إصلاحها بنقرة واحدة.
فيديو تعليمي #
إذا كنت ترغب في رؤية أداة قائمة التنقل قيد التنفيذ، فإن هذا الفيديو يمر عبر الإعداد الكامل، بدءًا من اختيار القائمة وحتى القائمة المنسدلة على الصفحة المباشرة
الأسئلة المتداولة #
ما هي أداة قائمة التنقل في الإضافات الرئيسية؟
إنها أداة Elementor التي تعرض أي قائمة WordPress مع التحكم الكامل في التصميم. فهو يوفر تخطيطات أفقية ورأسية محددة لكل جهاز، وقوائم فرعية مصممة بمؤشرات مخصصة، ومفتاح همبرغر قابل للتكوين تستخدمه الهواتف افتراضيًا.
أين أقوم بإضافة أو إزالة عناصر القائمة؟
في WordPress، ضمن المظهر، القوائم. يسرد القائمة المنسدلة "تحديد القائمة" الخاصة بأداة واجهة المستخدم كل قائمة قمت بإنشائها هناك ويعرض القائمة التي تختارها. تتم إدارة العناصر والطلب والقوائم الفرعية في WordPress؛ تتعامل الأداة مع التخطيط والتصميم.
كيف أقوم بإنشاء قائمة فرعية منسدلة؟
قم بتضمين العناصر الموجودة في قائمة WordPress الخاصة بك عن طريق سحبها أسفل أحد الوالدين على شاشة القوائم. تعرض الأداة مؤشرًا منسدلًا بجانب الوالدين تلقائيًا، وتتحكم أقسام القائمة المنسدلة وقائمة المنسدلة في سلوك اللوحة وتصميمها.
متى تظهر قائمة الهامبرغر المحمول؟
على الهواتف بشكل افتراضي. يتيح لك Master Addons Pro اختيار تخطيط همبرغر لأي جهاز، مع الأنواع المنبثقة وغير القماشية. يقوم قسم قائمة همبرغر بتصميم التبديل، بما في ذلك نوع الرمز أو النص، وطرق العرض المكدسة أو المؤطرة، والشكل المربع أو الدائري، والأيقونات العادية والنشطة المنفصلة.
هل يمكن أن تكون القائمة عمودية بدلاً من الأفقية؟
نعم. يوفر التحكم في التخطيط أفقيًا وعموديًا وهامبرغر (Pro). يناسب الوضع الرأسي الأشرطة الجانبية وصفحات التوثيق، ويضيف التحكم في النوع سلوكيات التبديل أو الأكورديون أو الجانب في الأعلى.
إلتحاق بالركب #
تضع أداة قائمة التنقل قائمة الموقع حيث يعيش بقية التصميم الخاص بك: اختر قائمة WordPress، واختر التخطيط، وقم بتصميم العناصر، والنماذج المنسدلة، وتبديل الهاتف المحمول، ثم قم بالنشر. يقترن بشكل طبيعي مع محتوى خارج القماش القطعة (Pro) للتنقل عبر الهاتف المحمول. تصفح المجموعة الكاملة من عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة عناصر واجهة مستخدم قائمة التنقل للمقارنة مع عناصر واجهة المستخدم في قائمة Elementor Pro.
