האם ראית את הנפשות CSS היפות האלה באתרים פופולריים כלשהם? אפקטים של אנימציה כמו תוכן שמחליק, שמתפוגג, התמונות המקפצות שלו וכו '... ? האם אתה רוצה להוסיף גם אנימציות CSS לוורדפרס?

במאמר זה אנו הולכים להראות לך כיצד להוסיף בקלות אנימציות CSS לוורדפרס מבלי לכתוב קוד כלשהו.

מתי ומדוע כדאי להשתמש הנפשות CSS?

אנימציות CSS מאפשרות להפנות את תשומת לב המשתמש לחלקים שונים של הדף. אתה יכול להשתמש בהם כדי להנפיש תכונות מוצר או כפתור קריאה לפעולה. אתרים רבים משתמשים באנימציות CSS כאשר המשתמש גולל למטה בדף. זה מוסיף אישיות מסוימת לדף ומדגיש את האלמנטים החשובים ביותר.

אנימציות CSS גם מהירות יותר משימוש בפלאש או בסרטונים. הם נטענים במהירות ונתמכים על ידי דפדפני האינטרנט המודרניים ביותר. אתה יכול להוסיף אנימציות CSS באופן ידני לנושא הוורדפרס שלך או לגליון הסגנונות שלך. עיצוב משנה. עם זאת, רוב המתחילים לא רוצים לערוך את קבצי הנושא שלהם או ללמוד CSS.

עם זאת, במדריך זה נראה כיצד תוכלו להוסיף בקלות אנימציות CSS לאתר וורדפרס שלכם.

אבל לפני כן, אם מעולם לא התקנת גילוי וורדפרס כיצד להתקין צעדים 7 בלוג וורדפרס et איך למצוא, להתקין ולהפעיל WordPress נושא בבלוג שלך 

ואז חזרה למה אנחנו כאן.

כיצד להגדיר הנפשות CSS

אנו נשתמש בפלאגין להדרכה זו. זה מאפשר לך ליצור אנימציות CSS באמצעות עורך חזותי של WYSIWYG. הדבר הראשון שעליך לעשות הוא להתקין ולהפעיל את התוסף הנפשת את זה!. התוסף פועל ללא תצורה ואין לוח בקרה.

לגלות כיצד להתקין פלאגין וורדפרס אם מעולם לא עשית את זה.

פשוט צור פוסט חדש ותראה כפתור חדש בסרגל הכלים של העורך החזותי.

בלחיצה על הכפתור תופיע חלון חדש בו תוכלו לעצב את הנפשות ה- CSS שלכם. התוסף תומך באנימציות CSS רבות שכולן לבחירה.

ראשית עליך לבחור את סגנון האנימציה. לאחר מכן, עליך לבחור את זמן ההמתנה לפני האנימציה ואת משך האנימציה. לבסוף, תוכל לציין מתי האנימציה תתחיל.

המשך גם לגלות כיצד להוסיף אנימציות מרשימות לבלוג שלך

התוסף מציע שלוש אפשרויות. אתה יכול להפעיל את האנימציה בלחיצה, בריחוף או בזמן גלילה.

ברגע שאתה מרוצה מההגדרות, אתה יכול ללחוץ על הכפתור " הוא מפיח רוח חיים לצפייה בתצוגה המקדימה של האנימציה.

לאחר מכן לחץ על הכפתור הַבלָעָה כדי להוסיף אנימציה לפוסט או לדף שלך. תוכלו להבחין שהתוסף יוסיף קוד קצר עם תוכן דמה בעורך הוויזואלי.

עליכם להסיר את תוכן הדמה בתוך הקצר, ולהחליף אותו בתוכן משלכם, בתמונות, או בכל דבר אחר שתרצו להנפיש.

גלה גם כיצד להוסיף מפות אינטראקטיביות לאתר וורדפרס שלך

כל שעליך לעשות עכשיו הוא לפרסם את התוכן שלך ולהציג אותו בתצוגה מקדימה.

גלה גם כמה תוספי וורדפרס מובחרים  

אתה יכול להשתמש באחר תוספים וורדפרס לתת מראה מודרני ולייעל את הטיפול בבלוג או באתר שלך.

אנו מציעים לכם כאן כמה תוספי וורדפרס מובחרים שיעזרו לכם לעשות זאת.

1. פרו

Chimpmate הוא התוסף וורדפרס הפופ-אפ המובחר של MailChimp, שיעזור לך להמיר את הקוראים שלך למנויים. זה תוכנן כדי להגדיל את רשימת הדוא"ל שלך מבלי לעצבן מבקרים עם חלונות קופצים מעצבנים.

ניתן להתאמה אישית מלאה ותוכל לשלוט מתי והיכן להציג חלונות קופצים. התכונות האחרות שלו הן: תמיכה מבין כמה דפדפנים ויש לו עמ 'אפשרויות תזמון מרובות, פריסת התאמה אישית מלאה, אמענה ללקוח מגיב, אניאינטגרציה מושלמת עם WooCommerce, הxcellente ניהול מטמון, אינטגרציה מושלמת עם רבים נושאי וורדפרס, תמיכה רב לשונית בזכות לתוסף WPML, eלא הרבה יותר.

הורד | הדגים | אירוח אתרים

2. שער תשלום

CardStream הוא ספק שער התשלום העצמאי היחיד. זֶה התוסף וורדפרס premium מאפשר לך לקבל תשלומים ישירות בחנות המקוונת שלך WooCommerce דרך Cardstream.

זה גם נותן לך את היכולת לקבל תשלומים באמצעות הפתרון המתארח ב- Cardstream.

הורד | הדגים | אירוח אתרים

3. מקור נתונים

DataSource הוא א התוסף וורדפרס פרימיום מתמקד בהצגה החזותית של הנתונים שלך בכל עמוד באתר שלך. זה מאפשר לך להציג נתונים מקובצי CSV, XML, Excel, Google Spreadsheets, מסדי נתונים של MySQL או סוגי פוסטים מותאמים אישית כטבלאות הניתנות למיון וסינון, גרפים שונים, מפות ועוד.

בין תכונותיו תוכלו למצוא בין היתר: iממשק אינטואיטיבי, tableaux מבוסס על מודל הנתונים שלך, tלמיין, מסנן תגובה ables,Upport of מפות Google ו - רב לשוני, אתמיכת לקוחות מגיבה, מ 'אחדמדריך למשתמש, iהתקנה מהירה, הלא יותר

הורד | הדגים | אירוח אתרים

משאבים מומלצים

גלה על משאבים מומלצים אחרים שיעזרו לך לבנות ולנהל את האתר שלך.

• כיצד לדחוס את גודל התמונות על וורדפרס
• כיצד להוסיף יישומון לכותרת של הבלוג שלך WordPress
• כיצד להוסיף מפות אינטראקטיביות לאתר וורדפרס שלך
• כיצד לתקן שגיאת 413 ב- WordPress

סיכום

פה ! זהו זה עבור הדרכה זו, אנו מקווים שזה עזר לך ללמוד כיצד לשלב אנימציות CSS בוורדפרס. אל תהסס שתף עם חבריך ברשתות החברתיות המועדפות עליך. 

עם זאת, תוכל גם להיות מסוגל להתייעץ שלנו ressources, אם אתה זקוק ליותר אלמנטים לביצוע הפרויקטים שלך ליצירת אתרי אינטרנט, עיין במדריך שלנו בנושא יצירת בלוג של וורדפרס.

אם יש לך הצעות או הערות, השאר אותן בקטע שלנו commentaires.

...