Πώς να ορίσετε φόντο εικόνας στο WordPress

Πώς να ορίσετε φόντο εικόνας στο WordPress
Εικόνα φόντου WordPress για την αρχική σελίδα με άλλα στοιχεία.

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

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

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

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

Πώς να προσθέσετε εικόνα φόντου στο WordPress χρησιμοποιώντας το μπλοκ Gutenberg

Ξεκινήστε τώρα

Ξεκινήστε τώρα με μια δοκιμή χωρίς κινδύνους. Δεν απαιτείται πιστωτική κάρτα.

Εικόνα φόντου WordPress μέσω μπλοκ συμπλέγματος

Σας παρουσιάζουμε το εύχρηστο μπλοκ που φτιάξαμε για το WordPress μπλοκ Gutenberg για εικόνα φόντου – Μπλοκ συμπλέγματος. Είναι μέρος της δικής μας ομάδας μπλοκ. Η προσθήκη Citadela Pro έχει πολλές δυνατότητες για να σας βοηθήσει να δημιουργήσετε έναν όμορφο ιστότοπο. Όλα τα προσαρμοσμένα μπλοκ AitThemes είναι διαθέσιμα στο Πρόσθετο Citadela Pro.

Παρακαλώ διαβάστε Τεκμηρίωση μπλοκ συμπλέγματος για ρυθμίσεις λεπτομερειών.

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

Το σύμπλεγμα δεν θα τεντωθεί σε όλο το πλάτος εάν:

  • Έχετε μια ενεργή πλαϊνή γραμμή
  • Εάν χρησιμοποιείτε στήλες που θα περιορίσουν τον χώρο για το Cluster

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

Σε αυτό το άρθρο θα σας δείξουμε:

Πώς να προσθέσετε μπλοκ συμπλέγματος

Το μπλοκ συμπλέγματος είναι ένα μπλοκ premium και είναι διαθέσιμο μόνο εάν εγκαταστήσετε και ενεργοποιήσετε Πρόσθετο Citadela Blocks. Μετά την εγκατάσταση της προσθήκης, το Cluster block θα προστεθεί αυτόματα στον επεξεργαστή μπλοκ WordPress και μπορείτε να ξεκινήσετε αμέσως να εργάζεστε με αυτό.

Το μπλοκ συμπλέγματος μπορεί να προστεθεί τόσο σε αναρτήσεις όσο και σε σελίδες. Απλώς κάντε κλικ στην επάνω γραμμή σύνδεσης "+" ή οπουδήποτε στην επιφάνεια εργασίας του προγράμματος επεξεργασίας. Στη συνέχεια, απλώς αναζητήστε το Cluster block.

Προσθήκη μπλοκ συμπλέγματος στον επεξεργαστή WordPress κάνοντας κλικ στο "+"
Προσθήκη μπλοκ συμπλέγματος κάνοντας κλικ στο "+"

Η δεύτερη επιλογή για να προσθέσετε μπλοκ συμπλέγματος είναι πληκτρολογώντας "/" και όνομα μπλοκ μετά από αυτό. Στη συνέχεια, το μπλοκ συμπλέγματος είναι έτοιμο για χρήση.

Προσθήκη μπλοκ συμπλέγματος με κάθετο "/"
Προσθήκη μπλοκ συμπλέγματος χρησιμοποιώντας κάθετο "/"

Ομαδοποίηση μπλοκ με χρήση συμπλέγματος

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

Διαδικασία επιλογής ένθετων μπλοκ
Διαδικασία επιλογής και εισαγωγής ένθετων μπλοκ

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

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

Το μπλοκ εικόνας είναι ένθετο στο μπλοκ συμπλέγματος
Ιστότοπος χαρτοφυλακίου που δημιουργήθηκε με τη βοήθεια του Cluster block

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

Το μπλοκ υπηρεσίας είναι ένθετο στο μπλοκ συμπλέγματος
Χρησιμοποιήστε το μπλοκ υπηρεσιών στο μπλοκ συμπλέγματος για να παρουσιάσετε το προϊόν σας (και τις δυνατότητές του) με πιο ελκυστικό τρόπο

Πολλαπλά μπλοκ σε ένα μόνο

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

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

Το μπλοκ στηλών είναι ένθετο στο μπλοκ συμπλέγματος
Πώς μπορεί να χρησιμοποιηθεί ο αποκλεισμός συμπλέγματος στον ιστότοπο μιας σελίδας

Βασικές ρυθμίσεις στη γραμμή εργαλείων: Επιλογές στοίχισης περιεχομένου

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

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

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

Κατεβάστε το Citadela WordPress Theme & Plugins

Ξεκινήστε τώρα με μια δοκιμή χωρίς κινδύνους. Δεν απαιτείται πιστωτική κάρτα.

Ρυθμίσεις χρώματος επικεφαλίδας και διαχωριστικού

