Każda strona internetowa potrzebuje sekcji kontaktowej, ale to nie znaczy, że musisz iść na standardowy projekt. Dzięki efektom przewijania Divi możesz stworzyć pływającą sekcję kontaktów, która będzie się wyróżniać. Popraw interakcję użytkownika z pionowo przewijanym układem sekcji kontaktów, który zaprosi odwiedzających do interakcji z Twoją formularz kontaktowy. W tym artykule pokażemy, jak utworzyć pływającą sekcję kontaktów o pełnej szerokości, którą można dodać do dowolnej strony. Możesz nawet dodać go na górze stopki obejmującej całą witrynę za pomocą Divi Theme Builder.
Poniżej znajdziesz darmowy plik do pobrania z układem JSON do pobrania we własnej bibliotece Divi. Dołączyliśmy również szablon PSD, aby pomóc Ci odtworzyć tło mapy, a także pinezkę mapy SVG, dzięki czemu możesz dostosować ją za pomocą własnych kolorów.
Utwórz strukturę elementu
W tym projekcie użyjemy obrazu tła, który jest reprezentacją na mapie Google lokalizacji, którą chcesz zaprezentować. Możesz to zrobić za pomocą Photoshopa lub dowolnego innego edytora obrazów.
Dodaj nową sekcję
Nadszedł czas, aby zacząć tworzyć sekcję pływających kontaktów za pomocą Divi Builder! Pierwszą rzeczą, którą zrobimy, jest otwarcie nowej lub istniejącej strony i dodanie nowej sekcji.
Na karcie zawartości dodaj tło mapy utworzonej w programie Photoshop.
- Obraz w tle: zmodyfikowana mapa
rozstaw
Następnie dostosuj ustawienia odstępów między sekcjami na karcie projektu.
- Górny i dolny margines: 50vh
- Wyściółka u dołu: 0vw
widoczność
Następnie ustaw przelewy na widoczne.
- Przelew poziomy i pionowy: widoczny
Pozycja
Na koniec ustaw indeks Z sekcji na 10.
- Indeks Z: 10
Dodaj nową linię
Struktura kolumny
Nadszedł czas, aby dodać kilka rzeczy. Najpierw dodaj wiersz z 2 kolumnami.
zaklejania
Otwórz parametry linii i dostosuj rozmiar w następujący sposób.
- Szerokość
- Biuro: 90%
- Tablet i telefon: 80%
- Maksymalna szerokość: 90%
widoczność
Kliknij kartę Zaawansowane, a następnie dostosuj przepełnienia.
- Przelew poziomy i pionowy: widoczny
Pozycja
Uzupełnij ustawienia wiersza, modyfikując ustawienia pozycji.
- Pozycja: względna
- Przesunięcie Początek: lewy górny róg
- Przesunięcie pionowe
- Pulpit: -8vw
Ustawienia kolumny 1
Tło
Przed dodaniem modułów będziemy musieli stylizować poszczególne kolumny. Dodaj kolor tła do kolumny 1.
- Jednolity kolor: # 25274d
Rozstaw
Następnie dostosuj ustawienia odstępów.
- Wyściółka górna i dolna
- Komputer stacjonarny i tablet: 7vw
- Wyściółka lewa i prawa
- Pulpit: 3vw
- Tablet i telefon: 6vw
Granica
Następnie dodaj zaokrąglone rogi do ustawień ramki.
- Zaokrąglone rogi: 10 pikseli we wszystkich czterech rogach
Przewiń efekty
Na koniec, użyj trochę ruchu pionowego w ustawieniach efektów przewijania. Pomoże nam to stworzyć efekt pływający.
- Przewiń efekty transformacji: ruch pionowy
- Zestaw ruchu pionowego / pulpitu
- Początkowe przesunięcie: 4
- Średnie przesunięcie: 0 (przy 50%)
- Końcowe przesunięcie: -4
- Zestaw pionowy / tablet i telefon
- Początkowe przesunięcie: 4
- Średnie przesunięcie: 0 (przy 40% i 60%)
- Przesunięcie końcowe: -3
- Efekt ruchu wyzwalania: środek elementu
Ustawienia kolumny 2
Pozycja
Przejdźmy teraz do parametrów drugiej kolumny. Odpowiednio dostosuj ustawienia pozycji.
- Pozycja: względna
- Początek przesunięcia: lewy górny róg
- Przesunięcie pionowe
- Biuro: 25vw
Przewiń efekty
Dodajemy również ruch pionowy do tej kolumny.
- Przewiń efekty transformacji: ruch pionowy
- Zdefiniuj ruch pionowy / biurkowy
- Rozpocznij przesunięcie: 2
- Średnie przesunięcie: 0 (przy 50%)
- Przesunięcie końcowe: -2
- Zdefiniuj ruch pionowy / tablet i telefon
- Rozpocznij przesunięcie: 0
- Średnie przesunięcie: 0 (przy 50%)
- Przesunięcie końcowe: -2
- Wyzwalacz efektu ruchu: góra elementu
Dodaj moduł tekstowy do kolumny 1
Treść
Czas dodać moduły, zaczynając od modułu tekstowego w kolumnie 1. Dodaj dowolną zawartość H2, jaką chcesz.
Tekst tytułu
Przejdź do zakładki projektowania i stylizuj tekst H2 w następujący sposób.
- Poziom tytułu: H2
- Czcionka: Palanquin Dark
- Waga czcionki: pogrubiona
- Styl czcionki: TT
- Kolor: żółty # ffd868
- Rozmiar
- Biuro: 5vw
- Tablet: 10vw
- Telefon: 12vw
- Odstępy między literami: 4px
Dodaj moduł formularza kontaktowego do kolumny 1
Treść
W module tekstowym dodaj a formularz kontaktowy. Oto pola, których używamy:
- Nick
- tworzywo
- Wiadomość
Ochrona przed spamem
Przed stylizacją modułu formularz kontaktowy. włącz ochronę przed spamem i połącz swoje konto ReCaptcha.
- Skorzystaj z usługi ochrony przed spamem: Tak
- Usługodawca: ReCaptcha
- Wybierz konto
Pola
Przejdź do karty projektu i stylizuj pola w następujący sposób.
- Kolor tła: ciemnoniebieski # 25274d
- Kolor tekstu: jasnoszary # d1d1d1
- Kolor tła ostrości: ciemnoniebieski # 25274d
- Kolor tekstu ostrości: jasnoszary # d1d1d1
- Czcionka: Palanquin
- Styl: TT
- Rozmiar tekstu
- Biuro: 0.9vw
- Tablet: 2vw
- Telefon: 3vw
- Odstępy między literami: 1px
przycisk
Następnie stylizuj przycisk.
- Style niestandardowe: Tak
- Rozmiar tekstu: 20px
- Kolor tekstu: ciemnoniebieski # 25274d
- Kolor tła: żółty # ffd868
- Promień krawędzi: 7 pikseli
- Kolor ikony: ciemnoniebieski # 25274d
- Górny margines: 5px
zaklejania
Następnie modyfikujemy parametry rozmiaru.
- Szerokość: 100%
- Maksymalna szerokość: 100%
rozstaw
Dodamy również górną wyściółkę.
- Górna wyściółka: 4vw
granica
Uzupełnij parametry modułu, dostosowując parametry obramowania.
- Wejścia z zaokrąglonymi narożnikami: 6 pikseli w czterech rogach
- Wpisy Style obramowania: wszystkie cztery strony
- Szerokość ramki wejściowej: 2px
- Wpisy Kolor obramowania: żółty # ffd868
Dodaj moduł śledzenia mediów społecznościowych do kolumny 2
Treść
Przejdź do kolumny 2 i dodaj moduł mediów społecznościowych. Korzystaj ze wszystkich sieci społecznościowych, których potrzebujesz.
Zastaw
Przed stylizacją dodaj linki do odpowiednich sieci.
Kontekst artykułu
Teraz otwórz pierwszą sieć społecznościową i zmień kolor tła.
- Kolor: granatowy # 25274d
Ikona elementu
Na karcie projektu tego samego elementu zmień ustawienia ikony w następujący sposób.
- Kolor: żółty # ffd868
- Rozmiar czcionki ikony
- Biurko i tablet: 31 pikseli
- Telefon: 26 px
Odstępy między przedmiotami
Następnie dodaj mały margines, aby oddzielić ikony od siebie.
- Prawy margines: 1vw
Kopiuj i wklejaj style elementów
Aby nadać styl pozostałym sieciom społecznościowym, wróć do głównego okna zawartości i skopiuj style elementów z pierwszej ikony. Następnie wklej style elementów w pozostałych sieciach społecznościowych.
wyrównanie
Przejdź do głównej karty projektu i upewnij się, że moduł jest wyrównany do lewej.
- Wyrównanie modułu: lewo
zaklejania
Następnie dostosuj rozmiar modułu.
- Szerokość: 100%
rozstaw
Wyczyść także wszystkie domyślne wypełnienie.
- Górna, dolna, lewa i prawa wyściółka: 0 vw
granica
Na koniec dodaj zaokrąglone rogi w ustawieniach obramowania. Spowoduje to dostosowanie granic wszystkich ikon jednocześnie.
- Zaokrąglone narożniki
- Lewy i prawy górny: 7 pikseli
- Dolny lewy i prawy: 0px
Dodaj moduł tekstowy do kolumny 2
Treść
W module mediów społecznościowych dodaj kolejny moduł tekstowy. Dodaj wybraną zawartość. Dodaliśmy dwa adresy, numer telefonu i e-mail. Użyj pogrubienia w tytule każdej pozycji, używając wielkich liter.
- Siedziba: 1587 Sukhumvit Soi 21, Bangkok, Tajlandia.
- Punkt sprzedaży : Emporium Mall, 2. piętro
- Telefon: (321) 564 2398
- E-mail: [email chroniony]
kontekst
Zmień kolor tła modułu.
- Kolor: granatowy # 25274d
teksty
Przejdź do karty projektu i nadaj styl tekstowi.
- Czcionka: Palanquin
- Kolor: żółty # ffd868
- Rozmiar: 18px
rozstaw
Dodaj także niestandardowe wartości odstępów.
- Górny margines
- Biuro: -60px
- Tablet i telefon: -50 pikseli
- Wyściółka górna, dolna, lewa i prawa
- Biuro: 3vw
- Tablet: 6vw
- Telefon: 8vw
granica
Uzupełnij moduł, dodając zaokrąglone rogi w ustawieniach obramowania. Otóż to!
- Zaokrąglone rogi: 10 pikseli w prawym górnym rogu, lewym dolnym rogu i prawym dolnym rogu.
badanie
Teraz, gdy zakończyliśmy odtwarzanie sekcji pływających kontaktów, przyjrzyj się ostatecznemu wynikowi na różnych rozmiarach ekranu.
Dodatkowe zasoby
Jest Zasoby może być uzupełnieniem tego, co właśnie przeczytałeś. Mogą być używane dodatkowo lub przez tych, którzy ich nie mają Motyw Divi.
- Jak dodać popup formularza kontaktowego na WordPress
- Jak dodać rozwijany formularz w globalnym nagłówku w Divi
- 5 wtyczek do tworzenia formularzy kontaktowych
Aby zakończyć
Korzystanie z nowych efektów przewijania Divi przekształca każdy standardowy układ w ładny projekt. Tworząc własne tło, masz większą kontrolę nad wyglądem gotowego projektu. Jeśli masz jakieś pytania lub sugestie, zostaw komentarz w sekcji komentarzy poniżej!
