Come aggiungere stili CSS personalizzati per WPForms

Volete aggiungere stili CSS personalizzati al vostro sito? Questo tutorial vi darà diverse opzioni su come aggiungere questi snippet al vostro sito, con istruzioni passo-passo per ogni modalità opzionale scelta per aggiungere i CSS.

Grazie a questa utile guida, potrete scegliere facilmente il modo in cui aggiungere gli snippet al vostro sito. Una volta scelto il metodo di implementazione, potrete iniziare a esplorare la documentazione per sviluppatori per scegliere quali snippet CSS aggiungere al vostro sito!

Per dare un'occhiata all'host di tutti gli snippet disponibili, esplorate la nostra documentazione per sviluppatori.

Per una visione più pratica di come aggiungere snippet CSS personalizzati al vostro sito, consultate il nostro video tutorial.

Opzioni di implementazione

I CSS sono uno strumento potente per lo styling del sito e dei moduli. Esistono 3 approcci principali per aggiungere CSS personalizzati al vostro sito.

Utilizzo del plugin WPCode (consigliato)

L'uso del plugin WPCode è super veloce e facile per aggiungere snippet CSS al vostro sito.

Uno dei tanti motivi per cui consigliamo vivamente l'uso di questo plugin per l'aggiunta di snippet personalizzati al vostro sito è che ha un controllo incorporato prima di salvare lo snippet. Se manca un punto e virgola o viene aggiunta una parentesi in più, lo snippet non verrà salvato. Questo impedisce che si verifichino problemi sul sito a causa di uno snippet CSS copiato e incollato in modo errato. E sì, anche con la versione gratuita, riceverete questa verifica supplementare prima che il vostro snippet venga reso attivo.

Una volta installato il plugin, andate al menu Code Snippets dal menu laterale sinistro della vostra dashboard di WordPress e selezionate + Aggiungi snippet. Successivamente, è sufficiente fare clic su Add Your Custom Code (New Snippet), quindi fare clic sul pulsante blu Use Snippet per creare un nuovo snippet CSS.

Quando appare la schermata del nuovo snippet, assegnategli un nome che abbia senso per voi e per gli amministratori del sito, in modo da capirne lo scopo. Dal menu a tendina Tipo di codice, selezionare CSS, poiché a questo snippet verrà aggiunto solo CSS.

Nella sezione Anteprima codice, aggiungere il proprio CSS. Ecco un esempio da utilizzare ai fini di questa documentazione.

/* write your CSS code here */
	ul#wpforms-999-field_27 li label, 
	ul#wpforms-999-field_26 li label {
    padding: 10px;
    transition: all ease 0.3s;
    background: linear-gradient(to right, #e27730 50%, #cd631d 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    color: white;
	}
	
	ul#wpforms-999-field_27 li.wpforms-selected label, 
	ul#wpforms-999-field_27 li label:hover, 
	ul#wpforms-999-field_26 li.wpforms-selected label, 
	ul#wpforms-999-field_26 li label:hover {
		cursor: pointer;
		border-radius: 2px;
		background-position: right top;
	}
	
	ul#wpforms-999-field_27 li input, 
	ul#wpforms-999-field_26 li input {
		display: none;
	}
	
	ul#wpforms-999-field_27 li, 
	ul#wpforms-999-field_26 li {
		float: left;
		width: auto;
		display: inline-block;
		padding: 10px 10px 10px 0!important;
	}

Successivamente, verrà visualizzata la sezione Inserimento. Poiché stiamo aggiungendo CSS, selezioneremo Auto-Insert per il metodo di inserimento e Site Wide Header per la posizione.

Una volta aggiunto lo snippet, fare clic su Salva snippet. Questa operazione salverà lo snippet, ma non lo attiverà automaticamente. Dopo il salvataggio iniziale, si noterà che lo stato dello snippet è impostato per default su Inattivo. È sufficiente spostare l'interruttore da Inattivo ad Attivo e fare clic su Aggiorna per impostare lo snippet come Attivo.

Utilizzo di CSS Hero

Se si preferisce non toccare alcun codice, WPForms offre un tutorial completo su come usare CSS Hero. Per saperne di più, seguite questo tutorial.

Creare un tema figlio

I temi figlio sono consigliati per uno sviluppo più avanzato. Potete scoprire come creare un tema figlio seguendo questo tutorial.

In ogni tema figlio è presente il file style.css, in cui aggiungere il proprio CSS personalizzato.

Utilizzo del Customizer di WordPress

Dalla versione 4.5 di WordPress, WordPress ci ha fornito uno strumento integrato per aggiungere qualsiasi stile CSS personalizzato al vostro tema o a qualsiasi plugin che avete installato, il che lo rende una scelta popolare per aggiungere il vostro CSS.

Per saperne di più sul Customizer di WordPress, consultate la sua documentazione.

È possibile trovare il personalizzatore di WordPress navigando su Aspetto " Personalizzazione " CSS aggiuntivi.

Dopo aver aggiunto il CSS, ricordarsi di fare clic sul pulsante Pubblica per salvare le modifiche. Finché il tema rimane attivo, il CSS personalizzato verrà applicato.

Note

Quando si aggiunge qualsiasi tipo di codice personalizzato al proprio sito, è importante assicurarsi di proteggere il codice. Quindi, a prescindere dall'approccio scelto, è buona norma eseguire sempre un backup del sito. In questo modo, avrete accesso alle versioni precedenti dei file del sito e del database, se necessario.

Collegamenti aggiuntivi

Per ulteriori informazioni sui CSS personalizzati per WPForms, consultate questi link di riferimento:

• Documentazione sullo stile per WPForms
• Un elenco completo di documenti per lo styling di WPForms con i CSS

FAQ

D: Come mi aiuta ad aggiungere CSS personalizzati per WPForms?

R: Questo tutorial non è specifico per i CSS personalizzati di WPForms, ma per qualsiasi CSS personalizzato che si voglia aggiungere al proprio sito.

Basta trovare l'opzione più facile per aggiungere qualsiasi snippet di codice, compresi quelli di WPForms menzionati nella sezione Tutorial e Snippet.