كيفية استخدام أوضاع مزج الأنماط على صور خلفية Divi الخاصة بك
نشرت: 2022-07-18تسمح لك إعدادات نمط الخلفية المدمجة في Divi بإنشاء تصميمات لافتة للنظر وإضافة بعض الذوق إلى صور الخلفية على موقع الويب الخاص بك. يمكنك استخدام إعدادات أوضاع المزج لضبط الطريقة التي يمزج بها النمط مع صورة الخلفية. اجمع بين صور الخلفية والأنماط وأوضاع المزج لإنشاء خلفيات وعناصر تصميم فريدة للتخطيط الخاص بك. مع وجود 24 نمطًا للاختيار من بينها و 16 وضعًا للمزج ، ناهيك عن جميع الإعدادات الأخرى التي يمكنك استخدامها لضبط مظهر النموذج ، فإن السماء هي الحد الأقصى لتصميم الخلفية!
في هذا البرنامج التعليمي ، سنعرض لك بعض الأمثلة عن كيفية إضافة نمط مزج إلى صور الخلفية على صفحتك. تابع معنا لإعادة إنشاء هذه الإطلالات بنفسك ، أو استخدمها كمصدر إلهام لإنشاء تصميماتك المخصصة.
هيا بنا نبدأ!
نظرة خاطفة
فيما يلي معاينة لما سنقوم بتصميمه في هذا البرنامج التعليمي.
التخطيط الأول
التخطيط الثاني
التخطيط الثالث
ما تحتاجه للبدء
قبل أن نبدأ ، قم بتثبيت وتنشيط Divi Theme وتأكد من أن لديك أحدث إصدار من Divi على موقع الويب الخاص بك.
الآن ، لنبدأ!
كيفية استخدام أوضاع مزج الأنماط على صور خلفية Divi الخاصة بك
قم بإنشاء صفحة جديدة باستخدام تخطيط مسبق الصنع
سنبدأ باستخدام تخطيط مسبق من مكتبة Divi. لهذا التصميم ، سوف نستخدم Marina Landing Page من Marina Layout Pack.
أضف صفحة جديدة إلى موقع الويب الخاص بك وأعطها عنوانًا ، ثم حدد خيار استخدام Divi Builder.
سنستخدم تخطيطًا معدًا مسبقًا من مكتبة Divi لهذا المثال ، لذا حدد استعراض التخطيطات.
ابحث عن تخطيط الصفحة المقصودة لمارينا وحدده.
حدد استخدام هذا التخطيط لإضافة التخطيط إلى صفحتك.
الآن نحن جاهزون لبناء تصميمنا.
التخطيط الأول
بالنسبة لتصميمنا الأول ، سنضيف نمط شيفرون إلى صورة الرأس الأولى. سيضيف هذا بعض الاهتمام البصري إلى العنوان. نظرًا لوضع الدمج الذي سنطبقه ، سيكون النمط أكثر دقة وسيظل يسمح بظهور صورة الخلفية.
أولاً ، افتح إعدادات القسم وانتقل إلى قسم الخلفية. انقر فوق علامة تبويب النمط وحدد Add Background Pattern.
بعد ذلك ، حدد نوع النمط. كما ترى ، هناك العديد من الأنماط المختلفة للاختيار من بينها ، ويمكن تخصيصها جميعًا بشكل أكبر من خلال إعدادات النمط أدناه.
- نوع النمط: شيفرون مقلوب 2
إضافة نمط مزج النمط
أخيرًا ، اضبط وضع مزج النمط. سنستخدم وضع مزيج Soft Light لهذا العنوان. يجعل وضع المزج هذا النمط أكثر دقة بحيث لا يصرف الانتباه عن صورة الخلفية.
- وضع مزيج النمط: ضوء خفيف
تصميم نهائي
هذا هو التصميم النهائي لتخطيطنا الأول.
هنا هو عرض المحمول لهذا التصميم.
التخطيط الثاني
بالنسبة إلى التخطيط الثاني ، سنضيف نمطًا إلى قسم "كيف تعمل" في تخطيط الصفحة المقصودة لمارينا. سنستخدم نمط موجة متراكب على صورة الخلفية والتدرج اللوني ، والذي يتناسب بشكل جيد مع المظهر البحري للصفحة. هيا بنا نبدأ.
أولاً ، انتقل إلى قسم How it Works وافتح إعدادات القسم. افتح إعدادات الخلفية ، ثم حدد علامة التبويب النقش ثم انقر فوق إضافة نمط الخلفية.
بالنسبة لهذا التصميم ، سوف نستخدم نوع نمط الموجات.
- نوع النمط: أمواج
بعد ذلك ، قم بتغيير لون النمط إلى الأبيض.
- لون النقش: #FFFFFF
إضافة نمط مزج النمط
الآن يمكننا إضافة وضع المزج إلى نمطنا. اضبط وضع مزج النمط على التراكب. يجعل وضع المزج هذا الألوان الداكنة في صورة الخلفية أغمق والألوان الفاتحة أفتح. عند إضافة وضع المزج إلى هذا القسم ، يحول نمط الموجة البيضاء ظلال من اللون الأزرق ، مما يخلق تأثيرًا مثيرًا للنمط يبدو رائعًا مع تصميم هذه الصفحة.
- وضع مزيج النمط: تراكب
تصميم نهائي
هذا هو التصميم النهائي لقسم How it Works.
وها هو تصميم الهاتف المحمول.
التخطيط الثالث
لنبدأ في التخطيط الثالث. بالنسبة لهذا التصميم ، سنضيف بعض الخطوط القطرية المعتمة إلى خلفية قسم "أعلى مستوى من الأمان والإصلاحات".
ابدأ بفتح إعدادات القسم والانتقال إلى قسم الخلفية. انقر فوق علامة تبويب النمط ثم حدد Add Background Pattern.
حدد نمط Diagonal Stripes.
بعد ذلك ، اضبط لون النمط.
- لون النمط: rgba (255،255،255،0.25)
اقلب النمط أفقيًا باستخدام إعدادات تحويل النقش. هذا إعداد آخر يمكن أن يساعدك في ضبط النمط حسب رغبتك.
- تحويل النمط: أفقي
إضافة نمط مزج الوضع
أخيرًا ، اضبط وضع مزج النمط. بالنسبة لهذا التصميم ، سوف نستخدم وضع مزج اللمعان. هذا بالإضافة إلى لون النمط الخاص بنا يضيف شاشة مضيئة إلى الصورة ولكنه لا يزال يسمح للصورة بالظهور من خلالها. مع هذا التصميم ، تبرز صورة القارب أكثر من الخلفية حيث يضيف النمط تباينًا مميزًا.
- وضع مزيج النمط: اللمعان
تصميم نهائي
هذا هو التصميم النهائي لهذا القسم.
وهنا تصميم الجوال لهذا القسم.
النتيجة النهائية
الآن دعنا نلقي نظرة على التصميم الكامل للصفحة مع أوضاع مزج الأنماط.
افكار اخيرة
يمكن أن تكون إضافة نمط طريقة رائعة لإضافة اهتمام بصري إلى صورة الخلفية ، ولكن في بعض الأحيان يمكن للنمط أن يطغى على صورة الخلفية. أو ربما تريد أن يتغير لون النمط الخاص بك بناءً على الصورة الموجودة خلفه. لحسن الحظ ، يأتي Divi مع العديد من أوضاع المزج بحيث يمكنك تخصيص الأنماط بقدر ما تريد. يمكنك اللعب بمجموعات مختلفة من الأنماط وأوضاع المزج وألوان الأنماط وأحجام الأنماط والعديد من إعدادات Divi الأخرى لإنشاء تصميم فريد تمامًا لصورك الخلفية.
نأمل أن يكون هذا البرنامج التعليمي قد ألهمك لدمج بعض الأنماط واستخدام أوضاع المزج في تصميمات موقع الويب الخاص بك! للحصول على برنامج تعليمي آخر للتصميم باستخدام الأنماط ، تحقق من هذا البرنامج التعليمي لتتعلم كيفية إنشاء أقنعة نمط خلفية دقيقة. وللحصول على نظرة عامة على المرشحات والتأثيرات وأنماط المزج المختلفة التي يمكنك استخدامها مع Divi ، ألق نظرة على هذه المقالات: الجزء 1 والجزء 2. هل استخدمت أنماط Divi وأوضاع المزج على صور الخلفية الخاصة بك من قبل؟ اسمحوا لنا أن نعرف في التعليقات!