Você gostaria de encontrar os seletores de widgets Elementor ?
Um dos recursos disponíveis no Elementor Pro
Para adicionar estilo personalizado via CSS personalizado a um determinado widget Elementor , você precisa conhecer o seletor do widget associado. Coletamos a lista de seletores de widgets Elementor para facilitar o seu trabalho.
Cada widget Elementor — e seus elementos — tem um seletor de CSS que você pode usar para direcionar o widget associado quando quiser adicionar CSS personalizado para obter um determinado estilo. Você pode encontrar o seletor inspecionando o widget ao qual deseja adicionar o CSS personalizado.
Como a inspeção de um widget só pode ser feita em uma página ao vivo, levará muito tempo para inspecionar cada um. Foi isso que nos levou a criar esta lista.
Como usar um seletor
Suponha que você queira aplicar um tamanho diferente entre ícone e texto em um botão. Como a opção de configuração padrão não permite definir um tamanho diferente entre o ícone do botão e o texto, você pode fazer isso por meio de CSS personalizado. Você pode direcionar ícone ou texto para aplicar CSS personalizado.
Primeiro, selecione o seletor do elemento que deseja segmentar (por exemplo, o ícone do botão). No painel de configurações do elemento, vá para a guia avançado e abra o bloco CSS personalizado .
Digitar selector [selector name] {} no campo CSS personalizado.
Aqui está o exemplo.
Em seguida, adicione o seu conteúdo CSS (declaração) entre colchetes.
Aqui está o exemplo.
Nota: Todo widget Elementor tem um elemento pai ( wrapper ). Digitar selector {} (sem o nome do seletor) significa direcionar o wrapper.
Lista de seletores de widgets Elementor
Acordeão
O widget .elementor-acordeão Título de acordeão .elementor-acordeão-título Descrição do acordeão .elementor-tab-content Ícone de acordeão aberto .elementor-acordeão-ícone Ícone de Acordeão Fechado .elementor-acordeão-icon-closed
Alertar
O widget .elementor-alert Título do alerta .elementor-alert-title Descrição do alerta .elementor-alert-descrição Dispensar ícone .elementor-alert-dismiss
Título Animado
O widget .elementor-título Texto estático .elementor-headline-texto simples Texto Dinâmico .elementor-headline-dynamic-wrapper
Descrição do Arquivo
Arquivo de texto .elementor-cabeçalho-título
Arquivo Posts
O widget .elementor-widget-container Postar item .elementor-grid-item Imagem em destaque .elementor-post__thumbnail Emblema na skin dos cartões .elementor-post__badge Aparência de avatar em cartões img.avatar Área de conteúdo de texto .elementor-post__texto Título do Post .elementor-post__title pós Trecho .elementor-post__excerpt Saiba Mais .elementor-post__leia mais Postar Meta Área .elementor-post__meta-dados Data de postagem .elementor-pós-data Post Autor .elementor-post-autor Hora da postagem .elementor-pós-tempo Postar Comentário .elementor-pós-avatar Paginação .elementor-paginação Etiqueta anterior .page-numbers.anterior próximo rótulo .números de página.próximo Número de paginação .números de página Número de paginação ativa .números de página.atual Botão Carregar Mais .elementor-botão-link Ícone do botão Carregar mais .elementor-botão-ícone
Caixa do Autor
O widget .elementor-autor-caixa Avatar .elementor-autor-box__avatar Nome do Autor .elementor-autor-box__name Autor Bio .elementor-autor-box__bio Botão Arquivar .elementor-autor-box__button
Galeria básica
O widget .elementor-image-galeria Item da Galeria .itens da galeria Subtítulo .wp-caption-texto
Blockquote
O widget .elementor-blockquote Conteúdo de citação em bloco .elementor-blockquote__content Autor de Blockquote .elementor-blockquote__autor Ícone do Tweet .elementor-blockquote__tweet-button Etiqueta do Tweet .elementor-blockquote__tweet-label
O widget .elementor-botão Texto do botão .elementor-botão-texto Ícone de botão .elementor-botão-ícone
Chamada para Ação
O widget .elementor-cta Imagem do cabeçalho .elementor-cta__bg fita .elementor-fita Texto da faixa de opções .elementor-ribbon-inner Título do Conteúdo .elementor-cta__title Descrição do conteúdo .elementor-cta__descrição Botão de conteúdo .elementor-cta__button
Contagem regressiva
O widget .elementor-contagem regressiva wrapper dias .elementor-contagem regressiva de dias horas .elementor-contagem regressiva-horas Minutos .elementor-contagem regressiva de minutos segundos .elementor-contagem regressiva de segundos Etiqueta de contagem regressiva .elementor-countdown-label
Contador
O widget .elementor-contador Prefixo do número .element-counter-number-prefix Sessão .elemento-contador-número Sufixo numérico .element-counter-number-suffix Título .elementor-contra-título
Divisor
O widget .elementor-divisor separador .elementor-divisor-separador Elemento de texto/ícone .elementor-divider__element
Flip box
O widget .elementor-flip-box Recipiente Frontal .elementor-flip-box__front BackContainer .elementor-flip-box__back Contêiner de conteúdo .elementor-flip-box__layer__inner Título do Conteúdo .elementor-flip-box__layer__title Descrição do conteúdo .elementor-flip-box__layer__descrição Botão de conteúdo .elementor-flip-box__button
O widget .elementor-form Contêiner de etapas .e-form__indicadores Número das etapas .e-form__indicadores__indicador Legenda do campo .elementor-campo-rótulo Texto do campo .elementor-campo-textual Rótulo do campo de texto .elementor-campo-tipo-texto Rótulo do Campo da Área de Texto .elementor-field-type-textarea Etiqueta do campo de e-mail .elementor-field-type-e-mail Rótulo do campo de URL .elementor-field-type-url Rótulo de campo de telefone .elementor-campo-tipo-tel Etiqueta de campo de rádio .elementor-field-type-rádio Selecione o rótulo do campo .elementor-field-type-select Etiqueta do Campo da Caixa de Seleção .elementor-field-type-caixa de seleção Aceitação de rótulo de campo .elementor-field-type-aceitance Rótulo do campo de data .elementor-campo-tipo-data Rótulo do campo de tempo .elementor-campo-tipo-tempo Etiqueta do campo de número .element-field-type-number Rótulo do campo de upload de arquivo .elementor-field-type-upload Próximo botão e-form__buttons__wrapper__button-next Botão Anterior .e-form__buttons__wrapper__button-anterior Submeter .elementor-botão
Galeria
Título da Galeria (para Galeria Múltipla) .elementor-gallery-title Item da Galeria .elementor-galeria-item Descrição (na Sobreposição) .elementor-gallery-item__descrição
Título
O widget .elementor-cabeçalho-título
ícone
ícone da caixa
O widget .elementor-icon-box-wrapper ícone .elementor-ícone Contêiner de conteúdo .elementor-icon-box-content Título do Conteúdo .elementor-icon-box-title Descrição do conteúdo .elementor-icon-box-descrição
Lista de ícones
Ícone de lista .elementor-icon-list-icon ListText .elementor-icon-list-texto
Imagem
Imagem img Subtítulo .wp-caption-texto
Caixa de Imagem
Imagem .elementor-image-box-img TextContainer .elementor-image-box-content Título do Conteúdo .elementor-image-box-title Descrição do conteúdo elementor-image-box-descrição
Image Carousel
ImageContainer .swiper-slide PictureItem .swiper-slide-image Recipiente de paginação .swiper-paginação Paginação por Pontos .swiper-pagination-bullet Ícone Anterior .elementor-swiper-button-anterior Próximo .elementor-swiper-button-next Legenda da Imagem .elementor-image-carousel-caption
Item de mídia .elementor-carousel-image Sobreposição de itens de mídia .elementor-carousel-image-overlay Paginação por Ponto .swiper-paginação-fração Botão Anterior .eicon-chevron-esquerda Próximo botão .eicon-chevron-direita Paginação de Frações .swiper-paginação-fração Paginação da Barra de Progresso .swiper-pagination-progressbar Preenchimento de paginação da barra de progresso .swiper-pagination-progressbar-fill
Alternar menu móvel .elementor-menu-toggle Ícone do menu móvel .eicon-menu-bar Menu normal .elementor-nav-menu Suspenso .elementor-nav-menu – menu suspenso Item de menu com submenu .elementor-item.has-submenu Item de submenu .elementor-subitem
O widget .elementor-pagamento-botão ícone do botão PayPal .elementor-botão-ícone Texto do botão do PayPal .elementor-botão-texto
Portfólio
carteira item .elementor-portfólio-item Item de Portfólio em Sobreposição .elementor-portfólio-item__overlay Título de sobreposição .elementor-portfólio-item__title Filtro de portfólio .elementor-portfólio__filter
Título da resposta .comentário-resposta-título Como Formar Área .formulário de comentário Formulário de Comentário .comentário-formulário-comentário Submeter .envio de formulário
Informações da postagem
O widget .elementor-post-info Avatar .elementor-avatar Lista de ícones .elementor-icon-list-icon Texto do ícone .elementor-icon-list-texto
Post Navigation
O widget .elementor-pós-navegação Ícone Anterior .post-navigation__arrow-prev Etiqueta anterior .post-navigation__prev–label Título da postagem anterior .post-navigation__prev–title Próximo ícone .post-navigation__arrow-next próximo rótulo .post-navigation__next–label Título da próxima postagem .post-navigation__next–title
POSTAGENS
Postar item .elementor-post Imagem em destaque .elementor-post__thumbnail Emblema na skin dos cartões .elementor-post__badge Aparência de avatar em cartões img.avatar Área de conteúdo de texto .elementor-post__texto Título do Post .elementor-post__title pós Trecho .elementor-post__excerpt Saiba Mais .elementor-post__leia mais Postar Meta Área .elementor-post__meta-dados Data de postagem .elementor-pós-data Post Autor .elementor-post-autor Hora da postagem .elementor-pós-tempo Postar Comentário .elementor-pós-avatar Paginação .elementor-paginação Etiqueta anterior .page-numbers.anterior próximo rótulo .números de página.próximo Número de paginação .números de página Número de paginação ativa .números de página.atual Botão Carregar Mais .elementor-botão-link Ícone do botão Carregar mais .elementor-botão-ícone
Título do Post
O widget .elementor-cabeçalho-título
Lista de Preços
O widget .elementor-lista de preços Item da lista .elementor-preço-lista-item Listar imagem do item .elementor-lista-de-preços-imagem Texto do item da lista .elementor-preço-lista-texto Cabeçalho do Item da Lista .elementor-cabeçalho-da-lista-de-preços Título do item da lista .elementor-preço-lista-título Separador de itens de lista .elementor-lista-de-preços-separador Listar preço do item .elementor-preço-lista-preço Listar descrição do item .elementor-lista-de-preço-descrição
tabela de preços
O widget .elementor-tabela de preços Cabeçalho da tabela .elementor-price-table__header Título do cabeçalho da tabela .elementor-price-table__heading Descrição do cabeçalho da tabela .elementor-price-table__subheading Preço .elementor-preço-tabela__preço Moeda .elementor-price-table__currency Número após o preço .elementor-price-table__after-price Período de preços .elementor-tabela de preços__período Área da lista de recursos .elementor-price-table__features-list Item da lista de recursos .elementor-price-table__feature-inner Rodapé da tabela .elementor-price-table__footer Botão de rodapé da tabela .elementor-price-table__button Texto do Rodapé da Tabela .elementor-price-table__additional_info fita .elementor-price-table__ribbon Fita Interna .elementor-price-table__ribbon-inner
Barra de progresso
Barra de progresso .elementor-barra de progresso Histórico de progresso .elementor-progress-wrapper Título do progresso .elementor-title Texto Interno de Progresso .elementor-progresso-texto Porcentagem de progresso .elementor-progress-porcentage
Rastreador de progresso
O widget .elementor-scrolling-tracker Progresso .porcentagem de progresso atual
Opinões
O widget .elementor-swiper Revisar item .swiper-slide Cabeçalho de revisão .elementor-testimonial__header Revisor de imagem .elementor-testimonial__image Nome do Revisor .elementor-testimonial__name Título do Revisor .elementor-testimonial__title Conteúdo do depoimento .elementor-testimonial__content Texto de depoimento .elementor-testimonial__texto Paginação por Ponto .swiper-pagination-bullet Paginação de Frações .swiper-paginação-fração Corrente de paginação de fração .swiper-paginação-corrente Fração Paginação Total .swiper-paginação-total Paginação da Barra de Progresso .swiper-pagination-progressbar Preenchimento de paginação da barra de progresso .swiper-pagination-progressbar-fill Botão Anterior .eicon-chevron-esquerda Próximo botão .eicon-chevron-direita
Item de botão .elementor-share-btn Ícone de botão .elementor-share-btn__icon Texto do botão .elementor-share-btn__texto
Slides
O widget .elementor-slides-wrapper Área de conteúdo .swiper-slide-conteúdo Título do conteúdo .elementor-slide-heading Descrição do conteúdo .elementor-slide-descrição Botão de conteúdo .elementor-botão deslizante Paginação por Ponto .swiper-pagination-bullet Botão Anterior .eicon-chevron-esquerda Próximo botão .eicon-chevron-direita
Ícones sociais
O widget .elementor-social-icons-wrapper Item de ícone .elementor-social-ícone
Classificação por estrelas
O widget .elementor-star-rating__wrapper Título de avaliação .elementor-star-rating__title Área do ícone de estrela .elementor-star-classificação Ícone de estrela cheio .elementor-star-full Ícone de estrela meio cheio .elementor-star-5 Ícone de estrela vazia .elementor-estrela-vazio
Conteúdo
O widget .elementor-widget-container Cabeçalho do ToC .elementor-toc__header Título do cabeçalho do ToC .elementor-toc__header-title Botão Expandir .elementor-toc__toggle-button–expandir Botão Recolher .elementor-toc__toggle-button–expandir Corpo do ToC .elementor-toc__body Item da lista ToC .elementor-toc__list-item Nível Superior de ToC .elementor-toc__list-item-text.elementor-toc__top-level
Tabs
O widget .elementor-tabs Título da guia .elementor-tab-title Conteúdo Tab .elementor-tab-content
Testimonial
O widget .elementor-testimonial-wrapper Conteúdo do depoimento .elementor-depoimento-conteúdo Meta de depoimento .elementor-testimonial-meta Testemunho de avatar .elementor-testimonial-image Nome do depoimento e cargo .elementor-depoimento-detalhes Nome do Depoimento .elementor-nome do depoimento Cargo de Testemunho .elementor-testimonial-job
Carrossel Depoimento
O widget .elementor-widget-container Item de slide de depoimento .elementor-depoimento Conteúdo do depoimento .elementor-testimonial__content Meta de depoimento .elementor-testimonial__footer Testemunho de avatar .elementor-testimonial__image Nome do depoimento e cargo .elementor-testimonial__cite Nome do Depoimento .elementor-testimonial__name Cargo de Testemunho .elementor-testimonial__title Paginação por Ponto .swiper-pagination-bullet Paginação de Frações .swiper-paginação-fração Corrente de paginação de fração .swiper-paginação-corrente Fração Paginação Total .swiper-paginação-total Paginação da Barra de Progresso .swiper-pagination-progressbar Preenchimento de paginação da barra de progresso .swiper-pagination-progressbar-fill Botão Anterior .eicon-chevron-esquerda Próximo botão .eicon-chevron-direita
Editor de texto
O widget .elementor-editor de texto
Alterne
O widget .elementor-toggle Alternar item .elementor-toggle-item Alternar título do item .elementor-tab-title Alternar conteúdo do item .elementor-tab-content Alternar ícone .elementor-toggle-ícone Alternar ícone fechado .elementor-toggle-icon-closed Alternar ícone aberto .elementor-toggle-icon-opened
Embora o Elementor ofereça muitas opções de estilo para cada widget, você pode ir além disso com CSS personalizado. Para aplicar um estilo personalizado a um widget (ou seus elementos) por meio de CSS personalizado, você precisa conhecer o seletor do widget associado.
Outros recursos Elementor:
Você pode simplesmente inspecionar um widget em uma página ativa para encontrar seu seletor. Para economizar seu tempo, criamos a lista de seletores de widgets do Elementor para que você não precise inspecionar todos os widgets sozinho.
Conclusão
Então! Acabamos de apresentar a lista de seletores de widget Elementor. Se você tiver alguma dúvida sobre como chegar lá, avise-nos dentro Comentários
No entanto, você também pode consultar nossos recursos Criação de blog WordPress Divi: o melhor tema WordPress de todos os tempos
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais
...
Compartilhe este artigo : Eu gosto deste : como Carregando ...
itens semelhantes
