Nagłówki i stopki strony to niezbędne elementy. W większości przypadków nagłówek zawiera łącza nawigacyjne, które ułatwiają nawigację do różnych części witryny. Z drugiej strony, stopka zawiera istotne informacje, że osoby odwiedzające stronę internetową mogą wymagać, takich jak adres firmy lub informacji kontaktowych, aby wymienić tylko kilka ex amp les.
Nagłówki i stopki są dostarczane przez aktualny motyw użytkownika w WordPress. Są one zwykle dobrze zaprojektowane i odpowiednie do większości ich zastosowań. Jeśli jednak chcesz dostosować swoje motywy, będziesz musiał zmienić kod; Wtedy przydaje się plugin Kreatora Stron. Możesz ich używać do tworzenia i zmieniania składników stron internetowych bez znajomości kodu.
Ten samouczek nauczy nas, jak zrobić nagłówek i stopkę witryny. Zostanie użyty Elementor Pro (ponieważ podstawowa wersja Elementora nie zawiera funkcji najważniejszych do tworzenia tych komponentów). Pobierz więc Elementor Pro i upewnij się, że jest włączony.
- Dlaczego powinieneś wybrać Elementora jako swojego kreatora stron?
- Elementor pozwala wybrać główny układ niestandardowego nagłówka i stopki.
- Co to jest nagłówek i co robi?
- Czym dokładnie jest stopka?
- Jak zrobić nagłówek
- Opracowanie szablonu nagłówka
- Wprowadzanie zmian w menu nagłówka
- Publikacja nagłówka
- Jak zrobić stopkę
- Tworzenie szablonu stopki
- Modyfikacje stopki
- Ukończony produkt
- Sprawdź sekcje nagłówka i stopki pod kątem responsywności.
- Doprowadzanie rzeczy do końca
Dlaczego powinieneś wybrać Elementora jako swojego kreatora stron?
Elementor to najbardziej zaawansowany program do tworzenia stron, który pozwala 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.
Innym przekonującym argumentem za używaniem Elementora jest to, że większość prac można wykonać bez kosztów. Ich darmowa edycja jest więcej niż w stanie zapewnić odpowiednie możliwości edycji witryny. Przejrzymy jednak zarówno wersję bezpłatną, jak 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.
- Do responsywnego wsparcia nie jest wymagane 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.
Pomogł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 dać ci wiele możliwości wyboru.
Możesz wybierać spośród różnych sekcji nagłówków; najpopularniejszy i nowocześnie wyglądający nagłówek zawiera logo witryny w lewym rogu, pasek nawigacji pośrodku i sekcję paska wyszukiwania po prawej stronie.
Możliwości są nieskończone i możesz zbudować dowolny układ.
Wybrałem gotowy szablon nagłówka nr 7; Jest to najczęstsze i najprostsze podejście do korzystania z nagłówka w witrynie WordPress. Skopiuj i wklej nazwę szablonu nagłówka do opcji Szablony > Nagłówek > szablon wyszukiwania > wklej skopiowaną nazwę nagłówka .
Po znalezieniu odpowiedniego szablonu nagłówka wybierz „Edytuj za pomocą Elementora”, a zostaniesz przeniesiony do sekcji kreatora nagłówków Elementor Pro.
Zacznijmy tą imprezę.
Co to jest nagłówek i co robi?
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 da użytkownikom pierwsze wrażenie na temat Twojej witryny, niezależnie od tego, czy weszli na Twoją stronę główną, o stronie lub inną indywidualną treść. A jeśli jest dobrze zaprojektowany, przyciągnie uwagę użytkownika i zachęci go do przewijania i czytania.
Nagłówek może również pomóc w promocji tożsamości marki Twojej firmy.
Używam funkcji takich jak logo firmy, czcionka, kolory i ogólny język marki.
Nawigacja w witrynie, wyszukiwanie w witrynie, koszyk (w przypadku witryn sprzedaży), przyciski wezwania do działania (CTA) i inne funkcje, które poprawiają wygodę użytkownika i zwiększają 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 w sposób ciągły w całej witrynie, na wszystkich stronach i postach, podobnie jak nagłówki.
Stopki są często pomijane, co jest marnowaniem potencjału, biorąc pod uwagę, że pojawiają się na każdej stronie witryny. Są równie ważne dla nagłówków.
Twój projekt stopki może wyświetlać przydatne i ważne informacje, takie jak rejestracja biuletynu, informacje o prawach autorskich, warunki użytkowania i prywatność, mapa witryny, informacje kontaktowe, mapy, nawigacja w witrynie i wiele innych, w zależności od wybranych ustawień.
Jak zrobić nagłówek
W tej sekcji stworzymy dostosowany nagłówek. Nie martw się, jeśli to wydaje się onieśmielające; nie zaczniemy od zera. Zamiast tego użyjemy szablonów Elementór Pro, zaprojektowanych przez zespół projektowy Elementor.
Opracowanie szablonu nagłówka
W panelu administracyjnym WordPress najedź kursorem na Szablony i kliknij Dodaj nowy, aby utworzyć 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 Elementor. Następnie zostanie wyświetlona lista szablonów do wyboru. Wybierz więc taki, który Ci się podoba:
Po wybraniu szablonu powinien pojawić się na górze sekcji edycji Elementora:
Tworzenie logo: Pierwszym krokiem jest stworzenie logo. Ustaw logo w Edytorze na żywo witryny, aby umieścić je w nagłówku. Wybierz logo, klikając Tożsamość witryny.
Po wybraniu 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 nasza struktura menu, którą można zobaczyć w szablonie nagłówka:
Jeśli masz więcej niż jedno menu, możesz w razie potrzeby zaktualizować zawartość.
Możesz edytować jego właściwości tak jak każdy inny widżet.
Jeśli potrzebujemy 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 wyszła nasza edycja:
Publikacja nagłówka
Możesz teraz opublikować nagłówek po zakończeniu wprowadzania zmian. amp nagłówka w całej naszej witrynie , więc dokonamy wyboru po wybraniu opcji Dodaj warunek:
A oto ex amp le strony z naszej witryny na żywo:
Jak zrobić stopkę
Tworzenie szablonu stopki
Proces tworzenia stopki jest dość podobny do tworzenia nagłówka. Aby go stworzyć, utwórz nowy szablon stopki w następujący sposób:
Następnie zdecyduj się na szablon. Stopki mają różne kształty i rozmiary. Niektóre zawierają informacje firmowe, podczas gdy inne mają formularze kontaktowe. Wybierz szablon odpowiedni do Twoich wymagań.
Szablon, który wybraliśmy dla naszej strony internetowej, wygląda następująco:
Modyfikacje stopki
Zobaczysz nagłówek, gdy tylko zaczniesz edytować (jeśli ustawisz warunek, że pojawia się na wszystkich stronach).
Zmień stopkę według potrzeb; Tak wygląda nasza wersja:
Opublikuj stopkę po jej zakończeniu:
Ukończony produkt
Oto jak wygląda gotowy wynik. 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.
Jest 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 urządzenia mobilnego. Reagujące przełączniki u dołu sekcji paska bocznego Elementora mogą zmieniać wersje mobilną i karty.
Możesz testować reakcję nagłówka i stopki na różne sposoby. Dla ex amp le, można użyć narzędzi, takich jak Browserstack, CrossBrowser testowania i Google Resizer aby upewnić się, że strony internetowe są tak czułe, jak to możliwe. Możesz też zrobić to ręcznie, eksperymentując z różnymi urządzeniami.
Doprowadzanie rzeczy do końca
Mam nadzieję, że ten przewodnik pomógł ci w szybkim opracowaniu unikalnych sekcji nagłówka i stopki za pomocą Elementor Pro. WordPress ma wiele funkcji, ale pozwala tylko na kilka modyfikacji w sekcjach nagłówka i stopki, ostatecznie naprawionych za pomocą kreatora stron Elementor Pro. Mając znacznie lepszą kontrolę nad elementami witryny, możesz teraz lepiej zademonstrować wizję swojej witryny. Ponadto funkcjonalność Elementora została ulepszona dzięki darmowym dodatkom, umożliwiając użytkownikom dostosowywanie ich stron internetowych za pomocą bardziej zaawansowanych funkcji.
