Jak edytować nagłówek WordPress za pomocą Elementora

Nagłówek witryny to obszar, w którym użytkownicy po raz pierwszy wchodzą w interakcję z Twoją witryną. Służy głównie do nawigacji w witrynie, dzięki czemu odwiedzający otrzymują jasny kierunek podczas odwiedzania różnych stron. Dodatkowo możesz wykorzystać to miejsce do brandingu, dodania przycisku CTA i zachowania wielu potrzebnych informacji.

Domyślnie motywy WordPress zapewniają globalny format projektu nagłówka. Ale jeśli chcesz stworzyć niestandardowy nagłówek, możesz edytować podstawowe pliki motywów. Co jest bardzo czasochłonne i trudne dla niezaawansowanych użytkowników.

Jakie może być najłatwiejsze rozwiązanie?

Elementor to popularna wtyczka do tworzenia stron, która sprawia, że ​​zadania związane z projektowaniem witryny są łatwiejsze niż kiedykolwiek dzięki funkcjom przeciągania i upuszczania. Korzystając z Elementora, możesz bardzo efektywnie tworzyć i dostosowywać nagłówek.

Na tym blogu pokażemy Ci krok po kroku, jak edytować nagłówek w Elementorze .

Dziś nauczysz się:

• Edytuj istniejący nagłówek witryny za pomocą Elementora
• Twórz nagłówki za pomocą gotowych szablonów nagłówków Elementora
• Zaprojektuj nagłówek Elementora od podstaw za pomocą przydatnych widżetów

Na końcu przewodnika otrzymasz punkt bonusowy, który przeniesie możliwości projektowania Twojej witryny na wyższy poziom. Więc nie przegap tego.

Jak edytować istniejący nagłówek witryny za pomocą Elementora

Czas pokazać, jak edytować aktualny nagłówek naszej witryny Elementor. Tutaj używamy widżetów Elementor free & pro do zaprojektowania naszego nagłówka.

Musisz więc zainstalować te dwie wtyczki.

• Elementor (bezpłatny)
• Elementor Pro

Najpierw spójrz na nasz aktualny nagłówek witryny. Zauważasz, że dodaliśmy logo naszej witryny i menu nawigacyjne w nagłówku.

Wygląda na bardzo popularny nagłówek, więc zdecydowaliśmy się go edytować. Teraz dodamy przycisk do bieżącego nagłówka. Ponadto zaprojektuj górny nagłówek, aby wyświetlić formularz wyszukiwania , nasze kanały społecznościowe i adres naszego biura .

Wymaga tylko 5 kroków, aby uzyskać pożądany wygląd-

• Krok 1: Dodaj przycisk
• Krok 2: Dodaj i dostosuj formularz wyszukiwania
• Krok 3: Dodaj i dostosuj ikonę społecznościową
• Krok 4: Dodaj ikonę mapy
• Krok 5: Dodaj i dostosuj nagłówek

Krok 1: Dodaj przycisk

Aby dodać przycisk, musimy dodać nową kolumnę po prawej stronie menu nawigacyjnego. Sprawdzasz poniższy obraz, aby dowiedzieć się, jak dodać nową kolumnę w Elementorze.

Teraz znajdź widżet Przycisk z widżetów Elementora. Następnie przeciągnij i upuść go w nowej kolumnie.

W obszarze Treść uzyskasz wszystkie niezbędne opcje, aby dodać treść przycisku. tutaj możesz ustawić przycisk Typ , taki jak Domyślny, Informacje, Sukces, Ostrzeżenie i Niebezpieczeństwo . Możesz napisać przycisk Tekst , wstawić Link , zarządzać przyciskiem Wyrównanie i Rozmiar .

Możesz także dodać ikonę i kontrolować odstępy między ikonami w zależności od potrzeb. Możesz jednak dodać identyfikator przycisku , który pomoże ci dodać niestandardowy kod do przycisku.

Aby dostosować domyślny styl przycisku, możesz przejść do obszaru Styl. Tutaj możesz zmienić wygląd przycisku, korzystając z poniższych opcji stylizacji.

