7 טיפים קטנים לשדרוג העיצוב באלמנטור

אלמנטור, טיפים, עיצוב
יוני 30, 2020

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

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

טיפ מס' 1: Scroll bar מעוצב

Scroll Bar, או סרגל הגלילה שנמצא בצד האתר שלכם. זה משהו קטן שנדמה שכולנו משלימים עם העיצוב המזעזע שלו בסגנון Windows 95 רק כי התרגלנו אליו. בעזרת קוד קצר ולא מסובך וכמה קליקים קטנים, תוכלו לעצב אותו מחדש – ממש כמו כאן באתר (הסרגל הזה מוצג רק בדסקטופ, בניידים לכל דפדפן ומכשיר יש סרגל אחר).

1. בממשק הוורדפרס שלכם כנסו ל-Apperance > Customize

2. בחרו בתפריט Additional CSS והדביקו לשם את הקוד הבא:

::-webkit-scrollbar {

-webkit-appearance: none;

}

::-webkit-scrollbar {

width: 10px;

}

::-webkit-scrollbar-track {

background: #ffffff90;

}

::-webkit-scrollbar-thumb {

background: #00000025;

height:100px;

border-radius:6px;

}

::-webkit-scrollbar-thumb:hover {

background: #00000050;

}

.site-branding {

display: none;

}

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

webkit-scrollbar – רוחב הסרגל
שנו את המספר 10px לכמה שתרצו כדי לשנות את רוחב הסרגל

webkit-scrollbar-track – מסילת הסרגל
שנו את #ffffff90 כדי לשלוט בצבע של מסילת הסרגל. 6 האותיות הראשונות הן הצבע, שני המספרים האחרונים מציינים שקיפות.

webkit-scrollbar-thumb – כפתור הגרירה
כאן יש 3 פרמטרים לשנות:

background: #00000025
צבע הכפתור (כמו בסעיף הקודם)

height:100px
גובה הכפתור

border-radius:6px
רדיוס, האם הכפתור עם קצוות מעוגלים או ישרים (0px)

webkit-scrollbar-thumb:hover – כפתור הגרירה במעבר עכבר
שליטה רק בצבע, כמו בסעיפים הקודמים.

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

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

לפרטים >>

טיפ מס' 2: אפקט Smooth Scroll

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

1. בממשק הוורדפרס שלכם כנסו ל-Plugins > Add new

בחיפוש הקלידו את שם התוסף "MouseWheel Smooth Scroll"
שימו לב שאתם מתקינים את הפלאגין הבא שמסומן בתמונה (יש כמה כאלה).

1. כנסו להגדרות התוסף דרך תפריט Settings > Smooth Scroll
ההגדרה היחידה שצריך לשנות היא:
stepSize: 80

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

טיפ מס' 3: אנימציות Lottie

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

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

טיפ מס' 4: הוספת Stroke לכותרות

נשמע כמו משהו מאוד בסיסי שאמור להיות באלמנטור, לא? אז לא.
לא ניתן להוסיף לטקסטים קו מתאר (או Stroke), מצאתי קוד מאוד קצר ופשוט שיוכל להוסיף קו מתאר לכל טקסט שתרצו, עם אפשרות לשינוי העובי והצבע.

1. בחרו בכותרת שתרצו להוסיף לה קו מתאר, עברו ללשונית Advanced, וב-CSS Classes כתבו
stroke

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

.stroke { -webkit-text-stroke: 3px #fff; }

3. פרמטרים לשינוי:
3px – עובי הקו
#fff – צבע הקו

טיפ מס' 5: אקורדיון וספוילר להסתרת טקסטים

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

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

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

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

ווידג'ט ספוילר

ספוילר #1

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

ספוילר #2

ווידג'ט אקורדיון

אקורדיון #1

אקורדיון #2

קבלו עוד מיני-טיפ: אם אתם רוצים להשתמש באקורדיון אך עדיין רוצים שבמצב ההתחלתי כל הלשוניות יהיו סגורות, גררו ווידג'ט HTML לכל מקום בעמוד (לא משנה איפה) והדביקו לתוכו את הקוד הבא:

הצטרפו לקהילת הפייסבוק שלנו

טיפ מס' 6: Theme Styler

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

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

טיפ מס' 7: חזרתיות בעיצוב

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

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

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

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

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

לסיכום

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

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

מצאתם טעות בכתבה? יש לכם שאלות? סתם בא לכם לפרגן?
הצטרפו לדיון בקהילת הפייסבוק

Sharing Is Caring

מורדי לוי

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