Divi 5 ekskluzywnych funkcji (jak dotąd)

W szybkim tempie wprowadzamy nowe funkcje Divi 5, a każda z nich została zaprojektowana w celu poprawy wydajności, usprawnienia przepływu pracy i wprowadzenia potężnych możliwości projektowania na wyciągnięcie ręki. Potrzebujesz przeglądu? W tym poście poradzi sobie z ekskluzywnymi funkcjami Divi 5, które warto sprawdzić. I to dopiero początek. Mamy ekscytujące nowe funkcje, takie jak FlexBox i The Loop Builder wkrótce. Nasze aktualizacje dotyczą typowych punktów bólu od projektantów i programistów, którzy codziennie korzystają z Divi.

Divi 5 jest gotowy do użycia na nowych stronach internetowych.

8 funkcji wyłącznie dla Divi 5 (i jak działają)

Divi 5 wprowadza innowacyjne ulepszenia projektowania witryn i wykorzystuje szereg narzędzi, które odkrywają i przyspieszają zadania projektowe, czyniąc je bardziej intuicyjnymi. Poniższe osiem funkcji pokazuje potencjał naszych nowo ponownie włączonych Divi:

1. Konfigurowalne punkty przerwania

Funkcja wydana 6 lutego 2025

Divi 5 wprowadza lepszą elastyczność w responsywnym projektowaniu dzięki systemowi dostosowywania punktów przerwania. Większość budowniczych stron ogranicza użytkowników do zaledwie trzech standardowych widoków, ale Divi 5 pozwala na maksymalnie siedem unikalnych punktów przerwania, z których wszystkie można ustawić na niestandardowe wartości pikseli.

Daje to użytkownikom większą kontrolę niż inni popularni budowniczowie, którzy zwykle trzymają się stałych rozmiarów urządzeń i oferują ograniczone opcje regulacji. Podczas gdy wiele platform zmusza Cię do projektowania w sztywnych granicach, Divi 5 pozwala ukierunkować dokładne szerokości ekranu, w których Twój projekt wymaga szczególnej uwagi.

Poza standardowym trio

Większość budowniczych stron internetowych trzyma się pulpitu, tabletu i trio mobilnego, ponieważ jest to proste. Divi 5 uznał, że nie pasuje to do tego, jak ludzie faktycznie przeglądają sieć, na dziesiątki różnych rozmiarów ekranu.

Dzięki Divi 5 możesz ustawić punkty przerwania dla:

• Telefon (<767px)
• Telefon szeroki (<860px) - idealny do oglądania mobilnego krajobrazu
• Tablet (<980px)
• Tablet szeroki (<1024px) - łapie większe tablety i podobne urządzenia
• Komputer (> 981px)
• Komorostka (> 1280px)
• Ultra szeroka (> 1440px)

Inni budowniczowie stron WordPress oferują pewną kontrolę punktu przerwania, ale żaden nie pasuje do precyzji i łatwości użytkowania Divi 5. System pozostaje intuicyjny, z tymi samymi znanymi kontrolami Divi zastosowanymi we wszystkich punktach przerwania.

Obsługa wizualnego punktu przerwania

Divi 5 wprowadza skalowanie na płótnie, funkcję, która odróżnia go od większości innych budowniczych. Zamiast ograniczyć się do przełączania między stałymi podglądami urządzeń, możesz przeciągnąć krawędź płótna, aby zobaczyć swój układ na dowolnej szerokości.

Takie podejście zapewnia natychmiastową, realistyczną informację zwrotną, prawie jak praca bezpośrednio w przeglądarce internetowej. Projektując szersze punkty przerwania niż bieżące okno, płótno dostosowuje się proporcjonalnie, więc nadal masz dokładne spojrzenie na swój projekt, nawet na mniejszych ekranach.

Doświadczenie pozostaje spójne, gdy poruszasz się między punktami przerwania. Sterowanie zachowują się w ten sam sposób, a twój układ nie jest nieoczekiwanie nie zmienia się. Ta niezawodność zmniejsza zgadywanie i rozwiązywanie problemów z responsywnego projektowania, co może być bólem głowy u innych budowniczych stron.

Dowiedz się więcej

2. Podstawowe grupy opcji

Funkcja wydana 11 marca 2025

Opcje Presets Presets to jedna z najbardziej ekscytujących nowych funkcji w Divi 5, rozszerzając możliwości budowania systemu projektowego, który Ci odpowiada. Presety grup opcji to elementy konstrukcyjne Twojego projektu. Podczas gdy elementy ustawienia wstępne zamykają cię w stylizacji konkretnego elementu, ustawienia grup opcji Divi 5 działają w dowolnym typu elementu.

