דלג לתוכן הראשי

כיוון העיצוב

שלב כיוון העיצוב מאפשר לך לסקור, ללטש ולסיים את העיצוב הוויזואלי של התבנית (Theme) שלך לפני ש-Theme Builder מייצר את התבנית המלאה.

סקירה כללית​

לאחר השלמת ראיון הגילוי (Discovery Interview), Theme Builder מציג את כיוון העיצוב שלך עם רינדור תצוגה מקדימה למחשב ולנייד. זה מאפשר לך לראות בדיוק איך העיצוב שלך ייראה במכשירים שונים לפני שאת/ה מתחייב/ת לתבנית.

רכיבי כיוון העיצוב​

1. פלטת צבעים (Color Palette)​

מערכת הצבעים של התבנית שלך, כולל:

  • צבע ראשי (Primary color) — צבע המותג הראשי המשמש לכפתורים, קישורים ודגשים.
  • צבע משני (Secondary color) — צבע משלים למגוון.
  • צבע הדגשה (Accent color) — צבע המדגיש אלמנטים חשובים.
  • צבעים ניטרליים (Neutral colors) — גוונים של אפור ולבן לרקעים וטקסט.
  • צבע טקסט (Text color) — צבע הטקסט הראשי לקריאות.

2. טיפוגרפיה (Typography)​

בחירת גופנים עבור:

  • גופן כותרת (Heading font) — משמש לכותרות עמודים וכותרות מקטעים.
  • גופן גוף (Body font) — משמש לטקסט פסקאות ולתוכן.
  • גודלי גופן (Font sizes) — גודל רספונסיבי למסכים שונים.
  • מרווח שורה (Line height) — המרווח בין שורות לשיפור הקריאות.
  • משקלי גופן (Font weights) — וריאציות עבה, רגיל וקל.

3. פריסה וריווח (Layout and Spacing)​

  • רוחב מכולה (Container width) — הרוחב המקסימלי של התוכן.
  • ריפוד וריווח (Padding and margins) — המרווחים סביב האלמנטים.
  • מערכת רשת (Grid system) — פריסה בעמודות לעיצוב רספונסיבי.
  • ריווח רכיבים (Component spacing) — המרחק בין אלמנטים בממשק המשתמש.

4. אלמנטים ויזואליים (Visual Elements)​

  • סגנונות כפתורים (Button styles) — עיצובים לכפתורים ראשיים, משניים וטריטוריים.
  • עיצוב כרטיסים (Card designs) — פריסות עבור בלוקי תוכן.
  • אייקונים (Icons) — סגנון וגודל של האייקונים.
  • מסגרות וצללים (Borders and shadows) — עומק ויזואלי עדין.
  • אפקטי ריחוף (Hover effects) — סגנון למצב אינטראקטיבי.

רינדור תצוגה מקדימה (Preview Rendering)​

תצוגת מחשב (Desktop Preview)​

תצוגת המחשב מציגה את העיצוב שלך ברוחב מלא (בדרך כלל 1200 פיקסלים או יותר):

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

תצוגת נייד (Mobile Preview)​

תצוגת הנייד מציגה את העיצוב שלך ברוחב נייד (בדרך כלל 375 פיקסלים):

  • ניווט רספונסיבי (תפריט המבורגר).
  • פריסה בעמודה אחת.
  • טיפוגרפיה וריווח מותאמים.
  • גדלי כפתורים ידידותיים למגע.

נקודות עצירה רספונסיביות (Responsive Breakpoints)​

Theme Builder מציג תצוגות מקדימה בנקודות העצירה הבאות:

מכשיררוחבתצוגה מקדימה
נייד375pxטלפון פורטרט
טאבלט768pxטאבלט לנדסקייפ
מחשב1200pxמחשב רוחב מלא
מחשב גדול1920pxתצוגה אולטרה-רחבה

זיקוק העיצוב שלך​

ביצוע התאמות (Making Adjustments)​

את/ה יכול/ה ללטש את כיוון העיצוב שלך על ידי:

  1. התאמת צבעים — שינוי כל צבע בפלטה.
  2. שינוי גופנים — בחירת גופנים שונים.
  3. שינוי ריווח — התאמת הריפוד והריווח.
  4. עדכון פריסה — שינוי רוחבי מכולות ועמודות רשת.
  5. התאמת אלמנטים — שינוי סגנונות כפתורים, עיצוב כרטיסים וכו'.

עדכוני תצוגה מקדימה (Preview Updates)​

השינויים משתקפים בזמן אמת:

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

תצוגת השוואה (Comparison View)​

השווה את כיוון העיצוב שלך ל:

  • עיצוב מקורי (Original design) — כדי לראות מה השתנה.
  • עיצובי מתחרים (Competitor designs) — להשוואה לאתרים בהשראה.
  • גרסאות קודמות (Previous versions) — כדי לחזור לכיווני עיצוב קודמים.

אישור כיוון העיצוב​

ברגע שאת/ה מרוצה מהעיצוב שלך:

  1. סקור את שתי התצוגות — ודא שמחשב ונייד נראים טוב.
  2. בדוק את כל הצבעים — ודא ניגודיות ונגישות.
  3. בדוק את הטיפוגרפיה — ודא קריאות בכל הגדלים.
  4. אשר את הפריסה — בדוק ריווח והתיישור.
  5. אשר את העיצוב — המשך ליצירת התבנית.

צעדים הבאים (Next Steps)​

לאחר אישור כיוון העיצוב שלך:

  1. Theme Builder מייצר את התבנית המלאה שלך.
  2. התבנית מותקנת באתר WordPress שלך.
  3. ניתן להמשיך להתאמה אישית באמצעות ה-WordPress customizer.
  4. המשך ל-Hospitality Menus או לתכונות אחרות.

שיטות עבודה מומלצות (Best Practices)​

  • בדוק במכשירים אמיתיים — השתמש בטלפונים וטאבלטים אמיתיים אם אפשר.
  • בדוק קריאות — ודא שהטקסט קריא בכל הגדלים.
  • אמת ניגודיות — השתמש ב-Validate Palette Contrast לנגישות.
  • שקול ביצועים — אופטימיזציה של תמונות וגופנים למהירות.
  • תכנן תוכן — ודא שהפריסה עובדת עם התוכן האמיתי שלך.

פתרון תקלות (Troubleshooting)​

התצוגה המקדימה אינה מתעדכנת​

  • רענן/י את הדף.
  • נקה/י את מטמון הדפדפן (browser cache).
  • נסה/י דפדפן אחר.
  • בדוק/י את חיבור האינטרנט.

הצבעים נראים שונים​

  • בדוק/י את הגדרות צבע המonitor.
  • נסה/י במכשירים שונים.
  • אמת/י ניגודיות צבע עם כלי נגישות.
  • שקול/י סימולטורי עיוורון צבע.

בעיות טיפוגרפיה​

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