Studio Editor: עיצוב הרקע של מקטע

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

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

כדאי לדעת:

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

הוספת צבע לרקע המקטע

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

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

בחרו את המקטע הרלוונטי.
הקליקו על האייקון לפתיחת כלי העריכה מימין למעלה ב-Editor.

צילום מסך של פתיחת החלונית Inspector ב-Studio Editor.

הקליקו על תיבת הצבעים תחת Design (עיצוב).
בחרו צבע בהתאם להעדפה:
- Theme colors: בחרו אחד מצבעי האתר.
- My colors: בחרו צבע מותאם קיים.
- צבע חדש: הקליקו על + Add כדי להוסיף צבע חדש לפלטת בחירת הצבעים.
(לא חובה) השתמשו בפס ההזזה כדי להגדיל או להקטין את רמת השקיפות של הצבע.

בחירת צבע לרקע המקטע מפלטת בחירת הצבעים בחלונית העריכה ב-Studio Editor

הוספת גרדיאנט (מעבר צבע) לרקע המקטע

Studio Editor מציע סוגים שונים של גרדיאנט לרקע המקטע:

גרדיאנט מעגלי, קווי או בצורת חרוט : בחרו עד 8 צבעים ושלטו ברמת השקיפות של כל צבע בנפרד. אתם יכולים גם לכוונן את הזווית (Linear), נקודת המוקד (Radial) או את שניהם (Conic) כדי להשיג את המראה הרצוי.
גרדיאנט פלואידי : מאפשר ליצור אפקט דמוי רשת, ולשלב בין כמה צבעים שתרצו. אתם יכולים לשלוט בשקיפות, בגודל ובפיזור של כל צבע בגרדיאנט.

כדי להוסיף גרדיאנט לרקע המקטע:

בחרו את המקטע הרלוונטי.
הקליקו על האייקון לפתיחת כלי העריכה מימין למעלה ב-Editor.

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

הוספת גרדיאנט מסוג Linear, Radial או Conic (מעגלי, קווי או חרוט)

(בפלטת בחירת הצבעים) הקליקו על אייקון הגרדיאנט (מעבר צבע) .
בחרו את סוג הגרדיאנט מהתפריט הנפתח: Linear (קווי), Radial (מעגלי) או Conic (חרוט).
התאימו את ההדרגתיות ואת הצבעים באמצעות הפעולות הבאות:
- שינוי הזווית (קווי וחרוט):
  1. הקליקו על הזווית הנוכחית שמופיעה בתצוגה המקדימה של הגרדיאנט.
  2. הכניסו את הזווית הרצויה.
- שינוי מיקום נקודת המוקד (מעגלי וחרוט):
  1. הקליקו על נקודת המוקד הנוכחית שמופיעה בתצוגה המקדימה של הגרדיאנט.
  2. החזיקו וגררו אותה למיקום הרצוי.
- שינוי צבע קיים:
  1. (בסרגל הצבעים שמתחת לתצוגה המקדימה) הקליקו על נקודת הצבע שאתם רוצים לשנות.
  2. הקליקו על תיבת הצבעים.
  3. בחרו צבע. אתם יכולים לבחור צבע מערכת העיצוב, או כל צבע מותאם שתרצו.
- הוספת צבעים:
  1. (בסרגל הצבעים שמתחת לתצוגה המקדימה) הקליקו על המיקום הרצוי של הצבע החדש.
    טיפ: כשתעברו עם העכבר מעל סרגל הצבעים, תראו שהסמן משתנה לאייקון הזה .
  2. בחרו צבע. אתם יכולים לבחור צבע מערכת העיצוב, או כל צבע מותאם שתרצו.
  3. (לא חובה) גררו את פס ההזזה כדי לשנות את השקיפות של הצבע.
- מחיקת צבע:
  1. (בסרגל הצבעים שמתחת לתצוגה המקדימה) הקליקו על נקודת הצבע שאתם רוצים להסיר.
  2. הקליקו על האייקון של מחיקת צבע .

טיפ: שמרו את הגרדיאנט שעיצבתם כדי להשתמש בו בעתיד. אחרי עיצוב הגרדיאנט, הקליקו על ‎+ Add (הוספה) ליד My color gradients (מעברי הצבעים שלי).

הוספת גרדיאנט מסוג Fluid (פלואידי)

(בפלטת בחירת הצבעים) הקליקו על אייקון הגרדיאנט מסוג Fluid (פלואידי) .
התאימו את ההדרגתיות ואת הצבעים באמצעות הפעולות הבאות:
- שינוי צבע קיים:
  1. (בתצוגה המקדימה של הגרדיאנט) הקליקו על נקודת הצבע שאתם רוצים לשנות.
  2. הקליקו על תיבת הצבע שמתחת לתצוגה המקדימה.
  3. בחרו צבע אחר. אתם יכולים לבחור צבע מערכת העיצוב, או כל צבע מותאם שתרצו.
- הוספת צבעים:
  1. (בתצוגה המקדימה של הגרדיאנט) הקליקו על המיקום הרצוי עבור הצבע החדש.
    טיפ: כשתעברו עם העכבר מעל התצוגה המקדימה, תראו שהסמן משתנה לאייקון הזה .
  2. בחרו צבע. אתם יכולים לבחור צבע מערכת העיצוב, או כל צבע מותאם שתרצו.
  3. שנו את הצבע החדש:
    - גררו את פס ההזזה כדי לשנות את רמת השקיפות של הצבע.
    - גררו את פס ההזזה תחת Size (גודל) כדי לשנות את כמות המקום שהצבע תופס בגרדיאנט.
    - גררו את פס ההזזה תחת Spread (מרווח) כדי להגדיר כמה הצבע יתפשט על גבי הגרדיאנט.
