Liiguta Elementi laseb sul klõpsata mis tahes elemendil veebilehel ja seda füüsiliselt uude positsiooni lohistada. Testi paigutuse alternatiive, prototüübi disaini muudatusi või korralda sisu visuaalselt ümber — kõik ilma ühegi koodirea kirjutamata. Muudatused pole purustavad ja nullitakse lehe värskendamisel.
Disainiarutelud sisaldavad sageli küsimusi nagu "Mis siis, kui liigutame selle nupu üle voldi?" või "Kas paigutus näeks parem välja külgribaga paremal?" Tavaliselt nõuab nendele küsimustele vastamine koodi muutmist, ümberpaigutamist ja eelvaate vaatamist. Liiguta Elementi lühistab kogu selle protsessi. Lihtsalt klõpsa elemendil, lohista seda ja vaata. Tööriist rakendab elemendile reaalajas CSS positsioonimuudatusi, säilitades selle visuaalse välimuse, võimaldades vaba repositsioneerimist. Joonduse juhised haakuvad teiste elementide ja lehe äärtega, aidates sul asju täpselt paigutada. Tont kontuur märgib algse positsiooni, et alati näeksid, kust element tuli. Ja kui sulle tulemus ei meeldi, taastab tühistamine selle koheselt. Kõik muudatused on puhtalt visuaalsed — need elavad brauseri mälus ja kaovad täielikult lehe värskendamisel. Tegelikke HTML ja CSS faile ei muudeta kunagi.
Klõpsa mis tahes elemendil lehel — nuppudel, piltidel, tekstiplokkidel, kaartidel, päistel — ja lohista seda vabalt uude positsiooni. Element järgneb sinu kursorile sujuvalt ilma viivituseta. Töötab mis tahes suurusega elementidega, alates väikestest ikoonidest kuni täislaiusega sektsioonideni.
Lohistades ilmuvad katkendlikud joonduse jooned, kui element joondub teiste elementide äärte või lehe keskmega. Horisontaalsed ja vertikaalsed juhised aitavad sul elemente järjepidevale ruudustikule paigutada ilma positsioone silma järgi hindamata.
Elemendi algne positsioon on tähistatud katkendliku kontuuriga "tondina", et alati näeksid, kus see oli enne, kui sa selle liigutasid. Võrdle uut positsiooni algsega ühe pilguga.
Tegid liigutuse, mis sulle ei meeldi? Klõpsa Tühista, et koheselt element oma eelmisesse positsiooni tagasi viia. Toetab mitut tühistamise sammu, et saaksid vabalt eksperimenteerida ja muudatustes tagasi astuda.
Korraldä mitut elementi järjest ümber. Iga liigutus on iseseisev ja tühistatav. Ehita üles täielik paigutuse ümberkorraldus üks element korraga, eelvaadates kumulatiivset efekti.
Kõik muudatused eksisteerivad ainult brauseri renderdamises. Lehe tegelikke HTML, CSS ja JavaScripti faile ei puudutata. Värskenda lehte ja kõik naaseb oma algseisu. Turvaline kasutada mis tahes veebilehel.
Mõtled, kas CTA nupp toimib üle voldi paremini? Või kas iseloomustuste sektsioon peaks tulema enne hinnakuju tabelit? Liiguta elemente, et eelvaadata erinevaid paigutusi ja teha teadlikke otsuseid enne koodimuudatustele pühendumist.
Reaalse kliendikõne ajal lohista elemente, et uurida paigutuse võimalusi reaalajas. "Kas eelistaksid hero pilti vasakul või paremal?" muutub elavaks demonstratsiooniks suulise arutelu asemel.
Korraldä olemasoleva lehe elemente ümber, et prototüüpida uut disaini suunda. Kombineeri Live Tekstiredaktoriga, et muuta sisu, ja Liiguta Elementi positsioonide muutmiseks — luues visuaalse prototüübi ilma koodi puudutamata.
Kui elemendid ootamatult kattuvad, lohista üks eemale, et näha, mis selle taga on. See on sageli kiirem kui z-index väärtuste muutmine DevTools-is, kui sul on vaja vaid kiirelt vaadata, mis allpool on.
Liiguta visuaalseid elemente, et need vastaksid oodatavale tab järjekorrale. Kui visuaalne paigutus ei vasta loogilisele lugemisjärjekorrale, paljastab see võimaliku ligipääsetavuse probleemi, kus ekraanilugeja ja klaviatuurinavigatsioon ei vasta visuaalsele esitlusele.
Ava DevSuite Pro hõljuv dokk ja klõpsa Liiguta Elementi ikoonil. Kursor muutub liigutamise ikooniks, näidates, et tööriist on aktiivne ja valmis elemente valima.
Klõpsa elemendil, mida tahad liigutada. See saab lilla esiletõstetud äärise, mis näitab, et see on valitud. Tont kontuur märgib selle praeguse positsiooni.
Klõpsa ja hoia valitud elementi, seejärel lohista see soovitud asukohta. Joonduse juhised ilmuvad, kui sa teiste elementide äärtele või lehe keskele lähened.
Vabasta hiir, et element uude positsiooni kukutada. Võrdle tont kontuuri vastu. Kasuta vajadusel Tühista, või vali teine element ümberkorraldamise jätkamiseks.
Kui oled eksperimenteerimise lõpetanud, värskenda lehte, et kõik elemendid oma algsetesse positsioonidesse taastada. Kõik liigutused kustutatakse täielikult.
Paigaldage DevSuite Pro tasuta ja avage 39+ arendustööriista oma brauserile.
