Τα καλύτερα πρωτότυπα μπλοκ WordPress [Γρήγορη επισκόπηση]

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

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

Όλα αυτά τα τυποποιημένα μπλοκ WordPress για τον συντάκτη Gutenberg είναι πλήρως λειτουργικά στο τελευταίο μας έργο Δωρεάν 1ΤΡ5Τ Θέμα WordPress. Μπορείτε να το χρησιμοποιήσετε σε οποιαδήποτε ιστοσελίδα, παρακαλώ δημιουργήστε έναν λογαριασμό και κατεβάστε το δωρεάν.

Με AitThemes Citadela plugins, μπορείτε να δημιουργήσετε συγκεκριμένο περιεχόμενο για την παρουσίαση μιας εταιρείας, μιας επιχείρησης, ενός ιστολογίου ή ενός μη κερδοσκοπικού ιστότοπου. Ή ακόμη και για να ξεκινήσετε μια νέα διαδικτυακή επιχείρηση. Η ταχύτητα του ιστότοπου και η ευκολία επεξεργασίας του ιστότοπου είναι οι πιο σημαντικοί παράγοντες.

Τι είναι ένα μπλοκ;

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

Αλλά πώς μπορείτε να βρείτε το πιο κατάλληλο μπλοκ που ταιριάζει στην πρόθεσή σας;

Για να σας βοηθήσουμε να κατανοήσετε καλύτερα τα μπλοκ του WordPress, ετοιμάσαμε αυτή την επισκόπηση των πιο δημοφιλών μπλοκ.

Μπλοκ περιεχομένου κειμένου

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

• Παράγραφος
• Επικεφαλίδα
• Απόσπασμα
• Λίστα
• Pullquote
• Πίνακας
• Στίχος
• Προδιαμορφωμένο

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

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

Η δημιουργία ενός συναρπαστικού κουμπιού CTA στο WordPress έχει γίνει εξαιρετικά εύκολη με το μπλοκ Button. Δεν χρειάζεται να εισαγάγετε προσαρμοσμένα CSS ή να κατανοήσετε την HTML. Μπορείτε -αλλά δεν χρειάζεται- να εισαγάγετε δεκαεξαδικό κώδικα του αγαπημένου σας χρώματος για να κάνετε το κουμπί να φαίνεται ωραίο και εντυπωσιακό.

Πού να χρησιμοποιήσετε το μπλοκ κουμπιών;

Μόλις ο επισκέπτης φτάσει στον ιστότοπό σας, θέλετε να τον ενθαρρύνετε να αναλάβει δράση. Γι' αυτό υπάρχουν τα κουμπιά CTA.

Σε γενικές γραμμές, υπάρχουν 3 σημεία στα οποία θα πρέπει να χρησιμοποιήσετε το μπλοκ Button του WordPress:

• Αρχική σελίδα - για να ολοκληρώσετε ενέργεια που θα οδηγήσει στην εκπλήρωση του στόχου σας, όπως εγγραφή στο ενημερωτικό δελτίο, ανακάλυψη ειδικής προσφοράς ή εγγραφή για δωρεάν δοκιμή.
• Σελίδα προϊόντος - ανάλογα με τον τρόπο με τον οποίο η σελίδα του προϊόντος σας είναι επικεφαλής, μπορεί να υπάρχει 1 κουμπί CTA (ΑΓΟΡΑ) ή περισσότερα κουμπιά, π.χ. λεπτομέρειες προϊόντος, αγορά, προσθήκη στη λίστα επιθυμιών κ.λπ.
• Blog - Τα κουμπιά CTA θα μπορούσαν να παραπέμπουν σε ένα άλλο χρήσιμο άρθρο ή στην αγορά του προϊόντος/υπηρεσίας σας.

Ρυθμίσεις μπλοκ κουμπιών

Στον Επιθεωρητή, στη δεξιά πλευρά, μπορείτε εύκολα να διαχειριστείτε τις ρυθμίσεις του κουμπιού σας:

• Στυλ
• Χρώμα του φόντου
• Χρώμα γραμματοσειράς
• Σύνορα

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

Νέα που έρχονται στην επόμενη έκδοση WordPress 5.4 (απελευθέρωση 31 Μαρτίου 2020)

