¿Te gustaría encontrar los selectores de widgets? Elementor ?
Una de las funciones disponibles en Elementor Pro
Para agregar un estilo personalizado a través de CSS personalizado a un determinado widget Elementor , necesitas conocer el selector del widget asociado. Hemos recopilado la lista de selectores de widgets. Elementor para facilitar tu trabajo.
Cada widget de Elementor, y sus elementos, tiene un selector de CSS que puede usar para apuntar al widget asociado cuando desee agregar CSS personalizado para lograr un estilo determinado. Puede encontrar el selector inspeccionando el widget al que desea agregar el CSS personalizado.
Dado que la inspección de un widget solo se puede realizar en una página activa, llevará mucho tiempo inspeccionar cada uno. Eso es lo que nos llevó a crear esta lista.
Cómo usar un selector
Suponga que desea aplicar un tamaño diferente entre el icono y el texto en un botón. Dado que la opción de configuración predeterminada no le permite establecer un tamaño diferente entre el icono del botón y el texto, puede lograrlo a través del CSS personalizado. Puede orientar el icono o el texto para aplicar CSS personalizado.
Primero, seleccione el selector del elemento que desea orientar (por ejemplo, el icono del botón). En el panel de configuración del elemento, vaya a la pestaña Avanzado y abre el bloque CSS personalizado .
Ingresar selector [selector name] {} en el campo CSS personalizado.
Aquí está el ejemplo.
Luego agrega tu contenido CSS (declaración) entre llaves.
Aquí está el ejemplo.
Nota: Cada widget de Elementor tiene un elemento principal (envoltorio). Ingresar selector {} (sin el nombre del selector) significa apuntar al contenedor.
Lista de selección de widgets de Elementor
Acordeón
El widget .elementor-acordeon Título de Acordeón .elementor-acordeón-título Descripción del acordeón .elementor-tab-contenido Icono de acordeón abierto .elementor-acordeón-icono Icono de acordeón cerrado .elementor-acordeón-icono-cerrado
Alertar
El widget .elementor-alerta Título de alerta .elementor-alerta-titulo Descripción de la alerta .elementor-alerta-descripción Descartar icono .elementor-alerta-descartar
Título animado
El widget .elementor-titular Texto estático .elementor-titular-texto-sin formato Texto dinámico .elementor-headline-envoltorio-dinámico
Descripción del archivo
Archivar texto .título-encabezado-elementor
Publicaciones de archivo
El widget .elementor-widget-contenedor Publicar artículo .elementor-grid-elemento Foto Principal .elementor-post__miniatura Insignia en la piel de las tarjetas .elementor-post__badge Avatar en la piel de las cartas img.avatar Área de contenido de texto .elementor-post__texto Título .elementor-post__título después Extracto .elementor-post__extracto Leer Más .elementor-post__leer-más Publicar metaárea .elementor-post__meta-datos Fecha del anuncio .elementor-post-fecha Autor de publicación .elementor-post-autor Hora de publicación .elementor-post-tiempo Enviar comentario .elementor-post-avatar Paginación .elementor-paginación Etiqueta anterior .números-de-página.prev próxima etiqueta .números-de-página.siguiente Número de paginación .número de páginas Número de paginación activo .números-de-página.actual Cargar más botón .elementor-boton-enlace Cargar más icono de botón .elementor-boton-icono
Cuadro de autor
El widget .elementor-autor-caja Avatar .elementor-autor-box__avatar Nombre del autor .elementor-autor-box__name Biografía del autor .elementor-autor-box__bio Botón Archivar .elementor-autor-box__button
Galería básica
El widget .elementor-galeria-de-imagenes Artículo de la galería .artículo de galería Subtítulo .wp-caption-texto
Blockquote
El widget .elementor-blockquote Contenido de cotización en bloque .elementor-blockquote__content Autor de citas en bloque .elementor-blockquote__autor Icono de tuit .elementor-blockquote__tweet-botón Etiqueta de tuit .elementor-blockquote__tweet-etiqueta
El widget .elementor-boton Texto del botón .elementor-boton-texto Icono de botón .elementor-boton-icono
Llamado a la Acción
El widget .elementor-cta Imagen de cabecera .elementor-cta__bg cinta .elementor-cinta Texto de la cinta .elementor-cinta-interior Título del contenido .elementor-cta__título Descripción del contenido .elementor-cta__descripción Botón de contenido .elementor-cta__botón
cuenta atrás
El widget .elementor-cuenta-regresiva-envoltorio Días .elementor-cuenta-regresiva-dias Horario .elementor-cuenta-regresiva-horas Min .elementor-cuenta-regresiva-minutos Seg .elementor-cuenta-regresiva-segundos Etiqueta de cuenta regresiva .elementor-cuenta-regresiva-etiqueta
Para contrarrestar
El widget .elementor-contador Prefijo de número .elemento-contador-número-prefijo Número .elementor-contador-numero Sufijo de número .elemento-contador-número-sufijo Título .elementor-contra-titulo
Divisor
El widget .elementor-divisor Separador .elementor-divisor-separador Elemento de texto/icono .elementor-divisor__elemento
Flip Box
El widget .elementor-flip-box Contenedor frontal .elementor-flip-box__frente Contenedor trasero .elementor-flip-box__volver Contenedor de contenido .elementor-flip-box__capa__interior Título del contenido .elementor-flip-box__capa__título Descripción del contenido .elementor-flip-box__capa__descripción Botón de contenido .elementor-flip-box__botón
El widget .elementor-forma Contenedor de paso .e-form__indicadores Número de pasos .formulario__indicadores__indicador Etiqueta de campo .elementor-campo-etiqueta Texto de campo .elementor-campo-textual Etiqueta de campo de texto .elementor-campo-tipo-texto Etiqueta de campo de área de texto .elementor-campo-tipo-textarea Etiqueta de campo de correo electrónico .elementor-campo-tipo-email Etiqueta de campo de URL .elementor-campo-tipo-url Etiqueta de campo de teléfono .elementor-campo-tipo-tel Etiqueta de campo de radio .elementor-campo-tipo-radio Seleccionar etiqueta de campo .elementor-campo-tipo-selección Etiqueta de campo de casilla de verificación .elementor-campo-tipo-casilla de verificación Aceptación de etiquetas de campo .elementor-campo-tipo-aceptación Etiqueta de campo de fecha .elementor-campo-tipo-fecha Etiqueta de campo de tiempo .elementor-campo-tipo-tiempo Etiqueta de campo numérico .elemento-campo-tipo-número Etiqueta de campo de carga de archivos .elementor-campo-tipo-subir Siguiente botón formulario electrónico__botones__envoltorio__botón-siguiente Botón anterior .e-form__buttons__wrapper__button-anterior Enviar Button .elementor-boton
Galería
Título de la galería (para galería múltiple) .elementor-gallery-titulo Artículo de la galería .elementor-galería-artículo Descripción (en superposición) .elementor-gallery-item__descripción
Título
El widget .título-encabezado-elementor
Ícono
El widget .elementor-icono
icono del rectángulo
El widget .elementor-icono-box-wrapper Ícono .elementor-icono Contenedor de contenido .elementor-icon-caja-contenido Título del contenido .elementor-icono-box-title Descripción del contenido .elementor-icon-box-descripción
Lista de iconos
Ícono de lista .elementor-icon-lista-icono Texto de lista .elementor-icono-lista-texto
Imagen
Imagen img Subtítulo .wp-caption-texto
Cuadro de imagen
Imagen .elementor-imagen-box-img Contenedor de texto .elementor-imagen-box-contenido Título del contenido .elementor-imagen-cuadro-titulo Descripción del contenido elementor-image-box-descripción
Image Carousel
Contenedor de imagen .swiper-deslizamiento Elemento de imagen .swiper-diapositiva-imagen Contenedor de paginación .swiper-paginación Paginación de puntos .swiper-paginación-bullet Icono anterior .elementor-swiper-button-anterior Siguiente .elementor-swiper-button-siguiente Captura de imagen .elementor-imagen-carrusel-caption
Elemento multimedia .elementor-carrusel-imagen Superposición de elementos multimedia .elementor-carrusel-superposición-de-imagen Paginación de puntos .swiper-paginación-fracción Botón anterior .eicon-chevron-izquierda Siguiente botón .eicon-chevron-derecho Paginación de fracciones .swiper-paginación-fracción Paginación de barra de progreso .swiper-paginación-barra de progreso Relleno de paginación de la barra de progreso .swiper-paginación-barra de progreso-relleno
Alternar móvil menú .elementor-menú-alternar Icono de menú móvil .eicon-barra de menú Menú regular .elementor-nav-menu Desplegable .elementor-nav-menú–desplegable Elemento de menú con submenú .elementor-item.tiene-submenú Elemento del submenú .elementor-subelemento
El widget .elementor-pago-boton Icono de botón de PayPal .elementor-boton-icono Texto del botón de PayPal .elementor-boton-texto
Portafolio
Portafolio del artículo .elementor-portfolio-item Elemento de cartera en superposición .elementor-portfolio-item__overlay Título superpuesto .elementor-portfolio-item__título Filtro de cartera .elementor-portfolio__filtro
Título de respuesta .comentario-respuesta-título Cómo área de formulario .formulario de comentarios Formulario de comentarios .comentario-formulario-comentario Enviar Button .formulario-enviar
Información del correo
El widget .elementor-post-info Avatar .elementor-avatar Lista de iconos .elementor-icon-lista-icono Texto de icono .elementor-icono-lista-texto
Navegación de publicaciones
El widget .elementor-post-navegación Icono anterior .post-navegación__flecha-anterior Etiqueta anterior .post-navegación__prev–etiqueta Título de la publicación anterior .post-navegación__prev–título Siguiente icono .post-navegación__flecha-siguiente próxima etiqueta .post-navegación__siguiente–etiqueta Título de la siguiente publicación .post-navegación__siguiente–título
Artículos
Publicar artículo .elementor-post Foto Principal .elementor-post__miniatura Insignia en la piel de las tarjetas .elementor-post__badge Avatar en la piel de las cartas img.avatar Área de contenido de texto .elementor-post__texto Título .elementor-post__título después Extracto .elementor-post__extracto Leer Más .elementor-post__leer-más Publicar metaárea .elementor-post__meta-datos Fecha del anuncio .elementor-post-fecha Autor de publicación .elementor-post-autor Hora de publicación .elementor-post-tiempo Enviar comentario .elementor-post-avatar Paginación .elementor-paginación Etiqueta anterior .números-de-página.prev próxima etiqueta .números-de-página.siguiente Número de paginación .número de páginas Número de paginación activo .números-de-página.actual Cargar más botón .elementor-boton-enlace Cargar más icono de botón .elementor-boton-icono
Título
El widget .título-encabezado-elementor
Lista de precios
El widget .elementor-lista-de-precios Artículo de lista .elementor-precio-artículo-de-lista Imagen del elemento de la lista .elementor-precio-lista-imagen Texto del elemento de la lista .elementor-precio-lista-texto Encabezado de elemento de lista .elementor-encabezado-lista-de-precios Título del elemento de la lista .elementor-precio-lista-titulo Separador de elementos de lista .elementor-precio-lista-separador Lista de precios de artículos .elementor-precio-lista-precio Descripción del elemento de la lista .elementor-precio-lista-descripción
Lista de precios
El widget .elementor-tabla-de-precios Encabezado de tabla .elementor-precio-tabla__encabezado Título del encabezado de la tabla .elementor-precio-tabla__encabezado Descripción del encabezado de la tabla .elementor-tabla-de-precios__subtitulo Precio .elementor-precio-tabla__precio Moneda .elementor-precio-tabla__moneda Número después del precio .elementor-precio-tabla__después del precio Período de precios .elementor-precio-tabla__período Área de lista de características .element-price-table__features-list Elemento de la lista de características .elementor-precio-tabla__característica-interior Tabla Footer .elementor-precio-tabla__pie de página Botón de pie de tabla .elementor-tabla-de-precios__boton Texto de pie de tabla .elementor-price-table__additional_info cinta .elementor-precio-tabla__cinta Cinta interior .elementor-precio-tabla__cinta-interior
Barra de progreso
Barra de progreso .elementor-barra-de-progreso Fondo de progreso .elementor-progreso-envoltorio Título de progreso .elementor-título Texto interno de progreso .elementor-progreso-texto Porcentaje de progreso .elementor-progreso-porcentaje
Rastreador de progreso
El widget .elementor-scrolling-tracker Progreso .actual-progreso-porcentaje
Reseñas
El widget .elementor-swiper Artículo de revisión .swiper-deslizamiento Encabezado de revisión .elementor-testimonial__encabezado Revisor de imágenes .elementor-testimonial__imagen Nombre del revisor .elementor-testimonial__nombre Título del revisor .elementor-testimonial__título Contenido testimonial .elementor-testimonial__contenido Texto testimonial .elementor-testimonio__texto Paginación de puntos .swiper-paginación-bullet Paginación de fracciones .swiper-paginación-fracción Corriente de paginación de fracciones .swiper-paginación-actual Fracción Paginación Total .swiper-paginación-total Paginación de barra de progreso .swiper-paginación-barra de progreso Relleno de paginación de la barra de progreso .swiper-paginación-barra de progreso-relleno Botón anterior .eicon-chevron-izquierda Siguiente botón .eicon-chevron-derecho
Elemento de botón .elementor-share-btn Icono de botón .elementor-share-btn__icon Texto del botón .elementor-share-btn__text
Slides
El widget .elementor-diapositivas-envoltorio Área de contenido .swiper-slide-contenido Encabezado de contenido .elementor-slide-encabezado Descripción del contenido .elementor-diapositiva-descripción Botón de contenido .elementor-botón-deslizante Paginación de puntos .swiper-paginación-bullet Botón anterior .eicon-chevron-izquierda Siguiente botón .eicon-chevron-derecho
Iconos Sociales
El widget .elementor-iconos-sociales-envoltorio Ítem Ícono .elementor-social-icono
Estrellas
El widget .elementor-star-rating__wrapper Calificación Título .elementor-star-rating__título Área de icono de estrella .elementor-calificación de estrellas Icono de estrella completo .elementor-estrella-llena Icono de estrella medio lleno .elementor-estrella-5 Icono de estrella vacía .elementor-estrella-vacío
Índice del contenido
El widget .elementor-widget-contenedor Encabezado de TdC .elementor-toc__encabezado Título del encabezado de la TdC .elementor-toc__título-encabezado Botón Expandir .elementor-toc__botón-alternar–expandir Botón Contraer .elementor-toc__botón-alternar–expandir Cuerpo de TdC .elementor-toc__body Elemento de la lista de TdC .elementor-toc__list-elemento ToC Nivel superior .elementor-toc__list-item-text.elementor-toc__top-level
Pestañas
El widget .elementor-pestañas Título de la pestaña .elementor-tab-título Pestaña de contenido .elementor-tab-contenido
Testimonial
El widget .elementor-testimonial-envoltorio Contenido testimonial .elementor-contenido-testimonial Meta testimonial .elementor-testimonio-meta Testimonio de Avatar .elementor-imagen-testimonial Nombre del testimonio y título del trabajo .elementor-testimonial-detalles Nombre del testimonio .elementor-testimonio-nombre Testimonio Título del trabajo .elementor-testimonio-trabajo
Carrusel Testimonial
El widget .elementor-widget-contenedor Elemento de diapositiva de testimonio .elementor-testimonio Contenido testimonial .elementor-testimonial__contenido Meta testimonial .elementor-testimonio__pie de página Testimonio de Avatar .elementor-testimonial__imagen Nombre del testimonio y título del trabajo .elementor-testimonial__cite Nombre del testimonio .elementor-testimonial__nombre Testimonio Título del trabajo .elementor-testimonial__título Paginación de puntos .swiper-paginación-bullet Paginación de fracciones .swiper-paginación-fracción Corriente de paginación de fracciones .swiper-paginación-actual Fracción Paginación Total .swiper-paginación-total Paginación de barra de progreso .swiper-paginación-barra de progreso Relleno de paginación de la barra de progreso .swiper-paginación-barra de progreso-relleno Botón anterior .eicon-chevron-izquierda Siguiente botón .eicon-chevron-derecho
Editor de texto
El widget .elementor-editor-de-texto
palanca
El widget .elementor-alternar Alternar elemento .elementor-alternar-elemento Alternar título del elemento .elementor-tab-título Alternar contenido del elemento .elementor-tab-contenido Icono de alternancia .elementor-alternar-icono Icono de alternar cerrado .elementor-toggle-icon-cerrado Icono de alternar abierto .elementor-toggle-icon-abierto
Aunque Elementor ofrece muchas opciones de estilo para cada widget, puede ir más allá con CSS personalizado. Para aplicar un estilo personalizado a un widget (o sus elementos) a través de CSS personalizado, debe conocer el selector del widget asociado.
Otros recursos de Elementor:
Simplemente puede inspeccionar un widget en una página en vivo para encontrar su selector. Para ahorrarle tiempo, hemos creado la lista de selectores de widgets de Elementor para que no tenga que inspeccionar cada widget usted mismo.
Conclusión
¡Listo! Acabamos de presentarte la lista de selectores de widgets de Elementor. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber dentro de comentarios
Sin embargo, también puedes consultar nuestros recursos Creación de blog de WordPress Divi: el mejor tema de WordPress de todos los tiempos
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales
...
Me gusta eso : me gusta Cargando ...
artículos similares
