Comment utiliser HtmlDrag : importer, modifier, affiner et exporter du HTML

Ce guide suit le flux de travail réel, du matériel de départ au résultat HTML fini. Découvrez comment importer une page existante, capturer une URL publique, utiliser Affinage IA, transformer les fichiers pris en charge en HTML modifiable, apporter des modifications visuelles et enregistrer, partager ou exporter votre travail.

1. Apportez du contenu dans HtmlDrag

Choisissez le chemin de départ qui correspond au matériel que vous possédez déjà. Importer un HTML et Coller le code ouvrent une page existante pour l'édition visuelle ; Dupliquer la page capture une page Web publique ; Affinage IA effectue des modifications ciblées sur une page importée ; Fichier vers HTML transforme les documents et images pris en charge en un brouillon HTML modifiable.

1.1 Espace de travail à domicile

L'espace de travail d'accueil conserve les principaux crédits de départ : Éditeur HTML pour le HTML existant, Affinage IA pour les modifications ciblées d'une page importée et Fichier vers HTML pour générer une page modifiable à partir du matériel source. Choisissez l'entrée qui correspond à votre point de départ, puis continuez dans l'éditeur ou dans l'espace de travail d'aperçu.

1.2 Dupliquer la page

Dupliquer la page capture une page Web publique et transforme le résultat en un projet modifiable. C'est utile lorsque vous disposez d'une page de référence en direct mais que vous n'avez pas son fichier HTML d'origine.

Entrez une URL publique

Ouvrez la Dupliquer la page, collez une adresse publique http:// ou https://, puis cliquez sur Cloner. Les adresses de réseau privé, les chemins de fichiers locaux et les pages nécessitant une connexion privée ne sont pas pris en charge.

Dupliquer la page : collez une adresse de page Web publique et démarrez un clonage

Examinez la page capturée

Une fois la capture terminée, examinez la page dans l'espace de travail d'aperçu ou d'éditeur. Les ressources externes, les images protégées ou le contenu JavaScript uniquement peuvent ne pas être reproduits exactement ; si le résultat est incomplet, collez le HTML rendu ou téléchargez le HTML original à la place.

1.3 Importer un HTML

Utilisez Importer un HTML lorsque vous disposez déjà d'un fichier .html ou .htm et que vous souhaitez apporter des modifications visuelles sans reconstruire la page à partir de zéro.

Sélectionnez le fichier HTML existant

Choisissez Importer un HTML, puis cliquez ou faites glisser un fichier HTML dans la zone de téléchargement. La page source reste le point de départ pour l'éditeur ; HtmlDrag ne transforme pas la page en une capture d'écran statique.

Importer un HTML : sélectionnez ou faites glisser un fichier .html ou .htm existant

Vérifiez le résultat importé

Après le contrôle de sécurité et l'étape d'analyse, ouvrez l'aperçu ou l'éditeur et vérifiez la mise en page, le texte, les images, les liens et les ressources externes avant de les modifier.

1.4 Coller le code

Utilisez Coller le code lorsque le code HTML se trouve dans un assistant de code, un éditeur local, une messagerie électronique ou un autre onglet de navigateur.

Collez le code HTML rendu

Collez le code HTML complet dans la zone de code, y compris la structure et les styles nécessaires à la page, puis cliquez sur Ouvrir l'éditeur. Si la page a été générée par un outil d'IA, collez la version que vous souhaitez affiner visuellement plutôt qu'une description de la page.

Coller le code : insérez le code source HTML et ouvrez-le dans l'éditeur

Consulter les ressources et les avis de sécurité

HtmlDrag vérifie le contenu importé avant de l'ouvrir. Examinez tout avertissement concernant les scripts, les ressources locales, les polices externes ou les intégrations bloquées, et confirmez que la page semble toujours correcte dans l'éditeur.

1.5 Affinage IA ciblé

Affinage IA permet de modifier une page existante avec une instruction ciblée. Commencez à partir d'une page HTML téléchargée, d'un code collé ou d'une URL capturée, puis indiquez à l'IA ce qu'elle doit modifier sans lui demander de reconstruire des parties non liées de la page.

Affinage IA : choisissez une page existante comme source pour une modification ciblée

Ouvrir l'espace de travail de raffinement

Choisissez l’entrée Affinage IA et attendez que l’aperçu de la page se charge. L'espace de travail conserve la zone d'instructions à côté de la page afin que vous puissiez sélectionner le contenu exact qui nécessite votre attention.

Affinage IA : la page sélectionnée est en cours de traitement

Sélectionnez la portée du changement

Utilisez Cliquez pour sélectionner pour des éléments individuels ou Sélection de zone pour une région. Vous pouvez également passer en mode plein écran lorsque la page a besoin de plus d'espace pour la sélection. Décrivez ensuite la modification demandée dans la zone d'invite, comme la révision de la copie sélectionnée, le remplacement d'une image ou l'ajustement d'une zone visuelle ciblée.

Affinage IA : marquez les éléments que l'instruction doit affecter

Vérifier et continuer la modification

Une fois le résultat prêt, comparez l'aperçu mis à jour avec la page d'origine. Si la modification est correcte, ouvrez-la dans l'éditeur pour d'autres modifications visuelles ; si elle n'est pas assez précise, réduisez la sélection ou réécrivez l'instruction au lieu de modifier des éléments sans rapport.

Affinage IA : examinez le résultat, puis ouvrez-le dans l'éditeur ou dans un aperçu

1.6 Fichier vers HTML modifiable

Fichier vers HTML crée une page HTML modifiable à partir du matériel source. Ceci est utile lorsque le point de départ est un document PDF, Word, une présentation PPT/PPTX, une feuille de calcul Excel/XLSX, un fichier CSV, Markdown ou texte, ou une image plutôt qu'un fichier HTML existant.

Fichier vers HTML : démarrez à partir d'un document, d'une feuille de calcul, d'une présentation ou d'une image

Importez le fichier source

Ouvrez Fichier vers HTML, joignez le fichier source et ajoutez une courte instruction décrivant ce que vous souhaitez créer. L'invite peut spécifier l'objectif de la page, le public, le ton, la structure ou l'orientation visuelle.

Fichier vers HTML : joignez un fichier source et décrivez la page souhaitée

Attendez pendant que le contenu est organisé

HtmlDrag lit d'abord le matériel source, identifie sa hiérarchie de contenu et planifie une mise en page. Le traitement des documents, tableaux, diapositives et images longs peut prendre différentes durées.

Fichier vers HTML : la source est en cours d'assemblage dans une page HTML

