סקירה כללית על רכיבים - עזרה של Webflow

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

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

כיצד ליצור רכיב

ניתן ליצור רכיבים באופן חזותי ב-Webflow, או לייבא רכיבים קיימים מקוד חיצוני עם DevLink. חלק זה מתמקד בפיתוח חזותי.

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

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

כדי ליצור רכיב:

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

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

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

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

למידע נוסף על עריכת הרכיב הראשי.

כיצד להשתמש ולמחזר רכיב

לאחר שיצרת רכיב, תוכל להשתמש בו בכל מקום באתר שלך:

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

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

כדי לראות את היררכיית האלמנטים של רכיב בפאנל הניווט, החזק את Option + לחיצה כפולה (ב-Mac) או החזק את Alt + לחיצה כפולה (ב-Windows) על הרכיב, או לחץ על סמל "ערוך רכיב ראשי". תוכל לראות את היררכיית האלמנטים של הרכיב רק מהרכיב הראשי (לא בתוך מופע רכיב).

כיצד לערוך רכיב

בואו נעבור על הדרכים השונות בהן ניתן לקיים אינטראקציה ולערוך רכיב:

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

עריכת הרכיב הראשי

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

• לחיצה כפולה על מופע הרכיב על הקנבס
• החזקת Option + לחיצה כפולה (Mac) או Alt + לחיצה כפולה (Windows) על המופע בנווט
• לחיצה ימנית על המופע ולחיצה על ערוך רכיב
• בחירת המופע ולחיצה על סמל "ערוך רכיב" בתווית
• בחירת המופע ולחיצה על סמל "ערוך רכיב" בחלק העליון של הפאנל הימני

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

מאפייני רכיב, חריצים וגרסאות סגנון

מאפייני רכיב (props), חריצים וגרסאות סגנון מאפשרים ליצור תצורות ייחודיות בכל מופע של רכיב:

• מאפיינים (Props) — חיבור הגדרות אלמנט בודדות ברכיב הראשי (כגון טקסט, קישורים, תמונות או סרטונים) למאפיינים. זה מאפשר להתאים אישית את ההגדרות הללו בכל מופע מבלי לשנות את המבנה או העיצוב הכללי של הרכיב. ניתן גם לחבר מאפיינים לשדות CMS כדי למשוך תוכן באופן דינמי מאוספי ה-CMS שלך.
• חריצים (Slots) — חריצים הם אלמנטים שניתן למקם ברכיבים קיימים המשמשים כמצייני מיקום לרכיבים אחרים. זה מאפשר לבנות רכיבים באופן מודולרי, כאשר כל מופע יכול לכלול רכיבים שונים בחריץ.
• גרסאות סגנון — הגדרת אפשרויות עיצוב מרובות עבור רכיב יחיד, המאפשרת להתאים את המראה שלו לשימושים שונים. לדוגמה, ניתן להציע גרסאות סגנון כמו כפתורים מלאים או מתארים, או פריסות כרטיסים אופקיות ואנכיות.

צור גרסאות סגנון לרכיב

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

כדי ליצור גרסת סגנון לרכיב:

1. ערוך את הרכיב הראשי
2. עבור ללוח הסגנון
3. לחץ על סמל "גרסאות רכיב" בבורר הסגנון
4. לחץ על סמל ה"פלוס"
5. תן לגרסה שם ייחודי
6. לחץ Enter/Return לאישור

נהל את מאפיין הגרסה

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

לשינוי שם מאפיין הגרסה:

1. ערוך את הרכיב הראשי
2. עבור ללוח המאפיינים
3. לחץ על מאפיין הגרסה
4. הזן שם מאפיין ייחודי
5. לחץ Enter/Return לאישור

להוספת מאפיין הגרסה לקבוצת מאפיינים:

1. ערוך את הרכיב הראשי
2. עבור ללוח המאפיינים
3. לחץ על מאפיין הגרסה
4. בחר קבוצה או הזן שם ייחודי ליצירת קבוצה חדשה
5. לחץ על צור או לחץ Enter/Return לאישור

הגדר גרסת ברירת מחדל לרכיב:

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

שנה את גרסת מופע הרכיב

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

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

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

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

לסידור מחדש של וריאנטים של רכיב:

1. ערוך את הרכיב הראשי
2. עבור ללוח סגנון
3. לחץ על סמל "וריאנטים של רכיב" בבורר סגנון
4. לחץ וגרור וריאנט כדי להעבירו למיקום חדש

לשינוי שם של וריאנט:

1. ערוך את הרכיב הראשי
2. עבור ללוח סגנון
3. לחץ על סמל "וריאנטים של רכיב" בבורר סגנון
4. רחף מעל הווריאנט ולחץ על סמל "אפשרויות נוספות"
5. לחץ על שינוי שם
6. הזן שם וריאנט חדש וייחודי
7. לחץ Enter/Return לאישור

לשכפול וריאנט:

1. ערוך את הרכיב הראשי
2. עבור ללוח סגנון
3. לחץ על סמל "וריאנטים של רכיב" בבורר סגנון
4. רחף מעל הווריאנט ולחץ על סמל "אפשרויות נוספות"
5. לחץ על שכפול
6. הזן שם וריאנט חדש וייחודי
7. לחץ Enter/Return לאישור

למחיקת וריאנט:

1. ערוך את הרכיב הראשי
2. עבור ללוח סגנון
3. לחץ על סמל "וריאנטים של רכיב" בבורר סגנון
4. רחף מעל הווריאנט ולחץ על סמל "אפשרויות נוספות"
5. לחץ על מחיקה
6. לחץ על מחיקה במודאל הפופ-אפ לאישור

יציאה מהרכיב הראשי

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

• לחיצה על חץ "חזרה" בפינה השמאלית העליונה של המעצב
• לחיצה מחוץ לרכיב על הקנבס
• לחיצה על Escape במקלדת

עריכת רכיבים בעורך

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

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

שינוי שם או תיאור רכיב

כדי לשנות שם או תיאור רכיב:

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

שינוי שם מופע רכיב

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

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

• בנווט או בראש הלוח הימני:

1. לחץ פעמיים על שם הרכיב
2. הקלד את השם החדש
3. לחץ על Enter או לחץ מחוץ לשדה כדי לשמור את השם המותאם

• על הקנבס:

1. לחץ לחיצה ימנית על מופע הרכיב
2. לחץ על שנה שם
3. הקלד את השם החדש
4. לחץ על Enter או לחץ מחוץ לשדה כדי לשמור את השם המותאם

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

קיבוץ רכיבים

כדי לארגן את הרכיבים שלך לקבוצות:

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

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

מחיקת רכיב

כדי למחוק רכיב לחלוטין:

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

כיצד לבטל קישור מופע רכיב מהרכיב הראשי שלו

כדי לבטל קישור מופע רכיב ולבצע שינויים בו באופן עצמאי מהרכיב הראשי:

1. לחץ לחיצה ימנית על כל אלמנט רכיב במופע שברצונך לבטל את הקישור שלו
2. לחץ על בטל קישור מופע

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

שיתוף רכיבים בין אתרים עם ספריות

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

חזרה לעזרה של webflow