Πώς να κάνετε τον ιστότοπό σας ελκυστικό στους επισκέπτες; Αυτή η ερώτηση ανησυχεί σχεδόν όλους τους κατόχους πόρων Διαδικτύου: εμπόρους, bloggers, ιδιοκτήτες μικρών και μεγάλων επιχειρήσεων, ταξιδιώτες και απλά δημιουργικούς ανθρώπους που έχουν κάτι να πουν στον κόσμο.
Γιατί ένας ιστότοπος πρέπει να είναι όμορφος και λειτουργικός;
Ο αριθμός των επισκέψεων εξαρτάται από το θέμα του ιστότοπου και το κοινό-στόχο του, το ενδιαφέρον των ανθρώπων για ένα συγκεκριμένο προϊόν, την επένδυση, την προώθηση, το περιεχόμενο και πολλούς άλλους παράγοντες. Αλλά δεν μπορεί να αρνηθεί κανείς ότι ο ιστότοπος «χαιρετίζεται με ρούχα». Είναι η πρώτη και κύρια σελίδα του πόρου που είναι το πρόσωπό του, η τηλεκάρτα, με την οποία ο επισκέπτης πρέπει να καταλάβει εάν θέλει να αφιερώσει τον χρόνο του για περαιτέρω προβολή του περιεχομένου.
Και δεν υπάρχει χώρος για λάθη! Σύμφωνα με έρευνα ενός από τα τεχνικά πανεπιστήμια των ΗΠΑ, ο επισκέπτης αποκτά την πρώτη εντύπωση του ιστότοπου σε λιγότερο από ένα δευτερόλεπτο. Κατά μέσο όρο, ένα άτομο «σαρώνει» έναν ιστότοπο σε 3 δευτερόλεπτα. Ταχύτητα αστραπής, σωστά;
Έως και το 70% της επιτυχίας του πόρου εξαρτάται από την εμφάνιση της κύριας σελίδας. Το πρώτο πράγμα που προσέχουν οι άνθρωποι είναιλογότυπο, αλλά το δεύτερο είναι η πλοήγηση. Και αν όλα είναι λίγο-πολύ ξεκάθαρα με το λογότυπο, τότε αξίζει να σπάσετε το κεφάλι σας σχετικά με την πλοήγηση, το μενού και την ευκολία της εργονομίας του ιστότοπου. Τίθεται ένα εύλογο ερώτημα: "Πώς να διακοσμήσετε τον ιστότοπό σας, να τον κάνετε όσο το δυνατόν πιο λειτουργικό και βολικό, αλλά ταυτόχρονα όμορφο;" Υπάρχουν πολλές ασυνήθιστες ιδέες που μπορείτε να προσφέρετε, αλλά μια από τις πιο ενδιαφέρουσες είναι οι συμβουλές εργαλείων.
Τι είναι οι συμβουλές εργαλείων; Εκτός από το ότι είναι ένας εξαιρετικός μηχανισμός για τη βελτίωση της λειτουργικότητας του ιστότοπου, οι συμβουλές εργαλείων είναι ένα εργαλείο που επιτρέπει στον χρήστη να βλέπει μια εξήγηση για μια συγκεκριμένη εικόνα όταν τοποθετείται πάνω από ένα εικονίδιο, λέξη ή εικόνα.
Εργαλεία για εργασία με συμβουλές εργαλείων
Το Το Bootstrap είναι το καλύτερο εργαλείο για τη δημιουργία συμβουλών εργαλείων. Είναι ένα εύκολο στην εκμάθηση σύνολο προτύπων για τη δημιουργία εφαρμογών και ιστοτόπων γραμμένων σε HTML, CSS, Sass και JavaScript.
Για να είμαστε συγκεκριμένοι, οι συμβουλές εργαλείων χρησιμοποιούν ένα από τα γραφικά στοιχεία του προτύπου Bootstrap - Επεξήγηση εργαλείου.
Το πλαίσιο Bootstrap δημιουργήθηκε για το "Twitter" και αρχικά ονομαζόταν "Twitter Blueprint". Μετά από κάποιες αλλαγές το 2012, έλαβε ένα πλέγμα 12 στηλών, έγινε προσαρμοστικό και απέκτησε το γνωστό όνομα - Επεξήγηση εργαλείου. Μια συμβουλή εργαλείου είναι ένα στοιχείο που εμφανίζεται όταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα συγκεκριμένο στοιχείο στην οθόνη της οθόνης.
Δημιουργία υπόδειξης
Μπορείτε να δημιουργήσετε μια επεξήγηση εργαλείου Bootstrap χρησιμοποιώντας χαρακτηριστικάδεδομένων, καθώς και με την ενεργοποίηση των στοιχείων «Java Script». Υπάρχουν δύο κύριοι τρόποι για να δημιουργήσετε μια επεξήγηση εργαλείου εκκίνησης HTML. Η ουσία του πρώτου είναι να εφαρμόσετε το χαρακτηριστικό και τον τίτλο του χαρακτηριστικού (τίτλος), το οποίο θα περιέχει το κείμενο υπόδειξης. Η επεξήγηση εργαλείου θα εμφανιστεί στην κορυφή (προεπιλεγμένη ρύθμιση). Αξίζει να θυμάστε ότι η συμβουλή εργαλείου πρέπει να προετοιμαστεί, καθώς η αυτόματη προετοιμασία έχει καταργηθεί στο "Twitter bootstrap" για λόγους απόδοσης.
Για την προετοιμασία των συμβουλών εργαλείων, χρησιμοποιείται ειδική JavaScript, στην οποία γίνεται επαναφορά της μεθόδου συμβουλής εργαλείου για όλα τα στοιχεία που έχουν ένα χαρακτηριστικό. Η ουσία της δεύτερης μεθόδου είναι να ενεργοποιήσετε μια επεξήγηση εργαλείου χρησιμοποιώντας τον κώδικα "JavaScript" με τη συμμετοχή της βιβλιοθήκης jQuery γράφοντας μια κλάση εργαλείων που περιλαμβάνει μια επεξήγηση εργαλείου. Η μέθοδος είναι παρόμοια με την πρώτη, εκτός από τη μέθοδο επιλογής στοιχείων. Μπορείτε να ενεργοποιήσετε υποδείξεις στο "Java Script" με τον τρόπο που φαίνεται παρακάτω.
Παράδειγμα συμβουλής εργαλείου εκκίνησης
Υπάρχουν τέσσερις κύριες επιλογές για την τοποθέτηση συμβουλών εργαλείων: στην αριστερή και δεξιά άκρη και πάνω και κάτω από το στοιχείο.
Υπόδειξη από πάνω
Hint right
Υπόδειξη στο κάτω μέρος
Υπόδειξη αριστερά
Χρήση συμβουλών εργαλείων
Υπάρχουν πολλές χρήσεις για το Bootstrap Tooltip. Μπορείτε να εισαγάγετε συμβουλές εργαλείων έτσι ώστε ο χρήστης να κατανοεί τη μετάφραση του κειμένου από μια ξένη γλώσσα στο κείμενο. Οι συμβουλές εργαλείων μπορούν επίσης να χρησιμοποιηθούν ως εργαλείο για να βοηθήσουν τον χρήστη να κατανοήσει τη σημασία των κουμπιών στον πίνακα όταν τοποθετείται πάνω τους. Τα πρότυπα επεξήγησης εργαλείων εκκίνησης χρησιμοποιούνται συχνά σε ιστότοπους διαφόρων οργανισμών για τη δημιουργία συνδρομής στα νέα της εταιρείας. Αυτό διατηρεί τους πελάτες ενημερωμένους και επιτρέπει επίσης στους επισκέπτες να λαμβάνουν νέες πληροφορίες, όπως ποσοστά έκπτωσης, προσφορές, αλλαγές εντός της εταιρείας.
Εξετάστε ένα παράδειγμα όπου ένας χρήστης πρέπει να εισαγάγει τη διεύθυνση email του για να εγγραφεί σε ένα ενημερωτικό δελτίο. Το καθήκον της διασφάλισης ότι το κοινό των πελατών εγγράφεται σε ειδήσεις επιτυγχάνεται πιο εύκολα χρησιμοποιώντας HTML5 και το απαιτούμενο χαρακτηριστικό. Η υπόδειξη συμβουλής εργαλείου σε αυτήν την περίπτωση είναι απαραίτητη για να κατανοήσει ο χρήστης τη σειρά των ενεργειών. Για παράδειγμα, αφού εισήγαγα τη διεύθυνση email, τσέκαρα το πλαίσιο: "Συμφωνώ να λαμβάνω νέα της εταιρείας στη διεύθυνση email μου". Παρακάτω είναι ένα παράδειγμα του κώδικα φόρμας.
Η εγκατάσταση αυτού του κώδικα στο HTML Bootstrap Tooltip είναι εύκολη. Όμως τα οφέλη είναι σημαντικά. Τώρα οι καταναλωτές γνωρίζουν όλα τα νέα της εταιρείας. Αυτό είναι ένα είδος δωρεάν διαφήμισης.
Κύρια λάθη κατά τη δημιουργία αναδυόμενων παραθύρωνσυμβουλές
Τι να κάνετε εάν το Bootstrap Tooltip δεν λειτουργεί; Το πρώτο και κύριο λάθος όπου το χαρακτηριστικό εργαλείο συμβουλής δεν θα λειτουργήσει είναι εάν η επεξήγηση εργαλείου δεν είναι ενεργοποιημένη. Για να το ενεργοποιήσετε, πρέπει να χρησιμοποιήσετε έναν ειδικό κωδικό.
Αυτή η μέθοδος σάς επιτρέπει να αρχικοποιήσετε απολύτως όλες τις συμβουλές εργαλείων σε μια ιστοσελίδα.
Το δεύτερο κοινό λάθος είναι ότι δεν υπάρχει jQuery στην κεφαλίδα.
Υπάρχει μια απαραίτητη προϋπόθεση για τη σωστή λειτουργία του συνδέσμου - πρέπει να καθοριστεί μια λειτουργία επεξεργασίας δεδομένων όπως "Java Script".
Ιδιότητες συμβουλής εργαλείου
Στον πυρήνα του, το στοιχείο Επεξήγηση εργαλείου έχει σχεδιαστεί για να εμφανίζει συμβουλές εργαλείων όταν μετακινείτε το δείκτη του ποντικιού σε ένα ή άλλο μέρος της σελίδας. Αλλά, εκτός από τη θέση της επεξήγησης εργαλείου στα δεξιά, αριστερά και πάνω με τη βοήθεια, η επεξήγηση εργαλείου έχει τις ακόλουθες ιδιότητες:
- Ενεργό. Η χρήση της αληθινής ιδιότητας στο Bootstrap Tooltip επιτρέπει την εμφάνιση των συμβουλών εργαλείων, ενώ η ρύθμιση της ίδιας ιδιότητας σε false σημαίνει ότι δεν μπορούν να εμφανιστούν επεξηγήσεις εργαλείου.
- AutoPopDelay είναι η ώρα κατά την οποία εμφανίζονται οι συμβουλές.
- AutoPopDelay. Αντιπροσωπεύει το χρονικό διάστημα που ο δείκτης του ποντικιού πρέπει να αιωρείται πάνω από ένα στοιχείο για να εμφανιστεί η συμβουλή εργαλείου.
- IsBaloon. Εάν η τιμή της επεξήγησης εργαλείου HTML Bootstrap είναι αληθής, η συμβουλή εργαλείου θα αλλάξει σε σύννεφο.
- ToolTipIcon. Αντιπροσωπεύει τον χαρακτήρα που εμφανίζεται στο παράθυρουποδείξεις.
Tooltipster
Για να δημιουργήσετε όμορφες συμβουλές εργαλείων, για παράδειγμα, σε έναν ιστότοπο που δημιουργήθηκε στο Wordpress, δεν είναι απαραίτητο να γνωρίζετε καλά τη γλώσσα των προγραμματιστών ιστού. Αρκεί να γνωρίζουμε για την ύπαρξη ενός τέτοιου πρόσθετου (επέκτασης) όπως το Tooltipster. Από το όνομα είναι σαφές ότι αυτό το πρόσθετο βασίζεται στο Tooltip και είναι εκπληκτικά παρόμοιο με αυτό στις ιδιότητες και τον σκοπό του. Σε τι χρησιμεύει αυτό το πρόσθετο; Σας επιτρέπει να δημιουργήσετε την απαραίτητη σήμανση HTML μέσα στην επεξήγηση εργαλείου.
Η εργασία της προσθήκης βασίζεται στην εισαγωγή συντομεύσεων στη σελίδα. Περιέχει όλα τα βασικά χαρακτηριστικά HTML Bootstrap Tooltip: περιεχόμενο (data-tooltip-content), τίτλο, θέση, έναυσμα κ.λπ. Αυτό σας επιτρέπει να αλλάξετε το θέμα, τη γραμματοσειρά, το μέγεθος της συμβουλής εργαλείου, το χρώμα, την εισαγωγή μιας εικόνας και πολλά άλλα.
