Una de las características disponibles en Elementor Pro es la capacidad de agregar CSS personalizado ( Leer: Elementor Free vs Pro). La función le permite ir más allá, ya que puede aplicar cualquier estilo cuando el estilo que desea no está disponible en la lista de opciones de configuración. Para agregar un estilo personalizado a través de CSS personalizado a un determinado widget de Elementor (o elementos del widget), debe conocer el selector del widget asociado. Hemos recopilado la lista de selectores de widgets de Elementor para facilitar su trabajo.
Cada widget de Elementor, y sus elementos, tiene un selector de CSS que puede usar para apuntar al widget asociado cuando desea agregar CSS personalizado para lograr un estilo determinado. Puede descubrir 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 en vivo, llevará mucho tiempo inspeccionar cada uno de ellos. Eso es lo que nos llevó a crear esta lista.
Cómo usar un selector Digamos que desea aplicar un tamaño diferente entre el ícono 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 de CSS personalizado. Puede orientar el icono o el texto para aplicar un CSS personalizado.
Primero, seleccione el selector del elemento al que desea apuntar (p. ej., icono de botón). En el panel de configuración de Elementor, vaya a la pestaña Avanzado y abra el bloque CSS personalizado .
Escriba selector [selector name] {} en el campo CSS personalizado. Aquí está el ejemplo.
A continuación, agregue su contenido CSS (declaración) dentro de las llaves. Aquí está el ejemplo.
Lista de selectores de widgets de Elementor Acordeón Alerta Titular animado Descripción del archivo Archivar publicaciones Cuadro de autor Galería básica Cita en bloque Botón Llamada a la acción cuenta regresiva Encimera Divisor Caja abatible Forma Galería Bóveda Icono Cuadro de iconos Imagen cuadro de imagen Carrusel de imágenes Carrusel de medios Menú de navegación Botón de PayPal portafolio Publicar comentarios Publicar información Mensaje de navegación Publicaciones Título de la entrada Lista de precios Lista de precios Barra de progreso Rastreador de progreso Reseñas Compartir botones Diapositivas Iconos sociales Clasificación de estrellas Tabla de contenido Pestañas Testimonial Carrusel de Testimonios Editor de texto Palanca Acordeón El widget .elementor-acordeon Título de acordeón .elementor-acordeón-título Descripción del acordeón .elementor-tab-content Icono de acordeón abierto .elementor-acordeón-icono Icono de acordeón cerrado .elementor-acordeón-icono-cerrado
Alerta El widget .elementor-alerta Título de alerta .elementor-alerta-titulo Descripción de la alerta .elementor-alerta-descripción Icono de descartar .elementor-alerta-descartar
Titular 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 .elementor-heading-title
Archivar publicaciones El widget .elementor-widget-contenedor Publicar artículo .elementor-grid-item 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 de la entrada .elementor-post__title Extracto de la publicación .elementor-post__extracto Lee mas .elementor-post__leer-más Publicar metaárea .elementor-post__meta-datos Fecha de publicación .elementor-post-fecha Autor de la publicación .elementor-post-autor Hora de publicación .elementor-post-tiempo publicar comentario .elementor-post-avatar Paginación .elementor-paginación Etiqueta anterior .números-de-página.prev Siguiente 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 Botón Cargar más .elementor-boton-enlace Cargar más icono de botón .elementor-boton-icono
Cuadro de autor El widget .elementor-autor-box Avatar .elementor-autor-box__avatar Nombre del autor .elementor-autor-box__name Biografía del autor .elementor-autor-box__bio Botón de archivo .elementor-autor-box__button
Galería básica El widget .elementor-galeria-de-imagenes Elemento de la galería .gallery-item Subtítulo .wp-caption-text
Cita en bloque 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-button Etiqueta de tuit .elementor-blockquote__tweet-etiqueta
Botón El widget .elementor-boton Botón de texto .elementor-boton-texto Icono de botón .elementor-boton-icono
Llamada 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__title Descripción del contenido .elementor-cta__descripción Botón de contenido .elementor-cta__button
cuenta regresiva El widget .elementor-countdown-wrapper Días .elementor-cuenta-regresiva-dias Horas .elementor-cuenta-regresiva-horas Minutos .elementor-cuenta-regresiva-minutos Segundos .elementor-cuenta-regresiva-segundos Etiqueta de cuenta regresiva .elementor-cuenta-regresiva-etiqueta
Encimera El widget .elementor-contador Prefijo de número .elementor-contador-numero-prefijo Número .elementor-contador-numero Sufijo de número .elementor-contador-numero-sufijo Título .elementor-contra-titulo
Divisor El widget .elementor-divisor Separador .elementor-divisor-separador Elemento de texto/icono .elementor-divisor__elemento
Caja abatible El widget .elementor-flip-box Contenedor frontal .elementor-flip-box__front Contenedor trasero .elementor-flip-box__volver Contenedor de contenido .elementor-flip-box__layer__inner Título del contenido .elementor-flip-box__layer__title Descripción del contenido .elementor-flip-box__capa__descripción Botón de contenido .elementor-flip-box__button
Forma 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-field-type-select Etiqueta de campo de casilla de verificación .elementor-field-type-checkbox Etiqueta de campo de aceptación .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 .elementor-campo-tipo-numero Etiqueta de campo de carga de archivo .elementor-field-type-upload Siguiente botón e-form__buttons__wrapper__button-next Botón anterior .e-form__buttons__wrapper__button-anterior Botón de enviar .elementor-boton
Galería Título de la galería (para galería múltiple) .elementor-gallery-titulo Elemento de la galería .elementor-gallery-item Descripción (en superposición) .elementor-gallery-item__description
Bóveda El widget .elementor-heading-title
Icono El widget .elementor-icono
Cuadro de iconos El widget .elementor-icono-box-wrapper Icono .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 Icono de lista .elementor-icon-lista-icono Texto de la lista .elementor-icon-list-text
Imagen Imagen imagen Subtítulo .wp-caption-text
cuadro de imagen Imagen .elementor-image-box-img Contenedor de contenido de texto .elementor-image-box-content Título del contenido .elementor-imagen-cuadro-titulo Descripción del contenido elementor-image-box-descripción
Carrusel de imágenes Contenedor de imagen .swiper-slide Elemento de imagen .swiper-diapositiva-imagen Contenedor de paginación .swiper-paginación Puntos de paginación .swiper-pagination-bullet Icono anterior .elementor-swiper-button-anterior próximo .elementor-swiper-button-siguiente Captura de imagen .elementor-image-carousel-caption
Carrusel de medios 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-derecha Paginación de fracciones .swiper-paginación-fracción Paginación de barra de progreso .swiper-pagination-progressbar Relleno de paginación de la barra de progreso .swiper-pagination-progressbar-fill
Menú de navegación Móvil Alternar menú .elementor-menu-toggle Icono de menú móvil .eicon-menu-bar Menú normal .elementor-nav-menu Desplegable .elementor-nav-menú–desplegable Elemento de menú con submenú .elementor-item.has-submenu Elemento del submenú .elementor-subelemento
Botón de PayPal El widget .elementor-pago-boton Icono de botón de PayPal .elementor-boton-icono Texto del botón de PayPal .elementor-boton-texto
portafolio Artículo de la cartera .elementor-portfolio-item Elemento de cartera en superposición .elementor-portfolio-item__overlay Título superpuesto .elementor-portfolio-item__title Filtro de cartera .elementor-portfolio__filter
Publicar comentarios Título de respuesta .comentario-respuesta-título Área de formulario de comentarios .formulario de comentarios Formulario de comentarios .comentario-formulario-comentario Botón de enviar .formulario-enviar
Publicar información El widget .elementor-post-info Avatar imagen Lista de iconos .elementor-icon-lista-icono Icono Texto .elementor-icon-list-text
Mensaje de navegación 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 Siguiente etiqueta .post-navegación__siguiente–etiqueta Título de la publicación siguiente .post-navegación__siguiente–título
Publicaciones 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 de la entrada .elementor-post__title Extracto de la publicación .elementor-post__extracto Lee mas .elementor-post__leer-más Publicar metaárea .elementor-post__meta-datos Fecha de publicación .elementor-post-fecha Autor de la publicación .elementor-post-autor Hora de publicación .elementor-post-tiempo publicar comentario .elementor-post-avatar Paginación .elementor-paginación Etiqueta anterior .números-de-página.prev Siguiente 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 Botón Cargar más .elementor-boton-enlace Cargar más icono de botón .elementor-boton-icono
Título de la entrada El widget .elementor-heading-title
Lista de precios El widget .elementor-lista-de-precios Elemento de la 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-price-table__header Título del encabezado de la tabla .elementor-price-table__heading Descripción del encabezado de la tabla .elementor-tabla-de-precios__subtitulo Precio .elementor-precio-tabla__precio Divisa .elementor-precio-tabla__moneda Número después del precio .elementor-price-table__after-price Período de precios .elementor-precio-tabla__período Área de lista de características .elementor-price-table__features-list Elemento de la lista de características .elementor-price-table__feature-inner Pie de tabla .elementor-price-table__footer Botón de pie de tabla .elementor-tabla-de-precios__boton Texto de pie de tabla .elementor-price-table__additional_info Cinta .elementor-price-table__ribbon Cinta interior .elementor-price-table__ribbon-inner
Barra de progreso Barra de progreso .elementor-barra-de-progreso Fondo de progreso .elementor-progress-wrapper 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 .porcentaje-de-progreso-actual
Reseñas El widget .elementor-swiper Artículo de revisión .swiper-slide Encabezado de revisión .elementor-testimonial__header Imagen del revisor .elementor-testimonial__imagen Nombre del revisor .elementor-testimonial__name Título del revisor .elementor-testimonial__title Contenido testimonial .elementor-testimonial__content Texto Testimonial .elementor-testimonial__text Paginación de puntos .swiper-pagination-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-pagination-progressbar Relleno de paginación de la barra de progreso .swiper-pagination-progressbar-fill Botón anterior .eicon-chevron-izquierda Siguiente botón .eicon-chevron-derecha
Compartir botones Elemento de botón .elementor-share-btn Icono de botón .elementor-share-btn__icon Botón de texto .elementor-share-btn__text
Diapositivas El widget .elementor-slides-wrapper Área de contenido .swiper-slide-contents Encabezado de contenido .elementor-slide-heading Descripción del contenido .elementor-diapositiva-descripción Botón de contenido .elementor-botón-deslizante Paginación de puntos .swiper-pagination-bullet Botón anterior .eicon-chevron-izquierda Siguiente botón .eicon-chevron-derecha
Iconos sociales El widget .elementor-iconos-sociales-envoltorio Elemento de icono .elementor-social-icono
Clasificación de estrellas El widget .elementor-star-rating__wrapper Título de calificación .elementor-star-rating__title Área de icono de estrella .elementor-star-rating Icono de estrella completo .elementor-star-full Icono de estrella medio lleno .elementor-estrella-5 Icono de estrella vacía .elementor-estrella-vacío
Tabla de contenido El widget .elementor-widget-contenedor Encabezado de TdC .elementor-toc__header Título del encabezado de la TdC .elementor-toc__header-title Botón Expandir .elementor-toc__toggle-button–expand Botón Contraer .elementor-toc__toggle-button–expand Cuerpo de TdC .elementor-toc__body Elemento de la lista de TdC .elementor-toc__list-item ToC Nivel superior .elementor-toc__list-item-text.elementor-toc__top-level
Pestañas El widget .elementor-tabs Título de la pestaña .elementor-tab-título Contenido de la pestaña .elementor-tab-content
Testimonial El widget .elementor-testimonial-wrapper Contenido testimonial .elementor-contenido-testimonial Meta testimonial .elementor-testimonial-meta Avatar testimonial .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 de Testimonios El widget .elementor-widget-contenedor Elemento de diapositiva de testimonio .elementor-testimonio Contenido testimonial .elementor-testimonial__content Meta testimonial .elementor-testimonial__footer Avatar testimonial .elementor-testimonial__imagen Nombre del testimonio y título del trabajo .elementor-testimonial__cite Nombre del testimonio .elementor-testimonial__name Testimonio Título del trabajo .elementor-testimonial__title Paginación de puntos .swiper-pagination-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-pagination-progressbar Relleno de paginación de la barra de progreso .swiper-pagination-progressbar-fill Botón anterior .eicon-chevron-izquierda Siguiente botón .eicon-chevron-derecha
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-content Icono de alternar .elementor-alternar-icono Icono de alternar cerrado .elementor-toggle-icon-cerrado Icono de alternar abierto .elementor-toggle-icon-abierto
La línea de fondo Si bien 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. Simplemente puede inspeccionar un widget en una página en vivo para descubrir su selector. Para ahorrarle tiempo, hemos creado la lista de selectores de widgets de Elementor para que no tenga que inspeccionar cada uno de los widgets usted mismo.
