רוצים ליצור באתר
תיבות,
רכיבי תוכן חוזרים ואלמנטים שיקפצו מהדף וימשכו תשומת לב? הוסיפו להם אינטראקציות שמופעלות במעבר עם העכבר. אלה אפקטים שיוצגו לגולשים כשהם יעברו עם העכבר על האלמנטים שתבחרו.
אפשר להגדיר שכשגולשים יעבירו את העכבר מעל אלמנטים, אותם אלמנטים יופיעו או ייעלמו, הצבע שלהם ישתנה או שיוצגו לגולשים אפקטים. אתם יכולים גם לשלוט בתזמון של האפקטים כדי שהם ימשכו כמה שיותר תשומת לב.
שלב 1 | הוספה ועיצוב של אלמנט
תכונות אינטראקטיביות שמופעלות בהעברה של העכבר מוסיפות תנועה לעיצוב של האתר והופכות אותו למושך וכייפי יותר. השלב הראשון הוא להיכנס לחלונית Add (הוספה) ולהוסיף לאתר תיבה או רפיטר.
הקלקה על האפשרויות שמוצגות בהמשך תפתח הוראות להוספת כל אלמנט:
- הקליקו על אייקון ההוספה שמוצג בצד שמאל של ה-Editor.
- הקליקו על Box (תיבה).
- הקליקו על תיבה וגררו אותה כדי להוסיף אותה לעמוד.
טיפ: הקליקו על Hover Boxes (תיבות מעבר עם עכבר) ובחרו באחת התיבות אם אתם מעדיפים תיבה שכבר עוצבה מראש למעבר עכבר. - (לא חובה) עצבו את התיבה והוסיפו לה אלמנטים לפי הצורך.
- הקליקו על אייקון ההוספה שמוצג בצד שמאל של ה-Editor.
- הקליקו על List (רשימה).
- הקליקו על Repeaters (רכיבי תוכן חוזרים).
- הקליקו על רפיטר וגררו אותו לתוך העמוד.
- (לא חובה) עצבו את רכיב התוכן החוזר והוסיפו לו אלמנטים לפי הצורך.
שלב 2 | כניסה למצב מעבר עם העכבר
הוספתם אלמנטים ועיצבתם אותם? מעולה. זה השלב שבו נכנסים למצב מעבר עם העכבר ומוסיפים אינטראקציות. בשלב הזה אתם קובעים מה יוצג לגולשים כשהם יעברו עם העכבר מעל לתיבה או לרכיב התוכן החוזר.
- בחרו את התיבה או את רכיב התוכן החוזר ב-Editor.
- בצעו את ההוראות הבאות כדי לעבור למצב מעבר עם העכבר (לכל אלמנט יש הוראות אחרות):
- תיבה: הקליקו על אייקון האינטראקציות עם מעבר עכבר . .
- רפיטר: הקליקו על אחד הקונטיינרים ברכיב ובחרו באייקון אינטראקציות עם מעבר עכבר .
- הקליקו על Get Started (להתחיל).
שלב 3 | הוספה של אינטראקציות שמופעלות במעבר עם העכבר לאלמנט
במצב מעבר עם העכבר אתם יכולים להגדיר שאלמנטים יוצגו או ייעלמו ולהוסיף אפקטים נהדרים. הכל יקרה מיידית ברגע שגולשים יעברו עם העכבר על התיבה או על רכיב התוכן החוזר.
בחרו מה אתם רוצים לעשות:
הוספת אלמנטים שיופיעו כשגולשים יעברו עליהם עם העכבר
- הקליקו על אייקון ההוספה להפעלה במעבר עם העכבר שמוצג בפינה השמאלית העליונה כדי להוסיף אלמנטים שיוצגו עם מעבר העכבר.
- הקליקו על האלמנט שאתם רוצים להוסיף לתיבה או לרכיב התוכן החוזר.
שימו לב: יש אלמנטים שאי אפשר להוסיף למצב מעבר עם העכבר.
הסתרת אלמנט כשגולשים יעברו עליו עם העכבר
כדי להסתיר אלמנט כשגולשים עוברים עם העכבר:
- בחור באלמנט ולחצו על Delete (מחיקה) במקלדת או הקליקו על אייקון ההסתרה .
שימו לב: אתם יכולים להסתיר אלמנט ספציפי או להסתיר את התיבה/רכיב התוכן החוזר. - הקליקו על האייקון מוסתר במעבר עכבר בחלק העליון משמאל כדי לצפות ולנהל את רשימת האלמנטים המוסתרים.
בחירת אפקט לאלמנט ברגע מעבר עכבר
אתם יכולים להוסיף אפקט לכל אלמנט בתיבה או ברכיב התוכן החוזר, כולל לתיבה או לרכיב התוכן החוזר עצמם. אפשר לגרום לאלמנטים לגדול, להתכווץ או להסתובב או להטות אותם הצידה.
כדי לבחור אפקט:
- בחרו בתיבה/רכיב התוכן החוזר ב-Editor.
- הקליקו על Choose Effect (בחירת אפקט).
- בחרו באפקט מתוך האפשרויות הזמינות.
טיפ: בחרו באפקט ה-Combo (קומבו) כדי לשלב כמה אפקטים יחד. לדוגמה, אתם יכולים להשתמש באפקט משולב כדי להגדיר שאלמנט גם יגדל וגם יסתובב כשיעברו עליו עם העכבר. - (לא חובה) הקליקו על Customize (התאמה אישית) כדי להתאים את האפקט לצרכים שלכם.
אחרי שבוחרים איזה אפקט יופעל על האלמנט, אפשר להגדיר את התזמון שבו האפקט יוצג.
כדי להגדיר תזמון:
- בחרו באלמנט ב-Editor.
- הקליקו על אייקון התזמון .
- השתמשו באפשרויות שיוצגו לכם כדי להגדיר תזמון לאפקט:
- Duration: (משך הזמן) גררו את פס ההזזה כדי לבחור במשך הזמן (בשניות) של האפקט, אחרי שהגולשים עברו על האלמנט עם העכבר.
- Delay: (השהייה) גררו את פס ההזזה כדי לקבוע את משך הזמן (בשניות) שיעבור מרגע מעבר העכבר ועד הפעלת האפקט.
- Easing: (הופעת האפקט) בחרו איך האלמנט יעבור למצב האפקט ממצבו הרגיל, אחרי מעבר עם העכבר (לדוגמה אם יכנס וייצא מהאפקט).
שינוי עיצוב התיבה עם מעבר העכבר
אתם יכולים את עיצוב התיבה עם מעבר העכבר, עם החלפת הרקע, המסגרת, הפינות או הצל.
שימו לב: זה זמין בקונטיינרים בלבד ולא אפשרי ברכיבי תוכן חוזר.
כדי לערוך את עיצוב התיבה במעבר עכבר:
- הקליקו על התיבה ב-Editor כדי לבחור בה.
- הקליקו על טאב ה-Hover (מעבר עכבר) בחלק העליום של התיבה.
- הקליקו על אייקון העיצוב .
- בחרו בטאב הרלוונטי משמאל החלונית כדי לערוך את העיצוב:
- Fill Color & Opacity: (צבע המילוי ושקיפות) גררו את פס ההזזה כדי להתאים את שקיפות הרקע והקליקו על תיבת הצבעים כדי לשנות את הצבע.
- Border: (מסגרת) הקליקו על תיבת הצבעים כדי שלנות את הצבע וגררואת פסי ההזזה כדי לשנות את הבצעף השקיפות והעובי.
- Corners: (פינות) בחרו בפינה כדי לשנות את רמת העיגול של הפינות. הקליקו על אייקון השרשרת כדי לשנות את כל הפינות בבת אחת.
- Shadow: (צל) הקליקו על המתג כדי להוסיף את הצל ואז שנו את הזווית, המרחק, הגודל ועוד.