Pobierz BEZPŁATNY projekt minimalnego nagłówka i stopki stworzony za pomocą kreatora motywów Divi

Projektując globalną stopkę i nagłówek, należy wziąć pod uwagę ogólny styl projektowania witryny. Jeśli na przykład budujesz minimalną witrynę internetową, z dużą ilością pustej przestrzeni, najlepszym rozwiązaniem jest również minimalny nagłówek i stopka. W dzisiejszym samouczku podzielimy się darmowym, minimalnym projektem combo nagłówka i stopki, którego możesz swobodnie używać na dowolnej stronie internetowej, którą tworzysz i bez żadnych ograniczeń! Przeprowadzimy Cię również krok po kroku przez proces odtwarzania.

Weźmy się za to.

Zapowiedź

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

Pobierz domyślny szablon strony z minimalnym nagłówkiem i stopką za DARMO

Aby położyć ręce na darmowym, domyślnym szablonie witryny z kombinacją nagłówka i stopki, 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!

https://youtu.be/EUtzKvn6PUI

Subskrybuj nasz kanał YouTube

1. Utwórz globalny nagłówek

Przejdź do kreatora motywów Divi

Zacznij od przejścia do Divi Theme Builder i kliknij „Dodaj globalny nagłówek”.

Zacznij budować globalny nagłówek

Następnie zacznij budować globalny nagłówek.

Zmodyfikuj sekcję #1

Rozstaw

W edytorze szablonów zauważysz sekcję. Otwórz ustawienia sekcji 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 wiersza i zmodyfikuj ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 80% (komputer stacjonarny), 90% (tablet i telefon)

Rozstaw

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

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

Granica

Użyj też dolnej granicy.

• Szerokość dolnego obramowania: 1px
• Kolor dolnej krawędzi: #333333

Główny element

Następnie przejdź do zakładki zaawansowane i dodaj pojedynczą linię kodu CSS do głównego elementu wiersza. Pomoże nam to utrzymać kolumny obok siebie na mniejszych ekranach.

display: flex;

Wszystkie odstępy między kolumnami

Następnie dodamy niestandardowe wypełnienie do wszystkich kolumn w naszym wierszu.

• Górna wyściółka: 1%
• Dolna wyściółka: 1%

Ramka kolumny 1 i 2

Dodamy również prawą ramkę do pierwszej i drugiej kolumny.

• Szerokość prawego obramowania: 1px
• Kolor prawego obramowania: #333333

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

Dodaj sieci społecznościowe

Czas dodać moduły, zaczynając od modułu Social Media Follow w kolumnie 1. Dodaj wybrane przez siebie sieci społecznościowe.

Usuń indywidualny kolor tła każdej sieci społecznościowej

Kontynuuj, usuwając kolor tła każdej sieci społecznościowej na indywidualnym poziomie.

Wyrównanie

Następnie wróć do ogólnych ustawień modułu i zmień wyrównanie modułu w zakładce projekt.

• Wyrównanie modułu: Środek

Ustawienia ikon

Następnie zmień ustawienia ikon.

• Kolor ikony: #000000
• Użyj niestandardowego rozmiaru ikony: Tak
• Rozmiar czcionki ikony: 16px (komputer), 14px (tablet i telefon)

Rozstaw

I uzupełnij ustawienia modułu, dodając trochę górnego marginesu.

• Górny margines: 2%

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość

W drugiej kolumnie dodamy moduł tekstowy z wybraną przez nas zawartością.

Ustawienia tekstu

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

• Czcionka tekstu: Roboto Mono
• Kolor tekstu: #000000
• Rozmiar tekstu: 17px (komputer), 15px (tablet), 13px (telefon)
• Wyrównanie tekstu: do środka

Rozstaw

Dodamy też górny margines.

• Górny margines: 3%

Dodaj moduł przycisku do kolumny 3

Dodaj kopię

Do ostatniej kolumny. Dodaj moduł przycisku z wybraną kopią.

