Ciekawostki o DIVI

budowa strony

DIVI

Divi to zaawansowany framework wizualnego projektowania stron dla WordPressa rozwijany przez Elegant Themes od grudnia 2013 roku. Jego architektura przeszła gruntowną transformację od tradycyjnego parsera shortcode'ów w wersji Divi 4 do nowoczesnego silnika opartego na obiektach JSON, architekturze React i natywnym wsparciu dla CSS Grid w wersji Divi 5.

15 ciekawostek o DIVI

  1. Premiera pierwszego wydania Divi
    Założyciel Elegant Themes, Nick Roach, wydał pierwszą wersję motywu Divi 11 grudnia 2013 roku, przekształcając firmę ze standardowego sklepu z szablonami w ekosystem kreatora wizualnego.
  2. Przełomowy Theme Builder w Divi 4
    Wydane w październiku 2019 roku Divi 4.0 wprowadziło Theme Builder, przenosząc kontrolę nad globalnymi nagłówkami, stopkami, stronami błędów 404 i szablonami wpisów bezpośrednio do edytora wizualnego.
  3. Koniec ery shortcode'ów w Divi 5
    Architektura Divi 5 całkowicie porzuciła zagnieżdżone shortcode'y na rzecz struktury danych opartej na obiektach JSON w komentarzach HTML, wzorując się na natywnym standardzie blokowym Gutenberga.
  4. Przebudowa silnika renderowania na React
    Interfejs Visual Buildera w Divi 5 został przepisany od podstaw w bibliotece React, eliminując konieczność przeładowywania całego drzewa DOM przy edycji pojedynczego modułu.
  5. Mechanizm Dynamic CSS w Divi 4
    Wprowadzony w aktualizacjach serii Divi 4 system Dynamic CSS obniżył wagę generowanego arkusza stylów nawet o kilkadziesiąt procent, kompilując wyłącznie kod CSS dla modułów użytych na danej podstronie.
  6. Wbudowany generator Critical CSS
    Silnik Divi automatycznie wydziela i osadza style Critical CSS w sekcji head dokumentu, deferując ładowanie pozostałych reguł, co drastycznie skraca czas renderowania pierwszego widoku (FCP).
  7. Natywne wsparcie dla CSS Grid
    W architekturze Divi 5 zaimplementowano natywny moduł siatki opartej na nowoczesnej specyfikacji CSS Grid, co eliminuje konieczność wielopoziomowego zagnieżdżania wierszy i kolumn.
  8. Moduł warstwy wstecznej kompatybilności
    W celu bezproblemowej migracji z Divi 4 do Divi 5 inżynierowie Elegant Themes wdrożyli hybrydową warstwę Backward Compatibility, która automatycznie konwertuje stare shortcode'y na nowy format JSON.
  9. Optymalizacja czcionek i Google Fonts
    Funkcja Dynamic Google Fonts buforuje definicje krojów pisma lokalnie na serwerze i pobiera wyłącznie używane glify, eliminując zewnętrzne żądania blokujące renderowanie do serwerów Google.
  10. Własny format plików layoutów JSON
    Mechanizm Divi Portability zapisuje gotowe sekcje i układy stron jako skompresowane pliki JSON, co pozwala na błyskawiczne przenoszenie struktur projektowych między odrębnymi domenami.
  11. Zaawansowane reguły warunkowe Conditional Display
    Wprowadzona w gałęzi Divi 4 funkcja Display Conditions pozwala renderować konkretne moduły na podstawie statusu zalogowania, roli w systemie WordPress, daty lub parametrów koszyka WooCommerce.
  12. Niezależny wtyczkowy Divi Builder
    Oprócz kompletnego motywu deweloperzy wydali samodzielny plugin Divi Builder, umożliwiający wykorzystanie silnika wizualnego z dowolnym szablonem zewnętrznym w repozytorium WordPressa.
  13. Narzędzie szybkiej nawigacji Command Center
    W Divi 5 zintegrowano interfejs Command Center, przypominający paletę poleceń z edytorów kodu IDE, co przyspiesza nawigację po głęboko rozbudowanych strukturach podstron.
  14. Wbudowany silnik Divi AI
    System Divi AI integruje modele językowe oraz generatory obrazów bezpośrednio w polach parametrów modułów, automatycznie generując kod CSS, teksty oraz grafiki kontekstowe.
  15. Zarządzanie dynamicznymi źródłami danych
    Funkcja Dynamic Content wprowadzona w Divi pozwala mapować zawartość modułów tekstowych i graficznych bezpośrednio z pól niestandardowych (ACF, Pods) oraz tabel bazodanowych WordPressa.

