Все, что вам нужно знать о модуле списка значков Divi 5

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

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

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

Что такое модуль списка значков?

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

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

Ключевые функции

Модуль списка значков имеет функции, которые делают его отличным дополнением к Divi 5. Вот его ключевые функции:

Легкое создание списка

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

Обширные варианты настройки

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

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

Как использовать модуль списка значков

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

После добавления модуля вы увидите три элемента списка значков на вкладке Content. Давайте начнем с нажатия первого, чтобы отредактировать его.

На вкладке Content введите заголовок в текстовом поле .

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

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

Вкладка «Дизайн» - это то, где вы можете стилизовать свои элементы списка значков. В выпадающем меню значка назначьте цвет и размер значков.

На вкладке «Фоны» вы можете назначить свой значок цветом фона, добавить тень границы или коробки и регулировать интервал.

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

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

После того, как вы создали первый элемент списка значков, вы можете легко скопировать его, изменить значок и обновить текст.

Добавление места между элементами списка значков

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

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

По умолчанию Flex выбирается в стиле макета. Это позволяет вам использовать настройки Flexbox от Divi 5 для управления интервалом, направлениями макета и выравнивания. Чтобы добавить расстояние между каждым элементом списка значков, просто настройте вертикальный разрыв. Это добавляет передышку между каждым предметом, что дает наш список более визуальную привлекательность.

Универсальные настройки дизайна для всех элементов списка значков

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

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

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

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

Путешествие блоги

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

Функции на бизнес -сайте

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

Пошаговое руководство процесса

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

Страницы магазина электронной коммерции

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

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

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

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

СКАЧАТЬ

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

Используйте модуль списка значков в Divi 5

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

Готовы попробовать? Загрузите последнюю публичную Alpha Today и сами изучите модуль списка значков. Следите за обновлениями Divi 5, когда мы разрабатываем новые функции.