Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare Facile e gratuito qualsiasi sito web o blog design con un aspetto professionale. Smetti di pagare molto per un sito web che puoi fare da solo.

In questo nuovo tutorial, ti mostreremo come creare un pulsante multilinea con un'icona in Elementor.

Va notato che non avrai bisogno di alcun plug-in aggiuntivo per farlo. La versione Elementor Pro ti darà tutto ciò di cui hai bisogno per realizzarlo

Per avere un'idea di cosa faremo in questo tutorial, il seguente video vi mostrerà un'anteprima di cosa faremo insieme.

Elementor: come creare un pulsante multilinea con l'icona

Ora mettiamoci al lavoro.

Scopri anche Come creare una pagina personalizzata per WooCommerce in Essomentore

Creiamo una nuova sezione scegliendo quella con una colonna.

Elementor: come creare un pulsante multilinea con l'icona

Quindi a nel pannello laterale, selezioniamo Altezza minima per Hauteur e Altezza minima clicchiamo su VH e imposta il cursore su 100.

Elementor: come creare un pulsante multilinea con l'icona

Ora trascina il Widget pulsante nella nostra area di lavoro

Elementor: come creare un pulsante multilinea con l'icona

Nella scheda Contenuto della barra laterale Modifichiamo il campo Testo entrando Scarica su App Storepoi su allineamento clicchiamo su Centro

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62.

Elementor: come creare un pulsante multilinea con l'icona

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

Elementor: come creare un pulsante multilinea con l'icona

Nella scheda Style, modifichiamo il colore di sfondo pulsante acceso Nero

Elementor: come creare un pulsante multilinea con l'icona

Cambiamo taille tipografia attiva 25

Elementor: come creare un pulsante multilinea con l'icona

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

Elementor: come creare un pulsante multilinea con l'icona

Ora andremo alla scheda Contenuto e trasformeremo 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

Elementor: come creare un pulsante multilinea con l'icona

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;
}
Elementor: come creare un pulsante multilinea con l'icona

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.

Elementor: come creare un pulsante multilinea con l'icona

Ottieni subito Elementor Pro!!!

Conclusione

Ecco ! Questo è tutto per questo articolo che ti mostra come creare un pulsante multilinea con un'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.

...

0 azioni
quota
Tweet
Enregistrer