هل ترغب في تصميم خلفية فريدة باستخدام أقنعة النمط؟ Divi ?
أقنعة نمط الخلفية الجديدة من Divi فتحت العديد من خيارات التصميم للخلفيات. إنها تعمل بشكل رائع مع ألوان وأنماط الخلفية لإنشاء العديد من التصميمات الفريدة.
في هذه المقالة ، سنرى كيفية إنشاء أقنعة نمط الخلفية الدقيقة باستخدام Divi . سنناقش أيضًا فوائد استخدام قناع دقيق وإنشاء ثلاثة أمثلة.
دعونا نبدأ.
معاينة قناع نمط الخلفية
قبل أن نبدأ في التصميم ، إليك معاينة لما سنبنيه في هذا البرنامج التعليمي Divi.
مثال 1
اقرأ أيضا: ديفي: كيفية تغيير التدرج اللوني للخلفية عند التمرير
مثال 2
مثال 3
كيفية إنشاء قناع الخلفية
سيغطي قناع الخلفية نمط الخلفية ويكشف عن أجزاء من النموذج. إنه يعمل جدا جيد مع ألوان الخلفية والأنماط. يمكنك ضبط الخلفية لتناسب محتويات، أضبط ال محتويات لتناسب الخلفية أو ضبط كليهما.
أنظر أيضا: Divi: كيفية استخدام "Gradient Builder" لتجميل صورك
أولاً ، افتح ملف معلمات القسم حيث تريد إضافة قناع الخلفية.
بعد ذلك ، ستحتاج إلى اختيار لون الخلفية للقسم. انتقل إلى خلفيّة. مع تحديد علامة التبويب "الخلفية" ، اختر لونك الخلفية في منتقي الألوان.
بعد ذلك ، ستحتاج إلى اختيار نمط الخلفية وتعيين حجمه وموقعه. حدد علامة التبويب نمط الخلفية وانقر إضافة نمط الخلفية.
هذا يفتح قائمة خيارات النموذج. اختر النمط الخاص بك في القائمة. سوف يكمل القسم.
بعد ذلك ، ستحتاج إلى اختيار قناع الخلفية وتعديل لونه وإعداداته بما يتناسب مع تصميمك. حدد علامة التبويب قناع الخلفية وانقر أضف قناع الخلفية.
سيتم فتح مشروط آخر بخيارات القناع. اختر قناعك الخلفية في القائمة. سيكون القناع أبيض حتى تختار لونًا.
اضبطهم إعدادات قناع الخلفية لتحقيق المظهر المطلوب. يمكنك تغيير حجم القناع وموضعه واتجاهه ودورانه وما إلى ذلك. يمكن أن يساعدك اللعب بهذه الإعدادات في إنشاء تصميمات مثيرة للاهتمام.
إليك معاينة للخلفية التي أنشأناها للتو بدون أي وحدات. الألوان متشابهة ، لكنها مختلفة بما يكفي لتبرز قليلاً. هذا يمنعها من أن تكون مشتتة للغاية.
أمثلة دقيقة لقناع نمط الخلفية
الآن دعونا نلقي نظرة على ثلاثة أمثلة لقناع الخلفية.
نضيف قناع خلفية إلى قسم Hero في صفحة هبوط مجانية للشركة متوفر في Divi.
فيما يلي معاينة للصفحة الأصلية قبل إضافة أقنعة أنماط الخلفية.
سنقوم أيضًا بتغيير ألوان الخلفية للأزرار. باستخدام نفس مفاهيم التصميم الدقيقة ، سنجعلها تبرز أكثر من الخلفية.
يعتبر الحاجز عنصرًا آخر سنشاهده يتغير في اللون ، لكن هذا العنصر يستخدم الشفافية للحصول على لونه من الخلفية ، لذلك لن نحتاج إلى تغيير لونه.
مثال 1
سيستخدم هذا المثال الخلفية الأصلية وألوان الأزرار.
لون الخلفية
في مثالنا الأول ، نستخدم لون الخلفية الأصلي لهذا التخطيط - # 1d1d25. سنحتفظ أيضًا بلون الزر الأصلي - # 4c594c
- لون الخلفية: # 1d1d25
- لون الزر: # 4c594c
نمط الخلفية
حدد علامة التبويب نقش الخلفية واختر خطوط قطرية 2. قم بتغيير لون النمط إلى # 383838.
- نمط الخلفية: خطوط قطرية 2
- لون النقش: # 383838
- الحجم: الحجم الفعلي
- كرر الأصل: أعلى اليسار
- تكرار النمط: كرر
قناع الخلفية
ثم حدد علامة التبويب الخلفية قناع. اختار الإقحام وقم بتعيين اللون على # 383838.
- القناع: علامة الإقحام
- لون القناع: # 383838
تحت لون القناع ، حدد الخيار التحول الأفقي و ابعاد متزنة لَوحَة. أغلق إعدادات القسم واحفظ عملك.
- تحويل القناع: أفقيًا
- نسبة عرض القناع: كبير (عمودي)
مثال 2
في المثال الثاني ، سنقوم بتغيير ألوان الخلفية والأزرار إلى اللون الأرجواني.
لون الخلفية
افتحها معلمات القسم . تأكد انه انت على علامة التبويب لون الخلفية وتغييره اللون في # 483c56.
- الخلفية: # 483c56
نمط الخلفية
ثم حدد علامة التبويب نمط الظهر الخلفية واختر معنقدة لنمط الخلفية. قم بتغيير لون النمط إلى # 635c84.
- نمط الخلفية: معنقدة
- لون النقش: # 635c84
ثم اختر حجم مخصص . هذا يفتح مجموعة أخرى من الخيارات. غيره عرض في 10vw.
- حجم النمط: حجم مخصص
- عرض النمط: 10vw
- كرر الأصل: أعلى اليسار
- تكرار النمط: كرر
قناع الخلفية
حان الوقت الآن لتكوين قناع الخلفية الخاص بنا.
حدد علامة التبويب قناع الخلفية واختر القناع المسمى Arch. قم بتغيير لونه إلى # 67557a.
- القناع: القوس
- لون القناع: # 67557a
بعد ذلك ، قم بتعيين خياراته لـ تحول في الوضع الأفقي والعمودي والدوران. بالنسبة إلى ابعاد متزنة، اختر الخيار الواسع أو الأفقي. أغلق إعدادات القسم.
- تحويل القناع: أفقي وعمودي ودوران
- نسبة عرض القناع: عريض (أفقي)
زر
أخيرًا ، دعنا نضبط زر CTA في قسم Hero هذا. نريد أن ينسجم مع التصميم ، لكننا نريده أيضًا أن يبرز.
افتحها إعدادات الزر. سيتعين علينا فقط تغيير لون الخلفية. يمكن أن يكون لونًا مشابهًا للخلفية ، ولكنه مختلف بما يكفي حتى لا يضيع على الصفحة. سنختار لونًا أكثر إشراقًا للخلفية. سنترك نفس لون النص.
حدد علامة التبويب تصميم ، انتقل إلى خلفيّة وتعديل لون خلفية الزر في # 8b4dc1. إنه يعطينا التباين الذي نريده ويعمل بشكل رائع مع خلفية الأرجواني. أغلق إعدادات الزر واحفظ صفحتك.
- خلفية الزر: # 8b4dc1
مثال 3
بالنسبة لمثالنا الثالث ، سنقوم بتغيير ألوان الخلفية والأزرار إلى اللون الأخضر باستخدام نفس المفاهيم مثل المثالين السابقين.
لون الخلفية
أولاً ، افتح ملف معلمات القسم . مع علامة التبويب لون الخلفية.
- الخلفية: # 497762
نمط الخلفية
ثم حدد علامة التبويب نمط الخلفية، وتغيير معلمات المجموع لمتابعة.
- نمط الخلفية: مربعات
- لون النقش: # 3a604e
- الحجم: الحجم الفعلي
- أصل تكرار النمط: أعلى اليسار
- تكرار النمط: كرر
قناع الخلفية
ثم حدد علامة التبويب الخلفية قناع.
- القناع: خطوط قطرية
- اللون: # 3a604e
بعد ذلك ، قم بتعيين المعلمات التالية:
- تحويل القناع: أفقيًا
- نسبة عرض القناع: أفقي
- الحجم: غطاء
- موضع القناع: أعلى الوسط
زر
أخيرًا ، افتح ملف إعدادات الزر وحدد علامة التبويب "تصميم". قم بالتمرير لأسفل وقم بتغيير ملف لون خلفية الزر في # 61a380. أغلق إعدادات الوحدة واحفظ عملك.
- خلفية الزر: # 61a380
النتائج النهائية
أنظر أيضا: Divi: كيفية تخصيص السلة والبحث عن أيقونات وحدة "Fullwidth Menu"
هذا ما تبدو عليه أقنعة أنماط الخلفية في قسم الأبطال في تخطيطنا.
مثال 1
مثال 2
مثال 3
تحميل DIVI Now !!!
وفي الختام
هذه هي نظرتنا إلى كيفية إنشاء أقنعة نمط خلفية دقيقة باستخدام Divi. يبرز القناع الخفي بما يكفي لإعطاء الخلفية الملمس المرئي. تبدو رائعة دون تشتيت الانتباه عن عبارات الحث على اتخاذ إجراء والعناصر الأخرى.
أقنعة نمط الخلفية لـ Divi سهلة الاستخدام وتتيح لك إعداداتها إنشاء شيء فريد. جرب الإعدادات لإنشاء أقنعة أنماط الخلفية الخاصة بك.
نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
