Представляем CSS GRID для Divi 5

Это большой. Мы построили лучший строитель CSS Grid, и он доступен для Divi 5 сегодня. Это лучше, чем элементар. Это лучше, чем кирпичи. Независимо от того, хотите ли вы освоить сетку или просто использовать новые шаблоны сети Divi, вам понравится это обновление.

Проверьте следующее видео, чтобы увидеть новую функцию в действии.

CSS GRID для всех

Divi 5 далеко от его предшественника. Мы превращаем Divi в мощность веб -дизайна с новыми функциями, такими как Flexbox, расширенные единицы, пресеты и переменные дизайна. CSS Grid - следующий большой шаг вперед.

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

Шаблоны сетки для любого случая

Если вы никогда не слышали о сетке CSS и не имеете желания выучить тонкости сетки, не волнуйтесь - вам не нужно. Наслаждайтесь новыми предварительно построенными шаблонами сетки!

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

Divi имеет шаблоны сетки для любой ситуации, и применение их к существующему контенту легко.

Полный контроль для экспертов с сети

Если вы опытный эксперт по сетке CSS, варианты сетки Divi не сдерживают вас. Вы можете подняться прямо к точке, вручную определить свой столбец и шаблоны сетки строк и создать различные сетки сетки, используя редактирование смещения, которое я буду коснуться позже.

Конечно, вы можете отказаться от интерфейса и применить правила сетки, используя также пользовательскую панель CSS; Все, что вам лучше всего подходит.

Интуитивно понятные варианты сетки для веб -сборщиков

Если вы где -то посередине, то строитель сетки Divi 5 действительно сияет.

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

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

Редактирование смещения сетки

Одним из самых уникальных аспектов Grid Builder's Divi 5 является редактор смещения, который вы можете использовать для создания повторяющихся несимметричных сетей на уровне контейнера. Позвольте мне привести вам реальный пример.

Я создал шаблон блога в видео ниже, используя строитель петли Divi 5; Каждый столбец представляет собой элемент петли, заполненный динамическим содержанием. Когда я включаю стиль макета сетки на родительском контейнере, столбцы автоматически соответствуют сетке.

Я могу настроить количество столбцов, введите пользовательские столбцы или шаблоны строки, изменить размеры разрыва и делать много других вещей.

Кроме того, я могу использовать редактор Offset для применения правил к конкретным элементам в сетке.

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

CSS GRID Demos (скачать бесплатно)

Вы можете создать впечатляющие макеты, используя сетку CSS, которые никогда не были возможны раньше. Если вы хотите вдохновение, посмотрите на эти потрясающие макеты, которые наша команда дизайнеров создала с использованием последней версии Divi 5.

Вы можете скачать их бесплатно и протестировать их самостоятельно.

Попробуйте Divi 5 сегодня

CSS GRID для Divi 5 доступна сегодня и является одной из многих функций в Divi в этом году.

Вы можете следовать, когда мы продвигаемся к окончательному выпуску Divi 5 и более, с обновлениями каждые две недели. В зависимости от ваших приоритетов, вы можете использовать Divi 5 сейчас, чтобы создать новые веб -сайты или подождать, пока мы не добавим больше функций, что лучше всего подходит для вас.

Как указано в оригинальном графике многофазного выпуска Divi 5, публичная альфа Divi 5 похожа на «Divi 5 Lite». В нем отсутствует несколько функций и может не подходить для существующих веб -сайтов, но он готов использовать на новых сайтах, если вы предпочитаете опыт Divi 4.

Мы хотим, чтобы вы попробовали это, и если вам это нравится, используйте его; Когда всем это нравится, мы сделаем это официальным.

Вы пробовали пользовательские атрибуты для Divi 5?

В случае, если вы пропустили его, мы недавно выпустили новые пользовательские атрибуты, которые позволяют добавлять любой атрибут, такой как ALT, Title, Rel и Aria-Label, к элементам и большинству подэлементов.

Divi получил поддержку конкретных атрибутов, таких как класс и ID, но теперь вы можете добавить любой атрибут в любой элемент. Это особенно важно для доступности, что позволяет вам, например, добавлять Alt Text к изображениям, а также роли и этикетки к неэмантическим элементам, таким как кнопка на основе значков.

Посмотрите это видео для всех деталей.

Больше обновлений Divi 5 в пути

2025 год - год Divi 5 . Утомительная работа позади нас. Мы построили супер-фанат, и теперь пришло время для Диви, чтобы вернуться.

Если вы здесь для возвращения Divi, сделайте нам огромную услугу и дайте нам знать, понравится это видео и оставив комментарий. Для нас очень много значит видеть, как вы подбадриваете Дивинг, и важно накормить алгоритм и распространить информацию.

Не забудьте подписаться на нас на YouTube и подписаться на информационный бюллетень Divi, чтобы вы никогда не пропустили обновление. Увидимся в ближайшее время для другого объявления о функции Divi 5, которое, как я обещаю, будет прямо за углом.