كيفية إنشاء شريط تذييل ثابت لموضوع Divi الخاص بك

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

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

هيا بنا نبدأ.

نظرة خاطفة

فيما يلي نظرة سريعة على شريط التذييل الثابت الذي سنقوم بتصميمه.

قم بتنزيل Layout مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

كيفية إضافة تنزيل قالب شريط التذييل الثابت إلى موقع Divi الخاص بك

تحذير!: ستؤدي إضافة هذا القالب إلى تجاوز قالب موقع الويب الافتراضي (إذا كان لديك واحدًا) على موقع Divi الخاص بك. نقترح إضافة هذا إلى موقع اختبار حتى لا تفسد أي شيء على موقع مباشر.

لاستيراد قالب شريط التذييل الثابت إلى موقع الويب الخاص بك ، قم بفك ضغط ملف zip للتنزيل للوصول إلى ملف JSON.

ثم انتقل إلى لوحة معلومات WordPress وانتقل إلى Divi> Theme Builder.

ثم انقر فوق رمز قابلية النقل في الجزء العلوي الأيمن من الصفحة.

داخل نافذة قابلية النقل المنبثقة ، اختر ملف JSON الذي قمت بفك ضغطه للتو وحدد الخيار "تنزيل نسخة احتياطية قبل الاستيراد" ، فقط في حالة وجود شيء ما في قالب موقع الويب الافتراضي سابقًا لم ترغب في تجاوزه.

ثم انقر فوق الزر "استيراد".

أخيرًا ، احفظ تغييرات Theme Builder واعرض صفحة مباشرة لرؤية شريط التذييل الثابت.

الآن ، دعنا ننتقل إلى البرنامج التعليمي ، أليس كذلك؟

الجزء 1: إضافة تذييل عمومي

يسمح لك Divi's Theme Builder باستبدال التذييل الافتراضي بآخر جديد عن طريق تحديث قالب موقع الويب الافتراضي.

لإنشاء تذييل عام ، انتقل إلى لوحة معلومات WordPress وانتقل إلى Divi> Theme Builder. ثم انقر فوق مساحة "إضافة تذييل عام" داخل نموذج موقع الويب الافتراضي.

ثم حدد الخيار "إنشاء تذييل عام" من القائمة المنسدلة.

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

الجزء 2: إنشاء شريط التذييل الثابت

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

أضف تخطيط ثلاثي الأعمدة إلى الصف

أولاً ، أضف تخطيطًا من ثلاثة أعمدة إلى الصف.

ارتفاع القسم

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

لتعيين الارتفاع والحشو ، افتح إعدادات القسم وقم بتحديث ما يلي:

• الارتفاع: 85 بكسل
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

إعدادات الصف

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

خلفية

• لون الخلفية: # 1a1e36

الحجم والتباعد

• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪
• المساحة المتروكة: 0 بكسل للأعلى ، 0 بكسل للأسفل ، 3٪ يسار ، 3٪ يمين

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

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

سطح المكتب

height: inherit !important;
display:flex;
align-items: center;

هاتف

height: inherit !important;
display:block;

تحديد المواقع الثابتة

لجعل الصف ثابتًا بحيث يطفو في أسفل الشاشة ، نحتاج إلى إعطائه موضعًا ثابتًا في أسفل الموقع المركزي على النحو التالي:

• المركز: ثابت
• الموقع: مركز القاع

الجزء 2: إنشاء محتوى شريط التذييل الثابت

في هذه المرحلة ، لدينا شريط تذييل في الموضع الثابت جاهز للمحتوى. يمكننا إضافة أي محتوى نريده إلى كل عمود من الأعمدة الثلاثة. ولكن نظرًا لأن هذا "شريط" في التذييل بارتفاع محدود يبلغ 85 بكسل ، فنحن بحاجة إلى الحد من كمية المحتوى. لهذا السبب ، سنضيف قائمة صغيرة بشعار ديناميكي و 4 عناصر قائمة في العمود 1. في العمود 2 ، سنضيف نص حقوق التأليف والنشر مع السنة الحالية الديناميكية. في العمود 3 ، سنضيف ثلاثة أيقونات متابعة لوسائل التواصل الاجتماعي.

إضافة قائمة إلى العمود 1

في العمود 1 ، أضف وحدة قائمة.

اختر قائمة

ثم حدد إحدى القوائم التي قمت بإنشائها بالفعل على موقع الويب الخاص بك. تأكد من الاحتفاظ بعناصر القائمة عند 4 أو أقل.

أضف شعار الموقع كمحتوى ديناميكي

بالنسبة لقائمة الشعار ، سنضيف شعار الموقع ديناميكيًا. انقر فوق رمز "استخدام المحتوى الديناميكي" أثناء التمرير فوق منطقة معاينة الشعار. ثم حدد شعار الموقع من القائمة المنسدلة.

