Jak używać Elementora do tworzenia przezroczystego nagłówka?

Opublikowany: 2022-03-01

Przezroczyste nagłówki mogą być świetnym sposobem na poprawę wyglądu witryny. To sprawia, że ​​projekt Twojej witryny wyróżnia się i wygląda bardziej interaktywnie dla odwiedzających Twoją witrynę.

Ale czy możesz użyć Elementora do stworzenia przezroczystego nagłówka na WordPress bez znajomości języka programowania? Odpowiedź brzmi tak! Zdecydowanie możesz. W tym artykule dowiesz się, jak łatwo utworzyć przezroczysty nagłówek Elementora.

Spis treści
[Pokaż ukryj]
  1. Zalety korzystania z przezroczystych nagłówków
    1. Doskonały do ​​długich stron internetowych
    2. Najlepsze dla aktywnych stron internetowych
    3. Popraw możliwości nawigacji w witrynie
  2. Jak używać Elementor Pro do tworzenia przezroczystego nagłówka?
    1. Zainstaluj i aktywuj wtyczkę Elementor Pro
    2. Utwórz menu dla swojej witryny
    3. Użyj Elementora Pro, aby stworzyć normalny nagłówek
    4. Utwórz przezroczysty przyklejony nagłówek za pomocą Elementora Pro
  3. Jak korzystać z Elementora, aby utworzyć przezroczysty nagłówek za darmo?
    1. Zainstaluj i aktywuj Elementor i niezbędne dodatki do wtyczki Elementor
    2. Utwórz menu dla swojej witryny
    3. Użyj niezbędnych dodatków do Elementora, aby utworzyć przezroczysty lepki nagłówek
  4. Jak stworzyć przezroczysty nagłówek dla użytkowników Woostify?
  5. Ostatnie słowa

Zalety korzystania z przezroczystych nagłówków

elementor-transparent-header-1

Możesz łatwo tworzyć atrakcyjne, przezroczyste nagłówki Elementora. Ale jeśli chcesz, możesz pójść o krok dalej i naprawić to, gdy odwiedzający przewijają zawartość strony. Poniżej znajdują się zalety:

Doskonały do ​​długich stron internetowych

Korzystanie z przezroczystego przyklejonego nagłówka to stylowy i szybki sposób na zapewnienie gościom przyjemnych wrażeń.

Mogą pomóc Twojej witrynie mieć bardziej przyjazny dla użytkownika system nawigacji. Jeśli treść Twojej witryny jest bardzo długa, ta korzyść będzie bardzo korzystna.

Najlepsze dla aktywnych stron internetowych

Przezroczyste, samoprzylepne nagłówki najlepiej sprawdzają się w witrynach internetowych, na których warto działać, takich jak witryny handlu detalicznego lub e-commerce. Dzieje się tak, ponieważ chcesz, aby odwiedzający wykonali określoną akcję, będąc nadal na treści strony.

Gdy nagłówek jest pięknie wyświetlany podczas przeglądania Twojej witryny, odwiedzający uznają go za wygodniejszy do zwiedzania.

Co więcej, ponieważ nagłówek jest przezroczysty, nie zmniejszy to czytelności treści. Dlatego dodanie przezroczystego nagłówka może zmniejszyć współczynnik odrzuceń witryny i pomóc w skutecznym kierowaniu odwiedzających.

Popraw możliwości nawigacji w witrynie

Korzystanie z przezroczystego przyklejonego nagłówka w witrynie zachęca odwiedzających do podjęcia natychmiastowych działań. Oszczędza to czas przy wyszukiwaniu konkretnej opcji.

I zamiast umieszczać logo swojej marki wszędzie na stronie głównej, możesz elegancko wyświetlić je na przezroczystym, samoprzylepnym nagłówku.

Jak używać Elementor Pro do tworzenia przezroczystego nagłówka?

Teraz nauczmy się tworzyć i dostosowywać przezroczysty nagłówek za pomocą Elementor Pro.

Zainstaluj i aktywuj wtyczkę Elementor Pro

Jeśli Twoja witryna nie miała jeszcze Elementor Pro, musisz ją zainstalować i aktywować.

  1. Z pulpitu WordPress przejdź do Wtyczki > Dodaj nowy .
elementor-transparent-header-2
  1. Znajdź wtyczkę, wpisując „Elementor”. Następnie zobaczysz Kreatora stron internetowych Elementor jako opcję.
  2. Kliknij odpowiednio przycisk Zainstaluj teraz i przycisk Aktywuj .
  3. Po udanym zakupie Elementor Pro przejdź do my.elementor.com.
  4. Zaloguj się za pomocą informacji, które otrzymałeś w e-mailu po zakupie.
  5. Następnie zostaniesz przeniesiony na stronę Profil . Kliknij przycisk Pobierz wtyczkę w prawym górnym rogu, aby pobrać plik .zip na swój komputer.
