Live Text Editor tekee jokaisesta tekstielementistä verkkosivulla muokattavan yhdellä napsautuksella. Muuta otsikoita, kappaleita, painikkeiden nimiä, navigointielementtejä tai mitä tahansa tekstisisältöä suoraan live-sivulla — muokattu teksti renderöityy reaaliajassa alkuperäisen fontin, värien ja asettelun säilyessä ennallaan. Täydellinen tekstivaihtoehtojen testaamiseen, mallinnusten luomiseen ja kuvakaappausten ottamiseen mukautetulla sisällöllä.
Kuinka monta kertaa olet ajatellut "ihmettelen, miltä tämä otsikko näyttäisi eri sanamuodolla" tai "tarvitsen kuvakaappauksen tästä sivusta asiakkaamme nimellä paikkamerkkitekstin sijaan"? Tavallisesti tämä tarkoittaa koodin muokkaamista, uudelleenrakentamista tai kuvaeditorin käyttämistä tekstin päällystämiseksi. Live Text Editor poistaa kaiken tämän — napsauta vain mitä tahansa tekstiä sivulla ja aloita kirjoittaminen. Teksti muuttuu paikan päällä muokattavaksi contentEditable-ominaisuuden avulla, mikä tarkoittaa, että kaikki elementin alkuperäinen CSS-tyyli säilyy: font-family, font-size, font-weight, color, letter-spacing, line-height, text-transform ja kaikki muut tekstiominaisuudet. Asettelu päivittyy reaaliajassa kirjoittaessasi — jos uusi teksti on pidempi, elementti laajenee luonnollisesti. Muokkaa niin monta tekstielementtiä kuin haluat yhdessä istunnossa. Muokkauslaskuri seuraa muuttamiesi elementtien määrää, ja "Kumoa kaikki" palauttaa kaiken välittömästi. Kaikki muutokset ovat vain visuaalisia ja nollautuvat sivun päivityksellä.
Napsauta mitä tahansa tekstielementtiä sivulla — otsikoita, kappaleita, span-elementtejä, painikkeiden nimiä, linkkitekstejä, listaelementtejä, taulukon soluja — ja siitä tulee välittömästi muokattava. Vilkkuva kursori ilmestyy ja voit aloittaa kirjoittamisen. Ei valintamoodia eikä ylimääräisiä napsautuksia tarvita.
Muokattu teksti säilyttää kaikki alkuperäiset CSS-ominaisuudet: font-family, font-size, font-weight, color, line-height, letter-spacing, text-transform ja asetteluominaisuudet. Teksti näyttää täsmälleen siltä kuin se kuuluu sivulle — ei karkean päällysteen tavalta.
Kirjoittaessasi pidempää tai lyhyempää tekstiä elementti skaalautuu luonnollisesti ja ympäröivä asettelu mukautuu aivan kuten se tekisi oikean sisällön kanssa. Näe tarkalleen, miten eri tekstipituudet vaikuttavat asetteluun.
Muokkaa niin monta tekstielementtiä kuin haluat yhdessä istunnossa. Muuta otsikko, sitten alaotsikko, sitten painikkeen nimi ja sitten alatunnisteen teksti — jokainen muutos säilyy sivun päivitykseen asti.
Pieni laskuri näyttää, kuinka monta elementtiä olet muokannut. "Kumoa kaikki" palauttaa jokaisen muokatun elementin alkuperäiseen tekstisisältöön yhdellä napsautuksella. Yksittäiset muutokset seurataan "oli: alkuperäinen teksti" -vihjein.
Kaikki muokkaukset ovat olemassa vain selaimen DOM:ssa, eikä niitä koskaan tallenneta palvelimelle. Päivitä sivu ja jokainen tekstielementti palautuu alkuperäiseen sisältöön. Turvallinen käyttää millä tahansa verkkosivustolla — myös tuotantosivustoilla.
Kokeile erilaisia otsikkovaihtoehtoja live-sivulla nähdäksesi, mikä sanamuoto tuntuu vahvimmalta. "Get Started Free" vs "Start Your Free Trial" vs "Create Your Account" — katso jokainen versio renderöitynä todellisella sivusuunnittelulla.
Korvaa paikkamerkkiteksti ("Lorem ipsum") asiakkaan todellisella sisällöllä esityksen aikana. Näytä heille heidän yrityksensä nimi, tuotekuvaus ja CTA-teksti renderöitynä oikeassa suunnittelussa — paljon vakuuttavampaa kuin staattinen mallinnus.
Tarvitsetko kuvakaappauksen, jossa näkyy tietty teksti dokumentaatiota, blogikirjoitusta tai esitysdiaa varten? Muokkaa teksti suoraan ja käytä sitten Kuvakaappaus-työkalua puhtaan kuvan tallentamiseen mukautetulla sisällölläsi.
Mitä tapahtuu, kun tuotteen nimi on 40 merkkiä 15:n sijaan? Tai kun kuvaus on 3 riviä yhden sijaan? Kirjoita pidempi teksti nähdäksesi, miten asettelu käsittelee sen — löydä ylivuotovirheet ennen kuin todellinen sisältö laukaisee ne.
Liitä käännetty teksti elementteihin nähdäksesi, miten suunnittelu käsittelee eri kieliä. Saksankielinen teksti on usein 30 % pidempi kuin englanninkielinen — toimiiko asettelu silti? Mahtuuko painikkeen teksti edelleen?
Avaa DevSuite Pro -kelluva telakka ja napsauta Live Text Editor -kuvaketta. Työkalu aktivoituu ja jokaisesta sivun tekstielementistä tulee napsautettava muokkausta varten.
Napsauta otsikkoa, kappaletta, painikkeen nimeä tai mitä tahansa tekstisisältöä. Kursori ilmestyy tekstiin ja "muokataan"-merkki näkyy elementin yläpuolella.
Aloita kirjoittaminen korvataksesi tai muokataksesi tekstiä. Uusi sisältö renderöityy reaaliajassa alkuperäisen tyylin säilyessä. Asettelu mukautuu luonnollisesti uuden tekstipituuden mukaan.
Napsauta nykyisen elementin ulkopuolelle lopettaaksesi sen muokkauksen, sitten napsauta toista tekstielementtiä muokataksesi sitäkin. Muokkauslaskuri seuraa kaikkia muutoksia.
Napsauta "Kumoa kaikki" palauttaaksesi jokaisen muokatun elementin, tai päivitä sivu nollataksesi kaiken täysin.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.
