Jak bezproblemowo dołączyć formularz kontaktowy w kolumnie wsuwanej w sekcji Divi Hero?

Zastanawiając się nad sposobami włączenia wezwania do działania w projekcie strony, możesz rozważyć umieszczenie formularza kontaktowego w sekcji bohaterów. Takie podejście pozwala ludziom na natychmiastowy kontakt z Tobą bez konieczności dalszego poruszania się po Twojej witrynie. Jeśli szukasz bezproblemowego sposobu, aby to zadziałało w Divi, pokochasz ten post. W tym samouczku pokażemy, jak dodać formularz kontaktowy w kolumnie wsuwanej do sekcji bohatera, korzystając tylko z wbudowanych opcji Divi. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz układ sekcji bohatera formularza kontaktowego kolumny ZA DARMO

Aby położyć ręce na układzie sekcji bohatera formularza kontaktowego w bezpłatnej kolumnie, 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.

POBIERANIE

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!

Zacznijmy odtwarzać

Dodaj nową sekcję

Kolor tła

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i zmień kolor tła.

• Kolor tła: #ff8949

Zdjęcie w tle

Następnie przesyłamy wzór tła, który jest częścią pakietu układu doradcy finansowego. Możesz znaleźć ten obraz tła w folderze, który udało Ci się pobrać na początku tego postu.

• Rozmiar obrazu tła: Dopasuj
• Pozycja obrazu tła: środek

Rozstaw

Przejdź do zakładki projektu sekcji i usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Przepełnienia

Uzupełnij ustawienia sekcji, ukrywając przepełnienia w zakładce Zaawansowane. Dzięki temu animacje, które dodamy później, nie wyjdą poza kontener sekcji.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmodyfikuj ustawienia rozmiaru w następujący sposób:

• Wyrównaj wysokości kolumn: Tak
• Szerokość: 80% (komputer stacjonarny), 100% (tablet i telefon)
• Maksymalna szerokość: 1380px
• Wyrównanie wierszy: w prawo

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Ustawienia kolumny 1

Rozstaw

Następnie otwórz ustawienia kolumny 1 i zmodyfikuj ustawienia odstępów na różnych rozmiarach ekranu.

• Górna wyściółka: 22%
• Dolna wyściółka: 22%
• Lewa wyściółka: 10% (tylko tablet i telefon)
• Prawa wyściółka: 10% (tylko tablet i telefon)

Ustawienia kolumny 2

Kolor tła

Następnie otworzymy ustawienia kolumny 2 i użyjemy białego koloru tła.

• Kolor tła: #ffffff

Animacja

Uzupełnimy ustawienia kolumny 2, stosując następujące ustawienia animacji:

• Kierunek animacji: w lewo (komputer), w górę (tablet i telefon)
• Czas trwania animacji: 1500 ms
• Intensywność animacji: 70%
• Początkowe krycie animacji: 100%

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość H1

Czas na dodanie modułów, zaczynając od pierwszego modułu tekstowego w kolumnie 1. Dodaj wybrane przez siebie treści H1.

Ustawienia tekstu H1

Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu H1 w następujący sposób:

• Czcionka nagłówka: Oswald
• Styl czcionki nagłówka: wielkie litery
• Kolor tekstu nagłówka: #ffffff
• Rozmiar tekstu nagłówka: 120px (komputer), 70px (tablet), 60px (telefon)

Rozmiary

Zmieniamy również ustawienia rozmiaru modułu.

• Szerokość: 75% (komputer stacjonarny), 100% (tablet i telefon)
• Wyrównanie modułu: do lewej

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj treść opisu

Przejdźmy do następnego modułu, którym jest kolejny moduł tekstowy. Dodaj wybraną treść opisu.

Ustawienia tekstu

Przejdź do zakładki projektu modułu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Otwórz Sans
• Kolor tekstu: #ffffff
• Wysokość linii tekstu: 1,9 em

Rozmiary

Zmodyfikuj również ustawienia rozmiaru.

• Szerokość: 75% (komputer stacjonarny), 100% (tablet i telefon)
• Wyrównanie modułu: do lewej

Dodaj moduł przycisku do kolumny 1

Dodaj kopię

Ostatnim modułem, którego potrzebujemy w kolumnie 1, jest moduł przycisku. Dodaj wybraną kopię.

