Come aggiungere CSS personalizzati in Elementor: 4 metodi semplici

Alla ricerca di modi per aggiungere CSS personalizzato in Elementor?

Estendere i già straordinari design di Elementor aggiungendo CSS personalizzati può darti un vantaggio imbattibile rispetto alla concorrenza.

Quindi, perché non utilizzare alcuni CSS personalizzati di Elementor e distinguersi tra la folla di questo mondo digitale altamente competitivo, giusto?

Non c'è motivo per cui non dovresti.

Ma come aggiungere CSS personalizzati al page builder drag and drop di Elementor?

Bene, puoi aggiungere CSS personalizzati in Elementor in molti modi. Per conoscere maggiori dettagli su come aggiungere CSS personalizzati in Elementor keep sulla lettura…

Cos'è il CSS?

CSS (Cascading Style Sheets) è un linguaggio di fogli di stile basato su regole che viene utilizzato per modificare il layout e l'aspetto delle pagine Web create con un linguaggio di markup come HTML o XML. L'uso dei CSS è un modo efficiente di progettare web perché mantiene sia il contenuto che lo stile in un file separato offrendoti la massima flessibilità e facilità d'uso.

Perché dovresti aggiungere CSS personalizzati nel sito Elementor?

Beh, non è obbligatorio perché Elementor stesso fornisce tutte le opzioni di personalizzazione necessarie per creare bellissimi siti Web. Tuttavia, se sei una persona che sa programmare e desideri utilizzare la tua creatività per migliorare l'aspetto del sito, puoi aggiungere CSS personalizzati in Elementor.

• Utilizzando CSS personalizzati in Elementor puoi sovrascrivere lo stile del tema per implementare un nuovo stile. Supponiamo che ti piaccia l'intero aspetto di una pagina fornita dal tuo tema ma desideri modificare leggermente il layout in una sezione, quindi puoi avvalerti dell'aiuto del CSS personalizzato di Elementor per farlo.

• Allo stesso modo, puoi anche sovrascrivere il design del modello predefinito di Elementor utilizzando gli snippet di codice CSS personalizzati.

• Puoi anche progettare su misura il tuo sito web in modo che abbia un aspetto diverso su diversi dispositivi aggiungendo snippet di codice CSS personalizzati a Elementor.

Come aggiungere CSS personalizzati in Elementor: 3 metodi diversi

Aggiungere CSS personalizzati non è affatto un lavoro difficile. In effetti, puoi aggiungere CSS personalizzati in Elementor utilizzando vari metodi. Qui condivido con te i 4 modi più sicuri per aggiungere CSS personalizzati Elementor.

1️⃣ Aggiungi CSS utilizzando gli snippet di codice CSS personalizzati di Elementor

Elementor ti offre un'opzione avanzata per aggiungere CSS personalizzati alle tue sezioni, colonne e widget. Tuttavia, questa opzione è disponibile solo con Elementor Pro.

Per aggiungere CSS personalizzati a qualsiasi sezione/sezione interna del tuo sito Web Elementor, fare clic sui sei punti per accedere alla modalità di modifica, quindi passare a Scheda Avanzate ⇒ CSS personalizzato. Ora espandi la scheda CSS personalizzato e aggiungi il tuo codice personalizzato.

Allo stesso modo, puoi aggiungere CSS personalizzati anche nei widget Elementor. Per farlo, fai clic sul widget per accedere alla modalità di modifica, quindi passa alla scheda Avanzate ⇒ CSS personalizzato. Ora espandi la scheda CSS personalizzato e aggiungi il tuo codice personalizzato.

2️⃣ Utilizza il widget HTML per aggiungere CSS personalizzati Elementor

La seconda opzione che puoi utilizzare per aggiungere CSS personalizzati Elementor al tuo sito Web WordPress è utilizzare il widget HTML. Per questa opzione, semplicemente trascina e rilascia il widget HTML e quindi aggiungi il tuo codice CSS all'interno di un tag Style. 

Nota: Puoi aggiungere CSS sia in linea che autonomi utilizzando il tag HTML. E non preoccuparti, sul sito si rifletteranno solo gli stili, il codice grezzo non sarà visibile.

3️⃣ Aggiungi CSS personalizzato nelle impostazioni del sito Elementor

