Список с иконками — виджет Elementor

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

Обычно в wordpress мы создаем список с помощью редактора, простым выделение параграфов и нажимаем на кнопку "Маркированный список". В итоге получаем обычный список с маркеров в начале т.е точкой (по умолчанию). А что если нужно больше? Например поставить иконку перед элементом или безошибочно задать ссылку, а может установить разделитель строк. Все это возможно с помощью конструктора сайта и соответствующего виджета.

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

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

Стили

- Список

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

- Иконка

• Цвет - Общий цвет иконок списка. Свой цвет иконок для всех элементов списка
• Размер - размер иконок списка, т.е общий размер всех иконок виджета.

- Текст

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