Una delle funzionalità disponibili su Elementor Pro è la possibilità di aggiungere CSS personalizzati ( Leggi: Elementor Free vs Pro). La funzione ti consente di andare oltre poiché puoi applicare qualsiasi stile quando lo stile che desideri non è disponibile nell'elenco delle opzioni di impostazione. Per aggiungere uno stile personalizzato tramite CSS personalizzato a un determinato widget Elementor (o elementi del widget), è necessario conoscere il selettore del widget associato. Abbiamo raccolto l'elenco dei selettori di widget Elementor per facilitare il tuo lavoro.
Ogni widget Elementor - e i suoi elementi - ha un selettore CSS che puoi utilizzare per indirizzare il widget associato quando desideri aggiungere CSS personalizzati per ottenere un determinato stile. Puoi capire il selettore ispezionando il widget a cui vuoi aggiungere il CSS personalizzato.
Poiché l'ispezione di un widget può essere eseguita solo su una pagina live, l'ispezione di ciascuno di essi richiederà molto tempo. Questo è ciò che ci ha portato a creare questa lista.
Come utilizzare un selettore
Supponi di voler applicare una dimensione diversa tra l'icona e il testo su un pulsante. Poiché l'opzione di impostazione predefinita non ti consente di impostare una dimensione diversa tra l'icona del pulsante e il testo, puoi ottenerla tramite CSS personalizzato. Puoi scegliere come target l'icona o il testo a cui applicare un CSS personalizzato.
Per prima cosa, seleziona il selettore dell'elemento che desideri scegliere come target (ad esempio, l'icona del pulsante). Nel pannello delle impostazioni di Elementor, vai alla scheda Avanzate e apri il blocco CSS personalizzato .
Digita selector [selector name] {} nel campo CSS personalizzato. Ecco l'esempio.
Successivamente, aggiungi il tuo contenuto CSS (dichiarazione) tra parentesi graffe. Ecco l'esempio.
Elenco dei selettori dei widget Elementor
Fisarmonica
Mettere in guardia
Titolo animato
Descrizione archivio
Messaggi di archivio
Casella dell'autore
Galleria di base
Citazione in blocco
Pulsante
Chiamare all'azione
Conto alla rovescia
Contatore
Divisore
Flip Box
Modulo
Galleria
Intestazione
Icona
Casella delle icone
Immagine
Casella immagine
Carosello di immagini
Carosello multimediale
Menu di navigazione
Pulsante PayPal
Portafoglio
Pubblica commenti
Informazioni sul post
Posta navigazione
Messaggi
Titolo del post
Listino prezzi
Tabella dei prezzi
Barra di avanzamento
Tracker del progresso
Recensioni
Condividi pulsanti
Diapositive
Icone sociali
Stelle
Sommario
Schede
Testimonianza
Carosello Testimonianze
Editor di testo
Attiva/disattiva
Fisarmonica
Il widget
.elementor-fisarmonica
Titolo fisarmonica
.elementor-fisarmonica-titolo
Descrizione della fisarmonica
.elementor-tab-content
Icona della fisarmonica aperta
.icona-elementor-fisarmonica
Icona della fisarmonica chiusa
.elementor-fisarmonica-icona-chiusa
Mettere in guardia
Il widget
.elementor-alert
Titolo avviso
.titolo-avviso-elementor
Descrizione avviso
.descrizione-avviso-elementor
Icona Ignora
.elementor-alert-elimina
Titolo animato
Il widget
.elementor-titolo
Testo statico
.elementor-titolo-testo-normale
Testo dinamico
.elementor-headline-dynamic-wrapper
Descrizione archivio
Archivio testo
.elementor-titolo-intestazione
Messaggi di archivio
Il widget
.elementor-widget-container
Posta articolo
.elemento-griglia-elemento
Immagine in primo piano
.elementor-post__thumbnail
Distintivo sulla skin delle carte
.elementor-post__badge
Avatar sulla skin delle carte
img.avatar
Area del contenuto del testo
.elementor-post__text
Titolo del post
.elementor-post__title
Estratto del post
.elementor-post__excerpt
Leggi di più
.elementor-post__leggi-di più
Post Meta Area
.elementor-post__meta-data
Data di pubblicazione
.elementor-post-data
Autore del post
.elementor-post-autore
Posta ora
.elementor-post-time
Posta un commento
.elementor-post-avatar
Impaginazione
.elementor-impaginazione
Etichetta precedente
.numeri-pagina.prec
Etichetta successiva
.numeri-pagina.successivo
Numero di impaginazione
.numeri di pagina
Numero di impaginazione attiva
.numeri-pagina.corrente
Pulsante Carica altro
.elementor-button-link
Carica più icona del pulsante
.icona-pulsante-elementor
Casella dell'autore
Il widget
.elementor-author-box
Avatar
.elementor-author-box__avatar
Nome dell'autore
.elementor-author-box__name
Biografia dell'autore
.elementor-author-box__bio
Pulsante Archivia
.elementor-author-box__button
Galleria di base
Il widget
.elementor-galleria-immagini
Articolo della galleria
.elemento-galleria
Didascalia
.wp-didascalia-testo
Citazione in blocco
Il widget
.elementor-blockquote
Contenuto tra virgolette
.elementor-blockquote__content
Autore di citazioni in blocco
.elementor-blockquote__author
Icona Tweet
.elementor-blockquote__tweet-button
Etichetta Tweet
.elementor-blockquote__tweet-label
Pulsante
Il widget
.pulsante-elementor
Testo pulsante
.elementor-pulsante-testo
Icona del pulsante
.icona-pulsante-elementor
Chiamare all'azione
Il widget
.elementor-cta
Immagine di intestazione
.elementor-cta__bg
Nastro
.elementor-nastro
Testo della barra multifunzione
.elementor-nastro-interno
Titolo del contenuto
.elementor-cta__title
Descrizione del contenuto
.elementor-cta__description
Pulsante Contenuto
.elementor-cta__button
Conto alla rovescia
Il widget
.elementor-countdown-wrapper
Giorni
.elementor-conto alla rovescia-giorni
Ore
.elementor-conto alla rovescia-ore
Minuti
.elementor-conto alla rovescia-minuti
Secondi
.elementor-countdown-seconds
Etichetta conto alla rovescia
.elementor-etichetta-conto alla rovescia
Contatore
Il widget
.elementor-contatore
Prefisso numerico
.prefisso-numero-contatore-elementor
Numero
.contatore-elemento-numero
Suffisso numerico
.suffisso-numero-contatore-elemento
Titolo
.elementor-controtitolo
Divisore
Il widget
.elementor-divisore
Separatore
.elementor-divisore-separatore
Elemento testo/icona
.elementor-divider__element
Flip Box
Il widget
.elementor-flip-box
Contenitore frontale
.elementor-flip-box__front
Contenitore posteriore
.elementor-flip-box__back
Contenitore di contenuti
.elementor-flip-box__layer__inner
Titolo del contenuto
.elementor-flip-box__layer__title
Descrizione del contenuto
.elementor-flip-box__layer__description
Pulsante Contenuto
.elementor-flip-box__button
Modulo
Il widget
.elementor-forma
Contenitore per gradini
.e-form__indicatori
Numero di passi
.e-form__indicators__indicator
Etichetta campo
.elementor-etichetta-campo
Testo del campo
.elementor-campo-testuale
Etichetta campo di testo
.elementor-field-type-text
Etichetta del campo dell'area di testo
.elementor-field-type-textarea
Etichetta campo e-mail
.elementor-field-type-email
Etichetta campo URL
.elementor-field-type-url
Etichetta campo tel
.elementor-tipo-campo-tel
Etichetta campo radio
.elementor-field-type-radio
Seleziona Etichetta campo
.elementor-field-type-select
Casella di controllo Etichetta campo
.casella-di-controllo-tipo-campo-elemento-
Etichetta campo di accettazione
.accettazione-tipo-campo-elementor
Etichetta campo data
.elementor-field-type-date
Etichetta del campo dell'ora
.elementor-tipo-campo-ora
Etichetta campo numero
.elemento-numero-tipo-campo
Etichetta campo caricamento file
.elementor-field-type-upload
Pulsante Avanti
e-form__buttons__wrapper__button-next
Pulsante precedente
.e-form__buttons__wrapper__button-precedente
Pulsante Invia
.pulsante-elementor
Galleria
Titolo della galleria (per più gallerie)
.elementor-gallery-title
Articolo della galleria
.elementor-galleria-elemento
Descrizione (su sovrapposizione)
.elementor-gallery-item__description
Intestazione
Il widget
.elementor-titolo-intestazione
Icona
Il widget
.icona-elementor
Casella delle icone
Il widget
.elementor-icon-box-wrapper
Icona
.icona-elementor
Contenitore di contenuti
.elementor-icon-box-content
Titolo del contenuto
.elementor-icon-box-title
Descrizione del contenuto
.elementor-icon-box-descrizione
Elenco delle icone
Icona elenco
.elemento-icona-elenco-icona
Testo elenco
.elementor-icona-elenco-testo
Immagine
Immagine
img
Didascalia
.wp-didascalia-testo
Casella immagine
Immagine
.elementor-image-box-img
Contenitore del contenuto del testo
.elementor-image-box-content
Titolo del contenuto
.elementor-immagine-box-title
Descrizione del contenuto
elementor-immagine-box-descrizione
Carosello di immagini
Contenitore di immagini
.swiper-slitta
Elemento immagine
.swiper-slide-immagine
Contenitore di impaginazione
.swiper-impaginazione
Punti di impaginazione
.swiper-paginazione-punto elenco
Icona precedente
.elementor-swiper-pulsante-prec
Prossimo
.elementor-pulsante-swiper-successivo
Didascalia immagine
.elementor-image-carousel-caption
Carosello multimediale
Elemento multimediale
.elementor-carousel-image
Sovrapposizione elemento multimediale
.elementor-carousel-image-overlay
Impaginazione a punti
.frazione-impaginazione-swiper
Pulsante precedente
.eicon-chevron-sinistra
Pulsante Avanti
.eicon-chevron-destra
Impaginazione della frazione
.frazione-impaginazione-swiper
Impaginazione della barra di avanzamento
.swiper-pagina-avanzamento-barra
Riempimento dell'impaginazione della barra di avanzamento
.swiper-impaginazione-barra di avanzamento-riempimento
Menu di navigazione
Attiva/disattiva menu mobile
.elementor-menu-toggle
Icona del menu mobile
.eicon-barra-menu
Menù normale
.menu-nav-elementor
Cadere in picchiata
.elementor-nav-menu–menu a discesa
Voce di menu con sottomenu
.elementor-item.ha-sottomenu
Voce del sottomenu
.elementor-sottovoce
Pulsante PayPal
Il widget
.pulsante-pagamento-elementor
Icona del pulsante PayPal
.icona-pulsante-elementor
Testo del pulsante PayPal
.elementor-pulsante-testo
Portafoglio
Elemento del portafoglio
.elemento-portafoglio-elemento
Elemento del portafoglio in sovrapposizione
.elementor-portfolio-item__overlay
Titolo sovrapposto
.elementor-portfolio-item__title
Filtro portafoglio
.elementor-portfolio__filter
Pubblica commenti
Titolo della risposta
.commento-risposta-titolo
Area del modulo di commento
.comment-form
Modulo di commento
.comment-form-comment
Pulsante Invia
.invio-modulo
Informazioni sul post
Il widget
.elementor-post-info
Avatar
img
Elenco delle icone
.elemento-icona-elenco-icona
Testo icona
.elementor-icona-elenco-testo
Posta navigazione
Il widget
.elementor-post-navigazione
Icona precedente
.post-navigazione__freccia-prec
Etichetta precedente
.etichetta post-navigazione__prev
Titolo post precedente
.post-navigation__prev–titolo
Icona successiva
.post-navigazione__arrow-next
Etichetta successiva
.post-navigation__next–etichetta
Titolo post successivo
.post-navigation__next–titolo
Messaggi
Posta articolo
.elementor-post
Immagine in primo piano
.elementor-post__thumbnail
Distintivo sulla skin delle carte
.elementor-post__badge
Avatar sulla skin delle carte
img.avatar
Area del contenuto del testo
.elementor-post__text
Titolo del post
.elementor-post__title
Estratto del post
.elementor-post__excerpt
Leggi di più
.elementor-post__leggi-di più
Post Meta Area
.elementor-post__meta-data
Data di pubblicazione
.elementor-post-data
Autore del post
.elementor-post-autore
Posta ora
.elementor-post-time
Posta un commento
.elementor-post-avatar
Impaginazione
.elementor-impaginazione
Etichetta precedente
.numeri-pagina.prec
Etichetta successiva
.numeri-pagina.successivo
Numero di impaginazione
.numeri di pagina
Numero di impaginazione attiva
.numeri-pagina.corrente
Pulsante Carica altro
.elementor-button-link
Carica più icona del pulsante
.icona-pulsante-elementor
Titolo del post
Il widget
.elementor-titolo-intestazione
Listino prezzi
Il widget
.elementor-listino
Voce di elenco
.elementor-listino-voce
Immagine dell'elemento dell'elenco
.elementor-listino-immagine
Testo dell'elemento dell'elenco
.elementor-listino-testo
Intestazione elemento elenco
.elementor-listino-intestazione
Titolo dell'elemento dell'elenco
.elementor-listino-titolo
Elenco elementi separatore
.elementor-listino-separatore
Prezzo articolo di listino
.elementor-prezzo-di-listino
Descrizione elemento elenco
.elementor-listino-descrizione
Tabella dei prezzi
Il widget
.elementor-tabella-prezzo
Intestazione tabella
.elementor-price-table__header
Titolo intestazione tabella
.elementor-price-table__heading
Descrizione dell'intestazione della tabella
.elementor-price-table__subheading
Prezzo
.elementor-price-table__price
Moneta
.elementor-price-table__currency
Numero dopo prezzo
.elementor-tabella-prezzo__dopo-prezzo
Periodo di prezzo
.elementor-tabella-prezzo__periodo
Area dell'elenco delle funzioni
.elementor-price-table__features-list
Voce dell'elenco delle caratteristiche
.elementor-price-table__feature-inner
Piè di pagina della tabella
.elementor-price-table__footer
Pulsante piè di pagina della tabella
.elementor-price-table__button
Testo del piè di pagina della tabella
.elementor-price-table__additional_info
Nastro
.elementor-price-table__ribbon
Nastro interno
.elementor-price-table__ribbon-inner
Barra di avanzamento
Barra di avanzamento
.elementor-barra-di-avanzamento
Sfondo di progresso
.elementor-progress-wrapper
Titolo di avanzamento
.elementor-titolo
Testo interno del progresso
.elementor-progress-text
Percentuale di avanzamento
.elementor-percentuale di progresso
Tracker del progresso
Il widget
.elementor-scrolling-tracker
Progresso
.percentuale-di-avanzamento-corrente
Recensioni
Il widget
.elementor-swiper
Recensione articolo
.swiper-slitta
Testata di revisione
.elementor-testimonial__header
Immagine del recensore
.elementor-testimonial__image
Nome del revisore
.elementor-testimonial__name
Titolo del revisore
.elementor-testimonial__title
Contenuto della testimonianza
.elementor-testimonial__content
Testo Testimonianza
.elementor-testimonial__text
Impaginazione a punti
.swiper-paginazione-punto elenco
Impaginazione della frazione
.frazione-impaginazione-swiper
Corrente di impaginazione della frazione
.swiper-impaginazione-corrente
Frazione Impaginazione Totale
.totale-impaginazione-swiper
Impaginazione della barra di avanzamento
.swiper-pagina-avanzamento-barra
Riempimento dell'impaginazione della barra di avanzamento
.swiper-impaginazione-barra di avanzamento-riempimento
Riempimento dell'impaginazione della barra di avanzamento
.swiper-impaginazione-barra di avanzamento-riempimento
Pulsante precedente
.eicon-chevron-sinistra
Pulsante Avanti
.eicon-chevron-destra
Editor di testo
Il widget
.elementor-editor di testo
Attiva/disattiva
Il widget
.elementor-toggle
Attiva/disattiva elemento
.elementor-toggle-item
Attiva/disattiva il titolo dell'elemento
.elementor-tab-title
Attiva/disattiva il contenuto dell'elemento
.elementor-tab-content
Attiva/disattiva icona
.elementor-toggle-icona
Attiva/disattiva icona chiusa
.elementor-toggle-icona-chiuso
Attiva/disattiva icona aperta
.elementor-toggle-icona-aperto
La linea di fondo
Mentre Elementor offre molte opzioni di stile per ogni widget, puoi andare oltre con CSS personalizzato. Per applicare uno stile personalizzato a un widget (o ai suoi elementi) tramite CSS personalizzato, è necessario conoscere il selettore del widget associato. Puoi semplicemente ispezionare un widget su una pagina live per capire il suo selettore. Per farti risparmiare tempo, abbiamo creato l'elenco dei selettori di widget Elementor in modo che tu non debba ispezionare da solo ogni singolo widget.