Fichier vers HTML : le système organise la hiérarchie, la mise en page et les composants

Vérifier le résultat modifiable

Lorsque la page est prête, examinez l'aperçu et choisissez Affiner avec l’IA, Ouvrir dans l'éditeur, Partager ou Importer un HTML selon vos besoins. Le résultat est une page HTML modifiable qui peut continuer via le même flux de travail d'édition visuelle.

Fichier vers HTML : la page HTML générée est prête à être révisée et modifiée

2. Capacités principales de l'éditeur visuel

Le cœur de HtmlDrag est un puissant éditeur WYSIWYG qui vous permet de travailler directement dans un véritable environnement HTML, éliminant ainsi le besoin d'édition de code.

2.1 Présentation de l'interface de l'éditeur

L'éditeur visuel combine un canevas, une navigation, un panneau de configuration de droite et des actions d'enregistrement ou d'exportation. L'élément sélectionné est décrit sur le canevas, tandis que le panneau de droite expose les commandes qui s'appliquent à la sélection actuelle.

Espace de travail de l'éditeur visuel : sélectionnez un élément, ajustez-le et enregistrez ou exportez le projet

Navigation à gauche et historique

La navigation de gauche bascule entre l'espace de travail principal et les zones de travail enregistrées. Utilisez-le pour revenir aux crédits d'entrée à domicile ou ouvrir un projet existant.

Zone de canevas centrale

Le canevas affiche la page HTML importée ou générée. Sélectionnez directement les éléments, utilisez les outils de sélection lorsque la page est complexe et utilisez les commandes de zoom ou plein écran lorsque vous avez besoin de plus d'espace.

Panneau de droite (Edition / Composants / Calques / Bibliothèque)

Le panneau de droite contient les commandes permettant de modifier l'élément sélectionné, d'insérer des composants, de localiser des éléments dans la liste des calques et de réutiliser les composants enregistrés de la bibliothèque.

Actions supérieures et inférieures

La zone supérieure fournit le titre du projet, le partage, l'image et les actions d'exportation HTML. Les commandes du bas fournissent des actions de prévisualisation, de restauration, d'actualisation et d'enregistrement de la version.

2.2 Opérations de base et sélection

L'éditeur prend en charge la sélection directe, la sélection de zones, la révision en plein écran et l'édition ciblée. Commencez par la plus petite sélection couvrant la modification que vous souhaitez apporter.

Vue sélection : examinez les éléments sélectionnés avant d'appliquer une modification ciblée

Reconnaissance des éléments

Utilisez Cliquez pour sélectionner pour sélectionner un élément sur la page. L'éditeur décrit l'élément et affiche sa balise ou son contenu dans l'état de sélection.

Sélection de zone et plein écran

Utilisez la Sélection de zone lorsque plusieurs éléments proches appartiennent à la même région visuelle. Utilisez le Plein écran lorsque la page a besoin de plus d'espace pour sélectionner, réviser ou affiner une mise en page complexe.

Sélection plein écran : travaillez avec plus d'espace sur des pages complexes

Mode glisser et mode édition

Utilisez le mode glisser pour repositionner un élément sélectionné et le mode édition pour modifier le texte ou le contenu de l'élément pris en charge. Les contrôles de droite sont mis à jour en fonction de la sélection actuelle.

Verrouiller, masquer et supprimer des éléments

Utilisez les commandes d'élément ou le menu contextuel pour verrouiller un élément contre toute modification accidentelle, le masquer lors de la révision de la mise en page ou le supprimer du code HTML actuel. Confirmez la sélection avant de supprimer ; utilisez Annuler ou Restaurer lorsque vous devez revenir à un état antérieur.

Menu contextuel

Cliquez avec le bouton droit sur un élément sélectionné pour accéder à des actions rapides telles que copier, coller, ajouter un élément à la bibliothèque, modifier des liens, effectuer des opérations sur les calques, verrouiller, masquer et supprimer.

Sélection multiple

Utilisez la sélection multiple lorsque plusieurs éléments doivent être révisés ou ajustés ensemble. Vérifiez la liste des éléments sélectionnés avant d'appliquer une modification et supprimez un élément de la sélection s'il ne doit pas être affecté.

2.3 Raccourcis du canevas

La maîtrise des raccourcis clavier peut améliorer considérablement votre efficacité d'édition. Voici les principaux raccourcis pris en charge dans la zone canevas :

2.4 Panneau de droite - Onglet Modifier

L'onglet "Modifier" est la zone la plus fréquemment utilisée, offrant des basculements de mode et de riches outils de réglage de style. Après avoir sélectionné un élément, le panneau affiche intelligemment les options d'édition en fonction du type d'élément.

Onglet Modifier : basculements de mode et outils de style

Basculements de mode

La partie supérieure du panneau fournit quatre commutateurs de mode pour contrôler le comportement d'interaction de l'éditeur. Chaque bascule peut être activée ou désactivée indépendamment, avec une notification de message indiquant l'état actuel.

Conseil : La navigation des liens est désactivée par défaut pendant l’édition afin de permettre la modification des composants. Pour suivre les liens, activez l’interrupteur « Navigation des liens » dans le panneau Modifier. La soumission des formulaires est également bloquée en mode édition afin de protéger votre contenu.

Style de texte

Après avoir sélectionné un élément de texte ou entré en mode édition, le panneau affiche des outils de style de texte complets avec les options de formatage suivantes :

Style de texte : police, taille, paramètres de couleur

Style d'élément

Après avoir sélectionné un élément, utilisez les outils de style d'élément pour ajuster son apparence :

Style d'image

Après avoir sélectionné un élément d'image, ajustez les options d'affichage et remplacez l'image :

Style de tableau

Lorsqu'un tableau ou une cellule de tableau est sélectionné, des outils d'édition de tableau dédiés deviennent disponibles. Pour des instructions détaillées, consultez 4.10 Modification de table.

Style de tableau : opérations sur les lignes/colonnes, bordures et paramètres de cellule

Édition de lien

Ajoutez des liens de navigation en un clic à n'importe quel élément ou modifiez les liens existants :

Outils d'alignement (sélection multiple)

Lorsque plusieurs éléments sont sélectionnés, le panneau affiche des outils d'alignement et de distribution pour vous aider à organiser rapidement la disposition des éléments :

2.5 Panneau de droite - Onglet Composants

L'onglet « Composants » fournit des options d'insertion rapide pour différents types d'éléments, vous aidant ainsi à ajouter rapidement du nouveau contenu au canevas. Cliquez sur un bouton pour insérer le composant correspondant.

