סגנונות רקע - עזרה של Webflow
סקירה של סגנונות הרקע שניתן להגדיר על אלמנט: צבע, תמונות, מעברי צבע, שכבות צבע, וסרטונים.
צבע רקע
ניתן להגדיר צבע רקע על כל אלמנט למעט תמונות וסרטונים (למרות שניתן להשתמש בתמונות וסרטונים כרקע). הוסף צבע רקע על ידי הזנת ערך צבע (למשל, hex, rgba, או שם צבע) או על ידי שימוש בבוחר הצבעים. ניתן גם להוסיף צבע רקע לאלמנטים טקסט או לתוכן טקסט ספציפי בתוך אלמנט טקסט.
אם ברצונך שצבעי הרקע יהיו עקביים בכל האתר שלך, השתמש בתג Body (All pages) לירושה. עצב אותו על ידי בחירת אלמנט ה-Body ובחירת התג בלוח הסגנון או באמצעות תפריט הירושה. כל שינוי ב-Body (All pages) יהיה ברירת המחדל לאלמנטים חדשים.
לרוב האלמנטים יש רקע שקוף כברירת מחדל. חלק מהאלמנטים, כמו רכיב ה-Slider, יש להם צבע ברירת מחדל שניתן לעקוף.
תמונת רקע
Webflow מציעה אפשרויות רבות להתאמה אישית של תמונת הרקע שלך.
כדי להוסיף או לשנות את תמונת הרקע:
- גלול ל-רקעים בלוח הסגנון
- לחץ על בחר תמונה מלוח הנכסים
- סמן את התיבה עבור @2x לתמונות חדות יותר במכשירי HiDPI
כדי להגדיר סרטון רקע, השתמש ב-רכיב סרטון רקע בלוח ההוספה.
גודל תמונת רקע
- מותאם אישית: הגדר ערכי רוחב/גובה או אחוזים. הגדל עם ערכים מעל 100%.
- כיסוי: ממלא ומכסה את הרקע, ייתכן שיחתוך את התמונה.
- הכלה: שומר על התמונה בתוך האלמנט.
מיקום תמונת רקע
ברירת המחדל היא בפינה השמאלית העליונה. ניתן להתאים מיקום ידנית (px, %, VW, VH).
אריח
תמונות רקע חוזרות אנכית ואופקית כברירת מחדל. שליטה לחזרה אופקית, אנכית או בכלל לא.
קבוע או גלילה
בחרו לא קבוע (התמונה גוללת) או קבוע (התמונה נשארת במקום). תמונות קבועות מוגבלות על ידי חלון התצוגה.
מעברי צבע
מעברי צבע יכולים לשמש לבד או בשכבות על צבע/תמונת רקע. שני סוגים:
- מעברי צבע לינאריים
- מעברי צבע רדיאליים
לשניהם יש נקודות עצירה (נקודות) שבהן הצבעים דוהים.
מעבר צבע לינארי
קבעו כיוון לפי זווית באמצעות חוגה, חצים (במדרגות של 45 מעלות) או שדה הזנה.
נקודות עצירה במעבר צבע
ערכו צבע/אטימות בנקודות עצירה. שכבות מעל תמונה הופכות את התמונה לגלויה באטימות נמוכה. הוסיפו נקודות עצירה על ידי לחיצה. הסירו על ידי גרירה החוצה.
חזרה
מתגים לחזרה על מעבר הצבע.
היפוך
סמל להיפוך מיקומי נקודות עצירה.
מעבר צבע רדיאלי
יוצר מעבר צבע מעגלי. נקודת העצירה השמאלית היא הצבע במרכז.
מיקום
בחרו נקודת מוקד באמצעות נקודות או ידנית עם ערכים/יחידות.
גודל
בקרות מוגדרות מראש:
- הצד הקרוב ביותר: מהמרכז לצד הקרוב ביותר
- הפינה הקרובה ביותר: מהמרכז לפינה הקרובה ביותר
- הצד הרחוק ביותר: מהמרכז לצד הרחוק ביותר
- הפינה הרחוקה ביותר: (ברירת מחדל)
שכבת צבע
הוסיפו שכבת צבע לרקעים עם בורר צבעים ואטימות.
שכבות של תמונות ומעברי צבע
ערמו מספר תמונות רקע, מעברי צבע ושכבות להשגת אפקט. סדרו מחדש עם גרירה, החליפו נראות עם סמל עין, מחקו עם פח אשפה.
וידאו רקע
סרטוני רקע הם סרטונים שקטים, מחזוריים לרקעים להוספת אפקט קולנועי. היו מודעים:
הוסף עם חיפוש מהיר (CMD/CTRL+E) או פאנל הוספה > רכיבים. העלה את הסרטון שלך (<30MB; webm, mp4, mov, ogg). שמות קבצים צריכים להימנע מרווחים/תווים מיוחדים.
המרת קידוד מתבצעת לאחר ההעלאה (mp4 & webm לתמיכה בדפדפנים).
הגדרות וידאו
- וידאו בלולאה: חוזר ברציפות.
- הפעלת וידאו אוטומטית: מתחיל בטעינת הדף.
- כולל כפתור הפעלה/השהיה: המבקר יכול לשלוט בהפעלה.
תצוגה מקדימה של סרטון הרקע
- ריחוף מעל תמונה ממוזערת
- פתיחה בכרטיסייה חדשה
- סמל תצוגה מקדימה בסרגל
החלפת סרטון הרקע
פתח הגדרות להחלפת סרטון, המרת קידוד, תצוגה מקדימה וכו'.
שימוש בסרטון הרקע כקטע
הכנס תוכן בתוך אלמנט סרטון הרקע. עצב כרגיל בפאנל העיצוב.
שכבת כיסוי לסרטון רקע
הוסף שכבת כיסוי מדורגת או מוצקה לניגודיות. שכבת הכיסוי יושבת מעל הסרטון, מתחת לתוכן.
וזהו השימוש ברקעים ב-Webflow!