كيفية إنشاء شريط تذييل مثبت بخيارات ديفي اللاصقة

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

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

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

قم بتنزيل قالب التذييل العالمي مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. إنشاء قالب تذييل جديد

انتقل إلى Divi Theme Builder وأضف تذييلًا عالميًا أو مخصصًا جديدًا

ابدأ بالانتقال إلى Divi Theme Builder في الواجهة الخلفية لموقع WordPress الخاص بك. هناك ، أضف تذييلًا عامًا أو مخصصًا جديدًا.

ابدأ البناء من الصفر

ابدأ في بناء قالب التذييل من البداية.

2. بناء تصميم تذييل

إعدادات القسم

لون الخلفية

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

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

أضف الصف رقم 1

هيكل العمود

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

لون الخلفية

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

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

تحجيم

انتقل إلى علامة تبويب تصميم الصف وقم بتغيير إعدادات الحجم بعد ذلك.

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 90٪
• العرض الأقصى: 2580 بكسل
• محاذاة الصف: الوسط

تباعد

أضف بعض المساحة المتروكة العلوية والسفلية المخصصة على أحجام الشاشات الأصغر أيضًا.

• الحشوة العلوية: 5 بكسل (الجهاز اللوحي والهاتف فقط)
• الحشوة السفلية: 5 بكسل (الجهاز اللوحي والهاتف فقط)

الحدود

بعد ذلك ، أضف بعض الزوايا الدائرية سريعة الاستجابة إلى إعدادات الحدود.

• كل الزوايا:
  • سطح المكتب: 30 بكسل
  • الجهاز اللوحي والهاتف: 15 بكسل

فيضانات

وللتأكد من أنه يمكننا إنشاء تداخلات لاحقًا في البرنامج التعليمي ، سنقوم بتعيين تجاوز الصفوف ليكون مرئيًا.

• الفائض الأفقي: مرئي
• التدفق العمودي: مرئي

العمود 1 و 3 الرؤية

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

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

إضافة محتوى

حان الوقت لإضافة الوحدات ، بدءًا من الوحدة النمطية Blurb في العمود 1. أضف بعض المحتوى الذي تختاره.

حدد أيقونة

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

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

انتقل إلى علامة تبويب تصميم الوحدة وقم بتصميم الرمز وفقًا لذلك:

• لون الأيقونة: # f5d72e
• رمز الدائرة: نعم
• لون الدائرة: # 000000
• وضع الصورة / الرمز: علوي
• محاذاة الصورة / الرمز: الوسط
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 32 بكسل

إعدادات النص

بعد ذلك ، قم بتغيير إعدادات النص.

• محاذاة النص: الوسط
• لون النص: فاتح

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

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

• خط العنوان: بوبينز
• لون نص العنوان: # 000000

إعدادات النص الأساسي

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

• خط الجسم: بوبينز
• وزن خط الجسم: عريض للغاية
• حجم النص الأساسي: 20 بكسل

تحجيم

ضع عرض المحتوى على "100٪" في إعدادات التحجيم التالية.

• عرض المحتوى: 100٪

تباعد

لإنشاء تداخل ، أضف بعض الهامش العلوي السلبي إلى إعدادات التباعد.

• الهامش العلوي: -60 بكسل

حيوية

وأكمل إعدادات الوحدة عن طريق إزالة رمز الرسوم المتحركة في إعدادات الرسوم المتحركة.

• صورة / أيقونة متحركة: لا توجد رسوم متحركة

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

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

تغيير المحتوى والأيقونة

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

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

حدد أيقونة

بعد ذلك ، أضف وحدة Blurb Module جديدة إلى العمود 2. اترك مربع المحتوى فارغًا وحدد رمزًا من اختيارك.

لون الخلفية

أضف لون الخلفية بعد ذلك.

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

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

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات الرمز وفقًا لذلك:

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

تحجيم

قم بإجراء بعض التغييرات على إعدادات التحجيم بعد ذلك.

• العرض: 70 بكسل
• محاذاة الوحدة: المركز
• الارتفاع: 40 بكسل

تباعد

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

• الهامش العلوي: -20 بكسل (الجهاز اللوحي والهاتف فقط)
• الحشوة العلوية: 5 بكسل
• الحشو السفلي: 0 بكسل

الحدود

بعد ذلك ، أضف بعض الزوايا الدائرية إلى إعدادات الحدود.

• جميع الزوايا: 10 بكسل

حيوية

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

• صورة / أيقونة متحركة: لا توجد رسوم متحركة

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

إضافة محتوى

الوحدة التالية والأخيرة التي نحتاجها في هذا الصف هي وحدة نصية في العمود 2. أضف بعض المحتوى الذي تختاره.

إعدادات النص

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

• وزن خط النص: شبه عريض
• حجم النص: 18 بكسل
• ارتفاع خط النص: 1.8em
• محاذاة النص: الوسط

أضف الصف رقم 2

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 2
• العرض الأقصى: 2580 بكسل

تباعد

