مع Kata باستخدام القالب، يمكنك تصميم رؤوس صفحات مُحسّنة لأحجام الشاشات المختلفة، مما يُتيح تجربة مستخدم مُتكيّفة. ولتجربة مُحسّنة على الأجهزة المحمولة، استخدم Kata عنصر قائمة الهامبرغر لتصميم قائمة متجاوبة أكثر تطوراً. يقدم هذا الدليل تعليمات خطوة بخطوة حول إنشاء رأس صفحة متوافق مع الأجهزة المحمولة، وبناء قالب Elementor، وإدارة إعدادات الرؤية.
إنشاء قسم رأس مُحسَّن للأجهزة المحمولة
إضافة قسم رأس جديد للأجهزة المحمولة
أنشئ قسمًا إضافيًا أسفل قسم العنوان الحالي. سيتم تخصيص هذا القسم خصيصًا للشاشات الصغيرة لضمان ملاءمة أفضل.
إضافة عناصر أساسية إلى رأس الهاتف المحمول
في هذا القسم الجديد، ضع العناصر الأساسية مثل Kata الشعار و Kata قائمة همبرغريضمن هذا الإعداد أن يتمكن مستخدمو الأجهزة المحمولة من الوصول إلى التنقل الرئيسي من خلال تبديل بسيط.
إنشاء قالب قائمة التبديل
إنشاء قالب Elementor جديد
لإعداد المحتوى المعروض عند النقر على زر التبديل، انتقل إلى لوحة تحكم ووردبريس > القوالب > إضافة جديد . اختر نوع قالب القسم وأنشئ قالبًا جديدًا مخصصًا لقائمة الجوال الخاصة بك.
ضبط ارتفاع القسم ليناسب الشاشة
في محرر Elementor، اضبط ارتفاع القسم على "ملائم للشاشة" للتأكد من أن القائمة تملأ الارتفاع الكامل لشاشة الجهاز عند فتحها.
إضافة Kata عنصر القائمة وتخصيص التصميم
اسحب Kata القائمة عنصر في هذا القسم، مع ضبط تخطيطه على عمودي للحصول على مظهر مبسط ومتكامل يعمل بشكل جيد على الهاتف المحمول.
اختر القائمة الصحيحة للعرض
قم بتحديد القائمة المطلوبة من خيارات القائمة المنسدلة بحيث يتم ربطها بقالب القائمة المتوافق مع الهاتف المحمول.
الآن، حان وقت تنسيق هذه القائمة باستخدام المُنسّق. انتقل إلى علامة تبويب "النمط" وافتح مُنسّق "الغلاف" بالنقر على الأيقونة أمامه. انتقل إلى علامة تبويب "النص" في المُنسّق، وغيّر محاذاة النص إلى المنتصف. بهذه الطريقة، ستكون عناصر القائمة في المنتصف.
تصميم القائمة باستخدام أداة التصميم
محاذاة عناصر القائمة
في تبويب "النمط" في Elementor ، افتح أداة التنسيق الخاصة بالعنصر "الغلاف" بالنقر على الأيقونة المجاورة له. ضمن قسم "النص" ، اضبط محاذاة النص على " توسيط" لضمان محاذاة عناصر القائمة بشكل أنيق.
تخصيص عناصر القائمة الفردية
انقر على "عام" داخل أداة التنسيق للوصول إلى عناصر القائمة الفردية. هنا، يمكنك تعديل الألوان والخطوط والتباعد وخيارات التنسيق الأخرى لتتناسب مع جماليات علامتك التجارية.
احفظ القالب
بعد الانتهاء من تصميم القالب، احفظه. قائمة الهاتف المحمول هذه جاهزة الآن للربط بـ Kata عنصر من قائمة الهامبرغر.
ربط قائمة الهامبرغر بالقالب
اختر القالب الجديد في Kata قائمة همبرغر
انتقل إلى Kata قائمة همبرغر الإعدادات، ثم اختر القالب الذي حفظته في الخطوة السابقة. يؤدي هذا إلى ربط القائمة بزر التبديل، لذا عند الضغط عليه على الهاتف المحمول، ستظهر القائمة المتقدمة.
إدارة إعدادات الرؤية للأجهزة المختلفة
إعدادات العرض للشاشات الكبيرة
قم بتعيين قسم العنوان الرئيسي إلى Display: Block لأحجام الشاشات الأكبر (سطح المكتب، والكمبيوتر المحمول، والكمبيوتر اللوحي الأفقي) و Display: None للهواتف المحمولة، والهواتف المحمولة الصغيرة، والأجهزة اللوحية الأصغر حجمًا.
إعدادات العرض لرأس الهاتف المحمول
بالنسبة لقسم رأس الصفحة المُحسَّن للأجهزة المحمولة، اعكس هذه الإعدادات: العرض: لا شيء لأجهزة سطح المكتب والكمبيوتر المحمول والكمبيوتر اللوحي في الوضع الأفقي، والعرض: كتلة للأجهزة المحمولة والهواتف المحمولة الصغيرة والأجهزة اللوحية الأصغر حجمًا.
خاتمة
باتباع هذه الخطوات، تكون قد نجحت في تطبيق رأس صفحة متجاوب وسهل الاستخدام على الأجهزة المحمولة باستخدام Kataميزة قائمة الهامبرغر المتقدمة. من خلال إنشاء قائمة تبديل تفتح على تخطيط ملء الشاشة، يمكن للمستخدمين التنقل بسهولة في موقعك على الأجهزة المحمولة، والاستمتاع بتجربة سلسة عبر جميع أحجام الشاشات.
