Podświetlenie wtyczki Divi – moduł Gravity Divi

Gravity Forms to jedna z najpopularniejszych wtyczek formularzy do WordPressa. Jest kompatybilny z Divi za pomocą skrótów, ale nie w pełni wykorzystuje to, co jest możliwe z modułami Divi. Na szczęście dostępna jest wtyczka innej firmy, o nazwie Moduł Gravity Divi, która dodaje formularze Gravity do Divi Builder.

Moduł Gravity Divi to wtyczka innej firmy od CodeCraters, która w pełni integruje układy Gravity Forms z układami Divi i Extra. Umożliwia stylizowanie formularzy za pomocą dostosowań modułu Divi. W tym wyróżnieniu wtyczki przyjrzymy się, co może zrobić moduł. Do próbek używam szablonów dostarczonych przez Gravity Forms oraz obrazów z Unsplash.com.

Więcej informacji na temat form grawitacyjnych można znaleźć w artykułach Elegant Themes:

• Formy grawitacyjne – szczegółowe spojrzenie na edycję osobistą
• Jak stylizować formy grawitacyjne, aby wyglądały jak Divi (+ dodatkowe wyglądy!)

Instalacja i ustawienia modułu Gravity Divi

Po pierwsze, aby korzystać z tej wtyczki, należy zainstalować Gravity Forms. Po zainstalowaniu Gravity Forms prześlij i aktywuj wtyczkę Gravity Divi Module. Po aktywacji wtyczki doda ona nowy moduł do Divi Builder o nazwie Gravity Divi. Nie jest wymagana konfiguracja.

Ustawienie Treść pozwala wybrać formularz, wyświetlić tytuł formularza, pokazać opis, włączyć AJAX, wybrać kolor tekstu i dostosować tło.

Ustawienia projektu obejmują dostosowania tekstu w tytule formularza, opisie, elementach i samym tekście. Uwzględniono również odstępy dla marginesów i dopełnienia oraz stylizację przycisków. Te ustawienia zapewniają większą kontrolę niż używanie shortcode Gravity Forms w module tekstowym. Ustawienia Zaawansowane zawierają indeks zakładek, w którym można określić początkową zakładkę dla pól formularza.

Wybierz formularze z listy rozwijanej. Jeśli nie utworzyłeś jeszcze swojego formularza podczas tworzenia strony Divi, możesz go utworzyć, klikając łącze w ustawieniach treści w obszarze Wybierz formularz grawitacyjny. Po utworzeniu formularza pojawi się on w tym polu rozwijanym.

Dokonywanie korekt

To jest zaawansowany formularz kontaktowy z domyślnym stylem. Pasuje do stylizacji Divi. Dokonywanie regulacji jest łatwe.

Oto kilka podstawowych dostosowań. Zwiększyłem rozmiar czcionki tekstu nagłówka, zmieniłem kolory dla wszystkich czcionek, dodałem obraz tła z ciemną nakładką i dodałem padding.

W tym przykładzie wyłączyłem tytuł formularza.

W tym wybrałem nowy formularz z listy rozwijanej. Zachowuje ustawienia czcionek i tła, ponieważ te dostosowania zostały wykonane w module. To jest krótka próbka z krótkim opisem. Mam wyłączony tytuł formularza i włączony opis.

Moduł Gravity Divi w przykładach układów Divi

Największą zaletą modułu Gravity jest Divi Builder z ustawieniami modułu, co oznacza, że ​​ustawienia modułu, do których jesteś przyzwyczajony, są dostępne dla formularzy Gravity. Oto kilka przykładów w układach Divi.

Zaawansowany formularz kontaktowy w układzie modułu osoby

Jest to zaawansowany formularz kontaktowy zintegrowany w prostym układzie z obrazem tła. Aby pomóc formularzowi wtapiać się w wygląd strony, zmieniłem tekst na jasny, zwiększyłem rozmiar czcionki tytułu do 40 i zmieniłem tekst elementów formularza na czerwony.

