Jak utworzyć stały pasek stopki za pomocą Divi

Stałe paski stopki mogą być wygodnym sposobem na przechowywanie ważnych informacji o Twojej witrynie z przodu i na środku, gdy użytkownik wchodzi w interakcję z zawartością strony na dowolnym urządzeniu. 

Podobnie jak w przypadku Divi, pasek stopki zwykle istnieje jako element statyczny na samym dole strony, za treścią głównej stopki. Obejmują one takie rzeczy, jak tekst praw autorskich i ikony mediów społecznościowych. 

Jeśli jednak nie ukryjesz zawartości paska stopki u dołu strony, możesz utworzyć niestandardowy pasek stopki, który będzie się unosił u dołu ekranu, gdy użytkownik przewija.

W tym samouczku zamierzamy zaprojektować w pełni spersonalizowany stały pasek stopki za pomocą generatora motywów Divi. Przyda ci się to, aby te małe, ale ważne fragmenty treści były zawsze widoczne.

Możliwy wynik

Oto przegląd stałego paska stopki, który zaprojektujemy.

Jak dodać szablon stałego paska stopki do pobrania na stronie Divi

OSTRZEŻENIE!: Dodanie tego szablonu spowoduje zastąpienie domyślnego szablonu witryny (jeśli taki posiadasz) w witrynie Divi. Sugerujemy dodanie go do witryny testowej, aby nie zepsuć niczego w działającej witrynie.

Aby zaimportować szablon stałego paska stopki do własnej witryny internetowej, rozpakuj pobrany plik zip, aby uzyskać dostęp do pliku JSON.

Następnie przejdź do pulpitu WordPress i przejdź do Divi> Theme Builder.

Następnie kliknij ikonę przenośności w prawym górnym rogu strony.

W oknie przenośności wybierz właśnie rozpakowany plik JSON i wybierz opcję „Pobierz kopię zapasową przed importem”, na wypadek gdybyś miał wcześniej coś w domyślnym szablonie witryny, czego nie masz nie chciał wymienić.

Następnie kliknij przycisk Importuj.

Na koniec zapisz zmiany w generatorze motywów i wyświetl stronę na żywo, aby zobaczyć stały pasek stopki.

Przejdźmy teraz do samouczka, dobrze?

Część 1: Dodawanie globalnej stopki

Generator motywów Divi pozwala zamienić domyślną stopkę na nową, aktualizując domyślny szablon strony internetowej.

Aby utworzyć globalną stopkę, przejdź do pulpitu WordPress i przejdź do Divi> Theme Builder. Następnie kliknij pole „Dodaj stopkę globalną” w domyślnym szablonie witryny.

Następnie wybierz opcję „Utwórz niestandardową stopkę” z listy rozwijanej.

Spowoduje to wdrożenie Edytora układu modelu, w którym natychmiast pojawi się monit z trzema opcjami dotyczącymi sposobu rozpoczęcia budowania. Wybierz opcję „Buduj od podstaw”.

Część 2: Tworzenie stałego paska stopki

Teraz, gdy edytujemy z edytora układu szablonów, możemy rozpocząć projektowanie stałego paska stopki. Po zakończeniu będziesz mieć stały pasek stopki z trzema kolumnami, które są gotowe.

Dodaj układ trzech kolumn do linii

Najpierw dodaj układ trzech kolumn do wiersza.

Wysokość przekroju

Po dodaniu trzech kolumn nadajmy sekcji zdefiniowaną wysokość. Jest to ważne, aby utworzyć miejsce na dole strony, gdzie ostatecznie skończy się numer stacjonarny. Usuniemy również domyślne wypełnienie górne i dolne.

Aby ustawić wysokość i dopełnienie, otwórz ustawienia sekcji i zaktualizuj następujące elementy:

• Wysokość: 85px
• Wypełnienie: 0px wysoki, 0px niski

Ustawienia linii

Teraz, gdy nasza sekcja jest gotowa, jesteśmy gotowi do dostosowania wiersza, aby służył jako stały pasek stopki. Otwórz ustawienia wiersza, a następnie zaktualizuj następujące:

kontekst

• Kolor tła: # 1a1e36

Rozmiar i odstępy

• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%
• Wypełnienie: 0px w górę, 0px w dół, 3% w lewo, 3% w prawo

Niestandardowy CSS

Chociaż wiersz jest ustalony, chcemy, aby jego wysokość odpowiadała wysokości sekcji nadrzędnej, tak aby przestrzeń na dole strony prawidłowo zawierała wiersz. Chcemy mieć pewność, że zawartość wiersza pozostanie wyrównana w pionie. Aby to zrobić, dodaj następujący niestandardowy CSS do głównego elementu wiersza:

Biuro

wysokość: dziedziczenie! ważne; wyświetlanie: flex; wyrównywanie elementów: środek;

Telefon

wysokość: dziedziczenie! ważne; wyświetlanie: blok;

Naprawiono pozycjonowanie

Aby ustawić linię tak, aby unosiła się na dole ekranu, musimy nadać jej stałą pozycję w dolnej środkowej lokalizacji w następujący sposób:

• Pozycja: stała
• Lokalizacja: dolne centrum

Część 2: Tworzenie zawartości stałego paska stopki

