המדריך המלא להקמת אתר אינטרנט [חלק ב׳]

שיתוף ב facebook
שיתוף ב twitter
שיתוף ב linkedin

איך בעצם ממצב שיש לנו חלון שלא רואים בו כלום אנחנו מגיעים למצב שיש לנו אתר עומד ומדוגם כמו שצריך?

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

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

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

שלב א׳ – סקיצה, רפרנס ומחשבה.

ניקח אתר לדוגמא זה יעזור לנו המון. איפה אפשר לחפש כאלה? יש המון אתרים האינטרנט שיש להם מאגר של מאוד אתרים למשל המוקר שבניהם הוא behance. אני לדוגמא אוהב לחפש השראה באתרים של חברות אחרות ככה אני תמיד שומר על המשחק שלי בתפקוד גבוהה וגם אני אוהב לראות איך אנשים אחרים בונים אתרים. במקרה הזה של הבנייה בחרתי לבנות אתר לעצמי שהיא בעצם חברת אודיו שפיתחה אפליקציה למוזיקאים שרוצים להמשיך לעבוד על המוזיקה שלהם ולא להתקע. האפליקציה היא צעירה ומדברת בעיקר ליוצרים בתחום. המטרה שלהם שאותם האנשים לא ישארו באותו בלופ ולתת להם מטודות עבודה שנלמדו לאורך השנים על גביהם של מוזיקאים רבים וככה הם שוברים את מה שנקרא ״writer block” ומשיגים את מבוקשתם. (רעיון מקורי שלי אגב.)

עכשיו שאחנו יועים מאיפה לחפש ובערך מי עומד מולינו אנחנו יכולים להתקדם ולהקים דף חדש בתוכנה שהיא לא בוורדפרס. למה לא וורדפרס? כמו שאמרתי עדיף להתחיל במקור שאפשר לעשות בו שגיאות ולא על אתר לייב לכן ההמלצה שלי היא להתחיל בFigma / Adobe Xd / Photoshop וכו.

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

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

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

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

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

להגדיר את וורדפרס ולאפס כל מה שצריך על מנת שנוכל לבנות את האתר שלנו בצורה קלילה. נתחיל בהגדרת התבנית שלנו אני אוהב להשתמש במשהו קליל ולא מסובך כמו Hello Elemntor או Astra שניהם מעולים. נמחק את כל מה שלא צריך ונשמור תבנית אחד לגיבוי למקרה שנהיה צריכים להחליף בגלל תקלות (לרוב לא קורה אבל לפעמים צריך)

שלב ב׳ – הגדרות הבקאנד

אחרי שעשינו את זה נעבור להגדיר את הקישרונים הפנימים שלנו באתר, איפה זה נמצא? הגדרות > מבנה קישורים

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

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

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

שלב ג׳ – הטמעת השפה העיצובית באלמנטור

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

עכשיו הכל מוכן לשלב ד׳ שהוא בעצם הקמת האתר.

שלב ד׳ – בונה התבנית

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

יום רביעי | 12 ינואר | 2022

תוכן עניינים

ערוץ היוטוב:

נגן וידאו

על הסטודיו:

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

מחפשים בונה אתרים מקצועי?

מאמרים נוספים:

המדריך המלא להקמת אתר אינטרנט [חלק ג׳]
המדריך המלא להקמת אתר אינטרנט [חלק א׳]
איך לייצא תמונה באיכות גבוהה לאתר אינטרנט? (הרבה לא יודעים את זה)
איך בוחרים מפתח אתרים איכותי?

חיפוש מהיר:

מאמרים נוספים:

גלילה למעלה