scroll

יצירת רקע גרדיאנט מגניב באלמנטור

יצירת צבעים מרובים לרקע גרדיאנט תוך שימוש בטריק מעניין באלמנטור פרו ובהוספת שורת CSS אחת. רקע שמשדרג אתרים

איך זה נראה?

מקור התוכן בהדרכה זו הוא מערוץ היוטיוב של Farjana Rashid שחולקת עם הצופים הדרכות וטריקים בתחום עיצוב ופיתוח אתרים לחצו לקישור ישיר להדרכה

The source of the content in this tutorial is from Farjana Rashid's YouTube channel, which shares with viewers tutorials and tricks in the field of website design and development. Click for a direct link to the tutorial

אז איך יוצרים רקע גרדיאנט מגניב?

  1. ראשית כל תצרו קונטיינר חדש ותתנו לו את הגובה הרצוי.
  2. תנו לו רקע כהה (תוכלו גם בהיר, אבל בשביל ההדרכה הלכתי על כהה)
  3. לאחר מכן הוסיפו ווידג'ט מרווח (או Spicer באנגלית) של אלמנטור ותנו לו את הגובה של הקונטיינר כמו שקבעתם בהתחלה.
  4. עברו למתקדם > רקע ובחרו צבעי שיפוע (Gradient color). בצבע הראשון תבחרו צבע שאתם אוהבים ובשני תעשו צבע שקוף לחלוטין. לאחר מכן במיקום (location) תעבירו ל70% או עד שאתם לא רואים את הגבולות של המרווח.
  5. באותו חלון תעברו לסוג (Type) ותבחרו מעגלי (Radial)
  6. עברו למתקדם > פריסה (layout)  > מיקום (position) ותעבירו למוחלט (absolute)
  7. קחו את סמן העכבר ותתפשו את המרווח ופשוט תגררו אותו לאן שאתם מעוניינים בתוך הקונטיינר (לא לחשוש שהוא יוצא מגבולות הקונטיינר, עוד נסדר את זה) כרגע פשוט תעצבו.
  8. לאחר שבחרתם מיקום, פשוט תשכפלו את המרווח, תחליפו צבע מגניב אחר ואת המרווח החדש תניחו במיקום אחר. כך תשכפלו כמה שתרצו את המרווח ותחליפו צבעים עד שתקבלו את הגרדיאנט הרצוי.

אם שמתם לב ושמתם לב. המרווחים שסידרנו יוצאים מגבולות הקונטיינר ויוצרים את ערבוב הצבעים גם על קונטניירים אחרים. לכן תוסיפו שורת קוד CSS אחת והכל מסתדר כמו קסם.

  • בעריכת הקונטיינר עברו למתקדם > CSS מותאם (Custom CSS) והדביקו את הקוד הבא:
				
					selector {
    overflow: hidden
}
				
			

עכשיו תוכלו להוסיף כותרת וכל ווידג'ט שתרצו לתוך הקונטיינר, רק שימו לב שהכותרת תיהיה מעל הרווחים שהוספנו לרקע. איך מבצעים? עברו לעריכת הכותרת או כל ווידג'ט שהוספתם > מתקדם > פריסה (layout) > Z-Index ותוסיפו מספר גבוה יותר ממה שיש לרווחים.

אם הבנתם את שכתבתי בפשטות, אז כנראה אתם מונחים טוב בחומר ויודעים אלמנטור.. אם לא הבנתם 100% ההמלצה שלי היא לפתוח את הסרטון של Farjana Rashid התותחית, תצפו פעם אחת ותחזרו להוראות שכתבתי ואתם מסודרים.

לינקים קשורים למדריך

שיתוף המדריך

0 0 votes
דירוג מאמר
Subscribe
Notify of
guest
0 הערות
Inline Feedbacks
View all comments

עוד מדריכים קשורים

Farjana Rashid

מדריך מהיר וקצר, איך להפוך את צבע הכותרת שלך לצבע הדרגתי באלמנטור. רק קוד CSS והכותרת שלך משודרגת

SAVVY

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

wicky design

איך תוסיפו סרטון וידאו שבמעבר עכבר מעליו הוא מתחיל לנגן (ללא שמע) ובהסרת העכבר הוידאו נעצר

תודה שאישרת את הצעת המחיר!

לא צויין כתובת מייל

סך תשלום ראשון (מקדמה) 30% מסכום העסקה הינו:

בפרוייקטים של עיצוב גרפי או/ו פרוייקטים שלא עולים מעל לסכום של 2000₪, התשלום לא יתחלק לפעימות אלא התשלום יושלם בפעימה ראשונה או יתחלק לשתי פעימות על פי הסיכום בטלפון או בהודעות

העברה בנקאית

בנק – ONE ZERO (18)
סניף – ראשי (001)
חשבון – 202003116
ע"ש – אליהו כהן

תשלום באפליקציות

bit/PayBox
במספר טלפון 0503528688