Jak zmienić kolor nagłówka przyklejonego podczas przewijania w Elementorze

Przyklejone nagłówki to świetny sposób, aby menu nawigacyjne Twojej witryny było zawsze widoczne, zapewniając łatwy dostęp do ważnych linków i informacji. Jednak statyczny nagłówek może z czasem stać się monotonny i możesz chcieć zmienić jego kolor na przewijaniu, aby stworzyć bardziej dynamiczne i wciągające doświadczenie użytkownika. W tym przewodniku pokażemy, jak zmienić kolor nagłówka przyklejonego podczas przewijania w Elementorze , wykonując proste i łatwe do wykonania kroki. Niezależnie od tego, czy jesteś początkującym, czy doświadczonym użytkownikiem Elementora, możesz łatwo zastosować ten efekt i nadać swojej witrynie świeży i nowoczesny wygląd.

Metoda projektowania

Jeśli jeszcze tego nie zrobiłeś, będziesz musiał użyć narzędzia do tworzenia motywów, aby utworzyć niestandardowy szablon nagłówka. Rozpocznij od umieszczenia swojego logo w widżecie obrazu i widżecie nawigacji w dwukolumnowej sekcji nagłówka.

Karta Zaawansowane

Zakładka Zaawansowane w Kontroli sekcji zostanie użyta w poniższych krokach.

Ustawienia marginesów

Najczęstszym sposobem utworzenia przezroczystego nagłówka jest nadanie sekcji ujemnego marginesu równego jej wysokości. Odblokuj kontrolę marginesów na karcie Zaawansowane i ustaw dolną wartość na wartość ujemną (przykład: -125 pikseli). Spowoduje to przeniesienie sekcji pod nagłówkiem na górę strony.

Indeks Z

Będziesz także musiał zwiększyć indeks Z sekcji, aby mieć pewność, że zawsze znajdzie się na górze treści. Możesz wprowadzić dowolną liczbę większą niż reszta treści Twojej witryny, ale wielu projektantów używa liczby 1000.

Przyklejone ustawienia

Wybierz opcję Przyklejony z akordeonu Efekty ruchu i ustaw ją na Górę.

Dodawanie efektu

Teraz, gdy stworzyliśmy podstawową przezroczystą sekcję nagłówka, dodamy efekt przewijania.

Karta Styl

Zakładka Styl w Kontroli sekcji zostanie użyta w poniższych krokach.

Ostateczny kolor

Ustaw kolor końcowego tła lub gradientu w próbniku kolorów.

Efekt przewijania

Przełącz selektor efektów przewijania w panelu sterowania.

Ustaw wartości

Musimy teraz dostosować wartości na suwakach rzutni, aby uzyskać pożądany efekt. Przewiń do lokalizacji na stronie, w której chcesz mieć pełne krycie, i zmniejszaj wartość Góra, aż nagłówek będzie całkowicie nieprzezroczysty (przykład: 25%). Możesz teraz zwiększyć wartość Bottom. W poprzednim przykładzie chcieliśmy, aby efekt nastąpił szybko, dlatego ustawiliśmy wartości bardzo blisko siebie (przykład: 22%). Spowoduje to wystąpienie efektu przy przewinięciu strony o 3%.

Podsumowanie

Podsumowując, zmiana koloru nagłówka nagłówka przewijania w Elementorze może poprawić atrakcyjność wizualną i wygodę użytkownika w Twojej witrynie. To prosty i skuteczny sposób na wyróżnienie Twojej witryny i wywarcie na niej niezapomnianego wrażenia. Należy jednak pamiętać, że konieczne będzie dostosowanie lub uwzględnienie urządzeń mobilnych i tabletów, ponieważ zachowanie nagłówka może się różnić w zależności od rozmiaru ekranu. Znalezienie tego idealnego miejsca będzie wymagało pewnych testów i ulepszeń, ale wynik końcowy będzie wart wysiłku. Zatem wypróbuj tę technikę, aby nadać swojej witrynie świeży i nowoczesny wygląd.