BLOG

Curiosità, trucchi e consigli

Badge personalizzati nel widget post di Elementor PRO

Tempo di lettura circa 6 minuti

Sviluppando il nuovo layout con Elementor PRO per il sito di Layla Marlene  mi sono imbattuto in una richiesta banale ma solo all’apparenza: visualizzare badge personalizzati nel widget Post di Elementor PRO.

Cos'è Elementor PRO

Se non lo conosci, Elementor PRO è uno dei migliori (forse il migliore) plugin per WordPress per il visual editing: in pochi minuti e una conoscenza base di sviluppo web sarai in grado di creare incredibili contenuti grafici per il tuo sito.

Elementor è un plugin gratuito che puoi installare dalla directory dei plugin di WordPress e come ormai la gran parte dei plugin più seri, dispone di una versione PRO che ne estende funzioni, caratteristiche e librerie.

Elementor è quindi un visual editor drag&drop molto potente che ti consiglio assolutamente di provare.

Differenze tra Elementor FREE e PRO

Ho utilizzato per molto tempo la versione free, cercando sempre di colmare alcune lacune utilizzando altri plugin o scrivendo codice ad hoc. Preso però dalla curiosità e colpito dalla potenza di questo plugin ho deciso di testare la versione PRO durante lo sviluppo di un sito per un mio cliente: ne sono rimasto estasiato!

Con la versione free sei subito operativo e in grado di creare pagine o articoli degni di nota: puoi inserire semplicemente trascinando elementi come sezioni, intestazioni, immagini, testi, video, pulsanti, divisori, distanziatori, mappe di Google e icone SVG/Awesome.

La versione PRO estende queste funzionalità aggiungendo molti utilissimi widget dal design unico e svariate funzioni: sarai in grado di aggiungere post loop, portfolio loop, gallerie di immagini (anche con effetto masonry), moduli, form di login, slides, menù di navigazione, intestazioni animate, listini e tabelle di prezzi, flip box, pulsanti call to action, carosello media e testimonianze, recensioni, tabelle di contenuti, conti alla rovescia, pulsanti di condivisione, citazioni, pulsanti e commenti Facebook, pagine Facebook e template.

ELEMENTOR FREE

ELEMENTOR PRO

ELEMENTOR PRO

Oltre alle funzioni elencate e mostrate nei 3 flipbox qui sopra, Elementor PRO introduce un Theme Builder per creare veri e propri template da applicare al tuo tema: un template non è altro che un modello disegnato per essere applicato automaticamente ad esempio a tutti i tuoi post, pagine, archivi… ma anche alle parti strutturali del sito come header e footer.

Infine (per non dilungarmi troppo perché Elementor PRO ha veramente numerosissime funzioni), l’acquisto garantisce l’accesso a pagine e blocchi pronti per essere utilizzati personalizzandoli a piacimento… allego tre esempi qui sotto.

Precedente
Successivo

Prezzo di Elementor PRO

La versione PRO di questo plugin per un sito singolo e uso personale costa 49$ l’anno e puoi acquistarla cliccando qui o sul banner qui sotto!

badge personalizzati in Elementor PRO

Veniamo al punto: utilizzando il widget post per generare appunto un loop dei post è possibile aggiungere un badge generalmente in alto a destra che indica un tag o la categoria a cui appartiene quell’articolo. Questa funzione però non permette ad esempio la sostituzione di tale badge con un’immagine o la differenziazione di colore in base alla categoria di appartenenza. Per poter quindi mostrare badge personalizzati in Elementor PRO, dopo qualche ora di prove, ho trovato due soluzioni che illustrerò qui sotto.

Badge con colori personalizzati in base alla categoria

Questo esempio è visualizzabile nella pagina principale di questo blog e applica un colore differente ad ogni categoria a cui appartiene l’articolo. Non trovando una soluzione nativa in Elementor PRO (forse per mancanza mia ma non sono riuscito ad applicare ai Dynamic tags un colore per ogni categoria), sono intervenuto nel CSS della pagina assegnando un colore di sfondo ad ogni classe di badge legata alla categoria.

.category-apple .elementor-post__badge {
background-color: #2b48bb !important;
}
.category-app .elementor-post__badge {
background-color: #00b756 !important;
}
.category-criptovalute .elementor-post__badge {
background-color: #cfbb00 !important;
}
.category-sviluppo-web .elementor-post__badge {
background-color: #dc3d40 !important;
}

Per farlo anche tu dovrai premere sull’ingranaggio in basso a sinistra dell’editor Elementor della pagina e incollare il codice qui sopra nella scheda Avanzato, ricordandoti di sostituire le mie categorie con le tue.

