Jak stworzyć stronę internetową? [3/3]
Trzecia, finalna część poradnika tworzenia stron internetowych – „Jak stworzyć stronę internetową?”. Zobaczycie jak wygląda tworzenie stron w praktyce, krok po kroku.
Wszystkie 3 części tworzą poniekąd całość, więc warto uzupełnić wiedzę korzystając z pozostałych dwóch części w razie niejasności. Poradnik był stworzony przy użyciu motywu Kadence.
Tworzenie stron internetowych – elementy strony
Do tworzenia stron internetowych używam osobiście Gutenberga, ze względu na szybkość strony. W porównaniu z innymi, popularnymi narzędziami do tworzenia stron internetowych, takimi jak Elementor, Gutenberg wypada najlepiej. Co nie oznacza, że jest najłatwiejszy w obsłudze. Bo jednak jest nieco toporny. Postaram się opisać każdy krok jak najdokładniej.
- Edycja istniejących podstron – przy zakładaniu/instalacji naszej strony internetowej, jest automatycznie tworzony zestaw domyślnych podstron. Jedną z nich jest tzw. „Sample page”. Po polsku – przykładowa strona, na której zaczniemy przygodę z tworzeniem stron internetowych.
- Podgląd strony – w każdym momencie możemy podejrzeć jak nasza strona internetowa będzie się prezentować na poszczególnych urządzeniach.
- Ustawienia strony internetowej – każda podstrona może mieć własne ustawienia wyświetlania w motywie Kadence. Ustawienia dotyczące strony internetowej, którą aktualnie edytujemy znajdują się po prawej stronie, w górnym rogu.
Ustawienia możemy zmieniać, efekty wprowadzonych zmian można podejrzeć w nowym oknie, do czego namawiam przy jakichkolwiek modyfikacjach. Wygląd strony z poziomu panelu nie odzwierciedla tego, co zobaczymy w przeglądarce.
- Struktura elementów strony internetowej – każda strona internetowa posiada hierarchię elementów, według której wszystko jest wyświetlane w odpowiedniej kolejności.
- Edycja bloczków – każdy bloczek posiada pewne możliwości modyfikacji. Ustawienia każdego z bloczków możemy znaleźć w prawym górnym rogu pod ikonką zębatki.
- Usuwanie bloczków – oprócz dodawania bloczków, możemy je również usunąć.
- Czysta strona internetowa – na starcie będziemy mieć jedynie białą, pustą stronę, do której możemy dokładać tzw. bloczki. Są to elementy wizualnego tworzenia stron internetowych, drag&drop.
- Wtyczka rozszerzająca dostępne bloczki – do naszej strony internetowej dodamy również wtyczkę, która znacznie rozszerzy różnorodność naszych bloczków.
W tym celu, z menu po lewej stronie, w zakładce „Wtyczki” klikamy „Dodaj nową”.
Następnie w polu wyszukiwania po prawej stronie wpisujemy „kadence” i instalujemy „Gutenberg Blocks by Kadence Blocks”.
- Dodawanie wierszy „Row Layout” – bloczki kadence dają nam wiele możliwości modyfikacji poszczególnych bloczków. Jednym z kluczowych bloczków są „wiersze”, tzw. „Row Layout”. Z nich będziemy korzystać praktycznie wszędzie.
Wiersze mogą mieć różną ilość kolumn/sekcji, w zależności czego potrzebujemy.
- Oprócz ilości kolumn/sekcji, może też być różna szerokość dla poszczególnych kolumn/sekcji.
Ponadto, możemy również układać kolumny jedna nad drugą, zamiast obok siebie. Jest to przydatne przy urządzeniach mobilnych.
- Kolumny/Sekcje – do każdej sekcji/kolumny możemy dodawać kolejne bloczki, tworzyć unikatowe strony internetowe dzięki temu.
- Tło wiersza – każdy wiersz może mieć własne tło. Może to być jednolity kolor, gradient, obraz czy nawet film.
- Szerokość wiersza – możemy ustawiać szerokość wiersza. Głównym ustawieniem, z którego będziecie korzystać, to domyślne ustawienie, czyli nie zmieniamy nic. Albo „Pełna szerokość”, czyli pełna możliwa szerokość na każdym z urządzeń – komputer, tablet, telefon.
I w tym momencie muszę uczulić. Praktycznie każdy blok ma szerokość, należy zwracać uwagę na to ustawienie podczas edycji bloczków. Zwłaszcza, że ustawienia szerokości zawierają również wyrównania (do lewej, do prawej, wyśrodkowane) w wielu przypadkach.
Poniżej jest wyśrodkowany obrazek, który znajdzie się na samym środku sekcji, co możemy sprawdzić za pomocą poglądu.
Kilka linijek wyżej omawiałem „Pełną szerokość” wiersza, ale jak się przyjrzycie, to jest pewien problem. Otóż, treść jest również rozciągnięta do pełnej szerokości ekranu urządzenia, na którym jest wyświetlana strona internetowa. Jest też odpowiednie ustawienie, aby treść znajdowała się na środku strony, o określonej szerokości, podczas, gdy tło wiersza pozostaje na pełnej szerokości.
Opcja nazywa się „Use theme content inner width”, jeżeli nic nie zmieniamy w opcjach personalizacji strony, to szerokość, w której treść będzie zawarta wyniesie 1290 pixeli.
Jak stworzyć stronę internetową?
Po wstępie do tworzenia stron internetowych za pomocą WordPress i motywu Kadence, spróbujemy stworzyć stronę internetową krok po kroku na następnej stronie.
Sam wstęp powinien dać Wam już jakieś pojęcie, jak tworzone są strony internetowe na WordPress. Wiele zależy przede wszystkim od nas samych, naszego pomysłu, zaangażowania oraz wizji.