Κάντε τον ιστότοπό σας Elementor πιο ευαίσθητο σε κινητές συσκευές

Ένας ιστότοπος που ανταποκρίνεται σε κινητές συσκευές είναι ένα ζωτικό μέρος κάθε διαδικτυακής επιχείρησης.

Η Google χρησιμοποιεί την ταχύτητα φόρτωσης σελίδας για κινητά ως καθοριστικό παράγοντα για την κατάταξη αναζήτησης οποιουδήποτε ιστότοπου. Αυτό οφείλεται κυρίως στο ότι περισσότερο από το ήμισυ της παγκόσμιας κυκλοφορίας ιστού προέρχεται από την κυκλοφορία κινητών.

Επομένως, ένας ανταποκρινόμενος ιστότοπος για κινητά είναι αναπόφευκτος τόσο για την υγεία του ιστότοπού σας όσο και για την καλύτερη κατάταξη στη μηχανή αναζήτησης Google. Σε αυτό το άρθρο, θα εστιάσουμε στο πώς μπορούμε να δημιουργήσουμε έναν ιστότοπο που ανταποκρίνεται σε κινητές συσκευές με το εργαλείο δημιουργίας σελίδων Elementor.

• Τι είναι ο σχεδιασμός ιστοσελίδων που ανταποκρίνεται στο Elementor
• Πώς να προσαρμόσετε τις ρυθμίσεις για κινητά, επιτραπέζιους υπολογιστές και καρτέλες
• Προσαρμόστε την επικεφαλίδα στην οθόνη του κινητού σας
• Προσαρμόστε την επένδυση ή τα περιθώρια για κινητά
• Δημιουργήστε κάθε στήλη οριζόντια και θα προσαρμόζεται υπέροχα σε όλες τις συσκευές
• Αλλαγή εικόνας φόντου σύμφωνα με την προβολή κινητού / επιτραπέζιου υπολογιστή
• Αλλαγή ορατότητας οποιασδήποτε ενότητας στην προβολή επιτραπέζιου / κινητού
• Αλλάξτε τη σειρά της στήλης
• Δημιουργήστε μια εναλλακτική ενότητα
• Προσαρμόστε το πλάτος της στήλης
• συμπέρασμα

Τι είναι ο σχεδιασμός ιστοσελίδων που ανταποκρίνεται στο Elementor

Μια αποκριτική διάταξη λειτουργεί καινοτόμα κλιμακώνοντας αυτόματα όλο το περιεχόμενο σύμφωνα με κάθε μέγεθος οθόνης. Αλλάζει το μέγεθος των εικόνων και του περιεχομένου στην οθόνη του κινητού, ώστε οι θεατές σας να μπορούν να δουν το περιεχόμενό σας χωρίς καμία προσπάθεια.

Οι περισσότεροι από εμάς αγοράζουν ένα θέμα που ισχυρίζεται ότι ανταποκρίνεται και σε κινητά. Ωστόσο, τα πράγματα μπορεί να είναι απογοητευτικά όταν ο σχεδιασμός του θέματός σας καταρρέει εντελώς στην οθόνη του κινητού.

Για να ξεπεράσουμε τέτοιες καταστάσεις, έχουμε καταλήξει σε μια ανταποκρινόμενη λύση για κινητά, όπου μπορείτε να δημιουργήσετε τον σχεδιασμό του ιστότοπού σας από την αρχή χρησιμοποιώντας εργαλεία απόκρισης διάταξης του εργαλείου δημιουργίας σελίδων Elementor Με τη βοήθεια αυτών των εργαλείων που αποκρίνονται για κινητά, μπορείτε να τροποποιήσετε οποιαδήποτε γωνία της διάταξης του ιστότοπού σας, ειδικά, την τυπογραφία, το padding και τη στοίχιση περιθωρίου και κινητού. Επίσης, θα μπορείτε να αλλάξετε τις ρυθμίσεις και την παραγγελία στηλών στο Κινητό.

Τώρα, μπορείτε να επεξεργαστείτε τη ρύθμιση για κινητά της σελίδας σας μεταβαίνοντας στη λειτουργία προβολής για κινητά και ελέγξτε τις ακόλουθες επιλογές για προσαρμογή σύμφωνα με τη διάταξη του κινητού.

1. Ελέγξτε αν κάποιος τίτλος φαίνεται πολύ μεγάλος σε οθόνη κινητού.
2. Ελέγξτε την επένδυση του περιεχομένου ή του χώρου στις πλευρές του περιεχομένου
3. Ελέγξτε την ευθυγράμμιση στηλών σελίδας, πώς φαίνεται τέλεια. στο κέντρο, δεξιά ή αριστερά
4. Ελέγξτε τη σειρά της στήλης, εάν εμφανίζονται με τη σωστή σειρά ή πρέπει να την αλλάξετε.

