Stałe paski stopki mogą być wygodnym sposobem na przechowywanie ważnych informacji Witryna internetowa na pierwszym planie, gdy użytkownik wchodzi w interakcję z zawartością Twojej 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 modelu spowoduje zastąpienie szablon strony internetowej domyślnie (jeśli masz) na swojej stronie Divi. Sugerujemy dodanie go do witryny testowej, aby nie zepsuć niczego w działającej witrynie.
Aby samodzielnie zaimportować stały szablon paska stopki Witryna internetowa, 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ś wcześniej miał coś w szablon strony internetowej default, którego nie chcesz zastępować.
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
Kreator motywów Divi pozwala zastąpić domyślną stopkę nową, aktualizując plik szablon strony internetowej domyślnie.
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 linia była stała i unosiła się w dolnej części ekranu, musimy ustawić 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ś na swoim Witryna internetowa. Upewnij się, że liczba pozycji menu wynosi 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:
- 01
Copyright ©
- 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 Zasoby dodatkowe, które mogą pomóc w tworzeniu projektu 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
