Πώς να Προσθέσετε Κείμενο στην Κορυφή μιας Εικόνας στο WordPress (3 Μέθοδοι)

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

Σε αυτό το άρθρο, βρήκαμε τρεις εύκολους τρόπους για να προσθέσετε κείμενο στην κορυφή μιας εικόνας στο WordPress. Είτε προτιμάτε να χρησιμοποιείτε το Block Editor, μια επέκταση, ή προσαρμοσμένο κώδικα. Ας το ανακαλύψουμε!

Γιατί είναι Σημαντικό να Προστεθεί Κείμενο στην Κορυφή των Εικόνων

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

1. Προσέλκυση Προσοχής

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

2. Βελτιώστε την Εμπειρία Χρήστη

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

3. Βελτίωση Προσβασιμότητας

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

4. Ενίσχυση SEO

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

3 Μέθοδοι Πώς να Προσθέσετε Κείμενο στην Κορυφή μιας Εικόνας στο WordPress

1. Χρησιμοποιήστε τον Επεξεργαστή Μπλοκ WordPress

Πρώτα, μεταβείτε στη σελίδα ή την ανάρτηση στην οποία πρόκειται να προσθέσετε το κείμενο πάνω από την εικόνα.

Επιλέξτε Εξώφυλλο για να γράψετε το κείμενο πάνω στην εικόνα.

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

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

Θα μοιάζει με αυτό, στη συνέχεια μπορείτε να γράψετε το κείμενο πάνω από την εικόνα όπως θέλετε.

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

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

2. Χρήση CSS

Ανοίξτε τον Επεξεργαστή Μπλοκ WordPress και επιλέξτε το μπλοκ εικόνας όπου θέλετε να προσθέσετε κείμενο. Στη δεξιά πλευρική μπάρα, κάντε κλικ στην Για προχωρημένους καρτέλα.

Στο Πρόσθετη Κλάση CSS πεδίο, προσθέστε μια προσαρμοσμένη κλάση για το μπλοκ εικόνας.

Αποθηκεύστε τις αλλαγές και δημοσιεύστε ή ενημερώστε τη σελίδα ή την ανάρτηση.

