Divi Plugin Highlight: Caldera Forms Style Customizer dla Divi i Extra

Caldera Forms świetnie komponuje się ze stylem Twojej witryny. Co by było, gdybyś chciał go wystylizować za pomocą znanych narzędzi do stylizacji w programie Divi i Extra Theme Customizer? Możesz to zrobić za pomocą wtyczki innej firmy o nazwie Caldera Forms Style Customizer dla Divi i Extra.

Formy Caldera mogą być stylizowane przy użyciu standardowych opcji dostosowywania motywu, jednak te opcje nadają styl motywowi. Oznacza to, że jeśli zmienisz styl tekstu formularza, zmienisz również styl tekstu głównego witryny. Jeśli chciałbyś stylizować swoje formularze oddzielnie od treści, normalnie musiałbyś stylizować ręcznie za pomocą CSS. Caldera Forms Style Customizer dla Divi i Extra rozwiązuje ten problem, dodając funkcje stylizacji do Theme Customizer.

W tym wyróżnieniu wtyczki przyjrzymy się konfiguratorowi stylów formularzy Caldera dla wtyczki Divi i Extra i zobaczymy, jak łatwo jest z niej korzystać. Tę wtyczkę innej firmy można kupić za pośrednictwem Caldera Forms. Jak sama nazwa wskazuje, działa zarówno z Divi, jak i Extra.

Instalacja i aktywacja

Prześlij i aktywuj wtyczkę jak zwykle. Brak ustawień do dostosowania. Funkcje są gotowe do użycia.

Dostosowywanie formularza

Wstawiłem domyślny formularz kontaktowy na stronę ze wszystkimi domyślnymi stylami. Dokonuję wszystkich zmian w tym formularzu pojedynczo. Następnie zobaczymy przykład lub dwa.

Nowe funkcje stylizacji zostały dodane do konfiguratora motywów. Otwórz Theme Customizer (lub Module Customizer – oba działają) i kliknij Caldera Forms Style Customizer .

Dodaje 20 nowych zakładek dostosowywania, aby dostosować każdy aspekt formularza, w tym tekst, przyciski, pola, przełączniki, selektor dat, bułkę tartą itp. Oto spojrzenie na każde ustawienie.

Pola tekstowe

Pola tekstowe zmieniają kolor tekstu, symbolu zastępczego i obramowania, a także szerokość obramowania, promień obramowania i wysokość pojedynczego wiersza pól.

Pole tekstowe najedź

Pola tekstowe Hover zmienia kolory tekstu, pól i obramowania.

Fokus pól tekstowych

Fokus pól tekstowych zmienia kolor tekstu, tła i obramowania pola, które ma fokus. W tym przykładzie pole w środku jest zawieszone, ale pole z ciemnym tłem ma ostrość.

Rozwiń Wybierz

Lista rozwijana Wybierz dostosowuje kolory tła, tekstu, strzałek i obramowania. Możesz także dostosować szerokość i promień obramowania.

Rozwijane Wybierz Hover

Rozwijane Wybierz Hover kontroluje kolor tła, tekstu, strzałki i obramowania po najechaniu myszą.

Pola wyboru i przyciski radiowe

Pola wyboru i przyciski radiowe dostosowują kolor wybranych elementów pól wyboru i przycisków radiowych.

Przełącz przełączniki

Przełączniki przełączające dostosowują kolory tła, czcionki i obramowania zarówno niezaznaczonego, jak i wybranego przełącznika indywidualnie. Możesz także dostosować szerokość i promień obramowania obu przełączników jednocześnie.

Przełącz przełączniki najedź kursorem

Przełącz przełączniki Hover dostosowuje niezależnie kolory tła, czcionki i obramowania zaznaczonego i niewybranego przełącznika. To jest niewybrany przełącznik.

Niebieski to wybrany przełącznik.

Przycisk przesyłania

Przycisk Wyślij kontroluje kolory tła, czcionki i obramowania, a także promień obramowania, szerokość przycisku i jego położenie. Możesz także dostosować rozmiar czcionki i odstępy między literami. Funkcja transformacji tekstu zmienia wielkość liter w tekście. Wybierz małe litery, wielkie litery, wielkie litery, inicjały lub dziedzicz.

Prześlij przycisk najechania

Prześlij przycisk Hover steruje kolorami aktywowania tła, czcionki i obramowania.

Przycisk reset

Przycisk Reset kontroluje kolory tła, czcionki i obramowania. Możesz także dostosować rozmiar czcionki i odstępy między literami, szerokość przycisku, pozycję przycisku, szerokość i promień obramowania. Ten ma również transformację tekstu.

