تُعدّ تقنية تحريك الخلفية المتدرجة أسلوبًا تصميميًا رائعًا لإضفاء الحيوية على ألوان خلفية موقعك الإلكتروني. إنها حل مثالي لمن يرغبون في الحصول على خلفية أكثر واقعية من لون ثابت، دون اللجوء إلى خلفية فيديو بطيئة التحميل. تعتمد الفكرة الأساسية وراء تحريك الخلفية المتدرجة على استخدام CSS لإنشاء خلفية متدرجة تتمدد وتتحرك، مما ينتج عنه انتقالات لونية سلسة ومتحركة.
في هذا الدرس، سنوضح لك كيفية إنشاء تأثيرات خلفية متدرجة الألوان في Divi. تعتمد هذه الطريقة على استخدام جزء من كود CSS مخصص لتحريك ألوان التدرج المختارة من إعدادات Divi المدمجة. الإعداد بسيط للغاية، والنتيجة النهائية رائعة.
دعونا نبدأ!
نتيجة ضعيفة
فيما يلي نظرة عامة على الطريقتين اللتين يمكننا بهما إنشاء رسوم متحركة خلفية متدرجة على Divi.
من الواضح أن الشرط الأساسي لهذا البرنامج التعليمي هو أن يكون لديك سمة Divi مثبتة ومحدثة.
إنشاء خلفية متدرجة متحركة باستخدام مقتطف CSS وخيار الخلفية في Divi
للبدء، أضف صفًا من عمود واحد إلى القسم الافتراضي في Divi Builder.
إعدادات القسم
بعد ذلك، قم بتحديث إعدادات القسم بصورة خلفية. ستتم إضافة خلفية متدرجة الألوان إلى صفنا بحيث تغطي هذه الصورة.
ثم قم بتحديث الحشوة كما يلي:
- الحشو: 0px عالية ، 0px منخفضة
إعدادات الصف والعمود
معلمات العمود
افتح إعدادات الصف ، ثم قم بتحديث تعبئة العمود كما يلي:
- الحشو: فوق 12vw
بعد ذلك، أضف CSS المخصص التالي إلى العنصر الرئيسي للعمود:
height: 40vw;
إعدادات الخط
خلفية التدرج
يمكننا الآن إضافة خلفية متدرجة الألوان إلى الصف. تأكد من جعل ألوان التدرج شبه شفافة إذا كنت ترغب في رؤية صورة خلفية القسم.
قم بتحديث معلمات الخط كما يلي:
- لون خلفية التدرج الأيسر: rgba (12,113,195,0.8،XNUMX،XNUMX،XNUMX)
- لون خلفية التدرج على اليمين: rgba (131,0,233,0.8،XNUMX،XNUMX،XNUMX)
- نوع التدرج: الخطي
- اتجاه التدرج: 45 درجة
حجم
ثم قم بتحديث حجم الخط كما يلي:
- العرض: 100٪
- أقصى عرض: 100 ٪
فئة CSS مخصصة
بعد أن أصبح لدينا خلفية متدرجة الألوان، نحتاج إلى إضافة الحركة باستخدام CSS مخصص. قبل إضافة كود CSS، نحتاج إلى إضافة فئة CSS مخصصة لاستهداف هذا السطر تحديدًا.
انتقل إلى علامة التبويب "متقدم" وأضف فئة CSS التالية:
- فئة CSS: تحريك التدرج
إضافة وحدة رمز
بمجرد إضافة فئة CSS إلى السطر ، أضف وحدة نمطية للكود إلى السطر.
لصق CSS في الوحدة النمطية للتعليمات البرمجية
ثم الصق كود CSS التالي في منطقة Code Code Settings Module:
.animate-gradient {background-size: 400% 400%;animation: gradient 5s ease infinite;} @keyframes gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}
تأكد من وضع الكود داخل <style></style>الوسوم لأننا نضيفها إلى كود HTML الخاص بالصفحة.
نتيجة
هذه هي النتيجة حتى الآن. تم تكبير خلفية التدرج اللوني إلى 400% من حجمها الأصلي، ويتم تحريكها عن طريق تحريكها يمينًا ويسارًا.
أضف دعوة لاتخاذ إجراء
لإكمال التصميم، دعونا نضيف وحدة دعوة لاتخاذ إجراء لتكون جزءًا من المحتوى.
معلمات دعوة للعمل
محتويات
قم بتحديث المحتوى على النحو التالي:
- إضافة عنوان
- إضافة نص الزر
- إضافة نص الجسم
- عنوان URL لرابط الزر: #
- استخدام لون الخلفية: لا
تصور
انتقل إلى علامة تبويب التصميم وقم بتحديث العناصر التالية:
- خط العنوان: Kaushan Script
- حجم نص العنوان: 4vw (سطح المكتب) ، 30 بكسل (هاتف)
- ارتفاع سطر العنوان: 1,4 م
- هيئة الشرطة: Roboto
- حجم نص الزر: 16px
- لون نص الزر: # 555555
- خلفية الزر: #ffffff
- عرض حد الزر: 0px
- نصف قطر حد الزر: 30 بكسل
- تباعد حرف زر: 3px
- زر الخط: Roboto مكثف
- وزن خط الزر: غامق
نتيجة
الآن، تحقق من النتيجة على الصفحة المباشرة بعد إضافة محتوى دعوة المستخدم لاتخاذ إجراء. ستكون إضافة رائعة لعنوان موقعك الإلكتروني!
تذكر أنه يمكنك بسهولة تغيير ألوان خلفية الخط إلى أي لون تريده. سيستمر تشغيل الكود في الخلفية لتحريك الخلفية تلقائيًا.
إذا كنت تعرف القليل من لغة CSS، يمكنك ضبط سرعة واتجاه الحركة عن طريق تعديل قيم خصائص الحركة.
أتمنى أن يكون هذا الشرح مفيداً لكم. لا تترددوا في مشاركة آرائكم حوله.