أضف بعض الهامش العلوي والسفلي بعد ذلك.

• الهامش الأعلى: 50 بكسل
• الهامش السفلي: 50 بكسل

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

تحميل الصور

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

تحجيم

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات التحجيم كما يلي:

• العرض: 59٪
• محاذاة الوحدة: يسار

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

أضف محتوى H3

بعد ذلك ، أضف وحدة نصية إلى العمود 2 مع بعض محتوى H3 من اختيارك.

إعدادات نص H3

قم بتغيير إعدادات نص H3 للوحدة كما يلي:

• خط العنوان 3: بوبينز
• وزن خط العنوان 3: غامق
• لون نص العنوان 3: # 6d6d6d

استنساخ وحدة النص 3x وانتشار عبر العمود 3 و 4

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

تغيير المحتوى

تأكد من تغيير المحتوى في كل وحدة نصية مكررة.

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

إضافة محتوى

أضف وحدة نص أخرى أسفل وحدة النص السابقة في العمود 2 وأضف بعض المحتوى المرتبط من اختيارك.

إعدادات النص

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

• خط النص: بوبينز
• حجم النص: 30 بكسل
• ارتفاع خط النص: 1em
• محاذاة النص: يسار
• لون النص: فاتح

إعدادات نص الارتباط

تغيير لون نص الارتباط أيضا.

• لون نص الرابط: #ffffff

وحدة استنساخ النص حسب الحاجة

بمجرد الانتهاء من وحدة النص ، قم بنسخها عدة مرات كما تريد.

تغيير المحتوى

تأكد من تغيير المحتوى والروابط في كل وحدة مكررة.

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

إضافة محتوى

بعد ذلك ، أضف وحدة نصية أخرى إلى العمود 3. أضف بعض المحتوى المرتبط من اختيارك.

إعدادات النص

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

• خط النص: بوبينز
• حجم النص: 22 بكسل
• ارتفاع خط النص: 1em
• محاذاة النص: يسار
• لون النص: فاتح

إعدادات نص الارتباط

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

• لون نص الرابط: # ea6c01

استنساخ وحدة النص حسب الحاجة

استنساخ هذه الوحدة عدة مرات حسب حاجتك.

تغيير المحتوى

وبالطبع ، قم بتغيير المحتوى والروابط حسب الحاجة.

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: بوبينز
• حجم النص: 16 بكسل
• ارتفاع خط النص: 1.8em
• محاذاة النص: يسار
• لون النص: فاتح

أضف وسائل التواصل الاجتماعي ، اتبع العمود 4

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

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

قم بإزالة لون الخلفية لكل شبكة اجتماعية على حدة

قم بإزالة لون الخلفية لكل شبكة اجتماعية على حدة.

تباعد

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

• الهامش العلوي: -15 بكسل
• الهامش الأيسر: -8 بكسل

أضف الصف رقم 3

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 2
• معادلة ارتفاعات العمود: نعم
• العرض الأقصى: 2580 بكسل

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

إضافة محتوى

بعد ذلك ، أضف "وحدة نصية" إلى العمود 1. أدخل بعض المحتوى الذي تختاره.

إعدادات النص

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

• خط النص: بوبينز
• لون النص: # 595959
• حجم النص: 13 بكسل
• محاذاة النص: الوسط

إعدادات نص الارتباط

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

• لون نص الرابط: # 595959

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

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

تغيير توافقات النص

قم بتغيير محاذاة النص لكل وحدة نص مكررة وفقًا لذلك:

• وحدة النص في العمود 2:
  • سطح المكتب: المركز
  • الجهاز اللوحي والهاتف: يسار

• وحدة النص في العمود 3:
  • سطح المكتب: صحيح
  • الجهاز اللوحي والهاتف: يسار

تغيير المحتوى

وقم بتغيير المحتوى في كلتا الوحدتين المكررتين أيضًا.

3. تطبيق التأثيرات اللاصقة على شريط التذييل

افتح الصف رقم 1 وقم بتطبيق الإعدادات الثابتة

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

• موقف مثبت: التمسك بالقاع
• تعويض القاع اللزج:
  • سطح المكتب: 50 بكسل
  • الجهاز اللوحي والهاتف: 20 بكسل

أنماط الصف اللزجة

لون الخلفية

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

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

تطبيق الأنماط اللاصقة على وحدات Blurb النمطية في العمود 1 و 3

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

بعد ذلك ، افتح وحدات Blurb Modules في العمودين 1 و 3 وأضف لون دائرة لزج.

• لون الدائرة اللزجة: # ea6c01

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

أضف لون نص عنوان ثابتًا أيضًا.

• لون نص العنوان الثابت: # ea6c01

تطبيق الأنماط اللاصقة على الوحدة النمطية Blurb في العمود 2

لون الخلفية

ثم افتح Blurb Module في العمود 2 وقم بتطبيق لون خلفية لاصق.

• لون الخلفية اللاصق: # ea6c01

4. حفظ جميع تغييرات منشئ القوالب والقوالب

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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