Τώρα, ας ανακαλύψουμε βαθύτερα και να μάθουμε πώς θα λειτουργήσουν τα πράγματα με το Elementor Page builder.

Πώς να προσαρμόσετε τις ρυθμίσεις για κινητά, επιτραπέζιους υπολογιστές και καρτέλες

Σχεδόν όλες οι δυνατότητες επεξεργασίας έχουν τη δυνατότητα προσαρμογής των ρυθμίσεων για κινητά, επιτραπέζιους υπολογιστές και καρτέλες. εάν κάνετε κλικ στη λειτουργία απόκρισης στο κάτω μέρος του μενού

Προσαρμόστε την επικεφαλίδα στην οθόνη του κινητού σας

Μερικές φορές θέλουμε μια τολμηρή και εξέχουσα επικεφαλίδα στον ιστότοπό μας για επιτραπέζιους υπολογιστές και φαίνεται εντάξει στην οθόνη του επιτραπέζιου υπολογιστή, αλλά όταν ενεργοποιείτε την προβολή για κινητά, η επικεφαλίδα παίρνει ολόκληρη την οθόνη και δεν φαίνεται να ταιριάζει.

Μπορείτε να προσαρμόσετε το μέγεθος κειμένου οποιουδήποτε στοιχείου κειμένου στην καρτέλα και στο κινητό. Μπορείτε επίσης να ορίσετε διαφορετικά μεγέθη κειμένου για επικεφαλίδες για κινητά που φαίνονται υπέροχα στην οθόνη του κινητού και ταιριάζουν καλύτερα στην οθόνη. Σε αυτήν τη σελίδα επίδειξης, έχω δημιουργήσει μια επικεφαλίδα που φαίνεται υπέροχη στον ιστότοπο της επιφάνειας εργασίας, ενώ στην οθόνη για κινητά διαρκεί ολόκληρη η οθόνη.

Εάν κάνω κλικ στην επιλογή επεξεργασίας της στήλης επικεφαλίδας, μπορώ να πάω στην ενότητα τυπογραφίας όπου μπορώ να προσαρμόσω το μέγεθος της επικεφαλίδας που φαίνεται ωραία στην επιφάνεια εργασίας και επίσης στην οθόνη του κινητού. Μπορώ να ελέγξω και τα δύο ξεχωριστά. Για την προβολή του ιστότοπου της επιφάνειας εργασίας μου, το μέγεθος της επικεφαλίδας είναι 49 εικονοστοιχεία, αλλά στην προβολή για κινητά, δεν χωράει

Για αναπροσαρμογή, θα κάνω κλικ στη λειτουργία απόκρισης για κινητά> στυλ> τυπογραφία> προσαρμογή του μεγέθους px σε 30 που ταιριάζει εύκολα στην οθόνη του κινητού.

Προσαρμόστε την επένδυση ή τα περιθώρια για κινητά

Κατά την προσαρμογή των paddings, συνιστάται να μην χρησιμοποιείτε τιμές σε Pixels αντί για καθορισμένες τιμές σε EM ή ποσοστό, επειδή θα διατηρήσει το μέγεθος σε σχέση με το συνολικό μέγεθος της οθόνης.

Μπορείτε να δείτε ότι χρησιμοποιήσαμε το padding ως 70px δεξιά και αριστερά, το οποίο φαίνεται καλά στον ιστότοπο της επιφάνειας εργασίας. Ωστόσο, η προβολή για κινητά για αυτήν τη ρύθμιση είναι ένα πλήρες χάος.

Μπορούμε να ρυθμίσουμε εκ νέου την επένδυση στα 17 px σε κάθε πλευρά και στη συνέχεια αποδεικνύεται εντελώς ωραία.

Εναλλακτικά, μπορείτε να ορίσετε τη ρύθμιση ολόκληρων στηλών σε 750 px όπου το περιεχόμενό σας θα εμφανίζεται σε ένα κουτί χωρίς να χρειάζεται να προσαρμόσετε την οθόνη σε επιτραπέζια ή κινητή προβολή. Θα προσαρμόσει αυτόματα το περιεχόμενο μέσα στο πλαίσιο.

Δημιουργήστε κάθε στήλη οριζόντια και θα προσαρμόζεται υπέροχα σε όλες τις συσκευές

Μόλις δημιουργήσετε μια στήλη οριζόντια, την οποία προτιμούν περισσότερο οι σχεδιαστές, τότε μπορείτε να αντιγράψετε τις ενότητες και να εξοικονομήσετε χρόνο. Δημιουργήστε μία ενότητα κάθε φορά και, στη συνέχεια, χρησιμοποιήστε την ξανά αν εξοικονομεί χρόνο.

Αλλαγή εικόνας φόντου σύμφωνα με την προβολή κινητού / επιτραπέζιου υπολογιστή

