هل ترغب في استخدام قناع Divi وتراكب نمط الخلفية؟

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

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

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

لنبدأ!

مسح

إليك نظرة عامة سريعة على أقسام الأبطال الخمسة التي سننشئها في هذه المقالة اليوم.

تحميل DIVI الآن !!!

التصميمات دقيقة وبسيطة ومؤثرة.

اقرأ أيضا: Divi: كيفية استخدام "Gradient Builder" لتجميل صورك

قم بإنشاء صفحة جديدة باستخدام Divi Builder

للبدء ، سوف تحتاج إلى القيام بما يلي:

من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.

تم تحويل خطوط Divi إلى علامات تبويب

أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder

ثم انقر فوق ابدأ البناء (البناء من الصفر)

تم تحويل خطوط Divi إلى علامات تبويب

بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.

خمسة أمثلة لقناع الخلفية وتراكبات الأنماط لتطبيقها على صورة الخلفية

أولاً ، لنقم بإنشاء قسم Hero

تستخدم جميع تصميمات النماذج الخاصة بنا نفس بنية القسم والصف والعمود ، لذا فلنقم بإعدادها الآن.

1. إنشاء هيكل تخطيط

أضف صفًا إلى صفحتك ، ثم انقر على رمز "+" الأخضر لإظهار بنية العمود وتحديد العمود الأول ، العمود الكامل العرض.

2. إضافة تباعد المقاطع

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

في علامة التبويب "التباعد" ، قم بتحديث ما يلي:

  • سطح المكتب: 400 بكسل (علوي وسفلي)
  • الكمبيوتر اللوحي: 200 بكسل (أعلى وأسفل) ؛ 25 بكسل (يسار ويمين)
  • الهاتف: 50 بكسل (أعلى وأسفل) ؛ 25 بكسل (يسار ويمين)

تصميم قسم البطل رقم 1

لنقم بتصميم قسم البطل الأول.

تراكب الأقنعة وأنماط الخلفية لـ Divi

تحميل DIVI الآن !!!

1. إضافة نص العنوان

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

أدخل نص العنوان ، ثم أسفل علامة التبويب نص العنوان، قم بتكوين هذه الإعدادات:

  • خط العنوان: Work Sans
  • لون النص: أبيض #ffffff
  • حجم نص العنوان:
    • سطح المكتب: 3 م
    • الجهاز اللوحي: 2,2 em
    • الهاتف: 1.4em

2. إضافة زر وحدة

أضف زرًا وقم بتكوين هذه الإعدادات:

  • تحت علامة التبويب كونتينs: اكتشف المزيد
  • تحت علامة التبويب انحياز، اختر: المركز
  • انقر استخدام الأنماط المخصصة للزر ثم قم بتكوين:
    • حجم نص الزر:
      • سطح المكتب: 20 بكسل
      • الجهاز اللوحي: 16 بكسل
      • الهاتف: 14 بكسل
    • لون نص الزر: #ffffff
    • الخلفية: # 1d1d1d
    • عرض حد الزر: 0
    • نصف قطر الحدود: 0
    • تباعد الأحرف: 3 نقاط
    • خط الزر: العمل بلا
    • نمط الخط: TT

3. أضف صورة خلفية

الآن بعد أن لدينا محتويات تم تكوينه، وحان الوقت للبدء في تصميم خلفية القسم.

  • انتقل إلى تبديل الخلفية وانقر على علامة التبويب الثالثة ، علامة تبويب الصورة ، ثم انقر فوق "إضافة صورة خلفية".
  • سيؤدي ذلك إلى عرض مكتبة الوسائط الخاصة بك ، حيث يمكنك تحديد صورة أو تحميل صورة جديدة.
  • بمجرد تحديد صورتك ، انقر فوق الزر "تحميل صورة" في الزاوية اليمنى السفلية.

4. إضافة نمط الخلفية

الآن بعد أن قمنا بإعداد صورة الخلفية الخاصة بنا ، دعنا نضيف نمطًا.

  • في علامة التبويب خلفيّة، انتقل إلى علامة التبويب الخامسة ، علامة التبويب نمط الخلفية، ثم انقر فوق "إضافة نمط الخلفية".
  • اختر معنقد من القائمة المنسدلة وقم بتهيئة هذه الإعدادات:
    • لون النمط - rgba (255,255,255,0.31،XNUMX،XNUMX،XNUMX)
    • تحويل النمط: لا شيء
    • الحجم: الحجم الفعلي
    • أصل تكرار النمط: أعلى أسفل
    • تكرار النمط: كرر
    • وضع المزج: عادي

