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

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

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

معاينة

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

قم بتنزيل مخطط قسم البطل مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

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

خلفية متدرجة

انطلق وأنشئ صفحة جديدة أو افتح صفحة موجودة. أضف قسمًا عاديًا جديدًا ، وافتح إعدادات القسم وأضف خلفية التدرج التالية:

• اللون 1: # 7e2dff
• اللون 2: #ffffff
• موقف البداية: 63٪
• موضع النهاية: 63٪

تباعد

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

• الحشوة العلوية: 6vw (سطح المكتب) ، 13vw (كمبيوتر لوحي) ، 32vw (هاتف)
• الحشوة السفلية: 6vw (سطح المكتب) ، 10vw (كمبيوتر لوحي) ، 20vw (هاتف)

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

• العرض الأقصى: 100٪

تباعد

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

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

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

تحميل الصور

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

تحجيم

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

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

تباعد

عدّل إعدادات التباعد بعد ذلك.

• إظهار المساحة أسفل الصورة:
• الحشوة اليسرى: 17vw

الحدود

وأضف "50vw" إلى الزاوية اليمنى العليا من وحدة الصورة.

المرشحات

نحن أيضًا نغير ألوان صورتنا لتتناسب مع لوحة الألوان الخاصة بنا. افتح إعدادات المرشحات وقم بتطبيق الإعدادات التالية:

• هوى: 211 درجة
• التشبع: 600٪
• السطوع: 67٪
• التباين: 112٪
• العكس: 18٪

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

أضف محتوى H1

الوحدة الثانية التي نحتاجها في هذا الصف هي وحدة نصية بها بعض محتوى H1.

إعدادات نص H1

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

• خط العنوان: مونتسيرات
• وزن خط العنوان: شبه عريض
• لون نص العنوان: #ffffff
• حجم نص العنوان: 5vw
• تباعد حروف العنوان: -2 بكسل

تحجيم

قم بتعديل عرض الوحدة بعد ذلك.

• العرض: 70٪

تباعد

وقم بإنشاء تداخل بين هذا والوحدة السابقة باستخدام بعض الهامش العلوي السلبي.

• الهامش العلوي: -57vw (سطح المكتب) ، -75vw (جهاز لوحي) ، -91vw (الهاتف)

إضافة وحدة Divider إلى العمود

الرؤية

الوحدة التالية التي نحتاجها هي وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

خط

قم بتغيير لون الخط بعد ذلك.

• لون الخط: # 00dcff

تحجيم

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

• وزن المقسم: 0.8vw
• العرض: 27٪

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

أضف محتوى فقرة

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

إعدادات النص

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

• خط النص: Open Sans
• لون النص: #ffffff
• حجم النص: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 2.5vw (هاتف)
• ارتفاع خط النص: 1.8em

تحجيم

قم بتعديل عرض الوحدة أيضًا.

• العرض: 53٪ (كمبيوتر مكتبي) ، 65٪ (كمبيوتر لوحي) ، 100٪ (هاتف)

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

أضف نسخة

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

إعدادات الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• لون نص الزر: #ffffff
• لون خلفية الزر: # 000000
• عرض حد الزر: 0 بكسل
• خط الزر: فتح Sans

تباعد

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

• الحشوة العلوية: 1vw
• الحشو السفلي: 1vw
• الحشوة اليسرى: 4vw
• الحشوة اليمنى: 4vw

أضف الصف رقم 2

هيكل العمود

إلى الصف التالي! اختر هيكل العمود التالي:

لون الخلفية

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

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

تحجيم

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

• العرض الأقصى: 100٪

تباعد

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

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

الحدود

سنستمر بإضافة "20vw" إلى الركن السفلي الأيمن والأيسر العلوي من الصف. سنضيف حدًا علويًا باستخدام الإعدادات التالية أيضًا:

• عرض الحد العلوي: 1.2vw
• لون الحد العلوي: # 00dcff

مربع الظل

نقوم أيضًا بإضافة ظل مربع دقيق لإنشاء عمق على الصفحة.

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

فهرس Z.

للتأكد من ظهور الصف أعلى وحدة الصورة ، سنقوم بزيادة الصف Z Index في إعدادات الرؤية.

• الفهرس Z: 10

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

إضافة محتوى

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

حدد أيقونة

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

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

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

• لون الأيقونة: # 000000
• وضع الرمز: الأعلى
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 5vw

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

تعديل إعدادات العنوان أيضا.

• خط العنوان: مونتسيرات
• وزن خط العنوان: غامق
• محاذاة نص العنوان: الوسط
• لون نص العنوان: # 000000
• حجم نص العنوان: 1.1vw (سطح المكتب) ، 2.5vw (جهاز لوحي) ، 3vw (هاتف)
• تباعد حرف العنوان: -1 بكسل

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

جنبا إلى جنب مع إعدادات النص الأساسي.

• خط النص الأساسي: Open Sans
• محاذاة النص الأساسي: الوسط
• حجم نص النص: 0.8vw (سطح المكتب) ، 1.6vw (جهاز لوحي) ، 2vw (هاتف)
• ارتفاع خط الجسم: 1.5vw (سطح المكتب) ، 3vw (الكمبيوتر اللوحي والهاتف)

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

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

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

تأكد من تغيير محتوى كلتا النسختين وانتهيت!

معاينة

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

افكار اخيرة

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

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