Zmiana logo w nagłówku po przewinięciu strony

2 mar 2019Divi, tips&tricks, Wordpress0 komentarzy

Niedawno miałem problem z wydawałoby się podstawową funkcjonalnością. Mianowicie – jak zrobić, żeby duże logo zmieniło się na małe w trakcie przewijania?

Standardowo Divi przewiduje taką opcję – wystarczy w ustawieniach Divi zaznaczyć „zablokowany pasek nawigacji”… i wtedy możemy sobie określić w „styliście tematów” jakiej wielkości ma być pasek i logo po przewinięciu strony.

Schody zaczynają się, kiedy chcemy aby logo zmieniło się – np z pełnego logo do samego sygnetu. W tym celu trzeba użyć następującego kodu CSS:

/*********************************
Zmiana logo w trakcie scrollowania
**********************************/
.et-fixed-header #logo {
content: url(../wp-content/uploads/rok/miesiąc/nazwapliku.png); 
/* ścieżka do pliku z logo na jakie ma się zmienić w trakcie scrollowania. Jeśli wrzucisz nowe logo jako standardowe media - ścieżka będzie przypominać tą z przykładu */ 
padding: 10px 0; /* wielkość przerwy jaka ma być między górą a dołem paska nawigacji */
}

Dzięki temu logo zmieni się na nowe. Natomiast jego wielkość, wysokość paska nawigacji itp. można dalej ustawiać z poziomu „stylisty tematów”

0 komentarzy

Wyślij komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Paweł Szynkiewicz

Paweł Szynkiewicz

Ekspert od produktywności i WordPressa/Divi

Od ponad 20 lat pracuję jako projektant, a od 10 lat specjalizuję się w wykorzystaniu WordPressa i Divi do samodzielnego wdrażania projektów. W tym czasie rozwinąłem swoją wiedzę na temat produktywności i efektywnego wykorzystania tych narzędzi. W tym wpisie dzielę się praktycznymi wskazówkami, które pomogą Ci zoptymalizować Twój warsztat pracy i samodzielnie wdrażać projekty.

Przydała Ci się ta wiedza? Postaw mi kawę, abym mógł tworzyć więcej wartościowych treści!

Postaw mi kawę na buycoffee.to

Gdzie umieścić powyższy kod?

Pamiętaj – nigdy nie umieszczaj żadnego kodu w plikach motywu Divi (ani żadnego innego). Z prostej przyczyny – każda aktualizacja motywu spowoduje wyczyszczenie Twoich zmian.

W celu dodania kodu CSS, który ma wpływać na wszystkie elementy danego typu w serwisie  – użyj przystosowanych do tego miejsc:

Opcja 1

W kokpicie swojej strony przejdź do zakładki „Divi” i przewiń ekran na sam dół. W opcjach szablonów graficznych znajduje się pole „Niestandardowe CSS”. Wszystkie zmiany tam wprowadzone zostaną zachowane nawet po aktualizacji.

Opcja 2

Będąc zalogowanym w panelu administracyjnym i przeglądając swoją stronę – na górze serwisu masz włączony pasek administratora. Klikając na tytuł strony rozwinie Ci się menu. Wybierz z niego „Stylista tematów”, a następnie „Spersonalizowany CSS”. Po wpisaniu kodu kliknij „Opublikuj”.

Opcja 3

Umieść w pliku style.css w Motywie potomnym. Jak stworzyć motyw potomny (child theme) dowiesz się tutaj.

Share This