Elementor css

Итак, допустим нам нужно изменить стиль какого-либо виджета в Elementor, но стандартные настройки нам не помогают.

Всего 4 действия:

1. Переходим на вкладку «Расширенные» (см. фото)
2. Открываем раздел «Elemblock произвольный CSS»
3. Используем слово «selector» для указания родительского элемента.
4. Пишем свой css код.

Изменения происходят мгновенно!

Так как код применяется только к конкретному элементу, (ввиду того, что в элементоре для каждого виджета есть свой номер) данный css код затронет именно этот элемент.

Можно изменить не только основной, но также и дочерний элемент (внутри родительского).

Например, нам нужно скруглить углы изображения у виджета «Блок с изображением» при наведении, css код будет таким:

selector .elementor-image-box-img img:hover {
border-radius: 50%;
}

Или при наведении на сам блок, а не только на изображение:
selector:hover .elementor-image-box-img img {
border-radius: 50%;
}