Выравнивание списка Elementor к иконке
Виджет списка в Elementor
В Elementor виджет “Список с иконками” позволяет создавать списки как с добавлением иконок, так и использовать ваши данные без графического элемента, при этом у вас есть возможность корректировать и настраивать стили к тексту и иконке, выбрать позиционирование самого виджета относительно блока или контейнера.
Главным недочетом стандартного виджета “Список с иконками” в Elementor является то, что по умолчанию у вас нет возможности центрировать иконку относительно первой строки текста — при использовании в каждом списке к примеру нескольких предложений.
Для того, чтобы решить данную проблему и немного доработать виджет, нам понадобится простой код CSS который мы добавим самостоятельно. Прежде чем приступить, предлагаю ознакомится с наглядными примерами ниже:
(по умолчанию)
- Элемент списка #1
- Элемент списка #2
- Элемент списка #3
- Демо текст - для наглядности центрирования текста к иконке
- Демо текст - для наглядности центрирования текста к иконке
Добавление CSS в виджет списка Elementor
Для того, чтобы сместить и центрировать иконку в вашем списке относительно первой строки, необходимо добавить простой код в редактор CSS вашего виджета со списком.
Чтобы добавить CSS код к виджету, кликните на него, далее перейдите в раздел “Расширенные”, после чего найдите вкладку Custom CSS – вставьте код в поле для редактирования. Данный метод подойдет владельцам Pro версии плагина.
selector .elementor-icon-list-item {
align-items: baseline;
}
selector .elementor-icon-list-icon {
padding-top: 5px;
}
