Studio Editor: שימוש בקונטיינרים
זמן קריאה: 3 דקות
קונטיינרים הם כלי פריסה רספונסיבית שעוזרים לייעל ולבנות את התוכן באתר. אתם יכולים להתאים אותם לעיצוב האתר ולצרף אליהם אלמנטים כמו טקסט, מדיה וכפתורים.
הנושאים בעמוד זה:
הוספת קונטיינרים לאתר
בשלב הראשון צריך להוסיף קונטיינר שמתאים לצורכי העיצוב והתוכן של הלקוח. אתם יכולים לבחור מתוך מגוון קונטיינרים מוכנים וקונטיינרים של מעבר עכבר (hover), או להתחיל מאפס.
כדי להוסיף קונטיינר:
- הקליקו על Add Elements (הוספת אלמנטים) בצד שמאל של ה-Editor.
- בחרו ב-Containers.
- בחרו סגנון לקונטיינר – Empty (ריק), Designed (מעוצב) או Hover (מעבר עם עכבר).
- הקליקו וגררו את הקונטיינר שבחרתם כדי להוסיף אותו לעמוד.
עיצוב קונטיינרים
אתם יכולים להתאים את עיצוב הקונטיינר לאתר – לשנות את צבע הרקע, להגדיר את הרדיוס ועוד.
כדי לעצב קונטיינר:
- בחרו את הקונטיינר הרלוונטי.
- הקליקו על אייקון פתיחת כלי העריכה
בפינה הימנית העליונה של ה-Editor.
- בחרו איך לערוך את הקונטיינר תחת Design (עיצוב):
- Background: עצבו את הרקע והחליטו עד כמה אתם רוצים שיבלוט:
- Color: בחרו צבעים מתוך ערכת העיצוב של האתר, או גוון משלכם.
- Gradient: הוסיפו גרדיאנט (מעבר צבע) רגיל או ליניארי לקונטיינר. אתם יכולים לבחור את הצבעים, הזוויות ועוד.
- Glass effect: הוסיפו אפקט של זכוכית חלבית לקונטיינר והגדירו את עוצמת הטשטוש.
- Border: הוסיפו מסגרת לקונטיינר והגדירו את הגודל, הצבע ושקיפות שלה.
- Corners: שנו את הרדיוס של פינות הקונטיינר (בפיקסלים) כדי שיהיו יותר עגולות או מרובעות.
- Shadow: הוסיפו והתאימו אישית אפקט צל בקונטיינר.
- Background: עצבו את הרקע והחליטו עד כמה אתם רוצים שיבלוט:
הוספת אלמנטים לקונטיינרים
כשאתם ממקמים אלמנטים בתוך קונטיינר, הם מתחברים אליו אוטומטית. המשמעות היא שאתם יכולים לגרור את הקונטיינר והאלמנטים שמחוברים אליו כיחידה אחת ולהסתכל עליהם יחד בחלונית השכבות.
כדי להוסיף אלמנט לקונטיינר:
- הקליקו על האלמנט הרלוונטי.
- גררו אותו למיקום הרצוי בקונטיינר.
- שחררו את האלמנט כשאתם רואים את ההודעה Attach (חיבור).
הוספת גריד (רשת) לקונטיינר
אתם יכולים להחיל גריד CSS מתקדם על הקונטיינר כדי לבנות את הפריסה שלו. אפשר לבחור את מספר השורות והעמודות הרצויות ולהגדיר את הגודל שלהן באמצעות מידות רספונסיביות (למשל fr, Min/max, %)
כדי להוסיף גריד לקונטיינר:
- בחרו את הקונטיינר הרלוונטי.
- הקליקו על אייקון הפעולות הנוספות
. - הקליקו על Apply Advanced CSS Grid (הפעלת גריד CSS מתקדם).
- בחרו פריסה מהתפריט הנפתח 1x1.
טיפ: בחרו ב-Other (אחר) אם אתם רוצים להגדיר מספר שורות ועמודות אחר.
זה עזר לך?
|