الرسوم المتحركة المدخل
الانطباعات الأولى تلتصق. بدلاً من السماح للمحتوى الخاص بك بالظهور، قم بالوصول. ال الرسوم المتحركة المدخل يضيف الامتداد الحركة إلى أي عنصر Elementor في اللحظة التي يتم تمريره فيها إلى العرض، مع 70+ تأثيرات للاختيار من بينها: التلاشي، والشرائح، والارتداد، والتقليب، والتكبير/التصغير. يمكنك ضبط السرعة والتأخير والتيسير، بحيث يمكن أن ينحرف العنوان بلطف بينما يظهر صف من أيقونات الميزات واحدًا تلو الآخر. لا يوجد CSS، ولا إطارات مفاتيح، فقط عدد قليل من الإعدادات في علامة التبويب "متقدم".
استخدمه جيدًا وستجذب الرسوم المتحركة للمدخل العين إلى أسفل الصفحة وتجعل الموقع يبدو حيًا عند التمرير الأول. استخدمه على كل شيء ويتحول إلى ضوضاء. يغطي الفيديو أدناه الأساسيات، ثم أدخل في قائمة التأثيرات الكاملة، وكيفية تطبيق رسم متحرك واحد عبر قسم كامل، وكيفية الحصول على التوقيت الصحيح.
ما هي الرسوم المتحركة المدخل؟
الرسوم المتحركة للمدخل هي الحركة التي يقوم بها العنصر عند ظهوره على الشاشة. يقوم الزائر بالتمرير، ويضرب عنوان أو صورة أو زر في إطار العرض، ويتلاشى أو ينزلق أو يرتد في مكانه بدلاً من الجلوس هناك طوال الوقت. ستراها تسمى تأثيرات الدخول، أو تمرير الرسوم المتحركة، أو الرسوم المتحركة لإدخال موقع الويب. نفس الفكرة في كل مرة: صفحة ثابتة تبدأ في التفاعل أثناء تحركك لأسفل.
يمكنك كتابة كل هذا بنفسك باستخدام الرسوم المتحركة CSS. ثم الإطارات الرئيسية ملكك لتحافظ عليها، وكذلك السلوك سريع الاستجابة في كل حجم شاشة. الإضافات الرئيسية مجموعة أدوات الرسوم المتحركة ينقل ذلك إلى إعدادات العناصر، بحيث تختار تأثيرًا من القائمة المنسدلة وتتخطى التعليمات البرمجية.
مكتبة تحتوي على 70+ تأثيرات دخول
مع أكثر من 70 إعدادًا مسبقًا، هناك طريقة مناسبة لتقديم أي قسم تقريبًا. هل تريد الهدوء؟ تتلاشى. تريد الطاقة؟ ترتد أو حزام مطاطي. بعد شيء أكثر تعمدا؟ الوجه أو الانزلاق. هذا الانتشار مفيد لأنه يتيح لك إعطاء الأقسام طابعها الخاص: هادئ وسلس لبيان المهمة، ومرح بعض الشيء لصف الميزات.
- يتلاشى: Fade In، Fade In Up، Fade In Down، والباقي، للوافدين الهادئين.
- الشرائح: تنزلق العناصر من اليسار أو اليمين أو الأعلى أو الأسفل.
- يرتد: ترتد وشريط مطاطي لقسم يحتاج إلى ملاحظة.
- الدوران والتقلب: اقلب وقم بالدوران عندما تريد القليل من العمق.
- التكبير والمؤثرات الخاصة: Zoom In وLight Speed وغيرها من الميزات المميزة للبطل أو CTA.
- مطابقة التأثير للوظيفة: الأصوات العالية في نداء العمل، والتلاشي الناعم في النص الأساسي.
- معاينة قبل الالتزام: يقوم المحرر بتشغيل الرسوم المتحركة أثناء التمرير فوقها في القائمة.
المدة والتأخير وتسهيل التحكم
التوقيت هو المكان الذي يتم فيه الفوز أو الخسارة في معظم الرسوم المتحركة، وهذا أكثر من مجرد تبديل تشغيل/إيقاف. تعيين مدة بالمللي ثانية للقيام بحركة سريعة ولاذعة أو بطيئة وطويلة. أضف أ تأخير لذلك يأتي صف من العناصر واحدًا تلو الآخر بدلاً من الكل مرة واحدة. اختر تخفيف انحنى بحيث تتسارع الحركة وتبطئ بالطريقة التي يفعلها الجسم الحقيقي، بدلاً من الانزلاق بوتيرة آلية مسطحة.
- ضبط السرعة: 500 مللي يشعر بالنشاط، 1500 مللي يشعر بالاسترخاء. هذا الرقم واحد يغير المزاج كله.
- ترنح تسلسل: قم برفع التأخير إلى أعلى درجة على كل أيقونة على التوالي وستظهر واحدة تلو الأخرى.
- اختر التيسير: تعتبر عملية التسهيل (البدء السريع والتوقف اللطيف) أمرًا طبيعيًا بالنسبة لمعظم المداخل. إنه الذي أصل إليه أولاً.
كيفية تعيين الرسوم المتحركة للمدخل الافتراضي لجميع العناصر؟
يسأل الناس هذا كثيرًا: هل يمكنك تطبيق رسوم متحركة لمدخل واحد على كل شيء مرة واحدة في Elementor؟ إجابة مباشرة، لا يحتوي Elementor core على مفتاح عام واحد يقوم بتحريك كل عنصر على الموقع. ما ينجح عمليًا هو تحريكه على مستوى الحاوية أو القسم، ثم إعادة استخدام تلك الإعدادات.
- حدد قسم أو حاوية بدلا من كل عنصر واجهة مستخدم بداخله. يفتح متقدم → الرسوم المتحركة لمدخل الإضافات الرئيسية واختر تأثيرك. ثم تصل الكتلة بأكملها معًا أثناء تمريرها.
- لإعادة استخدام نفس الحركة، انقر بزر الماوس الأيمن فوق العنصر، ثم اضغط ينسخإذن لصق النمط في القسم التالي. تتوافق إعدادات الرسوم المتحركة مع النمط، لذا قم بتعيينه مرة واحدة ثم قم بلصقه في الصفحة.
- بالنسبة لسلسلة متتالية بدلاً من إطلاق كل شيء معًا، حافظ على التأثير كما هو وارفع تأخير قليلا على كل قسم أثناء النزول.
يمنحك ذلك رسمًا متحركًا متسقًا للدخول عبر جميع العناصر الخاصة بك دون لمس التعليمات البرمجية، وهو أقرب ما يكون إلى الوضع الافتراضي الذي يمنحك إياه Elementor. الكامل وثائق الرسوم المتحركة المدخل يغطي كل إعداد.
أين تساعد الرسوم المتحركة للمدخل أكثر؟
- أقسام البطل: تلاشي في الأعلى على العنوان، ثم تأخير قصير على الزر الموجود أسفله.
- صفوف الميزات: قم بترنح الأيقونات حتى تهبط واحدة تلو الأخرى.
- الإحصائيات والعدادات: تكبير بينما يتم تمرير الأرقام للعرض.
- الشهادات والشعارات: يتلاشى ناعمًا حتى لا ينكسر فجأة.
- يدعو إلى العمل: ارتداد أو شريط مطاطي عند النقطة التي يقرر فيها شخص ما.
الامتداد يأتي مع الأوسع عناصر واجهة المستخدم والإضافات الرئيسية. ال صفحة التسعير يوضح الخطة التي هبطت فيها.
الأسئلة المتداولة للرسوم المتحركة للمدخل
هل ستؤدي الكثير من الرسوم المتحركة للدخول إلى إبطاء موقع الويب الخاص بي؟
في صفحة تحتوي على العشرات من العناصر المتحركة، يمكن أن تضيف بعض الوزن، لكن التأثيرات خفيفة في البداية. الحل الحقيقي هو ضبط النفس: تحريك الأقسام الرئيسية والعناوين الرئيسية، وليس كل فقرة. عدد قليل من الأشخاص في وضع جيد بالكاد يسجلون. إذا كان وقت التحميل في ذهنك، فهذه نصائح لتسريع مواقع Elementor يساعد.
لماذا لا تعمل الرسوم المتحركة الخاصة بمدخل Elementor؟
عادة ما يكون واحدًا من ثلاثة أشياء. يتم تشغيل الرسوم المتحركة فقط في المرة الأولى التي يدخل فيها العنصر إلى إطار العرض، لذا قم بالتمرير لأسفل مرة أخرى لاختباره بدلاً من التمرير للخلف. تأكد من أن التأثير على العنصر الفعلي وليس على غلاف فارغ حوله. وقم بمسح البرنامج الإضافي للتخزين المؤقت الخاص بك بعد النشر، حيث أن الصفحة المخزنة مؤقتًا ستخدم الإصدار القديم بدون الرسوم المتحركة.
هل يمكنني استخدام رسوم متحركة مختلفة على سطح المكتب والهاتف المحمول؟
لا، لا يمكنك ضبط الرسوم المتحركة بشكل مستقل لسطح المكتب والكمبيوتر اللوحي والهاتف المحمول في Elementor. مهما كان التأثير الذي تختاره ينطبق على كل نقطة توقف، لذا اختر واحدًا لا يزال يبدو صحيحًا على شاشة صغيرة.
ما هو إعداد التيسير وأي إعداد يجب أن أستخدمه؟
سهولة التحكم في وتيرة الحركة. الخطي يحمل سرعة واحدة ثابتة ويمكن أن يشعر بأنه آلي. تبدأ عملية Ease-Out بسرعة وتنتهي ببطء، مثل شيء يتدحرج إلى توقف لطيف، وهو أمر طبيعي. سهولة الدخول تفعل العكس. بالنسبة لمعظم الرسوم المتحركة للدخول، استخدم Ease-Out.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
ناسخ البريد/الصفحة
