يقوم لون الخلفية المسطحة بعمله ويختفي. التدرج الذي ينجرف ببطء بين الألوان يجعل نفس القسم يشعر بالحياة دون إضافة صورة واحدة. ال الرسوم المتحركة التدرج BG تمديد في الإضافات الرئيسية للعنصر يضيف هذا التأثير إلى أي قسم أو حاوية: اختر الألوان الخاصة بك، واضبط الزاوية والسرعة، وتدور الخلفية من خلالها من تلقاء نفسها.
هذا هو التأثير الذي يتم تشغيله على الصفحة المباشرة. ينتقل القسم عبر مجموعة الألوان الخاصة به بينما يظل المحتوى في مكانه
ما يفعله ملحق Animated Gradient BG #
بمجرد التمكين، تحصل الحاويات والأقسام على خلفية التدرج المتحركة لوحة في أسلوب علامة التبويب، أسفل قسم الخلفية العادي مباشرةً. يمكنك تحميله بلونين أو أكثر، ويقدم الامتداد تدرجًا يتحرك بينهما في حلقة. الزاوية، وإجمالي وقت الدورة، وسلاسة كل انتقال كلها ملكك لتعيينها.
يتم تشغيل كل شيء في CSS على العنصر نفسه، لذلك لا يوجد فيديو لاستضافته أو صورة لضغطها، ويظل النص الموجود في الأعلى قابلاً للتحديد والقراءة.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ اتبع دليل التثبيت أولاً.
- يعد Animated Gradient BG امتدادًا مجانيًا، لذلك لا يلزم الحصول على ترخيص Pro.
كيفية تمكين امتداد Animated Gradient BG #
من لوحة تحكم WordPress الخاصة بك، انتقل إلى الإضافات الرئيسية وافتح ملحقات علامة التبويب. يقع Animated Gradient BG في الحاجيات الرسوم المتحركة المجموعة، بجانب الجسيمات وشريط تمرير الخلفية. انقر فوق التبديل الخاص به حتى يتحول إلى اللون الأرجواني، ثم اضغط حفظ التغييرات وانتظر حتى يتم حفظ إعدادات “ الخضراء بنجاح في إشعار”.
قم بإعداد التدرج على القسم #
حدد الحاوية أو القسم في محرر Elementor وافتح أسلوب علامة التبويب. ال خلفية التدرج المتحركة يوجد القسم الذي يحمل شارة MA الأرجوانية أسفل الخلفية مباشرةً. الوجه تمكين التدرج المتحركة إلى نعم، وتظهر عناصر التحكم أثناء قيام اللوحة بمعاينة التأثير مباشرة.
- تأثير الرسوم المتحركة: تسهيل حركة الألوان، سهولة الدخول في العرض التوضيحي.
- زاوية: اتجاه التدرج، -45 في العرض التوضيحي للمسح القطري.
- إجمالي مدة الرسوم المتحركة (ثواني): رحلة واحدة كاملة عبر جميع الألوان الخاصة بك. يستخدم العرض التوضيحي 6 ثواني.
- نعومة الانتقال (ثواني): كيف يتم تسليم لون واحد بلطف إلى اللون التالي، 3 ثوانٍ في العرض التوضيحي. تلميح اللوحة يقول ذلك بشكل مستقيم: القيم الأعلى تخلق انتقالات أكثر سلاسة بين الألوان.
- لون: مكرر يحمل التدرج يتوقف. انقر إضافة عنصر للحصول على لون آخر، أو X لإسقاط واحد.
اختر الألوان #
يفتح كل صف في قائمة الألوان منتقيًا قياسيًا. يبدأ العرض التوضيحي بمجموعة سماوية وأرجوانية وبرتقالية، ثم يتوقف التبديل للداخل والخارج: قم بإزالة واحدة وتشديد الحلقة، وأضف لونًا أزرق داكنًا (#3D6CD6) وتلتقطه الدورة على الفور. المعاينة المباشرة تجعل هذا الجزء ممتعًا؛ تشاهد الحالة المزاجية للقسم تتغير مع كل توقف تلمسه.
لونان أو ثلاثة ألوان في نفس نطاق درجة الحرارة تُقرأ على أنها أنيقة. خمسة ألوان على العجلة بأكملها تُقرأ كشاشة توقف. ابدأ صغيرًا.
النتيجة على الصفحة #
انشر وشاهد القسم وهو يتنفس من خلال ألوانه، كما هو الحال في ملف GIF الموجود أعلى هذه الصفحة. تأخذ الدورة الكاملة كل ما قمت بتعيينه كمدة، ثم تتكرر. الأزرار والعناوين والصور توضع في الأعلى دون أن تتأثر.
ملاحظة عملية واحدة: يظل النص الداكن قابلاً للقراءة عند توقفات التدرج الفاتح ولكنه يمكن أن يختفي عند التوقفات المشبعة. تحقق من عنوانك الرئيسي مقابل كل لون في المجموعة، وليس فقط الإطار الأول.
حيث تعمل التدرجات المتحركة بشكل جيد #
- أقسام البطل. الحركة فوق الطية بدون فيديو خلفية ثقيل.
- فرق الدعوة إلى العمل. خلفية متغيرة تجذب العين إلى الزر الذي يركب عليها.
- قريبا والصفحات المقصودة. يحمل التدرج بملء الشاشة صفحة متفرقة من تلقاء نفسه.
- مواقع المحافظ والوكالات. تتنقل ألوان العلامة التجارية عبر الرأس، دون الدفع مقابل مقطع فيديو عادي.
- أقسام التسعير. يفصلها التدرج الدقيق خلف الخطة المميزة عن الباقي.
فيديو تعليمي #
شاهد التدرج المبني من الصفر، بدءًا من تمكين الامتداد وحتى الخلفية المتحركة النهائية.
الأسئلة المتداولة #
كيف يمكنني إضافة خلفية متدرجة متحركة في Elementor؟
قم بتمكين ملحق Animated Gradient BG في علامة التبويب Master Addons Extensions، وحدد قسمًا أو حاوية، وافتح علامة التبويب Style. قم بتشغيل تمكين التدرج المتحرك في لوحة خلفية التدرج المتحرك، وأضف لونين أو أكثر، وتبدأ الخلفية في التدوير على الفور.
كم عدد الألوان التي يمكن للتدرج استخدامها؟
بقدر ما تضيفه إلى مكرر الألوان. تؤدي كل نقرة على إضافة عنصر إلى إنشاء نقطة توقف متدرجة أخرى، وتدور الرسوم المتحركة عبرها جميعًا خلال المدة الإجمالية التي تحددها. يغطي لونان إلى أربعة ألوان معظم التصميمات.
هل يمكنني التحكم في سرعة الرسوم المتحركة المتدرجة؟
نعم، مع إعدادين. تحدد مدة الرسوم المتحركة الإجمالية عدد الثواني التي تستغرقها دورة الألوان الكاملة، وتتحكم سلاسة الانتقال في كيفية مزج كل لون تدريجيًا مع اللون التالي. تولد قيم السلاسة الأعلى المزيد من الإطارات الرئيسية لتسليم أكثر ليونة.
هل يؤدي التدرج المتحرك إلى إبطاء صفحتي؟
يتم إنشاء التأثير باستخدام الرسوم المتحركة CSS على العنصر بدلاً من ملف فيديو أو صورة، لذلك لا يوجد شيء إضافي للتنزيل. إنها إحدى الطرق الأخف لوضع الحركة في قسم البطل.
هل ملحق Animated Gradient BG مجاني؟
نعم. يأتي Animated Gradient BG مزودًا بالإصدار المجاني من Master Addons for Elementor، في مجموعة Animation Widgets في علامة التبويب Extensions. تغطي صفحة التسعير ما تضيفه خطط Pro.
إلتحاق بالركب #
يحول ملحق Animated Gradient BG خلفية القسم إلى لون بطيء الحركة: قائمة ألوان وزاوية وشريطي تمرير للتوقيت. حافظ على اللوحة ضيقة، وتحقق من تباين النص مع كل نقطة توقف، ويحمل القسم الحركة بوزن أصول صفر. إنه يقترن جيدًا مع ملحق مدخل الرسوم المتحركة للمحتوى الذي يصل عبر الخلفية المتحركة، والمجموعة الكاملة من عناصر واجهة المستخدم والإضافات الرئيسية على بعد صفحة واحدة.
