Kiedy tworzysz niestandardowy nagłówek dla swojego Witryna internetowa, korzystając z kreatora motywów Divi, znajdziesz idealny sposób na dodanie AAL (wezwania do działania). Jednym ze sposobów na to jest dodanie a formularz kontaktowy przewijanie. Pomoże to zachować ogólny wygląd nagłówka w czystości, zapewniając jednocześnie możliwość wprowadzania skontaktuj się z Tobą, bez konieczności przewijania w dół. W tym samouczku pokażemy, jak utworzyć plik formularz kontaktowy rozwijane przy użyciu kodu Divi i JQuery oraz CSS. Będziesz także mógł bezpłatnie pobrać plik JSON!
Chodźmy.
badanie
Zanim przejdziemy do samouczka, przyjrzyjmy się wynikom na różnych rozmiarach ekranu.
1. Przejdź do Divi Theme Builder i rozpocznij tworzenie globalnego nagłówka
Idź do Divi Theme Builder
Zacznij od przejścia do Konstruktora motywów Divi w zapleczu witryny WordPress.
Utwórz globalny nagłówek
Kliknij „Dodaj globalny nagłówek” i wybierz „Utwórz globalny nagłówek”, aby rozpocząć tworzenie niestandardowego globalnego nagłówka.
2. Zbuduj projekt nagłówka
Ustawienia sekcji
Kolor tła
Po wejściu do ogólnego szablonu nagłówka 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 wypełnienie z sekcji.
- Górna wyściółka: 0px
- Dolne wypełnienie: 0px
Pole cienia
Zastosuj również subtelny odcień pudełka.
- Pole Shadow Blur Strength: 50px
- Kolor cienia: rgba (0,0,0,0,15)
Dodaj nową linię
Struktura kolumny
Kontynuuj dodawanie nowego wiersza do sekcji przy użyciu następującej struktury kolumn:
zaklejania
Bez dodawania kolejnych modułów otwórz parametry linii i zmodyfikuj parametry 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 niestandardowe górne i dolne wypełnienie.
- Górna wyściółka: 1vw
- Wyściółka u dołu: 1vw
Główny element
I wyrównaj całą zawartość kolumn, dodając pojedynczą linię kodu CSS do głównego elementu wiersza.
align-items: center;
Kolumna 2 Indeks Z
Dbamy również o to, aby druga kolumna miała wyższą wartość indeksu z do celów reaktywnych.
- Indeks Z: 12
Dodaj moduł obrazu do kolumny 1
Pobierz logo
Czas zacząć dodawać moduły! Zacznij od modułu obrazu w kolumnie 1. Prześlij logo.
wyrównanie
Następnie zmień wyrównanie modułu.
- Wyrównanie obrazu: środek
zaklejania
Zmień także szerokość.
- Szerokość: 3vw (komputer stacjonarny), 5vw (tablet), 7vw (telefon)
Dodaj moduł menu do kolumny 2
Wybierz menu
W drugiej kolumnie dodamy moduł menu.
Usposobienie
Przejdź do zakładki projektowania modułu i zmień styl układu.
- Styl: wyśrodkowany
Ustawienia tekstu menu
Następnie zmień ustawienia tekstu w menu modułu.
- Czcionka menu: Otwórz bez
- Waga czcionki menu: częściowo pogrubiona
- Kolor tekstu menu: # 000000
- Rozmiar tekstu menu: 0.8vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
- Odstępy między literami w menu: 1px
Ustawienia tekstu menu rozwijanego
Następnie zmień kolor linii w menu rozwijanym.
- Kolor linii menu rozwijanego: # 007dff
ikony
Z kolorem ikony menu hamburger.
- Kolor ikony menu hamburgera: # 007dff
Dodaj moduł tekstowy 1 do kolumny 3
Dodaj kopię
Przejdźmy do trzeciego modułu! Dodaj moduł tekstowy z wybraną przez siebie kopią.
Kolor tła
Następnie dodaj kolor tła.
- Kolor tła: # 007dff
Ustawienia tekstu
Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia tekstu:
- Czcionka tekstu: Otwórz Sans
- Waga czcionki tekstu: pogrubiona
- Kolor tekstu: #ffffff
- Rozmiar tekstu: 0.8vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
- Wyrównanie tekstu: środek
zaklejania
Następnie zmodyfikuj parametry wymiarowania modułu.
- Szerokość: 33%
- Wyrównanie modułu: centrum
rozstaw
Następnie dodaj niestandardowe górne i dolne wypełnienie.
- Górna wyściółka: 0.8vw (komputer stacjonarny), 2vw (tablet i telefon)
- Wyściółka u dołu: 0.8vw (biurko), 2vw (tablet i telefon)
granica
I uzupełnij parametry modułu, dodając promień krawędzi.
- Wszystkie rogi: 100 pikseli
Dodaj moduł tekstowy 2 do kolumny 3
Dodaj symbol do obszaru zawartości
Przejdźmy do następnego modułu, czyli kolejnego modułu tekstowego. Dodaj następującą strzałkę w obszarze zawartości: „▼”.
Ustawienia tekstu
Przejdź do zakładki projektowania 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: środek
Indeks Z
Zwiększamy także indeks z modułu.
- Indeks Z: 11
Dodaj moduł formularza kontaktowego do kolumny 3
Możesz teraz dodać formularz kontaktowy tuż na dole modułu tekstowego zawierającego strzałkę. Moduł ten jest dość prosty w użyciu, więc będziesz musiał dostosować, które pola chcesz, aby były widoczne.
3. Dostosuj elementy, aby utworzyć formularz kontaktowy jednym kliknięciem
Dodaj wysokość kolumny 3
Gdy wszystkie mody są już na miejscu, czas na stworzenie efektu. Pierwszym krokiem do osiągnięcia pożądanego rezultatu jest otwarcie ustawień w kolumnie 3 i dodanie elastycznej niestandardowej wysokości w zakładce Zaawansowane.
Biuro:
height: 3vw;
tabletka:
height: 5vw;
komórkowy:
height: 6vw;
Dodaj klasę CSS do przycisku i strzałki
Następnie dodamy tę samą klasę CSS do pierwszych dwóch modułów tekstowych w kolumnie 3.
- Klasa CSS: pokaż-skontaktuj się
Dodaj klasę CSS do formularza kontaktowego
Będziemy również potrzebować niestandardowej klasy CSS dla modułu Formularz kontaktowy.
- Klasa CSS: skontaktuj się-moduł-formularza
Ukryj moduł Formularz kontaktowy
Kontynuuj, dodając dodatkową linię kodu CSS do głównego elementu modułu Formularz kontaktowy. Pozwoli nam to ukryć moduł przed kliknięciem.
display: none;
Dodaj moduł kodu do kolumny 3 za pomocą kodu JQuery i CSS
Aby utworzyć funkcję kliknięcia, będziemy potrzebować trochę kodu JQuery. Użyjemy również niestandardowego kodu CSS. Dodaj nowy moduł kodu do kolumny 2 z kodem. Upewnij się, że kod JQuery jest umieszczony między tagami skryptów, a kod CSS między tagami stylów.
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;}
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
Biuro
Co należy pamiętać
W tym artykule pokazaliśmy, jak dodać rozwijany formularz kontaktowy do niestandardowego nagłówka. To świetny sposób na wczesne wywołanie akcji.
