Zagnieżdżone rzędy kontra sekcje specjalistyczne w Divi 5 (i dlaczego je przestrzegamy)

Divi od dawna jest potęgą budowania pięknych stron internetowych. Sekcje specjalne rozszerzyły możliwości układu Divi na lata, włączając złożone, zagnieżdżone struktury kolumn, z którymi regularne sekcje nie mogły obsłużyć. Ale takie podejście było złożoności i ograniczeń, głęboko związane ze starymi ramami krótko -kodów Divi.

Teraz Divi 5 jest wyposażony w zagnieżdżone wiersze - rodzima funkcja, która pozwala umieszczać wiersze wewnątrz kolumn w dowolnym miejscu, w regularnych sekcjach. Ta funkcja usuwa poprzednie ograniczenia i jednoczy się budynek układu pod jednym, elastycznym typem sekcji. Dzięki zagnieżdżonym rzędom możesz zbudować ten sam złożony, asymetryczny układy, które pozwalają sekcje specjalne, ale bardziej intuicyjnie.

W tym poście omówimy odejście od sekcji specjalistycznych oraz sposób, w jaki zagnieżdżone rzędy i przeprojektowany system układu Divi 5 zapewnia lepszy sposób na tworzenie złożonych układów. Przyszłość Divi jest tutaj i jest prostsza, bardziej elastyczna i zbudowana dla nieograniczonej kreatywności.

Subskrybuj nasz kanał YouTube

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

Retrospekcja sekcji specjalistycznych

Sekcje specjalistyczne zostały wprowadzone w Divi (2014), aby zająć się ograniczeniami sekcji zwykłych. Pozwolili na bardziej złożone struktury kolumn, w tym paski boczne i asymetryczne układy, które były niemożliwe w przypadku regularnych sekcji.

Ramy oparte na skrótach Divi zasadniczo ograniczona złożoność układu poprzez ograniczenie głębokości gniazdowania i wprowadzanie wąskich gardeł wydajności. Złożone zagnieżdżone układy były trudne do zbudowania i podatne na wydawanie problemów, więc nie były możliwe do czasu specjalistycznych.

Wprowadzili jednak dodatkową złożoność, ponieważ sekcje specjalne były ich własnymi (zauważ dodatkowe opcje przekazywania kolumn i opcje CSS dla tych sekcji). Nie były one złe, ale zdecydowanie zachowywały się inaczej niż regularne sekcje, wiersze i kolumny.

Sekcje specjalistyczne dodały dodatkowe pola klas/identyfikatora CSS, które były niezbędne, ale niezgodne z resztą opcji konstruktora.

Sekcje specjalne włączały pseudo-zagnieżdżone struktury kolumn, zginając reguły skrótu, tworząc to, co nie było możliwe w regularnych sekcjach.

Czy nie byłoby miło, gdyby zwykłe sekcje były wystarczająco mocne, aby robić to, czego ich potrzebujesz?

Zagnieżdżone rzędy i lepszy sposób budowania stron

W przypadku Divi 5 zagnieżdżone wiersze oficjalnie pozwalają umieszczać wiersze (i ich kolumny) w innych rzędach i kolumnach. Oznacza to, że możesz tworzyć głęboko zagnieżdżone układy z nieograniczonymi kolumnami i wierszami wewnątrz siebie. Eliminuje potrzebę specjalistycznych sekcji.

Ta nowa funkcja dodała również opcje rozmiaru do kolumn, co oznacza, że ​​istnieje spójny sposób na rozmiar i stylowanie wszystkich elementów kontenerów.

Jak łatwo odtworzyć sekcję specjalistyczną z zagnieżdżonymi wierszami

Pakiet układu wynajmu skuterów (szczególnie sekcja bohatera strony głównej) wykorzystuje sekcję specjalistyczną do pozycjonowania kluczowych elementów. Jednak zamiast korzystać z sekcji specjalistycznej z jej unikalnymi ustawieniami, użyjemy zagnieżdżonych wierszy, aby osiągnąć podobny efekt.

Uwaga: Divi 5 ma obecnie sekcje specjalistyczne, ale ostatecznie zostaną one przestarzałe (ale nadal będą działać i będą dwupięć na stronach, na których obecnie istnieją).

Dodaj standardową sekcję na stronie i ustaw kolor tła na czarny (jeśli zaimportowałeś układ na swoją stronę, masz obraz kropki do użycia jako obraz tła o pozycji górnej i rzeczywistej rozmiaru).

