يمكن أن تكون أشرطة التذييل الثابتة طريقة ملائمة للاحتفاظ بالمعلومات المهمة على موقع انترنت في المقدمة عندما يتفاعل المستخدم مع محتوى صفحتك على أي جهاز.
كما هو الحال مع Divi ، يوجد عادةً شريط التذييل كعنصر ثابت في أسفل الصفحة بعد محتوى التذييل الرئيسي. وهي تتضمن أشياء مثل نص حقوق النشر ورموز الوسائط الاجتماعية
ولكن إذا لم تخفي محتوى شريط التذييل في أسفل الصفحة ، فيمكنك إنشاء شريط تذييل مخصص يطفو في أسفل الشاشة أثناء قيام المستخدم بالتمرير.
في هذا البرنامج التعليمي ، سنقوم بتصميم شريط تذييل ثابت مخصص بالكامل باستخدام منشئ سمات Divi. سيكون هذا مفيدًا لك للحفاظ على تلك الأجزاء الصغيرة والمهمة من المحتوى في الأفق في جميع الأوقات.
النتيجة المحتملة
فيما يلي نظرة عامة على شريط التذييل الثابت الذي سنقوم بتصميمه.
كيفية إضافة قالب شريط تذييل ثابت للتنزيل على موقع Divi الخاص بك
تحذير!: ستؤدي إضافة هذا النموذج إلى استبدال ملف قالب الموقع بشكل افتراضي (إذا كان لديك واحد) على موقع Divi الخاص بك. نقترح إضافته إلى موقع اختبار حتى لا تفسد أي شيء على موقع مباشر.
لاستيراد قالب شريط التذييل الثابت بنفسك موقع انترنت، قم بفك ضغط ملف zip للتنزيل للوصول إلى ملف JSON.
ثم انتقل إلى لوحة معلومات WordPress وانتقل إلى Divi> Theme Builder.
ثم انقر فوق رمز قابلية النقل في الجزء العلوي الأيمن من الصفحة.
في نافذة قابلية النقل ، اختر ملف JSON الذي قمت بفك ضغطه للتو وحدد خيار "تنزيل النسخة الاحتياطية قبل الاستيراد" ، فقط في حالة وجود شيء ما في السابق في قالب الموقع الافتراضي الذي لا تريد تجاوزه.
ثم انقر فوق الزر استيراد.
أخيرًا ، احفظ التغييرات في منشئ السمة واعرض صفحة مباشرة لرؤية شريط التذييل الثابت.
الآن إلى البرنامج التعليمي ، حسنًا؟
الجزء 1: إضافة تذييل عمومي
يتيح لك منشئ سمات Divi استبدال التذييل الافتراضي بآخر جديد عن طريق تحديث ملف قالب الموقع افتراضي.
لإنشاء تذييل عام ، انتقل إلى لوحة معلومات WordPress وانتقل إلى Divi> Theme Builder. ثم انقر فوق مساحة "إضافة تذييل عام" داخل نموذج موقع الويب الافتراضي.
ثم حدد خيار "إنشاء تذييل مخصص" من القائمة المنسدلة.
سيؤدي هذا إلى نشر محرر تخطيط النموذج حيث ستتم مطالبتك على الفور بالاختيارات الثلاثة لكيفية بدء البناء. حدد "بناء من الصفر".
الجزء 2: إنشاء شريط تذييل ثابت
الآن بعد أن قمنا بالتحرير من محرر تخطيط القالب ، يمكننا البدء في تصميم شريط التذييل الثابت. بمجرد الانتهاء من ذلك ، سيكون لديك شريط تذييل ثابت بثلاثة أعمدة جاهزة للمحتوى.
أضف تخطيطًا ثلاثي الأعمدة إلى الخط
أولاً ، أضف تخطيطًا من ثلاثة أعمدة إلى الصف.
ارتفاع المقطع
بمجرد إضافة الأعمدة الثلاثة ، دعنا نحدد ارتفاعًا محددًا للقسم. هذا مهم لخلق مساحة أسفل الصفحة حيث سينتهي الخط الأرضي في النهاية. سنقوم أيضًا بإزالة الحشوة الافتراضية العلوية والسفلية.
لضبط الارتفاع والحشو ، افتح إعدادات القسم وقم بتحديث ما يلي:
- الارتفاع: 85px
- الحشو: 0px عالية ، 0px منخفضة
إعدادات الخط
الآن وقد أصبح قسمنا جاهزًا ، نحن على استعداد لتخصيص الصف ليكون بمثابة شريط تذييل ثابت. افتح إعدادات الصف ، ثم قم بتحديث ما يلي:
السياق
- لون الخلفية: # 1a1e36
الحجم والتباعد
- عرض مزراب: 1
- العرض: 100٪
- أقصى عرض: 100 ٪
- المساحة المتروكة: 0 بكسل لأعلى ، 0 بكسل للأسفل ، 3٪ لليسار ، 3٪ لليمين
عرف المغلق
على الرغم من أن الصف ثابت ، إلا أننا نريد أن يتطابق ارتفاع الصف مع ارتفاع القسم الأصلي بحيث تحتوي المساحة الموجودة أسفل الصفحة على الصف بشكل صحيح. ونريد التأكد من أن محتويات الصف تظل محاذاة رأسيًا. للقيام بذلك ، أضف CSS المخصص التالي إلى العنصر الرئيسي للصف:
مكتب
الارتفاع: ترث! مهم ؛ العرض: مرن ؛ محاذاة العناصر: مركز ؛
الهاتف
الإرتفاع: يرث! مهم ؛ العرض: كتلة ؛
تحديد المواقع الثابتة
لجعل الخط ثابتًا بحيث يطفو في الجزء السفلي من الشاشة ، نحتاج إلى منحه موضعًا ثابتًا في الموقع المركزي السفلي على النحو التالي:
- المنصب: ثابت
- الموقع: الوسط السفلي
الجزء 2: إنشاء محتوى شريط التذييل الثابت
في هذه المرحلة ، لدينا شريط تذييل ثابت جاهز للمحتوى. يمكننا إضافة أي محتوى نريده إلى كل عمود من الأعمدة الثلاثة. ولكن نظرًا لأن هذا "شريط" في التذييل يقتصر ارتفاعه على 85 بكسل ، فنحن بحاجة إلى الحد من كمية المحتوى. لهذا السبب سنضيف قائمة صغيرة بشعار ديناميكي و 4 عناصر قائمة في العمود 1. في العمود 2 سنضيف نص حقوق التأليف والنشر مع السنة الحالية الديناميكية. في العمود 3 ، سنضيف ثلاثة رموز لتتبع الوسائط الاجتماعية.
أضف قائمة إلى العمود 1
في العمود 1 ، أضف وحدة قائمة.
اختر القائمة
ثم حدد إحدى القوائم التي قمت بإنشائها بالفعل على جهازك موقع انترنت. تأكد من إبقاء عناصر القائمة عند 4 أو أقل.
أضف شعار الموقع كمحتوى ديناميكي
بالنسبة لقائمة الشعار ، سنضيف شعار الموقع ديناميكيًا. انقر فوق رمز "استخدام المحتوى الديناميكي" أثناء التمرير فوق منطقة معاينة الشعار. ثم حدد شعار الموقع من القائمة المنسدلة.
إزالة الخلفية
ثم قم بإزالة خلفية القائمة الافتراضية بحيث تكون شفافة.
تصميم القائمة
في هذه المرحلة ، نحن جاهزون لإضافة بعض التصميم إلى القائمة. بالنسبة لهذا التصميم ، سنبقيه بسيطًا وصغيرًا. قم بتحديث معلمات التصميم التالية:
- قائمة الخطوط: ممر علوي
- لون نص القائمة: # b59c61
- صورة بني داكن: 100٪
- أقصى ارتفاع للشعار: 50 بكسل
أضف نص حقوق النشر إلى العمود 2
بمجرد وضع القائمة ، انتقل إلى العمود 2 لإضافة نص حقوق النشر.
أضف وحدة نصية
أضف وحدة نصية جديدة إلى العمود 2.
إضافة التاريخ الحالي بشكل ديناميكي قبل النص وبعده
نحن هنا في طريقنا إلى الإبداع مع المحتوى الديناميكي لعرض العام الحالي في نص حقوق النشر. سيضمن ذلك تحديث العام تلقائيًا طوال عمر الموقع.
للقيام بذلك ، انقر فوق رمز "استخدام المحتوى الديناميكي" وحدد "التاريخ الحالي" من القائمة.
في النافذة المنبثقة للتاريخ الحالي ، قم بتحديث ما يلي:
- من قبل:
- 01
Copyright ©
- بعد:
- 01
| Tous Droits Reservés
- تنسيق التاريخ : مخصص
- تنسيق التاريخ المخصص : سنوات 20
تنسيق النص
تحديث تصميم النص والهامش كما يلي:
- خط النص: ممر علوي
- لون النص: # b59c61
- محاذاة النص: المركز
- الهامش (الهاتف فقط): 10 بكسل في الأعلى ، 10 بكسل في الأسفل
هذا يدعم نص حقوق النشر.
أضف أيقونات تتبع وسائل التواصل الاجتماعي إلى العمود 3
في العمود 3 ، أضف وحدة تتبع وسائل التواصل الاجتماعي.
إضافة الشبكات الاجتماعية
في علامة التبويب "المحتوى" ، أضف الشبكات الاجتماعية الضرورية إلى الموقع. لهذا التصميم ، نستخدم ثلاثة منهم.
إعدادات تتبع وسائل التواصل الاجتماعي
بعد ذلك ، قم بتحديث إعدادات التصميم لجميع أيقونات تتبع وسائل التواصل الاجتماعي على النحو التالي:
- محاذاة الوحدة: مستقيم (سطح المكتب والكمبيوتر اللوحي) ، المركز (الهاتف)
- لون الأيقونة: # 1a1e36
- استخدام حجم رمز مخصص: نعم
- حجم خط الرمز: 16 بكسل (سطح المكتب والجهاز اللوحي) ، 14 بكسل (الهاتف)
تحديث إعدادات الوسائط الاجتماعية
لتحديث تصميم أيقونة الشبكة الاجتماعية الفردية ، افتح إعدادات الشبكة الأولى وقم بتحديث ما يلي:
- لون الخلفية: #ffffff
- المساحة: 8 بكسل على اليمين ، 8 بكسل على اليسار
- زوايا مدورة: 8px
توسيع إعدادات الوسائط الاجتماعية للجميع
ثم افتح قائمة الإعدادات الإضافية للشبكة الأولى وحدد " توسيع أنماط العنصر "في القائمة. في نافذة Extend Styles المنبثقة ، اختر Extend Styles in " هذا العمود وانقر قم بتوسيع .
سيؤدي هذا إلى توسيع التصميم إلى بقية الرموز في العمود.
الأفكار النهائية
تعد إضافة شريط تذييل ثابت أمرًا منطقيًا في بعض الحالات. ارتفاع الشريط صغير بما يكفي لعدم تشتيت الانتباه أو شغل مساحة كبيرة على الهاتف المحمول. ويمنحك القدرة على إضافة عبارات CTA مهمة من أجل تحويلات أفضل وتجربة مستخدم أكثر سلاسة.
بالنسبة لهذا التصميم ، يتم إنشاء المساحة الموجودة أسفل الصفحة عن طريق تعيين ارتفاع ثابت للقسم ثم السماح للخط الثابت أن يرث ارتفاع القسم (على الرغم من أنه ثابت).
مصادر أخرى
وفيما يلي قائمة RESSOURCES إضافية يمكن أن تساعدك في إنشاء تصميم موقع الويب الخاص بك باستخدام Divi.