Скругление кнопки (close button) в Popup Elementor
Доработка стандартного всплывающего окна
Стандартные средства Elementor, не смотря на регулярные обновления, до сих пор не имеют возможность скруглить границы кнопки закрытия всплывающего окна Elementor.
В данной заметке, я предлагаю выйти из ситуации и доработать всплывающее окно — путем добавления CSS кода. Описанный метод подойдет владельцам PRO версии, т.к. понадобится редактор CSS кода.
Добавляем CSS в кнопку
Ниже, для вашего удобства – пошаговое руководство, к добавлению кастомного CSS кода в настройках всплывающего окна.
Первым делом необходимо открыть или создать наше всплывающее окно. Для верности эксперимента, откажитесь от предложенных готовых шаблонов.
После того, как будет создан пустой Popup, переедите в его настройки (шаг 1 – иконка шестеренки), далее Стиль (шаг 2), настройте цвет фона и цвет иконки.
Обратите внимание, наш Popup имеет заливку, цвет иконки (крестик), а также увеличенный размер (Size). Размер в дальнейшем можно выставить тот, который вам будет необходим.
Добавляем CSS код, задающий скругление и внутренний отступ.
Используйте числовые параметры под ваш дизайн и задачи.
selector .dialog-close-button
{border-radius: 50px;
padding: 8px;
}
selector .dialog-close-button
{border-radius: 10px;
padding: 4px;
}
