Elenco di selezione dei widget di Elementor

Ti piacerebbe conoscere i selettori dei widget Elementor ? Quindi continua a leggere questo articolo.

Nel mondo del web design, la personalizzazione dettagliata di ogni elemento di una pagina è essenziale per creare un'esperienza utente unica e professionale. Elementor, uno dei page builder più popolari per WordPress, offre una potente funzionalità che ti consente di individuare esattamente gli elementi che desideri personalizzare: i selettori di widget.

I selettori widget di Elementor ti consentono di applicare stili CSS personalizzato a elementi specifici del tuo sito, offrendoti il ​​controllo completo sull'aspetto e sul comportamento di ciascun widget. Che tu voglia cambiare colori, regolare i margini o creare effetti visivi dinamici, i selettori di widget sono lo strumento di cui hai bisogno per perfezionare ogni dettaglio del tuo design.

In questo articolo esploreremo in modo approfondito cosa sono i selettori widget di Elementor, perché sono essenziali per la personalizzazione avanzata e come utilizzarli in modo efficace per migliorare l'aspetto del tuo sito. Imparerai come sfruttare questa funzionalità per creare layout unici, ottimizzare l'esperienza utente e mantenere la coerenza visiva su tutte le tue pagine.

Se sei pronto per portare la personalizzazione del tuo sito a un livello superiore e padroneggiare le complessità dei selettori di widget in Elementor, continua a leggere.

---

contenuto

Perché utilizzare i selettori widget di Elementor?

I selettori di widget in Elementor sono strumenti essenziali per personalizzare e mettere a punto il fileaspetto del tuo sito web. Utilizzati nei CSS personalizzati, forniscono maggiore precisione e flessibilità per la progettazione delle tue pagine. Ecco alcuni motivi convincenti per utilizzare i selettori widget in Elementor:

In sintesi, i selettori di widget Elementor offrono personalizzazione precisa, flessibilità di progettazione e ottimizzazione dell'esperienza utente. Sfruttando il loro potenziale, puoi creare siti Web visivamente accattivanti ed efficaci dal punto di vista funzionale, risparmiando tempo e garantendo coerenza in tutto il tuo sito.

---

Come utilizzare un selettore widget in Elementor

Si supponga di voler applicare una dimensione diversa tra icona e 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 ottenere ciò tramite il CSS personalizzato. Puoi scegliere come target icone o testo per applicare CSS personalizzati.

Innanzitutto, seleziona il selettore dell'elemento che desideri scegliere come target (ad esempio, l'icona del pulsante). Nel pannello delle impostazioni dell'elemento, vai alla scheda avanzato e apri il blocco CSS personalizzato.

accedere selector [selector name] {} nel campo CSS personalizzato.

Ecco l'esempio.

Successivamente, aggiungi il tuo contenuto CSS (dichiarazione) tra parentesi graffe.

Ecco l'esempio.

Nota: Ogni widget Elementor ha un elemento padre (wrapper). accedere selector {} (senza il nome del selettore) significa indirizzare il wrapper.

Elenco di selezione dei widget di Elementor

Fisarmonica

Il widget	.elementor-fisarmonica
Titolo della fisarmonica	.elementor-fisarmonica-titolo
Descrizione della fisarmonica	.elementor-tab-content
Icona della fisarmonica aperta	.icona-elementor-fisarmonica
Icona della fisarmonica chiusa	.elementor-accordion-icon-chiuso

Mettere in guardia

Il widget	.elementor-avviso
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-wrapper-dinamico

Descrizione archivio

Archivio testo

.elementor-titolo-intestazione

Archivia post

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
post estratto	.elementor-post__estratto
Scopri di più	.elementor-post__leggi-di più
Area meta-posta	.elementor-post__meta-dati
Data di pubblicazione	.elementor-post-data
Post autore	.elementor-post-autore
Tempo di pubblicazione	.elementor-post-tempo
Invia 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	.elemento-pulsante-link
Carica più icona del pulsante	.icona-pulsante-elementor

Box dell'autore

Il widget	.elementor-author-box
Avatar	.elementor-author-box__avatar
Nome dell'autore	.elementor-autore-box__nome
Autore Bio	.elementor-author-box__bio
Pulsante Archivia	.elementor-author-box__pulsante

Galleria di base