Możesz tworzyć style wielokrotnego użytku dla określonych właściwości projektowych, takich jak typografia, granice, cienie lub tła, i mieszać te style w różnych elementach. Na przykład możesz stworzyć ustawienie wstępne dla swojego stylu nagłówka, kolejny dla stylizacji przycisków i trzeci dla cieni pudełkowych.

Po skonfigurowaniu możesz zastosować te style do dowolnego kompatybilnego elementu za pomocą kliknięcia, niezależnie od tego, czy jest to moduł tekstowy, niszczenie, wezwanie do działania, a nawet kontenery, takie jak sekcje i wiersze.

Dlaczego ma to znaczenie dla twojego przepływu pracy

Jest to oszczędność czasu, gdy musisz zaktualizować swój projekt. Powiedz, że zdecydujesz się zmienić promień graniczny na elementach w całej witrynie. Zamiast polować na każdy przycisk, obraz i sekcję, po prostu edytujesz wstępnie zabezpieczającą obramowanie raz i każdy element za pomocą tego wstępnego aktualizacji aktualizuje się automatycznie.

Zdolność do pracy w różnych typach elementów sprawia, że ​​ustawienia grup opcji Divi 5 są naprawdę pomocne. Ten sam styl graniczny może zastosować do modułu, kolumny, wiersza lub sekcji. Ta kompatybilność krzyżowa oszczędza godziny powtarzających się stylizacji.

Ta elastyczność idzie o krok dalej. Presety grup opcji Divi wykraczają poza podstawowe opcje stylizacji. Obejmują również funkcje oparte na skryptach, takie jak wyświetlacze warunkowe, filmy w tle HTML i efekty przewijania. Daje to stałą kontrolę nad zarówno statycznym stylistycznym, jak i interaktywnym zachowaniami w Twojej witrynie.

Dowiedz się więcej

3. Jednostki zaawansowane

Funkcja wydana 19 marca 2025

Divi 5 poprawiło obsługę jednostek CSS, co ułatwia responsywne projektowanie.

Teraz możesz uzyskać dostęp do pełnego zakresu jednostek CSS potrzebnych do dzisiejszego projektowania stron internetowych bezpośrednio wewnątrz konstruktora. Oznacza to, że możesz użyć pikseli (PX), wartości procentowych (%), EMS (EM), root EMS (REM), jednostek rzutni (VW, VH, VMIN, VMAX) oraz jeszcze bardziej zaawansowanych wyborów, takich jak szerokość znaków (CH) lub jednostki ułamkowe (FR) dla siatków.

Na początku może to wyglądać jak drobna aktualizacja, ale w rzeczywistości daje znacznie większą elastyczność w budowaniu responsywnych układów.

Dlaczego różne jednostki mają znaczenie

Kiedy budujesz witryny, które chcesz dobrze wyglądać na telefonach, tabletach i komputerach stacjonarnych, użycie tylko pikseli może tworzyć bóle głowy. Element o szerokości o szerokości 300 px wygląda dobrze na komputerze, ale może przełamać układ na telefonie komórkowym.

Dzięki zaawansowanym jednostkom, takim jak rzutnik, możesz ustawić ten sam element na 80VW (80% szerokości rzutni) i będzie on doskonale skalowany na wszystkich urządzeniach. Lub użyj jednostek REM, aby utrzymać tekst proporcjonalny do podstawowej wielkości czcionki, co znacznie ułatwia regulacje dostępności.

Teraz połącz jednostki z funkcjami CSS, takimi jak calc (), min (), max () i clamp () i zobacz prawdziwą magię. Divi 5 obsługuje wszystkie z nich, pozwalając tworzyć prawdziwie płynne układy dostosowujące się do dowolnego rozmiaru ekranu.

Na przykład możesz ustawić wysokość sekcji na obliczenie (80 VH - 60px), aby zająć większość ekranu, pozostawiając miejsce na nagłówek. Lub użyj Clamp (16px, 4vw, 22px) do tekstu, który rośnie z ekranem, ale pozostaje w czytelnych limitach.

Elastyczność Clamp ()

Funkcja Clamp () zasługuje na szczególną uwagę, ponieważ rozwiązuje wiele responsywnych problemów projektowych. Umożliwia ustawianie minimum, preferowanych i maksymalnych rozmiarów w jednym Go, dzięki czemu funkcja CLAMP () jest ulubioną funkcją wielu projektantów stron internetowych.

Możesz chcieć nagłówków, które rosną z rozmiarem ekranu, ale pozostać czytelne. W module nagłówka możesz ustawić rozmiar tekstu na zacisk (36px, 5vW, 72px). Nagłówek nie będzie mniejszy niż 36px lub większy niż 72 px, ale między tymi rozmiarami będzie skalowany na 5% szerokości rzutni.

