Список селекторов виджетов Elementor

Опубликовано: 2022-10-24

Одной из функций, доступных в Elementor Pro, является возможность добавления собственного CSS ( Читайте: Elementor Free vs Pro). Эта функция позволяет вам выйти за рамки, поскольку вы можете применить любой стиль, когда нужный стиль недоступен в списке параметров настройки. Чтобы добавить собственный стиль с помощью пользовательского CSS к определенному виджету Elementor (или элементам виджета), вам необходимо знать селектор связанного виджета. Мы собрали список селекторов виджетов Elementor, чтобы облегчить вашу работу.

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

Поскольку проверку виджета можно выполнить только на активной странице, проверка каждого из них займет много времени. Это то, что привело нас к созданию этого списка.

Как использовать селектор

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

Сначала выберите селектор элемента, на который вы хотите настроить таргетинг (например, значок кнопки). На панели настроек Elementor перейдите на вкладку « Дополнительно » и откройте блок « Пользовательский CSS ».

Введите selector [selector name] {} в настраиваемое поле CSS. Вот пример.

Затем добавьте свой CSS-контент (объявление) в фигурные скобки. Вот пример.