header-logo
איך לבנות את האתר והעסק שלכם עם Wix
עיצוב וניהול האתר בעזרת הפיצ'רים האינטואיטיביים של Wix
ניהול המנויים, התוכניות והחשבוניות
ניהול העסק והלקוחות ישירות מהנייד
איך קונים דומיין ומחברים או מעבירים אותו לאתר
כלים לפיתוח העסק והנוכחות שלכם אונליין
כלי שיווק ו-SEO להגדלת החשיפה של העסק
פיצ'רים מתקדמים לייעול העבודה שלכם
פתרונות לבעיות, עדכונים על תקלות ויצירת קשר עם Wix
placeholder-preview-image
שיפור המיומנויות שלכם בעזרת קורסים ומדריכים מוכנים
טיפים ועצות בעיצוב אתרים, שיווק ועוד
איך להגדיל את התנועה האורגנית לאתר דרך מנועי החיפוש
בניית אתר עם פלטפורמת ה-full-stack שלנו
במאגר שלנו תוכלו למצוא מומחי Wix בתשלום שיעזרו לכם להשיג את היעדים שלכם
placeholder-preview-image
  1. ראשי
  2. Studio ותוכניות לפרטנרים ולארגונים
  3. Wix Studio
  4. שימוש ב-Studio Editor
  5. הוספת אפקטים ואנימציות
  6. Studio Editor: הוספת אנימציות של אייקונים לכפתורים

Studio Editor: הוספת אנימציות של אייקונים לכפתורים

4 דקות
אם בחרתם להשתמש בכפתורים מעוצבים, הוספת אנימציות של אייקונים תיצור אפקטים אטרקטיביים, שיהפכו את האתרים של הלקוחות שלכם לאינטראקטיביים עד לפרטים הקטנים ביותר שלהם.
תוכלו לבחור ממגוון האנימציות של אייקונים שיש ל-Wix Studio להציע כדי קבלת אפקט ready-made, או לשלב בין אייקון התחלה וסיום כדי ליצור אנימציה משלכם. אתם אפילו יכולים להעלות קובצי SVG משלכם לקבלת טאץ' אישי.
כפתור מעוצב, סמן העכבר עובר מעל אפשרויות האנימציה של אייקונים בחלונית הגדרות הכפתורים

הוספת אנימציית אייקונים מעוצבת מראש

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

כדי להוסיף אייקון אנימציה מעוצב:

  1. עברו ל-editor.
  2. הקליקו על הכפתור המעוצב הרלוונטי.
  3. הקליקו על Settings (הגדרות).
  4. הקליקו על Animated (אנימציה) תחת Icon type (סוג אייקון).
  5. בחרו מה לעשות עכשיו:
    • בחרו את האייקון הרצוי תחת Choose icon (בחירת אייקון).
    • הקליקו על אייקון ההוספה כדי לבדוק את מגוון האייקונים המלא שלנו ב-Media Manager (מנהל המדיה).
  6. (לא חובה) גררו את סליידר ה-Duration כדי לשנות את משך האנימציה.
טיפ:
אם תעברו עם העכבר מעל האייקונים המעוצבים מראש תוכלו לראות תצוגה מקדימה של האנימציות שלהם.
כפתור מעוצב עם אייקון אנימציה של עגלת קניות על הקנבס לצד חלונית ההגדרות, האפשרויות שקשורות לאייקון מסומנות

יצירת אנימציות משלכם לאייקונים

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

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

  1. עברו ל-editor.
  2. הקליקו על הכפתור המעוצב הרלוונטי.
  3. הקליקו על Settings (הגדרות).
  4. בחרו באפשרות Animated (אנימציה) תחת Icon type (סוג אייקון).
  5. הקליקו על אייקון ההוספה ובחרו באפשרות Create new (יצירת חדש).
  6. הגדירו את אייקון ההתחלה ואת אייקון הסיום:
    1. הקליקו על אייקון ההוספה תחת Start icon (אייקון ההתחלה).
    2. בחרו קובץ בלשונית Media from Wix (מדיה מ-Wix), או העלו / בחרו קובץ משלכם ב-Site Files (קובצי האתר).
    3. הקליקו על Choose File (בחירת קובץ).
    4. חזרו על שלבים 1-‏3 עבור ה-End icon (אייקון הסיום).
  7. (לא חובה) הקליקו על Back (חזרה) בחלק העליון והשתמשו בסליידר כדי להגדיר את ה-Duration (משך).