إزالة الخلفية

ثم قم بإزالة الخلفية الافتراضية من القائمة بحيث تكون شفافة.

تصميم القائمة

في هذه المرحلة ، نحن جاهزون لإضافة تصميم إلى القائمة. بالنسبة لهذا التصميم ، سنبقيه بسيطًا وصغيرًا. قم بتحديث إعدادات التصميم التالية:

• خط القائمة: تجاوز
• لون نص القائمة: # b59c61
• صورة بني داكن: 100٪
• أقصى ارتفاع للشعار: 50 بكسل

أضف نص حقوق النشر إلى العمود 2

بمجرد وضع القائمة ، انتقل إلى العمود 2 لإضافة نص حقوق النشر.

أضف وحدة نصية

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

أضف التاريخ الحالي ديناميكيًا مع قبل النص وبعده

نحن هنا في طريقنا إلى الإبداع مع المحتوى الديناميكي لعرض العام الحالي ضمن نص حقوق النشر. سيؤدي هذا إلى التأكد من تحديث العام تلقائيًا طوال عمر الموقع.

للقيام بذلك ، انقر فوق رمز "استخدام المحتوى الديناميكي" وحدد "التاريخ الحالي" من القائمة.

في نافذة التاريخ الحالي المنبثقة ، قم بتحديث ما يلي:

• قبل:

• Copyright ©

• بعد، بعدما:

•  | All Rights Reserved

• تنسيق التاريخ : مخصص
• تنسيق التاريخ المخصص : 20y

تصميم نصي

يتم تحديث تصميم النص والهامش كالتالي:

• خط النص: ممر علوي
• لون نص النص: # b59c61
• محاذاة النص: مركز
• الهامش (الهاتف فقط): 10 بكسل للأعلى و 10 بكسل للأسفل

هذا يعتني بنص حقوق التأليف والنشر.

إضافة وسائل التواصل الاجتماعي ، اتبع الأيقونات إلى العمود 3

في العمود 3 ، أضف وحدة متابعة لوسائل التواصل الاجتماعي.

أضف الشبكات الاجتماعية

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

وسائل التواصل الاجتماعي اتبع الإعدادات

ثم قم بتحديث إعدادات التصميم لجميع وسائل التواصل الاجتماعي اتبع الأيقونات على النحو التالي:

• محاذاة الوحدة: يمين (سطح مكتب وجهاز لوحي) ، مركز (هاتف)
• لون الأيقونة: # 1a1e36
• استخدام حجم رمز مخصص: نعم
• حجم خط الرمز: 16 بكسل (سطح المكتب والجهاز اللوحي) ، 14 بكسل (الهاتف)

تحديث إعدادات الشبكة الاجتماعية

لتحديث تصميم أيقونة الشبكة الاجتماعية الفردية ، افتح إعدادات الشبكة الأولى وقم بتحديث ما يلي:

• لون الخلفية: #ffffff
• المساحة المتروكة: 8 بكسل لليمين و 8 بكسل لليسار
• الزوايا الدائرية: 8 بكسل

توسيع إعدادات الشبكة الاجتماعية للجميع

ثم افتح قائمة المزيد من الإعدادات للشبكة الأولى وحدد " Extend Item Styles " من القائمة. في نافذة الأنماط المنبثقة ، اختر تمديد الأنماط عبر " هذا العمود " وانقر فوق توسيع .

سيؤدي هذا إلى توسيع التصميم إلى بقية الرموز الموجودة في العمود.

قم بتعطيل العمود 1 / القائمة على الجهاز اللوحي والهاتف

من أجل جعل شريط التذييل مناسبًا للجوّال ، نحتاج إلى تعطيل أحد أعمدةنا بمحتواه على الجهاز اللوحي وشاشة الهاتف. في هذا المثال ، سنقوم بتعطيل عرض القائمة عن طريق تعطيل العمود 1 على الهاتف والجهاز اللوحي على النحو التالي:

حفظ النتائج

تأكد من حفظ التخطيط قبل الخروج من محرر التخطيط.

ثم تأكد أيضًا من حفظ التغييرات الخاصة بـ Divi Theme Builder.

النتيجة النهائية

لعرض النتيجة ، اسحب صفحة مباشرة على موقعك. هذا هو الشكل الذي تبدو عليه الصفحة باستخدام Event Layout Pack.

شاهد كيف يظل التذييل ثابتًا حتى يستقر داخل القسم أسفل الصفحة.

افكار اخيرة

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

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

آمل أن يكون في متناول اليد.

أتطلع إلى الاستماع منك في التعليقات.

هتافات!