9 карт, созданные с вложенными строками и группами Divi 5

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

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

Давайте погрузимся!

Понимание вложенных рядов и групп модулей в Divi 5

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

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

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

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

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

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

Почему они хорошо работают вместе

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

9 карт для Divi 5

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

1. Планы ценообразования

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

2. Услуги

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

3. Ресторанные пункты меню

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

4. Bios члена команды

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

5. Клиентские показания

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

6. Список событий

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

7. Список недвижимости

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

8. Дисплей продукта

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

9. Видео -галерея

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

Лучшие методы создания и повторного использования расширенных макетов карт

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

Стиль последовательно

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

Сохранить группы модулей для повторного использования

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

Отзывчивый дизайн

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

Используйте пресеты для быстрых обновлений

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

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

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

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

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

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

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

СКАЧАТЬ

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

Создание макетов карт с Divi 5 - это ветерок

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

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