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

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

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

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

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

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

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

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

תוכן עניינים

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

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

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;}

7 תגובות

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

כתיבת תגובה

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

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

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