Jak utworzyć niestandardową stopkę za pomocą kreatora motywów Divi

Divi Theme Builder wyznacza nową erę i zmienia sposób, w jaki projektujemy strony internetowe. Jedną z najważniejszych części tej funkcji jest możliwość dynamicznego dodawania globalnych stopek do Twoich stron i postów. Po zaprojektowaniu stopki możesz automatycznie dodać ją do dowolnego rodzaju strony lub posta, korzystając z Kreatora motywów Divi. W tym samouczku przeprowadzimy Cię krok po kroku przez proces tworzenia i dodawania globalnej stopki do Twojej witryny. Będziesz mógł również bezpłatnie pobrać szablonowy plik JSON!

Weźmy się za to.

Zapowiedź

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

Pulpit

mobilny

Pobierz niestandardową globalną stopkę ZA DARMO

Aby położyć swoje ręce na bezpłatnej niestandardowej stopce globalnej, najpierw musisz ją 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!

Subskrybuj nasz kanał YouTube

1. Przejdź do kreatora motywów Divi

Zacznij od przejścia do Kreatora motywów w opcjach motywu Divi.

2. Dodaj i zbuduj globalną stopkę

Tam możesz dodać globalną stopkę ze swojej biblioteki Divi lub zacząć budować ją od podstaw. W tym samouczku utworzymy niestandardową stopkę od podstaw, więc wybierz pierwszą opcję.

Dodaj sekcję #1

Kolor tła

Czas zacząć tworzyć! Otwórz sekcję, którą znajdziesz na stronie i zmień kolor tła sekcji.

• Kolor tła: #000000

Rozstaw

Następnie zmodyfikuj ustawienia odstępów przekroju.

• Górny margines: 6vw
• Lewy margines: 6vw
• Prawy margines: 6vw
• Lewa wyściółka: 30px
• Prawe wypełnienie: 30px

Granica

Następnie dodaj górną lewą i prawą ramkę.

• Górny lewy: 20px
• U góry po prawej: 20px

Cień Pudełka

Uwzględnij również cień w ustawieniach sekcji.

• Siła rozmycia cieni w pudełku: rgba (0,0,0,0.18)
• Kolor cienia: rgba(0,0,0,0.18)

Dodaj nowy wiersz do sekcji

Struktura kolumny

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

Dodaj moduł tekstowy do kolumny

Dodaj zawartość H2

Dodaj moduł tekstowy z zawartością H2.

Ustawienia tekstu H2

Przejdź do zakładki projektu modułu i odpowiednio zmień ustawienia tekstu H2:

• Czcionka nagłówka 2: Poppins
• Grubość czcionki nagłówka 2: pół pogrubiona
• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: #ffffff
• Rozmiar tekstu nagłówka 2: 31px (komputer), 24px (tablet), 18px (telefon)
• Wysokość linii nagłówka 2: 1,6 em

Rozmiary

Dodaj również maksymalną szerokość do modułu.

• Maksymalna szerokość: 700px

Dodaj moduł przycisku do kolumny

Dodaj kopię

Dodaj moduł przycisku tuż pod modułem tekstowym w swojej kolumnie i wprowadź wybraną kopię.

Wyrównanie

Przejdź do zakładki projektu modułu i zmień wyrównanie przycisku do środka.

• Wyrównanie przycisków: środek

Ustawienia przycisków

Kontynuuj, stylizując przycisk.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 12px
• Kolor tekstu przycisku: #000000
• Kolor tła przycisku: #FFFFFF
• Szerokość obramowania przycisku: 0px

• Promień obramowania przycisku: 100px
• Odstępy między przyciskami: 1px
• Czcionka przycisku: Poppins
• Grubość czcionki przycisku: pół pogrubiona
• Styl czcionki przycisku: wielkie litery

Rozstaw

Dodaj również niestandardowe wartości dopełnienia.

• Górna wyściółka: 14px
• Dolna wyściółka: 14px
• Lewa wyściółka: 40px
• Prawe wypełnienie: 58px

Dodaj sekcję #2

Kolor tła

Do następnej regularnej sekcji! Wybierz biały kolor tła sekcji.

• Kolor tła: #ffffff

Rozstaw

Następnie usuń całą górną i dolną wyściółkę.

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

Granica

Dodaj również promień obramowania do sekcji.

• Górny lewy: 20px
• U góry po prawej: 20px

Cień Pudełka

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

• Siła rozmycia cieni w pudełku: 135px
• Kolor cienia: rgba(0,0,0,0.18)

Dodaj nowy wiersz do sekcji

Struktura kolumny

Po skonfigurowaniu ustawień sekcji dodaj 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ść ekranu.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Następnie usuń domyślne górne i dolne dopełnienie wiersza.

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

Odstępy między kolumnami

Kontynuuj, otwierając ustawienia kolumn i dodaj niestandardowe wartości dopełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka: 100px (komputer stacjonarny), 50px (tablet i telefon)
• Dolna wyściółka: 100px (komputer), 50px (tablet i telefon)
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Dodaj moduł tekstowy nr 1 do kolumny

Dodaj zawartość

Czas zacząć dodawać moduły! Dodaj zwykły moduł tekstowy do kolumny 1 i wstaw wybrane przez siebie treści.

Ustawienia tekstu

Przejdź do zakładki projektu modułu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Poppins
• Grubość czcionki tekstu: pogrubiona
• Kolor tekstu: #000000
• Rozmiar tekstu: 17px
• Wyrównanie tekstu: do środka

Rozstaw

