كيفية إنشاء أشرطة تذييل ثابتة للهاتف المحمول باستخدام Divi

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

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

دعنا نذهب اليها!

معاينة

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

أعد إنشاء المثال رقم 1

إضافة قسم جديد إلى أسفل الصفحة

لنبدأ في إعادة إنشاء أول شريط تذييل متنقل ثابت! نوصي بإنشاء صفحة لثلاثة من التخطيطات المضمنة في حزمة تخطيط Health Clinic. واحد لكل مثال. افتح الصفحة التي تريد إضافة شريط التذييل الأول إليها. قم بالتمرير لأسفل إلى نهاية الصفحة وأضف قسمًا جديدًا بعد القسم الأخير مباشرةً.

تباعد

افتح إعدادات الصف وقم بإزالة جميع المساحة المتروكة العلوية والسفلية المخصصة في إعدادات التباعد.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

الرؤية

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

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وقم بتعديل إعدادات التحجيم.

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية للصف التالي.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

لغة تنسيق ويب حسب الطلب

أخيرًا ، نضيف بعض خطوط CSS المخصصة إلى الصف. ستساعد هذه الأسطر في تحويل الصف إلى شريط تذييل ثابت.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

أضف وحدة نصية إلى العمود 1

إضافة محتوى

حان الوقت لبدء إضافة الوحدات! الوحدة الأولى التي نحتاجها هي وحدة نصية في العمود 1. أضف بعض المحتوى الذي تختاره.

لون الخلفية

انتقل إلى إعدادات الخلفية للوحدة وقم بتغيير لون الخلفية.

• لون الخلفية: # 5e89fb

إعدادات النص

قم بتعديل إعدادات النص أيضًا.

• خط النص: Work Sans
• وزن خط النص: خفيف
• لون النص: #ffffff
• حجم النص: 16 بكسل
• تباعد حروف النص: -1 بكسل

تباعد

أضف بعض قيم الحشو المخصصة بعد ذلك.

• الحشوة العلوية: 16 بكسل
• الحشو السفلي: 16 بكسل
• الحشوة اليسرى: 15 بكسل
• الحشوة اليمنى: 15 بكسل

الحدود

وبعض الزوايا الدائرية أيضًا.

• أعلى اليسار: 10 بكسل
• أعلى اليمين: 10 بكسل

مربع الظل

أكمل إعدادات الوحدة بإضافة ظل مربع دقيق.

• مربع قوة طمس الظل: 80 بكسل

أضف الوحدة النمطية للدعاية إلى العمود 2

إضافة محتوى

أضف وحدة Blurb Module إلى العمود الثاني وأضف عنوانًا للاختيار.

حدد أيقونة

تابع عن طريق تحديد رمز للوحدة النمطية Blurb.

لون الخلفية

أضف لون الخلفية إلى الوحدة أيضًا.

• لون الخلفية: # 62de9d

إعدادات الرمز

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات الرمز.

• لون الأيقونة: #ffffff
• وضع الرمز: اليسار
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 19 بكسل

إعدادات نص العنوان

تابع عن طريق تعديل إعدادات نص العنوان.

• خط العنوان: Work Sans
• لون نص العنوان: #ffffff
• حجم نص العنوان: 16 بكسل
• تباعد حرف العنوان: -1 بكسل

تباعد

أضف بعض الحشو المخصص للوحدة أيضًا.

• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 10 بكسل
• الحشوة اليسرى: 30 بكسل
• الحشو الأيمن: 30 بكسل

الحدود

وأضف "10 بكسل" إلى الزاويتين العلويتين اليسرى واليمنى.

• أعلى اليسار: 10 بكسل
• أعلى اليمين: 10 بكسل

مربع الظل

أخيرًا وليس آخرًا ، أضف ظل مربع دقيقًا إلى الوحدة النمطية.

• مربع قوة طمس الظل: 80 بكسل

أعد إنشاء المثال رقم 2

إضافة قسم جديد إلى أسفل الصفحة

إلى المثال الثاني! مرة أخرى ، افتح صفحة من اختيارك ، وانتقل لأسفل إلى نهاية الصفحة وأضف قسمًا جديدًا.

تباعد

افتح إعدادات القسم وقم بإزالة المساحة المتروكة العلوية والسفلية الافتراضية.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

الرؤية

إخفاء القسم الموجود على سطح المكتب (والجهاز اللوحي إذا كنت تفضل ذلك).

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات نمطية ، افتح إعدادات الصف وقم بتغيير إعدادات التحجيم.

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

قم بإزالة المساحة المتروكة الافتراضية العلوية والسفلية للصف أيضًا.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

لغة تنسيق ويب حسب الطلب

أضف بعض سطور css المخصصة إلى الصف التالي. ستساعد سطور كود CSS هذه في إنشاء شريط تذييل الهاتف الثابت.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

أضف الوحدة النمطية للدعاية إلى العمود 1

إضافة محتوى

تابع عن طريق إضافة Blurb Module إلى العمود الأول. أضف عنوان الاختيار.

حدد أيقونة

