Creare landing page con Gutenberg

Qualcuno ha detto Gutenberg? È arrivato il momento di dedicare un webinar alla scoperta del nuovo editor a blocchi di WordPress. E quale modo migliore se non vedendo insieme come sfruttarlo per creare landing page accattivanti e funzionali?!

Il nostro ospite di questo mese è Andrea Barghigiani, appassionato e forte sostenitore di WordPress che da anni condivide materiale formativo sullo sviluppo web e sulla promozione della proprio business. Autore del libro “Trasforma WordPress per l’Inbound Marketing” continua le sue attività formative all’interno del portale skillsandmore.org e partecipa all’organizzazione di diversi eventi.

Scopri le caratteristiche di Gutenberg che ti permetteranno di diventare un ninja dei contenuti e le features più interessanti da utilizzare per la creazione delle tue landing page.

Sfoglia o scarica la presentazione di Alessandro Barghigiani 👇

Crea fantastiche landing page con il nuovo editor WordPress from SiteGround.com

Come sempre vi chiedo di commentare il webinar, in modo da avere un feedback su come è andato e su come vorreste che fossero i prossimi. Sentitevi liberi di dare suggerimenti e di richiedere gli argomenti futuri che vorreste siano affrontati. Vi consiglio di dare uno sguardo anche agli altri nostri webinar sul canale YouTube di SiteGround Italia.

Nota: eravate tantissimi anche questa volta e non siamo riusciti a rispondere a tutte le domande in diretta, ma non preoccupatevi. Abbiamo girato tutte le domande ad Andrea e trovate le risposte qui di seguito.

Posso creare tutta la struttura della pagina con Gutenberg e successivamente andare a perfezionare il tutto attraverso il codice? Di solito faccio tutto da codice, ma per lavori piccoli e low budget è abbastanza lunga.

Certamente! Gutenbergh genera codice HTML che puoi personalizzare con CSS e al quale puoi aggiungere funzionalità con i tuoi script JavaScript. Anche se questo editor risulta molto avanzato rispetto al precedente, il contenuto viene sempre mostrato attraverso la classica funzione the_content(). Questo ci permette di svolgere tutte le operazioni di personalizzazione.

Ciao Andrea, nel video parli del tuo corso che parte dai livelli basic, per caso ne fai anche per i più avanzati?

All’interno della diretta ho parlato del corso “WordPress dalle basi al pieno controllo”. Esso si rivolge ad un pubblico entry level perché mostra come utilizzare la piattaforma WordPress e come gestire tutte le sue funzionalità. Praticamente una volta seguito il corso chiunque avrà il controllo della propria piattaforma WordPress.

Su SkillsAndMore invece pubblico più contenuti dedicati agli sviluppatori che vogliono creare web app partendo, principalmente, da questa piattaforma. Abbiamo corsi dedicati a chi è alle prime armi, corsi per chi vuole conoscere tutto del responsive design e altri corsi che invece insegnano la programmazione partendo direttamente da WordPress.

Praticamente il mio focus è quello di insegnare come trasformare la passione del codice in un vero e proprio lavoro.

Come si fa ad avere più di tre Landing Page? Una sul sito, ma le altre due? Ci fai un esempio?

La risposta semplice è che sul tuo sito web puoi avere tutte le landing page che desideri. Prendiamo il caso di una web agency che sviluppa siti web.

Sviluppare siti web richiede diverse competenze e i servizi offerti possono essere interessanti per clienti in diverse fasi. Per esempio un cliente potrebbe voler il suo primo sito web, un altro potrebbe desiderare un restyling mentre un altro ancora vuole ottimizzare la SEO e le performance del proprio sito.

Ecco che adesso sono stati identificati ben tre profili di potenziali clienti che potrebbero aver bisogno dei servizi offerti da questa web agency.

Il modo migliore per parlare direttamente al potenziale cliente è quello di creare una landing page specifica per ciascuno di essi. In questo modo hai la possibilità di mettere in luce soltanto i servizi che possono interessare al potenziale cliente con il linguaggio che lui stesso utilizzerebbe per descriverli.

