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

Otter is a Gutenberg Blocks page builder plugin that adds extra functionality to the WordPress Block Editor (also known as Gutenberg) for a better page-building experience without the need for traditional page builders like Elementor and Divi.

Quick Links 🔗

• Do you want to see Otter blocks in action before installing? SEE OTTER BLOCKS DEMO
• New to the Gutenberg Blocks ecosystem? Check out our article on GUTENBERG EXPLAINED
• Need any help with setup? Checkout our DOCUMENTATION
• Interested in Otter Pro? Here are more details about OTTER PRO

With Otter Blocks, You Get Access To

• 20+ extra blocks for Gutenberg
• Collection of Patterns
• Full-page Templates
• Visibility Conditions
• Custom CSS
• Animations
• Dynamic Content and more

For all blocks including third-party blocks present on your website.

The Custom CSS block feature makes it possible to directly customize the CSS properties of any Gutenberg block on the page, while the Animation feature makes it quick and easy to add animations to any block to enhance the appeal of your different page blocks and sections.

With the Visibility Conditions feature by Otter, you can set which conditions should be met for your chosen blocks to be displayed on the page.

Patterns Library, contains a range of different elements in a variety of styles to help you build great pages. All of your website’s most important areas are covered: headers, testimonials, pricing tables, sections, and more.

Checkout a quick overview of Otter Blocks

How Can Otter’s Gutenberg Blocks Help You? 🤔

A WordPress Gutenberg Blocks Plugin

Otter adds 26+ amazing and useful blocks to make page building in Gutenberg a breeze!

More than just blocks, you need advanced customization options to give you control over style and appearance. With Otter, you’ve got it all.

Every block has customization support to help you style your site according to your vision:

• Color controls for primary, accents, and backgrounds.
• Animation backing, bouncing, fading, flipping, rotating, sliding, rolling, light speed, and more at the click of a button.
• Typography controls from spacing to font choice.

Mobile Responsiveness of Otter Blocks

Create mobile-friendly designs with Otter’s built-in responsive settings. Each block can be tweaked to provide a consistent experience for mobile, tablet, and desktop.

A WordPress Gutenberg Block Conditions Plugin

Want to show certain blocks only when a user is Logged in or Logged Out? How about if they’re a customer of your store versus an editor for your blog or any other user role? With the Gutenberg Block Conditions feature available in Otter, it’s possible. Upgrade to the PRO version of Otter to unleash the power of more block conditions such as:

• URL Query String
• Date Range
• Day of the Week
• Time of the Day
• WooCommerce Products in Cart
• WooCommerce Total Spent
• WooCommerce Cart Total
• WooCommerce Categories
• WooCommerce Tags
• WooCommerce Attributes
• Cookie-based
• Et plus

A WordPress Gutenberg Blocks Animation Plugin

WOW, your website visitors with amazing animations that can be added to any block on the page. With over 50+ animations available to choose from; Otter makes it possible to add some extra flare to any post or page on your website

A WordPress Gutenberg Popup Plugin

Popups are one of the oldest lead-capturing and notice-conveying techniques on the web. With the Gutenberg Popup Block available in Otter, you can create popups made from any other block available in Gutenberg!

Fine-tune your popups by setting when they should appear and how they can be closed. With our popup block, you gain access to multiple triggers such as on load, on exit, on anchor click, and on scroll.

Additionally, you can design your popup with custom overlays to align with your brand identity and capture more attention. Check live demo

Global Defaults for Otter’s Blocks

Tired of always having to set the same options every time you add a block to the page? With Otter, you can set the default configuration for some of the most commonly used blocks like the Section Block, Icon Block, Advanced Heading, and more.

Blocks Available in Otter:

Accordion Gutenberg Block [FREE]

Use this block to create vertically stacked lists of content that can be revealed or hidden with the click of a button; more commonly known as Accordions. Check live demo

Advanced Heading Gutenberg Block [FREE]

The heading block you didn’t know you needed. This Otter block has all the functionality of the default heading block with a few other capabilities like the ability to change the font, highlight parts of the text, and more. Check live demo

AI Block [FREE]

Step inside the AI Block, your gateway to effortless content and form creation, all powered by AI. With the AI Content Generator, crafting text, dynamic headings, and insightful paragraphs is a breeze, while the AI Form Generator simplifies building forms. It’s your all-in-one solution for seamless work — everything you need with AI, neatly packed into a single block.

Button Group Gutenberg Block [FREE]

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

Countdown Gutenberg Block [FREE]

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

Contact Form Gutenberg Block [FREE]

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

Content Timeline Block [FREE]

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.

Countdown Block [FREE]

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

Circular Progress Block [FREE]

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

Flip Box Block [FREE]

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

Icon List Gutenberg Block [FREE]

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

Icon Gutenberg Block [FREE]

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

Lottie Animation Gutenberg Block [FREE]

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

Maps Gutenberg Block [FREE]

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

Progress Bar Block [FREE]

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

Posts Gutenberg Block [FREE]

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

Tabs Gutenberg Block [FREE]

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

Add to Cart Gutenberg Block [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.

Business Hours Gutenberg Block [PRO]

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

Live Search [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 ».

Modal [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.

Review Comparision Table [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 :

Ready to Import Patterns & Full-page Templates in 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.

Service Patterns

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

Testimonial Patterns

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

Pricing Patterns

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

Features Section Patterns

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

Call-to-action Section Patterns

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.

Get More Options in Otter Pro 🤩

WooCommerce Builder Blocks

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.

Who is Otter For? 👀

• Anyone looking to bring out the best features of the new Gutenberg Editor with useful and easy-to-use Gutenberg blocks.
• Anyone thinking of moving away from traditional page builders like Elementor and Divi Builder in favor of the new Gutenberg Block Editor.
• Anyone trying to build quick Gutenberg pages in record time.
• Anyone trying to hide/show Gutenberg blocks based on conditions like user logged in/out status.
• Anyone trying to add animations to Gutenberg blocks.

Let’s See Some Use Cases 🚀

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.

Become a Contributor 💁‍♂️

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

Useful Resources 📌

• Read more about WordPress on our blog.
• Interested in our other plugins? Take a look here.
• Get the most out of Otter Blocks with our helpful YouTube Tutorials Playlist.

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.