Jak pracować ze stronami w WordPress i Divi: Kompletny przewodnik krok po kroku

WordPress napędza ponad 43% wszystkich stron internetowych — i nie bez powodu. Jego intuicyjny interfejs, ogromny ekosystem wtyczek i elastyczne możliwości zarządzania treścią sprawiają, że jest to CMS z wyboru dla wszystkich, od niezależnych blogerów po przedsiębiorstwa na poziomie korporacyjnym. Kiedy połączysz WordPress z motywem Divi firmy Elegant Themes, odblokowujesz wizualny konstruktor typu „przeciągnij i upuść”, który pozwala projektować wspaniałe, profesjonalne strony bez pisania choćby jednej linii kodu.

W tym kompleksowym przewodniku dowiesz się dokładnie, jak tworzyć, dostosowywać, organizować i publikować strony w WordPress za pomocą Divi Builder. Niezależnie od tego, czy budujesz swoją pierwszą stronę internetową, czy ulepszasz istniejącą, ten samouczek obejmuje wszystko, co musisz wiedzieć.

Czym są strony w WordPress? (i jak różnią się od postów)

Zanim przejdziemy do technicznych kroków, ważne jest zrozumienie, czym dokładnie jest strona WordPress — i jak różni się od wpisu na blogu.

Strony są strukturalnym fundamentem Twojej witryny. Zawierają zawartość, która nie zmienia się często i nie musi być kategoryzowana ani oznaczana tagami. Pomyśl o swoim O nas, Kontakt, Usługi lub Stronie głównej — to wszystkie klasyczne przykłady stron WordPress.

Zrozumienie tego rozróżnienia pomaga w podejmowaniu mądrzejszych decyzji dotyczących organizacji i prezentacji zawartości.

Wymagania wstępne: co musisz mieć przed rozpoczęciem

Aby postępować zgodnie z tym przewodnikiem, upewnij się, że masz następujące elementy:

• Aktywną instalację WordPress w niezawodnym środowisku hostingowym
• Motyw Divi zainstalowany i aktywowany (dostępny z Elegant Themes)
• Dostęp administratora do panelu WordPress
• Podstawową wiedzę na temat struktury i celów Twojej witryny

Jeśli nadal konfigurujesz swoje środowisko hostingowe, rozważ VPS Hosting od AlexHost — wysokowydajne, skalowalne rozwiązanie, które daje Ci pełny dostęp root, dedykowane zasoby i elastyczność do uruchamiania WordPress z optymalną szybkością. W przypadku mniejszych projektów lub osobistych stron, Hosting Web Współdzielony jest przystępną cenowo i przyjazną dla początkujących alternatywą, która jest w pełni kompatybilna z WordPress.

Krok 1: Zaloguj się do pulpitu nawigacyjnego WordPress

Zacznij od otwarcia preferowanej przeglądarki internetowej i przejścia do panelu administracyjnego WordPress. Domyślny adres URL to:

http://yourdomain.com/wp-admin

Wpisz swoją nazwę użytkownika i hasło, a następnie kliknij Zaloguj się. Wyląduj na pulpicie nawigacyjnym WordPress — centralnym panelu sterowania całą witryną.

> Wskazówka profesjonalisty: Jeśli zarządzasz wieloma witrynami WordPress lub potrzebujesz bardziej usprawnionego doświadczenia administracyjnego, rozważ użycie VPS z cPanel do scentralizowanego zarządzania serwerem i witryną z jednego, intuicyjnego interfejsu.

Krok 2: Utwórz nową stronę WordPress

Po wejściu na pulpit nawigacyjny, wykonaj następujące kroki, aby utworzyć nową stronę:

1. W menu nawigacyjnym po lewej stronie zlokalizuj i kliknij na Strony
2. Kliknij Dodaj nową na górze listy Stron (lub użyj skrótu + Nowa > Strona w górnym pasku administratora)
3. Zostaniesz przeniesiony do edytora bloków WordPress (Gutenberg)

Dodawanie tytułu i podstawowej zawartości

• Kliknij na pole "Dodaj tytuł" na górze i wpisz nazwę swojej strony (np. *O nas*, *Kontakt*, *Usługi*)
• W obszarze zawartości poniżej możesz dodawać bloki tekstu, obrazy, nagłówki, przyciski i inne elementy za pomocą edytora bloków Gutenberg
• Użyj skrótu "/" w edytorze, aby szybko wyszukać i wstawić dowolny typ bloku

