Jak dodać rozwijany formularz kontaktowy do globalnego nagłówka?

Kiedy tworzysz niestandardowy nagłówek dla swojej witryny, korzystając z kreatora motywów Divi, znajdziesz idealny sposób na dodanie CTA. Jednym ze sposobów, aby to zrobić, jest dodanie rozwijanego formularza kontaktowego. Pomoże to zachować ogólny wygląd nagłówka w czystości, zapewniając jednocześnie możliwość kontaktu bez konieczności przewijania. W tym samouczku pokażemy, jak utworzyć rozwijany formularz kontaktowy za pomocą Divi i kodu JQuery i CSS. 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 szablon globalnego nagłówka ZA DARMO

Aby położyć swoje ręce na darmowym szablonie globalnego nagłówka, 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!

1. Przejdź do Divi Theme Builder i zacznij budować globalny nagłówek

Przejdź do kreatora motywów Divi

Zacznij od przejścia do Divi Theme Builder na zapleczu swojej witryny WordPress.

Zbuduj globalny nagłówek

Kliknij „Dodaj globalny nagłówek” i wybierz „Zbuduj globalny nagłówek”, aby rozpocząć tworzenie niestandardowego globalnego nagłówka.

2. Zbuduj projekt nagłówka

Ustawienia sekcji

Kolor tła

Gdy znajdziesz się w szablonie nagłówka globalnego, zauważysz sekcję. Otwórz tę sekcję i użyj białego koloru tła.

• Kolor tła: #FFFFFF

Rozstaw

Następnie usuń domyślne górne i dolne dopełnienie sekcji.

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

Cień Pudełka

Zastosuj również subtelny cień w kształcie pudełka.

• Siła rozmycia cieni w pudełku: 50px
• Kolor cienia: rgba(0,0,0,0.15)

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 zmień ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 95%
• Maksymalna szerokość: 100%

Rozstaw

Następnie dodaj niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 1vw
• Dolna wyściółka: 1vw

Główny element

I wyrównaj całą zawartość kolumny, dodając jeden wiersz kodu CSS do głównego elementu wiersza.

align-items: center;

Kolumna 2 Indeks Z

Upewniamy się również, że druga kolumna ma wyższą wartość indeksu z, aby zapewnić responsywność.

• Indeks Z: 12

Dodaj moduł obrazu do kolumny 1

Prześlij logo

Czas zacząć dodawać moduły! Zaczynając od modułu obrazu w kolumnie 1. Prześlij logo.

Wyrównanie

Następnie zmień wyrównanie modułu.

• Wyrównanie obrazu: Środek

Rozmiary

Zmodyfikuj też szerokość.

• Szerokość: 3vw (komputer stacjonarny), 5vw (tablet), 7vw (telefon)

Dodaj moduł menu do kolumny 2

Wybierz menu

W drugiej kolumnie dodamy moduł menu.

Układ

Przejdź do zakładki projektu modułu i zmień styl układu.

• Styl: wyśrodkowany

Ustawienia tekstu menu

Następnie zmodyfikuj ustawienia tekstowe menu modułu.

• Czcionka menu: Otwórz Sans
• Grubość czcionki menu: pół pogrubiona
• Kolor tekstu menu: #000000
• Rozmiar tekstu w menu: 0,8vw (komputer), 2vw (tablet), 3vw (telefon)
• Odstępy między literami menu: 1px

Menu rozwijane Ustawienia tekstu

Następnie zmień kolor linii menu rozwijanego.

• Kolor linii menu rozwijanego: #007dff

Ikony

Wraz z kolorem ikony menu hamburgera.

• Kolor ikony menu Hamburger: #007dff

Dodaj moduł tekstowy 1 do kolumny 3

Dodaj kopię

Do trzeciego modułu! Dodaj moduł tekstowy z wybraną kopią.

Kolor tła

Następnie dodaj kolor tła.

• Kolor tła: #007dff

Ustawienia tekstu

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

• Czcionka tekstu: Otwórz Sans
• Grubość czcionki tekstu: pogrubiona
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 0,8vw (komputer), 2vw (tablet), 3vw (telefon)
• Wyrównanie tekstu: do środka

Rozmiary

Następnie zmodyfikuj ustawienia rozmiaru modułu.

• Szerokość: 33%
• Wyrównanie modułu: Środek

Rozstaw

Następnie dodaj niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 0,8vw (komputer stacjonarny), 2vw (tablet i telefon)
• Dolna wyściółka: 0,8vw (komputer stacjonarny), 2vw (tablet i telefon)

Granica

I uzupełnij ustawienia modułu, dodając trochę promienia obramowania.

• Wszystkie rogi: 100px

Dodaj moduł tekstowy 2 do kolumny 3

Dodaj symbol do pola zawartości

Przejdźmy do następnego modułu, którym jest kolejny moduł tekstowy. Dodaj następujący symbol strzałki do pola treści: „▼”.

Ustawienia tekstu

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

• Czcionka tekstu: Otwórz Sans
• Kolor tekstu: #007fff
• Rozmiar tekstu: 3vw
• Wysokość linii tekstu: 0em
• Wyrównanie tekstu: do środka

Indeks Z

Zwiększamy również indeks z modułu.

• Indeks Z: 11

