Tags
Links

Elementor Pro

CrocoBlock

ניווט מהיר

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

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

יצירת צבעים מרובים לרקע גרדיאנט תוך שימוש בטריק מעניין באלמנטור פרו ובהוספת שורת 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 התותחית, תצפו פעם אחת ותחזרו להוראות שכתבתי ואתם מסודרים.

5 1 vote
דירוג מאמר
Subscribe
Notify of
guest
0 הערות
Inline Feedbacks
View all comments
מדריכים ומאמרים קשורים
eliko.web.studio
טיפים וכלים לתוכנת אילוסטרייטור.. כל מעצב גרפי מכיר.. טיפים וקיצורי דרך מעניינים ואפילו כלים וחידושים.. תשמרו את הקישור לא תתחרטו🤪🤪
eliko.web.studio
מפתחי ומעצבי אתרים צריכים המון פעמים אייקוני אימוג'י שונים. והפתרונות הם אפליקציות למיניהם.. אז לא עוד מבחר אימוג'י בשיטת העתק הדבק בלבד
eliko.web.studio
מדריך מהי מפת אתר ולמה זה חשוב לאתר שלך ואיך זה משפר קידום אתרים והכי חשוב איך תיצרו אחת כזו בוורדפרס.
LEMON
גם לכם נמאס מהבאג באלמנטור שמוסיף רווח מיותר בווידג'ט "עורך הטקסט"? ככה תסירו אותו פעם אחת בכל האתר | קוד CSS
eliko.web.studio
רוצים לבצע SEO לבד? אם אתם לא מעוניינים לשלם אלפי שקלים בחודש ואתם מוכנים ליצירת קידום אורגני לאתר שלכם באופן מדוייק עבור מנועי החיפוש, זה המדריך המלא עבורכם,, אז בהצלחה..
wicky design
איך תוסיפו סרטון וידאו שבמעבר עכבר מעליו הוא מתחיל לנגן (ללא שמע) ובהסרת העכבר הוידאו נעצר

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

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

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

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

העברה בנקאית

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

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

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