Concludendo questo sito adesso ha 4 landing page: la homepage che serve più che altro per presentazione e “smistamento” verso le 3 landing page interne che parlano direttamente al potenziale cliente.

Ciao, non ho ben capito sull’immagine iniziale con la usp come metti il container a full width? Ho appena provato ma rimane massimo della lunghezza del body.

L’immagine di sfondo full with nella prima sezione della landing page è stata creata con il blocco AB Container di Atomic Blocks. Questo blocco offre delle funzionalità che ti permettono di ottenere un’immagine di sfondo a piena larghezza e di inserire tutto il contenuto che desideri al suo interno.

Potresti raggiungere un risultato simile utilizzando il blocco Copertina nativo in WordPress. Ma quest’ultimo è limitato per tipi di blocco che può contenere al suo interno.

Ciao! Io uso Avada perciò sono abituata con il “fusion builder”: secondo te oltre alla landing è possibile creare anche le pagine classiche di un sito?

Certo! Ho preso proprio l’esempio della landing perché è una delle pagine più complesse che possiamo realizzare.

Ovviamente il nuovo editor si focalizza esclusivamente sulla creazione del contenuto e non offre tutte le personalizzazioni di stile offerte invece da un page builder completo. Quindi la scelta dello strumento dipende molto dalle necessità che hai.

Se il CSS non ti fa paura allora anche il nuovo editor in WordPress è più che sufficiente.

I blocchi di Gutenberg sono standard oppure ci sono variazioni a seconda del tema scelto?

I blocchi del nuovo editor sono tutti standard è il tema che deve personalizzarli graficamente per rispettare il suo stile. In alcuni casi un tema potrebbe anche scegliere di disattivare certi blocchi ma quello che ho visto fino ad ora è più un incremento di blocchi (tramite plugin) che una riduzione.

Cosa consigli per creare contact form con Gutenberg?

Da sempre i contact form sono un po’ il tallone di achille di WordPress perché non offre una soluzione standard per il loro inserimento.

Il plugin Jetpack permette di creare un modulo direttamente dal nuovo editor. Ma se vuoi un consiglio io non utilizzerei altro che il classico Contact Form 7. Nella mia esperienza ho testato molti plugin di questo tipo e ce ne sono alcuni veramente interessanti. Però alla fine sono anche pesanti perché presentano degli editor (esterni a quello WordPress) che aggiungono codice che non viene più utilizzato (ma comunque caricato) dopo la creazione del nostro form.

Contact Form 7 invece non offre schermate da ultimo grido ma ti permette comunque di creare tutti i form che desideri e di richiamarli con un classico shortcode, che per ora funzionano ancora.

Bisogna necessariamente avere un dominio per utilizzare Gutenberg?

Il nuovo editor funziona su qualsiasi installazione WordPress quindi anche se il tuo sito non ha dominio ma solo indirizzo IP puoi fare comunque i tuoi esperimenti.

Le funzioni di Gutenberg potrebbero essere integrate nei temi che usano Visual Composer?

Non credo. Generalmente i plugin page builder come Visual Composer sostituiscono l’editor WordPress con il proprio perché hanno bisogno di aggiungere le proprie personalizzazioni senza dover lottare con le soluzioni che permettono di pubblicare il contenuto esistenti.

Gutenberg fa conflitto con Divi?

In teoria non dovrebbe andare in conflitto con nessun page builder perché, come espresso nella domanda precedente, i page builder generalmente sostituiscono l’editor standard di WordPress per offrire le proprie funzionalità

Se non vado errato nella creazione di ogni pagina WordPress puoi scegliere se crearla con l’editor classico o con il tuo page builder, Divi in questo caso. Questo dovrebbe risolvere qualsiasi problema di conflitto ma non so come si comporta Divi se provi a fargli modificare una pagina creata nel nuovo editor.

Come inserisco il codice di Google Adsense? Ho provato dal blocco Html ma il banner di Adsense non si vede. Stessa cosa usando il blocco “editor classico”.

Onestamente non ho molta esperienza in questo campo e non ho fatto grandi ricerche in questo campo. L’unico plugin che ho incontrato nel mio percorso e che offre questa funzionalità è Advanced Gutenberg Blocks atrtaverso i blocchi.

