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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

header.sticky-header {--header-height: 90px; --χωρητικότητα: 0,90 -συρρικνώστε με: 0,80 -κολλώδες-φόντο-χρώμα: #0e41e5 -μετάβαση: .3s ευκολία εισόδου. μετάβαση: φόντο-χρώμα var (-μετάβαση), φόντο-εικόνα var (-μετάβαση), σκηνικό-φίλτρο var (-μετάβαση), αδιαφάνεια var (-μετάβαση)? } header.sticky-header.elementor-sticky-effects {background-color: var (-sticky-background-color)! important; φόντο-εικόνα: καμία! σημαντική; αδιαφάνεια: var (-αδιαφάνεια)! σημαντικό; -webkit-σκηνικό-φίλτρο: θαμπάδα (10 εικονοστοιχεία); σκηνικό-φίλτρο: θαμπάδα (10 εικονοστοιχεία); } header.sticky-header> .elementor-container {μετάβαση: min-height var (-μετάβαση); } header.sticky-header.elementor-sticky-effects> .elementor-container {min-height: calc (var (-header-height) * var (-shrink-me))! important; ύψος: calc (var (-header-height) * var (-shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item {μετάβαση: padding var (-μετάβαση); } header.sticky-header.elementor-sticky-effects .elementor-nav-menu .elementor-item {padding-bottom: 10px! important; padding-top: 10px! σημαντικό; } header.sticky-header> .elementor-container .logo img {μετάβαση: max-width var (-μετάβαση); } 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, συρρικνωμένη 0,80, αδιαφάνεια 0,90 και μετάβαση ευκολίας/ευκολίας-εξόδου 300ms.

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

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

Παλαιότερα, το ύψος της κεφαλίδας ήταν 90 εικονοστοιχεία. μετά, το ύψος της κεφαλίδας ήταν 100 εικονοστοιχεία.

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

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

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

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

συμπέρασμα

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

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