Siirrä elementti antaa sinulle mahdollisuuden napsauttaa mitä tahansa verkkosivun elementtiä ja vetää sen fyysisesti uuteen sijaintiin. Testaa layoutvaihtoehtoja, prototyyppaa suunnittelumuutoksia tai järjestä sisältöä visuaalisesti uudelleen — kaikki kirjoittamatta yhtään koodiriviä. Muutokset ovat ei-destruktiivisia ja palautuvat sivun päivityksessä.
Suunnittelukeskustelut sisältävät usein "Entä jos siirsimme tämän painikkeen foldin yläpuolelle?" tai "Näyttäisikö layout paremmalta sivupalkki oikealla?" Näihin kysymyksiin vastaaminen vaatii normaalisti koodin muokkaamisen, uudelleenkäyttöönoton ja esikatselun. Siirrä elementti oikaisee koko tämän prosessin. Napsauta vain elementtiä, vedä se ja katso. Työkalu soveltaa CSS-sijaintimuutoksia elementtiin reaaliajassa, säilyttäen sen visuaalisen ulkoasun samalla kun sallii vapaan uudelleensijoittelun. Kohdistusopasviivat napsahtavat muihin elementteihin ja sivun reunoihin auttaen sijoittamaan asioita tarkasti. Haamuääriviiva merkitsee alkuperäisen sijainnin, jotta näet aina, mistä elementti tuli. Ja jos et pidä tuloksesta, kumoa palauttaa sen välittömästi. Kaikki muutokset ovat puhtaasti visuaalisia — ne elävät selaimen muistissa ja katoavat kokonaan sivun päivityksessä. Todelliset HTML- ja CSS-tiedostot eivät koskaan muutu.
Napsauta mitä tahansa sivun elementtiä — painikkeita, kuvia, tekstilohkoja, kortteja, otsikoita — ja vedä se vapaasti uuteen sijaintiin. Elementti seuraa kohdistintasi sujuvasti ilman viivettä. Toimii minkä kokoisten elementtien kanssa tahansa, pienistä kuvakkeista täysleveisiin osioihin.
Vedettäessä katkoviivaiset kohdistusviivat ilmestyvät, kun elementti kohdistuu muiden elementtien reunoihin tai sivun keskipisteeseen. Vaaka- ja pystysuorat opasviivat auttavat sijoittamaan elementtejä johdonmukaiseen ruudukkoon ilman sijainnin silmämääräistä arviointia.
Elementin alkuperäinen sijainti merkitään katkoviivaisella "haamuääriviivalla", jotta näet aina, missä se oli ennen siirtämistä. Vertaa uutta sijaintia alkuperäiseen yhdellä silmäyksellä.
Teitkö siirron, josta et pidä? Napsauta Kumoa palauttaaksesi elementin välittömästi edelliseen sijaintiinsa. Tukee useita kumoa-askeleita, joten voit kokeilla vapaasti ja peruuttaa muutoksia askel kerrallaan.
Järjestä useita elementtejä peräkkäin uudelleen. Jokainen siirto on itsenäinen ja kumottava. Rakenna täydellinen layoutjärjestely uudelleen elementti kerrallaan esikatselemalla kumulatiivisen vaikutuksen.
Kaikki muutokset ovat olemassa vain selaimen renderöinnissä. Sivun varsinaisia HTML-, CSS- ja JavaScript-tiedostoja ei koskaan kosketa. Päivitä sivu ja kaikki palaa alkuperäiseen tilaansa. Turvallinen käyttää millä tahansa verkkosivustolla.
Mietitkö, toimisiko CTA-painike paremmin foldin yläpuolella? Tai pitäisikö suositteluosio tulla ennen hinnoittelutaulukkoa? Siirrä elementtejä esikatsoaksesi eri layouteja ja tee tietoisia päätöksiä ennen kuin sitoudut koodimuutoksiin.
Live-asiakaspuhelun aikana vedä elementtejä ympäriinsä tutkiaksesi layoutvaihtoehtoja reaaliajassa. "Haluaisitko hero-kuvan vasemmalle vai oikealle?" muuttuu live-demonstraatioksi verbaalisen keskustelun sijaan.
Järjestä olemassa olevan sivun elementtejä uudelleen prototyypataksesi uuden suunnittelusuunnan. Yhdistä Live Text Editorin kanssa sisällön muuttamiseen ja Siirrä elementti -toiminnon kanssa sijaintien muuttamiseen — luoden visuaalisen prototyypin koskematta koodiin.
Jos elementit ovat odottamattomasti päällekkäin, vedä yksi pois tieltä nähdäksesi, mitä sen takana on. Tämä on usein nopeampaa kuin z-index-arvojen muuttaminen DevToolsissa, kun tarvitset vain nopean katsauksen siihen, mitä on alla.
Siirrä visuaaliset elementit vastaamaan odotettua tabulointijärjestystä. Jos visuaalinen layout ei vastaa loogista lukujärjestystä, se paljastaa mahdollisen esteettömyysongelman, jossa ruudunlukijan ja näppäimistönavigaation järjestys ei vastaa visuaalista esitystä.
Avaa DevSuite Pron kelluva telakka ja napsauta Siirrä elementti -kuvaketta. Kohdistin muuttuu siirtokuvakkeeksi osoittaen, että työkalu on aktiivinen ja valmis valitsemaan elementtejä.
Napsauta elementtiä, jonka haluat siirtää. Se saa violetilla korostetun reunuksen osoittaen, että se on valittu. Haamuääriviiva merkitsee nykyisen sijainnin.
Napsauta ja pidä valittu elementti, vedä se sitten haluttuun sijaintiin. Kohdistusopasviivat ilmestyvät lähestyessäsi muiden elementtien reunoja tai sivun keskipistettä.
Vapauta hiiri pudottaaksesi elementin uuteen sijaintiinsa. Vertaa haamuääriviivaan. Käytä Kumoa tarvittaessa tai valitse toinen elementti jatkaaksesi uudelleenjärjestelyä.
Kun olet valmis kokeilemaan, päivitä sivu palauttaaksesi kaikki elementit alkuperäisiin sijainteihins. Kaikki siirrot poistetaan kokonaan.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.
