Studio Editor: הגדרת גודל האלמנטים
זמן קריאה: 8 דקות
בזמן שאתם מעצבים את האתר, חשוב לוודא שהוא נראה טוב בכל מסך. ב-Studio Editor, אתם מגדירים את שינוי הגודל ב-px*, וההתנהגות הרספונסיבית דואגת לכל השאר.
כל אלמנט מגיע עם התנהגות ברירת מחדל (לדוגמה scale) שקובעת איך הגודל שלו ישתנה במסכים אחרים. אתם תמיד יכולים לשנות את התנהגות ברירת המחדל להתנהגות שתואמת יותר לצרכים שלכם.
px* היא יחידת גודל פלואידית, יחסית לגודל העמוד שנמצא בתהליך העריכה.
בעמוד המידע הזה תלמדו איך שינוי הגודל עובד ב-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 (התנהגות רספונסיבית).
שימוש במידות גודל מתקדמות
שינוי גודל מתקדם (Advanced sizing) מאפשר התאמה עמוקה יותר של גודל האלמנט לכל נקודת ברייקפוינט. במקום לעבוד עם px* ולבחור התנהגות רספונסיבית, המצב הזה מאפשר לראות את המידות שבהן אנחנו משתמשים מאחורי הקלעים (למשל px, %, vh) ולהתאים אותן לצרכים שלכם.
מה המידות הזמינות?
הפעלת שינוי גודל מתקדם משפיעה על האלמנט הספציפי שתבחרו, בכל נקודות הברייקפוינט. מצב שינוי הגודל המתקדם נשאר מופעל עבור האלמנט הזה כדי לאפשר לכם גישה נוחה, אבל אתם יכולים לבטל אותו בכל שלב.
כדי לגשת ולערוך את שינוי הגודל המתקדם:
- בחרו את נקודת הברייקפוינט הרלוונטית ב-Editor.
- בחרו את האלמנט.
- הקליקו על החץ לפתיחת חלונית ה-Inspector (עריכה) מימין למעלה.
- הקליקו על אייקון הפעולות הנוספות
ליד Size (גודל). - הפעילו את המתג Advanced Size (גודל מתקדם).
- ערכו את שינוי הגודל לפי הצורך: ערכי ה-Width (רוחב), Height (גובה) ומינימום ומקסימום.
טיפ: ניתן להחליף יחידה (לדוגמה מ-px ל-%) בלחיצה עליה בחלונית ה-Inspector (עריכה). פעולה זו תפתח רשימה של המידות הזמינות לאלמנט.
הגדרת גובה המקטע:
לא מומלץ להגדיר את הגובה בפיקסלים, כי זה עלול לגרום לאלמנטים להופיע לא כמו שצריך. לדוגמה, הם עשויים לגלוש או להיראות חתוכים.
הגדרת ההעדפה לגבי קביעת הגודל
איזו שיטה לקביעת גודל האלמנטים תעדיפו באתר שאתם מעצבים? אם אתם עובדים עם מידות CSS מתקדמות, תוכלו להפעיל את המצב המתקדם של קביעת הגודל ב-Editor. לעומת זאת, אם אתם מעדיפים לבחור בעצמכם את מצב קביעת הגודל לכל אלמנט, אתם יכולים להשאיר את ברירת המחדל.
כדי להגדיר את העדפת קביעת הגודל עבור האתר:
- הקליקו על האייקון של Wix Studio
משמאל למעלה. - עמדו עם העכבר מעל View (תצוגה).
- עמדו עם העכבר מעל Sizing Preference (העדפת קביעת הגודל).
- בחרו את ההעדפה שלכם:
- Always Show Advanced: קביעת הגודל בחלונית ה-Inspector תהיה תמיד במצב מתקדם.
הערה: מצב זה מבטל את האפשרות להחזיר אלמנטים ספציפיים למצב גודל מתקדם. - Set per Element: אתם קובעים את העדפת קביעת הגודל לכל אלמנט.
- Always Show Advanced: קביעת הגודל בחלונית ה-Inspector תהיה תמיד במצב מתקדם.
שאלות נפוצות
הקליקו על השאלות למטה לפרטים נוספים על שינוי גודל (sizing).
הגדרתי למקטע שינוי גודל פרופורציונלי (Scale Proportionally), אבל גודל האלמנטים לא משתנה בהתאם. למה?
מתי כדאי להשתמש בשינוי גודל מתקדם?
זה עזר לך?
|