Przydatne narzędzie dla webmasterów od Chrome

Gdy chcemy zmienić coś na stronie lub w naszym szablonie WordPressa to przydatnym narzędziem jest „Zbadaj element” w przeglądarce Chrome.

Przypuśćmy, że chcę zmienić kolor belki pod napisem Kategorii z fioletowego na żółty. Zazwyczaj tak od razu nie wiemy gdzie znajduje się kod strony odpowiedzialny za ten element. Zazwyczaj zapisane to będzie w pliku .css, ale nie koniecznie w tym głównym np. style.css. Wiec dobrze zobaczyć gdzie ten kod „siedzi”.

Wskazujemy kursorem dany element do zmiany, wciskamy prawy klawisz myszy, pokazuje się menu, wybieramy ostatnią pozycję „Zbadaj element”.

zbadaj_element2

Po prawej stronie pokażą nam się miejsca z kodem strony, które są odpowiedzialne za ten element.

zbadaj_element3

 

Znajdujemy gdzie jest kod koloru:

zbadaj_element4

Możemy go zmienić na konkretny nowy kolor, żeby podejrzeć jak będzie wyglądać strona z nowym kolorem:

zbadaj_element5

Dla ułatwienia możemy kliknąć na kolorowym  kwadraciku i rozwinie się paleta, z której możemy wybrać kolor :

zbadaj_element6

zbadaj_element7

 

„Zbadaj element” daje nam symulację zmian, ale zmiany musimy dokonać w kodzie na naszym serwerze.

W okienkach po prawej stronie widzimy w którym pliku należy zmienić kod. U mnie to w pliku style.css.

Jak to jest WordPress to wchodzę w Wygląd->Edycja i edytuję plik style.css i dzięki  „Zbadaj element” łatwo znajduję

linijkę ze stylem mojej belki przez Ctrl+F (wpisuje np. nazwę którą chcę wyszukać i znajdę się w odpowiednim miejscu).

Zmieniam i zapisuję zmiany.

 

„Zbadaj element” może posłużyć nam do symulacji jak strona będzie widziana na różnych urządzeniach.

W tym celu po wybraniu „Zbadaj element” u góry z lewej strony pojawi się menu, gdzie można wybrać urządzenie i obejrzeć jak strona będzie na nim wyglądać.

zbadaj_element1

Gdy odkryłam „Zbadaj element” – życie webmastera stało się prostsze 🙂

 

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *