Vai al contenuto principale

Come aggiungere CSS personalizzati a Elementor gratuito

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]

Recentemente uno dei nostri lettori che non aveva la versione Pro di Elementor ci ha sfidato su come aggiungere CSS personalizzati al suo sito web.

Dal momento che il problema è un po' più complesso, abbiamo pensato che diversi utenti potrebbero trovarsi di fronte a questo problema. Così abbiamo deciso di fornire un articolo dettagliato su come arrivarci.

In questo articolo, ti mostreremo come aggiungere facilmente CSS personalizzati a una pagina o a un sito Web di Elementor.

I tre modi per aggiungere CSS personalizzati a una pagina o a un sito Web di Elementor sono i seguenti:

  • Aggiungi codice CSS tramite l'elemento HTML.
  • Tramite il plugin Frammento di codice.
  • Utilizzo del personalizzatore di temi di Elementor

Metodo 1: aggiungi codice CSS dall'elemento HTML di Elementor

Usa questo metodo se vuoi aggiungere CSS solo a una singola pagina.

Passaggio 1: trascina e rilascia l'elemento HTML di Elementor

Puoi posizionare questo elemento HTML in qualsiasi punto della pagina e funzionerà perfettamente.

Passaggio 2: fare clic sull'icona Modifica HTML

Clicca sull'icona Modifica html a destra dell'elemento HTML di Elementor. Facendo clic su di esso verrà visualizzata una casella degli strumenti di modifica HTML sul lato sinistro dello schermo.

Passaggio 3: aggiungi il tuo codice CSS

  1. Fare clic sulla scheda Contenuto e apri l'elenco a discesa Codice HTML.
  2. Inserisci il tuo codice CSS nel fari.

Metodo 2: CSS personalizzato per Elementor tramite il plug-in Code Snippets

Vantaggi dell'utilizzo del plug-in Code Snippets:

  • Se desideri modificare o aggiornare il tuo tema WordPress, il CSS verrà sempre applicato.
  • Questo è il modo più conveniente ed efficiente per aggiungere codice CSS perché puoi abilitare o disabilitare il codice CSS come i plugin.

Passaggio 1: apri il menu delle estensioni sulla dashboard

Passaggio 2: aggiungi un nuovo plugin

Clicca sul bottone aggiungere »Per accedere alla pagina per l'aggiunta di nuovi plugin.

  1. Cerca il plugin " Frammenti di codice ".
  2. Installalo facendo clic sul pulsante installare ora una volta che i risultati della ricerca sono positivi.

Passaggio 3: attiva il plugin

CSS personalizzato su Elementor

Clicca sul bottone attivare »Una volta completata l'installazione per attivare il plugin Frammenti di codice.

Passaggio 4: aprire la pagina del plug-in e aggiungere uno snippet di codice

  1. Apri il menu estratti dalla tua dashboard
  2. Fare clic sul pulsante nuovo per aggiungere un nuovo frammento di codice

Passaggio 5: crea uno snippet e attivalo

  1. Dai un nome al tuo frammento di codice.
  2. All'interno del tag, scrivi il tuo codice. Questo codice è disponibile di seguito per la copia.
  3. Clicca sul bottone Salva modifiche Per salvare lo snippet di codice.
  4. Dopo aver salvato il CSS, fare clic su " attivare Per attivare il codice CSS.

