Przewodnik po Divi - szablon i kreator stron Wordpress w jednym

Co to jest Divi?

Divi to jeden z najpotężniejszych i najpopularniejszych kreatorów stron internetowych dla WordPressa. Jest to nie tylko szablon, ale także kompletny system budowania stron metodą „przeciągnij i upuść”, który eliminuje konieczność programowania. Dzięki niemu każdy – niezależnie od poziomu zaawansowania – może stworzyć profesjonalną stronę internetową bez znajomości kodowania.

Opracowany przez Elegant Themes, Divi oferuje szeroką gamę narzędzi umożliwiających budowanie responsywnych i estetycznych stron internetowych. Wyróżnia się bogatą biblioteką gotowych szablonów, modułów oraz intuicyjnym interfejsem wizualnym, który sprawia, że tworzenie witryn staje się prostsze i szybsze niż kiedykolwiek. Zobacz nasz powiązany artykuł pt.:”Szablony WordPress”

Dlaczego Divi jest popularnym wyborem?

Jeśli chcesz stworzyć stronę internetową bez znajomości kodowania, Divi to doskonały wybór. Dzięki intuicyjnemu interfejsowi, gotowym szablonom, nieograniczonym opcjom personalizacji i integracji z WooCommerce, pozwala szybko zaprojektować profesjonalną witrynę. Poniżej kilka jego głównych zalet:

– łatwość użytkowania – interfejs przeciągnij i upuść umożliwia edycję strony w czasie rzeczywistym.
– gotowe szablony – dostęp do setek profesjonalnych układów stron dla różnych branż.
– nieograniczone możliwości personalizacji – pełna kontrola nad układem, kolorami, czcionkami i efektami wizualnymi.
– kompatybilność z WooCommerce – idealne rozwiązanie do budowy sklepów internetowych.
– zintegrowane narzędzia SEO – poprawia widoczność strony w wyszukiwarkach.
– wsparcie i społeczność – dostęp do dokumentacji, forów i grup użytkowników Divi.

Dla kogo jest Divi?

Niezależnie od tego, czy dopiero zaczynasz swoją przygodę z WordPressem, czy tworzysz strony zawodowo, Divi dostosuje się do Twoich potrzeb. To narzędzie idealne dla początkujących, firm, agencji marketingowych i blogerów, oferując łatwość obsługi, elastyczność i pełną personalizację. Divi jest doskonały dla:

-początkujący użytkownicy – dzięki łatwemu interfejsowi Divi pozwala stworzyć stronę internetową bez znajomości kodowania.
-projektanci stron internetowych – Divi oferuje elastyczność, dzięki której można łatwo personalizować strony dla klientów.
-firmy i przedsiębiorcy – idealne rozwiązanie dla stron wizytówkowych, blogów firmowych i sklepów online.
-agencje marketingowe – dzięki Divi mogą tworzyć profesjonalne strony dla swoich klientów szybciej i efektywniej.
-blogerzy – możliwość tworzenia estetycznych i czytelnych blogów z intuicyjną nawigacją.

Potrzebujesz pomocy z WordPressem?

Skontaktuj się z nami!

Jakie rodzaje stron mogę zbudować z Divi?

Motyw Divi pozwala na stworzenie praktycznie każdego rodzaju strony internetowej. Możesz zaprojektować stronę firmową, bloga, sklep internetowy, a także portfolio dla fotografów i freelancerów. Świetnie sprawdzi się w branżach takich jak restauracje, studia fitness, salony piękności, agencje internetowe, a nawet serwisy doradców ślubnych czy wizytówki firmowe. Dzięki integracji z WooCommerce Divi to także doskonałe rozwiązanie dla sklepów online.

Instalacja i pierwsze kroki z Divi

Jak kupić i pobrać Divi?

Divi nie jest dostępne w oficjalnym repozytorium WordPressa, ponieważ jest to produkt premium. Aby go pobrać, należy dokonać zakupu bezpośrednio na stronie Elegant Themes.

Kroki zakupu i pobrania Divi:

1️⃣ Przejdź na stronę Elegant Themes.
2️⃣ Kliknij przycisk „Get Started” i wybierz jeden z dostępnych planów:

