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