10 حيل تصميم خلفية ممكنة الآن مع إعدادات الخلفية الجديدة لديفي

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

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

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

يتمتع.

إليك نظرة خاطفة على حيل التصميم

كيفية متابعة هذا المنشور

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

10 حيل تصميم الخلفية مع Divi

اشترك في قناتنا على اليوتيوب

الحيلة رقم 1: تراكب قطري

أضف قسم fullwidth ثم أدخل وحدة رأس fullwidth.

ثم قم بتحديث إعدادات وحدة الرأس كما يلي:

خيارات المحتوى

العنوان: [أدخل العنوان]
العنوان الفرعي: [أدخل العنوان الفرعي]
عنوان URL لصورة الشعار: [أدخل الشعار]
ألوان تدرج الخلفية: rgba (12،113،195،0.55) ، rgba (255،255،255،0)
نوع التدرج: خطي
اتجاه التدرج: 135 درجة
موقف البداية: 60٪
المركز النهائي: 60٪ (أي شيء 60٪ أو أقل سيعمل)

نظرًا لأن التدرج يبدأ وينتهي عند نفس النقطة ، فلا يوجد تأثير تدرج على الإطلاق. وبالتالي فإن النتيجة هي اللونان على كل جانب من علامة 60٪. يؤدي ذلك جنبًا إلى جنب مع زاوية اتجاه التدرج إلى إنشاء التأثير.

خيارات التصميم

لون النص: فاتح
خط العنوان: افتراضي ، غامق (B) ، أحرف كبيرة (TT)
حجم خط العنوان: 40 بكسل
حجم خط العنوان الفرعي: 24 بكسل

خيارات متقدمة

ضمن Custom CSS في المربع Main Element ، أضف CSS التالي:

Padding: 150px 0;

هذا فقط لإضافة بعض الحشو الإضافي إلى الجزء العلوي والسفلي من وحدة الرأس

احفظ التغييرات

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

ثم قم بتحديث خيارات محتوى إعدادات القسم على النحو التالي:

صورة الخلفية: [أدخل صورة الخلفية هنا. يجب أن يكون عرضه 1960 بكسل على الأقل. اخترت هذه الصورة من موقع unsplash.com وقمت بقصها بحيث يكون القسم المميز من الصورة على الجانب الأيمن.]
استخدام تأثير المنظر: نعم (هذا اختياري ولكن أعتقد أنه يعمل بشكل جيد مع التراكب القطري)
طريقة المنظر: المنظر الحقيقي

هذا كل شيء! لا تتردد في ضبط عتامة لون التدرج ودرجة اتجاه التدرج حسب رغبتك.

أعتقد أننا بدأنا بداية جيدة. دعنا ننتقل إلى الحيلة الثانية.

الحيلة رقم 2: وضع طبقات تراكبات قطرية

خدعة التصميم هذه هي استمرار للخدعة رقم 1 ، لذا تأكد من إكمال الخدعة رقم 1 قبل المتابعة.

في الحيلة رقم 1 ، توقفنا عن التراكب القطري باستخدام خيار التدرج اللوني للخلفية في Fullwidth Header Module.

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

انتقل إلى إعدادات القسم Fullwidth وقم بتحديث خيارات المحتوى التالية:

ألوان تدرج الخلفية: rgba (131،0،233،0.38) ، rgba (255،255،255،0)
نوع التدرج: خطي
اتجاه التدرج: 135 درجة (نفس اتجاه التدرج الآخر في وحدة الرأس الخاصة بك)
موقف البداية: 38٪
موضع النهاية: 38٪

انقر الآن على أيقونة صورة الخلفية وقم بتغيير ما يلي:

استخدام تأثير المنظر: لا
مزيج صورة الخلفية: مضاعفة

لديك الآن تراكبان قطرية متداخلة يمكن تخصيصها بسهولة لتصميم خلفية فريد.

الحيلة الثالثة: تراكب الدائرة

خدعة التصميم هذه هي استمرار للخدعة رقم 1 ، لذا تأكد من إكمال الخدعة رقم 1 قبل المتابعة.

الآن سنقوم بتحويل هذا التراكب القطري من الخدعة رقم 1 إلى تراكب دائرة. للقيام بذلك ، انتقل إلى إعدادات الوحدة النمطية Fullwidth وقم بتحديث ما يلي:

خيارات المحتوى

