conclusione
Inserisci Button Basic dal pulsante “+” e applica la preimpostazione per creare un pulsante dall’aspetto gradevole in pochi clic. Basta impostare il testo, collegarlo e pubblicarlo per iniziare.
Passaggio 1: inserire il blocco
- Apri la schermata di modifica del post o della pagina
- Fai clic sul pulsante + nella posizione in cui desideri aggiungere un blocco.
- Inserisci "Button Basic" nel campo di ricerca
- Fare clic sul blocco Button Basic visualizzato per inserirlo
Punto: Puoi trovarlo anche cercando "zen" o "pulsante".
Passaggio 2: applicare la preimpostazione del design
- Seleziona il blocco inserito
- Fai clic sull'icona Preimpostazione nella barra degli strumenti nella parte superiore del blocco
- Seleziona il tuo design preferito dall'elenco preimpostato visualizzato
Suggerimenti per la regolazione: Utilizza le preimpostazioni come base e sentiti libero di regolare il colore e le dimensioni in un secondo momento. Ti consigliamo di scegliere prima un preset che sia vicino alla tua direzione generale.
Passaggio 3: modifica il testo
- Fare clic direttamente sul testo all'interno del blocco
- Inserisci il testo del pulsante che desideri visualizzare (ad esempio "Contattaci", "Inizia gratuitamente")
Nota: Il testo può essere modificato direttamente nell'editor. La dimensione e il peso del carattere possono essere regolati dal pannello "Impostazioni testo" nella barra laterale.
Passaggio 4: imposta il collegamento
- Con il blocco selezionato, fai clic sull'icona del collegamento sulla barra degli strumenti
- Inserisci l'URL di destinazione del collegamento
- Abilita "Apri in una nuova scheda" se necessario
- Confermare con il tasto Invio
Nota: è possibile passare da
a(link)/button(elemento pulsante)/div(elemento blocco) selezionando il tag sulla barra degli strumenti. Non ci sono problemi con i normali pulsanti di collegamento come con il taga.
Passaggio 5: regola i colori
- Apri ciascun pannello delle impostazioni nella barra laterale
- Per cambiare il colore dello sfondo Apri il pannello Impostazioni sfondo
- Per cambiare il colore del testo Apri il pannello Impostazioni testo
- Specificare il colore utilizzando il selettore colori o il codice colore
Suggerimento per la regolazione: garantire un buon rapporto di contrasto tra il colore dello sfondo del pulsante e il colore del testo migliora la visibilità e l'accessibilità.
Passaggio 6: verifica con l'anteprima
- Fai clic sul pulsante Anteprima nella parte superiore dell'editor
- Seleziona "Anteprima in una nuova scheda"
- Controlla la visibilità dei pulsanti sul front-end
- Controlla anche le modifiche al passaggio del mouse e la transizione alla destinazione del collegamento.
Nota: La visualizzazione nell'editor e la visualizzazione nel front-end sostanzialmente corrispondono, ma il tema CSS potrebbe influenzarlo. Si prega di eseguire la conferma finale sul front-end.
Passaggio 7: pubblica la tua pagina
- Una volta che sei soddisfatto dell'aspetto del pulsante e del collegamento, fai clic su Pubblica o Aggiorna nella parte superiore dell'editor.
- Accedi alla pagina front-end per la conferma finale
Se desideri effettuare impostazioni più dettagliate
Button Basic ha 18 tipi di pannelli di impostazione. Per il metodo di impostazione dettagliato, fare riferimento alla Guida alle impostazioni di base del pulsante.
Pannello delle impostazioni principali:
| pannello | Cosa puoi fare |
|---|---|
| impostazioni del testo | Regola la dimensione del carattere, lo spessore, l'interlinea e la spaziatura dei caratteri |
| Impostazioni del layout | Regolazione di larghezza, altezza e margini (margini e spaziatura interna) |
| impostazioni dello sfondo | Impostazioni colore/gradazione/immagine/motivo |
| Impostazioni del bordo | Regola la larghezza della linea, lo stile, il colore e gli angoli arrotondati |
| impostazioni dell'icona | Aggiunta di icone, impostazione di dimensioni e colore |
| Impostazioni dell'animazione | Animazione al passaggio del mouse o durante la visualizzazione (funzione Pro) |
prossimo passo
Se sei interessato alla versione Pro, puoi verificare il metodo di attivazione su [Attivazione versione Pro] (../pro-activation/).