Ο τρόπος με τον οποίο ένας χρήστης αλληλεπιδρά με το μενού πλοήγησης (header) καθορίζει την ευκολία περιήγησης σε ολόκληρο το site. Ένα "Sticky Header" (κολλημένο μενού) που παραμένει στην κορυφή κατά το σκρολάρισμα είναι απαραίτητο, αλλά πολλές φορές καταλαμβάνει πολύ χώρο στην οθόνη. Η λύση είναι το "Shrinking Header": ένα μενού που μικραίνει κομψά καθώς ο χρήστης κατεβαίνει στη σελίδα. Αυτή η τεχνική προσφέρει μια σύγχρονη αίσθηση και εξοικονομεί πολύτιμο οπτικό χώρο, ειδικά σε μικρότερες οθόνες.
Η Λειτουργικότητα πίσω από τον Σχεδιασμό
Όταν το header αλλάζει μέγεθος, δημιουργεί μια οπτική ιεραρχία. Στην αρχή, έχουμε ένα μεγάλο, εντυπωσιακό μενού με το λογότυπο σε πλήρες μέγεθος. Μόλις ξεκινήσει η πλοήγηση, το μενού "μαζεύεται", δείχνοντας στον χρήστη ότι τώρα η προτεραιότητα είναι το περιεχόμενο της σελίδας, χωρίς όμως να χάνει την πρόσβαση στα κουμπιά πλοήγησης.
Βήματα Υλοποίησης στο Divi Theme Builder
Για να το πετύχετε αυτό χωρίς κώδικα, θα χρησιμοποιήσουμε τις ενσωματωμένες "Sticky" ρυθμίσεις του Divi.
- Πρόσβαση στο Global Header: Πηγαίνετε στο Divi > Theme Builder και επεξεργαστείτε το Global Header σας.
- Ρύθμιση της Ενότητας (Section): Επιλέξτε τις ρυθμίσεις της ενότητας που περιέχει το μενού σας. Μεταβείτε στην καρτέλα Advanced > Scroll Effects. Εκεί, αλλάξτε το "Sticky Position" σε "Stick to Top".
- Αλλαγή Μεγέθους (The Magic Part): Τώρα που η ενότητα είναι "Sticky", θα παρατηρήσετε ένα εικονίδιο καρφίτσας δίπλα από τις ρυθμίσεις μεγέθους. Πηγαίνετε στην καρτέλα Design > Spacing. Κάντε κλικ στο εικονίδιο της καρφίτσας για τα "Padding" (Εσωτερικά περιθώρια).
- Ορισμός Τιμών: Στην κατάσταση "Desktop", ορίστε π.χ. 20px πάνω/κάτω. Στην κατάσταση "Sticky" (κλικάροντας την καρφίτσα), μειώστε το σε 5px.
- Λογότυπο: Κάντε το ίδιο για το module της εικόνας του λογοτύπου. Στην καρτέλα Design > Sizing, ορίστε π.χ. 100% πλάτος για το κανονικό και 70% για το "Sticky". Το Divi θα κάνει αυτόματα το smooth transition κατά το σκρολάρισμα.
Ένα δυναμικό header που ανταποκρίνεται στην κίνηση του χρήστη δίνει μια αίσθηση πολυτέλειας και προσοχής στη λεπτομέρεια. Είναι από εκείνες τις μικρές προσθήκες που κάνουν έναν επισκέπτη να νιώθει ότι βρίσκεται σε μια υψηλής ποιότητας ιστοσελίδα.
