Jak stworzyć oszałamiający nagłówek motywu Astra?

Nagłówki są niezbędne dla każdej treści na Twojej stronie internetowej, ponieważ służą nie tylko czytelnikom, ale także wyszukiwarkom. Oszałamiające i dobrze napisane nagłówki mogą przyciągnąć czytelników do Twojego posta i zwiększyć liczbę kliknięć. Nagłówki mogą mieć zakres od H1 do H6, w zależności od hierarchii treści. Główny tytuł Twojej strony lub artykułu to H1, natomiast H2 to podtytuły tworzące sekcje w Twoich dokumentach. Nagłówki od H3 do H6 zapewniają dalsze podtytuły w dokumencie w sekcji H2. Zanim przejdziemy do tego, jak motyw Astra może pomóc w tworzeniu oszałamiających nagłówków w treści, rozważmy znaczenie nagłówków

Spis treści:

• Dlaczego nagłówki są ważne na stronach internetowych?
• 1. Identyfikacja tematu
• 2. Dostępność
• 3. Optymalizacja wyszukiwarek
• 4. Umożliwia skanowanie stron
• 5. Użyteczność urządzeń mobilnych
• Jak stworzyć oszałamiający nagłówek z motywem Astra?
• Plusy i minusy używania motywu Astra do nagłówków
• Ostatnie słowa

Dlaczego nagłówki są ważne na stronach internetowych?

Oto dlaczego musisz pamiętać o uwzględnieniu nagłówków w swoim tekście

1. Identyfikacja tematu

Nagłówki odgrywają zasadniczą rolę dla wyszukiwarek i czytelników, którzy mogą wybrać słowa kluczowe, których szukają w artykule. Główny nagłówek w tekście pomaga zidentyfikować temat materiału, a podtytuły nawigują czytelnika do obszaru jego zainteresowań.

2. Dostępność

Obecnie ludzie najczęściej korzystają z czytników ekranu, aby przeglądać dowolną treść. Nagłówki w dowolnej treści są łatwo rozpoznawane przez czytniki ekranu i są niezbędne do efektywnego korzystania z czytników ekranu. Umożliwiają także czytelnikom przeskakiwanie z jednego nagłówka do drugiego, aby dotrzeć do żądanego tematu.

3. Optymalizacja wyszukiwarek

Kiedy nagłówki umożliwiają identyfikację tematu, wyszukiwarki pozycjonują Twoją stronę pod kątem zapytań. Im bardziej dobrze zredagujesz nagłówki i wypełnisz je odpowiednimi słowami kluczowymi, tym bardziej wyszukiwarki zwiększą Twój ranking.

Oto przewodnik na temat korzystania z bezpłatnych funkcji motywu Astra w celu tworzenia wspaniałych nagłówków dla swoich stron. Postępuj zgodnie z procedurą, aby utworzyć wybrany nagłówek.

4. Umożliwia skanowanie stron

Używając nagłówków, sprawiasz, że strony są tak łatwe do przeskanowania, jak to tylko możliwe. Powszechnie wiadomo, że nikt nie czyta całego artykułu, a zwłaszcza wiersz po wierszu. Dlatego ważne jest, aby strony miały nagłówki. Ze wszystkich nagłówków najważniejszy jest nagłówek pierwszy, który nadaje ton całemu wpisowi lub stronie.

Następnie pojawia się podtytuł, który dzieli treść na kawałki, które są lepsze do spożycia. Co więcej, strukturę artykułu pokazują nagłówki i podnagłówki. Krótko mówiąc, odpowiedni zestaw nagłówków oznacza, że ​​możesz przyciągnąć odbiorców angażującą treścią.

5. Użyteczność urządzeń mobilnych

Z czasem urządzenia mobilne stają się coraz bardziej dominujące. Nie ma wątpliwości, że witryny będą generować większy ruch z urządzeń mobilnych niż kiedykolwiek wcześniej. Jeśli więc odpowiednio umieścisz swoje treści, z pewnością zyskasz widzów zarówno na urządzeniach mobilnych, jak i komputerach stacjonarnych.

