Jak sprawić, by nagłówek Divi był lepki / naprawiony (przewodnik krok po kroku)

Czy używasz Divi i chcesz utworzyć stały nagłówek ? Trafiłeś we właściwe miejsce. W tym przewodniku pokażemy krok po kroku dwa różne sposoby na przyklejenie nagłówka Divi .

Wraz z Elementorem, Divi jest jednym z najpopularniejszych motywów WordPress. Prawie 2 miliony witryn używa go do tworzenia niestandardowych projektów dla swoich firm. Jeśli jesteś również użytkownikiem Divi, mamy dla Ciebie coś specjalnego. W tym samouczku pokażemy, jak w kilku prostych krokach utworzyć stały nagłówek Divi .

Dlaczego nagłówek Divi jest przyklejony?

Jednym z głównych powodów, dla których nagłówek Divi jest lepki, jest ułatwienie użytkownikom nawigacji . Nagłówek znajduje się na górze Twojej witryny, więc jest to jedna z pierwszych rzeczy, które widzą klienci, którzy odwiedzają Twoją witrynę. Nagłówek zawiera bardzo ważne informacje i pomaga użytkownikom poruszać się po treści, aby znaleźć to, czego szukają. W nagłówku zwykle umieszczasz najważniejsze sekcje witryny, główne kategorie, linki do Twoich produktów i tak dalej.

Domyślnie menu WordPressa nie pojawiają się, gdy użytkownik przewinie stronę w dół. Aby więc być o krok przed konkurencją, możesz naprawić swój nagłówek, aby użytkownicy mieli do niego łatwy dostęp, nawet gdy przewijają w dół . Pomoże Ci to poprawić nawigację w Twojej witrynie. Dodatkowo może pomóc Ci poprowadzić użytkowników i zabrać ich tam, gdzie chcesz. Tak więc, jeśli użyjesz go mądrze, nagłówek może pomóc Ci zwiększyć współczynniki konwersji.

Oprócz edycji nagłówka i dodawania ikon mediów społecznościowych do menu WordPress, najpopularniejsze witryny eCommerce używają mega menu do wyświetlania swoich popularnych kategorii produktów. W ten sposób upewniają się, że kupujący łatwo znajdą produkty, których szukają.

Motyw Divi zawiera ponad 600 gotowych szablonów, które możesz zaimportować do swojej witryny. Jednak aby przenieść swój sklep na wyższy poziom, potrzebujesz czegoś innego. Widzieliśmy już, jak edytować nagłówek w WordPressie, a dzisiaj pokażemy, jak sprawić, by nagłówek był przyklejony za pomocą Divi.

Niektóre motywy WordPress, takie jak Avada i GeneratePress, są wyposażone w narzędzia, które sprawiają, że nagłówek jest przyklejany w panelu motywów. Jednak zrobienie tego samego w Divi wymaga dodatkowych dostosowań.

Jak sprawić, by nagłówek Divi był lepki / naprawiony?

Tutaj pokażemy dwie przyjazne dla początkujących metody naprawy nagłówka Divi.

1. Z wtyczką Divi Builder
2. Przez kodowanie

W tej sekcji przyjrzymy się krokom, które należy wykonać w przypadku każdej opcji. Oba są dość skuteczne, więc wybierz ten, który najbardziej Ci się podoba.

1) Przyklej nagłówek za pomocą Divi Builder

Motyw Divi jest dostarczany ze zintegrowanym konstruktorem. Oznacza to, że jeśli masz aktywny motyw Divi, nie musisz instalować żadnej dodatkowej wtyczki. Na potrzeby tej demonstracji założymy, że korzystasz już z Divi w swojej witrynie. Jeśli nie, zainstaluj i aktywuj Divi, zanim przejdziesz dalej.

Następnie możesz zaimportować jeden z wielu gotowych szablonów oferowanych przez Divi lub utworzyć go od podstaw. Po utworzeniu lub wybraniu projektu, w panelu WordPress , przejdź do Divi > Kreator motywów.

Tutaj będziesz mógł tworzyć niestandardowe szablony dla swoich witryn. W każdym szablonie będą trzy główne elementy:

• nagłówek
• Ciało
• Stopka

Edytuj globalny nagłówek

Ponieważ chcemy, aby nasz nagłówek Divi był naprawiony, wybierz nagłówek Global . Aby był przyklejony, musisz edytować globalny nagłówek. Tak więc najedź myszą na nagłówek globalny, a po lewej stronie zobaczysz ikonę ołówka. Kliknij go, aby rozpocząć edycję. Następnie zobaczysz stronę kreatora Divi, aby edytować nagłówek. Tutaj możesz dodawać elementy, takie jak tekst, obrazy, ikony społecznościowe, menu i tak dalej. Najedź myszą na górę ekranu i kliknij ikonę koła zębatego po lewej stronie.

Otworzy się nowe wyskakujące okienko z różnymi opcjami. Najnowsza wersja motywu Divi zawiera funkcję o nazwie pozycje Divi . To jest funkcja, której użyjemy, aby nagłówek był lepki. Na karcie Zaawansowane zobaczysz opcję Pozycja . Otwórz go i wybierz opcję Naprawiono z listy rozwijanej. Następnie zaktualizuj nagłówek. Po tym wyskakujące okienko zniknie i będziesz musiał zapisać globalne zmiany, naciskając przycisk Zapisz w prawym rogu. Po zaktualizowaniu nagłówka zamknij tego konstruktora. Następnie zapisz opcje konstruktora Divi.

Teraz czas sprawdzić frontend. Otwórz swoją stronę w nowej karcie i przewiń do dolnej sekcji. Jak widać na poniższym GIF-ie, nagłówek pozostaje niezmieniony!

