Czy chciałbyś stworzyć formularz kontaktowy lepki w DIVI?
Wbudowane opcje przyklejania Divi pozwalają tworzyć oszałamiające efekty wizualne na swojej stronie za pomocą zaledwie kilku kliknięć.
Możesz zastosować efekty samoprzylepne do dowolnego elementu na swojej stronie, ale w tym samouczku skupimy się na tym, jak utworzyć formularz kontaktowy przyklejony na dowolnej stronie Divi, którą utworzysz.
Przeczytaj także nasz przewodnik na temat Jak utworzyć lepki globalny nagłówek w DIVI
W tym przykładzie dodamy obrazy i informacje kontaktowe, które będą przewijane podczas formularz kontaktowy pozostanie na miejscu.
badanie
Oto podgląd tego, co będziemy projektować. Na urządzeniach mobilnych nie stosujemy efektu lepkiego.
Jak dodać przyklejony formularz kontaktowy do swojej strony Divi
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 Builder”.
W tym przykładzie użyjemy gotowego układu z biblioteki Divi, więc wybierz 'Wybierz układ".
Znajdź i wybierz strona kontaktowa układu 'Produkt kosmetyczny".
Wybierz „Wybierz układ', aby dodać układ do swojej strony.
Jesteśmy teraz gotowi do kontynuowania naszego samouczka.
Zmiana układu przyklejonego formularza kontaktowego
W tym samouczku chcemy, aby formularz kontaktowy w lewej kolumnie (kolumna 1) pozostał przyklejony, podczas gdy użytkownik przewija inne moduły treści w prawej kolumnie (kolumna 2). Da nam to efekt dynamicznego przewijania, który wyróżni Twój formularz kontaktowy. Zacznijmy od zmodyfikowania naszego predefiniowanego szablonu.
Zobacz także: Jak stworzyć przesuwane i przesuwane menu w DIVI
Utwórz nową sekcję
Dodaj nową sekcję do swojej strony.
Następnie wstaw nowy wiersz z dwiema kolumnami. Możesz dodać tę sekcję w dowolnym miejscu na stronie, inne sekcje zostaną ostatecznie usunięte w miarę postępów w tym samouczku.
Otwórz ustawienia sekcji i zmień kolor tła, aby pasował do projektu układu:
- Tło: #EEE8E2
Dodawanie przyklejonych modułów do kolumny 1
Dodaj moduł Formularz kontaktowy w kolumnie 1. Jeśli korzystasz z tego samouczka lub masz już formularz kontaktowy na swojej stronie, możesz po prostu przeciągnąć moduł 'Formularz kontaktowy' istniejące w kolumnie 1.
Przenieś moduł tekstowy Kliknij aby przejść do formularza zgłoszeniowego u góry tej sekcji. Będzie też lepki. Dodaj białą ramkę w ustawieniach tekstu, aby dopasować styl układu:
- Szerokość obramowania: 20px
- Kolor obramowania: #FFFFFF
Oryginalny układ zawierał dopełnienie między tekstem a obramowaniem, ale pominiemy to, ponieważ odcina dolną część formularza kontaktowego na mniejszych ekranach.
Dodaj swoje moduły przewijania w kolumnie 2
W kolumnie 2 dodaj wszystkie moduły przewijania. W naszym przypadku przenieś dwa moduły obrazów, informacje kontaktowe i informacje o lokalizacji do kolumny 2. Po przeniesieniu modułów do nowej sekcji możesz usunąć wszystkie pozostałe puste sekcje.
Wskazówka: jeśli chcesz przenieść kilka modułów jednocześnie, przytrzymaj klawisz 'Maj' na klawiaturze i wybierz moduły, które chcesz przenieść. Użyj funkcji przenoszenia modułu, aby przenieść wszystkie moduły jednocześnie.
Duży przesunięty obraz wybranego przez nas układu może powodować problemy z przewijaniem w poziomie. Zmieńmy więc niektóre ustawienia, aby rozwiązać ten problem.
Czytaj także: Jak stworzyć globalny nagłówek z formularzem logowania w DIVI
Otwórz ustawienia sekcji. Pod zaawansowany, przejdź do opcji Widoczność, a następnie zaktualizuj ustawienia przepełnienia w poziomie i w pionie:
- Przepełnienie poziome: ukryte
- Przepełnienie pionowe: ukryte
Twoja strona powinna teraz wyglądać tak, z przyklejoną zawartością w kolumnie 1 i przewijaną zawartością w kolumnie 2.
Jesteśmy gotowi do ostatniego kroku: przyklejenia formularza kontaktowego.
Przyklej formularz kontaktowy
Dzięki naszemu układowi możemy włączyć przyklejone ustawienia dla naszego formularza kontaktowego. Wybierz 'Ustawienia wiersza', a następnie wybierz ustawienia kolumny 1.
Na karcie Zaawansowane przejdź do „Efekty przewijania”. Tutaj ustawimy lepkie parametry.
- Lepka pozycja: trzymaj się u góry
- Górne przesunięcie drążka: 15px
- Dolny limit lepkości: linia
I to wszystko! Dodałeś teraz ustawienia przyklejania do kolumny 1, dzięki czemu formularz kontaktowy i tytuł będą przyklejone podczas przewijania strony. Powinieneś zobaczyć zawartość kolumny 2 scroll obok formularza kontaktowego.
Ostateczny wynik
Przyjrzyjmy się teraz naszemu przyklejonemu formularzowi kontaktowemu w akcji.
Pobierz DIVI teraz !!!
Wnioski
Więc ! To tyle w tym artykule. Przyklejone ustawienia Divi to łatwy sposób na poprawę wyglądu formularza kontaktowego – lub dowolnego innego elementu Twojej strony. Możesz zastosować lepkie ustawienia dla dowolnej sekcji, wiersza lub modułu, renderując prawie wszystko na swoim Witryna internetowa lepki.
Jeśli chcesz dowiedzieć się więcej o tym, co możesz zrobić z przyklejonymi funkcjami Divi, zapoznaj się z naszymi samouczkami. Możesz na przykład zapoznać się z naszym samouczkiem Jak dodać formularz kontaktowy do globalnego nagłówka.
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.
...
