• Elementor
  • Выравнивание списка Elementor к иконке
Поделиться:
Александр Базаров

Александр Базаров

Автор статьи, разработчик

Выравнивание списка Elementor к иконке

Выравнивание иконки к списку Elementor

Виджет списка в Elementor

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

Главным недочетом стандартного виджета “Список с иконками” в Elementor является то, что по умолчанию у вас нет возможности центрировать иконку относительно первой строки текста — при использовании в каждом списке к примеру нескольких предложений.

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

Стандартный список
(по умолчанию)
Список с длинным текстом
Доработанный список (свой CSS код)

Добавление CSS в виджет списка Elementor

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

Чтобы добавить CSS код к виджету, кликните на него, далее перейдите в раздел “Расширенные”, после чего найдите вкладку Custom CSS – вставьте код в поле для редактирования. Данный метод подойдет владельцам Pro версии плагина.

				
					selector .elementor-icon-list-item {
    align-items: baseline;
    }
selector .elementor-icon-list-icon {
    padding-top: 5px;
}
				
			
Статьи по интересам:
0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Интересные разделы

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x