Ένας ανταποκρινόμενος ιστότοπος για κινητά είναι ζωτικό μέρος οποιασδήποτε διαδικτυακής επιχείρησης.
Η Google χρησιμοποιεί την ταχύτητα φόρτωσης σελίδων για κινητά ως βασικό καθοριστικό παράγοντα για την κατάταξη αναζήτησης οποιουδήποτε ιστότοπου. Αυτό οφείλεται κυρίως στο ότι περισσότερο από το ήμισυ της παγκόσμιας επισκεψιμότητας στον ιστό προέρχεται από την κίνηση από κινητά.
Επομένως, ένας ανταποκρινόμενος ιστότοπος για κινητά είναι αναπόφευκτος τόσο για την υγεία του ιστότοπού σας όσο και για την καλύτερη κατάταξη στη μηχανή αναζήτησης Google. Σε αυτό το άρθρο, θα εστιάσουμε στο πώς μπορούμε να δημιουργήσουμε έναν ιστότοπο που αποκρίνεται για κινητά με το εργαλείο δημιουργίας σελίδων Elementor.
Μια διάταξη με απόκριση λειτουργεί καινοτόμα, προσαρμόζοντας αυτόματα όλο το περιεχόμενο σύμφωνα με κάθε μέγεθος οθόνης. Αλλάζει αυτόματα το μέγεθος των εικόνων και του περιεχομένου στην οθόνη του κινητού, έτσι ώστε οι θεατές σας να μπορούν να δουν το περιεχόμενό σας χωρίς καμία προσπάθεια.
Οι περισσότεροι από εμάς αγοράζουμε ένα θέμα που ισχυρίζεται ότι ανταποκρίνεται και σε κινητά. Ωστόσο, τα πράγματα μπορεί να είναι απογοητευτικά όταν η σχεδίαση του θέματός σας καταρρέει εντελώς στην οθόνη του κινητού.
Για να ξεπεράσουμε τέτοιες καταστάσεις, έχουμε καταλήξει σε μια ανταποκρινόμενη λύση για κινητά, όπου μπορείτε να δημιουργήσετε τον σχεδιασμό του ιστότοπού σας από την αρχή χρησιμοποιώντας του εργαλείου δημιουργίας σελίδων Elementor . Με τη βοήθεια αυτών των εργαλείων που ανταποκρίνονται σε κινητά, μπορείτε να τροποποιήσετε οποιαδήποτε γωνία της διάταξης του ιστότοπού σας, ιδίως, την τυπογραφία, το padding και τη στοίχιση περιθωρίου και κινητού. Επίσης, θα μπορείτε να αλλάξετε τις ρυθμίσεις και την παραγγελία στηλών στο Κινητό.
Τώρα, μπορείτε να επεξεργαστείτε τη ρύθμιση της σελίδας σας για κινητά μεταβαίνοντας στη λειτουργία προβολής για κινητά και να ελέγξετε τις ακόλουθες επιλογές για προσαρμογή σύμφωνα με τη διάταξη του κινητού.
Τώρα, ας ψάξουμε πιο βαθιά και ας μάθουμε πώς θα πάνε τα πράγματα με το Elementor Page Builder.
Σχεδόν όλες οι επεξεργάσιμες λειτουργίες έχουν την επιλογή προσαρμογής των ρυθμίσεων για φορητές συσκευές, επιτραπέζιους υπολογιστές και καρτέλες. εάν κάνετε κλικ στη λειτουργία απόκρισης στο κάτω μέρος του μενού
Μερικές φορές θέλουμε μια τολμηρή και εμφανή επικεφαλίδα στον ιστότοπό μας για επιτραπέζιους υπολογιστές και φαίνεται τέλεια στην οθόνη της επιφάνειας εργασίας, αλλά όταν ενεργοποιείτε την προβολή Mobile, η επικεφαλίδα καταλαμβάνει ολόκληρη την οθόνη και δεν φαίνεται να ταιριάζει.
Μπορείτε να προσαρμόσετε το μέγεθος κειμένου οποιουδήποτε στοιχείου κειμένου στην καρτέλα και στο Κινητό. Μπορείτε επίσης να ορίσετε διαφορετικά μεγέθη κειμένου για επικεφαλίδες κινητών που φαίνονται υπέροχα στην οθόνη του κινητού και ταιριάζουν καλύτερα στην οθόνη. Σε αυτήν τη δοκιμαστική σελίδα, έχω δημιουργήσει μια επικεφαλίδα που φαίνεται υπέροχη στον ιστότοπο για επιτραπέζιους υπολογιστές, ενώ στην οθόνη του κινητού καταλαμβάνει ολόκληρη την οθόνη.
Εάν κάνω κλικ στην επιλογή επεξεργασίας της στήλης επικεφαλίδας, μπορώ να μεταβώ στην ενότητα τυπογραφίας όπου μπορώ να προσαρμόσω το μέγεθος της επικεφαλίδας που φαίνεται ωραία στην επιφάνεια εργασίας και επίσης στην οθόνη του κινητού. Μπορώ να ελέγξω και τα δύο χωριστά. Για την προβολή του ιστότοπού μου για επιτραπέζιους υπολογιστές, το μέγεθος της επικεφαλίδας είναι 49 εικονοστοιχεία, αλλά στην προβολή για κινητά, δεν ταιριάζει
Για επαναπροσαρμογή, θα κάνω κλικ στη λειτουργία απόκρισης για κινητά > στυλ > τυπογραφία > προσαρμόσω το μέγεθος px σε 30 που ταιριάζει εύκολα στην οθόνη του κινητού.
Κατά την προσαρμογή των paddings, συνιστάται να μην χρησιμοποιείτε τιμές σε Pixel αντί για καθορισμένες τιμές σε EM ή ποσοστό, επειδή θα διατηρήσει το μέγεθος σε σχέση με το συνολικό μέγεθος οθόνης.
Μπορείτε να δείτε ότι χρησιμοποιήσαμε padding ως 70px δεξιά και αριστερά, κάτι που φαίνεται καλά στον ιστότοπο για υπολογιστές. Ωστόσο, η προβολή για κινητά για αυτήν τη ρύθμιση είναι ένα πλήρες χάος.
Μπορούμε να προσαρμόσουμε ξανά το padding στα 17 px σε κάθε πλευρά, τότε αποδεικνύεται ότι είναι εντελώς εντάξει.
Εναλλακτικά, μπορείτε να ορίσετε τη ρύθμιση ολόκληρων στηλών στα 750 px, όπου το περιεχόμενό σας θα εμφανίζεται σε ένα πλαίσιο χωρίς να χρειάζεται να ρυθμίσετε την οθόνη τόσο σε επιτραπέζιο υπολογιστή όσο και σε προβολή κινητού. θα προσαρμόσει αυτόματα το περιεχόμενο μέσα στο πλαίσιο.
Αφού δημιουργήσετε τη στήλη οριζόντια, την οποία προτιμούν περισσότερο οι σχεδιαστές, μπορείτε να αντιγράψετε τις ενότητες και να εξοικονομήσετε χρόνο. Δημιουργήστε μία ενότητα τη φορά και, στη συνέχεια, επαναχρησιμοποιήστε την εάν πάει καλά για να εξοικονομήσετε χρόνο.
Ορισμένες εικόνες φόντου φαίνονται καλές στην προβολή επιφάνειας εργασίας, αλλά η πιθανότητα είναι ότι η εικόνα δεν θα φαίνεται τόσο μεγαλύτερη όσο στην οθόνη του κινητού. Έτσι, σκεφτείτε δημιουργικά και επιλέξτε μια διαφορετική εικόνα στην οθόνη του κινητού. Για να επιλέξετε διαφορετική προβολή για κινητά, κάντε κλικ στην ενότητα > καρτέλα στυλ > κάντε κλικ στο εικονίδιο της συσκευής και επιλέξτε την προβολή για κινητά. Τώρα, όποια εικόνα κι αν επιλέξετε, θα εμφανίζεται μόνο στην προβολή κινητού.
Μπορείτε επίσης να ελέγξετε την ορατότητα οποιουδήποτε τμήματος ή στήλης ανάλογα με τη συσκευή.
Μερικές φορές, εμφανίζουμε το περιεχόμενο ή τις εικόνες μας σε δύο ή τρεις ενότητες ή διαφορετικές στήλες, αλλά δεν μας αρέσει να το προβάλλουμε στο Κινητό. Αυτός είναι ο λόγος για τον οποίο το Elementor μπορεί να αποκρύψει την ενότητα που δεν σας αρέσει να εμφανίζεται στην προβολή για κινητά.
Μεταβείτε στο > ρυθμίσεις ενότητας > προχωρημένους >ανταποκρίνεται Εκεί θα δείτε διαφορετικές δυνατότητες ή οπτικές προτιμήσεις. μπορείτε να αποκρύψετε την ενότητα στην επιφάνεια εργασίας, να την αποκρύψετε στην καρτέλα ή να την αποκρύψετε στο Κινητό ανάλογα με τις προτιμήσεις σας.
Μπορείτε επίσης να αλλάξετε τη σειρά στηλών από την ενότητα ρυθμίσεων. Μετάβαση στο? ρυθμίσεις ενότητας> Για προχωρημένους > Απόκριση > Αντίστροφη στήλη και κάντε κλικ στο Ναι.
Δημιουργήστε εναλλακτικές ενότητες σε προβολή για κινητά και επιτραπέζιους υπολογιστές. Μερικές φορές, η ενότητα του ρυθμιστικού δεν φαίνεται τόσο χρήσιμη στο κινητό όσο στον επιτραπέζιο υπολογιστή, επομένως μπορείτε να χρησιμοποιήσετε οποιαδήποτε άλλη ενότητα αντί να χρησιμοποιήσετε την ενότητα ρυθμιστικού. Μπορείτε να το κάνετε αυτό μεταβείτε στην καρτέλα Για προχωρημένους > ενεργοποιήστε / απενεργοποιήστε την ορατότητα της ενότητας που δεν θέλετε να εμφανιστεί και προσθέστε μια εναλλακτική εικόνα σε αυτήν.
Όλες οι ενότητες στηλών αποκτούν πλάτος 100% όταν τις προβάλλετε στην προβολή για κινητά. Ωστόσο, το πλάτος μπορεί να αλλάξει ανάλογα με το πλάτος της στήλης στο Κινητό. Εάν έχετε δύο στήλες, μπορείτε να ορίσετε το μέγιστο πλάτος κάθε ενότητας στο 50%.
Το Elementor διαθέτει όλα τα ισχυρά χαρακτηριστικά για τον έλεγχο της διάταξης στήλης που αποκρίνεται σε όλα τα μεγέθη οθόνης. Σας επιτρέπει να προσαρμόσετε εκ νέου κάθε ενότητα σύμφωνα με την επιλογή της λειτουργίας προβολής. Η διατήρηση ενός ιστοτόπου φιλικού προς κινητά είναι αναπόφευκτη επειδή ο αλγόριθμος της Google εξετάζει περισσότερο την κατάταξη ιστοτόπων φιλικών προς κινητά. Οι ανταποκρινόμενοι ιστότοποι δεν είναι μόνο απαραίτητοι για τη βελτίωση του SEO, αλλά πρέπει επίσης να έχετε περισσότερη επισκεψιμότητα, επειδή περισσότερο από το 80% της επισκεψιμότητας προέρχεται από προβολές από κινητά.
Τώρα το πρόγραμμα δημιουργίας σελίδων Elementor διαθέτει αποκλειστικές δυνατότητες που επιτρέπουν στους χρήστες του να δημιουργούν έναν ιστότοπο φιλικό για κινητά χωρίς μεγάλη προσπάθεια. Ας ελπίσουμε ότι το άρθρο μου θα σας φανεί χρήσιμο και θα έχετε όλες τις απαντήσεις σας σχετικά με τον τρόπο δημιουργίας ενός ανταποκρινόμενου ιστότοπου χρησιμοποιώντας το Elementor.
Οι κεφαλίδες και τα υποσέλιδα ενός ιστότοπου είναι απαραίτητα στοιχεία. Στις περισσότερες περιπτώσεις, η Κεφαλίδα παρέχει πλοήγηση…
Δύο από τα πιο δημοφιλή θέματα WordPress στην αγορά είναι το Astra και το OceanWP. Επαγγελματίας…
Η δημιουργία μιας εξαιρετικής ιστοσελίδας ειδήσεων δεν απαιτεί να γίνετε σχεδιαστής ιστοσελίδων. Εμείς…
Το θέμα εφημερίδας είναι ένα από τα πιο σημαντικά θέματα WordPress που σχεδιάστηκε από την tagDiv, μια…
Όταν πρόκειται για τη δημιουργία ενός ηλεκτρονικού καταστήματος, το WooCommerce είναι η πιο δημοφιλής plugin . Το…
Μια κεφαλίδα είναι γενικά το πρώτο πράγμα που βλέπει ένα άτομο όταν επισκέπτεται τον ιστότοπό σας,…
Προβολή σχολίων
Świetny post! Bardzo odpowiada na moje potrzeby. Stworzyłam stronę ale widok mobilny mi się rozjechał. Dziękuję za wskazówki. Są bardzo pomocne 🙂
Σούπερ! Nie mogłam samodzielnie znaleźć 2 rzeczy o których piszecie - zmiana kolejności kolumn i wyłączenie widoczności sekcji. Wielkie dzięki za pomoc :)
Γεια, για να αλλάξετε τη σειρά στηλών, μπορείτε να χρησιμοποιήσετε απευθείας το drag'n drop ή την εξερεύνηση ενότητας. Σχετικά με την ορατότητα είναι η σύνθετη ρύθμιση της ενότητας, θα πρέπει να απενεργοποιήσετε την ορατότητα του υπολογιστή, του tablet και του κινητού.
πώς να κάνω responsive padding;
Γεια, το padding δεν ανταποκρίνεται ακριβώς, αυτή είναι μια σταθερή τιμή. Εάν αντιμετωπίζετε πρόβλημα απόκρισης, πρέπει να ορίσετε διαφορετική τιμή padding για επιτραπέζιο υπολογιστή, tablet και τηλέφωνο