הזזת אלמנט מאפשרת לך ללחוץ על כל אלמנט בדף אינטרנט ולגרור אותו פיזית למיקום חדש. בדוק חלופות layout, צור prototype לשינויי עיצוב, או סדר מחדש תוכן ויזואלית — הכל מבלי לכתוב אפילו שורת קוד אחת. השינויים אינם הרסניים ומתאפסים עם רענון הדף.
דיוני עיצוב כוללים לעיתים קרובות שאלות כמו "מה אם נעביר את הכפתור הזה מעל הקיפול?" או "האם ה-layout ייראה טוב יותר עם ה-sidebar בצד ימין?" בדרך כלל, המענה לשאלות אלה מצריך עריכת קוד, פריסה מחדש ותצוגה מקדימה. הזזת אלמנט מקצרת את כל התהליך הזה. פשוט לחץ על האלמנט, גרור אותו, וראה. הכלי מיישם שינויי CSS position על האלמנט בזמן אמת, תוך שמירה על מראהו הוויזואלי ומאפשר מיקום מחדש חופשי. קווי יישור נצמדים לאלמנטים אחרים ולשולי הדף, ועוזרים לך למקם דברים בדיוק. מתאר עדין מסמן את המיקום המקורי כדי שתוכל תמיד לראות מאיפה הגיע האלמנט. ואם התוצאה לא מוצאת חן בעיניך, ביטול פעולה משחזר אותה מיידית. כל השינויים הם ויזואליים בלבד — הם חיים בזיכרון הדפדפן ונעלמים לחלוטין עם רענון הדף. קובצי HTML ו-CSS בפועל לא נשתנים לעולם.
לחץ על כל אלמנט בדף — כפתורים, תמונות, בלוקי טקסט, כרטיסים, כותרות — וגרור אותו חופשית למיקום חדש. האלמנט עוקב אחר הסמן בצורה חלקה ללא עיכוב. פועל עם אלמנטים בכל גודל, מאייקונים קטנים ועד סקשנים ברוחב מלא.
בזמן הגרירה, קווי יישור מקווקווים מופיעים כאשר האלמנט מתיישר עם שולי אלמנטים אחרים או עם מרכז הדף. קווים אופקיים ואנכיים עוזרים לך למקם אלמנטים על grid עקבי ללא צורך לאמוד מרחקים בעין.
המיקום המקורי של האלמנט מסומן במתאר מקווקוו עדין כדי שתוכל תמיד לראות היכן היה לפני שהזזת אותו. השווה את המיקום החדש מול המקורי במבט אחד.
ביצעת הזזה שאינה מוצאת חן בעיניך? לחץ על Undo כדי להחזיר מיידית את האלמנט למיקומו הקודם. תומך בצעדי Undo מרובים כדי שתוכל להתנסות בחופשיות ולחזור אחורה בשינויים.
סדר מחדש מספר אלמנטים ברצף. כל הזזה עצמאית וניתנת לביטול. בנה סידור layout מלא אלמנט אחד בכל פעם, תוך צפייה באפקט המצטבר.
כל השינויים קיימים רק ברינדור של הדפדפן. קובצי HTML, CSS ו-JavaScript בפועל של הדף לא נגעים לעולם. רענן את הדף וכל דבר חוזר למצבו המקורי. בטוח לשימוש בכל אתר.
תוהה אם כפתור ה-CTA יניב תוצאות טובות יותר מעל הקיפול? או שמא סקשן העדויות צריך להופיע לפני טבלת התמחור? הזז אלמנטים כדי לראות מראש layouts שונים ולקבל החלטות מושכלות לפני שמתחייבים לשינויי קוד.
במהלך שיחת וידאו חיה עם לקוח, גרור אלמנטים לחקור אפשרויות layout בזמן אמת. "האם תעדיף את תמונת ה-hero משמאל או מימין?" הופכת להדגמה חיה במקום דיון מילולי.
סדר מחדש את האלמנטים של דף קיים כדי ליצור prototype לכיוון עיצוב חדש. שלב עם Live Text Editor לשינוי תוכן ועם הזזת אלמנט לשינוי מיקומים — ליצירת prototype ויזואלי מבלי לגעת בקוד.
אם אלמנטים חופפים באופן לא צפוי, גרור אחד הצידה כדי לראות מה מאחוריו. לעיתים קרובות זה מהיר יותר מאשר שינוי ערכי z-index ב-DevTools כשכל מה שצריך הוא מבט מהיר על מה שמתחת.
הזז אלמנטים ויזואליים כדי להתאים לסדר ה-tab הצפוי. אם ה-layout הוויזואלי אינו תואם את סדר הקריאה הלוגי, הדבר חושף בעיית נגישות פוטנציאלית שבה ניווט קורא מסך ומקלדת לא יתאים למצגת הוויזואלית.
פתח את ה-floating dock של DevSuite Pro ולחץ על אייקון הזזת אלמנט. הסמן משתנה לאייקון הזזה, המציין שהכלי פעיל ומוכן לבחור אלמנטים.
לחץ על האלמנט שברצונך להזיז. הוא מקבל גבול מודגש בסגול המציין שהוא נבחר. מתאר עדין מסמן את מיקומו הנוכחי.
לחץ והחזק את האלמנט הנבחר, ואז גרור אותו למיקום הרצוי. קווי יישור מופיעים כשאתה מתקרב לשולי אלמנטים אחרים או למרכז הדף.
שחרר את העכבר להנחת האלמנט במיקומו החדש. השווה מול המתאר העדין. השתמש ב-Undo במידת הצורך, או בחר אלמנט אחר כדי להמשיך לסדר מחדש.
כשסיימת להתנסות, רענן את הדף כדי לשחזר את כל האלמנטים למיקומם המקורי. כל ההזזות נמחקות לחלוטין.
התקן את DevSuite Pro בחינם ופתח 39+ כלי פיתוח לדפדפן שלך.
