Uzyskaj natychmiastowy hosting z elementem ELEMENTORem i ELEMENTOR PRO

Z CDN, SSL i kopią zapasami.

Zacznij dzisiaj

Jak zbudować niestandardową stopkę za pomocą Divi Builder

Rifat Divi Tutorials Apr 11, 2022

W wyniku Divi Theme Builder rozpoczęła się nowa era w tworzeniu stron internetowych. Dzięki tej nowej funkcjonalności możesz dynamicznie dodawać globalne stopki do swoich stron i artykułów. Aby dodać stopkę do dowolnej strony lub posta, po prostu użyj narzędzia Divi Theme Builder (dołączonego do motywu Divi). Teraz w tym artykule pokażemy, jak utworzyć i dodać globalną stopkę do swojej witryny. Dodatkowo możesz bezpłatnie pobrać plik JSON!

Zapowiedź

Zanim zaczniemy, przyjrzyjmy się najpierw, jak globalna stopka wygląda na ekranach o różnych rozmiarach.

Procedura projektowania

Najpierw zaloguj się do swojego pulpitu nawigacyjnego WordPress. W opcjach motywu Divi przejdź do Kreatora motywów.

Tam masz możliwość skorzystania z istniejącej globalnej stopki lub stworzenia nowej od podstaw za pomocą biblioteki Divi. W tej lekcji będziemy tworzyć niestandardową stopkę od podstaw, więc wybierz opcję pierwszą.

Twórz niesamowite strony internetowe

Z najlepszym darmowym kreatorem stron Elementor

Zacząć teraz

Sekcja nr 1

BG kolor

Czas na kreatywność! Otwórz sekcję na stronie i zmień kolor tła sekcji.

  • Kolor tła: #000000

Rozstaw

Następnie zaktualizuj odstępy przekrojów zgodnie z następującymi wartościami.

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

Granica

Następnym krokiem jest dodanie obramowania u góry, po lewej i po prawej stronie.

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

Cień Pudełka

W ustawieniach sekcji należy również uwzględnić cień pudełka.

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

Dodaj nowy wiersz

Teraz dodaj do sekcji nowy wiersz z jedną kolumną.

Dodaj nowy moduł tekstowy

Następnie dodaj moduł tekstowy i dodaj kopię do tego modułu.

Ustawienia tekstu H2

W razie potrzeby zmień ustawienia tekstu H2 na karcie projektu modułu:

  • 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

Rozmiar modułu tekstowego

Moduł powinien mieć również maksymalną szerokość.

  • Maksymalna szerokość: 700px

Dodaj moduł przycisku

Tuż pod modułem tekstowym dodaj moduł przycisku i wypełnij go dowolną kopią.

Wyrównanie przycisków

Zmień wyrównanie przycisku do środka na karcie projektu modułu.

  • Wyrównanie przycisków: środek

Ustawienia przycisków

Teraz nadajmy styl przyciskowi.

  • 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 przycisków

Czas dodać niestandardowe wypełnienie.

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

Sekcja nr 2

Kolor tła

Kolejny normalny rozdział jest tutaj! Wybierz biały kolor tła dla sekcji.

  • Kolor tła: #ffffff

Rozstaw

Usuń całą amortyzację z góry i dołu.

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

Granica

Sekcja powinna mieć również dodany promień granicy.

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

Cień Pudełka

Teraz zakończ edycję przekroju, dodając cień pudełka.

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

Dodaj nowy wiersz

Możesz teraz dodać nowy wiersz do swojej sekcji, postępując zgodnie z tymi instrukcjami:

Rozmiar wiersza

Otwórz ustawienia wiersza i włącz, aby wiersz zajmował cały ekran bez dodawania dodatkowych modułów.

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

Rozstaw wierszy

Usuń wypełnienie rzędu na górze i na dole.

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

Odstępy między kolumnami

Przejdź do ustawień kolumn i dodaj określone wartości dopełnienia dla różnych szerokości ekranu.

  • Górne dopełnienie: 100px (komputer), 50px (Telefon &)
  • Dolna wyściółka: 100px (komputer), 50px (Telefon &)
  • Lewa wyściółka: 50px
  • Prawe wypełnienie: 50px

Moduł tekstowy 1

Teraz lub nigdy w przypadku dodawania modułów! Dodaj standardowy moduł tekstowy do kolumny 1 i wypełnij go wybranymi przez siebie elementami.

