[MISE À JOUR] Ajoutez n'importe quel flux Smash Balloon en tant que bloc Gutenberg natif ou widget Elementor

Vous êtes en train de créer une nouvelle page dans l'éditeur de blocs WordPress. Vous y insérez votre flux Instagram. Vous souhaitez le prévisualiser sur la page avant de la publier.

WordPress 7 a modifié cet aspect. Le fait d'avoir déplacé l'éditeur dans un iframe a changé la manière dont les aperçus s'affichent ; il a donc fallu mettre à jour les blocs en conséquence.

Vos flux s'affichent correctement à l'intérieur, sur l'ensemble des six plugins Smash Balloon. Ce que vous créez sur le canevas correspond exactement à ce que voient vos visiteurs.

Tous les plugins de flux Smash Balloon s'intègrent désormais à une page sous la forme d'un bloc Gutenberg natif ou d'un widget Elementor, et fonctionnent correctement sous WordPress 7. Ajoutez un flux de la même manière que vous ajoutez un titre, une image ou un bouton.

Recherchez-le, ajoutez-le, puis sélectionnez votre flux dans le menu déroulant. Cela fonctionne de la même manière, quel que soit le plugin que vous utilisez.

Dans Gutenberg, il se trouve dans l'éditeur, aux côtés de vos blocs de paragraphe, d'image et de galerie. Dans Elementor, il figure dans le panneau des widgets, avec tous les autres éléments que vous utilisez pour créer vos pages.

Voici ce que vous pouvez faire :

• Recherchez votre flux par nom dans l'outil d'insertion, puis déposez-le sur la page
• Faites glisser un widget « Smash Balloon » dans n'importe quelle section ou colonne d'Elementor
• Sélectionnez le flux enregistré à afficher à partir d'un menu déroulant situé dans le bloc ou le widget
• Vérifiez que votre flux s'affiche correctement sur la zone de travail avant de le publier
• Créez un nouveau flux ou modifiez celui qui s'affiche actuellement, depuis le panneau Elementor

Ajoutez votre flux comme vous ajoutez tout le reste

Tous les plugins de flux Smash Balloon permettaient déjà d'ajouter un flux à une page, soit via le bloc d'intégration classique, soit via un shortcode. Cela n'a pas changé, et tout ce que vous aviez créé auparavant continue de fonctionner.

Pour le fil Instagram, les fils Twitter personnalisés, les fils TikTok et le fil des avis, la nouveauté réside dans l'ajout, lors de cette mise à jour, d'un bloc et d'un widget natifs. Le fil Facebook personnalisé et le fil YouTube Pro en disposaient déjà, et cette mise à jour garantit que les deux continuent de fonctionner correctement sous WordPress 7.

Désormais, votre flux s'affiche sur la page sous forme de bloc ou de widget, et il reste visible pendant que vous créez votre page. Vous choisissez le flux à afficher dans un menu déroulant, et il s'affiche sur la page à l'endroit où vous l'avez placé.

Quelle que soit la version parmi les six que vous utilisez, et que vous soyez abonné à la version gratuite ou à la version Pro, l'ajout d'un flux fonctionne désormais de la même manière.

Ajouter n'importe quel flux directement depuis l'éditeur de blocs

Ouvrez l'outil d'insertion, saisissez le nom du plugin que vous utilisez, et votre bloc de flux apparaîtra aux côtés de vos blocs de paragraphe, d'image et de galerie.

Ajoutez-le, puis choisissez votre flux dans le menu déroulant « Sélectionner un flux ». Vos publications, vidéos ou avis s'affichent directement dans le bloc sur la page.

De là, vous pouvez voir le résultat final à son emplacement réel, avec la largeur qu'il occupera, votre titre au-dessus et votre bouton en dessous. Vous pouvez ainsi évaluer l'espace qu'il occupera sur la page avant même qu'un visiteur ne le charge.

Voici comment cela se passe :

• Une fleuriste ajoute son fil Instagram à une page « Mariages », vérifie l'espace qu'il occupe au-dessus du formulaire de réservation, puis publie le contenu en s'assurant que le formulaire reste visible.
• Une salle de sport affiche les avis de ses adhérents au-dessus du programme des cours et vérifie que ce dernier est toujours affiché à l'écran avant la mise en ligne de la page.
• Une boulangerie place son fil TikTok au-dessus du bouton de commande et s'assure que celui-ci reste facilement accessible

