Scegli stili di pulsante che guidano i visitatori.
Decidi tu quanto è forte ogni pulsante. Un pulsante pieno indica l’azione che vuoi di più, e un pulsante con solo contorno accanto offre l’alternativa senza competere. Questa pagina mostra come dare stile a una coppia del genere e quale impostazione cambia cosa. Per aggiungere un pulsante e impostarne il link, vedi Aggiungere un Button.
Il video segue i passaggi sotto: rende Apply now il pulsante principale e aggiunge un secondo pulsante con solo contorno.
Dai stile a un pulsante principale e a un secondo pulsante
Parti da un pulsante nella pagina, come Apply now.
- Passa sopra il pulsante con il mouse e apri More > Settings.
- Imposta Type a Primary.
- Imposta Size a Large e fai clic su Save.
- Passa di nuovo sopra il pulsante e apri More > Clone. La copia compare subito sotto l’originale.
- Apri More > Settings sulla copia. Cambia il suo Title, ad esempio in
Download brochure, e il suo Link. - Attiva Outline style e fai clic su Save.
- Fai clic su Save sulla barra.
Scegli uno stile per ogni azione
| Azione | Stile | Esempio |
|---|---|---|
| L’azione che vuoi di più | Pieno Primary | Apply now |
| Un’alternativa | Outline style nello stesso Type | Download brochure |
| Un’azione minore | Link, che sembra un link di testo | Read the terms |
| Un avviso o un passaggio finale | Danger o Warning | Cancel my booking |
Usa un pulsante pieno per sezione, così i visitatori vedono subito dove fare clic. Scrivi etichette che dicono cosa succede: "Get started" invece di "Click here", "Send message" invece di "Submit".
Cosa vedrai
Due pulsanti grandi si impilano nella colonna: uno pieno con il colore primario del tuo tema e uno con solo contorno, bordo e testo dello stesso colore. Quello pieno attira prima l’occhio. I link non si aprono mentre modifichi. Per testarli, salva la pagina, apri il menu vista (l’icona occhio) e scegli Preview.
Impostazioni
| Impostazione | Cosa fa | Predefinito |
|---|---|---|
| Type | Lo stile di colore: Primary, Secondary, Success, Info, Warning, Danger, Link, Light o Dark. I colori vengono dal tuo tema. | Primary |
| Outline style | Un bordo e un testo colorati senza riempimento | Spento |
| Size | Normal, Large o Small | Normal |
| Block button | Allunga il pulsante per tutta la larghezza della sua colonna | Spento |
| Link target | Same window o New window. Compare quando Link ha un valore. | Same window |
Per i themers: ogni Type aggiunge la classe Bootstrap btn-<type>, come btn-primary. Con Outline style attivo, diventa btn-outline-<type>, tranne per Link, che resta sempre btn-link. Large aggiunge btn-lg, Small aggiunge btn-sm e Block button aggiunge btn-block.
Se non vedi lo stile
- Il pulsante con solo contorno non mostra bordi. Type è Link, che sembra sempre un link di testo, quindi Outline style non ha effetto. Scegli un altro Type per un pulsante con solo contorno.
- Il pulsante quasi sparisce. Light è vicino al bianco, quindi svanisce in una sezione bianca. Scegli un Type più scuro, oppure dai alla sezione un colore di sfondo.
- Il link si apre nella stessa scheda. Link target è Same window, e compare solo quando Link ha un valore. Compila prima Link, poi scegli New window.
Prossimi passi
- Aggiungere un Button: ogni impostazione dei pulsanti, con video.
- Effetti hover: scurisci un pulsante o aggiungi un’ombra quando il puntatore lo raggiunge.
- Colore e branding: mantieni i colori dei pulsanti in linea con il tuo brand.