قائمة التنقل

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

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

ما تفعله أداة قائمة التنقل #

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

قبل أن تبدأ #

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

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

في محرر Elementor، ابحث في عناصر لوحة ل قائمة التنقل واسحبه إلى الصفحة، عادةً إلى قسم الرأس. تعرض الأداة قائمة WordPress الأولى على الفور.

اختر القائمة والتخطيط #

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

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

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

تكوين القائمة المنسدلة #

ال القائمة المنسدلة يتحكم القسم في سلوك القائمة الفرعية ومؤشرها:

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

قم بإعداد تبديل الهاتف المحمول #

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

قم بتصميم عناصر القائمة #

في ال أسلوب علامة التبويب، عنصر القائمة الرئيسية يغطي روابط المستوى الأعلى. الطباعة يعالج الخط:

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

قم بتصميم قائمة التبديل والقائمة المنسدلة والعناصر #

ثلاثة أقسام أخرى للأسلوب تنهي المهمة

تبديل التبديل أنماط الهامبرغر: اللون، والخلفية، ونصف قطر الحدود، والظلال، وحجم الأيقونة، والحشوة، مع الحالات العادية، والتحويم، والنشطة.

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

البند المنسدلة قم بتصميم الروابط داخل اللوحة، بنفس الحالات الثلاث بالإضافة إلى أ مقسم مجموعة للخط الفاصل بين العناصر:

النتيجة على الصفحة #

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

حالات الاستخدام الشائعة #

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

نصائح لقائمة تنقل أفضل #

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

فيديو تعليمي #

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

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

إلتحاق بالركب #

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