Jak używać jednostek długości vw i vh do projektowania responsywnego formularza kontaktowego w Divi

Opublikowany: 2019-06-12

Formularze internetowe są niezwykle istotne dla sukcesu Twojej witryny. Ma to sens, biorąc pod uwagę, że większość firm internetowych polega na formularzach, takich jak opcje e-maili i formularze kontaktowe, aby zarabiać pieniądze, tworząc listy e-mailowe i komunikując się z potencjalnymi kupującymi. W dzisiejszych czasach musimy mieć pewność, że projektujemy responsywne formularze, które będą świetnie wyglądać na wszystkich przeglądarkach i urządzeniach mobilnych.

W tym samouczku pokażę, jak zaprojektować responsywny formularz kontaktowy przy użyciu jednostek długości vw i vh w Divi. Omówimy, jak zmieniać rozmiar i rozmieszczać pola wejściowe i przyciski, które dostosują się do szerokości i wysokości przeglądarki. Pozwoli to zmaksymalizować widoczność formularza na wszystkich urządzeniach, nawet w widoku poziomym na telefonach komórkowych.

Aby to zrobić, użyjemy wbudowanych ustawień Divi, które pozwalają z łatwością dostosować tekst formularza, pola i przyciski.

Zacznijmy.

zapowiedź

Pulpit

Tablet

Telefon (portret)

Telefon (poziomo)

Pobierz układ responsywnego formularza kontaktowego ZA DARMO (zawiera również formularz responsywnego formularza e-mail Optin!)

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 pliki

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!

Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz mieć następującą konfigurację:

Zainstalowany i aktywny motyw Divi
Nowa strona utworzona w celu zbudowania od podstaw na interfejsie użytkownika (konstruktor wizualny)
Twój ulubiony napój (opcjonalnie, chyba że jeszcze nie piłeś kawy)

Następnie będziesz mieć puste płótno, aby rozpocząć tworzenie responsywnych formularzy w Divi.

Dlaczego warto używać jednostek długości vw i vh do responsywnego projektowania?

Jednostki długości to wartości potrzebne do określenia rozmiaru i rozmieszczenia elementów na Twojej stronie internetowej. Prawdopodobnie najczęstszymi jednostkami długości używanymi w projektowaniu stron internetowych są piksele i wartości procentowe. Na przykład piksel jest powszechną jednostką długości używaną do określania rozmiaru tekstu, jednostka długości em jest powszechnie używana do wysokości linii, a jednostka procentowa długości jest często używana do określania odstępów i zmiany rozmiaru elementów w przypadku projektowania responsywnego. W rzeczywistości domyślne wartości jednostek długości dla elementów Divi (modułów, wierszy, sekcji) są budowane przy użyciu tych wspólnych jednostek długości.

Jednostki długości będą albo bezwzględne (pozostają w tym samym rozmiarze bez względu na rozmiar innych elementów) albo względne (zmiana/skalowanie w zależności od rozmiaru innych elementów). Na przykład piksel jest jednostką długości bezwzględnej. Jeśli więc tekst ma rozmiar czcionki 16px, tekst pozostanie 16px bez względu na rozmiar jego kontenera. Ale procent i em są jednostkami długości względnej. Tak więc wysokość linii, która ma wartość em, dostosuje się wraz ze zmianą rozmiaru tekstu elementu. A ponieważ procent jest również względną jednostką długości, wiersz o szerokości 80% będzie stanowił 80% jego pojemnika (lub sekcji).

Jednostki długości vw i vh są również jednostkami długości względnej, ale zamiast być względnymi w stosunku do kontenera nadrzędnego elementów, odnoszą się do rzeczywistej rzutni przeglądarki. Szerokość rzutni (vw) jest zależna od szerokości przeglądarki, a wysokość rzutni (vh) jest zależna od wysokości przeglądarki. Używanie tych jednostek długości to jeden ze sposobów na zachowanie spójności projektu we wszystkich przeglądarkach, ponieważ będzie on skalowany zgodnie z rzutnią. Dzięki temu rozmiar każdego elementu jest bardziej przewidywalny i łatwiejszy do zarządzania bez konieczności nadawania każdemu elementowi innego rozmiaru na każdym urządzeniu lub responsywnego punktu przerwania. Jednostka długości vh jest szczególnie przydatna w przypadku wyświetlaczy telefonów komórkowych, ponieważ uwzględnia wysokość widoku telefonu w widoku pionowym i poziomym.

Ta technika sprawdza się najlepiej w przypadku projektów, które opierają się na dużych wyświetlaczach o pełnej szerokości na pulpicie, które skalują się płynnie w miarę dostosowywania przez użytkownika szerokości przeglądarki.

Aby uzyskać bardziej szczegółowe wyjaśnienie jednostek długości, zapoznaj się z tym przewodnikiem dotyczącym używania jednostek długości w Divi.

Część 1: Projektowanie responsywnego formularza kontaktowego w Divi

Tworzenie sekcji i wiersza

Utwórz zwykłą sekcję z jednokolumnowym wierszem. Przed dodaniem jakichkolwiek modułów zaktualizuj ustawienia sekcji w następujący sposób:

Kolor lewego gradientu tła: #fd7b5b
Gradient tła w prawo Kolor: #a92200

Następnie otwórz ustawienia wiersza i nadaj mu gradient tła.

Kolor lewego gradientu tła: #ffdb8b
Gradient tła w prawo Kolor: #fdb15b