Ustawienia przycisków

Przejdź do zakładki projektowania modułu i zmień ustawienia przycisków w następujący sposób:

• Użyj niestandardowych stylów dla przycisku: Tak
• Kolor tekstu przycisku: #ffffff
• Promień obramowania przycisku: 1px

• Czcionka przycisku: Oswald
• Styl czcionki przycisku: wielkie litery

Dodaj moduł Blurb do kolumny 2

Dodaj zawartość

Do drugiej kolumny. Tam pierwszym modułem, którego potrzebujemy, jest moduł Blurb. Dodaj wybrany przez siebie tytuł.

Wybierz ikonę

Następnie wybierz ikonę.

Ustawienia ikon

Przejdź do zakładki projektowania modułu i zmień ustawienia ikon w następujący sposób:

• Kolor ikony: #ffd8c6
• Umieszczenie ikon: góra
• Wyrównanie ikon: środek
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 250px (komputer), 150px (tablet i telefon)

Ustawienia tekstu tytułu

Następnie zmodyfikuj ustawienia tekstu tytułu.

• Poziom nagłówka tytułu: H2
• Czcionka tytułu: Oswald
• Styl czcionki tytułu: wielkie litery
• Wyrównanie tekstu tytułu: do środka
• Kolor tekstu tytułu: #ff8949
• Rozmiar tekstu tytułu: 38px

Rozstaw

Dodaj też lewą i prawą wyściółkę.

• Lewa wyściółka: 11%
• Prawa wyściółka: 11%

Animacja

I uzupełnij moduł, dodając następujące ustawienia animacji:

• Kierunek animacji: w dół
• Czas trwania animacji: 1100 ms
• Opóźnienie animacji: 400 ms
• Początkowe krycie animacji: 100%

Dodaj moduł formularza kontaktowego do kolumny 2

Obróć pola o pełną szerokość

Przejdźmy do ostatniego modułu, którym jest Moduł Formularza Kontaktowego. Otwórz pojedynczo pola nazwy i adresu e-mail i ustaw je na pełną szerokość w ustawieniach układu.

• Zrób pełną szerokość: Tak

Kolor tła

Następnie wróć do ogólnych ustawień modułu Formularza Kontaktowego i dodaj kolor tła.

• Kolor tła: #f7f7f7

Ustawienia pól

Przejdź do karty projektu i wprowadź kilka zmian w ustawieniach pól.

• Kolor tła pól: #ffffff
• Kolor tekstu pól: #ff8949
• Górny margines pola: 15px
• Margines dolny pól: 15px
• Górne dopełnienie pól: 20px
• Dolne wypełnienie pól: 20px

• Czcionka pól: Oswald
• Styl czcionki pól: wielkie litery
• Wyrównanie tekstu pól: do środka
• Rozmiar tekstu pól: 21px

Ustawienia przycisków

Następnie dostosuj odpowiednio styl przycisku:

• Użyj niestandardowych stylów dla przycisku: Tak
• Kolor tekstu przycisku: #ff8949
• Promień obramowania przycisku: 1px

• Czcionka przycisku: Oswald
• Styl czcionki przycisku: wielkie litery

Rozmiary

Upewniamy się również, że w ustawieniach rozmiaru szerokość wynosi „100%”.

• Szerokość: 100%

Rozstaw

Przejdź do ustawień odstępów i zastosuj niestandardowe wartości dopełnienia.

• Górna wyściółka: 14%
• Dolna wyściółka: 14%
• Lewa wyściółka: 12%
• Prawa wyściółka: 12%

Animacja

Następnie użyj następujących ustawień animacji:

• Styl animacji: slajd
• Kierunek animacji: w górę
• Czas trwania animacji: 1100 ms
• Opóźnienie animacji: 400 ms
• Początkowe krycie animacji: 100%

Pozycja

I uzupełnij ustawienia modułu (i samouczek), zmieniając położenie modułu tylko na pulpicie:

• Pozycja: bezwzględna (komputer), domyślna (tablet i telefon)
• Lokalizacja: dolny środek

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak bezproblemowo umieścić formularz kontaktowy w sekcji bohatera. Mówiąc dokładniej, stworzyliśmy wsuwany formularz kontaktowy w kolumnie, który świetnie wygląda na wszystkich rozmiarach ekranu. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.