ثم حدد رمزًا.

لون الخلفية

أضف لون الخلفية إلى الوحدة التالية.

• لون الخلفية: # 62de9d

إعدادات الرمز

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات رمز الوحدة.

• لون الأيقونة: #ffffff
• وضع الرمز: الأعلى
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 25 بكسل

إعدادات نص العنوان

قم بالتغيير حول إعدادات نص العنوان أيضًا.

• خط العنوان: Work Sans
• محاذاة نص العنوان: الوسط
• لون نص العنوان: #ffffff
• تباعد حرف العنوان: -1 بكسل

تباعد

وأضف بعض الحشو العلوي والسفلي لمنح الوحدة بعض المساحة للتنفس.

• الحشوة العلوية: 30 بكسل
• الحشو السفلي: 30 بكسل

الحدود

نضيف أيضًا "15 بكسل" إلى الحد الأيسر العلوي للوحدة النمطية.

• أعلى اليسار: 15 بكسل

مربع الظل

وسنكمل الوحدة بظل مربع دقيق.

• مربع قوة طمس الظل: 80 بكسل

استنساخ وحدة Blurb مرتين ووضع التكرارات في الأعمدة المتبقية

بمجرد الانتهاء من تعديل أول وحدة Blurb Module ، يمكنك المضي قدمًا واستنساخ الوحدة مرتين ووضع التكرارات في العمودين المتبقيين.

تغيير لون خلفية تكرار # 1

قم بتغيير لون الخلفية لأول نسخة مكررة.

• لون الخلفية: # 3d3d3d

تغيير إعدادات التباعد من Duplicate # 1

جنبا إلى جنب مع إعدادات التباعد.

• الهامش العلوي: -20 بكسل
• الحشوة العلوية: 50 بكسل
• الحشو السفلي: 30 بكسل

تغيير حدود تكرار # 1

والزوايا المستديرة كذلك.

تغيير لون خلفية تكرار # 2

قم بتغيير لون الخلفية للنسخة الثانية في العمود الثالث أيضًا.

• لون الخلفية: # 000000

تغيير حدود تكرار # 2

جنبا إلى جنب مع الزوايا الدائرية.

• أعلى اليمين: 15 بكسل

أعد إنشاء المثال رقم 3

إضافة قسم جديد إلى أسفل الصفحة

إلى المثال التالي والأخير! افتح إحدى الصفحات ، وانتقل إلى أسفل الصفحة وأضف قسمًا جديدًا.

أعلى الحاجز

افتح إعدادات القسم وأضف حاجزًا علويًا.

• لون الفاصل: # 62de9d
• ارتفاع الحاجز: 110 بكسل

تباعد

قم بإزالة جميع الحشو الافتراضي العلوي والسفلي للقسم أيضًا.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

مربع الظل

أضف ظل مربع دقيق إلى القسم التالي.

• مربع قوة طمس الظل: 80 بكسل

لغة تنسيق ويب حسب الطلب

وقم بتضمين بعض خطوط CSS المخصصة في علامة التبويب خيارات متقدمة. سيساعد هذا في تحويل القسم إلى شريط تذييل متنقل ثابت.

position:fixed;
bottom:0px;
width: 100%;
z-index: 99;

الرؤية

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

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وقم بتغيير إعدادات التحجيم.

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

أضف بعض المساحة المتروكة العلوية والسفلية المخصصة بعد ذلك.

• الحشوة العلوية: 30 بكسل
• الحشو السفلي: 20 بكسل

لغة تنسيق ويب حسب الطلب

للتأكد من بقاء جميع الأعمدة الثلاثة على نفس الارتفاع ، سنضيف سطرًا من كود CSS إلى علامة التبويب المتقدمة للصف أيضًا.

display: flex;

أضف الوحدة النمطية للدعاية إلى العمود 1

إضافة محتوى

الآن يمكننا البدء في إضافة وحدات! أضف وحدة Blurb Module إلى العمود الأول وأعطها عنوانًا.

حدد أيقونة

حدد رمزًا بعد ذلك.

إعدادات الرمز

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات الرمز.

• لون الأيقونة: #ffffff
• وضع الرمز: الأعلى
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 25 بكسل

إعدادات نص العنوان

قم بتعديل إعدادات نص العنوان أيضًا.

• خط العنوان: Work Sans
• اتجاه نص العنوان: المركز
• تباعد حرف العنوان: -1 بكسل

استنساخ وحدة Blurb مرتين ومكان

بمجرد الانتهاء من تعديل Blurb Module في العمود 1 ، يمكنك المضي قدمًا واستنساخ الوحدة مرتين. ضع التكرارات في العمودين المتبقيين.

تغيير لون رمز تكرار # 1

لا تنس تغيير لون رمز النسخة المكررة الموجود في العمود الثاني.

• لون الأيقونة: # 000000

معاينة

الآن وقد مررنا بجميع الخطوات المختلفة ، فلنلق نظرة أخيرة على نتيجة جميع الأمثلة الثلاثة التي تناولناها أعلاه.

افكار اخيرة

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