איך להפוך את האתר שלך לאטרקטיבי למבקרים? השאלה הזו מטרידה כמעט את כל בעלי משאבי האינטרנט: סוחרים, בלוגרים, בעלי עסקים קטנים וגדולים, מטיילים ופשוט אנשים יצירתיים שיש להם מה לספר לעולם.
למה אתר אינטרנט צריך להיות יפה ופונקציונלי?
מספר הביקורים תלוי בנושא האתר ובקהל היעד שלו, בעניין של אנשים במוצר מסוים, בהשקעה, בקידום, בתוכן ובגורמים רבים נוספים. אבל אי אפשר להכחיש שהאתר "מקבל את פני הבגדים". זהו העמוד הראשון והראשי של המשאב המהווה את פניו, כרטיס הביקור, שבאמצעותו על המבקר להבין האם הוא רוצה להשקיע את זמנו בצפייה נוספת בתוכן.
ואין מקום לטעות! על פי מחקר של אחת האוניברסיטאות הטכניות בארה"ב, המבקר מקבל את הרושם הראשוני מהאתר תוך פחות משנייה. בממוצע, אדם "סורק" אתר ב-3 שניות. מהירות הבזק, נכון?!
עד 70% מהצלחת המשאב תלוי איך הדף הראשי נראה. הדבר הראשון שאנשים שמים לב אליו הואלוגו, אבל השני הוא ניווט. ואם הכל פחות או יותר ברור עם הלוגו, אז כדאי לשבור את הראש על הניווט, התפריט והנוחות של הארגונומיה של האתר. נשאלת שאלה סבירה: "איך לקשט את האתר שלך, להפוך אותו לפונקציונלי ונוח ככל האפשר, אבל באותו זמן יפה?" יש הרבה רעיונות יוצאי דופן להציע, אבל אחד המעניינים ביותר הוא עצות כלים.
מהם עצות כלים? בנוסף להיותו מנגנון מצוין לשיפור הפונקציונליות של האתר, עצות כלים הם כלי המאפשר למשתמש לראות הסבר לתמונה מסוימת כאשר הוא מרחף מעל סמל, מילה או תמונה.
כלים לעבודה עם עצות כלים
Bootstrap הוא הכלי הטוב ביותר ליצירת עצות כלים. זוהי קבוצה קלה ללמידה של תבניות לבניית אפליקציות ואתרים שנכתבו ב-HTML, CSS, Sass ו-JavaScript.
כדי להיות ספציפי, עצות כלים משתמשות באחד האלמנטים הגרפיים של תבנית Bootstrap - Tooltip.
מסגרת Bootstrap נוצרה עבור "טוויטר" ונקראה במקור "תוכנית טוויטר". לאחר כמה שינויים ב-2012, הוא קיבל רשת של 12 עמודות, הפך להתאמה ורכש את השם המוכר - Tooltip. הסבר על כלים הוא רכיב שצץ כאשר אתה מרחף מעל רכיב מסוים במסך הצג.
יצירת רמז
אתה יכול ליצור תיאור כלים של Bootstrap באמצעות תכונותנתונים, כמו גם על ידי הפעלת רכיבי "סקריפט ג'אווה". ישנן שתי דרכים עיקריות ליצור HTML Bootstrap Tooltip. המהות של הראשון היא להחיל את התכונה ואת כותרת התכונה (כותרת), שיכילו את טקסט הרמז. הסבר הכלי יופיע בחלק העליון (הגדרת ברירת מחדל). כדאי לזכור שיש לאתחל את הסבר הכלים, מכיוון שהאתחול האוטומטי הוצא משימוש ב-"bootstrap של טוויטר" מסיבות ביצועים.
כדי לאתחל עצות כלים, נעשה שימוש ב-JavaScript מיוחד, שבו שיטת הכלים משוחזרת עבור כל האלמנטים שיש להם תכונה. המהות של השיטה השנייה היא הפעלת תיאור כלים באמצעות קוד "JavaScript" בהשתתפות ספריית jQuery על ידי כתיבת מחלקת כלים הכוללת תיאור כלי. השיטה דומה לשיטה הראשונה, למעט שיטת בחירת האלמנטים. אתה יכול להפעיל רמזים ב"סקריפט ג'אווה" בדרך המוצגת למטה.
דוגמה של תיאור כלי אתחול
ישנן ארבע אפשרויות עיקריות למיקום עצות כלים: בקצה השמאלי והימני, ומעל ומתחת לאלמנט.
רמז מלמעלה
רמז נכון
רמז בתחתית
רמז נשאר
Using tooltips
יש הרבה שימושים ל- Bootstrap Tooltip. ניתן להכניס עצות כלים כך שהמשתמש יוכל להבין את התרגום של טקסט משפה זרה בטקסט. עצות כלים יכולות לשמש גם ככלי שיעזור למשתמש להבין את המשמעות של הכפתורים בלוח כאשר מרחף מעליהם. תבניות Bootstrap Tooltip משמשות לעתים קרובות באתרים של ארגונים שונים כדי ליצור מנוי לחדשות החברה. זה שומר את הלקוחות מעודכנים וגם מאפשר למבקרים לקבל מידע חדש, כגון שיעורי הנחה, הצעות, שינויים בתוך החברה.
שקול דוגמה שבה משתמש צריך להזין את כתובת האימייל שלו כדי להירשם לניוזלטר. המשימה להבטיח שקהל הלקוחות נרשם לחדשות מושגת בצורה הקלה ביותר באמצעות HTML5 והתכונה הנדרשת. הרמז של הסבר הכלי במקרה זה נחוץ על מנת שהמשתמש יבין את רצף הפעולות. לדוגמה, לאחר הזנת כתובת המייל, סימנתי את התיבה: "אני מסכים לקבל חדשות החברה לכתובת המייל שלי". להלן דוגמה לקוד הטופס.
התקנת קוד זה ב-HTML Bootstrap Tooltip קלה. אבל היתרונות הם משמעותיים. עכשיו הצרכנים יודעים את כל החדשות של החברה. זהו סוג של פרסום בחינם.
טעויות עיקריות ביצירת חלונות קופציםרמזים
מה לעשות אם Bootstrap Tooltip לא עובד? הטעות הראשונה והעיקרית שבה תכונת ה-Tooltip לא תעבוד היא אם ה-Tooltip לא מופעל. כדי להפעיל אותו, עליך להשתמש בקוד מיוחד.
שיטה זו מאפשרת לך לאתחל את כל טיפים הכלים בדף אינטרנט.
הטעות הנפוצה השנייה היא שאין jQuery בכותרת.
יש תנאי הכרחי כדי שהקישור יפעל כהלכה - יש לציין פונקציית עיבוד נתונים כמו "Java Script".
נכסי טיפים
בבסיסו, רכיב ה-Tooltip נועד להציג טיפים כלים כאשר אתה מזיז את מצביע העכבר על חלק זה או אחר של הדף. אבל, בנוסף למיקום של הסבר הכלי מימין, שמאל ומעל בעזרת העזרה, ל-Tooltip יש את המאפיינים הבאים:
- פעיל. השימוש במאפיין true ב-Bootstrap Tooltip מאפשר הצגת טיפים כלים, בעוד שהגדרת אותו מאפיין ל-false פירושה שלא ניתן להציג טיפים כלים.
- AutoPopDelay הוא הזמן שבו טיפים מוצגים.
- AutoPopDelay. מייצג את משך הזמן שבו סמן העכבר חייב להיות מרחף מעל אלמנט כדי שהסבר הכלי יופיע.
- IsBaloon. אם הערך של HTML Bootstrap Tooltip הוא נכון, הסבר הכלים ישתנה לענן.
- ToolTipIcon. מייצג את התו שמוצג בחלוןרמזים.
Tooltipster
כדי ליצור עצות כלים יפות, למשל, באתר שנוצר ב-Wordpress, אין צורך לדעת את השפה של מפתחי אתרים לעומק. מספיק לדעת על קיומו של תוסף (הרחבה) כזה כמו Tooltipster. מהשם ברור שהתוסף הזה מבוסס על Tooltip ודומה לו באופן מפתיע בתכונותיו ובמטרתו. בשביל מה התוסף הזה? זה מאפשר לך ליצור את סימון ה-HTML הדרוש בתוך הסבר הכלי.
עבודת התוסף מבוססת על הכנסת קיצורי דרך בעמוד. מכיל את כל המאפיינים הבסיסיים של HTML Bootstrap Tooltip: תוכן (data-tooltip-content), כותרת, מיקום, טריגר וכו'. זה מאפשר לך לשנות את ערכת הנושא, הגופן, גודל תיאור הכלים, צבע, הוספת תמונה ועוד.