Insérer un flux dans n'importe quelle section Elementor

Si vous créez votre site avec Elementor, votre widget « Smash Balloon Feed » se trouve directement dans le panneau des widgets.

Recherchez votre plugin dans le panneau des widgets, puis faites glisser le widget dans la section ou la colonne sur laquelle vous travaillez.

Sélectionnez votre flux dans le menu déroulant : il s'affichera alors dans l'aperçu situé à côté, dans la colonne où vous l'avez placé.

La largeur et l'espacement proviennent des commandes propres à Elementor, les mêmes que celles que vous utilisez pour un titre ou un bouton, ce qui permet au flux de s'aligner avec le reste de la section au lieu d'en être dissocié.

Si vous souhaitez modifier le flux lui-même, le panneau comporte des liens permettant d'en créer un nouveau ou de modifier celui que vous affichez actuellement. Ces deux liens s'ouvrent dans un nouvel onglet, ce qui vous permet de conserver la page que vous êtes en train de concevoir telle que vous l'avez laissée.

• Un studio de yoga affiche son fil Instagram à côté du planning des cours, afin que les nouveaux élèves puissent découvrir les locaux et les participants avant de choisir un cours.
• Un restaurant affiche ses avis Google sous le menu, en respectant la même largeur, afin que les clients puissent les consulter au moment même où ils choisissent où manger.
• Une boutique met ses vidéos TikTok au même niveau que les photos de ses produits, afin que les clients puissent voir le produit en situation sans avoir à faire défiler la page au-delà du bouton « Acheter ».

Vos flux s'affichent correctement dans WordPress 7

WordPress 7 a intégré l'éditeur de blocs dans une iframe, ce qui a modifié la manière dont les blocs s'affichent pendant l'édition. Tous les plugins Smash Balloon ont été mis à jour en conséquence ; ils sont donc tous les six entièrement compatibles avec cette nouvelle version.

Votre flux s'affiche dans l'éditeur exactement comme il apparaîtra sur la page en ligne. Cela vaut aussi bien si vous utilisez le nouveau bloc, l'ancien bloc ou un ancien widget Elementor ; ainsi, les pages que vous avez créées auparavant s'affichent exactement telles quelles.

C'est le fait de voir le flux en temps réel pendant que vous travaillez qui vous permet de terminer une page d'un seul coup :

• Ajoutez un flux d'avis sous la grille tarifaire d'un salon et affichez les deux à l'écran, afin que la grille reste facile à lire une fois mise en ligne
• Lors de la création de la page, placez un flux Instagram au-dessus du formulaire de réservation de la maison d'hôtes, de manière à ce que ce dernier reste visible lorsqu'un visiteur arrive sur la page.
• Regardez comment un flux TikTok s'affiche à sa largeur réelle sur la page des événements d'une brasserie, afin que les dates de concerts situées en dessous ne soient pas masquées

Tous les flux que vous avez déjà créés continuent de fonctionner

Rien ici ne vous oblige à revenir sur d'anciennes pages. Un flux intégré à l'ancien bloc ou à l'ancien widget Elementor continue de fonctionner exactement comme avant.

Ces anciens éléments s'affichent également correctement dans l'éditeur de WordPress 7 ; ainsi, une page que vous avez créée il y a un an s'ouvre et s'affiche en aperçu exactement comme prévu. Pour cela, il suffit de mettre à jour le site, sans aucune configuration particulière.

Les codes courts restent inchangés eux aussi. Si c'est ainsi que vous insérez vos flux, continuez comme ça.

Le nouveau bloc et le nouveau widget sont disponibles pour le prochain flux que vous ajouterez, ainsi que pour tout flux plus ancien que vous souhaiteriez déplacer.

La même mise à jour, quelle que soit la plateforme que vous utilisez

Chaque plugin Smash Balloon ajoute un flux à une page de la même manière, qu'il s'agisse d'un bloc dans Gutenberg ou d'un widget dans Elementor. Recherchez le nom du plugin, ajoutez-le, puis sélectionnez votre flux dans le menu déroulant.