Stwarza to płynne przejścia między rozmiarami ekranu bez punktów przerwania. Tekst, który jest zbyt duży na tabletach lub zbyt mały na dużych monitorach, nie będzie problemem. Twoja typografia oddycha układem.

Rozumiemy również, że różne elementy projektowe potrzebują różnych jednostek, dlatego zaawansowane jednostki Divi 5 działają, nie tylko z typografią, ale marginesami, wyściółką i innymi wartościami odstępów:

• W przypadku tekstu jednostki REM utrzymują wszystko w proporcji. Jeśli ustawisz tekst nadwozia na 1rem i nagłówki na 2.5M, zmiana rozmiaru czcionki podstawowej aktualizuje wszystko proporcjonalnie.
• W przypadku układów możesz spróbować mieszać stałe i płynne jednostki. Pasek boczny może działać najlepiej na 300px, podczas gdy główna treść może wykorzystać Calc (100% - 350px), aby wypełnić pozostałe miejsce.
• W przypadku odstępów jednostki EM tworzą wyściółkę, która skaluje się z rozmiarem tekstu. Utrzymuje to proporcje projektowe spójne, nawet gdy zmieniają się rozmiary tekstu.

Dobrze dobrze gra z innymi omawianymi funkcjami

Szczególnie miłe jest to, że nie musisz pisać niestandardowych CSS, aby korzystać z tych jednostek. Są wbudowane bezpośrednio w interfejs wizualny. Możesz eksperymentować z różnymi wartościami i natychmiast zobaczyć wyniki, dzięki czemu krzywa uczenia się znacznie łagodniejsza niż ręcznie kodowanie tych rozwiązań.

Jednostki te są zintegrowane z innymi funkcjami w Divi 5. Możesz przechowywać swoją wartość, używając dowolnej preferowanej jednostki, jako zmiennych projektowych, a następnie zastosować je w całej stronie za pośrednictwem ustawień grup opcji. Stwarza to reakcję łańcuchową dobrego designu, która przepływa przez całą witrynę. Na przykład:

• Utwórz zmienną liczbową, taką jak nagłówek: Clamp (26px, 5vw, 82px); dla nagłówków H1. Zastosuj tę zmienną do wstępnego ustawiania tekstu. Twoje nagłówki będą teraz płynnie skalować między 26px na mobilnym a 82px na komputerze, z płynnymi obliczeniami 5VW między tymi rozmiarami.
• Ustawianie zmiennej liczbowej na zaciskanie (20px, 5VW, 80px), a następnie używając go jako marginesów, masz ciasne odstępy na mobilnym i obfitym pomieszczeniu oddychającym na pulpicie, z płynnym przejściem między.
• Ustaw odstępy podstawowe przy użyciu zmiennej liczby jednostek przestrzeni: 20px i użyj go z kalc () w ustawieniach układu. Na przykład zastosuj calc (var (–space-jednostka) * 2) dla większych luk i calc (var (–space-jednostka) / 2) dla ściślejszych przestrzeni. Po aktualizacji wartości bazowej wszystkie pochodne odstępy dostosowują się proporcjonalnie.

To po prostu zarysowuje powierzchnię. Mieszając te konfiguracje, możesz \ tworzyć strony internetowe, które wykorzystują prostotę Divi i nowe możliwości.

Dowiedz się więcej

4. Zmienne projektowe

Funkcja wydana 3 kwietnia 2025

Większość budowniczych witryn ma sposoby na ustawienie globalnych kolorów i czcionek. Divi 5 bierze ten pomysł i działa z nim. Możesz tworzyć zmienne nie tylko dla kolorów i czcionek, ale także dla liczb, obrazów, zwykłego tekstu, a nawet linków internetowych.

Pomyśl o tym: większość konstruktorów pozwala ustawić podstawowy kolor, który aktualizuje się wszędzie. Ale co, jeśli chcesz zmienić swój numer telefonu na wielu stronach? Lub zamień powtarzający się obraz używany w całej witrynie? Divi 5 z łatwością obsługuje te sytuacje.

Wszystkie twoje zmienne żyją w prostym panelu na pasku bocznym wizualnego budowniczego. Jest czysty, łatwy do znalezienia i umieszcza wszystko w jednym miejscu.

Idealne dopasowanie z ustawieniami

Zmienne projektowe i ustawienia wstępne (oba ustawienia wstępne grupy opcji i ustawienia elementów) współpracują, aby stworzyć możliwy do utrzymania i skalowalny projekt. Możesz budować ustawienia wstępne, które odnoszą się do twoich zmiennych, tworząc elastyczny system projektowy.