Badge con colori personalizzati in base alla categoria del post

Badge con un'immagine personalizzata

Tornando però alla richiesta iniziale, il problema non era quello di mostrare un badge differente in base alla categoria ma di mostrare un badge immagine a piacimento solo su determinati post. Per fare un esempio pratico, immagina di avere un loop di prodotti e di voler mostrare un’immagine in alto a destra su ogni prodotto in offerta…

Per farlo hai due opzioni: dato che Elementor assegna un badge per categoria o per tag, escludiamo la prima opzione… in quanto un articolo sarà sempre legato ad una categoria (e quindi vedresti un badge sopra OGNI articolo). La seconda opzione e cioè lavorare sui tag, è applicabile solo ed esclusivamente se nel tuo sito non utilizzi proprio il sistema nativo di tag di WordPress… altrimenti dovremo optare per un’opzione un po’ più complicata, la terza.

Opzione due: tag

Come ti ho appena detto puoi leggere e mettere in pratica quel che scrivo in questo paragrafo SOLO se non usi già i tag nei tuoi articoli. In questo caso, per cominciare ti basterà applicare lo stesso tag (ad esempio “offerta”) a tutti i post nei quali vorresti vedere il badge, modificandoli ad uno ad uno o meglio ancora con le azioni di massa di WP.

Ora che gli articoli che hai scelto hanno un tag potrai continuare nell’editor Elementor dell’articolo, attivando il badge nel widget post e scegliendo dal menù a tendina “Badge tassonomia” il termine Tag: come potrai vedere, dovrebbe essere comparso il badge sugli articoli da te scelti e ora ti basterà copiare il codice CSS qui sotto e incollarlo nella pagina (premendo sull’ingranaggio in basso a sinistra dell’editor Elementor della pagina e incollando il codice qui sotto nella scheda Avanzato) per trasformare il badge testuale in un’immagine precedentemente caricata nella libreria WordPress.

.elementor-post__badge {
background-image: url('incollare qui indirizzo completo immagine scelta') !important;
background-color: transparent !important;
color: transparent !important;
height: 50px;
background-size: contain !important;
background-repeat: no-repeat !important;
width: 50px;
z-index: auto !important;
}

Opzione tre: tassonomia personalizzata

Come ti ho accennato, questa opzione è la più complessa e dovresti sceglierla SOLO nel caso in cui nel tuo sito utilizzi già i tag e non hai modo quindi di mostrare un badge personalizzato nel loop dei post di Elementor PRO (in quanto la scelta nativa è solo tra tag e categorie). 

Il primo step è installare un nuovo plugin che ti permetterà di creare una tassonomia nuova che andrà ad aggiungersi ai tag e alle categorie: il plugin gratuito in questione si chiama Custom Post Type UI e una volta installato, dal suo menù troverai la voce “Aggiungi/modifica tassonomie”, sezione in cui potrai creare una nuova tassonomia chiamata ad esempio Badge. 

Ora che hai creato una nuova tassonomia sarai in grado di, modificando un articolo dall’editor di WordPress, aggiungere alla neo sezione Badge un termine di tuo gradimento, come se fosse un tag… per comodità usiamo ancora “offerta” come mostro nell’esempio qui sotto.

Ricapitolando, in questo momento abbiamo una nuova tassonomia chiamata Badge e abbiamo un articolo al quale abbiamo assegnato il termine “offerta” nella nuova tassonomia. Così facendo, riaprendo l’editor Elementor con il loop dei post e selezionando appunto il loop dei post, potrai scegliere alla sezione Badge la Badge tassonomia appena creata, vedi immagine qui sotto.

Abbiamo quasi finito, ora ti basterà copiare il codice CSS che trovi nell’opzione due e incollarlo nella pagina (premendo sull’ingranaggio in basso a sinistra dell’editor Elementor della pagina e incollando il codice qui sotto nella scheda Avanzato) per trasformare il badge testuale in un’immagine precedentemente caricata nella libreria WordPress.

Conclusioni

Per soddisfare la richiesta di visualizzare badge personalizzati nel widget post di Elementor PRO ho trovato un workaround e ho cercato di spiegartelo nel modo più semplice possibile pur essendo un procedimento un po’ macchinoso. Sono disponibile ad aiutarti nel caso in cui dovessi incontrare qualche difficoltà!

Hai domande o curiosità? Utilizza la sezione commenti qui sotto, puoi anche fare il login con Facebook!

Vota questo articolo
Voti totali: 0 con una media di 0

Lascia un commento