Otter Blocks – Gutenberg Blocks, Page Builder for Gutenberg Editor & FSE

Description

Otter est une extension de construction de pages basée sur les blocs Gutenberg qui ajoute des fonctionnalités supplémentaires à l’éditeur de blocs WordPress (également appelé Gutenberg) afin d’offrir une meilleure expérience de construction de pages sans avoir recours à des constructeurs de pages traditionnels tels qu’Elementor et Divi.

Liens rapides 🔗

Avec Otter Blocks, vous avez accès à

  • Plus de 20 blocs supplémentaires pour Gutenberg
  • Collection de compositions
  • Modèles pleine page
  • Conditions de visibilité
  • Custom CSS
  • Animations
  • Contenu dynamique et bien plus encore

Pour tous les blocs, y compris ceux provenant de tiers, présents sur votre site.

La fonctionnalité « Bloc CSS personnalisé » permet de personnaliser directement les propriétés CSS de n’importe quel bloc Gutenberg sur la page, tandis que la fonctionnalité « Animation » permet d’ajouter rapidement et facilement des animations à n’importe quel bloc afin de rendre vos différents blocs et sections plus attrayants.

Grâce à la fonctionnalité « Conditions de visibilité » d’Otter, vous pouvez définir les conditions à remplir pour que les blocs que vous avez sélectionnés s’affichent sur la page.

La bibliothèque de compositions contient toute une plage d’éléments variés, dans différents styles, pour vous aider à créer de superbes pages. Elle couvre tous les éléments essentiels de votre site : entêtes, témoignages, tableaux de tarification, sections, et bien plus encore.

Découvrez un aperçu rapide d’Otter Blocks

Comment les blocs Gutenberg d’Otter peuvent-ils vous aider ? 🤔

Une extension WordPress de blocs Gutenberg

Otter ajoute plus de 26 blocs géniaux et pratiques pour faciliter la construction de pages dans Gutenberg !

Au-delà des simples blocs, vous avez besoin d’options de personnalisation avancées pour pouvoir contrôler le style et l’apparence. Avec Otter, vous avez tout ce qu’il vous faut.

Chaque bloc peut être personnalisé pour vous aider à mettre en forme votre site selon vos envies :

  • Controles de couleur pour les couleurs primaires, les accents et les arrière-plans.
  • Animations de fond, rebonds, fondus, retournements, rotations, glissements, roulades, vitesse de la lumière et bien plus encore, d’un simple clic.
  • La typographie régit tout, de l’espacement au choix de la police.

Your AI Assistant for the Block Editor

Otter brings AI right into the block editor to help you build, not just edit. Describe what you want, and Otter creates it as real, editable blocks.

  • AI Content Generator: Generate a full section or an entire page from a simple prompt with the AI Block. Pick a type like Hero, Features, Pricing, Testimonials, or Call to action, or describe your own. Otter matches your theme colors and current page style, so the result arrives on-brand.

  • AI Toolbar: Select any text to rewrite, summarize, expand, shorten, translate, change tone, fix grammar, or simplify it, all without leaving the page. You can also create your own custom actions with your own prompts and reorder the toolbar to fit how you work.

  • AI Form Autoresponder [PRO]: Reply to every form submission with a personalized, AI-written message. Write a prompt using your form fields, set a fallback message, and let AI craft the rest.

  • Native WordPress AI Connectors: Otter’s AI works with the native AI adapters in WordPress 7.0, so you connect your preferred AI provider once, and every Otter AI feature uses it.

Adaptabilité mobile d’Otter Blocks

Créez des mises en page adaptées aux appareils mobiles grâce aux réglages responsive intégrés d’Otter. Chaque bloc peut être ajusté pour offrir une expérience homogène sur mobile, tablette et ordinateur de bureau.

Une extension WordPress de conditions de blocs Gutenberg

