جابهجایی عنصر به شما اجازه میدهد روی هر عنصر در یک صفحه وب کلیک کنید و آن را فیزیکی به موقعیت جدیدی بکشید. گزینههای چیدمان را آزمایش کنید، تغییرات طراحی را نمونهسازی کنید یا محتوا را بصری مرتب کنید — همه بدون نوشتن یک خط کد.
بحثهای طراحی اغلب شامل «اگر این دکمه را بالاتر منتقل کنیم چه میشود؟» یا «اگر sidebar در سمت راست باشد چیدمان بهتر به نظر میرسد؟» میشوند. جابهجایی عنصر این فرایند را کوتاه میکند. فقط روی عنصر کلیک کنید، آن را بکشید و ببینید. همه تغییرات کاملاً بصری هستند — در حافظه مرورگر زندگی میکنند و با refresh صفحه کاملاً ناپدید میشوند.
روی هر عنصر در صفحه کلیک کنید — دکمهها، تصاویر، بلوکهای متن، کارتها، header ها — و آن را آزادانه به موقعیت جدیدی بکشید.
هنگام کشیدن، خطوط تراز خطچین ظاهر میشوند وقتی عنصر با لبههای عناصر دیگر یا مرکز صفحه تراز میشود.
موقعیت اصلی عنصر با یک outline خطچین «ghost» مشخص میشود تا همیشه بتوانید ببینید قبل از جابهجایی کجا بود.
جابهجاییای انجام دادید که دوست ندارید؟ روی Undo کلیک کنید تا عنصر فوراً به موقعیت قبلی برگردد. از چندین مرحله undo پشتیبانی میکند.
چندین عنصر را به ترتیب مرتب کنید. هر جابهجایی مستقل و قابل undo است. یک مرتبسازی کامل چیدمان را یک عنصر در یک زمان بسازید.
همه تغییرات فقط در رندر مرورگر وجود دارند. فایلهای واقعی HTML، CSS و JavaScript صفحه هرگز لمس نمیشوند. صفحه را refresh کنید و همه چیز به حالت اصلی برمیگردد.
تعجب میکنید آیا دکمه CTA بهتر است بالاتر باشد؟ یا آیا بخش نظرات باید قبل از جدول قیمتگذاری بیاید؟ عناصر را جابهجا کنید تا چیدمانهای مختلف را پیشنمایش کنید.
در یک تماس زنده با مشتری، عناصر را بکشید تا گزینههای چیدمان را در زمان واقعی کاوش کنید. «آیا تصویر hero را ترجیح میدهید در چپ یا راست باشد؟» به یک نمایش زنده تبدیل میشود.
عناصر صفحه موجود را مرتب کنید تا یک جهت طراحی جدید را نمونهسازی کنید. با Live Text Editor ترکیب کنید برای تغییر محتوا و جابهجایی عنصر برای تغییر موقعیتها.
اگر عناصر بهطور غیرمنتظره روی هم قرار گرفتهاند، یکی را کنار بکشید تا ببینید پشت آن چیست. این اغلب سریعتر از تغییر مقادیر z-index در DevTools است.
عناصر بصری را برای تطابق با ترتیب tab مورد انتظار جابهجا کنید. اگر چیدمان بصری با ترتیب خواندن منطقی تطابق ندارد، یک مشکل دسترسپذیری بالقوه را آشکار میکند.
داک شناور DevSuite Pro را باز کنید و روی آیکون جابهجایی عنصر کلیک کنید. مکاننما به آیکون جابهجایی تغییر میکند.
روی عنصری که میخواهید جابهجا کنید کلیک کنید. یک حاشیه بنفش برجسته نشان میدهد که انتخاب شده. یک outline ghost موقعیت فعلی را مشخص میکند.
عنصر انتخابشده را کلیک و نگه دارید، سپس به مکان مورد نظر بکشید. راهنماهای تراز با نزدیک شدن به لبههای سایر عناصر ظاهر میشوند.
موس را رها کنید تا عنصر در موقعیت جدید قرار گیرد. با outline ghost مقایسه کنید. در صورت نیاز از Undo استفاده کنید.
وقتی آزمایش تمام شد، صفحه را refresh کنید تا همه عناصر به موقعیتهای اصلی بازگردند.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.
