كيفية إنشاء تراكبات خلفية متدرجة باستخدام إعدادات خلفية Divi

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

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

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

أمثلة على تراكبات الخلفية المتدرجة

لقد أنشأنا ثلاثة أقسام مع صورة قبل وبعد والتي ستوضح لك كيف يمكن للخيارات الجديدة أن تعزز الشعور الكامل الذي يعكسه موقع الويب الخاص بك ويعطي عامل "je ne sais quoi" المحدد له.

قسم البطل

هكذا يبدو قسم الأبطال عند إضافة صورة خلفية فقط:

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

قسم الدعاية

هذا ما يبدو عليه قسم الدعاية الإعلامية عند استخدام خلفية ذات لون واحد:

وهذه هي الطريقة التي تبدو بها النتيجة النهائية عندما أضفنا تراكب الخلفية المتدرجة إلى خلفية النمط:

قسم التسعير

هكذا يبدو قسم التسعير عندما نستخدم لونًا واحدًا (بدرجة أفتح وأغمق):

وهذه هي الطريقة التي ستبدو بها النتيجة النهائية بعد استخدام تراكب الخلفية المتدرجة:

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

خطوة بخطوة: قسم الأبطال

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

ابدأ في الإنشاء

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

إعدادات وحدة النص الأولى

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

ضمن علامة التبويب تصميم ، قم بإجراء التعديلات التالية على فئة النص الفرعية:

• اتجاه النص: الوسط
• حجم خط النص: 30
• لون خط النص: #FFFFFF

إعدادات وحدة النص الثانية

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

• اتجاه النص: الوسط
• حجم خط النص: 16
• لون خط النص: #FFFFFF

قم بالتمرير لأسفل في نفس علامة التبويب وأضف "500 بكسل" إلى العرض الأقصى في فئة التحجيم الفرعية و "2٪" إلى الهامش السفلي في فئة التباعد الفرعية.

إعدادات الزر

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

ضمن علامة التبويب تصميم ، قم بإجراء التعديلات التالية على فئة الأزرار الفرعية:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 20
• لون نص الزر: #FFFFFF
• لون خلفية الزر: rgba (0،0،0،0)
• عرض حد الزر: 2
• لون حدود الزر: #FFFFFF
• نصف قطر حد الزر: 7

الآن ، افتح أقسام الصف وقم بإجراء التعديلات التالية في فئة التباعد الفرعية لوحدة التصميم:

الهامش الأعلى: 15٪
الهامش السفلي: 10٪

إعدادات تراكب الخلفية المتدرجة

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

على سبيل المثال الذي قدمناه ، استخدمنا الإعدادات التالية:

• اللون الأول: # 3730ff
• اللون الثاني: # e02b20
• نوع التدرج: خطي
• اتجاه التدرج: 272deg
• موقف البداية: 40٪
• موضع النهاية: 100٪

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

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

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

خطوة بخطوة: قسم الدعاية والإعلان

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

يأتي نمط الخلفية المستخدم في هذا المثال من Toptal. يمكنك تنزيل الأنماط التي ترغب في استخدامها لجميع أنواع الأغراض - بما في ذلك الأنماط التجارية. فقط لا تنسى أن تنسبهم إلى مصدر موقع الويب الخاص بك كما هو مذكور في الأسئلة الشائعة.

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

ابدأ في الإنشاء

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

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

إعدادات دعاية

افتح إعدادات Blurb Module واكتب العنوان والمحتوى في فئة النص الفرعية من علامة تبويب المحتوى. انتقل إلى علامة التبويب "التصميم" وقم بإجراء التعديلات التالية على الفئة الفرعية للصورة والأيقونة:

• لون الأيقونة: rgba (255،255،255،0.36)
• رمز الدائرة: نعم
• لون الدائرة: rgba (255،255،255،0)
• إظهار حدود الدائرة: نعم
• لون حدود الدائرة: rgba (255،255،255،0.36)
• وضع الصورة / الرمز: علوي
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 96 بكسل

قم بالتمرير لأسفل في نفس علامة التبويب وضع اتجاه النص إلى "المركز" في فئة النص الفرعية.

استمر في التمرير وافتح الفئة الفرعية لنص الرأس. انطلق واستخدم الإعدادات التالية:

• حجم خط الرأس: 18
• لون نص الرأس: #FFFFFF
• ارتفاع خط الرأس: 1em

الآن ، الشيء الوحيد المتبقي لتغييره هو الفئة الفرعية للنص الأساسي. تأكد من تطبيق الإعدادات التالية:

• حجم خط الجسم: 14
• لون النص الأساسي: #FFFFFF
• ارتفاع خط الجسم: 1.5em

