![](https://stories.isu.pub/80217557/images/10_original_file_I0.jpg?width=720&quality=85%2C50)
4 minute read
Ładna strona WWW - wybierzmy szablon witryny
W ostatnim magazynie pokazaliśmy Wam, w jaki sposób stworzyć własną stronę WWW. Dzisiaj przejdziemy do jej wyglądu - wybierzemy i dostosujemy jeden z szablonów dostępnych na Wordpressie.
Biała strona - czy to jest to, czego oczekujemy od perfekcyjnego portfolio? Raczej nie. Dlatego w dzisiejszym artykule pokażę Wam, jak dostosować witrynę pod kątem wizualnym. Ostrzegam, artykuł jest długi, ale uwierzcie mi - to, co dzisiaj zrobimy odmieni naszą stronę o 180 stopni!
Advertisement
Na początek musimy wejść na platformę Wordpress i się na nią zalogować. Jeżeli już to zrobimy, jesteśmy gotowi do działania!
Przed nami żmudna praca - musimy poświęcić chwilę czasu na to, aby nasza strona zaczęła wyglądać. Rozpocznijmy od wybrania opcji "Motywy" z panelu po lewej stronie ekranu.
![](https://stories.isu.pub/80217557/images/11_original_file_I0.jpg?width=720&quality=85%2C50)
Wybieramy "Motywy"
GraFika
Zjeżdżamy na sam dół i klikamy przycisk "Show All Themes". Powinno nam się pojawić następujące okno:
![](https://stories.isu.pub/80217557/images/11_original_file_I1.jpg?width=720&quality=85%2C50)
Wybór motywu
GraFika
W pasek wyszukiwania wpisujemy frazę"feature:portfolio" oraz wybieramy"Darmowy".
![](https://stories.isu.pub/80217557/images/11_original_file_I2.jpg?width=720&quality=85%2C50)
Pasek wyszukiwania
GraFika
Wyszukajmy teraz motyw "Lodestar". To na nim skupimy się podczas tworzenia portfolio. Kliknijmy go, a następnie wybierzmy przycisk "Aktywuj ten motyw".
![](https://stories.isu.pub/80217557/images/11_original_file_I3.jpg?width=720&quality=85%2C50)
Motyw "Lodestar"
GraFika
![](https://stories.isu.pub/80217557/images/11_original_file_I4.jpg?width=720&quality=85%2C50)
Klikamy ten przycisk
GraFika
Okej. Najłatwiejsza część za nami. Teraz powróćmy do głównego okna programu i wybierzmy opcję "Dostosuj".
![](https://stories.isu.pub/80217557/images/11_original_file_I0.jpg?width=720&quality=85%2C50)
Wybieramy opcję "Dostosuj"
GraFika
I zaczynamy zabawę...
Dalsza część artykułu na następnej stronie. Dlaczego? Nadchodzi dużo pionowych elementów, w związku z czym cały widok po odwróceniu wirtualnej kartki ;).
![](https://stories.isu.pub/80217557/images/12_original_file_I0.jpg?width=720&quality=85%2C50)
Panel główny edycji motywu
GraFika
Tak wygląda główny ekran, na którym możemy dostosować naszą witrynę. Dlaczego jest to ucięte w pionie? Otóż to, co znajduje się po prawej stronie tego pola, to tylko podgląd naszej witryny. Moim zdaniem jest to niepotrzebne tutaj, a przydaje się tylko podczas edycji witryny.
Koniec tej męczarni z mega wąskim tekstem. Zabieramy się do pracy!
Pozwólcie, że nie będę opisywał kolejnych czynności, a tylko wstawię zdjęcia, w jaki sposób ustawić witrynę w danych oknach.
1. Tożsamość witryny
![](https://stories.isu.pub/80217557/images/13_original_file_I0.jpg?width=720&quality=85%2C50)
Tożsamość witryny
GraFika
W tym miejscu możemy dodać własne logo oraz opis witryny. Polecam opisy pisać małymi literami, gdyż wyglądają one atrakcyjniej na pasku strony.
Jeżeli posiadamy logo, odznaczamy"Wyświetlaj tytuł i opis witryny". Wtedy strona wygląda dużo lepiej.
2. Kolory i tło
![](https://stories.isu.pub/80217557/images/13_original_file_I1.jpg?width=720&quality=85%2C50)
Kolory i tło
GraFika
Wybierzmy jedną z palet klikając na "Palety", a następnie (po wybraniu palety) kliknijmy "Ręcznie" i wybierzmy interesujący nas kolor tła.
![](https://stories.isu.pub/80217557/images/13_original_file_I2.jpg?width=720&quality=85%2C50)
Kolory i tło
GraFika
3. Czcionki
![](https://stories.isu.pub/80217557/images/14_original_file_I0.jpg?width=720&quality=85%2C50)
Czcionki
GraFika
Zamieńmy domyślną czcionkę motywu nainteresujące nas fonty. Niestety, ale nie maich zbyt wiele do wyboru...
![](https://stories.isu.pub/80217557/images/14_original_file_I1.jpg?width=720&quality=85%2C50)
Czcionki
GraFika
4. Obrazek nagłówka
![](https://stories.isu.pub/80217557/images/14_original_file_I2.jpg?width=720&quality=85%2C50)
Obrazek nagłówka
GraFika
Czym jest obrazek nagłówka? To tło, na którym będzie prezentowane nasze logo. Jest ono przyciemnione, dzięki czemu nie zakłóca ono spójności naszej strony. W naszym przypadku wygląda to tak:
![](https://stories.isu.pub/80217557/images/14_original_file_I3.jpg?width=720&quality=85%2C50)
Strona WWW
GraFika
5. Menu
![](https://stories.isu.pub/80217557/images/15_original_file_I0.jpg?width=720&quality=85%2C50)
Menu
GraFika
Ze względu na to, że nie posiadamy żadnego menu, klikamy na przycisk "Stwórz nowe menu".
![](https://stories.isu.pub/80217557/images/15_original_file_I1.jpg?width=720&quality=85%2C50)
Menu
GraFika
![](https://stories.isu.pub/80217557/images/15_original_file_I2.jpg?width=720&quality=85%2C50)
Menu
GraFika
Gdy już to zrobiliśmy, wybieramy "Dodaj elementy".
![](https://stories.isu.pub/80217557/images/15_original_file_I3.jpg?width=720&quality=85%2C50)
Menu
GraFika
Elementy dodajemy klikając znaczek "+". Możemy je dowolnie edytować. My dodaliśmy tylko stronę główną oraz portfolio (projekty).
6. Content options
![](https://stories.isu.pub/80217557/images/16_original_file_I0.jpg?width=720&quality=85%2C50)
Content options
GraFika
To są tylko drobne, kosmetyczne poprawki. Zalecamy zaznaczenie tylko tych punktów, które są zaznaczone na grafice powyżej.
7. Ustawienia strony głównej.
W tym miejscu pomijamy dwie rubryki - "CSS", ponieważ nie możemy go edytować; oraz "Widgety". O tym w kolejnych numerach.
![](https://stories.isu.pub/80217557/images/16_original_file_I1.jpg?width=720&quality=85%2C50)
Ustawienia strony głównej
GraFika
Bardzo ważna informacja!
Wybierzmy "statyczną stronę". Dlaczego? Wygląda to o niebo lepiej po edycji kolejnych elementów.
8. Referencje
![](https://stories.isu.pub/80217557/images/17_original_file_I0.jpg?width=720&quality=85%2C50)
Referencje
GraFika
9. Portfolio
![](https://stories.isu.pub/80217557/images/17_original_file_I1.jpg?width=720&quality=85%2C50)
Portfolio
GraFika
Na dzisiaj tyle!
Dlaczego nic nie wspomniałem o "opcjach motywu"? O nich więcej w kolejnych numerach! Jest to temat rzeka, więc wkrótce dowiecie się o tym więcej.
Aktualnie nasza witryna wygląda następująco:
![](https://stories.isu.pub/80217557/images/17_original_file_I2.jpg?width=720&quality=85%2C50)
Aktualny wygląd naszej strony internetowej
GraFika
Przy okazji pragnę rozwiać wszelkie wątpliwości. Publikujemy tutaj podgląd witryny, ponieważ nie jest ona jeszcze opublikowana. Gdy ją opublikujemy, będzie ona widoczna dla Was! Na ten moment, gdy wejdziecie na adres magazynkg.wordpress.com, możecie dostrzec tam: "Something new is coming".