Il widget	.elementor-galleria-immagini
Elemento della galleria	.gallery-elemento
Didascalia	.wp-didascalia-testo

blockquote

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

Call to Action

Il widget	.elementor-cta
Immagine intestazione	.elementor-cta__bg
Nastro	.elementor-nastro
Testo della barra multifunzione	.elementor-nastro-interno
Titolo del contenuto	.elementor-cta__titolo
Descrizione del contenuto	.elementor-cta__descrizione
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-conto alla rovescia-secondi
Etichetta conto alla rovescia	.elementor-etichetta-conto alla rovescia

contatore

Il widget	.elementor-contatore
Prefisso numerico	.elemento-contatore-numero-prefisso
Numero	.contatore-elemento-numero
Suffisso numerico	.suffisso-numero-contatore-elemento
Titolo	.elementor-contro-titolo

Divider

Il widget	.elementor-divisore
Separatore	.elementor-divisore-separatore
Elemento testo/icona	.elemento-divisore__elemento

Flip box

Il widget	.elementor-flip-box
Contenitore frontale	.elementor-flip-box__front
Contenitore posteriore	.elementor-flip-box__back
Contenitore di contenuto	.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__pulsante

Modulo

Il widget	.elementor-forma
Contenitore per gradini	.e-form__indicatori
Numero di passi	.e-form__indicatori__indicatore
Etichetta di campo	.elementor-etichetta-campo
Testo del campo	.elementor-campo-testuale
Etichetta campo di testo	.elemento-campo-tipo-testo
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-
Accettazione etichetta campo	.accettazione-tipo-campo-elementor
Etichetta campo data	.elementor-field-type-date
Etichetta del campo dell'ora	.elementor-tipo-campo-ora
Etichetta campo numero	.numero-tipo-campo-elemento
Etichetta campo caricamento file	.elementor-field-type-upload
Pulsante Successivo	e-form__buttons__wrapper__button-next
Pulsante precedente	.e-form__buttons__wrapper__button-precedente
Invia Button	.pulsante-elementor

Galleria

Titolo della galleria (per più gallerie)	.elementor-gallery-titolo
Elemento della galleria	.elementor-galleria-elemento
Descrizione (su Overlay)	.elementor-gallery-item__description

Titolo

Il widget

.elementor-titolo-intestazione

Icona

Il widget

.icona-elementor

icona Box

Il widget	.elementor-icon-box-wrapper
Icona	.icona-elementor
Contenitore di contenuto	.elementor-icon-box-content
Titolo del contenuto	.elementor-icon-box-titolo
Descrizione del contenuto	.elementor-icon-box-descrizione

Elenco delle icone

Icona elenco	.elemento-icona-elenco-icona
ListText	.elementor-icon-list-text

Immagine

Immagine	img
Didascalia	.wp-didascalia-testo

immagine Box

Immagine	.elementor-image-box-img
Contenitore di testo	.elementor-image-box-content
Titolo del contenuto	.elementor-immagine-box-title
Descrizione del contenuto	elementor-immagine-box-descrizione

Immagine Carousel

Contenitore di immagini	.swiper-slitta
PictureItem	.swiper-slide-immagine
Contenitore di impaginazione	.swiper-impaginazione
Impaginazione a punti	.swiper-impaginazione-proiettile
Icona precedente	.elementor-swiper-pulsante-prec
Avanti	.elementor-pulsante-swiper-successivo
Didascalia immagine	.elementor-image-carousel-caption

Carosello multimediale

Elemento multimediale	.elementor-carousel-immagine
Sovrapposizione elemento multimediale	.elementor-carousel-image-overlay
Impaginazione a punti	.frazione-impaginazione-swiper
Pulsante precedente	.eicon-chevron-sinistra
Pulsante Successivo	.eicon-chevron-destra
Impaginazione della frazione	.frazione-impaginazione-swiper
Impaginazione della barra di avanzamento	.swiper-pagina-avanzamento-barra
Riempimento paginazione barra di avanzamento	.swiper-impaginazione-barra di avanzamento-riempimento

Nav Menu

Toggle Menu mobile	.elementor-menu-toggle
Icona del menu mobile	.eicon-barra-menu
Menù normale	.menu-nav-elementor
Discesa	.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

Portfolio

