חדש! Elementor
Experts Network — מצאו שותפים לדרך, קדמו והגדילו את העסק שלכם

מדריך אלמנטור ליצירת תפריט-צד דביק

רועי אייל | נובמבר 2020

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

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

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

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

מהו תפריט-צד דביק?

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

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

כך נראה תפריט-צד דביק במצב ברירת המחדל שלו:

וכך הוא נראה כאשר מקליקים עליו:

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

מהם היתרונות של תפריט-צד דביק?

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

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

מה דרוש כדי ליצור תפריט-צד דביק עם אלמנטור?

כדי ליצור תפריט-צד דביק, תצטרכו לשלב בין כמה טמפלטים ופיצ'רים:

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

איך יוצרים תפריט-צד דביק

1. החביאו את התפריט העליון בתצוגות דסקטופ ומובייל

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

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

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

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

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

2. צרו טמפלט חדש עבור תפריט-צד

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

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

בכדי ליצור את הטמפלט, עברו לאזור הטמפלטים בלוח הבקרה:

  • גשו אל הטאב של האזור 
  • הקליקו על הוספת אזור חדש
  • קראו לו תפריט-צד דביק

שימו לב #2: אנחנו יוצרים טמפלט של אזור רגיל – לא טמפלט של האדר באזור עליון עם בונה התבניות (אף שאנחנו עומדים להשתמש בטמפלט זה כ״האדר צידי״).

הגדרות האזור

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

  • רוחב התוכן: מקצה לקצה –
  • מרווח בין טורים: ללא מרווח –
  • גובה -> מינימום גובה: 100vh (פעולה זו מגדירה שהתפריט יתפוס עד 100% מגובה המסך)
  • מיקום הטור: נמתח
  • תגית HTML: כותרת (זו הגדרה אופציונלית, אבל היא הכרחית למטרות SEO) ברגע שהגדרתם את מבנה הפריסה, תוכלו להמשיך לטאב הסגנון בכדי להגדיר את הרקע של תפריט הצד. אתם תרצו לבחור את הצבע או מעבר הצבע שיתאים לשאר האתר.

הגדרות הטורים

לאחר מכן, פתחו את ההגדרות של הטור שבתוך האזור:

  • בתוך טאב הפריסה, הגדירו יישור אנכי שווה עם מרווח פנימי.
  • בטאב מתקדם, הוסיפו Padding של 50px לתחתית הטור.

הוספת וידג'טים

עכשיו, תוכלו להוסיף וידג'טים שיוצגו על ״האדר הצד״ שלכם. לדוגמה, אנחנו הוספנו:

  • לוגו
  • אייקון לפתיחת התפריט המלא
  • אייקונים לרשתות החברתיות

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

לוגו אתר:

הוסיפו תמונת לוגו על ידי וידג'ט התמונה.

אייקון:

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

בחרו גם צבע וצבע במעבר עכבר שיתאימו לעיצוב שלכם.

אייקונים לרשתות חברתיות:

תוכלו להוסיף כל רשת חברתית שתרצו בעזרת וידג'ט הרשתות החברתיות. תוכלו גם להגדיר צורות וצבעים שיתאימו לעיצוב שלכם.

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

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

3. צרו טמפלט יחיד נוסף שיכיל את תפריט הצד שלכם

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

עברו לטמפלטים -> בונה התבניות:

  • תחת טאב יחיד
  • הקליקו על הוספת חדש
  • בחרו יחיד כסוג הטמפלט
  • בסוג הפוסט – בחרו עמוד
  •  קראו לו עמוד עם תפריט-צד דביק

באדיטור של אלמנטור, צרו אזור עם שני טורים:

  • הטור השמאלי – הוא זה שיכיל את תפריט הצד הדביק
  • הטור הימני – הוא זה שיכיל את התוכן הרגיל של האתר

הגדירו את הטור הימני (תוכן)

בכדי להוסיף תוכן רגיל לטור הימני, הוסיפו את וידג'ט תוכן הפוסט.

הגדירו את הטור השמאלי (״האדר צידי״)

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

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

הגדירו מרווחים ופריסה של הטור

כרגע, ״ההאדר הצידי״ שלכם תופס כ-50% מהעמוד. בכדי לסדר את זה, בחרו בטור השמאלי (שכולל את ״ההאדר הצידי״) והגדירו את רוחב הטור ל-5% בטאב הפריסה. בעקבות פעולה זו, הטור הימני יתפרס אוטומטית על 95% הנותרים.

