Jak utworzyć przezroczysty nagłówek Sticky Elementor w prostych krokach

Jaka jest pierwsza rzecz, na którą zwracasz uwagę podczas odwiedzania strony internetowej?

Nagłówek, prawda?

Tak! Wszyscy jesteśmy tacy sami!

Nagłówek jest pierwszą rzeczą, która przyciąga wzrok odwiedzających Twoją witrynę. Nagłówek możesz uznać za szkielet dowolnej witryny internetowej.

Nie ma znaczenia, czy posiadasz witrynę e-commerce, blog, media społecznościowe, forum czy witrynę z osobistym portfolio, musisz dodać proste i łatwe w obsłudze przejrzyste menu Elementora.

Jednak dodanie prostego nagłówka z menu już nie wystarczy! Musisz dostosować nagłówek, aby zapewnić odbiorcom najlepszą obsługę. Możesz to zrobić, tworząc przezroczyste tło nagłówka Elementora i przyklejając je!

W tym artykule pokażę Ci najbardziej zaawansowaną, ale oszczędzającą czas metodę dodania przezroczystego nagłówka w WordPressie za pomocą Elementora!

Stwórzmy przyklejany nagłówek Elementora, który sprawi, że odwiedzający pokochają Twoją witrynę od pierwszego wejrzenia.

Czy wiesz, że dzięki Elementskit możesz w ciągu kilku minut utworzyć niestandardowy przezroczysty nagłówek Elementora? Chodźmy wypróbuj Elementskit za darmo

Co to jest lepki przezroczysty nagłówek w WordPress?

Przyklejony przezroczysty nagłówek definiuje nagłówek, który pozostaje nieruchomy i przezroczysty, gdy ktoś przewija w dół lub w górę. Ten nagłówek umożliwia płynne przeglądanie tła witryny podczas jej przewijania.

Rzeczy, których będziesz potrzebować

Aby śledzić ten blog instruktażowy, będziesz potrzebować –

1. Witryna WordPress
2. Kreator stron Elementora
3. Zestaw elementów
4. 5-10 minut swojego czasu.

Mam wszystko? Świetnie, jesteś gotowy do pracy.

Zaprojektujmy przezroczyste tło nagłówka Elementora!

Możesz utworzyć nagłówek za pomocą nowego szablonu nagłówka lub nowej strony. Ale zawsze wolę utworzyć nową stronę, aby zaprojektować przezroczysty, lepki nagłówek za pomocą Elementora.

Po zakończeniu projektowania nagłówka możesz po prostu skopiować i wkleić szablon do szablonu nagłówka. Łatwe, prawda?

Przejdźmy do przewodnika, jak utworzyć lepki przezroczysty nagłówek w WordPress za pomocą Elementora.

Krok #1: Najpierw utwórz menu

Aby dodać przyklejony nagłówek Elementora, musisz najpierw utworzyć menu. Aby utworzyć nowe menu, przejdź do wp-admin > Wygląd > Menu.

Po zakończeniu tworzenia menu nadaj mu nazwę „Podstawowe” i kliknij „Zapisz menu”. Jeśli już stworzyłeś menu, będzie ono wyglądać mniej więcej tak –

Możesz zauważyć „Megamenusekcja powyżej. Zasadniczo jest to jedna z najbardziej przydatnych funkcji ElementsKit. Jeśli chcesz dodać wiele kategorii lub opcji w sekcji menu, możesz skorzystać z tej funkcji Megamenu. 

⭐ ⭐ zapoznaj się ze szczegółowym przewodnikiem na temat jak stworzyć megamenu w Elementorze.

Krok #2: Utwórz szablon nagłówka

Przejdź do sekcji „Stopka nagłówka” w zestawie ElementsKit. Dodaj nowy szablon nagłówka, klikając „Dodaj nowy”.

Teraz pojawią się ustawienia szablonu. Tutaj musisz wykonać następujące zadania:

• Nadaj tytuł nagłówkowi.
• Z menu rozwijanego ustawień „Typ” wybierz „Nagłówek”
• Wybierz preferowany stan. Z listy rozwijanej wybrałem opcję „Cała witryna”.
• Aktywuj szablon nagłówka, włączając przełącznik.

Krok #3: Edytuj za pomocą Elementora

Kiedy wykonasz wszystkie powyższe zadania, kliknij przycisk „Edytuj za pomocą Elementora” w lewym dolnym rogu.

Krok #4: Wybierz projekt nagłówka

W tej sekcji możesz wybrać projekt nagłówka z wbudowanej biblioteki nagłówków ElementsKit.

Aby kontynuować, kliknij ikonę ElementsKit, wybierz piękny projekt i kliknij przycisk „Wstaw”, aby zaimportować nagłówek do Elementora.

Krok #5: Przyklej przezroczyste menu Elementora