Articolo portafoglio	.elementor-portfolio-item
Elemento del portafoglio su sovrapposizione	.elementor-portfolio-item__overlay
Titolo sovrapposto	.elementor-portfolio-item__title
Filtro portafoglio	.elementor-portfolio__filter

Pubblica commenti

Titolo della risposta	.commento-risposta-titolo
Come Area Forma	.modulo di commento
Modulo di commento	.commento-modulo-commento
Invia Button	.invio-modulo

Informazioni sul post

Il widget	.elementor-post-info
Avatar	.elementor-avatar
Elenco delle icone	.elemento-icona-elenco-icona
Testo icona	.elementor-icon-list-text

Post Navigation

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 del prossimo post	.post-navigation__next–titolo

Post

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
post estratto	.elementor-post__estratto
Scopri di più	.elementor-post__leggi-di più
Area meta-posta	.elementor-post__meta-dati
Data di pubblicazione	.elementor-post-data
Post autore	.elementor-post-autore
Tempo di pubblicazione	.elementor-post-tempo
Invia 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	.elemento-pulsante-link
Carica più icona del pulsante	.icona-pulsante-elementor

Titolo del post

Il widget

.elementor-titolo-intestazione

Prezzo di listino

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
Voce di elenco Descrizione	.elementor-descrizione-listino-prezzi

Tabella dei prezzi

Il widget	.elementor-tabella-prezzo
Intestazione tabella	.elementor-price-table__header
Titolo dell'intestazione della tabella	.elementor-price-table__heading
Descrizione dell'intestazione della tabella	.elementor-prezzo-tabella__subheading
Prezzo	.elementor-tabella-prezzo__prezzo
Valuta	.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-tabella-prezzo__elenco-caratteristiche
Voce dell'elenco delle caratteristiche	.elementor-price-table__feature-inner
Piè di pagina della tabella	.elementor-prezzo-tabella__footer
Pulsante piè di pagina della tabella	.elementor-tabella-prezzi__pulsante
Testo del piè di pagina della tabella	.elementor-tabella-prezzi__additional_info
Nastro	.tabella-prezzo-elementor__ribbon
Nastro interno	.elementor-tabella-prezzi__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-testo
Percentuale di avanzamento	.elementor-percentuale di progresso

Tracker dei progressi

Il widget	.elementor-scrolling-tracker
Progressi	.percentuale-di-avanzamento-corrente

Recensioni

Il widget	.elementor-swiper
Recensione articolo	.swiper-slitta
Testata di revisione	.elementor-testimonial__header
Revisore di immagini	.elementor-testimonial__image
Nome revisore	.elementor-testimonial__name
Titolo del revisore	.elementor-testimonial__title
Contenuto della testimonianza	.elementor-testimonial__content
Testo di testimonianza	.elementor-testimonial__text
Impaginazione a punti	.swiper-impaginazione-proiettile
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 paginazione barra di avanzamento	.swiper-impaginazione-barra di avanzamento-riempimento
Pulsante precedente	.eicon-chevron-sinistra
Pulsante Successivo	.eicon-chevron-destra

Pulsanti Condividi

Elemento pulsante	.elementor-share-btn
Icona del pulsante	.elementor-share-btn__icon
Testo pulsante	.elementor-share-btn__text

Diapositive

Il widget	.elementor-slide-wrapper
Area di contenuto	.contenuto-diapositiva-swiper
Intestazione del contenuto	.elementor-slide-heading
Descrizione del contenuto	.elementor-slide-descrizione
Pulsante Contenuto	.pulsante-scorrimento-elementor
Impaginazione a punti	.swiper-impaginazione-proiettile
Pulsante precedente	.eicon-chevron-sinistra
Pulsante Successivo	.eicon-chevron-destra

Social Icons

Il widget	.elementor-social-icons-wrapper
Elemento icona	.elementor-icona-sociale

Stelle

Il widget	.elementor-star-rating__wrapper
Titolo della valutazione	.elementor-star-rating__title
Area dell'icona della stella	.elementor-classificazione in stelle
Icona stella piena	.elementor-stella-pieno
Icona a stella riempita a metà	.elementor-stella-5
Icona stella vuota	.elementor-stella-vuota

Sommario

