תיבת אור - עזרה ב-Webflow
השתמשו באלמנט תיבת האור להצגת תמונות או סרטונים בחלון מודאלי במסך מלא.
כיצד ליצור תיבת אור
תיבת אור היא תמונה ממוזערת שניתן ללחוץ עליה, המקוננת בתוך בלוק קישור. כאשר מבקרי האתר לוחצים בתוך גבולות הקישור באתר החי, תיבת האור נפתחת ומציגה את המדיה המחוברת אליה. ניתן להוסיף תיבת אור מ-לוח ההוספה > מתקדם.
כיצד פועלת תמונת הממוזערת של תיבת האור
תיבת האור מכילה אלמנט תמונה שמתנהג כמו כל אלמנט תמונה אחר. ניתן לשנות את גודלו, ללחוץ פעמיים כדי להחליף את תמונת הממוזערת, ולהוסיף טקסט חלופי. למידע נוסף על אלמנטים של תמונות.
ניתן להשתמש באותה תמונה עבור תמונת הממוזערת של תיבת האור וחלון המודאלי הגדול יותר של תיבת האור. Webflow יוצרת אוטומטית גרסאות מגיבות לכל התמונות המוטמעות. למידע נוסף על תמונות מגיבות.
כיצד להחליף את תמונת הממוזערת של תיבת האור בתוכן אחר
ניתן להחליף את אלמנט התמונה הממוזערת ולגרור ולשחרר תוכן אחר (למשל, כותרת או כל אלמנט שאינו קישור) בתוך קישור תיבת האור.
ניתן גם להשתמש ב-בלוק div ולהחיל תמונת רקע כדי ליצור תמונות ממוזערות בגודל שווה.
כיצד לעצב את תיבת האור
אתה יכול לעצב גם את הקישור לתיבת האור וגם את התוכן שלה. לדוגמה, אם אתה מקנן אלמנטים של טקסט בקישור לתיבת האור שלך, תוכל לעצב את הטיפוגרפיה של אלמנט הקישור לתיבת האור.
כיצד להוסיף מדיה לתיבת האור
כדי להוסיף תמונה וכיתוב לחלון המודאלי של תיבת האור:
- בחר את הקישור לתיבת האור על הקנבס
- עבור אל לוח הגדרות האלמנט > הגדרות קישור לתיבת האור > מדיה
- לחץ על האייקון “הוסף פריט לרשימה”
- בחר "תמונה" כסוג
- לחץ על החלף תמונה
- בחר תמונה מלוח הנכסים
- הוסף כיתוב אם יש צורך
אתה יכול להוסיף כמה תמונות שתרצה לקישור לתיבת האור. תמונות אלו יוצגו כתצוגת שקופיות בתוך חלון המודאלי של תיבת האור.
כדי להוסיף וידאו לחלון המודאלי של תיבת האור:
- בחר את הקישור לתיבת האור על הקנבס
- עבור אל לוח הגדרות האלמנט > הגדרות קישור לתיבת האור > מדיה
- לחץ על האייקון “הוסף פריט לרשימה”
- בחר "וידאו" כסוג
- הוסף את כתובת ה-URL של הווידאו לשדה URL
- הוסף כותרת אם יש צורך
תיבת אור לתמונות ווידאו - מדריך עיצוב אתרים
כיצד ליצור תיבות אור דינמיות ממדיה בשדות אוסף
אתה יכול ליצור תיבות אור דינמיות על ידי משיכת תמונת התצוגה המקדימה ו/או מדיה לתיבת האור משדות מדיה באוספים שלך ב-CMS או ב-Ecommerce (כלומר, שדה תמונה, שדה תמונות מרובות או שדה וידאו).
כדי לחבר שדה אוסף דינמי לתצוגה המקדימה של תיבת האור:
- הוסף תיבת אור לרשימת אוסף מחוברת דינמית או לדף אוסף CMS
- בחר את תמונת התצוגה המקדימה המחליפה
- עבור אל הגדרות אלמנט > הגדרות תמונה
- לחץ על האייקון "נקודה סגולה" בשדה תמונה
- בחר שדה תמונה מאוסף
לאחר מכן, תוכל לחבר את תיבת האור לשדה האוסף, כך שתמונות האוסף הדינמיות שלך יהיו זמינות בתיבת האור. כדי לחבר שדה אוסף דינמי למדיה של תיבת האור:
- בחר את קישור תיבת האור
- עבור אל הגדרות אלמנט > הגדרות קישור תיבת האור
- לחץ על סמל "הנקודה הסגולה" בשדה מדיה
- בחר שדה מדיה של האוסף
כדי לחבר תיבת אור לשדה רב-תמונות:
- הוסף רשימת אוסף לדף אוסף
- חבר את רשימת האוסף לשדה רב-תמונות על ידי לחיצה על תפריט מקור ובחירת שדה רב-תמונות
- הוסף תיבת אור לרשימת האוסף
- בחר את אלמנט התמונה בתיבת האור
- עבור אל הגדרות אלמנט > הגדרות תמונה
- לחץ על סמל "הנקודה הסגולה" בשדה תמונה
- בחר את שדה רב-תמונות
- בחר את קישור תיבת האור על הקנבס
- עבור אל הגדרות אלמנט > הגדרות קישור תיבת האור
- לחץ על סמל "הנקודה הסגולה" בשדה מדיה
- בחר את שדה רב-תמונות
תוכל גם לחבר תיבת אור לשדה רב-תמונות כאשר תיבת האור מתווספת לרשימות אוסף או לדפי אוסף.
איך לקשר תיבות אור באמצעות קבוצות תיבות אור
תוכל לקשר מספר תיבות אור יחד כדי ליצור גלריית מצגת. כאשר מבקר באתר לוחץ על תיבת אור מקושרת, תיבת האור תפתח את כל המדיה המשויכת לקבוצה המקושרת.
איך ליצור קבוצת תיבות אור
- בחר כל אלמנט בתיבת אור
- עבור אל הגדרות אלמנט > הגדרות תיבת אור
- הכנס שם קבוצה בשדה התאם או צור שם קבוצה
תיבות אור המשתמשות באותו שם קבוצה מקושרות בקבוצה.
עבור תיבות אור ברשימות אוסף, יצירה וקישור של תיבת אור אחת בפריט אוסף מקשרת אוטומטית את כל תיבות האור ברשימת האוסף.
צור מספר קבוצות תיבות אור בעמוד
אם יש מספר תיבות אור באותו עמוד, ניתן להפריד ביניהן על ידי הקצאת שם קבוצה שונה לכל קבוצת תיבות אור.