Puoi anche aggiungere CSS personalizzati in Elementor utilizzando l'opzione delle impostazioni del sito. Fai clic sul menu hamburger nell'angolo in alto a sinistra, quindi su Impostazioni, fare clic sull'opzione Impostazioni sito per accedere alle opzioni di impostazione globale del sito.

Ora scorri verso il basso fino all'opzione CSS personalizzato, apri la scheda e aggiungi qui i tuoi stili personalizzati.

4️⃣ Aggiungi CSS personalizzati in Elementor dalle impostazioni di personalizzazione di WordPress

Non devi necessariamente utilizzare le opzioni fornite da Elementor per aggiungere CSS personalizzati. Puoi anche utilizzare le opzioni di personalizzazione di WordPress per aggiungere CSS personalizzati.

Per questo, vai a Dashboard WordPress ⇒ Aspetto ⇒ Personalizza. 

Ora troverai molte impostazioni che potrai utilizzare per personalizzare il tuo Sito WordPress. Scorri verso il basso e apri il Scheda CSS aggiuntiva per aggiungere CSS personalizzati al tuo sito.

Come risolvere il problema con il CSS personalizzato di Elementor che non funziona

A volte l'aggiunta di CSS personalizzati in Elementor potrebbe non riflettersi immediatamente sul sito a causa di alcuni problemi tecnici. Ecco i passaggi che puoi adottare per risolvere questo problema:

✅Rigenera CSS

La rigenerazione dei CSS può risolvere questo problema. Per rigenerare CSS, vai a Elementor ⇒ Strumenti e fai clic su Rigenera CSS e dati e poi clicca su Salva modifiche.

✅ Cancella la cache del sito Web e la cache del browser

Svuota la cache del sito web con qualsiasi WordPress plugin della cache. Puoi anche svuotare qualsiasi cache a livello di server, se ne hai una. Dopo aver svuotato la cache del sito Web, svuota la cache del browser e aggiorna il sito per verificare se il CSS funziona o meno.

✅ Incompatibilità tematica

A volte Tema Elementor l'incompatibilità può essere la ragione per cui i CSS personalizzati non vengono visualizzati nel front-end. Puoi provare a passare a qualsiasi tema predefinito per verificare se il CSS funziona, se il CSS viene visualizzato nel front-end con un tema predefinito quindi parla con lo sviluppatore del tema del problema di compatibilità.

✅ Utilizzando un altro generatore di pagine insieme a Elementor

L'utilizzo di più page builder contemporaneamente può impedire il funzionamento del CSS personalizzato. Il motivo semplice è che i CSS di diversi page builder possono entrare in conflitto tra loro e l'altro page builder può sovrascrivere il CSS personalizzato di Elementor. In questi casi, dovresti utilizzare solo il generatore di pagine Elementor.

Domande frequenti

Dai un'occhiata ad alcune delle domande più popolari relative ai CSS personalizzati di Elementor con le risposte:

Come posso utilizzare CSS personalizzati in Elementor?

Puoi aggiungere CSS personalizzati in Elementor in 4 modi. Questi modi utilizzano il blocco HTML, lo snippet CSS personalizzato Elementor, le opzioni di personalizzazione di WordPress e le impostazioni di creazione del sito Elementor.

Come posso aggiungere gratuitamente CSS personalizzati a Elementor?

Dalle opzioni di personalizzazione di WordPress, puoi aggiungere gratuitamente CSS personalizzati nel sito Web di Elementor.

Concludendo con il CSS personalizzato di Elementor

Ora conosci 4 modi che puoi utilizzare per aggiungere CSS personalizzati in Elementor. Anche se puoi usarli tutti, dovresti tenere presente la gerarchia di priorità dei CSS. Ad esempio, uno stile in linea avrà sempre maggiore priorità rispetto ai CSS scritti a livello di pagina o a livello di sito web.

Quindi, consiglierei di utilizzare CSS personalizzati solo quando conosci molto bene i CSS. Altrimenti, potresti fare più male che bene e finire per rovinare l'aspetto e il layout del tuo sito web.

Detto questo, se sei un professionista dei CSS, non hai nulla di cui preoccuparti, sentiti libero di utilizzare i modi descritti in questo blog per aggiungere il tuo CSS personalizzato e cambiare con successo l'aspetto del tuo sito web.