Panoramica e revisione del plug-in WordPress di Google Web Stories

Le storie web sono pagine toccabili a schermo intero basate su AMP. Ti consentono di creare narrazioni visive interattive che sono ottime per le informazioni visive. Le storie sono coinvolgenti, condivisibili e tracciabili. Ora possono essere aggiunti al tuo sito Web WordPress grazie a un plug-in di Google. In questa panoramica e recensione del plug-in, daremo un'occhiata al plug-in WordPress di Google Web Stories e vedremo cosa può fare.

Cosa sono le Web Stories?

Formalmente conosciute come AMP Stories, le Web Stories sono pagine delle dimensioni di uno schermo mobile con layout in stile rivista. Il contenuto include testo di grandi dimensioni con collegamenti a contenuti più lunghi, video di 15 secondi in modalità verticale con didascalie e immagini con didascalie. Web Stories è un sistema open source ed è gratuito.

Sono pensati per l'uso con dispositivi mobili. In genere contengono da 4 a 30 pagine con 10 parole per pagina. Questo è l'ideale per produrre contenuti in piccoli morsi. Sono un ottimo modo per fornire contenuti interattivi facili da usare con una mano mentre si pranza, si è seduti in metropolitana, ecc.

Perché usare le storie web con WordPress?

Il contenuto e il design delle storie web si adattano bene ai contenuti dei blog sui siti Web WordPress. Il plug-in li integra nel tuo sito Web WordPress e aiuta a portare traffico attraverso il formato Web Story.

Aiutano anche a migliorare il tuo SEO e si posizionano in alto nella ricerca Google, nelle immagini di Google, in Google Discover e nell'app di Google, rendendo le storie web un ottimo modo per migliorare il traffico di WordPress.

Installazione del plug-in Google Web Stories

Scarica il plugin beta gratuito. Questo è un plug-in beta pubblico, quindi la maggior parte delle funzionalità principali sono presenti. La versione completa uscirà entro la fine dell'estate. Avrà una migliore stabilizzazione, prestazioni e correzioni di bug e includerà il supporto di animazioni e allegati di pagina.

Poiché è beta, dovrai scaricare il file e installarlo manualmente seguendo questi passaggi:

1. Vai alla pagina Stories Github e scarica il plugin beta
2. Nella dashboard di WordPress, vai su Plugin > Aggiungi nuovo
3. Fare clic su Carica plug-in
4. Seleziona il file zippato dal tuo computer
5. Fare clic su Installa ora
6. Quando vedi "Plugin installato correttamente", fai clic su Attiva plugin

Menu Storie Web

Una nuova voce di menu viene aggiunta alla dashboard chiamata Storie. Qui puoi vedere tutte le tue storie, aggiungere una nuova storia ed esplorare i modelli. Le tue storie appariranno qui dove potrai aprirle nell'editor, rinominarle, duplicarle o eliminarle.

Questo è un tipo di post di Storie che può essere visualizzato come post di Storie e un collegamento a questi post può essere aggiunto a pagine e post normali.

Crea una storia

Facendo clic su Crea nuova storia si apre l'editor da cui è possibile accedere agli strumenti visivi. Non c'è un'opzione per cambiarne le dimensioni o comprimerli. Se questo ti ricorda Canva, non sei solo. Funziona più o meno allo stesso modo ed è altrettanto intuitivo.

Sulla sinistra c'è il contenuto che puoi aggiungere al creatore della pagina. Include immagini, testo e forme. Le immagini includono anche il video. Al centro c'è il creatore della pagina. Include strumenti per modificare e pubblicare la storia. Sulla destra ci sono strumenti di progettazione e documenti. Ogni elemento che aggiungi alla pagina è un livello separato.

Contenuto

Le immagini e gli altri contenuti sono quelli della cartella multimediale. Passando sopra uno rivela tre punti. Facendo clic sui punti si aprono le opzioni per modificare o eliminare l'immagine. Puoi anche ordinare, cercare e caricare immagini o video. Facendo clic sul contenuto, lo si aggiunge alla pagina della storia.

Puoi fare doppio clic per aggiungere il contenuto o trascinare e rilasciare il contenuto nella pagina della storia. In questo esempio, sto trascinando l'immagine nella pagina.

Testo

La scheda testo include pulsanti preimpostati per aggiungere intestazioni, sottotitoli e testo del corpo. Fare clic su uno o fare clic su Aggiungi nuovo testo per aggiungere un testo preimpostato alla pagina.

Fare clic sul testo per aprire lo strumento di ridimensionamento. Trascina per ridimensionare o afferra il centro e sposta il testo in una nuova posizione. Questo apre anche i suoi strumenti a destra, dove puoi cambiare l'allineamento, i colori, le dimensioni, la posizione, il livello, lo stile, ecc.

Puoi anche selezionare più elementi contemporaneamente per ridimensionare o spostare il contenuto.

Forme

La scheda forme include un quadrato, un cerchio, un triangolo, un cuore, una stella, un pentagono, un esagono e un blob. Trascinali sulla pagina, modifica i loro colori, opacità, dimensioni, ecc.

Pagina

L'area della tela include il titolo, le opzioni di pubblicazione, il cestino, la copia, l'aggiunta di una nuova pagina, l'annullamento, la ripetizione, un'anteprima e una vista griglia per vedere più pagine contemporaneamente. Facendo clic sul contenuto sono disponibili alcuni strumenti di trascinamento della selezione per ridimensionare e spostare il contenuto. Apre anche le opzioni per gli strumenti di progettazione a destra.