Ορισμένες εικόνες φόντου φαίνονται καλές στην προβολή της επιφάνειας εργασίας, αλλά η πιθανότητα είναι ότι η εικόνα δεν θα φαίνεται τόσο μεγαλύτερη όσο στην οθόνη του κινητού. Έτσι, σκεφτείτε δημιουργικά και επιλέξτε μια διαφορετική εικόνα στην οθόνη του κινητού. Για επιλογή διαφορετικής προβολής για κινητά, κάντε κλικ στην ενότητα> καρτέλα στυλ> κάντε κλικ στο εικονίδιο της συσκευής και επιλέξτε την προβολή για κινητά. Τώρα, όποια εικόνα και αν επιλέξετε, θα εμφανίζεται μόνο στην προβολή κινητού.

Αλλαγή ορατότητας οποιασδήποτε ενότητας στην προβολή επιτραπέζιου / κινητού

Μπορείτε επίσης να ελέγξετε την ορατότητα οποιασδήποτε ενότητας ή στήλης σύμφωνα με τη συσκευή.

Μερικές φορές, προβάλλουμε το περιεχόμενο ή τις εικόνες μας σε δύο ή τρεις ενότητες ή σε διαφορετικές στήλες, αλλά δεν θέλουμε να το εμφανίζουμε σε κινητό. Αυτός είναι ο λόγος για τον οποίο το Elementor μπορεί να αποκρύψει την ενότητα που δεν θέλετε να εμφανίζεται στην προβολή για κινητά.

Μεταβείτε στο> Ρυθμίσεις ενότητας> για προχωρημένους> αποκριτικές Εκεί θα δείτε διαφορετικές δυνατότητες ή οπτικές προτιμήσεις. Μπορείτε να αποκρύψετε την ενότητα στην επιφάνεια εργασίας, να αποκρύψετε στην καρτέλα ή να αποκρύψετε στο κινητό ανάλογα με τις προτιμήσεις σας.

Αλλάξτε τη σειρά της στήλης

Μπορείτε επίσης να αλλάξετε τη σειρά στηλών από την ενότητα ρυθμίσεων. Παω σε; Ρυθμίσεις ενότητας> Για προχωρημένους> Αποκριτική> Αντίστροφη στήλη και κάντε κλικ στο ναι.

Δημιουργήστε μια εναλλακτική ενότητα

Δημιουργήστε εναλλακτικές ενότητες σε προβολή για κινητά και επιτραπέζιους υπολογιστές. Μερικές φορές, η ενότητα ρυθμιστικών δεν φαίνεται τόσο χρήσιμη στο κινητό όσο και στην επιφάνεια εργασίας, οπότε μπορείτε να χρησιμοποιήσετε οποιαδήποτε άλλη ενότητα αντί να χρησιμοποιήσετε την ενότητα ρυθμιστικού. Μπορείτε να το κάνετε αυτό από την καρτέλα Μετάβαση για προχωρημένους> να ενεργοποιήσετε / απενεργοποιήσετε την ορατότητα της ενότητας που δεν θέλετε να εμφανίσετε και να προσθέσετε μια εναλλακτική εικόνα σε αυτήν.

Προσαρμόστε το πλάτος της στήλης

Όλες οι ενότητες στηλών έχουν πλάτος 100% όταν τις βλέπετε στην προβολή για κινητά. Ωστόσο, το πλάτος μπορεί να αλλάξει ανάλογα με το πλάτος της στήλης στο κινητό. Εάν έχετε δύο στήλες, μπορείτε να ορίσετε το μέγιστο πλάτος κάθε ενότητας σε 50%.

συμπέρασμα

Το Elementor συνοδεύεται από όλες τις ισχυρές δυνατότητες για τον έλεγχο της απόκρισης διάταξης στήλης όλων των μεγεθών οθόνης. Σας επιτρέπει να αναπροσαρμόσετε κάθε ενότητα σύμφωνα με την επιλογή τρόπου προβολής. Η διατήρηση ενός ιστότοπου φιλικού για κινητά είναι αναπόφευκτη επειδή ο αλγόριθμος Google θεωρεί την κατάταξη των ιστότοπων φιλικών προς κινητά. Οι ανταποκρινόμενοι ιστότοποι δεν είναι μόνο απαραίτητοι για τη βελτίωση του SEO, αλλά πρέπει επίσης να λάβετε περισσότερη επισκεψιμότητα, επειδή περισσότερο από το 80% της επισκεψιμότητας προέρχεται από προβολές για κινητά.

Τώρα το Elementor δημιουργός σελίδων έρχεται με αποκλειστικές δυνατότητες που επιτρέπουν στους χρήστες του να δημιουργήσουν έναν ιστότοπο φιλικό προς κινητά χωρίς πολλή προσπάθεια. Ας ελπίσουμε ότι βρίσκετε το άρθρο μου χρήσιμο και έχετε όλες τις απαντήσεις σας σχετικά με το πώς να δημιουργήσετε έναν αποκριτικό ιστότοπο χρησιμοποιώντας το Elementor.