Wybraliśmy już projekt nagłówka. Teraz nadszedł czas, aby przykleić nagłówek w górnej pozycji. Przeglądaj zakładkę „Zaawansowane” w Elementorze, aby znaleźć to zadanie. Na karcie Zaawansowane znajdź „ElementsKit Sticky”. Ustaw menu jako Przyklejone na górze listy rozwijanej.

Pamiętaj, że możesz ustawić, aby nagłówek był przyklejony do określonej sekcji. W takim przypadku zdefiniuj Sticky Until. Możesz także zastosować Sticky Offset do nagłówka w zakresie od 0 do 100.

Krok #6: Ustaw nagłówek Elementor Transparent nad treścią

Teraz przejdź do zakładki „Styl”. W sekcji „Opakowanie menu” ustaw wybraną przez siebie wysokość przezroczystego menu Elementora.

Wybierz typ tła opakowania menu „Klasyczny” i usuń kolor za pomocą suwaka po lewej stronie. Możesz także wpisać kod koloru ręcznie. W takim przypadku wpisz #00000000, aby uzyskać przezroczyste tło. Co więcej, możesz także dostosować nagłówek Elementora nad treścią z karty treści.

Aby uczynić nagłówek bardziej dopracowanym i atrakcyjnym, możesz również wykorzystać dowolne z następujących ustawień:

Krok #7: Testowanie przezroczysty nagłówek Elementora

Cóż, zaprojektowaliśmy ten przezroczysty nagłówek przy użyciu Elementora i innego Wtyczka dodatku z przezroczystym nagłówkiem Elementora o nazwie ElementsKit. Teraz czas sprawdzić wynik.

Możesz dodać jeszcze kilka sekcji pod nagłówkiem, aby lepiej zrozumieć przezroczystość. W tym samouczku dodałem dwa obrazy w sekcji nagłówka. Oto efekt końcowy.

Otóż to! Udało nam się stworzyć przezroczyste tło nagłówka Elementora. Teraz możesz skopiować ten nagłówek i zastosować go na dowolnej stronie swojej witryny.

Nadal jesteś zdezorientowany? Obejrzyj ten film instruktażowy:

Różne projekty nagłówków dla użytkowników ElementsKit

ElementsKit jest dostarczany z wieloma wbudowanymi projektami nagłówków od razu po wyjęciu z pudełka. Wszystkie są stylowe, niepowtarzalne i pomagają użytkownikowi poruszać się po całej witrynie.

Przyjrzyj się kilku projektom nagłówków ElementsKit.

Ilustracja 1 – Przyklejony nagłówek Elementora

Ilustracja 2 – Przyklejony nagłówek Elementora

Ilustracja 3 – Przyklejony nagłówek Elementora

  Ilustracja 4 – Przyklejony nagłówek Elementora

  Ilustracja 5 – Przyklejony nagłówek Elementora

Czyż te projekty nie są wspaniałe? Tak, możesz uzyskać dostęp do ogromnej listy takich projektów premium, korzystając z Zestaw elementów.

Dlaczego warto używać A Przezroczysty Przyklejony nagłówek Elementora?

Niezależnie od tego, czy podobają Ci się te lepkie, przezroczyste nagłówki dla Elementora, czy nie, musisz spróbować. Te wspaniale wyglądające, modne nagłówki dodają ogromnej wartości Twojej witrynie. Tutaj wymieniłem cztery najważniejsze powody, dla których warto używać przezroczystego nagłówka na swojej stronie internetowej.

Lepszy branding

Tysiące firm umieściło swoje logo w głównym nagłówku. Myślisz, że to tylko zbieg okoliczności?

Nie! 

A Z raportu Lucidpress wynika, że konsekwentna prezentacja logo marki wzrasta przychody o około 33 proc. Oznacza to, że możesz zwiększyć przychody swojej firmy jedynie poprzez wyświetlanie odbiorcom logo marki.

Jeżeli umieścisz logo na naklejce Elementora, będzie ono widoczne w całej witrynie. Dzięki temu ludzie zauważą Twoje logo na dłużej. Sprawi, że Twoja marka będzie znana większej liczbie osób i zwiększy przychody.

Lepsze doświadczenie użytkownika

Przyklejony nagłówek pozwala użytkownikom szybciej przeglądać Twoją witrynę. Mogą znaleźć żądane informacje przy minimalnym wysiłku.

Z drugiej strony użycie stałego nagłówka wymaga od użytkowników więcej czasu na znalezienie informacji. Nikt nie chce przez cały czas przewijać do góry, aby użyć głównego nagłówka. W rezultacie użytkownicy opuszczają Twoją witrynę.

Cóż, możesz przykleić nagłówek na górze. Ale to nie koniec twoich obowiązków. Obecnie większość osób przegląda strony internetowe za pomocą urządzenia mobilnego. Jeśli przykleisz nagłówek na górze, zabije to miejsce i wyświetli mniej treści. To nie jest przyjazne dla użytkownika.

Aby rozwiązać ten problem, należy użyć przezroczystego nagłówka Elementora. W ten sposób możesz zachować widoczność nagłówka, a także pokazać odwiedzającym więcej treści. To sytuacja korzystna dla obu stron, prawda?