• Naprawiono rozmiar
• Typografia
• Cień tekstu
• Kolor tekstu
• Typ tła
• Typ obramowania
• Promień graniczny
• Cień Pudełka
• Wyściółka

Czas dodać nasz górny nagłówek. Aby to zrobić, musimy dodać nową sekcję wraz z trzema kolumnami w górnej części nagłówka. Zobaczmy, jak dodać nową sekcję w Elementorze.

Krok 2: Dodaj i dostosuj formularz wyszukiwania

Po pomyślnym dodaniu nowej sekcji, do prawej kolumny dodasz widżet Formularz wyszukiwania .

Możesz zmienić domyślną zawartość formularza wyszukiwania, przechodząc do sekcji Treść . Możesz wybrać skórkę formularza wyszukiwania, taką jak Klasyczna, Minimalna i Pełny ekran . Jesteś w stanie wpisać symbol zastępczy . Ustaw także ikonę typu przycisku lub wyszukiwanie typu tekstu i ikony i strzałka . Możesz jednak zarządzać rozmiarem ikony tutaj w obszarze zawartości.

W obszarze Styl możesz zmienić styl wprowadzania formularza wyszukiwania, a także dostosować Kolor tekstu przycisku, Kolor tła, Rozmiar ikony i Szerokość .

Krok 3: Dodaj i dostosuj ikonę społecznościową

Chcemy wyświetlać nasze kanały społecznościowe w górnym nagłówku. Dodaliśmy więc widżet Elementor Social Icons do środkowej kolumny.

Możesz skutecznie dodawać konta społecznościowe, klikając przycisk + DODAJ ELEMENT . Możesz zduplikować i usunąć element zgodnie z potrzebami. Wybierz też własny kształt , np . Zaokrąglony, Kwadrat i Okrąg . I zarządzaj kolumnami i ustaw wyrównanie .

Aby dodać element, zawartość, musisz najpierw otworzyć element. Następnie możesz dodać swoją ikonę społecznościową, wstawić łącze i zdefiniować kolor .

Obszar Styl pozwala dostosować Kolor ikony, Rozmiar, Dopełnienie, Odstępy, Odstęp między wierszami, Typ obramowania i Promień obramowania . Tutaj możesz również wybrać animację najechania ikoną, aby nadać żywy wygląd swoim ikonom społecznościowym.

Czas dodać adres naszego biura w górnym nagłówku. Chcemy dodać lokalizację Man Icon i Heading . Dlatego musisz dodać sekcję wewnętrzną w lewej kolumnie górnego nagłówka. Możesz znaleźć widżet w lewym panelu widżetów Elementora i dodać go do kolumny.

Krok 4: Dodaj ikonę mapy

Teraz mamy dwie kolumny w lewej kolumnie nadrzędnej górnego nagłówka. Najpierw dodaliśmy widżet Ikona . Następnie dodaliśmy ikonę mapy i ustawiliśmy jej wyrównanie .

Zmieniliśmy podstawowy kolor i rozmiar ikony, przechodząc do obszaru Styl. Tutaj możesz ustawić wartość Obrót ikony.

Krok 5: Dodaj i dostosuj nagłówek

Aby dodać adres, dodaliśmy widżet Nagłówek . Korzystając z sekcji Treść , możesz dodać swój tytuł , wstawić łącze w zależności od potrzeb. Ustaw także nagłówek Rozmiar, Znacznik HTML i Wyrównanie we własnym stylu.

Możesz także dostosować nagłówek, korzystając z domyślnych opcji stylizacji, takich jak Kolor tekstu, Typografia, Obrys tekstu, Cień tekstu i Tryb mieszania .

Ostateczny podgląd bieżącego nagłówka

Po dostosowaniu nagłówka, oto nowy wygląd naszego nagłówka.

Jeśli chcesz utworzyć niestandardowy nagłówek Elementora na swój własny sposób, postępuj zgodnie z poniższym przewodnikiem. Możesz zaprojektować niestandardowy Elementor na dwa sposoby. Możesz wybrać gotowy blok słyszany Elementora lub utworzyć go od podstaw za pomocą widżetów Elementora. Zobaczmy.