Onglet Composants : Insérez divers éléments en un seul clic

2.6 Panneau de droite - Onglet Calques (arborescence DOM)

L'onglet « Couches » fournit une vue en liste de tous les éléments modifiables sur le canevas, prenant en charge le filtrage, les opérations par lots et le positionnement précis : un outil puissant pour gérer les éléments de page complexes.

Onglet Calques : gestion des calques et opérations par lots

Liste des cartes d'éléments

Le panneau affiche tous les éléments gérables sous forme de cartes. Chaque carte affiche le type de balise de l'élément (par exemple, DIV, IMG, SPAN) et le niveau de couche, avec des éléments de texte affichant un aperçu du contenu. Les éléments de couche décorative sont marqués d'un badge « Décoratif ». Les icônes de verrouillage/déverrouillage rapide et de masquage/affichage apparaissent sur le côté droit de chaque carte.

Options de filtrage

Cliquez sur le bouton Filtrer pour filtrer la liste par état d'élément, avec les options suivantes :

Opérations par lots

Après avoir sélectionné plusieurs éléments dans la liste des cartes, utilisez les boutons d'opération par lots pour un traitement unifié :

Bascule de précision

L'onglet Calques fournit une bascule de précision pour contrôler la précision de la reconnaissance des éléments :

Cliquez sur la carte pour localiser

Cliquez sur n’importe quelle carte d’élément pour faire défiler automatiquement le canevas et mettre en surbrillance l’élément correspondant, ce qui facilite la localisation rapide de composants spécifiques sur la page. Ceci est particulièrement utile lorsque vous travaillez avec des mises en page complexes ou en couches.

2.7 Panneau de droite - Onglet Bibliothèque (Favoris)

L'onglet "Bibliothèque" est votre bibliothèque de composants personnelle dans laquelle vous pouvez enregistrer des éléments ou des composants fréquemment utilisés pour les réutiliser dans différents projets, augmentant ainsi votre efficacité créative.

Onglet Bibliothèque : Bibliothèque de composants personnels

Liste des composants favoris

Le panneau affiche tous vos composants enregistrés sous forme de cartes, chacune affichant une vignette et un nom. Les vignettes sont générées automatiquement lors de l'enregistrement ; les composants sans nom s'affichent comme "Sans titre".

Rechercher des favoris

Utilisez la zone de recherche pour rechercher rapidement les composants enregistrés par nom. La liste est filtrée en temps réel au fur et à mesure que vous tapez.

Insérer un composant favori

Cliquez sur le bouton "Insérer" sur une carte de bibliothèque pour ajouter ce composant au canevas actuel. Les composants insérés peuvent être modifiés et ajustés normalement.

Renommer / Supprimer les favoris

Chaque carte de bibliothèque propose les options « Renommer » et « Supprimer ». Renommer les composants permet de les retrouver plus facilement ultérieurement ; la suppression supprime définitivement le composant enregistré ; à utiliser avec prudence.

Comment ajouter à la bibliothèque

Sélectionnez n'importe quel élément sur le canevas, puis choisissez « Ajouter à la bibliothèque » dans le menu contextuel pour enregistrer cet élément et ses enfants en tant que composant. Une confirmation « Ajouté à la bibliothèque » apparaît en cas de succès.

2.8 Menu contextuel

Un clic droit sur un élément sélectionné ouvre le menu contextuel, offrant un accès rapide aux actions courantes. Le contenu du menu s'ajuste dynamiquement en fonction du type d'élément sélectionné.

Menu contextuel : Accès rapide aux actions courantes

Menu spécifique à la table

Lorsque vous cliquez avec le bouton droit sur une cellule du tableau, le menu affiche des opérations supplémentaires spécifiques au tableau :

2.9 Modification des tableaux

Lorsqu'un tableau ou une cellule de tableau est sélectionné, le panneau de droite affiche des outils d'édition de tableau dédiés avec des fonctionnalités complètes de style de tableau et d'ajustement de la structure.

Édition de tableau : opérations sur les lignes/colonnes et paramètres de style

Opérations sur les lignes et les colonnes

La section « Lignes et colonnes » du panneau de l'éditeur de tableau fournit :

Fusionner/diviser des cellules

Après avoir sélectionné plusieurs cellules adjacentes, utilisez « Fusionner les cellules » pour les combiner en une seule. Pour les cellules fusionnées, utilisez « Split Cell » pour les restaurer aux multiples cellules d'origine.

Alignement des cellules

Définissez l'alignement du contenu des cellules en deux dimensions :

Style de bordure

Personnalisez l'apparence de la bordure du tableau, notamment :

Cliquez sur "Appliquer" pour enregistrer les modifications.

Fond de cellule

Définissez la couleur d'arrière-plan des cellules à l'aide du sélecteur de couleurs, idéal pour mettre en évidence les en-têtes ou les lignes de données importantes.

2.10 Contrôle du zoom et préréglages de fenêtre

Le contrôleur de zoom situé au bas du canevas permet de régler le zoom et la taille de la fenêtre d'affichage, vous aidant ainsi à prévisualiser votre travail sur différentes tailles d'appareil.

Contrôle du zoom : ajustez le zoom du canevas et la taille de la fenêtre

Zoom avant/Zoom arrière/Réinitialiser

Utilisez les boutons « + » et « - » pour effectuer un zoom avant ou arrière sur la vue du canevas, ou maintenez Ctrl/Cmd + la molette de la souris pour zoomer rapidement. Cliquez sur le pourcentage pour réinitialiser le zoom par défaut. Maintenez Espace + faites glisser pour déplacer la toile.

Préréglages de taille de fenêtre

Cliquez sur le sélecteur de fenêtre pour basculer entre les tailles d'aperçu, en simulant l'affichage sur différents appareils :

Aperçu des correctifs

Pour les pages HTML présentant des structures particulières, trois correctifs de prévisualisation sont disponibles pour optimiser l'affichage. L'activation ou la désactivation des correctifs enregistrera et actualisera automatiquement l'aperçu :

Conseil : Si les correctifs n’ont pas d’effet visible, essayez d’abord « Restaurer le HTML initial », puis réactivez le correctif.

2.11 Éditeur de sources HTML

L'éditeur HTML vous permet d'afficher et de modifier directement le code source HTML complet de votre travail, idéal pour les utilisateurs avancés ayant besoin de réglages précis ou d'ajouts de code personnalisé. Cette fonctionnalité est uniquement Pro.

Éditeur HTML : modifiez directement le code source (Pro)

Afficher/modifier le code HTML complet

