Наверно каждый составлял различные списки на своем сайте, будь то просто сайт-визитка или landing page. Список может использоваться в различных целях, от перечня ссылок на какие то документы, до перечисления преимуществ или же включенный услуг.
Обычно в wordpress мы создаем список с помощью редактора, простым выделение параграфов и нажимаем на кнопку "Маркированный список". В итоге получаем обычный список с маркеров в начале т.е точкой (по умолчанию). А что если нужно больше? Например поставить иконку перед элементом или безошибочно задать ссылку, а может установить разделитель строк. Все это возможно с помощью конструктора сайта и соответствующего виджета.
Виджет "Список с иконками" предназначен для отображения обычного маркированного списка с маркером в виде иконки. Виджет достаточно прост и не содержит в себе особых настроек, лишь стилевые настройки. Каждый элемент списка, это группа настроек в которой задается текст, иконка и ссылка при необходимости.
На примере выше, мы видим примеры виджета. Первый в списке, это виджет по умолчанию. Для данного виджета доступны различные стилевые настройки, а именно: расстояние, выравнивание, цвет иконки и текста, размеры, типографика и разделители. Ниже рассмотрим подробнее.
Стили
- Список
- Растояние - расстояние между элементами списка.
- Выравнивание - выравнивание всего списка относительно колонки.
- Разделитель - граница разделителя между элементами списка. При включении опции отображения разделителя, станут доступны и его свойства (стиль границы, толщина, цвет и ширина границы)
- Иконка
- Цвет - Общий цвет иконок списка. Свой цвет иконок для всех элементов списка
- Размер - размер иконок списка, т.е общий размер всех иконок виджета.
- Текст
- Отступ текста - отступ между текстом и иконкой.
- Цвет текста - общий цвет текста для текстовых элементов виджета
- Типографика - размер шрифта, название, насыщенность итд для текстов виджета.
Список с иконками — виджет Elementor: 8 комментариев
Здравствуйте. Благодарю за содержательную информацию. У меня есть вопрос по поводу виджета «Список с иконками». При его использовании если текст одного пункта из списка занимает 3-4 строки, то иконка становится на уровне 2-3 строки (посередине текста пункта). А хочется, чтобы иконка всегда находилась возле первого слова текстового пункта. Чтобы каждая иконка была возле каждого первого слова нового пункта списка. Это возможно?
Ссылка к этому вопросу:
https://olgachurikova.com/spisoksikonkami/
День добрый. К виджету добавьте свои стили. Как пример
selector li.elementor-icon-list-item {align-items: normal;}
selector .elementor-icon-list-icon {padding-top:5px;}
Благодарю! Как это делается? Возможно в бесплатной версии?
В бесплатной версии возможно, если добавить стили через настройки темы в консоли ворпресс. Стили добавлять без selector
Как делается… не описать, это нужно знать или уметь.
Благодарю за помощь!
Проблема решена.
Всех благ Вам!
Добавила в настройки темы в консоли. Расположение иконок не изменилось, не встало на начало каждого пункта списка. Может еще что-то можно туда вставить?
Благодарю за Ваше время!
Благодарю за помощь!
Проблема решена.
Всех благ Вам!