Vous souhaitez afficher certains blocs uniquement lorsqu’un internaute est connecté ou déconnecté ? Ou encore selon qu’il s’agit d’un client ou d’une cliente de votre boutique, d’un éditeur ou d’éditrice de votre blog ou d’un autre rôle du compte ? Grâce à la fonctionnalité « Conditions de bloc Gutenberg » disponible dans Otter, c’est possible. Passez à la version Pro d’Otter pour profiter pleinement de la puissance d’autres conditions de bloc, telles que :

  • URL Query String
  • Plage de dates
  • Jour de la semaine
  • Heure de la journée
  • Produits WooCommerce dans le panier
  • Montant total dépensé sur WooCommerce
  • Total du panier WooCommerce
  • Catégories WooCommerce
  • Étiquettes WooCommerce
  • Attributs WooCommerce
  • Basé sur les cookies
  • Et plus

Une extension d’animation des blocs Gutenberg pour WordPress

Épatez les visiteurs/visiteuses de votre site avec des animations incroyables que vous pouvez ajouter à n’importe quel bloc de la page. Avec plus de 50 animations disponibles, Otter vous permet d’apporter une touche d’originalité à n’importe quel article ou page de votre site

Une extension WordPress Gutenberg de fenêtre surgissante

Les fenêtres surgissantes sont une des techniques les plus anciennes utilisées sur le web pour capter des prospects et diffuser des informations. Grâce au bloc « Gutenberg Popup » disponible dans Otter, vous pouvez créer des fenêtres surgissantes à partir de n’importe quel autre bloc disponible dans Gutenberg !

Personnalisez vos fenêtres surgissantes en définissant quand elles doivent s’afficher et comment elles peuvent être fermées. Grâce à notre bloc de fenêtre surgissante, vous avez accès à plusieurs déclencheurs, tels que « au chargement », « à la fermeture de la page », « au clic sur un lien » et « au défilement ».

De plus, vous pouvez personnaliser votre fenêtre surgissante à l’aide de superpositions sur mesure afin de l’adapter à l’identité de votre marque et d’attirer davantage l’attention. Voir la démo en direct

Réglages globaux par défaut pour les blocs d’Otter

Vous en avez assez de devoir toujours définir les mêmes options chaque fois que vous ajoutez un bloc à la page ? Avec Otter, vous pouvez définir la configuration par défaut de certains des blocs les plus couramment utilisés, tels que le bloc « Section », le bloc « Icône », le bloc « Titre avancé », et bien d’autres encore.

Blocs disponibles dans Otter :

Bloc Gutenberg Accordéon [Gratuit]

Utilisez ce bloc pour créer des listes de contenu empilées verticalement qui peuvent être affichées ou masquées d’un simple clic ; on les appelle plus communément des « accordéons ». Voir la démo en direct

Bloc Gutenberg Titre avancé [Gratuit]

Le bloc de titre dont vous ne saviez pas que vous aviez besoin. Ce bloc Otter offre toutes les fonctionnalités du bloc de titre par défaut, ainsi que quelques options supplémentaires, comme la possibilité de modifier la police, de mettre en évidence certaines parties du texte, et bien plus encore. Voir la démo en ligne

Bloc IA [Gratuit]

Build with AI, right in the editor. Describe the section or page you want, and the AI Block generates it as real, editable Gutenberg blocks, matched to your theme colors and page style. Adjust anything by hand afterward, just like blocks you built yourself.

Bloc Gutenberg Groupe de boutons [Gratuit]

Créez rapidement et facilement plusieurs boutons et affichez-les verticalement ou horizontalement en fonction de l’appareil sur lequel la page est consultée. Voir la démo en ligne

Bloc Gutenberg Compte à rebours [Gratuit]

Vous comptez les jours avant un grand évènement ? Affichez-le en utilisant ces blocs Gutenberg. Décomptez les jours, les heures, les minutes ou les secondes. Voir la démo en ligne

Bloc Gutenberg Formulaire de contact [Gratuit]

Insérez rapidement et facilement un formulaire de contact n’importe où sur la page. Vous pouvez également transformer le formulaire en un outil de génération de prospects en l’intégrant à Brevo (Sendinblue) ou Mailchimp. De plus, rationalisez la gestion des données grâce à l’intégration de crochet web et renforcez la sécurité grâce à l’intégration de hCaptcha. Voir la démo en ligne

Bloc Chronologie de contenu [Gratuit]

Affichez élégamment les évènements dans une chronologie. Idéal pour mettre en évidence les évènements historiques, les étapes d’un processus ou les étapes clés.

