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 czy 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łaśnie wtedy 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.
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:
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 gotowy szablon nagłówka nr 7; 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ę.
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.
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ń.
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.
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.
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 samo 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:
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 strona z naszej działającej witryny:
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:
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:
Oto jak wygląda gotowy efekt. Zarówno nagłówek, jak i stopka są teraz używane na naszej stronie internetowej:
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.
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, dzięki którym użytkownicy mogą dostosowywać swoje strony internetowe za pomocą bardziej zaawansowanych możliwości.
Dwa najpopularniejsze motywy WordPress na rynku to Astra i OceanWP. Profesjonalny…
Stworzenie doskonałej witryny z wiadomościami nie wymaga zostania projektantem stron internetowych. My…
Motyw gazety jest jednym z najważniejszych motywów WordPress zaprojektowanych przez tagDiv, firmę…
Jeśli chodzi o konfigurację sklepu internetowego, WooCommerce jest najczęściej wybieraną plugin . To…
Nagłówek jest zazwyczaj pierwszą rzeczą, którą widzi osoba odwiedzająca Twoją witrynę…
Nasz własny kreator stron, Avada Builder, jest teraz dostępny w dwóch interfejsach: Avada…