MODUŁ 0 - Przygotowanie do startu! 3... 2... 1...
MODUŁ 1 – Czy WordPress jest w ogóle dla mnie?
MODUŁ 2 - MYŚLENIE, czyli szykujemy się do starcia! ;)
MODUŁ 3 – Ogarniamy DZIAŁKĘ i tabliczkę z adresem
MODUŁ 4 – Działka jest. Czas na DOM, drzewo i…
MODUŁ 5 – Dodajemy TREŚCI, czyli niech wreszcie coś zacznie się dziać
MODUŁ 6 - BACKUPUJEMY, ZANIM ZEZPSUJEMY ;)
MODUŁ 7 - MOTYWY, CZYLI PEŁEN MAKE-UP DLA STRONY
MODUŁ 8 - WTYCZKI, CZYLI CO JESZCZE MOŻEMY ODPICOWAĆ
MODUŁ 9 – MY SIĘ WŁAMU NIE BOIMY! CZYLI ZABEZPIECZAMY CHATĘ
MODUŁ 10 – ZAMIATAMY PRZED SAMĄ METĄ IIII…. ŚWIĘTUJEMY FINISZ!
MODUŁ 11 – HOUSTON! MAMY PROBLEM! ROZWIĄZYWANIE PROBLEMÓW Z WORDPRESSEM

5.2. Lekcja na nielegalu: chwila na pudrowanie noska, czyli ustawiamy logo i wstępne kolorki

Jak zmienić logo i kolory na stronie na WordPressie?

To kolejna z lekcji, które powinny być później, aaaleeee… wiem, że I TAK TO ZROBICIE 😀

Dokładnie tak, jak kilka tysięcy kursantów z pierwszej edycji przed Wami 😀

Ja zawsze mówię, że wygląd strony to jest sprawa, którą zajmujemy się w drugiej kolejności, bo najpierw układamy szkielet: kategorie, tagi, treści, menu nawigacyjne…

Ale wiem, że to się tak łatwo mówi i nawet robi, gdy się czyni setną stronę i to na dodatek nie dla siebie. A gdy się tworzy pierwszą w życiu i to jeszcze własną, to pokusa, żeby ona już na początku wyglądała choć ciupinkę jak nasza – miała nasze logo i/lub kolory – jest ogromna 😀

Dlatego nie będę już zawracać kijem Wisły (wystarczy, że nasz rząd podejmuje próby zawrócenia Odry…) tylko poddam się i pokażę Wam jak zrobić trzy malutkie zmiany, żeby póki co ta łysa strona choć odrobinę bardziej dawała się odczuć jako Wasza 🙂

Zmienimy:

  • logo (a właściwie dodamy je, bo obecnie go nie ma)
  • faviconę, czyli ikonę witryny
  • podstawowe kolory na stronie (zniknie domyślny niebieski)

Zmiana logo na stronie na WordPressie

Żeby zmienić logo, musimy wejść na ekran personalizacji WordPressa, który ja nazywam Dostosujem. A nazywam go tak dlatego, że wchodzi się na niego klikając Dostosuj w zakładce Wygląd w Kokpicie:

Jak zmienić logo w WordPressie - panel personalizacji: Dostosuj

Kliknięcie w tę opcję przenosi nas na ekran, na którym mamy z lewej strony dużo różnych opcji (jakich – to zależy w głównej mierze od motywu), a po prawej – podgląd strony.

Możemy więc zmieniać tutaj opcjami wygląd strony i od razu mieć obok podgląd z wyklikanymi zmianami – dopóki nie zatwierdzimy ich przyciskiem Opublikuj, będziemy widzieć je tylko my (a inni odwiedzający stronę – nie).

Zmiana logo jest jedną z łatwiejszych do wykonania i najprościej dokonać jej klikając w niebieską kredeczkę przy tytule strony – tam, gdzie spodziewalibyśmy się znaleźć właśnie logo 🙂

Jak zmienić logo w WordPressie - edycja elementu w Dostosuj

Po kliknięciu kredki przeskoczy nam parę opcji z lewej strony i od razu znajdziemy się w miejscu, w którym możemy załadować obraz z logo, klikając w kafelek Wybierz logo:

Gdzie zmienić logo w WordPress? Wgrywanie grafiki z logo.

