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

في هذه المقالة ، سوف نوضح لك كيفية إضافة الرسوم المتحركة CSS بسهولة إلى WordPress دون كتابة أي رمز.

متى ولماذا يجب عليك استخدام الرسوم المتحركة CSS؟

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

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

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

ولكن من قبل ، إذا لم تقم بتثبيت WordPress ، فاكتشف كيفية تثبيت وورد بلوق الخطوات 7 et كيفية العثور عليها، وتثبيت وتفعيل موضوع ورد على بلوق 

ثم عد إلى سبب وجودنا هنا.

كيفية إعداد الرسوم المتحركة CSS

سوف نستخدم البرنامج المساعد لهذا البرنامج التعليمي. انها تسمح لك لإنشاء الرسوم المتحركة CSS باستخدام محرر مرئي WYSIWYG. أول شيء عليك القيام به هو تثبيت البرنامج المساعد وتنشيطه تحريك ذلك!. يعمل البرنامج المساعد بدون تكوين ولا توجد لوحة تحكم.

اكتشف كيفية تثبيت البرنامج المساعد في وورد إذا لم تفعل ذلك من قبل.

ما عليك سوى إنشاء منشور جديد ، وسترى زرًا جديدًا على شريط أدوات المحرر المرئي.

إضافة الرسوم المتحركة CSS على WordPress - زر تحريك

بالنقر فوق الزر ، سترى نافذة جديدة تظهر حيث يمكنك تصميم الرسوم المتحركة لـ CSS. يدعم المكون الإضافي العديد من الرسوم المتحركة لـ CSS والتي يمكن الاختيار من بينها جميعًا.

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

تحتاج أولاً إلى تحديد نمط الرسوم المتحركة. بعد ذلك ، تحتاج إلى اختيار وقت الانتظار قبل الرسوم المتحركة ومدة الرسوم المتحركة. أخيرًا ، يمكنك تحديد وقت بدء الرسوم المتحركة.

كما تذهب أبعد من ذلك من خلال اكتشاف كيفية إضافة الصور المتحركة الرائعة لبلوق الخاص بك

يقدم البرنامج المساعد ثلاثة خيارات. يمكنك تشغيل الرسوم المتحركة عند النقر أو التمرير أو أثناء التمرير.

إضافة الرسوم المتحركة CSS إلى WordPress - الرسوم المتحركة

بمجرد أن تشعر بالرضا عن الإعدادات ، يمكنك النقر فوق الزر " فإنه ينعش لمشاهدة معاينة الرسوم المتحركة.

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

تحريك-الرمز القصير

تحتاج إلى إزالة المحتوى الوهمي داخل الرمز القصير ، واستبداله بالمحتوى الخاص بك أو الصور أو أي شيء آخر تريد تحريكه.

اكتشف ايضا كيفية إضافة خرائط تفاعلية إلى موقع الويب الخاص بك على ووردبريس

المحتوى الرمز القصير

كل ما عليك فعله الآن هو نشر المحتوى الخاص بك ومعاينته.

اكتشف أيضًا بعض الإضافات المتميزة لبرنامج WordPress  

يمكنك استخدام ملفات أخرى الإضافات وورد لإضفاء مظهر عصري ولتحسين التعامل مع مدونتك أو موقعك على الويب.

نحن نقدم لك هنا بعض الإضافات WordPress المتميزة التي سوف تساعدك على القيام بذلك.

1. تشيمبمات برو

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

إنه قابل للتخصيص بالكامل وسوف تتقن متى وأين لعرض النوافذ المنبثقة. ميزاته الأخرى هي: الدعم من العديد من المتصفحات ولديه صخيارات جدولة متعددة ، تخطيط قابل للتخصيص بالكامل ،دعم العملاء المستجيب ، أناالتكامل التام مع WooCommerce، هxcellente إدارة ذاكرة التخزين المؤقت، تكامل مثالي مع الكثير وورد المواضيع، دعم متعدد اللغات بفضل إلى ملحق WPML ، هـليس بعد الآن

تحميلعرض | استضافة المواقع

2. بوابة دفع بوابة WooCommerce

CardStream هو المزود الوحيد لبوابة الدفع المستقلة. هذه وورد البرنامج المساعد يسمح لك الإصدار المميز بقبول المدفوعات مباشرة من متجر WooCommerce عبر الإنترنت من خلال Cardstream.

بوابة الدفع WooCommerce Cardstream

كما يمنحك القدرة على قبول المدفوعات باستخدام حل Cardstream المستضاف.

تحميلعرض | استضافة المواقع

3. مصدر البيانات

DataSource هو ملف وورد البرنامج المساعد يركز الإصدار المتميز على العرض المرئي لبياناتك في أي صفحة من صفحات موقع الويب الخاص بك. يسمح لك بتقديم البيانات من ملفات CSV أو XML أو Excel أو جداول بيانات Google أو قواعد بيانات MySQL أو أنواع المنشورات المخصصة كجدول قابل للفرز والتصفية ورسوم بيانية وخرائط مختلفة والمزيد.مصدر البيانات ملحقات ووردبريس إدراج جداول الرسومات نموذج مدونة موقع الويب

من بين ميزاته ، ستجد من بين أمور أخرى:واجهة بديهية ، رableaux استنادا إلى نموذج البيانات الخاصة بك ، رables القابلة للفرز والترشيح والاستجابة ، وupport من Google Maps و متعدد اللغات، أدعم العملاء استجابة ، واحد مدليل المستخدم ، أناالتثبيت السريع ، هر أكثر من ذلك

تحميل عرض | استضافة المواقع

الموارد الموصى بها

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

وفي الختام

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

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

إذا كانت لديك اقتراحات أو ملاحظات ، فاتركها في قسمنا تعليقات.

...