Une fois n’est pas coutume, je présenterai dans cet article un de mes plugins.
Divi Fly-in permet de créer des pop-ups de type fly-in, rapidement, avec la facilité d’utilisation du Divi Builder et la puissance du Theme Builder.
Je vais tout vous dire sur sa prise en main et vous dévoiler de nombreuses astuces pour que vous sachiez l’utiliser à 100% de ses capacités.

C’est quoi un fly-in ?

Commençons par expliquer ce terme qui doit être assez obscur pour la plupart d’entre vous.
Tout d’abord, pour être précis, nous ne devrions théoriquement pas parler ici de pop-ups mais de pop-ins. En effet, la pop-up est une fenêtre native du navigateur alors que la pop-in est un élément codé présent sur la page.

Mais bon, pop-up étant rentré dans le langage courant pour la majorité des utilisateurs, continuons à utiliser ce terme.

La pop-up peut donc prendre plusieurs formes, dont :

• la lightbox qui s’affiche devant le contenu
• le format inline qui apparait dans le contenu ou sous forme de promobar fixée en haut ou en bas de la page
• la welcome mat qui apparait en plein écran à l’affichage du site
• et bien sûr le fly-in (aussi appelé scrollbox) qui se place dans un angle inférieur de l’écran

Personnellement, j’aime le format fly-in pour 2 raisons :

• Il est moins intrusif que la pop-up classique
  En effet, les lightboxes ou encore les welcome mats sont généralement assez mal vues car elles dérangent l’utilisateur dans sa visite et peuvent s’avérer rapidement énervantes.
• Il a une surface d’affichage très correcte
  Après le fly-in, le format le plus discret mais qui reste néanmoins bien visible, est la promobar.
  Toutefois son format très allongé ne lui permet d’afficher que peu d’informations et il se fond parfois dans le design du site, perdant ainsi de sa visibilité.

En résumé, j’apprécie le fly-in pour la variété de contenus qu’il peut accueillir (textes, images, boutons, décompte, article, produit…) et sa bonne visibilité qui respecte le visiteur.

Pourquoi Divi Fly-in ?

Tout d’abord, je tiens à vous dire que lorsque je créé un plugin, je le fais en premier lieu pour mon utilisation personnelle.
Il vient avant tout répondre à un de mes besoins, qui s’avère généralement être aussi celui de très nombreux utilisateurs de Divi.

J’utilisais donc depuis un peu plus d’un an, sur plusieurs de mes sites, une ébauche de Divi Fly-in sous la forme de morceaux de code éparses.
Il était donc temps, surtout en cette période troublée qui nécessite d’afficher presque quotidiennement une information différente, de remettre mes idées au propre et d’améliorer les fonctionnalités pour concevoir un plugin facilement utilisable par tous.

Car la facilité d’utilisation est l’un de mes principaux leitmotiv. Un autre est le respect de l’univers de Divi.
Vous allez comprendre, dès que je serai rentré dans les détails du fonctionnement de Divi Fly-in, à quel point ma volonté est d’utiliser les possibilités offertes par Divi 4. Ceci afin de ne pas alourdir le plugin (et le site) avec du code qui aurait pu être évité.

Comment fonctionne Divi Fly-in ?

Créez votre premier fly-in

Comme je vous l’expliquais plus haut, Divi Fly-In utilise les fonctionnalités du Divi Builder et du Theme Builder.
Le Divi Builder sert à concevoir le fly-in et le Theme Builder à l’afficher sur les pages de son choix.

Il vous faut donc utiliser un pied de page global ou un corps de page global pour afficher le fly-in sur l’intégralité ou une sélection de pages du site.

Si le footer de votre site n’est pas conçu avec le Theme Builder, je vous expliquerai ensuite comment afficher le fly-in en utilisant un corps global.

Voyons tout d’abord le cas de figure le plus simple avec le pied de page global.

Commencez par éditer votre pied de page global pour ajoutez une section normale.
Vous pouvez y insérer une ligne d’une ou deux colonnes par exemple, selon vos besoins.

Si vous le souhaitez, vous pouvez déjà ajouter un peu de contenu au fly-in avec un module Texte par exemple, et changer la couleur de fond de la section pour mieux la visualiser.

Rendez-vous ensuite, dans l’onglet Avancé -> Classe CSS de la section pour y préciser la classe divi-flyin qui convertira la section en fly-in.
J’appelle cette classe, la classe mère car elle est à l’origine du fly-in.

Une fois la classe mère ajoutée à la section, vous pouvez voir que celle-ci à changé de taille et est venu se positionner en bas à droite de l’écran.
Si vous sauvegardez vos modifications et allez voir le résultat en front sur une page de votre site, vous constaterez également qu’un bouton pour fermer le fly-in est présent dans son angle supérieur gauche.

Ajoutez maintenant le contenu dont vous avez besoin.
Faites tout de même attention à ne pas trop en mettre pour ne pas avoir de souci de hauteur de contenu sur les plus petits écrans.

Pour info, le fly-in a une largeur fixe de 320px. Une dimension permettant de ne pas trop empiéter sur le contenu de la page.
Sur des écrans de largeur inférieure à 479px, le fly-in passe en largeur fluide pour occuper 90% de la largeur de l’écran.
Si besoin, vous pouvez ajuster les marges internes de la section et de la ligne.

Voici quelques exemples de contenu que peuvent accueillir des fly-ins.
Vous pouvez remarquer qu’il est par exemple possible utiliser des modules “suivez-nous”, “compte à rebours”… et même “blog” !
Laissez parler votre imagination, tout est possible !

Diverses astuces de personnalisation

Voici quelques conseils pour vous aider à créer au mieux vos fly-ins.

