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

أقنعة ديفي الجديدة وأنماط الخلفية هي واحدة من أروع ميزات التصميم الجديدة لدينا حتى الآن. يمكن دمج كل من الأقنعة والأنماط مع عناصر الخلفية الأخرى (مثل الألوان والصور والتدرجات اللونية) للحصول على مجموعات فريدة لا حصر لها بنقرات قليلة فقط.

اليوم سوف نوضح لك كيفية الاستخدام Divi وأقنعة جديدة وأنماط خلفية لتصميم قسم البطل. 

في هذا البرنامج التعليمي ، سنغطي الخطوات المهمة اللازمة لإنشاء الأقنعة وأنماط الخلفية. 

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

مسح

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

اقرأ أيضا: Divi: كيفية إنشاء شبكة صور سريعة الاستجابة مع روابط وتأثيرات تحوم

مثال على قسم البطل بقناع ونمط أبيضين.

استخدم الأقنعة والأنماط لقسم البطل في Divi

هنا نسخة داكنة من نفس قسم البطل بقناع ونمط أسود.

استخدم الأقنعة والأنماط لقسم البطل في Divi

مع هذا التصميم في مكانه ، يمكنك بسهولة تغيير الأقنعة ومواضع القناع ببضع نقرات!

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

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

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

أعطه عنوانًا منطقيًا لك وانقر استعمل Divi منشئ

#عنوان الصورة

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

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

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

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

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

بالنسبة إلى قسم البطل هذا ، ننتقل إلى بنية تخطيط كلاسيكية مع العنوان وعبارة الحث على اتخاذ إجراء على اليسار وصورة (أو تصميم مرئي) على اليمين. 

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

قسم أقنعة وأنماط خلفية ديفي بطل

2. أضف العنوان والعبارة التي تحث المستخدم على اتخاذ إجراء

في العمود الأيمن (العمود 1) ، أضف وحدة نصية لعنوانك الرئيسي ، ووحدة نصية لنص الترجمة ووحدة زر للزر الخاص بك.

قسم أقنعة وأنماط خلفية ديفي بطل
قسم أقنعة وأنماط خلفية ديفي بطل

3. أضف مسافات رأسية إلى القسم

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

افتح إعدادات القسم. ضمن علامة تبويب التصميم ، قم بتحديث المساحة المتروكة على النحو التالي:

  • حشوة:
    • سطح المكتب: أعلى 20vw ، أسفل 20vw
    • الجهاز اللوحي: أعلى 8vw ، أسفل 48vw
    • الهاتف: Top 8vw، Bottom 70vw
قسم أقنعة وأنماط خلفية ديفي بطل

4. إضافة صورة الخلفية والتدرج

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

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

تحت علامة التبويب الصورة الخلفيةقم بتحميل الصورة في خلفية القسم.

قسم أقنعة وأنماط خلفية ديفي بطل

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

  • توقفات متدرجة:
    • 0٪: # 3e22ff
    • 100٪: واضح
  • مربع التدرج فوق صورة الخلفية: نعم
قسم أقنعة وأنماط خلفية ديفي بطل

5. قم بإنشاء نمط خلفية للقسم

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

في هذا المثال ، سنستخدم نمطًا دقيقًا يضيف القليل من النسيج لمنحه مظهرًا فريدًا أكثر.

تحت علامة التبويب أنماط الخلفية، قم بتحديث ما يلي:

  • نمط الخلفية: معنقدة
قسم أقنعة وأنماط خلفية ديفي بطل

حيلة : مع أنماط الخلفية ، من الأفضل عادةً إبقائها دقيقة. جرب استخدام أحجام مخصصة لتصميمات أصغر ، ثم قلل من عتامة اللون.

6. قم بإنشاء قناع خلفية للقسم

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

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

  • القناع: قرص العسل
  • لون القناع: #ffffff
  • الحجم: غطاء
قسم أقنعة وأنماط خلفية ديفي بطل

7. ضبط موضع صورة الخلفية

نظرًا لأننا نستخدم قناع الخلفية ، يتم إخفاء جزء من صورة الخلفية لدينا (أو "مقنع").

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

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

  • موضع صورة الخلفية: أسفل اليمين
  • الإزاحة الأفقية لصورة الخلفية: -4vw

8. استخدم وضع المزج

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

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

  • مزيج صورة الخلفية: مضاعفة
قسم أقنعة وأنماط خلفية ديفي بطل

9. ضبط قناع الخلفية للجوال

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

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

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

تحت علامة التبويب قناع الخلفية، قم بتمكين خيارات الاستجابة وتحديث ما يلي:

إصدار الجهاز اللوحي

  • تحويل القناع: انعكاس عمودي ، انعكاس أفقي ، تدوير
  • نسبة عرض القناع: مربع
قسم أقنعة وأنماط خلفية ديفي بطل

نسخة الهاتف

  • تحويل القناع: انعكاس عمودي ، انعكاس أفقي ، تدوير
  • نسبة عرض القناع: عمودي
قسم أقنعة وأنماط خلفية ديفي بطل

النتيجة

تحقق من التصميم الذي قمنا بإنشائه حتى الآن.

حاسوب مكتب

استخدم الأقنعة والأنماط لقسم البطل في Divi

نسخة الجهاز اللوحي

استخدم الأقنعة والأنماط لقسم البطل في Divi

إصدار الهاتف

استخدم الأقنعة والأنماط لقسم البطل في Divi

10. إنشاء نسخة غامقة

إذا كنت تريد إصدارًا غامقًا من هذا التصميم ، فما عليك سوى تغيير لون قناع الخلفية إلى لون غامق (مثل الأسود).

قسم أقنعة وأنماط خلفية ديفي بطل

ثم قم بتغيير لون النمط إلى اللون الأسود.

قسم أقنعة وأنماط خلفية ديفي بطل

ثم قم بتغيير العنوان ونص الترجمة إلى الأبيض. وقد ترغب في تحديث لون الزر أيضًا.

قسم أقنعة وأنماط خلفية ديفي بطل

هذا ما تبدو عليه النسخة المظلمة.

استخدم الأقنعة والأنماط لقسم البطل في Divi

النتائج النهائية

أنظر أيضا: Divi: كيفية تخصيص رابط "قراءة المزيد" في مدونة

إليك نظرة أخرى على نتائجنا النهائية.

استخدم الأقنعة والأنماط لقسم البطل في Divi
استخدم الأقنعة والأنماط لقسم البطل في Divi

تحميل DIVI Now !!!

وفي الختام

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

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

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

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

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

...