Na przykład możesz utworzyć zmienną projektową dla głównej czcionki nagłówka, a następnie użyć tej zmiennej w ustawieniach typografii nagłówka. Jeśli zdecydujesz się później zmienić czcionkę, musisz zaktualizować zmienną tylko raz, a nie samą ustawienie. Stwarza to kolejną warstwę kontroli, której większość budowniczych po prostu nie oferuje.

To dwuwarstwowe podejście zapewnia większą kontrolę niż inni budowniczowie. Oddzielacie to, jak coś wygląda (zmienne) od miejsca, w którym się pojawia (ustawienia wstępne).

Możesz użyć zmiennych liczbowych z funkcjami CSS, takimi jak calc () i clamp (), aby tworzyć responsywne projekty, które idealnie dostosowują się do różnych rozmiarów ekranu. Ustaw zmienną do rytmu odstępów w witrynie i zastosuj ją w całym układzie, aby uzyskać spójne proporcje, które pięknie skalą.

Po zmianie zmiennej wszystko, co za pomocą niej od razu aktualizuje. To zamienia wiele godzin pracy w kilka sekund klikania.

Jak to pomaga w tworzeniu możliwego do utrzymania projekt

Spójrzmy na kilka praktycznych przykładów zmiennych projektowych w akcji:

• Utrzymuj swoją markę tak samo wszędzie: Skonfiguruj zmienne dla swoich kolorów, czcionek i odstępów. Użyj ich w ustawieniach wstępnych w swojej witrynie, aby uzyskać spójny wygląd.
• Uruchom wakacyjną sprzedaż: Utwórz zmienne obrazu dla grafiki kampanii i zmiennych tekstowych do kopii promocyjnej. Po zakończeniu sezonu zaktualizuj je raz, aby odświeżyć całą witrynę.
• Style graniczne: Utwórz zmienną liczbową dla promienia granicy, na przykład 10px, i zastosuj ją do wszystkich ustawień przycisków, modułów obrazu i kart. Jeśli zmieni się kierunek projektowania, jedna aktualizacja wpływa na wszystkie zaokrąglone zakątki w całej witrynie.
• Ułatwiaj aktualizacji klientów: podczas budowania stron dla klientów, którzy będą musieli dokonywać aktualizacji, lśnią zmienne projektowe. Skonfiguruj zmienne treści, które często zmienią, takie jak dane kontaktowe lub godziny pracy. Mogą je zaktualizować bez dotykania ustawień projektowania.

Zmienne projektowe działają również z konstruktorem motywów Divi. Oznacza to, że twoje nagłówki, stopki i szablony używają tej samej zmiennej puli co twoje strony. W przeciwieństwie do innych systemów, które zamykają Cię w sztywne wzory, zmienne Divi 5 utrzymują elastyczność, jednocześnie pomagając zachować zorganizowanie.

Dowiedz się więcej

5. Zagnieżdżone rzędy

Funkcja wydana 17 kwietnia 2025

Divi 5 wprowadza zagnieżdżone rzędy, co daje większą kontrolę nad układami. Ten dodatek pozwala umieścić wiersze wewnątrz kolumn, tworząc złożone układy, które nie były możliwe w poprzednich wersjach bez kodu niestandardowego.

Dzięki zagnieżdżonym rzędom możesz zbudować zaawansowane układy siatki, bloki treści w stylu czasopism i projekty kart z znacznie mniejszym wysiłkiem. Potrzebujesz sekcji z kolumnami zawierającymi własne układy wielonsji? Teraz możesz to zrobić dobrze w budowniczym.

Budowanie z głębokością

Dodanie zagnieżdżonego wiersza działa, tak jak dodanie dowolnego modułu. Wybierz sekcję, kliknij przycisk Plus i wybierz „Row” z opcji. Stamtąd możesz dodać wiersz, aby utworzyć zagnieżdżony wiersz i wypełnić go treścią.

Ta pozornie prosta zmiana otwiera wiele możliwości projektowania. Możesz tworzyć widżety paska bocznego za pomocą własnych struktur kolumnowych, budować prezencje produktów z zagnieżdżonymi galerii lub projektować tabele porównawcze z złożonymi układami.

Najlepsze jest to, jak naturalnie pasuje do twojego przepływu pracy. Nie ma nic nowego do nauczenia się. Po prostu używasz rzędów w większej liczbie miejsc. Jeśli wiesz, jak budować z Divi, wiesz już, jak korzystać z zagnieżdżonych wierszy.

Zagnieżdżone rzędy rozwiązują prawdziwe problemy dla budowniczych witryn. Chcesz utworzyć sekcję usług, w której każda usługa ma swój własny układ dwukolumnowy? Wcześniej potrzebujesz niestandardowych CSS lub złożonych obejść. Teraz jest zbudowany.