Następnie dodaj niestandardowy górny i dolny margines.

• Górny margines: 10px
• Margines dolny: 30px

Dodaj moduł dzielnika do kolumny

Widoczność

Tuż pod modułem tekstowym dodaj moduł dzielnika i upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

Zmień kolor linii na czarny.

• Kolor linii: #000000

Rozmiary

Zmodyfikuj również ustawienia rozmiaru separatora.

• Szerokość: 15%
• Wyrównanie modułu: Środek

Dodaj moduł tekstowy nr 2 do kolumny

Dodaj zawartość

Kontynuuj, dodając kolejny moduł tekstowy do kolumny.

Dodaj link

Dodaj link do strony, do której ma się odwoływać ten moduł.

Ustawienia tekstu

Następnie przejdź do zakładki projekt i zmień ustawienia tekstu w następujący sposób:

• Czcionka tekstu: Poppins
• Grubość czcionki tekstu: Lekka
• Kolor tekstu: #777777
• Rozmiar tekstu: 15px
• Wyrównanie tekstu: do środka

Rozstaw

Dodaj też górny i dolny margines.

• Górny margines: 10px
• Margines dolny: 10px

Klonuj moduł tekstowy nr 2 tyle, ile potrzeba

Po ukończeniu drugiego modułu tekstowego w kolumnie możesz go sklonować tyle razy, ile potrzebujesz (w zależności od liczby klikalnych elementów stopki, które chcesz uwzględnić).

Zmień treść i linki

Upewnij się, że zmieniłeś zawartość modułu i linki dla każdego duplikatu.

Klonuj całą kolumnę dwukrotnie

Po ukończeniu kolumny i jej modułów możesz dwukrotnie sklonować całą kolumnę.

Kolor tła kolumny 2

Następnie otwórz ustawienia kolumny 2 i zmień kolor tła.

• Kolor tła kolumny 2: #f9f9f9

Zmień treść i linki

Upewnij się, że zmieniłeś całą zawartość i linki w każdej zduplikowanej kolumnie.

Dodaj nową kolumnę

Następnie dodaj czwartą kolumnę do rzędu.

Kolor tła

Zmień kolor tła nowej kolumny.

• Kolor tła: #0fffc7

Rozstaw

Wraz z wartościami dopełnienia kolumny.

• Górna wyściółka: 70px
• Dolna wyściółka: 70px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Dodaj moduł śledzenia mediów społecznościowych do kolumny 4

Dodaj sieci społecznościowe

Kontynuuj, dodając moduł Social Media Follow do kolumny 4.

Zresetuj style sieci społecznościowych

Zresetuj style elementów dla każdej dodanej sieci społecznościowej.

Wyrównanie

Następnie przejdź do zakładki projektu i zmień wyrównanie modułu.

• Wyrównanie modułu: Środek

Ustawienia ikon

Zmodyfikuj też kolor ikony.

• Kolor ikony: #000000

Dodaj moduł e-mail Optin do kolumny 4

Usuń zawartość

Kontynuuj, dodając moduł Email Optin do kolumny 4 i usuń tytuł i treść.

Konto e-mail

Następnie dodaj konto e-mail. Bez dodania konta e-mail moduł nie pojawi się po wyjściu z kreatora.

Usuń kolor tła

Kontynuuj, usuwając kolor tła modułu.

• Użyj koloru tła: nie

Ustawienia pól

Przejdź do zakładki projektu i zmień ustawienia pól w następujący sposób:

• Kolor tła pól: rgba(0,0,0,0)
• Kolor tekstu pól: #000000
• Czcionka pól: Poppins

• Rozmiar tekstu pól: 13px
• Szerokość obramowania pól: 1px
• Kolor obramowania pól: #000000

Ustawienia przycisków

Stylizuj również przycisk swojego modułu.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 12px
• Kolor tekstu przycisku: #000000
• Kolor tła przycisku: #FFFFFF
• Szerokość obramowania przycisku: 0px

• Promień obramowania przycisku: 100px
• Odstępy między przyciskami: 1px
• Czcionka przycisku: Poppins
• Grubość czcionki przycisku: pół pogrubiona
• Styl czcionki przycisku: wielkie litery

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

Dodaj dynamiczny moduł tekstowy do kolumny 4

Treści dynamiczne

Następnym i ostatnim modułem, którego potrzebujemy do ukończenia tego projektu, jest moduł tekstowy. Włącz opcję zawartości dynamicznej w polu zawartości.

Następnie wybierz opcję „Aktualna data”.

• Treść dynamiczna: bieżąca data

I zmodyfikuj ustawienia zawartości dynamicznej w następujący sposób:

• Przed: Prawa autorskie ©
• Po: | Wszelkie prawa zastrzeżone
• Format daty: niestandardowy
• Niestandardowy format daty: 20 lat

Ustawienia tekstu

Następnie przejdź do zakładki projekt i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Poppins
• Kolor tekstu: #000000
• Rozmiar tekstu: 16px

Rozstaw

Uzupełnij ustawienia modułu, dodając górny margines i gotowe!

• Górny margines: 50px

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 samouczku pokazaliśmy, jak łatwo jest stworzyć piękną niestandardową globalną stopkę za pomocą nowego Theme Buildera Divi. Wbudowany moduł i opcje projektowania Theme Builder i Divi pomagają zaoszczędzić dużo czasu i błyskawicznie tworzyć wspaniałe strony internetowe. Mamy nadzieję, że ten samouczek zainspiruje Cię do stworzenia pięknych globalnych stopek dla nadchodzących projektów Divi. 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.