אם אי פעם ניסיתם לפתח אתר שעוצב על ידי מעצב יצירתי במיוחד, אתם מכירים את הכאב של החלפת החזון היפה שלהם בווידג'טים סטנדרטיים של Elementor שאין להם מספיק אפשרויות התאמה אישית.
אני לא אומרת שאלמנטור הוא לא כלי מדהים בפני עצמו, אבל לפעמים אתם רוצים משהו מעבר. משהו שימשוך את מבקרי האתר שלכם וירתק אותם מספיק כדי להישאר.
למשהו הזה קוראים CSS.
אבל מה זה CSS, אתם שואלים?
זה נשמע כמו קוד, וקוד הוא לא משהו שיכולים פשוט ללמוד ביום.
אז זהו שיש לי חדשות טובות בשבילכם – CSS היא לא שפת תכנות, זו שפה ויזואלית, ואולי לא תוכלו ללמוד אותה ביום, אבל כמה שבועות אמורים להספיק כדי ללמוד את היסודות ולתת לכם את היכולת לגרום לאתר שלכם לבלוט בים של מיליוני אתרים.
הבלוג הזה הוא לא מדריך טכני על CSS, אבל לפני שנעמיק בכל זאת רציתי לשתף כמה כלים שיעזרו לכם מאוד כשאתם מתחילים.
- Visual Studio Code: עורך קוד מעולה עם תמיכה מצוינת ב-CSS והרחבות שונות.
- Live Server: הרחבה ל-Visual Studio Code (ועורכים אחרים) שמספקת תצוגה מקדימה חיה ועדכונים אוטומטיים של שינויים בדפדפן. פשוט קשרו את ה'stylesheet' של ה-CSS שלכם בקוד ה-html, ולאחר מכן לחצו לחיצה ימנית ובחרו 'Open with Live Server'.
- CodePen: עורך קוד שנועד להצגת ניסויי HTML, CSS ו-JavaScript.
אז מה אתם יכולים לעשות עם CSS?
אנימציות מותאמות אישית
כפתור שליחה שהופך לסימן צ'קמרק
מעולה אם אתם רוצים לעשות שימוש בטריגרים פסיכולוגיים כדי לתת למשתמשים שלכם תחושת הישג כשהם מסיימים למלא טופס.
See the Pen Checkmark Button Animation by Noam (@LeviNoam) on CodePen.
אנימציות לוגו פשוטות
לפעמים אפילו הוספת תנועה פשוטה ללוגו שלכם גורמת לו להיראות הרבה יותר דינמי. תהיו יצירתיים, ואם יש צורך, תשתמשו ב-ChatGPT אם אתם לא בטוחים איך להשיג את התוצאות הרצויות. זה אולי ייקח קצת ניסיון וטעייה, אבל בסופו של דבר אתם תגיעו לשם.
See the Pen Logo animation by Noam (@LeviNoam) on CodePen.
מבנה יחודי של הדף
חיתוך אלמנטים כדי לרמז על גלילה: אולי ראיתם עיצובים כאלה בעבר. זה לא אפקט שאתם יכולים ליצור באמצעות אלמנטור לבד.
הטמעת CSS בוורדפרס ואלמנטור
אתם יכולים להטמיע CSS באתר שלכם בכמה דרכים. אני אתן לכם את הדרך הקלה ביותר לעשות זאת בעורך של אלמנטור.
זה למעשה די פשוט: קודם כל תלחצו על האלמנט שעליו אתם רוצים לשים את ה-CSS, ואז תעברו ללשונית 'Advanced'. תגללו למטה עד שתראו לשונית בשם 'Custom CSS'. זה המקום שבו אתם כותבים את הקוד שלכם.
אבל אם אתם מכירים CSS, אתם בטח יודעים שאתם צריכים לטרגט את האלמט הספציפי שאתם רוצים שהCSS יכול עליו.
ישנן שתי דרכים לעשות זאת:
- לעבור שוב ללשונית של 'Advanced', אבל במקום לגלול עד הסוף, הפעם תגללו למקום שבו כתוב 'CSS ID' ו'CSS Classes', ותנו לאלמנט שאתם רוצים שהסגנון יחול עליו ID או Class.
- האפשרות השנייה היא פחות פשוטה, אבל לפעמים זו האפשרות היחידה. אם למשל אין לכם גישה לחלק מהאלמנטים הפנימיים, אז הוספת ID או Class לאלמנט החיצוני לא יעזור לכם. במקרה זה תצטרכו לבדוק את הדף עם כלי המפתחים המובנים של גוגל (Developer Tools) על ידי לחיצה על F12 במקלדת ולנסות למצוא משם את ה-divs/IDs/classes הנכונים.
משאבים שימושיים
Mozilla Developer Network (MDN) – CSS: מקור סמכותי המציע תיעוד מקיף, מדריכים והפניות למאפיינים ותכונות CSS.
W3Schools: W3Schools, הידוע במדריכי הלימוד הפשוטים והיעילים שלו, מספק מידע קל לעיכול על מושגים ומאפייני CSS.
ערוץ YouTube Tricks CSS: ללומדים חזותיים, ערוץ זה מציע הדרכות וידאו, טיפים וטריקים הקשורים ל-CSS.
ChatGPT: כפי שציינתי קודם, השימוש ב-ChatGPT יכול להיות עזרה עצומה ביצירת האפקטים/עיצובים שאתם רוצים ב-CSS.
והאהוב עלי, גארי מ-DesignCourse. לא רק שיש לו סרטוני הדרכה מעולים על CSS, הוא תמיד מעודכן לגבי טרנדים חדשים וכלים מדהימים שיעזרו לכם לאורך כל הדרך.
לסיכום,
תאמצו את הכלים האלו ותחפשו השראה מדוגמאות שונות באינטרנט כדי לשפר את ה-CSS שלכם.
תזכרו, CSS טוב זה לא רק אסתטיקה – על פי מחקר שנערך על ידי אדובי, 38% מהמשתמשים מתנתקים מאתר אם הפריסה שלו חסרת משיכה ויזואלית, כך שיצירת אתרים שנראים טוב היא לא הוצאה שטחית שאולי תרצו להשקיע בה – זה חיוני להצלחה הכוללת של האתר שלכם.
אם יש לכם שאלות או התלבטויות, תרגישו חופשי ליצור קשר 😃
