קטגוריה: עיצוב אתרי וורדפרס וחווית משתמש

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

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

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

מהם Core Web Vitals, כיצד לנטר ואיך למדוד אותם?

Core Web Vitals מייצגים סט של מדדים שאינם קשורים לאיכות התוכן באתר ומשמשים את גוגל בכדי להעריך את חווית המשתמש (UX) של אתר מסויים. מדדים אלו הולכים להצטרף לאחרים כסט של מדדים בעלי השפעה על [...]

מספר מילים על התכונה flex-wrap

flex-wrap היא תכונה ספציפית הקיימת במודול CSS flexbox. באמצעות תכונה זו ניתן לקבוע כיצד flex items יוצגו ויתנהגו ב flex container כשאין לרשותם מספיק מקום. התכונה flex-wrap אף מספקת לנו דרך מהירה להפוך flex container [...]

Scroll Snapping - שליטה בחווית הגלילה בעזרת CSS

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

אפקט פרלקס בגלילה - Parallax Scrolling Effect

חזרה בזמן לשנת 2011, אפקט פרלקס בגלילה (parallax scrolling effect) יצר הדים והסתמן כטרנד חדש בעיצוב אתרים. אופנות רבות הגיעו ועזבו מאז אך אפקט זה ביסס מקומו ואינו מתכוון לעזוב בקרוב. בפוסט זה נסביר מה [...]

מבט על Blend Modes (מיזוג) ב CSS

ב CSS קיימות שתי תכונות האחראיות למיזוג (blending במיים אחרות). התכונה mix-blend-mode אחראית למיזוג אלמנטים ב DOM, ולעומתה, התכונה background-blend-mode אחראית לשילוב של מספר תמונות רקע (background-image ב CSS), או שילוב של background-image יחד עם [...]

הוספת אנימציות CSS בגלילה באמצעות AOS

לבטח יצא לכם לראות אתרים בהם מתבצעות אנימציות שונות בזמן שאתם גוללים מטה (On Scroll Animations). אז אשתף אתכם בספרייה בה נתקלתי בשם AOS, המאפשרת להוסיף אנימציות אלו בקלות ועם שליטת CSS מלאה על אותן [...]

עיצוב פסי גלילה (Scrollbars) עם CSS

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

יצירת לשוניות רספונסיביות (Tabs) עם CSS בלבד

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