Content Slider Block [FREE]

A slider where every slide can hold any Gutenberg blocks, not just images. Add headings, text, buttons, images, or full layouts like testimonial, pricing, or feature cards inside each slide, then let visitors move through them with arrows or dots. Unlike a standard image slider, the Content Slider turns anything you build in Gutenberg into a swipeable carousel, with no extra plugin needed.

Bloc Compte à rebours [Gratuit]

Vous comptez les jours avant un grand évènement ? Affichez-le en utilisant ces blocs Gutenberg. Voir la démo en ligne

Bloc Progression circulaire [Gratuit]

Affichez vos progrès grâce à un magnifique bloc compteur circulaire. Voir la démo en ligne

Bloc Boîte à bascule [Gratuit]

Crée une carte avec un effet de retournement, dans laquelle vous pouvez insérer n’importe quel contenu ou bloc disponible dans Gutenberg. Voir la démo en ligne

Bloc Gutenberg Liste d’icônes [Gratuit]

Donnez un coup de fouet à vos listes de points ennuyeuses en utilisant des icônes personnalisées comme pointeurs. Découvrez la démo en ligne

Bloc Gutenberg Icône [Gratuit]

Affichez n’importe quelle icône de Font Awesome ou de notre propre liste d’icônes personnalisées n’importe où sur la page. Modifiez les couleurs, ajoutez des bordures et associez-les à d’autres blocs pour améliorer l’apparence de votre page. Voir la démo en ligne

Bloc Gutenberg Animation Lottie [Gratuit]

Avez-vous entendu parler de Lottie ? Génial ! Grâce au bloc Gutenberg Lottie Animation d’Otter, vous pouvez afficher des animations Lottie n’importe où dans Gutenberg. Découvrez la démo en ligne

Bloc Gutenberg Cartes [Gratuit]

Choisissez entre un bloc Open Street Map ou Google Maps et créez des marqueurs pour vos points d’intérêt pour les visiteurs de votre site. Notre bloc Maps vous aide à personnaliser l’expérience cartographique jusqu’à la couleur et la description des marqueurs, à rechercher des lieux par leur nom ou leurs coordonnées, à ajouter et supprimer des commandes cartographiques, ou à modifier la taille et le style des cartes en quelques clics. Voir la démo en ligne

Bloc Barre de progression [Gratuit]

Affichez votre progression au moyen d’une superbe barre de progression. Voir la démo en direct

Bloc Gutenberg Publications [Gratuit]

Utilisez ce bloc pour insérer des éléments provenant d’articles, de pages et de types de publication personnalisés dans la page en cours de modification. Le bloc « Articles » permet d’afficher un certain nombre d’articles sur différentes pages. Les personnalisations disponibles pour ce bloc couvrent des domaines tels que les styles, les types de publication, les réglages, les designs et la mise en page.

Bloc d’évaluation de produit Gutenberg [gratuit]

Vous bloguez sur un produit que vous adorez ? Ou peut-être gérez-vous un site d’avis ? Utilisez ce bloc pour créer un tableau d’évaluation du produit et répertorier ses fonctionnalités, ses avantages et ses inconvénients, ainsi que des liens d’achat facultatifs. Voir la démo en direct

Bloc de fenêtre surgissante Gutenberg [gratuit]

Créez de superbes fenêtres surgissantes et définissez avec précision quand elles doivent apparaître et comment elles peuvent être fermées. Voir la démo en direct

Bloc de diaporama Gutenberg [gratuit]

Utilisez ce bloc Gutenberg pour créer des diaporamas d’images sur n’importe quelle page Gutenberg. Les réglages incluent la hauteur du diaporama, le délai, le nombre de diapositives par page, la lecture automatique et bien plus encore. Découvrez la démo en direct

Bloc de section Gutenberg [gratuit]

Un bloc de colonnes surpuissant ! Ce bloc vous permet de créer une section comportant jusqu’à 6 colonnes pouvant chacune avoir une couleur d’arrière-plan, une image ou un dégradé personnalisés. Utilisez les fonctionnalités responsives de ce bloc pour définir les marges internes et externes pour les écrans d’ordinateur, de tablette et de mobile. Voir la démo en direct

Stripe Checkout [gratuit]

