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

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

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

معاينة

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

مثال 1

المثال رقم 2

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

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

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

تنزيل مجاني

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

تحميل

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

أعد إنشاء المثال رقم 1

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

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

لون الخلفية

لنبدأ بالمثال الأول! أضف قسمًا عاديًا جديدًا إلى صفحة جديدة أو موجودة وأضف خلفية إلى هذا القسم:

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

تباعد

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

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

تجاوز

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

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

أضف الصف رقم 1

هيكل العمود

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

لون خلفية العمود 1

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

• لون خلفية العمود 1: # 848484

العمود 1 صورة الخلفية

أضف لون الخلفية أيضًا. لدمج لون الخلفية والصورة ، سنقوم بتطبيق وضع المزج.

• مزيج صورة الخلفية العمود: مضاعفة

تحجيم

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

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

تباعد

نتخلص أيضًا من جميع الحشو العلوي والسفلي المخصص للصف.

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

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

أضف حرفًا إلى Content Box

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

لون الخلفية

استمر بالذهاب إلى إعدادات الخلفية وإضافة لون خلفية أسود.

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

إعدادات النص

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

• خط النص: بوبينز
• حجم النص: 100vw
• اتجاه النص: الوسط

تباعد

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

• الهامش العلوي: -6vw
• الحشوة العلوية: 15vw
• الحشو السفلي: 49vw

المرشحات

حان الوقت لتحقيق السحر! انتقل إلى إعدادات المرشحات للوحدة وقم بتعديل وضع المزج وفقًا لذلك:

• وضع المزج: الضرب

أضف الصف رقم 2

هيكل العمود

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

تحجيم

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

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

تباعد

قم بإزالة جميع الحشوة الافتراضية العلوية والسفلية أيضًا.

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

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

أضف محتوى H1

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

إعدادات نص H1

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

• خط العنوان: عرض Playfair
• وزن خط العنوان: غامق
• محاذاة نص العنوان: الوسط
• لون نص العنوان: #ffffff
• حجم نص العنوان: 6vw

تباعد

استمر بالانتقال إلى إعدادات التباعد والسماح لـ Text Module بالتداخل مع الحرف المتضخم عن طريق إضافة بعض الهامش العلوي السلبي. نتأكد أيضًا من وجود مساحة على الجانب الأيسر والأيمن من الوحدة لضمان الاستجابة.

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

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

الرؤية

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

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

اللون

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

• اللون: #ffffff

تحجيم

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

• وزن الحاجز: 13 بكسل
• العرض: 16٪
• محاذاة الوحدة: المركز

تباعد

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

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

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: Open Sans
• لون النص: #ffffff
• حجم النص: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 2.5vw (هاتف)
• ارتفاع خط النص: 1.9em
• اتجاه النص: الوسط

تباعد

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

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

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

أضف نسخة

إلى الوحدة التالية والأخيرة ، وهي وحدة الأزرار. أدخل نسخة من اختيارك.

انتقام

تابع عن طريق تغيير محاذاة الزر في علامة تبويب التصميم.

• محاذاة الزر: الوسط

إعدادات الزر

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

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

تباعد

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

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

أعد إنشاء المثال رقم 2

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

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

تجاوز

إخفاء تجاوز القسم في علامة التبويب خيارات متقدمة.

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

أضف الصف رقم 1

هيكل العمود

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

لون خلفية العمود 1

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

• لون خلفية العمود 1: #dddddd

العمود 1 صورة الخلفية

أضف صورة خلفية أيضًا وادمج لون الخلفية مع الصورة باستخدام صيغة المزج.

• مزيج صورة الخلفية العمود: الشاشة

تحجيم

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

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

تباعد

قم بإزالة الحشوة العلوية والسفلية بعد ذلك.

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

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

أضف حرفًا إلى Content Box

حان الوقت لإضافة وحدة النص التي تحتوي على الأحرف كبيرة الحجم! انسخ الأحرف التالية: "" وأضفها إلى مربع المحتوى. يمكنك استخدام أي نوع من الأحرف تريده بالانتقال إلى مخطط توزيع الأحرف (في نظام التشغيل Windows) أو لوحة الأحرف (في نظام التشغيل Mac) على جهاز الكمبيوتر الخاص بك.

لون الخلفية

قم بتغيير لون خلفية هذه الوحدة إلى اللون الأبيض.

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

إعدادات النص

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

• خط النص: بوبينز
• لون النص: # 0c0c0c
• حجم النص: 80vw
• اتجاه النص: الوسط

تباعد

قم بتعديل قيم المساحة المتروكة العلوية والسفلية أيضًا.

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

المرشحات

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

• وضع المزج: الشاشة

أضف الصف رقم 2

هيكل العمود

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

تحجيم

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

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

تباعد

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

• الحشوة العلوية: 1vw
• الحشو السفلي: 1vw
• الحشوة اليسرى: 3vw
• الحشوة اليمنى: 3vw

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

أضف محتوى H1

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

إعدادات نص H1

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

• خط العنوان: بوبينز
• وزن خط العنوان: شبه عريض
• محاذاة نص العنوان: الوسط
• لون نص العنوان: # 000000
• حجم نص العنوان: 5vw

تباعد

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

• الهامش العلوي: -38vw

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

الرؤية

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

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

اللون

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

• اللون: # 000000

تحجيم

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

• وزن الحاجز: 13 بكسل
• العرض: 16 بكسل
• محاذاة الوحدة: المركز

تباعد

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

• الهامش العلوي: 2vw
• الهامش السفلي: 2vw

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: Open Sans
• لون النص: # 000000
• حجم النص: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 2.5vw (هاتف)
• ارتفاع خط النص: 1.9em
• اتجاه النص: الوسط

تباعد

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

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

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

أضف نسخة

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

انتقام

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

• محاذاة الزر: الوسط

إعدادات الزر

صمم الزر لجعله يبدو بالضبط بالطريقة التي تريدها.

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

تباعد

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

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

معاينة

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

مثال 1

المثال رقم 2

افكار اخيرة

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

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