Διάλεξε πρότυπο και εμφάνιση
Δες προεπισκόπηση προτύπων και ρύθμισε χρώματα, γραμματοσειρές, διάταξη και λογότυπο του ιστότοπού σου.
Για κατόχους και διαχειριστές ομάδων · 11 βήματα
Τι χρειάζεσαι πρώτα
- Η ομάδα σου έχει συνδρομή ιστότοπου. Στη διαχείριση μιας δωρεάν ομάδας εμφανίζεται Απόκτησε ιστότοπο αντί για Πρότυπο.
- Είσαι ο κάτοχος ή διαχειριστής της ομάδας.
Βήματα
Βήμα 1: Άνοιξε το Πρότυπο
Στο μενού αριστερά, πάτα Πρότυπο.
Θα δεις: μια σελίδα με τίτλο Πρότυπο, με μία κάρτα για κάθε πρότυπο. Αυτό που χρησιμοποιεί ο ιστότοπός σου έχει την ένδειξη Σε χρήση. Αν ο ιστότοπός σου δεν έχει ακόμα πρότυπο, κάθε κάρτα δείχνει στη θέση της Επιλογή — αν το πατήσεις, επιλέγεται αυτό το πρότυπο με την πρώτη του παλέτα και ανοίγει η Εμφάνιση.
Βήμα 2: Κάνε προεπισκόπηση ενός προτύπου
Στην κάρτα ενός προτύπου, πάτα Προεπισκόπηση.
Θα δεις: τον δικό σου ιστότοπο σε αυτό το πρότυπο, κάτω από μια μπάρα που γράφει Προεπισκόπηση. Μόνο οι διαχειριστές της ομάδας σου μπορούν να την ανοίξουν. Πάτα Πίσω στη διαχείριση όταν τελειώσεις.
Βήμα 3: Άνοιξε την Εμφάνιση
Πίσω στη σελίδα Πρότυπο, πάτα Εμφάνιση πάνω δεξιά.
Θα δεις: μια σελίδα με τίτλο Εμφάνιση — τη φόρμα στη μία πλευρά και μια ζωντανή εικόνα του ιστότοπού σου δίπλα της (από κάτω σε στενή οθόνη).
Βήμα 4: Διάλεξε παλέτα
Στην ενότητα Παλέτα, διάλεξε μία από τις προεπιλογές του προτύπου.
Θα δεις: την προεπιλογή επισημασμένη και την εικόνα του ιστότοπού σου στα χρώματά της. Μια προεπιλογή ορίζει τα πέντε χρώματα και τις δύο γραμματοσειρές μαζί.
Βήμα 5: Άλλαξε ένα χρώμα
Στην ενότητα Χρώματα, πληκτρολόγησε έναν κωδικό χρώματος όπως
#7dd3fcστο πεδίο Κύριος, Χρώμα έμφασης, Έμφαση, Φόντο ή Κείμενο — ή πάτα το τετράγωνο δίπλα του για να διαλέξεις ένα.Θα δεις: την εικόνα του ιστότοπού σου να αλλάζει και το Προσαρμοσμένη επισημασμένο κάτω από την Παλέτα. Κάθε χρώμα δείχνει την προεπιλογή του προτύπου· το Επαναφορά την επαναφέρει.
Βήμα 6: Δώσε στο κείμενο και στις επιφάνειες δικά τους χρώματα
Στην ενότητα Κείμενο και επιφάνειες, πάτα Διάλεξε χρώμα δίπλα σε Επικεφαλίδες, Λεζάντες, Κάρτες, Γραμμές, Σύνδεσμοι και ετικέτες, Κουμπί ή Κείμενο κουμπιού και μετά πληκτρολόγησε έναν κωδικό χρώματος ή πάτα το τετράγωνο δίπλα του. Καθένα ξεκινά στο Αυτόματο, που ακολουθεί τα πέντε χρώματά σου όπως το κάνει το πρότυπό σου· το Χρήση Αυτόματου το επαναφέρει.
Θα δεις: την εικόνα του ιστότοπού σου να αλλάζει και, κάτω από κάθε χρώμα που φέρει κείμενο, έναν αριθμό όπως 7,2:1 · ευανάγνωστο — πόσο καθαρά ξεχωρίζει από το φόντο και τις κάρτες σου. Κάτω από 4,5:1 (3:1 για επικεφαλίδες) γράφει δυσανάγνωστο, δείχνει το χρώμα που θα βλέπουν οι επισκέπτες στη θέση του και προσφέρει το Κάν’ το ευανάγνωστο, που βάζει αυτό το χρώμα στο πεδίο.
Βήμα 7: Διάλεξε γραμματοσειρές
Στην ενότητα Τυπογραφία, άνοιξε το Γραμματοσειρά επικεφαλίδων ή το Γραμματοσειρά κειμένου και διάλεξε γραμματοσειρά. Κάθε γραμματοσειρά εμφανίζεται με τη δική της μορφή και ανήκει σε μια ομάδα — Heavy display, Condensed, Tech, Clean sans, Serif, Handwritten, Monospace — και μπορείς να πληκτρολογήσεις ένα όνομα για να τη βρεις.
Θα δεις: την εικόνα του ιστότοπού σου με αυτή τη γραμματοσειρά. Αν αλλάξεις γραμματοσειρά, η παλέτα γίνεται κι αυτή Προσαρμοσμένη.
Βήμα 8: Πρόσθεσε το λογότυπό σου
Στην ενότητα Λογότυπο, πάτα Επίλεξε εικόνα δίπλα σε Λογότυπο ονόματος, Τετράγωνο λογότυπο ή Favicon (γράφει Αντικατάσταση όταν έχει ήδη οριστεί). Στο πλαίσιο Εισαγωγή εικόνας, διάλεξε μια εικόνα ή ανέβασε μία — JPEG, PNG, WebP ή AVIF, έως 5 MB — και πάτα Εισαγωγή. Ένα λογότυπο δεν χρειάζεται εναλλακτικό κείμενο.
- Το Τετράγωνο λογότυπο εμφανίζεται στην πλοήγηση του ιστότοπού σου, στην κορυφή της Αρχικής και στο ρόστερ σου.
- Το Λογότυπο ονόματος είναι προαιρετικό: το όνομα της ομάδας σου ως εικόνα, σε οποιοδήποτε σχήμα. Όταν ορίσεις ένα, αντικαθιστά το τετράγωνο λογότυπο και το όνομα στην πλοήγηση και στην κορυφή της Αρχικής.
- Το Favicon είναι το μικρό εικονίδιο στην καρτέλα του προγράμματος περιήγησης.
Τα λογότυπά σου δεν περικόπτονται ούτε αλλάζουν ποτέ. Κάθε εικόνα εμφανίζεται ολόκληρη και ένα διάφανο φόντο μένει διάφανο. Γι’ αυτό το τετράγωνο λογότυπο και το favicon πρέπει να είναι τετράγωνα, τουλάχιστον 256 × 256 pixel — μια εικόνα με άλλο σχήμα απορρίπτεται όταν αποθηκεύεις, με ένα μήνυμα που αναφέρει το μέγεθός της. Ένα λογότυπο που διάλεξες πριν από αυτόν τον κανόνα συνεχίζει να εμφανίζεται μέχρι να το αλλάξεις.
Θα δεις: το όνομα της εικόνας δίπλα στη θέση της. Μια προεπιλογή δεν τα αλλάζει ποτέ αυτά.
Βήμα 9: Ρύθμισε τις επιλογές του προτύπου
Πιο κάτω, στην ενότητα Επιλογές Broadcast, διάλεξε Hero layout (Image behind the text ή Image beside the text) και Card edges (Cut corners ή Square corners). Τα άλλα πρότυπα έχουν εδώ τις δικές τους επιλογές: στο Neon Grid, το Motion είναι Full motion ή Calm (όλα ακίνητα) και το Hero glow είναι Bright (η κορυφή της αρχικής σου σελίδας περνά σταδιακά από το χρώμα φόντου στο χρώμα έμφασης) ή Σκούρο (σε ένα σκούρο γκρι από ανάμειξη του κύριου χρώματος και του χρώματος έμφασης, για πιο σκούρο αποτέλεσμα)· στο Crosshair, το Hero layout είναι Split (τα κείμενά σου αριστερά, η εικόνα σου δεξιά με τον επόμενο αγώνα σου από πάνω) ή Full-width image· στο Faceoff, το Hero alignment είναι Centered ή Left και το Home roster είναι Scattered (οι κάρτες των παικτών σου γύρω από ένα μεγάλο «Meet the squad») ή Grid· στο Clutch, το Hero layout είναι Bento (το hero σου δίπλα σε ένα πάνελ Latest news) ή Full width και οι Corners είναι Rounded ή Square· στο Varsity, το Φόντο είναι Pinstripe (μια αχνή διαγώνια ρίγα πίσω από κάθε σελίδα) ή Απλό και το Hero size είναι Full (μια ψηλή φωτογραφία με το μενού από πάνω) ή Banner (μια πιο κοντή)· στο Redline, το Photo tint είναι Duotone (οι φωτογραφίες σου βαμμένες στο κύριο χρώμα σου) ή Natural (με τα δικά τους χρώματα) και τα Panels είναι Offset (σκούρα μπλοκ πίσω από τις φωτογραφίες και τις ενότητές σου) ή Flat.
Θα δεις: την εικόνα του ιστότοπού σου να αλλάζει διάταξη.
Βήμα 10: Αποθήκευσε
Πάτα Αποθήκευση στο κάτω μέρος της φόρμας.
Θα δεις: «Η εμφάνιση αποθηκεύτηκε». Οι επισκέπτες δεν τη βλέπουν ακόμα — οι αποθηκευμένες αλλαγές μένουν στο πρόχειρό σου μέχρι να δημοσιεύσεις.
Βήμα 11: Δημοσίευσε τον ιστότοπό σου
Πάτα Δημοσίευση στο μενού αριστερά και δημοσίευσε — δες Δημοσίευσε τον ιστότοπό σου.
Θα δεις: την Εμφάνιση στη λίστα αλλαγών πριν δημοσιεύσεις και τον ιστότοπό σου με τη νέα του εμφάνιση μετά.
Πώς θα ξέρεις ότι πέτυχε
- Η σελίδα Πρότυπο δείχνει το πρότυπό σου ως Σε χρήση.
- Μετά τη δημοσίευση, ο ιστότοπός σου δείχνει τα χρώματα, τις γραμματοσειρές και το λογότυπό σου — ολόκληρο, χωρίς περικοπή.
- Κάθε χρώμα που φέρει κείμενο γράφει ευανάγνωστο, ή έχεις αποδεχτεί την ευανάγνωστη απόχρωση που βλέπουν οι επισκέπτες στη θέση του.
Κάτι δεν φαίνεται σωστό;
Άλλαξα τα χρώματά μου αλλά ο ιστότοπός μου φαίνεται ίδιος
Με την αποθήκευση μένουν στο πρόχειρό σου. Πάτα Δημοσίευση στο μενού και δημοσίευσε (βήμα 11).
Ένα χρώμα γράφει «δυσανάγνωστο»
Το κείμενο σε αυτό το χρώμα δεν ξεχωρίζει αρκετά από το φόντο ή τις κάρτες σου για να το διαβάζουν όλοι — το κανονικό κείμενο χρειάζεται 4,5:1 και οι επικεφαλίδες 3:1. Οι επισκέπτες σου δεν βλέπουν ποτέ το δυσανάγνωστο χρώμα: ο ιστότοπός σου δείχνει στη θέση του την πλησιέστερη ευανάγνωστη απόχρωση και η φόρμα την αναφέρει. Πάτα Κάν’ το ευανάγνωστο για να χρησιμοποιήσεις αυτή την απόχρωση ή διάλεξε δική σου μέχρι να γράφει ευανάγνωστο. Ένα χρώμα που μένει στο Αυτόματο προσαρμόζεται με τον ίδιο τρόπο χωρίς ερώτηση. Η Δημοσίευση δείχνει επίσης μια προειδοποίηση, αλλά δεν σε εμποδίζει ποτέ να δημοσιεύσεις.
Ο ιστότοπός μου είναι δυσανάγνωστος επειδή έχει παντού ένα χρώμα
Δώσε σε κάθε είδος κειμένου το δικό του χρώμα στην ενότητα Κείμενο και επιφάνειες (βήμα 6): για παράδειγμα κόκκινες Επικεφαλίδες, ανοιχτό γκρι Κείμενο για τις παραγράφους και ένα λίγο πιο ανοιχτό χρώμα στις Κάρτες ώστε τα πάνελ να ξεχωρίζουν από τη σελίδα. Για να χρωματίσεις ολόκληρα τμήματα μιας σελίδας διαφορετικά — ένα ανοιχτόχρωμο κατάστημα σε σκουρόχρωμο ιστότοπο, μια ζώνη στο χρώμα έμφασης — δες Δώσε σε τμήματα του ιστότοπού σου δικά τους χρώματα.
Θα διαγραφεί το περιεχόμενό μου αν αλλάξω πρότυπο;
Όχι. Το περιεχόμενό σου ανήκει στον ιστότοπό σου, όχι στο πρότυπο: τα χρώματα και οι γραμματοσειρές σου μεταφέρονται όπου τα χρησιμοποιεί το νέο πρότυπο, οι δικές του επιλογές επιστρέφουν στις προεπιλεγμένες τιμές τους και μια ενότητα που δεν μπορεί να δείξει κρύβεται, δεν διαγράφεται. Το πλαίσιο που ανοίγει πριν από την αλλαγή τα αναφέρει και τα τρία, και μπορείς να την ακυρώσεις. Αν ο ιστότοπός σου έχει ακόμα τα προεπιλεγμένα χρώματα και γραμματοσειρές της πλατφόρμας — δεν διάλεξες ποτέ παλέτα ούτε άλλαξες χρώμα — χρησιμοποιείται η πρώτη παλέτα του νέου προτύπου, ώστε ο ιστότοπός σου να μοιάζει με την εικόνα του προτύπου· το πλαίσιο το αναφέρει στο Χρώματα και γραμματοσειρές. Υπάρχουν επτά πρότυπα: το Broadcast, με εμφάνιση ημέρας αγώνα· το Neon Grid, μια μαύρη εμφάνιση νέον με κινούμενο πλέγμα και φωτεινή διαβάθμιση πίσω από το hero, το λογότυπό σου να αιωρείται από πάνω, μετρητές στατιστικών και έναν τοίχο βίντεο· το Crosshair, μια μαύρη, τεχνική εμφάνιση με πλαισιωμένα πάνελ, ετικέτες σε αγκύλες, ένα μεγάλο λογότυπο ονόματος στο υποσέλιδο και τις φωτογραφίες σε πρώτο πλάνο· το Faceoff, μια εμφάνιση σε μπλε-μαύρο και παγωμένο κυανό όπου το λογότυπό σου αντικρίζει του αντιπάλου σε κάθε κάρτα αγώνα, με μεγάλο hero και την ομάδα σου σκορπισμένη γύρω από έναν τεράστιο τίτλο· το Clutch, μια ανοιχτόχρωμη εμφάνιση με λευκές στρογγυλεμένες κάρτες, φαρδιές κεφαλαίες επικεφαλίδες και ένα έντονο χρώμα, με τον επόμενο αγώνα σου στο hero και, σε φαρδιά οθόνη, στην κορυφή κάθε σελίδας· το Varsity, μια πανεπιστημιακή εμφάνιση με σκούρες μπλε ζώνες, ένα χρυσό, τις καλύτερες θέσεις σου σε τουρνουά πάνω από το ρόστερ και τους αγώνες σου σε πίνακα προγράμματος· και το Redline, ένα κόκκινο σε σχεδόν μαύρο, με τις φωτογραφίες σου βαμμένες στο κύριο χρώμα σου (κόκκινο από προεπιλογή), τετράγωνα κουμπιά και τους αγώνες σου σε σειρές με φωτογραφίες και τα δύο λογότυπα εκατέρωθεν ενός VS. Οι επικεφαλίδες του Clutch είναι σε Archivo Expanded, που μπορείς να τη διαλέξεις σε οποιοδήποτε πρότυπο στην ομάδα Heavy display. Σε υπολογιστή ή tablet, το κουμπί Join our Discord του Faceoff στην κορυφή κάθε σελίδας εμφανίζεται μόνο αν έχεις προσθέσει τον σύνδεσμο Discord σου στα Κοινωνικά δίκτυα (Πρόσθεσε τα κοινωνικά σου δίκτυα). Κάθε πρότυπο δείχνει τη ζωντανή μετάδοσή σου με τον ίδιο τρόπο: αντίστροφη μέτρηση την ημέρα της μετάδοσης, το player του Twitch στην κορυφή της αρχικής σου σελίδας όσο είσαι live και μια μπάρα Live σε κάθε άλλη σελίδα (Προγραμμάτισε μια μετάδοση).
Γράφει «Αυτός ο ιστότοπος άλλαξε από τότε που τον άνοιξες»
Ένας άλλος διαχειριστής αποθήκευσε πρώτος και τίποτα από τα δικά σου δεν αποθηκεύτηκε. Πάτα Επαναφόρτωση και μετά κάνε ξανά την αλλαγή σου.
Γράφει «Αυτό το λογότυπο είναι … Ανέβασε μια τετράγωνη εικόνα»
Το τετράγωνο λογότυπο και το favicon πρέπει να είναι τετράγωνα — ίδιο πλάτος και ύψος — και τουλάχιστον 256 × 256 pixel, γιατί δεν τα περικόπτουμε ποτέ. Το μήνυμα αναφέρει το μέγεθος της εικόνας σου. Φτιάξε μια τετράγωνη εκδοχή (πρόσθεσε κενό, διάφανο χώρο γύρω από ένα φαρδύ λογότυπο), ανέβασέ τη και αποθήκευσε ξανά. Ένα λογότυπο που δεν είναι τετράγωνο ανήκει στο Λογότυπο ονόματος.
Γράφει «Αυτό το λογότυπο δεν έχει καταγεγραμμένο μέγεθος»
Δεν ξέρουμε το μέγεθος αυτής της εικόνας, οπότε δεν μπορούμε να ελέγξουμε αν είναι τετράγωνη. Ανέβασέ τη ξανά, διάλεξε το νέο αντίγραφο και αποθήκευσε.
Τα πεδία και η Αποθήκευση είναι γκριζαρισμένα
Η συνδρομή της ομάδας σου έχει λήξει, οπότε οι σελίδες του ιστότοπού της είναι μόνο για ανάγνωση μέχρι να ενεργοποιηθεί ξανά. Ανανέωσέ τη — δες Διαχείριση χρέωσης.
Σχετικά άρθρα
Ακόμα κολλημένος; Επικοινώνησε με την υποστήριξη ή στείλε email στο support@spawnfront.com — πες μας σε ποια σελίδα είσαι και τον αριθμό του βήματος.