Vai al contenuto principale

Come aggiungere funzionalità con scatole icona su WordPress

Divi: il tema WordPress più semplice da usare

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. [Consigliato]

Vorresti aggiungere una casella delle funzioni con un'icona sulla tua home page?

Questa funzione mostra informazioni importanti sui tuoi prodotti e servizi. È stato dimostrato che è una tecnica coinvolgente nella presentazione dei prodotti ai potenziali clienti.

In questo tutorial ti mostrerò come aggiungere questa funzione al tuo blog WordPress.

Ma prima, se non hai mai installato WordPress, scopri Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog 

Quindi torniamo al perché siamo qui.

aggiungere una casella delle funzioni con un'icona

Qual è la casella delle funzioni con le icone?

La maggior parte delle persone quando visita un sito Web non lo legge completamente. In quanto esseri umani, stiamo diventando scanner professionali.

Ciò significa che in qualità di proprietario di un'attività online, devi presentare le informazioni importanti in un modo abbastanza facile da analizzare e in modo coinvolgente.

Ecco perché la maggior parte dei siti Web aziendali di solito presenta un'immagine sul dispositivo di scorrimento con un pulsante di invito all'azione.

Subito sotto, puoi utilizzare una casella delle funzioni che ti consente di visualizzare informazioni importanti sui tuoi prodotti e servizi. Ciascun riquadro delle funzionalità può avere il proprio pulsante di invito all'azione per consentire agli utenti di saperne di più.

Ecco un esempio concreto:come aggiungere caselle funzionali icona wordpress

Come aggiungere una casella delle funzionalità alla home page del tuo blog WordPress

La prima cosa che devi fare è installare e attivare il plugin Colonne avanzata WP. Per maggiori dettagli consulta la nostra guida su Come installare o aggiungere un plug-in su WordPress

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Dopo aver attivato il plug-in, è necessario accedere a " Impostazioni> Colonne WP avanzate Per configurare il plugin.

Devi solo scorrere verso il basso fino all'opzione " Classe colonna E inserisci un testo come "mycolumns" (Torneremo). Non dimenticare di fare clic sul pulsante Salva per salvare le impostazioni.

colclass

Quindi tutto ciò che devi fare è aggiungere icone SVG alle finestre delle funzionalità. Per fare ciò, ti invito a installare e attivare il plugin WP SVG Icone.

Ora sei pronto per creare le tue caselle di funzionalità. Puoi iniziare modificando la pagina in cui desideri che appaia la casella delle funzionalità.

Noterai due nuove opzioni nell'editor dei post. Il primo ti consente di aggiungere un'icona e si trova sopra la barra degli strumenti dell'editor. Il secondo si trova sulla barra degli strumenti dell'editor visivo.

Se non riesci a vedere questa opzione, devi espandere i pulsanti della barra degli strumenti.

newbuttons

La prima cosa che devi fare è fare clic sul pulsante " Colonne avanzata WP". Verrà visualizzato un popup in cui è possibile fare clic "Vuoto" e seleziona il numero di colonne che desideri aggiungere.

Creazione-colonnePuoi fare clic su ciascuna area e aggiungere il testo che desideri. Se non aggiungi testo ora, non sarai in grado di vedere la differenza tra le colonne in seguito. Al termine, fai clic sul pulsante " Aggiungere colonne In fondo.

Noterai che le colonne sono state aggiunte nell'editor visivo. Il passaggio successivo consiste nell'aggiungere icone sopra il testo.

Prendi il cursore e aggiungilo all'inizio della casella di testo, quindi aggiungi una nuova interruzione di riga. Questo aggiungerà un nuovo spazio in cui puoi aggiungere l'icona. Ora fai clic sul pulsante " Aggiungi nuova icona", E vedrai una nuova finestra in cui puoi scegliere un'icona.

addingicons

Da questa finestra è possibile selezionare l'icona che si desidera aggiungere. Quindi fare clic sul pulsante "span" in modo che il contenuto venga aggiunto nell'elemento " ".

Infine, fai clic sul pulsante icona inserto", Noterai che l'icona SVG è stata aggiunta nell'editor. A seconda del nome dell'icona, lo shortcode avrà questo aspetto:

[wp-svg-icons icon = "rocket" wrap = "span"]

Ripeti il ​​processo ogni volta sulle altre scatole. Quando hai finito, non dimenticare di salvare le tue impostazioni.

Sei pronto per finire il lavoro, tuttavia se noterai che le icone sono molto piccole.

featureboxes-SmallIcons

Tutto quello che devi fare è aggiungere il codice CSS per correggere il problema. Ecco un esempio di codice CSS che puoi aggiungere al file di stile del tema figlio.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

span.wp-svg-rocket.rocket {font-size: 100px; Span.wp-svg-cloud.cloud} {font-size: 100px; } Span.wp-SVG-headphones.headphones {font-size: 100px; .mycolumns} {border: 1px #eee solido; min-height: 250px; padding-top: 20px importante; }

Ricorda che la classe dell'icona deve corrispondere a quella che hai aggiunto. In questo caso, ho usato le seguenti icone: razzo, nuvola, cuffie.

featureboxesfinal

Ricorda che abbiamo scritto un tutorial che te lo permetterà migliorare le tue abilità CSS. Puoi anche utilizzare una pagina del builder più avanzata come Visual Composer per cui abbiamo scritto a tutorial abbastanza dettagliato.

Questo è tutto per questo tutorial. Spero che ti aiuti a creare alcune buone funzionalità sul tuo blog WordPress. Sentiti libero di condividere questo tutorial con i tuoi amici. Colgo l'occasione per inviarti i migliori auguri da tutto il team di BlogPasCher.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
2 azioni
quota
Tweet
Enregistrer2