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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Πρώτα απ 'όλα, θα πρέπει πρώτα να συνδεθείτε στον πίνακα ελέγχου του WordPress.

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

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

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

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

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

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

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

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

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

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

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

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

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

Δροσερό σωστά;

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

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

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

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

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

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

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

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

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

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

Βασικά χαρακτηριστικά του widget Elementor Nav-Menu

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

Δημιουργήστε ένα μενού με widget pro nav-menu

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

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

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

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

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

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

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

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

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

Ομοίως, υπάρχουν κινούμενα σχέδια με πλαίσιο, overline, double line, background και text. Κάθε ένα από αυτά προσφέρει το δικό του σύνολο κινούμενων σχεδίων και μπορείτε να τα ελέγξετε μόνοι σας για να μάθετε τι παίρνετε μαζί τους.

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

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

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

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

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

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

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

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

Μενού απόκρισης για κινητά

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

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

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

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

Αποκριτική πλοήγηση: Προσφέρει αποκριτική τοποθέτηση του μενού.

Τυλίγοντας

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

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