إنشاء هيكل تصميم قطري باستخدام خيارات تحويل Divi (تنزيل مجاني!)

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

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

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

معاينة

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

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

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

خلفية متدرجة

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

• اللون 1: # ffd633
• اللون 2: #efefef
• اتجاه التدرج: 217 درجة
• موقف البداية: 45٪
• موضع النهاية: 45٪

تباعد

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

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

تجاوز

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

overflow: hidden;

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل
• الحشو الأيسر: 25vw (سطح المكتب) ، 16vw (كمبيوتر لوحي) ، 7vw (هاتف)
• الحشو الأيمن: 25vw (سطح المكتب والكمبيوتر اللوحي) ، 27vw (الهاتف)

عرض

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

display: flex;

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

أضف عنوانا

حان الوقت لبدء إضافة الوحدات! أضف وحدة Blurb Module إلى العمود 1 وأدخل عنوانًا من اختيارك.

تحميل الرسم التوضيحي

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

خلفية

ثم أضف لون خلفية أبيض بالكامل إلى Blurb Module.

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

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

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

• خط العنوان: بوبينز
• وزن خط العنوان: شبه عريض
• نمط خط العنوان: أحرف كبيرة
• محاذاة نص العنوان: الوسط
• حجم نص العنوان: 0.5vw (Desktop) ، 1.6vw (Tablet) ، 2.4vw (Phone)
• تباعد حروف العنوان: 1 بكسل
• ارتفاع خط العنوان: 1.6em

تباعد

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

• الحشوة العلوية: 1.3vw (سطح المكتب) ، 4vw (Tablet) ، 6vw (Phone)
• الحشوة السفلية: 1.3vw (سطح المكتب) ، 4vw (Tablet) ، 6vw (الهاتف)
• الحشو الأيسر: 1vw (سطح المكتب) ، 7vw (الجهاز اللوحي والهاتف)
• الحشو الأيمن: 1vw (سطح المكتب) ، 7vw (الجهاز اللوحي والهاتف)

الحدود

تابع بإضافة "1vw" إلى الزاويتين العلويتين اليسرى واليمنى لوحدة Blurb Module.

مربع الظل

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

• مربع الظل الرأسي: 10 بكسل
• مربع قوة طمس الظل: 60 بكسل
• لون الظل: rgba (39،39،52،0.37)

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

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

تغيير تكرار # 1

تغيير النسخ والتوضيح

غيّر نسخة وتوضيح أول نسخة مكررة.

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

جنبا إلى جنب مع إعدادات التباعد.

• الهامش العلوي: -3vw
• الحشوة العلوية: 2.7vw (سطح المكتب) ، 8vw (Tablet) ، 11vw (الهاتف)
• الحشوة السفلية: 2.7vw (سطح المكتب) ، 8vw (الكمبيوتر اللوحي) ، 11vw (الهاتف)

تغيير تكرار # 2

تغيير النسخ والتوضيح

قم بتعديل نسخة وتوضيح النسخة الثانية أيضًا.

أضف الصف رقم 2

هيكل العمود

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

خلفية متدرجة

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

• اللون 1: # fff20a
• اللون 2: # ffb200
• اتجاه التدرج: 165 درجة

تحجيم

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتمكين خيار "Make This Row Fullwidth".

• جعل هذا الصف بعرض كامل: نعم

مربع الظل

أخيرًا وليس آخرًا ، أضف ظل مربع إلى الصف.

• مربع الظل الوضع الرأسي: 0 بكسل
• مربع قوة طمس الظل: 100 بكسل
• لون الظل: rgba (0،0،0،0.39)

إضافة وحدة المقسم

الرؤية

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

• إظهار الحاجز:

تطبيق خيارات التحويل على الصفوف

الصف رقم 1

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

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

• القاع: 30vw
• يمين: 6vw

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

بعد ذلك ، قم بتغيير قيمة تدوير التحويل الأيسر.

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

الصف رقم 2

مقياس التحويل

تابع عن طريق فتح إعداد الصف الثاني وتعديل قيم مقياس التحويل.

• السفلي: 133٪ (سطح المكتب) ، 171٪ (الجهاز اللوحي) ، 176٪ (الهاتف)
• اليمين: 133٪ (كمبيوتر مكتبي) ، 171٪ (جهاز لوحي) ، 176٪ (هاتف)

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

جنبا إلى جنب مع تحويل القيم.

• أسفل: 12vw (سطح المكتب) ، 1vw (جهاز لوحي) ، 3vw (هاتف)
• اليمين: -2vw (سطح المكتب) ، -6vw (الجهاز اللوحي) ، -4 vw (الهاتف)

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

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

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

أضف الصف رقم 3

هيكل العمود

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

تحجيم

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

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

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

أضف محتوى H1

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

إعدادات نص H1

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

• خط العنوان: بوبينز
• حجم نص العنوان: 3vw (Desktop) ، 5vw (Tablet) ، 6vw (Phone)
• تباعد حروف العنوان: -2 بكسل

تباعد

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

• الهامش العلوي: -6vw (سطح المكتب والكمبيوتر اللوحي) ، 11vw (الهاتف)
• الهامش الأيسر: 10vw

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

إضافة محتوى

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

إعدادات النص

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

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

تباعد

قم بتغيير قيم التباعد أيضًا.

• الهامش العلوي: 3vw (هاتف) ، 5vw (هاتف)
• الهامش الأيسر: 10vw
• الهامش الأيمن: 28vw (Tablet) ، 20vw (Phone)

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

أضف نسخة

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

إعدادات الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 0.9vw (سطح المكتب) ، 2.5vw (الجهاز اللوحي) ، 3.5vw (الهاتف)
• لون نص الزر: # 000000
• عرض حد الزر: 1 بكسل
• لون حدود الزر: # 000000
• نصف قطر حدود الزر: 1 بكسل
• خط الزر: بوبينز
• وزن الخط: خفيف

تباعد

أخيرًا وليس آخرًا ، قم بتشكيل الوحدة النمطية الخاصة بك باستخدام بعض قيم التباعد المخصصة وقد انتهيت!

• الهامش العلوي: 2vw (سطح المكتب) ، 5vw (الجهاز اللوحي والهاتف)
• الهامش الأيسر: 10vw
• الحشوة العلوية: 1vw
• الحشو السفلي: 1vw
• الحشوة اليسرى: 3vw
• الحشوة اليمنى: 3vw

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

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

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

تنزيل مجاني

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

تحميل

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

معاينة

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

افكار اخيرة

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