Αλλαγή χρώματος επικεφαλίδας

Από το WP 5.3, μπορείτε να αλλάξετε το χρώμα της κεφαλίδας σας μέσω του μπλοκ Επικεφαλίδας. Αυτή είναι μια πολύ χρήσιμη δυνατότητα – ειδικά αν έχετε σκούρα διάταξη και συνδυασμό χρωμάτων, είναι προτιμότερο να αλλάξετε το προεπιλεγμένο χρώμα κειμένου (που είναι μαύρο) σε πιο ανοιχτό χρώμα.

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

Νέο χρώμα για το Separator που χρησιμοποιείται στον ιστότοπό σας

Όταν προσθέτετε στο WP σας μια εικόνα φόντου ή οποιοδήποτε άλλο είδος περιεχομένου, μερικές φορές μπορεί να χρειαστεί να το διαχωρίσετε από τον υπόλοιπο ιστότοπο. Για το σκοπό αυτό μπορείτε να χρησιμοποιήσετε ένα ειδικό μπλοκ που ονομάζεται Separator. Εισάγοντας το Separator μπορείτε:

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

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

Πώς να προσθέσετε εικόνα φόντου κάτω από ομαδοποιημένα μπλοκ

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

  1. Κάντε κλικ στην εικόνα φόντου και ενεργοποιήστε τη λειτουργία "Εμφάνιση εικόνας φόντου".
  2. Κάντε κλικ στο «Επιλογή εικόνας». Θα ανοίξει η Βιβλιοθήκη πολυμέσων. Μπορείτε να επιλέξετε υπάρχουσα εικόνα ή να ανεβάσετε νέα εικόνα στη βιβλιοθήκη σας.
  3. Η εικόνα φόντου μπορεί επίσης να ρυθμιστεί σε σταθερή. Σημαίνει ότι αν κάνετε κύλιση στη σελίδα, το φόντο δεν θα μετακινηθεί με το περιεχόμενο και η θέση της θα διορθωθεί.
  4. Μπορείτε επίσης να επιλέξετε ποιο μέρος της εικόνας φόντου θα εμφανίζεται χρησιμοποιώντας το "Επιλογέας εστίασης". Είναι επίσης δυνατό να επιλέξετε μέρος της εικόνας χρησιμοποιώντας το ποσοστό.
Πώς να προσθέσετε εικόνα φόντου κάτω από ομαδοποιημένα μπλοκ
Οδηγός βήμα προς βήμα για το πώς να προσθέσετε μια εικόνα φόντου

Ξεκινήστε τώρα

Ξεκινήστε τώρα με μια δοκιμή χωρίς κινδύνους. Δεν απαιτείται πιστωτική κάρτα.

Επικάλυψη φόντου

Μία από τις προηγμένες επιλογές στο Cluster είναι η επικάλυψη εικόνας φόντου. Μπορείτε να επιλέξετε ένα από τα προεπιλεγμένα χρώματα ή να επιλέξετε προσαρμοσμένο χρώμα χρησιμοποιώντας τον επιλογέα χρώματος. Είναι επίσης δυνατό να ορίσετε αδιαφάνεια χρώματος. Αυτές οι ρυθμίσεις μπλοκ συμπλέγματος σάς βοηθούν να δημιουργήσετε πραγματικά ελκυστική παρουσίαση ιστότοπου.

Επικάλυψη εικόνας φόντου WordPress
Ρυθμίστε την επικάλυψη φόντου και αλλάξτε την αδιαφάνειά του για να δημιουργήσετε εντυπωσιακό σχέδιο

Νέο μπλοκ ομάδας διαθέσιμο στον πυρήνα

Ποια είναι η διαφορά μεταξύ του μπλοκ ομάδας και του μπλοκ συμπλέγματος AitThemes;

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

Η επεξεργασία εικόνας φόντου είναι ένα κομμάτι κέικ στο μπλοκ Cluster.

Μπορείτε να ανεβάσετε στην εικόνα φόντου του WordPress, να ορίσετε χρώμα φόντου για αυτήν και επίσης επικάλυψη χρώματος φόντου (και να προσαρμόσετε την αδιαφάνεια επικάλυψης επίσης!). Χρειάζονται μόνο λίγα λεπτά.

4 σκέψεις σχετικά με το "How to set image background in WordPress"

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

    1. Γεια σου Τζον,

      Ευχαριστούμε που ενδιαφέρεστε για τα προϊόντα Citadela. Ναι, για να ρυθμίσετε το φόντο μπορείτε να επιλέξετε από διαφορετικές επιλογές. Λεπτομερείς πληροφορίες μπορείτε να βρείτε στη διεύθυνση: https://www.ait-themes.club/citadela-doc/cluster-block/

      Θερμούς χαιρετισμούς!
      Ζλάτκο
      Ομάδα AIT

Τα σχόλια είναι κλειστά.