إنشاء قائمة التنقل بواسطة Elementor متوافقة مع الجوال

المقدمة: إنشاء قائمة التنقل بواسطة Elementor متوافقة مع الجوال

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

 

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

تعد قائمة الهاتف المحمول واحدة من النقاط الحاسمة التي ينبغي إعطاءها أهمية قصوى في صفحات Elementor الخاصة بموقعك.

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

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

سنرى كلا الحالتين.↓

تعديل القائمة باستخدام قالب WordPress متجاوب للجوال

إذا كنت تستخدم قالباً متوافقاً مع الجوال مثل Astra على سبيل المثال لا الحصر ، فستتم إدارة الجزء الداخلي لصفحاتك بواسطة Elementor بينما ستتم إدارة القائمة والتذييل بواسطة القالب.

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

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

1-1 تغيير حجم شعار الموقع على الجوال:

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

إنشاء قائمة التنقل بواسطة Elementor متوافقة مع الجوال

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

1-2 قائمة التحرير على الهاتف المحمول

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

إنشاء قائمة التنقل بواسطة Elementor متوافقة مع الجوال

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

لكـــن، ماذا لو قررنا إنشاء صفحة بالكامل بواسطة  Elementor دون أن نعتمد على قالب ووردبريس في شيء .. أي دون استخدام رأس أو تذييل ( header أو  footer ) تابع للقالب .

هــل هنـاك حــل؟

طبعاً، لم يخلق الله باباً دون مفتاح ! تابـــع معـــي  …

 إنشاء وتحرير قائمة التنقل متوافقة مع الجوال باستخدام Elementor

 

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

رغم ذلك ، لا مجال للاستسلام ! سنستخدم المُكون الاضافي لووردبريس : «  Elementor Elements Kit » الذي سيعوضنا عن النسخة الاحترافية :

Elementor Elements Kit

هذه النسخة كما ترون دائمة التحدث وهي متوافقة مع الاصدار الأخير وقد تم تحديثها منذ ثلاث أسابيع من كتابة هذا المقال، توجت ب5 نجوم وتم  تنصيبها من قبل 600.000 مستخدم ، طبعاً هؤلاء لا يتوفورن على Elementor Pro  🙂  .

إقرأ ايضاً:  كيفية تثبيت مكون إضافي بدون أخطاء

هذا المكون الاضافي يحتوي على ودجات  Nav Menu مجـانـاً :

Nav Menu في elementor

♦ Nav Menu  على اليمين  مقفول لأنه خاص ب Elementor Pro . أما الذي على اليسار فإنه مُفعّل لأنه خاص بالمكون الاضافي الذي نصبناه قبل قليل.

بالتالي ، سيعمل هذا الوجات على إدارة توافق واستجابة الجوال تلقائيـاً . بحيث سيتيح لك إنشاء قائمة مستجيبة ومتوافقة مع الجوال تظهر كأيقونة hamburger  على الهاتف المحمول:

أيقونة hamburger لقائمة الجوال

بعد أن تمكنت من إنشاء قائمة التنقل بواسطة Elementor و نجحت في جعلها متوافقة مع الجوال أدعوك لزيارة مقالة غاية في الأهمية:

في أمان الله

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

 

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 449 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

21 عدد المشاهدات لهذا المحتوى
Scroll to Top