نوع التدرج للخلفية: شعاعي
اتجاه شعاعي: المركز
موقف البداية: 30٪
موضع النهاية: 30٪

خيارات التصميم

توجيه النص والشعار: المركز

تحقق الآن من خلفية الرأس الجديدة.

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

فيما يلي مثال لما سيبدو عليه بدون صورة خلفية ولون نص أغمق.

الحيلة رقم 4: طبقات تراكبات الدائرة لإنشاء حدود دائرة

هذا استمرار من الخدعة رقم 3 حيث توقفنا عن إضافة تراكب دائرة إلى وحدة رأس ذات عرض كامل. بمجرد وضع تراكب دائرتك في مكانه ، يمكننا إضافة تراكب دائرة ثانية ليكون بمثابة الحد الأول. نقوم بذلك عن طريق إضافة تدرج خلفية آخر إلى قسم Fullwidth الموجود خلف Fullwidth Header Module.

انتقل إلى إعدادات قسم Fullwidth وقم بتحديث ما يلي:

خيارات المحتوى

ضمن علامة التبويب صورة الخلفية:

استخدام تأثير المنظر: لا
مزيج صورة الخلفية: مضاعفة

ضمن علامة التبويب تدرج الخلفية:

ألوان التدرج الخلفية: rgba (0،0،0،0.45) ، rgba (255،255،255،0)
نوع التدرج للخلفية: شعاعي
اتجاه شعاعي: المركز
موقف البداية: 34٪
موضع النهاية: 34٪

احفظ التغييرات

هذا كل شيء.

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

الحيلة رقم 5: عكس الدائرة تراكب

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

للقيام بذلك ، انتقل إلى إعدادات Fullwidth Header وقم بتحديث ما يلي:

خيارات المحتوى

ألوان تدرج الخلفية: rgba (255،255،255،0) ، rgba (12،113،195،0.79)

ملاحظة: كل ما تفعله هنا هو تبديل الألوان على اليسار واليمين. الآن اللون الشفاف هو ما يظهر داخل الدائرة والتدرج الأزرق المحيط بها. سأزيد من عتامة اللون الأزرق بحيث يكون أغمق قليلاً.

تحقق من ذلك…

الحيلة رقم 6: عكس الدائرة تراكب مع خلفية الفيديو

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

لاستبدال صورة الخلفية بفيديو ، انتقل إلى إعدادات القسم Fullwidth ، وانقر فوق
رمز الفيديو الخلفية وإضافة الفيديو الخاص بك.

انتقل الآن إلى إعدادات الرأس Fullwidth وقم بتحديث ما يلي:

خيارات المحتوى

ألوان التدرج في الخلفية: rgba (12113195.0.67) ، # 333333

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

الحيلة رقم 7: تراكب دائرة معكوسة خارج المركز

هذا استمرار للخدعة رقم 5 التي تركت لنا تراكب دائرة معكوس. إذا عدت إلى إعدادات Fullwidth Header ، فيمكنك ضبط Radial Direction على إعدادات مختلفة لإنشاء أشكال مختلفة لرأسك.

انتقل إلى Fulwidth Header Settings (إعدادات رأس Fulwidth) وقم بتحديث ما يلي:

خيارات المحتوى

الاتجاه الشعاعي: صحيح

خيارات التصميم

اتجاه النص والشعار: يسار

ها هي النتيجة النهائية وبعض الأمثلة على اتجاهات شعاعية مختلفة:

من الواضح أن هذه الأمثلة تحتاج إلى بعض العمل ولكنك حصلت على الفكرة.

الحيلة رقم 8: استخدام التدرجات لتأثيرات الظل

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

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

لإضافة تأثير الظل ، انتقل إلى إعدادات Fullwidth Header وقم بتحديث ما يلي:

خيارات المحتوى

ألوان تدرج الخلفية: rgba (0،0،0،0.55) ، rgba (0،0،0،0)
اتجاه التدرج: 90 درجة
موقف البداية: 38٪
موضع النهاية: 85٪

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

الحيلة رقم 9: مزيج صورة الخلفية

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

في هذا المثال ، سأستمر من Trick # 1 التي توقفت مع تراكب قطري باستخدام خيار تدرج الخلفية في Fullwidth Header Module.

انتقل إلى Fullwidth Header Settings واحذف تدرجات الخلفية ضمن Content Options.

احفظ التغييرات

