Jak automatycznie dodać formularz kontaktowy na dole strony do wszystkich stron za pomocą kreatora motywów Divi?

Kiedy jesteś zajęty konfigurowaniem wszystkich stron, które chcesz umieścić w swojej witrynie, istnieje duże prawdopodobieństwo, że będziesz chciał dołączyć formularz kontaktowy na końcu każdej strony, aby ułatwić odwiedzającym podróż. Dzięki Divi możesz oczywiście dodać formularz kontaktowy do samej strony, ale jeśli wolisz usprawnić proces, jest to również możliwe. W dzisiejszym samouczku Divi pokażemy, jak automatycznie dodać formularz kontaktowy na dole do wszystkich stron jednocześnie. Automatycznie dodamy również stałą ikonę w prawym dolnym rogu z linkiem do kotwicy, który automatycznie przekieruje osoby do sekcji kontaktów na stronie, na której się znajdują. Będziesz mógł również pobrać szablon strony za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz szablon strony ZA DARMO

Aby położyć ręce na darmowym szablonie strony, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Przegląd samouczka

• Skonfiguruj strony w swojej witrynie za pomocą wybranego pakietu układów
• Po ustawieniu stylu projektu strony możesz ponownie użyć stylu projektu w formularzu kontaktowym na dole strony
• Aby dodać formularz kontaktowy na dole strony, musisz najpierw stworzyć nowy szablon dedykowany dla wszystkich stron
• Po utworzeniu szablonu możesz zacząć budować ciało szablonu za pomocą wizualnego kreatora Divi
• Aby upewnić się, że wszystkie unikatowe treści strony są wyświetlane na każdej stronie, dodamy moduł treści postów
• Moduł treści posta zawiera cały dynamiczny projekt strony
• Poniżej modułu treści posta dodamy kolejną sekcję dla naszego formularza kontaktowego
• Zaprojektujemy formularz kontaktowy i upewnimy się, że dodamy unikalny identyfikator CSS do sekcji, użyjemy tego identyfikatora CSS, aby utworzyć link kotwicy
• Bonus: dodamy stałą ikonę w prawym dolnym rogu każdej z naszych stron i połączymy ją z sekcją kontaktową tej konkretnej strony

1. Skonfiguruj strony internetowe za pomocą zestawu układów do wyboru

Podejście, które stosujemy, działa na każdym rodzaju witryny, którą zbudujesz. Ale w tym konkretnym samouczku używamy stylu projektowania pakietu układu magazynu. Jeśli korzystasz z tego podejścia w dowolnej innej witrynie, możesz dostosować projekt do swoich potrzeb.

2. Przejdź do kreatora motywów Divi i dodaj nowy szablon strony

Przejdź do kreatora motywów Divi i dodaj nowy szablon strony

Przejdź do Divi Theme Builder na swojej stronie internetowej. Tam dodaj nowy szablon.

Użyj tego nowego szablonu na wszystkich stronach, jeśli chcesz, aby formularz kontaktowy na dole strony pojawiał się na wszystkich stronach. Możesz sprawić, by pojawiał się również na określonych stronach i/lub wykluczyć go z niektórych stron.

• Użyj na: wszystkie strony

Rozpocznij tworzenie treści szablonu

Po utworzeniu nowego szablonu możesz rozpocząć tworzenie niestandardowej treści.

3. Dodaj zawartość strony do treści szablonu

Ustawienia sekcji

Rozstaw

W edytorze szablonów zauważysz sekcję. Otwórz tę sekcję i usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i pozwól wierszowi zająć całą szerokość kontenera sekcji.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Usuń również domyślną górną i dolną wyściółkę wszystkich wierszy.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj moduł treści posta do kolumny

Kontynuuj, dodając moduł treści posta do kolumny wiersza. Ten moduł reprezentuje całą utworzoną przez Ciebie dynamiczną zawartość strony.

4. Dodaj formularz kontaktowy na dole strony do treści szablonu

Dodaj nową sekcję

Tło gradientowe

Poniżej sekcji zawierającej moduł Post Content dodamy kolejną zwykłą sekcję. Ta sekcja będzie poświęcona formularzowi kontaktowemu. Otwórz ustawienia sekcji i dodaj tło gradientowe.

• Kolor 1: #ffffff
• Kolor 2: #ffc077
• Pozycja startowa: 50%
• Pozycja końcowa: 50%

Identyfikator CSS

Dołącz również identyfikator CSS.

• Identyfikator CSS: kontakt

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji i używając następującej struktury kolumn:

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość H2

Pierwszym modułem, którego potrzebujemy w pierwszej kolumnie, jest moduł tekstowy. Wprowadź wybraną treść.

Ustawienia tekstu H2

Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu H2 w następujący sposób:

• Czcionka nagłówka 2: Montserrat
• Grubość czcionki nagłówka 2: pogrubiona
• Kolor tekstu nagłówka 2: #000000
• Rozmiar tekstu nagłówka 2: 70px (komputer), 48px (tablet), 36px (telefon)
• Nagłówek 2 Wysokość linii: 1,2 em

Rozmiary

Dodaj również maksymalną szerokość.

• Maksymalna szerokość: 750px

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj zawartość

Dodaj kolejny moduł tekstowy do kolumny 1 z wybraną zawartością.

Ustawienia tekstu

Zmień ustawienia tekstowe modułu w następujący sposób:

