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

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

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

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

Θα σας δείξουμε πώς να δημιουργήσετε την κολλώδη κεφαλίδα σας χρησιμοποιώντας το Elementor σε αυτό το σεμινάριο.

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

• Βήμα 1: Δημιουργία μενού
• Βήμα 2: Δημιουργία της κεφαλίδας σας στο Elementor
• Βήμα 3: Χρησιμοποιώντας το Elementor για να δημιουργήσετε ένα πρότυπο κεφαλίδας
• ΒΗΜΑ 4: Πώς να κάνετε την κεφαλίδα του Elementor σας κολλώδη
• Βήμα 5: προσαρμόστε το CSS μας
• Σύναψη

Βήμα 1: Δημιουργία μενού

Για να προσθέσετε μια σταθερή κεφαλίδα στον ιστότοπό σας, μεταβείτε στο wp-admin > Εμφάνιση > Μενού και δημιουργήστε ένα Κύριο μενού. Στην κεφαλίδα, πληκτρολογήστε την ενότητα που θέλετε να εμφανίσετε.

Βήμα 2: Δημιουργία της κεφαλίδας σας στο Elementor

Μεταβείτε στο Elementor Templates > Theme Builder όταν ολοκληρώσετε την κατασκευή του κύριου μενού. Επιλέξτε την περιοχή Κεφαλίδα στη σελίδα δημιουργίας θεμάτων και κάντε κλικ στην « Προσθήκη νέας κεφαλίδας ».

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

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

Θα ξεκινήσουμε από την αρχή με την κολλώδη κεφαλίδα Elementor σε αυτό το σεμινάριο.

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

Βήμα 3: Χρησιμοποιώντας το Elementor για να δημιουργήσετε ένα πρότυπο κεφαλίδας

Δημιουργήστε μια διάταξη δύο στηλών. Βεβαιωθείτε ότι το πλάτος περιεχομένου της ενότητας έχει οριστεί σε " Πλαίσιο ".

Στις ρυθμίσεις πλάτους περιεχομένου στην ενότητα Elementor Edit, ορίστε το πλάτος της πρώτης στήλης στο 20% κάτω από τη στήλη " Επεξεργασία ".

Τοποθετήστε το λογότυπο ιστότοπου του ιστότοπού σας στην πρώτη στήλη και ευθυγραμμίστε το προς τα αριστερά.

Προσθέστε ένα μενού πλοήγησης στη δεύτερη στήλη και επιλέξτε το κύριο μενού που δημιουργήσατε στο βήμα 1. Ευθυγραμμίστε το μενού πλοήγησης προς τα δεξιά.

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

ΒΗΜΑ 4: Πώς να κάνετε την κεφαλίδα του Elementor σας κολλώδη

Τώρα που δημιουργήσαμε τη βασική μας κεφαλίδα Elementor, ήρθε η ώρα να τη μετατρέψουμε σε Sticky κεφαλίδα.

Για να το κάνετε αυτό, μεταβείτε στην ενότητα Επεξεργασία (Ενότητα ολόκληρης της κεφαλίδας). Επιλέξτε Advanced > Motion Effects από το αναπτυσσόμενο μενού.

Επιλέξτε « sticky to the Top » κάτω από τα εφέ κίνησης και μετά « συσκευές » όπου θέλετε να εμφανίζεται η κολλώδης κεφαλίδα.

Μια κολλώδης κεφαλίδα είναι σχεδόν πάντα ανεπιθύμητη σε συσκευές μεγέθους tablet και σχεδόν πάντα ανεπιθύμητη σε οθόνες κινητών. Ως αποτέλεσμα, κάντε κλικ στο "x" δίπλα στις δύο επιλογές στην περιοχή Sticky On, αφήνοντας επιλεγμένο μόνο το "Desktop".

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

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

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

Όπως μπορείτε να δείτε, η χρήση του Elementor για τη δημιουργία της προσωπικής σας Sticky κεφαλίδας είναι απλή και ανώδυνη!

Κάντε την κολλώδη κεφαλίδα Elementor σας να φαίνεται πολύ καλύτερη Χρησιμοποιώντας το προσαρμοσμένο CSS Elementor σάς επιτρέπει να προσαρμόσετε μια κολλώδη κεφαλίδα προσθέτοντας μια κλάση CSS για να την κάνετε πιο κομψή.

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

Επιστρέψτε στην περιοχή Επεξεργασία για να κάνετε την κολλώδη κεφαλίδα σας πιο κομψή (Ολόκληρη η ενότητα κεφαλίδας). Επιλέξτε Advanced > Motion Effects από το αναπτυσσόμενο μενού.

ρυθμίστε το " Εφέ μετατόπισης " στο 100. Όταν ένας επισκέπτης χρησιμοποιεί τον ιστότοπό σας, αυτή είναι η απόσταση κύλισης όπου συμβαίνει το εφέ κύλισης.

Ρυθμίστε τη μετατόπιση κίνησης στο 100.

Λάβετε υπόψη ότι οι επιλογές Offset Effects θα λειτουργήσουν μόνο εάν χρησιμοποιείται προσαρμοσμένο CSS. Συνεπώς, εάν δεν προσθέτετε κάποιο δικό σας προσαρμοσμένο CSS, μπορείτε να παραλείψετε την τελευταία επιλογή.

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

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

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

