Tutorial di WordPress Gutenberg su come creare un sito Web personalizzato utilizzando i blocchi

Questo è un tutorial di WordPress Gutenberg scritto da sviluppatori web che hanno una significativa esperienza nella creazione di siti Web WordPress utilizzando il suo nuovo editor di blocchi.

In questa guida, ti mostreremo come creare un sito Web complesso che includerà modelli di contenuto, archivi e una ricerca personalizzata. Useremo l'editor di blocchi di WordPress noto come Gutenberg e Toolset Blocks per costruire il sito web.

Perché Gutenberg è ora un ottimo modo per creare siti Web

Gutenberg è uscito da quasi un anno ed è abbastanza maturo da essere ora un modo fantastico e affidabile per progettare il sito Web esatto che avevi pianificato.

Gutenberg usa i blocchi per costruire le tue pagine. I blocchi sono elementi che contengono diversi tipi di contenuto in modo da poter creare i tuoi layout.

L'editor dei blocchi è ancora in evoluzione ma è già incredibilmente intuitivo e flessibile. Non è necessario essere un esperto di codifica per creare contenuti. Inoltre, quando lo combini con plug-in come Toolset Blocks, puoi facilmente creare siti Web complessi dall'aspetto eccezionale.

Gutenberg è anche molto più facile da usare sui dispositivi mobili rispetto al suo predecessore. Data la crescente quantità di lavoro che svolgiamo sui nostri cellulari, è un passo importante nella giusta direzione.

I migliori tipi di temi da utilizzare con Gutenberg

Ci sono un sacco di temi WordPress premium che sono compatibili con il Gutenberg Block Editor e supportano anche altri plugin premium.

Puoi esaminare rapidamente i temi migliori controllando il nostro elenco degli oltre 30 temi WordPress compatibili con Gutenberg.

Il miglior plugin per blocchi da usare con Gutenberg

Dal lancio di Gutenberg, più di un anno fa, sono stati rilasciati numerosi ottimi plugin che completano il nuovo editor di WordPress.

Per il nostro tutorial su WordPress Gutenberg, utilizzeremo Toolset Blocks insieme a Gutenberg per creare il nostro sito Web WordPress. Toolset Blocks offre una serie di vantaggi che semplificheranno sia ai programmatori che ai non programmatori la progettazione e l'implementazione rapida dei propri siti Web:

• Il tuo flusso di lavoro sarà molto più semplice . Non è più necessario progettare le pagine e poi implementarle. Puoi semplicemente crearli su WordPress e vedere immediatamente come appariranno.
• Non è necessario passare dal back-end al front-end . Invece puoi semplicemente progettare i tuoi modelli sul back-end e vedere immediatamente come appariranno.
• I non sviluppatori possono creare i siti Web dei loro sogni . Non devi più essere un esperto di programmazione per creare il sito web che volevi. Con i blocchi puoi aggiungere facilmente elementi complessi senza html o css.
• Dedica meno tempo alla lettura della documentazione . La natura semplice e intuitiva dei blocchi del set di strumenti significa che non è necessario leggere un sacco di documentazione per capire come costruire determinati elementi. Molti dei blocchi descrivono cosa puoi ottenere e possono essere usati e sperimentati facilmente.
• Nessuna ulteriore integrazione con plug-in di terze parti . Con il classico editor di WordPress avresti dovuto installare un generatore di pagine e plug-in compatibili aggiuntivi. Questo potrebbe gonfiare il tuo sito web rallentandolo in modo significativo. Ti affidi anche a terze parti che aggiornano i loro plugin e li tengono al sicuro. Toolset Blocks è integrato con Gutenberg e WordPress, quindi non causerà gli stessi problemi.
• Segui lo stesso flusso di lavoro del core di WordPress . Non devi preoccuparti di cambiare il modo in cui lavori con il nuovo editor di WordPress.

Tutorial di WordPress Gutenberg su come creare un sito Web personalizzato utilizzando i blocchi

Ora possiamo iniziare a creare il nostro sito Web personalizzato. Ad esempio, creeremo un sito Web demo che puoi utilizzare per cercare la migliore palestra o personal trainer nella tua zona.

Ecco cosa tratteremo in questo tutorial di WordPress Gutenberg:

• Aggiunta, modifica, spostamento ed eliminazione di blocchi
• Visualizza i contenuti fianco a fianco
• Navigare tra i tuoi blocchi
• Visualizzazione dei campi nei progetti dell'editor di blocchi
• Visualizzazione di una galleria di immagini
• Blocchi del set di strumenti per lo stile nell'editor
• Controlli tipografici
• Creazione di un modello
• Costruisci le tue pagine di archivio
• Creazione di elenchi di contenuti personalizzati
• Aggiunta di una ricerca personalizzata

Iniziamo!

Aggiunta, modifica, spostamento ed eliminazione di blocchi

Per prima cosa, esaminiamo le basi su come creare e rimuovere i blocchi. I blocchi sono un modo completamente nuovo di creare siti Web, ma dovrebbero essere necessari solo pochi minuti per abituarsi.

1. In una pagina o in un post fai clic sul pulsante +.
2. Cerca e clicca il blocco che vuoi utilizzare per inserirlo.

3. Immettere le informazioni sul contenuto per il blocco. Ad esempio, qui abbiamo aggiunto il blocco "Intestazione" e inseriremo un titolo per esso.
4. Sulla sinistra di ogni blocco, vedrai una serie di controlli che puoi usare per spostare i tuoi blocchi.

5. Usa la barra laterale destra per modificare le opzioni per il blocco che hai selezionato. Ad esempio, puoi modificare il colore del carattere, la dimensione dell'immagine o l'allineamento del testo.
6. Se fai clic sull'opzione a tre punti puoi vedere opzioni aggiuntive come il blocco Rimuovi

Come visualizzare i tuoi contenuti fianco a fianco

Puoi visualizzare facilmente i tuoi contenuti uno accanto all'altro sulla tua pagina utilizzando il blocco delle colonne.

1. Seleziona il pulsante +.
2. Cerca il blocco Colonne e inseriscilo.

3. Ora puoi vedere due colonne a cui puoi aggiungere blocchi normalmente.

4. Aumentare il numero di colonne selezionando il blocco di colonne e alternando il numero sulla barra di destra.

Navigare tra i tuoi blocchi

Mentre costruisci il tuo sito, alcuni dei tuoi progetti e modelli avranno molti blocchi. Uno dei modi più semplici per selezionare quello che si desidera modificare è utilizzare il pulsante Navigazione blocco nella parte superiore dell'editor e selezionare il blocco con cui si desidera lavorare.

Visualizzazione dei campi nei progetti dell'editor di blocchi

Puoi visualizzare le informazioni dai campi del post (titolo, corpo, ecc.) o dai campi personalizzati che potresti aver creato utilizzando i Blocchi del set di strumenti.

Esistono tre modi per visualizzare i campi che illustreremo di seguito come parte del tutorial di WordPress Gutenberg:

1. Imposta il contenuto del blocco in modo che provenga dai valori del campo

Ciascun blocco nella libreria Toolset Blocks consente di impostarne il contenuto dai campi. Ad esempio, puoi impostare qualsiasi testo di intestazione in modo che provenga da un campo post o da un campo personalizzato di Toolset.

Vediamo di seguito come funziona aggiungendo il testo dell'intestazione da un campo post al blocco Intestazione di Toolset per i nostri personal trainer.

1. Crea un nuovo modello di contenuto e scegli quale tipo di post personalizzato desideri visualizzare.
2. Seleziona il pulsante +.
3. Aggiungi il blocco Intestazione del set di strumenti .

4. Attivare il testo dinamico dell'intestazione .

5. Selezionare il campo dell'articolo che si desidera visualizzare. Di seguito ho selezionato il titolo del post .

Ora sarai in grado di vedere il titolo corretto per ciascuno dei post relativi a un determinato tipo di post personalizzato.

2. Visualizza i campi come singoli blocchi

Puoi visualizzare qualsiasi campo post o singolo campo personalizzato creato utilizzando Toolset come un blocco. Ad esempio, di seguito aggiungiamo il contenuto principale del post al nostro modello per le nostre palestre.

1. Selezionare il blocco Campo singolo .
2. Sulla barra di destra, sotto Tipo di campo , selezionare il campo Standard .
3. In Campo post seleziona l'opzione Contenuto post (corpo) .

