Divi Plugin Highlight: Caldera Forms Style Customizer pentru Divi și Extra

Caldera Forms face o treabă excelentă de a se îmbina cu stilul site-ului dvs. web. Ce se întâmplă dacă ați dori să o coafați folosind instrumentele de stil cunoscute ale Divi și Extra Theme Customizer? Puteți face acest lucru cu un plugin terță parte numit Caldera Forms Style Customizer pentru Divi și Extra.

Caldera Forms poate fi stilizat folosind opțiunile standard de personalizare a temelor, cu toate acestea, aceste opțiuni stilizează tema. Aceasta înseamnă că, dacă modificați stilul textului formularului dvs., schimbați și stilul textului corpului site-ului dvs. web. Dacă doriți să vă stilizați formularele separat de conținutul dvs., în mod normal, ar trebui să stilizați manual cu CSS. Personalizatorul de stil Caldera Forms pentru Divi și Extra rezolvă această problemă prin adăugarea de caracteristici de stilizare în Personalizatorul temei.

În acest punct de evidențiere a pluginului, vom arunca o privire la Caldera Forms Style Customizer pentru pluginurile Divi și Extra și vom vedea cât de ușor este de utilizat. Acest plugin terță parte poate fi achiziționat prin Caldera Forms. După cum sugerează și numele, funcționează atât cu Divi, cât și cu Extra.

Instalare și activare

Încărcați și activați pluginul în mod normal. Nu există setări de ajustat. Funcțiile sunt gata de utilizare.

Personalizarea unui formular

Am inserat formularul de contact implicit într-o pagină cu stilul implicit. Voi face toate ajustările mele la acest formular pe rând. Apoi vom vedea un exemplu sau două.

Noile caracteristici de styling sunt adăugate la Theme Customizer. Deschideți Customizerul tematic (sau Customizerul modulului - ambele funcționează) și faceți clic pe Caldera Forms Style Customizer .

Aceasta adaugă 20 de noi file de personalizare pentru a personaliza fiecare aspect al formularului, inclusiv text, butoane, câmpuri, comutatoare, selector de date, pesmet, etc. Iată o privire la fiecare setare.

Câmpuri de text

Câmpurile text modifică culoarea textului, substituentul și chenarul, precum și lățimea chenarului, raza chenarului și înălțimea unei singure linii a câmpurilor.

Câmpuri text Plasați cursorul

Câmpuri de text Plasați cursorul pe hover modifică textul, câmpul și culorile chenarului.

Focus câmpuri text

Focalizarea câmpurilor de text modifică culoarea textului, fundalului și chenarului câmpului care are focalizare. În acest exemplu, câmpul din centru este planat, dar câmpul cu fundal întunecat are focalizare.

Meniu derulant Selectați

Meniul dropdown Select personalizează fundalul, textul, săgeata și culorile chenarului. De asemenea, puteți regla lățimea și raza chenarului.

Meniu derulant Selectați Plasați cursorul

Meniul derulant Selectare Hover controlează culoarea fundalului, a textului, a săgeții și a chenarului pe hover.

Casete de selectare și butoane radio

Casetele de selectare și butoanele radio ajustează culoarea elementelor selectate din casetele de selectare și butoanele radio.

Comutați comutatoarele

Comutatoare de comutare reglează individual culorile fundalului, fontului și chenarului atât al comutatorului neselectat, cât și al celui selectat. De asemenea, puteți ajusta împreună lățimea și raza marginii ambelor comutatoare.

Comutați la comutator

Toggle Switchers Hover ajustează culorile fundalului, fontului și chenarului comutatorului selectat și neselectat în mod independent. Acesta este comutatorul neselectat.

Cel albastru este comutatorul selectat.

Buton de trimitere

Butonul Trimite controlează fundalul, fontul și culorile chenarului, precum și raza chenarului, lățimea butonului și locația acestuia. De asemenea, puteți ajusta dimensiunea fontului și distanța dintre litere. O caracteristică de transformare a textului schimbă majusculele textului. Alegeți minuscule, majuscule, majuscule, inițiale sau moșteniți.

Trimiteți butonul Plasați cursorul

Trimiteți butonul Hover controlează culorile hover pentru fundal, font și margine.

Butonul de resetare