Ce bloc sera très utile si vous souhaitez vendre quelques produits sans créer une boutique complète, tels que des livres électroniques, certaines licences, etc.

Bloc d’icônes de partage [gratuit]

Boutons de partage permettant aux visiteurs/visiteuses de votre site de partager du contenu sur n’importe quel service de partage social. Voir la démo en direct

Bloc Gutenberg Onglets [Gratuit]

Utilisez ce bloc pour créer des listes de contenu empilées horizontalement qui peuvent être affichées ou masquées d’un simple clic, plus communément appelées « onglets ». Voir la démo en direct

Bloc Gutenberg Ajouter au panier [Pro]

Ajoutez un bloc « Ajouter au panier » pour n’importe quel produit WooCommerce à n’importe quel endroit de l’article ou de la page que vous modifiez.

Bloc Gutenberg Horaires d’ouverture [Pro]

Créez un tableau des horaires d’ouverture élégant et affinez ses réglages jusqu’à ce qu’il soit parfait.

Recherche en direct [Pro]

La fonctionnalité de recherche en direct améliore le bloc de recherche du cœur en ajoutant deux attributs supplémentaires (isLive et postTypes) qui peuvent être définis dans l’inspecteur sous le panneau « Recherche en direct ».

Modale [Pro]

Implémentez des boîtes de dialogue modales pour une expérience interactive, affichant des formulaires, du contenu ou des annonces directement dans la mise en page.

Tableau comparatif des avis [Pro]

Préparez-vous à impressionner vos lecteurs grâce au bloc « Tableau comparatif d’évaluation » d’Otter. Créez sans effort des tableaux comparatifs de produits d’aspect professionnel pour votre blog ou votre site.

Nous ajoutons constamment de nouveaux blocs Gutenberg à Otter pour vous aider à créer les pages de votre site. N’hésitez pas à nous faire part de vos suggestions sur notre forum de support ! Voici quelques autres blocs disponibles :

Prêt à importer des compositions et des modèles pleine page dans Otter :

Lancez facilement votre site grâce à nos compositions personnalisables et nos modèles WordPress pleine page. Importez des designs prêts à l’emploi en un seul clic et commencez immédiatement.

Explore a wide range of Otter patterns and full-page templates for services, testimonials, pricing, features, call-to-action sections, and more. Browse the available designs here.

Découvrez plus d’options dans Otter Pro 🤩

Blocs de construction WooCommerce

Créez des pages de produits uniques personnalisées en utilisant WooCommerce Builder Blocks by Otter. Toutes les nouvelles fonctionnalités sont conçues pour maximiser votre taux de conversion et apporter davantage d’améliorations.

Avec Otter Pro, vous bénéficiez de nombreuses fonctionnalités supplémentaires, notamment :

  • Bloc « Ajouter au panier »
  • Bloc d’horaires d’ouverture
  • Bloc de modale
  • Bloc de comparaison des avis sur les produits
  • Bloc de recherche en direct
  • Modules Pro pour blocs gratuits
  • Plus d’options de contenu dynamique
  • Plus d’options de conditions de visibilité
  • Plus de compositions et modèles pleine page
  • et plus !

Vous pouvez essayer une démonstration en direct d’Otter Blocks, sans aucune configuration nécessaire. Cliquez ici pour l’essayer.

À qui s’adresse Otter ? 👀

  • Quiconque souhaite tirer le meilleur parti du nouvel éditeur Gutenberg grâce à des blocs Gutenberg pratiques et faciles à utiliser.
  • Quiconque envisage d’abandonner les constructeurs de pages traditionnels comme Elementor et Divi Builder au profit du nouvel éditeur de blocs Gutenberg.
  • Toute personne cherchant à construire rapidement des pages Gutenberg en un temps record.
  • Toute personne cherchant à masquer ou afficher des blocs Gutenberg en fonction de critères tels que l’état de connexion de l’internaute.
  • Quiconque essaie d’ajouter des animations aux blocs Gutenberg.

Voyons quelques cas d’utilisation 🚀

