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

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

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

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

هيا بنا نبدأ!

ما نبتكره

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

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

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

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

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

تنزيل مجاني

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

تحميل

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

كيفية تنزيل واستخدام التخطيطات

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، قم بما يلي:

1. انتقل إلى مكتبة Divi.
2. انقر فوق الزر "استيراد" أعلى الصفحة.
3. في نافذة قابلية النقل المنبثقة ، حدد علامة التبويب استيراد.
4. اختر ملف التنزيل من جهاز الكمبيوتر الخاص بك (تأكد من فك ضغط الملف أولاً واستخدم ملف JSON).
5. ثم انقر فوق زر الاستيراد.

بمجرد استيراد التخطيطات بنجاح ، ستظهر في مكتبة Divi الخاصة بك وستكون متاحة للاستخدام في Divi Builder.

الآن ، دعنا نصل إلى البرنامج التعليمي!

ما تحتاجه للبدء

قبل أن نبدأ ، ستحتاج إلى:

1. قم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة ، وانشرها ، وانقر فوق الزر "Use The Divi Builder" لتعديل الصفحة على الواجهة الأمامية باستخدام Visual Builder.
3. حدد الخيار "البناء من الصفر".

الآن لدينا قماش فارغ لبدء التصميم!

كيفية إنشاء 5 قناع خلفية وتراكبات نقش لتطبيقها على صورة الخلفية

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

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

1. إنشاء بنية التخطيط

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

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

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

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

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

كيفية تصميم قسم البطل # 1

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

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

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

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

• عائلة الخط: Work Sans
• لون الخط: أبيض #ffffff
• حجم الخط:
  • سطح المكتب: 3rem
  • الجهاز اللوحي: 2.2 ريم
  • الهاتف: 1.4rem

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

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

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

3. إضافة صورة الخلفية

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

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

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

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

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

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

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

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

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

كيفية تصميم قسم البطل # 2

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

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

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

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

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

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

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

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

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

كيفية تصميم قسم البطل # 3

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

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

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

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

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

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

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

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

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

كيفية تصميم قسم البطل # 4

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

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

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

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

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

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

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

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

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

3. تكوين إعدادات الصف

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

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

كيفية تصميم قسم البطل # 5

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

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

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

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

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

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

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

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

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

3. تكوين إعدادات الصف

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

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

احصل على المزيد من قناع الخلفية وتصميمات الأنماط!

إذا كنت تريد المزيد من التصميمات مثل هذا ، فراجع قناع الخلفية وتصاميم الأنماط الـ 12 هذه مجانًا للتنزيل.

افكار اخيرة

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