• Plan roczny ($89/rok) – dostęp do wszystkich produktów Elegant Themes z rocznym wsparciem i aktualizacjami.
• Plan 10 letni ($249 jednorazowo) – 10 lat dostępu do Divi oraz aktualizacji.
  3️⃣ Po dokonaniu płatności utwórz konto użytkownika i przejdź do sekcji „Downloads”.
  4️⃣ Pobierz plik Divi.zip, który później zainstalujesz w WordPressie.

Czy Divi ma darmową wersję?
Nie, Divi nie posiada darmowej wersji, ale Elegant Themes oferuje 30-dniową gwarancję zwrotu pieniędzy – możesz testować Divi bez ryzyka!

Interfejs użytkownika i podstawowe funkcje Divi

Divi to kreator stron internetowych, który wyróżnia się intuicyjnym interfejsem wizualnym oraz szeroką gamą modułów do budowy stron. Dzięki metodzie przeciągnij i upuść możesz w czasie rzeczywistym edytować swoją stronę, bez potrzeby zagłębiania się w kod. W tej sekcji poznasz kluczowe elementy interfejsu Divi oraz sposób pracy z jego edytorem.

Panel Divi w WordPress – co znajdziesz w ustawieniach?

Po zainstalowaniu Divi w WordPressie pojawia się nowa zakładka w menu bocznym: Divi. To centrum zarządzania ustawieniami i funkcjami kreatora. Oto najważniejsze sekcje:

• opcje motywu (Theme Options) – pozwala skonfigurować logo, kolory, czcionki, integracje i optymalizację strony.
• kreator motywu (Theme Builder) – umożliwia edycję globalnych sekcji strony, takich jak nagłówek i stopka.
• personalizacja motywu (Customizer) – zawiera szczegółowe ustawienia wyglądu, m.in. typografii i układu.
• biblioteka Divi (Divi Library) – miejsce, w którym możesz zapisywać i ponownie używać własnych układów stron.
• role edytora (Role Editor) – przydatne dla zespołów zarządzających stroną, pozwala kontrolować dostęp do różnych funkcji Divi.

💡 Wskazówka: Jeśli pracujesz nad wieloma stronami, warto zapisywać własne układy w Bibliotece Divi, co pozwoli zaoszczędzić czas przy kolejnych projektach.

Jak działa edytor wizualny Divi?

Tryb przeciągnij i upuść

Jednym z największych atutów Divi jest edytor wizualny (Visual Builder), który umożliwia edycję stron w trybie rzeczywistym. W praktyce oznacza to, że widzisz dokładnie to, co otrzyma użytkownik końcowy. Możesz przeciągać elementy, zmieniać ich kolejność, dodawać nowe moduły oraz dostosowywać wygląd każdej sekcji bez konieczności przechodzenia do zaplecza WordPressa.

Struktura strony w Divi

Każda strona w Divi składa się z trzech głównych poziomów organizacji treści:

1. Sekcje (Sections) – największe bloki, które dzielą stronę na główne części (np. nagłówek, treść, stopka).
2. Wiersze (Rows) – znajdują się wewnątrz sekcji i pomagają organizować układ strony, np. w kolumny.
3. Moduły (Modules) – elementy, które umieszczasz na stronie, np. nagłówki, tekst, obrazy, przyciski czy formularze kontaktowe.

💡 Przykład: Jeśli tworzysz stronę dla restauracji, możesz umieścić sekcję „Menu”, w niej wiersz z trzema kolumnami i w każdej kolumnie dodać moduł z opisem potrawy oraz zdjęciem.

Tworzenie i modyfikowanie stron

Dodawanie nowej strony: Przejdź do Strony > Dodaj nową i kliknij przycisk Użyj Divi Buildera.
Wybór układu: Możesz rozpocząć od pustej strony lub skorzystać z gotowych układów.
Edycja na żywo: Kliknij na dowolny element i zmieniaj jego wygląd w edytorze wizualnym.
Zarządzanie sekcjami: Dodawaj, usuwaj i przesuwaj sekcje, wiersze oraz moduły, dostosowując układ strony.
Podgląd responsywności: Sprawdź, jak strona wygląda na różnych urządzeniach (komputer, tablet, telefon).

Przeczytaj również nasz artykuł pt.„Jak zainstalować WordPress?”

Tworzenie stron w Divi – praktyczny poradnik