Lorsque vous ouvrez l'éditeur HTML, le code source HTML complet (y compris <!DOCTYPE html>) s'affiche. Vous pouvez modifier le code directement ; l'enregistrement applique vos modifications.

Rechercher et remplacer

Utilisez Ctrl+F pour ouvrir la recherche, en saisissant des mots-clés pour localiser rapidement le code. Utilisez Ctrl+H pour ouvrir le remplacement pour le remplacement du texte par lots. La barre d'outils affiche le nombre de correspondances (par exemple, "3/15"), avec des options pour individuellement ou pour tout remplacer.

Aller à la ligne

Utilisez Ctrl+G ou la fonction de saut de la barre d'outils pour saisir un numéro de ligne et accéder rapidement à cette ligne, ce qui est utile pour les gros fichiers HTML.

Étui de correspondance

Activez l'option « Respecter la casse » pendant la recherche pour faire correspondre précisément le contenu sensible à la casse.

Retour à la ligne

Lorsque le retour à la ligne est activé, les longues lignes de code s'ajustent automatiquement pour être visualisées sans défilement horizontal.

Copier/Enregistrer

Cliquez sur "Copier HTML" pour copier le code source complet dans le presse-papiers. Après la modification, cliquez sur Enregistrer pour appliquer les modifications. Si le contenu est vide ou contient des erreurs de syntaxe, des messages appropriés apparaîtront.

Remarque : Si le contenu HTML dépasse les limites de stockage, l’enregistrement affichera « Stockage insuffisant, impossible d’enregistrer cette modification ». Supprimez le contenu inutile ou passez à un forfait supérieur pour augmenter la capacité.

2.12 Barre d'outils inférieure

La barre d'outils inférieure fournit les boutons d'action principaux de l'éditeur, notamment les fonctions de prévisualisation, d'annulation/rétablissement, de restauration et d'enregistrement.

Espace de travail de l'éditeur : commandes inférieures pour prévisualiser, restaurer, actualiser et enregistrer une version

Aperçu (Ouvre dans une nouvelle fenêtre)

Cliquez sur le bouton Aperçu pour ouvrir un aperçu complet de votre travail dans une nouvelle fenêtre, affichant le résultat réel de l'affichage. La page d'aperçu affiche un avis d'aperçu temporaire rappelant aux utilisateurs qu'il s'agit d'un aperçu en phase d'édition avec un lien non réutilisable.

Annuler / Rétablir

Annuler annule la dernière opération ; Rétablir restaure une opération annulée. Prend en charge plusieurs étapes d'annulation/rétablissement. Également disponible via Ctrl+Z (annuler) et Ctrl+Y (rétablir).

Actualiser l'aperçu

Cliquer sur Actualiser recharge la zone d'aperçu. Le système enregistre d'abord le contenu actuel, puis actualise le canevas pour afficher le dernier état. Utile après des modifications approfondies pour synchroniser l'affichage.

Restaurer le dernier état enregistré

Restaure le travail au dernier état enregistré manuellement. Toutes les modifications non enregistrées seront perdues : à utiliser avec prudence. Le système demande une confirmation avant de s'exécuter.

Restaurer le HTML initial

Restaure le code HTML de l'œuvre à son état d'origine lors de sa première création. Tout l’historique des modifications sera effacé. Cette action est irréversible : assurez-vous d'avoir sauvegardé le contenu important.

Sauvegarder

Enregistre manuellement toutes les modifications en cours. Le système prend également en charge la sauvegarde automatique, mais la sauvegarde manuelle après des modifications importantes est recommandée pour garantir la sécurité des données. "Enregistrement réussi" apparaît à la fin.

2.13 Barre d'outils supérieure

La barre d'outils supérieure affiche des informations de travail et des boutons d'action rapide, offrant un accès rapide aux fonctionnalités de partage et de téléchargement.

Espace de travail de l'éditeur : commandes principales pour le téléchargement HTML, l'exportation d'images et le partage

Titre du projet (double-cliquez pour modifier)

Le haut affiche le titre du projet en cours ; double-cliquez sur la zone de titre pour passer en mode édition et modifier le nom. Le titre ne peut pas être vide ; "Titre mis à jour avec succès" apparaît en cas de réussite. Les projets sans nom s'affichent comme « Travail sans titre ».

Bouton Partager

Cliquez sur le bouton Partager pour activer le partage du travail et générer un lien accessible. Voir 4.16 Fonctionnalité de partage pour plus de détails. Cette fonctionnalité est uniquement Pro.

Boutons de téléchargement

Le côté droit fournit les boutons « Télécharger en tant qu'image » et « Télécharger en tant que HTML ». Voir 4.15 Exporter et télécharger du HTML pour plus de détails.

3. Gestion de projet, partage et exportation

Après l'édition, exportez des fichiers HTML propres, générez des liens d'aperçu sécurisés avec des mots de passe ou gérez les versions du projet dans votre espace de travail de projet.

3.1 Exporter et télécharger du HTML

Utilisez Importer un HTML dans la barre d'outils en haut à droite pour exporter la version que vous avez examinée dans l'éditeur. La boîte de dialogue d'exportation sépare la page modifiée de la source d'origine et fournit également des options de copie et de transfert AI.

Exporter du HTML : choisissez la source modifiée ou originale, copiez le HTML ou envoyez-le à AI

HTML édité

L'onglet HTML modifié exporte la version actuelle, y compris les modifications apportées sur le canevas.

HTML d'origine

L'onglet HTML original conserve la source importée initiale disponible lorsque vous devez comparer ou récupérer la version de départ.

Copiez le HTML et exportez vers AI

Copier HTML copie la source actuelle dans le presse-papiers. Export to AI crée un lien de transfert afin qu'un autre flux de travail AI puisse lire le code HTML actuel et continuer à partir du résultat modifié.

3.2 Fonctionnalité de partage et aperçus publics

La fonctionnalité Partager crée un lien public vers le travail en cours afin que d'autres personnes puissent le visualiser sans accéder à l'éditeur. La capture d'écran ci-dessous montre les paramètres de partage disponibles avant de publier le lien. Cette fonctionnalité est disponible pour les utilisateurs Pro.

Partager le projet : choisissez la durée du lien et décidez quels avis ou barres latérales afficher

Choisissez les paramètres de partage

Cliquez sur Partager et choisissez une durée disponible, telle que 7 jours, 30 jours, 90 jours ou la période restante de votre forfait. Le lien de partage ne peut pas survivre à la date d’expiration du plan.

Options d'affichage