Krótko mówiąc, nagłówki optymalizują stronę nie tylko pod kątem czytelników, ale także wyszukiwarek.

Jak stworzyć oszałamiający nagłówek z motywem Astra?

Po pierwsze, aby uzyskać dostęp do Konstruktora nagłówków Astra, zaloguj się do pulpitu nawigacyjnego WordPress i z lewego paska bocznego przejdź do Wygląd > Opcje Astry > Konstruktor nagłówków, jak pokazano na obrazku poniżej:

Kliknij na to, a przeniesie Cię do sekcji Header Builder w dostosowywaniu WordPress. Interfejs powinien wyglądać podobnie do tego, co mamy tutaj:

Jak widać, kreator nagłówków jest podzielony na trzy pionowe sekcje, jedną ułożoną na drugiej. Masz „główny nagłówek” pośrodku, „powyżej nagłówka” u góry i „poniżej nagłówka” u dołu. 

Każdy nagłówek ma swój własny zestaw „ustawień nagłówka”, do których można uzyskać dostęp, klikając ikonę koła zębatego po lewej stronie nagłówka.

W tym miejscu możesz dostosować wysokość nagłówka, rozmiar obramowania, tło, dopełnienie i margines.

Zwróć także uwagę, jak każdy nagłówek jest podzielony na trzy sekcje. Możesz dodawać i usuwać elementy nagłówka z tych sekcji, aby uczynić je bardziej funkcjonalnymi. W chwili pisania tego samouczka masz dostęp do 12 elementów nagłówka:

• Tytuł witryny i logo
• Menu główne
• Przycisk 1
• Przycisk 2 (pro)
• Szukaj
• Konto
• HTML1
• HTML2
• Menu dodatkowe
• Społeczny
• Widżet 1
• Widżet 2
• Widżet 3 (pro)
• Widżet 4 (pro)
• Wózek sklepowy

Teraz, aby dodać nowy element nagłówka, najedź myszką na tę sekcję i kliknij przycisk „+”. Spowoduje to wyświetlenie listy dostępnych elementów. Wybierz ten, którego chcesz użyć, a zostanie on dodany do sekcji nagłówka.

Podobnie, wystarczy kliknąć przycisk „x” obok elementu nagłówka, aby usunąć element nagłówka.

Możesz także przenosić elementy nagłówka pomiędzy sekcjami nagłówka, po prostu przeciągając i upuszczając.

Wszystkie użyte elementy nagłówka pojawią się w menu po lewej stronie, tuż pod zakładką Ogólne. W tym miejscu znajdziesz także opcję zmiany typu nagłówka. Bezpłatni użytkownicy mają tylko opcję „Przezroczystych nagłówków”. Jeśli jednak używasz Astry Pro, możesz włączyć „Przyklejone nagłówki”.

Stąd można uzyskać dostęp do określonych ustawień elementu nagłówka.

Tuż obok karty Ogólne znajduje się zakładka Projekt. Stąd dostępnych jest kilka podstawowych opcji projektowania umożliwiających zmianę szerokości i marginesu nagłówka. Bardziej zaawansowane ustawienia są dostępne dla użytkowników Astry Pro.

Astra Header Builder pozwala także dostosować wygląd nagłówka witryny na ekranach o różnych rozmiarach, np. na komputerze stacjonarnym, telefonie komórkowym lub tablecie. Aby wybrać inny rozmiar ekranu i dostosować go, użyj selektora urządzeń w lewym dolnym rogu ekranu.

Jak widać, na mniejszym ekranie pojawia się dodatkowy obszar o nazwie „Off Canvas”. Pozwala to zaoszczędzić miejsce w nagłówku i przenieść część elementów poza ekran, aby odwiedzający mogli je przełączać w razie potrzeby.