DIVI pytania

Czym różni się Divi 5 od starszego Divi 4?

Nowa wersja Divi 5 to całkowicie przepisana architektura bez shortcode'ów, działająca w oparciu o czysty kod, co eliminuje opóźnienia wizualnego edytora i drastycznie przyspiesza ładowanie witryny.

Czy Divi 5 generuje lżejszy kod HTML i poprawia wskaźniki Core Web Vitals?

Porzucenie ciężkich shortcode'ów na rzecz natywnych bloków zmniejszyło rozmiar drzewa DOM, dzięki czemu strony na Divi osiągają znacznie lepsze wyniki LCP i CLS w PageSpeed Insights.

Dlaczego edytor wizualny Divi 4 wolno działał w panelu WordPressa?

Starszy edytor przeciążał przeglądarkę skryptami i pamięcią, podczas gdy Visual Builder w wersji 5 został zoptymalizowany pod kątem natychmiastowej reakcji na kliknięcia.

Jak bezpiecznie przejść z Divi 4 na Divi 5 na działającej stronie?

Zrób pełną kopię zapasową bazy i plików, a następnie uruchom wbudowany Divi Migrator na środowisku stagingowym, aby sprawdzić zgodność niestandardowych modułów.

Co dzieje się z treścią strony po wyłączeniu motywu Divi 4?

W wersji 4 treść w bazie danych zostaje zanieczyszczona niesformatowanymi znacznikami shortcodes, co wymusza żmudne czyszczenie kodu przy zmianie motywu.

Czy Divi Theme Builder pozwala na tworzenie własnych szablonów wpisów i nagłówków?

Narzędzie Theme Builder umożliwia globalne projektowanie układu dla całego serwisu, pojedynczych postów blogowych, stron kategorii oraz szablonów produktów WooCommerce.

Gdzie w Divi wkleić własny kod CSS lub skrypt JavaScript?

Niestandardowy kod najlepiej dodać w panelu motywu w sekcji Opcje Divi, w zakładce Integracja lub bezpośrednio w module Kod na wybranej podstronie.

Jak naprawić problem z blokowaniem ładowania zasobów i opóźnieniem LCP w Divi?

Włącz w opcjach zaawansowanych motywu Dynamic CSS, włącz opcję Critical CSS oraz odłóż ładowanie zewnętrznych fontów Google w ustawieniach wydajności.

Czy Divi 5 jest w pełni kompatybilny z edytorem blokowym Gutenberg?

Architektura nowej wersji została zaprojektowana tak, aby moduły Divi współpracowały bez konfliktów z natywnym edytorem bloków i mechanizmem Full Site Editing.

Jak w Divi ustawić inne marginesy lub ukryć moduł na smartfonach?

Kliknij ikonę telefonu przy wybranej właściwości w zakładce Zaawansowane modułu, a następnie skorzystaj z reguł Widoczność dla urządzeń mobilnych.

Co zrobić, gdy Visual Builder w Divi zawiesza się na ekranie ładowania?

Zwiększ limit memory_limit w pliku wp-config.php do minimum 256M, wyczyść pamięć podręczną przeglądarki i włącz tryb Safe Mode w ustawieniach wsparcia Divi.

Masz sugestię lub chcesz zgłosić błąd? Pomóż nam ulepszać serwis. Napisz do nas
Udostępnij
ciekawostki
Link do artykułu skopiowany