Οι κεφαλίδες και τα υποσέλιδα ενός ιστότοπου είναι απαραίτητα στοιχεία. Στις περισσότερες περιπτώσεις, η Κεφαλίδα παρέχει συνδέσμους πλοήγησης που απλοποιούν την πλοήγηση σε διαφορετικά τμήματα ενός ιστότοπου. Από την άλλη πλευρά, το υποσέλιδο περιέχει σημαντικές πληροφορίες που μπορεί να απαιτούν οι επισκέπτες του ιστότοπου, όπως μια διεύθυνση επιχείρησης ή στοιχεία επικοινωνίας, για να αναφέρουν μερικά amp .
Οι κεφαλίδες και τα υποσέλιδα παρέχονται από το τρέχον θέμα ενός χρήστη στο WordPress. Αυτά είναι συνήθως καλά σχεδιασμένα και επαρκή για τις περισσότερες χρήσεις τους. Ωστόσο, εάν θέλετε να προσαρμόσετε τα θέματά σας, θα πρέπει να αλλάξετε τον κώδικα. Αυτό είναι όταν plugin του Page Builder είναι χρήσιμα. Μπορείτε να τα χρησιμοποιήσετε για να δημιουργήσετε και να αλλάξετε στοιχεία ιστοσελίδας χωρίς να γνωρίζετε κανέναν κώδικα.
Αυτό το σεμινάριο θα μας διδάξει πώς να φτιάξουμε μια κεφαλίδα και ένα υποσέλιδο ιστότοπου. Θα χρησιμοποιηθεί το Elementor Pro (καθώς η βασική έκδοση του Elementor δεν περιλαμβάνει τα πιο σημαντικά χαρακτηριστικά για τη δημιουργία αυτών των στοιχείων). Κατεβάστε λοιπόν το Elementor Pro και βεβαιωθείτε ότι είναι ενεργοποιημένο.
- Γιατί να επιλέξετε το Elementor ως εργαλείο δημιουργίας σελίδων;
- Το Elementor σάς επιτρέπει να επιλέξετε την κύρια διάταξη της προσαρμοσμένης κεφαλίδας και υποσέλιδου σας.
- Τι είναι η κεφαλίδα και τι κάνει;
- Τι είναι ακριβώς ένα υποσέλιδο;
- Πώς να φτιάξετε μια κεφαλίδα
- Ανάπτυξη προτύπου κεφαλίδας
- Πραγματοποίηση αλλαγών στο μενού κεφαλίδας
- Δημοσίευση κεφαλίδας
- Πώς να φτιάξετε ένα υποσέλιδο
- Ανάπτυξη προτύπου υποσέλιδου
- Τροποποιήσεις υποσέλιδου
- Τελειωμένο Προϊόν
- Εξετάστε τις ενότητες κεφαλίδας και υποσέλιδου για ανταπόκριση.
- Φέρνοντας τα πράγματα στο τέλος
Γιατί να επιλέξετε το Elementor ως εργαλείο δημιουργίας σελίδων;
Το Elementor είναι το πιο προηγμένο πρόγραμμα δημιουργίας σελίδων, που επιτρέπει στους χρήστες να χρησιμοποιούν premium στοιχεία για να δημιουργούν υπέροχα σχέδια και διατάξεις. Είναι πολύ ωφέλιμο για αρχάριους που δεν έχουν προηγούμενη γνώση κωδικοποίησης. Το πρόγραμμα επεξεργασίας drag 'n' drop στο Elementor επιτρέπει στους χρήστες να μετακινούν γραφικά στοιχεία και αντικείμενα.
Το Elementor είναι ένα οπτικό εργαλείο δημιουργίας σελίδων που επιτρέπει στους χρήστες να βλέπουν πώς εμφανίζονται οι σελίδες τους χωρίς να αλλάζουν λειτουργίες.
Ένα άλλο επιτακτικό επιχείρημα για τη χρήση του Elementor είναι ότι οι περισσότερες εργασίες μπορούν να ολοκληρωθούν χωρίς κόστος. Η δωρεάν έκδοσή τους είναι κάτι παραπάνω από ικανή να παρέχει επαρκείς δυνατότητες επεξεργασίας ιστότοπου. Ωστόσο, θα εξετάσουμε τόσο τη δωρεάν όσο και την επί πληρωμή έκδοση, ώστε να επιλέξετε την καλύτερη που ταιριάζει στις ανάγκες σας.
Τα παρακάτω είναι μερικές από τις σημαντικές πτυχές του Elementor που το κάνουν να αξίζει τον κόπο:
- Υποστηρίζεται η λειτουργία μεταφοράς και απόθεσης.
- Διαθέτει μεγάλο αριθμό προτύπων.
- Υπάρχουν πάνω από 90 widgets συνολικά.
- Δεν απαιτείται κωδικοποίηση για ανταποκρινόμενη υποστήριξη.
- Υπάρχουν διαθέσιμες επιλογές επανάληψης και αναίρεσης.
- Η αυτόματη αποθήκευση είναι διαθέσιμη.
Το Elementor σάς επιτρέπει να επιλέξετε την κύρια διάταξη της προσαρμοσμένης κεφαλίδας και υποσέλιδου σας.
Θα βοηθούσε εάν αποφασίσατε για τη γενική διάταξη των τμημάτων κεφαλίδας και υποσέλιδου που επιθυμείτε πριν αναπτύξετε μια μοναδική κεφαλίδα. Κοιτάζοντας την προκατασκευασμένη διάταξη ενότητας κεφαλίδας μπορεί να σας προσφέρει πολλές επιλογές.
Μπορείτε να επιλέξετε από διάφορες ενότητες κεφαλίδας. το πιο συνηθισμένο και μοντέρνο Header διαθέτει ένα λογότυπο ιστότοπου στην πιο αριστερή γωνία, μια γραμμή πλοήγησης στη μέση και μια ενότητα γραμμής αναζήτησης στα δεξιά.
Υπάρχουν ατελείωτες δυνατότητες και μπορείτε να δημιουργήσετε οποιαδήποτε διάταξη θέλετε.
Επέλεξα το Νο. 7 προκατασκευασμένο πρότυπο κεφαλίδας. Αυτή είναι η πιο κοινή και απλή προσέγγιση για τη χρήση μιας κεφαλίδας σε έναν ιστότοπο WordPress. Αντιγράψτε και επικολλήστε το όνομα προτύπου κεφαλίδας στα Πρότυπα > Κεφαλίδα > πρότυπο αναζήτησης > επικολλήστε το όνομα της κεφαλίδας που αντιγράφηκε .
Όταν βρείτε το πρότυπο κεφαλίδας που θέλετε, επιλέξτε «Επεξεργασία με το Elementor» και θα μεταφερθείτε στην ενότητα δημιουργίας κεφαλίδων Elementor Pro.
Ας ξεκινήσουμε αυτό το πάρτι.
Τι είναι η κεφαλίδα και τι κάνει;
Το επάνω μέρος της ιστοσελίδας σας ονομάζεται "κεφαλίδα ιστότοπου". Η κεφαλίδα είναι συνήθως η ίδια σε ολόκληρο τον ιστότοπό σας. Ωστόσο, ορισμένοι ιστότοποι χρησιμοποιούν διαφορετικές κεφαλίδες για διαφορετικά τμήματα του ιστότοπου.
Ο σχεδιασμός της κεφαλίδας σας θα δώσει στους χρήστες σας την πρώτη εντύπωση για τον ιστότοπό σας, είτε έχουν φτάσει στην αρχική σας σελίδα, σχετικά με τη σελίδα ή άλλο μεμονωμένο περιεχόμενο. Και, αν είναι καλά σχεδιασμένο, θα τραβήξει την προσοχή του χρήστη και θα τον δελεάσει να συνεχίσει να κάνει κύλιση και να διαβάζει.
Το Header μπορεί επίσης να βοηθήσει στην προώθηση της ταυτότητας της επωνυμίας της εταιρείας σας.
Χρησιμοποιώ χαρακτηριστικά όπως το λογότυπο, τη γραμματοσειρά, τα χρώματα και τη συνολική γλώσσα της επωνυμίας της εταιρείας.
Η πλοήγηση στον ιστότοπο, η αναζήτηση ιστότοπου, ένα καλάθι αγορών (για ιστότοπους πωλήσεων), κουμπιά παρότρυνσης για δράση (CTA) και άλλες λειτουργίες που βελτιώνουν την εμπειρία του χρήστη και αυξάνουν τα ποσοστά μετατροπών βρίσκονται όλα στις κεφαλίδες.
Τι είναι ακριβώς ένα υποσέλιδο;
Το υποσέλιδο είναι ένα τμήμα μιας ιστοσελίδας που εμφανίζεται στο κάτω μέρος της σελίδας. Συνήθως εμφανίζονται συνεχώς σε ολόκληρο τον ιστότοπο, σε όλες τις σελίδες και τις αναρτήσεις, παρόμοια με τις κεφαλίδες.
Τα υποσέλιδα συχνά παραβλέπονται, κάτι που είναι σπατάλη δυνατοτήτων, δεδομένου ότι εμφανίζονται σε κάθε σελίδα του ιστότοπου. Είναι εξίσου κρίσιμα για τις κεφαλιές.
Το σχέδιο του υποσέλιδου σας μπορεί να εμφανίζει χρήσιμες και ζωτικής σημασίας πληροφορίες, όπως εγγραφή σε ενημερωτικό δελτίο, πληροφορίες πνευματικών δικαιωμάτων, όρους χρήσης και απόρρητο, χάρτη ιστότοπου, στοιχεία επικοινωνίας, χάρτες, πλοήγηση ιστότοπου και πολλά άλλα, ανάλογα με τις ρυθμίσεις που επιλέγετε.
Πώς να φτιάξετε μια κεφαλίδα
Θα δημιουργήσουμε μια προσαρμοσμένη κεφαλίδα σε αυτήν την ενότητα. Μην ανησυχείτε αν αυτό σας φαίνεται τρομακτικό. δεν θα ξεκινήσουμε από το μηδέν. Αντίθετα, θα χρησιμοποιήσουμε τα πρότυπα του Elementór Pro, σχεδιασμένα από την ομάδα σχεδιασμού του Elementor.
Ανάπτυξη προτύπου κεφαλίδας
Στον πίνακα διαχείρισης του WordPress, τοποθετήστε το δείκτη του ποντικιού πάνω από Πρότυπα και κάντε κλικ στην Προσθήκη νέου για να δημιουργήσετε την Κεφαλίδα μας.
Μόλις δρομολογηθείτε, θα εμφανιστεί ένα παράθυρο τύπου modal. Επιλέξτε Κεφαλίδα από το αναπτυσσόμενο μενού, ονομάστε την Κεφαλίδα και κάντε κλικ στο « Δημιουργία προτύπου »:
Αυτό θα ξεκινήσει το πρόγραμμα επεξεργασίας Elementor. Μετά από αυτό, θα εμφανιστεί μια λίστα με πρότυπα από τα οποία μπορείτε να επιλέξετε. Διαλέξτε λοιπόν αυτό που σας αρέσει:
Θα πρέπει να εμφανίζεται στην κορυφή της ενότητας επεξεργασίας Elementor μόλις επιλέξετε ένα πρότυπο:
Δημιουργία λογότυπου: Το πρώτο βήμα είναι να δημιουργήσετε ένα λογότυπο. Ορίστε το λογότυπο στο Live Editor του ιστότοπου για να το τοποθετήσετε στην Κεφαλίδα. Επιλέξτε ένα λογότυπο κάνοντας κλικ στο Site Identity.
Αφού αποφασίσετε για ένα λογότυπο, κάντε κλικ στην επιλογή Δημοσίευση .
Το λογότυπο του ιστότοπού σας θα πρέπει τώρα να βρίσκεται στην κεφαλίδα, εάν ανανεώσετε τη διεπαφή Elementor:
Μετά από αυτό, μπορείτε να κάνετε όποιες αλλαγές θέλετε.
Πραγματοποίηση αλλαγών στο μενού κεφαλίδας
Το επόμενο πράγμα που πρέπει να κάνουμε είναι να αλλάξουμε το μενού. Εάν έχετε δημιουργήσει ένα μενού, το πρότυπο θα το ενσωματώσει αυτόματα:
Ακολουθεί η δομή του μενού μας, την οποία μπορείτε να δείτε να αντικατοπτρίζεται στο πρότυπο κεφαλίδας:
Εάν έχετε περισσότερα από ένα μενού, μπορείτε να ενημερώσετε τα περιεχόμενα εάν είναι απαραίτητο.
Μπορείτε να επεξεργαστείτε τις ιδιότητές του όπως κάθε άλλο widget.
Εάν χρειάζεται να προσθέσουμε περισσότερα στοιχεία, μπορούμε να προσθέσουμε περισσότερες ενότητες στην Κεφαλίδα μας:
Ας ξεκινήσουμε προσθέτοντας μια κεφαλίδα και μερικά εικονίδια μέσων κοινωνικής δικτύωσης:
Μετά από αυτό, μπορείτε να κάνετε όποιες αλλαγές θέλετε. Δείτε πώς έγινε η επεξεργασία μας:
Δημοσίευση κεφαλίδας
Τώρα μπορείτε να δημοσιεύσετε την Κεφαλίδα μόλις ολοκληρώσετε την αλλαγή της. Θα χρησιμοποιήσουμε την κεφαλίδα σε ολόκληρο τον ιστότοπό μας στο παράδειγμα amp , επομένως θα επιλέξουμε αυτήν την επιλογή αφού επιλέξουμε Προσθήκη συνθήκης:
Και εδώ είναι ένα amp μιας σελίδας από τη ζωντανή τοποθεσία μας:
Πώς να φτιάξετε ένα υποσέλιδο
Ανάπτυξη προτύπου υποσέλιδου
Η διαδικασία δημιουργίας ενός υποσέλιδου είναι αρκετά παρόμοια με αυτή της κατασκευής μιας κεφαλίδας. Για να δημιουργήσετε ένα, δημιουργήστε ένα νέο πρότυπο υποσέλιδου όπως αυτό:
Στη συνέχεια, αποφασίστε για ένα πρότυπο. Τα υποσέλιδα διατίθενται σε διάφορα σχήματα και μεγέθη. Ορισμένα περιλαμβάνουν εταιρικές πληροφορίες, ενώ άλλα έχουν φόρμες επικοινωνίας. Επιλέξτε ένα πρότυπο που είναι κατάλληλο για τις απαιτήσεις σας.
Το πρότυπο που επιλέξαμε για την ιστοσελίδα μας είναι το εξής:
Τροποποιήσεις υποσέλιδου
Θα δείτε την Κεφαλίδα μόλις ξεκινήσετε την επεξεργασία (αν ορίσετε την προϋπόθεση να εμφανίζεται σε όλες τις σελίδες).
Αλλάξτε το υποσέλιδο όπως απαιτείται. Έτσι φαίνεται η αναθεώρησή μας:
Δημοσιεύστε το υποσέλιδο αφού ολοκληρωθεί:
Τελειωμένο Προϊόν
Δείτε πώς φαίνεται το τελικό αποτέλεσμα. Τόσο η κεφαλίδα όσο και το υποσέλιδο χρησιμοποιούνται πλέον στον ιστότοπό μας:
Εξετάστε τις ενότητες κεφαλίδας και υποσέλιδου για ανταπόκριση.
Αυτή είναι η πιο σημαντική φάση και πρέπει να διασφαλίσετε ότι οι ενότητες κεφαλίδας και υποσέλιδου ανταποκρίνονται. Επειδή ένα μενού πλήρους πλάτους δεν ταιριάζει συνήθως στην προβολή κινητού, πρέπει να γνωρίζετε πώς θα εμφανίζεται το σχέδιό σας στην οθόνη του κινητού. Οι αποκριτικοί διακόπτες στο κάτω μέρος της ενότητας πλευρικής γραμμής Elementor μπορούν να αλλάξουν τις εκδόσεις για κινητά και καρτέλες.
Μπορείτε να ελέγξετε την ανταπόκριση της κεφαλίδας και του υποσέλιδου σας με διάφορους τρόπους. Για amp , μπορείτε να χρησιμοποιήσετε εργαλεία όπως το Browserstack, το CrossBrowser Testing και το Google Resizer για να διασφαλίσετε ότι οι ιστοσελίδες σας ανταποκρίνονται όσο το δυνατόν περισσότερο. Μπορείτε επίσης να το κάνετε χειροκίνητα πειραματιζόμενοι με διαφορετικές συσκευές.
Φέρνοντας τα πράγματα στο τέλος
Ελπίζω ότι αυτός ο οδηγός σας βοήθησε να αναπτύξετε γρήγορα τις μοναδικές ενότητες κεφαλίδας και υποσέλιδου χρησιμοποιώντας το Elementor Pro. Το WordPress έχει πολλές δυνατότητες, αλλά επιτρέπει μόνο μερικές τροποποιήσεις στις ενότητες κεφαλίδας και υποσέλιδου, οι οποίες τελικά διορθώθηκαν με το πρόγραμμα δημιουργίας σελίδων Elementor Pro. Με πολύ καλύτερο έλεγχο των στοιχείων του ιστότοπού σας, μπορείτε πλέον να επιδείξετε καλύτερα το όραμα του ιστότοπού σας. Επιπλέον, η λειτουργικότητα του Elementor έχει βελτιωθεί με τη χρήση δωρεάν πρόσθετων, επιτρέποντας στους χρήστες να προσαρμόζουν τους ιστότοπούς τους με πιο προηγμένες δυνατότητες.