Po kliknięciu, otworzy się Biblioteka mediów (pisałam już o niej co nieco w lekcji 4.6), czyli miejsce, w którym składowane są wszystkie obrazki używane w naszym WordPressie. Aby przesłać plik do Biblioteki mediów możemy użyć opcji Prześlij pliki w lewym górnym rogu albo na skróty – po prostu wrzucić do niej odpowiedni plik metodą drag&drop, czyli zwyczajnie chwytając plik myszką i upuszczając na ekranie biblioteki:

Jak zmienić logo w WordPressie? Wgrywanie grafiki z logo do biblioteki mediów

Wrzucony plik załaduje się do Biblioteki mediów i po załadowaniu będziemy mogli kliknąć przycisk Wybierz aby potwierdzić, że ten właśnie obraz wybieramy na nasze logo:

Jak zmienić logo w WordPressie? Wybieranie grafiki z logo z biblioteki mediów

Otrzymamy propozycję przycięcia obrazka, gdybyśmy czuli taką potrzebę, ale to nie od sycylijskiej mafii, więc nie musimy z niej korzystać 😉

Ja nie chcę mojego logo przycinać, więc klikam Pomiń przycinanie:

Jak zmienić logo w WordPressie? Przycinanie grafiki z logo w bibliotece mediów

I już! Logo załadowane, choć… trochę duże, nie? 😀

Jak zmienić logo w WordPressie? Zmniejszanie zbyt dużego logo na stronie

Na szczęście da się to opanować 😀
Nawet spore fizycznie logo (to znaczy duże rozmiarem w pikselach) można wyświetlić jako skromniejsze, nie tracąc przy tym na jego jakości/ostrości.

Jest do tego w opcjach po prawej specjalne ustawienie: Logo Width, czyli Szerokość logo. Tu suwaczkiem ustawiamy jaką szerokość ma mieć logo i od razu mamy podgląd, jak będzie wtedy wyglądało.

Tuż poniżej mamy z kolei opcję Display Site Title, czyli Wyświetlaj tytuł witryny – możemy chcieć z niej skorzystać i wyłączyć osobne wyświetlanie tytułu koło logo, bo zwykle nie potrzebujemy jednego i drugiego 🙂

Jak zmienić logo w WordPressie? Ukrywanie tytułu strony.

Ja ustawiłam swoje logo na 180 px szerokości i wyłączyłam wyświetlanie tytułu witryny – i od razu wygląda to lepiej!

Jak zmienić logo w WordPressie? Zmniejszanie grafiki z logo na stronie.

⭐️⭐️⭐️ PROTIP: Logo na urządzeniach mobilnych

Ustawianie logo w tym miejscu chciałoby się skończyć, ale warto pamiętać, że stronę oglądamy nie tylko na kompie, ale też na urządzeniach mobilnych: tabletach, komórkach… I to co wygląda dobrze na monitorze, może nie prezentować się już tak wspaniale na telefonie…

Dlatego WordPress umożliwia ustawienie osobnych parametrów dla logo na tabletach oraz komórkach. Wystarczy zerknąć w lewy dolny róg i zobaczymy tam miniaturki urządzeń. Domyślnie mamy zaznaczony desktop, czyli widok dla komputerów, ale możemy się też przełączyć na tablet i tam osobno ustawić wielkość logo na tego typu urządzeniach oraz zdecydować, czy chcemy na nich wyświetlać tytuł witryny internetowej:

Jak zmienić logo w WordPressie? Ustawienia wielkości logo na tablecie.

Dalej z kolei jest symbol telefonu i kliknięciu w niego – przełączymy się na widok z telefonów. Tu znów możemy zmodyfikować wielkość logo, gdyby to z tabletów i kompów okazało się zbyt wielkie.

Gdy wszystko związane z logo już poustawiamy, ważne aby zakończyć całą brawurową akcję kliknięciem przycisku Opublikuj w okolicach lewego górnego rogu ekranu. Jeśli tego nie zrobimy, wprowadzone zmiany nie zapiszą się 🙂

Jak zmienić logo w WordPressie? Ustawienia wielkości logo na telefonie

Ustawienie favicony (ikony witryny) w WordPressie

