הרבה לקוחות שלי מבקשים שיהיה להם באתר פתיח, מה שנקרא בשפה המקצועית Loader, שזה בעצם מסך פתיחה נקי וחלק, לפעמים עם הלוגו של העסק, או אייקון עם אנימציה של Loading....
לוויקס יש פיתרון קליל ומובנה לדף פתיח כזה שנקרא Welcome Screen. כרגע הפיתרון הזה מוצע רק בגירסת המובייל של האתר (הוראות התקנה כאן), מה שאומר שגולשים שמבקרים באתר שלך דרך המחשב, יגיעו לדף הבית מבלי לראות את ה-Welcome Screen שהיו רואים לו היו מבקרים באתר דרך הטלפון.
אז מה עושים?
בפוסט הזה אני אלמד אותך איך לייצר Welcome Screen שיעבוד גם בדסקטופ וגם במובייל עם קוד קצר וממש פשוט שנוסיף באמצעות ה-Developer Mode.
לא ללכת לשום מקום!
אני יודעת שאיך ששומעים את המילה "קוד", ישר מדפדפים הלאה לחפש פיתרון אחר.
אבל לא במקרה הזה. במקרה הזה הקוד כל כך פשוט ודרוש רק שינוי קטן אחד ואתם מסודרים.
אז קדימה - לעבודה!
שלב 1 - הוספת סטריפ חדש לדף הבית
לאחר שסיימנו לערוך ולעצב את דף הבית, נוסיף סטריפ עליון שיכסה את כל החלק העליון של הדף, באופן כזה שכאשר ניכנס לדף הבית, נראה רק את הסטריפ הזה לפני שנגלול למטה.
גובה מומלץ לסטריפ - מינימום 780 פיקסלים, כדי להבטיח שהסטריפ יכסה את את כל התצוגה ברזולוציות מסך שונות.
שלב 2 - עיצוב הסטריפ
בשלב הזה נחליף את העיצוב של הסטריפ כרצוננו.
אפשר לתת לו צבע רקע, להוסיף לו GIF, תמונה או סרטון של הלוגו.
הכל כיד הדמיון הטובה. סומכת עליכם...
לא לשכוח לעבור לתצוגת מובייל ולוודא שגם שם הסטריפ מכסה את כל המסך ושרואים טוב את הגרפיקה שלכם.
שלב 3 - הגדרת הקוד (ממש פשוט! לא להיבהל) להעלמת הסטריפ לאחר כמה שניות
אחרי שהסטריפ מוכן ומעוצב כרצוננו, כל שנשאר לעשות זה להוסיף קוד קטן (ממש קטן) לדף.
הקוד בעצם יגדיר שלאחר מספר שניות הסטריפ יעלם ודף הבית יחשף במלוא הדרו.
לשם כך עלינו להיכנס ל-Developer Mode >>
בתפריט העליון באדיטור בוחרים - Dev Mode
ואז לוחצים על הכפתור הכחול - Turn on Dev Mode.
עתה ייפתח חלון בתחתית המסך. זהו חלון עריכת הקוד.
המסך בעצם יתחלק לשני חלקים - בחלק העליון האדיטור ממשיך להיות פעיל, ובחלק התחתון נפתחת האפשרות לערוך את הקוד של אותו דף.
כאן בצילום כבר מופיע הקוד הנדרש (רואים שקצר? הבטחתי, לא?) ומיד בהמשך ההסבר מה צריך לעשות.
בצד ימין מופיעה בסגול המילה preloader# בשדה ID.
השדה הזה מגדיר את ה-ID של האלמנט. לכל אלמנט באתר שלנו יש ID שנוצר באופן אוטומטי. ב-99% מהמקרים אין לנו צורך ב-ID הזה, אבל כשמשתשמים בקוד, אנחנו זקוקים ל-ID כדי להגדיר על איזה אלמנט מתבצעת הפעולה.
כדי לראות את ה-ID של הסטריפ, נוודא כי הוא בחור באדיטור.
ה-ID של הסטריפ יקבל שם ג'נרי מהמערכת באופן אוטומטי, משהו בסגנון של strip13 #.
כדי שהקוד שלנו יעבוד, נחליף את ה-ID של הסטריפ בשדה הזה ל- preloader#.
ולשלב הכיפי - קופי פייסט!
העתיקו את הקוד הבא לתחתית הדף שלכם -
$w.onReady(() => { waitForLoading(); }); function waitForLoading() { setTimeout(() => { $w('#preloader').hide('FadeOut'); }, 9000); }
וזהו - סיימנו!
כמה נקודות נוספות שכדאי לדעת:
אפשר לקרוא ל-ID של הסטריפ באיזה שם שרוצים, רק צריך לזכור להחליף אותו גם בקוד בכל מקום שרשום preloader.
אפשר לראות בסוף הקוד שה-Fade out לסטריפ הוא באורך 9 שניות (איפה שרשום 9000 זה ב-milliseconds). אין שום בעיה להגדיר זמן ארוך יותר או קצר יותר, רק לזכור שזה באלפים. כך שאם למשל רוצים 7.5 שניות צריך לרשום 7500.
בסיום העבודה לא לשכוח לכבות את ה-Dev Mode - תפריט עליון >> Dev Mode >> וללחוץ על Turn off dev Mode. החלק התחתון של הפיתוח ייסגר והאדיטור יתפוס מחדש את כל המסך.
לשאלות נוספות ועזרה בהטמעת הקוד אצלך באתר, אני תמיד זמינה ושמחה לתת שירות.
Comments