Le pagine create prima dell’editor a blocco rimangono con l’impostazione precedente o si aggiornano con il nuovo editor? Nel primo caso, come è possibile convertire con il nuovo editor? E’ possibile?

Il nuovo editor presenta un blocco che prende il nome di “Editor Classico” e che presenta un blocco contenente il classico editor, TinyMCE.

Quando ci troviamo ad aprire con il nuovo un articolo realizzato con il vecchio editor tutto il contenuto è racchiuso all’interno del blocco appena menzionato.

Per trasformarlo in un testo modificabile con i nuovi blocchi non devi far altro che copiare il contenuto del tuo articolo e incollarlo all’interno di un blocco Paragrafo vuoto. WordPress genererà automaticamente tutti i blocchi per il tuo articolo.

Io faccio questa operazione spesso perché ho molti vecchi contenuti che devo aggiornare e non ho mai riscontrato grandi problemi.

Lo sviluppo in questa direzione dei vari cms , non comporta la perdita di lavoro per gli sviluppatori?

Assolutamente no. Anzi a mio avviso ci aiuta a trovare più clienti perché una soluzione automatizzata può sempre arrivare fino ad un certo punto, poi se vuoi le “ultra-personalizzazioni” ti dovrai sempre rivolgere a uno sviluppaotre.

Come puoi leggere da un mio articolo dove condivido consigli per alzare il fatturato c’è un punto provocatorio (anche se poi non tanto) dove invito il lettore a pensare di dire di no a un potenziale cliente.

In contesto alla domanda fatta io credo che come liberi professionisti abbiamo la possibilità di scegliere i nostri clienti, soprattutto per far generare un passaparola di clienti ideali.

La presenza del nuovo editor ci permette di delegare, a tutti quelli che pensano di potersi fare il sito da soli, la creazione del proprio sito. Ma per uno sviluppatore che sa veramente creare web app con WordPress non ci sarà mai un calo di lavoro.

Se desideri specializzarti nel tuo campo non posso fare a meno che consigliarti i corsi che proponiamo su SkillsAndMore. Tra l’altro ultimamente stiamo cercando di creare una squadra di Skillati, i nostri abbonati, per lavorare sui progetti che continuamente ci vengono richiesti tramite il portale.

Domanda extra: Ma è ancora corretto parlare di Gutenberg per riferirsi al nuovo editor? Avevi accennato questo aspetto ma poi non c’è stato il tempo di approfondire.

Per farla breve, No. Non è corretto utilizzare il termine Gutenberg quando facciamo riferimento al nuovo editor WordPress ed è per questo motivo che ho chiesto a Luca di utilizzare proprio “nuovo editor” nel titolo della live.

Parlare di Gutenberg sarebbe stato un errore perché oggi Gutenberg è molto di più.

Gutenberg è il nome del progetto che porterà una rivoluzione completa nella gestione dei nostri siti WordPress. Inizialmente si è concentrato sulla creazione dei contenuti ma già oggi sta lavorando ad altro.

Anche se l’editor continua ad essere sviluppato, Gutenberg oggi è passato alla Phase 2 dove sposta il suo interesse nei confronti della gestione delle Widget e dei Menu.

Ci sono altre due fasi e al momento non mi è ben chiaro il loro focus. Diciamo che quando il progetto Gutenberg sarà ultimato potremo modificare le nostre pagine direttamente da frontend (come qualsiasi page builder quindi) grazie all’unione del Customizer e del nuovo editor.

Purtroppo non ti so dire molto di più perché essendo tutto ancora in fase di sviluppo le informazioni non sono chiare. Per concludere diciamo soltanto che con Gutenberg gli sviluppatori stanno creando un nuovo approccio, moderno e completo, per gestire al meglio la nostra piattaforma WordPress.

Quindi è sbagliato parlare di Gutenberg quando ci riferiamo all’editor WordPress, Gutenberg è ancora un plugin separato che possiamo installare per vedere quali sono le novità che sono state implementate dagli sviluppatori.