• Elementor
  • Скругление кнопки (close button) в Popup Elementor
Поделиться:
Александр Базаров

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

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

Скругление кнопки (close button) в Popup Elementor

Доработка стандартного всплывающего окна

Скругляем кнопку popup Elementor

Стандартные средства Elementor, не смотря на регулярные обновления, до сих пор не имеют возможность скруглить границы кнопки закрытия всплывающего окна Elementor.

В данной заметке, я предлагаю выйти из ситуации и доработать всплывающее окно — путем добавления CSS кода. Описанный метод подойдет владельцам PRO версии, т.к. понадобится редактор CSS кода. 

Добавляем CSS в кнопку

Ниже, для вашего удобства – пошаговое руководство, к добавлению кастомного CSS кода в настройках всплывающего окна.

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

После того, как будет создан пустой Popup, переедите в его настройки (шаг 1 – иконка шестеренки), далее Стиль (шаг 2), настройте цвет фона и цвет иконки.

Обратите внимание, наш Popup имеет заливку, цвет иконки (крестик), а также увеличенный размер (Size). Размер в дальнейшем можно выставить тот, который вам будет необходим.

Добавляем CSS код, задающий скругление и внутренний отступ.

Используйте числовые параметры под ваш дизайн и задачи.

Вариант CSS кода круглой кнопки
				
					selector .dialog-close-button 
{border-radius: 50px;
    padding: 8px;
}
				
			
Вариант CSS кода скругленной кнопки
				
					selector .dialog-close-button 
{border-radius: 10px;
    padding: 4px;
}
				
			
0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

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

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