Dzięki gotowym szablonom, modułom i intuicyjnemu edytorowi wizualnemu, możesz szybko stworzyć atrakcyjną stronę internetową. W tej sekcji poznasz praktyczne wskazówki dotyczące tworzenia i edycji stron w Divi.

Korzystanie z gotowych szablonów i układów

Divi oferuje bogatą bibliotekę gotowych układów stron, które możesz dostosować do własnych potrzeb. To doskonałe rozwiązanie, jeśli chcesz szybko uruchomić stronę bez konieczności projektowania wszystkiego od zera.

Jak załadować gotowy szablon?

1. Przejdź do Strony > Dodaj nową w panelu WordPress.
2. Kliknij Użyj Divi Buildera.
3. Wybierz opcję Przeglądaj układy.
4. Przeglądaj setki dostępnych szablonów według kategorii (np. biznes, restauracje, portfolio).
5. Wybierz układ i kliknij Użyj tego układu.

Zalety gotowych układów:
– oszczędność czasu – nie musisz projektować strony od zera.
– profesjonalny wygląd – wszystkie układy są zoptymalizowane pod kątem UX i SEO.
– możliwość pełnej personalizacji – możesz zmieniać kolory, czcionki, obrazy i układ elementów.

Moduły Divi – kluczowe elementy strony

Divi działa na zasadzie modułowej budowy, co oznacza, że możesz dodawać różne elementy do swojej strony w postaci modułów. W zależności od tego, jaką stronę tworzysz, możesz używać różnych modułów do budowania jej struktury.

Najważniejsze moduły Divi

• tekst i obrazy – podstawowe elementy treści, które możesz dowolnie edytować.
• suwaki i karuzele – pozwalają na dynamiczne wyświetlanie obrazów i treści.
• formularze kontaktowe – umożliwiają użytkownikom łatwy kontakt z Tobą.
• przyciski CTA (Call to Action) – zachęcają użytkowników do wykonania określonych działań (np. „Kup teraz”).
• galerie zdjęć i wideo – idealne dla stron fotograficznych, blogów i portfolio.
• licznik postępu – świetne rozwiązanie do prezentowania statystyk i celów.
• tabela cenowa – idealna dla stron oferujących różne pakiety usług.
  

Jak dodać moduł do strony?

1. Kliknij ikonę „+” w edytorze Divi.
2. Wybierz Dodaj moduł.
3. Wybierz interesujący Cię moduł z listy.
4. Dostosuj jego wygląd i treść według własnych preferencji.

💡 Pro tip: Możesz zapisywać własne ustawienia modułów i używać ich w innych sekcjach strony, co znacznie przyspiesza pracę nad witryną.

Tworzenie i modyfikowanie stron

Aby dodać nową stronę wykonaj poniższe kroki:

1. Przejdź do Strony > Dodaj nową.
2. Wybierz opcję Użyj Divi Buildera.
3. Zdecyduj, czy chcesz:

• rozpocząć budowę od zera – pełna swoboda w projektowaniu strony.
• załadować gotowy układ – szybki sposób na stworzenie strony.
• kopiować układ z istniejącej strony – idealne do tworzenia spójnych podstron.

Edycja strony w trybie wizualnym

Po załadowaniu układu możesz dowolnie edytować sekcje, wiersze i moduły.
1. Kliknij na dowolny element, aby zmienić jego treść lub wygląd.
2. Przeciągaj i przesuwaj sekcje, aby dostosować układ strony.
3. Dostosuj kolory, czcionki i efekty animacji w ustawieniach modułu.

Optymalizacja strony stworzonej w Divi

Tworząc stronę internetową, nie wystarczy zadbać tylko o jej wygląd – kluczowe jest także zapewnienie szybkiego działania, dobrej widoczności w wyszukiwarkach i ogólnej wydajności. Divi, choć jest potężnym narzędziem, może wymagać dodatkowej optymalizacji, aby strona ładowała się szybko i działała bezproblemowo. W tej sekcji dowiesz się, jak zoptymalizować stronę w Divi pod kątem wydajności i SEO.

Jak sprawić, by strona w Divi działała szybciej?

Szybkość ładowania strony to jeden z najważniejszych czynników wpływających na doświadczenie użytkownika (UX) i pozycjonowanie w Google. Divi, choć bogaty w funkcje, może generować dodatkowe obciążenie dla serwera. Oto kilka skutecznych sposobów na poprawę wydajności strony opartej na Divi.

