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

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل مخطط المنظر المضمن مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

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

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

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

هيكل العمود

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

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

تباعد

أضف قيمة مساحة علوية إلى العمود الأول.

• الحشوة العلوية:
  • سطح المكتب: 2vw
  • الجهاز اللوحي + الهاتف: 6vw

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

تباعد

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

• الحشوة العلوية:
  • سطح المكتب: 4vw
  • الجهاز اللوحي + الهاتف: 6vw

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

تباعد

تخطي العمود 3 وأضف بعض قيم التباعد إلى العمود 4.

• الحشو العلوي
  • سطح المكتب: 19vw
  • الجهاز اللوحي: 0vw
  • الهاتف: 1vw
• الحشو الأيسر والأيمن
  • سطح المكتب والكمبيوتر اللوحي: 1vw
  • الهاتف: 0vw

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

أضف محتوى H2

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

نص العنوان

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

• مستوى نص العنوان: H2
• خط H2: EB Garamond
• نمط الخط H2: TT
• لون نص H2: أسود #oooooo
• حجم نص H2:
  • سطح المكتب: 3.1vw
  • الجهاز اللوحي: 5.4vw
  • الهاتف: 10vw
• ارتفاع الخط H2:
  • سطح المكتب + الجهاز اللوحي: 1.1em
  • الهاتف: 1.3em

تباعد

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

• الحشوة العلوية:
  • سطح المكتب: 4vw
  • الجهاز اللوحي + الهاتف: 0vw
• الحشوة اليسرى:
  • سطح المكتب والكمبيوتر اللوحي: 1vw
  • الهاتف: 2vw
• المساحة المتروكة اليمنى
  • سطح المكتب والكمبيوتر اللوحي: 1vw
  • الهاتف: 0vw

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

إضافة محتوى

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

نص

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

• خط النص: EB Garamond
• لون النص: رمادي غامق # 3d3d3d
• حجم الخط:
  • سطح المكتب: 1vw
  • الجهاز اللوحي: 2.2vw
  • الهاتف: 3.8vw
• ارتفاع خط النص: 1.8em

تباعد

اضبط إعدادات التباعد للوحدة بعد ذلك.

• الحشوة السفلية:
  • الهاتف: 4vw
• الحشوة اليسرى:
  • سطح المكتب + الجهاز اللوحي: 1.4vw
• الحشوة اليمنى:
  • سطح المكتب: 1.3vw
  • الجهاز اللوحي + الهاتف: 1.7vw

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

إضافة محتوى

لإكمال العمود الأول ، أضف وحدة زر. أدخل بعض النسخ.

إضافة رابط

أضف ارتباطًا إلى الزر أيضًا.

زر

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

• حجم نص الزر:
  • سطح المكتب: 1vw
  • الجهاز اللوحي: 2vw
  • الهاتف: 4vw
• لون نص الزر: رمادي غامق # 3d3d3d
• عرض حد الزر: 1 بكسل
• خط الزر: EB Garamond

تباعد

ثم اضبط إعدادات التباعد الخاصة بالزر.

• الهامش العلوي:
  • سطح المكتب + الجهاز اللوحي: 1vw
• الهامش السفلي:
  • الهاتف: 5vw

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

إضافة محتوى

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

خلفية

تواصل بإضافة صورة خلفية. قم بتحميل صورة خلفية CSS parallax لسطح المكتب واستخدم صورة عادية بأحجام شاشة أصغر (بدون اختلاف CSS).

• خلفية سطح المكتب: صورة
  • المنظر: CSS
• الكمبيوتر اللوحي + خلفية الهاتف: الصورة

تحوم في الخلفية

بعد ذلك ، أضف خلفية متدرجة عند التمرير فقط.

• تحوم الخلفية: التدرج اللوني
• تدرج اللون 1: أصفر ذهبي فاتح # edba63
• تدرج اللون 2: أصفر ذهبي # ed9d12
• اتجاه التدرج: 23 درجة
• وضع التدرج فوق صورة الخلفية: نعم

نص العنوان

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

• مستوى عنوان النص: H4
• خط H4: EB Garamond
• لون نص H4: أبيض #ffffff
• حجم نص H4:
  • سطح المكتب: 2.3vw
  • الجهاز اللوحي: 4.5vw
  • الهاتف: 8.5vw

تباعد

ثم اضبط التباعد.

• الهامش العلوي:
  • الهاتف: -6vw
• الحشوة العلوية:
  • سطح المكتب: 15vw
  • الجهاز اللوحي: 22vw
  • هاتف: 43vw
• الحشوة السفلية:
  • سطح المكتب + الجهاز اللوحي: 1vw
• الحشوة اليسرى واليمنى:
  • سطح المكتب والكمبيوتر اللوحي: 1.5vw
  • الهاتف: 5vw

الحدود

تواصل من خلال تصميم الحدود.