Poprawia ranking wyszukiwarek

Będąc webmasterem, prawdopodobnie wiesz, że wyszukiwarki również bardzo dbają o wygodę użytkownika. Jest to jeden z najważniejszych czynników rankingowych Google. Oznacza to, że tylko przyklejony nagłówek pomoże Ci poprawić ranking Twojej witryny w Google i przyciągnąć więcej potencjalnych klientów.

Chcesz stracić klientów? Nie sądzę!

Łatwiejsza nawigacja

Czy kiedykolwiek miałeś problemy z poruszaniem się po stronie internetowej?

Cóż, nieraz się z tym mierzyłem!

Zawsze przewijanie do góry jest najbardziej męczącą lub niezwykle nudną czynnością podczas odwiedzania strony internetowej. Jeśli nie chcesz stwarzać dodatkowych problemów dla odbiorców, powinieneś natychmiast wyrzucić standardowy nagłówek.

Zamiast tego zaprojektuj niestandardowy przezroczysty nagłówek Elementora i zapewnij swoim klientom płynniejsze przeglądanie. Poza tym możesz także sprawić, że nawigacja będzie wyjątkowo przyjazna jednostronicowa nawigacja WordPress.

Ostatnie słowa

Do tej pory musiałeś już zrozumieć, ile zyskasz, używając tylko przezroczystego tła nagłówka Elementora. Dodaj przezroczysty, przylepny nagłówek do swojej witryny już dziś i wykorzystaj ją w pełni.

Mamy nadzieję, że możesz zaprojektować wiele niestandardowych, przezroczystych, samoprzylepnych nagłówków ElementsKit Dodatek do Elementora i Elementor, postępując zgodnie z tymi wytycznymi.

Jeśli masz dalsze pytania dotyczące lepkiego przezroczystego nagłówka dla Elementora, daj nam znać w sekcji komentarzy. Z niecierpliwością czekamy na rozwiązanie Twoich problemów.

Miłego dnia!

Często zadawane pytania (FAQ)

Jakie są elementy idealnego nagłówka?

Dobry nagłówek musi zawierać kilka istotnych elementów, które sprawią, że nawigacja będzie płynna i elastyczna. Oto niezbędne elementy idealnego nagłówka:

Jak przykleić przezroczysty nagłówek dla różnych typów urządzeń?

Na szczęście możesz wybrać typ urządzenia, na którym chcesz zachować przyklejony nagłówek. Masz całkowitą swobodę w określeniu, czy chcesz ustawić przezroczysty, przyklejany nagłówek dla użytkowników telefonów komórkowych, tabletów czy komputerów stacjonarnych. Jeśli chcesz ustawić przezroczysty nagłówek przyklejony dla wszystkich typów urządzeń, upewnij się, że ustawiłeś przyklejony dla wszystkich urządzeń.

Co wyróżnia dobry nagłówek?

Dobry nagłówek musi być łatwy do odczytania i zawierać wszystkie najważniejsze strony Twojej witryny. Poza tym kontrast kolorów i czcionki również odgrywają znaczącą rolę w czynieniu go widocznym. Musisz umożliwić jego rozwijanie, zamiast umieszczać zbyt wiele elementów w nagłówku. Uwzględnienie niezbędnych elementów stanowi również dobry nagłówek, który skutecznie utrzymuje tożsamość marki i zapewnia łatwą nawigację.

Czy musisz używać niestandardowego CSS do ustawiania lepkiego nagłówka Elementora?

Nie. Jeśli używasz ElementsKit pro, uzyskasz prawie wszystko, czego potrzebujesz, z ustawień przyklejonych ElementsKit. Nie musisz używać żadnego niestandardowego CSS, aby zbudować przezroczysty, przylepny nagłówek dla Elementora. Jeśli jednak nadal chcesz dodać niestandardowy CSS, po prostu skorzystaj z opcji „Dodaj przesunięcie klasy efektów lepkich zestawu” i motywu funkcjonalnego, aby zakończyć pracę z kodem CSS.

Czy możesz użyć nagłówka Elementora, który jest lepki, ale nie przezroczysty?

Tak, możesz to zrobić. jeśli chcesz, aby nagłówek był lepki, nie czyniąc go przezroczystym, po prostu ustaw nagłówek na „górę”, a następnie zmień kolor tła na żądany w ustawieniach „Kolor lepkiego tła”.

Czy chcesz, aby Elementor Pro korzystał z przyklejonego nagłówka Elementor?

Nie, jeśli masz bezpłatną wersję Elementora z ElementsKit Pro, możesz sprawić, że nagłówek Elementora będzie zarówno przezroczysty, jak i lepki.

Więc pospiesz się i utwórz przylepny nagłówek dla Elementora w swojej witrynie WordPress za pomocą ElementsKit. Skoro możesz sprawić, że nagłówek będzie jednocześnie lepki i przezroczysty, po co tracić szansę?