1. דף הבית
  2. מדריכים לבניית אתרים
  3. תצוגת האתר בנייד

תצוגת האתר בנייד

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

לפני שמתחילים

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

1

תצוגת נייד בעורך

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

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

לחיצה נוספת על אותו כפתור מחזירה לתצוגת מחשב.

2

הסתרת אלמנט בנייד

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

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

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

3

מוצרים בשורה בנייד

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

צילום מסך · שלב 3האזור תצוגת מוצרים בהגדרות הקטלוג של 2all, עם השדה כמות מוצרים להצגה בשורה בנייד מסומן
מה רואים: השדה כמות מוצרים להצגה בשורה בנייד מסומן.

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

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

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

כפתור הוסף לסל צף

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

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

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

5

הפניות לאתר סלולרי

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

צילום מסך · שלב 5האזור ניהול מתקדם באפשרויות המתקדמות של 2all, עם הכפתור הפניות אתר סלולרי מסומן באדום
מה רואים: הכפתור הפניות אתר סלולרי מסומן.
צילום מסך · שלב 5, צילום 2המסך הפניות אתר סלולרי ב-2all, עם אזהרה למשתמשים מתקדמים, סוג ההפניה ושדה הדומיין
מה רואים: המסך הפניות אתר סלולרי.

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

חשוב

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

6

התפריט בנייד

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

צילום מסך · שלב 6המסך ניהול אייקונים בתפריט ב-2all, עם סוג התפריט נייד מסומן, טבלת האייקונים ושורת אייקונים בשימוש נפוץ
מה רואים: המסך ניהול אייקונים בתפריט, עם סוג התפריט נייד מסומן.
  • האייקונים בסרגלבטבלה מופיעים האייקונים של סרגל הנייד, למשל תפריט, חיפוש, סל ואהבתי. לכל אחד אפשר בחירת אייקון, בחירת תמונה או שחזור אייקון מקורי, ולקבוע יישור: שמאל, אמצע או ימין.
  • אפשרויות חיפושלאייקון החיפוש בוחרים איך החיפוש ייפתח: חיפוש בלחיצה על האיקון, חיפוש בתוך הסרגל, חיפוש קבוע מעל הסרגל, חיפוש קבוע מתחת לסרגל או נפתח מימין + מזיז את התוכן.
  • הוספת אייקוןלוחצים על אייקון בשורה אייקונים בשימוש נפוץ, למשל טלפון או וואטסאפ.

בכל שורה ששיניתם לחצו שמור.

7

צבע סרגל הכתובת

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

צילום מסך · שלב 7האזור מדיה ומיתוג במאפייני האתר של 2all, עם השדה Mobile Chrome Toolbar Color לצבע סרגל הכתובת בנייד
מה רואים: השדה Mobile Chrome Toolbar Color מסומן. בצילום: FFFFFF, לבן.

בעיות נפוצות

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

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

בהצלחה!יש שאלה? צוות התמיכה של 2all כאן בשבילכם.
logo בניית אתרים
✕