Ο Live Text Editor κάνει κάθε στοιχείο κειμένου σε μια ιστοσελίδα επεξεργάσιμο με ένα μόνο κλικ. Αλλάξτε επικεφαλίδες, παραγράφους, ετικέτες κουμπιών, στοιχεία πλοήγησης ή οποιοδήποτε περιεχόμενο κειμένου απευθείας στη ζωντανή σελίδα — το επεξεργασμένο κείμενο αποδίδεται σε πραγματικό χρόνο με διατήρηση των αρχικών γραμματοσειρών, χρωμάτων και διάταξης. Ιδανικό για δοκιμή παραλλαγών κειμένου, δημιουργία mockups και λήψη screenshots με προσαρμοσμένο περιεχόμενο.
Πόσες φορές έχετε σκεφτεί «αναρωτιέμαι πώς θα έδειχνε αυτή η επικεφαλίδα με διαφορετική διατύπωση» ή «χρειάζομαι screenshot αυτής της σελίδας με το όνομα του πελάτη μας αντί για placeholder κείμενο»; Κανονικά αυτό σημαίνει επεξεργασία κώδικα, επαναδόμηση ή χρήση επεξεργαστή εικόνων για επικάλυψη κειμένου. Ο Live Text Editor εξαλείφει όλα αυτά — απλά κάντε κλικ σε οποιοδήποτε κείμενο στη σελίδα και αρχίστε να πληκτρολογείτε. Το κείμενο γίνεται επεξεργάσιμο εντός θέσης χρησιμοποιώντας contentEditable, που σημαίνει ότι διατηρείται όλο το αρχικό CSS styling του στοιχείου: font family, font size, font weight, χρώμα, letter-spacing, line-height, text-transform και κάθε άλλη ιδιότητα κειμένου. Η διάταξη ενημερώνεται σε πραγματικό χρόνο καθώς πληκτρολογείτε — αν το νέο κείμενο είναι μεγαλύτερο, το στοιχείο επεκτείνεται φυσικά. Επεξεργαστείτε όσα στοιχεία κειμένου θέλετε σε μία συνεδρία. Ένας μετρητής επεξεργασίας παρακολουθεί πόσα στοιχεία έχετε αλλάξει, και το «Αναίρεση Όλων» επαναφέρει τα πάντα αμέσως. Όλες οι αλλαγές είναι μόνο οπτικές και επαναφέρονται κατά την ανανέωση σελίδας.
Κάντε κλικ σε οποιοδήποτε στοιχείο κειμένου στη σελίδα — επικεφαλίδες, παράγραφοι, spans, ετικέτες κουμπιών, κείμενο συνδέσμων, στοιχεία λίστας, κελιά πίνακα — και γίνεται αμέσως επεξεργάσιμο. Εμφανίζεται αναλαμπή δρομέα και μπορείτε να αρχίσετε να πληκτρολογείτε. Δεν απαιτείται λειτουργία επιλογής ή επιπλέον κλικ.
Το επεξεργασμένο κείμενο διατηρεί κάθε αρχική ιδιότητα CSS: font-family, font-size, font-weight, χρώμα, line-height, letter-spacing, text-transform και ιδιότητες διάταξης. Το κείμενο μοιάζει ακριβώς σαν να ανήκει στη σελίδα — όχι σαν χοντροειδής επικάλυψη.
Καθώς πληκτρολογείτε μεγαλύτερο ή μικρότερο κείμενο, το στοιχείο αλλάζει μέγεθος φυσικά και η γύρω διάταξη αναδιαμορφώνεται όπως θα έκανε με πραγματικό περιεχόμενο. Δείτε ακριβώς πώς διαφορετικά μήκη κειμένου επηρεάζουν τη διάταξη.
Επεξεργαστείτε όσα στοιχεία κειμένου θέλετε σε μία συνεδρία. Αλλάξτε την επικεφαλίδα, μετά τον υπότιτλο, μετά την ετικέτα κουμπιού, μετά το κείμενο υποσελίδου — κάθε επεξεργασία παραμένει μέχρι να ανανεώσετε τη σελίδα.
Ένας μικρός μετρητής δείχνει πόσα στοιχεία έχετε επεξεργαστεί. Το «Αναίρεση Όλων» επαναφέρει κάθε επεξεργασμένο στοιχείο στο αρχικό του κείμενο με ένα κλικ. Οι μεμονωμένες αλλαγές παρακολουθούνται με υποδείξεις «ήταν: αρχικό κείμενο».
Όλες οι επεξεργασίες υπάρχουν μόνο στο DOM του προγράμματος περιήγησης και δεν αποθηκεύονται ποτέ στον server. Ανανεώστε τη σελίδα και κάθε στοιχείο κειμένου επιστρέφει στο αρχικό του περιεχόμενο. Ασφαλές σε κάθε ιστότοπο — συμπεριλαμβανομένων των production sites.
Δοκιμάστε διαφορετικές παραλλαγές επικεφαλίδων στη ζωντανή σελίδα για να δείτε ποια διατύπωση είναι πιο δυνατή. «Ξεκινήστε Δωρεάν» vs «Ξεκινήστε τη Δωρεάν Δοκιμή σας» vs «Δημιουργήστε τον Λογαριασμό σας» — δείτε κάθε έκδοση αποδοσμένη με το πραγματικό σχεδιασμό σελίδας.
Αντικαταστήστε το placeholder κείμενο («Lorem ipsum») με το πραγματικό περιεχόμενο του πελάτη κατά τη διάρκεια παρουσίασης. Δείξτε τους το όνομα της εταιρείας τους, την περιγραφή προϊόντος και το CTA copy αποδοσμένα στον πραγματικό σχεδιασμό — πολύ πιο πειστικό από ένα στατικό mockup.
Χρειάζεστε screenshot που δείχνει συγκεκριμένο κείμενο για τεκμηρίωση, blog post ή διαφάνεια παρουσίασης; Επεξεργαστείτε το κείμενο απευθείας, μετά χρησιμοποιήστε το εργαλείο Screenshot για να καταγράψετε μια καθαρή εικόνα με το προσαρμοσμένο περιεχόμενό σας.
Τι συμβαίνει όταν ένα όνομα προϊόντος έχει 40 χαρακτήρες αντί για 15; Ή όταν μια περιγραφή έχει 3 γραμμές αντί για 1; Πληκτρολογήστε μεγαλύτερο κείμενο για να δείτε πώς το χειρίζεται η διάταξη — βρείτε σφάλματα overflow πριν τα ενεργοποιήσει πραγματικό περιεχόμενο.
Επικολλήστε μεταφρασμένο κείμενο σε στοιχεία για να δείτε πώς ο σχεδιασμός χειρίζεται διαφορετικές γλώσσες. Το γερμανικό κείμενο είναι συχνά 30% μεγαλύτερο από το αγγλικό — εξακολουθεί να λειτουργεί η διάταξη; Χωράει ακόμα το κείμενο του κουμπιού;
Ανοίξτε το floating dock του DevSuite Pro και κάντε κλικ στο εικονίδιο Live Text Editor. Το εργαλείο ενεργοποιείται και κάθε στοιχείο κειμένου στη σελίδα γίνεται κλικέτο για επεξεργασία.
Κάντε κλικ σε επικεφαλίδα, παράγραφο, ετικέτα κουμπιού ή οποιοδήποτε περιεχόμενο κειμένου. Εμφανίζεται δρομέας στο κείμενο και εμφανίζεται σήμα «επεξεργασία» πάνω από το στοιχείο.
Αρχίστε να πληκτρολογείτε για να αντικαταστήσετε ή να τροποποιήσετε το κείμενο. Το νέο περιεχόμενο αποδίδεται σε πραγματικό χρόνο με διατήρηση του αρχικού styling. Η διάταξη προσαρμόζεται φυσικά για να φιλοξενήσει το νέο μήκος κειμένου.
Κάντε κλικ έξω από το τρέχον στοιχείο για να ολοκληρώσετε την επεξεργασία του, μετά κάντε κλικ σε άλλο στοιχείο κειμένου για να το επεξεργαστείτε επίσης. Ο μετρητής επεξεργασίας παρακολουθεί όλες τις αλλαγές.
Κάντε κλικ στο «Αναίρεση Όλων» για να επαναφέρετε κάθε επεξεργασμένο στοιχείο, ή ανανεώστε τη σελίδα για να επαναφέρετε τα πάντα εντελώς.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
