Jak tworzyć strony internetowe w builderze Divi to kompleksowy przewodnik, który przedstawi kolejne etapy budowy witryny od podstaw aż po zaawansowane integracje.
Przygotowanie środowiska i instalacja
Przed rozpoczęciem pracy niezwykle istotne jest przygotowanie odpowiedniego środowiska. Najpierw zainstaluj WordPress na serwerze lub lokalnym środowisku deweloperskim. Po udanym wdrożeniu zaloguj się do panelu administracyjnego, przejdź do sekcji Wygląd → Motywy i dodaj motyw Divi. Następnie aktywuj motyw oraz w razie potrzeby doinstaluj wtyczkę Divi Builder, która rozszerza możliwości projektowania.
- Krok 1: Pobranie pliku ZIP motywu Divi z oficjalnej strony Elegant Themes.
- Krok 2: Przejście do Kokpitu WordPress i wysłanie pliku w zakładce Wygląd → Motywy → Dodaj nowy.
- Krok 3: Aktywacja motywu i weryfikacja licencji Elegant Themes.
- Krok 4: Instalacja wtyczek rekomendowanych przez Divi, m.in. Bloom (newsletter) i Monarch (social media).
Po zakończonym procesie masz gotowe środowisko, w którym możesz rozpocząć tworzenie strony przy użyciu wizualny edytor Divi.
Konstrukcja strony krok po kroku
Budowa witryny w Divi opiera się na trzech podstawowych elementach: sekcjach, wierszach i kolumnach. Na ich bazie osadzasz moduły, które definiują treść i funkcje strony.
Struktura: sekcje, wiersze i kolumny
Sekcje są kontenerami najwyższego poziomu, w których umieszczasz wiersze. Wiersze dzielą się na kolumny o różnych proporcjach szerokości. Możesz tworzyć układy jedno-, dwukolumnowe lub bardziej złożone. Divi oferuje gotowe układy siatek, ale umożliwia także ręczne dostosowanie szerokości kolumn poprzez przeciąganie suwaków.
Dodawanie i konfigurowanie modułów
Moduły są kluczowymi blokami funkcjonalnymi. W Divi znajdziesz ponad 40 modułów, m.in. tekst, obraz, przycisk, formularz kontaktowy czy suwak. Aby dodać moduł, kliknij ikonę plusa w obrębie kolumny i wybierz odpowiedni rodzaj. Następnie w panelu ustawień zdefiniuj treść, styl i zaawansowane opcje.
- Moduł Tekst: pozwala na wstawianie akapitów, nagłówków i list; w edytorze tekstowym obsługuje formatowanie HTML.
- Moduł Obraz: umożliwia dodanie zdjęć lub grafik, z opcjami cieniowania, animacji wejścia i linkowania.
- Moduł Przyciski: generuje elementy CTA; możesz ustawić kolory, odstępy i efety hover.
- Moduł Formularz Kontaktowy: zbiera dane od odwiedzających, integruje się z zewnętrznymi usługami e-mail.
Dzięki intuicyjnemu systemowi podglądu możesz od razu zobaczyć efekt zmian i dostosować rozkład elementów w czasie rzeczywistym.
Personalizacja i zaawansowane funkcje
Divi oferuje rozbudowane możliwości personalizacja wyglądu za pomocą edytora stylów globalnych. W zakładce Divi → Opcje motywu możesz zdefiniować paletę kolorów, czcionki oraz wstępne parametry modułów.
Style globalne i biblioteka Divi
Biblioteka Divi pozwala zapisać wzorce sekcji, wierszy i modułów jako szablony. Dzięki temu możesz wielokrotnie wykorzystywać wcześniej stworzone layouty. Wystarczy, że umieścisz shortcode z biblioteki w dowolnym miejscu strony, a element pojawi się w identycznej formie.
Responsywność i kontrola urządzeń
Aby zapewnić właściwe wyświetlanie na różnych urządzeniach, skorzystaj z opcji widoczności w modółach. Możesz ukryć lub pokazać konkretne elementy dla wersji desktop, tablet, mobile. Dodatkowo w ustawieniach rozmiaru i odstępów dostępne są indywidualne suwakowe kontrolki dla każdej grupy urządzeń.
Optymalizacja wydajności i SEO
Dobrze zaprojektowana strona to nie tylko efektowna grafika, ale też szybkie wczytywanie oraz wysoka pozycja w wynikach wyszukiwania. Divi wspiera optymalizację, ale wymaga uzupełnienia o dodatkowe narzędzia.
- Użyj wtyczki do cache (np. WP Rocket, W3 Total Cache) oraz minifikacji plików CSS i JS.
- Zadbaj o wydajność obrazów – kompresuj pliki, stosuj format WebP oraz lazy loading.
- Skonfiguruj wtyczkę SEO (Yoast, Rank Math) i wygeneruj mapę strony XML.
- Dodaj dane strukturalne (schema.org) przy pomocy wtyczki lub ręcznie w polach Divi.
Warto również włączyć opcję dynamicznych stylów i skryptów w Divi, co zmniejszy ilość ładowanych zasobów tylko do tych wykorzystywanych na danej stronie.
Publikacja i integracje zewnętrzne
Po zakończeniu prac nad projektem czas na jego publikację i ewentualne połączenie z zewnętrznymi usługami.
Eksport i migracja
Jeśli chcesz przenieść stronę na inny serwer, skorzystaj z wbudowanego menedżera importu/eksportu Divi. Eksportuj pliki motywu oraz bibliotekę Divi, a następnie załaduj je w nowym środowisku. Dzięki temu zachowasz wszystkie szablony oraz ustawienia globalne.
Integracje z narzędziami marketingowymi
- Podłącz formularze do systemów mailingowych (Mailchimp, ActiveCampaign).
- Skonfiguruj płatności i sprzedaż online za pomocą WooCommerce i dedykowanych modułów Divi.
- Dodaj chatbota lub live chat (Tawk.to, LiveChat) poprzez kod w nagłówku lub w module HTML.
- Zintegruj analitykę Google Analytics i Pixel Facebooka, aby mierzyć konwersje i zachowanie użytkowników.
Dzięki temu Twoja strona stanie się nie tylko estetyczna, ale też funkcjonalna i skuteczna w działaniach marketingowych.