Το μπλοκ Button πρόκειται να αντικατασταθεί με το νέο Buttons μπλοκ.
Μπορείτε να υποθέσετε από το νέο όνομα, ότι θα μπορείτε να δημιουργήσετε περισσότερα κουμπιά ένα προς ένα σε ένα δοχείο μπλοκ. Συχνά υπάρχει η ανάγκη να δημιουργήσετε δύο CTA ταυτόχρονα, για παράδειγμα: Αγοράστε τώρα και Διαβάστε περισσότερα. Επίσης, έρχονται κάποιες νέες ρυθμίσεις στυλ και χρώματος. Επιλέξτε στυλ γεμίσματος ή περιγράμματος και στη συνέχεια το χρώμα του φόντου. Μπορείτε να επιλέξετε συμπαγές ή διαβαθμισμένο φόντο. Θα είναι διαθέσιμες ορισμένες προεπιλογές ως σημείο εκκίνησης για πιο εύκολη τελειοποίηση. Τα καλά νέα είναι ότι όλα τα υπάρχοντα μπλοκ κουμπιών θα λειτουργούν και δεν χρειάζεται να τα μεταφέρετε.

Μπλοκ στηλών

Το μπλοκ Columns είναι ένα καταπληκτικό μπλοκ WordPress που ανοίγει τις πόρτες σε νέες διατάξεις. Σας δίνει περισσότερες επιλογές διάταξης των στοιχείων της σελίδας με αποτέλεσμα περισσότερες εναλλακτικές λύσεις σχεδιασμού.

Η εργασία με το μπλοκ Columns είναι εύκολη:

• Δεν χρειάζεται επιπλέον εγκατάσταση πρόσθετων.
• Δεν απαιτείται κωδικοποίηση.
• Το μόνο που χρειάζεστε είναι λίγη αίσθηση του καλού σχεδιασμού.

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

Πώς να χρησιμοποιήσετε το μπλοκ Columns;

Όπως αναφέρθηκε παραπάνω, υπάρχουν 2 τρόποι με τους οποίους μπορεί να χρησιμοποιηθεί το μπλοκ Columns:

• Για να οργανώσετε τη ροή των κειμένων σας (σε μια ανάρτηση ιστολογίου ή σε μια κανονική σελίδα).
• Για να τοποθετήσετε άλλα μπλοκ σε στήλες.

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

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

Ρυθμίσεις μπλοκ στήλης

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

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

Μπλοκ κάλυψης

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

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

Πού να χρησιμοποιήσετε το Cover block;

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

Το μπλοκ κάλυψης μπορεί να χρησιμοποιηθεί ως:

• Επικεφαλίδα οποιασδήποτε σελίδας, συμπεριλαμβανομένης της αρχικής σελίδας.
• Εικόνα ή βίντεο αντικαταστάθηκε από κείμενο που χρησιμοποιείται στη σελίδα προϊόντος.
• Διαχωριστής περιεχομένου στο blog post.

Ρυθμίσεις μπλοκ κάλυψης

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

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

Η ευθυγράμμιση του μπλοκ κάλυψης προσφέρει τις ακόλουθες επιλογές:

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

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

Από το WordPress 5.4 μπορείτε να επιλέξετε το διαβαθμισμένο φόντο αντί για ένα συμπαγές φόντο.

Μπλοκ γκαλερί

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

Η φόρτωση των εικόνων σας μπορεί να γίνει επιλέγοντας αρχεία από τη βιβλιοθήκη πολυμέσων, από τον υπολογιστή σας ή χρησιμοποιώντας τη λειτουργία drag&drop.

Πού να χρησιμοποιήσετε το μπλοκ Γκαλερί;

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

• Η αρχική σας σελίδα
• Μεμονωμένες υποσελίδες που δημιουργούνται ως άλμπουμ της γκαλερί φωτογραφιών σας
• Σελίδες προϊόντων
• Blogpost

Ρυθμίσεις μπλοκ γκαλερί

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

• Αριθμός στηλών στις οποίες παρατάσσονται οι εικόνες.
• Περικοπή εικόνας ώστε να ταιριάζει με το ίδιο μέγεθος (της μικρότερης εικόνας).
• Υπερσύνδεσμος για να έχετε τη δυνατότητα να συνδέσετε μια άλλη σελίδα ή ένα αρχείο πολυμέσων.