Na tym etapie pracujesz ze standardowym edytorem WordPress. Jednak jeśli chcesz zaawansowanego dostosowania wizualnego — i używasz Divi — będziesz chciał aktywować Divi Builder w następnym kroku.

Krok 3: Aktywuj i używaj Divi Builder

Divi Builder przekształca standardowy edytor WordPress w potężne, wizualne środowisko projektowania drag-and-drop. Oto jak je włączyć i używać:

Włączanie Divi Builder

Po otwarciu strony w edytorze zobaczysz wyraźny przycisk w górnej części obszaru zawartości:

“Enable Divi Builder” — kliknij go.

WordPress wyświetli Ci trzy opcje startowe:

Wybierz opcję, która najlepiej pasuje do Twojego projektu i kliknij Start Building.

Zrozumienie struktury Divi Builder

Przed dodaniem zawartości warto zrozumieć, jak Divi organizuje hierarchię układu:

Section
  └── Row
        └── Column
              └── Module

• Sekcje to największe kontenery — rozciągają się na pełną szerokość strony
• Wiersze znajdują się wewnątrz sekcji i definiują strukturę kolumn (1, 2, 3 kolumny itp.)
• Kolumny to poszczególne podziały pionowe w wierszu
• Moduły to rzeczywiste elementy zawartości (tekst, obrazy, przyciski, formularze itp.)

Krok 3a: Dodawanie sekcji i wierszy

1. Kliknij niebieski przycisk “+” na dole kanwy, aby dodać nową Sekcję
2. Wybierz typ sekcji: Regular, Fullwidth lub Specialty
3. Wewnątrz sekcji kliknij przycisk “+”, aby dodać Wiersz
4. Wybierz preferowany układ kolumn (np. 1/2 + 1/2 dla projektu dwukolumnowego)

Krok 3b: Dodawanie modułów

Moduły to bloki budujące zawartość każdej strony Divi. Aby dodać jeden:

1. Kliknij szary przycisk “+” wewnątrz kolumny
2. Pojawi się biblioteka modułów — przeglądaj lub wyszukaj potrzebny moduł
3. Kliknij na moduł, aby wstawić go do układu

Powszechnie używane moduły Divi obejmują:

• Text Module — dla akapitów, nagłówków i sformatowanej kopii
• Image Module — dla zdjęć, grafik i ilustracji
• Button Module — dla CTA i linków nawigacyjnych
• Slider Module — dla karuzeli obrazów bohaterskich
• Contact Form Module — do przechwytywania potencjalnych klientów i zapytań
• Blurb Module — dla pól funkcji ikona + tekst
• Video Module — dla osadzonej zawartości wideo
• Testimonial Module — dla dowodów społecznych i opinii
• Code Module — dla niestandardowych fragmentów HTML, CSS lub JavaScript

Krok 3c: Dostosowywanie modułów

Kliknij ikonę ołówka (edycji) na dowolnym module, aby otworzyć jego panel ustawień. Ustawienia są zorganizowane w trzy karty:

1. Karta Zawartość

Skonfiguruj rzeczywistą zawartość modułu — tekst, obrazy, linki, etykiety przycisków, pola formularza itp.

2. Karta Projekt

Kontroluj wygląd wizualny modułu:

• Typografia — rodzina czcionki, rozmiar, waga, wysokość linii, odstęp między literami
• Kolory — kolory tła, tekstu, obramowania, ikon
• Odstępy — kontrola wypełnienia i marginesu (z responsywnymi punktami przerwania)
• Obramowania i cienie — zaokrąglone narożniki, cienie pudełka, style obramowania
• Rozmiary — szerokość, wysokość, ograniczenia maksymalnej szerokości

3. Karta Zaawansowana

Uzyskaj dostęp do ustawień na poziomie programisty:

• Klasy CSS i identyfikatory — dla niestandardowych haków stylizacyjnych
• Niestandardowy CSS — napisz CSS specyficzny dla modułu bezpośrednio
• Widoczność — pokaż/ukryj moduł na pulpicie, tablecie lub urządzeniu mobilnym
• Animacje — efekty animacji wejścia i timing