• Czcionka tekstu: Cardo
• Grubość czcionki tekstu: pogrubiona
• Kolor tekstu: rgba (0,0,0,0,03)
• Rozmiar tekstu: 150px (komputer), 100px (tablet), 60px (telefon)
• Wysokość linii tekstu: 1em

Rozstaw

I baw się ustawieniami odstępów na różnych rozmiarach ekranu.

• Górny margines: -0,8em (komputer), -100px (tablet), -80px (telefon)
• Lewy margines: -0,8em (komputer stacjonarny i tablet), -60px (telefon)

Dodaj formularz kontaktowy do kolumny 2

Dodaj wszystkie potrzebne pola

W drugiej kolumnie jedynym potrzebnym nam modułem jest Moduł Formularza Kontaktowego. Dodaj tyle pól, ile potrzebujesz, a także połącz swoje konto e-mail z modułem.

Włącz pełną szerokość pól nazwy i adresu e-mail

Kontynuuj, obracając pola nazwy i adresu e-mail o pełną szerokość.

• Zrób pełną szerokość: Tak

Ustawienia pól

Wróć do ogólnych ustawień formularza kontaktowego i zmień kolor tła pól.

• Kolor tła pól: #ffffff

Ustawienia przycisków

Następnie zmodyfikuj ustawienia przycisków.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 14px
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #000000 (domyślnie), #ff2a38 (najechanie)
• Szerokość obramowania przycisku: 8px

• Kolor obramowania przycisku: rgba (0,0,0,0)
• Promień obramowania przycisku: 0px
• Odstępy między przyciskami: 2px
• Grubość czcionki przycisku: Ultra Bold
• Styl czcionki przycisku: wielkie litery
• Ikona przycisku: Znajdź na liście

Granica

Dodaj też promień obramowania.

• Wszystkie rogi: 5px

Cień Pudełka

I uzupełnij ustawienia modułu, dodając subtelny cień pudełka.

• Siła rozmycia cieni w pudełku: 50px
• Siła rozprzestrzeniania się cieni w pudełku: -4px
• Kolor cienia: rgba (0,0,0,0,08)

Bonus: Dodaj ustaloną ikonę kotwicy w prawym dolnym rogu do treści szablonu

Dodaj nową sekcję

Rozstaw

Teraz, aby dodać nieruchomą ikonę w prawym dolnym rogu do każdej strony, musimy dodać kolejną zwykłą sekcję. Otwórz sekcję i usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Indeks Z

Zwiększ również indeks z sekcji. Zapewni to, że ikona pozostanie nad całą zawartością strony.

• Indeks Z: 99999

Dodaj nowy wiersz

Struktura kolumny

Dodaj nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Otwórz ustawienia wiersza i pozwól wierszowi zająć całą szerokość sekcji.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Usuń również wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj moduł Blurb do kolumny

Pozostaw puste pole tytułu i treści

Aby wyświetlić ikonę w prawym dolnym rogu, użyjemy modułu Blurb. Upewnij się, że tytuł i pole treści są puste.

Wybierz ikonę

Następnie wybierz wybraną ikonę.

Połączyć

Połącz ikonę z sekcją kontaktową, dodając identyfikator do adresu URL łącza modułu.

• Adres URL łącza modułu: #kontakt

Kolor tła

Zmień też kolor tła modułu.

• Kolor tła: #ffc077

Ustawienia ikon

Przejdź do zakładki projektowania modułu i zmień ustawienia ikon w następujący sposób:

• Kolor ikony: #ffffff
• Umieszczenie obrazu/ikony: góra
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 30px

Rozmiary

Zmodyfikuj również ustawienia rozmiaru modułu.

• Szerokość: 100px
• Wyrównanie modułu: w prawo

Rozstaw

I dodaj niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 33px
• Dolna wyściółka: 33px

Granica

Następnie przejdź do ustawień obramowania i dodaj zaokrąglone rogi.

• Wszystkie rogi: 100px

Cień Pudełka

Dodaj również cień do pudełka.

• Siła rozmycia cieni w pudełku: 50px
• Siła rozprzestrzeniania się cieni w pudełku: -15px
• Kolor cienia: rgba(0,0,0,0.23)

Główny element CSS

Aby ikona była naprawiona, zastosujemy trzy wiersze kodu CSS do głównego elementu modułu w zakładce Zaawansowane.

bottom: 20px;
right: 20px;
position: fixed;

Rozmycie obrazu CSS

I usuń również domyślne dolne wypełnienie obrazu modułu.

margin-bottom: 0px;

6. Zapisz wszystkie zmiany kreatora motywów i wyniki podglądu

Po ukończeniu treści szablonu strony możesz zapisać wszystkie zmiany, wyjść z Kreatora motywów i wyświetlić wynik na wszystkich swoich stronach!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak dodać formularz kontaktowy na dole do wszystkich stron jednocześnie. Aby to osiągnąć, stworzyliśmy nowy szablon strony, dodaliśmy moduł Post Content i dodaliśmy sekcję kontaktową na końcu szablonu. Dodaliśmy również stałą ikonę w prawym dolnym rogu z linkiem do kotwicy, który przekierowuje odwiedzających do sekcji kontaktowej strony, na której się znajdują. Udało Ci się również bezpłatnie pobrać plik JSON z szablonem strony! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.