Vous pouvez choisir de masquer ou non l'avis de sécurité et de masquer la barre latérale droite de la page partagée. Ces options affectent la vue du visiteur, et non la source modifiable dans votre projet.

Partager la page et accéder

Après le partage, copiez le lien généré et envoyez-le aux réviseurs ou aux clients. Vous pouvez revenir aux contrôles de partage pour mettre à jour le lien ou arrêter le partage lorsque la page ne devrait plus être publique.

3.3 Barre de raccourcis Mes projets

La barre de raccourcis « Mes projets » sur la gauche vous permet de développer/réduire la liste des projets et de basculer rapidement entre les projets, facilitant ainsi les transitions fluides entre plusieurs créations.

Développer et réduire

Cliquez sur le bouton « Mes projets » en haut à gauche pour développer la liste de travail de la barre latérale. Cliquez à nouveau ou cliquez en dehors de la barre latérale pour la réduire. Une fois développé, vous pouvez parcourir visuellement les vignettes et les titres de vos projets d'historique.

Changer de projet

Cliquez sur n'importe quelle fiche de projet dans la liste pour charger immédiatement son contenu dans l'éditeur. Cela vous permet de comparer et de modifier rapidement différents brouillons de conception sans revenir à la page d'accueil ou au profil.

3.4 Instantanés de l'historique des versions

Dans la barre latérale gauche, « Mes projets » (Historique) permet d'accéder rapidement à vos créations passées. Il répertorie tous vos enregistrements d’édition par ordre chronologique.

Sélection et modification rapides

Cliquez sur n'importe quel enregistrement de la liste pour le charger rapidement dans l'éditeur et continuer là où vous vous êtes arrêté, sans réimporter.

Détails de la fenêtre d'aperçu

Passez la souris sur un enregistrement d'historique pour voir sa fenêtre d'aperçu. Dans la fenêtre d'aperçu, vous pouvez :

1. Modifier le titre directement : cliquez sur le texte du titre pour modifier instantanément le nom du projet.
2. Afficher l'état du partage : les icônes indiquent si le travail est actuellement partagé.
3. Actions rapides : accédez aux raccourcis de modification, de suppression et autres.

Historique : aperçu rapide et gestion des projets passés

3.5 Gestion et organisation du projet

Le module de gestion de projet affiche tous les projets que vous avez créés, prenant en charge les opérations d'affichage, de modification, de partage et de suppression.

Liste de travail et filtres

Les projets sont affichés sous forme de cartes ou dans une liste. Vous pouvez les filtrer en utilisant :

1. Recherche : saisissez le code professionnel ou le titre pour effectuer la recherche.
2. Filtre de type : filtre par générateur d'IA, téléchargement de fichiers, clonage de page Web, collage de code, etc.
3. Plage de dates : sélectionnez les dates de début et de fin pour filtrer les projets d'une période spécifique.
4. Trier par : trier par le plus récent en premier, le plus ancien en premier, le nombre de likes ou le nombre de vues

gestion de projet : affichez, filtrez et gérez tous les projets

Afficher et modifier des projets

Cliquez sur le bouton "Afficher" sur une fiche de projet pour la prévisualiser. Dans l'interface d'aperçu, vous pouvez :

1. Modifier le titre du projet (double-cliquez sur le titre pour le modifier)
2. Cliquez sur « Modifier » pour accéder à l'éditeur visuel et continuer l'édition.
3. Afficher l'historique de sauvegarde de l'œuvre et restaurer vers une version spécifique

Gestion du statut de partage

Les utilisateurs Pro peuvent partager des projets, permettant aux autres de les visualiser via un lien :

1. Activer le partage : cliquez sur le bouton "Partager" pour générer un lien de partage valable 7 jours
2. Mettre à jour le partage : les projets déjà partagés peuvent voir leurs liens mis à jour, actualisant ainsi la période de validité
3. Arrêter le partage : cliquez sur "Arrêter le partage" pour invalider immédiatement le lien

Supprimer des projets

Cliquez sur le bouton "Supprimer" d'une fiche de projet pour la supprimer. Le système affichera deux boîtes de dialogue de confirmation pour éviter toute suppression accidentelle :

1. Première confirmation : vous demande si vous souhaitez supprimer ce travail
2. Deuxième confirmation : vous rappelle que la suppression est irréversible

Conseil : Vous pouvez supprimer jusqu’à 3 enregistrements à la fois. Après la suppression d’un projet, l’espace de stockage qu’il occupait est libéré.

La page Projets est votre espace dédié pour visualiser et gérer toutes vos créations. Accédez-y rapidement depuis la barre latérale ou le menu utilisateur.

Affichage du travail

La page affiche tous vos projets sous forme de cartes, chacune contenant :

1. Aperçu miniature : aperçu visuel de l'œuvre pour une identification rapide
2. titre du projet : affiche le nom du projet, cliquez pour le modifier
3. Heure de création : enregistre le moment où l'œuvre a été créée
4. Statut du partage : indique si le travail est actuellement partagé

Projets : visualisez et gérez toutes vos créations en un seul endroit

Actions rapides

Chaque carte de projet fournit des boutons d'action pratiques :

1. Modifier : accédez à l'éditeur visuel pour continuer la création.
2. Partager : générer ou gérer des liens de partage (Pro uniquement)

4. Conseils système et dépannage

Pendant l'utilisation, vous pouvez rencontrer des alertes ou des limites du système. Voici des explications et des suggestions de conseils système courants.

4.1 Détection HTML et alertes de liens hypertextes

Pour garantir la qualité de l'importation et la stabilité de l'éditeur, le système analyse automatiquement les URL et les fichiers, vous alertant des problèmes potentiels.

Détection des ressources locales

