Czy chciałbyś stworzyć formularz kontaktowy w Divi, który pojawia się po kliknięciu przycisku?
W tym samouczku Divi pokażemy, jak utworzyć plik formularz kontaktowy który pojawia się po kliknięciu przycisku używającego wyłącznie Divi, kodu jQuery i kodu CSS.
Przeczytaj także nasz przewodnik na temat: Divi: Jak stworzyć przyklejoną stopkę z efektem „Odsłoń”
To świetny sposób na zachowanie odwiedzający swój strona internetowa skoncentrował się na działaniu, do którego się zobowiązali za jednym kliknięciem przycisku. Nie przenosi ich na inną stronę.
badanie
Poniżej możesz rzucić okiem na to, co będziemy tworzyć, a następnie przejść do samouczka!
Podgląd na PC
Podgląd na telefonie i tablecie
Utwórz nową stronę z predefiniowanym układem
Zacznijmy od użycia predefiniowanego układu z biblioteki Divi. W tym przykładzie użyjemy strony kontaktowej Pakiet układu produktów kosmetycznych .
Dodaj nową stronę do swojej Witryna internetowa i nadaj mu tytuł, a następnie wybierz opcję „Użyj Divi Buildera”.
W tym przykładzie użyjemy gotowego układu z biblioteki Divi, więc wybierz 'Wybierz układ".
Znajdź i wybierz stronę główną układu 'Firma zajmująca się projektowaniem wnętrz".
Wybierz „Wybierz układ', aby dodać układ do swojej strony.
Jesteśmy teraz gotowi do kontynuowania naszego samouczka.
Utwórz sekcję za pomocą modułu przycisku
Pierwszą rzeczą, którą będziemy musieli zrobić, to dodać nową sekcję, w której umieścimy przycisk umożliwiający formularz kontaktowy zjawić się.
Zobacz także: Divi: Jak stworzyć niestandardową stopkę
Wystarczy dodać sekcję standardową
Następnie wybierz wiersz z jedną kolumną.
Gdy to zrobisz, dodaj do niego moduł Button.
Możesz dowolnie dostosować przycisk, ale musisz upewnić się, że adres URL przycisku zaczyna się od „#”, po którym następuje coś innego. Nie możesz po prostu zostawić go pustego lub po prostu użyć znaku „#”. Dodając „#” i tekst, strona nie przesunie się po kliknięciu przycisku. Jeśli zostawisz to pole puste, strona odświeży się po kliknięciu. A jeśli użyjesz tylko „#”, zostaniesz przekierowany na górę strony.
Następną ważną rzeczą, którą musimy zrobić, jest przypisanie do przycisku klasy CSS. Użyjemy tej klasy CSS w dalszej części tego artykułu w kodzie jQuery, aby upewnić się, że formularz kontaktowy pojawi się po kliknięciu. Klasa, którą będziemy musieli przypisać do przycisku, to po prostu „przycisk”.
- Klasa CSS: przycisk
Utwórz formularz kontaktowy w wersji na komputery PC
Następną rzeczą, którą musimy zrobić, to utworzyć formularz kontaktowy na pulpicie, który pojawi się, gdy ktoś kliknie przycisk, który stworzyliśmy w poprzedniej części tego artykułu. W dalszej części tego artykułu pokażemy również, jak stworzyć wersję mobilną.
Dodaj nową sekcję standardową
Zacznij od dodania nowej sekcji standardowej do strony, nad którą pracujesz. W ustawieniach sekcji przejdź do zakładki Zaawansowane dodaj "popup" do pola Klasy CSS.
Przewiń w dół tę samą kartę i umieść następujące wiersze kodu CSS w polu Przed podkategorii Niestandardowy CSS:
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;
Dodając to, zapewniamy, że sekcja zajmuje całą zakładkę. Możesz dostosować kolor tła w kodzie CSS, aby utworzyć żądaną nakładkę tła. W tym przypadku używamy koloru czarnego z pewną przezroczystością. W tej samej zakładce dodaj również następujący wiersz kodu CSS do głównego elementu:
display: none;
Ostatnią rzeczą, jaką będziemy musieli zrobić w zakładce Zaawansowane, jest dezaktywacja sekcji na telefonie i tablecie w podkategorii Widoczność.
Dodaj wiersz do dwóch kolumn
Kontynuuj, dodając wiersz z dwiema kolumnami i przejdź do zakładki Styl.
- Użyj niestandardowej szerokości rynny: TAK
- Maksymalna szerokość: 1291px
Wprowadź parametry każdej z kolumn.
Zmodyfikuj marginesy wewnętrzne (Górny, Lewy i Prawy) w następujący sposób:
- Margines wewnętrzny (górny, lewy, prawy): 30px
Zakończ przechodząc do zakładki Zaawansowane. W głównym elemencie dodaj następujące wiersze kodu CSS:
transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;
Dodaj pierwszy moduł tekstowy
Po wprowadzeniu wszystkich zmian w sekcji i wierszu nadszedł czas na dodanie różnych modułów, które chcesz wyświetlić.
Pierwszą rzeczą, którą dodamy, jest tytuł, który się pojawi. Zacznij od dodania nowego modułu Tekst do pierwszej kolumny wiersza, wpisz tekst w zakładce Treść i przejdź do zakładki Styl.
W zakładce Styl zastosowaliśmy następujące ustawienia dla podkategorii Tekst:
- Czcionka nagłówka: Homar
- Miękkie światło nagłówek: pogrubiony tekst
- Wyrównanie tekstu: pogrubienie
- Kolor tekstu nagłówka: #002282
- Rozmiar tekstu nagłówka: 37px
- Wysokość linii nagłówka: 1,7 em
Dodaj drugi moduł tekstowy
Kontynuuj, dodając nowy moduł Tekst i wpisz tekst, który ma się pojawić w zakładce Treść. Przejdź na kartę Styl i zastosuj następujące ustawienia do podkategorii Tekst:
- Wyrównanie tekstu: do środka
- Czcionka tekstu: Arial
- Rozmiar tekstu: 13px
- Kolor tekstu Tekst: #002282
- Wysokość wiersza tekstu: 1,7 em
Dodaj moduł „Obserwuj nas w sieciach społecznościowych”
Następnie dodamy również moduł „Obserwuj nas w mediach społecznościowych” do pierwszej kolumny. W tym przypadku wybraliśmy trzy ikony mediów społecznościowych; Facebook, Twitter i Instagram.
Ostatnią rzeczą, którą musimy zrobić, to dodać dopełnienie (po lewej) do tego modułu w zakładce Zaawansowane. Dodaj następujący wiersz kodu CSS do głównego elementu:
padding-left: 40%;
Dodaj moduł formularza kontaktowego
Następnie możemy przejść do drugiej kolumny w rzędzie. W tej kolumnie pierwszą rzeczą, którą umieścimy, jest moduł Formularz kontaktowy.
W tym przykładzie wybraliśmy tylko dwa pola; imię i nazwisko oraz adres e-mail.
Po dodaniu modułu Formularz kontaktowy przejdź do karty Styl modułu Formularz kontaktowy i wprowadź następujące zmiany w podkategorii Pola:
- Pola koloru tekstu: #002282
- Pola rozmiaru tekstu: #002282
- Wysokość linii pola: 1,7 em
Na tej samej karcie wprowadź następujące zmiany w podkategorii Przycisk:
- Użyj niestandardowych stylów dla przycisku: Tak
- Przycisk rozmiaru tekstu: 20
- Kolor tekstu przycisku: #FFFFFF
- Przycisk tła: #0086c4
Zobacz także: Jak stworzyć przesuwane i przesuwane menu w DIVI
- Szerokość obramowania przycisku: 2
- Przycisk promienia granicznego: 3
Przejdź do zakładki Zaawansowane i dodaj margines 5%.
Dodaj moduł podsumowania
Kolejną rzeczą, którą będziemy musieli dodać do drugiej kolumny, jest moduł Podsumowanie. Jedyne, do czego potrzebujemy tego modułu, to ikona wyjścia w prawym górnym rogu wyskakującego okienka. Wybierz następną ikonę z listy ikon i pozostaw wszystko inne puste.
Następnie przejdź do zakładki Zaawansowane i wpisz „zamknij” jako klasę CSS.
Na tej samej karcie dodaj następujące wiersze kodu do głównego elementu niestandardowej podkategorii CSS:
position: absolute;
top: -45px;
right: -30px;
cursor: pointer;
Zastosuj wypełnienie gradientowe do linii
Na koniec dodamy do linii ładne tło gradientowe. Otwórz ustawienia i zastosuj następujące zmiany w opcji gradientowego tła:
- Pierwszy kolor gradientu: #FFFFFF
- Drugi kolor gradientu: #0c71c3
- Typ gradientu: liniowy
- Kierunek gradientu: 124 stopni
- Pozycja wyjściowa: 50%
- Pozycja końcowa: 50%
Utwórz formularz kontaktowy na tablet i telefon
Teraz, gdy stworzyliśmy wersję na PC, wersja na tablety i telefony będą działać znacznie szybciej. Większość modułów, których użyliśmy w wersji na PC, jest taka sama jak w wersji mobilnej.
Powiel poprzednią sekcję
Zamiast wyłączać ją dla telefonu i tabletu, tak jak to zrobiliśmy dla wersji PC, wyłączymy wersję PC w podkategorii Widoczność w ustawieniach modułu:
Zmodyfikuj kod CSS modułu Podsumowanie
Zamiast używać kodu na komputery stacjonarne, użyj następującego:
position: absolute;
top: -15px;
right: -25px;
cursor: pointer;
Zastosuj wypełnienie gradientowe do linii
W wersji mobilnej stosujemy różne ustawienia gradientowego tła linii:
- Pierwszy kolor gradientu: #FFFFFF
- Drugi kolor gradientu: #0c71c3
- Typ gradientu: liniowy
- Kierunek gradientu: 180 stopni
- Pozycja wyjściowa: 40%
- Pozycja końcowa: 40%
Dodaj kod jQuery
Ostatnią rzeczą, jaką musimy zrobić w tym samouczku, jest dodanie kodu jQuery. Dodaj moduł Code i wstaw następujący kod JQuery:
<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>
Wynik
Jeśli postępujesz zgodnie z komunikatem krok po kroku, powinieneś być w stanie uzyskać następujący wynik na komputerze:
Oraz następujący wynik na tabletach i telefonach:
Pobierz DIVI teraz !!!
Wnioski
W tym artykule pokazaliśmy, jak utworzyć formularz kontaktowy jednym kliknięciem. Skorzystaj z tej metody, aby skontaktować się ze swoim odwiedzający jest subtelny, ale skuteczny.
Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