הגדרת ערך ה-Z-index תוודא שהפופ-אפ של תפריט הניווט המלא שניצור בהמשך יחליק מתחת ל״האדר הצידי״ ולא יכסה אותו.

} selector
;width: 60px
{

קוד ה-CSS הזה יוודא ש״ההאדר הצידי״ תמיד יישאר צר, ויתחום אותו לרוחב של 60px. תרגישו חופשי לשנות את המספר בהתאם להעדפות שלכם, רק אל תחרגו יותר מדי מ-60px.

הגדרת אפקטי התנועה

אנחנו רוצים לוודא ש״ההאדר הצידי״ יישאר צמוד למסך כל הזמן.

בכדי לעשות זאת, הקליקו על הטור הימני של הטמפלט:

  • תחת טאב מתקדם
  • הקליקו על אפקטי תנועה
  • הגדירו דביק לחלק העליון 
  • הגדירו דביק לדסקטופ וטאבלט

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

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

4. צרו את הפופ-אפ של תפריט הניווט

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

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

בכדי להתחיל, גשו לטמפלטים -> פופאפים -> צרו חדש ותנו לו שם שתוכלו לזכור, כמו תפריט ניווט.

הגדרות הפופ-אפ

פתחו את הגדרות הפופ-אפ בהקלקה על אייקון גלגל השיניים בפינה התחתונה השמאלית, והגדירו אותם כך:

  • רוחב: 450px
  • גובה: התאם למסך
  • מיקום אופקי: שמאל
  • כיסוי: הסתר (כבוי)
  • אנימציית כניסה: החלק פנימה משמאל
  • אנימציית יציאה: החלק החוצה משמאל

בכדי לוודא שהפופ-אפ מופיע מימין לתפריט הניווט כשהוא מחליק החוצה, תצטרכו להוסיף Margin:

  • תחת טאב מתקדם
  • מצאו את הגדרות ה-Margin
  • הוסיפו 60px לשמאל (או לימין אם אתם בוחרים להציג את התפריט מהצד השני)
  • הוסיפו 20px מתחת ל-Padding

הוסיפו את תפריט הניווט

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

שוב, בכדי להבין לעומק, הציצו במדריך המלא.

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

5. הגדירו אייקון שיפתח את הפופ-אפ של תפריט הצד המלא

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

בכדי לעשות זאת, גשו לטמפלטים -> טמפלטים שמורים וערכו את הטמפלט של ״ההאדר הצידי״ הדביק שכבר קיים תחת טאב "אזור".

פתחו את ההגדרות של אייקון תפריט הניווט, ואז:

  • הקליקו על האופציה של תגיות דינמיות עבור הלינק –
  • בחרו פופ-אפ מתוך פעולות ברשימה של התגיות הדינמיות

ברגע שהגדרתם את הלינק לפופ-אפ:

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

לאחר מכן, עדכנו את טמפלט האזור.

6. בדקו ותהנו

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

אם אתם נתקלים בבעיה כלשהי, נסו לשנות את ערכת הנושא שלכם ל-Hello באופן זמני, בכדי לוודא שאין קונפליקטים עם ערכת הנושא שלכם.

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

בנו את תפריט הצד הדביק שלכם עוד היום

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

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

עדיין יש לכם שאלות בנוגע ליצירה של תפריט-צד? השתמשתם במדריך הזה ואתם רוצים לשתף אותנו ביצירה שלכם? ספרו לנו על כך בתגובות!

רוצים להיות כותבים במגזין שלנו?

רועי אייל

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

אהבתם? שתפו.
שיתוף ב facebook
שיתוף ב twitter
שיתוף ב telegram
שיתוף ב linkedin
שיתוף ב whatsapp
שיתוף ב email

7 Responses

    1. במאמר אני עושה שימוש בפופ-אפ, אבל רק עבור פתיחת הניווט המלא.

      ועקרונית אפשר לעשות פופ-אפ שיקרא לעוד פופ-אפ… אבל כל פופ-אפ עולה מעל התוכן ומסתיר את מה שמתחתיו. ולכן אני עושה שימוש בתבנית עמוד, כדי שהתוכן שבצד הדף לא יוסתר.

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

    1. היי רחל
      שמח שהכל מצויין!

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

      בהצלחה,
      רועי

כתיבת תגובה

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

רוצים להיות כותבים במגזין שלנו?

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

רוצים להיות חלק מאלמנטור?

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