Zastanawiasz się, jak budować szybsze układy w Beaver Builder? Jeśli przez jakiś czas budowałeś z WordPress, prawdopodobnie spędziłeś mnóstwo czasu, zastanawiając się, jak skonstruować złożone układy za pomocą wierszy i kolumn. Działa - ale nie zawsze było to najbardziej elastyczne lub wydajne podejście.

Właśnie dlatego Beaver Builder 2.9 był dla mnie taki zmienny. Ta aktualizacja wprowadziła dwie główne ulepszenia, które całkowicie przekształciły sposób, w jaki buduję strony, i myślę, że pokochasz elastyczność, jaką wnosi do twojego przepływu pracy:

• Moduły kontenerowe , takie jak moduł pudełka i moduł pętli, mogą być teraz używane jako elementy układu najwyższego poziomu -co oznacza, że ​​możesz całkowicie pomijać wiersze i kolumny, gdy nie są potrzebne.
• Podstawowe moduły Domyślnie wyświetlają html , usuwając dodatkowe opakowanie <div> i zwiększając ładowanie stron szybciej i potencjalnie lepsze w wyszukiwarkach.

Nie są to tylko ładne funkcje-reprezentują zmianę w kierunku bardziej intuicyjnego, opartego na wydajności sposobu budowania witryn WordPress. Jeśli chcesz poprawić swój przepływ pracy, prędkość strony i jakość kodu, ta aktualizacja jest absolutnie warta zbadania.

Pojemniki zajmują centralne miejsce

Porozmawiajmy najpierw o największej zmianie. W poprzednich wersjach Beaver Builder system wierszy i kolumny był twoją jedyną opcją do strukturyzacji układów. Każdy element na twojej stronie musiał żyć w tej frameworku.

Wyobraź sobie ten wspólny scenariusz: Chcesz utworzyć prostą sekcję wezwania do działania z nagłówkiem, tekstem i przyciskiem. W starym podejściu utworzysz wiersz, dodasz kolumnę do tego wiersza, a następnie dodaj moduły wewnątrz kolumny. Działało, ale dodało warstwy struktury, których tak naprawdę nie potrzebowałeś.

Oto jak to wyglądało:

Wiersz
Kolumna └wiąt
Moduł pudełkowy └wią
Moduł nagłówka └wią
Moduł tekstowy
Moduł przyciskowy └wią

Teraz w Beaver Builder 2.9 możesz całkowicie wyeliminować te dodatkowe warstwy. Moduły kontenerowe, takie jak moduł pudełka, mogą teraz służyć jako główne elementy układu, siedzące na najwyższym poziomie struktury strony.

Nowe, usprawnione podejście wygląda tak:

Moduł pudełkowy
Moduł nagłówka └wią
Moduł tekstowy
Moduł przyciskowy └wią

Nie chodzi tylko o mniej kliknięć w interfejsie (choć to też miłe). Chodzi o budowę układów pasujących do tego, jak naprawdę myślisz o projektowaniu. Jeśli jesteś podobny do mnie, kiedy wyobrażasz sobie sekcję treści, myślisz o pojemniku i tym, co się do niego idzie - nie o streszczeniu rzędu i siatce kolumnowej, która owija się wokół niego.

Dlaczego takie podejście ma sens

Ta zmiana idealnie pasuje do działania nowoczesnego CSS, szczególnie w przypadku FlexBox i CSS Grid. Te technologie pozwalają tworzyć wyrafinowane układy bez konieczności złożonych struktur zagnieżdżonych, a teraz interfejs Beaver Builder pasuje do tej rzeczywistości.

Korzyści wykraczają poza prostotę. Kiedy używasz modułów kontenerowych jako podstawowych elementów układu, otrzymujesz:

• Bardziej bezpośrednia kontrola nad odstępem, wyrównaniem i responsywnym zachowaniem. Zamiast zarządzania ustawieniami na wielu poziomach gniazdowania, możesz obsłużyć wszystko na poziomie kontenera.
• Szybsze iteracje projektowe , ponieważ spędzasz mniej czasu na nawigacji przez warstwy struktury i więcej koncentrując się na faktycznym projekcie.
• Lepsza wydajność , ponieważ przeglądarka jest mniej markupu HTML.
• Łatwiejsza konserwacja, gdy musisz wrócić i zmodyfikować układy później - czy to ty lub ktoś inny w twoim zespole.

Moduł pudełkowy: Twoja potęga układu

Moduł Box ma ulepszenie zmieniające grę. To, co kiedyś było prostym narzędziem użyteczności, przekształciło się w podstawowe podstawy do budowania elastycznych, nowoczesnych układów w Beaver Builder. To nie jest drobna aktualizacja-jest to całkowite przeprojektowanie, które pozycjonuje moduł pudełka w sercu procesu budowania stron:

Dzięki nowej zdolności do funkcjonowania jako element układu najwyższego poziomu, moduł pudełka może zastąpić tradycyjne opakowania wierszy, zarządzając wszystkim, od kolorów tła i obrazów po wyściółki i marginesy-bez potrzeby dodatkowego pojemnika nadrzędnego.

Ponadto moduł Box w pełni obsługuje właściwości FlexBox , zapewniając precyzyjną kontrolę nad wyrównaniem, odstępem i dystrybucją elementów dziecięcych w twoim układzie. Niezależnie od tego, czy chcesz gniazdować tekst, obrazy, przyciski, formularze, czy jakikolwiek inny moduł treści, moduł pudełka obsługuje go bezproblemowo.

Oznacza to, że możesz tworzyć złożone, responsywne układy za pomocą tylko modułu Boxa i modułów treści, których faktycznie potrzebujesz. Nigdy więcej tworzenia elementów strukturalnych tylko dlatego, że interfejs go wymagał.

Czystszy html pod maską

Podczas przemyślenia, w jaki sposób ustrukturyzujesz układy w Beaver Builder 2.9, sam budowniczy robi trochę oczyszczania za kulisami. Druga ważna aktualizacja w tej wersji usuwa niepotrzebne elementy opakowania <div> z podstawowych modułów - co stanowi znacznie szczuplejsze wyjście HTML.

We wcześniejszych wersjach moduły takie jak nagłówki, obrazy i przyciski zawierały dodatkowe <div> wokół rzeczywistej zawartości. To dodało złożoność i wzdęcia do znacznika, jak pokazano w poniższym przykładzie:

Przed Beaver Builder 2.9:

 <div class="fl-module fl-module-heading"> <div class="fl-module-content"> <h2>Welcome to Our Site</h2> </div> </div>

Po Beaver Builder 2.9:

 <h2>Welcome to Our Site</h2>

Ta zmiana zapewnia więcej niż tylko czystszy kod-poprawia rzeczywistą wydajność:

• Uproszczona stylizacja: Przy mniejszej liczbie zajęć opakowania możesz napisać CSS bardziej bezpośrednio - nie ma większej liczby zagnieżdżonych selektorów.
• Szybsze czasy ładowania: mniej elementów oznacza mniej przetwarzania przeglądarki.
• Lepsze SEO: czystszy, bardziej semantyczny HTML pomaga wyszukiwarkom zrozumieć Twoje treści.

Jeśli jesteś programistą lub agencją pracującą nad niestandardowymi motywami lub stronami klientów, docenisz jasność i wydajność, jaką przynosi ta aktualizacja. A ponieważ zmiana dotyczy tylko modułów dodanych po 2.9 (lub chyba, że ​​włączysz ustawienie Legacy), istniejące układy pozostają bezpieczne i kompatybilne.

Elastyczność bez łamania rzeczy

Teraz, jeśli myślisz: „Poczekaj - mój niestandardowy CSS opiera się na tych klasach opakowań!” -Nie martw się. BEAVER BUILDER 2.9 został zaprojektowany z myślą o tym. Aby zachować kompatybilność ze starszą stylistyką, możesz ponownie włączyć opakowanie <div> z jednym ustawieniem:

