Web5X - Готовые сайты

Блог о создании сайта, конструкторе сайтов и Elementor

заставка - виджет список с иконками для конструктора сайтов

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

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

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

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

виджет список с иконками для конструктора сайтов

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

Стили

- Список

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

- Иконка

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

- Текст

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

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

  1. Здравствуйте. Благодарю за содержательную информацию. У меня есть вопрос по поводу виджета «Список с иконками». При его использовании если текст одного пункта из списка занимает 3-4 строки, то иконка становится на уровне 2-3 строки (посередине текста пункта). А хочется, чтобы иконка всегда находилась возле первого слова текстового пункта. Чтобы каждая иконка была возле каждого первого слова нового пункта списка. Это возможно?

      1. День добрый. К виджету добавьте свои стили. Как пример
        selector li.elementor-icon-list-item {align-items: normal;}
        selector .elementor-icon-list-icon {padding-top:5px;}

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

  2. Добавила в настройки темы в консоли. Расположение иконок не изменилось, не встало на начало каждого пункта списка. Может еще что-то можно туда вставить?
    Благодарю за Ваше время!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Реклама

Готовые сайты за 3000 рублей. Купить готовый сайт с конструктором это реально. А создать сайт можно дешево, быстро и просто.
Купить сайт на web5x.ru

Блог о создании сайта, конструкторе сайтов и Elementor.
Авторские права © 2017-2021 . Все права защищены.
Готовые сайты на web5x.ru
Политика конфиденциальности