Divi: Jak dostosować moduł „Formularz kontaktowy”.

Czy chciałbyś stworzyć formularz kontaktowy na Twoją stronę dzięki modułowi Formularz kontaktowy z Divi? Oto 3 pomysły na personalizację…

Wykonanie odcisków ucha jest konieczne, abyśmy mogli stworzyć Twoje monitory formularze Dane kontaktowe są istotną częścią wielu stron internetowych. Ich głównym celem jest intuicyjność i ułatwienie odwiedzającym nawiązania kontaktu.

Ale to nie znaczy, że wszystko formularze styki muszą mieć precyzyjny i predefiniowany wygląd. Możesz łatwo połączyć intuicyjne wrażenia z pięknym designem. To jest dokładnie to, co zamierzamy zrobić w tym samouczku.

Udostępnimy 3 unikalne projekty modułu Formularz kontaktowy de Divi które możesz stworzyć, używając tylko wbudowanych opcji Divi.

Chodźmy!

Przegląd projektów modułu Divi Contact Form

Wersje na komputery stacjonarne

Zacznijmy od przyjrzenia się wersji desktopowej różnych konstrukcji modułu Formularz kontaktowy które zaprojektujemy w tym samouczku.

dodaj formularz kontaktowy do swojej witryny za pomocą modułu formularza kontaktowego Divi

Wersje mobilne

A oto jak wyglądają na mniejszych ekranach:

Pobierz DIVI teraz !!!

Jak dostosować moduł formularza kontaktowego Divi: 3 przykłady

Czytaj także: Divi: Jak utworzyć sekcję członków zespołu jako karuzelę

Stworzenie formularza kontaktowego #1

Dodaj nową sekcję

Tło gradientowe

Zacznijmy od pierwszego przykładu! Dodaj nową sekcję, przejdź do ustawień tła i dodaj tło gradientowe.

Gradient zatrzymuje się
- 34%: #4c00ff
- 34%: #ffd400
Typ: Okrągły
Kierunek gradientu: dolny lewy

rozstaw

Następnie przejdź do opcji Rozstaw w zakładce Projekt i zmień ustawienia w następujący sposób.

Dopełnienie (góra i dół): 200px

Dodaj nową linię

Struktura kolumny

Dodaj nowy wiersz, używając następującej struktury kolumn:

Kolumna 1: Kolor tła

Bez dodawania jeszcze żadnych modułów otwórz ustawienia wiersza, następnie ustawienia kolumny 1 i dodaj kolor tła poniżej

Tło: rgba (255,255,255,0.55)

Kolumna 1: Obraz tła

Dodaj także obraz tła do pierwszej kolumny.

Powtarzanie obrazu tła: Bez powtórzeń
Mieszanie obrazu tła: ekran

Kolumna 2: Obraz tła

I biały kolor tła do drugiej kolumny.

Tło: #ffffff

zaklejania

Następnie zmodyfikuj parametry rozmiaru.

Wyrównaj wysokości kolumn: TAK

rozstaw

Usuń także wszystkie domyślne niestandardowe wypełnienia.

Dopełnienie (góra i dół): 0px

Promień obramowania kolumny

Dodaj promień obramowania do obu kolumn na karcie Zaawansowane.

border-radius: 10px;

Dodaj moduł tekstowy do kolumny 1

Dodaj treść

Czas zacząć dodawać różne moduły! Dodaj moduł Tekst do pierwszej kolumny z wybraną treścią.

Ustawienia tekstu

Następnie przejdź do zakładki Projekt modułu Tekst i wprowadź zmiany.

Tekst:
- Czcionka: Satisfy
- Kolor tekstu: #333333
- Rozmiar: 100px
- Wysokość linii: 1 em
- Wyrównanie: środek

rozstaw

Dodaj także niestandardowe wartości wypełnienia.

Wypełnienie (góra): 600 pikseli
Wypełnienie (dół): 100px

Pole cienia

Aby dodać głębi projektowi, użyj subtelnego cienia w pudełku.

Siła rozmycia cieni w pudełku: 80px
Siła rozprzestrzeniania się cieni w pudełku: -16px
Kolor cienia: rgba(0,0,0,0.3)

Dodaj moduł obrazu do kolumny 2

Prześlij obraz

Kontynuuj, dodając moduł obrazu do drugiej kolumny. Prześlij wybrany obraz.

zaklejania

Zmień ustawienia rozmiaru dla tego modułu.

Szerokość: 25% (komputer stacjonarny), 50% (tablet), 60% (telefon)
Wyrównanie modułu: Środek

rozstaw

Utwórz zakładkę, używając ujemnego górnego marginesu.

Marża (górna): -60%

Granica

Zmodyfikuj granice obrazu w następujący sposób:

Zaokrąglone rogi: 100 pikseli (wszystkie rogi)

Dodaj moduł Tekst nr 1 do kolumny 2

Dodaj treść

Tuż pod modułem Obraz dodaj moduł Tekst z treścią.

Ustawienia tekstu

Edytuj ustawienia tekstu dla tego modułu.

Tekst:
- Czcionka: Satisfy
- Kolor tekstu: #333333
- Rozmiar tekstu: 44px
- Orientacja: Centrum

Dodaj moduł Tekst nr 2 do kolumny 2

Dodaj treść

Następnie dodaj kolejny moduł tekstowy.

Ustawienia tekstu

Zmień także ustawienia tekstu dla tego modułu.

Tekst:
- Czcionka: Arial
- Kolor tekstu: #ffd400
- Kolor tekstu: 18px
- Odstępy między literami: 2px
- Orientacja: Centrum

rozstaw

Następnie dodaj dolny margines.

Margines (dolny): 100 pikseli

Dodaj moduł formularza kontaktowego do kolumny 2

Aktywuj opcję „Make Fullwidth” w polu Nazwa i adres e-mail

Ostatnim potrzebnym modułem jest moduł Formularz kontaktowy. Zanim zrobisz cokolwiek innego, otwórz pola nazwy i adresu e-mail oraz zmień układ.

Ustaw pełną szerokość: tak

Dodaj pole tematu

Aby stworzyć ten projekt, dodaliśmy kolejne pole dla tematu.

Ochrona przed spamem

Następnie wyłącz opcję captcha.

Użyj podstawowej captcha: NIE

Ustawienia tekstu pól formularza

Wprowadź zmiany w ustawieniach tekstu pól formularza tego modułu formularza kontaktowego

Pola:
- Kolor tła: rgba(255,255,255,0)
- Czcionka: Arial
- Waga czcionki: lekka
- Rozmiar tekstu: 16px
- Odstępy między literami: 2px

Ustawienia przycisków

Zmieniamy również wygląd przycisków.

Użyj niestandardowego rozmiaru przycisku: TAK
Przycisk:
- Kolor tekstu: #ffd400
- Szerokość obramowania: 0 pikseli
- Odstępy między literami: 2px
- Czcionka: Arial
- Styl czcionki: U
- kolor podkreślenia: #4c00ff

rozstaw

Następnie dodaj niestandardowe wartości dopełnienia.

Wypełnienie (dół): 100px
Dopełnienie (lewy i prawy): 50px

granica

I dodaj subtelne dolne obramowanie do każdego z pól.

Wejścia Szerokość dolnej krawędzi: 2px
Wejścia Kolor dolnego obramowania: #efefef

Rozstaw poszczególnych pól

Na koniec dodaj dolny margines do każdego z poszczególnych pól oprócz pola wiadomości.

Margines (dolny): 20 pikseli