Wix Harmony Editor: עיצוב החלק העליון (Header) של האתר

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

עמוד אתר ב-Wix Harmony. ה-header למעלה מסומן

עריכת הרקע של החלק העליון (header)

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

כדי לשנות רקע לחלק העליון:

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

צבע רקע

רקע גרדיאנט (מעבר צבע)

תמונת רקע

סרטון רקע

עיצוב החלק העליון (header)

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

כדי לעצב את החלק העליון:

היכנסו ל-editor.
בחרו את החלק העליון.
הקליקו על אייקון כל אפשרויות העיצוב בסרגל הפעולות.
בחרו איך לעצב את החלק העליון:
- Border (מסגרת): בחרו צבע, רוחב וסגנון עבור מסגרת ה-header.
- Corners (פינות): גררו את הסליידר תחת Radius (רדיוס) כדי לעגל או לחדד את פינות החלק העליון. הקליקו על אייקון עריכת הפינות בנפרד כדי לעצב כל פינה בנפרד.
- Shadow (צל): הוסיפו צל פנימי וחיצוני כדי לעצב אפקט תלת-ממדי מעניין עבור החלק העליון, ובחרו את המיקום, הגדרות הטשטוש, הצבע ועוד.
- Spacing (ריווח): גררו את הסליידר כדי להוסיף רווח בין החלק העליון לשולי המסך. הקליקו על אייקון עריכת כל צד בנפרד כדי להוסיף ריווח רק לצדדים ספציפיים.

header באתר. חלונית העיצוב פתוחה, והמשתמש מגדיר את הצל עבור ה-header

שינוי גודל החלק העליון:

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

שינוי גודל ה-header ב-Wix Harmony Editor על ידי גרירת ידית האחיזה בתחתית

הגדרת התנהגות ה-header

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

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

כדי לשנות את התנהגות ה-header:

היכנסו ל-editor.
הקליקו על החלק העליון.
הקליקו על Change Behavior (שינוי ההתנהגות) בסרגל הפעולות.
הקליקו על המתג שליד Overlap next section (חפיפה עם המקטע הבא):
- במצב מופעל: החלק העליון ממוקם מעל המקטע הבא עם הפרדה ברורה ביניהם.
- במצב כבוי: החלק העליון צף מעל החלק העליון של המקטע הבא ויוצר מראה שכבות שבו התוכן מופיע מאחורי החלק העליון.
בחרו אפקט גלילה:
- Move with page (תזוזה עם העמוד): לא מופעל אפקט גלילה. כשהגולשים גוללים למטה בעמוד, הם 'מתרחקים' מראש העמוד (כלומר, מחלקו העליון של העמוד).
  הערה: האפשרות הזו מושבתת כשמגדירים חפיפה בין ה-header למקטע הבא.
- Stay fixed (קבוע במקום): החלק העליון יישאר בראש העמוד בזמן שהגולשים גוללים למעלה ולמטה, כדי לתת להם גישה נוחה לתפריט האתר.
- Disappear (נעלם): כשהגולשים גוללים בעמוד, החלק העליון נעלם בהדרגה. כשהגולשים יתחילו לגלול למעלה, החלק העליון יופיע שוב.
- Fades out (היעלמות הדרגתית): החלק העליון נעלם בהדרגה כשהגולשים גוללים באתר ומופיע מחדש כשהם מתחילים לגלול חזרה למעלה.
(לא חובה) כדי לראות את האפקט בפעולה, בדקו את העמוד בתצוגה מקדימה.

GIF של חלונית ה-Header Behavior ב-Wix Harmony. המשתמש עומד עם העכבר מעל האפקטים כדי לראות תצוגה מקדימה

הסתרת החלק העליון מעמוד ספציפי

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