Przejdź do głównej treści

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

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 701.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

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.

Zapisz zmiany divi

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.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

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.

Sekcja 3-rzędowa

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
Konfiguracja wysokości sekcji Divi 1

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
Dostęp do ustawień linii

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
Dostosuj sekcję Divi

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;
Dodaj kod CSS

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
Pozycja stopki

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.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

Wybór menu Wordpress

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.

Moduł wordpress menu wyboru

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.

Dodaj logo

Usuń tło

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

Usuń tło

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
Zmień kolor czcionki

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.

Moduł wyboru tekstów divi

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”.

Data wyboru

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
Dostosuj datę

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
Moduł tekstowy wyboru czcionki Divi

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.

Dodaj moduł monitorowania sieci społecznościowych

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)
Personnalsier policyjna dywizja

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:

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]

  • Kolor tła: #ffffff
  • Wypełnienie: 8 pikseli po prawej, 8 pikseli po lewej
  • Zaokrąglone rogi: 8px
naprawiono divi bar stóp

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.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
3 akcji
udział3
ćwierkanie
Enregistrer