Aperçu et examen du plugin WordPress Google Web Stories

Les Web Stories sont des pages tactiles en plein écran optimisées par AMP. Ils vous permettent de créer des récits visuels interactifs qui sont parfaits pour les informations visuelles. Les histoires sont immersives, partageables et traçables. Ils peuvent désormais être ajoutés à votre site WordPress grâce à un plugin de Google. Dans cet aperçu et examen du plugin, nous examinerons le plugin WordPress Google Web Stories et verrons ce qu'il peut faire.

Que sont les histoires Web ?

Anciennement connues sous le nom d'AMP Stories, les Web Stories sont des pages de la taille d'un écran mobile avec des mises en page de style magazine. Le contenu comprend du texte volumineux avec des liens vers un contenu plus long, des vidéos de 15 secondes en mode portrait avec légendes et des images avec légendes. Web Stories est un système open source et gratuit.

Ils sont destinés à être utilisés avec des appareils mobiles. Ils contiennent généralement de 4 à 30 pages avec 10 mots par page. C'est idéal pour produire du contenu en petites bouchées. C'est un excellent moyen de fournir un contenu interactif facile à utiliser d'une seule main tout en déjeunant, assis dans un métro, etc.

Pourquoi utiliser des histoires Web avec WordPress ?

Le contenu et la conception des histoires Web conviennent parfaitement au contenu de blog sur les sites Web WordPress. Le plugin les intègre dans votre site Web WordPress et aide à générer du trafic via le format Web Story.

Ils aident même à améliorer votre référencement et à se classer parmi les meilleurs dans la recherche Google, les images Google, Google Discover et l'application Google, faisant des histoires Web un excellent moyen d'améliorer le trafic WordPress.

Installation du plug-in Google Web Stories

Téléchargez le plugin bêta gratuit. Il s'agit d'un plugin bêta public, donc la plupart des fonctionnalités principales sont là. La version complète sortira plus tard cet été. Il aura une meilleure stabilisation, des performances et des corrections de bugs, et inclura la prise en charge des animations et des pièces jointes.

Comme il s'agit d'une version bêta, vous devrez télécharger le fichier et l'installer manuellement en suivant ces étapes :

1. Allez sur la page Stories Github et téléchargez le plugin bêta
2. Dans le tableau de bord WordPress, allez dans Plugins > Ajouter un nouveau
3. Cliquez sur Télécharger le plugin
4. Sélectionnez le fichier compressé sur votre ordinateur
5. Cliquez sur Installer maintenant
6. Lorsque vous voyez « Plugin installé avec succès », cliquez sur Activer le plug-in

Menu Histoires Web

Un nouvel élément de menu est ajouté au tableau de bord appelé Stories. Ici, vous pouvez voir toutes vos histoires, ajouter une nouvelle histoire et explorer des modèles. Vos histoires apparaîtront ici où vous pourrez les ouvrir dans l'éditeur, les renommer, les dupliquer ou les supprimer.

Il s'agit d'un type de publication Stories qui peut être affiché sous forme de publications Stories et un lien vers ces publications peut être ajouté aux pages et publications normales.

Créer une histoire

Cliquer sur Créer une nouvelle histoire ouvre l'éditeur dans lequel vous pouvez accéder aux outils visuels. Il n'y a pas d'option pour changer leur taille ou les réduire. Si cela vous rappelle Canva, vous n'êtes pas seul. Cela fonctionne à peu près de la même manière et c'est tout aussi intuitif.

Sur la gauche se trouve le contenu que vous pouvez ajouter au créateur de page. Il comprend des images, du texte et des formes. Les images incluent également la vidéo. Au milieu se trouve le créateur de la page. Il comprend des outils pour éditer et publier l'histoire. Sur la droite se trouvent les outils de conception et de documentation. Chaque élément que vous ajoutez à la page est un calque séparé.

Teneur

Les images et autres contenus sont ceux de votre dossier multimédia. Survoler l'un d'eux révèle trois points. Cliquer sur les points ouvre des options pour modifier ou supprimer l'image. Vous pouvez également trier, rechercher et télécharger des images ou des vidéos. Cliquer sur le contenu l'ajoute à la page de l'histoire.

Vous pouvez double-cliquer pour ajouter le contenu ou faire glisser et déposer le contenu sur la page de l'histoire. Dans cet exemple, je fais glisser l'image vers la page.

Texte

L'onglet texte comprend des boutons prédéfinis pour ajouter des titres, des sous-titres et du corps de texte. Cliquez sur un ou cliquez sur Ajouter un nouveau texte pour ajouter un texte prédéfini à la page.

Cliquez sur le texte pour ouvrir l'outil de redimensionnement. Faites glisser pour redimensionner ou saisissez le milieu et déplacez le texte vers un nouvel emplacement. Cela ouvre également ses outils à droite, où vous pouvez modifier l'alignement, les couleurs, la taille, la position, le calque, le style, etc.

Vous pouvez également sélectionner plusieurs éléments à la fois pour redimensionner ou déplacer le contenu.

Formes

L'onglet formes comprend un carré, un cercle, un triangle, un cœur, une étoile, un pentagone, un hexagone et un blob. Faites-les glisser et déposez-les sur la page, modifiez leurs couleurs, leur opacité, leurs tailles, etc.

Page

