Хотите знать, как построить более быстрые макеты в Beaver Builder? Если вы какое -то время строили с WordPress, вы, вероятно, потратили много времени на выяснение того, как структурировать сложные макеты, используя строки и столбцы. Это сработало - но это не всегда был самым гибким или эффективным подходом.

Вот почему Beaver Builder 2.9 для меня изменил ситуацию. Это обновление представило два основных улучшения, которые полностью изменили то, как я строю страницы, и я думаю, что вам понравится гибкость, которую она принесет вашему рабочему процессу:

• Модули контейнеров , такие как модуль коробки и модуль цикла, теперь могут использоваться в качестве элементов макета верхнего уровня , что означает, что вы можете вообще пропускать строки и столбцы, когда они не нужны.
• Основные модули теперь выводят очиститель HTML по умолчанию , удаляя дополнительные <div> и заставляя ваши страницы более быстрее и потенциально ранжируются в поисковых системах.

Это не просто хорошие функции-они представляют собой сдвиг в сторону более интуитивно понятного, основанного на производительности способа создания сайтов WordPress. Если вы хотите улучшить свой рабочий процесс, скорость страницы и качество кода, это обновление абсолютно стоит изучить.

Контейнеры занимают центральное место

Давайте сначала поговорим о самых больших изменениях. В предыдущих версиях Beaver Builder система строк и столбца была вашим единственным вариантом для структурирования макетов. Каждый элемент на вашей странице должен был жить в этой структуре.

Представьте себе этот общий сценарий: вы хотите создать простой раздел вызовов с заголовком, немного текста и кнопкой. В старом подходе вы создадите строку, добавите столбец в эту строку, затем добавите свои модули в столбце. Это сработало, но добавил слои структуры, которые вам действительно не нуждались.

Вот как это выглядело:

Ряд
└-- -колонна
└мобил модуль коробки
Module Module
Text Module
└мобильный модуль кнопки

Теперь в Beaver Builder 2.9 вы можете полностью устранить эти дополнительные слои. Контейнерные модули, такие как модуль коробки, теперь могут служить вашим основным элементом макета, сидя прямо на верхнем уровне структуры вашей страницы.

Новый, упорядоченный подход выглядит так:

Модуль коробки
Module Module
Text Module
└мобильный модуль кнопки

Речь идет не только о том, чтобы иметь меньше кликов в интерфейсе (хотя это тоже хорошо). Речь идет о создании макетов, которые соответствуют тому, как вы на самом деле думаете о дизайне. Если вы похожи на меня, когда вы представляете раздел контента, вы думаете о контейнере и о том, что входит в него, а не о абстрактной строке и сетке столбцов, которая оборачивается вокруг него.

Почему этот подход имеет смысл

Это изменение прекрасно соответствует тому, как работает современный CSS, особенно с Glexbox и CSS GRID. Эти технологии позволяют вам создавать сложные макеты без необходимости сложных вложенных структур, и теперь интерфейс Beaver Builder соответствует этой реальности.

Преимущества выходят за рамки простоты. Когда вы используете контейнерные модули в качестве основных элементов макета, вы получаете:

• Более прямой контроль над расстоянием, выравниванием и отзывчивым поведением. Вместо того, чтобы управлять настройками на нескольких уровнях гнездования, вы можете обрабатывать все на уровне контейнера.
• Более быстрые итерации дизайна , потому что вы тратите меньше времени на навигацию по слоям структуры и больше времени на то, чтобы сосредоточиться на фактическом дизайне.
• Лучшая производительность , поскольку браузер генерируется и обрабатывается более высокая оценка HTML.
• Упрощенное обслуживание , когда вам нужно вернуться и изменить макеты позже - будь то вы или кто -то еще в вашей команде.

Модуль коробки: ваш макет Powerhouse

Модуль коробки получил обновление, изменяющее игру. То, что когда -то было простым коммунальным инструментом, превратилось в основную основу для построения гибких современных макетов в бобр. Это не незначительное обновление-это полный редизайн, который позиционирует модуль коробки в основе вашего процесса построения страниц:

Благодаря своей новой способности функционировать как элемент макета верхнего уровня, модуль коробки может заменить традиционные обертки строк, управляя всем, от цветов фоновых и изображений до накладки и полей, без необходимости дополнительного родительского контейнера.

Кроме того, модуль Box полностью поддерживает свойства Flexbox , предоставляя вам точный контроль над выравниванием, расстоянием и распределением детских элементов внутри вашего макета. Независимо от того, хотите ли вы гнездовать текст, изображения, кнопки, формы или любой другой модуль содержимого, модуль коробки обрабатывает его плавно.

Это означает, что вы можете создать сложные, отзывчивые макеты, используя только модуль коробки и модули контента, которые вам действительно нужны. Больше не нужно создавать структурные элементы только потому, что интерфейс потребовал.

Чистый HTML под капюшоном