1. Włącz opcję „Dynamiczne CSS” i optymalizację zasobów

Divi oferuje wbudowane narzędzia optymalizacyjne, które pomagają przyspieszyć stronę. Znajdziesz je w ustawieniach:
Divi > Opcje motywu > Wydajność
Włącz Dynamiczne CSS, które redukuje zbędne style
Włącz Ładowanie zasobów tylko wtedy, gdy są potrzebne

2. Zoptymalizuj obrazy przed ich wgraniem

Obrazy o dużej rozdzielczości mogą znacznie spowalniać stronę. Aby temu zapobiec:
Kompresuj obrazy przed dodaniem do WordPressa (np. za pomocą TinyPNG lub ShortPixel)
Używaj nowoczesnych formatów, takich jak WebP zamiast JPG/PNG
Skorzystaj z wtyczek do optymalizacji obrazów, np. Smush, Imagify

3. Włącz pamięć podręczną (caching)

Dobre zarządzanie cache przyspiesza ładowanie stron użytkownikom powracającym. Do tego celu warto używać wtyczek:
WP Rocket – najlepsza płatna wtyczka cache
W3 Total Cache lub WP Super Cache – darmowe alternatywy

4. Minimalizuj i łącz pliki CSS i JavaScript

Divi generuje dość dużo kodu CSS i JS, co może spowolnić stronę. Możesz:
Włączyć opcję minimalizacji CSS i JS w ustawieniach wydajności Divi
Użyć wtyczki Autoptimize, która dodatkowo łączy i kompresuje pliki

5. Wybierz szybki hosting

Nie każda firma hostingowa oferuje odpowiednie parametry dla stron Divi. Warto poczytać opinie i wybrać najlepszy i sprawdzony hosting. Unikaj tanich hostingów współdzielonych – często spowalniają stronę!

Czy Divi ma słabe strony?

Mimo licznych zalet, Divi nie jest narzędziem idealnym i ma kilka wad, które warto rozważyć przed wyborem tego kreatora. Jednym z głównych minusów jest jego zasobożerność – strony oparte na Divi mogą ładować się wolniej, jeśli nie zostaną odpowiednio zoptymalizowane. Kolejnym ograniczeniem jest uzależnienie od ekosystemu Divi – jeśli zdecydujesz się na zmianę kreatora, przeniesienie strony może wymagać dodatkowej pracy. Niektórzy użytkownicy wskazują również, że krzywa uczenia się Divi jest dość stroma, szczególnie dla początkujących, którzy mogą początkowo czuć się przytłoczeni ilością opcji. Ponadto, Divi jest płatnym motywem, a brak darmowej wersji może odstraszać osoby szukające budżetowych rozwiązań.

FAQ – Najczęściej zadawane pytania o Divi

1. Jak zainstalować Divi w WordPress?
Aby zainstalować Divi, pobierz plik Divi.zip z Elegant Themes, a następnie przejdź do Wygląd > Motywy > Dodaj nowy w panelu WordPress. Kliknij Wyślij motyw na serwer, wybierz plik i kliknij Zainstaluj, a następnie Włącz.

2. Jak dodać Divi do WordPress?
Divi można dodać do WordPressa jako motyw lub wtyczkę. Pobierz plik z Elegant Themes i zainstaluj go w Wygląd > Motywy lub jako wtyczkę w Wtyczki > Dodaj nową (w przypadku Divi Buildera).

3. Jak skopiować stronę w Divi?
Aby zduplikować stronę, otwórz Strony > Wszystkie strony, znajdź stronę, którą chcesz skopiować, i kliknij Opcje Divi > Zduplikuj stronę. Możesz także użyć wtyczki Duplicate Post.

4. Jak edytować motyw Divi w WordPress?
Edytuj motyw, przechodząc do Wygląd > Personalizacja lub korzystając z Divi Buildera na stronie. Możesz zmieniać układy, kolory, czcionki i inne ustawienia wizualne bez kodowania.

5. Jak używać Divi w WordPress?
Aby korzystać z Divi, przejdź do Strony > Dodaj nową i kliknij Użyj Divi Buildera. Wybierz gotowy szablon lub zacznij od zera, przeciągając moduły i edytując treść w trybie wizualnym.