Jak utworzyć stały pasek stopki za pomocą Divi
Naprawione paski stopki mogą być przydatnym sposobem przechowywania ważnych informacji o witrynie na pierwszym planie, gdy użytkownik wchodzi w interakcję z zawartością strony na dowolnym urządzeniu.
Podobnie jak w przypadku Divi, pasek stopki zwykle występuje jako element statyczny na dole strony po zawartości głównej stopki. Zawierają elementy takie jak tekst chroniony prawem autorskim 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 unosi się u dołu ekranu podczas przewijania użytkownika.
W tym samouczku zaprojektujemy w pełni dostosowany stały pasek stopki za pomocą generatora motywów Divi. Pomoże to w utrzymaniu tych małych, ale ważnych elementów przez cały czas na widoku.
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 zastąpi domyślny szablon strony internetowej (jeśli taki masz) na stronie Divi. Sugerujemy dodanie go do strony testowej, aby nie zepsuć niczego na aktywnej stronie.
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 wcześniej w domyślnym szablonie witryny było coś, czego nie miałeś nie chciałem 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.
Teraz przejdźmy 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> Konstruktor motywów. Następnie kliknij przestrzeń „Dodaj globalną stopkę” 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 zostaną wyświetlone trzy opcje wyboru sposobu rozpoczęcia budowy. Wybierz „Buduj od zera”.
Część 2: Tworzenie stałego paska stopki
Teraz, gdy edytujemy z edytora układu szablonu, 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 do zawartości.
Dodaj układ trzech kolumn do linii
Najpierw dodaj do wiersza układ trzech kolumn.
Wysokość przekroju
Po dodaniu trzech kolumn podajmy określoną wysokość sekcji. Jest to ważne, aby utworzyć miejsce na dole strony, na którym kończy się telefon stacjonarny. Usuniemy również domyślną górną i dolną wyściółkę.
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 dostosować linię, aby służyła jako stały pasek stopki. Otwórz ustawienia linii, a następnie zaktualizuj:
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ż linia jest ustalona, chcemy, aby wysokość linii była zgodna z wysokością sekcji nadrzędnej, aby spacja na dole strony zawierała poprawnie linię. I chcemy się upewnić, że zawartość linii pozostaje wyrównana w pionie. Aby to zrobić, dodaj następujący niestandardowy CSS do głównego elementu linii:
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ę u dołu ekranu, musimy nadać jej stałą pozycję w dolnej centralnej 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 zawartości. Możemy dodać dowolną treść do każdej z trzech kolumn. Ale ponieważ jest to „pasek” stopki o wysokości ograniczonej do 85 pikseli, musimy ograniczyć ilość treści. Z tego powodu dodamy małe menu z dynamicznym logo i 4 elementami menu w kolumnie 1. W kolumnie 2 dodamy tekst chroniony prawem autorskim z dynamicznym bieżącym rokiem. W kolumnie 3 dodamy trzy ikony śledzenia w mediach 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 wynoszą 4 lub mniej.
Dodaj logo witryny jako treść dynamiczną
W menu logo dynamicznie dodamy logo strony. Kliknij ikonę „Użyj zawartości dynamicznej”, gdy najedziesz myszką na obszar podglądu logo. Następnie wybierz Logo witryny z listy rozwijanej.
Usuń tło
Następnie usuń domyślne tło z menu, aby było przezroczyste.
Menu projekt
W tym momencie jesteśmy gotowi dodać projekt do menu. W przypadku tego projektu utrzymamy go prostym i małym. Zaktualizuj następujące parametry projektu:
- 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 będziemy kreatywni z dynamicznymi treściami, aby wyświetlić bieżący rok w tekście chronionym prawem autorskim. Dzięki temu rok będzie aktualizowany automatycznie przez cały okres użytkowania witryny.
Aby to zrobić, kliknij ikonę „Użyj zawartości dynamicznej” i wybierz z listy pozycję „Aktualna data”.
W wyskakującym oknie Bieżąca data zaktualizuj następujące elementy:
- przed:
- 01
Prawa autorskie i kopiowanie;
- po:
- 01
| Wszelkie prawa zastrzeżone
- 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 zawartości dodaj niezbędne sieci społecznościowe do witryny. Do tego projektu używamy trzech.
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:
Z łatwością stwórz swój sklep internetowy
Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]
- Wyrównanie modułu: prosty (komputer stacjonarny i tablet), środek (telefon)
- Kolor ikony: # 1a1e36
- Użyj niestandardowego rozmiaru ikony: TAK
- Rozmiar czcionki ikony: 16 px (komputer stacjonarny i tablet), 14 px (telefon)
Zaktualizuj ustawienia mediów społecznościowych
Aby zaktualizować projekt indywidualnej ikony sieci społecznościowej, otwórz ustawienia 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 Rozwiń style wybierz rozwinięcie stylów w „ Ta kolumna „I kliknij Rozwiń .
Spowoduje to rozszerzenie projektu na pozostałe ikony w kolumnie.
końcowe przemyślenia
Dodanie stałego paska stopki ma w niektórych przypadkach sens. Wysokość paska jest wystarczająco mała, aby nie rozpraszać uwagi ani nie zajmować zbyt wiele miejsca w telefonie komórkowym. Daje to możliwość dodawania dużych wezwań do działania w celu uzyskania lepszych konwersji i płynniejszej obsługi.
W tym projekcie przestrzeń u dołu strony jest tworzona przez zdefiniowanie stałej wysokości sekcji, a następnie umożliwienie linii stałej odziedziczenia wysokości sekcji (chociaż jest stała).
Inne zasoby
Oto lista dodatkowych zasobów, które mogą Ci pomóc w projektowaniu witryny za pomocą Divi.
