ديفي: أفضل موضوع وورد في كل العصور!

أكثر تنزيلات 901.000، Divi هو موضوع WordPress الأكثر شعبية في العالم. إنها كاملة وسهلة الاستخدام وتأتي مع أكثر من 62 قوالب مجانية.

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

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

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

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

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

مسح

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بسهولة إنشاء موقع الويب الخاص بك مع Elementor

يتيح لك Elementor إنشاء ملفات بسهولة ومجانا أي موقع ويب أو تصميم مدونة بمظهر احترافي. توقف عن دفع الكثير مقابل موقع ويب يمكنك القيام به بنفسك.

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

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

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

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

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

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

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

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

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

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

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

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

  • نمط الخلفية: معنقدة

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

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

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

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

  • القناع: قرص العسل
  • لون القناع: #ffffff
  • الحجم: غطاء

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

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

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

هل تريد بيع منتجاتك على الإنترنت؟

قم بتنزيل WooCommerce مجانًا ، أفضل المكونات الإضافية للتجارة الإلكترونية لبيع منتجاتك المادية والرقمية على WordPress وإنشاء متجرك عبر الإنترنت بسهولة. مثالي للمبتدئين.

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

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

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

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

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

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

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

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

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

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

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

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

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

نسخة الهاتف

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

النتيجة

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

حاسوب مكتب

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

إصدار الهاتف

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

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

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

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

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

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

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

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

تحميل DIVI Now !!!

في الختام

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

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

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

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

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

...

%d المدونين مثل هذه الصفحة: