كيفية إضافة الرسوم المتحركة إلى النص في WordPress

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

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

كيفية إضافة تأثيرات نصية متحركة في ووردبريس

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

ما هو تأثير النص المتحرك وكيف يظهر؟

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

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

دور النصوص المتحركة في موقع الويب الخاص بك

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

يلعب العنوان المتحرك أو قسم البطل مع نصوص خيالية الأدوار التالية:

• يجعل التصميمات الخاصة بك أكثر إثارة للاهتمام من الناحية المرئية.
• تسليط الضوء على العروض الخاصة والمعلومات الهامة.
• يجعل ميزات منتجك ملحوظة.
• يجعل موقع الويب أكثر تفاعلية ويعزز الأعمال.

أسهل الطرق لإضافة تأثيرات نصية متحركة

استخدام البرنامج المساعد WordPress

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

النص المتحرك الرائع هو عنصر واجهة مستخدم رائع يقدمه ElementsKit pro.

تسجيل الدخول إلى لوحة التحكم الخاصة بك -> حدد أي صفحة أو منشور -> انقر فوق تحرير باستخدام ElementsKit -> أداة بحث ElementsKit Fancy Animation Text -> قم بسحب الأداة وإفلاتها

قسم المحتوى

يسمى الجزء بجزء Fancy Text ، ويحتوي على الحقول التالية-

الرسوم المتحركة

• نمط الرسوم المتحركة - هنا الخياران هما نص أو SVG ، كلاهما يسمح لك بعمل أنماط رسوم متحركة مختلفة.
• نوع الرسوم المتحركة - بناءً على نوع الرسوم المتحركة الخاص بك ، ستحصل على خيارات متنوعة هنا.
• مدة الكشف (مللي ثانية) - يمكنك ضبط مدة الرسوم المتحركة بالمللي ثانية باستخدام مربع الخيار.
• كشف تأخير الرسوم المتحركة (مللي ثانية) - اضبط وقت تأخير الرسوم المتحركة هنا. يحدد أن الرسوم المتحركة يمكن أن تبدأ لاحقًا ، فورًا من بدايتها ، أو على الفور وجزئيًا خلال الرسوم المتحركة.

محتوى

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

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

قسم النمط

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

بعد تحرير جميع البيانات المطلوبة وتصميمها ، انقر فوق تحديث وشاهد التغييرات من الواجهة الأمامية. مثال على ذلك -

تطبيق CSS

عند إنشاء رسوم متحركة CSS في WordPress ، ضع في اعتبارك الأشياء الأساسية والمهمة التالية:

• تعيين اسم حركة صحيح - هذا هو الاسم الذي سيتم عرضه على عنصر عندما يتم نقله بواسطة رسوم متحركة CSS. على سبيل المثال ، إذا كان لديك زر به صورة متحركة باسم "fadeIn" ، فستكون هذه هي القيمة التي قد تستخدمها لهذه الخاصية.
• مدة الرسوم المتحركة - هذا هو عدد الثواني التي ستستغرقها الصورة المتحركة حتى تكتمل. يمكنك أيضًا تعيين هذا على لا شيء أو على 0 لجعل الرسوم المتحركة تدوم إلى أجل غير مسمى أو حتى يحدث شيء آخر (مثل تحميل الصفحة).
• وظيفة توقيت الحركة - تتحكم هذه الوظيفة في كيفية تحرك العنصر من نقطة إلى أخرى بناءً على المدة التي يستغرقها مقدار معين من الوقت (بالمللي ثانية). على سبيل المثال ، إذا قمت بتعيين هذه الخاصية على التيسير ، فسيبدأ العنصر الخاص بك في التحرك ببطء ثم يتسارع في نهاية مدته قبل البدء مرة أخرى في البداية.
• تأخير الحركة - هذه القيمة تحدد عدد المللي ثانية التي يجب إضافتها بعد انتهاء رسم متحرك قبل أن يبدأ مرة أخرى (على سبيل المثال ، 1 ثانية).
• Animation-iteration-count - هذا هو مقدار الوقت الذي تحتاجه لتشغيل الرسوم المتحركة. باستخدام خاصية CSS ، يمكنك حساب هذا التكرار.
• اتجاه الرسوم المتحركة - هو الترتيب أو الاتجاه الذي يجب تشغيل الرسوم المتحركة فيه. يمكن أن يكون عاديًا وعكسيًا ومتناوبًا وعكسيًا.
• وضع تعبئة الرسوم المتحركة - تحدد هذه القيم كيفية عرض العنصر. يمكن أن يكون قبل وبعد تطبيق الرسوم المتحركة عليه.
• معرفةkeyframes - تحدد خصائص الرسوم المتحركة التي تتغير خلال الدورة التدريبية وكذلك القيم التي يجب أن تأخذها تلك الخصائص. على سبيل المثال:

 @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} }

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

ومع ذلك ، يمكن استخدام from and to بدلاً من 0٪ و 100٪ على التوالي .

إنشاء ملف animate.css

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

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

 ```@keyframes MyAnimation { from { opacity: 0; transform: rotate(20deg); animation-duration: 3s; } to {opacity: 1;} transform: rotate(0deg); } }

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

 .MyAnimation { animation-name: MyAnimation; }

يمكنك العثور على جميع المعارف الأساسية للرسوم المتحركة في CSS وممارسة الرموز هنا!

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

سوف يقوم الكود أعلاه بتحريك نص علامة h1 الخاصة بك " MyAnimation ". يمكنك تغيير مدة الرسوم المتحركة عن طريق تغيير "3s" إلى قيمة مختلفة . يمكنك أيضًا تغيير الألوان عن طريق تغيير القيم السداسية. بمجرد حفظ ملف CSS ، يمكنك إجراء المزيد من التغييرات على مظهر موقع الويب الخاص بك ، يمكنك تحرير ملف CSS. يمكنك تغيير الخط وحجم النص ولون النص عن طريق تحرير ملف CSS. يمكنك أيضًا تغيير لون الخلفية وحجم الرأس عن طريق تغيير ملف CSS.

تحميل ملف animate.css إلى موقع WordPress

بعد الانتهاء من عمل الملف ، قم بتحميله إلى دليل القالب الخاص بك. لقد قسمنا العملية برمتها إلى ثلاث خطوات ،

الخطوة 1

انتقل إلى الموقع باستخدام بروتوكول نقل الملفات (FTP) -> اختر عميل FTP (FileZilla ، WinSCP ، Cyberduck ، إلخ.) -> حدد بيانات الاعتماد الضرورية في حساب الاستضافة الخاص بك.

الخطوة 2

الوصول إلى دليل public_html الخاص بك -> انتقل إلى wp-content -> السمات -> حدد مجلد السمة النشطة أو الفرعية

الخطوه 3

الآن ، ابحث عن دليل فرعي باسم css. إذا حصلت عليه ، فقم بتحميل ملف animate.css أو animate.min.css من ملف Animate.css باستخدام الدليل الفرعي.

ومع ذلك ، إذا لم يكن لديك مجلد الدليل الفرعي ، يمكنك بسهولة إنشاء مجلد جديد. لذلك ، بعد تحميل الملف مباشرة ، قم بإجراء تعديل بسيط لإنشاء الملف الجديد ويتم ذلك.

قم باستدعاء Animate Stylesheet عبر function.php

سوف تجد ملف jobs.php في مجلد النسق النشط الخاص بك. الآن ، تحتاج إلى إضافة مقتطف الشفرة هذا لاستدعاء Animate Stylesheet:

 add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' ); function wpb_animate_styles() { wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all'); }

تذكر ، إذا استخدمت ملف animate.min.css من Animate.css ، فستحتاج إلى كتابة animate.min.css في سطر النهاية بدلاً من animate.css. بعد حفظ جميع التغييرات ، انتقل إلى لوحة تحكم WordPress الخاصة بك.

تطبيق الرسوم المتحركة باستخدام فئات CSS

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

أخيرًا ، حدد منشورًا أو صفحة في المحرر الكلاسيكي -> انتقل إلى محرر النصوص -> أو انقر على أيقونة ثلاثية النقاط من شريط أدوات الحظر إذا كان محرر كتلة -> حدد تحرير بتنسيق HTML-> إضافة الرسوم المتحركة فئة وفئة الرسوم المتحركة الخاصة بك إلى علامة العنصر -> معاينة

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

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