Jak przywrócić znaczniki starszego opakowania:

1. Przejdź do pulpitu WordPress
2. Przejdź do Ustawienia> Beaver Builder> Advanced
3. Włącz „Divs opakowania modułu siłowego”

Zalecamy jednak trzymanie tej funkcji, chyba że jest to absolutnie konieczne. Czystszy znaczniki nie tylko poprawia wydajność, ale także odzwierciedla najlepsze praktyki tworzenia nowoczesnych stron internetowych. Jeśli polegasz na starszych CSS, może to być świetna okazja do refaktora dla prostoty i długoterminowej możliwości utrzymania.

Wbudowana kompatybilność wsteczna

Jedna z najlepszych części Beaver Builder 2.9? Dostajesz wszystkie te nowoczesne ulepszenia bez ryzyka złamania istniejących stron.

Oto jak to działa:

• Istniejące moduły (te umieszczone przed aktualizacją do 2.9) będą nadal renderować swoją oryginalną strukturę opakowania.
• Nowe moduły dodane po aktualizacji automatycznie wykorzystają domyślnie nowy znacznik czyszczenia.

Ta podwójna strategia renderowania daje płynną ścieżkę przejściową: Twoje obecne układy pozostają nienaruszone, podczas gdy każda nowa treść, którą budujesz, korzysta z szybszej, lżejszej struktury.

Jak te zmiany poprawiają wydajność Twojej witryny

Beaver Builder 2.9 wprowadził potężne ulepszenia wydajności i przepływu pracy, które pomagają Twoim witrynom ładować szybciej, ranking wyższy i zapewniają płynniejsze wrażenia użytkownika.

Szybsze, szczuplejsze strony
Dzięki zmniejszonym elementom <div> i wsparciem modułów kontenerowych jako elementów najwyższego poziomu, układy są czystsze i lżejsze-przenoszące się do szybszych czasów ładowania i lepszego SEO.

Mądrzejsze strony do lądowania
Pomiń bałagan niepotrzebnych wierszy i kolumn. Teraz możesz budować elastyczne, wysoko konwertujące strony docelowe za pomocą modułów kontenerowych, takich jak moduł pudełkowy dla sekcji bohaterów i CTA.

Czystsze nagłówki i stopki
Moduł pudełkowy świeci również w nagłówkach i stopkach, pomagając tworzyć ustrukturyzowane, responsywne układy z mniejszym wysiłkiem i większą kontrolą.

Znaczniki przyjazne dla programistów
Pożegnaj się z nadmiernym gniazdowaniem. Usprawnione dane wyjściowe HTML upraszcza ukierunkowanie na CSS i zmniejsza problemy ze specyfiką, dzięki czemu niestandardowe rozwój łatwiejszym i łatwiejszym do utrzymania.

Wydajność nagradzana klienta
Dla agencji korzyści są jasne: szybsze strony, czystszy kod i bardziej nowoczesny proces kompilacji. Nawet jeśli Twoi klienci nie mówią „Dev”, zauważą różnicę w wydajności i polowaniu.

Mądrzejszy sposób budowy układów

Beaver Builder 2.9 to nie tylko kolejna aktualizacja funkcji - jest to przemyślany krok naprzód w zakresie budowania układu. Wprowadzając moduły kontenerowe jako elastyczne fundamenty układu i usprawnianie wyjścia HTML, ta wersja wprowadza Beaver Builder do nowoczesnych praktyk projektowania i rozwoju.

Wynik? Szybszy, czystszy, bardziej intuicyjny przepływ pracy, który oszczędza czas i zapewnia lepsze strony. Niezależnie od tego, czy tworzysz prostą witrynę broszurową, czy zarządzasz złożonym projektem klienta, ulepszenia te pomagają ci z łatwością budować - i pewność siebie.

Gotowy do wyrównywania twoich układów?
Zaktualizuj do Beaver Builder 2.9 i zacznij budować mądrzejsze, szczuplejsze i bardziej gotowe na przyszłość witryny.