Studio Editor: הוספה והגדרה של תיבות פלקסבוקס (Flexbox)

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

שלב 1 | הוסיפו פלקסבוקס

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

כדי להוסיף פלקסבוקס:

  1. הקליקו על Add Elements (הוספת אלמנטים) בצד שמאל של ה-Editor.
  2. הקליקו על Layout Tools (כלי פריסה).
  3. הקליקו על Flexboxes.
  4. גררו את תיבת הפלקסבוקס שבחרתם אל העמוד.
חלונית הוספת האלמנטים ב-Studio Editor. סמן העכבר נמצא מעל פריסת פלקסבוקס.
איך זה עובד?
גררו את נקודות האחיזה על הקנבס כדי לראות איך התוכן בתיבת הפלקסבוקס מסתדר מחדש אוטומטית כשעוברים בין נקודות ברייקפוינט. 

שלב 2 | הוסיפו פריטים לפלקסבוקס

כל תיבת פלקסבוקס מורכבת מכמה פריטים שהם קונטיינרים רספונסיביים. אתם יכולים לשנות את מספר הפריטים בפלקסבוקס, וגודל הפריטים ישתנה אוטומטית כדי להתאים למקום הפנוי. 
כדי להוסיף פריט חדש, אפשר להקליק על Add Item (הוספת פריט) או להשתמש בחלונית ה-Manage Items (ניהול פריטים) בחלונית ה-Inspector (עריכה). 
תיבת פלקסבוקס ריקה ב-Editor. סמן העכבר נמצא מעל הכפתור Add items (הוספת פריטים).

שלב 3 | הוסיפו אלמנטים לפלקסבוקס

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

כדי להוסיף אלמנטים לפריט:

  1. הקליקו על Add Elements (הוספת אלמנטים) בצד שמאל של ה-Editor.
  2. בחרו את סוג האלמנט שאתם רוצים להוסיף.
  3. הקליקו על האלמנט שבחרתם כדי להוסיף אותו לעמוד.
  4. גררו את האלמנט לפריט הפלקסבוקס, ושחררו אותו כשתופיע המילה Attach (חיבור).
כפתור שנגרר לפלקסבוקס. המילה Attach (צירוף) מופיעה.
מה השלב הבא?
עכשיו אתם יכולים לערוך ולנהל את הפלקסבוקס כדי להציג את התוכן הרצוי באופן הרצוי.

זה עזר לך?

|