Następnie zmieńmy rozmiar wiersza za pomocą jednostki długości vw, tak aby skalował się z przeglądarką.

Szerokość: 66vw (komputer), 66vw (tablet), 100% (telefon)
Maksymalna szerokość: 66vw (komputer), 66vw (tablet), 100% (telefon)
Minimalna wysokość: 100vh (telefon)

Padding: 0px na górze, 0px na dole

Wartość 66vw zapewni, że wiersz pozostanie mniej więcej dwie trzecie szerokości okna przeglądarki. Wartość 100vh na wyświetlaczu telefonu zapewni, że wysokość wiersza będzie równa wysokości ekranu telefonu (opcjonalnie, ale miły akcent dla optymalnego wyświetlania obszaru zawartości wiersza na telefonach).

Zauważ, że szerokość wiersza jest ustawiona na 100% (nie na 100vw). Dzieje się tak, ponieważ 100vw nie uwzględnia szerokości paska przewijania podczas przewijania strony. Dlatego zawsze lepiej jest używać wartości procentowych dla wyświetlaczy o pełnej szerokości.

Tworzenie formularza kontaktowego

Po umieszczeniu naszego wiersza możemy teraz dodać do niego moduł formularza kontaktowego.

Po dodaniu formularza kontaktowego zaktualizuj treść jak w przypadku tytułu i wyłącz captcha.

Tytuł: Skontaktuj się z nami
Pokaż Captcha: NIE

Tworzenie pól o pełnej szerokości

W tym projekcie użyję pól o pełnej szerokości. Umożliwi mi to dodanie spójnych odstępów między polami (ponieważ nie używa się pływaków) i pozwoli mi nadać niestandardową szerokość każdemu z pól, aby później uzyskać unikalny projekt. Na razie otwórz ustawienia dla pól nazwy i adresu e-mail i ustaw opcję „Ustaw pełną szerokość” na „TAK”.

Optymalizacja pól pod kątem projektowania responsywnego

Teraz wróć do ustawień formularza kontaktowego. Teraz możemy dostosować pola formularza za pomocą jednostek długości vw i vh. Zaktualizuj następujące elementy:

Kolor tekstu pola: #333333
Margines Fields (komputer i tablet): 2vw góra, 2vw dół
Marża pola (telefon): 2vh góra, 2vh dół

Dopełnienie pól (komputer i tablet): 1vw na górze, 1vw na dole, 2vw po lewej, 2vw po prawej
Fields Padding (telefon): 2vh góra, 2vh dół, 2vh lewo, 2vh prawo

Rozmiar tekstu w polach: 2.5vw (komputer), 4vh (telefon)

Uwaga: Użycie 4vh do telefonu pozwoli na skalowanie rozmiaru tekstu z wysokością wyświetlacza telefonu komórkowego, co będzie pomocne przy przeglądaniu formularza na poziomym wyświetlaczu telefonu (obrócenie telefonu na bok). Jeśli jednak potrzebujesz bardziej spójnego rozmiaru tekstu, możesz użyć jednostki długości w pikselach jako rozmiaru tekstu pola na wyświetlaczu telefonu.

Projektowanie tekstu tytułu

W przypadku tekstu tytułu dostosuj następujące elementy:

Poziom nagłówka tytułu: H2
Czcionka tytułu: Karla
Grubość czcionki tytułu: pogrubiona
Kolor tekstu tytułu: #f56845
Rozmiar tekstu tytułu: 7vw (komputer), 8vh (telefon)
Odstępy między literami tytułu: 1vw
Wysokość wiersza tytułu: 0.6em

Optymalizacja przycisku pod kątem projektowania responsywnego

Do przycisku formularza kontaktowego dodamy odstępy i wielkość tekstu zbliżoną do pól, które zaprojektowaliśmy wcześniej.

Kliknij, aby użyć niestandardowych stylów przycisków i zaktualizować następujące elementy:

Rozmiar tekstu przycisku: 2.5vw (komputer stacjonarny), 4vh (telefon)
Kolor tekstu przycisku: #ffffff
Kolor tła przycisku: #333333
Szerokość obramowania przycisku: 0px
Promień obramowania przycisku: 0px
Czcionka przycisku: Montserrat
Margines przycisku (komputer): 1vw góra, 0px po lewej, 0px po prawej
Margines przycisku (telefon): 1vh u góry
Wypełnienie przycisków (komputer): 3vw góra, 3vw dół
Wypełnienie przycisków (telefon): 3vh góra, 3vh dół

Cień przycisku: zobacz zrzut ekranu
Pozycja pozioma cienia pudełka: 2em
Pozycja pionowa cienia pudełka: 0.4em
Kolor cienia: rgba (245,104,69,0.29)

Dodaj odstępy do formularza kontaktowego

Następnie dodaj trochę wypełnienia formularza kontaktowego za pomocą jednostki długości vw i cienia pola do pól formularza w następujący sposób:

Wypełnienie (pulpit): 3vw góra, 3vw dół, 5vw lewo, 5vw prawo
Wypełnienie (telefon): 5vh góra, 5vh dół, 3vh lewo, 3vh prawo

Cień przycisku: zobacz zrzut ekranu
Pozycja pozioma cienia pudełka: 2em
Pozycja pionowa cienia pudełka: 0.4em
Kolor cienia: rgba (245,104,69,0.29)