Wyrównanie przycisków

Przejdź do zakładki projektu modułu i odpowiednio zmień wyrównanie:

• Wyrównanie przycisków: środek

Ustawienia przycisków

Następnie przejdź do ustawień przycisków i stylizuj przyciski w następujący sposób:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 20px (komputer), 16px (tablet), 13px (telefon)
• Kolor tekstu przycisku: #670fff
• Szerokość obramowania przycisku: 0px

• Czcionka przycisku: Roboto Mono
• Waga czcionki przycisku: pogrubiona
• Umieszczenie ikony przycisku: w lewo
• Pokaż tylko ikonę po najechaniu na przycisk: Nie

Dodaj sekcję #2

Rozstaw

Dodaj kolejną regularną sekcję tuż pod poprzednią. Otwórz ustawienia sekcji i usuń domyślną górną wyściółkę.

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

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Bez dodawania żadnych modułów otwórz ustawienia wiersza i odpowiednio zmodyfikuj ustawienia rozmiaru:

• Szerokość: 90%
• Maksymalna szerokość: 100%

Granica

Następnie dodaj dolną granicę.

• Szerokość dolnego obramowania: 1px
• Kolor dolnej krawędzi: #333333

Dodaj moduł menu do kolumny

Wybierz menu

Następnie dodaj moduł menu do kolumny wiersza i wybierz wybrane menu.

Prześlij logo

Następnie prześlij logo.

Ustawienia tekstu menu

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

• Czcionka menu: Roboto
• Kolor tekstu menu: #000000
• Rozmiar tekstu menu: 18px
• Wyrównanie tekstu: do prawej

Menu rozwijane Ustawienia tekstu

Zmień też kolor linii menu rozwijanego.

• Kolor linii menu rozwijanego: #670fff

Ustawienia ikon

Wraz z kolorem ikony menu hamburgera w ustawieniach ikon.

• Kolor ikony menu Hamburger: #670fff

Rozmiary

Uzupełnij ustawienia modułu, zmieniając maksymalną szerokość logo w ustawieniach rozmiaru.

• Maksymalna szerokość logo: 35%

Zapisz sekcję #1 w bibliotece Divi

Po ukończeniu globalnego nagłówka i wszystkich jego elementów możesz zapisać pierwszą sekcję w swojej bibliotece Divi. Ta sekcja zostanie ponownie wykorzystana później w naszej globalnej stopce.

Zapisz zmiany globalnego nagłówka i kreatora motywów

Następnie zapisz globalny szablon nagłówka wraz ze zmianami Divi Theme Builder.

2. Utwórz globalną stopkę

Zacznij tworzyć globalną stopkę

Do globalnej stopki! Zacznij budować stopkę od podstaw.

Dodaj nowy wiersz do sekcji #1

Struktura kolumny

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

Rozmiary

Otwórz ustawienia wiersza i zmień ustawienia rozmiaru w następujący sposób:

• Wyrównaj wysokości kolumn: Tak
• Szerokość: 95%
• Maksymalna szerokość: 100%

Granica

I uzupełnij ustawienia wiersza, dodając górną ramkę.

• Szerokość górnej granicy: 1px
• Kolor górnej granicy: #333333

Dodaj moduł obrazu do kolumny 1

Prześlij logo

Czas dodać moduły, zaczynając od modułu obrazu w kolumnie 1. Prześlij logo.

Rozmiary

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

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

Dodaj moduł e-mail Optin do kolumny 1

Usuń zawartość

Następnym modułem, którego potrzebujemy w kolumnie 1, jest moduł Email Optin. Usuń całą kopię.

Połącz konto e-mail

Następnie dodaj wybrane konto e-mail.

Usuń kolor tła

Następnie usuń domyślny kolor tła.

Układ

Przejdź do karty projektu i upewnij się, że obowiązuje następujący układ:

• Układ: ciało po lewej stronie, formularz po prawej

Ustawienia pól

Zmień też ustawienia pól.

