Webflow Box zastępuje siedem elementów; stare strony działają

Webflow w komunikacie z 13 października 2026 r. ogłosił, że Box zastępuje siedem pozycji w panelu dodawania: Div Block, Section, Container, Columns, Grid, V Flex i H Flex. Nowy element pozwala wybrać znacznik HTML w ustawieniach. Wcześniej dodane elementy nadal działają, więc opublikowane projekty nie wymagają przebudowy z powodu samej zmiany panelu.

Dla osoby tworzącej portfolio, stronę kursu lub zapis na newsletter oznacza to wspólny punkt wyjścia do budowania struktury, a nie gotowy układ o jednym wyglądzie. Analiza blocks&colors zwraca uwagę, że semantyczny znacznik ma sens dopiero wtedy, gdy odpowiada rzeczywistej roli treści. Inne konsekwencje dotyczą aplikacji Designer API, które po utworzeniu elementu sprawdzają jego dawny typ Section.

Jak Box zastępuje dawne elementy

Box zastępuje wybór elementu, lecz ustawienia układu nadal określają, jak treść jest rozmieszczona. Znacznik section opisuje część strony, podczas gdy siatka lub flex określa położenie jej zawartości. Przejście na Box nie oznacza więc, że każde dodanie elementu daje automatycznie identyczny układ i identyczny HTML.

Poniższa mapa dotyczy budowania nowych fragmentów strony. Nie opisuje konwersji elementów, które już znajdują się w projekcie.

Div Block → Box: neutralny blok z tagiem div służy do grupowania treści.
Section → Box: dla wyodrębnionej części strony można wybrać tag section.
Container → Box: funkcję kontenera odtwarza się przez ustawienie szerokości i odstępów w stylach.
Columns → Box: rozmieszczenie w kolumnach trzeba ustawić dla zawartości Boxa.
Grid → Box: układ siatki wynika z ustawienia grid, a nie z samego tagu HTML.
V Flex → Box: pionowe rozmieszczenie wymaga układu flex z kierunkiem pionowym.
H Flex → Box: poziome rozmieszczenie wymaga układu flex z kierunkiem poziomym.

W portfolio można więc użyć Boxa jako obszaru projektów i dopiero potem ustalić, czy karty prac mają tworzyć siatkę. Na stronie kursu ten sam element może otaczać program zajęć, a na stronie newslettera formularz zapisu. To przykłady zastosowania, nie nowe szablony Webflow: o semantyce decyduje znacznik, a o wyglądzie style i zawartość.

Co dzieje się z istniejącymi projektami

Wcześniejsze Div Block, Section czy Grid pozostają częścią istniejących stron. Webflow ukrył je w panelu dodawania, a nie usunął z zapisanych projektów. Nowy Box ustawiony jako div daje przy publikacji taki sam wynik HTML jak dawny Div Block; sama premiera nie zamienia jednak wcześniej użytych elementów w Boxy.

Zmieniły się również globalne selektory znaczników. Nowe selektory zaczynają bez przypisanych stylów, dlatego ich udostępnienie nie zmienia wyglądu gotowej strony. Styl All Sections obejmie Boxy ze znacznikiem section, a All Divs również Boxy ze znacznikiem div, jeśli projektant nada takim selektorom reguły.

To rozróżnienie ma znaczenie przy utrzymaniu gotowego projektu. Istniejący układ nie potrzebuje migracji tylko dlatego, że zmienił się panel; późniejsza edycja globalnego stylu może już objąć więcej elementów niż pojedyncza klasa. Wtedy źródłem zmiany wyglądu jest nowa reguła stylu, a nie samo pojawienie się Boxa.

Znacznik HTML i wygląd pełnią różne role

Box można ustawić jako div, section, nav, header, footer, main, article, aside, address lub figure. Wybrany tag można później zmienić bez wymiany elementu, a Nawigator pokazuje jego nazwę i ikonę. Projektant może dzięki temu oddzielić rolę fragmentu strony w HTML od sposobu ułożenia go na ekranie.

Na stronie portfolio główna zawartość może być oznaczona jako main, menu jako nav, a samodzielny opis realizacji jako article. Neutralny div odpowiada blokowi, który jedynie porządkuje inne elementy. Wybór section powinien wynikać z tego, czy dany obszar rzeczywiście stanowi część treści; ustawienie tagu samo w sobie nie tworzy sensownej struktury strony.

Ta sama logika działa przy stronie kursu i zapisie na newsletter. Program kursu może stanowić section, ale układ kart programu nadal wymaga odrębnego ustawienia stylu. Formularz zapisu można umieścić w odpowiednim obszarze strony bez przypisywania funkcji semantycznej każdemu blokowi służącemu wyłącznie do ustawienia odstępów.

Zmiana typu zwracanego przez Designer API

Najbardziej konkretna zmiana dla integracji dotyczy presetu Section. Webflow w changelogu Designer API podaje, że po jego użyciu zwracany jest teraz BlockElement o typie Block, taki jak dla Box i DivBlock. Kod sprawdzający element.type === 'Section' nie rozpozna więc nowo utworzonego elementu; warunek powinien sprawdzać Block.

Typ obiektu API i znacznik publikowany w HTML to różne informacje. Block może oznaczać element ustawiony jako div, section lub inny obsługiwany tag. Jeśli aplikacja musi odróżnić te role, po sprawdzeniu typu powinna odczytać tag metodą getTag(); do tworzenia nowych elementów służy webflow.elementPresets.Box, a tag można nadać przez setTag().

Presety DivBlock, Section, BlockContainer, Grid, Row, HFlex i VFlex nadal działają, choć są oznaczone jako przestarzałe. Samo oznaczenie nie zatrzymuje aplikacji, ale jej logika może pominąć utworzony element, gdy nadal oczekuje typu Section. W takiej sytuacji automatyzacja może dodać blok do strony i nie wykonać dalszej operacji przypisanej do dawnego typu.

Przeczytaj także: