Evidenziazione del plug-in Divi: Caldera Forms Style Customizer per Divi ed Extra

Caldera Forms fa un ottimo lavoro nel fondersi con lo stile del tuo sito web. E se volessi modellarlo usando i familiari strumenti per lo styling di Divi e Extra Theme Customizer? Puoi farlo con un plug-in di terze parti chiamato Caldera Forms Style Customizer per Divi ed Extra.

I moduli Caldera possono essere stilizzati utilizzando le opzioni standard di personalizzazione del tema, tuttavia, queste opzioni modellano il tema. Ciò significa che se modifichi lo stile del testo del modulo, cambi anche lo stile del corpo del testo del tuo sito web. Se volessi modellare i tuoi moduli separatamente dal tuo contenuto, normalmente dovresti applicare lo stile a mano con i CSS. Caldera Forms Style Customizer per Divi ed Extra risolve questo problema aggiungendo funzionalità di stile al Theme Customizer.

In questo momento saliente del plug-in daremo un'occhiata al plug-in Caldera Forms Style Customizer per Divi e Extra e vedremo quanto è facile da usare. Questo plugin di terze parti può essere acquistato tramite Caldera Forms. Come suggerisce il nome, funziona sia con Divi che con Extra.

Installazione e attivazione

Carica e attiva il plugin normalmente. Non ci sono impostazioni da regolare. Le funzioni sono pronte per l'uso.

Personalizzazione di un modulo

Ho inserito il modulo di contatto predefinito in una pagina con tutto lo stile predefinito. Farò tutte le mie modifiche a questo modulo una alla volta. Poi vedremo un esempio o due.

Le nuove funzionalità di stile vengono aggiunte al Personalizzatore di temi. Apri Theme Customizer (o Module Customizer - funzionano entrambi) e fai clic su Caldera Forms Style Customizer .

Questo aggiunge 20 nuove schede di personalizzazione per personalizzare ogni aspetto del modulo, inclusi testo, pulsanti, campi, interruttori a levetta, selettore di date, breadcrumb, ecc. Ecco uno sguardo a ciascuna impostazione.

Campi di testo

Campi di testo modifica il colore del testo, del segnaposto e del bordo, nonché la larghezza del bordo, il raggio del bordo e l'altezza della riga singola dei campi.

Campi di testo al passaggio del mouse

Campi di testo Al passaggio del mouse cambia il testo, il campo e i colori del bordo.

Focus sui campi di testo

Lo stato attivo dei campi di testo cambia il colore del testo, dello sfondo e del bordo del campo che ha lo stato attivo. In questo esempio il campo al centro ha il passaggio del mouse ma il campo con lo sfondo scuro è a fuoco.

Selezione a discesa

La selezione a discesa personalizza lo sfondo, il testo, la freccia e i colori del bordo. Puoi anche regolare la larghezza e il raggio del bordo.

Menu a discesa Seleziona al passaggio del mouse

La selezione a discesa al passaggio del mouse controlla il colore dello sfondo, del testo, della freccia e del bordo al passaggio del mouse.

Caselle di controllo e pulsanti di opzione

Caselle di controllo e pulsanti di opzione regola il colore degli elementi selezionati delle caselle di controllo e dei pulsanti di opzione.

Interruttori a levetta

Interruttori di commutazione regola i colori dello sfondo, del carattere e del bordo sia dell'interruttore non selezionato che di quello selezionato individualmente. Puoi anche regolare la larghezza del bordo e il raggio di entrambi gli interruttori insieme.

Interruttori a levetta al passaggio del mouse

Interruttori di commutazione Il passaggio del mouse regola i colori dello sfondo, del carattere e del bordo dell'interruttore selezionato e non selezionato in modo indipendente. Questo è l'interruttore non selezionato.

Quello blu è l'interruttore selezionato.

Pulsante Invia

Il pulsante Invia controlla lo sfondo, il carattere e i colori del bordo, il raggio del bordo, la larghezza del pulsante e la sua posizione. Puoi anche regolare la dimensione del carattere e la spaziatura delle lettere. Una funzione di trasformazione del testo cambia il caso del testo. Scegli minuscolo, maiuscolo, maiuscolo, iniziale o eredita.

Pulsante di invio al passaggio del mouse

Pulsante di invio Il passaggio del mouse controlla i colori al passaggio del mouse per lo sfondo, il carattere e il bordo.

Tasto reset

Il pulsante Ripristina controlla lo sfondo, il carattere e i colori del bordo. Puoi anche regolare la dimensione del carattere e della spaziatura tra le lettere, la larghezza del pulsante, la posizione del pulsante, la larghezza del bordo e il raggio del bordo. Questo ha anche la trasformazione del testo.

