Πού βρίσκονται αυτές οι ρυθμίσεις
Το branding ρυθμίζεται ανά αγορά και μέσα σε κάθε αγορά επηρεάζει όλες τις σελίδες ταυτόχρονα. Άνοιξε τον builder, επίλεξε αγορά με το κουμπί αγορών (σημαία χώρας) στην κορυφή της αριστερής πλαϊνής μπάρας και μετά άνοιξε την καρτέλα Ρυθμίσεις (εικονίδιο γραναζιού). Οι ρυθμίσεις έχουν δικές τους υποκαρτέλες με αυτή τη σειρά: Branding, Χρώματα, Γραμματοσειρές, Διάταξη, Κινήσεις, Αυτοματισμοί, Εισαγωγές, Εικονίδια, Περιορισμοί, Checkout, Φόρμα checkout, Σελίδα συντήρησης, Custom CSS και Custom Javascript. Οι αλλαγές εφαρμόζονται στην αγορά που έχεις επιλέξει και γίνονται ορατές όταν κάνεις κλικ στο Δημοσίευση. Αλλάζοντας αγορά, φορτώνονται τα δικά της χρώματα, γραμματοσειρές και διάταξη.
Χρωματικά θέματα
Η καρτέλα Χρώματα περιέχει έως 9 χρωματικά θέματα. Όταν φτάσεις το όριο, η κάρτα προσθήκης γίνεται ανενεργό badge μετρώντας 9/9. Κάθε ενότητα, μπλοκ και στοιχείο αναφέρεται σε ένα θέμα με τον αριθμό του, οπότε αλλάζοντας τα χρώματα ενός θέματος, ανανεώνονται αμέσως όλες οι ενότητες που το χρησιμοποιούν σε όλες τις σελίδες. Με δεξί κλικ σε κάρτα θέματος μπορείς να το αντιγράψεις ή να το διαγράψεις.
Ρόλοι χρωμάτων σε κάθε θέμα
Κάθε θέμα ορίζει αυτούς τους ρόλους, όλοι ως τιμές hex:
- Background: το κύριο φόντο ενότητας.
- Inner Background: ελαφρώς χρωματισμένο φόντο για κάρτες και περιεχόμενο μέσα σε ενότητα.
- Heading: χρώμα κειμένου επικεφαλίδων.
- Text: χρώμα παραγράφων και σώματος κειμένου.
- Important text: έντονο κείμενο όπως τιμές και επισημασμένες τιμές.
- Links και Hover links: χρώμα υπερσυνδέσμων σε κανονική και αιωρούμενη κατάσταση.
- Border: περίγραμμα στοιχείων και διαχωριστικές γραμμές.
- Outline: δακτύλιοι εστίασης και έντονα περιγράμματα που ξεχωρίζουν περισσότερο από τα απλά περιγράμματα.
- Shadow: χρώμα σκιάς πλαισίου (συνήθως ημιδιαφανές).
- Primary button: φόντο, κείμενο και περίγραμμα, το καθένα με ξεχωριστό χρώμα αιώρησης (σύνολο 6 τιμές).
- Secondary button: φόντο, κείμενο και περίγραμμα, το καθένα με ξεχωριστό χρώμα αιώρησης (σύνολο 6 τιμές).
- Input background, text, border, and label: μορφοποίηση πεδίων φόρμας.
- Input hover background: φόντο πεδίου όταν ο πελάτης περνάει το ποντίκι.
Συμβουλές για δυνατά θέματα
- Κράτησε ουδέτερο ανοιχτό Background στις περισσότερες ενότητες και χρησιμοποίησε έντονα χρώματα μόνο σε ένα θέμα για hero και call-to-action ενότητες.
- Κάνε το Primary Button Background να ξεχωρίζει καθαρά από το Background της ενότητας ώστε το κουμπί να είναι εμφανές.
- Όρισε το Inner Background ως ελαφριά απόχρωση του κύριου Background ώστε οι κάρτες να διαβάζονται ως ξεχωριστές χωρίς να ενοχλούν οπτικά.
- Στόχευσε σε τουλάχιστον 4.5:1 αντίθεση μεταξύ κειμένου και φόντου.
Γραμματοσειρές
Η καρτέλα Γραμματοσειρές αντιστοιχεί τέσσερις ρόλους σε κάθε οικογένεια γραμματοσειράς:
- Body: κείμενο παραγράφων και περιγραφές.
- Heading: όλες οι επικεφαλίδες του καταστήματος.
- Subheading: δευτερεύοντες τίτλοι και υπότιτλοι ενοτήτων.
- Accent: διακοσμητική γραμματοσειρά για τιμές, badges και έμφαση.
Διαθέσιμες γραμματοσειρές: Inter, Helvetica, SF Mono, New York, System UI, Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Nunito, Merriweather, Playfair Display, Lora, PT Sans, PT Serif, Quicksand, Space Grotesk, DM Sans, Syne, Manrope, Outfit, Urbanist, Oswald, Bebas Neue, Abel, Abril Fatface και Acme. Για καταστήματα με αραβικό περιεχόμενο, κάθε γραμματοσειρά συνδυάζεται αυτόματα με αντίστοιχη αραβική, οπότε δεν χρειάζεται να επιλέξεις ξεχωριστή αραβική γραμματοσειρά.
Πλάτος σελίδας
Η καρτέλα Διάταξη έχει ένα slider Πλάτος σελίδας που ορίζει το μέγιστο πλάτος του κύριου grid περιεχομένου, από 900 έως 1400 px ανά 100 (δηλαδή 900, 1000, 1100, 1200, 1300 ή 1400· προεπιλογή 1200). Ενότητες με Πλάτος σελίδας περιορίζονται σε αυτή την τιμή· ενότητες με Πλήρες πλάτος καλύπτουν πάντα όλο το παράθυρο. Σε οθόνες μικρότερες από το επιλεγμένο πλάτος, οι ενότητες συρρικνώνονται ώστε να καλύπτουν το 100% της οθόνης.
Λογότυπο
Το λογότυπο ορίζεται σε δύο σημεία: το μπλοκ Λογότυπο μέσα στην ενότητα Header και το μπλοκ Σχετικά με εμάς στο footer. Κάνε κλικ στο μπλοκ και χρησιμοποίησε τον επιλογέα εικόνας Λογότυπο για να διαλέξεις εικόνα από τη βιβλιοθήκη πολυμέσων ή να ανεβάσεις νέα. Αφού την επιλέξεις, όρισε Πλάτος και Ύψος (20 έως 300 px· η άλλη διάσταση προσαρμόζεται αυτόματα για να διατηρηθεί η αναλογία). Το λογότυπο header έχει προεπιλογή 120 px πλάτος και 50 px ύψος, και μπορείς να ορίσεις οριζόντια θέση (αριστερά, κέντρο ή δεξιά) και padding. Από προεπιλογή, το λογότυπο header οδηγεί στην αρχική σελίδα· μπορείς να το κάνεις διακοσμητικό απενεργοποιώντας το Το λογότυπο οδηγεί στην αρχική στην ομάδα Header της καρτέλας Περιορισμοί.
Favicon
Όρισε το favicon στην καρτέλα Branding. Κάνε κλικ στο Επιλογή favicon και διάλεξε εικόνα PNG, JPEG, WEBP ή ICO (προτεινόμενο μέγεθος 32x32 ή 16x16 px). Εμφανίζεται στις καρτέλες και τους σελιδοδείκτες του browser.
Εικόνα φόντου σώματος
Επίσης στην καρτέλα Branding μπορείς προαιρετικά να ορίσεις Εικόνα σώματος πίσω από όλο το κατάστημα (PNG, JPEG ή WEBP). Αφού επιλέξεις εικόνα, εμφανίζονται δύο επιλογές: Μέγεθος (Κάλυψη γεμίζει το παράθυρο, περικόπτοντας αν χρειαστεί· Προσαρμογή χωράει όλη την εικόνα) και Επανάληψη (αν είναι ενεργό, η εικόνα επαναλαμβάνεται και μετακινείται με τη σελίδα· αν είναι ανενεργό, μένει σταθερή καθώς το περιεχόμενο κυλάει από πάνω της). Χρησιμοποίησε πολύ συμπιεσμένη εικόνα για να μην καθυστερεί η φόρτωση της σελίδας.
Custom CSS και JavaScript
Για αλλαγές που δεν καλύπτουν οι βασικές ρυθμίσεις, οι καρτέλες Custom CSS και Custom Javascript δέχονται έως 1.000 χαρακτήρες που εισάγονται και εκτελούνται σε κάθε σελίδα του καταστήματος. Χρησιμοποίησέ τα με φειδώ. Για στυλ που αφορά μόνο μία ενότητα, κάθε ενότητα έχει και δική της καρτέλα Custom CSS στον πίνακα ελέγχου της, που είναι πιο ασφαλής από το πεδίο για όλο το site.