הטמעת CSS באתר מבוסס אלמנטור

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

שיתוף ב facebook
שיתוף ב linkedin
שיתוף ב whatsapp
שיתוף ב email

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

    
    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 לאלמנטור, מתוסף חיצוני (למשל ווקומרס), מהתבנית וכו'.

inspect elements css source

אם המקור של ה-CSS הוא קובץ שאלמנטור יצר עבר העמוד/פוסט/טמפלט, יתכן שנהיה מעוניינים לאתר אותו ולשנות אותו. לעיתים, נגלה שאלו הגדרות שהוגדרו דרך הממשק של אלמנטור:

Elementor CSS properties

במקרים אחרים המקור של ה-CSS הוא ב Custom CSS שהוגדר עבור אלמנט. ניתן לבדוק עבור האלמנט, אך ניתן גם לסרוק בקלות את הדף כולו באמצעות חלונית הניווט (לחיצה על החץ הקטן פותחת את כל האלמנטים – Expend):

Elementor navigator find custom css

אלמנט שמציג במעבר עכבר את אייקון הקוד הוא אלמנט שמכיל CSS מותאם. לחיצה על האייקון מעבירה ישירות לקוד ה-CSS.

בחלונית הניווט ניתן לאתר קוד שמשפיע על וידג'ט גם אם הוא נכתב מחוץ לוידג'ט. יכולות להיות לכך שתי סיבות:

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

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

תאימות

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

סיכום

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

שיתוף

שיתוף ב facebook
שיתוף ב whatsapp
שיתוף ב linkedin
שיתוף ב email

לקריאה נוספת

חיבור טופס אלמנטור למערכת הדיוור Smoove (בלי זאפייר!)

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

על טעם ועל צבע – בחירת פלטת צבעים בעיצוב האתר

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

טיפוגרפיה עברית באתרים – חלק ב'

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

נשמח לספק לחברה שלך פתרונות מקצועיים בהתאמה אישית.

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