Umieściłem wiersz modułu w tej samej sekcji, co moduły Person, więc obraz tła rozciąga się do modułu Gravity. Formularz pasuje do projektu strony, a nie wygląda tak, jakbym właśnie dołączył formularz na dole strony.

Układ rejestracji

W tym przykładzie użyto niektórych elementów układu z bezpłatnego układu strony głównej dla uniwersytetów i szkół wyższych.

Moduł Gravity jest umieszczony w układzie 2/3, 1/3 z modułem tekstowym.

Włączyłem tytuł formularza i AJAX, aby formularz wielostronicowy nie przeładowywał strony, gdy użytkownik kliknie przycisk Dalej. Czcionka tytułu formularza jest ustawiona na 30%. Dobrze wpisuje się w stylistykę układu. Żadne inne zmiany nie były potrzebne.

Wesele RSVP

Ten używa delikatnych kolorów i eleganckich czcionek, które wtapiają się w zdjęcie (mogą być trudne do zobaczenia na tym zdjęciu. Normalnie używałbym większego kontrastu, ale bardziej miękki kontrast jest preferowany w przypadku strony ślubnej). Kolory są pobierane z samego zdjęcia, a następnie przyciemniane, aby poprawić czytelność.

Ten układ jest pojedynczym modułem z tłem w sekcji. Zmieniłem wszystkie czcionki na Tangerine, zwiększyłem rozmiar czcionki i pogrubiłem je, a także dostosowałem kolory do jasnobrązowego lub czerwonego w oparciu o kolory na obrazie.

Formularz zamówienia pizzy

W tym przykładzie użyto szablonu formularza Build a Pizza z Gravity Forms.

Ten układ wykorzystuje układ 1/3, 2/3 z modułem Gravity i kilkoma modułami obrazu. Dodałem tło w sekcji i nakładkę w rzędzie z dopełnieniem, aby wszystko zmieściło się w zaprojektowanej przestrzeni.

Ustawiłem tekst na Light, zmieniłem czcionki na Arimo i dostosowałem rozmiar czcionki dla każdego elementu formularza osobno.

Ustawiłem tekst przycisku i obramowanie na biały i dostosowałem promień obramowania przycisku na 30.

Dodatkowy motyw z zaawansowanym formularzem kontaktowym w układzie modułu osoby

Moduł grawitacyjny jest również kompatybilny z Extra. Oto spojrzenie na pierwszy przykład (Zaawansowany formularz kontaktowy w układzie modułu osoby) z dodatkiem. Dla strony w Extra używam szablonu strony o pełnej szerokości. Wygląda tak samo jak strona Divi.

Jedyną zmianą, jaką wprowadziłem, jest stylizacja przycisków. Niebieski przycisk nie zlewa się tak dobrze, a biały tekst świetnie wygląda na niebieskim tle.

Licencja i wsparcie

Wtyczka jest dostarczana z nieograniczoną licencją, więc możesz ją zainstalować na dowolnej liczbie stron internetowych zarówno dla siebie, jak i dla swoich klientów. Obejmuje również dożywotnie aktualizacje i wsparcie przez 6 miesięcy.

Moduł Gravity Divi można kupić w sklepie dewelopera.

Końcowe przemyślenia

Moduł Gravity Divi zapewnia świetny sposób na zintegrowanie Twoich Gravity Forms z układami Divi. Dodaje więcej funkcji niż zwykłe używanie skrótów Gravity Forms. Wszystkie zalety Gravity Forms są wzmocnione przez Divi Builder i ustawienia modułu, które obejmują ustawienia tła, takie jak obraz, nakładki i gradienty, ustawienia czcionek i przycisków, dopełnienie itp.

Jeśli jesteś zainteresowany używaniem Gravity Forms z Divi Builder, moduł Gravity Divi może być rozwiązaniem, którego potrzebujesz.

Teraz twoja kolej. Czy używałeś modułu Gravity Divi? Daj nam znać, co myślisz w komentarzach poniżej.

Polecane zdjęcie za pośrednictwem Bloomicon / shutterstock.com