Butonul Reset controlează fundalul, fontul și culorile chenarului. De asemenea, puteți ajusta dimensiunea fontului și a spațierii literelor, lățimea butonului, poziția butonului, lățimea chenarului și raza chenarului. Acesta are, de asemenea, transformarea textului.

Resetați cursorul cu butonul

Resetarea butonului Hover reglează culorile butonului pentru fundal, text și margine.

Alte butoane

Caldera are alte câteva tipuri de butoane. Alte butoane controlează totul, cu excepția Trimitere și Resetare. Reglați culorile pentru font, margine și fundal și reglați lățimea și raza chenarului. În acest exemplu am creat butoanele Anterioară și Următoare.

Alte butoane plutesc

Alte butoane Hover controlează culorile hover pentru fonturi, chenar și fundal.

Data Picker

Data Picker include culori obișnuite și plutesc în aceeași filă. Reglați culorile pentru font și fundal. În acest exemplu, plutesc peste 10 și 12 este selectat.

Încărcați lista de fișiere

Încărcare listă fișiere controlează culorile pentru fundal și text în lista fișierelor încărcate.

Secțiunea Break

Section Break controlează culoarea break break-ului, lățimea chenarului și marginile de sus și de jos.

Firimituri de pâine

Biscuiți vă permite să alegeți culorile pentru fonturi atât pentru pagina activă, cât și pentru alte linkuri, separator, fundal și chenar. Reglați lățimea și raza chenarului.

Alertă de succes

Alertă de succes ajustează fontul, fundalul și culorile chenarului, precum și raza și lățimea chenarului. De asemenea, reglează înălțimea cutiei.

Diverse

Diverse vă oferă control asupra culorilor pentru pictograma necesară, câmpurile din eroare, textul descrierii, culoarea cardului de credit și poziția pictogramei cardului de credit. Textul descrierii include dimensiunea fontului, spațierea literelor și opțiunile de transformare a textului. Am ales majuscule.

Exemple

Am creat un formular de încărcare a CV-ului (de fapt acesta este încorporat în Caldera Forms, dar am făcut clic pe buton pentru al selecta) și l-am setat ca modal. Mai întâi vreau să stilez pagina cu Divi Builder.

Am adăugat o imagine de fundal și culori selectate care contrastează mai degrabă decât se amestecă cu fundalul.

Acesta folosește aceleași setări cu un fundal diferit. De data aceasta nu am folosit formularul într-un modal. În loc să aibă un fundal alb, câmpurile formularului sunt plasate direct deasupra imaginii.

Import Export

Este ușor să importați sau să exportați stilurile dvs. Caldera Forms pe care le-ați creat în personalizator. În tabloul de bord accesați Caldera Forms , Styles - Import / Export . Aceasta importă și exportă stilurile ca fișier JSON, permițându-vă să utilizați cu ușurință stilurile dvs. Caldera Form pe orice site web care utilizează acest plugin. Tot stilul dvs. va fi suprascris cu stilul fișierului importat.

Licență și asistență

Pluginul poate fi achiziționat ca licență de un an (recurent anual). Licența permite folosirea pluginului pe unul, cinci sau cincisprezece site-uri web (în funcție de nivelul pe care îl alegeți) și include un an de asistență și actualizări.

Gânduri finale

Acesta a găsit acest plugin ușor de utilizat. Setările Customizer sunt intuitive. Sunt etichetate bine și aranjate într-un mod care are sens. Nu am avut probleme să găsesc setările dorite. Aș dori să văd orice mod ușor de a reveni la setările implicite dintr-o dată sau de a face ajustări globale (cum ar fi creșterea sau scăderea întunericului general al tuturor culorilor). Probabil că nu este realist, dar sună interesant.

Nu este posibil să creați stiluri individuale cu setările Customizer. Toate formularele folosesc același stil ca setare globală și vor trebui să fie stilizate individual pe baza caracteristicilor de stilare ale Caldera. Aceasta este natura Customizerului tematic. Dacă sunteți interesat să vă stilizați Caldera Forms pe o bază globală, nu există o modalitate mai ușoară de a face acest lucru decât să utilizați Caldera Forms Style Customizer pentru Divi și Extra.

Vrem sa auzim de la tine. Ați încercat Caldera Forms Style Customizer pentru pluginul Divi și Extra? Spuneți-ne ce părere aveți despre asta în comentarii.

Imagine prezentată prin Irina Strelnikova / shutterstock.com