Trzeba dodać A formularz kontaktowy do globalnego nagłówka?
Kiedy tworzysz niestandardowy nagłówek dla swojego Witryna internetowa Korzystając z Divi Theme Builder, szukasz idealnego sposobu na dodanie wezwania do działania (CTA). 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ść wejścia skontaktuj się bez konieczności przewijania.
W tym samouczku pokażemy, jak utworzyć plik formularz kontaktowy przewijane przy użyciu kodu Divi i JQuery oraz CSS.
Zacznijmy!
badanie
Zanim zagłębimy się w ten samouczek, spójrzmy na podgląd wyniku, który otrzymamy.
Utwórz globalny nagłówek
Przejdź do kreatora motywów
Przejdź do Theme Builder z menu Divi obecnego na pulpicie WordPress i kliknij „Dodaj globalny nagłówek”.
Wybierz „Utwórz globalny nagłówek”.
Utwórz styl nagłówka
Ustawienia sekcji
Kolor tła
W edytorze szablonów zauważysz sekcję. Otwórz tę sekcję i zmień kolor tła.
- Tło: #FFFFFF
rozstaw
Następnie usuń z sekcji domyślne górne i dolne marginesy wewnętrzne.
- Wierzchołek marginesu wewnętrznego: 0px
- Dolny margines wewnętrzny: 0px
Pole cienia
Zastosuj również subtelny cień w pudełku.
- Siła niebieskiego cienia pudełka: 50px
- Kolor czcionki napisów: rgba(0,0,0,0.15)
Dodaj nową linię
Struktura kolumny
Dodaj nowy wiersz do sekcji, korzystając z następującej struktury kolumn:
zaklejania
Bez dodawania żadnych modułów otwórz ustawienia wiersza i zmień ustawienia rozmiaru w następujący sposób:
- Użyj niestandardowej szerokości rynny: Tak
- Rozstaw kolumn: 1
- Zharmonizuj wysokości kolumn: Tak
- Maksymalna szerokość: 95%
- Maksymalna szerokość: 100%
rozstaw
Następnie dodaj niestandardowe górne i dolne wypełnienie.
- Szczytowy margines wewnętrzny: 1vw
- Dolny margines wewnętrzny: 1vw
główny element
Wyrównaj całą zawartość kolumny, dodając pojedynczy wiersz kodu CSS do głównego elementu wiersza.
align-items: center;
Indeks dolny Z kolumny 2
Upewniamy się również, że druga kolumna ma wyższą wartość wskaźnika Z, aby zapewnić responsywny projekt.
- Indeks Z: 12
Dodaj moduł obrazu do kolumny 1
Pobierz logo
Czas zacząć dodawać moduły! Zaczynając od modułu Obraz w kolumnie 1. Prześlij logo.
wyrównanie
Następnie zmień wyrównanie modułu.
- Wyrównanie obrazu: wyśrodkowane
zaklejania
Zmień także szerokość.
- Maksymalna szerokość: 3vw (komputer), 5vw (tablet), 7vw (telefon)
Dodaj moduł menu do kolumny 2
Wybierz menu
W drugiej kolumnie dodamy moduł Menu.
Usposobienie
Przejdź do karty Styl modułu i zmień styl układu.
- Style: wyśrodkowany
Ustawienia tekstu menu
Następnie zmień ustawienia tekstu w menu modułu.
- Menu czcionek: Otwórz Brak
- Menu przyciemnienia: pół pogrubione
- Kolor tekstu menu: #000000
- Rozmiar tekstu w menu: 0,8 vw (komputer), 2 vw (tablet), 3 vw (telefon)
- Odstępy między literami menu: 1px
Ustawienia tekstu w menu rozwijanym
Następnie zmień kolor linii z menu rozwijanego.
- Kolor linii menu rozwijanego: #007dff
ikony
Zmień kolor ikony menu hamburgera.
- Kolor ikony menu hamburgera: #007dff
Dodaj moduł tekstowy do kolumny 3
Ajouter un wiadomość
Do trzeciego modułu! Dodaj moduł tekstowy z wybraną wiadomością.
Kolor tła
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
- Delikatny tekst jasny: pogrubiony
- Kolor tekstu Tekst: #ffffff
- Tekst Rozmiar tekstu: 0,8 vw (komputer), 2 vw (tablet), 3 vw (telefon)
- Wyrównanie tekstu: wyśrodkowane
zaklejania
Następnie zmodyfikuj parametry wymiarowania modułu.
- Maksymalna szerokość: 33%
- Wyrównanie modułu: Środek
rozstaw
Następnie dodaj niestandardowe wyściółki górne i dolne.
- Górny margines wewnętrzny: 0,8 vw (komputer stacjonarny), 2 vw (tablet i telefon)
- Niski margines wewnętrzny: 0,8 vw (komputer), 2 vw (tablet i telefon)
Granica
I uzupełnij parametry modułu, dodając promień krawędzi.
- Zaokrąglony prostokąt: 100px
Dodaj kolejny moduł tekstowy do kolumny 3
Dodaj symbol do obszaru zawartości
Przejdźmy do kolejnego modułu, który jest kolejnym modułem tekstowym. Dodaj następujący symbol strzałki 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
- Tekst Rozmiar tekstu: 3vw
- Wysokość wiersza tekstu: 0em
- Wyrównanie tekstu: wyśrodkowane
Indeks Z
Zwiększmy także indeks Z modułu.
- Indeks Z: 11
Dodaj moduł Formularz kontaktowy do kolumny 3
Dodaj wybrane pola o pełnej szerokości
Kolejnym i ostatnim modułem, który potrzebujemy w trzeciej kolumnie, jest moduł formularza kontaktowego. Dodaj dowolne potrzebne pola o pełnej szerokości.
Dodaj tytuł
Użyj również tytułu.
Kolor tła
Następnie zmieńmy kolor tła.
- Kolor tła: #e7f2ff
Ustawienia pola
Przejdźmy do zakładki Styl modułu i zmieńmy ustawienia pól.
- Pola koloru tła: #ffffff
- Kolor tekstu pola: #dddddd
- Kolor tekstu fokusa: #007dff
- Pola wypełniające Vertex: 1vw (komputer), 2vw (tablet), 3vw (telefon)
- Dolne pola wypełnienia: 1vw (komputer), 2vw (tablet), 3vw (telefon)
- Pola czcionek: otwarte Brak
- Pola Rozmiar tekstu: 0,7 vw (komputer), 1,8 vw (tablet), 3 vw (telefon)
Ustawienia tekstu tytułowego
Edytuj ustawienia tekstu tytułu.
- Wstaw nagłówek trzeci: H3
- Tytuł miękkiego światła: pogrubiony tekst
- Wyrównanie tekstu: wyśrodkowane
- Kolor tekstu tytułu: #007dff
- Tytuł Rozmiar tekstu: 1 vw (komputer), 2,5 vw (tablet), 3,5 vw (telefon)
- Wysokość wiersza tytułu: 1,6 em
Ustawienia tekstu Captcha
Z ustawieniami tekstu captcha.
- Czcionka Captcha: Open Sans
- Kolor tekstu Captcha: #007dff
Ustawienia przycisków
Kontynuuj, dostosowując przycisk.
- Użyj niestandardowych stylów dla przycisku: Tak
- Rozmiar tekstu przycisku: 0,8 vw (komputer), 2 vw (tablet), 3 vw (telefon)
- Kolor tekstu przycisku: #ffffff
- Przycisk w tle: #007dff
- Przycisk szerokości obramowania: 0 pikseli
- Promień obramowania przycisku: 100 pikseli
- Przycisk Czcionka: Otwórz Brak
- Przycisk miękkiego światła: pogrubiony tekst
- Margines przycisku: 1vw
- Górny przycisk wyściółki: 1vw (komputer), 2vw (tablet i telefon)
- Dolny przycisk wyściełania: 1vw (komputer), 2vw (tablet i telefon)
- Przycisk lewego panelu: 2vw (komputer), 7vw (tablet i telefon)
- Prawy przycisk Pad: 2vw (komputer), 7vw (tablet i telefon)
rozstaw
Użyj niestandardowych wartości dopełnienia na różnych rozmiarach ekranu.
- Szczytowy zapas wewnętrzny: 4vw (komputer), 6vw (tablet i telefon)
- Dolny margines wewnętrzny: 4vw (komputer), 6vw (tablet i telefon)
- Lewy margines wewnętrzny: 2vw (komputer), 6vw (tablet i telefon)
- Prawy margines wewnętrzny: 2vw (komputer stacjonarny), 6vw (tablet i telefon)
Granica
Następnie zmień ustawienia obramowania.
- Zaokrąglony prostokąt wejściowy: 10px
Główny element, tytuł kontaktu i kod CSS Captcha
Uzupełnij ustawienia modułu, dodając drobne zmiany CSS do zakładki Zaawansowane.
Główny element:
| 01 | border-radius: 20px; |
Tytuł skontaktuj się :
| 01 | margin-bottom: 1vw; |
Captcha:
| 01 | margin-top: 1.5vw; |
Dostosuj elementy, aby jednym kliknięciem stworzyć formularz kontaktowy
Dodaj wysokość kolumny 3
Gdy masz już wszystkie moduły na swoim miejscu, nadszedł czas na stworzenie efektu. Pierwszym krokiem w kierunku uzyskania pożądanego rezultatu jest otwarcie ustawień 3 kolumn i dodanie niestandardowej wysokości responsywnej w zakładce Zaawansowane.
Biurko :
| 01 | height: 3vw; |
tabletka:
| 01 | height: 5vw; |
Połączenie:
| 01 | 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 potrzebować również niestandardowej klasy CSS dla modułu formularza kontaktowego.
- Klasa CSS: kontakt-formularz-moduł
Ukryj moduł formularza kontaktowego
Kontynuuj dodając dodatkową linię kodu CSS do głównego elementu modułu formularza kontaktowego. Pozwoli nam to ukryć moduł przed kliknięciem.
| 01 | display: none; |
Dodaj moduł kodu do kolumny 3 za pomocą kodu JQuery i CSS
Aby stworzyć funkcję kliknięcia, będziemy potrzebować kodu JQuery. Użyjemy również niestandardowego kodu CSS. Dodaj nowy moduł kodu do kolumny 2 z kodem. Pamiętaj, aby umieścić kod JQuery 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;
}
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się po raz ostatni wynikowi.
Wnioski
W tym artykule pokazaliśmy, jak dodać rozwijany formularz kontaktowy do niestandardowego nagłówka.
Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.