W tym momencie mamy stały pasek stopki gotowy do treści. Do każdej z trzech kolumn możemy dodać dowolną treść. Ale ponieważ jest to „pasek” stopki, którego wysokość jest ograniczona do 85 pikseli, musimy ograniczyć ilość treści. Z tego powodu dodamy małe menu z dynamicznym logo i 4 pozycjami menu w kolumnie 1. W kolumnie 2 dodamy tekst praw autorskich z dynamicznym bieżącym rokiem. W kolumnie 3 dodamy trzy ikony śledzenia mediów społecznościowych.

Dodaj menu do kolumny 1

W kolumnie 1 dodaj moduł menu.

Wybierz menu

Następnie wybierz jedno z menu, które już utworzyłeś w swojej witrynie. Upewnij się, że pozycje menu mają 4 lub mniej.

Dodaj logo witryny jako treść dynamiczną

W menu logo dynamicznie dodamy logo witryny. Kliknij ikonę „Użyj zawartości dynamicznej”, najeżdżając kursorem na obszar podglądu logo. Następnie wybierz Logo witryny z listy rozwijanej.

Usuń tło

Następnie usuń domyślne tło menu, aby było przezroczyste.

Menu projekt

W tym momencie jesteśmy gotowi, aby dodać trochę projektu do menu. W przypadku tego projektu postaramy się, aby był prosty i mały. Zaktualizuj następujące parametry projektowe:

• Menu czcionek: Wiadukt
• Kolor tekstu menu: # b59c61
• Obraz w sepii: 100%
• Maksymalna wysokość logo: 50 pikseli

Dodaj tekst praw autorskich do kolumny 2

Po wprowadzeniu menu przejdź do kolumny 2, aby dodać tekst chroniony prawem autorskim.

Dodaj moduł tekstowy

Dodaj nowy moduł tekstowy do kolumny 2.

Dynamicznie dodaj bieżącą datę przed i po tekście

Tutaj mamy zamiar uzyskać kreatywność z dynamiczną zawartością, aby wyświetlić bieżący rok w tekście dotyczącym praw autorskich. Zapewni to automatyczną aktualizację roku przez cały okres istnienia witryny.

W tym celu kliknij ikonę „Użyj zawartości dynamicznej” i wybierz z listy „Aktualna data”.

W wyskakującym oknie Bieżąca data zaktualizuj następujące elementy:

• przed:
• 01Copyright ©

• po:
• 01| Tous Droits Reservés

• Format daty : niestandardowe
• Niestandardowy format daty : 20 lata

Formatowanie tekstu

Zaktualizuj projekt tekstu i margines w następujący sposób:

• Czcionka tekstu: Overpass
• Kolor tekstu: # b59c61
• Wyrównanie tekstu: środek
• Margines (tylko telefon): 10 pikseli u góry, 10 pikseli u dołu

Obsługuje tekst chroniony prawem autorskim.

Dodaj ikony śledzenia w mediach społecznościowych do kolumny 3

W kolumnie 3 dodaj moduł śledzenia mediów społecznościowych.

Dodaj sieci społecznościowe

Na karcie Treść dodaj niezbędne sieci społecznościowe do witryny. Do tego projektu używamy trzech z nich.

Ustawienia śledzenia w mediach społecznościowych

Następnie zaktualizuj ustawienia projektu dla wszystkich ikon śledzenia w mediach społecznościowych w następujący sposób:

• Wyrównanie modułu: prosty (komputer stacjonarny i tablet), środek (telefon)
• Kolor ikony: # 1a1e36
• Użyj niestandardowego rozmiaru ikon: TAK
• Rozmiar czcionki ikon: 16px (komputer i tablet), 14px (telefon)

Zaktualizuj ustawienia mediów społecznościowych

Aby zaktualizować projekt indywidualnej ikony sieci społecznościowej, otwórz ustawienia dla pierwszej sieci i zaktualizuj następujące elementy:

• Kolor tła: #ffffff
• Wypełnienie: 8 pikseli po prawej, 8 pikseli po lewej
• Zaokrąglone rogi: 8px

Rozszerz ustawienia mediów społecznościowych na wszystkich

Następnie otwórz menu dodatkowych ustawień dla pierwszej sieci i wybierz „ Rozszerz style elementów " na liście. W wyskakującym oknie Rozszerz style wybierz opcję Rozszerz style w Ta kolumna „I kliknij Rozwiń .

Spowoduje to rozszerzenie projektu na pozostałe ikony w kolumnie.

końcowe przemyślenia

W niektórych przypadkach dodanie stałego paska stopki ma sens. Wysokość paska jest na tyle mała, że ​​nie rozprasza ani nie zajmuje zbyt dużo miejsca na telefonie komórkowym. Daje też możliwość dodawania ważnych wezwań do działania w celu uzyskania lepszych konwersji i płynniejszego użytkowania.

W tym projekcie przestrzeń na dole strony jest tworzona przez ustawienie stałej wysokości sekcji, a następnie zezwolenie stałej linii na dziedziczenie wysokości sekcji (chociaż jest ona stała). 

Inne zasoby

Oto lista dodatkowych zasobów, które mogą Ci pomóc w projektowaniu witryny za pomocą Divi.

• Jak utworzyć niestandardową stronę logowania na Divi
• Jak dodać moduł nawigacji o pełnej szerokości w Divi
• Jak utworzyć suwak pełnoekranowy w Divi
• Jak dodać okrągły licznik na Divi