Przycisk resetowania Hover

Resetuj przycisk Hover dostosowuje kolory przycisku dla tła, tekstu i obramowania.

Inne przyciski

Caldera ma kilka innych rodzajów przycisków. Inne przyciski sterują wszystkim z wyjątkiem Prześlij i Resetuj. Dostosuj kolory czcionki, obramowania i tła oraz dostosuj szerokość i promień obramowania. W tym przykładzie stworzyłem przyciski Poprzedni i Następny.

Inne przyciski

Inne przyciski Funkcja Hover steruje kolorami aktywowania czcionek, obramowania i tła.

Selektor dat

Selektor dat zawiera kolory zwykłe i po najechaniu kursorem na tej samej karcie. Dostosuj kolory czcionki i tła. W tym przykładzie najeżdżam na 10 i wybieram 12.

Prześlij listę plików

Prześlij listę plików kontroluje kolory tła i tekstu na liście przesyłanych plików.

Podział sekcji

Podział sekcji steruje kolorem podziału sekcji, szerokością obramowania oraz górnym i dolnym marginesem.

Bułka tarta

Okruszki chleba pozwalają wybrać kolory czcionek zarówno dla aktywnej strony, jak i innych łączy, separatora, tła i obramowania. Dostosuj szerokość i promień obramowania.

Powiadomienie o sukcesie

Alert sukcesu dostosowuje kolory czcionki, tła i obramowania, a także promień i szerokość obramowania. Reguluje również wysokość pudełka.

Różnorodny

Różne zapewnia kontrolę nad kolorami wymaganej ikony, polami z błędami, tekstem opisu, kolorem karty kredytowej i pozycją ikony karty kredytowej. Tekst opisu zawiera opcje rozmiaru czcionki, odstępów między literami i przekształcania tekstu. Wybrałem wielkie litery.

Przykłady

Utworzyłem formularz przesyłania CV (w rzeczywistości jest on wbudowany w formularze Caldera, ale kliknąłem przycisk, aby go wybrać) i ustawiłem go jako modalny. Najpierw chcę wystylizować stronę za pomocą Divi Builder.

Dodałem obraz tła i wybrane kolory, które raczej kontrastują niż mieszają się z tłem.

Ten używa tych samych ustawień z innym tłem. Tym razem nie użyłem formularza w trybie modalnym. Zamiast mieć białe tło, pola formularza są umieszczane bezpośrednio nad obrazem.

Import Eksport

Importowanie lub eksportowanie stylów Caldera Forms, które utworzyłeś w konfiguratorze, jest łatwe. W Dashboard przejdź do Caldera Forms , Style – Import / Export . To importuje i eksportuje style jako plik JSON, co pozwala łatwo używać stylów Caldera Form na dowolnej stronie internetowej, która korzysta z tej wtyczki. Wszystkie Twoje style zostaną nadpisane stylami importowanego pliku.

Licencja i wsparcie

Wtyczkę można nabyć jako roczną licencję (coroczna cykliczna). Licencja pozwala na używanie wtyczki na jednej, pięciu lub piętnastu witrynach (w zależności od wybranego poziomu) i obejmuje jeden rok wsparcia i aktualizacji.

Końcowe przemyślenia

Okazało się, że ta wtyczka jest łatwa w użyciu. Ustawienia Konfiguratora są intuicyjne. Są dobrze oznakowane i ułożone w sensowny sposób. Nie miałem problemów ze znalezieniem żadnego z ustawień, które chciałem. Chciałbym zobaczyć jakiś łatwy sposób na powrót do ustawień domyślnych za jednym razem lub wprowadzenie globalnych zmian (takich jak zwiększenie lub zmniejszenie ogólnej ciemności wszystkich kolorów). To prawdopodobnie nie jest realistyczne, ale brzmi interesująco.

Nie można stylizować poszczególnych formularzy za pomocą ustawień Customizer. Wszystkie formy wykorzystują ten sam styl, co ustawienie globalne i będą musiały być stylizowane indywidualnie, przy użyciu funkcji stylizacji Caldery. Taka jest natura konfiguratora motywów. Jeśli interesuje Cię globalna stylizacja Caldera Forms, nie ma prostszego sposobu na zrobienie tego niż użycie Caldera Forms Style Customizer dla Divi i Extra.

Chcemy usłyszeć od Ciebie. Czy wypróbowałeś wtyczkę Caldera Forms Style Customizer dla Divi i Extra? Daj nam znać, co o tym myślisz w komentarzach.

Polecane zdjęcie autorstwa Iriny Strelnikova / shutterstock.com