كيفية تكديس عناصر المحفظة بشكل جميل باستخدام خيارات تحويل Divi

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

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

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

معاينة

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

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

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

خلفية متدرجة

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

• اللون 1: # f4f4f4
• اللون 2: rgba (255،255،255،0)
• نوع التدرج: شعاعي
• اتجاه شعاعي: المركز
• موقف البداية: 30٪
• موضع النهاية: 30٪

تباعد

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

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

أضف صفًا جديدًا

هيكل العمود

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

تحجيم

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

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

تباعد

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

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

عرض

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

display: flex;

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

تحميل الصور

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

قم بتحميل شاشة الطباعة إلى وحدة صورة في العمود الأول.

تحجيم

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

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

تباعد

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

• الهامش العلوي: -10vw
• الحشو الأيسر: 11vw
• الحشوة اليمنى: 11vw

الحدود

أضف "2vw" إلى كل زاوية في إعدادات الحدود التالية.

مربع الظل

جنبا إلى جنب مع مربع الظل.

• مربع قوة طمس الظل: 80 بكسل
• لون الظل: rgba (0،0،0،0.3)

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

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

• القاع: -26vw
• يمين: -2vw

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

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

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

• اليسار: 24 درجة
• المركز: 46 درجة
• اليمين: -7deg

انحراف الترجمة

أخيرًا وليس آخرًا ، قم بتمكين ترجمة الانحراف بالقيم التالية:

• القاع: -4 درجة
• اليمين: 24 درجة

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

تحميل الصور

إلى وحدة الصورة التالية! احفظ شاشة الطباعة التالية على جهاز الكمبيوتر الخاص بك أو استخدم شاشة طباعة أخرى من اختيارك:

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

تحجيم

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

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

تباعد

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

• الهامش العلوي: -81vw (سطح المكتب) ، -50vw (الجهاز اللوحي والهاتف)
• الهامش الأيسر: 11vw
• الهامش الأيمن: 11vw

الحدود

سنضيف "2vw" لكل زاوية في إعدادات الحدود التالية.

مربع الظل

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

• مربع قوة طمس الظل: 150 بكسل
• لون الظل: rgba (0،0،0،0.6)

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

بعد ذلك ، انتقل إلى إعدادات التحويل وقم بتعديل قيم تحويل التحويل:

• القاع: -8vw
• اليمين: 0 بكسل

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

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

انتقل إلى علامة تبويب استدارة التحويل والعب مع جميع القيم الثلاث.

• اليسار: 24 درجة
• المركز: 46 درجة
• اليمين: -7deg

انحراف الترجمة

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

• القاع: -4 درجة
• اليمين: 24 درجة

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

تحميل الصور

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

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

تحجيم

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

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

تباعد

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

• الهامش العلوي: -107vw
• الهامش الأيسر: 19vw
• الهامش الأيمن: 19vw

الحدود

تابع بإضافة "2vw" إلى كل ركن من أركان وحدة الصورة.

مربع الظل

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

• مربع قوة طمس الظل: 200 بكسل
• لون الظل: rgba (0،0،0،0.82)

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

بعد ذلك ، انتقل إلى إعدادات التحويل وقم بتعديل قيم تحويل التحويل:

• القاع: -42vw
• يمين: 11vw

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

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

• اليسار: 24 درجة
• المركز: 46 درجة
• اليمين: -7deg

انحراف الترجمة

أخيرًا وليس آخرًا ، قم بتعديل قيم انحراف الترجمة.

• القاع: -4 درجة
• اليمين: 24 درجة

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

أضف نسخة H2

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

إعدادات نص H2

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

• خط العنوان 2: Roboto
• وزن خط العنوان 2: رفيع
• العنوان 2 محاذاة النص: اليسار
• لون نص العنوان 2: # 000000
• حجم نص العنوان 2: 5vw (سطح المكتب) ، 6vw (جهاز لوحي) ، 7vw (هاتف)
• العنوان 2 تباعد الأحرف: -1 بكسل

تباعد

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

• الهامش العلوي: 35vw (سطح المكتب) ، 10vw (جهاز لوحي) ، 0vw (هاتف)
• الهامش الأيسر: -4 vw
• الهامش الأيمن: 4vw

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

الرؤية

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

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

اللون

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

• اللون: # 8193fa

تحجيم

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

• وزن الحاجز: 8 بكسل
• العرض: 28٪

تباعد

وأضف بعض قيم الهامش المخصصة.

• الهامش العلوي: 1vw
• الهامش الأيسر: -4 vw
• الهامش الأيمن: 4vw

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

إضافة محتوى

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

إعدادات النص

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

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

تباعد

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

• الهامش العلوي: 1vw
• الهامش الأيسر: -4 vw
• الهامش الأيمن: 4vw

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

أضف نسخة

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

إعدادات الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• اللون 1: # 5627ba
• اللون 2: # 8fb5fc
• اتجاه التدرج: 122 درجة
• عرض حد الزر: 0 بكسل
• وزن الخط: عريض للغاية
• نمط الخط: أحرف كبيرة

تباعد

قم بتغيير قيم الهامش والحشو المخصصين أيضًا.

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

مربع الظل

أخيرًا وليس آخرًا ، أضف ظل مربع دقيقًا ، وقد انتهيت!

• مربع قوة طمس الظل: 40 بكسل
• لون الظل: rgba (0،0،0،0.3)

معاينة

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

افكار اخيرة

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