تتيح لك ميزة "تحريك العنصر" النقر فوق أي عنصر في صفحة الويب وسحبه فعليًا إلى موضع جديد. اختبر بدائل التخطيط، أو النماذج الأولية لتغييرات التصميم، أو أعد ترتيب المحتوى مرئيًا — كل ذلك دون كتابة سطر واحد من التعليمات البرمجية. التغييرات غير مدمرة ويتم إعادتها إلى وضعها الأصلي عند تحديث الصفحة.
غالبًا ما تتضمن مناقشات التصميم "ماذا لو قمنا بنقل هذا الزر فوق الجزء المرئي؟" أو "هل سيبدو التخطيط أفضل مع وجود الشريط الجانبي على اليمين؟" عادةً، تتطلب الإجابة على هذه الأسئلة تحرير الكود، وإعادة النشر، والمعاينة. أداة "تحريك العنصر" تختصر هذه العملية برمتها. فقط انقر على العنصر واسحبه لترى النتيجة. تطبق الأداة تغييرات موضع CSS على العنصر في الوقت الفعلي، مع الحفاظ على مظهره المرئي مع السماح بتغيير موضعه بحرية. تلتقط أدلة المحاذاة العناصر الأخرى وحواف الصفحة، مما يساعدك في وضع الأشياء بدقة. يحدد المخطط الشبحي الموضع الأصلي بحيث يمكنك دائمًا معرفة من أين أتى العنصر. وإذا لم تعجبك النتيجة، فإن ميزة التراجع تستعيدها فورًا. جميع التغييرات مرئية بحتة — فهي موجودة في ذاكرة المتصفح وتختفي تمامًا عند تحديث الصفحة. ولا يتم تعديل ملفات HTML و CSS الفعلية أبدًا.
انقر فوق أي عنصر في الصفحة — أزرار، صور، كتل نصية، بطاقات، ترويسات — واسحبه بحرية إلى موضع جديد. يتبع العنصر مؤشرك بسلاسة دون تأخير. يعمل مع عناصر بأي حجم، من الأيقونات الصغيرة إلى أقسام العرض الكامل.
أثناء السحب، تظهر خطوط محاذاة متقطعة عندما يتحاذى العنصر مع حواف العناصر الأخرى أو مركز الصفحة. تساعدك الأدلة الأفقية والعمودية في وضع العناصر على شبكة متسقة دون تخمين المواضع.
يتم تحديد الموضع الأصلي للعنصر بمخطط متقطع "شبح" حتى تتمكن دائمًا من رؤية المكان الذي كان فيه قبل أن تنقله. قارن الموقع الجديد مع الموقع الأصلي بلمحة سريعة.
هل قمت بخطوة لا تعجبك؟ انقر فوق "تراجع" لإرجاع العنصر فورًا إلى موضعه السابق. يدعم خطوات تراجع متعددة حتى تتمكن من التجربة بحرية والرجوع خطوات إلى الوراء عن التغييرات.
أعد ترتيب عدة عناصر بالتسلسل. كل حركة مستقلة ويمكن التراجع عنها. قم ببناء إعادة ترتيب كاملة للتخطيط عنصرًا تلو الآخر، مع معاينة التأثير التراكمي.
جميع التغييرات موجودة فقط في عرض المتصفح. لا يتم المساس بملفات HTML و CSS و JavaScript الفعلية للصفحة. قم بتحديث الصفحة وسيعود كل شيء إلى حالته الأصلية. آمن للاستخدام على أي موقع.
أتتساءل عما إذا كان زر اتخاذ الإجراء (CTA) سيؤدي أداءً أفضل فوق الجزء المرئي؟ أو ما إذا كان يجب أن يسبق قسم آراء العملاء جدول الأسعار؟ حرك العناصر لمعاينة تخطيطات مختلفة واتخاذ قرارات مستنيرة قبل الالتزام بتغييرات في الكود البرمجي.
أثناء مكالمة عميل حية، اسحب العناصر لاستكشاف خيارات التخطيط في الوقت الفعلي. يتحول سؤال "هل تفضل صورة البطل على اليسار أم اليمين؟" إلى عرض حي بدلاً من مناقشة شفهية.
أعد ترتيب عناصر صفحة حالية لعمل نموذج أولي لاتجاه تصميم جديد. ادمج بين محرر النص المباشر لتغيير المحتوى وتحريك العنصر لتغيير المواضع — لإنشاء نموذج أولي مرئي دون لمس أي كود.
إذا كانت العناصر تتداخل بشكل غير متوقع، فاسحب أحدهما بعيدًا لمعرفة ما خلفه. غالبًا ما يكون هذا أسرع من تغيير قيم z-index في أدوات المطور (DevTools) عندما تريد ببساطة إلقاء نظرة سريعة على العناصر الموجودة أسفله.
حرك العناصر المرئية لتتطابق مع ترتيب الجدولة (Tab) المتوقع. إذا كان التخطيط المرئي لا يتطابق مع ترتيب القراءة المنطقي، فإنه يكشف عن مشكلة محتملة في إمكانية الوصول حيث لن يتطابق قارئ الشاشة وتنقل لوحة المفاتيح مع العرض المرئي.
افتح اللوحة العائمة لـ DevSuite Pro وانقر على أيقونة "تحريك العنصر". يتغير المؤشر إلى أيقونة تحريك، مشيرًا إلى أن الأداة نشطة وجاهزة لتحديد العناصر.
انقر على العنصر الذي تريد تحريكه. يحصل على حد أرجواني مبرز ليوضح أنه تم تحديده. يحدد مخطط شبحي موضعه الحالي.
انقر باستمرار على العنصر المحدد، ثم اسحبه إلى الموقع المطلوب. تظهر أدلة المحاذاة كلما اقتربت من حواف العناصر الأخرى أو مركز الصفحة.
حرر الماوس لإسقاط العنصر في موضعه الجديد. قارن مع المخطط الشبحي. استخدم التراجع إذا لزم الأمر، أو حدد عنصرًا آخر للاستمرار في إعادة الترتيب.
عند الانتهاء من تجربتك، قم بتحديث الصفحة لاستعادة جميع العناصر إلى مواقعها الأصلية. يتم مسح جميع التحركات بالكامل.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 39 أداة للمطورين لمتصفحك.