W przypadku witryn ciężkich treści możesz tworzyć układy w stylu czasopism o mieszanych szerokości kolumn i zagnieżdżonych obszarach treści. Każdy artykuł lub funkcja może mieć własną strukturę kolumn, zachowując układ strony.

Tylko pierwszy krok

Zagnieżdżone rzędy to dopiero początek ewolucji układu Divi 5. Zespół pracuje nad kompletnym systemem układu opartego na FlexBox, aby uczynić Divi jeszcze bardziej elastycznym.

Przyszłe aktualizacje wprowadzą dodatkowe sterowanie układem, dając jeszcze więcej opcji tworzenia złożonych projektów bez niestandardowego kodu. To metodyczne podejście zapewnia, że ​​każda nowa funkcja działa idealnie przed przejściem do następnej.

Zamiast spieszyć się z na wpół upieczonymi funkcjami, zespół programistów Divi buduje solidne fundamenty dla przyszłości projektowania układu. Każdy krok opiera się na ostatnim, tworząc system, który jest zarówno odporny na przyszłość, jak i łatwy w użyciu.

Dowiedz się więcej

6. Grupy modułów

Funkcja wydana 1 maja 2025

Budowanie stron internetowych często oznacza wielokrotne tworzenie tych samych wzorców treści. Projektujesz idealną kartę członkowską, a następnie spędzasz dwadzieścia minut na odtwarzanie jej dla następnej osoby. Grupy modułów rozwiązują to, umożliwiając pakowanie powiązanych elementów w jednostki wielokrotnego użytku.

Oto, jakie zmiany: Zamiast traktować każdy kawałek osobno, pracujesz z kompletnymi blokami. Karta produktu staje się jedną rzeczą, którą się poruszasz, a nie sześć różnych modułów, które musisz wybrać indywidualnie. Kiedy musisz dostosować odstępy w pięćdziesięciu kartach produktów, aktualizujesz szablon grupy raz zamiast ręcznie edytować każdą kartę.

Prawdziwa korzyść pojawia się na większych witrynach. Projekty klientów z dziesiątkami członków zespołu, katalogami produktów lub ofert usług stają się możliwe do zarządzania. Nie wykonujesz powtarzalnej pracy montażowej-koncentrujesz się na treści i dostrajaniu.

Tworzenie niestandardowych kombinacji modułów

Grupy modułów otwierają możliwości, z którymi zwykle nie mogą obsługiwać pojedyncze moduły. Zbuduj kartę serwisową, w której potrzebujesz obrazu tła, nałożonej ikony, nagłówka, opisu i dwóch przycisków akcji: „Dowiedz się więcej” i „Pobierz wycenę”.

W grupach modułów nakładasz te elementy dokładnie tak, jak je chcesz. Staje się to pomocne w przypadku treści, które nie pasują do standardowych szablonów.

W przypadku tabel wyceny możesz użyć trzech zagnieżdżonych wierszy w grupie modułowej: nagłówek w pierwszym rzędzie, szczegółów ceny w drugim i listy funkcji w trzecim. Daje to indywidualną kontrolę nad czcionkami, kolorami i odstępami, których nie oferuje wbudowany moduł tabeli cenowej.

To samo podejście działa dla referencji przy użyciu modułów ikony, obrazu, nagłówka i tekstu ułożonych w strukturze grupy. Otrzymujesz większą elastyczność układu niż standardowy moduł referencyjny, jednocześnie utrzymując wszystko, co możliwe do zarządzania jako pojedyncza jednostka.

Kluczową zaletą jest połączenie kontroli układu budowania od zera z wygodą traktowania wielu elementów jako jednego kawałka.

Budowanie bibliotek komponentów wielokrotnego użytku

Po utworzeniu skutecznych grup modułów zapisz je jako elementy globalne. Tworzy to bibliotekę komponentów, która rośnie z każdym projektem. Po udoskonalaniu stylizacji, twoich przekładów referencyjnych aktualizuje się na dwudziestu stronach, a prezentacja produktów pozostaje spójna podczas iteracji projektu.

Zamiast zacząć od zera za każdym razem, gdy budujesz stronę, zaczynasz od spójnych układów i dostosowujesz je do nowych stron i wymagań dotyczących układu.

Przyjmij łatwość integracji chmur Divi. Dzięki temu narzędziu komponenty mogą bez wysiłku przejść z projektu do projektu. Załóżmy, że opracujesz solidny zestaw grup modułów dla konkretnej witryny klienta; Możesz teraz wykorzystać je jako podstawę nadchodzących zadań. W ten sposób każdy projekt ma przewagę wcześniejszych rozwiązań, ale zachowuje swoją wyraźną estetykę.

