عندما يتعلق الأمر بإنشاء واجهة مستخدم جيدة لموقع الويب ، فإن قائمة التنقل هي أحد أهم أجزاء التصميم. بدون قائمة سهلة الاستخدام توجه الزوار بسلاسة من خلال موقع الويب الخاص بك ، سيكافح الناس للتجول. بمجرد أن يصابوا بالإحباط ، هذا كل ما يتطلبه الأمر لجعلهم يغادرون.
يمكن لقائمة التنقل المملة أيضًا أن تنتقص من موقعك بشكل كبير ، حتى لو كانت تعمل بشكل جيد بما فيه الكفاية. هذا هو المكان الذي يكافح فيه حتى مصممي واجهة المستخدم الخبراء في إنشاء قوائم ليست جميلة ومثيرة للاهتمام فحسب ، ولكنها أيضًا بسيطة وبديهية.
إذا كنت ترغب في تصميم قائمة جيدة المظهر لموقعك ، فلديك بعض الخيارات. الأول هو استخدام محرر القائمة الافتراضي في ووردبريس – بسيط ولكنه ينجز المهمة – أو عن طريق تصميم قائمة قابلة للتخصيص بدرجة كبيرة باستخدام عنصر واجهة قائمة التنقل في Elementor .
في المنشور التالي ، سننتقل إلى إرشادات خطوة بخطوة حول طريقتين لإنشاء قائمة في ووردبريس ، واحدة في المحرر الافتراضي ، والأخرى باستخدام Elementor. ما عليك سوى اتباع هذه التعليمات وستحصل على قائمة طعامك الجميلة في لمح البصر.
انظر هنا لمعرفة كيفية إنشاء قائمة ضخمة باستخدام Elementor
(لاحظ أنك ستحتاج إلى إنشاء قائمة ووردبريس افتراضية لاستخدام عنصر واجهة مستخدم Nav Menu ، لذا تأكد من اتباع هذا البرنامج التعليمي بالكامل حتى إذا كنت تريد استخدام Elementor فقط.)
افتراضيًا ، لا تحتاج إلى تثبيت أي شيء لإنشاء قائمة بسيطة لموقع ووردبريس الخاص بك. قد لا تكون الطريقة الأكثر أناقة أو الطريقة التي تحتوي على أكثر خيارات التخصيص. لكن قوائم ووردبريس تعمل بشكل جيد بما يكفي لتوجيه الزائرين بوضوح من خلال موقعك ، وتبدو جيدة مع المظهر الافتراضي.
لنقم أولاً بعمل قائمة بسيطة من لوحة معلومات ووردبريس. قم بتسجيل الدخول إلى الواجهة الخلفية وتوجه إلى المظهر> القوائم الموجودة في الشريط الجانبي. ابحث عن اسم القائمة واكتب عنوان قائمة التنقل الجديدة ، ثم انقر على الزر الأزرق الكبير لإنشائه.
لن تفعل قائمتك الكثير ما لم تحدد ما بداخلها. على جانب الصفحة ، يجب أن ترى الآن قوائم منسدلة بالصفحات والمشاركات والروابط المخصصة والفئات للاختيار من بينها.
عناصر القائمة
ما عليك سوى النقر فوق مربع الاختيار الموجود بجوار أي صفحة تريد إضافتها والنقر فوق ” إضافة إلى القائمة” . تأكد من النقر فوق استخدام علامة التبويب عرض الكل ، أو وظيفة البحث إذا كان لديك عدد كبير جدًا من الصفحات.
بمجرد إضافة بعض العناصر ، ستحتاج إلى تضمين بعض المعلومات عن طريق النقر فوق السهم الموجود بجوار كل عنصر ضمن بنية القائمة .
تسمية التنقل – عنوان الارتباط المعروض في القائمة الخاصة بك. مثال: “المتجر” و “المعرض” و “حول”.
سمة العنوان – النص الذي يظهر عند تمرير الماوس فوق عنصر القائمة هذا.
فتح الرابط في نافذة جديدة – بشكل عام ، اترك هذا الخيار مغلقًا ما لم يتم الارتباط بموقع جهة خارجية.
فئات CSS – أضف القليل من الحشو ، وكتابة النص بخط غامق ، وما إلى ذلك باستخدام CSS.
علاقة الارتباط – في حالة الارتباط بموقع تابع لجهة خارجية ، حدد ما إذا كان هذا موقعًا من زميلك أو أحد أفراد أسرتك أو حتى موقعًا آخر من مواقع الويب الخاصة بك.
الوصف – وصف موجز لعنصر القائمة يتم عرضه إذا كان المظهر الخاص بك يدعمه.
عندما تقوم بتجسيد جميع عناصر القائمة الخاصة بك ، فإن عملك لم ينته تمامًا. أولاً ، يدعم ووردبريس القوائم الفرعية. هذا يعني أنه يمكنك إنشاء عناصر قائمة رئيسية وأخرى فرعية. إذا قمت بذلك ، فسيتمكن الزوار من المرور فوق العنصر الأصل على موقعك للكشف عن صفحاته الفرعية.
اسحب العناصر وأفلتها بالترتيب الذي تريد ظهورها فيه. إذا كنت تريد إنشاء قائمة فرعية ، فقم بإسقاطها أسفل العنصر الذي تريد أن تكون أحدها ، ثم اسحبه إلى اليمين.
يمكنك استخدام نفس الطريقة لتغيير ترتيب عناصر القائمة الخاصة بك إلى التسلسل الذي تريده.
في شاشة محرر القائمة ، انتقل إلى علامة التبويب إدارة المواقع وانقر على مربع الاختيار حيث تريد إضافة قائمتك الجديدة. تعتمد الخيارات المتاحة على المظهر الخاص بك ، ولكن بشكل عام ، سترغب في تحديد القائمة الأساسية أو القائمة العلوية .
يمكنك العثور على نفس الإعدادات أسفل شاشة القائمة الرئيسية في شكل مربعات اختيار.
إذا لم يفلح ذلك بالنسبة لك ، فحاول الانتقال إلى المظهر> الأدوات وإسقاط القائمة المخصصة الجديدة أو عنصر قائمة التنقل في المكان الذي تريده.
إذا لم تتمكن من استخدام أي من هذين الخيارين ، فقد تحتاج إلى تبديل السمات أو معرفة ما إذا كان السمة الخاصة بك بها محرر قائمة خاص بها.
وإليكم الأمر: قائمة ووردبريس بسيطة ، إن لم تكن مرنة بشكل خاص. سيتطلب تصميمه أكثر من ذلك معرفة CSS.
أليس هذا كافيا بالنسبة لك؟ هل تريد المزيد من التخصيص والتحكم؟ تابع القراءة وسنوضح لك كيفية إنشاء قائمة قابلة للتخصيص باستخدام Elementor.
لاستخدام عنصر واجهة Nav Menu ، ستحتاج إلى تثبيت أي إصدار من Elementor Pro . إذا كنت تستخدم الإصدار المجاني ، فسيتعين عليك الالتزام بقائمة ووردبريس الافتراضية أو استخدام جهة خارجية.
مع برو عليك أيضا الحصول على 300+ القوالب، و البناء لموبايل ، مواقع WooCommerce ، و بالنوافذ التسويق ، والمزيد من الرسوم المتحركة لموقعك، والحاجيات إضافية فقط للمستخدمين WooCommerce.
ولا تنس الأدوات الاحترافية الأخرى مثل قائمة المنشورات ، وزر الحث على اتخاذ إجراء ، والمراجعات ، والعد التنازلي ، والعديد من كتل Facebook إلى جانب قائمة التنقل.
تأتي أداة Nav Menu نفسها مع ميزات شاملة:
ضع “قوائم التنقل” في أي مكان تريده ، وليس فقط في رأس الصفحة أو أعلاها. انطلق وضع قوائمك في أي مكان تريد ، حتى داخل المنشورات.
أضف أي عدد تريده من القوائم على الموقع أو الصفحة.
أضف رسوم متحركة أنيقة تحوم بسهولة.
استجابة الهاتف المحمول والقدرة على تخصيص شكل قائمتك على أجهزة الكمبيوتر والأجهزة اللوحية والهواتف.
قم بتعديل الطباعة واللون وعناصر التصميم الأخرى.
دقة بكسل مثالية مع خيارات الحشو والتباعد والمحاذاة.
سنقوم الآن بتوضيح كيفية استخدام كل هذه الأشياء مع أداة قائمة التنقل.
كما ذكرنا أعلاه ، للبدء ، ستحتاج إلى إنشاء قائمة ووردبريس افتراضية بالفعل. تأكد من اتباع النصائح أعلاه لمعرفة كيفية القيام بذلك.
إذا كانت قائمة ووردبريس الخاصة بك قد اكتملت ، فقد حان الوقت لإضافتها إلى موقعك باستخدام أداة قائمة التنقل. لذلك ، قم بإنشاء أو تحرير أي قالب تريد أن تظهر قائمتك فيه (مثل رأس الصفحة ). هنا ، ابحث عن أداة قائمة التنقل وأضفها إلى الموقع الذي تريده.
بمجرد الانتهاء ، أصبحت قائمة ووردبريس الخاصة بك قابلة للتعديل الآن في Elementor – حان الوقت للتخصيص!
على الشريط الجانبي الأيسر ، سترى ثلاث علامات تبويب: المحتوى والنمط والمتقدم. أول شيء يجب عليك فعله ، إذا لم يكن قد تم بالفعل ، هو الانتقال إلى المحتوى وتغيير القائمة إلى القائمة التي تريد عرضها. هذا يسمح لك برؤيته في شاشة المعاينة.
التنقل-القائمة-القطعة
ضمن Layout ، يمكنك تعيين القائمة لتكون أفقية أو رأسية أو حتى أكورديونًا منسدلاً مخفيًا. جربه ، سترى على الفور كيف يبدو في أنماط مختلفة. محاذاة يتيح لك تغيير محاذاة عناصر القائمة الخاصة بك.
لديك أيضًا عدد غير قليل من الخيارات عندما يتعلق الأمر بالرسوم المتحركة . وتشمل هذه الرسوم المتحركة ذات السطر السفلي والإفراط والمزدوج بالإضافة إلى الرسوم المتحركة ذات الإطارات والخلفية والنصوص الدقيقة.
انقر فوق القائمة المنسدلة المؤشر لتحديد النوع الذي تريده. ثم انقر فوق الرسوم المتحركة لرؤية الخيارات الفردية. هناك بعض الأمثلة في العمل هنا .
تسطير القائمة
و المؤشر القائمة الفرعية تغيير طريقة عرض الأيقونات السهم القوائم الفرعية. لتخصيص القوائم الفرعية أكثر قليلاً ، انتقل إلى علامة تبويب النمط وقم بإلغاء طي القائمة المنسدلة . غيّر طريقة عملها في الحالات العادية وحالات التمرير ، وخصص الطباعة ، وأضف حدًا ، أو ظلًا ، أو فاصلًا ، وبالطبع قم بتعديل الحشو.
بمجرد أن يكون لديك تخطيط قائمتك بالطريقة التي تريدها ، فقد حان الوقت لتخصيصها أكثر بقليل باستخدام تعديلات الألوان والحشو. انتقل إلى علامة تبويب النمط وقم بإلغاء طي القائمة الرئيسية . هنا ، يمكنك التحكم في كل شيء يتعلق بتصميم عناصر القائمة الخاصة بك.
قم بتشغيل الطباعة لتعديل حجم النص والخط والوزن وتعيينه على كل الأحرف الكبيرة / الصغيرة وتعديل التصميم – مع اختيارات فردية لكل نوع من الأجهزة. اجعل نصك أكبر على الهاتف ، ولون مختلف تمامًا على سطح المكتب ، أي شيء تريده.
استخدم خياري لون النص والمؤشر لتخصيص لون روابط القائمة الخاصة بك عندما تكون عادية ، وتحوم ، وعندما تكون الصفحة النشطة. استخدم الزرين Hover و Active لتحرير الحالات المختلفة.
يعد تخصيص التباعد بدقة مثالية للبكسل أمرًا سهلاً أيضًا ؛ يتوفر كل شيء بدءًا من المساحة المتروكة للنص وتباعد الأحرف وارتفاع السطر. عيّن رقمًا أو اسحب الأشرطة لتغييره.
ارتفاع السطر – يؤدي هذا إلى تغيير ارتفاع السطر ، والمساحة المتروكة أعلى وأسفل النص ، على غرار المساحة المتروكة الرأسية
تباعد الأحرف – تعني القيم الأعلى تباعدًا أكبر بين كل حرف.
عرض المؤشر – سماكة الخطوط التي تظهر عند المرور فوق عنصر القائمة وعندما يكون عنصر القائمة نشطًا.
الحشو الأفقي – هذه هي المسافة بين كل عنصر من عناصر القائمة ، أو بين عناصر القائمة وحواف الأعمدة إذا كنت تستخدم تخطيطًا رأسيًا.
الحشو العمودي – على العكس ، هذه هي المسافة بين الجزء العلوي والسفلي من العمود ، أو عناصر القائمة إذا كنت تستخدم تخطيطًا رأسيًا.
المسافة بين – استخدم هذه القيمة لوضع المزيد من المساحة بين كل عنصر القائمة.
نصف قطر الحدود – يضيف هذا زوايا مستديرة إذا كان لديك لون خلفية.
يمكنك تعيين قيمة مختلفة لوضع سطح المكتب والجهاز اللوحي إذا قمت بتعيين نقطة التوقف الخاصة بك لتكون على الأجهزة المحمولة. خلاف ذلك ، تحتاج إلى تعديل خيارات الهاتف المحمول.
وأخيرًا ، تتيح لك علامة التبويب خيارات متقدمة تعيين فئات CSS وتغيير الهامش والحشو وإضافة صورة خلفية إلى القائمة وتغيير الإعدادات المتجاوبة والمزيد. لكن كن حذرًا عند تعديلها حيث يمكنك تقسيم موقعك لمستخدمي الجوال.
تأتي أداة Nav Menu مع بعض خيارات الهاتف المحمول ضمن علامة التبويب Layout ، لتحسين قائمتك على الأجهزة الأصغر. فيما يلي قائمة بالخيارات الموضحة:
نقطة التوقف – متى يتغير تخطيط القائمة ليناسب الأجهزة الأصغر حجمًا بشكل أفضل؟ على الجهاز اللوحي أو دقة الهاتف المحمول؟
العرض الكامل – قم بتشغيل هذا ، وستمتد قائمة الهاتف المحمول عبر الشاشة بدلاً من عرض عمود قائمة التنقل فقط.
محاذاة – توسيط ارتباطات قائمة الجوال ، أو اجعلها تظهر على الجانب.
تبديل – احتفظ بمؤشر قائمة الهامبرغر (ثلاثة خطوط) ، أو قم بإيقاف تشغيله بالكامل للجوال.
تبديل المحاذاة – قم بمحاذاة مركز رمز الهامبرغر أو اليسار أو اليمين.
ضمن علامة تبويب النمط ، ستجد خيارات لتغيير مظهر تبديل قائمة الجوال أيضًا ( زر التبديل ) ، وتخصيص اللون والخلفية وتغيير الحجم وإضافة حد.
تذكر أن هناك خيارًا لوضع الاستجابة في الجزء السفلي من الشريط الجانبي Elementor. يتيح لك رؤية معاينة لكيفية ظهور قائمة الهاتف المحمول على كل من شاشات الجهاز اللوحي والجوال.
هناك عدة طرق لإنشاء قائمة تنقل مخصصة في ووردبريس. كما رأيت ، تؤدي الإعدادات الافتراضية للنظام الأساسي وظيفتها وهي سهلة الاستخدام.
ومع ذلك ، إذا كنت تشعر أن قائمتك تفتقد شيئًا ما ، أو أنها ليست مرنة تمامًا كما تريدها ، فقد تكون أداة قائمة Elementor Nav Menu هي الخيار الأفضل لك.
يجعل إنشاء القوائم وتخصيصها مهمة بسيطة ومرنة ومليئة بالإمكانيات. باختصار ، إنها لا تقوم بالمهمة فقط – إنها تنهيها.
خدمة لغوية وبحثية ومكتبية
خدمة جامعية في ماليزيا
متجر الكتروني للمنتجات والانظمة البرمجية المدفوعة، المجانية والتي يتم الحصول عليها بطريقة رسمية وآمنة وسريعة، تساعد موثوق في بناء بيئات تشغيل متكاملة تساعد اصحاب الاعمال والفريلانسر والشركات الكبيرة على اداء عملها بشكل متميز
تم وبكل فخر وحب 
تصميم وتطوير الموقع باستخدام تقنية الوردبريس 
واستضافة نيم تشيب العالمية 
تم تطوير الصفحات بواسطة تقنية الاليمنتور 
00970599163031
00970599163031
تم تصميم وتطوير موقع موثوق من قبل المصمم والمبرمج عبدالرحمن قدورة لصالح شركة موثوق للمعلومات الرقمية وخدمات الاونلاين، جميع الحقوق محفوظة لموثوق لعام 2020 – 2021
تقدم موثوق خدمة تصمم وتطوير المتاجر الالكترونية والمواقع بمختلف اشكالها على منصة الوردبريس، نصمم ونطور المواقع بأدوات قوية حسب احتياجات العميل، سرعة، أداء عالي.
00970599163031
