איך ליצור אייקון עם אנימציה?

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

קצת על בניית אתרים עם מערכת וורדפרס, תוספים ושאר הירקות:

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

היתרונות בהוספת אנימציות לעיצוב האתר שלנו:

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

איך ליצור אייקון עם אנימציה באתר הוורדפרס שלנו?

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

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

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

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

שלב 1

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

שלב 2

חלצו את התוסף לתיקייה ייעודית. כעת תוכלו להיכנס אל הקבצים אם תרצו לראות את האייקונים וכו'. בדרך כלל כל אייקון יופיע בכמה פורמטים: PNG, JPEG, GIF ועוד. GIF יהיה הפורמט עם האנימציה.

שלב 3

היכנס בלוח הבקרה של האתר שלכם לתוספים -> תוסף חדש. כעת חפשו lordicon או את התוסף האחר שאתם רוצים להתקין (אנו משתמשים בlordicon כדוגמה מומלצת). לאחר שתתקינו ותפעילו את התוסף תוכלו לראות את השם של התוסף בצד ימין בתפריט.

שלב 4

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

שלב 5

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

שלב 6

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

שלב 7

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