Το Hero είναι ένα μεγάλο banner με μια εικόνα ή ένα βίντεο πίσω από το κείμενο και τα κουμπιά σας. Βρίσκεται στην αρχική σας σελίδα και συχνά είναι το πρώτο πράγμα που βλέπουν οι αγοραστές.
Προσθήκη hero
- Ανοίξτε τον builder και επιλέξτε Home page στην καρτέλα Pages.
- Στην καρτέλα Sections, κάντε κλικ στο Add new section και διαλέξτε Hero από την ομάδα Content.
- Διαλέξτε τα πολυμέσα σας, γράψτε το κείμενό σας και κάντε κλικ στο Publish.
Το hero προσφέρεται μόνο στην αρχική σελίδα και μπορείτε να προσθέσετε ένα ανά σελίδα. Για να το μετακινήσετε, να το αντιγράψετε ή να το κρύψετε, δείτε Τμήματα και μπλοκ
Πολυμέσα και ύψος
- Mode: το Single δείχνει μία εικόνα ή ένα βίντεο. Το Split δείχνει δύο, που ορίζονται στα Media 1 και Media 2. Μπαίνουν δίπλα δίπλα όταν η Direction του περιεχομένου είναι Vertical και το ένα πάνω από το άλλο όταν είναι Horizontal. Στα κινητά είναι πάντα το ένα κάτω από το άλλο.
- Media 1 και Media 2: μια εικόνα ή ένα βίντεο από τη βιβλιοθήκη πολυμέσων σας. Ένα βίντεο παίζει χωρίς ήχο, σε επανάληψη, ως κινούμενο φόντο.
- Height: Small, Medium, Large, Fullscreen (γεμίζει την οθόνη), Image (ακολουθεί το σχήμα της πρώτης σας εικόνας, ώστε να μην κόβεται τίποτα) ή Custom. Με το Custom, το Custom height ορίζει το ύψος ως ποσοστό του ύψους της οθόνης. Τα νέα hero ξεκινούν με Image.
Κείμενο και κουμπιά από πάνω
Επιλέξτε το hero και κάντε κλικ στο Add new block για να προσθέσετε περιεχόμενο πάνω από τα πολυμέσα: έως 2 μπλοκ Text, 2 Button, 2 Group και 2 Divider. Οι δικές τους ρυθμίσεις βρίσκονται στο Μπλοκ Group, Text, Button και Divider: πώς λειτουργούν οι ρυθμίσεις των στοιχείων διάταξης;
Στο Layout τοποθετείτε αυτό το περιεχόμενο:
- Direction: το Vertical βάζει τα μπλοκ το ένα κάτω από το άλλο, το Horizontal τα βάζει δίπλα δίπλα. Με Horizontal, το Stack vertically on mobile τα βάζει το ένα κάτω από το άλλο στα κινητά.
- Position και Alignment: μετακινούν το περιεχόμενο πάνω ή κάτω και αριστερά ή δεξιά, για παράδειγμα κάτω αριστερά ή στο κέντρο. Το Space between απλώνει τα μπλοκ μακριά το ένα από το άλλο.
- Content width: το Page κρατά το περιεχόμενο μέσα στο πλάτος της σελίδας σας, το Full το αφήνει να φτάσει μέχρι τις άκρες της οθόνης. Τα πολυμέσα γεμίζουν πάντα όλο το πλάτος.
Το Gap (στο Spacing) ορίζει την απόσταση ανάμεσα στα μπλοκ και το Padding τον χώρο γύρω τους.
Χρώματα και επικάλυψη
- Color scheme: τα χρώματα κειμένου και κουμπιών του hero. Δείτε τα Χρωματικά σχήματα.
- Media overlay: προσθέτει ένα στρώμα χρώματος πάνω από τα πολυμέσα, ώστε το κείμενό σας να διαβάζεται πιο εύκολα. Μετά ορίστε το Overlay color και το Overlay style: το Solid καλύπτει τα πολυμέσα ομοιόμορφα, το Gradient σβήνει σταδιακά το χρώμα. Το Gradient direction (Up ή Down) ορίζει προς τα πού σβήνει.
Η καρτέλα Custom CSS σας επιτρέπει να προσθέσετε δικό σας CSS μόνο σε αυτό το hero.
Συνηθισμένες εργασίες
- Κεφαλίδα πάνω από το hero: ενεργοποιήστε το Transparent header στις ρυθμίσεις της κεφαλίδας. Λειτουργεί μόνο όταν το hero βρίσκεται ακριβώς κάτω από την κεφαλίδα. Δείτε τις Ρυθμίσεις κεφαλίδας.
- Τίτλος και κουμπί στο κέντρο: Direction Vertical και μετά Position και Alignment σε Center.
- Λευκό κείμενο πάνω σε φωτεινή φωτογραφία: ενεργοποιήστε το Media overlay με σκούρο Overlay color και το στυλ Gradient.
Καλό να ξέρετε
- Αν ένα βίντεο στο hero δεν κινείται, ελέγξτε το Autoplay Videos στην καρτέλα ρυθμίσεων Automations. Όταν είναι απενεργοποιημένο, τα βίντεο φόντου μένουν ακίνητα. Δείτε τις Ρυθμίσεις Automations.
- Αν το μέγεθος της πρώτης σας εικόνας δεν είναι γνωστό, το ύψος Image χρησιμοποιεί το Medium.
- Χρειάζεστε banner σε άλλη σελίδα; Το hero υπάρχει μόνο στην αρχική σελίδα, αλλά το τμήμα Image λειτουργεί σε κάθε σελίδα. Δείτε Τμήματα κειμένου, εικόνας και διαχωριστικού.