Même en en utilisant trois, il n'y a toujours qu'une seule façon de présenter un fil d'actualité. Ce que vous apprenez sur votre fil d'actualité Instagram, c'est ce que vous savez déjà lorsque vous ajoutez des avis sur une page six mois plus tard.

C'est la même chose sur Elementor, tant dans la version gratuite que dans la version Pro ; ainsi, un site utilisant le plugin gratuit et un site utilisant la version Pro sont classés de la même manière.

Imaginons que vous dirigiez une agence de marketing disposant d'un flux Instagram sur le site d'un client et d'un flux Facebook sur celui d'un autre. Vous procédez de la même manière sur chaque site web, ce qui vous permet d'économiser le temps et les coûts liés à la rédaction d'une nouvelle série d'instructions.

Comment ajouter votre fil Instagram à n'importe quelle page en quelques minutes

Cette fonctionnalité est disponible gratuitement et dans la version Pro du flux Instagram. Tous les autres plugins présentés ici fonctionnent de la même manière ; ainsi, que vous utilisiez les flux Twitter personnalisés, le flux Facebook personnalisé, le flux YouTube Pro, les flux TikTok ou le flux d'avis, les étapes ci-dessous s'appliquent exactement de la même façon.

Utilisation du bloc Gutenberg

Ouvrez la page ou l'article auquel vous souhaitez ajouter un flux, puis cliquez sur l'icône « + » pour ouvrir l'outil d'insertion de blocs. Recherchez « Flux Instagram » et sélectionnez le bloc « Flux Instagram ».

Sélectionnez le flux de votre choix dans le menu déroulant « Sélectionner un flux » : il s'affichera directement sur la page.

Ensuite, vous pouvez prévisualiser la page pour vérifier qu'elle correspond bien à ce que vous souhaitez, puis la publier comme d'habitude.

Utilisation du widget Elementor

Ouvrez votre page dans Elementor et recherchez « Instagram Feed » dans le panneau des widgets situé à gauche. Faites glisser le widget dans n'importe quelle section ou colonne de votre page.

Dans les paramètres du widget, sélectionnez le flux de votre choix dans le menu déroulant.

Vous n'en avez pas encore créé ? Cliquez sur « Créer un nouveau flux » et configurez-le de la même manière que depuis le tableau de bord du plugin, en choisissant votre source, votre mise en page et votre style.

Si vous souhaitez modifier le flux affiché, cliquez sur « Modifier ce flux » : vous serez redirigé directement vers l'outil de personnalisation dans un nouvel onglet, tandis qu'Elementor restera ouvert.

Réglez la largeur des colonnes et l'espacement comme vous le feriez pour n'importe quel autre widget Elementor, puis actualisez la page.

Une fois la publication effectuée, rendez-vous sur la page en ligne pour vérifier que votre flux s'affiche correctement et qu'il correspond bien à ce que vous aviez créé dans l'éditeur.

Si vous utilisez un bloc ou un widget hérité sur une autre page, vous n'avez rien à modifier à cet endroit. Il continuera de fonctionner exactement comme il le fait actuellement.

Vos flux sont prêts à être intégrés à n'importe quelle page

Saviez-vous qu'il est désormais possible d'ajouter un flux à une toute nouvelle page en moins d'une minute, que ce soit à l'aide d'un bloc ou d'un widget ?

L'option « shortcode » est toujours disponible si vous la préférez, mais pour la plupart des nouvelles pages, le bloc ou le widget natif constitue le moyen le plus rapide d'y parvenir.

• Aucun shortcode à copier pour les nouveaux flux
• Il n'y a pas d'étapes distinctes entre Gutenberg et Elementor
• Impossible de savoir à quoi ressemblera un flux avant de le publier

Si vous utilisez déjà un plugin Smash Balloon, mettez-le à jour vers la dernière version et testez le nouveau bloc ou widget sur votre prochaine page. Si vous n’en utilisez pas encore, lancez-vous avec Smash Balloon et créez votre premier flux dès le premier jour à l’aide du bloc natif.

Enfin, un immense merci à notre communauté. Vos commentaires influencent ce que nous développons, et la manière dont les flux s'affichent sur une page est un sujet qui revient souvent dans vos retours.

Quelle plateforme allez-vous ajouter en premier : Instagram, Facebook ou autre chose ? Laissez-nous un commentaire ci-dessous pour nous le dire.