Działa płynnie z systemem projektowym Divi 5

Grupy modułów stają się naprawdę interesujące, gdy używasz ich ze zmiennymi projektowymi i ustawieniami grupowymi opcji. Powiedz, że budujesz grupę referencyjną: cytat, nazwa autora, firma i zdjęcie.

Zamiast ustawiać stałe kolory, odwołujesz się do zmiennych kolorów marki. W przypadku stylizacji cytatów tworzysz ustawienie grupy opcji dla typografii, która zawiera niestandardową czcionkę, rozmiar i wysokość linii. Do nazwy autora stosujesz inną ustawienie grupy opcji nagłówka.

Teraz zapisz tę grupę modułów jako element globalny. Te ustawienia wstępne grupy opcji łączą każde referencje w Twojej witrynie z systemem projektowym. Jeśli klient chce ciemniejszego szarości, raz zmień zmienną, a wszystkie moduły grupy referencyjnej będą aktualizować. Jeśli chcesz dostosować styl cytatu, edytuj raz wstępnie ustawiony na grupie opcji typografii; Każda cytat zeznania zmieni się natychmiast.

To bije zarządzanie poszczególnymi modułami rozproszonymi wszędzie. Grupy modułów używają ustawień o grupie opcji dla granic, tła i stylizacji tekstu, więc automatycznie aktualizowanie wszelkich ustawień wstępnych przez wszystkie elementy zgrupowane.

Dowiedz się więcej

7. Menedżer atrybutów

Funkcja wydana 16 maja 2025

Zaprojektowałeś przycisk w module wywołania do akcji. Kolory działają, a efekty unoszącego się wyglądają dobrze. Teraz chcesz te same style przycisków w formularzu kontaktowym, ale nie chcesz nagłówka lub tła CTA.

Regularna kopiowanie nie będzie tu zadziałać: dostaniesz wszystko albo nic. Divi 5 pozwala kopiować tylko części przycisku dzięki funkcji zarządzania atrybutami. Kliknij prawym przyciskiem myszy CTA, wybierz, co skopiować,

Następnie wklej tylko te style guzików do formularza kontaktowego.

Wybierz i wybierz, jakie podróże

Divi 5 dzieli każdy element na różne typy atrybutów. Wybierasz, które do skopiowania:

• Wszystkie atrybuty - wszystko jest kopiowane
• Atrybuty projektowe - kolory, odstępy, ustawienia wstępne, ale brak tekstu lub obrazów
• Atrybuty stylu - tylko twoje niestandardowe zmiany
• Atrybuty treści - tylko tekst i obrazy
• PREDETETY - tylko wstępne zadania

Powiedz, że chcesz stylizacji przycisku, ale nie jego tekst. Kopiuj atrybuty projektowe. Chcesz ustalić ustalenie sekcji, ale nie jej wyściółka? Tylko kopiowanie ustawień wstępnych.

Działa między różnymi modułami

Możesz kopiować atrybuty z jednego rodzaju modułu i wkleić je do innego typu. Na przykład możesz skopiować z modułu wywołania do akcji i wkleić go do formularza kontaktowego. Divi 5 wyraża, które ustawienia działają na obu modułach, a resztę ignorują.

Pomaga to w budowaniu placów, które potrzebują tego samego stylizacji w różnych typach modułów. Nie musisz odtwarzać kolorów przycisków dla każdej formy, referencji lub innego modułu, który używa przycisków.

Skróty na poziomie grupy

System atrybutów jest głębszy z selektywnym zarządzaniem grupami. Całkowicie pomiń panele ustawień. Kliknij prawym przyciskiem myszy i zastosuj określone grupy atrybutów bezpośrednio z menu kontekstowego.

Czy skopiowałeś moduł z idealnym ustawieniem przycisku? Możesz wkleić ten przycisk ustawiony na inne elementy za pośrednictwem selektywnego menu. Nie ma polowania na zakładkę i nurkowania.

Te same precyzyjne dzieła resetowania. Wytrzyj wszystkie atrybuty projektowe, zachowując nienaruszone treść. Lub zresetuj tylko ustawienia wstępne, zachowując niestandardowe zastępowanie stylizacji.

Prędkość przez skróty

Każda akcja dostaje skróty klawiatury, które pojawiają się w menu kontekstowym. Naucz się kilku kluczowych kombinacji i przyspieszenia stylizacji. Skróty pozostają spójne we wszystkich typach atrybutów, więc palce szybko uczą się wzorców.

