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

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

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

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

קובץ לוטי אפשר ליצור בעזרת תוכנת Adobe After Effects, בה משתמשים יוצרי וידאו ואנימטורים, על-ידי שימוש בפלאגין מיוחד לתוכנה שנקרא Bodymovin. לוטי אגב נולד בבית היוצר של Airbnb (כן כן, אותה חברה של אתר הסאבלטים לדירות) והוא כלי מבוסס קוד פתוח. למעוניינים במידע יותר מעמיק, ניתן לקרוא עוד באתר החברה.

אז איך אפשר להשתמש בקבצי האנימציה באתר?

ראשית, מחפשים אנימציה שאוהבים ורוצים להשתמש בה באתר Lottie Files שם מעלים אנימטורים את יצירותיהם לשימוש הקהל הרחב.

לאחר שמצאנו משהו שנרצה להטמיע באתר, נלחץ על כפתור ה-html שיופיע בדף הקובץ:

איך מוספים אנימציות לאתר

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

אנימציות לוטי וורדפרס

לאחר שבחרנו בדיוק את התצורה שמתאימה לנו, נעתיק את קוד ההטמעה שיוצג לנו בהמשך העמוד:

lottie אנימציה וורדפרס

ואת הקוד הזה נטמיע באתר.

אפשר להטמיע את הקוד באלמנטור, דרך ווידג׳ט ה-HTML:

איך מוסיפים lottie בוורדפרס

והנה האנימציה מוצגת:

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

 

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

@Vanesa Melonio / Lottie Files

וזהו!

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

תהנו!

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

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

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

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

יו, הגעת לסוף הכתבה 😯 מה עכשיו?

1. אם אהבת את התוכן, אפשר לשתף עם חברים:

שיתוף בפייסבוק
שיתוף בטוויטר
שיתוף בלינקדאין
שיתוף בווטסאפ

2. אפשר לספר לנו מה חשבת, כדי שנוכל להמשיך להשתפר

כמה כתבה זו עזרה לך?

בחר/י כדי להצביע!

מאחר ואהבת את הכתבה...

נשמח לראותך גם ברשתות החברתיות שלנו!

מצטערים לשמוע שהכתבה לא היתה לך לעזר!

נשמח לשפר אותה!

תרצה/י לשתף אותנו מה אפשר לשפר בכתבה?

דירוג ממוצע לכתבה זו:
4.3
(4)

עוד כתבות שעשויות לעניין אותך:

כבר הורדת את

החינמונים שלנו?

צ׳קליסט לשיפור דף נחיתה
20 סעיפים שחייבים לעבור עליהם בבניית דף נחיתה

יש לך דף נחיתה? מתכנן/ת לבנות דף נחיתה? את הצ׳קליסט הזה אסור לך לפספס!

דוגמאות לעסקים אונליין
9 רעיונות לבניית עסק אונליין

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

איך לבחור חברת אחסון
איך לבחור חברת אחסון בתבונה

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

כלים לבוני אתרים
ארגז הכלים

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

דילוג לתוכן