В то время как вы переосмысливаете, как вы структурируете макеты в Beaver Builder 2.9, сам строитель делает некоторую очистку за кулисами. Второе крупное обновление в этом выпуске удаляет ненужные элементы обертки <div> из основных модулей , что приводит к значительно более скудному выводу HTML.

В более ранних версиях такие модули, как заголовки, изображения и кнопки, включали дополнительный <div> вокруг фактического контента. Это добавило сложность и раздувание к разметке, как показано в следующем примере:

Перед бобр -строителем 2.9:

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

После Beaver Builder 2.9:

 <h2>Welcome to Our Site</h2>

Это изменение обеспечивает больше, чем просто более чистый код-он улучшает реальную производительность:

• Упрощенный стиль: с меньшим количеством классов обертки вы можете писать CSS более напрямую - не сражаться с вложенными селекторами.
• Более быстрое время нагрузки: меньше элементов означает меньше для браузера для обработки.
• Лучший SEO: чистый, более семантический HTML помогает поисковым системам понять ваш контент.

Если вы разработчик или агентство, работающее над пользовательскими темами или на сайтах клиентов, вы оцените ясность и эффективность, которую приносит это обновление. А поскольку изменение применяется только к модулям, добавленным после 2.9 (или если вы не включите настройку устаревшего), ваши существующие макеты остаются безопасными и совместимыми.

Гибкость, не нарушая вещи

Теперь, если вы думаете: «Подождите - мой пользовательский CSS полагается на эти классы обертки!» -Не волнуйтесь. Beaver Builder 2.9 был разработан с учетом этого. Чтобы сохранить совместимость со старым стилем, вы можете повторно включить <div> с одной настройкой:

Как восстановить наценку устаревшей обертки:

1. Перейти на свою панель инструментов WordPress
2. Перейдите к настройкам> Beaver Builder> Advanced
3. Включить «Force Module Orbper Div»

Тем не менее, мы рекомендуем сохранить эту функцию, если это не абсолютно необходимо. Чистая разметка не только повышает производительность, но и отражает современные передовые практики веб -разработки. Если вы полагаетесь на устаревшие CSS, это может быть прекрасной возможностью реформировать простоту и долгосрочную обслуживаемость.

Обратная совместимость встроена

Одна из лучших частей Beaver Builder 2.9? Вы получаете все эти современные улучшения без риска нарушения существующих сайтов.

Вот как это работает:

• Существующие модули (те, которые размещены до обновления до 2.9) будут продолжать отображаться с их оригинальной структурой обертки.
• Новые модули, добавленные после обновления, по умолчанию будут автоматически использовать новую чистящую наценку.

Эта стратегия двойного рендеринга дает вам плавный путь перехода: ваши текущие макеты остаются неповрежденными, в то время как любой новый контент, который вы создаете, получают выгоду от быстрой, более легкой структуры.

Как эти изменения улучшают производительность вашего сайта

Beaver Builder 2.9 ввел мощные улучшения производительности и рабочего процесса, которые помогают вашим сайтам загружаться быстрее, занимают более высокий рейтинг и обеспечивают более плавное пользовательское опыт.

Быстрее, стройные страницы
С уменьшенной оберткой <div> элементами и поддержкой для контейнерных модулей в качестве элементов верхнего уровня ваши макеты более чистые и легче, транслируя до более быстрого времени нагрузки и лучшего SEO.

Более умные целевые страницы
Пропустите беспорядок ненужных рядов и колонн. Теперь вы можете построить гибкие, высококвалифицированные целевые страницы, используя только контейнерные модули, такие как модуль коробки для разделов героев и CTA.

Чистые заголовки и нижние колонтитулы
Модуль коробки также сияет в заголовках и нижних колонтитулах, помогая вам создать структурированные, отзывчивые макеты с меньшими усилиями и большим контролем.

Предоставленная разработчиком разметка
Попрощайтесь с чрезмерным гнездованием. Упрощенная вывод HTML упрощает таргетинг CSS и снижает проблемы специфичности, делая индивидуальную разработку более простым и более обслуживаемым.

Кальцинированная производительность
Для агентств преимущества ясны: более быстрые сайты, более чистый код и более современный процесс сборки. Даже если ваши клиенты не говорят «Dev», они заметят разницу в производительности и полировке.

Более разумный способ создать макеты

Beaver Builder 2.9 - не просто еще одно обновление функции - это вдумчивый шаг вперед в том, как мы приближаемся к созданию макета. Внедряя контейнерные модули в качестве гибких фондов макета и оптимизируя вывод HTML, этот выпуск приводит Beaver Builder в соответствии с современными методами дизайна и разработки.

Результат? Более быстрый, более чистый, более интуитивно понятный рабочий процесс, который экономит ваше время и обеспечивает более эффективные страницы. Независимо от того, создаете ли вы простой сайт брошюры или управляете сложным клиентским проектом, эти улучшения помогают вам с легкостью создать и уверенность.

Готовы к выравниванию ваших макетов?
Обновите до Beaver Builder 2.9 и начните строить умнее, более скудные и более готовые к будущему сайты сегодня.