Jak dodać kreatywne projekty tła do dolnego paska stopki Divi?

Dolny pasek stopki Divi to mały, ale znaczący element Twojej witryny. W przypadku niektórych układów stron może być konieczne dodanie kreatywnego, końcowego szlifu do tego dolnego paska.

W tym samouczku pokażę, jak dodać niestandardowe projekty tła dla dolnego paska stopki Divi. Usuwając domyślny kolor tła dolnego paska stopki i dodając niestandardowy margines do sekcji, możesz wykorzystać ustawienia projektu sekcji do tworzenia fajnych projektów tła.

Zacznijmy.

Zajawka

Oto zajawka kilku przykładowych projektów, które możesz zbudować za pomocą tego samouczka.

Dostosowywanie dolnego paska stopki w Theme Customizer

Zanim będziemy mogli dodać niestandardowe tła za naszym dolnym paskiem stopki, musimy pozbyć się używanego domyślnego koloru tła.

Przejdź do dostosowywania motywów i przejdź do Stopka> Dolny pasek. Następnie zmień kolor tła, aby był całkowicie przezroczysty.

Możesz nie zauważyć dużej zmiany w podglądzie, ponieważ za dolnym paskiem nadal znajduje się kolor tła stopki. Kolor tła stopki można zmienić w obszarze Stopka > Układ, ale dobrym pomysłem jest pozostawienie aktywnego koloru tła jako opcji zastępczej. Niestandardowe tło zostanie dodane do dolnego paska za pomocą sekcji na zasadzie strona po stronie. Posiadanie tego tła zapewni, że zawartość dolnego paska będzie miała tło na stronach, które nie mają niestandardowego tła.

Możesz także zmienić kolor tekstu dolnego paska i kolor ikony społecznościowej na biały, jeśli planujesz mieć ciemniejszy projekt tła. Dzięki temu treść będzie bardziej czytelna.

Tworzenie projektu tła przekroju dla dolnego paska

Teraz, gdy dolny pasek stopki ma przezroczyste tło, jesteśmy gotowi zaprojektować tło sekcji i umieścić je za paskiem.

Jeśli jeszcze tego nie zrobiłeś, utwórz nową stronę i wybierz „Buduj od podstaw”. Następnie wstaw układ jednokolumnowy dla wiersza sekcji.

Nie ma potrzeby dodawania modułu do wiersza, ponieważ będziemy potrzebować tylko sekcji i wiersza do projektów tła.

Następnie przejdź do ustawień wiersza i dodaj odstępy w następujący sposób:

Margines niestandardowy: 0px góra, 0px dół
Niestandardowe wypełnienie (komputer): 80px na górze, 80px na dole
Niestandardowe wypełnienie (tablet): 100px góra, 100px dół

Ten odstęp jest potrzebny, aby nadać naszej sekcji pewną wysokość, jednocześnie zachowując przestrzeń potrzebną na przegrody sekcji, które dodamy do naszego projektu tła.

Teraz przejdź do ustawień sekcji i zaktualizuj odstępy w następujący sposób:

Margines niestandardowy (komputer): -55px na dole
Margines niestandardowy (tablet): -94px dół
Niestandardowe dopełnienie: 0px góra, 0px dół

Margines dolny -55px wciąga dolny pasek do obszaru sekcji, tak aby projekt, który dodamy do naszej sekcji, znajdował się za naszym dolnym paskiem. Dolny pasek domyślnie ma wysokość 54 pikseli na komputerze i około 94 pikseli na tablecie, dlatego potrzebujesz większego ujemnego marginesu dla tabletu.

Pozbycie się górnej i dolnej wyściółki maksymalizuje przestrzeń potrzebną na przegrodę sekcji, którą dodamy później.

Dodawanie dolnej przegrody

Następnie dodaj dolny separator do sekcji, aby wykadrować zawartość stopki w następujący sposób:

Styl dolnego rozdzielacza: patrz zrzut ekranu
Kolor rozdzielacza: #121212
Wysokość dzielnika: 120px (komputer), 150px (tablet), 150px (smartfon)
Powtarzanie w poziomie dzielnika: 0,9x (komputer), 0,5x (tablet), 0,5x (smartfon)
Przerzucanie dzielnika: pionowe

Obecnie zawartość dolnego paska (tekst i ikony społecznościowe) jest ukryta za dzielnikiem, mimo że układ dzielników jest ustawiony poniżej zawartości sekcji. Dzieje się tak, ponieważ dolna stopka nie jest technicznie częścią zawartości sekcji. Aby to naprawić, musimy dodać niestandardowy indeks Z do naszej sekcji, tak aby znajdował się za dolną stopką.