لا تنس استنساخ الوحدة النمطية Blurb مرتين ، وضعها في العمودين الآخرين المتبقيين وتغيير المحتوى وفقًا لذلك.

إعدادات الصف

افتح إعدادات الصف وانتقل إلى الفئة الفرعية Spacing في علامة التبويب Design. الشيء الوحيد الذي عليك فعله هو تغيير الهامش العلوي والسفلي إلى "5٪".

إعدادات تراكب الخلفية المتدرجة

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

بعد ذلك ، قم بإجراء التغييرات التالية على خيار التدرج اللوني:

• اللون الأول: # 52009b
• اللون الثاني: # 0edeed
• نوع التدرج: شعاعي
• الاتجاه الشعاعي: صحيح
• موقف البداية: 28٪
• موضع النهاية: 100٪

انتقل إلى خيار الخلفية ، وقم بتحميل النمط المفضل وقم بإجراء التغييرات التالية:

• موقف صورة الخلفية: المركز
• تكرار صورة الخلفية: كرر (حسب النمط الخاص بك)
• مزيج صورة الخلفية: مضاعفة

هذا كل شيء! يجب أن تحصل الآن على النتيجة المذهلة التالية:

خطوة بخطوة: قسم التسعير

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

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

ابدأ في الإنشاء

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

إعدادات وحدة النص الأولى

أضف وحدة نصية جديدة إلى العمود الأول ، وأضف نوع حزمة السعر إلى مربع المحتوى في فئة النص الفرعية بعلامة تبويب المحتوى وانتقل إلى علامة التبويب تصميم.

قم بتطبيق التغييرات التالية على الفئة الفرعية للنص في علامة التبويب "تصميم":

• اتجاه النص: الوسط
• حجم خط النص: 24
• لون خط النص: #FFFFFF
• ارتفاع خط النص: 1.5em

قم بالتمرير لأسفل في نفس علامة التبويب وقم بإجراء التعديلات التالية على فئة التباعد الفرعية:

• الهامش الأعلى: 50 بكسل
• الهامش السفلي: 20 بكسل

إعدادات وحدة النص الثانية

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

في علامة التبويب تصميم ، قم بإجراء التعديلات التالية:

• اتجاه النص: الوسط
• حجم خط النص: 82 بكسل
• لون خط النص: #FFFFFF
• ارتفاع خط النص: 1.1em

قم بالتمرير لأسفل نفس علامة التبويب وإضافة "10 بكسل" إلى الهامش السفلي.

إعدادات وحدة النص الثالثة

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

• اتجاه النص: الوسط
• حجم خط النص: 16
• لون خط النص: #FFFFFF
• ارتفاع خط النص: 1.1em

قم بالتمرير لأسفل في نفس علامة التبويب وأضف "33 بكسل" إلى الهامش السفلي في فئة التباعد الفرعية.

إعدادات الزر

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

ضمن علامة التبويب "تصميم" ، ضع زر "محاذاة" في الفئة الفرعية "محاذاة" في "المركز" وقم بإجراء التغييرات التالية على فئة الأزرار الفرعية:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 13
• لون نص الزر: #FFFFFF
• لون خلفية الزر: rgba (255،255،255،0.11)
• عرض حد الزر: 2
• لون حدود الزر: #FFFFFF
• نصف قطر حد الزر: 4
• تباعد أحرف الأزرار: 1

إعدادات الحاجز

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

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

إعدادات تراكب الخلفية المتدرجة

في هذا المثال ، سنستخدم إعدادين مختلفين للخلفية للأعمدة المختلفة. سيكون العمود الأول والأخير متماثلين ، بينما سيكون العمود الثاني مختلفًا بعض الشيء.

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

• اللون الأول: rgba (10،122،178،0.57)
• اللون الثاني: rgba (142،0،142،0.47)
• العمود 1 نوع التدرج: شعاعي
• العمود 1 اتجاه شعاعي: أعلى اليسار
• العمود 1 موقف البداية: 0
• موضع نهاية العمود 1: 100٪

بعد ذلك ، انتقل إلى العمود 2 وقم بإجراء التغييرات التالية على خيار التدرج اللوني:

• اللون الأول: # 0a7ab2
• اللون الثاني: # 8e008e
• العمود 2 نوع التدرج: خطي
• العمود 2 اتجاه التدرج: 180 درجة
• العمود 2 موقف البداية: 0
• العمود 2 نهاية الموقف: 100

انتقل إلى خيار صورة الخلفية ، وقم بتحميل صورة الخلفية وقم بتغيير الإعدادات:

• العمود 2 موضع صورة الخلفية: أعلى اليسار
• العمود 2 تكرار صورة الخلفية: كرر
• مزيج صورة الخلفية في العمود 2: مضاعفة

افكار اخيرة

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!