10 макетов сетки, сделанные с вложенными рядами Divi 5 (бесплатно скачать)

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

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

Давайте рассмотрим, как расширенные функции Divi 5 позволяют возможным эти творческие макеты в стиле сетки.

Divi 5 готов к использованию на новых веб -сайтах, но мы пока не рекомендуем конвертировать существующие сайты в Divi 5.

Ключевые функции Divi 5 для макетов сетки

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

Подписаться на наш канал на YouTube

Вложенные ряды

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

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

Настраиваемые точки останова

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

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

Модульные группы

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

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

Проектные переменные

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

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

Продвинутые единицы

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

Управление атрибутами

Управление атрибутами ускоряет процесс проектирования, позволяя вам копировать, вставить и сбросить атрибуты по элементам дизайна. Эта функция имеет первостепенное значение для применения последовательных стилей, таких как эффект наказания или интервал, к нескольким модулям. Сокращая повторяющиеся задачи, управление атрибутами позволяет вам сосредоточиться на творчестве, ускоряя разработку сложных сетей.

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

10 Примеры макета творческой сетки в Divi 5

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

1. Симметричная функция сетка

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

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

2. Масонство сетка

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

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

3. Интерактивная портфельная сеть

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

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

4. Витрина продукта сетка

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

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

5. Сетка члена команды

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

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

6. Services Grid

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

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

7. Сетка расписания мероприятий

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

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

8. Ценовая сетка стола

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

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

9. GAQ Accordion Grid

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

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

10. Изображение Gallery Grid

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

В приведенном ниже примере мы используем простой макет с четырьмя столбцами для демонстрации изображений. Для добавленного прикосновения мы включили Lightbox на изображениях и добавили модуль социального обмена в правом нижнем углу каждой фотографии.

Советы по созданию эффективных макетов сетки в Divi 5

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

1. Используйте вложенные ряды

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

2. Оптимизировать для отзывчивости

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

3. Используйте группы модулей для эффективности

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

4. Поддерживать согласованность с переменными дизайна

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

5. Экспериментируйте с продвинутыми подразделениями

Увеличивайте гибкость ваших сетей, используя передовые единицы, такие как VH, VW, REM, CALC () или Clamp () для динамического расстояния и размера. Эти единицы позволяют элементам сетки масштабировать плавно в зависимости от размера просмотра или настройки шрифта, обеспечивая отзывчивость и визуальный баланс.

Загрузите макеты секции сетки бесплатно

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

Загрузите файлы

Скачать бесплатно

Присоединяйтесь к информационному бюллетеню Divi, и мы отправим вам копию «Копия Ultimate Divi Landing Layout Page», а также множество других удивительных и бесплатных ресурсов Divi, советов и хитростей. Следуйте, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Скачать», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить свою подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Развязать креативность с Divi 5

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

Готовы ли вы исследовать возможности? Погрузитесь в публичную альфа Divi 5, чтобы экспериментировать с созданием макетов сетки. Как упоминалось ранее, Divi 5 подходит для новых сайтов, но мы не рекомендуем использовать его на существующих сайтах, по крайней мере, пока.

Мы хотели бы увидеть ваши творения. Поделитесь своими уникальными макетами сетки в наших социальных сетях или комментариями ниже.