عندما يتعلق الأمر بأقنعة الخلفية، يميل المستخدمون إلى استخدام برامج تحرير الصور خارج Divi ثم تحميل الصورة إلى موقع الويب الذي ينشئونه. مع أن هذه طريقة سهلة لتخصيص موقعك الإلكتروني، إلا أنها ليست الحل الوحيد. يمكنك أيضًا إنشاء أقنعة خلفية داخل Divi، بدمج عناصر التصميم المختلفة وخيارات التصفية بطرق إبداعية. هذا ما سنفعله بالضبط في هذه التدوينة! سنحوّل الخطوط كبيرة الحجم إلى أقنعة خلفية تبدو رائعة على أي حجم شاشة. نأمل أن يلهمك هذا البرنامج التعليمي لإنشاء تصاميمك الخاصة باستخدام الخطوط كبيرة الحجم وخيارات Divi المدمجة.
دعونا نذهب!
معاينة العينة
قبل الغوص في البرنامج التعليمي ، إليك أنواع الخلفيات التي يمكنك تحقيقها باستخدام هذه التقنية.
تصور
سنبدأ التصميم عن طريق إنشاء خلفية سوداء بحرف يحتوي على صورة كخلفية.
إضافة قسم جديد
لون الخلفية
لنبدأ بالمثال الأول! أضف قسمًا عاديًا جديدًا إلى صفحة جديدة أو موجودة وإضافة خلفية إلى هذا القسم:
- لون الخلفية: #000000
مباعدة
ثم انتقل إلى إعدادات التباعد وقم بإزالة جميع الحشوة الافتراضية العلوية والسفلية.
- أعلى الحشو: 0px
- الحشو السفلي: 0px
فيض
قم بالتبديل إلى علامة التبويب خيارات متقدمة وإخفاء تجاوز القسم. سيصبح هذا مهمًا لاحقًا في هذا البرنامج التعليمي عندما نعيد وضع وحدة النص التي تحتوي على الحرف الزائد.
- تجاوز أفقي: مخفي
- تجاوز عمودي: مخفي
أضف صف 1
هيكل العمود
متابعة إضافة صف جديد باستخدام بنية الأعمدة التالية:
العمود 1 لون الخلفية
بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وأضف لونًا للخلفية إلى العمود الأول.
- لون خلفية عمود 1: #848484
1 عمود صورة الخلفية
أضف أيضًا لون الخلفية. لدمج لون الخلفية والصورة ، سنطبق وضع المزج.
- مزيج صورة خلفية العمود: مضاعفة
التحجيم
قم بالتبديل إلى علامة التبويب Design ودع الصف يملأ عرض الشاشة بالكامل مع تطبيق إعدادات التحجيم التالية:
- استخدم عرض مزراب مخصص: نعم
- عرض مزراب: 1
- العرض: 100٪
- الحد الأقصى للعرض: 100٪
مباعدة
نتخلص أيضًا من جميع الحشوات لأعلى ولأسفل في الصف.
- أعلى الحشو: 0px
- الحشو السفلي: 0px
إضافة وحدة نمطية النص إلى عمود
أضف حرفًا إلى منطقة المحتوى
حان وقت إضافة وحدة نصية تحتوي على حرف كبير. أضف حرف "o" إلى منطقة المحتوى.
لون الخلفية
تابع من خلال الانتقال إلى إعدادات الخلفية وإضافة لون خلفية سوداء.
- لون الخلفية: #000000
إعدادات النص
انتقل إلى علامة التبويب "تصميم" وقم بتغيير إعدادات النص. لاحظ كيف نستخدم قيمة عالية لحجم النص.
- نص الخط: بوبينس
- حجم النص: 100vw
- اتجاه النص: المركز
مباعدة
ثم انتقل إلى إعدادات التباعد وقم بإضافة قيم مخصصة للهامش والحشو.
- الهامش العلوي: -6vw
- أفضل الحشو: 15vw
- الحشو السفلي: 49vw
مرشحات
حان الوقت للقيام السحر! الوصول إلى إعدادات تصفية الوحدة النمطية وتغيير وضع دمج وفقا لذلك:
- وضع المزج: اضرب
- السطوع: يمكنك تغيير هذه القيمة حسب رغبتك
أضف سطر 2
هيكل العمود
بمجرد إضافة شخصيتك الكبيرة إلى التصميم ، يمكنك المتابعة بإضافة الوحدات المتبقية التي تريد عرضها في القسم ، ويفضل أن يكون ذلك بإضافة سطر جديد:
التحجيم
بدون إضافة أي وحدات بعد ، افتح إعدادات الصف واتركها تشغل عرض الشاشة بالكامل.
- استخدم عرض مزراب مخصص: نعم
- عرض مزراب: 1
- العرض: 100٪
- الحد الأقصى للعرض: 100٪
مباعدة
أيضا إزالة جميع الحشو الافتراضية صعودا وهبوطا
- أعلى الحشو: 0px
- الحشو السفلي: 0px
إضافة وحدة النص # 1 إلى العمود
أضف محتوى H1
في هذا السطر الجديد، يمكنك إضافة أي وحدات ترغب بها. لإعادة إنشاء المثال نفسه الذي تمت مشاركته في معاينة هذه التدوينة، ابدأ بإضافة وحدة نصية تحتوي على محتوى H1.
إعدادات النص H1
انتقل إلى علامة التبويب "تصميم" وقم بتغيير إعدادات نص H1.
- خط العنوان: عرض Playfair
- وزن الخط: غامق
- محاذاة نص العنوان: المركز
- لون نص العنوان: #ffffff
- حجم عنوان النص: 6vw
مباعدة
استمر بالانتقال إلى إعدادات التباعد ودع وحدة النص تتداخل مع الحرف المتضخم عن طريق إضافة هامش علوي سلبي. نضمن أيضًا وجود مساحة على يسار ويمين الوحدة لضمان الاستجابة.
- الهامش العلوي: -47vw
- الهامش الأيسر: 1vw
- الهامش الأيمن: 1vw
إضافة وحدة تقسيم إلى العمود
رؤية
الوحدة التالية التي نحتاجها هي وحدة قسمة. تأكد من تمكين خيار "إظهار الفاصل".
- إظهار الحاجز: نعم
اللون
انتقل إلى علامة تبويب التصميم التالية وقم بتغيير لون الحاجز.
- اللون: # fffff
التحجيم
أيضا تغيير المعلمات التحجيم.
- وزن المقسم: 13px
- العرض: 16٪
- محاذاة الوحدة: المركز
مباعدة
قم أيضًا بإضافة الهامش العلوي لإنشاء مسافة بين وحدة النص والوحدة النمطية للقسمة.
- الهامش العلوي: 16vw
إضافة وحدة النص # 2 إلى العمود
إضافة محتوى
الوحدة التالية التي نحتاجها هي وحدة نصية تحتوي على محتوى فقرة.
إعدادات النص
الوصول إلى إعدادات النص وإجراء التغييرات التالية:
- خط النص: فتح بلا
- لون النص: #ffffff
- حجم النص: 1vw (سطح المكتب) ، 2vw (قرص) ، 2.5vw (الهاتف)
- ارتفاع سطر النص: 1.9em
- اتجاه النص: المركز
مباعدة
أضف أيضًا قيم التباعد المخصصة.
- الهامش العلوي: 3vw
- الهامش السفلي: 3vw (كمبيوتر سطح المكتب) ، 10vw (الكمبيوتر اللوحي والهاتف)
- الهامش الأيسر: 27vw (سطح المكتب) ، 10vw (الكمبيوتر اللوحي) ، 8vw (الهاتف)
- الهامش الأيمن: 27vw (سطح المكتب) ، 10vw (الكمبيوتر اللوحي) ، 8vw (الهاتف)
إضافة وحدة زر إلى العمود
أضف نسخة
في الوحدة التالية والأخيرة ، وهي وحدة زر. أدخل نسخة من اختيارك.
انحياز
تابع عن طريق تغيير محاذاة الزر في علامة التبويب تصميم.
- محاذاة الأزرار: المركز
إعدادات زر
قم بالتبديل إلى إعدادات الزر وتخصيص الزر حسب الرغبة.
- استخدم الأنماط المخصصة للزر: نعم
- حجم نص الزر: 1vw (سطح المكتب) ، 2.5vw (قرص) ، 3vw (هاتف)
- لون نص الزر: #ffffff
- عرض حد الزر: 1px
- نصف قطر حد الزر: 0px
- زر الخط: فتح بلا
- وزن الخط: Ultra Bold
- نوع الخط: uppercase
مباعدة
أخيرًا ، نضيف أيضًا الهامش المخصص وقيم التعبئة للحصول على النتيجة المرجوة.
- الهامش السفلي: 10vw
- الحشو: 15px
- الحشو السفلي: 15px
- حشوة اليسار: 50px
- حق التنجيد: 50px
نتيجة نهائية
هذا هو ما يشبه ما بنينا حتى الآن.
الأفكار النهائية
في هذه المقالة ، أوضحنا لك كيفية استخدام الأحرف كبيرة الحجم لإنشاء أقنعة خلفية رائعة باستخدام Divi. هذه طريقة رائعة لإنشاء تصميم ويب مخصص دون الحاجة إلى استخدام برامج تحرير الصور. إذا كان لديك أي أسئلة أو اقتراحات ، فتأكد من ترك تعليق في قسم التعليقات أدناه!