.custom-class { θέση: σχετική; } .custom-class p { θέση: απόλυτη; πάνω: 50%; αριστερά: 50%; μετασχηματισμός: μετάφραση(-50%, -50%); μέγεθος-γραμματοσειράς: 24px; χρώμα: #ffffff; σκιά-κειμένου: 2px 2px 2px #000000; } 

Στο παραπάνω κώδικα, αντικαταστήστε "custom-class" με την προσαρμοσμένη κλάση που προσθέσατε στο μπλοκ εικόνας. Μπορείτε επίσης να προσαρμόσετε το μέγεθος γραμματοσειράς, το χρώμα και άλλες επιλογές στυλ για να ταιριάζουν στις προτιμήσεις σας.

3. Χρησιμοποιήστε το Πρόσθετο WordPress

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

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

Μόλις τελειώσετε, αντιγράψτε το κλειδί στην ενότητα Κλειδί άδειας χρήσης

Τώρα μπορείτε να επικολλήσετε αυτό το κλειδί στην περιοχή διαχείρισης του WordPress πηγαίνοντας στη σελίδα SeedProd » Ρυθμίσεις.

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

Στη συνέχεια, θα πάμε στο SeedProd » Σελίδες Προσγείωσης και κάντε κλικ στο Προσθήκη Νέας Σελίδας Προσγείωσης.

Στη συνέχεια, επιλέξτε ένα πρότυπο. Ανεξάρτητα από το πρότυπο SeedProd που θα επιλέξετε, μπορείτε να προσαρμόσετε κάθε μέρος του προτύπου για να ταιριάζει τέλεια στην ιστοσελίδα και την επωνυμία σας.

Ωστόσο, εάν προτιμάτε να ξεκινήσετε με ένα κενό καμβά, τότε κάντε κλικ στο Κενό Πρότυπο.

Μόλις βρείτε ένα πρότυπο, μετακινήστε το ποντίκι σας πάνω από αυτό. Στη συνέχεια, κάντε κλικ στο εικονίδιο Προεπισκόπηση

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

Στο Όνομα Σελίδας πεδίο, πληκτρολογήστε ένα όνομα για τη σελίδα.

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

Κάντε κλικ στο Αποθήκευση και Έναρξη Επεξεργασίας της Σελίδας κουμπί. Αυτό θα ανοίξει το πρότυπο στον επεξεργαστή drag-and-drop του SeedProd.

Στο αριστερό πλευρικό πλαίσιο, θα δείτε όλα τα μπλοκ και τις ενότητες που μπορείτε να προσθέσετε στη σελίδα σας χρησιμοποιώντας το drag and drop.

Εκτός αν χρησιμοποιείτε το Κενό Πρότυπο, η σελίδα σας SeedProd θα έχει ήδη ορισμένα μπλοκ και ενότητες. Για να επεξεργαστείτε οποιοδήποτε από αυτό το περιεχόμενο, κάντε κλικ για να επιλέξετε το μπλοκ ή την ενότητα.

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

Ο ευκολότερος τρόπος για να προσθέσετε κείμενο πάνω από μια εικόνα είναι χρησιμοποιώντας ένα από τα έτοιμα τμήματα Hero του SeedProd.

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

Κάντε κλικ στην καρτέλα Τμήμα στο αριστερό μενού.

Στη συνέχεια, κάντε κλικ στο Hero για να δείτε όλα τα έτοιμα τμήματα hero που μπορείτε να προσθέσετε στη σελίδα σας.

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

Κάντε κλικ στην προεπιλεγμένη εικόνα για να την επιλέξετε εάν θέλετε να αντικαταστήσετε την προεπιλεγμένη εικόνα του προτύπου με τη δική σας εικόνα.

έως ότου εμφανιστεί ένα εικονίδιο κάδου απορριμμάτων. Στη συνέχεια, μπορείτε να κάνετε κλικ σε αυτό το εικονίδιο για να διαγράψετε την εικόνα placeholder.

Στη συνέχεια, κάντε κλικ στο Χρήση της Δικής σας Εικόνας. Μπορείτε στη συνέχεια είτε να επιλέξετε μια εικόνα από τη βιβλιοθήκη πολυμέσων του WordPress είτε να χρησιμοποιήσετε μια εικόνα από το απόθεμα.

Μόλις προσθέσετε μια εικόνα, είστε έτοιμοι να αντικαταστήσετε το κείμενο placeholder.

Κάντε κλικ για να επιλέξετε το Μπλοκ Κειμένου. Στη συνέχεια, στην Περιοχή Κειμένου, απλώς πληκτρολογήστε το κείμενο που θέλετε να χρησιμοποιήσετε.

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

Εάν θέλετε να αλλάξετε αυτό το περιεχόμενο, κάντε κλικ για να επιλέξετε το μπλοκ

Μια άλλη επιλογή είναι να διαγράψετε το μπλοκ από το πρότυπο ηρώων.

Για να το κάνετε αυτό, κάντε κλικ για να επιλέξετε το μπλοκ και στη συνέχεια κάντε κλικ στο εικονίδιο κάδου απορριμμάτων.

Εάν είστε ικανοποιημένοι με το σχέδιο της σελίδας σας, κάντε κλικ στο κουμπί Αποθήκευση.

Συμπέρασμα

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

Επιπλέον, οργανώστε, βελτιστοποιήστε και διαχειριστείτε τα αρχεία πολυμέσων σας σαν επαγγελματίας με το WP Media Folder. Ήρθε η ώρα να αποχαιρετήσετε τις ακατάστατες βιβλιοθήκες σας!