שמת לב שבאתר הזה אין פרסומות?

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

שיעור 3: הגדרות אזורים, עמודות ואלמנטים – צוללות פנימה | מדריך אלמנטור 2020

מדריך אלמנטור, שיר ויצמן, מדריך וורדפרס, אלמנטור פרו, אלמנטור למתחילים

היי קואלטיז! 

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

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

 

אז…. Let’s Go!

 

 


מה ההבדל בין יחידות המידה PX, EM, REM, %, VW ו- VH?

נתחיל מההתחלה, 

וורדפרס בבסיס שלה בנוייה על שפות קוד. אחת מהן היא CSS.

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

יחידות המידה שתמצאו בכמה מהאפשרויות של אלמנטור כוללות PX, EM, REM,%, VW ו- VH, (אף על פי שב- CSS קיימות עוד כמה יחידות).

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

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

 

יחידות מוחלטות – אבסולוטיות (Absolute Units)

היחידה היחידה המוחלטת באלמנטור היא יחידה שנקראת PX כלומר פיקסל.

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

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

יחידות יחסיות (Relative Units)

EM: יחסית לאלמנט ההורה שבו היא נמצאת

REM: יחסית לאלמנט הבסיס (תג HTML)

%: יחסית לאלמנט ההורה שבו היא נמצאת

VW: יחסית לרוחב התצוגה ממכשיר המשתמשות

VH: יחסית לגובה התצוגה ממכשיר המשתמשות

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

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

 


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

חדשות בוורדפרס? קבלו את המדריך המלא לבניית אתרים – מדריך וורדפרס למתחילים.

כתיבת תגובה

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

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

השאירו פרטים ואתם בחצי הדרך לשם :)