4 τρόποι για να τυλίξετε κείμενο γύρω από την εικόνα στο WordPress

Χρειάζεται να τοποθετήσετε κείμενο γύρω από την εικόνα με κομψό τρόπο; Μάθετε πώς να το κάνετε εύκολα χωρίς εμπειρία κωδικοποίησης και σχεδίασης. Το πρόγραμμα επεξεργασίας Gutenberg φέρνει περισσότερες επιλογές για την αναδίπλωση κειμένου γύρω από το κείμενο στο WordPress.

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

Πώς να τυλίξετε κείμενο γύρω από την εικόνα στο WordPress;

Το πρόγραμμα επεξεργασίας και τα μπλοκ Gutenberg καθιστούν το περιεχόμενο του ιστότοπου πιο ελαφρύ, μοντέρνο και εύκολα αναγνώσιμο. Σας δείχνουμε περισσότερους τρόπους για να τυλίξετε κείμενο γύρω από την εικόνα και στους τύπους σελίδων WordPress, δημοσίευσης και προσαρμοσμένων αναρτήσεων. Υπάρχουν διαφορετικά μπλοκ και μπορείτε να τα χρησιμοποιήσετε και σε συνδυασμό, ως ένα σύνολο εξαρτημάτων και χαρακτηριστικών που σας δίνουν πρόσθετες επιλογές για το περιτύλιγμα.

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

Αναδίπλωση κειμένου γύρω από την εικόνα – Αποκλείει την επιλογή

Υπάρχουν 4 μπλοκ που μπορείτε να χρησιμοποιήσετε για να τυλίξετε ένα μπλοκ κειμένου γύρω από μια εικόνα. Τα περιγράφουμε όλα:

• Μπλοκ εικόνας και μπλοκ παραγράφου βρείτε περισσότερα παρακάτω
• Μπλοκ πολυμέσων και κειμένου βρείτε περισσότερα παρακάτω
• Μπλοκ στηλών σε ατομική ανάρτηση
• Μπλοκ συμπλέγματος σε μεμονωμένη ανάρτηση (η δυνατότητα είναι διαθέσιμη μόνο με Πρόσθετο Citadela Pro)

Τυλίξτε κείμενο και εικόνα για καλύτερη εμπειρία ανάγνωσης

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

Σε πολλές περιπτώσεις είναι απαραίτητο να εισαγάγετε εικόνα και κείμενο δίπλα-δίπλα. Τι είναι σημαντικό?

• Πρέπει να έχει νόημα. Η εικόνα πρέπει να βρίσκεται δίπλα στο σωστό κείμενο.
• Πρέπει να είναι όμορφα ευθυγραμμισμένο.
• Πρέπει να ταιριάζει σε ολόκληρη τη διάταξη του ιστότοπου.

Μπλοκ εικόνας και παραγράφου

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

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

Μπλοκ πολυμέσων & κειμένου – Το WordPress ευθυγραμμίζει το κείμενο δίπλα στην εικόνα

• Τυλίξτε κείμενο και εικόνες με μπλοκ Media & Text
• Πώς να προσθέσετε μπλοκ Media & Text στο πρόγραμμα επεξεργασίας
• Πώς λειτουργεί αυτό το μπλοκ
• Ρυθμίσεις μπλοκ πολυμέσων και κειμένου
• τι κάνει "Στοίβα σε κινητό» σημαίνω
• Μπόνους: Πώς να δικαιολογήσετε κείμενο στο WordPress

Πώς να στοιχίσετε το κείμενο δίπλα στην εικόνα;

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

Βελτιώνει τον σχεδιασμό ιστοτόπων και σε κινητές συσκευές. Αυτό το μπλοκ αναδίπλωσης βοηθά το θέμα του WordPress να καλύπτει διαφορετικές διατάξεις για κινητά. Στο smartphone, κάθε μέρος του ιστότοπου πρέπει να είναι ευδιάκριτο και ευανάγνωστο. Πώς θα φαίνεται το μπλοκ Media & Text σε κινητά τηλέφωνα και η λειτουργία "Stack on mobile" που χειρίζεται τραπέζι, την οποία θα δούμε παρακάτω.

Σε σύντομο χρονικό διάστημα θα μπορείτε να χρησιμοποιήσετε το μπλοκ Media & Text στο νέο μας θέμα WordPress που ονομάζεται Citadela. Μάθετε περισσότερα για το θέμα Citadela σε ξεχωριστό άρθρο.

Πώς να προσθέσετε μπλοκ πολυμέσων και κειμένου στο πρόγραμμα επεξεργασίας μπλοκ;

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

Χρησιμοποιώντας το εικονίδιο "+" στον επάνω πίνακα ή οπουδήποτε στο πρόγραμμα επεξεργασίας και επιλέγοντας Μπλοκ Media & Text.

Η τελευταία επιλογή είναι να πληκτρολογήσετε "/" και να γράψετε "μέσα" μετά. Το WordPress θα σας εμφανίσει αυτόματα επιλεγμένα μπλοκ που ταιριάζουν με αυτό που αναζητήσατε.

Πώς λειτουργεί το μπλοκ Media & Text;

Το μπλοκ Media & Text ομαδοποιεί βασικά 2 διαφορετικούς τύπους περιεχομένου σε ένα. Το πρώτο είναι μεσαίο, π.χ. εικόνα ή βίντεο που μπορείτε να προσθέσετε μέσω:

• Μεταφόρτωση
• Βιβλιοθήκη πολυμέσων
• Σύρετε και αποθέστε

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

Το μπλοκ Media & Text ευθυγραμμίζει πάντα την εικόνα και το κείμενο δίπλα-δίπλα, ανεξάρτητα από το πόσο κείμενο γράφετε. Πώς λειτουργεί; Η εικόνα προσαρμόζεται αυτόματα με βάση το ύψος του περιεχομένου στη στήλη κειμένου.

Ρυθμίσεις αποκλεισμού πολυμέσων και κειμένου

Γενικές ρυθμίσεις μπλοκ

1. Επάνω γραμμή εργαλείων

Η γραμμή εργαλείων πάνω από το μπλοκ προσφέρει πολλές επιλογές. Εάν το ενεργό θέμα σας το υποστηρίζει, μπορείτε να ορίσετε το μπλοκ Media & Text ως πλάτος ή πλήρες. Μπορείτε επίσης να επιλέξετε πού θέλετε να τοποθετήσετε εικόνα ή βίντεο κάνοντας κλικ στο:

• Εμφάνιση πολυμέσων στα αριστερά
• Εμφάνιση πολυμέσων στα δεξιά

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

2. Δεξιά πλαϊνή μπάρα

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

Τι είναι το Stack στο κινητό;

Χάρη σε αυτή τη λειτουργία, η εικόνα και το κείμενο εμφανίζονται όμορφα σε φορητές συσκευές. Εάν απενεργοποιήσετε το "Stack on mobile", η εικόνα και το κείμενο θα παραμείνουν δίπλα-δίπλα και θα είναι δύσκολα αναγνώσιμα σε responsive έκδοση.

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

Στοίχιση κειμένου

Μέρος του μπλοκ Media & Text είναι μαζί με εικόνα ή βίντεο και περιεχόμενο κειμένου. Μπορεί να είναι ένας από τους παρακάτω τύπους περιεχομένου:

1. Παράγραφος

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

Στην πλαϊνή γραμμή στη δεξιά πλευρά μπορείτε να επιλέξετε μέγεθος γραμματοσειράς, χρώμα γραμματοσειράς ή χρώμα παραγράφου. Ένα ενδιαφέρον χαρακτηριστικό είναι το "Drop Cap" που θα τονίσει τον πρώτο χαρακτήρα του κειμένου. Είναι ένα ωραίο χαρακτηριστικό σε μπλοκ αναρτήσεις για να κάνει το κείμενο πιο ενδιαφέρον.

2. Επικεφαλίδα

Η επικεφαλίδα μοιάζει πολύ με την παράγραφο. Μπορείτε επίσης να διαμορφώσετε την εμφάνισή του, να κάνετε έντονη ή πλάγια γραφή και να εισαγάγετε σύνδεσμο URL. Η διαφορά είναι ότι μπορείτε να επιλέξετε τύπο επικεφαλίδας - H2, H3, H4.

Άλλα μεγέθη επικεφαλίδων και ρυθμίσεις ευθυγράμμισης είναι διαθέσιμα στην πλαϊνή γραμμή στη δεξιά πλευρά.

3. Λίστα

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

4. Μπλοκ κουμπιών

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

Μην ξεχάσετε να διαβάσετε το άρθρο για Μπλοκ κουμπιών. 

Εναλλαγή μεταξύ τύπων μπλοκ

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

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

Μπόνους: Πώς να δικαιολογήσετε κείμενο στο WordPress

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

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

Αυτή η συγκεκριμένη λειτουργία δεν υπάρχει ούτε στον νέο επεξεργαστή μπλοκ (Gutenberg).

Λοιπόν, πώς δικαιολογείτε το κείμενο εάν το θέλετε πραγματικά;

Η λύση είναι να προσθέσετε απλό κώδικα CSS σε μερικά βήματα:

1. Υπάρχει μια ρύθμιση για το μπλοκ πρόσθετης κλάσης παραγράφου CSS στην πλαϊνή γραμμή στη δεξιά πλευρά
2. Γράψε εκεί το όνομα της τάξης "δικαιολογώ"
3. Δημοσίευση σελίδας ή άρθρου
4. Εάν κάνετε προεπισκόπηση, κάντε κλικ στο Προσαρμογή στην κύρια επάνω γραμμή
5. Στην αριστερή πλευρά υπάρχει μια νέα πλαϊνή μπάρα με ρυθμίσεις
6. Κάντε κλικ στο Πρόσθετο CSS
7. Εισαγάγετε τον ακόλουθο κωδικό CCS:

p.justify { text-align: justify; }

Εγινε. Από εδώ και στο εξής είναι δικαιολογημένο το κείμενο στο Μπλοκ πολυμέσων και κειμένου.

Το WordPress έχει γίνει πιο εύχρηστο χωρίς προγράμματα δημιουργίας σελίδων τρίτων, χάρη στον επεξεργαστή Gutenberg. Έχει εξαιρετική αξία για τον ιστότοπό σας από μακροπρόθεσμη άποψη και κατά τη δημιουργία ή τον επανασχεδιασμό μιας ιστοσελίδας. Τα μπλοκ Gutenberg δίνουν μεγάλη γκάμα στυλ, όπως και να βρείτε Κώδικας WordPress για την αναδίπλωση κειμένου γύρω από εικόνες.

Ποια είναι η γνώμη σας για το μπλοκ Media & Text; Το έχεις ήδη χρησιμοποιήσει; Πώς σας αρέσει να δουλεύετε με αυτό; Ενημερώστε μας στα σχόλια παρακάτω.