> Wskazówka projektowania: Responsywne kontrolki Divi pozwalają ustawić różne wartości dla widoków pulpitu, tabletu i urządzenia mobilnego. Zawsze podgląd strony na wszystkich trzech punktach przerwania przed opublikowaniem.

Krok 4: Organizuj swoje strony za pomocą hierarchii

W miarę jak twoja witryna rośnie, utrzymanie porządku stron staje się krytyczne zarówno dla doświadczenia użytkownika, jak i SEO. WordPress obsługuje hierarchie stron nadrzędnych i podrzędnych, które pozwalają zagnieżdżać powiązane strony pod wspólną stroną nadrzędną.

Tworzenie relacji strony nadrzędnej i podrzędnej

1. Podczas edycji strony spójrz na prawy pasek boczny w edytorze bloków
2. Kliknij na Stronę, aby rozwinąć panel ustawień strony
3. Znajdź sekcję Atrybuty strony
4. W obszarze Strona nadrzędna kliknij menu rozwijane i wybierz stronę, którą chcesz przypisać jako nadrzędną

Przykład hierarchii:

Services (parent)
  ├── Web Design (child)
  ├── SEO Consulting (child)
  └── Content Marketing (child)

Ta struktura tworzy czystsze adresy URL (np. yoursite.com/services/web-design/) i pomaga wyszukiwarkom lepiej zrozumieć architekturę treści twojej witryny.

Krok 5: Dodaj strony do menu nawigacyjnego

Utworzenie strony nie powoduje automatycznego dodania jej do nawigacji witryny. Musisz ją ręcznie dodać do menu.

1. Na pulpicie nawigacyjnym WordPress przejdź do Wygląd > Menu
2. Wybierz istniejące menu lub kliknij Utwórz nowe menu
3. W panelu Strony po lewej stronie zaznacz pole obok stron, które chcesz dodać
4. Kliknij Dodaj do menu
5. Przeciągnij i upuść elementy menu, aby je zmienić kolejność lub utworzyć rozwijane podmenu
6. Kliknij Zapisz menu po zakończeniu

> Najlepsza praktyka: Utrzymuj główne menu nawigacyjne skoncentrowane na najważniejszych stronach. Dążyć do maksymalnie 5–7 elementów najwyższego poziomu, aby uniknąć przytłoczenia odwiedzających.

Krok 6: Konfiguracja ustawień strony dla SEO i wydajności

Przed opublikowaniem poświęć chwilę na konfigurację kluczowych ustawień strony, które wpływają zarówno na widoczność w wyszukiwarkach, jak i na doświadczenie użytkownika.

Permalink (URL Slug)

• Na pasku bocznym edytora bloków znajdź sekcję Permalink
• Edytuj slug URL, aby był krótki, opisowy i bogaty w słowa kluczowe
• Unikaj automatycznie generowanych slugów z numerami (np. /?p=123)
• Dobry przykład: yoursite.com/about-us/
• Zły przykład: yoursite.com/?page_id=47

Obraz wyróżniony

• Przypisz odpowiedni obraz wyróżniony, aby poprawić wygląd udostępniania w mediach społecznościowych i spójność wizualną

Szablon strony

• Niektóre motywy (w tym Divi) oferują wiele szablonów stron (np. pełna szerokość, bez paska bocznego)
• Wybierz odpowiedni szablon w sekcji Atrybuty strony > Szablon

Metadane SEO

• Jeśli używasz wtyczki SEO, takiej jak Yoast SEO lub Rank Math, wypełnij:
• Tytuł meta — uwzględnij swoje główne słowo kluczowe
• Opis meta — napisz atrakcyjne streszczenie o długości 150–160 znaków
• Słowo kluczowe fokusowe — ustaw docelowy termin wyszukiwania

Krok 7: Zapisz, podejrzyj i opublikuj swoją stronę

Gdy będziesz zadowolony z projektu i ustawień strony, nadszedł czas, aby przejść na żywo.

Opcje zapisywania w Divi Builder

W prawym górnym rogu interfejsu Divi Builder znajdziesz:

• Save Draft — zapisuje twoją pracę bez udostępniania jej publicznie
• Preview — otwiera podgląd na żywo twojej strony w nowej karcie
• Publish/Update — udostępnia stronę na żywo na twojej witrynie

