Tutorial di WordPress Gutenberg su come creare un sito Web personalizzato

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. Utilizzeremo l'editor di blocchi di WordPress noto come Gutenberg e i blocchi del set di strumenti per creare 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 programmazione per creare contenuti. Inoltre, quando lo combini con plug-in come Toolset Blocks puoi facilmente creare siti Web complessi dall'aspetto fantastico.

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 Gutenberg Block Editor e supportano anche altri plugin premium.

Puoi esaminare rapidamente i migliori temi controllando il nostro elenco di 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 plugin eccellenti che completano il nuovo editor di WordPress.

Per il nostro tutorial su WordPress Gutenberg, utilizzeremo i blocchi del set di strumenti insieme a Gutenberg per creare il nostro sito Web WordPress. Toolset Blocks offre una serie di vantaggi che renderanno più facile per i programmatori e non programmatori progettare e implementare rapidamente i propri siti Web:

• Il tuo flusso di lavoro sarà molto più semplice . Ora non è più necessario progettare le tue pagine e quindi implementarle. Puoi semplicemente costruirli su WordPress e vedere immediatamente come appariranno.
• Non c'è bisogno di 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 è più necessario essere un esperto di codifica per creare il sito Web che desideri. Con i blocchi puoi facilmente aggiungere tu stesso 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 mucchio di documentazione per capire come costruire determinati elementi. Molti dei blocchi descrivono ciò che puoi ottenere e può essere utilizzato e sperimentato 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. Ciò potrebbe gonfiare il tuo sito Web rallentandolo in modo significativo. Ti affidi anche a terze parti che aggiornano i loro plugin e li mantengono 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 dimostrativo che potrai 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
• Navigando tra i tuoi blocchi
• Visualizzazione dei campi nei progetti dell'editor blocchi
• Visualizzazione di una galleria di immagini
• Blocchi del set di strumenti per lo stile nell'editor
• Controlli tipografici
• Creazione di un modello
• Costruire 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. Su una pagina o un post, fai clic sul pulsante +.
2. Cerca e fai clic sul blocco che desideri 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 cambiare 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 visualizzare 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.

Navigando 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 blocchi 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 (il titolo, il 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 Gutenberg di WordPress:

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

Ciascun blocco nella libreria dei blocchi del set di strumenti 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 del set di strumenti.

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

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

4. Attiva il testo dell'intestazione dinamica.

5. Seleziona il campo del post che desideri 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 il set di strumenti come 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. Nella barra laterale destra, sotto Tipo di campo , selezionare il campo Standard .
3. In Post Field seleziona l'opzione Post Content (body) .

La descrizione di 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. È possibile aggiungere un campo, un modulo o un output condizionale. Nel nostro caso, vogliamo aggiungere un campo.

4. Seleziona il contenuto che vuoi aggiungere (nel mio caso è il campo Valutazione ) e clicca su Inserisci shortcode .

Visualizza una galleria di immagini

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

1. Selezionare il campo Ripeti/blocco Galleria .

2. Selezionare il gruppo di campi personalizzato 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 per modellare i tuoi blocchi:

1. Styling degli oggetti 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 dello 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 esclusivamente con i blocchi del set di strumenti. Usa il Blocco contenitore per raggruppare determinati blocchi e alcuni stili per 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, tra cui 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 lo stesso stile.

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

Controlli tipografici

Con i blocchi del set di strumenti, 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 da un'ampia selezione di caratteri
• Dimensioni del carattere, altezza della riga e spaziatura delle lettere
• Stile carattere
• Trasformazione del testo: capitalizza, 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 cui desideri progettare un modello.

2. Proprio come abbiamo fatto prima che tu possa 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. Dopo aver salvato e pubblicato il modello, ciascuno dei tuoi post per quel tipo di post personalizzato visualizzerà lo stesso layout e lo stesso stile.

Costruire 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 i blocchi del set di strumenti 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 "Palestra".

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

2. Nell'Editor 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 di archivio di WordPress .
4. In Stile ciclo 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 archiviazione 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 i blocchi del set di strumenti e Gutenberg per visualizzare i tuoi post come un elenco nell'ordine che preferisci. Puoi anche progettare l'elenco come 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 Vista.

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 + sulla pagina a cui si desidera aggiungere la vista.
2. Aggiungi il blocco Visualizzazioni e assegnagli un nome.
3. Seleziona il contenuto che desideri visualizzare nella tua vista. Ad esempio, voglio visualizzare le mie palestre.

4. Aggiungi i blocchi che desideri visualizzare come parte della tua vista.
5. Puoi modificare l'ordine, il contenuto visualizzato e altro quando fai clic su Blocca navigazione , seleziona la tua Visualizzazione e utilizza la barra laterale.

6. Sotto View Loop è possibile modificare un certo numero di impostazioni per l'intera vista incluso il numero di colonne.

Aggiungi una ricerca personalizzata

Puoi aggiungere alla tua Visualizza 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. Puoi quindi 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 impostazioni dei campi principali e le opzioni di etichetta e stile.

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

Inizia oggi stesso a costruire 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 blocchi del set di strumenti oggi per vedere quanto è facile per te creare il tuo sito web.

Se avete pensieri o domande fatecelo sapere nei commenti qui sotto!