אלמנטור הוא תוסף לוורדפרס, באמצעותו ניתן לעצב אתרים ודפי נחיתה בקלות ובמהירות. זהו עורך פרונטאנד, what you see it's what you get – כלומר, אין הבדל בין נראות האלמנטים בממשק העריכה לנראות שלהם באתר עצמו. באלמנטור אלמנטים מסוימים (כמו כותרת, כפתור, תמונה או טופס) מיוצגים ויזואלית, וניתנים לגרירה אל העמוד אותו בונים. בזכות הממשק הידידותי של אלמנטור, הפכה העבודה על אתרי אינטרנט לפשוטה וידידותית הרבה יותר, ומשתמשים רבים שאינם אנשי מקצוע החלו לבנות אתרים בכוחות עצמם.
עם זאת, אלמנטור הוא בהחלט כלי מקצועי, והוא גמיש מספיק כדי להתאים גם לצרכיהם של משתמשים מתקדמים. יש לו תיעוד טוב עבור מפתחים, וניתן להתאים אותו ככל שרוצים ואף לבנות עבורו הרחבות. אחד הדברים הבסיסיים שמשתמשים מתקדמים מבקשים לעשות הוא להשיג שליטה טובה יותר על העיצוב, באמצעות כתיבה של חוקי CSS. במאמר נסקור את האפשרויות השונות לשילוב CSS בתוך אתר מבוסס אלמנטור, ונעמוד על היתרונות והחסרונות של השיטות השונות. מאמר זה לא מסביר את הבסיס של CSS וכיצד לעבוד עם השפה, אלא מניח שיש לקורא את הידע הנחוץ.
חלק מתוכן המאמר רלוונטי גם לכתיבת CSS במערכות שאינן מבוססות אלמנטור, אך הייחוד שלו על פני מאמרים אחרים על CSS (ויש כאלה בלי סוף ברחבי האינטרנט) הוא ההתייחסות ל-CSS ככלי משלים, במערכת בה מוגדרים מראש מבנה ה-DOM והצהרות CSS עבור אלמנטים (ע"י תבנית או תוספי וורדפרס, למשל).
מה זה CSS?
בראשית ימי האינטרנט נכתב העיצוב כ-Attributes, בתוך תגיות ה-HTML, ולא הייתה הפרדה בין תוכן (מה יש באתר) לעיצוב (איך האתר נראה). ככל שהשימוש באינטרנט הפך להיות נרחב יותר עלה הצורך בהפרדה בין תוכן (HTML) לעיצוב (CSS). ההפרדה לא נעשתה ברגע, ובשנות ה-2000 המוקדמות עדיין היה נפוץ מאוד לראות שימוש ב-CSS לצד הגדרות עיצוב מבוססות HTML. כיום כתיבת עיצוב בתוך הHTML נחשבת ללא תקנית והשימוש בה זניח (למעט העובדה שחלק מתגי ה-HTML מכילים בתוכם הגדרות עיצוביות כברירת מחדל). CSS (Cascading Style Sheets) היא שפת הצהרות אשר באמצעותה ניתן לשלוט בעיצוב האתר (צבעים, מרווחים, גדלים, גבולות, מיקומים, טיפוגרפיה ועוד רבים) בנפרד מהתוכן. CSS עובדת תמיד לצד שפת HTML והשילוב בינהן נותן לנו שליטה מלאה על נראות האתר. שפת CSS בנוייה מהצהרות עם מבנה קבוע:
selector { property : value; }selector – האלמנט אותו רוצים לעצב. זה יכול להיות אלמנט מאוד כללי, כמו P (כל הפסקאות באתר או בדף), או אלמנט ספציפי, באמצעות Class מסויים.
property – המאפיין שאותו באים להגדיר (border-width / font-size / margin / position…)
value – הערך אותו מעוניינים לקבוע למאפיין. יכול להכיל מספרים, מילים, יחידות מידה ומשתנים.
דוגמה לפיסת קוד CSS:
h1.title {
font-size: 85px;
font-weight: 300;
line-height: 1.3em;
text-align: right;
color: #020101;
font-family: "mikhmoret",Sans-serif;
padding: 20px 0;
}
שימוש בכלי המפתחים בדפדפנים
לכרום, לספארי ולפיירפוקס יש כלי מפתחים, אליהם ניתן להגיע בקלות באמצעות הקלקה על אלמנט עם המקש הימני של העכבר ואז בחירה באפשרות "בדוק" (Inspect / Inspect elements). הלשונית הרלוונטית לצורך חקירה של האלמנטים באתר היא Elements. בלשונית זו ניתן לראות את מבנה ה-DOM – את תגיות ה-HTML המרכיבות את האתר, את המחלקות השונות המוגדרות לאלמנטים ואת הצהרות ה-CSS שמתקיימות עבור כל אלמנט. מבנה ה-HTML של אתר מבוסס אלמנטור, כפי שניווכח כאשר נחקור את האתר בכלי המפתחים, מושפע מוורדפרס עצמה, מהתבנית (כן, גם כאשר משתמשים בHello), מתוספים שונים (WooCommerce וכו'), מהגדרות ברירת המחדל של אלמנטור, ומההגדרות שהוגדרו לאלמנטים דרך ממשק העריכה של אלמנטור (הרי לבסוף, כל הגדרה שהוגדרה לוידג'ט באלמנטור באה לידי ביטוי ב HTML ו-CSS).
כאשר עורכים CSS נתקלים פעמים רבות בחוקים קיימים שמפריעים להשגת התוצאה אותה מעוניינים להשיג. במקרים כאלו לא ניתן למחוק את החוקים הקיימים, אלא יש צורך לדרוס אותם, באמצעות הגדרת סלקטור חזק יותר, וערך חדש עבור המאפיין אותו מעוניינים לדרוס. אזור ה-CSS שבלשונית Elements מאפשר להבין בקלות את החוזק של סלקטורים שונים. הסבר על קדימויות (Priority) וספציפיות (specificity) הוא מחוץ לסקופ של מאמר זה, אך זה ידע שחובה לבוא איתו לכל עבודת CSS שרוצים לבצע.
מומלץ לכתוב את ה-CSS קודם בכלי המפתחים, וליהנות מהפידבק המיידי – כל חוק שנוסיף ישפיע על הדף (רק אצלנו בחלון הדפדפן, כן?). לאחר שהושגה התוצאה הרצוייה, להעתיק את ה-CSS לוורדפרס באמצעות אחת השיטות שיפורטו להלן.
הדרכים השונות לכתיבת CSS באתר אלמנטור
כתיבה של CSS בקובץ חיצוני בתבנית הבת
טעינה של קובצי CSS מתיקיית התבנית (באמצעות enqueue) היא דרך עבודה שגרתית בוורדפרס. בקובץ הנפרד ניתן לכתוב CSS ככל העולה על רצוננו, תוך שימוש במחלקות (classes) של אלמנטור (להשגת השפעה רחבה), או הגדרה של מחלקות מותאמות אישית (ניתן להגדיר עבור כל אלמנט באלמנטור בלשונית "מתקדם". אין מגבלה על כמות המחלקות שאלמנט יכול להכיל).
כתיבה של CSS באזור ה"התאמה אישית" של התבנית
באזור ההתאמה האישית (Customizer) יש מקום להזין CSS מותאם. ה-CSS הזה נטען Inline בתוך כל עמוד ועמוד באתר, ולכן זוכה לקדימות גבוהה יחסית. אם ה-CSS הרצוי לנו נועד לעמוד ספציפי הרי שחבל שיטען עבור כל העמודים.
כתיבה של CSS באלמנטור בתוך הוידג'ט עצמו (אלמנטור פרו בלבד)
בכל וידג'ט באלמנטור פרו (עמוד, אזור, עמודה ווידג'ט) ניתן לכתוב CSS שיהיה ספציפי עבור אותו אלמנט. זהו כלי נוח כאשר מעוניינים ליצור הגדרה ספציפית מאוד, שאינה באה לידי ביטוי במספר מקומות באתר.
יתרון משמעותי של צורת עבודה זו הוא היכולת להשתמש במונח SELECTOR. אלמנטור יצרו עבור המשתמשים החלפה של המילה SELECTOR בסלקטור שלם של אותו אלמנט. כך, למשל, כתיבה של Selector מוחלפת ב
.elementor-1037 .elementor-element.elementor-element-881ae5eזהו סלקטור חזק מספיק על מנת לדרוס הגדרות קודמות של האלמנט (הגדרות ברירת מחדל של הוידג'ט או הגדרות שהוגדרו דרך הממשק של אלמנטור). ניתן כמובן להיות ספציפים יותר: selector .elementor-share-btn__icon יוחלף אוטומטית ל
.elementor-1037 .elementor-element.elementor-element-881ae5e .elementor-share-btn__iconוישפיע על הגדרת האייקון הספציפי בתוך וידג'ט "שיתוף".
כאשר משתמשים באפשרות זו, אין צורך להגדיר CSS Class עבור אותו אלמנט.
כתיבה של CSS בתוך האלמנט באלמנטור ללא הוספה של הביטוי selector תשפיע על עוד אלמנטים בדף, ולא רק על זה אותו ביקשתם לערוך. אין שום סיבה הגיונית לכתיבת CSS בתוך האלמנט ללא שימוש ב-selector.
שילוב של מספר שיטות
חשוב להשתמש בתהליכי עבודה מסודרים ועקביים, ועם זאת, אין הכרח לבחור שיטה אחת ולהשתמש בה תמיד. עבור הגדרה חד פעמית (שמשפיעה על אלמנט מסויים בדף מסויים) נוח לכתוב CSS בתוך אלמנטור. הגדרה נרחבת, שנועדה להשפיע במקומות רבים באתר, יותר נכון להגדיר גלובלית, מחוץ לאלמנטור.
אם אתם מוצאים את עצמכם מעתיקים ומדביקים קטעי CSS מאלמנט לאלמנט זהו תמרור אזהרה – אתם צריכים להגדיר מחלקה (CSS class) עבור האלמנטים ולכתוב את ה-CSS פעם אחת בלבד – מחוץ לאלמנטים, בקובץ CSS, למשל.
מדוע CSS שכתבנו לא משפיע על נראות האתר?
ישנן מספר טעויות נפוצות שיגרמו לכך שה-CSS שנכתב אינו משפיע על עיצוב האתר:
- אם ה-CSS נכתב בקובץ חיצוני אך הקובץ כלל אינו נטען לאתר – לא תהיה השפעה ל-CSS.
איך לבדוק? בלשונית Network בכלי המפתחים.
פיתרון – האם הקובץ הוגדר בתבנית שאינה פעילה באתר? האם enqueue לא בוצע כהלכה? - טעות בכתיבת הסלקטור גורמת לכך שהעיצוב לא מופע כפי שתכננו.
טעויות נפוצות: החסרה של נקודה (עבור מחלקה) או האש (עבור ID), העדר רווח בין אלמנט הורה לילד או הימצאות רווח בין שתי מחלקות ששייכות לאותו אלמנט.
איבחון בכלי המפתחים: כאשר בוחרים באלמנט אותו מעוניינים לעצב, ה-CSS שכתבנו לא נמצא בכלל באזור הצגת ה-CSS.
דוגמה:
main-title .elementor-heading-title { transform: rotate(20deg); }הבעייה בפיסת הקוד הזו היא שחסרה נקודה לפני main-title בקוד ה-CSS (נקודה היא הסימן עבור Classes ב-CSS. באלמנטור אין צורך להוסיף נקודה לפני ה-Class). ולכן הכותרת לא תסתובב (rotate) – ההגדרה לא תשפיע. הוספת נקודה תפתור את הבעייה:
.main-title .elementor-heading-title { transform: rotate(20deg); } - הסלקטור נכון, אך הוא לא מספיק חזק, ולכן חוקים אחרים "מנצחים" אותו ומשפיעים.
איבחון בכלי המפתחים: כאשר בוחרים באלמנט אותו מעוניינים לעצב, ה-CSS שכתבנו נמצא באזור הצגת ה-CSS, אך חלק מהשורות בו מסומנות בקו חוצה, ויש הגדרות CSS שנמצאות מעליו ו"עקפו" אותו.
פיתרון: כתיבה של סלקטור ספציפי יותר.
מציאת המקור לקוד CSS
כלי המפתחים של הדפדפן מספק לנו את המידע הנחוץ לנו על מנת לאתר פיסת קוד CSS ולהבין היכן היא הוגדרה. index מייצג קוד שהוכנס ישירות לדף, לרוב באמצעות אפשרות ה Custom css של התבנית (באזור ה"התאמה אישית", ה-Customizer). יתכן שנגלה שקוד מסויים הגיע מ-add-on לאלמנטור, מתוסף חיצוני (למשל ווקומרס), מהתבנית וכו'.
אם המקור של ה-CSS הוא קובץ שאלמנטור יצר עבר העמוד/פוסט/טמפלט, יתכן שנהיה מעוניינים לאתר אותו ולשנות אותו. לעיתים, נגלה שאלו הגדרות שהוגדרו דרך הממשק של אלמנטור:
במקרים אחרים המקור של ה-CSS הוא ב Custom CSS שהוגדר עבור אלמנט. ניתן לבדוק עבור האלמנט, אך ניתן גם לסרוק בקלות את הדף כולו באמצעות חלונית הניווט (לחיצה על החץ הקטן פותחת את כל האלמנטים – Expend):
אלמנט שמציג במעבר עכבר את אייקון הקוד הוא אלמנט שמכיל CSS מותאם. לחיצה על האייקון מעבירה ישירות לקוד ה-CSS.
בחלונית הניווט ניתן לאתר קוד שמשפיע על וידג'ט גם אם הוא נכתב מחוץ לוידג'ט. יכולות להיות לכך שתי סיבות:
הסיבה ההגיונית – הגדרה באזור או עמודה שמעוניינים שתשפיע עבור כמה אלמנטים בתוך העוטף. כתיבה בעוטף עדיפה על פני הדבקה של קוד זהה עבור כל פריט פנימי.
הסיבה הלא הגיונית (שהיא תולדה של כתיבה לא נכונה) – כפי שכבר צויין, הכנסה של קוד CSS ל Custom CSS ללא שימוש במונח SELECTOR גורמת לקוד להשפיע עבור כל הדף, ולא רק עבור האלמנט בתוכו הוכנס הקוד. אם נעשתה טעות זו נגלה שCSS משפיע באלמנט שלא הוגדר עבורו Custom CSS.
תאימות CSS מותאם באלמנטור בעדכוני גרסה
יציאה של גרסאות חדשות הינה חלק ממעגל חיים של כל תוסף וורדפרס. כל עוד משתמשים בכלים הרגילים של אלמנטור, ניתן להיות די בטוחים שגם לאחר עדכון גרסאות העיצוב שלנו ימשיך לעבוד ויראה בדיוק אותו הדבר. כאשר באים לערוך את האתר גם באמצעות CSS, יש לקחת בחשבון שבמסגרת יציאה של גרסאות ראשיות חדשות (דבר שקורה באלמנטור בערך אחת לשנה) יתכן שיעשה שינוי במבנה ה-DOM שאלמנטור מפיק או בהגדרות CSS מרכזיות. במקרה כזה יתכן שחלק מהקוד שנכתב ידנית יפסיק לעבוד וידרוש תיקון קל או התאמה לשינויים שנערכו בתוסף.
סיכום
כתיבת CSS מאפשרת לדייק את הנראות של האתר, להתאים אותה לעיצוב מורכב ולהגיע לתוצאות שהממשק של אלמנטור לא מציע למשתמש הפשוט. במאמר סקרתי את מספר אפשרויות להטמעת CSS וגם בעיות נפוצות ופתרונות.
אם אתם אוהבים להרחיב את היכולות של אלמנטור ודאי תמצאו עניין בעוד מאמרים, כמו יצירת גלילה עם אפקט של עיוות, האדר שמופיע רק כשגוללים למעלה, ומתיחה של תמונה עד קצה המסך.
