Posted inFlipbook Maker

Comment garantir une affichage en taille intégrale pour les flipbooks IA intégrés : un guide étape par étape

Nous sommes ravis de partager une amélioration significative de la qualité de viemise à jour pour les utilisateurs de laoutil AI Flipbook Maker. Dans le monde de l’édition numérique, la présentation est tout. Auparavant, les utilisateurs ont parfois rencontré des problèmes où les flipbooks intégrés apparaissaient partiellement coupés en raison des paramètres de hauteur par défaut du visualiseur. Nous sommes heureux d’annoncer que ce problème a été entièrement résolu.
enhance the default size of the generated flipbook to show the full image.

Avec la dernière mise à jour, les flipbooks intégrés apparaissent désormais en leurtaille intégrale par défaut. Cela garantit que aucun contenu n’est coupé et que vos publications numériques s’affichent proprement et exactement comme prévu sur votre site web ou blog. Ce guide vous guidera à utiliser cette nouvelle fonctionnalité et vous fournirales meilleures pratiques pour intégrer vosIAlivres générés par IA.

La mise à jour : qu’est-ce qui a changé ?

Avant de plonger dans le tutoriel, il est important de comprendre l’amélioration technique. Auparavant, le conteneur d’un flipbook intégré n’aurait pas pu s’ajuster dynamiquement au rapport d’aspect du livre généré, ce qui pouvait entraîner un aspect « coupé » où le bas de la page pouvait être caché.

La solution :

  • Ajustement automatique : Le cadre du flipbook s’ajuste maintenant automatiquement pour afficher tout le livre.
  • Plus de découpage : La logique mise à jour du code d’intégration garantit que le flipbook s’insère correctement dans le conteneur de votre site web sansredimensionnement manuel.
  • Finition professionnelle :Que vousconsultiez une histoire, un document d’entreprise ou uneprésentation, l’expérience est désormais cohérente et soignée.

Tutoriel étape par étape : création et intégration de votre flipbook

Suivez ces étapes pour créer un flipbook à l’aide de l’outil AI Flipbook Maker et l’intégrer parfaitement sur votre site.

Étape 1 : Accédez à l’outil AI Flipbook Maker

Accédez à l’outil AI Flipbook Maker. Cette plateforme vous permet de transformer vos idées brutes en livres numériques interactifs instantanément.

Étape 2 : Saisissez vos exigences

Pour générer votre contenu, fournissez les entrées nécessaires :

  1. Sujet : Indiquez le sujet principal de votre livre.
  2. Description: Ajoutez un contexte court ou des détails spécifiques que vous souhaitez inclure.
  3. Paramètres : Définissez le nombre de pages souhaité, la langue et le style artistique souhaité pour les illustrations.

Étape 3 : Générer et vérifier

Cliquez pour générer. L’IA créera le contenu et la mise en page. Vérifiez le flipbook pour vous assurer que le texte et les images répondent à vos attentes.

Étape 4 : Obtenir le code d’intégration

Une fois satisfait, recherchez les options Partager ou Intégrer options.

Remarque : Vous n’avez plus besoin de calculer manuellement les rapports d’aspect ou de forcer des paramètres de hauteur spécifiques pour éviter le recadrage. Le nouveau système gère cette validation pour vous.

Étape 5 : Placer le code sur votre site

Copiez le fragment HTML fourni et collez-le dans l’éditeur HTML de votre blog (WordPress, Wix, Squarespace, etc.) ou dans le code de votre site web personnalisé. Publiez la page pour voir le résultat.

Guides pour une intégration optimale

Bien que la mise à jour gère les aspects techniques liés aux dimensions, suivre ces recommandations garantit la meilleure expérience utilisateur :

  • Largeur du conteneur : Assurez-vous que le conteneur HTML (div) sur votre site web, où vous collez le code, est défini sur une largeur flexible (par exemple, 100 %). Le flipbook remplira la largeur disponible et ajustera automatiquement sa hauteur pour préserver le rapport d’aspect.
  • Adaptabilité mobile : Testez votre page intégrée sur un appareil mobile. La mise à jour en taille complète est particulièrement avantageuse ici, car elle empêche les navigateurs mobiles de couper les boutons de navigation situés en bas du flipbook.
  • Style minimal : Évitez d’ajouter overflow : masqué propriétés CSS au conteneur parent immédiat du livre interactif, car cela pourrait théoriquement entrer en conflit avec la nouvelle logique de redimensionnement automatique.

Exemples : Avant vs. Après

Pour visualiser l’impact de cette mise à jour, considérez les scénarios suivants :

Le scénario « Avant »

Extrait de code (comportement ancien) :
Un intégration pourrait avoir une hauteur fixe par défaut (par exemple, 500px). Si le livre généré était au format A4, les 20 % inférieurs de la page — souvent contenant les numéros de page ou le texte de pied de page — seraient coupés, obligeant l’utilisateur à faire défiler à l’intérieur de l’iframe.

Le scénario « Après » (actuel)

Comportement :
L’intégration détecte la taille du document. Si le livre nécessite 800px de hauteur pour s’afficher entièrement à la largeur actuelle, le cadre s’élargit automatiquement à 800px.

  • Résultat : Le lecteur voit la couverture complète, tout le texte et les flèches de navigation sans avoir à interagir avec les barres de défilement.
  • Avantage : Une intégration fluide qui semble faire partie intégrante de votre page web plutôt qu’une fenêtre restreinte.

Liste de vérification : Audit de vos intégrations de livres interactifs

Utilisez cette liste de vérification pour vous assurer que votre contenu intégré tire pleinement parti de la nouvelle mise à jour :

  • [ ] Réintégrer le contenu ancien : Si vous avez des anciens livres interactifs intégrés qui semblent coupés, essayez de rafraîchir le code d’intégration depuis l’outil pour appliquer la nouvelle logique de taille complète.
  • [ ] Vérifier la largeur du conteneur : Vérifiez que la mise en page de votre site web permet au moins 600 à 800px de largeur pour une lecture optimale.
  • [ ] Vérifier la visibilité complète : Chargez votre page et confirmez que le bas du livre interactif (y compris les numéros de page) est visible sans défilement.
  • [ ] Tester l’interaction : Cliquez sur les animations de changement de page pour vous assurer que le cadre reste stable pendant les transitions.
  • [ ] Audit mobile : Ouvrez la page sur un smartphone pour vous assurer que l’affichage en taille réelle affichage se réduit correctement pour les écrans verticaux.

En tirant parti de cette mise à jour, vous pouvez partager en toute confiance des histoires, des ressources éducatives et des documents professionnels, en sachant que votre public bénéficie de l’expérience de lecture de haute qualité qu’il mérite.