Otter ouvre un monde de possibilités ! Découvrez comment différents segments d’audience peuvent en tirer le meilleur parti :

  • Blogueurs voyage : enrichissez votre blog voyage avec des cartes captivantes grâce aux blocs Otter’s Maps et Google Maps pour présenter vos voyages au monde entier.

  • Organisations à but non lucratif : engagez votre public et faites la promotion de votre cause grâce aux blocs Circle Counter et Testimonial d’Otter pour partager des histoires de réussite inspirantes.

  • Propriétaires de restaurants : présentez les menus de votre restaurant et recueillez facilement les réservations grâce aux blocs Flip Card et Form d’Otter pour une présence en ligne alléchante.

  • Critiques de produits technologiques : présentez des critiques détaillées de produits grâce à Otter’s Product Review, pour rendre votre contenu informatif et captivant.

  • Blogueurs : améliorez vos articles de blog grâce aux icônes de partage, qui permettent à vos lecteurs de partager facilement vos publications. Utilisez un diaporama pour afficher des galeries d’images et susciter l’intérêt de votre public.

  • Créateurs de contenu et vendeurs de produits numériques : le bloc Gutenberg Stripe checkout offre un moyen pratique de vendre des produits numériques, tels que des livres électroniques, des cours en ligne, des licences logicielles ou des œuvres d’art numériques, sans avoir à configurer une boutique en ligne à part entière. En intégrant ce bloc, vous pouvez offrir à vos clients une expérience de paiement simplifiée et sécurisée.

  • Évaluateurs de produits : créez des comparaisons informatives et attrayantes entre différents produits grâce à un tableau comparatif, afin d’aider les utilisateurs/utilisatrices à prendre des décisions éclairées.

  • Propriétaires de restaurants : affichez vos horaires d’ouverture dans un format élégant à l’aide des blocs « Horaires d’ouverture », afin que vos clients/clientes puissent vous trouver facilement.

  • Répertoires en ligne : sites proposant des répertoires, des listes ou un contenu exhaustif où la recherche en temps réel simplifie l’accès au contenu.

Support 🤝

Nous sommes là pour vous aider. N’hésitez pas à ouvrir un nouveau fil de discussion sur le forum de support.

Documentation 📚

Découvrez comment tirer le meilleur parti d’Otter Blocks grâce à notre documentation détaillée et facile à utiliser.

Contribuer 💁‍♂️

Otter Blocks est un projet open source, et nous invitons les contributeurs/contributrices à rejoindre notre communauté dynamique ! Aidez-nous à améliorer l’extension et à la rendre encore meilleure – Lien GitHub

Ressources utiles 📌

Captures d’écrans

Blocs

Cette extension fournit 18 blocs.

  • Link An anchor element with link picker and rich text.
  • Icon An inline SVG icon from the Lucide icon set.
  • Image A simple image element. Set via media library or direct URL.
  • Box A generic wrapper element with tag selection and inner blocks. Supports details and summary tags for native disclosure widgets.
  • Text A rich text element with tag selection.
  • Lottie Animation Add Lottie animations to your WordPress. Powered by Otter.
  • Accordion Vertically collapsing accordions perfect for displaying your FAQs. Powered by Otter.
  • Circle Counter Show your progress with a beautiful Circle Counter block. Powered by Otter.
  • Google Maps Display Google Maps on your website with Google Map block. Powered by Otter.
  • Popup Display your content in beautiful popup with many customization options. Powered by Otter.
  • Content Slider A lightweight slider where each inner block becomes a slide. Powered by Otter.
  • Maps Display Open Street Maps on your website with Maps block. Powered by Otter.
  • Form Display a form for your clients. Powered by Otter.
  • Countdown Set a countdown for a date. Powered by Otter.
  • Tabs Organize and allow navigation between groups of content with Tabs block. Powered by Otter.
  • Modal Display your content in beautiful Modal with many customization options. Powered by Otter.
  • Image Slider Minimal image slider to showcase beautiful images. Powered by Otter.
  • Progress Bar Show your progress with a beautiful Progress Bar block. Powered by Otter.

Installation

Installation automatique

Pour télécharger et installer l’extension Otter, veillez à suivre les étapes ci-dessous :

  • Accédez au tableau de bord WordPress > Extensions.
  • Cliquez sur le bouton « Ajouter » et saisissez « Otter Blocks » dans la barre de recherche.
  • Lorsque l’extension apparaît, cliquez sur le bouton « Installer », puis sur « Activer ».

