Κάντε τον ιστότοπό σας Elementor πιο φιλικό προς τα κινητά

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

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

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

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

Τι είναι ο responsive σχεδιασμός ιστότοπου της Elementor

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

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

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

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

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

Τώρα, ας ψάξουμε πιο βαθιά και ας μάθουμε πώς θα πάνε τα πράγματα με το 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.