Creare pagine e articoli con Gutenberg – parte 2

Ricominciamo da dove ci siamo lasciati.

Cancelliamo il blocco della tabella e andiamo ad aggiungere quello delle colonne.

Logicamente il blocco colonne sarà formato a sua volta da l’elemento contenitore al cui interno ci saranno gli altri contenitori, uno per colonna, con le relative impostazioni per singolo elemento.

Clicco sulla prima colonna ed inserisco del testo.

E lo stesso faccio anche per la seconda.

Poi vado a vedere le impostazioni.

Posso decidere le dimensioni del testo: normale, largo, enorme.

In questo caso scelgo piccolo e lo metto per entrambe le colonne.

Drop cap mi mette la prima lettera di dimensioni più grandi, in stile libro.

Proseguiamo con i colori di background, per il secondo ne scelgo uno personalizzato.

Il colore del testo però non mi piace e quindi lo vado a cambiare.

Se per esempio stai prendendo il colore da un file di stampa, puoi cambiare i diversi formati di selezione per inserire quelli corretti, trovi quello RGB e via dicendo.

I programmatori di WordPress hanno inserito una funzione di analisi per verificare il contrasto fra il colore del testo e quello di sfondo per, nel caso sia poco leggibile, avvisarci di correggerlo… bellissimo.

Quindi seguiamo il consiglio e scuriamo il background.

Ora finiamo l’articolo con un altro paio di esempi veloci.

Inseriamo una quote (una citazione) e aggiungiamone l’autore.

Testo gli stili a disposizione e faccio la mia scelta

Come vedi qui sotto ci sono delle iconcine che cambiano. Sono gli ultimi blocchi che abbiamo utilizzato e che WordPress ci propone per un accesso rapido.

Aggiungiamo ora una galleria di immagini.

La seleziono e trascino in un colpo solo dal mio computer tutte le immagini che voglio caricare sul sito e attendo l’upload.

Come vedi sono tutte selezionate con la spunta in alto nell’anteprima.

Posso logicamente de-selezionarle così come selezionarle nuovamente.

Premo crea una nuova galleria e nella schermata successiva posso scegliere l’ordine delle singole immagini. Per farlo basta che le trascino come desiderato.

Abbiamo la preview direttamente nella pagina di admin.

Posso anche scegliere il numero di colonne.

Se lascio attivo cropped images tutte avranno la stessa dimensione, altrimenti ognuna di loro manterrà la proporzione con cui è stata caricata.

Link to serve per dire a WordPress se le immagini della galleria non devono avere un link, se lo devono avere alla pagina dell’immagine o al singolo file immagine. Lasciamo attivo quest’ultimo.

Andiamo in preview, scendiamo alla galleria e premendo su un immagine veniamo mandati, come vedi dalla URL ,direttamente al file immagine.

Colgo l’occasione per dirti che con Gutenber non bisogna esclusivamente utilizzare quello che ci mette a disposizione e non considerare tutto il resto.

Ad esempio ci sono dei plugin per creare gli slider animati, o per creare delle gallery particolari, o altri per inserimento di moduli di contatto che funzionano tramite shortcode.

Per esempio quando crei un modulo di contatto con Contact Form 7 o Ninja Form, lo fai in una sezione dedicata ai moduli.

Per inserirli poi all’interno delle pagine devi utilizzare lo shortcode che il plugin ti rilascia per quello specifico modulo.

Per inserire uno shortcode all’interno di Gutenberg abbiamo proprio il blocco chiamato shortcode.

Non devi fare altro che aggiungerlo ed inserire il codice in questione.

Ora, che ricetta sarebbe senza una lista di ingredienti... utilizziamo quindi il blocco apposito per la lista ed inseriamo i vari contenuti.

Prima della lista però voglio inserire un titolo, quindi seleziono Heading e scrivo ingredienti. Lo imposto come un titolo h4 e scelgo l'allineamento a sinistra.

Ora voglio aggiungere un divisore sopra il titolo.

Mi posiziono sul blocco e premo l’iconcina con il +.

Cerco separatore e lo seleziono.

Ora posso ritornare alla preview, ed ecco il mio separatore, il mio titolo e la lista degli ingredienti.

Vediamo adesso come inserire un link all’interno del testo dell’articolo.

Basta selezionare il testo, premere l’iconcina con la catena e incollare la URL desiderata.

Fatto questo posso modificarne le impostazioni premendo sulla matitina dell’edit ( i 3 pallini) e decidere se il link deve aprire la pagina in una nuova tab del browser.

Andando ora in visuale HTML puoi vedere come sia stato aggiunto il tag a, che è appunto quello dei link, con i vari attributi.

Se hai necessità di inserire manualmente delle implementazioni a questo tag, allora lo puoi fare da qui.

Ora inseriamo un bel video preso da youtube dove mostriamo all’utente tutto il procedimento per la creazione della carbonare perfetta.

Vado in incorporamenti e seleziono l’icona di youtube.

Poi non devo fare altro che inserire la url del video e premere embed per includerlo nel mio articolo. Posso aggiungere se voglio anche una didascalia.

Ora quello che manca è una conclusione...

Aggiungo quindi un paragrafo con del testo e un bottone come call to action finale.

Seleziono il blocco button, inserisco il link a cui deve portare il bottone ed infine ne personalizzo il testo.

Una preview veloce e visualizziamo tutte le sezioni dell’articolo che abbiamo appena creato.

Per questa lezione è tutto, ma ti aspetto nel prossimo video.