Хотите найти селекторы виджетов Elementor ?
Одна из функций, доступных на Факир Pro
Чтобы добавить собственный стиль с помощью пользовательского CSS для определенного виджета Elementor , вам необходимо знать селектор соответствующего виджета. Мы собрали список селекторов виджетов Elementor чтобы облегчить вашу работу.
Каждый виджет Elementor — и его элементы — имеет селектор CSS, который вы можете использовать для выбора связанного виджета, когда хотите добавить собственный CSS для достижения определенного стиля. Вы можете найти селектор, просмотрев виджет, к которому вы хотите добавить пользовательский CSS.
Поскольку проверку виджета можно выполнить только на активной странице, проверка каждого из них займет много времени. Это то, что привело нас к созданию этого списка.
Как использовать селектор
Предположим, вы хотите применить различный размер между значком и текстом на кнопке. Поскольку параметр настройки по умолчанию не позволяет вам установить другой размер между значком кнопки и текстом, вы можете добиться этого с помощью пользовательского CSS. Вы можете настроить значок или текст для применения пользовательского CSS.
Сначала выберите селектор элемента, на который вы хотите настроить таргетинг (например, значок кнопки). В панели настроек элемента перейдите на вкладку Передовой и открыть блок Пользовательский CSS .
вводить selector [selector name] {} в пользовательском поле CSS.
Вот пример.
Затем добавьте свой содержание CSS (объявление) внутри фигурных скобок.
Вот пример.
Примечание: У каждого виджета Elementor есть родительский элемент (обертка). Войти selector {} (без имени селектора) означает нацеливание на оболочку.
Список выбора виджетов Elementor
Аккордеон
Виджет .elementor-аккордеон Название аккордеона .элемент-аккордеон-название Аккордеон Описание .элемент-вкладка-контент Аккордеонная икона Открыть .elementor-accordion-icon Аккордеонная икона закрыта .elementor-accordion-icon-closed
Оповещение
Виджет .elementor-оповещение Заголовок предупреждения .elementor-предупреждение-название Оповещение Описание .elementor-предупреждение-описание Закрыть значок .elementor-предупреждение-увольнение
Анимированный заголовок
Виджет .elementor-заголовок Статический текст .elementor-заголовок-обычный текст Динамический текст .elementor-заголовок-динамическая-обертка
Описание архива
Архивный текст .элемент-заголовок-название
Архив сообщений
Виджет .элемент-виджет-контейнер Опубликовать элемент .elementor-сетка-элемент Изображение .elementor-post__thumbnail Значок на скине карты .elementor-post__badge Аватар на карточной скине img.аватар Область текстового содержимого .elementor-post__text Заголовок поста .elementor-post__title после Отрывок .elementor-post__excerpt Узнать больше .elementor-post__подробнее Почтовая метаобласть .elementor-post__meta-данные Дата публикации .elementor-после-дата Сообщение .elementor-пост-автор Время поста .elementor-пост-время Оставить комментарий .elementor-пост-аватар Нумерация страниц .elementor-разбиение на страницы Предыдущий ярлык .page-numbers.prev следующая метка .page-numbers.следующий Номер страницы .page-номера Номер активной страницы .page-numbers.current Кнопка Загрузить еще .elementor-кнопка-ссылка Значок кнопки «Загрузить больше» .elementor-кнопка-значок
Коробка автора
Виджет .elementor-автор-коробка Аватара .elementor-автор-бокс__аватар Имя автора .elementor-автор-box__name Автор Био .elementor-автор-box__bio Кнопка архивации .elementor-автор-box__button
Основная галерея
Виджет .elementor-галерея изображений Предмет галереи .галерея-элемент Подпись .wp-заголовок-текст
BLOCKQUOTE
Виджет .elementor-blockquote Блокировать контент .elementor-blockquote__content Автор цитаты .elementor-blockquote__author Значок твита .elementor-blockquote__tweet-button Ярлык твита .elementor-blockquote__tweet-label
Виджет .элемент-кнопка текст кнопки .elementor-кнопка-текст Значок кнопки .elementor-кнопка-значок
Призыв к действию
Виджет .elementor-cta Заглавное изображение .elementor-cta__bg лента .elementor-лента Текст ленты .элемент-лента-внутренний Название контента .elementor-cta__title Содержание Описание .elementor-cta__description Кнопка содержимого .elementor-cta__button
Обратный отсчет
Виджет .elementor-обратный отсчет-обертка Дней .elementor-обратный отсчет дней Часов .elementor-обратный отсчет часов Минут .elementor-обратный отсчет минут Секунд .elementor-обратный отсчет секунд Этикетка обратного отсчета .elementor-метка обратного отсчета
счетчик
Виджет .elementor-счетчик Префикс номера .элемент-счетчик-число-префикс Номер регистрации .элемент-счетчик-число Суффикс номера .элемент-счетчик-номер-суффикс Название .elementor-встречное-заголовок
Делитель
Виджет .элемент-делитель Разделитель .элемент-разделитель-разделитель Элемент текста/значка .elementor-divider__element
Флип-бокс
Виджет .elementor-флип-бокс Передний контейнер .elementor-flip-box__front БэкКонтейнер .elementor-flip-box__back Контейнер содержимого .elementor-flip-box__layer__inner Название контента .elementor-flip-box__layer__title Содержание Описание .elementor-flip-box__layer__description Кнопка содержимого .elementor-flip-box__button
Виджет .elementor-форма Шаговый контейнер .e-form__индикаторы Количество шагов .e-form__indicators__indicator Метка поля .elementor-метка поля Текст поля .elementor-поле-текстовое Метка текстового поля .элемент-поле-тип-текст Метка поля текстовой области .элемент-поле-тип-текстовое поле Метка поля электронной почты .elementor-поле-тип-электронной почты Метка поля URL .elementor-поле-тип-url Метка поля Тел. .elementor-поле-тип-телефон Метка радиополя .elementor-поле-тип-радио Выберите метку поля .elementor-field-type-select Метка поля флажка .элемент-поле-тип-флажок Принятие метки поля .элемент-поле-принятие типа Метка поля даты .элемент-поле-тип-дата Метка поля времени .элемент-поле-тип-время Метка поля номера .элемент-поле-тип-номер Метка поля загрузки файла .elementor-поле-тип-загрузка Следующая кнопка электронная форма__кнопки__обертка__кнопка-далее Предыдущая кнопка .e-form__buttons__wrapper__button-предыдущий Разместить кнопку .элемент-кнопка
Фото
Название галереи (для нескольких галерей) .elementor-галерея-название Предмет галереи .элемент-галерея-элемент Описание (на оверлее) .elementor-галерея-item__description
Заголовок
Виджет .элемент-заголовок-название
Значок
Иконка Box
Виджет .elementor-icon-box-обертка Значок .elementor-иконка Контейнер содержимого .elementor-icon-box-content Название контента .elementor-icon-box-title Содержание Описание .elementor-icon-box-description
Список иконок
Значок списка .elementor-icon-list-icon СписокТекст .elementor-значок-список-текст
Фото товара
Фото товара IMG Подпись .wp-заголовок-текст
Image Box
Фото товара .elementor-image-box-img ТекстКонтейнер .elementor-image-box-content Название контента .elementor-image-box-title Содержание Описание elementor-image-box-описание
Image Carousel
Контейнер изображения .swiper-слайд ИзображениеЭлемент .swiper-слайд-изображение Контейнер пагинации .swiper-разбиение на страницы Пагинация точек .swiper-пагинация-пуля Предыдущий значок .elementor-swiper-button-prev Следующая .elementor-swiper-button-следующий Заголовок изображения .elementor-изображение-карусель-заголовок
МедиаЭлемент .elementor-carousel-изображение Наложение элемента мультимедиа .elementor-карусель-изображение-оверлей Точечная пагинация .swiper-pagination-fraction Предыдущая кнопка .eicon-chevron-left Следующая кнопка .eicon-chevron-right Разбивка на страницы .swiper-pagination-fraction Разбиение на страницы индикатора выполнения .swiper-pagination-progressbar Заполнение страницы индикатора выполнения .swiper-pagination-progressbar-fill
Переключатель мобильного меню .elementor-меню-переключатель Значок мобильного меню .eicon-меню-бар Обычное меню .elementor-nav-меню Выпадающее .elementor-nav-menu–выпадающее меню Пункт меню с подменю .elementor-item.has-подменю Пункт подменю .elementor-подэлемент
Виджет .elementor-кнопка оплаты Значок кнопки PayPal .elementor-кнопка-значок Текст кнопки PayPal .elementor-кнопка-текст
Портфолио
Портфолио Пункт .elementor-элемент-портфолио Элемент портфолио на оверлее .elementor-portfolio-item__overlay Название наложения .elementor-portfolio-item__title Фильтр портфолио .elementor-portfolio__filter
Заголовок ответа .comment-ответ-название Как сформировать площадь .comment-форма Форма комментария .комментарий-форма-комментарий Разместить кнопку .form-отправить
Сообщение
Виджет .elementor-post-info Аватара .elementor-аватар Список иконок .elementor-icon-list-icon Значок Текст .elementor-значок-список-текст
Post Navigation
Виджет .elementor-пост-навигации Предыдущий значок .post-navigation__arrow-prev Предыдущий ярлык .post-navigation__prev–метка Название предыдущей записи .post-navigation__prev–название Следующий значок .post-navigation__arrow-следующий следующая метка .post-navigation__next–метка Заголовок следующего сообщения .post-navigation__next–название
Блог
Опубликовать элемент .элемент-пост Изображение .elementor-post__thumbnail Значок на скине карты .elementor-post__badge Аватар на карточной скине img.аватар Область текстового содержимого .elementor-post__text Заголовок поста .elementor-post__title после Отрывок .elementor-post__excerpt Узнать больше .elementor-post__подробнее Почтовая метаобласть .elementor-post__meta-данные Дата публикации .elementor-после-дата Сообщение .elementor-пост-автор Время поста .elementor-пост-время Оставить комментарий .elementor-пост-аватар Нумерация страниц .elementor-разбиение на страницы Предыдущий ярлык .page-numbers.prev следующая метка .page-numbers.следующий Номер страницы .page-номера Номер активной страницы .page-numbers.current Кнопка Загрузить еще .elementor-кнопка-ссылка Значок кнопки «Загрузить больше» .elementor-кнопка-значок
Заголовок поста
Виджет .элемент-заголовок-название
Прайс
Виджет .elementor-прайс-лист Пункт списка .elementor-прайс-лист Изображение элемента списка .elementor-прейскурант-изображение Текст элемента списка .elementor-прайс-лист-текст Заголовок элемента списка .elementor-прайс-лист-заголовок Название элемента списка .elementor-прайс-название Разделитель элементов списка .elementor-прайс-лист-разделитель Цена предмета списка .elementor-прайс-лист-цена Элемент списка Описание .elementor-прайс-лист-описание
Таблица цен
Виджет .elementor-таблица цен Заголовок таблицы .elementor-price-table__header Заголовок таблицы .elementor-price-table__heading Заголовок таблицы Описание .elementor-price-table__subheading Цена .elementor-price-table__price Валюта .elementor-price-table__currency Номер после цены .elementor-price-table__after-price Ценовой период .elementor-цена-таблица__период Область списка функций .element-price-table__features-list Элемент списка функций .elementor-price-table__feature-inner Таблица Footer .elementor-price-table__footer Кнопка нижнего колонтитула таблицы .elementor-price-table__button Текст нижнего колонтитула таблицы .elementor-price-table__additional_info лента .elementor-цена-таблица__лента Внутренняя лента .elementor-цена-таблица__лента-внутренняя
Progress Bar
Progress Bar .elementor-прогресс-бар Фон прогресса .elementor-прогресс-обертка Название прогресса .элемент-название Внутренний текст прогресса .elementor-прогресс-текст Процент прогресса .elementor-прогресс-процент
Трекер прогресса
Виджет .elementor-прокрутка-трекер Прогресс .текущий-прогресс-процент
Отзывы
Виджет .elementor-swiper Обзор элемента .swiper-слайд Заголовок обзора .elementor-testimonial__header Рецензент изображения .elementor-testimonial__image Имя рецензента .elementor-testimonial__name Название рецензента .elementor-testimonial__title Содержание отзыва .elementor-testimonial__content Текст отзыва .elementor-testimonial__text Точечная пагинация .swiper-пагинация-пуля Разбивка на страницы .swiper-pagination-fraction Текущая нумерация страниц дроби .swiper-pagination-current Доля Пагинация Итого .swiper-pagination-total Разбиение на страницы индикатора выполнения .swiper-pagination-progressbar Заполнение страницы индикатора выполнения .swiper-pagination-progressbar-fill Предыдущая кнопка .eicon-chevron-left Следующая кнопка .eicon-chevron-right
Элемент кнопки .elementor-share-btn Значок кнопки .elementor-share-btn__icon текст кнопки .elementor-share-btn__text
Горки
Виджет .elementor-слайды-обертка Область содержимого .swiper-слайд-содержание Содержание Заголовок .elementor-слайд-заголовок Содержание Описание .elementor-слайд-описание Кнопка содержимого .elementor-слайд-кнопка Точечная пагинация .swiper-пагинация-пуля Предыдущая кнопка .eicon-chevron-left Следующая кнопка .eicon-chevron-right
Иконки
Виджет .elementor-социальные иконки-обертка Значок Элемент .elementor-социальная иконка
Звезда Рейтинг
Виджет .elementor-star-rating__wrapper Название рейтинга .elementor-звездный рейтинг__название Область значка звезды .elementor-звездный рейтинг Заполненная икона звезды .elementor-звезда-полный Значок полузаполненной звезды .элемент-звезда-5 Пустая икона звезды .элемент-звезда-пустой
Содержание
Виджет .элемент-виджет-контейнер Заголовок оглавления .elementor-toc__header Название заголовка оглавления .elementor-toc__header-название Кнопка «Развернуть» .elementor-toc__toggle-button — развернуть Кнопка "Свернуть" .elementor-toc__toggle-button — развернуть Основная часть оглавления .elementor-toc__body Пункт списка оглавления .elementor-toc__элемент-списка Верхний уровень оглавления .elementor-toc__list-item-text.elementor-toc__top-level
Tabs
Виджет .elementor-вкладки Название вкладки .элемент-вкладка-название Tab Content .элемент-вкладка-контент
Testimonial
Виджет .elementor-testimonial-обертка Содержание отзыва .elementor-отзыв-контент Отзыв Мета .elementor-отзыв-мета Отзыв аватара .elementor-отзыв-изображение Свидетельство Имя и Должность .elementor-отзыв-детали Имя отзыва .elementor-имя-отзыва Название должности .elementor-отзыв-работа
Отзыв Карусель
Виджет .элемент-виджет-контейнер Слайд с отзывом .elementor-отзыв Содержание отзыва .elementor-testimonial__content Отзыв Мета .elementor-testimonial__footer Отзыв аватара .elementor-testimonial__image Свидетельство Имя и Должность .elementor-testimonial__cite Имя отзыва .elementor-testimonial__name Название должности .elementor-testimonial__title Точечная пагинация .swiper-пагинация-пуля Разбивка на страницы .swiper-pagination-fraction Текущая нумерация страниц дроби .swiper-pagination-current Доля Пагинация Итого .swiper-pagination-total Разбиение на страницы индикатора выполнения .swiper-pagination-progressbar Заполнение страницы индикатора выполнения .swiper-pagination-progressbar-fill Предыдущая кнопка .eicon-chevron-left Следующая кнопка .eicon-chevron-right
Текстовый редактор
Виджет .элемент-текстовый редактор
Переключать
Виджет .элемент-переключить Переключить элемент .элемент-переключатель-элемент Переключить название элемента .элемент-вкладка-название Переключить содержимое элемента .элемент-вкладка-контент Значок переключения .elementor-toggle-icon Переключить значок Закрыто .elementor-toggle-icon-closed Открыть значок переключения .elementor-toggle-icon-open
Хотя Elementor предлагает множество вариантов стилей для каждого виджета, вы можете выйти за рамки этого с помощью собственного CSS. Чтобы применить пользовательский стиль к виджету (или его элементам) с помощью пользовательского CSS, вам необходимо знать селектор соответствующего виджета.
Другие ресурсы Elementor:
Вы можете просто проверить виджет на активной странице, чтобы найти его селектор. Чтобы сэкономить ваше время, мы создали список селекторов виджетов Elementor, поэтому вам не нужно проверять каждый виджет самостоятельно.
Заключение
Так! Мы только что представили вам список селекторов виджетов Elementor. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии
Тем не менее, вы также можете проконсультироваться наши ресурсы Создание блога на WordPress Divi: лучшая тема WordPress всех времен
Но тем временем поделитесь этой статьей в разных социальных сетях
...
Мне это нравится : как Loading ...
Похожие товары
