מערכת המודולים החדשה לא תומכת באתרים עם גרסת מובייל נפרדת

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

תוכן עניינים

• מודולים קיימים וחדשים
• בחירת תבנית
• שכבות המודול
• הגדרות כל שכבה
  • לשונית תוכן:
  • לשונית עיצוב
  • לשונית מעבר עכבר:
    
    
  • אופציות מערכת כלליות:

מודולים קיימים וחדשים

מודולים קיימים:

• נוכל לבחור מתוך הרשימה של המודולים הקיימים , ככל שנוסיף יותר מודולים, הרשימה תהיה גדולה יותר.

• עבור כל מודול ניתן להוסיף ולהוריד את ההצגה בחנות ולשכפל את המודול

יצירת מודול חדש:

• על מנת ליצור מודול חדש לחנות, יש ללחוץ על האופציה:

בחירת תבנית 

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

שכבות המודול

לאחר שבחרנו סוג תבנית, נגיע למסך העריכה הבא

• בצד ימין, ניתן לראות את סדר השכבות למשל: יש לי מודול שהוא הראשי, תחתיו יכול להיות לי ״קטגוריה 1״, תחתיו יהיה לי ״תמונה״ + ״כותרת/טקסט״ וכו׳.
  
  

ניתן לשנות כותרות לכל שכבה כדי שנוכל להבין מה זה כל שכבה או תיקיה (למשל אם יש לנו קטגוריות מעוצבות אז נוכל לקרוא להן ״קטגוריה 1, קטגוריה 2 וכו׳)

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

בעזרת החצים האלה אפשר לשנות את המיקום של השכבות בין השכבות השונות

הגדרות כל שכבה 

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

• לשם ההמחשה, אני לוחצת על קבוצה ״קטגוריה 1״ על מנת להגיע למסך עריכה של אותה קבוצה.
  

• לרוב שנגיע למסך העריכה, נוכל לראות 3 לשוניות: תוכן, עיצוב ומעבר עכבר. במקרים מסוימים יהיו לשוניות אחרות (למשל בקרוסלה או בקישוט יופיעו לשוניות שונות).
  *במובייל לא תופיע הלשונית של ״מעבר עכבר״
  

לשונית תוכן:

התוכן הוא בהתאם לסוג השכבה. למשל: 

• לטקסט תהיה תיבת טקסט
  

• בתמונה תהיה האפשרות להעלות תמונה, לכתוב לתמונה ALT ולהוסיף קישור  
  

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

לשונית עיצוב 

חלק כללי- 

• שקיפות- ניתן להגדיר את מידת השקיפות של התמונה או הקובייה, ולהעלות או להוריד אותה לפי הצורך. 

• הסתרת תוכן חורג-מאפשר לבחור אם להציג תוכן שיוצא מחוץ לגבולות השכבה, או לחתוך אותו כשהוא מגיע לגבול השכבה. 

מידות- 

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

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

מסגור

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

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

• צל- ניתן להוסיף צל לשכבה ולהחליט על צבעו ומידת השקיפות שלו.

מיקומים- 

• אלמנט צף-  האלמנט יהיה עצמאי בשכבה בה הוא נמצא. 

• מיקום כללי לרוחב- לא רלוונטי עם הרוחב הוא 100%

• Z-index- מאפשר לשלוט בסדר השכבות של האלמנטים על הדף, כך שאלמנט עם ערך Z-index גבוה יותר יופיע מעל אלמנטים עם ערכים נמוכים יותר.

ריווחים- 

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

• חיצוני (margin)-המרחק שנמצא מחוץ לאלמנט, בין גבול האלמנט לבין האלמנטים האחרים שסביבו. לדוגמה, אם יש 2 כפתורים אחד ליד השני ואתה מוסיף ריווח חיצוני, הם ייצרו רווח בניהם. 

לשונית מעבר עכבר:

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

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

 לשונית כללי- 

טריגר לאפקט- במעבר עכבר על אלמנט נוכחי (השכבה שאני נמצאת עליה) או כל השכבות אבא של השכבה שאני נמצאת עליה 

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

לשונית אפקטים 

שקיפות- ליצור שקיפות למוצר שהוא ילך ויעלם או שרק במעבר עכשיו יופיע 

צבעוניות- במעבר עכבר להפוך את התמונה לצבעונית או לשחור-לבן

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

לשונית גודל 

במעבר עכבר על התמונה היא תשנה את מידותיה למידות שיהיו רשומות כאן 

מסגור

אפשר ליצור צל נעלם או משתנה משתנה מאפשר בחירת צבע נוסף והגדרות נוספות של מידות הצל

אופציות מערכת כלליות:

• כפתור חזרה למסך השכבות הכללי
  
  
  

• כפתור ״מצב כהה״ - נשתמש בו במידה ולאתר יש רקע כהה שלא רוצים להגדיר על המודול עצמו אלא רק לצורך עריכה (נמצא בצד שמאל למעלה)
  
  
  

• כפתור תצוגה מקדימה מלאה, מאפשר לנו לראות את כל מצבי המסך (נמצא ליד מצב כהה)
  
  
  
  

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

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

כך נדע ששמרנו את ההגדרות

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

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

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