Studio Editor: הגדרת גודל האלמנטים
זמן קריאה: 8 דקות
כשאתם מעצבים את האתר, חשוב לוודא שהאלמנטים ייראו טוב בכל מסך. ב-Studio Editor אתם עורכים את הגודל בפיקסלים, וההתנהגות הרספונסיבית דואגת לכל השאר.
כל אלמנט מגיע עם התנהגות ברירת מחדל (למשל Scale proportionally – שינוי גודל פרופורציונלי) שקובעת איך הגודל שלו ישתנה במסכים אחרים. דרך חלונית ה-Inspector (עריכה) אפשר לשנות את ההתנהגות הרספונסיבית של האלמנט לפי הצורך.
היכנסו ל-Wix Studio Academy כדי לצפות בוובינרים, מדריכים וקורסים נוספים של Wix Studio.
בעמוד המידע הזה תלמדו איך שינוי הגודל עובד ב-Studio Editor:
טיפ:
אתם יכולים להגדיר את הגודל וההתנהגות הרספונסיבית של אלמנט לכל נקודת ברייקפוינט.
שינוי הגודל של אלמנט
בחרו אלמנט על הקנבס וגררו את נקודות האחיזה בצדדים כדי להקטין או להגדיל אותו. זה יקבע איך האלמנט ייראה בנקודת הברייקפוינט הנוכחית.
בחלונית ה-Inspector (עריכה) תוכלו לבדוק את הרוחב והגובה המדויקים של האלמנט בפיקסלים. אם צריך, אתם יכולים להכניס ערכי רוחב וגובה משלכם.
תנו ל-Inspector (עריכה) לחשב בשבילכם:
לנוחותכם, אתם יכולים להשתמש בחיבור ( + ), חיסור ( -), כפל ( * ) וחילוק ( / ) בעת הקלדת ערכי גודל. לדוגמה, הרחיבו את האלמנט פי 3 על ידי הוספת *3 ליד הרוחב הנוכחי.
שינוי גודל אלמנטים של מדיה
כשאתם משנים את הגודל של אלמנט מדיה, כמו תמונה או סרטון, אתם יכולים לנעול את יחס הרוחב-גובה כדי שהם תמיד יישארו פרופורציונליים זה לזה.
אילו אלמנטים של מדיה כוללים את האפשרות הזו?
משמעות הדבר היא שכשאתם משנים את הרוחב, הגובה מותאם אוטומטית (ולהיפך) כדי לשמור על הצורה המקורית של האלמנט.
כדי לנעול את יחס הרוחב-גובה:
- בחרו את אלמנט המדיה הרלוונטי.
- הקליקו על החץ לפתיחת חלונית ה-Inspector (עריכה)
מימין למעלה.
- הקליקו על האייקון של נעילת יחס הרוחב-גובה
תחת Size (גודל).
- יש שתי דרכים לשנות את גודל האלמנט:
- להכניס את ערך הרוחב או הגובה בחלונית ה-Inspector (עריכה) (הערך השני יותאם אוטומטית).
- לגרור את נקודות האחיזה של האלמנט על גבי הקנבס.
הערה:
האפשרות הזו לא זמינה במצב קביעת הגודל המתקדם.
הגדרת הגודל ב-px*
px* היא יחידת מידה ב-Studio Editor. היא מאפשרת לערוך את התאמת הגודל באמצעות מידה מוכרת (פיקסלים), בעוד שהמידה מאחורי הקלעים היא רספונסיבית.
במילים אחרות, אתם מעצבים בפיקסלים שמייצגים את הגודל על הקנבס, והאלמנט נשאר רספונסיבי. הערכים ויחידות הגודל הספציפיים תלויים בהתנהגות הרספונסיבית שתבחרו. עמדו עם העכבר מעל px* כדי לראות את החישוב ואת יחידת הגודל הרספונסיבית שבה נעשה שימוש.
בדוגמה שלמטה, רוחב הקונטיינר על הקנבס הנוכחי הוא 1,000 px*. היחידה היא למעשה אחוזים, כך שהרוחב הוא יחסי לכל מסך (79.1%).
מה ההבדל בין px* ל-px?
שניהם מאפשרים לערוך בפיקסלים, אבל:
- px* פירושו שהגודל שאתם רואים רלוונטי לנקודת הברייקפוינט שאתם עובדים עליה כרגע.
- px אומר שהגודל הוא קבוע בכל נקודות הברייקפוינט.
בחירת ההתנהגות הרספונסיבית של אלמנט
כשאתם מוסיפים אלמנט לעמוד, הוא כבר מגיע עם התנהגות רספונסיבית מובנית. זה אומר שאתם לא צריכים לדאוג איך ייראה האלמנט במסכים שונים - ההתנהגות הרספונסיבית מבטיחה שהגודל שלו ישתנה.
עם זאת, אולי כדאי לשנות את ההתנהגות הרספונסיבית, אם תמצאו התנהגות שיותר מתאימה לעיצוב שלכם.
מה ההבדל בין ההתנהגויות הזמינות?
הערה:
ההתנהגות הרספונסיבית שתבחרו משפיעה על יחידות הגודל שיהיו בשימוש. לדוגמה, בחירה בהתנהגות הרספונסיבית Fix (קבוע) משנה את המידה מ-px* ל-px.
כדי לבחור התנהגות רספונסיבית שונה:
- בחרו את נקודת הברייקפוינט הרלוונטית ב-Editor.
- בחרו את האלמנט.
- הקליקו על החץ לפתיחת חלונית ה-Inspector (עריכה) מימין למעלה.
- בחרו אפשרות מהתפריט הנפתח Responsive behavior (התנהגות רספונסיבית).
שימוש במידות גודל מתקדמות
שינוי גודל מתקדם מאפשר התאמה אישית עמוקה יותר של גודל האלמנט לכל נקודת ברייקפוינט. כשאתם מפעילים שינוי גודל מתקדם לאלמנט, אתם רואים את המידות שאנחנו משתמשים בהן ומתאימים אותן לצרכים שלכם.
זה אומר שאתם יכולים לעבוד עם יחידות רספונסיביות במקום עם פיקסלים, וכך נפתח לכם מגוון חדש של אפשרויות.
מה המידות הזמינות?
הפעלת שינוי גודל מתקדם משפיעה על האלמנט הספציפי שתבחרו, בכל נקודות הברייקפוינט. מצב שינוי הגודל המתקדם נשאר מופעל עבור האלמנט הזה כדי לאפשר לכם גישה נוחה, אבל אתם יכולים לבטל אותו בכל שלב.
כדי לגשת ולערוך את שינוי הגודל המתקדם:
- בחרו את נקודת הברייקפוינט הרלוונטית ב-Editor.
- בחרו את האלמנט.
- הקליקו על החץ לפתיחת חלונית ה-Inspector (עריכה) מימין למעלה.
- הקליקו על אייקון הפעולות הנוספות
ליד Size (גודל). - הפעילו את המתג Advanced Size (גודל מתקדם).
- ערכו את שינוי הגודל לפי הצורך: ערכי ה-Width (רוחב), Height (גובה) ומינימום ומקסימום. טיפ: עברו ליחידה אחרת (לדוגמה מ-px ל-%) על ידי לחיצה עליה בחלונית ה-Inspector (עריכה). פעולה זו תפתח רשימה של המידות הזמינות לאלמנט.
הגדרת ההעדפה לגבי קביעת הגודל
איזו שיטה לקביעת גודל האלמנטים תעדיפו באתר שאתם מעצבים? אם אתם עובדים עם מידות CSS מתקדמות, תוכלו להפעיל את המצב המתקדם של קביעת הגודל ב-Editor. לעומת זאת, אם אתם מעדיפים לבחור בעצמכם את מצב קביעת הגודל לכל אלמנט, אתם יכולים להשאיר את ברירת המחדל.
כדי להגדיר את העדפת קביעת הגודל עבור האתר:
- הקליקו על האייקון של Wix Studio
מימין למעלה. - עמדו עם העכבר מעל View (תצוגה).
- עמדו עם העכבר מעל Sizing Preference (העדפת קביעת הגודל).
- בחרו את ההעדפה שלכם:
- Always Show Advanced: קביעת הגודל בחלונית העריכה תהיה תמיד במצב המתקדם.
הערה: במצב זה אין אפשרות להחזיר אלמנטים ספציפיים למצב ברירת המחדל הלא מתקדם. - Set per Element: אתם קובעים את העדפת קביעת הגודל לכל אלמנט.
- Always Show Advanced: קביעת הגודל בחלונית העריכה תהיה תמיד במצב המתקדם.
זה עזר לך?
|