Ustawienia tekstu

W razie potrzeby zmień ustawienia tekstu na karcie projektu modułu:

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

Rozstaw

Następnym krokiem jest dodanie unikalnych górnych i dolnych marginesów.

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

Widoczność modułu rozdzielającego

Moduły rozdzielające można dodać tuż pod modułem tekstowym, jeśli zaznaczona jest opcja „Pokaż rozdzielacz”.

  • Pokaż dzielnik: tak

Linia

Teraz zmień kolor.

  • Kolor linii: #000000

Rozmiary

Rozmiar przegrody można również zmienić.

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

Moduł tekstowy 2

Do kolumny można teraz dodać moduły tekstowe.

Połączyć

Dołącz adres URL strony, do której chcesz skierować ten moduł.

Ustawienia tekstu

Na karcie projektu dostosuj ustawienia tekstu w następujący sposób:

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

Rozstaw

Uwzględnij również trochę miejsca u góry iu dołu strony.

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

Klonowanie modułu tekstowego 2

Możliwe jest sklonowanie drugiego modułu tekstowego w kolumnie nieograniczoną liczbę razy po zakończeniu jego tworzenia (w zależności od liczby klikalnych elementów stopki, które chcesz uwzględnić).

Zmień linki

W przypadku każdej kopii zaktualizuj zawartość modułu i linki.

Klonuj kolumnę dwa razy

Możesz sklonować kolumnę dwa razy po zakończeniu budowania jej i wszystkich jej modułów.

Kolumna 2 BG Zmiana koloru

Możesz sklonować kolumnę dwa razy po zakończeniu budowania jej i wszystkich jej modułów.

  • Kolor tła kolumny 2: #f9f9f9

Dodaj nową kolumnę

Następnie należy dodać czwartą kolumnę.

Kolor tła

Pokoloruj tło nowej kolumny.

  • Kolor tła: #0fffc7

Rozstaw

Oprócz wartości dopełnienia w kolumnie.

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

Ikona mediów społecznościowych

Dodaj moduł Social Media Follow do kolumny 4, aby uzupełnić tabelę.

Wyrównanie

Na karcie Projekt dostosuj położenie modułu.

  • Wyrównanie modułu: Środek

Ikona

Teraz zmień kolor ikony.

  • Kolor ikony: #000000

Moduł e-mail

Kontynuuj, wstawiając moduł zgody na pocztę e-mail w kolumnie 4, a następnie usuwając tytuł i treść. Następnie połącz osobiste konto e-mail. Jeśli konto e-mail nie zostanie dodane, moduł nie pojawi się po zamknięciu kreatora.

Usuń także BG z modułu poczty e-mail.

Ustawienia pól

Przejdź do zakładki projekt i dokonaj następujących zmian w polach:

  • 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

Przycisk

Teraz zmień styl przycisku.

  • 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

Na koniec musimy dodać moduł tekstowy, aby zakończyć ten projekt. W polu zawartości wybierz opcję zawartości dynamicznej. Następnie wprowadź następujące zmiany.

  • Treść dynamiczna: bieżąca data
  • Przed: Prawa autorskie ©
  • Po: | Wszelkie prawa zastrzeżone
  • Format daty: niestandardowy
  • Niestandardowy format daty: 20 lat

Ustawienia tekstu

Na karcie projektu zmień następujące ustawienia.

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

Rozstaw

Skończysz z ustawieniami modułu, jeśli dodasz górny margines.

  • Górny margines: 50px

Ostateczny podgląd

Rzućmy okiem na wyniki na różnych rozmiarach ekranu teraz, gdy zakończyliśmy wszystkie procesy.

Myśli zamykające

W tym przewodniku nauczyliśmy Cię, jak korzystać z nowego Kreatora motywów Divi , aby stworzyć oszałamiającą niestandardową globalną stopkę. Za pomocą wbudowanych modułów i opcji projektowania Theme Builder i Divi możesz tworzyć piękne strony internetowe w ciągu kilku godzin. Naszym celem jest, abyś w przyszłości wykorzystał ten samouczek do tworzenia wspaniałych globalnych stopek Divi. Zachęcamy do pozostawienia jakichkolwiek pytań lub komentarzy w sekcji komentarzy poniżej!