Custom pricing columns with a custom-built WordPress theme and full-site editing.
Tempo di lettura: 4 minuti

Mentre stavo esaminando la directory dei plug-in di WordPress questa mattina, ho notato un nuovo plug-in di blocco, che è sempre uno dei momenti salienti della mia settimana. Era semplice blocco dei prezzi. Ovviamente l’ho installato e ho iniziato a giocare con le sue caratteristiche. Era un prodotto versione 1.0, quindi non avevo intenzione di biasimarlo per non aver superato le aspettative che avrei potuto avere.

Non ho dubbi che il plugin soddisferà le esigenze di molti utenti. Tuttavia, non ha portato molto sul tavolo che gli utenti non potevano già fare con WordPress stock. E, poiché il sistema di blocchi continua a maturare con più opzioni di blocco, gli utenti finali acquisiranno un maggiore controllo di progettazione su ogni aspetto dei blocchi di base esistenti.

Questo non è un colpo a questo particolare plugin. Vedo sempre meno la necessità di molti blocchi di terze parti più li sfoglio e li provo. Con i blocchi di base di WordPress e un tema decente, molte soluzioni personalizzate sono possibili tramite modelli.

Per testare il blocco del plug-in, l’ho aggiunto a un blocco Colonne e l’ho duplicato un paio di volte per creare colonne dei prezzi.

La struttura di un singolo blocco dei prezzi è semplice. Contiene l’equivalente dei seguenti blocchi principali:

  • Gruppo
  • Intestazione
  • Intestazione / Paragrafo
  • Intestazione / Paragrafo
  • Paragrafo
  • Pulsante / i
  • Separatore
  • Elenco

Dato che avevo la struttura, ho provato a ricrearla usando il tema Twenty Twenty-One. Ho mantenuto tutto quasi uguale a parte un paio di dimensioni e colori dei caratteri.

Schema delle colonne dei prezzi come mostrato dal tema Twenty Twenty-One.

Il risultato non è stato particolarmente impressionante, ma era per lo più alla pari con ciò che stava facendo il plugin. La più grande delusione con Twenty Twenty-One è che non ci sono controlli di spaziatura verticale per restringere parte del testo. Questa è più una limitazione di WordPress rispetto al tema. Inoltre, stanno arrivando i controlli di margine e riempimento.

A parte l’inserimento con un clic nell’area di disegno del contenuto, i vantaggi offerti dal plug-in Pricing Block sono i bordi arrotondati, le ombre dei riquadri e le icone degli elenchi. Tuttavia, questi elementi si adatterebbero maggiormente al design di un sito se fossero controllati dal tema.

Sapendo che il file Tema Eksell risolto il problema dell’allineamento verticale con uno stile di blocco personalizzato, ho deciso di provarlo. Di nuovo, sono rimasto per lo più bloccato con la stessa struttura.

Colonne dei prezzi che utilizzano il tema Eksell WordPress nell'editor di blocchi.

Molto meglio. Tuttavia, Eksell è un tema così ben progettato che migliorerà l’aspetto di quasi tutto. Quasi non è giusto.

Facendo salire di livello le cose, ho rivisto lo schema. Ho spostato alcune cose, cambiato alcuni colori e ho cercato di divertirmi un po ‘.

Design alternativo delle colonne dei prezzi con il tema Eksell.  Aggiunto sfondo dell'intestazione.

La cosa degna di nota qui è che avevo molto più controllo sul posizionamento e sul design, entro i limiti attuali di WordPress. Questo non era possibile con il blocco del plugin.

Esistono blocchi di prezzo più solidi. Questo non è un confronto di tutte le opzioni disponibili là fuori. Tuttavia, molti blocchi condividono questi problemi. Spesso, ciò di cui hanno bisogno è sfruttare il sistema di “blocchi interni” di WordPress e annidare i blocchi principali, che fornisce l’accesso alle opzioni di progettazione esistenti.

Volendo portare questo esperimento solo un po ‘oltre, ho attivato una versione di sviluppo del plugin Gutenberg e un tema basato su blocchi con cui stavo armeggiando. Con gli strumenti giusti in mano, avevo il controllo su spaziatura, bordi, tipografia e molto altro ancora, funzionalità che gli utenti avranno nei prossimi mesi.

Colonne dei prezzi personalizzate con un tema WordPress personalizzato e la modifica dell'intero sito.

Mi piace, ma mi piacerebbe anche vedere i designer professionisti prendere il sopravvento da qui. Voglio vedere varie colonne / tabelle dei prezzi disponibili come modelli nei temi e nel file prossima directory dei blocchi.

Il livello successivo di colonne dei prezzi sarebbe l’integrazione con plug-in come WooCommerce, Easy Digital Download e altre soluzioni di e-commerce. Ad esempio, gli utenti possono inserire il prezzo di un prodotto o il pulsante Acquista ora in un modello predefinito inserito nella tela dell’editor. In questo modo, i dati rimangono aggiornati.

Tuttavia, questo non riguarda specificamente le colonne dei prezzi. Riguarda l’ecosistema dei blocchi nel complesso. Quasi ogni volta che vedo un blocco di testimonianze, ad esempio, lo vedo solo come un altro pattern che potrebbe essere registrato.

Per gli utenti finali, la soluzione rapida sarà spesso quella di attivare un plug-in aggiuntivo. Ciò richiede più risorse nell’editor e, di solito, nel front-end. Li collega anche a un altro strumento di terze parti, uno di cui potrebbero non essere necessariamente necessari.

In definitiva, la maggior parte delle sezioni della pagina web può essere suddivisa nei singoli blocchi esistenti in WordPress. Devono semplicemente essere disposti in un ordine specifico e raggruppati insieme. La nostra comunità di autori di temi può iniziare a fornire queste soluzioni facendo il lavoro di gruppo di questo raggruppamento e registrandoli come modelli.

I blocchi più utili fanno qualcosa che WordPress non è in grado di fare da solo o aggiungendo elementi che non esistono.

Source link

Di Simone Serra

Web Designer Freelancer Realizzazione Siti Web Serra Simone Realizzo siti web, portali ed e-commerce con focus specifici sull’usabilità, l’impatto grafico, una facile gestione e soprattutto in grado di produrre conversioni visitatore-cliente. Elaboro siti internet, seguendo gli standard Web garantendo la massima compatibilità con tutti i devices. Sviluppo e-commerce personalizzati, multilingua, geolocalizzati per potervi mettere nelle migliori condizioni di vendita. Posiziono il tuo sito su Google per dare maggiore visibilità alla tua attività sui motori di ricerca con SEO di base o avanzato.