3 טיפים לאלמנטור שישדרגו את עיצוב האתר שלך

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

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

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

כפתור גראדיאנט

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

לכפתורים האלה נתתי רקע עם מעבר צבע – gradient.

רוצה גם? ככה עושים

1. מוסיפים כפתור, ובלשונית 'סגנון -> כפתור' נותנים לו צבע רקע.

טיפים לאלמנטור - הוספת כפתור

2. בלשונית 'סגנון -> כפתור' מסמנים 'הצללה'.

3. בחלון שנפתח, נותנים לצל צבע.

4. משנים את המיקום ל"פנימי".

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

טיפים לאלמנטור - הוספת גראדיאנט

שוליים שליליים (margin)

אני מאוד אוהבת לשחק עם מרקמים ושכבות של אלמנטים בעמוד.

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

טיפים לאלמנטור - שוליים חיצוניים שליליים

שוליים
שליליים

ממש מעט מילים על שוליים - margin ו-padding

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

אלה למעשה תרגומים של שני סוגי גבולות שיש לאלמנטים שלנו – margin ו-padding.

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

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

Margin הוא המרחק בין האלמנט לאלמנטים אחרים בעמוד.

(אלמנט הוא כל דבר בעמוד – טקסט, כפתור, כותרת, תמונה…)

מה ההבדל בין margin ו padding

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

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

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

 

אבל לפעמים
זה מתבקש

שוליים חיצוניים באלמנטור

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

הדרך לעשות זאת תהיה באמצעות שימוש בשוליים שליליים.

רוצה גם? ככה עושים

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

קחו מההדגמה הזאת את העיקרון ורוצו איתו למחוזות הפרועים של הדמיון שלכם. 😁

 

1. מוסיפים אזור עם שתי עמודות – באחת תמונה ובשניה עורך טקסט.

טיפים אלמנטור - שוליים שליליים

2. בוחרים את הטקסט, ובלשונית 'מתקדם -> רקע', ניתן לו צבע רקע.

טיפים לאלמנטור - שוליים שליליים 2

3. בלשונית 'מתקדם -> מיקום' נבחר במיקום 'בתוך השורה'. עכשיו הגודל של האלמנט שלנו (עורך טקסט) נקבע מהתוכן שלו ולא מהעמודה שהוא בתוכה.

טיפים באלמנטור - שוליים שליליים

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

טיפים לאלמנטור שוליים שליליים

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

טיפים אלמנטור הוספת שוליים

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

טיפים אלמנטור - שוליים חיצוניים שליליים

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

טיפים של אלופים

⭐️ לא לשכוח להתאים למובייל!

 

⭐️ למרות שהאלמנט זז הצידה, הוא נכנס מתחת לאלמנט השני? זה סימן שצריך לתת לו Z-index גבוה יותר.

נבחר באלמנט שמתחבא, ובלשונית 'מתקדם -> מתקדם' ניתן לו מספר ב-Z-index . תנסו 2 ואם זה לא עובד תעלו למעלה עד שהוא עולה. לפעמים זה מגיע גם ל999 ואפילו יותר.. אז פשוט תנסו עד שהוא יופיע.

 

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

מסגרת חיצונית לתמונה עם צל

עוד סוג של משחק עם שכבות ומיקומים שיוצר עניין ועומק.

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

טיפים לאלמנטור - מסגרת לתמונה

רוצה גם? ככה עושים

1. מוסיפים תמונה.

2. בלשונית 'סגנון' מוסיפים לתמונה צל.

טיפים לאלמנטור - הוספת מסגרת לתמונה

3. בחלון שנפתח נותנים צבע לצל

4. מורידים את הטשטוש ל-0, ומשחקים עם הערכים של 'אופקי' ו-'אנכי' עד שמגיעים לתוצאה הרצויה. אפשר גם לשחק עם הפיזור.

הוספת צל לתמונה באלמנטור

 

⭐️ לא לשכוח להתאים למובייל!

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

שימו לב שהפיזור שבחרתם ניראה טוב בשני המצבים.

אני מקווה שהמדריך חידש לכם! ספרו לי בתגובות אם למדתם משהו חדש ואם אתם מתכוונים ליישם אותו.

6 תגובות

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *