עריכה חזותית ותצוגה מקדימה

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

השתמשו ב־ בחירת אלמנט לשינויים בסיוע AI, ב־Edit Text לשינויי טקסט ישירים, וב־Theme לסגנונות גלובליים כגון צבעים, גופנים ואפקטים.

איך העריכה החזותית פועלת

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

• בחירת אלמנט מאפשר לכם לבחור אלמנט אחד או יותר ולבקש מהסוכנים לשנות אותם.
• Edit Text מאפשר לכם לערוך טקסט ישירות בתצוגה המקדימה.
• Theme פותח את בקרי ערכת הנושא עבור סגנונות גלובליים.

ניתן לכווץ את סרגל הכלים כשאינכם צריכים אותו.

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

לפני שאתם מתחילים לערוך, ודאו ש:

• לפרויקט שלכם יש build שהושלם. כלי העריכה החזותית זמינים מתוך App Viewer לאחר שהסוכנים מסיימים משימה.
• אתם יודעים שהשינויים אינם חיים עד שתפרסמו. ה-URL הציבורי שלכם אינו מושפע עד שתפרסמו את הגרסה המעודכנת.
• אתם יודעים ש־ ערכת נושא משפיעה רק על סגנונות משותפים. אלמנטים שנבנו עם ערכים קבועים שומרים על המראה הישן שלהם לאחר שינוי ערכת נושא. ראו אם ערכת נושא לא נראית נכון להלן.

הגדירו סגנונות גלובליים עם Theme

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

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

בחרו ערכת נושא

בחרו Theme מסרגל הכלים שמתחת ל-App Viewer. חלונית Theme כוללת שדה Search Themes ומקבצת ערכות נושא למקטעים:

• Current Theme — מה שהפרויקט שלכם משתמש בו כעת. לפני שתחילו משהו, יוצג בו No theme applied yet, והלחצן + שלצידו יוצר ערכת נושא חדשה.
• Featured Theme — 15 תבניות מוכנות שנבחרו על ידי מעצבים. כל אחת מוצגת כתצוגה מקדימה של עמוד שנבנה איתה, עם השם שלה ושורת דוגמיות צבע שמציגה את הפלטה שלה. לא ניתן למחוק אותן.
• Your Theme — ערכות נושא שיצרתם או התאמתם אישית. ניתן לשנות להן שם ולמחוק אותן.

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

לשונית Theme, עם ערכת נושא שהוחלה בראש וערכות הנושא השמורות שלכם מתחתיה.

כדי להחיל אחת:

1. בחרו את ערכת הנושא הרצויה.
2. Atoms שואל "האם ברצונך להחיל את ערכת הנושא name?"
3. בחרו Apply כדי לאשר, או Cancel כדי לחזור.
4. בדקו את התצוגה המקדימה.

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

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

עדכנו ערכת נושא שהוחלה

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

כדי לקבל אותה, בחרו Update בערכת הנושא הנוכחית שלכם ואשרו Do you want to re-apply theme name? לאחר מכן הפרויקט שלכם ישתמש בגרסה החדשה יותר.

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

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

בנו או ערכו ערכת נושא ב-Theme Manager

בחרו + לצד Current Theme כדי לבנות אחת מאפס, או פתחו ערכת נושא קיימת כדי לשנות אותה. שתי האפשרויות פותחות את Theme Manager, שבו תוכלו לכוונן ערכת נושא מול תצוגה מקדימה חיה.

ההגדרות שלו נמצאות בשלוש לשוניות:

• Color — תפקידי הצבע שבהם האפליקציה שלכם משתמשת, מקובצים לפי מטרה: Base Colors, Card, Popover, Primary, Secondary, ועוד. לכל תפקיד יש ערך משלו, כך ששינוי Primary משפיע על כל אלמנט שמשתמש בו.
• Fonts — הגופנים שלכם מסוג Serif, Sans-serif, ו־ Mono .
• Effects — Radius, לפינות ו־ Shadow שאתם שולטים בו לפי צבע, אטימות, טשטוש, פיזור והיסט.

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

מתחת לתצוגה המקדימה תקבלו גם Undo ו־ Redo כדי לעבור בין השינויים שלכם, ו־ Reset כדי להחזיר את ערכת הנושא לנקודת ההתחלה שלה.

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

שמרו ערכת נושא

1. בחרו Save.
2. תנו לה Theme Name, או השאירו את השם המוצע.
3. בחרו Save כדי לאשר.

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

הערה: עריכות אינן נשמרות עד שתשמרו אותן. Atoms יעצור אתכם ויציע לשמור או לבטל אם תנסו להחיל ערכת נושא אחרת כשיש שינויים שלא נשמרו.

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

ל-Theme Manager יש Export ו־ Import מתחת לתצוגה המקדימה. ייצאו ערכת נושא לקובץ, ואז ייבאו אותה לפרויקט אחר כדי להשתמש שוב באותו כיוון עיצובי, או העבירו אותה לחבר צוות כדי שהפרויקט שלו יתאים לשלכם.

אם ערכת נושא לא נראית נכון

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

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

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

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

Atoms אומר לכם שלא ניתן להחיל את ערכת הנושא. זה נדיר, ומשמעותו שממשק הפרויקט שלכם לא נבנה על מערכת ערכות הנושא של Atoms. השתמשו במקום זאת ב-Visual Editor — עדיין אפשר להשיג הכול אלמנט אחר אלמנט.

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

ערכו אלמנטים עם Visual Editor