Na karcie Zaawansowane dodaj następujący niestandardowy fragment kodu CSS do elementu głównego:

z-index: 0;

Teraz zawartość paska stopki będzie znajdować się nad sekcją i masz ładny projekt tła, który oprawi pasek stopki.

I ładnie dopasuje się również na urządzeniach mobilnych.

Dzięki tej podstawowej strukturze masz ładny projekt sekcji, na którym możesz się oprzeć. Mając to na uwadze, zapisz tę sekcję w swojej bibliotece, aby móc wykorzystać tę strukturę jako punkt wyjścia do eksploracji projektów.

Teraz jesteś gotowy do odkrywania nowych projektów. Możesz zmienić dolną przegrodę na różne style i kolory, aby stworzyć niezliczone wzory ramek tła. Może być konieczne dodanie dostosowania wysokości przegrody i wartości powtarzania poziomego w zależności od wybranego stylu przegrody.

Oto kilka przykładów.

Korzystanie z górnej przegrody z niestandardowym gradientem tła

Używanie pojedynczej dolnej przegrody jako projektu ramki tła dla dolnej stopki jest nieco ograniczające. Ale jeśli używasz górnej przegrody jako projektu ramki, możesz użyć niestandardowego gradientu tła dla swojej sekcji. Otworzy to nowe drzwi do odkrycia.

Przejdź do ustawień sekcji i ustaw styl dolnej przegrody na brak. Następnie dodaj gradient tła jako tło sekcji.

Teraz możesz dodać styl górnego podziału do swojej sekcji, aby stworzyć zupełnie nowy wygląd.

Oto kilka przykładowych projektów możliwych po prostu przez zmianę tła gradientu i stylu dzielnika.

Łączenie dzielników z gradientami tła w celu uzyskania wielokolorowego projektu ramki obramowania

Teraz nadszedł czas, aby podnieść poprzeczkę. Pamiętaj, że istnieje wiele możliwości tworzenia niepowtarzalnych projektów tła w sekcjach i wierszach. W tym ostatnim przykładzie pokażę, jak połączyć te cechy, aby stworzyć całkowicie unikalny projekt.

Aby przyspieszyć ten projekt, skorzystaj z sekcji zapisanej w bibliotece, klikając, aby dodać nową sekcję w konstruktorze wizualnym, wybierając kartę Dodaj z biblioteki i wybierając układ sekcji.

Po dodaniu sekcji do strony jesteśmy gotowi do dostosowania.

Na początek przejdź do ustawień sekcji i zaktualizuj następujące elementy:

Kolor gradientu tła po lewej stronie: #29c4a9
Kolor gradientu tła po lewej stronie: #2b87da

Kierunek gradientu: 90 stopni
Pozycja startowa: 50%
Pozycja końcowa: 0%

Teraz dodaj górną przegrodę w następujący sposób:

Styl Top Divider: patrz zrzut ekranu
Kolor dzielnika: #ffffff
Wysokość dzielnika: 120px (komputer), 150px (tablet), 150px (smartfon)
Powtarzanie w poziomie: 0,9x (komputer), 0,5x (tablet), 0,5x (smartfon)
Przerzucanie dzielnika: pionowe

Te ustawienia przegrody całkowicie odzwierciedlają dolną przegrodę, tworząc granicę otaczającą dolną przegrodę. Ponieważ sama przegroda jest biała, sprawia to wrażenie, że gradient tła jest przedłużeniem dolnej przegrody.

Teraz przejdź do ustawień wiersza i dodaj gradient tła w następujący sposób:

Kolor lewego gradientu tła: #df52ff
Kolor gradientu tła po lewej stronie: #2b87da

Kierunek gradientu: 90 stopni
Pozycja startowa: 50%
Pozycja końcowa: 0%

Aby wyrównać szerokość każdego segmentu koloru dla tła, nadaj wierszowi niestandardową szerokość 50%.

Oto ostateczny projekt!

Końcowe przemyślenia

Posiadanie niestandardowego projektu tła dla dolnego paska stopki Divi może być odświeżającym dodatkiem do Twojej strony. Wystarczy kilka dostosowań do sekcji znajdującej się na dole strony. Niestety projekt jest ograniczony do jednej strony i nie można go zastosować w całej witrynie. Dlatego kolor tła stopki jest używany jako rezerwa. Ale po zapisaniu sekcji w swojej bibliotece możesz łatwo upuścić ją na dowolną stronę. Możesz nawet dodać dowolny z naszych gotowych układów do wykorzystania w następnym projekcie. Wszystko, co musisz zrobić, to dodać sekcję na samym dole strony. Mamy nadzieję, że okaże się to przydatne!

Możesz także chcieć obramować menu nawigacyjne przy użyciu podobnej techniki.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!