Przejdź do głównej treści

Utwórz swobodną sekcję kontaktu z efektami przewijania na Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Każda witryna potrzebuje sekcji kontaktowej, ale to nie znaczy, że musisz wybrać 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 dzięki przewijanemu układowi sekcji kontaktów, który zachęci odwiedzających do interakcji z formularzem kontaktowym. W tym artykule pokażemy, jak utworzyć pływającą sekcję kontaktową o pełnej szerokości, którą można dodać do dowolnej strony. Możesz nawet dodać go do górnej części stopki w witrynie za pomocą Kreatora motywów Divi.

Poniżej znajdziesz bezpłatny folder 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ę SVG mapy, 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 reprezentuje na mapie Google lokalizację, którą chcesz wyróżnić. Możesz to zrobić za pomocą programu Photoshop lub dowolnego innego edytora obrazów.

Dodaj nową sekcję

Teraz nadszedł czas, aby zacząć tworzyć sekcję swobodnego kontaktu z Divi Builderem! 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 Photoshopie.

  • Obraz w tle: twoja zmodyfikowana mapa

rozstaw

Następnie dostosuj ustawienia odstępów sekcji 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
bezpotencjałowa sekcja kontaktowa

Pozycja

Na koniec ustaw indeks sekcji Z 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ę zaawansowaną, 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.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

  • 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
  • Wyzwalacz efektu ruchu: środek elementu

Ustawienia kolumny 2

Pozycja

Teraz przejdźmy do parametrów w drugiej kolumnie. Dostosuj odpowiednio parametry 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 wybraną zawartość H2.

Tekst tytułu

Przejdź do karty projektu 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 formularz kontaktowy. Są to pola, których używamy:

  • Nick
  • E-mail
  • tworzywo
  • Wiadomość

Ochrona przed spamem

Przed stylizacją modułu formularza kontaktowego. aktywuj 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: granatowy # 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.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

  • Style niestandardowe: Tak
  • Rozmiar tekstu: 20px
  • Kolor tekstu: ciemnoniebieski # 25274d
  • Kolor tła: żółty # ffd868
  • Promień krawędzi: 7 pikseli
  • Kolor ikony: ciemnoniebieski
  • 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 potrzebnych sieci społecznościowych.

  • Facebook
  • Twitter
  • Linkedin

Zastaw

Przed stylizacją dodaj linki do odpowiednich sieci.

Tło 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

Skopiuj i wklej style elementów

Aby stylizować pozostałe sieci społecznościowe, wróć do głównego okna zawartości i skopiuj style elementów z pierwszej ikony. Następnie wklej style elementów do pozostałych sieci 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ą treść. Dodaliśmy dwa adresy, numer telefonu i e-mail. Użyj pogrubienia w tytule każdego elementu wielkimi literami.

  • Siedziba: 1587 Sukhumvit Soi 21, Bangkok, Tajlandia.
  • Punkt sprzedaży : Emporium Mall, 2. piętro
  • Telefon: (321) 564 2398
  • E-mail: [Email protected]

kontekst

Zmień kolor tła modułu.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

  • Kolor: granatowy # 25274d

teksty

Przejdź do karty projektu i stylizuj tekst.

  • 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

I uzupełnij moduł, dodając zaokrąglone rogi w parametrach obramowania. To jest 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 swobodnego kontaktu, spójrz na wynik na różnych rozmiarach ekranu.

bezpotencjałowa sekcja kontaktowa

Dodatkowe zasoby

Zasoby mogą uzupełniać to, co właśnie przeczytałeś. Mogą być używane dodatkowo lub przez osoby, które nie mają motywu Divi.

Aby zakończyć

Zastosowanie nowych efektów przewijania Divi umożliwia przekształcenie dowolnego standardowego układu w przyjemny design. 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!

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
0 akcji
udział
ćwierkanie
Enregistrer