Ustaw szerokość sekcji i maksymalną szerokość na 100%.

Upewnij się, że rząd wewnątrz sekcji ma strukturę dwukolumnową i podział 3/5 + 2/5. Ustaw także szerokość wiersza i maksymalną szerokość na 100%.

Jeśli chcesz użyć innych nowych funkcji, dodaj tylko jedną kolumnę z dwiema grupami modułów w środku. Użyjesz opcji wielkości dla grup zamiast polegać na domyślnych strukturach kolumn Divi.

Lewa kolumna będzie mieściła się bardziej skomplikowana strona (pod względem modułów), a w prawej kolumnie będzie mieścił duży obraz.

Dodamy wszystkie nasze moduły, aby zrozumieć układ. Obejmuje to najpierw moduł nagłówka lub tekstu, a następnie zagnieżdżony wiersz (dwie kolumny o równej szerokości), moduł obrazu w lewej kolumnie oraz moduł tekstowy i moduł przycisku w prawej kolumnie. Z powrotem do wiersza nadrzędnego, w prawej kolumnie, dodaj jeden moduł obrazu.

Powtórzymy tylko odstępy/rozmiar na komputery stacjonarne, aby zilustrować, w jaki sposób możemy odtworzyć sekcję specjalistyczną za pomocą zagnieżdżonych wierszy. Śmiało i dodaj treść i obrazy (ponownie obrazy są dostępne podczas importowania układu na stronę na Twojej stronie). Możesz także zmodyfikować style tekstu i kolorów, aby pasowały do ​​uznania. Główny obraz w prawej kolumnie należy zastosować jako obraz tła, a moduł obrazu z obrazem akcentu, do którego dotrzemy później.

W lewej kolumnie wiersza bezpośrednio pod sekcją dodaj ~ 10% lewej wyściółki do przestrzeni od lewej strony (robienie tego w ten sposób oznacza, że ​​musisz zmienić rozmiar rzeczy dla każdego punktu przerwania).

Teraz otwórz ustawienia prawej kolumny bezpośrednio pod rządem nadrzędnym. Użyj obrazu tła kolumny.

Moduł obrazu wewnątrz tej kolumny powinien mieć na nim ustawienie filtra> mieszanie> nakładka. W pozycji Advanced> obraz jest absolutnie ustawiony i zakotwiczony w lewym dolnym rogu.

I to prawie to dla rekreacji sekcji specjalistycznej (na komputerze). Ponieważ zastosowaliśmy ustawioną strukturę kolumny (kolumny 3/5 + 2/5), Divi ma pewne domyślne rozmiar i pozycjonowanie w różnych punktach przerwania, które należy rozwiązać. Możesz tego uniknąć, używając jednej kolumny nadrzędnej, ale grupy modułów do przechowywania zawartości po lewej i prawej stronie tej sekcji.

Ale przynajmniej w tym momencie wiesz, że możliwe jest gniazdowanie rzędów i odtworzenie sekcji specjalistycznych.

Wchodzenie w nową przyszłość

Divi 5 jest bliski wersji beta, ale już dołożyliśmy znaczenia, aby przerobić system projektowy Divi.

• Układy FlexBox (wkrótce) : zapewni większą kontrolę nad wyrównaniem i dystrybucją przestrzeni w rzędach.
• Zagnieżdżone wiersze : niekończące się gniazdowanie struktur wierszy i kolumn, aby stworzyć całkiem sporo złożoności z natywnym systemem wierszy na oparciu o pływak.
• Zaawansowane rozmiar kolumn : Dodano brakujące elementy sterujące rozmiaru dla szerokości kolumn i wysokości.
• Grupy modułów : umożliwia grupowanie modułów w celu łatwiejszego zarządzania i stylizacji.
• Zmienne projektowe : Zdefiniuj i ponownie wykorzystaj zmienne globalne (kolory, czcionki, odstępy, obrazy, tekst) we wszystkich elementach i polach.
• Względne kolory z HSL (wkrótce) : dynamiczne, konsekwentne marki kolorowe kolory oparte na odcieniu, nasyceniu i lekkości.

Wszystkie te cechy są częścią ponownego ponownego powracania Divi i są kluczowe dla jego powrotu. Udowadniamy, że fundament, który zbudowaliśmy w ciągu ostatnich dwóch lat, było tego warte. Możemy zbudować funkcje, które nie były możliwe w D4, i każda każda z nich w ciągu kilku tygodni.

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

Pobierz Divi 5learn więcej o Divi 5