BlaBlaBlocks Popup

Description

Créez des fenêtres surgissantes dans l’éditeur de blocs WordPress

BlaBlaBlocks Popup est une extension WordPress puissante et légère qui vous permet de créer et gérer des fenêtres surgissantes dynamiques de façon fluide avec l’éditeur de blocs natif (Gutenberg).

Choisissez une mise en page de départ, modifiez son contenu dans l’éditeur de blocs natif, et contrôlez où, quand et comment la fenêtre surgissante s’affiche depuis des réglages dédiés.

Pourquoi choisir BlaBlaBlocks Popup ?

BlaBlaBlocks Popup associe une expérience d’édition familière aux API WordPress modernes. Le contenu des fenêtres surgissantes utilise l’éditeur de blocs, la gestion utilise DataViews et DataForm, et les interactions sur l’interface publique passent par l’API d’interactivité WordPress.

Points forts

• Édition native par blocs : créez le contenu des fenêtres surgissantes avec des blocs de base et des blocs tiers.
• Mises en page de départ : commencez avec une modale, un glissant, une barre flottante, une fenêtre surgissante plein écran ou une notification toast.
• Conditions d’affichage flexibles : ciblez l’ensemble du site, la page d’accueil, des publications ou pages sélectionnées et les archives.
• Déclencheurs multiples : ouvrez des fenêtres surgissantes au chargement de la page, au défilement, au nombre de clics, à l’inactivité, à l’intention de sortie ou via un sélecteur manuel.
• Règles d’affichage avancées : limitez les fenêtres surgissantes par pages vues, sessions, nombre d’affichages, référent, statut de connexion, rôle et appareil.
• Gestion moderne des fenêtres surgissantes : recherchez, filtrez, triez, dupliquez, mettez à la corbeille, restaurez et supprimez définitivement des fenêtres surgissantes depuis un écran DataViews.

Fonctionnalités clés

1. Édition native du contenu des fenêtres surgissantes

Chaque fenêtre surgissante est créée comme un contenu WordPress dédié avec prise en charge des révisions. Utilisez des titres, des paragraphes, des images, des boutons, des formulaires, des colonnes, des groupes et d’autres blocs directement dans l’éditeur.

2. Types de fenêtres surgissantes prêts à l’emploi

Choisissez une mise en page de départ lors de la création d’une fenêtre surgissante :

• Fenêtre surgissante modale
• Fenêtre surgissante glissante
• Barre flottante
• Fenêtre surgissante plein écran
• Toast/notification compacte

La mise en page sélectionnée constitue un point de départ utile tout en restant entièrement personnalisable.

3. Contrôles de mise en page et de style

Configurez la fenêtre surgissante depuis sa colonne latérale dans l’éditeur :

• Largeur, hauteur et position à l’écran
• Visibilité de la superposition et du bouton de fermeture
• Couleurs d’arrière-plan et de superposition
• Marge intérieure et marge extérieure
• Bordures et rayon de bordure
• Animations d’entrée et de sortie

4. Déclencheurs et ouverture manuelle

Ouvrez automatiquement une fenêtre surgissante en utilisant un délai au chargement de la page, la quantité de défilement, la direction de défilement, le défilement jusqu’à un élément, le nombre de clics, l’inactivité ou l’intention de sortie.

Pour un contrôle direct, ajoutez des sélecteurs CSS qui ouvrent la fenêtre surgissante depuis un lien, un bouton, un élément de navigation ou tout autre élément de page.

5. Conditions et règles d’audience

Choisissez où une fenêtre surgissante peut s’afficher et qui peut le voir. Les conditions prennent en charge le ciblage à l’échelle du site, de la page d’accueil, du contenu singulier et des archives. Les règles avancées peuvent limiter les affichages selon l’état du navigateur, le référent, le statut de connexion, les rôles et le type d’appareil.

6. API d’interactivité WordPress

L’ouverture, la fermeture, l’évaluation des déclencheurs et l’état de la fenêtre surgissante sur l’interface publique utilisent l’API d’interactivité WordPress. Les ressources ne sont chargées que lorsque la requête en cours comporte une fenêtre surgissante publiée éligible.

Comment créer une fenêtre surgissante

Étape 1 : ajouter une fenêtre surgissante

Ouvrez Fenêtres surgissantes dans le menu d’administration WordPress et cliquez sur Ajouter une fenêtre surgissante. Saisissez un titre pour créer un brouillon.

Étape 2 : choisir un type de fenêtre surgissante

Sélectionnez une mise en page modale, glissante, barre flottante, plein écran ou toast comme point de départ.

Étape 3 : concevoir le contenu

Ajoutez et organisez des blocs dans l’éditeur. Utilisez la colonne latérale de la fenêtre surgissante pour ajuster la mise en page, les couleurs, les espacements, les bordures et les animations.

Étape 4 : configurer les réglages d’affichage

Définissez les conditions, déclencheurs et règles avancées de la fenêtre surgissante depuis l’écran de gestion des fenêtres surgissantes.

Étape 5 : publier et tester

Publiez la fenêtre surgissante et testez ses déclencheurs, son comportement de fermeture, sa mise en page adaptative et son ciblage sur l’interface publique.

Cas d’utilisation courants

• Formulaires d’inscription par e-mail : présentez un formulaire d’abonnement ciblé après un délai ou un seuil de défilement.
• Annonces : affichez des lancements de produits, des mises à jour de service ou des avis importants.
• Promotions : affichez des offres limitées dans le temps et des appels à l’action.
• Notifications flottantes : gardez un message compact visible en haut ou en bas de la page.
• Messages de sortie : affichez une offre finale ou un rappel lorsqu’un visiteur ou une visiteuse montre une intention de sortie.
• Dialogues manuels : ouvrez des informations complémentaires depuis un bouton ou un lien à l’aide d’un sélecteur CSS.

Intégration et compatibilité

BlaBlaBlocks Popup est conçu pour :

• Thèmes basés sur des blocs et l’éditeur de site
• Thèmes classiques prenant en charge l’éditeur de blocs
• Blocs WordPress de base
• Blocs tiers qui génèrent un balisage de bloc standard
• Ciblage ordinateur, tablette et mobile

Dépannage

Une fenêtre surgissante ne s’ouvre pas

• Vérifiez que la fenêtre surgissante est publiée.
• Vérifiez que ses conditions d’affichage correspondent à la page actuelle.
• Vérifiez qu’au moins un déclencheur automatique est activé, ou utilisez un sélecteur manuel configuré.
• Vérifiez les limites d’affichage, les règles de connexion, les règles de rôle et le ciblage par appareil.

Un déclencheur manuel ne fonctionne pas

Vérifiez que le sélecteur configuré correspond à un élément de la page. Les sélecteurs de classe CSS commencent par un point, comme .open-newsletter, et les sélecteurs d’ID commencent par un dièse, comme #open-newsletter.

Les styles de fenêtre surgissante semblent différents sur l’interface publique

Les styles du thème ou des blocs peuvent affecter le contenu de la fenêtre surgissante. Inspectez le style en conflit et ajustez les contrôles de la fenêtre surgissante ou le CSS du thème si nécessaire.

Code source et contributions

BlaBlaBlocks Popup est un logiciel libre sous licence MIT.
Vous pouvez l’utiliser, le modifier et contribuer à son développement librement.

• Code source :
  https://github.com/lubusIN/blablablocks-popup

• Signaler un problème :
  https://github.com/lubusIN/blablablocks-fenêtre surgissante/issues