I na tym kończy się nasz krótki przewodnik na temat tworzenia nagłówka za pomocą motywu Astra. Po zakończeniu dodawania wszystkich elementów nagłówka i wprowadzeniu niezbędnych zmian w projekcie kliknij przycisk publikowania i to wszystko. 

Twój nowo utworzony nagłówek Astra jest już uruchomiony na Twojej stronie WordPress.

Astra Header Builder: Szybki przegląd dostępnych opcji

W powyższym samouczku utworzyliśmy bardzo prosty nagłówek za pomocą narzędzia Astra Header Builder, aby dać ci wyobrażenie o działaniu tej funkcji. Jednakże w narzędziu Astra Header Builder dostępnych jest mnóstwo narzędzi i opcji, które pomogą Ci tworzyć bardziej złożone i oszałamiające nagłówki.

Oto krótki przegląd różnych opcji, jakie masz do dyspozycji:

Główny nagłówek

Domyślnym nagłówkiem w Astrze jest nagłówek podstawowy. Wyświetli logo, a także menu nawigacyjne, które można dostosować za pomocą różnych podstawowych ustawień nagłówka w Astrze.

Po prostu zainstaluj Astrę i przejdź do sekcji Nagłówek, aby wybrać opcję podstawowego nagłówka i przejść do dostosowywania. Nagłówek > Nagłówek podstawowy

Możesz skorzystać z następujących ustawień dostosowywania

Układ

Ustawienia układu będą zarządzać położeniem logo na Twojej stronie. W Astrze dostępne są trzy różne pozycje logo

Lewe logo

Logo w tym ustawieniu przesuwa się na lewą stronę menu nawigacyjnego. Jest to typowy styl pozycjonowania logo.

Prawe logo

Logo w tym ustawieniu przesuwa się na prawą stronę menu nawigacyjnego.

Logo centrum

Logo w tym ustawieniu przesuwa się na środku nad menu nawigacyjnym. Jest to dobra opcja w przypadku długiego menu.

Szerokość

Ustawienia szerokości zarządzają szerokością nagłówka tekstu. Możesz dostosować szerokość nagłówka jako

Pełna szerokość

W ustawieniach pełnej szerokości nagłówek zostanie rozciągnięty z obu stron i dopasuje się do rozmiaru strony przeglądarki.

Szerokość treści

W ustawieniach szerokości treści nagłówek dostosowuje się zgodnie z ustawioną szerokością kontenera i możesz to ustawić, wybierając poniższe opcje

Globalny > Kontener > Szerokość

Granica

Wybierając obramowanie, możesz dodać obramowanie pod nagłówkiem i dostosować jego kolor i szerokość.

Nagłówek mobilny

Menu nawigacyjne na urządzeniach responsywnych zmienia się w hamburgera. Dlatego główny nagłówek na tych urządzeniach będzie wyświetlał tylko menu hamburgera i logo. Możesz dostosować układ logo dotyczący menu w responsywnych widżetach.

Stos

W opcji stosu logo przesunie się nad menu hamburgera. Wybór stosu może okazać się przydatny, jeśli masz duże logo.

Wbudowany

W opcji inline logo i menu będą ze sobą spójne i może być dobrym rozwiązaniem w przypadku małego logo.

Motywy kolorów

Główne nagłówki mogą być prezentowane w różnych kolorach za pomocą motywu Astra. Kolory globalne będą dostępne bezpłatnie, ale aby uzyskać bardziej zaawansowane funkcje, musisz użyć plugin dodatkowej Astra Pro. Aby używać kolorów globalnych w Astrze, musisz przejść do zakładki Wygląd, wybrać opcję Dostosuj, następnie Globalny, a na koniec wybrać opcję kolorów. Wygląd > Dostosuj > Globalne > Kolory

Typografia

Ustawienia typografii strony lub witryny są automatycznie stosowane do głównego nagłówka z motywem Astra. Możesz wybrać i dostosować ustawienia typografii, przechodząc do karty Wygląd w obszarze globalnym. 