Twórz nagłówki za pomocą szablonów nagłówków Elementor

Aby utworzyć nagłówek za pomocą Kreatora motywów Elementora, musisz zainstalować zarówno Elementor (bezpłatny, jak i profesjonalny) na swojej stronie internetowej.

Wykonaj poniższe czynności i utwórz niestandardowy nagłówek.

1. Przejdź do Szablon->Konstruktor motywów->Nagłówek .
2. Kliknij przycisk Dodaj nowy lub przycisk Dodaj nowy nagłówek .
3. Wybierz Typ szablonu->Nagłówek i wpisz nazwę szablonu.
4. Kliknij przycisk Utwórz szablon , aby zapisać szablon.
5. Na następnej stronie otrzymasz bibliotekę Elementor z gotowymi blokami i stronami .
6. Wybierz odpowiedni blok nagłówka i zainstaluj go na swojej stronie internetowej.

Otóż ​​to.

Zaprojektuj i dostosuj nagłówek Elementora od podstaw za pomocą widżetu Elementor

Jeśli jesteś zwykłym użytkownikiem Elementora, możesz użyć widżetów Elementora do tworzenia niestandardowego nagłówka. Elementor zapewnia wszystkie niezbędne widżety w swojej bezpłatnej wersji, których potrzebujesz do zaprojektowania nagłówka. Zasadniczo wspólny nagłówek zawiera logo witryny, menu nawigacyjne i formularz wyszukiwania.

Możesz postępować zgodnie z tym przewodnikiem krok po kroku i dowiedzieć się, jak tworzyć i dostosowywać nagłówek Elementor za pomocą widżetów Elementor.

Aby podążać za nowoczesnym projektowaniem stron internetowych, możesz utworzyć przyklejony nagłówek dla swojej witryny. Będzie on znajdował się w tym samym miejscu na ekranie, podczas gdy użytkownik przewija stronę w dół. Sprawdź ten przewodnik, jak utworzyć lepki nagłówek w Elementorze.

Bonus: Użyj widżetu Happy Mega Menu Happy Addons, aby stworzyć menu na dużą skalę, takie jak Adidas, Dribbble i Puma

Masz witrynę eCommerce lub biznesową i musisz dodać wiele stron do menu. Jednak domyślne menu nawigacyjne Elementora nie daje opcji tworzenia większego menu zgodnie z własnymi potrzebami. I szukasz rozwiązania, aby się go pozbyć.

Aby rozwiązać Twój problem, Happy Addons, jeden z najlepszych i szybko ładujących się dodatków do Elementora, niedawno uruchomił nowy widżet Happy Mega Menu . Dzięki temu ekskluzywnemu widżetowi możesz tworzyć duże menu, takie jak Adidas, Dribbble, weDevs, InVision, Puma i inne.

Wypróbuj widżet Happy Mega Menu, aby w kilka minut stworzyć menu nawigacyjne.

Możesz również zapoznać się z pełną dokumentacją widżetu Happy Mega Menu Happy Addons i dowiedzieć się, jak używać go we właściwy sposób.

Czy jesteś gotowy, aby edytować swój nagłówek Elementora?

Elementor zapewnia pełną elastyczność w projektowaniu i dostosowywaniu nagłówka witryny. Korzystając z Elementora, możesz nie tylko utworzyć nowy nagłówek od zera, ale także edytować bieżący nagłówek witryny.

W powyższym przewodniku omówiliśmy, jak edytować nagłówek w Elementorze we właściwy sposób. Omówiliśmy, co należy zrobić, aby utworzyć niestandardowy nagłówek Elementora. Na koniec podzieliliśmy się również dodatkowym punktem na temat tego, w jaki sposób widżet Happy Mega Menu Happy Addons pomoże Ci z łatwością zbudować mega menu dla Twojej witryny.

Jeśli uznasz, że samouczek jest przydatny, udostępnij go na swoich kanałach społecznościowych. Nie zapomnij dołączyć do naszego biuletynu, aby uzyskać bardziej przydatne przewodniki dotyczące WordPressa i Elementora.