Come rendere il tuo sito attraente per i visitatori? Questa domanda preoccupa quasi tutti i possessori di risorse Internet: commercianti, blogger, titolari di piccole e grandi imprese, viaggiatori e semplicemente creativi che hanno qualcosa da raccontare al mondo.
Perché un sito web dovrebbe essere bello e funzionale?
Il numero di visite dipende dal tema del sito e dal suo pubblico di destinazione, dall'interesse delle persone per un particolare prodotto, dall'investimento, dalla promozione, dai contenuti e da molti altri fattori. Ma non si può negare che il sito sia "accolto dai vestiti". È la prima e principale pagina della risorsa che ne è il volto, il biglietto da visita, attraverso il quale il visitatore deve capire se vuole dedicare il suo tempo a un'ulteriore visualizzazione del contenuto.
E non c'è spazio per errori! Secondo la ricerca di una delle università tecniche negli Stati Uniti, il visitatore ottiene la prima impressione del sito in meno di un secondo. In media, una persona "scansiona" un sito in 3 secondi. Alla velocità della luce, giusto?!
Fino al 70% del successo della risorsa dipende dall'aspetto della pagina principale. La prima cosa che la gente nota èlogo, ma il secondo è la navigazione. E se tutto è più o meno chiaro con il logo, allora vale la pena spaccare la testa sulla navigazione, sui menu e sulla comodità dell'ergonomia del sito. Sorge una domanda ragionevole: "Come decorare il tuo sito, renderlo il più funzionale e conveniente possibile, ma allo stesso tempo bello?" Ci sono molte idee insolite da offrire, ma una delle più interessanti sono i suggerimenti.
Cosa sono i suggerimenti? Oltre ad essere un ottimo meccanismo per migliorare la funzionalità del sito, i tooltip sono uno strumento che consente all'utente di vedere una spiegazione per una particolare immagine quando si passa sopra un'icona, una parola o un'immagine.
Strumenti per lavorare con le descrizioni comandi
Bootstrap è lo strumento migliore per creare descrizioni comandi. È un set di modelli di facile apprendimento per la creazione di app e siti Web scritti in HTML, CSS, Sass e JavaScript.
Per essere precisi, i tooltip utilizzano uno degli elementi grafici del template Bootstrap - Tooltip.
Il framework Bootstrap è stato creato per "Twitter" ed era originariamente chiamato "Twitter Blueprint". Dopo alcune modifiche nel 2012, ha ricevuto una griglia a 12 colonne, è diventato adattivo e ha acquisito il nome familiare - Tooltip. Una descrizione comando è un elemento che compare quando passi il mouse sopra un elemento specifico sullo schermo monitor.
Creazione di un suggerimento
Puoi creare una descrizione comando Bootstrap usando gli attributidati, nonché attivando gli elementi "Java Script". Esistono due modi principali per creare una descrizione comando Bootstrap HTML. L'essenza del primo è applicare l'attributo e il titolo dell'attributo (titolo), che conterrà il testo del suggerimento. Il suggerimento apparirà in alto (impostazione predefinita). Vale la pena ricordare che la descrizione comando deve essere inizializzata, poiché l'inizializzazione automatica è stata deprecata nel "Bootstrap di Twitter" per motivi di prestazioni.
Per inizializzare i tooltip, viene utilizzato uno speciale JavaScript, in cui il metodo del tooltip viene ripristinato per tutti gli elementi che hanno un attributo. L'essenza del secondo metodo è attivare un tooltip utilizzando il codice "JavaScript" con la partecipazione della libreria jQuery scrivendo una classe tool che includa un tooltip. Il metodo è simile al primo, ad eccezione del metodo di selezione degli elementi. Puoi abilitare i suggerimenti in "Java Script" nel modo mostrato di seguito.
Esempio di tooltip di Bootstrap
Ci sono quattro opzioni principali per posizionare i suggerimenti: sui bordi sinistro e destro e sopra e sotto l'elemento.
Suggerimento dall' alto
Suggerimento giusto
Suggerimento in fondo
Suggerimento a sinistra
Utilizzo dei suggerimenti
Ci sono molti usi per Bootstrap Tooltip. È possibile inserire suggerimenti in modo che l'utente possa comprendere la traduzione di testo da una lingua straniera nel testo. Le descrizioni comandi possono anche essere utilizzate come strumento per aiutare l'utente a comprendere il significato dei pulsanti sul pannello quando si passa sopra di essi. I modelli Bootstrap Tooltip vengono spesso utilizzati sui siti Web di varie organizzazioni per creare un abbonamento alle notizie aziendali. Ciò mantiene i clienti aggiornati e consente inoltre ai visitatori di ricevere nuove informazioni, come tariffe di sconto, offerte, modifiche all'interno dell'azienda.
Considera un esempio in cui un utente deve inserire il proprio indirizzo e-mail per iscriversi a una newsletter. Il compito di garantire che il pubblico del cliente si iscriva alle notizie si ottiene più facilmente utilizzando HTML5 e l'attributo richiesto. Il suggerimento in questo caso è necessario per consentire all'utente di comprendere la sequenza delle azioni. Ad esempio, dopo aver inserito l'indirizzo e-mail, ho spuntato la casella: "Accetto di ricevere notizie aziendali sul mio indirizzo e-mail". Di seguito è riportato un esempio del codice del modulo.
Installare questo codice nel tooltip HTML Bootstrap è facile. Ma i vantaggi sono notevoli. Ora i consumatori conoscono tutte le novità dell'azienda. Questa è una sorta di pubblicità gratuita.
Errori principali durante la creazione dei popupsuggerimenti
Cosa fare se Bootstrap Tooltip non funziona? Il primo e principale errore in cui l'attributo tooltip non funziona è se il tooltip non è abilitato. Per attivarlo è necessario utilizzare un codice speciale.
Questo metodo ti consente di inizializzare assolutamente tutti i suggerimenti su una pagina web.
Il secondo errore comune è non avere jQuery nell'intestazione.
C'è una condizione necessaria per il corretto funzionamento del collegamento - è necessario specificare una funzione di elaborazione dati come "Java Script".
Proprietà descrizione comando
In sostanza, il componente Tooltip è progettato per visualizzare i suggerimenti quando si sposta il puntatore del mouse su una o un' altra parte della pagina. Ma, oltre alla posizione del suggerimento a destra, a sinistra e in alto con l'aiuto, il suggerimento ha le seguenti proprietà:
- Attivo. L'utilizzo della proprietà true nella descrizione comando Bootstrap consente di visualizzare le descrizioni comandi, mentre l'impostazione della stessa proprietà su false significa che non è possibile visualizzare le descrizioni comandi.
- AutoPopDelay è l'ora in cui vengono visualizzati i suggerimenti.
- AutoPopDelay. Rappresenta la quantità di tempo in cui il cursore del mouse deve passare sopra un elemento per visualizzare la descrizione comando.
- Is Baloon. Se il valore della descrizione comando HTML Bootstrap Tooltip è true, la descrizione comando cambierà in un cloud.
- ToolTipIcon. Rappresenta il carattere visualizzato nella finestrasuggerimenti.
Tooltister
Per creare bellissimi tooltip, ad esempio su un sito creato su Wordpress, non è necessario conoscere a fondo il linguaggio degli sviluppatori web. È sufficiente conoscere l'esistenza di un tale plugin (estensione) come Tooltipster. Dal nome è chiaro che questo plugin è basato su Tooltip ed è sorprendentemente simile ad esso nelle sue proprietà e scopo. A cosa serve questo plugin? Ti permette di creare il markup HTML necessario all'interno del tooltip.
Il lavoro del plugin si basa sull'inserimento di scorciatoie nella pagina. Contiene tutti gli attributi di base di Bootstrap Tooltip HTML: contenuto (data-tooltip-content), titolo, posizione, trigger, ecc. Ciò consente di modificare il tema, il carattere, la dimensione della descrizione comando, il colore, inserire un'immagine e altro ancora.
