Interfejs Divi 5. Poznaj najważniejsze elementy Visual Buildera

W lutym 2026 roku odbyła się oficjalna premiera Divi 5. Wcześniej Elegant Themes przez wiele miesięcy udostępniał kolejne wersje testowe, stopniowo rozwijając i dopracowując nowy builder. Już wtedy było wiadomo, że będzie to największa zmiana od lat i rzeczywiście nowy interfejs znacząco różni się od Divi 4.Jeśli dopiero zaczynasz pracę z nowym builderem, potraktuj ten artykuł jako wprowadzenie do Divi 5 dla początkujących.

W artykule będę używać zarówno polskich, jak i angielskich nazw funkcji, ponieważ w zależności od ustawień Divi możesz spotkać się z obiema wersjami. Jeśli korzystasz z angielskiego interfejsu lub chcesz go włączyć, zrobisz to w Divi → Theme Options → General → Disable Translations. Więcej poradników znajdziesz w kategorii WordPress i Divi 5.

Dlaczego Divi 5 wygląda inaczej niż Divi 4?

Divi 4 opierał się na starszym podejściu, czyli shortcode'ach, które były mniej wygodne, a przede wszystkim mniej wydajne. Twórcy, czyli zespół Elegant Themes postanowili przebudować całkowicie rdzeń Divi, przechodząc na nowocześniejszą architekturę. 

Najważniejsze zmiany w Divi 5:

• nowy, przeprojektowany interfejs edytora
• lepsza responsywność i płynność pracy
• szybsze ładowanie i lżejszy kod
• nowe podejście do układów oparte na Flexbox i CSS Grid
• rozbudowany system zmiennych projektowych (variables) i presetów (presets)

Poznaj nowy sposób pracy 

Po tym, jak otworzysz edycję strony za pomocą Divi, pokaże Ci się całkiem nowy interfejs. Podzieliłam go na 4 części i postaram się, opisać co w nich znajdziesz. Pamiętaj, że pisząc ten wpis, nadal jest dużo aktualizacji i wygląd może się jeszcze zmienić o jakieś dodatkowe funkcjonalności, ale postaram się je wziąć pod uwagę w przyszłości.

Ustawienia ogólne (1)

Po lewej stronie znajdziesz narzędzia związane z projektowaniem strony, organizacją pracy oraz ustawieniami interfejsu Divi 5.

Narzędzia do projektowania:

• Plus (Add Layout) - umożliwia dodanie nowego układu do strony. Możesz skorzystać z gotowych layoutów z biblioteki Divi, własnych zapisanych projektów lub pomocy AI.
• Warstwy (Layers) - bardzo przydatna funkcja, otwiera rozwijaną strukturę Twojej strony, co ułatwia znalezienie konkretnego elementu (przydatne gdy masz wiele zagnieżdżonych warstw).
• Inspektor (Inspector)- wyświetla najważniejsze ustawienia aktualnie zaznaczonego elementu, dzięki czemu możesz szybciej wprowadzać zmiany bez przechodzenia do pełnego panelu ustawień.
• Zmienne globalne (Variables) - pozwalają zdefiniować kolory, fonty, odstępy i wiele innych wartości, które będą w Twoim projekcie używane najczęściej. Dzięki temu łatwiej zachować jednolity wygląd całej strony i wprowadzać zmiany w jednym miejscu.
• Menedżer stylów (Preset Manager) - umożliwia zapisywanie własnych stylów modułów, które można wielokrotnie wykorzystywać w całym projekcie. To świetny sposób na zachowanie spójności strony i przyspieszenie pracy.

Ustawienia dotyczące organizacji pracy:

• Menedżer stron (Page Manager) - umożliwia szybkie przechodzenie między stronami i szablonami podczas pracy w Divi 5.
• Centrum poleceń (Command Center) - to wyszukiwarka dostępna w Divi 5, która pozwala szybko odnaleźć ustawienia, moduły i funkcje bez konieczności ręcznego przeszukiwania panelu.
• Widok szkieletowy (Wireframe view) - znany z Divi 4, widok struktury strony w formie sekcji, wierszy i modułów.

Kolejne 3 ikony dotyczą trybów edycji:

• Ikony akcji po najechaniu kursorem (Action Icons on Hover) - sprawiają, że ikony służące do edycji, kopiowania czy przenoszenia elementów pojawiają się dopiero po najechaniu na dany moduł. Dzięki temu interfejs jest bardziej przejrzysty.
• Ikony akcji elementu nadrzędnego (Parent Action Icons on Hover) - wyświetlają narzędzia edycji dla elementu nadrzędnego, np. sekcji, wiersza lub grupy, gdy najedziesz kursorem na jego obszar.
• Tryb X-Ray - ułatwia zaznaczanie elementów, szczególnie wtedy, gdy nakładają się na siebie lub trudno je wybrać w standardowym widoku.

Na koniec ustawienia najbardziej ogólne:

• Ustawienia obszaru roboczego (Workspace Settings) - umożliwiają personalizację interfejsu, dzięki czemu możesz dopasować środowisko pracy do swoich potrzeb. To tutaj możesz zaznaczyć, które ikony mają być na widoku, zmienić kolor "skórki" czy wyłączyć panel wordpressa nad edytorem.
• Pomoc (Help) - znajdziesz tutaj bazę wiedzy Elegant Themes, samouczki oraz listę skrótów klawiszowych ułatwiających pracę z Divi 5. 
• Aktualizacje (Product Updates) - pozwala sprawdzić najnowsze funkcje, poprawki błędów oraz zmiany wprowadzane w kolejnych wersjach Divi 5.
• Tryb jasny i ciemny (Light/Dark Mode) - pozwala przełączać wygląd interfejsu Divi między jasnym a ciemnym. 

Panel podglądu responsywnego (2)

Divi 5 pozwala w prosty sposób sprawdzić, jak projekt będzie wyglądał na różnych urządzeniach. Z poziomu panelu responsywnego możesz przełączać się między widokiem komputera, tabletu i telefonu, a także wybrać dodatkowe rozmiary ekranów. Jeśli potrzebujesz, możesz ustawić własną szerokość podglądu oraz zmienić poziom powiększenia, aby wygodniej pracować nad projektem.

Główny pasek narzędzi (3)

Główny pasek narzędzi zawiera najważniejsze funkcje potrzebne podczas projektowania strony. To z jego poziomu możesz cofnąć lub ponowić wykonane zmiany, przejrzeć historię edycji, zapisać projekt, sprawdzić podgląd strony przed publikacją oraz zakończyć pracę w edytorze.

• Cofnij (Undo) - cofa ostatnio wykonaną zmianę
• Ponów (Redo) - przywraca wcześniej zachowaną zmianę
• Historia zmian (History) - wyświetla historię wykonanych działań i pozwala wrócić do wybranego etapu pracy.
• Import i eksport (Import / Export) - Umożliwia importowanie i eksportowanie układów oraz elementów strony.
• Wyczyść układ (Clear Layout) - usuwa wszystkie elementy z aktualnie edytowanej strony.
• Dodaj do biblioteki (Add to Library) - Pozwala zapisać aktualny układ lub jego elementy w bibliotece Divi, aby wykorzystać je ponownie w innych projektach.
• Wyjdź (Exit) - kończy pracę w Visual Builderze i wraca do poprzedniego widoku.
• Podgląd (Preview) - otwiera podgląd strony przed jej opublikowaniem.
• Zapisz (Save) - zapisuje wszystkie wprowadzone zmiany.

Panel ustawień. Tutaj dostosujesz każdy element strony (4)

Po zaznaczeniu dowolnego elementu na stronie, np. sekcji, wiersza, grupy czy modułu, po prawej stronie otworzy się panel ustawień. To właśnie tutaj zmienisz wygląd, zawartość oraz zaawansowane opcje wybranego elementu.

Content (Zawartość)

Tutaj dodajesz i edytujesz treść oraz podstawowe ustawienia elementu. W zależności od modułu znajdziesz tu między innymi tekst, obrazy, linki, tło czy ustawienia pętli wpisów.

Design (Wygląd)

Ta zakładka odpowiada za wygląd elementu. Możesz zmienić kolory, czcionki, odstępy, obramowania, cienie, animacje oraz wiele innych ustawień wizualnych.

Advanced (Zaawansowane)

Znajdziesz tutaj bardziej zaawansowane opcje, takie jak własne klasy CSS, identyfikatory, niestandardowy kod CSS, ustawienia widoczności czy efekty przewijania.

Warto pamiętać, że dostępne opcje różnią się w zależności od wybranego elementu. Moduł tekstowy będzie miał inne ustawienia niż obraz, formularz kontaktowy czy sekcja.

Jak zbudowana jest strona w Divi 5?

Każda strona w Divi opiera się na tej samej strukturze. Najpierw dodajesz sekcję, w niej tworzysz wiersz, następnie wybierasz układ kolumn, a na końcu umieszczasz moduły, czyli elementy takie jak tekst, obraz czy przycisk. Zrozumienie tej zależności znacznie ułatwi Ci pracę z edytorem i odnajdywanie ustawień poszczególnych elementów.

Podsumowanie

Pierwsze uruchomienie Divi 5 może wydawać się przytłaczające, zwłaszcza jeśli wcześniej pracowałeś z Divi 4. Po poznaniu podstawowych elementów interfejsu szybko zauważysz jednak, że nowy układ został zaprojektowany z myślą o wygodniejszej i szybszej pracy. W kolejnych artykułach pokażę Ci bardziej szczegółowo, jak korzystać z poszczególnych funkcji oraz jak projektować strony w Divi 5 krok po kroku.