Con questo tutorial ti spiego come creare un pulsante in WordPress senza plugin in maniera semplice, veloce e senza rallentare il tuo sito!
Al giorno d’oggi i pulsanti in WordPress sono molto importanti per attirare con una semplice call-to-action i tuoi utenti.
Esistono molti plugin o script in commercio, sia a pagamento che gratuiti, in grado di eseguire questo scopo in modo molto semplice e veloce.
Se ti piacciono i nostri articoli iscriviti alla newsletter!
Ogni settimana le ultime novità direttamente nella tua casella di posta!
Grazie per esserti iscritto!
Qualcosa è andato storto!
Il problema è che, molte volte, questi strumenti vanno ad appesantire il nostro sito web, rallentandone la velocità di caricamento.
A tal proposito, se vuoi aumentare la velocità del tuo sito web in modo semplice e veloce, ti consiglio di leggere la nostra guida dedicata.
Con questa guida invece, ti spiego come creare un pulsante semplice ma accattivante in WordPress senza bisogno di installare nessun plugin o script!
Entra nel nostro canale Telegram di offerte!
Creare un pulsante in WordPress senza plugin!
Ad onor del vero, con l’avvento del nuovo editor Gutenberg, esiste già in WordPress la possibilità di inserire un pulsante in pochi e semplici passaggi, ma il risultato e le opzioni di personalizzazione sono davvero poche.
Vediamo dunque assieme come creare un pulsante in WordPress senza plugin e, sopratutto, senza essere dei geni in informatica, la guida è rivolta davvero a tutti!
Iniziamo con il copiare ed incollare il seguente codice CSS di personalizzazione andando in Aspetto -> Personalizza -> CSS aggiuntivo:
.myButton {
background-color:#3366ff!important;
border-radius:12px!important;
display:inline-block!important;
cursor:pointer!important;
color:#ffffff!important;
font-family:Arial!important;
font-size:24px!important;
font-weight:normal!important;
padding:10px 8px!important;
text-decoration:none!important;
}
.myButton:hover {
background-color:#5C85FF!important;
color:#ffffff!important;
}
.myButton:active {
position:relative!important;
top:1px!important;
}
Come puoi vedere, si possono personalizzare tantissimi parametri come ad esempio il colore del testo, quello di sfondo, il tipo di carattere, il colore di sfondo al passaggio del mouse, gli angoli arrotondati e così via…
Adesso non ti resta che cliccare sul pulsante “Pubblica” in alto a destra per salvare il lavoro e la prima fase del processo è ultimata, semplice vero?
Ora vediamo come inserire manualmente il pulsante vero e proprio nella tua pagina o articolo di WordPress, continua a leggere!
Inserimento del pulsante nell’articolo
L’ultima fase riguarda l’inserimento vero e proprio del tuo pulsante all’interno del tuo articolo o della tua pagina in WordPress.
Apri l’articolo o la pagina da pubblicare e localizza il punto in cui vuoi inserire il tuo pulsante, quindi cambia l’editor da “Visuale” a “Testo“.
Copia ed incolla il seguente codice:
<p style=”text-align: center;”><a class=”myButton” href=”https://t.me/pcusbit”>Entra nel nostro canale Telegram di offerte!</a></p>
Come vedi il pulsante va a richiamare il codice CSS tramite l’attributo “myButton“, inoltre, per centrare il pulsante, abbiamo inserito “<p style=”text-align: center;”>
Puoi cambiare la posizione del tuo pulsante inserendo, al posto di “center“, “right” oppure “left” a seconda delle tue esigenze.
Inoltre, nel nostro caso, il pulsante va a collegare la nostra pagina Telegram tramite l’url “https://t.me/pcusbit“, anche questa la puoi modificare a tuo piacimento.
L’ultima voce è relativa al testo vero e propio del nostro pulsante, ecco quindi il risultato finale:
Il vantaggio di questo metodo è che, se vuoi modificare l’aspetto del tuo pulsante, non dovrai fare altro che editare il codice CSS, senza intervenire su tutti i singoli articoli o pagine.
Tutto molto semplice vero? In pochissimi passaggi e senza l’ausilio di plugin o pesanti script, hai creato il tuo primo pulsante in WordPress!
La guida per creare un pulsante in WordPress senza plugin e senza nessuno script è terminata, alla prossima!
Entra nel nostro canale Telegram di offerte!
Per qualsiasi informazione puoi contattarci tramite la nostra pagina di supporto