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
- Fare clic sulla scheda Contenuto e apri l'elenco a discesa Codice HTML.
- 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.
- Cerca il plugin " Frammenti di codice ".
- Installalo facendo clic sul pulsante installare ora una volta che i risultati della ricerca sono positivi.
Passaggio 3: attiva il plugin
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
- Apri il menu estratti dalla tua dashboard
- Fare clic sul pulsante nuovo per aggiungere un nuovo frammento di codice
Passaggio 5: crea uno snippet e attivalo
- Dai un nome al tuo frammento di codice.
- All'interno del tag, scrivi il tuo codice. Questo codice è disponibile di seguito per la copia.
- Clicca sul bottone Salva modifiche Per salvare lo snippet di codice.
- Dopo aver salvato il CSS, fare clic su " attivare Per attivare il codice CSS.
Copia il codice
add_action( 'wp_head', function () { ?>
<style>
//VOTRE CODE ICI
</style>
<?php } );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
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
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 usare altro plugin di WordPress per dare un aspetto moderno e per ottimizzare la gestione del tuo blog o sito web.
Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.
1. FileBird
Hai mai faticato a gestire migliaia di file di immagini, video o documenti che hai caricato sul tuo FTP WordPress? si o no, non importa, l'importante è sapere che il WordPress Plugin FileBird ti aiuterà a gestire i tuoi file multimediali con facilità e darà 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 WordPress Plugin FileBird potrebbe essere la tua arma segreta.
Download | Demo | Web hosting
2. Le ultime categorie espandibili di WooCommerce
Ce WordPress Plugin ti consente di modificare facilmente i lunghi elenchi di noiose categorie di WooCommerce e di sostituirli con diversi livelli di sottovoci 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, WavePlayer è un plug-in del lettore audio che prende la forma d'onda del file audio riprodotto. Con questo plugin potrai ospitare tracce o semplicemente integrarlo con altri servizi.hosting cloud, come SoundCloud.
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.
- Come comprimere e ridimensionare le immagini su WordPress
- Come avere un indirizzo e-mail con il vostro WordPress di hosting
- Come rinominare le immagini su un blog WordPress
- Come trovare il link alla pagina di login di WordPress
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.
...