Trascina il contenuto per visualizzare le opzioni di allineamento.

Fare doppio clic sul contenuto per vedere l'intera immagine e aprire gli strumenti per regolare lo zoom e l'allineamento. Puoi ridimensionare il contenuto e spostarlo per ottenere l'immagine esatta che desideri.

Design

Le regolazioni del design visualizzano i controlli per l'elemento su cui hai fatto clic. Ho selezionato lo sfondo della pagina e poi ho cliccato sul colore. Questo apre un selettore di colori in modo da poter impostare il colore per lo sfondo.

Per le immagini, questo include l'allineamento, le dimensioni e la posizione, l'opacità, i collegamenti, l'accessibilità e i livelli.

Con il testo, questo include la famiglia di caratteri, lo stile, l'allineamento, il colore, il colore di sfondo, il riempimento e il collegamento.

Per le forme, questo include l'allineamento, le dimensioni, la posizione e il colore.

La scheda Documento include le opzioni di pubblicazione standard di WordPress e ne aggiunge qualcuna in più. Salva come bozza o pubblica come pubblico o privato. Modifica la data, il logo dell'editore e l'immagine di copertina. Regola il permalink e l'avanzamento della pagina. Scegli tra automatico e manuale e imposta i tempi di avanzamento automatico.

Modelli

La scheda Esplora modelli mostra i modelli che puoi utilizzare nelle tue storie. Al momento sono disponibili 8 modelli per aiutarti a iniziare. I modelli includono più pagine, quindi ci sono molti design per aiutarti.

Facendo clic su uno si apre il modello, dove è possibile vedere tutte le pagine che si trovano all'interno del modello.

Tutte le pagine sono selezionabili e regolabili. Seleziona un elemento per modificarlo.

Pubblicare una Storia

Quando fai clic per pubblicare la storia, vedrai le opzioni per visualizzare la storia o aggiungerla a un nuovo post.

Visualizza la storia

La visualizzazione della storia apre la pagina sul front-end. Ciascuna delle pagine è visibile, ma solo quella al centro è completamente leggibile. La pagina mostra i controlli del dispositivo di scorrimento con frecce ai lati, barra di navigazione sotto la pagina, un pulsante di riproduzione o di pausa nell'angolo in alto a destra e un pulsante di condivisione per semplificare la condivisione della tua storia web da parte dei visitatori. Facendo clic sul pulsante, i visitatori possono copiare l'URL.

Aggiungi a nuovo messaggio

Selezionando Aggiungi a nuovo post viene creato automaticamente un post standard del blog con il codice della storia già inserito nel post. Questo è un post di blog standard, quindi appare nel flusso del blog. Questo è un link che apre la pagina della storia. Aggiungi qualsiasi altro contenuto al post che desideri. Questo codice può essere inserito in qualsiasi post o pagina, quindi puoi usarlo con post di blog, layout Divi, ecc. Sto usando l'editor classico, ma funziona in modo simile in Gutenberg.

Con Gutenberg, chiede di convertire il codice in HTML. La storia funziona in questa modalità, quindi puoi vedere le pagine girare mentre scrivi il post.

Altri modi per utilizzare il tipo di post delle storie

Puoi anche aggiungere il tipo di post al tuo menu di navigazione, usarli con il modulo blog Divi, Divi Theme Builder, ecc.

Pubblicità nelle storie web di Google

La monetizzazione è limitata alla piattaforma Google e alle vendite affiliate. Gli annunci Story sono forniti da Google Ad Manager e Google DV360 (che è attualmente in versione beta). In futuro verrà aggiunto ulteriore supporto per l'ad server. Possono includere storie sponsorizzate e affiliati.

Gli annunci di Google sono a tutta pagina e vengono visualizzati all'interno delle Storie Web. Possono includere collegamenti a pagine Web, pagine AMP o un'app. Possono includere testo, immagini, pulsanti, video, animazioni e qualsiasi combinazione. Gli annunci sono contrassegnati come un annuncio nell'angolo in alto a sinistra. L'obiettivo per gli annunci è quello di avere un design coeso che si fonde con la Web Stories UX.

La documentazione mostra i dettagli su come codificare e creare annunci. Ci sono diversi modelli per iniziare. Alcuni sono mostrati nell'esempio sopra.

Pensieri finali

Web Stories è un modo interessante per pubblicare contenuti per il tuo sito Web WordPress. Le storie sembrano pagine di riviste e funzionano come slider. Si integrano anche bene con la struttura di navigazione di WordPress e con i layout e i moduli di Divi. Funzionano bene con i dispositivi mobili.

Il plug-in WordPress di Google Web Stories ha l'aspetto e la sensazione di strumenti di modifica grafica come Canva. È semplice e facile da usare. Se sei interessato a un modo semplice per creare contenuti semplici che abbiano un bell'aspetto e migliorino la tua SEO, ti consiglio di dare un'occhiata al plug-in Web Stories WordPress.

Vogliamo sentire da voi. Hai provato il plugin WordPress di Google Web Stories? Facci sapere la tua esperienza nei commenti qui sotto.

Immagine in primo piano tramite Jemastock / shutterstock.com