Come Aggiungere Stili CSS Personalizzati per WPForms

Vuoi aggiungere stili CSS personalizzati al tuo sito? Questo tutorial ti offrirà diverse opzioni su come aggiungere questi snippet al tuo sito con istruzioni passo passo per ogni opzione che sceglierai.

Con questa utile guida, potrai scegliere facilmente come aggiungere gli snippet al tuo sito. Una volta selezionato il metodo di implementazione, potrai iniziare a esplorare la documentazione per sviluppatori per scegliere quali snippet CSS desideri iniziare ad aggiungere al tuo sito!

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

Consulta il nostro video tutorial per una visione più pratica su come aggiungere snippet CSS personalizzati al tuo sito.

Opzioni di implementazione

Il CSS è uno strumento potente per lo styling del tuo sito, così come dei tuoi moduli. Esistono 3 approcci principali per aggiungere CSS personalizzati al tuo sito.

Utilizzo del plugin WPCode (consigliato)

Utilizzare il plugin WPCode è velocissimo e facile per aggiungere snippet CSS al tuo sito.

Solo uno dei tanti motivi per cui raccomandiamo vivamente l'uso di questo plugin per aggiungere snippet personalizzati al tuo sito è che dispone di un controllo integrato prima di salvare lo snippet. Se manca un punto e virgola o viene aggiunta una parentesi extra, lo snippet non verrà salvato. Ciò impedisce che si verifichino problemi sul tuo sito a causa di uno snippet CSS copiato e incollato in modo errato. E sì, anche con la versione gratuita, riceverai questo controllo aggiuntivo prima che il tuo snippet venga reso attivo.

Una volta installato il plugin, naviga nel menu Code Snippets dal menu laterale sinistro sulla tua bacheca di WordPress e seleziona + Add Snippet. Successivamente, fai semplicemente clic su Add Your Custom Code (New Snippet), quindi fai clic sul pulsante blu Use Snippet per creare un nuovo snippet CSS.

Quando appare la schermata del tuo nuovo snippet, assegna allo snippet un nome che abbia senso per te, in modo che tu e gli amministratori del tuo sito ne comprendiate lo scopo. Dal menu a discesa Code Type, seleziona CSS poiché aggiungeremo solo CSS a questo snippet.

Nella sezione Code Preview, aggiungi il tuo 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, vedrai la sezione Insertion. Poiché stiamo aggiungendo CSS, selezioneremo Auto-Insert per il Insert Method e Site Wide Header per il Location.

Una volta aggiunto lo snippet, fai clic su Salva snippet. Questo salverà lo snippet, ma non lo attiverà automaticamente. Una volta salvato inizialmente, noterai che lo stato dello snippet è impostato su Inattivo per impostazione predefinita. È sufficiente attivare l'interruttore da Inattivo ad Attivo e fare clic su Aggiorna per impostare lo snippet su Attivo.

Utilizzo di CSS Hero

Se preferisci non toccare alcun codice, WPForms ha un tutorial completo su come utilizzare CSS Hero. Per saperne di più, segui questo tutorial.

Creazione di un tema figlio

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

Ogni tema figlio ha il file richiesto style.css, in questo file è dove aggiungeresti il tuo CSS personalizzato.

Utilizzo del personalizzatore di WordPress o dell'editor del sito

WordPress include uno strumento integrato per aggiungere CSS personalizzato al tuo tema o a qualsiasi plugin installato, il che lo rende una scelta popolare. Dove lo troverai dipende dal tipo di tema che stai utilizzando.

Per saperne di più sul Personalizzatore di WordPress, consulta la loro documentazione.

Nei temi classici, vai su Aspetto » Personalizza » CSS aggiuntivo.

Nei temi a blocchi, WordPress nasconde il personalizzatore. Vai su Aspetto » Editor e apri Stili per trovare l'opzione CSS aggiuntivo. Se non riesci a trovarla, la guida di WordPress per applicare CSS personalizzato mostra dove si trova nella tua versione.

Ricorda solo di salvare le modifiche dopo aver aggiunto il tuo CSS. Finché il tema rimane attivo, il tuo CSS personalizzato verrà applicato.

Link aggiuntivi

Per ulteriori informazioni sul CSS personalizzato per WPForms, consulta questi collegamenti di riferimento:

• Documentazione di styling per WPForms
• Un elenco completo di documentazione per lo styling di WPForms utilizzando CSS

FAQ

D: In che modo questo mi aiuta ad aggiungere CSS personalizzato per WPForms?

R: Questo tutorial non è specificamente per il CSS personalizzato di WPForms, ma per qualsiasi CSS personalizzato che potresti voler aggiungere al tuo sito.

Trova semplicemente l'opzione più semplice per te tra quelle sopra per aggiungere eventuali snippet di codice, inclusi gli snippet di codice WPForms menzionati nella sezione Tutorial e Snippet.