To wykracza poza zapisywanie kliknięć. Podczas budowania placów z setkami pierwiastków te mikro-efekty łączą się w godziny oszczędzonego czasu. Powtarzająca się praca ręczna staje się szybka, ukierunkowane działania.

Dobrze gra z systemem projektowym

Menedżer atrybutów łączy się bezpośrednio z ustalonym ekosystemem Divi 5. Te połączenia systemowe podróżują podczas kopiowania modułu przy użyciu ustawień wstępnych grup opcji i zmiennych projektowych.

Wklej atrybuty zawierające ustawienia wstępne i nowe elementy natychmiast podłączają się do globalnego systemu stylizacji. Zaktualizuj ustawienie wstępne później, a każdy skopiowany element automatycznie odzwierciedla zmianę. Twój system projektowy pozostaje podłączony podczas szybkiego budowania i zduplikowania elementów.

Dowiedz się więcej

8. Ustawienia Wyszukiwanie i filtrowanie

Funkcja wydana 29 maja 2025

Budowanie stron internetowych oznacza ulepszenie ustawień. Moduły Divi pakują dziesiątki opcji w panele i poluje przez zakładki na to jedno pole kolorowe może zjeść Twój dzień. Divi 5 przywraca funkcję wyszukiwania z Divi 4, ale sprawia, że ​​działa lepiej.

Dostajesz pasek wyszukiwania prosto u góry każdego panelu ustawień. Wpisz to, czego potrzebujesz, a Divi pokazuje tylko opcje dopasowywania. Szukasz „granicy”? Każde ustawienie związane z granicą pojawia się, podczas gdy wszystko inne zanika. Chcesz dostosować „wyściółkę”? Wszystkie elementy sterujące odstępami pojawiają się natychmiast.

To eliminuje kliknięcie i przewijanie, które spowalnia twoją pracę. Zamiast otwierać zakładki i polować przez grupy, możesz znaleźć to, czego potrzebujesz w sekundach.

Filtr według tego, co zmieniłeś

Rozpadkiem czasu rzeczywistego jest filtr „zmodyfikowany”. Kliknij go i zobacz tylko ustawienia, które już dostosowałeś. Pomaga to podczas pobrania pakietu układu lub strony startowej i chcesz zobaczyć, co zostało dostosowane.

Powiedz, że importujesz układ biznesowy, ale chcesz zmienić kolory. Naciśnij zmodyfikowany filtr i zauważ każdy niestandardowy wybór kolorów bez przeglądania każdego modułu. Możesz zobaczyć, które czcionki zostały zmienione, które odstępy zostały ulepszone i które efekty zostały dodane.

Działa to również świetnie w przypadku projektów klientów. Kiedy ktoś pyta, co dostosowałeś na swojej stronie, zmodyfikowany filtr pokazuje wyraźnie twoją pracę.

Inteligentne opcje filtrowania

Oprócz zmodyfikowanego filtra otrzymujesz sortowanie, ustawiając typy. Podczas aktualizacji palety filtr „kolorów” pokazuje każde pole kolorów jednocześnie. Gdy potrzebne są zmiany typografii, filtry „Font Font Families” i „Wagi czcionek” ujawniają ustawienia tekstowe we wszystkich modułach.

System wie, które ustawienia mają największe znaczenie. Kolory i czcionki otrzymują filtry, ponieważ są najczęstszymi zmianami, które ludzie wprowadzają. Rozmiary są zgrupowane, ponieważ korekty odstępów zdarzają się często.

Te filtry zapisują kliknięcia podczas wprowadzania zmian w całej witrynie. Zamiast otwierać każdy moduł indywidualnie, pracujesz za pomocą filtrowanych list ustaw, które musisz zmodyfikować.

Dowiedz się więcej

Jak Divi 5 układa się w stosunku do popularnych opcji

Rynek budowniczych stron internetowych jest zatłoczony opcjami, ale Divi 5 wyróżnia się dzięki naprawdę nowym funkcjom. Oto spojrzenie na to, co sprawia, że ​​Divi 5:

Co to oznacza dla twoich projektów

Połączenie funkcji Divi 5 tworzy system projektowy, którego inni budowniczowie nie są w stanie dopasować. Same wstępne grupy opcji i grupy modułów stawiają Divi 5 przed konkurentami.

Gdy zmienne projektowe działają z ustawieniami wstępnymi i grupami modułów, otrzymujesz coś wszechstronnego. Zmienne odniesienia wewnątrz ustawień wstępnych, zastosuj je do elementów zgrupowanych i zmiana wartości aktualizuje każdy element automatycznie w Twojej witrynie. Dodaj nadchodzące funkcje FlexBox i Loop Builder do miksu, a będziesz tworzyć dowolną stronę internetową bez potrzeby niestandardowego kodowania.

Co będzie dalej?

