Se sei come me, avrai sicuramente un sacco di idee per il tuo sito web che vorresti vedere realizzate. E sebbene Elementor semplifichi la creazione di design unici con funzionalità drag-and-drop ed elementi predefiniti, a volte nulla può sostituire la potenza del CSS puro. In questo articolo, spiegheremo come aggiungere CSS personalizzati in Elementor, così potrai portare il design del tuo sito web a un livello superiore!
3 modi popolari per aggiungere CSS personalizzati in Elementor
Esistono diversi modi per aggiungere CSS personalizzati in Elementor. Diamo un'occhiata ai nostri 3 metodi migliori.
- Utilizza il personalizzatore di WordPress
- Utilizzare un plugin CSS
- Utilizzo del widget HTML
Utilizza il personalizzatore di WordPress.
Per aggiungere codice CSS personalizzato in Elementor, segui questi passaggi:
- Vai su Aspetto > Personalizza
- Nel personalizzatore di WordPress, fare clic su CSS aggiuntivo.
- Si aprirà la sezione CSS aggiuntivo. Puoi aggiungere codice qui incollandolo nella casella di testo o cliccando sul pulsante "Aggiungi CSS personalizzato" per cercare il file dal tuo computer.
Utilizzare un plugin CSS
Sul mercato sono disponibili vari plugin, come Simple CSS, Custom CSS Pro e CSS Hero, che consentono di aggiungere CSS personalizzati a Elementor.
Per iniziare, vai su CSS e JS personalizzati > Aggiungi CSS personalizzato e fai clic su Aggiungi codice CSS.
Un editor CSS di base apparirà sulla sinistra. Puoi scegliere di caricare il codice CSS internamente o in un foglio di stile esterno utilizzando le opzioni di configurazione sulla destra. Inoltre, puoi scegliere se il codice deve essere inserito nell'intestazione o nel piè di pagina:
Una volta terminata la modifica del codice CSS, fai clic sul Pubblica .
Nota: passare alla visualizzazione front-end per vedere il codice in azione.
Utilizzo del widget HTML
Puoi utilizzare un widget HTML per aggiungere codice CSS personalizzato a Elementor. Tutto ciò che devi fare è trascinare e rilasciare il widget HTML e aggiungere il codice CSS all'interno di un tag Style.
Il CSS personalizzato è un modo per aggiungere codice personalizzato al tuo sito web. Può essere utilizzato per molti scopi, dal modificare l'aspetto del tuo sito web all'aggiunta di funzionalità extra.
Ora che sai come aggiungere CSS personalizzato, puoi utilizzarlo sui tuoi siti web seguendo questi passaggi:
- Apri la finestra dell'editor di Elementor e clicca sull'icona '+' in alto a sinistra
- Fai clic su "Codice personalizzato" e incolla questo pezzo di codice: `.elementor-custom-css{display:none;}`. Puoi trovarlo in Impostazioni > CSS personalizzato o Aspetto > Opzioni tema > CSS personalizzato (a seconda della versione di WordPress in uso).
Conclusione
Ora che sai come aggiungere codice CSS personalizzato, puoi sfruttare la flessibilità di Elementor. La prossima volta che qualcosa non funziona come previsto, prova ad aggiungere codice CSS invece di risolvere il problema con un plugin o una modifica al tema: prova ad aggiungere codice CSS!
Contenuto pertinente
- Che cos'è CSS Framework?
- Come rimuovere i CSS inutilizzati in WordPress?
