WebFlow היא מערכת לבניית אתרים שמתעתדת להיות מבין המובילות בשוק, וזאת הודות למערכת AI שמפעילה חלקים גדולים ממנה.
לפני הכול, יש להדגיש שהיא לא בונה אתרים אוטומטית (למרות שהיא יכולה להתבסס על תבניות), אלא פשוט מאפשרת לכם ליצור אתרים ברמה מאוד גבוהה באמצעות ממשק ויזואלי שמזכיר קצת שפות תכנות ויזואליות כמו Microsoft Visual Studio, אבל בלי החלק של הקידוד (למרות שאתם יכולים לערוך חלקים ב-HTML בעצמכם).
אפשר גם לבנות באמצעותה אתרים שהם בעצמם סוג של CMS המיועדת עבור משתמשים עם פחות ידע טכני, כמו למשל הלקוחות שלכם או מי שמנהל עבורכם רשת של אתרים.
אז איך WebFlow עובדת והאם באמת מדובר במשהו מיוחד?
מכיוון ש-Webflow היא מערכת די מורכבת, הדבר הראשון שהיא תשאל אתכם אחרי מסך ההתחברות למערכת (אפשר גם דרך גוגל) היא מהי רמת הידע שלכם בבניית אתרים.
על פי הבחירה שתעשו כאן המערכת תבנה לכם קורס אינטראקטיבי מקוצר שיעזור לכם להבין איך העורך הוויזואלי הבסיסי עובד ו/או תסביר לכם את העקרונות של בניית אתרים באמצעות HTML ו-CSS.
תמחור
קודם כל ניגע בתמחור 💰.
המנוי החינמי מגביל אתכם לסאב דומיין תחת הדומיין של Webflow ו-50 פריטי מידע במערכת ניהול התוכן (מה שלמעשה מאפשר לכם להכניס הרבה עמודים או מבני מידע בבת אחת) ו-GB אחד של נפח תעבורה.
זו מן הסתם לא תוכנית שאפשר לעבוד איתה לאתרים אמיתיים, אבל היא מצוינת ללימוד של המערכת.
החבילה הבסיסית בתשלום (12$ בתשלום חודשי) מעניקה לכם יותר רוחב פס ודומיין עצמאי, אבל לא מאפשרת לכם לעבוד עם אוספים שבונים את ה-CMS המותאמת אישית לכל אתר.
המשמעות היא שלמרות רוחב הפס המורחב, אתם תקועים עם אתרים קטנים יחסית.
החבילות הבאות (16$ ו-36$ בהתאמה) מגדילות את רוחב הפס, מספר הפריטים ב-CMS, נפח התעבורה וגם את כמות עורכי המשנה.
ניתן גם לקבל חבילות יותר גדולות בהתאמה אישית.
בסופו של דבר, יחסית ליכולות המערכת, שהיא למעשה חבילה שלמה לבניית אתרים, אתם מקבלים כאן תמורה נהדרת למחיר, בתנאי שיש לכם את הכוח והזמן ללמוד אותה.
על מנת לראות את הפוטנציאל האורגני ותוך כמה זמן נכפיל לך את ההכנסות
ניתן לחייג למספר 052-9095200 או למלא את הטופס:
אם נשווה בניית אתר ב-Webflow לתשלום החודשי ל-Wix, מערכת מסחר אלקטרוני או אפילו בניית אתר בחברה מקצועית, מדובר כאן בחיסכון של מאות דולרים אם לא יותר.
עם זאת, חשוב להבהיר ש-Webflow בגרסה הבסיסית שלה לא מתאימה לאתרים מאוד כבדים עם נפח גבוה של תנועה.
לשם זאת תצטרכו לעבוד עם Webflow Enterprise שתחבר אתכם עם חברות אחסון מתקדמות (באופן רגיל Webflow מטפלת בכל הנושא של התשתית אוטומטית).
העורך הוויזואלי הבסיסי
אם אתם מכירים את אלמנטור, העורך ייראה לכם טיפה מוכר, אבל קצת יותר מורכב : קודם כל, האלמנטים נצמדים אחד לשני ברווח הגיוני, ולכן לא צריך ליצור כל הזמן אזורים חדשים, שזה כבר פלוס די גדול.
מלבד זאת רוב אפשרויות העיצוב לכל אלמנט נמצאות בפאנל צדדי ולא צריך לעבור כל הזמן בין לשוניות שונות (למרות שיש כאלו).
מבחינת שימוש בסגנונות שכבר יצרתם בעבר, אפשר לקבוע סגנון מסוים ולהעתיק אותו לאלמנטים שונים כדי לקצר תהליכים ולהשתמש בו מתי שרוצים. כנ"ל עם האלמנטים עצמם.
עוד פ'יצר וזה שלמעשה הכי הרשים אותי הוא העיצוב הרספונסיבי החכם: העיצוב וסידור של האתר או הדף במסכים גדולים כמו מסך מחשב ישפיעו ישירות על המסכים הקטנים יותר, אבל לא ההפך.
בניית האתר עצמו
כאמור, Webflow עובדת על פי תבניות מוכנות (יש כמה עשרות בחינם), אבל אפשר גם ליצור דפים חלקים.
העורך הוויזואלי אותו תיארתי קודם הוא רק חלק קטן מהאופן שבו בונים את האתר ולמעשה העורך המלא בנוי מהחלקים האלו:
- במרכז – במרכז נמצא התוכן של הדף הנוכחי עם כל האלמנטים שבו, למעשה העורך הויזואלי
- הפאנל העליון – כאן יש אפשרות לעבור בין תצוגות במכשירים שונים, לייצא את הקוד ולפרסם את האתר.
- דרך הפינה העליונה השמאלית אפשר לעבור בין העמודים או האוספים השונים באתר.
- פאנל ימני – בפאנל הימני ניתן לשלוט בעיצוב הכללי של הדף הנוכחי או של אלמנט ספציפי, לחפש סגנונות (Classes) וליצור להם טריגרים כגון אנימציות שונות.
בפאנל השמאלי
Add Elements – מאפשר לנו להוסיף אלמנטים או מבנים ישירות לדף הנוכחי דרך אוסף של אלמנטים מוגדרים מראש.
Navigator – עץ רשימה של כל האלמנטים בדף הנוכחי שנותן לנו לשנות את ההיררכיה שלהם (שימו לב שלא מדובר בתפריטים שהגולש רואה באתר).
Symbols (סמלים) – מאפשר לנו לבחור אלמנטים ולשמור אותם לשימוש מאוחר יותר.
מבני מידע או אוספים – כאן אנחנו בעצם יוצרים את ה-CMS שלנו באמצעות בחירה של מבני מידע. לדוגמה, אנחנו יכולים ליצור ממשק פשוט ליצירה של פוסטים ולבחור את השדות עבור כל אחד מהם. את השדות האלו אנחנו מקשרים (Bind) לאלמנטים שונים.
כך למשל, אפשר לקשר שדה של תמונת רקע לתמונת הרקע של העמוד או התמונה המקדימה של הפוסט על מנת שיהיה אפשר לערוך אותם בקלות בלי להתעסק ישירות עם האלמנטים.
יש עוד מבני מידע מוכנים מראש כמו כותבים, קטגוריות , פרויקטים (לאתרים שכוללים תיק עבודות), רשימות, אירועים ועוד, אך כמובן שאפשר ליצור עוד הרבה יותר בהתאמה אישית.
Ecommere – עוזר ביצירת מבני נתונים של אי-קומרס דרך האוספים
Assets – ספריה של כל חומרי הגלם השונים שאנחנו מעלים לאתר כמו תמונות, מסמכים ואפקטים (Lottie). קצת דומה לספריית המדיה של וורדפרס.
הגדרות – מאפשר לשנות את ההגדרות של העורך
עורך מופשט ללקוחות
זוכרים שבהתחלה המערכת שאלה אותנו למי האתר המיועד? ובכן, לכל אתר שאתם יוצרים אפשר להצמיד גם עורך בסיסי שמיועד ללקוחות שאתם בונים להם אתרים או מנהלי האתר שלא רוצים כל פעם להתחיל להתעסק אתו ברמת המבנה.
הגישה לעורך הזו יכולה להיות דרך מסך הפרויקטים ויצירת משתמש עם הרשאות חדשות או פשוט דרך הקלדת הדומיין שלכם (לאחר שחיברתם אותו לאתר) והוספת /?edit בסוף הכתובת. (לדוגמה, mydomain.com/?edit). ניתן גם להוסיף מיתוג (White Label) לעורך במקום המיתוג של Webflow.
העורך המקוצר מאפשר לנו את היכולות הבאות:
- עריכת אלמנטים שנתנו להם הרשאות עריכה (לדוגמה, עריכה של פסקת טקסט)
- עריכת פריטים באוספים והוספת פריטים חדשים בהתאם להרשאות
כל פריט באוסף ולמעשה כל השינויים שמבוצעים יכולים להישמר כטיוטה. בהתאם להרשאות, יהיה אפשר לפרסם את הטיוטה ישר או רק לאחר אישור של משתמש בכיר יותר.
לפני שנמשיך להתמקד בנושא של קידום אתרי Webflow בואו שנייה ניישר קו את כל מה שצריך לדעת על אופטימיזציה לאתרים עם המדריך המצולם שלי
קידום אתרי Webflow
תגי מטא ותגי ALT
בזכות האופן בו Webflow עובדת, ניתן לא רק לקבוע את תגי המטא לכל עמוד סטטי, אלא גם תבניות מטא לאוספים.
אם ניגש לתפריט העמודים ונלחץ על סימן גלגל השיניים שלידו, נוכל לראות את הגדרות ה-SEO הספציפיות לכל עמוד ואת הגדרות השיתוף שלו בפייסבוק (ה-Open Graph). מלבד ה-Title וה-Description נוכל גם לקבוע שעמוד מסוים לא יופיע בתוצאות של גוגל.
אפשרות מעניינת שלא ראיתי בהרבה מערכות אחרות היא קביעת כותרת ותיאור בתוך החיפוש הפנימי של האתר שלא בהכרח יהיו זהים לאלו עבור גוגל או פייסבוק.
הגדרות עבור אוספים נעשות בצורה דומה מכיוון שכל האוסף מופיע כבר כתבנית בתוך רשימת העמודים. ההבדל הוא שכאן תתוסף לנו האופציה להוסיף לתגי המטא באופן קבוע את כל אחד מהשדות שקבענו לאוסף.
עריכה של תגי ALT לתמונות נעשית דרך מאפייני התמונה, בין אם התמונה מוגדרת כאלמנט ובין אם התמונה היא חלק מה-Assets.
כתובת העמודים (Slug)
קביעה של כתובת העמודים (ה-Slug) מתווספת באופן אוטומטי לכל עמוד באוסף. ה-Slug לעמודים אחרים (למעט עמודים מיוחדים כמו 404) נמצא בהגדרות של הדף עצמו.
הפניות מסוג 301
הפניות מסוג 301 זמינות רק לתוכניות בתשלום דרך לשונית Hosting בהגדרות ברמת ה-Project (אחת מעל עריכת האתר עצמו).
כאן אפשר לבצע הפניות פשוטות, לבצע הפניות מתקדמות עם Regular Expressions ואפילו הפניות בין דומיינים, אבל רק בתנאי ששניהם מחוברים ל-WebFlow.
אופטימיזציה למהירות
עם כל הכבוד למה ש-Webflow מאפשרת לנו, השליטה בביצועים של האתר לא נמצאת ישירות בידיים שלנו, אבל יש כמה דברים שבכל זאת חשוב לדעת:
- כברירת מחדל, כל תמונה שעולה ל-Assets ועובדת דרך תג Img משתמשת ב-Lazy Load והיא נטענת רק כאשר המשתמש גולל עד אליה.
תמונות אחרות, שהן למשל חלק מ-Style מסוים לא פועלות דרך Lazy Load, אלא דרך טכניקה שנקראת Object Fit (או בקיצור Fit). Fit שולטת על האופן בו תמונות יוצגו במכשירים שונים ואיך תמונות שנמצאות בתוך מקטעים שונים בעמוד יופיעו (הסבר טכני).
מעל לכל, חשוב לבצע עבור התמונות אופטימיזציה מראש עבור אותם המקרים בהן הן מוצגות בגודל מלא. - כל קריאה לשרת מאיטה את הדף. באמצעות הצבת תג מיוחד ב-Head תחת מאפייני הפרויקט ו-Custom Code (לא עובד בתוכנית חינמית) ניתן לבצע טעינה מראש של ה-Assets השונים באופן הבא כך שלא יהיה צורך להתעסק עם שני דומיינים שונים (שלכם ושל אלו שמשמשים את Webflow):
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="dns-prefetch" href="https://fonts.gstatic.com/"><link rel="preconnect" href="https://uploads-ssl.webflow.com/" crossorigin>
<link rel="dns-prefetch" href="https://uploads-ssl.webflow.com/"> - Webflow אומנם לא תומכת בשפות תכנות מלאות לאינטרנט, אבל היא כן תומכת בסקריפטים מסוימים וספריות כמו JQuery.
חשוב שהסקריפטים האלו יהיו מוגדרים ככאלו שנטענים בסוף העיבוד של הדף (Defer) או באופן מקביל אליו (א-סינכרוני). סקריפטים שרצים לפני העיבוד של הדף מן הסתם יגרמו להשהיה בזמן בו הוא יתחיל להיות מוצג בדפדפן (פרמטר שגוגל בהחלט בודק).
הגדרות SEO ברמת האתר
הגדרות SEO ברמת האתר נעשות דרך ה-Dashboard, לחיצה על סמל שלוש הנקודות ליד האתר ואז מעבר ללשונית SEO.
כאן ניתן להפעיל ולכבות מספר אפשרויות:
- יצירת אינדקס של הדומיין הפנימי של Webflow (מכובה כברירת מחדל, אלא אם כן אתם בתוכנית שלא מאפשרת לכם חיבור של דומיין חיצוני).
עריכת קובץ robots.txt (לא בתוכנית חינמית) - יצירת מפת אתר באופן אוטומטי (לא בתוכנית חינמית)
- תג Verification ל- Search Console
- כתובת קנוניקל ברירת מחדל, יש לשים לב שמלבד זאת כל עמוד יפנה לעצמו.
אם אתם לא סגורים על מה זה קנוניקל ולמה זה טוב, הנה סרטון שמבהיר את הנושא:
אינטגרציות נוספות ניתן למצוא תחת לשונית Integrations:
- Universal Analytics
- Google Optimize (כלי המשמש ל-A/B Testing)
- Google Maps
- Facebook Pixel
- מתן הרשאות לאפליקציות צד שלישי
בנוסף ניתן לקבל גישה ל-API (כלומר Token) ל-Collections ולהוסיף Webhooks
אינטגרציות אחרות ברמת האתר אפשר פשוט להוסיף דרך קוד מותאם אישית שישבו ב-Head באותו אופן בו הוספנו אופטימיזציות למהירות.
אם אתם רוצים להוסיף קוד מותאם אישית ישירות אחרי תג ה-Body (למשל, עבור Google Tag Manager), אתם צריכים לגרור אלמנט של קוד מותאם אישית ישירות אל מתחת ל-Body ב-Navigator.
עד כמה שהצלחתי להבין, יש לעשות את זה עבור כל עמוד, ולכן הדרך הכי טובה להימנע מטעויות היא קודם כל להכניס אותו לתוך Symbol כקוד לשימוש כחוזר, כך שלא תצטרכו לבצע עדכונים בכל העמודים והאוספים אם תאלצו לשנות אותו מאיזושהי סיבה.
תגי קנוניקל מותאמים אישית
אם מסיבה מסוימת אתם רוצים תג קנוניקל מותאם אישית (למשל, במקרים שבהם אוסף מחולק לכמה עמודים), אתם יכולים לעשות זאת דרך Custom Code מתפריט העמודים ופשוט להוסיף אותו שם.
כתובות IP
מכיוון ש-Webflow עובדת דרך מערכת CDN, אי אפשרות להקצות כתובת IP ייחודית לכל אתר.
לכן מבחינת SEO מדובר בחיסרון מסוים, אלא אם כן אתם לא מתכננים לקשר בין אתרים שונים שלכם שנמצאים ב-Webflow.
לסיכום
Webflow היא אחת מהמערכות המתקדמות ביותר להקמת אתרים שנתקלתי בהן ולמעשה היא מאפשרת לכם ליצור סוג של מערכת לניהול תוכן באופן פשוט בלי קידוד (זאת למשל לעומת WordPress שתדרוש מכם בדרך כלל שימוש ב-Codex הפנימי שלה).
מצד שני, דווקא בגלל האופי המתקדם שלה, היא פחות מתאימה למי שמגיע ממערכות כמו Wix או אפילו מערכות אחרות לניהול תוכן שמשתמשות בתוספים סטנדרטים (החל מוורדפרס ועד Shopify).
לכן, בתור מקדם אתרים השימוש העיקרי שאני מוצא לה הוא בניית אתר התדמית האישי שלכם או יצירת רשת של אתרים עבור לקוחות תוך כדי חיסכון כספי משמעותי לעומת פתרונות אחרים.
מבחינת יכולות ה-SEO שלה, יש בה כמעט כל דבר שאתם יכולים לחשוב עליו, אם כי השליטה שלכם באחסון והשרת היא מאוד מוגבלת ברוב החבילות.
לכן היא פחות מתאימה כפתרון בלעדי להקמת רשת של אתרים (PBN) שבדרך כלל מפזרים בין שרתים וכתובות IP שונות.