1. רחפו מעל סרגל כלי העריכה החזותית ובחרו בחירת אלמנט.
2. סרגל הכלים מציג לחצו כדי לבחור, Ctrl/Cmd + לחיצה לבחירה מרובה.
3. בחרו אלמנט בתצוגה המקדימה. כדי לבחור כמה אלמנטים, החזיקו את Ctrl ב-Windows או את Cmd ב-Mac בזמן הבחירה.
4. הבחירות שלכם מצורפות לצ'אט הפרויקט. סרגל הכלים מציג את המספר שנבחר, למשל Edit 1 selection in chat window.
5. תארו את השינוי הרצוי בצ'אט הפרויקט ושלחו את ההודעה שלכם.
6. בחרו בחירת אלמנט שוב כדי לצאת ממצב הבחירה.

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

ערכו טקסט ישירות

1. בחרו Edit Text מסרגל הכלים שמתחת ל-App Viewer.
2. כאשר Click text content to edit מופיע, בחרו את הטקסט שברצונכם לשנות.
3. ערכו את הטקסט ישירות בתצוגה המקדימה.
4. אפשר לערוך כמה אלמנטים של טקסט לפני השמירה. סרגל הכלים מציג את מספר העריכות הממתינות, למשל 1 text change או 2 text changes.
5. בחרו Save כדי לשמור את כל שינויי הטקסט הממתינים, או Discard כדי להסיר אותם.

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

שמרו או בטלו את השינויים שלכם

שינויי טקסט ותמונה ישירים אינם מוחלים עד שתשמרו אותם. כשיש שינויים ממתינים, סרגל הכלים מציג את מספר השינויים יחד עם Discard ו־ Save.

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

אם תנסו לצאת ממצב העריכה כשיש שינויים ממתינים, Atoms יציג:

Unsaved changes

יש לכם שינויים שלא נשמרו. אנא שמרו או בטלו את השינויים לפני היציאה ממצב העריכה.

בחרו Cancel כדי להמשיך לערוך או Discard כדי לצאת בלי לשמור את השינויים.

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

החליפו תמונה

1. היכנסו ל־ בחירת אלמנט mode.
2. בחרו את התמונה שברצונכם להחליף.
3. בחרו תמונה מספריית התמונות, או השתמשו בבקר ההעלאה על התמונה שנבחרה.
4. בדקו את ההחלפה בתצוגה המקדימה.
5. בחרו Save כדי להחיל את שינוי התמונה, או Discard כדי להסיר אותו.

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

לשונית Library עם קטגוריות תמונות ו-Popular Images.

מאיפה התמונות מגיעות

Image הוא האוסף המובנה. השתמשו ב־ Search assets למשהו ספציפי, או עיינו בקטגוריה — Backgrounds, Nature, Education, Health, Fashion, Science, Feelings, ו-People, עם More tags לשאר. בחירת קטגוריה פותחת אותה; השתמשו בחץ החזרה כדי לחזור. Popular Images למטה מציג מבחר כללי. רחפו מעל כל תמונה ובחרו Use asset כדי להחיל אותה.

Generate יוצר תמונה חדשה מתיאור, ודורש תוכנית Pro או Max הקלידו מה אתם רוצים תחת Describe the image you want to generate ובחרו Generate. התוצאות מופיעות מתחת לשדה. בחרו תמונה ממוזערת מוכנה כדי להחיל אותה על האלמנט שלכם.

Upload מוסיף קובץ משלכם באמצעות גרירה ושחרור, הדבקה או לחיצה. תמונות יכולות להיות בפורמטים JPEG, PNG, GIF, BMP, TIFF, או WEBP, עד 4MB. תמונות שהועלו מופיעות מתחת לאזור ההעלאה — בחרו אחת כדי להחיל אותה.

הערה: Use asset מופיע רק על התמונות המובנות. תמונות שאתם יוצרים או מעלים מוחלות במקום זאת על ידי בחירת התמונה הממוזערת שלהן.

תארו שינויים בצ'אט

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

לדוגמה:

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

היו ספציפיים לגבי התוצאה הרצויה. הוראות כגון "תגרום לזה להיראות טוב יותר" עלולות להפיק תוצאות לא צפויות

צפו בתצוגה מקדימה של השינויים שלכם

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

• Device view — עברו בין גדלי מסך כדי לבדוק רספונסיביות. שינויים בערכת נושא ובטיפוגרפיה שנראים נכון במחשב שולחני לעיתים קרובות נשברים במובייל, לכן תמיד בדקו מובייל לפני הפרסום.
• Page selector — עברו בין עמודי האפליקציה שלכם.
• Refresh — טענו מחדש את התצוגה המקדימה אם היא נראית לא מעודכנת.
• Open in a new tab — צפו באפליקציה ברוחב מלא בלשונית דפדפן נפרדת.
• Console — פתחו את חלונית היומן כשמשהו נראה לא תקין.

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

התאוששות מבעיה בתצוגה המקדימה

אם התצוגה המקדימה נראית לא מעודכנת, ממשיכה להיטען, או מציגה שגיאות אדומות, ייתכן שהבעיה היא ב-App Viewer ולא בעריכות החזותיות שלכם. ראו פתרון בעיות build ותצוגה מקדימה לשלבי פתרון הבעיות — Refresh, ה־ Console panel, Resolve, ואיך לדווח על שגיאה שנמשכת.

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

פרסמו את השינויים שלכם

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

הערה: אם הפרויקט שלכם משתמש ב־ Specify Version במקום Always Latest, האתר החי נשאר נעול לגרסה שבחרתם, ושינויי העיצוב שלכם לא יופיעו בפומבי עד שתפרסמו גרסה חדשה.

לשגיאות שהסוכנים מדווחים עליהן במהלך build, ראו Issue Report.