Transformez un PDF statique en flipbook à feuilleter et placez-le sur n’importe quelle page Elementor de WordPress. Ce tutoriel détaille la conversion, le code d’intégration, le widget HTML, le dimensionnement adaptatif, la protection par mot de passe et les solutions aux problèmes d’affichage les plus courants.
Vous avez créé une belle page dans Elementor, mais votre catalogue, votre brochure ou votre lookbook reste derrière un bouton « Télécharger le PDF » bien terne. La plupart des visiteurs ne cliquent jamais dessus. Un flipbook règle ce problème en affichant le document directement sur la page, avec un véritable effet de feuilletage, un zoom et une prise en charge des mobiles. Avec Flipbooks AI, vous pouvez convertir un PDF et le placer dans Elementor en une dizaine de minutes, sans installer la moindre extension WordPress supplémentaire.
Ce tutoriel présente les étapes exactes : préparer le fichier, créer le flipbook, copier le code d’intégration, le coller dans Elementor et le dimensionner pour l’ordinateur de bureau, la tablette et le téléphone. Vous y trouverez aussi une comparaison des trois façons d’ajouter un flipbook, un tableau de dépannage et des exemples concrets pour différents types d’entreprises.
Un lien vers un PDF éloigne les visiteurs de votre page. Ils attendent un téléchargement, ouvrent une visionneuse séparée, pincent et font défiler l’écran sur leur téléphone, et partent souvent. Un flipbook garde le lecteur sur votre site et présente le contenu comme le ferait une publication imprimée.
Voici ce qui change lorsque vous faites le choix du flipbook :
💡 Conseil pro : Placez le flipbook au-dessus de la ligne de flottaison sur les pages construites autour d’un seul document, comme une page de destination de catalogue. Sur les pages plus longues, placez-le après une courte introduction pour que le lecteur sache ce qu’il s’apprête à ouvrir.
| Fonctionnalité | Lien de téléchargement PDF | Intégration de flipbook |
|---|---|---|
| S’ouvre sur votre page | Non | Oui |
| Effet de feuilletage | Non | Oui |
| Adapté aux mobiles | Irrégulier | Oui, automatique |
| Protection par mot de passe | Pas nativement | Oui |
| Statistiques de visite | Non | Oui (offre Professional) |
| Image de marque personnalisable | Non | Oui |
Il n’est pas nécessaire d’avoir des compétences en développement. Rassemblez d’abord ces éléments :
Un fichier source propre donne un flipbook propre. Avant d’importer, vérifiez trois points. D’abord, exportez à une résolution raisonnable : 150 DPI suffisent pour les écrans et gardent un chargement rapide. Ensuite, assurez-vous que toutes les pages ont la même taille, car des tailles mélangées provoquent des espacements irréguliers. Enfin, gardez un fichier raisonnablement léger. Si votre PDF dépasse 50 Mo, compressez les images avant la conversion.
⚠️ Attention : Évitez d’importer un PDF dont le texte courant est minuscule sur de grandes pages. Sur un téléphone, un petit texte reste difficile à lire, même avec le zoom. Visez un corps de texte d’au moins 10 points.
La conversion est la partie la plus rapide. Le Convertisseur PDF vers flipbook s’en charge en quelques clics.
Prenez quelques minutes ici, car votre flipbook représentera votre marque sur la page.
✅ Bonne pratique : Faites correspondre l’arrière-plan du flipbook à celui de la section Elementor qui le contient. L’intégration semblera alors faire partie de la page, au lieu d’une boîte posée par-dessus.
Avant de copier quoi que ce soit, décidez qui peut voir la publication. Les flipbooks publics conviennent parfaitement aux catalogues et aux cartes. Pour les tarifs ou les propositions commerciales, activez la protection par mot de passe. Les liens directs restent également disponibles, ce qui vous permet de partager le même flipbook dans des e-mails et des publications sur les réseaux sociaux.
Une fois le flipbook conforme à vos attentes, ouvrez le menu de partage et choisissez l’option d’intégration. Vous obtenez un court extrait HTML, généralement une iframe. Copiez-le en entier.
L’outil Intégrer un flipbook sur un site web détaille les options, y compris le choix entre un dimensionnement fixe ou fluide.
| Option de taille | Idéale pour | Comportement |
|---|---|---|
| Largeur et hauteur fixes | Colonnes latérales étroites, petites sections | Garde la même taille en pixels |
| Largeur fluide, hauteur fixe | Sections pleine largeur | S’étire jusqu’au conteneur |
| Fluide avec rapport d’aspect | La plupart des pages | S’adapte à l’écran et conserve sa forme |
Pour presque toutes les mises en page Elementor, choisissez l’option fluide avec un rapport d’aspect fixe. Elle s’adapte en douceur sur tous les appareils.
Passez maintenant à WordPress. Beaucoup de gens s’attendent à quelque chose de compliqué, alors qu’il s’agit seulement d’un glisser-déposer et d’un collage.
Voilà. Le flipbook apparaît dans l’aperçu de l’éditeur et sur la page en ligne.
💡 Conseil pro : Si votre site utilise Elementor Pro, vous pouvez aussi glisser le même widget HTML dans une fenêtre contextuelle, un modèle ou une mise en page Theme Builder. Vous pourrez ainsi afficher le flipbook dans une fenêtre superposée lorsqu’une personne clique sur « Voir le catalogue ».
Vous avez plusieurs options. Voici leur comparaison.
| Méthode | Temps de configuration | Extension supplémentaire | Contrôle de la mise en page | Idéale pour |
|---|---|---|---|---|
| Widget HTML avec code d’intégration | 5 minutes | Non | Élevé | Presque tous les sites |
| Bloc shortcode WordPress | 10 minutes | Souvent | Moyen | Sites dotés d’une extension de flipbook |
| Bouton de lien direct | 2 minutes | Non | Faible | Partage rapide uniquement |
Le widget HTML convient le mieux à la plupart des utilisateurs. Il allège votre site, évite les conflits entre extensions et vous donne un contrôle total sur les espacements.
Plus de la moitié des visites web proviennent de téléphones : testez donc avant de publier. Elementor vous permet de passer de l’affichage ordinateur de bureau à l’affichage tablette et mobile en bas de l’éditeur.
Sélectionnez la section qui contient le widget HTML et définissez ces valeurs :
Si le flipbook paraît à l’étroit sur mobile, augmentez la hauteur minimale de la section plutôt que de modifier le code d’intégration. Ainsi, l’extrait reste propre et facile à remplacer plus tard.
Pour un effet spectaculaire, réglez la section sur Pleine largeur et supprimez ses marges intérieures. Le flipbook occupe alors tout l’écran, ce qui convient particulièrement bien aux magazines, aux lookbooks et aux rapports annuels. Ajoutez un titre et une courte phrase au-dessus pour que la page reste guidée.
Des entreprises très différentes utilisent la même méthode pour des objectifs très différents.
Un propriétaire de café exporte la carte de la semaine en PDF, l’importe et l’intègre sur une seule page « Carte ». Quand les prix changent, il importe le nouveau PDF et la page se met à jour sans aucune modification dans Elementor. Le Créateur de flipbook de carte de restaurant a été conçu précisément pour cela.
Une boutique publie un catalogue de saison avec des liens produits cliquables. Les clients feuillettent, tapent sur un article et arrivent sur la page du produit. Essayez le Générateur de catalogue produit pour cette configuration.
Les créatifs présentent leur portfolio sous forme de flipbook sur leur page d’accueil, plutôt que dans une grille de galerie. L’outil Portfolio photo garde nettes les grandes images, tout en laissant les pages se charger rapidement.
Les agents intègrent une brochure de bien sur chaque fiche de bien. Les hôtels placent une brochure de saison sur la page de réservation. Les deux peuvent utiliser le Créateur de brochures immobilières ou le Créateur de brochures d'hôtel.
| Type de page | Document | Outil suggéré |
|---|---|---|
| Carte | Carte de restaurant ou de spa | Créateur de flipbook de carte de restaurant |
| Boutique | Catalogue produits | Générateur de catalogue produit |
| À propos | Rapport annuel | Créateur de rapports annuels |
| Portfolio | Travaux photo ou design | Créateur de flipbooks de portfolio |
| Blog | Magazine ou newsletter | Créateur de flipbooks de magazine |
Les pages publiques ne sont pas le seul cas d’usage. Beaucoup de sites doivent limiter les personnes qui peuvent lire un document, et veulent savoir qui l’ouvre réellement.
Activez un mot de passe dans les paramètres du flipbook avant de copier le code d’intégration. Les visiteurs verront une invite de mot de passe dans la zone intégrée. C’est utile pour les tarifs de gros, les propositions commerciales et les manuels du personnel. Le reste de votre page Elementor reste public, vous pouvez donc toujours présenter l’offre et expliquer comment demander l’accès.
Avec l’offre Professional, vous pouvez voir combien de personnes ont ouvert votre flipbook, quelles pages elles ont consultées et combien de temps elles sont restées. Vous pouvez aussi recueillir les coordonnées d’un lecteur avant qu’il ne dépasse les premières pages. Comparez les options sur la page des tarifs pour choisir l’offre qui vous convient.
| Fonctionnalité de l’offre | Essai gratuit | Standard | Professional |
|---|---|---|---|
| Pas de filigrane | Oui | Oui | Oui |
| Flipbooks illimités | Non | Oui | Oui |
| Protection par mot de passe | Limitée | Oui | Oui |
| Statistiques | Non | Non | Oui |
| Génération de prospects | Non | Non | Oui |
| Téléchargements hors ligne | Non | Oui | Oui |
💡 Conseil pro : Ne demandez une adresse e-mail que pour les documents à forte valeur, comme le rapport d’un acheteur. Pour les cartes et les brochures, gardez une lecture libre.
La plupart des problèmes ont des causes simples. Commencez par ce tableau.
| Problème | Cause probable | Solution |
|---|---|---|
| Le flipbook apparaît comme un espace vide | Code collé dans un widget Éditeur de texte | Déplacez-le dans le widget HTML |
| L’intégration est coupée | La largeur du conteneur est trop petite | Réglez la section sur Pleine largeur ou augmentez la largeur du contenu |
| La page paraît trop courte sur mobile | Hauteur fixe dans l’intégration | Passez à un dimensionnement fluide avec un rapport d’aspect |
| L’ancienne version s’affiche encore | Cache du navigateur ou du site | Videz le cache WordPress et actualisez la page |
| L’iframe disparaît à l’enregistrement | Extension de sécurité qui bloque les iframes | Autorisez le domaine du flipbook dans les paramètres de l’extension |
| Chargement lent de la page | Plusieurs flipbooks sur une même page | Gardez-en un seul par page ou utilisez une fenêtre superposée |
Si vous avez modifié le flipbook et que la page affiche toujours l’ancienne version, la cause est presque toujours le cache. Videz le cache dans votre extension de mise en cache, dans Elementor sous Outils > Régénérer le CSS et les données, puis dans votre navigateur. Rechargez ensuite la page.
Un flipbook est un élément lourd comparé à un texte simple. Placez-le plus bas sur les pages qui contiennent déjà beaucoup d’images, et évitez d’empiler plusieurs intégrations. Si vous devez présenter plusieurs documents, créez une grille simple de couvertures et ouvrez chaque flipbook sur sa propre page ou dans une fenêtre superposée.
Parcourez une dernière fois cette liste :
Ajouter un flipbook à Elementor demande un seul import, un seul extrait copié et un seul widget HTML. Ensuite, chaque mise à jour se résume à remplacer le PDF.
Prêt à créer votre premier flipbook ? Commencer gratuitement sur Flipbooks AI. Parcourez tous les outils et modèles disponibles pour trouver le format adapté à votre document, ou comparez les offres pour choisir celle qui vous convient. Une fois que vous avez fait votre choix, vous pouvez vous connecter et accéder directement aux tarifs.
Choisissez votre langue
