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