Trzeba połączyć pola wbudowane i pola o pełnej szerokości modułu Formularz kontaktowy de Divi ?
Le formularz kontaktowy to ważny element, który należy umieścić w witrynie, jeśli chcesz przechwytywać wiadomości e-mail i przekształcać odwiedzających w klientów.
Moduł Formularz kontaktowy de Divi można łatwo dostosować do tworzenia formularze atrakcyjne i urzekające wizytówki dla wszystkich typów stron internetowych. Ten moduł zawiera dwie opcje wyświetlania, które można zastosować do każdego pola formularza: en ligne ou pełna szerokość.
W tym samouczku przedstawimy cztery unikalne możliwości układu dla Ciebie formularz kontaktowy Divi przy użyciu pól liniowych i pól o pełnej szerokości.
Zacznijmy!
badanie
Oto podgląd tego, co będziemy projektować.
Pierwszy układ
Drugi układ
Trzeci układ
Układ czwarty
To, czego potrzebujesz, aby zacząć
Zanim zaczniemy zainstaluj i aktywuj motyw Divi i upewnij się, że masz najnowszą wersję Divi na swojej stronie internetowej.
Teraz jesteś gotowy do rozpoczęcia!
4 przykładowe układy modułu formularza kontaktowego Divi z wykorzystaniem pól wbudowanych i o pełnej szerokości
Wybierz predefiniowany układ
Każdy z 4 szablonów został zmodyfikowany na podstawie układu strony kontaktowej naprawy obuwia Pakiet układu naprawy obuwia, które można znaleźć w bibliotece Divi.
Dodaj nową stronę do swojej witryny i nadaj jej tytuł, a następnie wybierz opcję Użyj Divi Builder.
W tym przykładzie użyjemy gotowego układu z Biblioteki Divi, więc wybierz Przeglądaj układy.
Znajdź i wybierz układ strony kontaktowej do naprawy obuwia.
wybierać Użyj tego układu aby dodać układ do swojej strony.
Jesteśmy teraz gotowi do zaprojektowania naszych przykładów.
Pierwszy układ
Najpierw przesuń linię zawierającą moduł Formularz kontaktowy do sekcji powyżej, tuż pod linią z modułami Blurb. Następnie możesz usunąć pozostałą pustą sekcję.
Otwórz ustawienia linii i dodaj lewe i prawe dopełnienie,
- Wyściółka (lewa i prawa): 15%
Wybierz responsywne opcje i ustaw dopełnienie dla urządzeń mobilnych.
- Wyściółka (lewa i prawa): 5%
Zmieniono układ formularza kontaktowego z polami wbudowanymi i o pełnej szerokości
Dla tego układu utworzymy dwa osobne pola na imię i nazwisko.
Otwórz ustawienia modułu Formularz kontaktowy i zmień pole ID i Tytuł dla pola Nazwisko na Imię.
Dodaj nowe pole poniżej pola Imię. Ustaw pola Identyfikator i Tytuł na Nazwa.
W ustawieniach pola nazwy otwórz ustawienia układu i ustaw Ustaw pełną szerokość na Nie.
- Ustaw pełną szerokość: NIE
Następnie w ustawieniach pliku formularz kontaktowy, zmień kolejność tematu i numeru telefonu, tak aby telefon znalazł się przed tematem.
Otwórz ustawienia układu pola Temat i ustaw pole na pełną szerokość.
- Ustaw pełną szerokość: TAK
Dostosowanie projektu formularza kontaktowego
Teraz zmieńmy kilka ustawień, aby ukończyć projekt. Przejdź do zakładki Projekt w ustawieniach modułu Formularz kontaktowy.
Najpierw zmień kolor tła przycisku.
- Tło przycisku: #DBC2B3
Dodaj górny margines do przycisku.
- Margines przycisku (górny): 10 pikseli
Na koniec przejdź do ustawień obramowania i dodaj zaokrąglone rogi do pól.
- Wejścia Zaokrąglone rogi: 30px
Zobacz też: Divi: Jak dodać responsywne logo do modułu „Fullwidth Menu”?
Końcowy wynik przykładu 1
Oto końcowy wynik na komputerze i urządzeniu mobilnym.
Drugi przykład
W naszym drugim przykładzie przeniesiemy moduły Blurb na lewą stronę strony i umieścimy formularz kontaktowy po prawej stronie. Przenieś moduły Blurb do kolumny.
Zmień układ wierszy.
Otwórz ustawienia projektu linii i wyłącz Użyj niestandardowej szerokości rynny.
- Użyj niestandardowej szerokości rynny: NIE
Dodaj kod do niestandardowego kodu CSS głównego elementu, aby wyrównać w pionie moduły Blurb i Contact Form.
align-items:center;
Teraz musimy usunąć cienką granicę między kolumnami. Otwórz ustawienia wierszy, a następnie otwórz ustawienia kolumn 1. Na karcie Projekt przejdź do ustawień obramowania i usuń obramowanie.
- Szerokość prawego obramowania: 0px
Następnie otwórz ustawienia kolumny 2 i powtórz kroki, aby usunąć obramowanie.
- Szerokość prawego obramowania: 0px
Ustaw tekst „Skontaktuj się z nami” tak, aby był wyśrodkowany.
Przenieś formularz kontaktowy do prawej kolumny. Usuń pozostałą pustą sekcję.
Zmieniono układ formularza kontaktowego z polami wbudowanymi i o pełnej szerokości
Ten układ będzie miał również dwa oddzielne pola na imię i nazwisko. Otwórz ustawienia modułu Formularz kontaktowy i zmień pole ID i Tytuł dla pola Nazwisko na Imię.
Dodaj nowe pole poniżej pola Imię. Ustaw pola Identyfikator i Tytuł na Nazwa.
W ustawieniach pola nazwy otwórz ustawienia układu i ustaw Ustaw pełną szerokość na Nie.
- Ustaw pełną szerokość: NIE
Zmień kolejność pól telefonu i tematu, tak aby telefon znajdował się przed tematem.
Otwórz ustawienia pól dla E-mail, Telefon i Temat i ustaw układ na pełną szerokość.
- Ustaw pełną szerokość: TAK
Dostosowanie projektu formularza kontaktowego
Otwórz ustawienia wiersza, a następnie otwórz ustawienia kolumny 2. Ustaw kolor tła.
- Tło: #DBC2B3
W ustawieniach kolumny 2 przejdź do zakładki Projekt i dodaj dopełnienie.
- Wypełnienie (góra, dół, lewa i prawa: 50px
Wybierz ikonę telefonu komórkowego, aby zmienić ustawienia responsywności. Ustaw dopełnienie dla telefonów komórkowych.
- Dopełnienie (góra, dół, lewo i prawo): 30px
Następnie dodaj cień ramki do kolumny.
Na koniec otwórz ustawienia modułu Formularz kontaktowy i zmień kolor tekstu pola.
- Kolor tekstu pól: #000000
Końcowy wynik przykładu 2
Oto efekt końcowy drugiego układu.
Trzeci przykład
W przypadku trzeciego układu po lewej stronie będziemy mieli formularz kontaktowy, a po prawej moduły Blurb. Zacznijmy od zmiany struktury kolumn wiersza zawierającego moduły Blurb.
Przenieś moduł adresu do prawej kolumny.
Następnie przenieś moduł tekstowy „Kontakt z nami” do lewej kolumny, a następnie usuń pozostałą pustą linię.
Przenieś moduł formularza kontaktowego do lewej kolumny, pod moduł tekstowy „Kontakt z nami”. Usuń pozostałą pustą sekcję.
Otwórz ustawienia linii, w zakładce Projekt i wyłącz Użyj niestandardowej szerokości rynny
- Użyj niestandardowej szerokości rynny: NIE
Dodaj kod do niestandardowego kodu CSS głównego elementu, aby wyrównać w pionie moduły Blurb i Contact Form.
align-items:center;
Otwórz ustawienia wierszy, a następnie otwórz ustawienia kolumn 1. Na karcie Projekt przejdź do ustawień obramowania i usuń obramowanie. Powtórz kroki, aby usunąć obramowanie z kolumny 2.
- Szerokość prawego obramowania: 0px
Zmiana układu formularza kontaktowego
Szerokości pól zostawimy takie same jak dla trzeciego projektu, jednak otwórz ustawienia formularza kontaktowego i zmień kolejność numeru telefonu i pola tematu, aby telefon był na pierwszym miejscu.
Końcowy wynik przykładu 3
Oto końcowy wynik trzeciego układu.
Czytaj także: Divi: Jak wyświetlić moduł nagłówka o pełnej szerokości na pełnym ekranie?
Czwarty przykład
W przypadku czwartego i ostatniego układu moduł formularza kontaktowego będzie znajdował się po lewej stronie, a moduły Blurb po prawej. Ponownie zaczniemy od zmiany struktury kolumn wiersza zawierającego moduły Blurb.
Przenieś moduł adresu do prawej kolumny.
Następnie przenieś moduł Formularz kontaktowy do lewej kolumny. Usuń pozostałą pustą sekcję.
Otwórz ustawienia linii, w zakładce Projekt i wyłącz Użyj niestandardowej szerokości rynny.
- Użyj niestandardowej szerokości rynny: NIE
Dodaj kod do niestandardowego kodu CSS głównego elementu, aby wyrównać w pionie moduły Blurb i Contact Form.
align-items:center;
Otwórz ustawienia wierszy, a następnie otwórz ustawienia kolumn 1. Na karcie Projekt przejdź do ustawień obramowania i usuń obramowanie.
- Szerokość prawego obramowania: 0px
Następnie otwórz ustawienia kolumny 2 i powtórz kroki, aby usunąć obramowanie.
- Szerokość prawego obramowania: 0px
Otwórz ustawienia modułu Tekst dla tekstu „Skontaktuj się z nami” i wyśrodkuj tekst.
- Wyrównanie tekstu: wyśrodkowane
Zmieniono układ formularza kontaktowego z polami wbudowanymi i o pełnej szerokości
W przypadku tego projektu wszystkie nasze pola będą miały pełną szerokość. Otwórz ustawienia modułu Formularz kontaktowy, a następnie otwórz ustawienia dla każdego pola. Na karcie Projekt wybierz układ i zdefiniuj Zrób pełną szerokość sur TAK.
Po utworzeniu każdego pola o pełnej szerokości formularz powinien wyglądać tak.
Teraz zmień pole Identyfikator i Tytuł dla pola Nazwisko na Imię.
Dodaj nowe pole poniżej pola Imię. Ustaw pola Identyfikator i Tytuł na Nazwa.
Zmień kolejność pól telefonu i tematu, tak aby telefon znajdował się przed tematem.
Dostosowanie wyglądu modułu Formularz kontaktowy
W ustawieniach modułu w zakładce Projekt ustaw kolor tekstu pola na czarny.
- Kolor tekstu pól: #000000
Otwórz ustawienia sekcji i dodaj kolor tła.
- Tło: #DBC2B3
Na koniec dodaj maskę tła.
- Maska tła: Arch
- Transformacja maski: pozioma
Aby maska tła działała lepiej na urządzeniach mobilnych, użyjmy ustawień responsywnych.
- Transformacja maski (telefon): pozioma i rotacyjna
Ostateczny wynik
Oto końcowy wynik czwartego układu.
Ostateczne wyniki
Przyjrzyjmy się jeszcze raz wszystkim naszym przykładom.
Pierwszy przykład
Drugi przykład
Trzeci przykład
Czwarty przykład
Pobierz DIVI teraz !!!
Wnioski
Posiadanie atrakcyjnego formularza kontaktowego może zwiększyć liczbę konwersji i umożliwić odwiedzającym bezpośredni kontakt z Tobą.
Jak pokazaliśmy w tym artykule, możesz użyć opcji pola wbudowanego i pełnej szerokości, aby stworzyć różne wyglądy i układy formularza, a wbudowane opcje projektowania Divi pozwalają tworzyć unikalne i atrakcyjne projekty, które pomogą wyróżnić formularz.
Mam nadzieję, że ta technika doda kolejną przydatną umiejętność projektowania do przyszłych projektów.
Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji swoich projektów tworzenia stron internetowych.
Nie wahaj się również skonsultować z naszym przewodnikiem na temat Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