elementor-transparent-header-3
  1. W panelu WordPress swojej witryny kliknij Wtyczki > Dodaj nowy . Następnie kliknij przycisk Prześlij wtyczkę w lewym górnym rogu.
  2. Kliknij przycisk Wybierz plik . Wybierz właśnie pobrany plik .zip. Następnie kliknij Aktywuj .
  3. W górnej części pulpitu witryny otrzymasz powiadomienie z prośbą o aktywację klucza licencyjnego.

Utwórz menu dla swojej witryny

Następnie musisz utworzyć menu nagłówka za pomocą pulpitu WordPress, jeśli jeszcze tego nie zrobiłeś. Poniżej znajduje się przewodnik wprowadzający.

  1. Z pulpitu nawigacyjnego WordPress przejdź do Wygląd > Menu .
elementor-transparent-header-4
  1. Wprowadź nazwę menu w polu tekstowym Nazwa menu . Następnie kliknij przycisk Utwórz menu .
  2. Skoncentruj się na lewym panelu. Tutaj możesz dodać strony witryny, posty, kategorie i niestandardowe łącza do menu.
elementor-transparent-header-5
  1. Możesz przeciągać i upuszczać elementy menu, aby je uporządkować lub tworzyć podmenu na prawym panelu.
elementor-transparent-header-6
  1. Kiedy będziesz zadowolony, pamiętaj, aby kliknąć przycisk Zapisz menu .

Użyj Elementora Pro , aby stworzyć normalny nagłówek

  1. Przejdź do Szablony> Dodaj nowy z pulpitu WordPress.
elementor-transparent-header-7
  1. Pojawi się wyskakujące okienko. Wybierz szablon nagłówka Elementor z menu rozwijanego i wprowadź jego nazwę w polu tekstowym Nazwij swój szablon . Następnie kliknij przycisk UTWÓRZ SZABLON .
elementor-transparent-header-8
  1. Galeria szablonów Elementor pojawi się w wyskakującym okienku. Możesz poruszać się po wszystkich stylach nagłówka Elementora. Po wybraniu ulubionego przesuń do niego kursor, a następnie kliknij przycisk Wstaw . Możesz także wyświetlić podgląd wszystkich z nich.
elementor-transparent-header-9

Utwórz przezroczysty przyklejony nagłówek za pomocą Elementora Pro

  1. Teraz musisz uczynić nagłówek przezroczystym za pomocą Elementor Pro. Aby to zrobić, kliknij przycisk z sześcioma kropkami nad nagłówkiem.
elementor-transparent-header-10
  1. W sekcji „Układ” wybierz odpowiednie menu z menu rozwijanego Menu.
elementor-transparent-header-11
  1. Przejdź do karty Styl , aby zmienić kolor tła i przezroczystość nagłówka. W sekcji „Tło” wybierz typ tła Klasyczny (wskazywany przez pędzel).
elementor-transparent-header-12
  1. Kliknij przycisk Próbnik kolorów . Następnie wybierz żądany kolor i przezroczystość.
  2. Możesz dodatkowo zmienić ogólny wygląd nagłówka, w tym typografię, nakładkę tła, obramowanie i separator. Zapraszam do eksperymentowania.
  3. Następnie przejdź do zakładki Zaawansowane . Następnie przewiń do sekcji Efekty ruchu . Włącz opcję Efekty przewijania .
elementor-transparent-header-13
  1. Wybierz opcję Cała strona z menu rozwijanego Efekty względem.
  2. Na koniec wybierz opcję Top z rozwijanego menu Sticky .
  3. Kiedy będziesz zadowolony, kliknij przycisk Opublikuj , aby zastosować zmiany.

Wynik będzie podobny jak poniżej:

elementor-transparent-header-14

Jak korzystać z Elementora, aby utworzyć przezroczysty nagłówek za darmo ?

Jeśli masz niski budżet i nie chcesz wydawać pieniędzy na Elementor Pro, potrzebujesz innej wtyczki do tworzenia przezroczystych nagłówków.

W tym artykule użyjemy wtyczki Essential Addons for Elementor. To najpopularniejsza biblioteka widżetów z ponad milionem aktywnych użytkowników.

Otrzymasz wiele darmowych widżetów, dzięki którym Twoja witryna będzie się wyróżniać i jak najbardziej angażować. Pamiętaj, że nie potrzebujesz wersji premium, aby tworzyć przezroczyste nagłówki.

