Jak utworzyć responsywną sekcję pełnoekranowego formularza kontaktowego z animacją przewijania w powiększeniu?
Opublikowany: 2020-05-01W przypadku wielu witryn sekcja kontaktowa strony jest idealnym miejscem docelowym dla odwiedzających. Mówiąc o oczywistym, większość ludzi / firm chce, aby odwiedzający kontaktowali się z nimi w celu uzyskania większej liczby transakcji. Dlatego ważne jest, aby zoptymalizować tę sekcję, aby uzyskać lepszą konwersję. Jednym ze sposobów, w jaki możemy to zrobić, jest stworzenie pełnoekranowego układu formularza kontaktowego, który zapewnia użytkownikowi widok informacji kontaktowych bez rozpraszania uwagi.
W tym samouczku zbudujemy pełnoekranowy układ sekcji formularza kontaktowego, którego możesz użyć na dowolnej stronie swojej witryny Divi. Dostosujemy również układ za pomocą przydatnych responsywnych ustawień projektowania, które sprawią, że układ pełnoekranowy będzie wyglądał świetnie nawet na małych telefonach.
Zacznijmy!
zapowiedź
Oto krótkie spojrzenie na sekcję responsywnego pełnoekranowego formularza kontaktowego, który zamierzamy zbudować.
Pobierz układ za DARMO
Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.
Pobierz za darmo
Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.
Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!
https://youtu.be/5Qt9J95uME8
Subskrybuj nasz kanał YouTube
Aby zaimportować układ sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.
Kliknij przycisk Importuj.
W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.
Następnie kliknij przycisk importu.
Po zakończeniu układ sekcji będzie dostępny w Divi Builder. Pamiętaj, że jest to układ sekcji, więc będziesz musiał dodać ten układ do strony, posta lub szablonu podczas tworzenia nowej sekcji w kreatorze.
Zobacz na dole posta, jak dodać układ sekcji do strony.
Przejdźmy do samouczka, dobrze?
Czego potrzebujesz, aby zacząć
Aby rozpocząć, musisz wykonać następujące czynności:
- Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
- Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
Budowanie układu sekcji kontaktu
Na początek dodamy gotowy układ do nowej strony za pomocą Divi Builder. Przyspieszy to projektowanie, abyśmy mogli skupić się na tym, co jest potrzebne, aby sekcja (z formularzem kontaktowym) była pełnoekranowa i responsywna. Następnie dodamy efekt przewijania, aby na końcu wszystko połączyć.
Dodawanie gotowego układu
Po kliknięciu, aby edytować stronę za pomocą konstruktora Divi, wybierz opcję „Wybierz gotowy układ”.
Następnie znajdź układ strony kontaktowej Business Coach i kliknij przycisk „Użyj tego układu”.
Ustawienia sekcji
Po załadowaniu układu na stronę otwórz ustawienia sekcji na samej górze układu i zaktualizuj następujące elementy:
Tło
- Kolor tła: #3550a0
Wysokość przekroju i wypełnienie
- Minimalna wysokość: 600px
- Wysokość: 104vh
- Padding: góra 0px, dół 0px
Jednym z kluczy do tego projektu jest ustawienie wysokości na co najmniej 100vh (100% wysokości widoku). Dzięki temu sekcja zajmie całą wysokość okna przeglądarki. Dodajemy wysokość 104vh, dzięki czemu mamy trochę więcej miejsca na przewijanie sekcji.
Ustawienie min-height na 600px jest wysokością rezerwową, aby żaden z elementów w sekcji nie był ukryty, jeśli wysokość przeglądarki jest zbyt mała. Będzie to musiało zostać dostosowane do ilości treści, które mamy w sekcji.
niestandardowe CSS
Aby wyśrodkować wiersze w sekcji w pionie (idealne dla sekcji pełnoekranowych), dodaj następujący niestandardowy CSS jako główny element.
display:flex;flex-direction: column;
Dodawanie formularza kontaktowego
Aby dodać formularz kontaktowy do sekcji, przeciągnij go poniżej istniejącego modułu tekstowego z gotowej sekcji poniżej.
Usuń dodatkowe sekcje z gotowego układu
Następnie usuń dolną sekcję, aby pozostała tylko ta, którą budujemy.
Dostosowywanie elementów sekcji do projektowania responsywnego na pełnym ekranie
Teraz, gdy układ sekcji został ukończony, jesteśmy gotowi do rozpoczęcia dostosowywania zawartości (lub elementów podrzędnych) sekcji za pomocą responsywnego projektu, który będzie się ładnie skalować dla sekcji pełnoekranowej na wszystkich urządzeniach.
Będziemy używać jednostki długości vh dla większości rozmiaru tekstu i odstępów dla każdego z elementów. Pomoże to zachować widoczność elementów w układzie pełnoekranowym nawet na krótkich wyświetlaczach telefonów.
Ustawienia wiersza
Otwórz ustawienia wiersza i zaktualizuj następujące elementy:
- Szerokość rynny: 1
- Szerokość: 100%
- Padding: 0px na górze, 0px na dole, 7vh w lewo, 7vh w prawo
Ustawienia modułu tekstowego
Otwórz ustawienia modułu tekstowego i zaktualizuj następujące elementy:
Rozmiar tekstu nagłówka
- Rozmiar tekstu nagłówka: 7vh (komputer), 5vh (tablet i telefon)
- Rozmiar tekstu nagłówka 3: 2vh (komputer), 3vh (tablet), 12px (telefon)
Margines
- Margines: 3vh dolny
Ustawienia formularza kontaktowego
Teraz będziemy kontynuować nasze responsywne dostosowywanie projektu w formularzu kontaktowym za pomocą jednostki długości vh. Otwórz Ustawienia formularza kontaktowego i zaktualizuj następujące elementy:
Ustawienia pola
- Marża pola: 3vh
- Wyściółka Fleids: 2vh góra, 2vh dół
- Rozmiar tekstu pól: 2.5vh
Rozmiar tekstu przycisku
- Rozmiar tekstu przycisku: 2vh
Szerokość
- Maksymalna szerokość: brak
Dodawanie efektów przewijania
Ostatnim krokiem do projektu jest efekt przewijania, który przeniesie sekcję formularza kontaktowego do widoku pełnoekranowego podczas przewijania strony. Aby to zrobić, ponownie otwórz ustawienia sekcji i zaktualizuj następujące elementy:
W zakładce Skalowanie w górę i w dół…
- Włącz skalowanie w górę i w dół: TAK
- Skala początkowa: 60% (przy 0%)
- Skala środkowa: 60% (przy 70%)
- Skala końcowa: 100% (przy 100%)
To kończy projekt sekcji pełnoekranowego formularza kontaktowego. Ale zanim będziemy mogli zobaczyć ostateczny wynik, najpierw dodajmy go do jednej ze stron w serwisie.
Korzystanie z pełnoekranowej sekcji formularza kontaktowego w Twojej witrynie
Zapisz układ sekcji w bibliotece Divi
Zanim będziemy mogli dodać tę sekcję do innej strony w naszej witrynie, najpierw musimy zapisać układ sekcji w Bibliotece Divi.
Aby to zrobić, kliknij ikonę "Dodaj do biblioteki" w menu sekcji. Następnie nadaj układowi nazwę i kliknij przycisk „Zapisz w bibliotece”.
Teraz układ sekcji będzie dostępny w Bibliotece Divi do wykorzystania w przyszłości.
Dodaj układ sekcji do strony z biblioteki Divi
Aby dodać pełnoekranowy układ sekcji formularza kontaktowego do strony (lub postu) w Divi, otwórz, aby edytować stronę za pomocą Divi Builder.
Następnie kliknij, aby dodać nową sekcję gdzieś na stronie.
W wyskakującym okienku Wstaw sekcję kliknij kartę Dodaj z biblioteki i wybierz z listy zapisany układ sekcji (mój nazywa się „Formularz kontaktowy na pełnym ekranie”).
Ostateczny wynik
Sprawdźmy teraz efekt końcowy.
Tutaj jest na pulpicie.
Tutaj jest na tablecie (a właściwie iPadzie Pro).
Tutaj jest na telefonie (właściwie iPhone 5). Zauważ, że chociaż ekran jest naprawdę krótki, zawartość nadal mieści się w widoku pełnoekranowym.
Końcowe przemyślenia
Mam nadzieję, że sekcja pełnoekranowego formularza kontaktowego pomoże Ci stworzyć wysoce konwertujący formularz/sekcję kontaktową dla Twojej własnej strony internetowej. Ważną rzeczą, o której należy pamiętać, jest zawsze upewnianie się, że treść jest na tyle zwięzła, aby ładnie wyświetlała się również na małych telefonach. Niektóre z kluczowych technik projektowania responsywnego stosowane w tym układzie przydadzą się również podczas wprowadzania zmian w dowolnym projekcie w witrynie.
Aby uzyskać więcej informacji na ten temat, zapoznaj się z naszym postem na temat używania jednostek długości vw i vh do projektowania responsywnego formularza kontaktowego w Divi.
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!