אם עברתם את כל השלבים במדריך והגעתם עד פה, אז קודם כל – כל הכבוד! יש לכם אתר בסיסי משלכם שנראה טוב. את החלק של העיצוב באלמנטור ביצעתם עד כה על עמוד הבית. אתם יכולים באופן דומה לעצב עמודים נוספים לפי בחירתכם.
אבל מה קורה כשאתם נכנסים לאתר מהסמטרפון שלכם? האם הוא עדיין נראה טוב?
איך להתאים את האתר לגדלי תצוגה שונים?
כשאני נכנס לאתר ההדגמה דרך הנייד שלי זה הדבר הראשון שאני רואה:
כבר אני רואה שני דברים שאני רוצה לשנות: 1) הטקסט נחתך כי הוא גדול מדיי. אני רוצה להקטין את הטקסט. ו-2) תמונת הרקע לא במרכז כמו שהיא כשאני נכנס דרך המחשב.
אז איך אפשר לראות ולשנות את זה? עם אלמנטור זה די פשוט! כשאתם בעריכת האתר באמצעות אלמנטור, פשוט לחצו על הכפתור של המסך ("מצב רספונסיבי") בתחתית סרגל העריכה.
ברגע שאתם לוחצים מופיעים שלושת המצבים: דסקטופ (כפי שהאתר נראה מהמחשב), טאבלט ומובייל.
מהבדיקה שלי זה נראה טוב בטאבלט, אז אתקן את זה רק במובייל בהדגמה. בכל מקרה, כך תוכלו לעבור בין המצבים כדי לראות איך האתר שלכם נראה בגדלים שונים.
כדי לשנות את גודל הטקסט במובייל – לחצו על מובייל. עכשיו אתם רואים את האתר שלכם בקטן כאילו הייתם נכנסים אליו מהנייד. ועכשיו כשאתם בתצוגת המובייל, תוכלו לערוך באותו האופן בדיוק כמו לפני כן!
פשוט בחרו את הטקסט שברצונכם לשנות את גודלו. היכנסו ל"סגנון" בסרגל העריכה ותחת "טיפוגרפיה" תוכלו לשנות את גודל הטקסט במיוחד לתצוגה במובייל.
מעולה. עכשיו הטקסט נראה טוב גם בנייד. בואו נטפל גם במיקום של הרקע.
כדי לגשת לרקע, פשוט לחצו על הכפתור האמצעי בחלק העליון של האזור הנבחר. זה נראה כמו מלבן לבן קטן שמורכב משישה ריבועים. כשתלחצו עליו, יופיעו אפשרויות עריכת האזור.
באפשרויות העריכה, תחת "סגנון", תוכלו לבחור את המיקום המבוקש של הרקע מתוך אפשרויות המיקום (כמו בתמונה למעלה).
שימו לב שבהרבה מהאפשרויות שאתם עורכים יהיה סימן של טלפון נייד – וזה אומר שאתם מבצעים עריכה ספציפית עבור הנייד. סימנתי את הסמל הזה בתמונה הבאה שתבינו בדיוק על מה מדובר:
מעולה. עכשיו אתם יודעים איך אפשר לעשות התאמות פשוטות לנייד.
אבל לפעמים יש מקרים יותר מסובכים מאשר רק שינוי גודל או מיקום תמונת הרקע. אז מה עושים כשיש מצבים יותר מורכבים? איך מתאימים לנייד אז?
דרך נוספת להתאים לנייד (ולטאבלט)
אוקיי. הדרך הזו טיפה יותר מסובכת, אבל לא יותר מדיי. טיפה ריכוז ואתם תבינו בטוח (ואם לא, תשאלו ואעזור לכם).
בגדול, פשוט אפשר להחליט שאזורים מסוימים יופיעו רק בתצוגה מסוימת ולא יופיעו בתצוגה אחרת. זאת אומרת, אני יכול להחליט שאזור מסוים יופיע רק כשאני נכנס דרך המחשב לאתר, ולא יופיע כשאני נכנס מהנייד.
אופציה אחת היא פשוט שדברים בעיתיים לא יופיעו בנייד. אופציה שנייה, מה שאדגים בעוד רגע, היא פשוט ליצור את האזור מחדש עבור הנייד.
בואו נחזור להדגמה שלנו. אם אני ממשיך לגלול מטה בתצוגת הנייד באתר ההדגמה, אני רואה עוד בעיה: במקום שהתמונות יהיו אחת ליד השנייה והאייקונים יהיו מעל התמונות, זה הכל התערבב בצורה לא מתאימה (כמו שאפשר לראות בתמונה הבאה).
אז מה שאני רוצה לעשות במקרה כזה, זה לשכפל את האזורים הללו כדי שאוכל להשאיר את המקורי לתצוגה הגדולה וליצור העתק מסודר נכון עבור התצוגה של המובייל (נייד\סמרטפון…) בלבד. בואו נחלק את זה לשלבים:
שלב ראשון – העתקת האזורים:
לחצו כפתור ימני על האזור הכללי ולחצו על "שכפל". בצעו את זה לכל האזורים שברצונכם לערוך בשלב הזה. במקרה שלי יש שלושה אזורים נפרדים – אחד לאייקונים, אחד לטקסטים ואחד לתמונות.
עכשיו יש לנו פעמיים מכל אזור. בואו נטפל בזה שלא הכל ייראה כפול באתר.
שלב שני – הסתרת הכפילויות:
כדי להעלים את הכפילויות עליכם באופן ידני לבחור "הסתר במובייל". תוכלו לראות בתמונה הבאה שמכל זוג אזורים כפול הסתרתי את האזור הראשון (עדיין רואים אותו, אבל הוא מסומן באפור שנבין שהוא מוסתר בתצוגת האתר).
פשוט לחצו על כל אזור שתרצו להסתיר, ובסרגל העריכה לחצו על הלשונית "מתקדם", וסמנו את "הסתר במובייל".
שלב שלישי – להתאים את האזורים למובייל:
את האזורים שלא הסתרתם מהמובייל תוכלו לערוך עכשיו. פשוט גררו וסדרו מחדש את האזור עד שיראה כמו שהייתם רוצים שיראה מהפלאפון שלכם.
השלב הרביעי (והאחרון) – הסתירו את האזורים המותאמים:
עכשיו כשיש לכם אזורים מותאמים ידנית לנייד, זה הזמן להעלים אותם מהתצוגה של הדסקטופ ושל הטאבלט. אחרת עדיין יהיו שם כפילויות.
וזהו זה! למדתם את הדרך הידנית של לעשות התאמות לנייד\טאבלט\דסקטופ. כל הכבוד! אל תשכחו ללחוץ על "עדכן".
זה כנראה היה החלק הכי מורכב במדריך, אז תרגישו חופשי להסתבך איתו קצת ולשאול שאלות. כי אם הגעתם עד כאן – מזל טוב! – למעשה השלמתם את המדריך!
השיעור הבא הוא שיעור סיכום המדריך והמלצות להמשך.