• Górna wyściółka: 10px
• Dolna wyściółka: 10px
• Czcionka pól: Roboto Mono

• Pola zaokrąglone rogi: 0px (wszystkie rogi)
• Szerokość obramowania pól: 1px
• Kolor obramowania pól: #333333

Ustawienia przycisków

I uzupełnij ustawienia modułu, stylizując przycisk w następujący sposób:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 18px
• Kolor tła przycisku: #000000
• Czcionka przycisku: Roboto Mono

Dodaj moduł tekstowy #1 do kolumny 2

Dodaj zawartość

Do drugiej kolumny. Dodaj pierwszy moduł tekstowy z wybraną zawartością.

Ustawienia tekstu

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

• Czcionka tekstu: Roboto Mono
• Grubość czcionki tekstu: pogrubiona
• Kolor tekstu: #000000
• Rozmiar tekstu: 21px
• Wyrównanie tekstu: do środka

Rozstaw

Dodaj też dolny margines.

• Dolny margines: 10%

Dodaj moduł rozdzielający do kolumny 2

Widoczność

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

• Pokaż dzielnik: tak

Ustawienia linii

Następnie zmień ustawienia linii modułu.

• Kolor linii: #000000
• Styl linii: Jednolity
• Pozycja linii: górna

Dodaj moduł tekstowy nr 2 do kolumny 2

Dodaj zawartość

Dodaj kolejny moduł tekstowy do drugiej kolumny z wybranym elementem stopki.

Dodaj link

Dodaj link dalej.

Ustawienia tekstu

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

• Czcionka tekstu: Roboto Mono
• Kolor tekstu: #000000
• Rozmiar tekstu: 16px
• Wyrównanie tekstu: do środka

Rozstaw

Dodaj też dolny margines.

• Marża dolna: 2%

Klonuj moduł tekstowy nr 2 tyle razy, ile potrzeba

Po ukończeniu drugiego modułu tekstowego w kolumnie 2 możesz go sklonować dowolną liczbę razy, w zależności od tego, ile elementów stopki chcesz wyświetlić.

Modyfikuj zawartość i linki

Zmodyfikuj zawartość i linki każdego zduplikowanego modułu tekstowego.

Klonuj kolumnę 2 dwa razy

Po wypełnieniu drugiej kolumny i wszystkich jej elementów w stopce możesz dwukrotnie sklonować całą kolumnę.

Modyfikuj zawartość i linki

Zmodyfikuj treść i linki w zduplikowanych kolumnach.

Importuj sekcję #2

Po ukończeniu pierwszej sekcji nadszedł czas na zaimportowanie sekcji, której użyliśmy w globalnym nagłówku.

Zmień granicę wiersza

Otwórz ustawienia wiersza w drugiej sekcji, usuń dolną granicę i zamiast tego dodaj górną granicę.

• Szerokość górnej granicy: 1px
• Kolor górnej granicy: #333333
• Szerokość dolnej krawędzi: 0px

Zmień zawartość w module tekstowym

Zmień kopię w module tekstowym w kolumnie 2.

Zapisz globalną stopkę

Po wypełnieniu stopki globalnej pamiętaj o zapisaniu wszystkich zmian.

3. Zapisz zmiany i podgląd w kreatorze motywów

Następnie wyjdź z edytora szablonów, zapisz wszystkie zmiany Divi Theme Builder i wyświetl podgląd wyniku na swojej stronie!

Zapowiedź

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

Końcowe przemyślenia

W tym poście udostępniliśmy piękną minimalną kombinację nagłówka i stopki, z której możesz swobodnie korzystać na dowolnej stronie internetowej, którą tworzysz i bez żadnych ograniczeń! Ta kombinacja nagłówka i stopki jest świetnym dodatkiem do minimalnych witryn, które tworzysz. Zawiera wiele elementów, które nie sprawiają, że ogólny wygląd jest przytłaczający. Odtworzyliśmy również projekt od podstaw. 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.