שיעור 7: איך לבנות תפריט הדר – Header | מדריך אלמנטור 2020

elementor guid, שיר ויצמן, מדריך אלמנטור 2020 , הדר, header

מה זה תפריט הדר – Header Menu?

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

תפריט הדר זהו תפריט הניווט בעזרתו אנחנו מאפשרות לגולשות שלנו חווית גלישה נוחה.

לרוב נראה תפריטים שמורכבים מאחד או יותר מהאלמנטים הבאים:

  • תפריט ניווט (עמודים ראשיים באתר)
  • לוגו
  • שורת חיפוש
  • רשתות חברתיות
  • כפתור הנאה לפעולה
  • ועוד

בניית טמפלייט תפריט Header באלמנטור

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

במדריך הזה אנחנו נלמד איך ליצור תפריט הדר בסיסי שיוצג בכל האתר.

אז יאללה…. Let’s Go!

 

 


איך לבנות תפריט Header באתר וורדפרס?

אני נמצאת באזור לוח הבקרה בוורדפרס על רובריקת ‘טמפלטים’ ואני רוצה שתכירו את מה שנקרא – “בונה תבנית – Theme Builder”.

header, תפריט ניווט, סרגל עליון

כאן בעצם נמצאות כל האפשרויות שלנו ליצור טמפלטים מוכנים של המון דברים שנעבור עליהם בהמשך כמו:

  • הדר – Header
  • פוטר – Footer
  • דף שגיאה 404
  • עמוד ארכיון
  • עמוד פוסט וכו’

נלחץ הוספת חדש > header.

header, תפריט ניווט, סרגל עליון

 

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

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

שימו לב: כאן יש חשיבות רבה לכמות העמודות שנבחר לתפריט שלנו. זה תלוי כמובן במה נרצה להכניס שם. לרוב מומלץ לא להעמיס וניתן לבחור באזורו עם בין 2-4 עמודות שישמשו אותנו לאחד מהאלמנטים הנ”ל (תפריט ניווט, חיפוש, לוגו וכו’).

עבור המדריך הזה אבחר ב-3 עמודות. כעת אתחיל להכניס פנימה את האלמנטים הרצויים ולעצב איך שאני רוצה…


פרס: חצי שנה רישיון לאלמנטור PRO במתנה!

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

אז אני מאתגרת אתכן ואתכם למצוא לי את הסיבה למה שמים בסרגל העליון אלמנט של ‘תמונה’ (image) ולא את ‘לוגו אתר’ (site logo) שנשאב מהאתר עצמו.

הזוכה המאושרת או המאושר יקבלו ממני רישיון לאלמנטור פרו לחצי שנה במתנה 🙂 

אז כתבו לי בתגובות באתר או ביוטיוב מה הסיבה המדוייקת ותעזרו לעוד אנשים לדעת!


תפריט ניווט של העמודים/קטגוריות

במדריך וורדפרס למתחילים בשיעור מספר 14 – תפריט ניווט אני מראה איך לבנות את תפריט הניווט כדי שנוכל למשוך את האלמנט הזה באלמנטור.

 


עיצוב התפריט – Header

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

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

נחזור על הפעולה עם שאר העמודות.

עיצוב הדר במובייל

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

בהצלחה!

 


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

חדשות בוורדפרס? קבלו את המדריך המלא לבניית אתרים – מדריך וורדפרס למתחילים.

עקבו בפייסבוק והתעדכנו במאמרים וטיפים חשובים

מה אנשים אוהבים לקרוא כאן?

פוסטים אחרונים

הרשמו לניוזלטר וקבלו תכנים מגניבים

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

רוצים להקים אתר איכותי שמותאם בול לצרכי העסק והמותג שלכם?

השאירו פרטים ואתם בחצי הדרך לשם :)