טיפים:
  • אתם יכולים לשלב קובץ משלכם עם אייקון מ-Wix.
  • בעזרת תיבת התצוגה המקדימה תוכלו לוודא שהאפקט ייראה כמו שאתם רוצים.
יצירת אנימציית אייקונים מותאמת אישית בחלונית Button Settings (הגדרות הכפתור), סמן העכבר עובר מעל התצוגה המקדימה כדי לראות את האנימציה בלייב

עיצוב האייקון

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

כדי לעצב את האייקון:

  1. עברו ל-editor.
  2. הקליקו על הכפתור המעוצב הרלוונטי.
  3. הקליקו ב-editor מימין למעלה על אייקון פתיחת כלי ה-Inspector (עריכה) .
צילום מסך של פתיחת חלונית Inspector (עריכה) ב-Studio Editor.
  1. בחרו את ה-State (מצב) הרלוונטי תחת Design (עיצוב): Regular (רגיל) או Hover (מעבר עם העכבר).
  2. הקליקו על Icon (אייקון) תחת Design (עיצוב).
  3. השתמשו באפשרויות הזמינות כדי לעצב את האייקון:
    • שנו את גודל האייקון.
    • שנו את צבע האייקון והתאימו את רמת האטימות שלו.
    • סובבו את האייקון לזווית אחרת.
כפתור מעוצב עם אנימציה של אייקון עגלת קניות על הקנבס, לצד אפשרויות עיצוב האייקונים בחלונית ה-Inspector

דרישות והנחיות עבור אייקונים בהתאמה אישית

יש כמה דרישות עבור אייקונים בהתאמה אישית. כדי להעלות קבצים משלכם ולהשתמש בהם, הם חייבים להיות:
  • בצבע שחור מלא (#000000) בלבד
  • בפורמט SVG
  • גודל קובץ מרבי של 250KB
שימו לב:
אם יצרתם את קובצי ה-SVG ב-Adobe Illustrator או ב-Figma, אתם צריכים להמיר אותם לנתיב מורכב לפני שתייצאו אותם.
יש גם כמה שיטות מומלצות שכדאי לזכור כשאתם יוצרים אייקונים. אנחנו ממליצים לפעול לפי ההנחיות הבאות כדי להבטיח שהאנימציה תפעל בצורה החלקה ביותר.
  • ודאו שלאייקון ההתחלה ולאייקון הסיום בכל אנימציה יש את אותה נקודת התחלה.
  • בדקו שלשני האייקונים יש אותו מספר נקודות.
  • השתמשו באייקונים מלאים (ללא חיתוכים).
  • השתמשו בכמה צורות קטנות יותר כדי ליצור אייקון SVG, במקום להשתמש בצורה אחת גדולה.
  • התאימו את קנה המידה של הצורות בעת שינוי הגודל שלהן כדי לשמור על האיכות.
  • השתמשו בתצוגת הפיקסלים של התוכנית כדי להבטיח יישור לפיקסלים במשטח היצירה.
  • אם לאייקונים שלכם יש צורות שונות מאוד, נסו להיעזר בטיפים הבאים ליצירת מעבר חלק אפילו עוד יותר:
    • השתמשו בגרסאות של האייקונים עם שינוי צורה הדרגתי (אייקון התחלה שהופך בהדרגתיות לאייקון הסיום ולהיפך).
    • הסירו צורות מאייקון אחד באייקון אחר (למשל הסתרת צורות מאייקון הסיום באייקון ההתחלה).
חשוב:
אין לנו אפשרות לספק תמיכה או שירותי פתרון בעיות עבור קובצי SVG שאתם יוצרים מחוץ ל-Wix.

זה עזר לך?

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

זה עזר לך?

|