Studio Editor: עיצוב הרקע של מקטע
זמן קריאה: 10 דקות
אתם יכולים לעצב כל מקטע באתר שאתם יוצרים – לבחור צבע, מעבר צבע (גרדיאנט), תמונה או סרטון בתור רקע ולהוסיף שכבות עם דוגמאות עיצוב ואפקטים של גלילה להשגת המראה הרצוי.
עבודה עם נקודות ברייקפוינט:
אתם יכולים להגדיר את רקע המקטע לכל נקודת ברייקפוינט כדי להבטיח שהיא תיראה טוב בכל מכשיר.
הנושאים בעמוד זה:
טיפ:
כדי לזרז את תהליך העיצוב, יצרנו מגוון מקטעים מוכנים ורספונסיביים תחת Sections (מקטעים) בחלונית Add Elements (הוספת אלמנטים).
הוספת צבע לרקע המקטע
בחרו צבע לרקע המקטע, בין אם צבע מערכת העיצוב או צבע מותאם. לאחר מכן, תוכלו להגדיר את רמת השקיפות אם אתם מעדיפים רקע סולידי יותר.
כדי לשנות את צבע הרקע של מקטע:
- בחרו את המקטע הרלוונטי.
- הקליקו על האייקון לפתיחת כלי העריכה
מימין למעלה ב-Editor. - הקליקו על תיבת הצבעים תחת Design (עיצוב).
- בחרו צבע בהתאם להעדפה:
- Theme colors: בחרו אחד מצבעי האתר.
- My colors: בחרו צבע מותאם קיים.
- צבע חדש: הקליקו על + Add כדי להוסיף צבע חדש לפלטת בחירת הצבעים.
- (לא חובה) השתמשו בפס ההזזה כדי להגדיל או להקטין את רמת השקיפות של הצבע.
הוספת גרדיאנט (מעבר צבע) לרקע המקטע
Studio Editor מציע סוגים שונים של גרדיאנט לרקע המקטע:
- גרדיאנט מעגלי, קווי או בצורת חרוט
: בחרו עד 8 צבעים ושלטו ברמת השקיפות של כל צבע בנפרד. אתם יכולים גם לכוונן את הזווית (Linear), נקודת המוקד (Radial) או את שניהם (Conic) כדי להשיג את המראה הרצוי. - גרדיאנט פלואידי
: מאפשר ליצור אפקט דמוי רשת, ולשלב בין כמה צבעים שתרצו. אתם יכולים לשלוט בשקיפות, בגודל ובפיזור של כל צבע בגרדיאנט.
כדי להוסיף גרדיאנט לרקע המקטע:
- בחרו את המקטע הרלוונטי.
- הקליקו על האייקון לפתיחת כלי העריכה מימין למעלה ב-Editor.
- הקליקו על תיבת הצבעים תחת Design (עיצוב).
- המשיכו לפי ההנחיות הרלוונטיות ליצירת סוג הגרדיאנט הרצוי:
הוספת גרדיאנט מסוג Linear, Radial או Conic (מעגלי, קווי או חרוט)
בפלטת בחירת הצבעים.
.
.
הוספת גרדיאנט מסוג Fluid (פלואידי)
.
הוספת תמונה לרקע המקטע
הוסיפו תמונה לרקע המקטע והתאימו את נקודת המוקד כדי להציג את החלק הרלוונטי. אתם יכולים להשתמש בתמונות משלכם, לבחור תמונה חינמית מ-Wix או Unsplash, או לרכוש תמונת Shutterstock.
טיפ:
אתם יכולים להוסיף שכבת כיסוי של צבע או גרדיאנט מעל התמונה. הקליקו על תיבת הצבעים כדי לבחור צבע או גרדיאנט, ואז גררו את פס ההזזה כדי לשנות את רמת השקיפות של השכבה.
כדי להוסיף תמונה לרקע של מקטע בעמוד:
- בחרו את המקטע הרלוונטי.
- הקליקו על האייקון לפתיחת כלי העריכה מימין למעלה ב-Editor.
- הקליקו על + Add image or video (הוספת תמונה או סרטון) תחת Media (מדיה).
- (במנהל המדיה) בחרו מה לעשות הלאה:
- בחרו או העלו תמונה משלכם.
- הקליקו על הטאב Media from Wix / Unsplash כדי להשתמש באחת התמונות החינמיות שלנו.
- הקליקו על הטאב Shutterstock כדי לרכוש תמונה מ-Shutterstock.
- הקליקו על Change Background (שינוי רקע).
- (לא חובה) ערכו את התמונה שברקע בחלונית העריכה:
- Focal Point
(נקודת הפוקוס): בחרו את החלק בתמונה שתמיד יהיה גלוי, גם כשגודל המסך משתנה. - Opacity: גררו את פס הזזה כדי לשנות את הנראות של התמונה.
- Fitting options: הקליקו על התפריט הנפתח כדי לבחור איך התמונה תשתלב במקטע.
- Focal Point
- (לא חובה) הקליקו על אייקון האפקטים של גלילת הרקע
כדי לבחור אפקט גלילה (למשל Parallax – פרלקס).
עדכנתם אתר מ-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: הקליקו על המתג כדי לשנות את אופן ההפעלה של הסרטון:
- במצב מופעל: הסרטון יפעל בלופ אינסופי ברקע.
- במצב כבוי: הסרטון יפעל רק פעם אחת, ואז יפסיק.
- Focal point: הקליקו על האייקון של נקודת המוקד
רוצים לראות את זה בלייב?
הקליקו על כפתור ההפעלה בסרטון כדי לראות איך הוא נראה ישירות על הקנבס.
הוספת שכבת כיסוי עם דוגמת עיצוב לרקע המקטע
אתם יכולים להוסיף לרקע המקטע דוגמת עיצוב מעניינת. יש לנו מגוון דוגמאות לבחירה, בצבעים ובגדלים שונים – עברו על הרשימה והקליקו על דוגמאות שאתם אוהבים כדי לראות איך הן משתלבות עם הרקע.
כדי להוסיף שכבת כיסוי עם דוגמת עיצוב לרקע המקטע:
- בחרו את המקטע הרלוונטי.
- הקליקו על האייקון לפתיחת כלי העריכה מימין למעלה ב-Editor.
- הפעילו את המתג Apply pattern overlay (הוספת שכבת כיסוי עם דוגמת עיצוב ) תחת Background overlay (שכבת כיסוי לרקע).
- עברו על הדוגמאות המוצעות. הקליקו על דוגמה מסוימת כדי להוסיף אותה כשכבת כיסוי ולראות איך היא משתלבת ברקע שלכם.
הוספת אפקט גלילה לרקע המקטע
אפקטים של גלילה ברקע מוסיפים תחושה של תנועה למקטעים בזמן שהגולשים גוללים למעלה ולמטה באתר. יש מגוון אפקטים לבחירה (כמו Parallax, 3D או Zoom In) שעוזרים להבליט את התוכן.
שימו לב:
אפקטי הגלילה הזמינים תלויים בסוג הרקע שבחרתם עבור המקטע.
כדי להוסיף אפקט גלילה ברקע:
- בחרו מקטע בעמוד.
- הקליקו על אייקון האפקטים של גלילה ברקע
.
- בחרו אפקט מהרשימה.
זה עזר לך?
|