Vous pouvez utiliser toutes les options disponibles dans le Divi Builder pour styler une section : ombre portée, arrondis, bordures, dividers…

Paramétrez une animation de type diapo en choisissant une direction vers la gauche pour ajouter un effet de slide-in lors de l’apparition du fly-in.
Ainsi, à l’affichage de la page, le fly-in apparaitra depuis le bord droit de l’écran.

Vous souhaitez que votre fly-in ne s’affiche qu’après un délai de quelques secondes ? Ajoutez simplement une valeur de délai à l’animation.

Bon à savoir : un coup d’œil sous le capot

Par défaut, le fly-in est positionné à 40px du bas de la fenêtre.
Si, dans les options de Divi, le bouton de retour en haut de page est activé, alors la position du fly-in s’adapte automatiquement.

Quelle que soit l’épaisseur de la bordure de la section, le bouton pour fermer le fly-in sera toujours bien positionné.

Que se passe-t’il après avoir cliqué sur le bouton pour fermer le fly-in ?
Celui-ci sera masqué au visiteur pendant la durée de sa session de navigation. C’est-à-dire jusqu’à ce qu’il quitte son navigateur.

Notez que ce cookie ne stocke aucune information, il n’est donc pas concerné par le RGPD.

Si vous avez fermé le fly-in et souhaitez le faire réapparaitre sans quitter votre navigateur, il vous suffit d’effacer le cookie nommé dfi_cookie en vous rendant dans les outils de développement de votre navigateur, dans l’onglet “Stockage”. Puis clic droit sur le cookie et “supprimer dfi-cookie“.

Les classes optionnelles de Divi Fly-in

Nous avons donc vu que la classe mère divi-flyin permettait de convertir une section du Divi Builder en fly-in.

Sachez qu’il existe 2 classes optionnelles qui peuvent être ajoutées en complément de la classe mère :

• dfi-left : pour afficher le fly-in à gauche de l’écran
• dfi-scroll : pour que le fly-in n’apparaisse qu’après que le visiteur a fait défiler la page

Comment afficher Divi Fly-in ?

Comme je vous l’ai expliqué au début du chapitre précédent, l’utilisation du Theme Builder permet d’afficher un fly-in sur toutes les pages de son site.
Voyons maintenant comment créer un corps global si votre footer n’est pas créé avec le Theme Builder.
Je vous parlerai également des conditions d’affichage du ou des fly-ins.

Afficher le fly-in dans un modèle de corps global

Dans le Theme Builder, choisissez “Ajouter un corps global”.

Par défaut, une section normale est insérée. Ajoutez-y une ligne d’une seule colonne.

Enfin, insérez un module Publier un contenu.
Ce module, comme son nom l’indique accueillera le contenu de votre page ou article.

Il va maintenant falloir réinitialiser quelques paramètres pour que le contenu s’affiche correctement.

Dans les paramètres de la section

Rendez-vous dans Style -> Espacement -> Marge interne et précisez 0px pour chaque champ.

Dans les paramètres de la ligne

Allez dans Style -> Dimensionnement et précisez 100% pour les 2 champs “Largeur maximale”.

Descendez maintenant à la rubrique Espacement -> Marge interne pour inscrire 0px dans chaque champ.

Vous pouvez maintenant ajouter une nouvelle section pour créer votre fly-in.

Afficher un fly-in uniquement sur certaines pages

Parfois, nous avons besoin d’un affichage conditionnel du ou des fly-ins.
Par exemple, imaginons que vous souhaitez afficher un fly-in spécifique uniquement sur la page listant vos articles de blog et sur chacun des articles.

Commencez par créer un nouveau template.

Dans l’onglet “Utiliser sur”, cochez “Tous les articles” et “Blog” puis cliquez sur “Créer un modèle”.

Ensuite, comme expliqué plus haut, créez un modèle de corps global ou de footer global pour insérer votre fly-in.

Afficher des fly-ins différents selon les pages

Pour continuer avec les diverses conditions d’affichage de fly-ins, il est également possible de faire apparaitre un fly-in “A” sur certaines pages et un fly-in “B” sur d’autres pages.

Pour ce faire, après avoir créé un nouveau template avec les paramètres souhaités, choisissez “Désactiver global” pour le pied ou le corps de page personnalisé de ce template.
Vous n’avez plus qu’à éditer le pied ou le corps de page de ce template pour y ajouter votre nouveau fly-in.

Afficher un fly-in sur une seule page

Enfin, si vous souhaitez afficher un fly-in sur une page uniquement, nul besoin de passer par le Theme Builder.
Il vous suffit simplement d’éditer la page de votre choix avec le Divi Builder afin d’y ajouter la section qui sera convertie en fly-in.

Pour conclure

Voila, maintenant vous connaissez tous les détails de mon plugin Divi Fly-In.
Si vous avez été un·e lecteur·rice attentif·ve, j’espère que vous avez bien compris ma volonté de créer un outil des plus respectueux de l’univers Divi.

J’espère également que comme moi, le format fly-in vous a séduit et que Divi Fly-In sera votre prochain plugin pour afficher des informations sur vos sites.

Enfin, si vous souhaitez programmer l’affichage/masquage de vos fly-ins selon des dates précises, je vous conseille 2 plugins.
Ceux-ci pourront également vous servir pour d’autres éléments de votre site.

• Divi Display Logic de Sean Barton, qui ne propose que cette fonctionnalité
• Divi Supreme Pro de Divi Supreme (lire notre test) qui compte cette option parmi des dizaines d’autres

Divi Fly-In est vendu au prix de lancement de 20 €, jusqu’au 11 mai.
Les membres de notre support premium Odyssey bénéficient de 5 € de réduction supplémentaire.
Prix normal : 25 €.
Licence à vie et sans limite d’utilisation.

Partager