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

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

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل مخطط قسم Hero Bar Hero ذي الموضع المطلق مجانًا

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

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

تنزيل مجاني

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

تحميل

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

اشترك في قناتنا على اليوتيوب

لنبدأ في إعادة التكوين!

إضافة قسم جديد

خلفية متدرجة

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

• اللون 1: rgba (0،0،0،0.62)
• اللون 2: rgba (0،0،0،0.97)
• وضع التدرج فوق صورة الخلفية: نعم

الصورة الخلفية

قم بتحميل صورة خلفية من اختيارك بعد ذلك.

تباعد

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

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

فيضانات

نحن نخفي أيضًا فائض القسم.

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

أضف الصف رقم 1

هيكل العمود

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

تباعد

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

• الهامش الأعلى: 20٪
• الهامش السفلي: 20٪

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

أضف محتوى H1

حان الوقت لإضافة الوحدات ، بدءًا من الوحدة النصية الأولى التي تحتوي على بعض محتوى H1 من اختيارك.

إعدادات نص H1

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

• خط العنوان: Work Sans
• لون نص العنوان: #ffffff
• حجم نص العنوان:
  • سطح المكتب: 80 بكسل
  • الجهاز اللوحي: 50 بكسل
  • الهاتف: 40 بكسل
• تباعد حروف العنوان:
  • سطح المكتب: -4 بكسل
  • الجهاز اللوحي والهاتف: -2 بكسل

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: Open Sans
• لون النص: # a0a0a0

تحجيم

قم بتعديل إعدادات التحجيم أيضًا.

• عرض:
  • سطح المكتب: 68٪
  • الجهاز اللوحي والهاتف: 100٪

أضف وحدة الزر إلى العمود

أضف نسخة

آخر وحدة نحتاجها في هذا الصف هي وحدة الأزرار. قم بتضمين نسخة من اختيارك.

إضافة رابط

أضف رابط الزر.

• URL ارتباط الزر: #

إعدادات الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• لون نص الزر: #ffffff
• عرض حد الزر: 0 بكسل

• خط الزر: العمل بلا
• إظهار رمز الزر: نعم
• وضع رمز الزر: يسار

أضف الصف رقم 2

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• عرض:
  • سطح المكتب: 100٪
  • الجهاز اللوحي والهاتف: 80٪
• العرض الأقصى: 2560 بكسل

تباعد

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

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

مربع الظل

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

• مربع قوة طمس الظل: 80 بكسل
• قوة انتشار الظل المربع: 50 بكسل
• لون الظل: rgba (135،135،135،0.08)

موقع

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

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

إعدادات العمود 1

تباعد

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

• حشوة علوية: 3٪
• حشوة سفلية: 3٪
• الحشوة اليسرى: 3٪
• الحشوة اليمنى: 3٪

الحدود

نحن نستخدم بعض إعدادات الحدود سريعة الاستجابة لهذا العمود أيضًا.

• الحد العلوي:
  • عرض الحد العلوي: 5 بكسل
  • لون الحد العلوي:
    • الافتراضي: rgba (255،255،255،0)
    • تحوم: #ffffff
• الحد السفلي:
  • عرض الحد السفلي:
    • سطح المكتب والكمبيوتر اللوحي: 0 بكسل
    • الهاتف: 3 بكسل
  • لون الحد السفلي: rgba (255،255،255،0.11)
• الحد الأيسر:
  • عرض الحد الأيسر:
    • سطح المكتب: 0 بكسل
    • الجهاز اللوحي: 3 بكسل
    • الهاتف: 0 بكسل
  • لون الحد الأيسر: rgba (255،255،255،0.11)

إعدادات العمود 2

تباعد

إلى إعدادات العمود الثاني. أضف بعض قيم المساحة المتروكة إلى إعدادات التباعد.

• حشوة علوية: 3٪
• حشوة سفلية: 3٪
• الحشوة اليسرى: 3٪
• الحشوة اليمنى: 3٪

الحدود

وقم بتضمين الحدود سريعة الاستجابة التالية:

• الحد العلوي:
  • عرض الحد العلوي: 5 بكسل
  • لون الحد العلوي:
    • الافتراضي: rgba (255،255،255،0)
    • تحوم: #ffffff
