Μενού πλοήγησης Elementor – Δημιουργήστε ένα εκπληκτικό μενού για τον ιστότοπό σας στο WordPress

Αναζητάτε έναν τρόπο να δημιουργήσετε ένα εκπληκτικό μενού που θα σας βοηθήσει να βελτιώσετε το UI/UX του ιστότοπού σας; Αν ναι, τότε βρίσκεστε στο σωστό μέρος. Εδώ έχουμε συγκεντρώσει έναν λεπτομερή οδηγό για να σας βοηθήσουμε.

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

Πίνακας περιεχομένων:

• Γιατί χρειάζεστε ένα προσαρμοσμένο μενού πλοήγησης;
• Δημιουργήστε ένα βασικό μενού WordPress χρησιμοποιώντας το Elementor
• 1. Δημιουργήστε ένα απλό μενού για τον ιστότοπό σας στο WordPress
• 2. Επιλέξτε και προσαρμόστε τα στοιχεία του μενού πλοήγησης
• 3. Δημιουργία υπομενού – Στοιχεία μενού γονέων και παιδιών (Προαιρετικό)
• 4. Διαχειριστείτε τη θέση του μενού σας και δημοσιεύστε
• Πώς να δημιουργήσετε ένα μενού πλοήγησης χρησιμοποιώντας το γραφικό στοιχείο Elementor pro nav'
• Βασικά χαρακτηριστικά του γραφικού στοιχείου του μενού Elementor Nav
• Δημιουργήστε ένα μενού με το γραφικό στοιχείο nav-menu pro
• Μενού που ανταποκρίνεται σε κινητά
• Τυλίγοντας

Γιατί χρειάζεστε ένα προσαρμοσμένο μενού πλοήγησης;

Είναι σημαντικό να γνωρίζετε ότι τα μενού πλοήγησης είναι σημαντικά όχι μόνο για την επισκεψιμότητα στον ιστότοπό σας αλλά και για την καλύτερη κατάταξη SEO.

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

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

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

Εν ολίγοις, η "ευκολία πλοήγησης" συμβάλλει καθοριστικά στην ενίσχυση της καλύτερης εμπειρίας χρήστη, καθώς επίσης παίζει σημαντικό ρόλο στην ενίσχυση της κατάταξης του ιστότοπού μας και στην αύξηση της επισκεψιμότητας.

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

Χάρη στο γραφικό στοιχείο Elementor pro με ένα μενού πλοήγησης με απόκριση 100%, μπορείτε να δημιουργήσετε μια τέλεια pixel και απίστευτα ευέλικτη γραμμή μενού χωρίς τη χρήση κώδικα.

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

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

Δημιουργήστε ένα βασικό μενού WordPress χρησιμοποιώντας το Elementor

Τώρα, για να δημιουργήσετε ένα μενού WordPress, δεν χρειάζεται να εγκαταστήσετε ειδικά plugin . Από προεπιλογή, το WordPress διαθέτει ένα εύκολο στη χρήση πρόγραμμα δημιουργίας μενού, το οποίο θα σας βοηθήσει να δημιουργήσετε απλά μενού πλοήγησης για τον ιστότοπό σας.

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

1. Δημιουργήστε ένα απλό μενού για τον ιστότοπό σας στο WordPress

Πρώτα πράγματα πρώτα, θα χρειαστεί να συνδεθείτε στον πίνακα ελέγχου υποστήριξης του WordPress.

Τώρα, από την αριστερή πλαϊνή γραμμή, μεταβείτε στην επιλογή Εμφάνιση > Μενού . Εδώ θα βρείτε μια διάταξη δύο στηλών με "Προσθήκη στοιχείων μενού" στα αριστερά και "Δομή μενού" στα δεξιά.

Στην ενότητα Δομή μενού, θα βρείτε ένα πεδίο για το "Όνομα μενού". Αυτό θα είναι το όνομα για το μενού που θα δημιουργήσουμε αυτήν τη στιγμή. Ας το ονομάσουμε Μενού 1.

