עם כל היכולות המופלאות של אלמנטור, מדי פעם אנחנו נתקלים בדברים שא”א לעשות אותם באלמנטור, אבל אפשר בקלות עם תוספת מעט קוד.
בפוסט הזה אני יביא כאן הוספות קודים שימושיים לאלמנטור, מדי פעם כשאני יתקל במשהו שימושי אני יוסיף אותו (אז תחזרו לכאן מדי פעם :).
אם אתם מכירים שיכול לעזור או אם אתם מחפשים קוד למשהו, תכתבו לי בבקשה בתגובות, וכולנו נהנה מזה.
איפה להכניס את הקודים?
אז ככה, בדר”כ זה יהיה קוד בשפת 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;}
22 תגובות
אחלה פוסט. הייתי שמחה אם היית מרחיב אותו לעוד דברים כמו יישור אלמנטים לאותו גובה ודברים שאנשים מסתבכים איתם לעיתים קרובות.
יש קוד לזה..??
תוסיף גם את הקוד הפופולרי ביותר שמסיר אוברפלורו
תודה על הפוסט הזה!
תודה רבה, מאוד שימושי!
תודה רבה
תודה רבה!
שימושי ומשדרג!
תמשיך להפתיע…
תודה רבה, אכן שימושי ומקסים
There is certainly a great deal to find out about this subject. I really like all of the points you made. Doralynn Heath Khosrow
תודה רבה!!! אני אשמח לעוד כמה טיפים משדרגים כאלו עם קוד!
אגב, באלמנטור בטא יש עכשיו פיצ’ר חדש של הטמעת קוד בתוך הדף, החל מ-PHP וכלה בג’אווה סקריפט ו-CSS.
כשזה יצא לאור נשמח אם תשתף אותנו בקודים שימושיים לזה…
אין לי פרו כיצד אוכל לעשות שדות טופס שליחה – צור קשר, באתר שלי?
תנסה את התוסף הזה,
https://he.wordpress.org/plugins/metform/
תודה, שדרג את האתר!
שימושי לטפסים וכד’ שא”א לעשות כפתור אם מעבר
תודה רבה שימושי ביותר!
אני מנסה להוסיף צל לתמונות בסליידר תמונות ולא מצליחה, הוספתי בcss מותאם את הקוד הבא.. אשמח להבין איפה הטעות:
selector{
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
תודה רבה
היי,
הבעיה ש-selector מתייחס לכל הווידג’ט ואת צריכה להחיל את הצל רק על התמונות,
את צריכה למצוא את הקלאס של התמונות.
לא בטוח על איזה ווידג’ט מדובר, אבל אם זה הקרוסלת מדיה אז זה הקלאס – selector .swiper-slide
אם זה קרוסלת תמונות אז זה – selector .swiper-slide-image
עזרת לי מאוד! תודה רבה..
פוסט מקסים!!תודה!
בקשר למסגרת עם מעבר צבע
איך אני מכילה את הקוד על מסרת לתמונה עם רדיוס עגול ?
כרגע המסגרת עובדת רק באופן ריבועי
תודה על הקודים! ממש עוזר לי!
עשיתי כמה קודים שלקחתי מפה
ותפפתאום אחרי כמה ימים הם הפסיקו לעבוד……
מה יכולה להיות הסיבה?
גם כשאני יוצרת מחדש את הווידג’ט ושמה עליו שוב את הקוד, זה כבר לא עובד
(לדוגמא טקסט אנכי)
תודה רבה
רוני
המדריכים שלך מדהימים, אני נעזר בהם הרבה!
הייתי שמח לדעת:
האם יש אופציה להנפיש ווידג’ט (אייקון, תמונה , כפתור וכדו’) לגדול ולהתקטן כל הזמן באמצעות קוד?
תודה רבה!!!
תודה,
שימושי מאוד
שלום,
פוסט שימושי מאוד.
אשמח לדעת איך אפשר לעשות צבע מעברי במסגרת לטקסט
תודה.