Bez pisania ani jednej linii kodu utworzyłeś stały nagłówek. Za każdym razem, gdy aktualizujesz element nagłówka za pomocą konstruktora Divi, upewnij się, że zapisałeś ustawienia. W przeciwnym razie nie będziesz w stanie zobaczyć nowych zmian w interfejsie witryny.

2) Spraw, aby nagłówek Divi został naprawiony przez kodowanie

Zobaczmy teraz, jak sprawić, by nagłówek Divi był lepki przez kodowanie. W tym celu użyjemy kodu CSS. Nie martw się, jeśli nie jesteś programistą, wiersze kodu, których użyjemy, są dość proste.

Najpierw na pulpicie WordPress przejdź do Divi > Theme Builder i otwórz sekcję Nagłówek . Następnie kliknij ikonę koła zębatego, aby otworzyć wyskakujące okienko. W sekcji Zaawansowane zobaczysz ustawienia dodawania niestandardowych identyfikatorów CSS i klas CSS . Tutaj użyj:

• Identyfikator CSS : główny nagłówek
• Klasa CSS : et-fixed-header

A potem to zapisz. Następnie uratuj budowniczego i wyjdź. Następnie wróć do opcji konstruktora Divi i zapisz zmiany.

Następną rzeczą, którą musisz zrobić, to dodać kod CSS do witryny. Można to zrobić na dwa sposoby:

• Poprzez opcje motywu Divi
• Korzystanie z konfiguratora WordPress

Przyjrzyjmy się obu metodom krok po kroku.

Napraw nagłówek za pomocą opcji motywu

Najpierw zobaczmy, jak dodać kod CSS za pomocą sekcji Opcje motywu . Na pulpicie WordPress przejdź do Divi > Opcje motywu > Niestandardowy CSS .

Następnie skopiuj kod CSS z dołu.

 @media only screen i (minimalna szerokość: 981px){
#main-header.et-stały-nagłówek {
pozycja: ustalona;
    dopełnienie górnej: 30px;
}
#page-container {
padding-top: 135px;
}
}

Wklej go w edytorze kodu i zapisz zmiany. Następnie zapisz ustawienia i sprawdź interfejs witryny, aby potwierdzić, że nagłówek Divi w witrynie jest przyklejony !

UWAGA : upewnij się, że dostosowałeś dopełnienie w kodzie CSS i dostosowałeś rozmiar do swojej witryny.

Przyklej nagłówek za pomocą narzędzia WordPress Customizer

Innym szybkim sposobem na przyklejenie nagłówka Divi jest użycie dostosowywania WordPress. Aby otworzyć dostosowywanie, po prostu wybierz Wygląd > Dostosuj , a następnie otwórz Dodatkowy CSS .

Teraz po prostu skopiuj i wklej ten kod:

 @media only screen i (minimalna szerokość: 981px){
#main-header.et-stały-nagłówek {
pozycja: ustalona;
    dopełnienie górnej: 30px;
}
#page-container {
padding-top: 135px;
}
}

UWAGA : Ten kod działa w naszej witrynie demonstracyjnej, ale zalecamy dostosowanie dopełnienia w kodzie CSS i dostosowanie rozmiaru witryny.

Na koniec zapisz zmiany i gotowe! Właśnie naprawiłeś nagłówek Divi za pomocą dostosowywania WordPress.

Bonus: wprowadź zmiany w swoim menu Divi

W tej sekcji dowiesz się, jak wprowadzać zmiany w stałych opcjach menu Divi bez kodowania CSS. Aby to zrobić, przejdź do dostosowywania WordPress. W ustawieniach Nagłówka i Nawigacji zobaczysz opcję dostosowywania o nazwie Stałe ustawienia nawigacji .

Otwórz go, a zobaczysz dedykowane opcje dostosowywania. Główne opcje, które zobaczysz na tym ekranie to:

• Ukryj obraz logo
• Stała wysokość menu
• Rozmiar czcionki
• Kolor tła menu
• Kolor linku do menu
• I inni

W ten sposób za każdym razem, gdy musisz dokonać modyfikacji w swoim przyklejonym nagłówku, możesz po prostu przejść do dostosowywania WordPressa i zmienić te rzeczy. A najlepsze jest to, że będziesz mógł zobaczyć każdą aktualizację w sekcji podglądu na żywo.

Wniosek

Podsumowując, utrwalenie nagłówka Divi pomoże Ci poprawić nawigację w witrynie i potencjalnie poprawić współczynniki konwersji. W tym przewodniku pokazaliśmy Ci dwa różne sposoby na zrobienie tego:

1. Z Divi Builder
2. Kodując
   1. Opcje motywu Via Divi
   2. Korzystanie z konfiguratora WordPress

Obie metody są dość skuteczne, więc wybierz tę, która najlepiej odpowiada Twoim umiejętnościom i potrzebom. Jeśli chcesz czegoś szybkiego, możesz użyć Divi Builder. To niezwykła wtyczka WordPress, która pomoże Ci dostosować nagłówek Divi za pomocą kilku kliknięć. Z drugiej strony możesz również użyć odrobiny kodu CSS, aby przykleić nagłówek za pomocą opcji motywu lub dostosowywania WordPress. Mimo że wymaga trochę kodowania, ta metoda jest dość prosta i wymaga tylko dodania kilku linii kodu do Divi Builder.

Na koniec, jeśli spodobał Ci się ten post, udostępnij go w mediach społecznościowych i zajrzyj do sekcji naszego bloga, aby uzyskać więcej przydatnych samouczków.

Czy znasz inne metody naprawy nagłówka Divi? Chcemy usłyszeć od Ciebie, więc daj nam znać w komentarzach poniżej!