Τα Text, Image και Divider λειτουργούν ως πλήρη τμήματα σε οποιαδήποτε σελίδα, αλλά και ως μπλοκ μέσα σε πολλά άλλα τμήματα. Οι ρυθμίσεις τους είναι ίδιες και στις δύο περιπτώσεις, με μικρές διαφορές που σημειώνονται παρακάτω.
Προσθήκη
Στον builder, κάντε κλικ στο Add new section. Τα Text και Image βρίσκονται στην ομάδα Content, το Divider στην Decoration. Σε κάθε σελίδα μπορείτε να προσθέσετε έως 3 τμήματα Text, 3 τμήματα Image και 10 Divider. Για να προσθέσετε ένα ως μπλοκ, επιλέξτε ένα τμήμα και κάντε κλικ στο Add new block.
Text
- Text: ο επεξεργαστής έχει έντονα, πλάγια, υπογράμμιση, διακριτή διαγραφή, μέγεθος κειμένου (Small, Normal, Large, Huge), χρώμα κειμένου, χρώμα επισήμανσης και ένα κουμπί για καθαρισμό της μορφοποίησης.
- Preset: Default, Paragraph ή Heading 1 έως Heading 6. Οι επικεφαλίδες χρησιμοποιούν τις γραμματοσειρές επικεφαλίδων σας και δείχνουν στις μηχανές αναζήτησης πώς είναι δομημένη η σελίδα. Χρησιμοποιείτε μόνο ένα Heading 1 ανά σελίδα.
- Font: το Default χρησιμοποιεί τη γραμματοσειρά της προεπιλογής. Τα Body, Heading, Subheading ή Accent χρησιμοποιούν αντί γι' αυτήν τη γραμματοσειρά από τις ρυθμίσεις Fonts.
- Size (10 έως 30 pixel), Line height και Letter spacing (Tight, Normal ή Loose).
- Width: Fit (όσο πλατύ είναι το κείμενο) ή Fill (όλο το πλάτος). Η Alignment (αριστερά, κέντρο, δεξιά) εμφανίζεται με το Fill.
Στη σελίδα συλλογής, το κείμενο μπορεί να χρησιμοποιεί τα {{collection_name}}, {{collection_description}} και {{products_count}} για να δείχνει τις πραγματικές τιμές της συλλογής που προβάλλεται.
Image
- Image: επιλέξτε μια εικόνα από τη βιβλιοθήκη πολυμέσων σας.
- Width: Fit, Fill ή Custom με ένα Custom width σε ποσοστό. Η Alignment κρύβεται με το Fill.
- Ratio: Auto (το δικό της σχήμα της εικόνας), Portrait, Square ή Landscape. Με σταθερή αναλογία, το Fit επιλέγει Cover (γεμίζει το πλαίσιο, μπορεί να κόψει μέρος της εικόνας) ή Contain (δείχνει ολόκληρη την εικόνα).
- Corner radius: στρογγυλεύει τις γωνίες, από 0 έως 100 pixel.
- Link: προαιρετικό. Η εικόνα ανοίγει αυτή τη διεύθυνση όταν γίνει κλικ πάνω της, για παράδειγμα
https://example.com/products/your-link.
Divider
Μια γραμμή που χωρίζει το περιεχόμενο. Είναι οριζόντια σε κάθετη διάταξη και γίνεται κάθετη όταν μπαίνει απευθείας μέσα σε μια οριζόντια ομάδα.
- Width: Fit ή Fill.
- Thickness: 1 έως 10 pixel. Length: 5% έως 100% του χώρου.
- Alignment: Start, Center ή End. Εμφανίζεται όταν το Length είναι κάτω από 100%.
- Corner radius: άκρα γραμμής Sharp ή Rounded.
Χρώματα και αποστάσεις
- Ως τμήμα, το καθένα έχει ένα Color scheme: το φόντο του, το χρώμα του κειμένου του και, για το διαχωριστικό, το χρώμα της γραμμής (το χρώμα περιγράμματος του σχήματος). Δείτε τα Χρωματικά σχήματα.
- Ως μπλοκ, το Text έχει το Use parent color scheme (ενεργό από προεπιλογή). Απενεργοποιήστε το για να επιλέξετε άλλο σχήμα. Οι εικόνες σε μπλοκ ακολουθούν το τμήμα τους.
- Padding σε κάθε πλευρά. Ένα τμήμα Divider επιτρέπει έως 200 pixel, για μεγαλύτερη απόσταση ανάμεσα στα τμήματα.
Καλό να ξέρετε
- Το κενό κείμενο δεν εμφανίζεται στο κατάστημα, οπότε ένα κενό μπλοκ Text δεν αφήνει κενό χώρο.
- Η εικόνα κόβεται: ορίστε το Fit σε Contain ή το Ratio σε Auto.
- Το Divider δεν γίνεται κάθετο: πρέπει να βρίσκεται απευθείας μέσα σε μια ομάδα ρυθμισμένη σε Horizontal, δείτε Πώς χρησιμοποιώ τα μπλοκ Group για να βάλω περιεχόμενο δίπλα δίπλα ή σε στήλες;.