كيفية إنشاء خلفيات جميلة غير واضحة مع Divi

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل The Blurred Backgrounds Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

مقاربة

• نضيف ثلاث وحدات مختلفة إلى عمود واحد ؛ وحدتا صورة ووحدة CTA واحدة
• الصورة الأولى تحتفظ بمظهرها الأولي
• سيتم تعتيم الصورة الثانية وزيادة حجمها
• سنقوم أيضًا بتحسين الألوان من خلال اللعب مع إعدادات المرشحات الأخرى المضمنة في وحدة الصورة
• ستتداخل وحدة الحث على الشراء مع وحدة الصورة غير الواضحة وتستخدمها كخلفية لها
• للتأكد من أن التعتيم وزيادة الحجم في Image Module # 2 لا يتجاوزان حاوية العمود ، سنقوم بإخفاء تجاوز العمود

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

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

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

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

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

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 2
• العرض الأقصى: 100٪

العمود 2 تجاوز

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

overflow: hidden;

العمود 3 تجاوز

افعل نفس الشيء بالنسبة للعمود الثالث.

overflow: hidden;

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

أضف نسخة H2

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

إعدادات نص H2

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

• خط العنوان 2: بوبينز
• لون نص العنوان 2: # 232323
• حجم نص العنوان 2: 40 بكسل

تباعد

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

• الهامش العلوي: 9vw

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

الرؤية

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

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

خط

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

• لون الخط: # 000000

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: بوبينز
• وزن خط النص: خفيف
• حجم النص: 17 بكسل
• ارتفاع خط النص: 2.1em

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

أضف نسخة

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

إعدادات الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 20 بكسل
• لون نص الزر: # 000000
• لون خلفية الزر: # f4f4f4
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل
• خط الزر: بوبينز
• وزن خط الزر: غامق
• نمط خط الزر: أحرف كبيرة

تباعد

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

• الهامش العلوي: 20 بكسل
• الهامش السفلي: 20 بكسل
• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل
• الحشو الأيسر: 50 بكسل
• الحشوة اليمنى: 50 بكسل

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

تحميل صورة 1: 1

إلى العمود الثاني! هنا ، الوحدة الأولى التي نحتاجها هي وحدة صورة. قم بتحميل صورة بنسبة 1: 1. هذا يعني أن صورتك يجب أن تكون مربعة كاملة (يجب أن يساوي العرض الارتفاع).

تحجيم

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

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

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

تحميل صورة 1: 1

الوحدة الثانية التي نحتاجها في العمود 2 هي وحدة صورة أخرى. نحن ، مرة أخرى ، نستخدم صورة بنسبة 1: 1.

تحجيم

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

• فرض عرض كامل: نعم
• الارتفاع: 320 بكسل

تباعد

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

• الهامش العلوي: -100 بكسل

المرشحات

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

• التشبع: 200٪
• السطوع: 145٪
• التباين: 117٪
• طمس: 40 بكسل

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

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

• اليمين: 180٪
• القاع: 180٪

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

إضافة محتوى

الوحدة التالية والأخيرة التي نحتاجها في العمود الثاني هي وحدة CTA. أدخل نسخة من اختيارك.

إضافة رابط

انتقل إلى إعدادات الارتباط وأضف عنوان URL لرابط الزر لإظهار الزر في التصميم.

إزالة لون الخلفية

قم بإزالة لون الخلفية أيضًا.

• استخدام لون الخلفية: لا

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

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

• مستوى عنوان العنوان: H3
• خط العنوان: بوبينز
• حجم نص العنوان: 40 بكسل
• تباعد حرف العنوان: -1 بكسل

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

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

• خط الجسم: بوبينز
• وزن خط الجسم: خفيف
• ارتفاع خط الجسم: 2.2em

إعدادات الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 20 بكسل
• لون نص الزر: #ffffff
• التدرج اللوني 1: rgba (244،244،244،0.4)
• التدرج اللوني 2: rgba (255،255،255،0)
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل
• خط الزر: بوبينز
• وزن خط الزر: غامق
• نمط خط الزر: أحرف كبيرة

• الهامش الأعلى: 50 بكسل
• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل
• الحشو الأيسر: 50 بكسل
• الحشوة اليمنى: 50 بكسل

تباعد

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

• الهامش الأعلى: -250 بكسل
• الحشوة اليسرى: 2vw
• الحشوة اليمنى: 2vw

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

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

تغيير وحدة الصورة المكررة # 1

تغيير الصورة

قم بتغيير الصورة في وحدة الصورة رقم 1.

تغيير وحدة الصورة المكررة # 2

تغيير الصورة

افعل الشيء نفسه بالنسبة لوحدة الصورة الثانية في العمود.

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

وتعديل إعدادات المرشحات لوحدة الصورة الثانية أيضًا.

• التشبع: 180٪
• السطوع: 102٪
• التباين: 117٪
• طمس: 35 بكسل

تغيير وحدة CTA المكررة

تغيير النسخ

تابع عن طريق تغيير محتوى وحدة CTA.

تغيير خلفية زر التدرج

جنبا إلى جنب مع أول لون متدرج للزر ، لقد انتهيت!

• التدرج اللوني 1: rgba (244،244،244،0.15)

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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