Öğe Taşı, bir web sayfasındaki herhangi bir öğeye tıklamanıza ve fiziksel olarak yeni bir konuma sürüklemenize olanak tanır. Düzen alternatiflerini test edin, tasarım değişikliklerinin prototipini oluşturun veya içeriği görsel olarak yeniden düzenleyin — hepsi tek bir kod satırı yazmadan. Değişiklikler tahribatsızdır ve sayfa yenilendiğinde sıfırlanır.
Tasarım tartışmaları genellikle "Bu düğmeyi kıvrımın üzerine taşısak nasıl olur?" veya "Düzen kenar çubuğu sağda iken daha iyi görünür mü?" gibi sorular içerir. Normalde bu soruları yanıtlamak kodu düzenlemek, yeniden dağıtmak ve önizlemek gerektirir. Öğe Taşı bu tüm süreci kısa devre yapar. Sadece öğeye tıklayın, sürükleyin ve görün. Araç, görsel görünümünü korurken serbest yeniden konumlandırmaya izin vererek öğeye gerçek zamanlı CSS konum değişiklikleri uygular. Hizalama kılavuzları diğer öğelere ve sayfa kenarlarına yapışır, her şeyi hassas bir şekilde yerleştirmenize yardımcı olur. Bir hayalet anahat orijinal konumu işaretler, böylece öğenin nereden geldiğini her zaman görebilirsiniz. Sonucu beğenmezseniz, geri al onu anında geri yükler. Tüm değişiklikler tamamen görseldir — tarayıcının belleğinde yaşarlar ve sayfa yenilemede tamamen kaybolurlar. Gerçek HTML ve CSS dosyaları asla değiştirilmez.
Sayfadaki herhangi bir öğeye tıklayın — düğmeler, resimler, metin blokları, kartlar, başlıklar — ve onu yeni bir konuma serbestçe sürükleyin. Öğe imlecinizi gecikmesiz olarak pürüzsüz bir şekilde takip eder. Küçük simgelerden tam genişlikli bölümlere kadar her boyuttaki öğelerle çalışır.
Sürüklerken, öğe diğer öğelerin kenarları veya sayfa merkezi ile hizalandığında kesik çizgili hizalama çizgileri belirir. Yatay ve dikey kılavuzlar, konumları tahmin etmeden öğeleri tutarlı bir ızgaraya yerleştirmenize yardımcı olur.
Öğenin orijinal konumu kesik çizgili bir anahat "hayaleti" ile işaretlenir, böylece taşımadan önce nerede olduğunu her zaman görebilirsiniz. Yeni konumu orijinale karşı bir bakışta karşılaştırın.
Beğenmediğiniz bir hareket mi yaptınız? Öğeyi önceki konumuna anında geri döndürmek için Geri Al'a tıklayın. Birden fazla geri alma adımını destekler, böylece özgürce deney yapabilir ve değişiklikler arasında geriye doğru ilerleyebilirsiniz.
Birkaç öğeyi sırayla yeniden düzenleyin. Her hareket bağımsızdır ve geri alınabilir. Kümülatif etkiyi önizleyerek bir seferde bir öğe olmak üzere tam bir düzen yeniden düzenlemesi oluşturun.
Tüm değişiklikler yalnızca tarayıcının oluşturulmasında mevcuttur. Sayfanın gerçek HTML, CSS ve JavaScript dosyalarına asla dokunulmaz. Sayfayı yenileyin ve her şey orijinal durumuna döner. Herhangi bir web sitesinde kullanmak güvenlidir.
CTA düğmesinin kıvrımın üzerinde daha iyi performans gösterip göstermeyeceğini mi merak ediyorsunuz? Veya referanslar bölümünün fiyatlandırma tablosundan önce gelip gelmediğini mi? Farklı düzenleri önizlemek ve kod değişikliklerine taahhüt etmeden önce bilinçli kararlar vermek için öğeleri taşıyın.
Canlı bir müşteri görüşmesi sırasında, düzen seçeneklerini gerçek zamanlı olarak keşfetmek için öğeleri sürükleyin. "Kahraman resmini solda mı yoksa sağda mı tercih edersiniz?" sözlü bir tartışma yerine canlı bir gösteriye dönüşür.
Yeni bir tasarım yönünün prototipini oluşturmak için mevcut bir sayfanın öğelerini yeniden düzenleyin. İçeriği değiştirmek için Canlı Metin Editörü ve konumları değiştirmek için Öğe Taşı ile birleştirin — herhangi bir koda dokunmadan görsel bir prototip oluşturun.
Öğeler beklenmedik şekilde örtüşüyorsa, arkasında ne olduğunu görmek için birini kenara sürükleyin. Altta ne olduğuna hızlı bir bakış atmanız gerektiğinde, bu genellikle DevTools'ta z-index değerlerini değiştirmekten daha hızlıdır.
Görsel öğeleri beklenen tab sırasına uyacak şekilde taşıyın. Görsel düzen mantıksal okuma sırasıyla eşleşmiyorsa, ekran okuyucu ve klavye gezintisinin görsel sunumla eşleşmeyeceği potansiyel bir erişilebilirlik sorununu ortaya çıkarır.
DevSuite Pro yüzen yuvasını açın ve Öğe Taşı simgesine tıklayın. İmleç bir taşı simgesine dönüşür ve bu, aracın etkin olduğunu ve öğeleri seçmeye hazır olduğunu gösterir.
Taşımak istediğiniz öğeye tıklayın. Seçildiğini gösteren mor vurgulanmış bir kenarlık alır. Bir hayalet anahat mevcut konumunu işaretler.
Seçilen öğeyi tıklayıp basılı tutun, ardından istediğiniz konuma sürükleyin. Diğer öğelerin kenarlarına veya sayfa merkezine yaklaştıkça hizalama kılavuzları görünür.
Öğeyi yeni konumuna bırakmak için fareyi serbest bırakın. Hayalet anahat ile karşılaştırın. Gerekirse Geri Al'ı kullanın veya yeniden düzenlemeye devam etmek için başka bir öğe seçin.
Deneme yapmayı bitirdiğinizde, tüm öğeleri orijinal konumlarına geri yüklemek için sayfayı yenileyin. Tüm hareketler tamamen silinir.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.
