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 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

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.

Ł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 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:

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]

  • 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:
  • 01Prawa 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
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 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.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie 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
0 akcji
udział
ćwierkanie
Enregistrer