Chcesz stworzyć własną stopkę w DIVI?
Jedną z najważniejszych części kreatora motywów Divi jest możliwość dynamicznego dodawania globalnych stopek do stron internetowych i postów.
Po zaprojektowaniu stopki możesz automatycznie dodać ją do dowolnego typu 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 Twojego Witryna internetowa.
badanie
Zanim zagłębimy się w samouczek, spójrzmy na stopkę, którą zamierzamy zaprojektować.
Biuro
Przejdź do Divi Theme Builder i dodaj globalną stopkę
- Przejdź do Divi > Kreator motywów i kliknij „ Dodaj globalną stopkę«
- Wybierać " Zbuduj globalną stopkę«
Dostosuj sekcję #1
Kolor tła
Otwórz sekcję, którą możesz znaleźć na stronie i zmień kolor tła sekcji.
- Tło: #000000
rozstaw
Przełącz na kartę Styl a następnie zmień ustawienia odstępów między przekrojami.
- Margines (górny, lewy i prawy): 6vw
- Margines wewnętrzny (lewy i prawy): 30px
granica
Następnie dodaj górną ramkę po lewej i prawej stronie.
- Zaokrąglony prostokąt u góry po lewej: 20px
- Prawy górny zaokrąglony prostokąt: 20px
Pole cienia
Uwzględnij również cień w ustawieniach przekroju.
- Siła rozmycia łuku cienia: 135px
- Kolor czcionki napisów: rgba (0,0,0,0.18)
Dodaj nową linię do sekcji
Struktura kolumny
Kontynuuj, dodając wiersz do sekcji, korzystając z następującej struktury kolumn:
Dodaj moduł tekstowy do kolumny
Dodaj tytuł rozmiaru H2 (Nagłówek 2)
Wstaw moduł tekstowy za pomocą treść o rozmiarze H2.
Ustawienia tekstu H2
Przejdź do zakładki Styl modułu i odpowiednio zmodyfikuj parametry tekstu H2:
- Czcionka nagłówka: Poppins
- Stonowany lekki nagłówek: pół pogrubiony
- Wyrównanie tekstu: wyśrodkowane
- Kolor tekstu nagłówka: #ffffff
- Rozmiar tekstu nagłówka: 31px (komputer), 24px (tablet), 18px (telefon)
- Wysokość linii nagłówka: 1,6 em
zaklejania
Dodaj również maksymalną szerokość do modułu.
- Maksymalna szerokość: 700 pikseli
Dodaj moduł przycisku do kolumny
Dodaj tekst do przycisku
Wstaw moduł przycisku tuż pod modułem Tekst w swojej kolumnie i wprowadź wybrany tekst.
wyrównanie
Przejdź do zakładki Styl modułu i zmień wyrównanie przycisku do środka.
- Wyrównanie przycisków: wyśrodkowane
Ustawienia przycisków
Kontynuuj, dostosowując przycisk.
- Użyj niestandardowych stylów dla przycisku: Tak
- Rozmiar tekstu przycisku: 12px
- Kolor tekstu przycisku: #000000
- Przycisk tła: #FFFFFF
- Przycisk szerokości obramowania: 0 pikseli
Czytaj także: Jak wyświetlić stronę bloga jako karuzelę w DIVI
- Promień obramowania przycisku: 100 pikseli
- Odstępy między literami przycisków: 1 px
- Czcionka przycisku: Poppins
- Przycisk miękkiego światła: pół pogrubiony
- Przycisk kopiowania stylu: TT
rozstaw
Dodaj również niestandardowe wartości marginesów wewnętrznych.
- Margines wewnętrzny (górny i dolny): 14px
- Margines wewnętrzny: lewy (40px); Prawo (58 pikseli)
Sekcja 2
Dodaj drugą „normalną” sekcję poniżej poprzedniej.
Kolor tła
Zmień kolor tła
- Tło: #ffffff
rozstaw
Następnie usuń wszystkie marginesy wewnętrzne (górny i dolny).
- Margines wewnętrzny (górny i dolny): 0px
Granica
Dodaj również promień obramowania do przekroju.
- Zaokrąglony prostokąt (górny lewy): 20px
- Zaokrąglony prostokąt (u góry po prawej): 20px
Pole cienia
I uzupełnij ustawienia sekcji, dodając subtelny cień pudełka.
- Siła rozmycia cieni w pudełku: 135px
- Kolor czcionki napisów: rgba(0,0,0,0.18)
Dodaj nową linię do sekcji
Struktura kolumny
Po zakończeniu ustawień sekcji dodaj nowy wiersz, korzystając z następującej struktury kolumn:
zaklejania
Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i zmień je w następujący sposób:
- Użyj niestandardowej szerokości rynny: Tak
- Rozstaw kolumn: 1
- Zharmonizuj wysokości kolumn: Tak
- Maksymalna szerokość: 100%
- Maksymalna szerokość: 100%
rozstaw
Następnie usuń domyślne marginesy wewnętrzne (górny i dolny) z wiersza.
- Margines wewnętrzny (górny i dolny): 0px
Rozstaw kolumn
Kontynuuj, otwierając ustawienia kolumn, aby dodać niestandardowe wartości dopełnienia.
- Margines wewnętrzny (górny i dolny): 100px (komputer), 50px (tablet i telefon)
- Margines wewnętrzny (lewy i prawy): 100 px (komputer), 50 px (tablet i telefon)
Dodaj moduł Tekst #1 do kolumny
Dodaj treść
Możemy teraz dodać do niego moduły. Dodaj moduł Tekst do kolumny i wstaw plik treść do wyboru.
Ustawienia tekstu
Przejdź do zakładki Styl modułu i odpowiednio zmodyfikuj parametry tekstowe:
- Czcionka tekstu: Poppins
- Grubość czcionki tekstu: pogrubiona
- Kolor tekstu: #000000
- Rozmiar tekstu: 17px
- Wyrównanie tekstu: wyśrodkowane
rozstaw
Następnie dodaj niestandardowe marginesy (górny i dolny).
- Górny margines: 10 pikseli
- Margines dolny: 30px
Dodaj moduł Separator do kolumny
Tuż pod modułem Tekst dodaj moduł Separator.
widoczność
Upewnij się, że opcja „ Pokaż separator Jest włączony.
- Pokaż separator: Tak
Linia
Zmień kolor linii na czarny.
- Kolor etykiety: #000000
zaklejania
Zmień także ustawienia rozmiaru rozdzielacza.
- Maksymalna szerokość: 15%
- Wyrównanie tekstu: do środka
Dodaj moduł Tekst #2 do kolumny
Dodaj treść
Kontynuuj, dodając do kolumny kolejny moduł Tekst oraz a treść do wyboru.
Dodaj link
Wstaw link do strony, do której ma się odwoływać ten moduł.
Ustawienia tekstu
Następnie przejdź do zakładki Styl i zmień ustawienia tekstu w następujący sposób:
- Czcionka tekstu: Poppins
- Miękkie jasne teksty: jasne
- Kolor tekstu Tekst: #777777
- Tekst Rozmiar tekstu: 15 pikseli
- Wyrównanie tekstu: wyśrodkowane
rozstaw
Dodaj również margines (górny i dolny).
- Margines (górny i dolny): 10 px
W razie potrzeby sklonuj moduł tekstowy nr 2
Po ukończeniu drugiego modułu Tekst możesz go sklonować tyle razy, ile potrzebujesz (w zależności od tego, ile klikalnych elementów stopki chcesz dołączyć).
Edytuj treść i linki
Pamiętaj, aby edytować zawartość modułu i linki dla każdego duplikatu.
Sklonuj całą kolumnę dwukrotnie
Po ukończeniu kolumny i jej modułów możesz ją sklonować dwukrotnie.
Kolor tła kolumny 2
Następnie otwórz ustawienia kolumny 2 i zmień kolor tła.
- Tło: #f9f9f9
Edytuj treść i linki
Pamiętaj, aby edytować 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.
- Tło: #0fffc7
rozstaw
Zmodyfikuj wewnętrzne marginesy w następujący sposób:
- Margines wewnętrzny (górny i dolny): 70px
- Margines wewnętrzny (lewy i prawy): 50px
Dodaj moduł „Obserwuj nas w mediach społecznościowych” do kolumny 4
Dodaj sieci społecznościowe
Kontynuuj, dodając moduł „ Śledź nas na portalach społecznościowych w kolumnie 4 i wstaw wybrane sieci społecznościowe.
Zresetuj style ikon mediów społecznościowych
Kliknij na Zresetuj role elementów Style dla każdej z sieci społecznościowych.
wyrównanie
Następnie przejdź do zakładki Styl i zmodyfikuj ustawienie modułu.
- Wyrównanie tekstu: do środka
Ustawienia ikon
Zmień także kolor ikon mediów społecznościowych.
- Kolor ikony: #000000
Dodaj moduł e-mail Optin do kolumny 4
Wstaw mod " Poczta e-mail "pod modułem" Śledź nas na portalach społecznościowych«
Wyczyść zawartość i tytuł modułu
Konto e-mail
Następnie dodaj konto e-mail. Jeśli nie dodasz konta e-mail, moduł nie pojawi się po wyjściu z kreatora motywów.
Usuń kolor tła
- Użyj koloru tła: Nie
Ustawienia pola
Przełącz na kartę Styl i zmień ustawienia pola w następujący sposób:
- Pola koloru tła: rgba (0,0,0,0)
- Pola koloru tekstu: #000000
- Czcionka Champs: Poppins
- Pola rozmiaru tekstu: 13px
- Pola szerokości obramowania: 1 px
Ustawienia przycisków
Dostosuj również przycisk swojego modułu.
- Użyj niestandardowych stylów dla przycisku: Tak
- Rozmiar tekstu przycisku: 12px
- Kolor tekstu przycisku: #000000
- Przycisk tła: #FFFFFF
- Szerokość obramowania: 0px
- Promień obramowania przycisku: 100 pikseli
- Odstępy między literami przycisków: 1 px
- Czcionka przycisku: Poppins
- Przycisk przyciemniania światła: pół pogrubiony
- Przycisk kopiowania stylu: TT
Zobacz też: Jak stworzyć przyklejony formularz kontaktowy w DIVI
- Wypełnienie przycisków (góra i dół): 15px
Dodaj dynamiczny moduł tekstowy do kolumny 4
Następnym i ostatnim modułem, którego potrzebujemy do ukończenia tego projektu, jest moduł Tekst.
Aktywuj opcję „ Użyj zawartości dynamicznej”.
Następnie wybierz opcję „ bieżąca data”.
I zmień ustawienia zawartości dynamicznej w następujący sposób:
- Przód: Prawa autorskie ©
- Po: | Wszelkie prawa zastrzeżone
- Format daty: zwyczaje
- Niestandardowy format daty: 20 lat
Ustawienia tekstu
Następnie przejdź do zakładki stylu i zmień ustawienia tekstu:
- Czcionka tekstu: Poppins
- Kolor tekstu Tekst: #000000
- Tekst Rozmiar tekstu: 16 pikseli
rozstaw
Uzupełnij parametry modułu dodając margines i voila!
- Górny margines: 50 pikseli
Zapisz globalne opcje tworzenia stopek i motywów
Gdy skończysz, zapisz swoją pracę przed wyjściem z kreatora. Motyw Divi.
Jak tylko wyjdziesz z układu szablonu, zapisz wszystkie zmiany w kreatorze motywów i gotowe!
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się po raz ostatni wynikowi.
Pobierz DIVI teraz !!!
Wnioski
W tym samouczku pokazaliśmy, jak łatwo jest stworzyć piękną niestandardową globalną stopkę za pomocą kreatora motywów Divi.
Mamy nadzieję, że ten samouczek zainspiruje Cię do stworzenia pięknych globalnych stopek do kolejnych projektów Divi.
Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz jednak również skonsultować się 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.
...