• الزوايا الدائرية: 1vw لجميع الزوايا
• أنماط الحدود: جميع الجوانب
• عرض الحدود: 0.3vw
• لون الحدود: أبيض #ffffff

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

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

• مقياس التحويل عند التحويم: 102٪

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

إضافة محتوى

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

خلفية

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

• خلفية سطح المكتب: صورة
  • المنظر: CSS
• الكمبيوتر اللوحي + خلفية الهاتف: الصورة

تحوم في الخلفية

أضف خلفية متدرجة تحوم أيضًا.

• تحوم الخلفية: التدرج اللوني
• التدرج اللوني 1: أرجواني فاتح # 91463f
• تدرج اللون 2: أرجواني # 910400
• اتجاه التدرج: 23 درجة
• وضع التدرج فوق صورة الخلفية: نعم

نص العنوان

نمط إعدادات نص H4 بعد ذلك.

• مستوى عنوان النص: H4
• خط H4: EB Garamond
• لون نص H4: أبيض #ffffff
• حجم نص H4:
  • سطح المكتب: 2.3vw
  • الجهاز اللوحي: 4.5vw
  • الهاتف: 8.5vw

تباعد

وتعديل إعدادات التباعد.

• الحشوة العلوية:
  • سطح المكتب: 15vw
  • الجهاز اللوحي: 21.1vw
  • هاتف: 43vw
• الحشوة السفلية:
  • سطح المكتب + الجهاز اللوحي: 1vw
• الحشوة اليسرى واليمنى:
  • سطح المكتب والكمبيوتر اللوحي: 1.5vw
  • الهاتف: 5vw

الحدود

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

• الزوايا الدائرية: 1vw لجميع الزوايا
• أنماط الحدود: جميع الجوانب
• عرض الحدود: 0.3vw
• لون الحدود: أبيض #ffffff

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

أخيرًا وليس آخرًا ، أضف تأثير تكبير إلى وحدة النص.

• مقياس التحويل عند التحويم: 102٪

وحدات نصية مكررة من العمود 2 إلى العمود 3

تكرار وحدات النص واسحبها

استنساخ كلا الوحدتين النصيتين ووضعهما في العمود الثالث من الصف.

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

تغيير محتوى H4

افتح أول وحدة نص مكرر في العمود 3 وقم بتغيير المحتوى.

تغيير الخلفية للجهاز اللوحي والهاتف

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

تغيير التدرج اللوني عند التمرير

تابع عن طريق تغيير الألوان في التدرج اللوني.

• تدرج اللون 1: وردي وردي # cc9293
• تدرج اللون 2: وردي # cc9293

تباعد

أخيرًا ، اضبط التباعد على النحو التالي.

• الهامش العلوي:
  • الجهاز اللوحي: -6.4vw
  • الهاتف: 0vw

اضبط وحدة النص الثانية في العمود 3

تغيير محتوى H4

أولاً ، قم بتغيير المحتوى.

تغيير الخلفية للجهاز اللوحي والهاتف

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

تغيير التدرج اللوني عند التمرير

قم بتغيير الخلفية المتدرجة أيضًا.

• التدرج اللوني 1: الصنوبر الناعم # 5c755c
• تدرج اللون 2: الصنوبر الأخضر # 4D754D

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

إضافة محتوى

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

نص العنوان

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

• مستوى نص العنوان: H3
• خط نص H3: EB Garamond
• نمط الخط H3: TT
• لون نص H3: أسود #oooooo
• حجم نص H3:
  • سطح المكتب: 3vw
  • الجهاز اللوحي: 5vw
  • هاتف: 12vw
• ارتفاع الخط H3
  • سطح المكتب + الجهاز اللوحي: 1em
  • الهاتف: 1.1em

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

إضافة محتوى

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

نص

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

• خط النص: EB Garamond
• لون النص: رمادي غامق # 3d3d3d
• حجم الخط:
  • سطح المكتب: 1vw
  • الجهاز اللوحي: 2.2vw
  • الهاتف: 3.8vw
• ارتفاع خط النص: 1.8em

تباعد

ثم اضبط التباعد.

• الحشوة السفلية:
  • الهاتف: 4vw
• الحشوة اليسرى: 0.9vw
• الحشوة اليمنى: 2.2vw

وحدة زر مكررة من العمود 1 إلى العمود 4

تكرار واسحب وحدة الزر

• قم بتكرار وحدة الزر في العمود 1.
• اسحبه إلى العمود 3 أسفل وحدات النص.

تباعد

اضبط بعض قيم التباعد في وحدة الأزرار المكررة ، وبذلك تكون قد انتهيت!

• الهامش السفلي: 0vw
• الهامش الأيسر:
  • سطح المكتب + الجهاز اللوحي: 0.7vw
  • الهاتف: 0.9vw

معاينة

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

سطح المكتب

متحرك

استنتاج

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