Mapa drogowa Divi 5 pokazuje ciągłe aktualizacje, które wkrótce się wylądują. Nasi programiści, podzieleni na siedem zespołów, pracują w pełnym wymiarze godzin w różnych funkcjach, aktualizacje wysyłki co najmniej co dwa tygodnie. Oto podglądanie tego, czego możesz się spodziewać w nadchodzących tygodniach:

Układy FlexBox

Największą zmianą jest kompletny system układu FlexBox, który jest od kilku tygodni od ukończenia. To całkowicie zastąpi sposób budowania układów. Otrzymasz nowe szablony wierszy, automatyczne centrowanie pionowe, owijanie zawartości i rozkład odstępów za pośrednictwem kontroli wizualnych zamiast niestandardowych CSS.

Grupy modułów po prostu wysyłane jako pojemniki, które łączą moduły powiązane. W połączeniu z FlexBox możesz tworzyć układy czasopism, prezentacje produktów z dopasowanymi wysokościami i złożonymi wyrównaniami, które wcześniej wymagały obejścia. Sekcje specjalne znikają po nadejściu Flexbox.

Aktualizacje Builder Loop i WooCommerce

Opierając się na systemie układu i modułów FlexBox, konstruktor pętli pozwoli ci powtórzyć wszystko: pojedyncze moduły, grupy lub całe sekcje. W przeciwieństwie do innych konstruktorów, którzy zamykają cię w szablony, zdefiniujesz, co się powtarza i połączysz go z treścią dynamiczną. Zakładnie również zagnieżdżone pętle. Na przykład kategorie blogów, które będą zapętlone przez posty, a każdy post pokazuje zapętlone recenzje.

Moduły WooCommerce zostaną odbudowane od zera za pomocą architektury Divi 5. Obecne moduły będą działać poprzez kompatybilność wsteczną, ale nie będą wchodzić w interakcje z ustawieniami wstępnymi lub zmiennymi. Nowe moduły produktów zostaną ukończone w ciągu kilku tygodni, wprowadzając obsługę WooCommerce na dobrej drodze do beta.

Zaawansowane kolory

Względne kolory z odcieniem, nasyceniem i lekkości (HSL) pozwala budować matematyczne relacje kolorów. Ustaw swój podstawowy kolor raz, a następnie automatycznie wygeneruj warianty: „Podstawowy niebieski, ale o 20% lżejszy” lub uzupełniające się odcienie, które aktualizują się po zmianie bazy.

Planowanie beta i migracji

Beta zaczyna się, gdy trzy cele są zakończone: poprawa kompatybilności wstecznej dla istniejących witryn, kompletne obsługę modułu WooCommerce i dalsze poprawki błędów w oparciu o opinie alfa.

Jeśli przejdziemy do obecnych postępów, sugeruje to beta za kilka miesięcy. Zespół pracuje również nad backendem, aby witryny Divi 4 mogą migrować bez wymagania zmian. Moduły stron trzecich z rynku Divi wymagają pełnej kompatybilności.

W przypadku nowych projektów Divi 5 Alpha zapewnia wystarczające możliwości dla większości kompilacji. Same ulepszenia wydajności uzasadniają przełącznik. Istniejące witryny korzystają z oczekiwania na wersję beta, chyba że potrzebne są określone nowe funkcje.

Po przybyciu beta otrzymasz kompletny zestaw funkcji plus pewność siebie z dokładnych testów. Niedługo potem oficjalne wydanie, dając solidne podstawy przyszłych projektów.

Gotowy do wypróbowania Divi 5? Oto jak zacząć

Te ekskluzywne funkcje Divi 5 współpracują, aby stworzyć coś innego. Zamiast walczyć z konstruktorem o konsekwentne projekty, konfigurujesz systemy, które się utrzymują. Zamiast wielokrotnego odbudowywania tych samych stylów, tworzysz raz i ponownie wykorzystujesz wszędzie - i to dopiero początek!

Dlatego wyprzedz dziś krzywą, budując nową stronę internetową za pomocą Divi 5. Jest ona dostępna dla wszystkich członków Divi za darmo. Po prostu przejdź do obszaru konta i weź kopię.

Po zainstalowaniu WordPress prześlij Divi 5, ponieważ przesyłałbyś normalny motyw: wygląd> Tematy> Dodaj nowy motyw przesyłania. Aktywuj motyw, zaloguj się za pomocą poświadczeń i zbuduj! Twoja pierwsza kompilacja pokaże ci, dlaczego odbudowaliśmy wszystko od zera.

Pamiętaj: użyj Divi 5 tylko dla nowych stron internetowych. Nie zalecamy migracji istniejących miejsc podczas fazy alfa.