Druga rzecz, którą sobie ustawimy, to często zaniedbywana favicona, czyli mała ikonka, która pojawia się w pasku przeglądarki obok nazwy strony. Szczególnie przydatna, jeśli macie otwarte zawsze milion zakładek (tak jak ja :D), bo pozwala się szybciej zorientować co jest gdzie.

Aby ustawić faviconkę, klikamy opcję Site Icon (Ikona witryny) tuż poniżej ustawień, którymi zajmowaliśmy się przed chwilą:

Jak zmienić favicon (ikonę witryny) w WordPressie?

Tu pojawi się kolejny ekran z ustawieniami i na nim wybieramy opcję Wybierz ikonę witryny:

Ikona witryny (favicon) w WordPressie - jak zmienić faviconę?

Otworzy się Biblioteka mediów, którą już doskonale znamy, i do niej przerzucamy obrazek, który ma się stać faviconą.

Obrazek powinien być kwadratowy i choć na pasku przeglądarki wyświetli się malusi (16x16px), WordPress życzy sobie, aby załadować mu większą grafikę, najlepiej w rozmiarze 512×512 pikseli:

Ikona witryny (favicon) w WordPressie - jak wgrać faviconę?

Po załadowaniu obrazka zatwierdzamy wybór przyciskiem Wybierz (co za zaskoczenie! ;))

Ikona witryny (favicon) w WordPressie - jak ustawić faviconę?

I już gotowe!

W miejscu, w którym wcześniej był przycisk do załadowania ikonki, zobaczymy teraz jej podgląd i wizualizację tego, jak nasza favicona będzie się prezentować na pasku przeglądarki.

Ale wizualka nam w ogóle nie jest potrzebna, bo możemy też zwyczajnie spojrzeć na ten pasek u góry i nasza favicona już tam będzie się z dumą prężyła:

Ikona witryny (favicon) w WordPressie - wygląda ustawiona favicona?

Logo jest, faviconka jest, to jeszcze tylko kolory!

Jak zmienić kolory elementów na stronie na WordPressie

Po prawdzie na pytanie z powyższego nagłówka nie da się odpowiedzieć jednoznacznie, bo sposób zmiany kolorów będzie zależał od motywu. W jednym robi się to tak, w innym inaczej i wszystko tak naprawdę zależy od fantazji Twórców motywu.

Ponieważ jednak póki co wszyscy korzystamy z Astry, pokażę Wam, jak sobie poprzestawiać kolorki właśnie na niej.

Wskakujemy ponownie w Dostosuja znaną nam już ścieżką, czyli Kokpit -> Wygląd -> Dostosuj, po czym klikamy w opcję Global, czyli Ustawienia ogólne (powiedzmy, to moje własne tłumaczenie ;))

Jak zmienić kolory strony w WordPressie?

Tam pojawi się jeszcze więcej różnych opcji (bo Astra to mocarny motyw, nawet w wersji darmowej :)), ale nas interesuje Colors:

Gdzie zmienić kolory strony internetowej WordPress?

