Το τμήμα Before and after βάζει δύο εικόνες τη μία πάνω στην άλλη με ένα διαχωριστικό. Οι αγοραστές σύρουν το διαχωριστικό για να δουν περισσότερο από τη μία ή την άλλη εικόνα. Χρησιμοποιήστε το για αποτελέσματα (πριν και μετά), δύο χρώματα ή δύο φινιρίσματα ενός προϊόντος.
Προσθέστε το τμήμα
- Ανοίξτε τον builder και πηγαίνετε στη σελίδα που θέλετε. Λειτουργεί στην αρχική σελίδα και στις σελίδες προϊόντος, landing, συλλογής και συλλογών, έως 3 ανά σελίδα.
- Στην καρτέλα Sections, κάντε κλικ στο Add new section και επιλέξτε Before and after από την ομάδα Content.
- Κάντε κλικ στο μπλοκ Before and after μέσα του, επιλέξτε τις δύο εικόνες σας και μετά κάντε κλικ στο Publish.
Το μπλοκ Before and after
Αυτό το μπλοκ περιέχει τις δύο εικόνες. Βρίσκεται πάντα στο τμήμα και δεν μπορεί να αφαιρεθεί.
- Before image και After image: οι δύο φωτογραφίες. Χρησιμοποιήστε φωτογραφίες τραβηγμένες από την ίδια γωνία, ώστε να ευθυγραμμίζονται.
- Before label και After label: μια σύντομη ετικέτα στη γωνία κάθε εικόνας, όπως "Πριν" και "Μετά" ή "Μαύρο" και "Λευκό". Αφήστε την κενή για να κρύψετε την ετικέτα.
- Direction: το Horizontal χρησιμοποιεί ένα διαχωριστικό που οι αγοραστές σύρουν αριστερά και δεξιά. Το Vertical χρησιμοποιεί ένα διαχωριστικό που σύρουν πάνω και κάτω.
- Ratio: το σχήμα του πλαισίου. Το Auto ακολουθεί την εικόνα πριν, ή επιλέξτε Portrait, Square ή Landscape. Και οι δύο εικόνες περικόπτονται στο ίδιο πλαίσιο.
- Divider position: πού ξεκινά το διαχωριστικό, από 5% έως 95%. Στο 50% οι αγοραστές βλέπουν το μισό κάθε εικόνας.
- Show a hint when it comes into view: το διαχωριστικό κινείται λίγο μόνο του, ώστε οι αγοραστές να καταλάβουν ότι μπορούν να το σύρουν.
- Follow the mouse on desktop: στους υπολογιστές το διαχωριστικό ακολουθεί το ποντίκι χωρίς κλικ. Στα κινητά οι αγοραστές πάντα σύρουν.
- Use parent color scheme: το διαχωριστικό, η λαβή και οι ετικέτες χρησιμοποιούν τα χρώματα του τμήματος. Απενεργοποιήστε το για να επιλέξετε άλλο Color scheme.
Ρυθμίσεις του τμήματος και τίτλος
Προσθέστε έως 2 μπλοκ Text, 1 Divider και 1 Group για μια επικεφαλίδα και ένα σύντομο κείμενο.
- Direction: το Vertical βάζει την επικεφαλίδα πάνω από τις εικόνες, το Horizontal τη βάζει δίπλα τους.
- Stack vertically on mobile: ενεργό από προεπιλογή, ώστε οι εικόνες να κρατούν όλο το πλάτος του κινητού.
- Position και Alignment, Section width, Color scheme, Padding και μια καρτέλα Custom CSS.
Στη σελίδα προϊόντος
Το ίδιο μπλοκ Before and after μπορεί επίσης να μπει μέσα στα τμήματα Product info και Landing info, καθώς και μέσα σε πτυσσόμενες καρτέλες, ώστε η σύγκριση να βρίσκεται δίπλα στο κουμπί αγοράς. Δείτε το Πώς προσθέτω πτυσσόμενες καρτέλες, ημερομηνίες παράδοσης, οδηγό μεγεθών, σήματα ή εικόνες πριν και μετά στη σελίδα προϊόντος;
Καλό να ξέρετε
- Στο ζωντανό σας κατάστημα, η σύγκριση εμφανίζεται μόνο όταν έχουν επιλεγεί και οι δύο εικόνες. Μέχρι τότε ο builder δείχνει δείγματα εικόνων.
- Οι αγοραστές μπορούν επίσης να μετακινήσουν το διαχωριστικό με το πληκτρολόγιο.
- Οι αγοραστές που έχουν ενεργοποιήσει τη μειωμένη κίνηση στη συσκευή τους δεν βλέπουν την κίνηση της υπόδειξης.
- Οι εικόνες φαίνονται κομμένες; Επιλέξτε το Ratio που είναι πιο κοντά στις φωτογραφίες σας ή χρησιμοποιήστε φωτογραφίες ίδιου σχήματος.
- Χρησιμοποιείτε μόνο αληθινές φωτογραφίες από αληθινά αποτελέσματα.