I tasti sono un ottimo modo per incoraggiare i visitatori a interagire con un sito. Nell'Editor Studio, puoi aggiungere tasti che mostrano il testo, un'icona o entrambi. Hai il pieno controllo del design e del layout per poter creare l'aspetto che desideri.
In questo articolo, scoprirai come:
Aggiungere un tasto
Quando aggiungi un nuovo tasto, puoi scegliere un design tra due categorie:
- Tasti base: questi tasti mostrano solo il testo e hanno un aspetto più "minimalista"
- Tasti personalizzati: questi tasti possono mostrare sia testo che icone e offrono opzioni di personalizzazione avanzate (es. sfondi delle immagini, sfumature di colore e altro)
Scopri di più sui tasti base e personalizzati
Ci sono diverse differenze importanti tra i tasti base e quelli personalizzati:
Funzionalità supportate
A differenza dei tasti base, i tasti personalizzati non supportano le seguenti azioni:
- Copiare il design del tasto su un altro elemento
- Ricevere suggerimenti sui contenuti per il testo del tasto
Comportamento responsivo
In schermi di dimensioni inferiori, i due tasti mostrano un comportamento responsivo diverso.
I tasti base racchiudono automaticamente il testo:
Mentre i Tasti personalizzati mostrano i puntini di sospensione:
Per aggiungere un tasto:
- Clicca su Aggiungi elementi
sul lato sinistro dell'Editor - Clicca su Tasti
- Scorri i design e trascina sulla pagina un tasto base o un tasto personalizzato
Personalizzare i tasti base
Dopo aver aggiunto un tasto base, modificane il testo e scegli a cosa si collega. Una volta impostato, puoi iniziare a personalizzare il design: seleziona un colore di riempimento diverso, aggiungi un'ombra e modifica altre impostazioni come la spaziatura e la formattazione del testo.
Per personalizzare un tasto base:
- Seleziona il tasto pertinente
- Scegli cosa vuoi personalizzare:
- Clicca su Modifica testo
- Inserisci il nuovo testo sotto Testo
Suggerimento: i tasti base non possono mostrare un'icona, ma puoi inserire simboli (ad esempio X, +, >) per creare un effetto simile.
I tasti possono portare ad altre parti del tuo sito (ad esempio a pagine, ancore e finestre a comparsa), pagine web esterne e possono persino innescare azioni, come l'invio di un'email o una telefonata al cliente.
- Clicca sull'icona Link
- Seleziona un tipo di link a sinistra
- Aggiungi le informazioni pertinenti sul link
- Clicca su Fatto
Personalizza il design del tasto
Puoi personalizzare il design del tasto scegliendo tra due stati diversi: Regolare o Passaggio mouse. Modifica impostazioni come il colore di sfondo, il bordo o la forma degli angoli del tasto.
- Clicca sulla freccia Apri Ispezione
in alto a destra dell'Editor - Scorri verso il basso fino a Design
- Seleziona lo stato che desideri personalizzare: Regolare o Passaggio mouse
- Personalizza il design del tasto utilizzando le opzioni disponibili:
- Colore e opacità: modifica il colore di sfondo del tasto e regolane l'opacità
- Bordi: regola la larghezza e il colore dei bordi del tasto
- Angoli: regola il raggio degli angoli del tasto (in px) per renderli più arrotondati o squadrati
- Ombra: aggiungi e personalizza un effetto ombra sul tasto
- Testo: modifica la formattazione del testo del tasto
- Spaziatura: modifica la spaziatura tra il testo e i bordi del tasto
Personalizzare i tasti personalizzati
I tasti personalizzati offrono moltissime opzioni di personalizzazione che ti consentono di progettarli nei minimi dettagli. Modifica il testo e l'icona in base all'azione desiderata, scegli come disporre i due elementi, imposta un gradiente o un'immagine come sfondo e molto altro ancora.
Per personalizzare un tasto personalizzato:
- Seleziona il tasto pertinente
- Scegli cosa vuoi personalizzare:
Modifica il testo o l'icona
- Clicca su Modifica testo e icona
- A seconda delle tue esigenze, procedi come segue:
- Scegli un'opzione sotto Scegli cosa mostrare:
- Testo e icona
- Solo testo
- Solo icona
- Modifica il testo del tasto sotto Testo
- Clicca su Sostituisci icona
per scegliere un'icona diversa per il tasto
I tasti possono portare ad altre parti del sito (ad esempio a pagine, ancore e finestre a comparsa), pagine web esterne e possono persino innescare azioni, come l'invio di un'email o una telefonata al cliente.
- Clicca sull'icona Link
- Seleziona un tipo di link a sinistra
- Aggiungi le informazioni pertinenti sul link
- Clicca su Fatto
Personalizza il design del tasto
Puoi personalizzare il design del tasto scegliendo tra tre stati diversi: Regolare, Passaggio mouse e Disattivato. Modifica impostazioni come il colore di sfondo, il bordo o la forma degli angoli del tasto.
- Clicca sulla freccia Apri Ispezione in alto a destra dell'Editor
- Scorri verso il basso fino a Design
- Seleziona lo stato pertinente: Regolare, Passaggio mouse o Disattivato
- Personalizza il tuo tasto utilizzando le opzioni disponibili:
- Riempimenti sfondo: scegli un colore, un gradiente o un'immagine per lo sfondo del tasto
- Testo: modifica il carattere, la formattazione e la spaziatura del testo del tasto. Puoi anche cliccare su Ombra per aggiungere un'ombra al testo
- Bordi: scegli un colore/sfumatura per i bordi e imposta lo spessore in px. Puoi applicare lo stesso design a tutti i lati o cliccare sull'icona Sblocca
per personalizzarli separatamente - Angoli: rendi gli angoli più arrotondati o squadrati modificandone il raggio in px. Puoi impostare lo stesso raggio per tutti gli angoli o cliccare sull'icona Sblocca per personalizzarli separatamente
- Ombra: aggiungi ombra interna/esterna o più strati di ombra e scegli il colore, l'angolo, la distanza, le dimensioni, ecc.
- Layout: scegli cosa mostrare sul tuo tasto (testo, icona o entrambi) e la disposizione o allineamento di questi elementi
- Icona: modifica il colore, le dimensioni e l'angolo dell'icona mostrata sul tasto
Suggerimento:
Aggiungi un senso di profondità allo sfondo del tuo tasto applicando più livelli con diversi gradi di opacità.
Modifica il layout del tasto
Modifica l'allineamento, la posizione e la spaziatura del tasto in modo che il testo o l'icona appaiano esattamente come desideri.
- Clicca sull'icona Layout
- Modifica una delle seguenti impostazioni:
- Scegli cosa mostrare: decidi cosa mostrare sul tuo tasto: Testo e icona, Solo testo, Solo icona o Nulla
- Posizione icona: quando scegli di mostrare sia il testo che un'icona, puoi decidere come posizionarli: uno accanto all'altro o uno sotto l'altro
- La spaziatura tra testo e icona: quando scegli di mostrare sia il testo che un'icona, puoi trascinare il cursore per impostare la spaziatura tra loro (in px)
- Allineamento: allinea il testo e l'icona a sinistra, al centro o a destra del tasto. Puoi anche allinearli a entrambi i margini del tasto, cliccando su Giustifica