5. إضافة قناع الخلفية

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

  • في علامة التبويب خلفيّة، انتقل إلى علامة التبويب السادسة ، علامة التبويب قناع الخلفية، ثم انقر فوق "إضافة قناع خلفية".
  • اختر فاصوليا من القائمة المنسدلة وقم بتهيئة هذه الإعدادات:
    • لون القناع: rgba (0,0,0,0.36،XNUMX،XNUMX،XNUMX)
    • نسبة عرض القناع: مستطيل أفقي
    • الحجم: تمتد لملء

لذا ! لديك الآن قسم بطل مصمم بشكل جميل.

تصميم القسم Hero # 2

الآن دعونا نصمم قسم البطل الثاني.

تراكب الأقنعة وأنماط الخلفية لـ Divi

1. أضف صورة خلفية واضبط وضع المزج على تراكب

حدد صورة الخلفية الخاصة بك ، واضبط وضع المزج على تراكب وأضف لون تراكب لـ rgba (10,10,10,0.64 ، XNUMX ، XNUMX ، XNUMX).

2. إضافة نمط الخلفية

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

  • في علامة التبويب الخلفية ، انتقل إلى علامة التبويب الخامسة ، علامة التبويب نمط الخلفية، ثم انقر فوق "إضافة نمط الخلفية".
  • اختر معنقد من القائمة المنسدلة وقم بتهيئة هذه الإعدادات:
    • لون النمط - rgba (255,255,255,0.09،XNUMX،XNUMX،XNUMX)
    • تحويل النمط: لا شيء
    • الحجم: غطاء
    • أصل تكرار النمط: أعلى اليسار
    • تكرار النمط: كرر
    • وضع المزج: عادي

3. إضافة قناع الخلفية

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

  • في علامة التبويب خلفيّة، انتقل إلى علامة التبويب السادسة ، علامة التبويب قناع الخلفية، ثم انقر فوق "إضافة قناع الخلفية".
  • اختر الإقحام من القائمة المنسدلة وقم بتهيئة هذه الإعدادات:
    • لون القناع: rgba (0,0,0,0.36،XNUMX،XNUMX،XNUMX)
    • تحويل القناع: لا شيء
    • نسبة العرض إلى الارتفاع: مستطيل أفقي
    • حجم القناع: تمتد لملء
    • وضع مزيج القناع: عادي

تصميم القسم Hero # 3

الآن دعونا نصمم قسم البطل الثالث.

تراكب الأقنعة وأنماط الخلفية لـ Divi

1. أضف صورة خلفية واضبط وضع المزج على تراكب

حدد صورة الخلفية الخاصة بك ، واضبط وضع المزج على تراكب وأضف لون تراكب لـ rgba (10,10,10,0.39 ، XNUMX ، XNUMX ، XNUMX).

2. إضافة نمط الخلفية

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

  • في علامة التبويب خلفيّة، انتقل إلى علامة التبويب السادسة ، علامة التبويب نمط الخلفية، ثم انقر فوق "إضافة نمط الخلفية".
  • اختر خطوط قطرية 2 من القائمة المنسدلة وقم بتهيئة هذه الإعدادات:
    • لون النمط - rgba (0,0,0,0.06،XNUMX،XNUMX،XNUMX)
    • تحويل النمط: لا شيء
    • الحجم: الحجم الفعلي
    • أصل تكرار النمط: أعلى اليسار
    • تكرار النمط: كرر
    • وضع المزج: عادي

3. إضافة قناع الخلفية

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

  • في علامة التبويب خلفيّة، انتقل إلى علامة التبويب السادسة ، علامة التبويب قناع الخلفية، ثم انقر فوق "إضافة قناع الخلفية".
  • اختر مثلثات من القائمة المنسدلة وقم بتهيئة هذه الإعدادات:
    • لون القناع: rgba (10 ، 10 ، 10 ، 0,61)
    • تحويل القناع: لا شيء
    • نسبة العرض إلى الارتفاع: مستطيل أفقي
    • حجم القناع: تمتد لملء
    • وضع مزيج القناع: عادي

تصميم القسم Hero # 4

