Quando scrivi recensioni di prodotti o post di confronto, in cui devi evidenziare il bene e il male del prodotto o servizio in primo piano, è una buona idea aggiungere un plug-in Pro e contro, per mostrare caselle standardizzate nella parte inferiore dei tuoi post.
Quando ho visto per la prima volta l'editore di Gutenberg, l'ho odiato.
Ho immediatamente cercato una soluzione per riportare il vecchio aspetto del mio post backend WordPress. Uno sguardo con cui mi sentivo così a mio agio, un comfort costruito da più di 15 anni.
Fortunatamente non ero solo ed ero più che felice quando ho visto che i ragazzi premurosi di WordPress hanno creato un plugin chiamato Classic editor.
Ero scettico sul nuovo editor di blocchi, con tutti i popolari costruttori di pagine là fuori, cosa stava pensando WordPress? Come potrebbero competere con le potenti funzioni di Elementor o WPBakery?
Il tempo passava e continuavo a ignorare l'editore di Gutenberg. Un giorno ho installato una nuova copia di WordPress su un nuovo sito che stavo iniziando allora, e ho pensato di provarlo.
All'inizio, lo odiavo, ma poi gradualmente ho iniziato a provare nuovi componenti aggiuntivi, nuovi blocchi, stili diversi, per rendermi conto un giorno che questo è il futuro di WordPress e della costruzione di pagine.
Sto ancora passando all'editor di blocchi qui su wpctrl.com, poiché ci sono molti post che usano vecchi shortcode e devo rivedere manualmente ognuno di essi, ma sono nel processo.
Questo post è fatto con l'editor blocchi!
Iniziamo con gli esempi di pro e contro (edizione Gutenberg)
Quando dimentichi le vecchie abitudini nella schermata "Modifica post", TinyMCE, Meta Boxes, ecc. E ti abitri all'editor di blocchi, lo adorerai.
Per prima cosa, vai a prendere alcuni plugin aggiuntivi gratuiti di cui avrai bisogno per questi esempi.
Plugin utilizzati nel tutorial
Metodo #1 – Utilizzo di Genesis Blocks
Questo è il mio primo suggerimento per creare una sezione Pro e contro per le tue recensioni con i blocchi di Gutenberg.
Esempio dal vivo:
Pro
– Gratuito
– Buon prezzo
– Ottimizzato
Contro
– Cattiva qualità
– Scarso supporto
– Costoso
La sezione sopra è realizzata con il plugin gratuito Genesis Blocks.
Ecco il processo esatto:
Scegli il posto desiderato per posizionare le caselle nel tuo post e fai clic sul segno "+" per aggiungere un nuovo blocco.
È possibile aggiungere una colonna e dividerla in due metà.
Quindi, scorri verso il basso e tocca il blocco Genesis Blocks Notice.
Da qui devi solo cambiare i colori e aggiungere l'elenco di pro e contro.
Questo è il metodo più semplice, ma ha i suoi limiti.
- Non è possibile utilizzare icone personalizzate
- Non è possibile aggiungere un elenco puntato effettivo (solo testo normale)
Metodo #2 – Utilizzo dei blocchi Getwid
Esempio dal vivo:
Anche questo è abbastanza facile da ottenere.
Fai clic sul segno più nel tuo post o pagina per aggiungere un nuovo blocco. Trova i blocchi Getwid e seleziona la casella icona dal menu Getwid.
Nelle opzioni di blocco sul lato destro dello schermo, applica le seguenti impostazioni:
- Nella scheda generale scegliere l'icona per la prima colonna e l'allineamento del contenuto.
- Nella scheda stile, è possibile impostare le dimensioni dell'icona, i colori sia dell'icona che dello sfondo dell'icona, il raggio e lo spazio intorno all'icona (imbottiture)
- Nella scheda avanzate, hai la possibilità di impostare aggiungi un link alla tua icona. Lascia questo vuoto, perché non avrà alcun senso
Leggi prima questo!
Al momento della stesura di questo articolo, non sono riuscito a trovare alcun plugin per fare ciò che sto descrivendo di seguito. Ma in seguito nuovi plugin hanno iniziato ad apparire, per creare elenchi di pro e contro ancora migliori, e ciò che è più importante è renderli più facili!
Quindi li ho raccolti e li ho aggiunti al post qui sotto.
Controlla JoomDev WP Pro & Contro!
Vedi l'elenco dei plugin pro e contro e decidi tu stesso. Se ti piace di più il mio, sentiti libero di usarlo. Buon divertimento!
I migliori plugin GRATUITI pro e contro
Pro & Contro è un elemento potente nelle recensioni dei tuoi prodotti affiliati e sono noti per aumentare il tasso di conversione, oltre ad essere un ottimo elemento user-friendly. Gli utenti tendono a saltare i lunghi articoli e cercare direttamente conclusioni o riepilogi.
1. Mighty Classic Pro e contro
Questo è stato uno dei primi plugin che dovrebbero fare proprio questo: mostrare elenchi di pro e contro con un semplice pulsante CTA.
Il plugin gratuito fornisce uno shortcode ed è costruito per funzionare con il classico editor di WordPress.
Se si desidera utilizzare la funzione nell'editor gutenberg, è necessario ottenere i Mighty Pro & Contro
2. i2 Pro e contro
È possibile utilizzare il vecchio shortcode o modificare visivamente l'elenco nei blocchi di Gutenberg.
I pro e i contro hanno più stili tra cui scegliere. Puoi modificare i colori, le icone, lo stile dei pulsanti e altro ancora.
Pro e contro del fai-da-da-fi (Old Classic Edditor)
Ti mostrerò un modo semplice per farlo, senza scrivere o modificare alcun tipo di codice.
Ecco cosa otterrai alla fine…
Ecco un esempio dal vivo nella Basel Theme Review.
Una volta che ottieni un paio di caselle nel modo desiderato, puoi salvarlo in una bozza di post e in seguito copiarlo e incollarlo nelle tue nuove recensioni sostituendo solo gli attributi in esso contenuti.
I plugin che sto per mostrare non sono appositamente progettati per questo scopo. Quando mi sono imbattuto per la prima volta in questo, stavo cercando un modo per mostrare due semplici caselle con un elenco di brevi frasi di 2-3 parole.
La mia ricerca non restituisce risultati soddisfacenti, poiché sembrava che non ci fosse un plug-in gratuito dedicato ai pro e contro per quello che volevo.
Quindi, come sono riuscito a creare le mie scatole pro e contro?
Aggiornamento: Questo plugin non è più aggiornato, non è più consigliabile utilizzarlo.
Ho usato un plugin gratuito chiamato: Olevmedia Shortcodes.
Questo plugin presenta anche molti altri shortcode, ma quello che useremo per questo compito è il "Box"!
Puoi anche utilizzare gli shortcode Olevmedia per creare un pulsante CTA per le tue recensioni!
Ma prima le cose prima.
Prima di passare allo shortcode Box, aggiungeremo due colonne 1/2 alla nostra pagina.Puoi utilizzare il plug-in Olevmedia Shortcodes anche per questo o lo shortcode della colonna del tuo tema. In questo modo garantiamo una corretta visualizzazione reattiva sui dispositivi mobili e dimensioni anche delle scatole.
Seleziona l'icona "più" dall'editor.
Nel menu a discesa seleziona "Colonne", quindi scegli "Una metà" e inseriscilo nella tua pagina di lavoro. Dopodiché fai lo stesso, ma questa volta spunta la casella di controllo "ultima colonna" per visualizzare questa colonna accanto alla prima.
Mettiamoci subito al lavoro e creiamo le scatole vere e proprie…
Vai di nuovo all'icona "Plus" nel tuo editor visivo e scegli lo shortcode "Box". Dovresti ottenere questa schermata dopo aver fatto clic su di essa:
Come puoi vedere, abbiamo opzioni per la personalizzazione, che esamineremo in seguito.
I campi che devi compilare per ottenere qualcosa di simile alle mie caselle demo sono i seguenti:
- Titolo: Pro
- Contenuto: lascia questo vuoto per ora
- Confine: Aggiungi un bordo se vuoi (nel mio esempio non c'è)
- Colore di sfondo: Scegli un colore verde/rosso o altro per lo sfondo
- Icona della scatola: Per il mio esempio, sto usando le icone pollice in su e pollice in giù
- Altezza certa della scatola: Per l'esempio precedente ho impostato l'altezza su 250px. Nota che se lo lasci vuoto, le tue caselle appariranno irregolari!
Sostituisci il "Ecco il contenuto" con i testi pro o contro desiderati e inseriscili in un elenco puntato, direttamente dall'editor di WordPress in modalità visiva. Dovresti ottenere qualcosa del genere:
Ora puoi duplicare lo shortcode sopra e cambiare semplicemente il colore, l'icona e il nome in "Contro". Ora hai le due scatole: pro e contro. Infine, dobbiamo metterli in ciascuna delle colonne che abbiamo creato all'inizio.
Quindi copia la casella Contro e incollala nell'ultima colonna tra:
Congratulazioni! Sei pronto a creare recensioni fantastiche.
Salva il tuo predefinito in una bozza di pagina o post per essere pronto per l'uso. Assicurati solo di incollarlo in modalità "Testo", ogni volta che lo usi in un post reale, per evitare eventuali interruzioni del codice.
Disclosure: Some of the links on the page may contain a ref code (affiliate links), that tells the other side that we have sent you. If you liked what we suggest and you make a purchase, we may receive a commission.