• الحد السفلي:
  • عرض الحد السفلي:
    • سطح المكتب والكمبيوتر اللوحي: 0 بكسل
    • الهاتف: 3 بكسل
  • لون الحد السفلي: rgba (255،255،255،0.11)
• الحد الأيسر:
  • عرض الحد الأيسر:
    • سطح المكتب: 3 بكسل
    • الجهاز اللوحي: 3 بكسل
    • الهاتف: 0 بكسل
  • لون الحد الأيسر: rgba (255،255،255،0.11)

إعدادات العمود 3

تباعد

يحتاج العمود الثالث إلى قيم حشو مخصصة أيضًا.

• حشوة علوية: 3٪
• حشوة سفلية: 3٪
• الحشوة اليسرى: 3٪
• الحشوة اليمنى: 3٪

الحدود

جنبًا إلى جنب مع إعدادات الحدود التالية:

• الحد العلوي:
  • عرض الحد العلوي: 5 بكسل
  • لون الحد العلوي:
    • الافتراضي: rgba (255،255،255،0)
    • تحوم: #ffffff
• الحد الأيسر:
  • عرض الحد الأيسر:
    • سطح المكتب: 3 بكسل
    • الجهاز اللوحي: 3 بكسل
    • الهاتف: 0 بكسل
  • لون الحد الأيسر: rgba (255،255،255،0.11)

إعدادات العمود 4

لون الخلفية

إلى العمود الأخير. أضف لون خلفية بيضاء.

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

تباعد

تطبيق بعض قيم المساحة المتجاوبة المخصصة.

• الحشو العلوي
  • سطح المكتب: 3٪
  • الجهاز اللوحي: 3٪
  • الهاتف: 10٪
• الحشوة السفلية:
  • سطح المكتب: 3٪
  • الجهاز اللوحي: 3٪
  • الهاتف: 10٪
• الحشوة اليسرى:
  • سطح المكتب: 3٪
  • الجهاز اللوحي: 5٪
  • الهاتف: 10٪
• الحشوة اليمنى:
  • سطح المكتب: 3٪
  • الجهاز اللوحي: 5٪
  • الهاتف: 10٪

موقع

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

• موقع:
  • سطح المكتب: مطلق
  • الجهاز اللوحي والهاتف: افتراضي
• الموقع: أسفل اليمين

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

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

تغيير محاذاة الزر

افتح وحدة الأزرار المكررة وقم بتغيير المحاذاة.

• محاذاة الزر: الوسط

تغيير النسخ والارتباطات

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

زر استنساخ في العمود 1 مرتين ووضع التكرارات في العمود 2 و 3

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

تغيير النسخ والارتباطات

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

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

أضف محتوى H2

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

إعدادات نص H2

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

• خط العنوان 2: Work Sans
• لون نص العنوان 2: # 000000
• العنوان 2 تباعد الأحرف: -2 بكسل

تباعد

أضف بعض الهامش السفلي أيضًا.

• الهامش السفلي: 10٪

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

جعل الحقول بعرض كامل

بعد ذلك ، أضف وحدة نموذج جهة الاتصال أسفل وحدة النص مباشرةً. افتح حقلي الاسم وعنوان البريد الإلكتروني بشكل فردي وقم بتمكين خيار "Make Fullwidth" لكليهما.

• جعل العرض الكامل: نعم

إعدادات الحقول

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

• لون خلفية الحقول: #ffffff
• لون نص الحقول: # 000000
• تعبئة أعلى الحقول: 4٪
• تعبئة قاع الحقول: 4٪
• خط الحقول: Work Sans
• حجم نص الحقول: 13 بكسل

إعدادات نص Captcha

بعد ذلك ، قم بإجراء بعض التغييرات على إعدادات نص captcha.

• خط Captcha: Work Sans
• لون نص كلمة التحقق: # 000000

إعدادات الزر

نحن نصمم الزر أيضًا.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 17 بكسل
• لون نص الزر: #ffffff
• لون خلفية الزر: # 000000
• عرض حد الزر: 0 بكسل

• نصف قطر حدود الزر: 0 بكسل
• تباعد حرف الزر: -1 بكسل
• خط الزر: العمل بلا

الحدود

وأخيرًا وليس آخرًا ، سنقوم بتضمين عرض الحد السفلي. هذا كل شيء!

• عرض الحد السفلي للمدخلات: 1 بكسل
• لون الحد السفلي للمدخلات: #dddddd

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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