Wygląd > Dostosuj > Globalne > Typografia

Przezroczysty nagłówek

Przezroczyste nagłówki to łatwy sposób na stworzenie pięknych i atrakcyjnych nagłówków dla Twojej strony. Tło głównego nagłówka zostanie ustawione na przezroczyste i spowoduje wyciągnięcie zawartości strony na górę. Zawartość strony i główny nagłówek zostaną scalone, co oznacza, że ​​górna część treści stanie się tłem przezroczystego nagłówka. Na przykład, jeśli obraz znajduje się w górnej części strony, podniesie się i stanie się tłem dla przezroczystego nagłówka.

Jak dodać przezroczysty nagłówek?

Przejrzysty nagłówek formułuje się w dwóch szybkich krokach, aby uczynić Twoją stronę atrakcyjną 

Krok 1

Możesz znaleźć opcję przezroczystego nagłówka w dostosowywaniu, a następnie możesz go edytować

Wygląd > Dostosuj > Nagłówek > Przezroczysty nagłówek

Krok 2

W opcjach przezroczystego nagłówka możesz włączyć go dla całej witryny, wybrać obramowanie na dole, schematy kolorów i układ logo

Włączanie w pełnej witrynie internetowej

Jeśli chcesz, aby ustawienia nagłówków były przejrzyste dla całej witryny, możesz włączyć tę opcję zaznaczając checkbox. Jeśli zaznaczysz to pole wyboru, nadal istnieją pewne reguły wykluczania, które możesz włączyć dla określonych postów lub stron. Możesz wyłączyć opcję przezroczystego nagłówka dla kolejnych stron

Wyłącz w archiwach, wyszukiwaniu i na 404

Ustawienie przezroczystego nagłówka można wyłączyć na tych stronach specjalnych, zaznaczając pole wyboru.

Wyłącz na stronie indeksu bloga

Strona główna Twojego bloga stanie się stroną indeksu bloga, jeśli zmienisz ustawienia na stronie głównej. Aby utworzyć stronę indeksową bloga, możesz przejść do ustawień strony głównej i w zakładce „Wyświetlanie Twojej strony głównej” wybrać „Twoje najnowsze posty”.

Wyświetlanie Twojej strony głównej > Twoje najnowsze posty

Jeśli chcesz wyłączyć ustawienia przezroczystego nagłówka na tej stronie indeksu bloga, możesz zaznaczyć odpowiednie pole wyboru.

Wyłącz na stronach

Jeśli chcesz wyłączyć opcję przezroczystego nagłówka na wszystkich stronach, zaznacz checkbox.

Wyłącz w postach

Jeśli chcesz wyłączyć opcję przezroczystego nagłówka we wszystkich postach, zaznacz checkbox.

Kolory i tło

Możesz dostosować ustawienia tła i koloru przezroczystego nagłówka, korzystając z następujących dostępnych opcji

• Tło
• Tytuł witryny
• Menu
• Podmenu
• Treść

Plusy i minusy używania motywu Astra do nagłówków

Plusy

• Dostępna jest możliwość przezroczystego nagłówka
• Dostępne są nagłówki o pełnej szerokości i szerokości treści
• Istnieje możliwość dostosowania koloru i typografii

Wady

• Opcja przyklejonego nagłówka nie jest dostępna
• Zaawansowane funkcje kolorów nie są dostępne

Ostatnie słowa

Astra to jeden z najlepszych motywów na rynku. A jeśli z niego korzystasz, jesteś na dobrej drodze do utrzymania swojej witryny.

Darmowy motyw Astry pozwala zaprojektować piękne i atrakcyjne nagłówki dla Twojej strony internetowej. Dostępna jest również opcja i możliwość dostosowania przezroczystego nagłówka, co może poprawić wrażenia widza. Ogólnie rzecz biorąc, wiele opcji dostosowywania nagłówka w motywie Astra pozwala stworzyć oszałamiający nagłówek.