Η εμφάνιση του ιστότοπού σας σε κινητά και tablet
Δείτε πώς φαίνεται το κατάστημά σας σε tablet και κινητά, κρύψτε μπλοκ σε μικρές οθόνες και ρυθμίστε τη θέση ενός μπλοκ μόνο για ένα μέγεθος οθόνης.
Οι περισσότεροι αγοραστές επισκέπτονται ένα κατάστημα από κινητό, οπότε οι σελίδες σας πρέπει να λειτουργούν σε κάθε μέγεθος. Σχεδιάζετε μία φορά, και το Payly προσαρμόζει τη σελίδα για tablet και κινητά. Αυτό το άρθρο εξηγεί τι συμβαίνει αυτόματα και πώς να το αλλάξετε όταν θέλετε ένα μπλοκ να συμπεριφέρεται διαφορετικά σε μικρότερη οθόνη.
Πώς προσαρμόζεται η διάταξή σας
Τα μπλοκ βρίσκονται μέσα σε κελιά ενός πλέγματος 12 στηλών, και ποτέ σε σταθερές θέσεις σε pixel, οπότε δεν μπορούν να επικαλυφθούν σε μικρή οθόνη. Η σελίδα αλλάζει διάταξη σε δύο σημεία:
- Tablet (οθόνες με πλάτος μικρότερο από 1024 pixel) διατηρούν το ίδιο πλέγμα. Ένα μπλοκ μένει όπου είναι, εκτός αν το μετακινήσετε για τα tablet.
- Κινητά (760 pixel ή λιγότερο) βάζουν κάθε μπλοκ στη δική του γραμμή, σε πλήρες πλάτος. Τα μπλοκ στοιβάζονται από πάνω προς τα κάτω με τη σειρά που τα διαβάζετε στον υπολογιστή: από πάνω προς τα κάτω, και μετά από αριστερά προς τα δεξιά.
Ορισμένα μπλοκ προσαρμόζονται ακόμη περισσότερο. Οι σύνδεσμοι της κεφαλίδας συμπτύσσονται πίσω από ένα κουμπί μενού, τα πλέγματα γίνονται μία στήλη, και οι γκαλερί και οι λωρίδες λογότυπων εμφανίζουν δύο στήλες. Το αποτέλεσμα είναι ένα κατάστημα που λειτουργεί σε κινητό χωρίς καμία επιπλέον ρύθμιση.
Αλλάξτε ανάμεσα σε μεγέθη οθόνης
- Στην επάνω γραμμή του επεξεργαστή, κάντε κλικ στο Tablet ή στο Κινητό. Η σελίδα στενεύει για να δείξει πώς φαίνεται σε εκείνο το μέγεθος.
- Εξετάστε τη σελίδα για ό,τι δεν διαβάζεται καλά. Κάντε κύλιση και επιλέγετε μπλοκ όπως συνήθως.
- Κάντε κλικ στο Υπολογιστής για να επιστρέψετε στη διάταξη πλήρους μεγέθους.
Αυτά τα κουμπιά κάνουν κάτι περισσότερο από προεπισκόπηση. Επιλέγουν επίσης ποια διάταξη επεξεργάζεστε. Όταν μεταβαίνετε στο Tablet ή στο Κινητό, ένα μήνυμα σας υπενθυμίζει ότι οι αλλαγές ισχύουν μόνο για εκείνο το μέγεθος. Ό,τι αλλάξετε εκεί δεν επηρεάζει τη διάταξη του υπολογιστή.
Κρύψτε ένα μπλοκ σε μικρές οθόνες
Μια μεγάλη φωτογραφία ή ένα μακρύ διακοσμητικό μπλοκ μπορεί να γεμίσει ένα κινητό. Μπορείτε να το κρύψετε σε μικρές οθόνες και να το αφήσετε στον υπολογιστή.
- Κάντε κλικ στο Κινητό (ή στο Tablet) στην επάνω γραμμή.
- Επιλέξτε το μπλοκ.
- Στο πάνελ ρυθμίσεων, ανοίξτε το Μέγεθος και θέση.
- Ενεργοποιήστε το Απόκρυψη σε κινητό (ή το Απόκρυψη σε tablet). Το μπλοκ εξαφανίζεται από εκείνη την προβολή και δεν αφήνει κενό διάστημα στη ζωντανή σελίδα.
Ένα μπλοκ κρυμμένο στα tablet είναι κρυμμένο και στα κινητά, εκτός αν απενεργοποιήσετε ξανά τον διακόπτη ενώ βλέπετε το Κινητό. Για να κρύψετε ένα μπλοκ σε κάθε οθόνη, χρησιμοποιήστε το Απόκρυψη αυτού του μπλοκ στον Υπολογιστή.
Τοποθετήστε ένα μπλοκ διαφορετικά σε ένα μέγεθος
- Επιλέξτε Tablet ή Κινητό στην επάνω γραμμή.
- Επιλέξτε το μπλοκ και ανοίξτε το Μέγεθος και θέση.
- Αλλάξτε το Αρχίζει από τη στήλη, το Πλάτος σε στήλες, το Αρχίζει από τη γραμμή ή το Ύψος σε γραμμές, ή κάντε κλικ στο Γέμισμα όλου του πλάτους. Μπορείτε επίσης να σύρετε και να αλλάξετε το μέγεθος του μπλοκ πάνω στη σελίδα.
Η γραμμή στο πάνω μέρος του Μέγεθος και θέση δείχνει ποια διάταξη επεξεργάζεστε. Εμφανίζει Κληρονομείται όσο το μπλοκ ακολουθεί το μεγαλύτερο μέγεθος, και ένα κουμπί Επαναφορά όταν το μπλοκ έχει δικές του ρυθμίσεις. Κάντε κλικ στο Επαναφορά για να ακολουθεί ξανά το μεγαλύτερο μέγεθος. Κάντε κλικ στο Χρήση αυτής της διάταξης σε όλες τις οθόνες για να αντιγράψετε την τρέχουσα διάταξη σε κάθε μέγεθος.
Η επάνω γραμμή μετράει επίσης τα μπλοκ που διαφέρουν από τη διάταξη του υπολογιστή, για παράδειγμα 1 μπλοκ διαφέρει στο κινητό. Κάντε κλικ στον αριθμό για να μεταβείτε από ένα τέτοιο μπλοκ στο επόμενο.
Κρατήστε ένα μπλοκ ίδιο σε κάθε οθόνη
Ενεργοποιήστε το Ίδια σε όλες τις οθόνες στο Μέγεθος και θέση για να αποκτήσει ένα μπλοκ μία διάταξη παντού. Όποιες ρυθμίσεις είχε για tablet ή κινητό αφαιρούνται, και οι μεταγενέστερες αλλαγές ισχύουν για όλα τα μεγέθη ταυτόχρονα.
Σημείωση: Η μετακίνηση ενός μπλοκ σε άλλη ενότητα το αλλάζει σε κάθε μέγεθος οθόνης, γι' αυτό το Payly το επιτρέπει μόνο στον Υπολογιστή. Για να τοποθετήσετε ένα μπλοκ διαφορετικά στα κινητά, προσθέστε το και στις δύο ενότητες, και κρύψτε εκείνο που δεν θέλετε σε κάθε μέγεθος.
Ελέγξτε το αποτέλεσμα
Χρησιμοποιήστε την Προεπισκόπηση για να περάσετε από τις σελίδες σας σε πλάτος κινητού και tablet, και δείτε το δημοσιευμένο κατάστημα σε πραγματικό κινητό πριν το ανακοινώσετε. Δείτε Προεπισκόπηση του ιστότοπού σας πριν από τη δημοσίευση.