La descrizione per ciascuna delle palestre apparirà ora nei rispettivi post.

3. Combina i campi con il testo in un blocco

Potrebbe essere necessario aggiungere un mix di campi e testi ai tuoi progetti. Ad esempio, potresti dover aggiungere etichette accanto ai campi personalizzati.

1. Seleziona i campi e il blocco di testo .

2. Digitare l'etichetta che si desidera aggiungere. Ad esempio, ho aggiunto "Valutazione" perché voglio visualizzare i risultati per il campo personalizzato Valutazione che mostra il punteggio per ogni palestra su 5.

3. Seleziona dalle icone il tipo di contenuto che desideri aggiungere. Puoi aggiungere un campo, un modulo o un output condizionale. Nel nostro caso, vogliamo aggiungere un campo.

4. Seleziona il contenuto che desideri aggiungere (nel mio caso è il campo Valutazione ) e fai clic su Inserisci shortcode .

Visualizza una galleria di immagini

Puoi anche aggiungere più immagini ai tuoi post usando i blocchi.

1. Selezionare il campo ripetuto/ blocco galleria .

2. Selezionare il gruppo di campi personalizzati che si desidera visualizzare.
3. Scegli il campo personalizzato che desideri visualizzare.

Disegna i tuoi blocchi nell'editor

Quando crei il sito web che avevi in ​​mente, dovrai dare uno stile ai tuoi blocchi. Ad esempio, potresti voler cambiare il carattere, i colori, lo sfondo o i margini dei tuoi blocchi.

Ci sono due modi in cui puoi modellare i tuoi blocchi:

1. Applicare uno stile agli elementi utilizzando l'interfaccia

1. Seleziona il blocco a cui vuoi applicare lo stile. Ad esempio, ho selezionato il blocco Valutazioni che ho aggiunto in precedenza.
2. Espandi la sezione Impostazioni stile nella barra laterale.
3. Qui puoi regolare il colore di sfondo, il riempimento, il bordo e molto altro.

Naturalmente, ogni blocco offrirà diverse opzioni di stile. Ad esempio, il blocco immagine conterrà una serie di funzioni di personalizzazione aggiuntive come la possibilità di regolare la posizione dell'immagine, la sfocatura o quanto ruota.

2. Utilizzo del blocco contenitore

Il Container Block è un blocco che puoi trovare solo con i Toolset Blocks. Usa il Blocco contenitore per raggruppare determinati blocchi insieme e determinati stili a ciascuno di essi che verranno visualizzati per ciascuno dei post.

Ad esempio, ho aggiunto un Blocco contenitore per visualizzare tutte le informazioni rilevanti per un personal trainer insieme in una sezione uniforme che include l'immagine, il titolo, la valutazione e molto altro. Ora posso modellare il Blocco contenitore in modo che ciascuno dei miei post di Personal Trainer mostri gli stessi stili.

Ancora una volta, posso farlo usando la barra laterale sul lato destro.

Controlli tipografici

Con Toolset Blocks, puoi facilmente modellare e formattare il tuo testo usando la sua sezione Tipografia.

Ecco un elenco di ciò che puoi regolare:

• Tipo di carattere: scegli tra una vasta selezione di caratteri
• Dimensione del carattere, altezza della linea e spaziatura delle lettere
• Stile del font
• Trasformazione del testo: maiuscolo, maiuscolo, minuscolo
• Colore del testo
• Ombra del testo

Come creare modelli per visualizzare post personalizzati

Una delle funzionalità più importanti che dovrai creare per un sito Web personalizzato è il modello. Quando crei un modello, significa che tutti i post per lo stesso tipo di post personalizzato avranno lo stesso layout e design.

Ad esempio, possiamo progettare un modello per ciascuna delle palestre che vogliamo visualizzare come parte del nostro tipo di post personalizzato "Palestre".

1. Vai su Set di strumenti-> Dashboard e fai clic sull'opzione Crea modello di contenuto per il tipo di post per il quale desideri progettare un modello.

2. Proprio come abbiamo fatto prima, puoi iniziare ad aggiungere campi al tuo modello. Di seguito ho aggiunto una serie di blocchi diversi tra cui il blocco Intestazione, Immagine e Campo singolo che contengono tutti campi.

