In questo nuovo tutorial, ti mostreremo come creare un pulsante multilinea con l'icona all'interno Elementor.
Va notato che non sarà necessario alcun plug-in aggiuntivo per farlo. La versione Elementor Pro ti darà tutto ciò di cui hai bisogno per arrivarci
Per avere un'idea di cosa faremo in questo tutorial, il seguente video vi mostrerà un'anteprima di cosa faremo insieme.
Ora mettiamoci al lavoro.
Scopri anche Come creare una pagina personalizzata per WooCommerce in Essomentore
Creiamo una nuova sezione scegliendo quella con una colonna.
Quindi a nel pannello laterale, selezioniamo Altezza minima per Hauteur e Altezza minima clicchiamo su VH e imposta il cursore su 100.
Ora trascina il Widget pulsante nella nostra area di lavoro
Nella scheda Contenuto dalla barra laterale Cambiamo campo Testo entrando Scarica su App Storepoi su allineamento clicchiamo su Centro
Clicca quindi sul pulsante della libreria icone, digita apple nella barra di ricerca, seleziona l'icona che ci interessa e clicca sul pulsante inserisci.
Tornando alla barra laterale, cambiamo la spaziatura delle icone in 14
Leggi anche: Come creare una carta effetto da un portfolio in Elementor
Nella scheda Style, modifichiamo il colore di sfondo pulsante acceso Nero
Cambiamo taille tipografia attiva 25
Sur raggio di confine, prendiamo 20 per tutti i raggi del bordo. Per il margini interni, prendiamo 14-36-14-36 per i margini Su, Destra, Giù e Sinistra.
Vedi anche: Come modificare l'immagine con un semplice clic in Elementor
Ora andremo alla scheda Contenuto e trasformiamo il testo del pulsante in due righe.
Per fare ciò, copia e incolla il seguente codice nel campo di testo:
<span class="top-small-text">TEXTE DE PREMIERE LIGNE</span> <br> TEXTE DE DEUXIEME LIGNE
Quindi cambiamo il testo TESTO DELLA PRIMA LINEA in Scarica su e il testo di TESTO DI SECONDA RIGA in App Store
Ora dobbiamo avere un maggiore controllo sulla prima e sulla seconda riga
Per fare ciò, andiamo alla scheda avanzato poi nella sezione CSS personalizzato, copia e incolla il seguente codice:
selector .elementor-button-icon{
font-size: 62px;
}
selector .top-small-text{
font-size: 16px;
color: #ffffff;
}
NOTA: Se non si dispone di questa sezione, è necessario eseguire rapidamente l'aggiornamento alla versione Pro.
Quindi per personalizzare a sufficienza il tuo pulsante puoi ad esempio ingrandire l'icona modificando il valore di font-size
dalla sezione del codice:
selector .elementor-button-icon{
font-size: 62px;
}
Leggi anche: Come esportare e importare i modelli Elementor
Per personalizzare il colore della prima riga basta modificare il valore di color
e se vuoi cambiare il valore della dimensione del carattere devi cambiare il font-size
dalla seguente sezione di codice:
selector .top-small-text{
font-size: 16px;
color: #ffffff;
}
E qui hai appena creato un pulsante multilinea con l'icona. Puoi visualizzarlo in anteprima.
Ottieni subito Elementor Pro!!!
Conclusione
Ecco ! Questo è tutto per questo articolo che mostra come creare un pulsante multilinea con icona in Elementor. Se hai dubbi su come arrivarci, ci piacerebbe avere tue notizie nel commentaires.
Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...