Η Μετακίνηση Στοιχείου σάς επιτρέπει να κάνετε κλικ σε οποιοδήποτε στοιχείο μιας ιστοσελίδας και να το σύρετε σε νέα θέση. Δοκιμάστε εναλλακτικές διατάξεις, δημιουργήστε πρωτότυπα αλλαγών σχεδίασης, ή αναδιατάξτε οπτικά το περιεχόμενο — όλα χωρίς να γράψετε μια γραμμή κώδικα. Οι αλλαγές είναι μη καταστροφικές και επαναφέρονται με ανανέωση σελίδας.
Οι συζητήσεις σχεδίασης συχνά περιλαμβάνουν ερωτήσεις όπως τι γίνεται αν μετακινήσουμε αυτό το κουμπί πάνω από το fold ή αν η διάταξη θα φαινόταν καλύτερα με το sidebar στα δεξιά. Κανονικά, η απάντηση αυτών των ερωτήσεων απαιτεί επεξεργασία κώδικα, επανανάπτυξη και προεπισκόπηση. Η Μετακίνηση Στοιχείου παρακάμπτει αυτή την όλη διαδικασία. Απλά κάντε κλικ στο στοιχείο, σύρετέ το και δείτε. Το εργαλείο εφαρμόζει αλλαγές CSS position στο στοιχείο σε πραγματικό χρόνο, διατηρώντας την οπτική εμφάνισή του ενώ επιτρέπει ελεύθερη αναθέση θέσης. Οδηγοί ευθυγράμμισης συγχρονίζονται με άλλα στοιχεία και άκρες σελίδας. Ένα ghost περίγραμμα σηματοδοτεί την αρχική θέση. Όλες οι αλλαγές είναι καθαρά οπτικές — εξαφανίζονται με ανανέωση της σελίδας.
Κάντε κλικ σε οποιοδήποτε στοιχείο στη σελίδα — κουμπιά, εικόνες, μπλοκ κειμένου, κάρτες, κεφαλίδες — και σύρετέ το ελεύθερα σε νέα θέση. Το στοιχείο ακολουθεί τον κέρσορα ομαλά χωρίς υστέρηση. Λειτουργεί με στοιχεία οποιουδήποτε μεγέθους.
Κατά τη μεταφορά, εμφανίζονται διακεκομμένες γραμμές ευθυγράμμισης όταν το στοιχείο ευθυγραμμίζεται με άκρες άλλων στοιχείων ή το κέντρο σελίδας. Οριζόντιοι και κατακόρυφοι οδηγοί σάς βοηθούν να τοποθετείτε στοιχεία σε συνεπές grid.
Η αρχική θέση του στοιχείου επισημαίνεται με διακεκομμένο περίγραμμα ghost ώστε να μπορείτε πάντα να βλέπετε πού ήταν πριν το μετακινήσετε. Συγκρίνετε τη νέα θέση με την αρχική με μια ματιά.
Κάνατε μια μετακίνηση που δεν σας αρέσει; Κάντε κλικ στο Undo για επαναφορά του στοιχείου στην προηγούμενη θέση. Υποστηρίζει πολλαπλά βήματα undo ώστε να πειραματίζεστε ελεύθερα.
Αναδιατάξτε διάφορα στοιχεία διαδοχικά. Κάθε μετακίνηση είναι ανεξάρτητη και αναιρέσιμη. Χτίστε μια πλήρη αναδιάταξη διάταξης ένα στοιχείο τη φορά, με προεπισκόπηση του συνολικού αποτελέσματος.
Όλες οι αλλαγές υπάρχουν μόνο στην απόδοση του browser. Τα πραγματικά αρχεία HTML, CSS και JavaScript της σελίδας δεν αγγίζονται ποτέ. Ανανεώστε τη σελίδα και τα πάντα επιστρέφουν στην αρχική τους κατάσταση.
Αναρωτιέστε αν το κουμπί CTA θα αποδίδει καλύτερα πάνω από το fold; Ή αν η ενότητα με τα testimonials πρέπει να έρθει πριν τον πίνακα τιμολόγησης; Μετακινήστε στοιχεία για προεπισκόπηση διαφορετικών διατάξεων πριν δεσμευτείτε σε αλλαγές κώδικα.
Κατά τη διάρκεια ζωντανής κλήσης με πελάτη, σύρετε στοιχεία για εξερεύνηση επιλογών διάταξης σε πραγματικό χρόνο. Η ερώτηση αν προτιμά την εικόνα ήρωα αριστερά ή δεξιά γίνεται ζωντανή επίδειξη αντί για λεκτική συζήτηση.
Αναδιατάξτε τα στοιχεία μιας υπάρχουσας σελίδας για δημιουργία πρωτοτύπου νέας κατεύθυνσης σχεδίασης. Συνδυάστε με τον Ζωντανό Επεξεργαστή Κειμένου για αλλαγή περιεχομένου και τη Μετακίνηση Στοιχείου για αλλαγή θέσεων.
Αν στοιχεία επικαλύπτονται απρόσμενα, σύρετε ένα από τη μέση για να δείτε τι βρίσκεται από πίσω. Αυτό είναι συχνά πιο γρήγορο από την αλλαγή τιμών z-index στα DevTools όταν χρειάζεστε απλώς μια γρήγορη ματιά.
Μετακινήστε οπτικά στοιχεία για αντιστοίχιση με την αναμενόμενη σειρά tab. Αν η οπτική διάταξη δεν ταιριάζει με τη λογική σειρά ανάγνωσης, αποκαλύπτεται πιθανό ζήτημα προσβασιμότητας όπου η πλοήγηση με screen reader και πληκτρολόγιο δεν θα ταιριάζει με την οπτική παρουσίαση.
Ανοίξτε το floating dock του DevSuite Pro και κάντε κλικ στο εικονίδιο Μετακίνησης Στοιχείου. Ο κέρσορας αλλάζει σε εικονίδιο μετακίνησης, δηλώνοντας ότι το εργαλείο είναι ενεργό και έτοιμο να επιλέξει στοιχεία.
Κάντε κλικ στο στοιχείο που θέλετε να μετακινήσετε. Λαμβάνει μωβ επισημασμένο περίγραμμα δείχνοντας ότι έχει επιλεγεί. Ένα ghost περίγραμμα σηματοδοτεί την τρέχουσα θέση του.
Κάντε κλικ και κρατήστε το επιλεγμένο στοιχείο, στη συνέχεια σύρετέ το στην επιθυμητή τοποθεσία. Οδηγοί ευθυγράμμισης εμφανίζονται καθώς πλησιάζετε τις άκρες άλλων στοιχείων ή το κέντρο σελίδας.
Αφήστε το ποντίκι για απόθεση του στοιχείου στη νέα θέση. Συγκρίνετε με το ghost περίγραμμα. Χρησιμοποιήστε Undo αν χρειαστεί, ή επιλέξτε άλλο στοιχείο για να συνεχίσετε αναδιάταξη.
Όταν τελειώσετε με τα πειράματα, ανανεώστε τη σελίδα για επαναφορά όλων των στοιχείων στις αρχικές τους θέσεις. Όλες οι μετακινήσεις σβήνονται πλήρως.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
