Se c’è un software che sembra aver monopolizzato il web, questi è senz’altro WordPress, usato ormai per gestire la stragrande maggioranza dei siti su internet. Ogni novità che riguarda questo CMS viene quindi vista come un vero e proprio “evento”, come fu alcuni mesi fa quello di Gutenberg. Si tratta sostanzialmente del nuovo editor per WordPress. Prende il nome da Johannes Gutenberg, che più di 500 anni fa inventò una macchina da stampa con caratteri mobili. Il precedente editor visuale richiedeva una buona conoscenza nell’utilizzo di Shortcodes e HTML per far funzionare bene una pagina web. Il vero obiettivo dietro il nuovo editor è rendere le cose più semplici, soprattutto per coloro che hanno appena iniziato con WordPress. È stata infatti adottata una metodologia a “piccoli blocchi” e si spera di aggiungere nuove opzioni di layout sempre più avanzate nei prossimi anni.
Table of Contents
Alcuni numeri su Gutenberg
Al momento attuale, il plugin Gutenberg ha poco più di 300.000 installazioni attive con oltre 21 milioni di download totali e una valutazione di 2 stelle su 5. Dalla versione 5.0, Gutenberg è diventato ufficialmente il nuovo editor per WordPress. Sicuramente molti di voi hanno provato il nuovo editor “a blocchi” apprezzandone l’approccio modulare quando si effettuano modifiche a pagine e post.
Se è vero che Gutenberg è più intuitivo del suo predecessore, implementando nuove funzionalità, potresti anche avere difficoltà a causa di una interfaccia ancora poco conosciuta. Per aiutarti a utilizzare Gutenberg in modo più produttivo, abbiamo messo insieme questi 5 suggerimenti. Sono solo alcune delle cose che abbiamo trovato utili in base alla nostra esperienza pratica con l’utilizzo di Gutenberg sulla produzione di siti web. Partiamo!
# Muovere facilmente i blocchi nelle pagine molto lunghe
Una delle grandi novità di WordPress Gutenberg è proprio quella della gestione dei blocchi. Il seguente è un ottimo metodo per muovere e spostare blocchi soprattutto nelle pagine molto lunghe.
Clicca sul blocco che vuoi muovere in modo da selezionarlo. Clicca poi sull’icona in alto con i 3 pallini (più opzioni) e poi seleziona la voce Sposta in.
A questo punto vedrete una linea blu comparire appena sopra il blocco che volete spostare. Non vi resta altro che premere le frecce direzionali sulla vostra tastiera per muovere quella linea, e quindi il blocco, su e giù nella vostra pagina.
Una volta deciso dove volete piazzare il blocco in questione, confermate premendo il tasto invio. Et voilà!
# Creare link e ancore nella stessa pagina
A volte può capitare che si voglia indirizzare gli utenti che visitano una determinata pagina ad accedere a un contenuto che si trova più in alto o in basso rispetto a quanto stanno visualizzando nella pagina stessa. Pensiamo per esempio all’articolo di un blog, dove all’inizio farebbe comodo avere un indice con tutti i paragrafi, in modo tale da indirizzare gli utenti sul paragrafo che a loro più interessa senza che leggano il resto dei contenuti. Per fare ciò abbiamo bisogno di creare dei link particolari chiamati ancore. Vediamo insieme come fare:
La prima fase è creare la nostra ancora ovvero la sezione o il blocco su cui vogliamo far arrivare gli utenti. Può essere un titolo, un paragrafo, un’immagine o qualsiasi altro elemento all’interno della pagina. Una volta cliccato sul blocco che ci interessa, andiamo sulla parte destra del nostro editor e fate attenzione che sia selezionata la tab Blocco. Da qui dobbiamo cercare un’altra voce ovvero Avanzate.
Qui troviamo una cella chiamata Ancora HTML dove inserire il nome della nostra ancora. Vi suggeriamo di utilizzare parole facili da ricordare e che siano un chiaro riferimento al blocco in questione.
Adesso andremo a creare il link che punterà alla nostra ancora. Selezioniamo dunque la porzione di testo dove vogliamo creare il link e clicchiamo sull’icona mostrata in figura per aggiungere un link a quel testo.
A questo punto inseriamo il nome della nostra ancora preceduto da un cancelletto (#) oppure “Hash“ in inglese. Fate attenzione nell’inserire la stessa parola che identifica la nostra ancora altrimenti il link non funzionerà. In HTML fa differenza tra maiuscole e minuscole!
Bene, non ci resta che aggiornare la pagina e provare se la nostra ancora funziona. Se abbiamo fatto tutto secondo le regole, una volta cliccato il link, la pagina dovrebbe automaticamente scrollare verso la sezione scelta in precedenza!
PRO Tips: Se vogliamo che l’animazione di scrolling sia fluida dal punto A al punto B si consiglia di installare un plugin gratuito che abilita proprio questo tipo di animazione chiamata “Smooth Scrolling” nei link con ancora. Si chiama Page scroll to id. Basta scaricarlo e attivarlo dal vostro gestore di plugin di WordPress.
# Esplora i blocchi Gutenberg di un sito web con Detective Wapuu
Hai mai dato un’occhiata a un sito web e ti sei chiesto se fosse stato costruito con blocchi Gutenberg? Se è così, sei fortunato. Nick Hamze, un prolifico conoscitore di block builder, ha lanciato una nuova estensione di Chrome volta ad aiutare le persone a rilevare i blocchi utilizzati su un sito. Il nome dell’estensione è quantomeno geniale: Detective Wapuu. Installabile come estensione gratuita di Chrome, Detective Wapuu scansiona abilmente la pagina web in cui ti trovi attualmente, evidenziando eventuali blocchi aggiunti alla pagina.
# Come riavere indietro il menù di WordPress quando editiamo pagine con Gutenberg
Dopo diverse lamentele da parte della community, è stato riattivato il menù laterale di WordPress durante l’editing delle pagine. Il menu del nostro amato CMS era infatti “scomparso” al primo rilascio del nuovo editor Gutenberg ma adesso, con un paio di click, è possibile ripristinarlo. Vediamo come:
Cliccate sulla icona con i 3 pallini in alto a destra del vostro editor e deselezionate la Modalità a schermo intero. Cosi facendo avrete il menù laterale di WordPress sempre a portata di click!
# Come creare blocchi riutilizzabili
Durante la creazione di un sito web (senza differenza alcuna che si tratti di un blog, un sito vetrina o un e-commerce ad alto traffico), ci si trova a riutilizzare molte parti dell’interfaccia grafica. Questo aiuta a mantenere una linea di stile comune tra tutte le pagine, migliorando di gran lunga l’esperienza utente. Per non trascurare questa necessità di sviluppatori e designer, Gutenberg offre una funzione che ci consente di salvare i blocchi che abbiamo realizzato in modo tale da poterli riusare in qualsiasi altra pagina del nostro sito. Vediamo dunque i passaggi per creare un blocco riutilizzabile.
Selezioniamo il blocco che vogliamo rendere riutilizzabile e clicchiamo sull’icona che mostra più opzioni. Da qui basta cliccare su Aggiungi a blocchi riutilizzabili. L’editor vi chiederà di dare un nome al vostro nuovo blocco riutilizzabile cosi, in caso di molti blocchi salvati, sarà più facile individuare quello che volete riutilizzare.
Di default il nuovo blocco si chiamerà Blocco riutilizzabile senza nome. Per cambiare nome basta selezionarlo e nella parte destra troverete l’apposito campo.
PRO Tips: è possibile gestire tutti i blocchi riutilizzabili attraverso una sezione di WordPress dedicata. Cliccate sul blocco e poi Gestisci i blocchi riutilizzabili.
Keliweb e le soluzioni di hosting per WordPress
Come detto in apertura, WordPress domina ormai in maniera incomparabile l’intero mercato dei CMS. È chiaro quindi che un’azienda come Keliweb non potesse rimanere insensibile a una richiesta così massiccia da parte del pubblico. La stragrande maggioranza degli utenti (privati e professionisti) desiderano utilizzare WordPress, per tutta una serie di elementi che rendono questo software come attualmente il migliore in circolazione.
Lettura di approfondimento: ecco tutti i principali motivi per usare WordPress.
Sono molti i servizi forniti da Keliweb con cui puoi installare WordPress in maniera semplicissima e veloce tramite cPanel. Ci sono infatti i piani di hosting condiviso, soluzioni economiche per siti privati o piccoli progetti aziendali, fino ad arrivare ai piani dedicati (come i VPS). Da mettere in risalto c’è però soprattutto il piano appositamente ottimizzato per il CMS. I nostri pacchetti hosting WordPress sono suddivisi a seconda della tipologia di progetto web da gestire e si configurano come le migliori soluzioni possibili per siti internet creati con il CMS numero uno al mondo.
Per concludere
Il rilascio di Gutenberg, il nuovo editor di WordPress, è una novità che di certo non è passata inosservata nel mondo digitale. Tra chi ha accolto con entusiasmo il nuovo sistema dei blocchi a chi, invece, ha alzato un polverone rimpiangendo il vecchio editor presente sul CMS (acronimo di Content Management System). Una battaglia diventata quasi ideologica e da cui noi prendiamo ovviamente le distanze. Quello che abbiamo cercato di fare con questo articolo è fornire alcuni consigli per poter usare Gutenberg senza difficoltà, per poter così creare nuovi contenuti in modo agevole.