Σημείωση : Μην ανησυχείτε. Οι αναγνώστες σας δεν θα μπορούν να δουν τα ονόματα των Μενού. Είναι μια δυνατότητα που σας βοηθά να κρατάτε οργανωμένα όλα τα διαφορετικά μενού σας.

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

2. Επιλέξτε και προσαρμόστε τα στοιχεία του μενού πλοήγησης

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

Από προεπιλογή, αυτό περιέχει οποιαδήποτε από τις σελίδες, τις αναρτήσεις, τις σελίδες προορισμού, τους προσαρμοσμένους συνδέσμους και τις κατηγορίες σας.

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

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

Μόλις ολοκληρώσετε την προσθήκη όλων των στοιχείων μενού, πατήστε το κουμπί "Αποθήκευση μενού" και προχωρήστε στο επόμενο βήμα.

3. Δημιουργία υπομενού – Στοιχεία μενού γονέων και παιδιών (Προαιρετικό)

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

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

Cool σωστά;

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

4. Διαχειριστείτε τη θέση του μενού σας και δημοσιεύστε

Τώρα που δημιουργήσατε το νέο σας μενού και προσθέσατε υπομενού, ήρθε η ώρα να διαχειριστείτε την τοποθεσία του.

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

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

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

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

Πώς να δημιουργήσετε ένα μενού πλοήγησης χρησιμοποιώντας το γραφικό στοιχείο Elementor pro nav'

Εάν θέλετε να προσθέσετε ένα προσαρμοσμένο μενού πλοήγησης στον ιστότοπό σας στο WordPress, θα χρειαστείτε την έκδοση Elementor Pro. Η έκδοση Elementor Pro συνοδεύεται από γραφικό στοιχείο πλοήγησης Elementor μαζί με πολλές άλλες ειδικές δυνατότητες, όπως 300+ πρότυπα, ένα πρόγραμμα δημιουργίας θεμάτων, ένα αναδυόμενο γραφικό στοιχείο, γραφικά στοιχεία WooCommerce και πολλά άλλα ενδιαφέροντα χαρακτηριστικά.

Ποια είναι τα συγκεκριμένα βασικά χαρακτηριστικά του ίδιου του γραφικού στοιχείου Nav Menu; Εδώ είναι μια σύντομη εισαγωγή.

Βασικά χαρακτηριστικά του γραφικού στοιχείου του μενού Elementor Nav

• Το γραφικό στοιχείο Nav-menu σάς δίνει την ελευθερία να τοποθετήσετε το μενού σας οπουδήποτε θέλετε. Στην κεφαλίδα σας ή στην κορυφή ή οπουδήποτε στη σελίδα σας.
• Μπορείτε να προσθέσετε πολλά μενού στον ιστότοπό σας και επίσης στις σελίδες σας ξεχωριστά ή καθολικά.
• Δώστε μια εκθαμβωτική εμφάνιση στο μενού σας χρησιμοποιώντας κινούμενα σχέδια, εφέ αιώρησης ή ενεργή κατάσταση
• Δημιουργήστε ένα αποκριτικό μενού για κινητά του ιστότοπού σας και ελέγξτε πώς θα φαίνεται ο ιστότοπός σας στις οθόνες κινητών
• Προσαρμόστε το χρώμα, την τυπογραφία και το padding ή άλλες προσαρμογές της γραμμής μενού σας
• Δημιουργήστε ένα μενού τέλειο για pixel με τη σωστή ακρίβεια στοίχισης, απόστασης και πλήρωσης.

Δημιουργήστε ένα μενού με το γραφικό στοιχείο nav-menu pro

Θα χρειαστεί να δημιουργήσετε ένα βασικό μενού WordPress όπως αναφέραμε παραπάνω και στη συνέχεια θα προσαρμόσετε το προεπιλεγμένο μενού του WordPress χρησιμοποιώντας το γραφικό στοιχείο pro-nav-menu. Αφού δημιουργήσετε την κύρια λίστα, τότε το επόμενο βήμα είναι να την προσθέσετε στην επιθυμητή θέση, δηλαδή στην ενότητα Κεφαλίδα.

