אלמנטור

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

בניית אתר באמצעות מערכת וורדפרס:

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

שימוש באלמנטור לבניית אזורים שונים באתר:

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

מהו תפריט עליון ומה יהיה בו?

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

כיצד נבנה תפריט עליון באלמנטור?

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

נתחיל מהשלב הראשון:

התחברו ללוח הבקרה של האתר שלכם ובתפריט הצדדי לחצו על "עיצוב" -> "תפריטים". כעת תוכלו לערוך את התפריט הראשי הקיים שלכם או ללחוץ על "צור תפריט חדש". אל תפריט זה הוסיפו את העמודים הראשיים שאתם רוצים וסדרו אותם בהתאם לצורך שלכם. שימו לב שתוכלו גם לשלב עמודים כתת קטגוריה לעמודים אחרים ובכך יצא לכם בעריכה תפריט נפתח. לאחר שבחרתם את העמודים הרצויים וסידרתם אותם בסדר שאתם רוצים – תגללו למטה וסמנו בV את האופציה main menu או primary navigation תלוי מה מופיע לכם. לבסוף לחצו על שמור. מומלץ גם לתת שם לתפריט שיצרתם כי תכף תצטרכו לבחור אותו באלמנטור ולכן כדאי לדאוג לזה כבר עכשיו.

בשלב השני:

היכנסו לעריכת הHEADER בספריית הטמפלטים השמורים שלכם באלמנטור. אם אין לכם HEADER כיוון שמדובר באתר חדש הקימו טמפלט חדש -> בחרו בהידר -> תנו שם לטמפלט וצרו אותו.

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

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

מהו סיידבר ומה נרצה שיהיה בו?

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

כיצד נבנה סיידבר באלמנטור?

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

העבודה על בניית האתר שלנו אף פעם לא נגמרת. תמיד יש מה לעשות כבר משלבי הבניה הראשונים של האתר וכמובן התאמות שונות שצריך לעבוד עליהן תוך כדי תנועה. החשיבות של אתר מעוצב מוכרת לכל והמרדף אחר חוויית המשתמש ברמה הגבוהה ביותר מורגשת בכל אתר של חברה מקצועית המעוניינת לשקף את ערכיה דרך האתר. בין היתר חשוב לדאוג לקוד אתר מסודר, מבנה אסתטי ונוח לגלישה, ניווט קל ויעיל ועוד. במדריך זה נדבר אתכם בעיקר על החשיבות של ה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 עמודות ובעמודות הללו לכלול את הקישורים או המידע שאתם רוצים. גררו את האלמנטים מהסרגל הצדדי לעמודות לפי הצרכים שלכם והתחילו לעצב בנחת את אזור הפוטר שלכם. כאשר אתם שומרים זכרו להגדיר כתנאי היכן אתם רוצים שהפוטר יופיע.