المقدمة: إنشاء قائمة التنقل بواسطة 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 Pro . أما الذي على اليسار فإنه مُفعّل لأنه خاص بالمكون الاضافي الذي نصبناه قبل قليل.
بالتالي ، سيعمل هذا الوجات على إدارة توافق واستجابة الجوال تلقائيـاً . بحيث سيتيح لك إنشاء قائمة مستجيبة ومتوافقة مع الجوال تظهر كأيقونة hamburger ≡ على الهاتف المحمول:
بعد أن تمكنت من إنشاء قائمة التنقل بواسطة Elementor و نجحت في جعلها متوافقة مع الجوال أدعوك لزيارة مقالة غاية في الأهمية:
في أمان الله
قناتي على اليوتوب أرى أن هذه المواضيع قد تهمك: |
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.