3. Una volta salvato e pubblicato il modello, ciascuno dei tuoi post per quel tipo di post personalizzato mostrerà lo stesso layout e lo stesso stile.

Costruisci le tue pagine di archivio

Gli archivi sono l'elenco dei contenuti per ogni tipo di post personalizzato che WordPress genera per te. Puoi utilizzare Toolset Blocks e Gutenberg per personalizzare l'aspetto di ciascuna delle tue pagine di archivio.

Di seguito, come parte del tutorial di WordPress Gutenberg, ho creato un archivio per il mio tipo di post personalizzato "Palestre".

1. Vai a Set di strumenti-> Dashboard e fai clic sull'opzione Crea archivio accanto al tipo di post per il quale desideri creare un archivio.

2. Nell'editor dei blocchi ora puoi aggiungere i diversi elementi che desideri visualizzare per ciascuno dei tuoi post. Ad esempio, puoi visualizzare tutti i tuoi campi standard e personalizzati (come le valutazioni, l'indirizzo e i titoli dei post che ho creato per i miei tipi di post personalizzati "Palestre") utilizzando i blocchi del set di strumenti.

3. Per modificare il numero di colonne, fare clic sull'opzione Blocca navigazione e selezionare il ciclo dell'archivio di WordPress .
4. Sotto Stile loop puoi regolare il numero di colonne.

5. Puoi anche apportare una serie di modifiche alle impostazioni predefinite per gli archivi come l'impaginazione, l'ordinamento e molto altro nel blocco Archivio di WordPress.

6. Puoi anche aggiungere testi personalizzati e altri blocchi prima o dopo il ciclo di archivio principale che mostrerà i tuoi post. Basta fare clic sull'icona + prima o dopo il ciclo per aggiungere i blocchi o il testo.

Visualizza elenchi di contenuti personalizzati

Puoi utilizzare Toolset Blocks e Gutenberg per visualizzare i tuoi post come un elenco nell'ordine che preferisci. Puoi anche progettare l'elenco nel modo che preferisci, ad esempio in una griglia, in un semplice HTML, in una tabella o in qualsiasi altro modo. In Toolset questo tipo di elenco è chiamato View.

Questo elenco può quindi essere aggiunto a qualsiasi pagina. Ad esempio, di seguito ho aggiunto un elenco di palestre in primo piano alla home page.

1. Fare clic sul pulsante + nella pagina a cui si desidera aggiungere la vista.
2. Aggiungi il blocco Visualizzazioni e assegnagli un nome.
3. Selezionare il contenuto che si desidera visualizzare nella visualizzazione. Ad esempio, voglio mostrare le mie palestre.

4. Aggiungi i blocchi che vuoi visualizzare come parte della tua vista.
5. È possibile modificare l'ordine, il contenuto visualizzato e altro quando si fa clic su Blocca navigazione , si seleziona la visualizzazione e si utilizza la barra laterale.

6. In View Loop è possibile modificare una serie di impostazioni per l'intera vista, incluso il numero di colonne.

Aggiungi una ricerca personalizzata

Puoi aggiungere alla tua vista la tua ricerca che consentirà ai tuoi utenti di restringere il contenuto a cui sono interessati sul front-end. Ad esempio, puoi creare una ricerca per i tuoi utenti per trovare la migliore palestra più vicina a loro.

1. Inserisci il blocco Visualizza nella tua pagina.
2. Abilita l'opzione Cerca nella procedura guidata di creazione della vista.

3. È quindi possibile aggiungere campi di ricerca, pulsanti di ricerca e molto altro nell'area di modifica delle viste.

4. Puoi utilizzare la barra laterale destra per modificare le opzioni per questo campo di ricerca. Ciò include le principali impostazioni del campo e le opzioni di etichetta e stile.

Ecco come appare la nostra ricerca personalizzata per la migliore palestra sul front-end.

Inizia oggi a creare il tuo sito web personalizzato!

Ora che conosci le basi dopo aver letto questo tutorial di WordPress Gutenberg, puoi iniziare a progettare e costruire il tuo sito web personalizzato. Puoi scaricare WordPress e i blocchi di set di strumenti oggi per vedere quanto è facile per te creare il tuo sito web.

Se hai dubbi o domande, faccelo sapere nei commenti qui sotto!