Dodaj moduł formularza kontaktowego do kolumny 3

Dodaj pola wyboru o pełnej szerokości

Następnym i ostatnim modułem, którego potrzebujemy w trzeciej kolumnie, jest Moduł Formularza Kontaktowego. Dodaj wszystkie potrzebne pola o pełnej szerokości.

Dodaj tytuł

Użyj też tytułu.

Kolor tła

Następnie zmieniamy kolor tła.

• Kolor tła: #e7f2ff

Ustawienia pól

Następnie przejdź do zakładki projektowania modułu i zmień ustawienia pól.

• Kolor tła pól: #ffffff
• Kolor tekstu pól: #dddddd
• Kolor tekstu ostrości pól: #007dff
• Górna wyściółka pól: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Dolna wyściółka pól: 1vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
• Czcionka pól: Open Sans

• Rozmiar tekstu w polach: 0,7vw (komputer), 1,8vw (tablet), 3vw (telefon)

Ustawienia tekstu tytułu

Następnie zmodyfikuj ustawienia tekstu tytułu.

• Poziom nagłówka tytułu: H3
• Grubość czcionki tytułu: pogrubiona
• Wyrównanie tekstu tytułu: do środka
• Kolor tekstu tytułu: #007dff
• Rozmiar tekstu tytułu: 1vw (komputer), 2,5vw (tablet), 3,5vw (telefon)
• Wysokość wiersza tytułu: 1,6 em

Ustawienia tekstu Captcha

Wraz z ustawieniami tekstu captcha.

• Czcionka Captcha: Otwórz Sans
• Kolor tekstu Captcha: #007dff

Ustawienia przycisków

Kontynuuj, stylizując przycisk.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 0,8vw (komputer), 2vw (tablet), 3vw (telefon)
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #007dff
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 100px

• Czcionka przycisku: Otwórz Sans
• Waga czcionki przycisku: pogrubiona

• Górny margines przycisku: 1vw
• Górna wyściółka przycisków: 1vw (komputer stacjonarny), 2vw (tablet i telefon)
• Dolna wyściółka przycisków: 1vw (komputer stacjonarny), 2vw (tablet i telefon)
• Wypełnienie lewego przycisku: 2vw (komputer stacjonarny), 7vw (tablet i telefon)
• Wypełnienie prawego przycisku: 2vw (komputer stacjonarny), 7vw (tablet i telefon)

Rozstaw

Następnie użyj niestandardowych wartości dopełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka: 4vw (komputer stacjonarny), 6vw (tablet i telefon)
• Dolna wyściółka: 4vw (komputer stacjonarny), 6vw (tablet i telefon)
• Lewa wyściółka: 2vw (komputer stacjonarny), 6vw (tablet i telefon)
• Prawa wyściółka: 2vw (komputer stacjonarny), 6vw (tablet i telefon)

Granica

Następnie zmodyfikuj ustawienia obramowania.

• Wszystkie rogi: 10px

Główny element, tytuł kontaktu i CSS Captcha

Uzupełnij ustawienia modułu, dodając drobne zmiany CSS do zakładki Zaawansowane.

Główny element:

border-radius: 20px;

Tytuł kontaktu:

margin-bottom: 1vw;

Captcha:

margin-top: 1.5vw;

3. Dostosuj elementy, aby utworzyć formularz kontaktowy po kliknięciu

Dodaj wysokość kolumny 3

Gdy masz już wszystkie moduły na swoim miejscu, nadszedł czas na stworzenie efektu. Pierwszym krokiem do osiągnięcia pożądanego wyniku jest otwarcie ustawień kolumny 3 i dodanie responsywnej niestandardowej wysokości w zakładce Zaawansowane.

Pulpit:

height: 3vw;

Tablet:

height: 5vw;

Telefon:

height: 6vw;

Dodaj klasę CSS do przycisku i strzałki

Następnie dodamy tę samą klasę CSS do obu pierwszych modułów tekstowych w kolumnie 3.

• Klasa CSS: pokaż-kontakt

Dodaj klasę CSS do formularza kontaktowego

Będziemy potrzebować również niestandardowej klasy CSS dla modułu formularza kontaktowego.

• Klasa CSS: kontakt-formularz-moduł

Ukryj moduł formularza kontaktowego

Kontynuuj, dodając jedną dodatkową linię kodu CSS do głównego elementu modułu Contact Form. Pozwoli nam to ukryć moduł przed kliknięciem.

display: none;

Dodaj moduł kodu do kolumny 3 za pomocą JQuery i kodu CSS

Aby utworzyć funkcję kliknięcia, potrzebujemy kodu JQuery. Użyjemy też niestandardowego kodu CSS. Dodaj nowy moduł kodu do kolumny 2 z kodem. Upewnij się, że kod JQuery umieszczasz między tagami skryptu, a kod CSS między tagami stylu.

jQuery(function($){
$(".show-contact").click(function() {
$('.contact-form-module').slideToggle();
});
});

.show-contact {
cursor: pointer;
}

.et-menu>li {
padding-left: 0.7vw !important;
padding-right: 0.7vw !important;
}

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 dodać rozwijany formularz kontaktowy do niestandardowego nagłówka. To świetny sposób na rozpoczęcie akcji od samego początku. Udostępniliśmy również plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, 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.