Τώρα, όταν τελειώσετε με τις βασικές ρυθμίσεις, ας προσαρμόσουμε το μενού χρησιμοποιώντας το γραφικό στοιχείο nav-menu.

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

Η ενότητα Διάταξη : έχετε τρεις επιλογές Οριζόντια, κάθετη ή κρυφό αναπτυσσόμενο ακορντεόν.

• Οριζόντια: Η οριζόντια διάταξη είναι η πιο κοινή διάταξη που χρησιμοποιείται από τους ιστότοπους. Απλώνεται σε όλη την οθόνη από την κατεύθυνση από αριστερά προς τα δεξιά.
• Κάθετη: Θα βρείτε επίσης μια κάθετη διάταξη σε πολλούς ιστότοπους, ειδικά σε ιστότοπους που προσφέρουν δημιουργικές υπηρεσίες. Στην περίπτωση κάθετης διάταξης, η εξάπλωση της γραμμής πλοήγησης θα είναι από πάνω προς τα κάτω.
• Αναπτυσσόμενο μενού: Τα αναπτυσσόμενα μενού είναι επίσης αρκετά κοινά. Τα αναπτυσσόμενα μενού έχουν κατακόρυφη διάταξη και απαιτούν αλληλεπίδραση με τον χρήστη για να αποκαλυφθούν. Χρησιμοποιούνται κυρίως για τη δημιουργία καθαρού σχεδίου.

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

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

Τα υπογραμμισμένα κινούμενα σχέδια είναι τα εξής:

• Fade: Το fade animation προσφέρει fade animation κάτω από τα στοιχεία μενού.
• Διαφάνεια: Το κινούμενο σχέδιο διαφανειών σύρει τη γραμμή κάτω από τα στοιχεία μενού.
• Grow : Το animation grow μεγαλώνει από τη μέση προς τα έξω και δίνει μια αίσθηση ανάπτυξης.
• Drop in : Η πτώση στα κινούμενα σχέδια ρέει από κάτω προς τα πάνω.
• Drop out: Το Drop out κινούμενο σχέδιο ρέει από πάνω προς τα κάτω.

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

Ενότητα δείκτη : επιλέξτε τον τύπο δείκτη από το αναπτυσσόμενο μενού.

Ενότητα ένδειξης υπομενού : το γραφικό στοιχείο Elementor είναι γεμάτο με πολλές επιλογές στυλ υπομενού. Όπου μπορείτε όχι μόνο να ελέγξετε το χρώμα, το στυλ, αλλά και το φόντο του μενού.

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

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

Η απόσταση μενού προσφέρει πολλές επιλογές, όπως:

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

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

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

Μενού που ανταποκρίνεται σε κινητά

Το κινητό είναι ένα σημαντικό μέρος του ιστού και γι' αυτό οι προγραμματιστές του Elementor παρέχουν επίσης εργαλεία για να μπορείτε να δημιουργήσετε τη γραμμή πλοήγησης και για το κινητό.

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

Εν ολίγοις, οι δυνατότητες του μενού για κινητά του Elementor είναι οι παρακάτω:

• Πλήρες πλάτος σε κινητά: Έχετε την επιλογή να ορίσετε επίσης πλήρες πλάτος ή περιορισμένο πλάτος.
• Σημεία διακοπής για tablet ή κινητά: Μπορείτε να χρησιμοποιήσετε τις ρυθμίσεις σημείου διακοπής για να ορίσετε το μενού για κινητά για κινητά ή tablet.
• Μενού κάθετα και ακορντεόν: Το Elementor προσφέρει επίσης την επιλογή εμφάνισης ενός πτυσσόμενου εικονιδίου χάμπουργκερ.
• Εναλλαγή στοίχισης: Το εικονίδιο χάμπουργκερ μπορεί να ευθυγραμμιστεί στο κέντρο, αριστερά ή δεξιά.
• Στοίχιση εκτός/κέντρου: Επιλέξτε τη στοίχιση του μενού του κινητού.

Responsive navigation: Προσφέρει απόκριση τοποθέτησης του μενού.

Τυλίγοντας

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

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