Pulsante di ripristino al passaggio del mouse

Reimposta pulsante al passaggio del mouse regola i colori dei pulsanti per lo sfondo, il testo e il bordo.

Altri pulsanti

Caldera ha molti altri tipi di pulsanti. Altri pulsanti controllano tutto tranne Invia e Reimposta. Regola i colori per il carattere, il bordo e lo sfondo e regola la larghezza e il raggio del bordo. In questo esempio ho creato i pulsanti Precedente e Successivo.

Altri pulsanti al passaggio del mouse

Altri pulsanti Al passaggio del mouse controlla i colori al passaggio del mouse per i caratteri, il bordo e lo sfondo.

Date picker

Selettore data include colori normali e al passaggio del mouse all'interno della stessa scheda. Regola i colori per il carattere e lo sfondo. In questo esempio sto passando il mouse sopra il 10 e il 12 è selezionato.

Carica elenco file

Carica elenco file controlla i colori per lo sfondo e il testo all'interno dell'elenco dei file che vengono caricati.

Interruzione di sezione

Interruzione di sezione controlla il colore dell'interruzione di sezione, la larghezza del bordo e i margini superiore e inferiore.

Briciole di pane

Breadcrumbs ti consente di scegliere i colori per i caratteri sia per la pagina attiva che per altri collegamenti, il separatore, lo sfondo e il bordo. Regola la larghezza e il raggio del bordo.

Avviso di successo

Avviso successo regola il carattere, lo sfondo e i colori del bordo e il raggio e la larghezza del bordo. Regola anche l'altezza della scatola.

Varie

Varie ti dà il controllo sui colori per l'icona richiesta, i campi in errore, il testo della descrizione, il colore della carta di credito e la posizione dell'icona della carta di credito. Il testo della descrizione include la dimensione del carattere, la spaziatura delle lettere e le opzioni di trasformazione del testo. Ho scelto le maiuscole.

Esempi

Ho creato un modulo di caricamento del curriculum (in realtà questo è integrato in Caldera Forms, ma ho fatto clic sul pulsante per selezionarlo) e l'ho impostato come modale. Per prima cosa voglio dare uno stile alla pagina con Divi Builder.

Ho aggiunto un'immagine di sfondo e colori selezionati che contrastano invece di fondersi con lo sfondo.

Questo utilizza le stesse impostazioni con uno sfondo diverso. Questa volta non ho usato il modulo in modo modale. Anziché avere uno sfondo bianco, i campi del modulo vengono posizionati direttamente sull'immagine.

Importa Esporta

È facile importare o esportare i tuoi stili di Caldera Forms che hai creato nel personalizzatore. In Dashboard vai su Caldera Forms , Stili – Importa/Esporta . Questo importa ed esporta gli stili come file JSON, consentendoti di utilizzare facilmente i tuoi stili Caldera Form su qualsiasi sito Web che utilizza questo plug-in. Tutto il tuo stile verrà sovrascritto con lo stile del file importato.

Licenza e supporto

Il plugin può essere acquistato come licenza di un anno (annuale ricorrente). La licenza consente l'utilizzo del plug-in su uno, cinque o quindici siti Web (a seconda del livello scelto) e include un anno di supporto e aggiornamenti.

Pensieri finali

Ha trovato questo plugin facile da usare. Le impostazioni del Customizer sono intuitive. Sono etichettati bene e disposti in modo sensato. Non ho avuto problemi a trovare nessuna delle impostazioni che volevo. Vorrei vedere un modo semplice per tornare alle impostazioni predefinite tutto in una volta o apportare modifiche globali (come aumentare o diminuire l'oscurità complessiva di tutti i colori). Probabilmente non è realistico, ma sembra interessante.

Non è possibile definire lo stile di singoli moduli con le impostazioni del Customizer. Tutte le forme utilizzano questo stesso stile come impostazione globale e dovranno essere stilizzate su base individuale utilizzando le caratteristiche di stile di Caldera. Questa è la natura del Personalizzatore di temi. Se sei interessato a modellare i tuoi Caldera Forms su base globale, non c'è modo più semplice per farlo che utilizzare Caldera Forms Style Customizer per Divi ed Extra.

Vogliamo sentire da voi. Hai provato il plugin Caldera Forms Style Customizer per Divi e Extra? Fateci sapere cosa ne pensate nei commenti.

Immagine in primo piano tramite Irina Strelnikova / shutterstock.com