Publikowanie z edytora bloków

Jeśli wyjdziesz z Divi Builder i powrócisz do standardowego edytora bloków:

1. Kliknij Save Draft, aby zapisać bez publikowania
2. Kliknij Preview, aby przejrzeć, jak strona wygląda na froncie
3. Kliknij Publish, gdy będziesz gotowy, aby przejść na żywo
4. Potwierdź, klikając Publish ponownie w panelu potwierdzenia

> Ważne: Zawsze podejrzyj swoją stronę zarówno na komputerze, jak i na urządzeniach mobilnych przed opublikowaniem. Narzędzia responsywnego projektowania Divi są potężne, ale ręczny przegląd wyłapuje problemy, które narzędzia zautomatyzowane pomijają.

Zaawansowane porady: Maksymalne wykorzystanie WordPress i Divi

Użyj Divi Theme Builder do globalnych szablonów

Divi Theme Builder (dostępny w Divi 4.0+) pozwala tworzyć globalne szablony dla nagłówków, stopek i określonych typów postów/stron. Zapewnia to spójność projektu na całej stronie bez ręcznego edytowania każdej strony.

Zapisuj układy w bibliotece Divi

Jeśli zaprojektowałeś sekcję lub układ, który Ci się podoba, zapisz go w bibliotece Divi do ponownego użytku na innych stronach. To dramatycznie przyspiesza Twój przepływ pracy.

Włącz testowanie A/B Divi (Split Testing)

Divi zawiera wbudowane narzędzie split testingu, które pozwala testować różne wersje modułu, sekcji lub strony względem siebie, aby zobaczyć, która działa lepiej — nieocenione dla optymalizacji współczynnika konwersji.

Zabezpiecz swoją stronę za pomocą SSL

Jeśli jeszcze tego nie zrobiłeś, upewnij się, że Twoja strona WordPress działa na HTTPS. Certyfikat SSL jest niezbędny dla zaufania użytkowników, bezpieczeństwa danych i rankingów Google. AlexHost oferuje Certyfikaty SSL, które są łatwe do zainstalowania i kompatybilne ze wszystkimi środowiskami hostingu WordPress.

Użyj niestandardowej domeny

Profesjonalna nazwa domeny wzmacnia Twoją markę i poprawia współczynnik kliknięć w wynikach wyszukiwania. Możesz zarejestrować i zarządzać swoją domeną bezpośrednio za pośrednictwem usługi rejestracji domen AlexHost, z obsługą setek rozszerzeń TLD.

Rozwiązywanie typowych problemów

Podsumowanie

Praca ze stronami w WordPress przy użyciu motywu Divi daje Ci niezwykle potężny i elastyczny zestaw narzędzi do budowania profesjonalnych stron internetowych — bez konieczności kodowania. Postępując zgodnie z krokami zawartymi w tym przewodniku, możesz:

• Tworzyć dobrze ustrukturyzowane strony WordPress z jasnymi tytułami i treścią
• Projektować wizualnie atrakcyjne układy za pomocą konstruktora drag-and-drop Divi
• Organizować swoje strony w logiczne hierarchie dla lepszego UX i SEO
• Konfigurować kluczowe ustawienia, takie jak linki trwałe, metadane i szablony
• Publikować z pewnością siebie po podglądzie na wszystkich typach urządzeń

Kombinacja mocy zarządzania treścią WordPress i możliwości projektowania wizualnego Divi jest trudna do pokonania. A dzięki odpowiedniej infrastrukturze hostingowej, Twoja strona będzie szybka, bezpieczna i gotowa do skalowania.

W przypadku zasobochłonnych projektów WordPress, stron o wysokim ruchu lub aplikacji wymagających dedykowanej mocy obliczeniowej, zapoznaj się z Serwerami Dedykowanymi AlexHost — oferującymi sprzęt klasy enterprise, pełną kustomizację serwera i maksymalną wydajność dla wymagających obciążeń.

*Gotowy do budowania swojego następnego projektu WordPress? Zacznij od solidnych podstaw — wybierz odpowiedni hosting, zainstaluj Divi i postępuj zgodnie z tym przewodnikiem, aby tworzyć strony, które wyglądają świetnie i plasują się jeszcze lepiej.*