הוספת קודים שמושיים לאלמנטור

עם כל היכולות המופלאות של אלמנטור, מדי פעם אנחנו נתקלים בדברים שא”א לעשות אותם באלמנטור, אבל אפשר בקלות עם תוספת מעט קוד.
בפוסט הזה אני יביא כאן הוספות קודים שימושיים לאלמנטור, מדי פעם כשאני יתקל במשהו שימושי אני יוסיף אותו (אז תחזרו לכאן מדי פעם :).
אם אתם מכירים  שיכול לעזור או אם אתם מחפשים קוד למשהו, תכתבו לי בבקשה בתגובות, וכולנו נהנה מזה.

איפה להכניס את הקודים?

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

חשוב!! כאשר אנחנו כותבים את הקוד, קודם כל צריך לטרגט את האלמנט אליו יתייחס הקוד, כאשר יש הבדל אם אתם מכניסים את הקוד באלמנטור (בלשונית מתקדם-css מותאם), לבין אם אתם מכניסים בהתאמה אישית. במקרה הראשון, אפשר לכתוב selector וככה נחיל את הקוד על הווידג’ט שבו הכנסנו את הקוד (לפעמים הקוד מתייחס לאלמנט בן, ואז נכתוב selector .childe ), במקרה של הכנסת קוד בהתאמה אישית, צריך קודם כל לתת לאלמנט קלאס, בלשונית מתקדם – ב css classes צריך לתת שם (אנגלית או מספרים), לאחר מכן בהתאמה אישית נכתוב נקודה ואח”כ את שם הקלאס. אותו הדבר אפשר לעשות עם id רק שאז במקום נקודה נשתמש ב #

בפוסט הזה כל הקודים ישתמשו ב selector – כלומר בצורה שמוסיפים את הקוד באלמנטור (פרו).

אז בואו נתחיל.

תוכן עניינים

מסגרת עם מעבר צבע

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

				
					selector{
     border: 10px solid transparent;
  padding: 15px;
   border-image:linear-gradient(red, yellow) 1% round;
    
}
				
			

הסתרת כותרת העמוד

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

				
					function ele_disable_page_title( $return )
{ return false; }
add_filter(
'hello_elementor_page_title', 'ele_disable_page_title' );
				
			

מסגרת אופסט

הנה דרך קלה ליצור מסגרת אופסט, ככה זה נראה.

המסגרת שלי

				
					selector > div::before{
content:'';
width: 100%;
height: 100%;
top:-16px;
left: -16px;
position: absolute;
background-color: white;
z-index: -1;
border: 2px solid #500523;
}
				
			

עיצוב שדות טופס בפוקוס

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

בדוגמא הנ”ל המסגרת משנה צבע, והנה דוגמא לשינוי צבע של הרקע,

והנה הקוד,

				
					selector .elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper):focus, selector .elementor-field-group .elementor-select-wrapper select:focus {
border-color: #FF0066; background-color: #F2F2F2;
}
				
			

טופס ממורכז

הנה קוד פשוט בשביל למרכז את התוויות והטקסט בשדות בטפסים.

				
					selector .elementor-field-label{
margin: auto;
}
selector .elementor-field{
text-align: center;
}
				
			

טקסט (או כל דבר אחר) אנכי

על מנת לסובב אלמנט שיהיה אנכי (או כל זווית אחרת) נוסיף את הקוד הבא,

				
					selector{transform: rotate(270deg)}
				
			

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

שימוש באלמנטיים אנכיים נפוץ בטקסטים, אבל יכול להיות גם מאוד שימושי בווידג’ט מפריד, בשביל ליצור מפריד אנכי,

טקסט אנכי

טקסט עם מסגרת

מסגרת לטקסט יכול להיות רעיון טוב, בעיקר בכותרות מאוד גדולים (כמו בבלוג הזה), בדר”כ כשנעשה מסגרת לטקסט נרצה שצבע הטקסט יהיה שקוף, אבל לא מחייב, אז הנה הקוד,

				
					selector{-webkit-text-stroke: 3px #000}
				
			

וככה זה נראה, (הצבע של הטקסט עצמו שקוף),

מסגרת לטקסט

טקסט עם מעבר צבע

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

				
					
selector .elementor-heading-title{background-image: linear-gradient(to right top, #17195F, #00FFFF);
-webkit-background-clip: text;}

				
			

חשוב, צריך שצבע הטקסט יהיה שקוף.

וככה זה נראה.

מעבר צבע

תמונה בתוך טקסט

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

הנה הקוד,

				
					
selector .elementor-heading-title {background-image: url(https://wpguide.co.il/wp-content/uploads/לבד.png);
background-position: center center;
background-size: cover;
-webkit-background-clip: text;}

				
			

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

וככה זה נראה,

תמונה
בטקסט

כפתור עם מעבר צבע

כפתור עם מעבר צבע (gradient), ממש חסר באלמנטור, יש אמנם כמה תוספים שעושים את זה, אבל זה כ”כ קל עם קצת קוד, אז מה לא חבל?

				
					selector .elementor-button {background-image: linear-gradient(to right, #EDE574 0%, #E1F5C4 100%)}

				
			

והנה התוצאה,

אפשר כמובן לשנות את הצבעים והכיוון (כמו גם להוסיף יותר משני צבעים)

במידה ותרצו שיהיה גם אפקט הובר יפה לכפתור, הנה הקוד,

				
					
selector .elementor-button {background-image: linear-gradient(to right, #EDE574 0%, #E1F5C4 51%, #EDE574 100%)}
selector .elementor-button {
transition: 0.5s;
background-size: 200% auto;
}
selector .elementor-button:hover {
background-position: right center;
}

				
			

אקורדיון

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

				
					selector .elementor-accordion-item:first-child
{display: none;}
				
			

13 תגובות

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

  2. אגב, באלמנטור בטא יש עכשיו פיצ’ר חדש של הטמעת קוד בתוך הדף, החל מ-PHP וכלה בג’אווה סקריפט ו-CSS.
    כשזה יצא לאור נשמח אם תשתף אותנו בקודים שימושיים לזה…

  3. תודה, שדרג את האתר!
    שימושי לטפסים וכד’ שא”א לעשות כפתור אם מעבר

כתיבת תגובה

האימייל לא יוצג באתר.

קורס אלמנטור מתקדם

12 טיפים מהירים לשיפור עיצוב האתר

הרשמה לניוזלטר

כדאי לכם ;)

רגע, יש לי עוד..

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

קורס אלמנטור מתקדם

ועכשיו יש הנחה מיוחדת!!