Installation manuelle

  • Connectez-vous à la page d’administration de votre site, puis allez dans Apparence > Extensions. Vous verrez toutes les extensions actuellement installées dans votre tableau de bord répertoriées ici.
  • Pour installer une nouvelle extension WordPress, cliquez simplement sur l’onglet « Ajouter ».
  • Cliquez sur le bouton « Téléverser l’extension » dans le tableau de bord WordPress.
  • Cliquez sur le bouton « Choisir un fichier », sélectionnez l’archive ZIP de l’extension Otter Blocks sur votre ordinateur local, puis cliquez sur le bouton « Installer maintenant ».
  • Cliquez sur le bouton « Activer » sous le message « Extension bien installée ».

Si vous souhaitez téléverser l’extension via FTP, cliquez ici pour obtenir des explications détaillées à ce sujet.

FAQ

Otter Blocks est-il gratuit ?

Otter existe en version gratuite et premium. La version premium offre une plus grande variété de blocs et de multiples options pour les personnaliser, par rapport à la version gratuite.

Quel constructeur de pages est compatible avec Otter ?

Otter fournit des blocs pour Gutenberg, l’éditeur WordPress par défaut, et le constructeur de pages.

Puis-je utiliser Otter avec n’importe quel thème WordPress ?

Bien sûr, Otter est compatible avec tous les thèmes WordPress.

Où puis-je obtenir de l’aide ?

Si vous rencontrez des difficultés ou si vous avez des questions concernant Otter, vous pouvez créer un ticket sur notre forum de support. N’hésitez pas également à consulter notre documentation pour en savoir plus sur les fonctionnalités de l’extension et comment l’utiliser au mieux.

Quels sont les compositions et comment puis-je les utiliser ?

Les compositions ont été conçues pour vous faciliter la création de votre site à l’aide de blocs prédéfinis qui peuvent ensuite être personnalisés selon vos besoins. Vous pouvez consulter notre documentation dédiée pour trouver tout ce que vous devez savoir sur les compositions.

Comment signaler des problèmes de sécurité ?

La sécurité des extensions est une priorité absolue pour nous. Si vous identifiez une faille potentielle, nous vous demandons de la signaler de manière responsable.

Veuillez suivre les procédures de signalement décrites sur notre page dédiée à la sécurité.

Avis

2 juin 2026 1 réponse
Still no compatibility with WordPress 6.9 and Gutenberg API v3… 7 months later. « Block with API version 2 or lower is deprecated since version 6.9. Note: The block « themeisle-blocks/content-generator » is registered with API version 2. This means that the post editor may work as a non-iframe editor. Since all editors are planned to work as iframes in the future, set the apiVersion field to 3 and test the block inside the iframe editor. »
Lire les 248 avis

Contributeurs/contributrices & développeurs/développeuses

« Otter Blocks – Gutenberg Blocks, Page Builder for Gutenberg Editor & FSE » est un logiciel libre. Les personnes suivantes ont contribué à cette extension.

Contributeurs

“Otter Blocks – Gutenberg Blocks, Page Builder for Gutenberg Editor & FSE” a été traduit dans 18 locales. Remerciez l’équipe de traduction pour ses contributions.

Traduisez « Otter Blocks – Gutenberg Blocks, Page Builder for Gutenberg Editor & FSE » dans votre langue.

Le développement vous intéresse ?

Parcourir le code, consulter le SVN dépôt, ou s’inscrire au journal de développement par RSS.

Journal des modifications

Version 3.2.3 (2026-08-20)

  • Fixed WooCommerce product data controls hidden in WooCommerce Builder.
  • Fixed frontend pages stopping when widget CSS cannot use the WordPress filesystem.
  • Fixed PHP warnings when the Post Content dynamic value renders.
  • Fixed animation pages crashing when another plugin loads a different CSS parser.
  • Fixed frontend pages stopping when an Otter plugin class cannot load.
  • Fixed a security issue in the Stripe Checkout block where the checkout price could be manipulated via the URL. Thanks to sungbyeongchan for the responsible disclosure.

Consultez le journal des modifications pour toutes les versions.