Nagłówki i stopki witryny internetowej są niezbędnymi elementami. W większości przypadków nagłówek zawiera łącza nawigacyjne, które upraszczają nawigację do różnych części witryny internetowej. Z drugiej strony stopka zawiera istotne informacje, których mogą potrzebować odwiedzający witrynę, takie jak adres firmy lub dane kontaktowe, żeby wymienić tylko kilka amp .
Nagłówki i stopki są dostarczane przez bieżący motyw użytkownika w WordPress. Są one zazwyczaj dobrze zaprojektowane i odpowiednie do większości zastosowań. Jeśli jednak chcesz dostosować swoje motywy, będziesz musiał zmienić kod; W tym momencie przydadzą się plugin Page Builder. Możesz ich używać do tworzenia i zmiany komponentów strony internetowej bez znajomości kodu.
W tym samouczku nauczymy się, jak utworzyć nagłówek i stopkę witryny internetowej. Wykorzystany zostanie Elementor Pro (ponieważ podstawowa wersja Elementora nie zawiera funkcji najważniejszych przy tworzeniu tych komponentów). Pobierz więc Elementor Pro i upewnij się, że jest włączony.
- Dlaczego warto wybrać Elementor jako narzędzie do tworzenia stron?
- Elementor pozwala wybrać główny układ niestandardowego nagłówka i stopki.
- Co to jest nagłówek i do czego służy?
- Czym dokładnie jest stopka?
- Jak zrobić nagłówek
- Opracowanie szablonu nagłówka
- Wprowadzanie zmian w menu nagłówka
- Publikacja nagłówkowa
- Jak zrobić stopkę
- Opracowanie szablonu stopki
- Modyfikacje stopki
- Ukończony produkt
- Sprawdź sekcje nagłówka i stopki pod kątem responsywności.
- Doprowadzenie sprawy do końca
Dlaczego warto wybrać Elementor jako narzędzie do tworzenia stron?
Elementor to najbardziej zaawansowany kreator stron, pozwalający użytkownikom wykorzystywać elementy premium do tworzenia wspaniałych projektów i układów. Jest to bardzo korzystne dla nowicjuszy, którzy nie mają wcześniejszej wiedzy na temat kodowania. Edytor „przeciągnij i upuść” w Elementorze umożliwia użytkownikom przenoszenie widżetów i elementów.
Elementor to wizualny kreator stron, który pozwala użytkownikom zobaczyć, jak wyglądają ich strony bez przełączania trybów.
Kolejnym przekonującym argumentem przemawiającym za używaniem Elementora jest to, że większość prac można wykonać bez ponoszenia kosztów. Ich bezpłatna edycja jest w stanie zapewnić odpowiednie możliwości edycji witryny. Omówimy jednak wersję bezpłatną i płatną, abyś mógł wybrać tę, która najlepiej odpowiada Twoim potrzebom.
Oto niektóre z ważnych aspektów Elementora, które sprawiają, że warto:
- Obsługiwana jest funkcja przeciągania i upuszczania.
- Posiada dużą liczbę szablonów.
- W sumie jest ponad 90 widżetów.
- Aby zapewnić responsywne wsparcie, nie jest wymagane żadne kodowanie.
- Dostępne są opcje ponawiania i cofania.
- Dostępny jest automatyczny zapis.
Elementor pozwala wybrać główny układ niestandardowego nagłówka i stopki.
Pomocne byłoby, gdybyś zdecydował się na ogólny układ żądanych sekcji nagłówka i stopki przed opracowaniem unikalnego nagłówka. Spojrzenie na gotowy układ sekcji nagłówka może zapewnić wiele możliwości wyboru.
Możesz wybierać spośród różnych sekcji nagłówka; najpopularniejszy i nowocześnie wyglądający nagłówek zawiera logo witryny w lewym skrajnym rogu, pasek nawigacyjny pośrodku i sekcję paska wyszukiwania po prawej stronie.
Możliwości są nieograniczone i możesz zbudować dowolny układ.
Wybrałem nr. 7 gotowych szablonów nagłówków; Jest to najczęstsze i najprostsze podejście do używania nagłówka w witrynie WordPress. Skopiuj i wklej nazwę szablonu nagłówka do Szablony > Nagłówek > szablon wyszukiwania > wklej skopiowaną nazwę nagłówka .
Gdy znajdziesz żądany szablon nagłówka, wybierz „Edytuj za pomocą Elementora”, a zostaniesz przeniesiony do sekcji narzędzia do tworzenia nagłówków Elementor Pro.
Zacznijmy tą imprezę.
Co to jest nagłówek i do czego służy?
Górna część Twojej strony internetowej nazywana jest „nagłówkiem witryny”. Nagłówek jest zwykle taki sam w całej witrynie. Jednak niektóre witryny używają różnych nagłówków dla różnych części witryny.
Projekt nagłówka umożliwi użytkownikom pierwsze wrażenie na temat Twojej witryny, niezależnie od tego, czy dotarli na stronę główną, stronę z informacjami czy inną indywidualną treść. A jeśli jest dobrze zaprojektowana, przyciągnie uwagę użytkownika i zachęci go do dalszego przewijania i czytania.
Nagłówek może również pomóc w promowaniu tożsamości marki Twojej firmy.
Korzystam z takich funkcji, jak logo firmy, czcionka, kolory i ogólny język marki.
Nawigacja w witrynie, wyszukiwanie w witrynie, koszyk (w przypadku witryn sprzedażowych), przyciski wezwania do działania (CTA) i inne funkcje poprawiające wygodę użytkownika i zwiększające współczynniki konwersji znajdują się w nagłówkach.
Czym dokładnie jest stopka?
Stopka to sekcja strony internetowej, która pojawia się na dole strony. Zazwyczaj są one wyświetlane stale w całym serwisie, na wszystkich stronach i postach, podobnie jak nagłówki.
Stopki są często pomijane, co jest stratą potencjału, biorąc pod uwagę, że pojawiają się na każdej stronie serwisu. Są równie istotne dla nagłówków.
Twój projekt stopki może zawierać przydatne i istotne informacje, takie jak rejestracja biuletynu, informacje o prawach autorskich, warunki użytkowania i prywatność, mapa witryny, dane kontaktowe, mapy, nawigacja w witrynie i wiele innych, w zależności od wybranych ustawień.
Jak zrobić nagłówek
W tej sekcji utworzymy dostosowany nagłówek. Nie martw się, jeśli wydaje ci się to zastraszające; nie zaczniemy od zera. Zamiast tego użyjemy szablonów Elementór Pro, zaprojektowanych przez zespół projektowy Elementora.
Opracowanie szablonu nagłówka
W panelu administracyjnym WordPress najedź kursorem na Szablony i kliknij Dodaj nowy, aby skonstruować nasz nagłówek.
Po przekierowaniu pojawi się okno modalne. Wybierz Nagłówek z menu rozwijanego, nazwij Nagłówek i kliknij „ Utwórz szablon ”:
Spowoduje to uruchomienie edytora Elementora. Następnie zostanie wyświetlona lista szablonów do wyboru. Wybierz więc ten, który do Ciebie przemawia:
Po wybraniu szablonu powinien pojawić się na górze sekcji edycji Elementora:
Tworzenie logo: Pierwszym krokiem jest utworzenie logo. Ustaw logo w Edytorze na żywo witryny, aby umieścić je w nagłówku. Wybierz logo, klikając Tożsamość witryny.
Kiedy już wybierzesz logo, kliknij Opublikuj .
Logo Twojej witryny powinno teraz znajdować się w nagłówku, jeśli odświeżysz interfejs Elementora:
Następnie możesz wprowadzić dowolne zmiany.
Wprowadzanie zmian w menu nagłówka
Następną rzeczą, którą powinniśmy zrobić, to zmienić menu. Jeśli wygenerowałeś menu, szablon automatycznie je uwzględni:
Oto struktura naszego menu, którą możesz zobaczyć w szablonie nagłówka:
Jeśli masz więcej niż jedno menu, możesz w razie potrzeby zaktualizować jego zawartość.
Możesz edytować jego właściwości, tak jak każdego innego widgetu.
Jeśli będziemy musieli dodać więcej elementów, możemy dodać więcej sekcji do naszego nagłówka:
Zacznijmy od dodania nagłówka i kilku ikon mediów społecznościowych:
Następnie możesz wprowadzić dowolne zmiany. Oto jak wyglądała nasza edycja:
Publikacja nagłówkowa
Możesz teraz opublikować nagłówek po zakończeniu jego zmiany. amp użyjemy nagłówka w całej naszej witrynie , więc wybierzemy ten wybór po wybraniu opcji Dodaj warunek:
A oto amp strony z naszej działającej witryny:
Jak zrobić stopkę
Opracowanie szablonu stopki
Proces tworzenia stopki jest dość podobny do tworzenia nagłówka. Aby go utworzyć, utwórz nowy szablon stopki, taki jak ten:
Następnie zdecyduj się na szablon. Stopki są dostępne w różnych kształtach i rozmiarach. Niektóre zawierają informacje o firmie, inne zaś formularze kontaktowe. Wybierz szablon odpowiedni do Twoich wymagań.
Szablon, który wybraliśmy dla naszej strony internetowej, wygląda następująco:
Modyfikacje stopki
Nagłówek zobaczysz zaraz po rozpoczęciu edycji (jeśli ustawisz warunek, że będzie on wyświetlany na wszystkich stronach).
W razie potrzeby zmień stopkę; Tak wygląda nasza wersja:
Opublikuj stopkę po jej zakończeniu:
Ukończony produkt
Oto jak wygląda gotowy efekt. Zarówno nagłówek, jak i stopka są teraz używane na naszej stronie internetowej:
Sprawdź sekcje nagłówka i stopki pod kątem responsywności.
To najważniejsza faza i musisz upewnić się, że sekcje nagłówka i stopki są responsywne. Ponieważ menu o pełnej szerokości zwykle nie pasuje do widoku mobilnego, musisz wiedzieć, jak Twój projekt będzie wyglądał na ekranie mobilnym. Responsywne przełączniki na dole sekcji paska bocznego Elementora mogą zmieniać wersję mobilną i wersję na karcie.
Możesz przetestować responsywność nagłówka i stopki na różne sposoby. Możesz na amp użyć narzędzi takich jak Browserstack, CrossBrowser Testing i Google Resizer, aby upewnić się, że Twoje strony internetowe są tak responsywne, jak to tylko możliwe. Można to również zrobić ręcznie, eksperymentując z różnymi urządzeniami.
Doprowadzenie sprawy do końca
Mam nadzieję, że ten przewodnik pomógł Ci w szybkim opracowaniu unikalnych sekcji nagłówka i stopki przy użyciu Elementora Pro. WordPress ma wiele funkcji, ale pozwala tylko na kilka modyfikacji w sekcjach nagłówka i stopki, ostatecznie naprawionych za pomocą narzędzia do tworzenia stron Elementor Pro. Dzięki znacznie lepszej kontroli nad elementami witryny możesz teraz lepiej zaprezentować wizję swojej witryny. Co więcej, funkcjonalność Elementora została ulepszona poprzez zastosowanie bezpłatnych dodatków, pozwalających użytkownikom dostosowywać swoje strony internetowe za pomocą bardziej zaawansowanych możliwości.
