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

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 🔗

• Souhaitez-vous voir le fonctionnement d’Otter Blocks avant de l’installer ? Voir la démo d’Otter Blocks
• Vous découvrez l’écosystème des blocs Gutenberg ? Consultez notre article sur l’explication de Gutenberg
• Besoin d’aide pour la configuration ? Consultez notre documentation
• Otter Pro vous intéresse ? Voici plus d’informations sur Otter Pro

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.

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]

Découvrez le bloc IA, votre passerelle vers la création facile de contenus et de formulaires, le tout grâce à l’intelligence artificielle. Avec le générateur de contenu IA, rédiger du texte, créer des titres dynamiques et des paragraphes pertinents est un jeu d’enfant, tandis que le générateur de formulaires IA simplifie la création de formulaires. C’est votre solution tout-en-un pour un travail fluide : tout ce dont vous avez besoin en matière d’IA, soigneusement regroupé dans un unique bloc.

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.

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.

Compositions de service

Organisez clairement vos services grâce à des sections qui permettent de garder votre page bien ordonnée tout en offrant des informations détaillées à la demande. Voir la démo en direct

Compositions de témoignages

Organisez clairement vos services grâce à des sections qui permettent de garder votre page bien ordonnée tout en offrant des informations détaillées à la demande. Voir la démo en direct

Compositions de tarification

Personnalisez vos tableaux de prix grâce à des compositions de mise en page polyvalents qui améliorent la lisibilité et l’attrait, adaptés à tout modèle commercial. Consultez la démo en direct

Compositions de section de fonctionnalités

Présentez en détail les fonctionnalités de vos produits ou services en utilisant des mises en page claires et organisées qui facilitent la compréhension d’informations complexes. Voir la démo en direct

Compositions de section d’appel à l’action

Stimulez les conversions grâce à des sections d’appel à l’action convaincantes, conçues pour attirer l’attention et inciter à une réponse immédiate. Voir la démo en direct

📌 Découvrez une démonstration en direct de toutes les compositions disponibles en cliquant ici.

📌 Découvrez une démonstration en direct de tous les modèles pleine page disponibles en cliquant ici.

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 📌

• Découvrez-en davantage sur WordPress sur notre blog.
• Nos autres extensions vous intéressent ? Jetez-y un œil ici.
• Tirez le meilleur parti d’Otter Blocks grâce à notre liste de lecture de tutoriels YouTube .

L’extension utilise le service derrière api.themeisle.com pour accéder à la liste des compositions, aux prompts d’IA et à l’intégration. Aucun compte n’est nécessaire pour accéder à la collection de modèles du service et la politique de confidentialité se trouve ici.