Live Text Editor rend chaque élément textuel d'une page web modifiable en un seul clic. Changez les titres, les paragraphes, les libellés de boutons, les éléments de navigation ou n'importe quel contenu textuel directement sur la page en direct — le texte modifié s'affiche en temps réel avec les polices, couleurs et la mise en page originales de la page parfaitement préservées. Idéal pour tester des variations de texte, créer des maquettes et réaliser des captures d'écran avec du contenu personnalisé.
Combien de fois vous êtes-vous demandé « Comment ce titre serait-il avec une formulation différente ? » ou « J'ai besoin d'une capture d'écran de cette page avec le nom de notre client à la place du texte de remplacement » ? Normalement, cela implique de modifier le code, de recompiler ou d'utiliser un éditeur d'image pour superposer du texte. Live Text Editor élimine tout cela — cliquez simplement sur n'importe quel texte de la page et commencez à taper. Le texte devient modifiable sur place grâce à contentEditable, ce qui signifie que toute la mise en forme CSS originale de l'élément est préservée : font-family, font-size, font-weight, couleur, letter-spacing, line-height, text-transform et toutes les autres propriétés textuelles. La mise en page se met à jour en temps réel au fil de la saisie — si le nouveau texte est plus long, l'élément s'agrandit naturellement. Modifiez autant d'éléments textuels que vous le souhaitez en une seule session. Un compteur de modifications suit le nombre d'éléments modifiés, et « Undo All » restaure tout instantanément. Toutes les modifications sont purement visuelles et sont réinitialisées lors du rechargement de la page.
Cliquez sur n'importe quel élément textuel de la page — titres, paragraphes, spans, libellés de boutons, texte de liens, éléments de liste, cellules de tableau — et il devient immédiatement modifiable. Un curseur clignotant apparaît et vous pouvez commencer à taper. Aucun mode de sélection ni clic supplémentaire n'est nécessaire.
Le texte modifié conserve toutes les propriétés CSS originales : font-family, font-size, font-weight, couleur, line-height, letter-spacing, text-transform et les propriétés de mise en page. Le texte s'intègre parfaitement à la page — et non comme une superposition grossière.
Au fur et à mesure que vous saisissez un texte plus long ou plus court, l'élément se redimensionne naturellement et la mise en page environnante se réorganise exactement comme elle le ferait avec du contenu réel. Voyez précisément comment différentes longueurs de texte affectent la mise en page.
Modifiez autant d'éléments textuels que vous le souhaitez en une seule session. Changez le titre, puis le sous-titre, puis le libellé du bouton, puis le texte du footer — chaque modification persiste jusqu'au rechargement de la page.
Un petit compteur indique combien d'éléments vous avez modifiés. « Undo All » restaure chaque élément modifié à son contenu textuel original en un seul clic. Les modifications individuelles sont suivies avec des indications « was: original text ».
Toutes les modifications n'existent que dans le DOM du navigateur et ne sont jamais enregistrées sur le serveur. Rechargez la page et chaque élément textuel retrouve son contenu original. Utilisation sécurisée sur n'importe quel site web — y compris les sites en production.
Essayez différentes variantes d'accroches sur la page en direct pour voir quelle formulation est la plus percutante. « Get Started Free » ou « Start Your Free Trial » ou « Create Your Account » — voyez chaque version rendue avec le vrai design de la page.
Remplacez le texte de remplacement (« Lorem ipsum ») par le vrai contenu du client lors d'une présentation. Montrez-leur le nom de leur entreprise, la description du produit et le texte CTA dans le vrai design — bien plus convaincant qu'une maquette statique.
Vous avez besoin d'une capture d'écran affichant un texte spécifique pour de la documentation, un article de blog ou une diapositive de présentation ? Modifiez le texte directement, puis utilisez l'outil Screenshot pour capturer une image propre avec votre contenu personnalisé.
Que se passe-t-il lorsqu'un nom de produit fait 40 caractères au lieu de 15 ? Ou lorsqu'une description occupe 3 lignes au lieu d'une ? Saisissez un texte plus long pour voir comment la mise en page le gère — trouvez les bugs de débordement avant que du vrai contenu ne les déclenche.
Collez du texte traduit dans les éléments pour voir comment le design gère différentes langues. L'allemand est souvent 30 % plus long que l'anglais — la mise en page fonctionne-t-elle encore ? Le texte du bouton tient-il toujours ?
Ouvrez le dock flottant DevSuite Pro et cliquez sur l'icône Live Text Editor. L'outil s'active et chaque élément textuel de la page devient cliquable pour être modifié.
Cliquez sur un titre, un paragraphe, un libellé de bouton ou n'importe quel contenu textuel. Un curseur apparaît dans le texte et un badge « editing » s'affiche au-dessus de l'élément.
Commencez à taper pour remplacer ou modifier le texte. Le nouveau contenu s'affiche en temps réel avec le style original préservé. La mise en page s'ajuste naturellement pour s'adapter à la nouvelle longueur du texte.
Cliquez en dehors de l'élément actuel pour terminer de le modifier, puis cliquez sur un autre élément textuel pour le modifier à son tour. Le compteur de modifications suit toutes les modifications.
Cliquez sur « Undo All » pour restaurer chaque élément modifié, ou rechargez la page pour tout réinitialiser complètement.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