I tu, kiedy wreszcie wbijemy się w te kolory, możemy zobaczyć dwa miejsca do ustawienia kolorów:

  • Global Palette – tu można ustawić ogólną paletę kolorów dla strony. Bardzo to polecam, bo będą one potem dostępne na skróty na przykład przy pisaniu postów 🙂
    Jeśli w tym miejscu zmienimy niebieski na przykład na zielony, wszystkie niebieskie elementy na stronie staną się automatycznie zielone. To jest magia wykorzystywanego w WordPressie tak zwanego CSS (Cascading Style Sheet, ale w ogóle nie musicie znać tej nazwy), że zmienia za jednym zamachem wszystko co trzeba, a nie trzeba klikać każdego kawała tekściku albo każdego przycisku osobno, po kolei, jeden po drugim, i tak do emerytury 😉
  • Theme Color – oprócz ustawienia ogólnej palety barw dla strony, możemy osobno ustawić kolor dla poszczególnego typu elementów:
    ➡️ Accent, czyli elementy akcentowane
    ➡️ Links, czyli linki/hiperłącza
    ➡️ Heading (H1-H6), czyli nagłówki (od tych najwyższego rzędy, do tych najniszego
    ➡️ Body Text, czyli zwykły tekst
    ➡️ Borders, czyli obramowania
Jak zmienić kolory tekstów i linków w WordPressie?

Żeby zmienić kolor, wystarczy w niego kliknąć. Otworzy się paleta, po której możemy szurać pipetką i wybierać odpowiedni odcień. Jeśli potrzebujemy całkiem innego koloru, możemy go wybrać z tęczowej palety tuż poniżej.

Kolejny paseczek, ten pod tęczowym, służy z kolei do wybierania stopnia przezroczystości koloru. Im bardziej na lewo, tym kolor bardziej przezroczysty, a im bardziej na prawo – tym mniej.

Można także, zamiast błądzić pipetą po palecie barw, wpisać swój własny kolor w postaci symbolu, to znaczy w notacji heksadecymalnej – to ta, w której kolor jest przedstawiony jako krzyżyk, a po nim 6 literek lub cyferek. Będzie to trochę podchwytliwe, bo żeby wpisać swój kolor, trzeba wcześniej kliknąć ikonkę suwaczków tuż obok koloru. Moim zdaniem to o jeden zbędny krok za dużo i osobiście potwornie mnie to irytuje w codziennej pracy z WordPressem, ale co ja tam wiem 😀

Jak wybrać kolory dla strony w WordPressie?

Ja zamieniłam w mojej ogólnej palecie barw dla strony tylko jeden kolor – niebieski na limonkę, i już strona nabrała bardziej mojego charakteru:

Jak zmienić kolory w WordPressie? WordPress po zmianie kolorów

Niby drobiazg, ale w towarzystwie swoich kolorów na bank będzie się przyjemniej pracowało.

Na tym kończymy makijaże!

Wiem, że do dalszego grzebania w opcjach ładnościowych ciągnie, ale czas na dalsze upiększanie strony przyjdzie w module 7., więc na razie, po wykonaniu tego minimum, porzucamy temat. Logo jest, favicona jest, kolorki są, a reszta potem. I mówię serio, bo jak w tym teraz ugrzęźniecie, to Was koniec kursu zastanie 😉

Władujmy w tę stronę trochę tekstów i obrazków, to będzie nam ją znacznie łatwiej potem odpicować (oglądaliście kiedyś Pimp my Ride? My będziemy robić, ale wersję Pimp my Site ;))

A w kolejnej lekcji będziemy robić już to, od czego powinniśmy zacząć ten moduł (gdyby nie te dwie lekcje na nielegalu ;)) czyli poznamy się z jaśnie Gutenbergiem 🙂

Kawa dla WordPressa

Ten kurs jest i zawsze będzie dla Was DARMOWY,
bo wierzę wiem, że warto sobie pomagać ❤

Totalnie nie musisz za nic płacić, ale jeśli masz chęć, możesz postawić mi kawę
Wypiję ją za sukces Twojej strony!

Pytania, odpowiedzi i komentarze
Zwiń komentarze

Hej Edyta. Powiedz mi proszę o co chodzi z logo – przerzuciłam z telefonu na komputer, bo miałam wysłane na tel. I nie wyświetla się tak jak na telefonie tylko jest całe czarne z delikatnymi zarysowaniami mojego logo. Czy to z powodu formatu w jakim jest zrobione logo? Jest w png utworzone.

Hej! Rozumiem, że kiedy ustawiam logo dla urządzeń mobilnych i zaznaczam tablet albo telefon to wygląd podglądu po prawej stronie powinien się zmienić odpowiednio dla tych urządzeń? U mnie nic się nie dzieje, cały czas jest widok jak dla komputera, czy coś robię źle?

Edyta Woźniak (Administrator) 17 czerwca 2023 o 14:51

Tak powinnaś widzieć podgląd szerokości (mniej-więcej) jak na telefonie/tablecie. Może spróbuj w innej przeglądarce? 🙂

Edyta Woźniak (Administrator) 17 czerwca 2023 o 14:30

W niektórych przeglądarkach obrazów pliki png z przezroczystością tak się właśnie prezentują, ale nie ma się czym przejmować – na stronie będą wyglądać OK 🙂

Dziękuję bardzo. Mam nadzieję, że nie zostanie taki czarny bobok 😆😆😆

Napisz pytanie lub komentarz:

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

Scroll to Top