Zainstaluj i aktywuj Elementor i niezbędne dodatki do wtyczki Elementor

  1. Z pulpitu WordPress przejdź do Wtyczki > Dodaj nowy .
elementor-transparent-header-15
  1. Znajdź wtyczkę, wpisując „ Elementor ”. Następnie zobaczysz wtyczkę Elementor wymienioną jako opcję.
  2. Kliknij odpowiednio przycisk „Zainstaluj teraz” i przycisk „Aktywuj”.
  3. Powtórz powyższy proces z wtyczką Essential Addons for Elementor.

Utwórz menu dla swojej witryny

Omówiliśmy to już powyżej. Przewiń w górę do know-how.

Użyj niezbędnych dodatków do Elementora , aby utworzyć przezroczysty lepki nagłówek

  1. Przejdź do Essential Addons > Elements . Tutaj aktywuj widżet prostego menu . Pamiętaj, aby kliknąć przycisk ZAPISZ USTAWIENIA .
elementor-transparent-header-16
  1. Utwórz nową stronę/post lub otwórz istniejącą za pomocą Elementora.
  2. Kliknij przycisk Ustawienia (oznaczony kołem zębatym) w lewym dolnym rogu. Wybierz opcję „Elementor Canvas” z menu rozwijanego Układ strony . W ten sposób możesz pozbyć się nagłówka dołączonego do motywu.
elementor-transparent-header-17
  1. Wróć do menu widżetów, klikając ikonę dziewięciu kwadratów. Wyszukaj widżet prostego menu . Przeciągnij i upuść go w wybranym miejscu.
elementor-transparent-header-18
  1. W sekcji Ogólne wybierz odpowiednie menu z menu rozwijanego Wybierz menu.
elementor-transparent-header-19
  1. Przejdź do karty Styl , aby zmienić kolor tła i przezroczystość nagłówka.
elementor-transparent-header-20
  1. W sekcji Tło wybierz Klasyczny typ tła (wskazywany przez pędzel).
  2. Kliknij przycisk Próbnik kolorów . Następnie wybierz żądany kolor i przezroczystość.
  3. Możesz dodatkowo zmienić ogólny wygląd nagłówka, w tym typografię, nakładkę tła, obramowanie i separator. Zapraszam do eksperymentowania.
  4. Następnie przejdź do zakładki Zaawansowane . Następnie przewiń do sekcji Pozycjonowanie . Wybierz opcję Stała w menu rozwijanym Pozycja .
elementor-transparent-header-21
  1. Wróć do menu widżetów, klikając ikonę dziewięciu kwadratów. Wyszukaj widżet Spacer . Przeciągnij i upuść go tuż pod widżetem prostego menu .
elementor-transparent-header-22
  1. W sekcji Spacer dostosuj wartość Space , aby dopasować wysokość nagłówka.
elementor-transparent-header-23
  1. Kiedy będziesz zadowolony, kliknij przycisk Opublikuj , aby zastosować zmiany.

Jak stworzyć przezroczysty nagłówek dla użytkowników Woostify?

Jeśli używasz motywu Woositfy, nawet darmowej wersji, możesz szybko zastosować piękny przezroczysty nagłówek dla całej witryny w ciągu kilku minut. Postępuj zgodnie z poniższymi instrukcjami, aby uzyskać wiedzę:

  1. Przejdź do Wygląd> Dostosuj z pulpitu WordPress.
elementor-transparent-header-24
  1. Następnie przejdź do Układ > Przezroczysty nagłówek .
elementor-transparent-header-25
elementor-transparent-header-26
  1. Włącz przełącznik Włącz przezroczysty nagłówek .
elementor-transparent-header-27
  1. W nowej karcie Ogólne i projektowe możesz dostosować nowy przezroczysty nagłówek do swoich potrzeb. Na przykład możesz włączyć/wyłączyć go na poszczególnych stronach, takich jak 404, posty itp.,
elementor-transparent-header-28
elementor-transparent-header-29
  1. Nie zapomnij kliknąć przycisku Opublikuj , gdy jesteś zadowolony z wyniku.

Ostatnie słowa

Tworzenie przezroczystego nagłówka Elementora to stylowe podejście, które pomaga użytkownikom poruszać się po witrynie.

Stworzony przez nas nagłówek jest w pełni responsywny. Dlatego nie musisz się zbytnio martwić tym problemem. Dla tych, którzy używają Woostify, powinieneś wybrać trzeci sposób. Jest to również najprostszy i najszybszy sposób, gdy chcesz stworzyć piękny przezroczysty nagłówek.