איך עובדים נכון עם מיקום מוחלט באלמנטור?

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

האזהרה של אלמנטור

בתוך העורך של אלמנטור מופיעה האזהרה הנחמדת:

אף אחד מאיתנו לא רוצה קונפליקטים בעיצוב,
או חלילה לבצע דברים לא מומלצים…

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

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

מה זה מיקום מוחלט ואיך הוא עובד

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

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

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

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

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

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

הצמדתי את התמונה לצד ימין למטה של העמודה.

2. כמה סנטימטרים או אחוזים התמונה תתרחק מהקירות.

הרחקתי מהקירות 20 ס"מ שמאלה ו20 ס"מ למעלה

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

ולנוחיותכם:
תזוזה אופקית = תנועה ימינה ושמאלה.
תזוזה אנכית = תנועה למעלה ולמטה.

איך להעמיד את התמונה מחוץ לעמודה בצורה רספונסיבית?

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

לדוגמה: אני רוצה לשים אייקון של אגודל למעלה בימין, מחוץ לריבוע של ההמלצות
(הריבוע של ההמלצות הוא בעצם עמודה)

השלבים:
1. מוסיפים איזור עם רוחב תוכן Boxed של 700 פיקסלים.
2. מוסיפים גובה מינימילי של 200 פיקסלים.
3. צובעים את העמודה שנוצרה (כדי לראות בעיניים את הגודל והגבולות שלה).
3. מוסיפים וידג'ט תמונה (או וידג'ט אייקון) עם רוחב בתוך השורה ומיקום מוחלט.
4. מצמידים את הוידג'ט ימינה ולמעלה.
5. ועכשיו הטריק: מוציאים אותו החוצה מהעמודה עם מינוסים, ככה:

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

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

אז כדי לבצע את הנ"ל נכון צריך לשים לב:
1. לצאת החוצה לפי פיקסלים.
2. לראות שיש מספיק פיסקלים מיותרים מחוץ לעמודה, גם במסכים עם רוחב קטן.
3. לסמן גלישה נסתרת לאזור, ליתר בטחון (אזור > פריסה > גלישה > מוסתר)
4. בשבירות מסך של טאבלט ומובייל אפשר לשחק עם הגודל של התמונה ועם המיקום שלה, אופקית ואנכית.
5. חשוב! ההצמדה לקירות חייבת להיות זהה בדסקטופ / טאבלט / מובייל. ברספונסיביות אפשר לשחק רק עם הפיקסלים ימינה ושמאלה, למעלה ולמטה.

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

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

בונת אתרים, רוצה להיות אלופה?

קבלי טיפים שווים וסודות מקצועיים,
ישירות לתיבת המייל שלך : )

תגובה אחת

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

כתיבת תגובה

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

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