Μπλοκ εικόνας

Το μπλοκ εικόνας δεν είναι τίποτα άλλο παρά το μπλοκ για την εμφάνιση μιας εικόνας στον ιστότοπό σας.

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

Πότε να χρησιμοποιήσετε το μπλοκ εικόνας;

Το μπλοκ εικόνας θα πρέπει να χρησιμοποιείται ειδικά όταν το αντικείμενο που εμφανίζεται στην εικόνα είναι ιδιαίτερα σημαντικό για τον επισκέπτη του ιστοτόπου σας:

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

Ρυθμίσεις μπλοκ εικόνας

Ένα από τα μεγαλύτερα πλεονεκτήματα του μπλοκ Image WordPress είναι οι επιλογές μεγέθους εικόνας. Μπορείτε εύκολα να αλλάξετε το μέγεθος μιας εικόνας τραβώντας την από τη γωνία της, να επιλέξετε ένα σταθερό μέγεθος σε pixels ή να ορίσετε το μέγεθος σε ποσοστό.

Μια άλλη σημαντική επιλογή είναι τα πεδία εισαγωγής για εναλλακτικό κείμενο, λεζάντα και σύνδεσμο. Συνιστώ ανεπιφύλακτα τη χρήση αυτών των πεδίων, καθώς παίζουν σημαντικό ρόλο στο on page SEO.

Μπλοκ μέσων και κειμένου

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

Πού να χρησιμοποιήσετε το μπλοκ μέσων και κειμένου;

Αν και το μπλοκ Media & text είναι πιο κατάλληλο για χρήση μέσα σε αναρτήσεις ιστολογίων, με λίγη φαντασία μπορείτε να το χρησιμοποιήσετε και αλλού. Για παράδειγμα, μπορείτε να δημιουργήσετε μια ωραία επισκόπηση προϊόντος ή υπηρεσίας χρησιμοποιώντας εικόνα και κείμενο το ένα δίπλα στο άλλο.

Μην ξεχάσετε να προσθέσετε ένα μπλοκ κουμπιών στο τμήμα κειμένου του μπλοκ Media & text, αν χρησιμοποιείται ως επισκόπηση προϊόντος/υπηρεσίας. Με αυτόν τον τρόπο μπορείτε να σχεδιάσετε ένα ωραίο τμήμα CTA σε οποιαδήποτε σελίδα.

Πλεονεκτήματα του μπλοκ μέσων και κειμένου

• Συνδυάζοντας εικόνα και κείμενο που ταιριάζουν μεταξύ τους.
• Αποφυγή λανθασμένης τοποθέτησης της εικόνας μέσα στο blogpost.
• Βοήθεια για την ανταπόκριση του ιστότοπου (χρησιμοποιήστε τη λειτουργία "Stack on mobile").

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

Όταν εξετάζετε τη ρύθμιση του μπλοκ Media & text, θα παρατηρήσετε αρκετές επιλογές ευθυγράμμισης, μερικές από τις οποίες είναι μοναδικές σε σύγκριση με τα περισσότερα άλλα μπλοκ.

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

Εισαγωγή συνδέσμου από την έκδοση 5.4 του WordPress (31.3.2020). Μπορείτε να επιλέξετε από σύνδεσμο, αρχείο πολυμέσων ή σελίδα συνημμένου.

Επιτραπέζιο μπλοκ

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

Πού να χρησιμοποιήσετε το μπλοκ πίνακα;

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

• Σύγκριση δεδομένων
• Πίνακες τιμών
• Τεχνικές λεπτομέρειες του προϊόντος
• Συνταγές
• Επισκόπηση πακέτων μελών

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

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

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

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

Περισσότερες επιλογές περιλαμβάνουν:

• Χρώμα του φόντου
• Κελιά σταθερού πλάτους
• Επί κεφαλής
• Υποσέλιδο
• Σύνδεσμος (η καταχώρηση κειμένου σε έναν πίνακα μπορεί να παραπέμπει σε άλλες σελίδες)

Ποιο μπλοκ θα θέλατε να δείτε στη συνέχεια;

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