Хотите узнать о селекторах виджетов? Elementor ? Так что продолжайте читать эту статью.

В мире веб-дизайна тонкая настройка каждого элемента на странице необходима для создания уникального и профессионального пользовательского опыта. Elementor, один из самых популярных конструкторов страниц для WordPress, предлагает мощную функцию, которая позволяет вам нацеливаться именно на те элементы, которые вы хотите настроить: селекторы виджетов.

Селекторы виджетов Elementor позволяют применять стили. Пользовательский CSS к конкретным элементам вашего сайта, что дает вам полный контроль над внешним видом и поведением каждого виджета. Хотите ли вы изменить цвета, настроить поля или создать динамические визуальные эффекты, селекторы виджетов — это инструмент, необходимый для уточнения каждой детали вашего дизайна.

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

Если вы готовы поднять настройку своего сайта на новый уровень и освоить тонкости выбора виджетов в Elementor, продолжайте читать.


содержание

Зачем использовать селекторы виджетов Elementor?

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

1. Точность в персонализации

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

2. Гибкость дизайна

С помощью селекторов виджетов вы можете легко настроить различные аспекты дизайна, такие как цвета, поля, шрифты и фон. Эта гибкость имеет решающее значение для создания сложных и эстетически приятных макетов. Вы можете применять разные стили к каждому виджету в соответствии с требованиями вашего бренда или конкретными целями дизайна.

3. Оптимизация пользовательского опыта

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

4. Экономит время

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

5. Согласованность дизайна

Использование селекторов обеспечивает согласованность применения стилей в разных виджетах. Устанавливая определенные правила CSS, вы поддерживаете единообразный внешний вид всего сайта. Такая последовательность необходима для усиления визуальной идентичности вашего бренда и обеспечения единообразного пользовательского опыта.

6. Расширенный контроль взаимодействия

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

7. Простая отладка и обслуживание

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

Таким образом, селекторы виджетов Elementor предлагают точную настройку, гибкость дизайна и оптимизацию взаимодействия с пользователем. Используя их потенциал, вы можете создавать визуально привлекательные и функционально эффективные веб-сайты, экономя при этом время и обеспечивая единообразие всего вашего сайта.


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

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

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

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

вводить selector [selector name] {} в пользовательском поле CSS.

Вот пример.

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

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

Вот пример.

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

Примечание: У каждого виджета 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

Button

Виджет.элемент-кнопка
текст кнопки.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

Заголовок

Виджет.элемент-заголовок-название

Значок

Виджет.elementor-иконка

Иконка 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-описание
Контейнер изображения.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-подэлемент

Кнопка PayPal

Виджет.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, вам необходимо знать селектор соответствующего виджета.

другой Ressources Элементор:

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


Часто задаваемые вопросы по выбору виджетов Elementor

Как найти селектор CSS для определенного виджета?

Используйте инструмент инспектора вашего браузера, чтобы определить селектор CSS, связанный с виджетом. Щелкните правой кнопкой мыши виджет и выберите «Проверить».

Могу ли я использовать селекторы CSS в бесплатной версии Elementor?

Да, вы можете добавить собственный CSS в бесплатную версию через панель настройки WordPress тема.

Будут ли селекторы CSS влиять на все подобные виджеты?

Да, примененные селекторы CSS будут влиять на все виджеты, соответствующие критериям, определенным селектором.


Заключение

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

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

Освоив эти инструменты, вы оптимизируете представление своего контента и максимизируете визуальное воздействие каждого элемента на вашей странице. Не стесняйтесь экспериментировать с различными селекторами, чтобы открыть для себя все возможности, предлагаемые Elementor. Вы увидите, как эти изменения могут изменить ваши страницы и сделать их еще более привлекательными для пользователей.

Так ! Мы только что познакомили вас со списком селекторов виджетов Elementor. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.

Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...

Pin It на Pinterest