- מחיקת צבע:
  1. (בתצוגה המקדימה של הגרדיאנט) הקליקו על נקודת הצבע שאתם רוצים להסיר.
  2. הקליקו על האייקון של מחיקת צבע .

טיפ: שמרו את הגרדיאנט שעיצבתם כדי להשתמש בו בעתיד. אחרי עיצוב הגרדיאנט, הקליקו על + Add (הוספה) ליד My Fluid gradients (הגרדיאנט הפלואידית שלי).

הגדרת גרדיאנט פלואידית לרקע המקטע ב-Studio Editor

הוספת תמונה לרקע המקטע

הוסיפו תמונה לרקע המקטע מהקנבס או מחלונית ה-Inspector (עריכה). אתם יכולים להשתמש בתמונות משלכם, לבחור תמונה חינמית מ-Wix או Unsplash, או לרכוש תמונת Shutterstock. אחרי שהוספתם את התמונה, תוכלו להתאים את נקודת הפוקוס כדי שהחלק הרלוונטי יוצג תמיד.

טיפ:

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

כדי להוסיף תמונה לרקע של מקטע בעמוד:

פתחו את העמוד הרלוונטי ב-editor.
בחרו מה לעשות עכשיו:

הוסיפו רקע תמונה ישירות על גבי הקנבס

הוסיפו תמונת רקע מחלונית ה-Inspector (עריכה)

ערכו תמונת רקע קיימת

הוספת תמונה לרקע המקטע מחלונית העריכה ב-Studio Editor

עדכנתם אתר מ-Editor X ל-Studio?

אם הוספתם אפקט פרלקס לתמונת רקע, הוא יישאר זהה ב-Studio - אלא אם תמחקו את האפקט או תחליפו את התמונה.

ב-Studio Editor אפשר להוסיף אפקט פרלקס לתמונה בכל אחת מהדרכים הבאות:

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

הוספת סרטון לרקע המקטע

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

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

טיפ:

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

כדי להוסיף סרטון לרקע של מקטע בעמוד:

בחרו את המקטע הרלוונטי.
הקליקו על האייקון לפתיחת כלי העריכה מימין למעלה ב-Editor.

הקליקו על ‎+ Add image or video (הוספת תמונה או סרטון) תחת Media (מדיה).
(במנהל המדיה) בחרו מה לעשות הלאה:
- בחרו או העלו סרטון משלכם.
- הקליקו על הטאב Media from Wix/Unsplash כדי להשתמש באחד מהסרטונים החינמיים שלנו.
- הקליקו על הטאב Shutterstock כדי לרכוש סרטון מ-Shutterstock.
הקליקו על Change Background (שינוי רקע).
(לא חובה) ערכו את הסרטון שברקע בחלונית העריכה:
- Focal point: הקליקו על האייקון של נקודת המוקד כדי לבחור את האזור בסרטון שתמיד יהיה גלוי, גם כשגודל המסך משתנה.
- Opacity: גררו את פס ההזזה כדי לשנות את הנראות של הסרטון.
- Playback speed: הקליקו על התפריט הנפתח כדי לבחור את המהירות (לדוגמה, ‏ 0.25x,‏ 1.25).
- Play in a loop: הקליקו על המתג כדי לשנות את אופן ההפעלה של הסרטון:
  - במצב מופעל: הסרטון יפעל בלופ אינסופי ברקע.
  - במצב כבוי: הסרטון יפעל רק פעם אחת, ואז יפסיק.

רוצים לראות את זה בלייב?

הקליקו על כפתור ההפעלה בסרטון כדי לראות איך הוא נראה ישירות על הקנבס.

צפייה מקדימה ברקע סרטון על הקנבס ב-Studio Editor

הוספת שכבת כיסוי עם דוגמת עיצוב לרקע המקטע

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

כדי להוסיף שכבת כיסוי עם דוגמת עיצוב לרקע המקטע:

בחרו את המקטע הרלוונטי.
הקליקו על האייקון לפתיחת כלי העריכה מימין למעלה ב-Editor.

הפעילו את המתג Apply pattern overlay (הוספת שכבת כיסוי עם דוגמת עיצוב ) תחת Background overlay (שכבת כיסוי לרקע).
עברו על הדוגמאות המוצעות. הקליקו על דוגמה מסוימת כדי להוסיף אותה כשכבת כיסוי ולראות איך היא משתלבת ברקע שלכם.

מעבר על שכבות הכיסוי הזמינות ב-Studio Editor, וההוספה שלהן למקטע קיים

הוספת אפקט גלילה לרקע המקטע

אפקטים של גלילה ברקע מוסיפים תחושה של תנועה כאשר הגולשים גוללים למעלה ולמטה באתר של הלקוחות שלכם. יש מגוון אפקטים לבחירה (כמו Parallax, ‏3D או Zoom In) שעוזרים להבליט את התוכן.

שימו לב:

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

כדי להוסיף אפקט גלילה ברקע:

בחרו מקטע בעמוד.
הקליקו על אייקון האפקטים של גלילה ברקע .
בחרו אפקט מהרשימה.

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