Il widget	.elementor-widget-container
Intestazione ToC	.elementor-toc__header
Titolo intestazione ToC	.elementor-toc__header-titolo
Pulsante Espandi	.elementor-toc__toggle-button–espandi
Pulsante Comprimi	.elementor-toc__toggle-button–espandi
Corpo ToC	.elementor-toc__body
Voce elenco ToC	.elementor-toc__list-item
ToC livello superiore	.elementor-toc__list-item-text.elementor-toc__top-level

Tabs

Il widget	.elementor-schede
Titolo scheda	.elementor-tab-titolo
Tab Content	.elementor-tab-content

Testimonial

Il widget	.elementor-testimonial-wrapper
Contenuto della testimonianza	.elementor-testimoniale-contenuto
Testimonianza Meta	.elementor-testimonianza-meta
Testimonianza Avatar	.elementor-immagine-testimoniale
Nome della testimonianza e titolo di lavoro	.elementor-testimonial-dettagli
Nome Testimonianza	.elementor-nome-testimoniale
Titolo di lavoro testimoniale	.elementor-testimonial-lavoro

Testimonianza Carousel

Il widget	.elementor-widget-container
Testimonianza diapositiva articolo	.elementor-testimoniale
Contenuto della testimonianza	.elementor-testimonial__content
Testimonianza Meta	.elementor-testimonial__footer
Testimonianza Avatar	.elementor-testimonial__image
Nome della testimonianza e titolo di lavoro	.elementor-testimonial__cite
Nome Testimonianza	.elementor-testimonial__name
Titolo di lavoro testimoniale	.elementor-testimonial__title
Impaginazione a punti	.swiper-impaginazione-proiettile
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 paginazione barra di avanzamento	.swiper-impaginazione-barra di avanzamento-riempimento
Pulsante precedente	.eicon-chevron-sinistra
Pulsante Successivo	.eicon-chevron-destra

Editor di testo

Il widget

.elementor-editor di testo

Toggle

Il widget	.elementor-toggle
Attiva/disattiva elemento	.elementor-toggle-item
Attiva/disattiva il titolo dell'elemento	.elementor-tab-titolo
Attiva/disattiva il contenuto dell'elemento	.elementor-tab-content
Attiva / disattiva l'icona	.elementor-toggle-icona
Attiva/disattiva icona chiusa	.elementor-toggle-icona-chiuso
Attiva/disattiva icona aperta	.elementor-toggle-icon-aperto

Sebbene Elementor offra 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.

Altro risorse Elementore:

• 14 plugin WordPress che Elementor può sostituire
• Come creare un modulo con Elementor gratuito
• Come utilizzare i widget/modelli di Elementor come blocchi Gutenberg
• Elementor: come importare o esportare modelli
• Come disabilitare un popup di Elementor sugli smartphone
• Come creare un modello di prodotto singolo personalizzato in WooCommerce con Elementor
• Come utilizzare il widget dei post di Elementor
• Come aggiungere elementi correlati in Elementor

Puoi semplicemente ispezionare un widget su una pagina live per trovare il suo selettore. Per farti risparmiare tempo, abbiamo creato l'elenco dei selettori di widget di Elementor in modo che tu non debba ispezionare tutti i widget da solo.

---

Domande frequenti sui selettori widget di Elementor

---

Conclusione

L'utilizzo di selettori di widget personalizzati in Elementor ti dà il controllo per perfezionare il design del tuo sito web con una precisione senza precedenti. Comprendendo i diversi tipi di selettori disponibili e sapendo come applicarli, puoi personalizzare ogni aspetto dei tuoi widget per adattarli perfettamente alla tua visione creativa.

Sia che tu voglia regolare margini, colori o altri stili specifici del widget, i selettori ti offrono la flessibilità necessaria per apportare queste modifiche senza sforzo. L'uso efficace di questi selettori non solo migliora l'aspetto del tuo sito ma contribuisce anche a un'esperienza utente coerente e professionale.

Padroneggiando questi strumenti, ottimizzi la presentazione dei tuoi contenuti e massimizzi l'impatto visivo di ciascun elemento della tua pagina. Non esitare a sperimentare diversi selettori per scoprire tutte le possibilità offerte da Elementor. Vedrai come questi aggiustamenti possono trasformare le tue pagine e offrire un'esperienza utente ancora più coinvolgente.

COSÌ ! Ti abbiamo appena presentato l'elenco dei selettori di widget Elementor. Se hai dubbi su come arrivarci, faccelo sapere all'interno commentaires.

Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.

...