انتقل الآن إلى إعدادات القسم وقم بتحديث ما يلي:

خيارات المحتوى

ألوان تدرج الخلفية: rgba (0،0،0،0.76) ، # 0c71c3
اتجاه التدرج: 90 درجة
موقف البداية: 50٪
موقف النهاية: 50٪

لا يمكنك رؤية أي تغييرات حتى الآن. حسنا. انتقل إلى علامة التبويب صورة الخلفية وقم بتحديث ما يلي:

استخدام تأثير المنظر: لا
مزيج صورة الخلفية: ضوء شديد

هذا كل شيء. تحقق من النتيجة.

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

الحيلة رقم 10: وضع طبقات لإضافة المزيد من الألوان لخلفيتك المتدرجة.

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

هنا كيف تفعلها. أولاً ، أضف قسمًا عاديًا بصف هيكل مكون من عمود واحد. ثم داخل الصف ، أضف وحدة Blurb Module.

قم بتحديث إعدادات الوحدة النمطية Blurb كما يلي:

خيارات المحتوى

العنوان: [أدخل العنوان]
المحتوى: [أدخل المحتوى]

خيارات التصميم

لون النص: فاتح
اتجاه النص: الوسط
خط الرأس: افتراضي ، غامق (B)
حجم خط الرأس: 56 بكسل
حجم خط الجسم: 22 بكسل
الحشو المخصص: 100 بكسل للأعلى ، 100 بكسل للأسفل

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

سنعمل في طريقنا من الخلف إلى الأمام ، من اليسار إلى اليمين. للبدء ، انتقل إلى إعدادات القسم وقم بتحديث ما يلي:

خيارات المحتوى

ألوان تدرج الخلفية: # ff0077 ، # 0c71c3
اتجاه التدرج: 90 درجة
موقف البداية: 0٪
موضع النهاية: 30٪

خيارات التصميم

الحشو المخصص: 0 بكسل للأعلى ، 0 بكسل للأسفل

الآن دعنا نحدث المستوى التالي من التدرج اللوني - صفنا. انتقل إلى إعدادات الصف وقم بتحديث ما يلي:

خيارات المحتوى

ألوان تدرج الخلفية: rgba (255،255،255،0) ، # 8300e9
اتجاه التدرج: 90 درجة
موقف البداية: 25٪
موقف النهاية: 50٪
ألوان تدرج الخلفية للعمود 1: rgba (255،255،255،0) ، # e02b20
اتجاه التدرج: 90 درجة
موقف البداية: 50٪
موضع النهاية: 75٪

خيارات التصميم
اجعل هذا الصف بعرض كامل: نعم
استخدام عرض مزراب مخصص: نعم
عرض الحضيض: 1
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

احفظ التغييرات

الآن بالنسبة للطبقة النهائية من التدرج اللوني ، نحتاج إلى الانتقال إلى Blurb Module وتحديث ما يلي:

خيارات المحتوى
ألوان تدرج الخلفية: rgba (255،255،255،0) ، # edf000
اتجاه التدرج: 90 درجة
موقف البداية: 75٪
موضع النهاية: 100٪

خيارات التصميم

الحشو المخصص: 100 بكسل للأعلى ، 100 بكسل للأسفل

هذا كل شيء. الآن لديك خمسة ألوان متدرجة تمتزج معًا لإنشاء خلفية ملونة تمامًا.

لا تنس ، يمكنك أيضًا تغيير نوع التدرج إلى شعاعي (دائري) وتغيير التصميم تمامًا (يستغرق حوالي 20 ثانية).

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

خدعة مكافأة

فيما يلي مثال على كيفية وضع طبقات من صور الخلفية مع اختلاف المنظر. هذا قسم عادي به صورة خلفية باستخدام True Parallax. يوجد داخل القسم صف عمود واحد تم إجراؤه بعرض كامل وبدون حشوة بحيث يمتد العرض الكامل للقسم. أضفت إلى الصف صورة خلفية شفافة مع بعض دوائر التدرج (من المفترض أن تبدو مثل الفقاعات) باستخدام طريقة CSS Parallax. ثم أضفت Call to Action Module إلى الصف بخلفية شفافة. تُنشئ هذه المجموعة حركة عند التمرير لأسفل في القسم الموجود على الصفحة.

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

بعض الأمثلة الأخرى

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

افكار اخيرة

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

نتطلع إلى الاستماع منك في التعليقات.