La zone de canevas comprend le titre, les options de publication, la corbeille, la copie, l'ajout d'une nouvelle page, l'annulation, le rétablissement, un aperçu et une vue en grille pour afficher plusieurs pages à la fois. En cliquant sur le contenu, vous obtenez des outils de glisser-déposer pour redimensionner et déplacer le contenu. Il ouvre également les options pour les outils de conception dans la partie droite.

Faites glisser le contenu pour voir les options d'alignement.

Double-cliquez sur le contenu pour voir l'image entière et ouvrez les outils pour ajuster le zoom et l'alignement. Vous pouvez redimensionner le contenu et le déplacer pour obtenir l'image exacte que vous souhaitez.

Concevoir

Les ajustements de conception affichent les commandes de l'élément sur lequel vous avez cliqué. J'ai sélectionné le fond de la page puis cliqué sur la couleur. Cela ouvre un sélecteur de couleurs afin que vous puissiez définir la couleur de l'arrière-plan.

Pour les images, cela inclut l'alignement, la taille et la position, l'opacité, les liens, l'accessibilité et les calques.

Avec le texte, cela inclut la famille de polices, le style, l'alignement, la couleur, la couleur d'arrière-plan, le remplissage et le lien.

Pour les formes, cela inclut l'alignement, la taille, la position et la couleur.

L'onglet Document inclut les options de publication standard de WordPress et en ajoute quelques autres. Enregistrer en tant que brouillon ou publier en tant que public ou privé. Ajustez la date, le logo de l'éditeur et l'image de couverture. Ajustez le permalien et l'avancement de la page. Choisissez entre automatique et manuel, et définissez la synchronisation d'avancement automatique.

Modèles

L'onglet Explorer les modèles affiche les modèles que vous pouvez utiliser dans vos histoires. Il existe actuellement 8 modèles pour vous aider à démarrer. Les modèles incluent plusieurs pages, il existe donc de nombreux modèles pour vous aider.

En cliquant sur l'une d'elles, vous ouvrez le modèle, où vous pouvez voir toutes les pages qui se trouvent dans le modèle.

Toutes les pages sont sélectionnables et réglables. Sélectionnez n'importe quel élément pour le modifier.

Publier une histoire

Lorsque vous cliquez pour publier l'histoire, vous verrez des options pour afficher l'histoire ou l'ajouter à une nouvelle publication.

Voir l'histoire

L'affichage de l'histoire ouvre la page sur le front-end. Chacune des pages est visible, mais seule celle du centre est entièrement lisible. La page affiche des curseurs avec des flèches sur les côtés, une barre de navigation sous la page, un bouton de lecture ou de pause dans le coin supérieur droit et un bouton de partage pour permettre aux visiteurs de partager facilement votre histoire Web. Cliquer sur le bouton permet aux visiteurs de copier l'URL.

Ajouter au nouveau message

La sélection d'Ajouter au nouvel article crée automatiquement un article de blog standard avec le code de l'histoire déjà placé dans l'article. Il s'agit d'un article de blog standard, il apparaît donc dans le flux du blog. C'est un lien qui ouvre la page de l'histoire. Ajoutez tout autre contenu à la publication que vous souhaitez. Ce code peut être placé dans n'importe quel article ou page, vous pouvez donc l'utiliser avec des articles de blog, des mises en page Divi, etc. J'utilise l'éditeur classique, mais cela fonctionne de la même manière dans Gutenberg.

Avec Gutenberg, il demande de convertir le code en HTML. L'histoire fonctionne dans ce mode, vous pouvez donc voir les pages se tourner au fur et à mesure que vous écrivez le message.

Plus de façons d'utiliser le type de publication Histoires

Vous pouvez également ajouter le type de publication à votre menu de navigation, les utiliser avec le module de blog Divi, le Divi Theme Builder, etc.

Publicité dans Google Web Stories

La monétisation est limitée à la plate-forme Google et aux ventes des affiliés. Les annonces Story sont fournies par Google Ad Manager et Google DV360 (qui est actuellement en version bêta). Un support de serveur publicitaire supplémentaire sera ajouté à l'avenir. Ils peuvent inclure des histoires sponsorisées et des affiliés.

Les annonces Google sont en pleine page et apparaissent dans les histoires Web. Ils peuvent inclure des liens vers des pages Web, des pages AMP ou une application. Ils peuvent inclure du texte, des images, des boutons, des vidéos, des animations et toute combinaison. Les annonces sont marquées comme une annonce dans le coin supérieur gauche. L'objectif des publicités est d'avoir un design cohérent qui s'harmonise avec le Web Stories UX.

La documentation montre les détails sur la façon de coder et de créer des annonces. Il existe plusieurs modèles pour vous aider à démarrer. Quelques-uns sont illustrés dans l'exemple ci-dessus.

Mettre fin aux pensées

Web Stories est un moyen intéressant de publier du contenu pour votre site Web WordPress. Les histoires ressemblent à des pages de magazine et fonctionnent comme un curseur. Ils s'intègrent même bien à la structure de navigation WordPress et aux mises en page et modules de Divi. Ils fonctionnent bien avec les appareils mobiles.

Le plugin WordPress Web Stories de Google ressemble à des outils d'édition graphique comme Canva. C'est simple et facile à utiliser. Si vous êtes intéressé par un moyen simple de créer un contenu simple qui a fière allure et améliore votre référencement, je vous recommande de jeter un œil au plugin WordPress Web Stories.

Nous voulons de vos nouvelles. Avez-vous essayé le plugin WordPress Google Web Stories ? Faites-nous part de votre expérience dans les commentaires ci-dessous.

Image en vedette via Jemastock / shutterstock.com