יצירת FOOTER ו-HEADER באלמנטור
העבודה על בניית האתר שלנו אף פעם לא נגמרת. תמיד יש מה לעשות כבר משלבי הבניה הראשונים של האתר וכמובן התאמות שונות שצריך לעבוד עליהן תוך כדי תנועה. החשיבות של אתר מעוצב מוכרת לכל והמרדף אחר חוויית המשתמש ברמה הגבוהה ביותר מורגשת בכל אתר של חברה מקצועית המעוניינת לשקף את ערכיה דרך האתר. בין היתר חשוב לדאוג לקוד אתר מסודר, מבנה אסתטי ונוח לגלישה, ניווט קל ויעיל ועוד. במדריך זה נדבר אתכם בעיקר על החשיבות של הHEADER והFOOTER באתר שלכם ואיך תוכלו ליצור כאלה בקלות באמצעות אלמנטור. רגע שלפני שנגיע לזה בואו נדבר קודם בקצרה על איך בונים היום אתרים.
איך בונים אתר בשנת 2021?
בכל כמה שנים אנו עדים להתפתחות טכנולוגית משמעותית אחרת וכמובן גם טרנדים חדשים הקשורים לעיצוב גרפי בכלל ולעיצוב אתרים בפרט. ניתן להבחין בקלות בשוני בין אתרים מודרניים של היום לעומת אתרים שהיו לפני 10 ו-20 שנה. כיום גם לא צריך לבנות אתרים בתכנות מלא או להגביל את עצמנו עם מערכות ניהול תוכן בקוד סגור המאפשרות לנו לבנות את האתר רק לפי האלמנטים והתוספים הנמצאים במערכת החברה. ניתן לעשות שימוש במערכת תוכן בקוד פתוח כמו וורדפרס, לה יש עשרות אלפי תוספים אפשריים לשימוש, תבניות וכלים שונים שניתן לחבר ללוח הבקרה של האתר שלנו ומאפשרים לנו לשדרג אותו מבחינה ויזואלית, מבחינת חוויית המשתמש, מהירות הגלישה, ביצוע התאמות שונות ועוד.
מהי מערכת וורדפרס ומה היתרונות שלה?
וורדפרס היא מערכת ניהול תוכן חינמית שניתן להתקין על האתר שלכם, להשתמש בתבניות ותוספים כדי לבסס עליהם את בניית האתר או לעשות שימוש בתוסף הפופולרי אלמנטור. שימוש בתוסף זה הוא אחד היתרונות הגדולים של בניית אתר בוורדפרס והוא מאפשר לנו לערוך כל עמוד באתר בקלות, מהירות ויעילות בשיטת דראג&דרופ. בעברית זה אומר משיכה והוזזה של האלמנטים והצבתם במקום שבו אנו רוצים על המסך.
מה כוללת העבודה בעיצוב האתר ועד כמה חשוב לדאוג גם לקוד מסודר?
עיצוב אתר היא עבודה מקצועית שלא כל אחד יכול לעשות כמו שצריך. צריך לקחת בחשבון גם את השילוב של האלמנטים השונים באתר, מרווחים נכונים ביניהם, מבנה וניווט בין התכנים השונים, רקע, צבעים, פונטים ועוד דברים שצריכים להשתלב בצורה הרמונית אחד עם השני. צריך לקחת בחשבון את האופן בו אתם רוצים למתג את העסק ולהשתמש בצבעי המותג כצבעים הראשיים באתר שלכם. כל אלה צריכים גם להשתלב בקוד מסודר, בעיקר עבור מנועי החיפוש. למשל – אם תקימו HEADER לאתר שלכם אבל לא תגדירו בתגית הHTML שלו שמדובר בHEADER הרי שגוגל ומנועי החיפוש האחרים לא ידעו כלל שמדובר בHEADER וזה יכול להשליך על הרבה מאוד דברים.
מהו אזור של HEADER באתר?
אזור הHEADER באתר הוא החלק העליון של האתר והוא כולל בדרך כלל תפריט ראשי, לוגו ולעתים אפילו מעט שטח פרסום לבאנר. הוא יכול לכלול גם שורת חיפוש, כפתורי שיתוף ואפילו תפריט תוסף אם תרצו. האזור העליון הוא שטח הנדל"ן החשוב ביותר באתר שלכם אבל מצד שני במסכים קטנים כמו בסמארטפונים למשל אתם לא רוצים שהוא יתפוס חלק נרחב מהאתר שלכם כדי להציג באותו המסך הראשוני גם יותר תוכן. אזור הHEADER צריך להיות מוגדר כהידר עבור מנועי החיפוש וגם עבור הגדרות שונות של האתר שלכם. למשל בתבנית שאתם משתמשים יכול להיות מוגדר HEADER אחר ואם לא תעדכנו אותו להידר החדש שיצרתם עדיין יופיע ההידר השני.
איך נקים אזור HEADER באלמנטור?
היכנסו ללוח הבקרה של האתר שלכם. בתפריט הצדדי תראו מתחת לאלמנטור את הקטגוריה "טמפלטים" בלחיצה על זה יפתח תת התפריט ולחצו שם על "הוספת חדש". כעת תוכלו לבחור את סוג הטמפלט החדש שאתם בונים -> בחרו בHEADER. תנו שם לתבנית שתדעו במה מדובר וצרו את התבנית. כעת תוכלו לבחור בלוקים מעוצבים של HEADER לפי ההמלצות של האלמנטור (אם יש לכם אלמנטור פרו) או פשוט ללחוץ על האיקס וליצור את ההידר מאפס כרצונכם. כעת תוכלו ליצור אזורים ועמודות ולצקת אליהן אלמנטים לפי הצורך שלכם, לסדר את הגודל, הצבעים, המרחקים בין האלמנטים והמיקום שלהם כדי לעצב את החלק העליון של האתר כפי שאתם רוצים. בין היתר מומלץ להשתמש בכותרת ראשית לאתר ו/או לוגו, באנר פרסומי אם תרצו בחלק העליון (אפשר באמצעות שתילת קוד HTML), תוכלו להוסיף תפריט, כפתור מיוחד למשל ליצירת קשר מהירה ועוד. לחצו על שמור ופרסם. לאחר הפרסום תוכלו לבחור היכן הHEADER יוצג. לחצו על "הוסף תנאי" ואפשרו לו להיות מוצג בכל האתר. אם תרצו תוכלו גם להגביל את ההופעה שלו בעמודים מסוימים.
מהו אזור של FOOTER באתר?
מעטים מהגולשים באמת גוללים לתחתית האתר אולם זהו בהחלט מקום שחלק מהם מגיעים אליו. כדי להפחית את הסיכוי שהגולשים יינטשו את האתר שלכם ו/או כדי להוביל אותם לעמודים מרכזיים נוספים באתר, לעמוד הפייסבוק שלכם, ליצירת קשר מהירה אתכם או כל דבר אחר שתרצו – תוכלו להוסיף זאת בתחתית האתר באזור הנקרא FOOTER. ישנם גם כלים שהקוד שלהם יוטמע בFOOTER ולאו דווקא באזור אחר. בדרך כלל יהיה מומלץ לכלול שם אזור של כמה עמודות עם קישורים מומלצים, אפשרות מעקב ברשתות החברתיות, לוגו/אודות של החברה ועמודה של יצירת קשר מהירה עם החברה.
כיצד נקים אזור FOOTER באלמנטור?
בדומה להקמה של אזור ההידר כך נקים את אזור הפוטר. נכנס לטמפלטים ->הוספת חדש. נבחר ב"FOOTER", ניתן לתבנית שם ונערוך את האזור באמצעות אלמנטור. מומלץ תחילה להקים בלוק המחולק ל3-4 עמודות ובעמודות הללו לכלול את הקישורים או המידע שאתם רוצים. גררו את האלמנטים מהסרגל הצדדי לעמודות לפי הצרכים שלכם והתחילו לעצב בנחת את אזור הפוטר שלכם. כאשר אתם שומרים זכרו להגדיר כתנאי היכן אתם רוצים שהפוטר יופיע.
