كيفية تصميم أقسام بطل فريدة متعددة الأعمدة مع قسم تخصص ديفي

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

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

معاينة

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

قم بتنزيل مخطط قسم البطل متعدد الأعمدة مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

إضافة قسم تخصص جديد

هيكل العمود

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

لون الخلفية

افتح إعدادات القسم وأضف لون خلفية بيضاء.

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

تحجيم

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

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

تباعد

نعمل أيضًا على إزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية للصف والأعمدة.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل
• الحشوة العلوية للعمود 1: 0 بكسل
• المساحة المتروكة السفلية للعمود 1: 0 بكسل
• الحشوة العلوية للعمود 2: 0 بكسل
• الحشوة السفلية للعمود 2: 0 بكسل
• الحشوة العلوية للعمود 3: 0 بكسل
• المساحة المتروكة السفلية للعمود 3: 0 بكسل

أضف الصف رقم 1

هيكل العمود

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

تباعد

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

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

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

إضافة فقرة ومحتوى H1

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

إعدادات النص

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

• خط النص: Open Sans
• حجم النص: 0.9vw (سطح المكتب) ، 1.6vw (جهاز لوحي) ، 2.2vw (هاتف)

إعدادات نص H1

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

• خط العنوان: Open Sans
• وزن خط العنوان: شبه عريض
• نمط خط العنوان: أحرف كبيرة
• لون نص العنوان: # 000000
• حجم نص العنوان: 4vw
• ارتفاع خط العنوان: 1.1em

تباعد

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

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

أضف الصف رقم 2

هيكل العمود

الصف الثاني الذي نحتاجه في عمود القسم الأول يستخدم بنية العمود التالية:

تباعد

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

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

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

أضف محتوى H3

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

إعدادات نص H3

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

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

تباعد

استمر بإضافة بعض الهامش العلوي على الهاتف.

• الهامش العلوي: 2vw (الهاتف فقط)

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

الرؤية

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

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

خط

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

• لون الخط: # 000000

تباعد

أضف بعض قيم الهامش المخصصة لإنشاء مساحة حول الحاجز.

• الهامش العلوي: 2vw
• الهامش السفلي: 2vw
• الهامش الأيمن: 2vw

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

إضافة محتوى

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

إعدادات النص

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

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

تباعد

أضف بعض الحشو السفلي والأيمن أيضًا.

• الهامش السفلي: 5vw (الهاتف فقط)
• الهامش الأيمن: 2vw

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

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

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

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

أضف الصف رقم 3

هيكل العمود

يستخدم الصف التالي والأخير الذي نحتاجه في عمود القسم الأول بنية العمود التالية:

تباعد

افتح إعدادات الصف وقم بتعديل قيم التباعد.

• الهامش العلوي: 2vw
• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

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

إضافة محتوى

تابع عن طريق إضافة Text Module إلى العمود الأول مع بعض نسخ CTA من اختيارك.

إضافة رابط

أضف ارتباطًا إلى الوحدة بأكملها أيضًا.

لون الخلفية

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

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

إعدادات النص

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

• خط النص: Open Sans
• وزن خط النص: غامق للغاية
• نمط خط النص: أحرف كبيرة
• محاذاة النص: الوسط
• لون النص: #ffffff
• حجم النص: 1vw (سطح المكتب) ، 1.7vw (جهاز لوحي) ، 2.5vw (هاتف)

تباعد

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

• الهامش العلوي: 4vw (سطح المكتب) ، 11vw (جهاز لوحي) ، 0vw (هاتف)
• الحشوة العلوية: 4vw
• الحشو السفلي: 4vw

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

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

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

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

تغيير لون الخلفية

وكذلك لون الخلفية.

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

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

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

• لون النص: # 000000

تغيير التباعد

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

• الحشوة العلوية: 4vw
• الحشو السفلي: 4vw

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

تحميل الصور

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

تحجيم

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

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

المرشحات

قم بتعديل إعدادات المرشحات بعد ذلك.

• التشبع: 0٪
• سطوع: 50٪

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

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

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

لون الخلفية

أضف لون الخلفية للوحدة.

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

إعدادات النص

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

• خط النص: Open Sans
• لون النص: #ffffff
• حجم النص: 0.9vw (سطح المكتب) ، 1.6vw (كمبيوتر لوحي) ، 2.2vw (هاتف)

إعدادات نص H3

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

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

تباعد

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

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

استنساخ كلتا الوحدتين ووضع التكرارات في قسم العمود 3 (ترتيب معكوس)

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

تغيير وحدة النص

تغيير لون الخلفية

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

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

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

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

• لون النص: # 000000

تغيير لون نص H3

جنبا إلى جنب مع لون النص H3.

• لون نص العنوان 3: # 000000

تغيير وحدة الصورة

تغيير الصورة

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

تغيير المرشحات

وتغيير إعدادات المرشحات.

• التشبع: 0٪
• السطوع: 147٪

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

موقع

نضيف أيضًا بعض المقسمات المحوّلة لإضافة تفاصيل إلى تصميمنا. ضع وحدة Divider الأولى هنا:

الرؤية

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

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

خط

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

• لون الخط: #ffffff

استدارة التحويل

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

• اليسار: 270 درجة

تحويل الترجمة

قم بتغيير موضع وحدة Divider باستخدام وحدة عرض منفذ العرض في إعدادات ترجمة التحويل.

• اليمين: -19vw (سطح المكتب)
• أسفل: -11vw (سطح المكتب) ، -24vw (جهاز لوحي)

الرؤية

وإخفاء الوحدة بأكملها على الهاتف.

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

موقع

يجب إضافة وحدة Divider التالية والأخيرة هنا:

الرؤية

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

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

خط

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

• لون الخط: # 000000

استدارة التحويل

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

• اليسار: 270 درجة

تحويل الترجمة

وقم بتغيير موضع الحاجز باستخدام إعدادات تحويل التحويل.

• يمين: 2vw
• أسفل: -11vw (سطح المكتب) ، -24vw (جهاز لوحي)

الرؤية

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

• الفهرس Z: 2

معاينة

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

افكار اخيرة

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

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