Copia il codice

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]

 
add_action ('wp_head', function () {?>

//VOTRE CODE ICI


Metodo 3: utilizzare il personalizzatore del tema Elementor

Nota: Fai attenzione prima di utilizzare questo metodo perché se cambi il tema perderai questo CSS personalizzato.

Passaggio 1: apri il personalizzatore del tema

CSS personalizzato su Elementor

Vai al tuo sito web e fai clic sull'opzione di personalizzazione nella barra di navigazione in alto. Si aprirà una finestra di personalizzazione del tema.

Passaggio 2: fare clic sulla scheda CSS aggiuntiva


Questo aprirà la pagina di inserimento CSS.

Passaggio 3: aggiungi il tuo codice CSS

CSS personalizzato su Elementor

Buona ! Ora sai come aggiungere facilmente CSS personalizzati a una pagina o a un sito Web di Elementor. Ciò renderà più flessibile la progettazione di pagine Web uniche in Elementor Free.

Ottieni Elementor Pro ora!

Scopri anche alcuni plugin WordPress premium  

Puoi utilizzare altri plugin di WordPress per dare un aspetto moderno e ottimizzare la presa del tuo blog o sito Web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. FileBird

Filebird

Hai mai faticato a gestire migliaia di file di immagini, video o documenti che hai caricato sul tuo FTP di WordPress? sì o no, qualunque cosa, l'importante è sapere che il plugin FileBird di WordPress ti aiuterà a gestire i tuoi file multimediali con facilità e porterà più potenza alla tua libreria.

La sua interfaccia utente intuitiva e il menu di scelta rapida consentono agli utenti di trascinare e rilasciare i file nelle cartelle o di disporre dei diritti necessari per creare, rinominare o eliminare rapidamente le cartelle nello stesso modo in cui lo si fa sul proprio computer.

Con questo plugin in mano, i tuoi file multimediali saranno organizzati sistematicamente e potrai facilmente selezionare un'immagine da inserire in una pagina o pubblicarla. Inoltre, questo plugin è completamente compatibile con i plugin più popolari, in particolare con WooCommercee supporta anche un gran numero di lingue.

Per ulteriori informazioni, visitare il sito Come gestire i file e le cartelle di WordPress

Quindi, se vuoi dare una spinta al gestire la tua libreria multimediale, il plugin FileBird WordPress potrebbe essere la tua arma segreta.

DownloadDemo | Web hosting

2. Le ultime categorie espandibili di WooCommerce

Ultimate woocommerce categorie espandibili

Questo plugin WordPress ti consente di modificare facilmente lunghi elenchi di fastidiose categorie WooCommerce e sostituirli con diversi livelli di sotto-elementi in un menu a fisarmonica.

Le sue funzionalità principali sono: la possibilità di attivarlo e infine che funziona automaticamente (nessun parametro richiesto!), Il supporto per più livelli di categorie (categorie, sottocategorie, ecc.), L'evidenziazione di categoria attiva, apertura di tutte le categorie padre se la categoria corrente è all'interno, compatibilità con qualsiasi Tema WooCommerce, sensibile al desiderio, aggiornamenti gratuiti e un supporto clienti molto attivo.

Download | Demo | Web hosting

3. WavePlayer

Come puoi intuire dal nome che porta, WavePlayer è un plug-in per lettore audio che prende la forma d'onda del file audio in riproduzione. Con questo plug-in, sarai in grado di ospitare tracce o semplicemente integrarlo con altri servizi di hosting cloud, come SoundCloud.

I plugin wordpress premium di Waveplayer aggiungono un lettore audio

Può anche essere utilizzato per scopi di podcasting e offre altre funzionalità come: supporto HTML5, layout reattivo, integrazione con WooCommerce, ecc ...

Sarai anche in grado di creare visivamente una playlist prima di pubblicarla. Un'altra caratteristica essenziale è la sua velocità ed efficienza.

Download | Demo | Web hosting

Risorse raccomandate

Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.

Conclusione

Ecco ! Questo è tutto per questo tutorial, speriamo che ti aiuti ad aggiungere CSS personalizzati a Elementor gratuitamente. Non esitare a condividi con i tuoi amici sui tuoi social network preferiti

Tuttavia, sarai anche in grado di consultare il nostro 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.

Se hai suggerimenti o commenti, lasciali nella nostra sezione commentaires.

...  

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
0 azioni
quota
Tweet
Enregistrer