الآن دعونا نصمم القسم الرابع من Hero.

تراكب الأقنعة وأنماط الخلفية لـ Divi

1. أضف صورة خلفية

حدد صورة الخلفية الخاصة بك.

2. إضافة نمط الخلفية

الآن بعد أن أضفنا صورة الخلفية الخاصة بنا ، دعنا نضيف نمط خلفية.

  • في علامة التبويب خلفيّة، انتقل إلى علامة التبويب السادسة ، علامة التبويب نمط الخلفية، ثم انقر فوق "إضافة نمط الخلفية".
  • اختر ابتسامات من القائمة المنسدلة وقم بتهيئة هذه الإعدادات:
    • لون النمط - rgba (0,0,0,0.2،XNUMX،XNUMX،XNUMX)
    • تحويل النمط: لا شيء
    • الحجم: غطاء
    • كرر الأصل: أعلى اليسار
    • تكرار النمط: كرر
    • وضع مزج الأنماط: عادي

3. إضافة قناع الخلفية

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

  • في علامة التبويب خلفيّة، انتقل إلى علامة التبويب السادسة ، علامة التبويب قناع الخلفية، ثم انقر فوق "إضافة قناع الخلفية".
  • اختر كورنر ليك  من القائمة المنسدلة وقم بتهيئة هذه الإعدادات:
    • لون القناع: rgba (10 ، 10 ، 10 ، 0,61)
    • تحويل القناع: أفقي
    • نسبة العرض إلى الارتفاع: مستطيل أفقي
    • الحجم: غطاء
    • وضع القناع: وسط اليسار
    • وضع خلاط القناع: عادي

3. تكوين معلمات الخط

قبل أن نذهب ، يحتوي قسم Hero هذا على أنماط خطوط فريدة. لنقم بإعداد هذا.

  • تحجيم:
    • العرض: 80٪
    • العرض الأقصى: 800 بكسل
  • محاذاة الصف:
    • سطح المكتب: افتراضي
    • الجهاز اللوحي: المركز
    • الهاتف: المركز
  • الهوامش:
    • اليسار: 20vw

قسم بطل # 5 تصميم

الآن دعونا نصمم قسم البطل الخامس.

تراكب الأقنعة وأنماط الخلفية لـ Divi

تحميل DIVI الآن !!!

1. أضف صورة خلفية

حدد صورة الخلفية الخاصة بك.

2. أضف نمطًا

الآن بعد أن قمنا بإعداد صورة الخلفية الخاصة بنا ، دعنا نطبق نمط الخلفية.

  • في علامة التبويب خلفيّة، انتقل إلى علامة التبويب السادسة ، علامة التبويب نمط الخلفية، ثم انقر فوق "إضافة نمط الخلفية".
  • اختر الصلبان من القائمة المنسدلة وقم بتهيئة هذه الإعدادات:
    • لون النقش - #ffffff
    • تحويل النمط: لا شيء
    • الحجم: حجم مخصص
    • عرض النمط: 10 بكسل
    • ارتفاع النمط: 10 بكسل
    • كرر الأصل: من أعلى إلى أسفل
    • تكرار النمط: كرر
    • وضع مزج الأنماط: عادي

3. إضافة قناع الخلفية

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

  • في علامة التبويب خلفيّة، انتقل إلى علامة التبويب السادسة ، علامة التبويب قناع الخلفية، ثم انقر فوق "إضافة قناع الخلفية".
  • اختر حبوب قطرية  من القائمة المنسدلة وقم بتهيئة هذه الإعدادات:
    • لون القناع: rgba (10 ، 10 ، 10 ، 0,61)
    • تحويل القناع: أفقي
    • نسبة العرض إلى الارتفاع: مستطيل أفقي
    • الحجم: غطاء
    • وضع القناع: يسار الوسط
    • وضع مزيج القناع: عادي

3. تكوين معلمات الخط

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

  • تحجيم:
    • العرض: 80٪
    • العرض الأقصى: 800 بكسل
  • محاذاة الصف:
    • سطح المكتب: افتراضي
    • الجهاز اللوحي: المركز
    • الهاتف: المركز
  • التباعد:
    • الهامش (يمين): 18vw

أنظر أيضا: Divi: كيفية إضافة الأقنعة وأنماط الخلفية إلى الرأس

وفي الختام

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

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

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

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

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

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

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

...