L'Editor de text en viu fa que cada element de text d'una pàgina web sigui editable amb un sol clic. Canvia titulars, paràgrafs, etiquetes de botons, elements de navegació o qualsevol contingut de text directament a la pàgina — el text editat es renderitza en temps real mantenint les fonts, els colors i el disseny originals de la pàgina. Perfecte per provar variacions de textos, crear maquetes i fer captures de pantalla amb contingut personalitzat.
Quantes vegades has pensat: "Com quedaria aquest titular amb unes paraules diferents?" o "Necessito una captura de pantalla d'aquesta pàgina amb el nom del client en lloc d'un text de farciment?" Normalment, això implica editar el codi, tornar a compilar o utilitzar un editor d'imatges per superposar text. L'Editor de text en viu elimina tot això: només has de fer clic a qualsevol text de la pàgina i començar a escriure. El text es torna editable al moment utilitzant contentEditable, el que significa que es mantenen tots els estils originals de CSS de l'element: família de font, mida, pes, color, espaiat entre lletres, alçada de línia, transformació de text i qualsevol altra propietat. El disseny s'actualitza en temps real mentre escrius; si el text nou és més llarg, l'element s'expandeix de forma natural. Edita tants elements de text com vulguis en una sola sessió. Un comptador d'edicions fa un seguiment de quants elements has canviat, i l'opció "Desfés-ho tot" ho restaura tot a l'instant. Tots els canvis són només visuals i es perden en recarregar la pàgina.
Fes clic a qualsevol element de text de la pàgina — encapçalaments, paràgrafs, spans, etiquetes de botons, text d'enllaços, elements de llistes, cel·les de taules — i es tornarà editable immediatament. Apareixerà un cursor parpellejant i podràs començar a escriure. Sense modes de selecció ni clics addicionals.
El text editat manté totes les propietats originals de CSS: font-family, font-size, font-weight, color, line-height, letter-spacing, text-transform i les propietats de disseny. El text sembla totalment integrat a la pàgina, no una superposició mal feta.
Mentre escrius text més llarg o més curt, l'element canvia de mida de forma natural i el disseny del voltant es reajusta tal com ho faria amb contingut real. Mira exactament com afecten les diferents longituds de text al disseny.
Edita tants elements de text com vulguis en una sola sessió. Canvia el titular, després el subtítol, després l'etiqueta del botó, després el text del peu de pàgina — cada edició persisteix fins que recarregues la pàgina.
Un petit comptador mostra quants elements has editat. "Desfés-ho tot" restaura cada element editat al seu text original en un sol clic. Els canvis individuals es rastregen amb indicis de "era: text original".
Totes les edicions existeixen només al DOM del navegador i mai es guarden al servidor. Recàrrega la pàgina i tots els elements de text tornaran al seu contingut original. Segur d'utilitzar en qualsevol lloc web, inclosos els llocs de producció.
Proba diferents variacions de titulars a la pàgina real per veure quines paraules semblen més potents. "Comença gratis" vs "Inicia la prova gratuïta" vs "Crea el teu compte" — mira cada versió renderitzada amb el disseny real de la pàgina.
Substitueix el text de farciment ("Lorem ipsum") pel contingut real del client durant una presentació. Mostra'ls el nom de la seva empresa, la descripció del producte i el text de la CTA renderitzats en el disseny real — és molt més convincent que una maqueta estàtica.
Necessites una captura de pantalla que mostri un text específic per a documentació, un article de blog o una diapositiva de presentació? Edita el text directament i després utilitza l'eina de Captura de pantalla per obtenir una imatge neta amb el contingut personalitzat.
Què passa quan el nom d'un producte té 40 caràcters en lloc de 15? O quan una descripció té 3 línies en lloc d'una? Escriu un text més llarg per veure com ho gestiona el disseny — detecta errors de desbordament abans que el contingut real els provoqui.
Enganxa text traduït als elements per veure com el disseny gestiona els diferents idiomes. El text en alemany sol ser un 30% més llarg que en anglès — funciona el disseny encara? El text del botó encara hi cap?
Obre el tauler flotant de DevSuite Pro i fes clic a la icona de l'Editor de text en viu. L'eina s'activa i cada element de text de la pàgina es torna clicable per ser editat.
Fes clic a un encapçalament, paràgraf, etiqueta de botó o qualsevol contingut de text. Apareixerà un cursor al text i una etiqueta d'"editant" sobre l'element.
Comença a escriure per substituir o modificar el text. El contingut nou es renderitza en temps real amb l'estil original preservat. El disseny s'ajusta de forma natural per allotjar la nova longitud del text.
Fes clic fora de l'element actual per acabar d'editar-lo, després fes clic a un altre element de text per editar-lo també. El comptador d'edicions rastreja tots els canvis.
Fes clic a "Desfés-ho tot" per restaurar cada element editat, o recarrega la pàgina per restablir-ho tot completament.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.
