Πώς να προσαρμόσετε το Header στο WordPress: Οδηγός βήμα-βήμα

Χρησιμοποιήστε τις δυνατότητες του WordPress για να δημιουργήσετε ένα header που αντικατοπτρίζει το brand σας και βελτιώνει την εμπειρία χρήστη.

Το header του WordPress είναι ένα από τα πιο σημαντικά στοιχεία της ιστοσελίδας σας. Περιέχει το μενού πλοήγησης, το λογότυπο και άλλα χρήσιμα στοιχεία, όπως κουμπιά call-to-action και εικονίδια κοινωνικών δικτύων. Δεδομένου ότι είναι το πρώτο πράγμα που βλέπουν οι επισκέπτες, είναι σημαντικό να είναι λειτουργικό και αισθητικά ελκυστικό.

Με την εισαγωγή του Full Site Editing (FSE) στο WordPress, η προσαρμογή του header έχει γίνει πιο εύκολη από ποτέ. Πλέον, μπορείτε να δημιουργήσετε και να τροποποιήσετε το header απευθείας μέσω του block editor, χωρίς να χρειάζεστε πρόσθετα plugins ή προσαρμοσμένο κώδικα.

Σε αυτόν τον οδηγό, θα δείτε πώς μπορείτε να δημιουργήσετε και να επεξεργαστείτε το header στο WordPress χρησιμοποιώντας τον site editor.

Πώς να προσαρμόσετε το Header με το Full Site Editing

Η λειτουργία Full Site Editing προσφέρει έναν πιο ευέλικτο τρόπο προσαρμογής του header, χωρίς την ανάγκη χρήσης εξωτερικών themes ή πρόσθετων plugins.

1. Πρόσβαση στο Header μέσω του Site Editor

1. Συνδεθείτε στο WordPress Dashboard.
2. Μεταβείτε στο Appearance → Site Editor.
3. Όταν φορτώσει ο editor, επιλέξτε το WordPress logo πάνω αριστερά και κάντε κλικ στο Browse all templates.
4. Στο μενού που εμφανίζεται, επιλέξτε Template Parts → Header.

Από εδώ μπορείτε να κάνετε επεξεργασία του header χρησιμοποιώντας blocks.

2. Τροποποίηση και στυλ του Header

Μέσα στον site editor, μπορείτε να προσθέσετε, διαγράψετε και να προσαρμόσετε οποιοδήποτε στοιχείο του header χρησιμοποιώντας blocks.

Διαγραφή ή προσθήκη νέων Blocks

• Για να διαγράψετε ένα στοιχείο, επιλέξτε το block από τη List View, ανοίξτε το ellipsis menu και κάντε κλικ στο Remove Block.
• Για να προσθέσετε ένα νέο στοιχείο, πατήστε το + (block inserter) και επιλέξτε το αντίστοιχο block.

Προσθήκη κοινωνικών δικτύων στο Header

Για να προσθέσετε εικονίδια κοινωνικών δικτύων:

1. Πατήστε το + (block inserter).
2. Αναζητήστε το Social Icons block και προσθέστε το.
3. Κάντε κλικ στο + μέσα στο block για να επιλέξετε πλατφόρμες όπως Facebook, Instagram, YouTube, TikTok.
4. Στιλιζάρετε τα εικονίδια επιλέγοντας:
   • Μορφή εμφάνισης (κυκλικό, μόνο λογότυπο ή στυλ “pill shape”).
   • Οριζόντια ή κάθετη διάταξη.
   • Προσαρμογή χρωμάτων.

3. Δημιουργία Header με δύο Σειρές (Rows)

Για ένα πιο επαγγελματικό header, μπορείτε να τοποθετήσετε διαφορετικά στοιχεία σε δύο σειρές (rows):

1. Στην πρώτη σειρά τοποθετήστε τα social icons και ένα call-to-action button.
2. Στη δεύτερη σειρά βάλτε το λογότυπο και το μενού πλοήγησης.

Προσθήκη νέας σειράς στο Header

1. Πατήστε το + (block inserter).
2. Αναζητήστε Row block και προσθέστε το.
3. Μετακινήστε το Navigation block στη νέα σειρά.

Προσθήκη κουμπιού Call-to-Action

1. Προσθέστε ένα Button block.
2. Στιλιζάρετε το κουμπί:
   • Κείμενο: π.χ. “ΚΛΕΙΣΕ ΡΑΝΤΕΒΟΥ”
   • Χρώμα κουμπιού: #8D4CE6
   • Χρώμα κειμένου: #FFFFFF
   • Border radius: 100px

4. Προσθήκη λογότυπου στο Header

1. Πατήστε το + (block inserter) και προσθέστε το Site Logo block.
2. Ανεβάστε το λογότυπό σας ή επιλέξτε ένα υπάρχον από τη Media Library.
3. Σιγουρευτείτε ότι το “Link image to home” είναι ενεργοποιημένο, ώστε να λειτουργεί ως σύνδεσμος προς την αρχική σελίδα.
4. Ρυθμίστε το μέγεθος και το περιθώριο (margin/padding) για να ταιριάζει στο design σας.

Δημιουργία πολλαπλών Header Templates

Το WordPress Site Editor επιτρέπει τη δημιουργία διαφορετικών headers για διαφορετικές σελίδες.

Για παράδειγμα, μπορείτε να έχετε:

• Ένα header για την αρχική σελίδα.
• Ένα διαφορετικό header για blog posts.
• Ένα header για σελίδες προϊόντων.

Για να προσθέσετε ένα νέο header template:

1. Μεταβείτε στο Templates → Single Template.
2. Διαγράψτε το υπάρχον header και προσθέστε ένα νέο.
3. Επιλέξτε Create a new header ή χρησιμοποιήστε ένα WordPress block pattern.

Αυτό σας επιτρέπει να προσαρμόζετε το header ανάλογα με τις ανάγκες κάθε σελίδας.

Εναλλακτική: Προσαρμογή Header με το Divi

Αν χρησιμοποιείτε το Divi Theme, μπορείτε να δημιουργήσετε ακόμα πιο προσαρμοσμένα headers μέσω του Divi Theme Builder. Το Divi σας επιτρέπει να προσθέτετε δυναμικά headers, να προσαρμόζετε πλήρως τη σχεδίαση και να τα εφαρμόζετε σε συγκεκριμένες σελίδες ή κατηγορίες.

Πηγή: elegantthemes.com

Διαβάστε επίσης:

• Πώς να επεξεργαστείτε το Header στο WordPress