אז איך יוצרים רקע גרדיאנט מגניב?
- ראשית כל תצרו קונטיינר חדש ותתנו לו את הגובה הרצוי.
- תנו לו רקע כהה (תוכלו גם בהיר, אבל בשביל ההדרכה הלכתי על כהה)
- לאחר מכן הוסיפו ווידג'ט מרווח (או Spicer באנגלית) של אלמנטור ותנו לו את הגובה של הקונטיינר כמו שקבעתם בהתחלה.
- עברו למתקדם > רקע ובחרו צבעי שיפוע (Gradient color). בצבע הראשון תבחרו צבע שאתם אוהבים ובשני תעשו צבע שקוף לחלוטין. לאחר מכן במיקום (location) תעבירו ל70% או עד שאתם לא רואים את הגבולות של המרווח.
- באותו חלון תעברו לסוג (Type) ותבחרו מעגלי (Radial)
- עברו למתקדם > פריסה (layout) > מיקום (position) ותעבירו למוחלט (absolute)
- קחו את סמן העכבר ותתפשו את המרווח ופשוט תגררו אותו לאן שאתם מעוניינים בתוך הקונטיינר (לא לחשוש שהוא יוצא מגבולות הקונטיינר, עוד נסדר את זה) כרגע פשוט תעצבו.
- לאחר שבחרתם מיקום, פשוט תשכפלו את המרווח, תחליפו צבע מגניב אחר ואת המרווח החדש תניחו במיקום אחר. כך תשכפלו כמה שתרצו את המרווח ותחליפו צבעים עד שתקבלו את הגרדיאנט הרצוי.
אם שמתם לב ושמתם לב. המרווחים שסידרנו יוצאים מגבולות הקונטיינר ויוצרים את ערבוב הצבעים גם על קונטניירים אחרים. לכן תוסיפו שורת קוד CSS אחת והכל מסתדר כמו קסם.
בעריכת הקונטיינר עברו למתקדם > CSS מותאם (Custom CSS) והדביקו את הקוד הבא:
selector {
overflow: hidden
}עכשיו תוכלו להוסיף כותרת וכל ווידג'ט שתרצו לתוך הקונטיינר, רק שימו לב שהכותרת תיהיה מעל הרווחים שהוספנו לרקע. איך מבצעים? עברו לעריכת הכותרת או כל ווידג'ט שהוספתם > מתקדם > פריסה (layout) > Z-Index ותוסיפו מספר גבוה יותר ממה שיש לרווחים.
אם הבנתם את שכתבתי בפשטות, אז כנראה אתם מונחים טוב בחומר ויודעים אלמנטור.. אם לא הבנתם 100% ההמלצה שלי היא לפתוח את הסרטון של Farjana Rashid התותחית, תצפו פעם אחת ותחזרו להוראות שכתבתי ואתם מסודרים.