Ακολουθήστε τις διαδικασίες που περιγράφονται παρακάτω για να συμπεριλάβετε το προσαρμοσμένο CSS:

• Για να αποκτήσετε πρόσβαση στο μενού χάμπουργκερ, εντοπίστε το στην επάνω αριστερή γωνία του μενού Elementor και επιλέξτε το.
• Επιλέξτε Επιλογή στυλ θέματος από το αναπτυσσόμενο μενού κάτω από την ενότητα Καθολικό στυλ.
• Επιλέξτε Προσαρμοσμένο CSS από το αναπτυσσόμενο μενού σε αυτήν την ενότητα (το χρώμα θα αλλάξει σε μπλε από το προηγούμενο γενετικό κόκκινο χρώμα του).

Μετά από αυτό, επικολλήστε τον κώδικα CSS παρακάτω.

header.sticky-header { --header-height: 90px; --αδιαφάνεια: 0,90; --shrink-me: 0,80; --κολλώδες χρώμα φόντου: #0e41e5; --μετάβαση: 0,3s ευκολία-σε-έξω? μετάβαση: φόντο χρώματος var(--transition), background-image var(--transition), backdrop-filter var(--transition), opacity var(--transition); } header.sticky-header.elementor-sticky--effects { background-color: var(--sticky-background-color) ; φόντο-εικόνα: κανένας ; αδιαφάνεια: var(--αδιαφάνεια) ; -webkit-backdrop-filter: blur(10px); Backdrop-φίλτρο: blur(10px); } header.sticky-header > .elementor-container { transition: min-height var(--transition); } header.sticky-header.elementor-sticky--effects > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me)); ύψος: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item { transition: padding var(--transition); } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item { padding-bottom: 10px; padding-top: 10px; } header.sticky-header > .elementor-container .logo img { transition: max-width var(--transition); } header.sticky-header.elementor-sticky--effects .logo img { max-width: calc(100% * var(--shrink-me)); }

Βήμα 5: προσαρμόστε το CSS μας

Οι οδηγίες που αναφέρονται παραπάνω θα σας καθοδηγήσουν στη διαδικασία δημιουργίας μιας φθίνουσας αυτοκόλλητης κεφαλίδας στο Elementor. Εάν θέλετε να μάθετε περισσότερες λεπτομέρειες σχετικά με τον τρόπο περαιτέρω εξατομίκευσης της κεφαλίδας, μπορείτε να δείτε τον κώδικα CSS που παρέχεται παρακάτω, ο οποίος θα σας επιτρέψει να είστε πιο δημιουργικοί με τη σχεδίαση της κεφαλίδας. Ανάλογα με τις ανάγκες σας, μπορείτε να εξατομικεύσετε την κολλώδη κεφαλίδα Elementor αλλάζοντας πολλές ρυθμίσεις και κάνοντας την περισσότερο ή λιγότερο κολλώδη. Συνιστούμε να χρησιμοποιήσετε ένα πρόγραμμα επεξεργασίας κώδικα για να ενσωματώσετε αυτήν την αλλαγή CSS απευθείας στο Elementor. Μπορείτε να χρησιμοποιήσετε το Visual Studio Code ή το Atom, που θα σας βοηθήσουν να συναρμολογήσετε γρήγορα τον κώδικα και να αποκομίσετε τα οφέλη. Αυτά τα προγράμματα επεξεργασίας είναι δωρεάν στη χρήση και μπορούν να προσπελαστούν από διάφορα συστήματα, συμπεριλαμβανομένων των Windows, Mac OS X και Linux.

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

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

Εδώ είναι οι πέντε μεταβλητές CSS, με τις προεπιλεγμένες τιμές για κάθε μεταβλητή να εμφανίζονται με κόκκινο χρώμα.

Το κολλώδες χρώμα φόντου είναι #0e41e5 και το ύψος της κεφαλίδας είναι 90 εικονοστοιχεία. Άλλες επιλογές στυλ περιλαμβάνουν: αδιαφάνεια 0,90, shrink-me 0,80, αδιαφάνεια 0,90 και μετάβαση ease-in/ease-out 300ms.

Οι προσαρμοσμένες ιδιότητες είναι τα στοιχεία που εμφανίζονται μετά τη διπλή παύλα "–" στον ex amp le κώδικα μας και μπορείτε να τα βρείτε στη λίστα στο επάνω μέρος του amp le κώδικα μας. Το μόνο που απαιτείται είναι να προσαρμόσετε την τιμή που εμφανίζεται μετά την άνω και κάτω τελεία και πριν από το ερωτηματικό στην πρόταση.

Για amp , εάν θέλετε να αυξήσετε το ύψος της κεφαλίδας στα 100 px, δείτε πώς θα ήταν πριν και μετά την αλλαγή του ύψους:

Πριν, το ύψος της κεφαλίδας ήταν 90 pixel. Μετά, το ύψος της κεφαλίδας ήταν 100 pixel.

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

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

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

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

Σύναψη

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

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