Si une page contient des chemins locaux (par exemple, file:// ou C:/), les ressources ne se chargeront pas. Suggestion : assurez-vous que toutes les ressources utilisent des liens HTTP/HTTPS publics.

Protection des liens hypertexte des images

Certains sites bloquent l'accès externe aux images. Suggestion : utilisez « Remplacer l'image » pour télécharger des fichiers locaux ou les héberger sur un service public.

Pages de rendu dynamique (SPA)

Les pages s'appuyant entièrement sur JavaScript (SPA) peuvent être importées comme vides ou incomplètes car le DOM dynamique n'est pas capturé directement. Suggestion : utilisez « Coller le code » en copiant le code HTML affiché à partir de votre navigateur.

Polices externes/Bibliothèques d'icônes

Les polices ou les icônes avec des en-têtes CORS manquants peuvent s'afficher de manière incorrecte. Suggestion : Remplacez-les par des polices système ou des icônes de bibliothèque dans l'éditeur.

Contenu intégré (iframe)

Pour des raisons de sécurité, certains contenus iframe peuvent être bloqués ou non interactifs. Le système conserve les espaces réservés lorsque cela est possible.

4.2 Limites de stockage et d'utilisation

HtmlDrag applique des quotas de ressources en fonction de votre plan. Vous pouvez voir des alertes « Limite de stockage atteinte » ou « Limite de travail atteinte ».

Limite de stockage atteinte

Vous ne pouvez pas enregistrer les modifications ou télécharger des fichiers lorsque vous manquez d'espace. Solution :

1. Supprimez les anciens éléments dans « Projets » pour libérer de l'espace.
2. Cliquez sur « Mettre à niveau maintenant » dans la boîte de dialogue pour obtenir plus de capacité avec un Pro.

Limite du nombre de projets

Les utilisateurs gratuits ont une limite sur le nombre de projets enregistrés. Supprimez les anciens projets ou effectuez une mise à niveau pour augmenter cette limite.

Limites de téléchargement d'images

Le système vérifie la taille d'un fichier unique et les limites des lots. Si vous voyez « La taille du fichier dépasse la limite » ou « Taille du lot dépassée », compressez les images ou téléchargez-les par lots plus petits. Les utilisateurs professionnels bénéficient de limites plus élevées.

4.3 Bac à sable de sécurité et désinfection

L'analyse de sécurité intégrée évalue automatiquement les risques liés au contenu lors de l'importation d'URL, du téléchargement de fichiers ou du collage de code pour protéger votre compte.

Niveau de risque

En fonction des menaces telles que XSS, des scripts malveillants ou des balises dangereuses, les risques sont classés comme suit :

1. Risque faible : avertissements mineurs ; généralement en toute sécurité.
2. Risque moyen : problèmes potentiels ; procéder avec prudence.
3. Risque élevé : risques graves ; ne procédez que si la source est fiable.
4. Risque critique : contient des logiciels malveillants ou du contenu de phishing ; bloqué immédiatement.

Mode sans échec

Pour les fichiers présentant certains risques, le système propose des « mesures de sécurité » telles que la désinfection automatique. Vous pouvez choisir de « Continuer en mode sans échec », où le système supprime le code dangereux tout en préservant la mise en page et la possibilité de modification.

4.4 Notifications et messages système

Le module Messages reçoit des notifications système importantes, notamment l'état du compte, les rappels de paiement, les alertes d'expiration d'abonnement et les mises à jour de fonctionnalités.

Messages : recevez des notifications et des alertes système

Liste des messages système

La liste des messages est triée par ordre chronologique, affichant le titre, le résumé, l'heure de création et l'heure d'expiration. Cliquez sur un message pour afficher les détails ou effectuer des actions (par exemple, « Continuer le paiement », « Renouveler maintenant »).

Filtre non lu

Cochez la case « Non lu uniquement » en haut à droite pour filtrer rapidement les messages non lus, vous aidant ainsi à vous concentrer sur les notifications importantes.

Marquer tout comme lu

Cliquez sur le bouton « Marquer tout comme lu » pour marquer instantanément tous les messages de la liste actuelle comme lus, effaçant ainsi les indicateurs de point rouge.

Détails du message

Cliquez sur une carte de message pour afficher le contenu complet de la notification. Pour les messages de commande ou d'abonnement, les détails incluent souvent des boutons d'action rapide pour votre commodité.

4.5 Commentaires et assistance

Si vous rencontrez des problèmes ou avez des suggestions, soumettez-les via le module Commentaires. Vous pouvez télécharger des images pour mieux décrire votre problème.

Commentaires : soumettre des problèmes ou des suggestions

Liste et statut des commentaires

La liste affiche votre historique de soumission et votre statut actuel :

1. En cours : commentaires soumis, en attente d'examen par l'administrateur.
2. Répondu : l'administrateur a répondu ; cliquez pour voir.
3. Fermé : commentaires archivés ou résolus ; aucune autre réponse n'est autorisée.

Soumettre de nouveaux commentaires

Cliquez sur "Nouveau commentaire", saisissez votre contenu (obligatoire, minimum 10 caractères). Vous pouvez « Télécharger des images » (maximum 2 Mo chacune) pour fournir des captures d'écran. Cliquez sur « Soumettre vos commentaires » lorsque vous avez terminé.

Détails des commentaires et conversation

Cliquez sur un élément de la liste pour afficher l'historique complet des conversations, y compris vos messages et les réponses de l'administrateur. Le haut affiche l'ID de commentaire et les pièces jointes.

Continuer Répondre

Pour les commentaires « En cours » ou « Réponse », utilisez la zone de saisie en bas pour fournir plus d'informations ou répondez à l'administrateur jusqu'à ce que le problème soit résolu.

Lorsque vous envoyez un retour, vous pouvez ajouter des captures d’écran ou des fichiers pour nous aider à mieux comprendre votre demande. Vous pouvez également consulter les réponses de l’administrateur et l’historique de la conversation dans les détails du retour pour suivre son traitement.

Nous accordons de l’importance à chaque retour et nous nous efforçons de le traiter rapidement. Merci pour votre participation et votre soutien !

5. Compte, crédits et abonnement (Annexe)

Gérez les paramètres de votre compte, la sécurité de connexion, les soldes créditeurs et les plans d'abonnement.

5.1 S'inscrire

HtmlDrag utilise l'enregistrement par courrier électronique. Remplissez simplement quelques informations de base pour créer votre compte. Une fois votre inscription réussie, vous serez automatiquement connecté et redirigé vers la page d'accueil.

Inscription par courrier électronique

Sur la page d'inscription, suivez les étapes suivantes pour créer votre compte :

1. Entrer l'e-mail : indiquez votre adresse e-mail fréquemment utilisée. Cela servira d’identifiant de connexion et de canal de notification. Assurez-vous que le format de l'e-mail est correct, par exemple [email protected].
2. Définir le mot de passe : le mot de passe doit contenir à la fois des lettres et des chiffres, d'une longueur de 8 à 32 caractères. Nous vous recommandons d'utiliser un mot de passe fort pour sécuriser votre compte.
3. Confirmer le mot de passe : saisissez à nouveau le mot de passe pour vous assurer que les deux entrées correspondent.
4. Définir un pseudo (facultatif) : vous pouvez personnaliser votre pseudo. Si vous laissez ce champ vide, le système générera automatiquement un surnom par défaut pour vous.
5. Accepter les conditions : cochez « J'ai lu et j'accepte les conditions d'utilisation et la politique de confidentialité », puis cliquez sur le bouton « S'inscrire » pour finaliser l'inscription.

Page d'inscription : saisissez l'e-mail et les informations de base pour créer un compte

Vérification par e-mail et récompense de crédit

Une fois l'inscription réussie, le système enverra un e-mail de vérification dans votre boîte de réception. Une fois la vérification de l'e-mail terminée, vous recevrez des crédits bonus qui pourront être utilisés pour les fonctionnalités du générateur d'IA et de la page Web de clonage. Si vous ne recevez pas l'e-mail, vérifiez votre dossier spam ; vous pouvez cliquer sur « Renvoyer » pour demander un autre e-mail de vérification après 3 minutes.

Conseil : La vérification de votre adresse e-mail vous permet non seulement de gagner des crédits bonus, mais aussi de débloquer l’expérience complète et de renforcer la sécurité de votre compte.

5.2 Connexion

HtmlDrag prend en charge plusieurs méthodes de connexion. Choisissez l'option la plus pratique en fonction de vos préférences.

E-mail et mot de passe

Connectez-vous en utilisant l'e-mail et le mot de passe avec lesquels vous vous êtes inscrit :

1. Entrez votre adresse e-mail sur la page de connexion
2. Entrez votre mot de passe (cliquez sur l'icône en forme d'œil pour activer/désactiver la visibilité du mot de passe)
3. Cliquez sur le bouton « Continuer » pour terminer la connexion.

Une fois votre connexion réussie, vous serez automatiquement redirigé vers la page d'accueil où vous pourrez commencer à créer.

Connexion tierce (Google / GitHub)

Pour un accès plus rapide, vous pouvez vous connecter à l'aide de votre compte Google ou GitHub :

1. Connectez-vous avec Google : cliquez sur le bouton "Connectez-vous avec Google". Dans la fenêtre contextuelle d'autorisation Google, sélectionnez votre compte et confirmez l'autorisation.
2. Connectez-vous avec GitHub : cliquez sur le bouton « Connectez-vous avec GitHub ». Vous serez redirigé vers la page d'autorisation de GitHub. Après confirmation, vous serez automatiquement renvoyé vers HtmlDrag.

Page de connexion : prend en charge l'e-mail/le mot de passe et les comptes tiers

Conseil : La connexion avec Google ou GitHub crée automatiquement un compte ; aucune inscription séparée n’est nécessaire. Lors de votre première connexion avec un fournisseur tiers, le système crée automatiquement un compte associé.

Lien mot de passe oublié

Si vous avez oublié votre mot de passe, cliquez sur le bouton « Mot de passe oublié ? » en bas à droite de la page de connexion pour accéder au processus de réinitialisation du mot de passe (voir la section 1.3).

5.3 Mot de passe oublié et réinitialisé

Si vous avez oublié votre mot de passe, vous pouvez le réinitialiser à l'aide d'un code de vérification par e-mail. L'ensemble du processus est terminé sur une seule page sans redirections.

Processus de réinitialisation du mot de passe

Suivez ces étapes pour réinitialiser votre mot de passe :

1. Entrer l'adresse e-mail : indiquez l'adresse e-mail que vous avez utilisée lors de l'inscription.
2. Obtenir le code de vérification : cliquez sur le bouton « Envoyer le code ». Le système enverra un e-mail contenant un code de vérification à 6 chiffres
3. Entrez le code de vérification : saisissez le code à 6 chiffres que vous avez reçu dans le champ du code de vérification.
4. Définir un nouveau mot de passe : saisissez votre nouveau mot de passe (doit contenir des lettres et des chiffres, de 8 à 32 caractères)
5. Confirmer le nouveau mot de passe : saisissez à nouveau le nouveau mot de passe pour vous assurer qu'il correspond.
6. Cliquez sur « Réinitialiser le mot de passe » : terminez la réinitialisation du mot de passe. Après avoir vu le message de réussite, vous serez automatiquement redirigé vers la page de connexion

Mot de passe oublié : réinitialiser via le code de vérification par e-mail

Validité du code de vérification

Le code de vérification a une période de validité limitée : veuillez l'utiliser rapidement après avoir reçu l'e-mail. Si le code a expiré, vous pouvez cliquer sur le bouton « Renvoyer » pour demander un nouveau code (vous devrez attendre la fin du compte à rebours avant de renvoyer).

Remarque : Si votre adresse e-mail n’est pas enregistrée dans le système, le code de vérification ne peut pas être envoyé. Vérifiez que vous saisissez l’adresse utilisée lors de l’inscription.

5.4 Paramètres du profil

Le module Paramètres de profil vous permet de gérer les informations de base de votre compte, y compris les paramètres d'avatar, de surnom, d'e-mail, de biographie et de mot de passe.

Changer d'avatar

Cliquez sur le bouton « Modifier l'avatar » dans la zone de l'avatar et sélectionnez un fichier image local à télécharger. Le système recadrera et enregistrera automatiquement votre nouvel avatar.

Changer de pseudo

Cliquez sur le bouton Modifier à côté de votre pseudo, entrez un nouveau nom et cliquez sur « Enregistrer ». Votre pseudo sera affiché sur tous vos projets et commentaires.

Gestion des e-mails

La section e-mail affiche votre adresse e-mail actuelle et votre statut de vérification :

1. Vérifié : votre adresse e-mail a été vérifiée et toutes les fonctionnalités sont disponibles
2. Non vérifié : cliquez sur "Envoyer un e-mail de vérification" pour terminer la vérification et gagner des crédits bonus
3. Modifier l'adresse e-mail : vous devez d'abord vérifier votre adresse e-mail actuelle, puis saisir une nouvelle adresse e-mail pour finaliser la modification.

Biographie

Entrez votre auto-présentation dans la zone bio (recommandé : pas plus de 200 caractères), puis cliquez sur « Enregistrer » pour mettre à jour.

Changer le mot de passe / Définir le mot de passe

Cliquez sur le bouton « Modifier le mot de passe » pour ouvrir la boîte de dialogue des paramètres de mot de passe :

1. Utilisateurs avec un mot de passe existant : saisissez votre mot de passe actuel, puis définissez un nouveau mot de passe (8 à 32 caractères, y compris des lettres et des chiffres)
2. Utilisateurs sans mot de passe : définissez directement un nouveau mot de passe. Après le réglage, vous pouvez vous connecter avec votre e-mail et votre mot de passe

Supprimer le compte

Pour supprimer votre compte, cliquez sur le bouton "Supprimer le compte" en bas de la page. Pour des raisons de sécurité, vous devrez vérifier votre identité via un code de vérification par e-mail.

Remarque : Après l’envoi de la demande de suppression, votre compte entre dans une période de conservation (généralement 30 jours) pendant laquelle vous ne pouvez pas vous connecter. À l’issue de cette période, le système supprime définitivement vos projets, vos crédits et votre historique.

Profil : gérer l'avatar, le pseudo, l'e-mail et le mot de passe

5.5 Utilisation du stockage

Le module Utilisation du stockage affiche la consommation de stockage de votre compte, vous aidant à comprendre l'espace restant et à planifier vos créations en conséquence.

Présentation du stockage

La section supérieure affiche votre utilisation globale, notamment :

1. Utilisé : l'espace de stockage actuellement utilisé
2. Total : limite de stockage de votre compte (les utilisateurs Pro bénéficient d'une plus grande capacité)
3. Restant : espace disponible pour créer de nouveaux projets
4. Projets stockés : nombre actuel de projets enregistrés et limite

Répartition du stockage

Le système classe le stockage en trois types :

1. Contenu HTML : espace utilisé par le code de la page Web de vos projets
2. Ressources d'images : espace utilisé par les fichiers d'images téléchargés
3. Autres ressources : espace utilisé par d'autres pièces jointes

Limite du nombre de projets

Les utilisateurs Free et Pro ont des limites de nombre de travaux différentes. Lorsque vous atteignez la limite, vous devrez supprimer certains projets ou mettre à niveau votre forfait avant d'en créer de nouveaux.

Actualisation et mise à niveau du stockage

Cliquez sur le bouton Actualiser pour mettre à jour les informations de stockage. Pour plus d'espace de stockage, cliquez sur « Mettre à niveau le stockage » pour visiter la page Tarifs et choisir un forfait approprié.

Conseil : Si le stockage de votre compte est plein ou si vous atteignez la limite de projets, le système suspendra la création de nouveaux projets. Supprimez certains projets ou passez à un forfait supérieur pour rétablir les autorisations d’importation.

5.6 Crédits et historique d'utilisation

Le module Historique de crédit affiche l'historique des transactions de crédit de votre compte, y compris les enregistrements de consommation et de gains.

Historique des transactions de crédit

Les enregistrements de crédit sont affichés dans un tableau contenant les informations suivantes :

1. Date : date à laquelle le changement de crédit a eu lieu
2. Type : le type d'opération de changement de crédit
3. Modification des crédits : crédits ajoutés (positifs) ou déduits (négatifs)
4. Description : explication détaillée du changement

Vous pouvez utiliser des filtres de plage de dates pour afficher les enregistrements d'une période spécifique.

Types de crédit

1. Générateur IA : crédits consommés lors de l'utilisation de la fonctionnalité Générateur IA
2. Dupliquer la page : crédits consommés lors de l'utilisation de la fonctionnalité Dupliquer la page
3. Récompense d'inscription : crédits attribués aux nouveaux utilisateurs après inscription et vérification par e-mail
4. Bonus de plateforme : crédits offerts par la plateforme
5. Cadeau mensuel : allocation de crédit mensuelle pour les utilisateurs Pro
6. Rechargement de crédit : crédits obtenus via des achats à crédit
7. Ajustement administrateur : crédits ajustés manuellement par les administrateurs

Historique de crédit : afficher les détails de la transaction de crédit

Conseil : Les utilisateurs Pro reçoivent des crédits supplémentaires chaque mois. Ces crédits peuvent être utilisés pour des fonctionnalités payantes telles que le Générateur IA et Dupliquer la page.

5.7 Historique des commandes et facturation

Le module Historique des commandes affiche votre historique d'achats et vos enregistrements de paiement, ce qui facilite l'interrogation et la gestion des commandes.

Gestion des commandes

La liste des commandes affiche vos enregistrements d'achat. Tu peux:

1. Afficher l'état et les détails de la commande
2. Utilisez des filtres pour trouver rapidement des commandes spécifiques
3. Poursuivre le paiement des commandes en attente
4. Fermez ou supprimez les commandes dont vous n'avez plus besoin

Conseil : En cas de problème de paiement, vous pouvez fermer la commande actuelle et en créer une nouvelle.

5.8 Plans de tarification et d'abonnement

La page Tarifs vous permet de gérer votre abonnement et vos recharges de crédit. Choisissez le forfait qui vous convient le mieux et débloquez davantage de possibilités créatives.

Plans d'abonnement

HtmlDrag propose des plans d'abonnement Pro et Pro Max. Après votre inscription, vous pouvez bénéficier des avantages inclus pendant la période d'abonnement active :

Pro : pour les créateurs réguliers qui ont besoin d'un flux de travail complet d'édition HTML, de génération d'IA, de partage et d'exportation.

Pro Max : pour une création d'IA plus lourde, des projets plus importants et des limites d'utilisation plus élevées.

Les abonnements se renouvellent selon le cycle de facturation indiqué à la caisse. Vous pouvez gérer ou annuler le renouvellement depuis votre compte ou le fournisseur de paiement.

Tarif : choisissez le forfait qui vous convient le mieux

Crédits de recharge

Si vous n'avez besoin que d'une utilisation temporaire des fonctionnalités de génération d'IA ou de clonage de page Web, vous pouvez choisir de recharger les crédits. Les crédits achetés n'expirent jamais et vous pouvez recharger à tout moment lorsque le montant est bas, sans attendre.

Comparaison des fonctionnalités

Les principales différences entre Free et Pro sont les suivantes :

Guide d'utilisation du crédit

Chaque génération d'IA consomme un montant fixe de crédits. Les utilisateurs gratuits reçoivent des crédits bonus mensuels de base, tandis que les utilisateurs Pro en reçoivent davantage. Les crédits achetés n'expirent jamais et vous pouvez recharger à tout moment lorsque votre crédit est faible, sans attendre la récupération du quota.

Commencez avec HtmlDrag

Commencez par une page HTML existante, une URL publique, une invite pour Affinage IA ou un fichier pris en charge. HtmlDrag vous aide à passer du matériel source à une modification visuelle, un aperçu partageable ou une exportation HTML propre.

Commencez à créer maintenant

Ce guide couvre le téléchargement HTML, la collage de code, le clonage de page Web, le raffinement de l'IA, le fichier vers HTML, l'édition de texte et d'images, les tableaux, les composants, les calques, les liens, le verrouillage et la suppression d'éléments, l'enregistrement, le partage et l'exportation HTML.