Χρειάζεστε έναν τρόπο για να δημιουργήσετε ένα εφέ κύλισης εικόνας Elementor ? Σε αυτό το άρθρο, θα σας καθοδηγήσουμε να δημιουργήσετε ένα εφέ κύλισης εικόνας χρησιμοποιώντας το Elementor στις ιστοσελίδες σας.
Το εφέ κύλισης εικόνας θα σας επιτρέψει να αποκαλύψετε την πλήρη εικόνα όταν ο χρήστης τοποθετεί το δείκτη του ποντικιού πάνω από τις εικόνες. Όταν επισκέπτεστε έναν ιστότοπο που πουλά πρότυπα ιστότοπων, μπορείτε να δείτε την πλήρη προεπισκόπηση των προτύπων με χαρακτηριστικά εφέ κύλισης εικόνας.
Με αυτές τις δυνατότητες, μπορείτε εύκολα να δείξετε στους χρήστες σας την πλήρη προβολή του ιστότοπου σε ένα μικρό χώρο. Κανονικά, εάν θέλετε να εμφανίσετε μια πλήρη εικόνα ενός ιστότοπου, θα καταλαμβάνει πολύ χώρο στις ιστοσελίδες σας. Επιπλέον, επηρεάζει τον σχεδιασμό της ιστοσελίδας σας.
Αλλά με το εφέ κύλισης εικόνας, μπορείτε να προσθέσετε περισσότερες φωτογραφίες με ελκυστικό τρόπο που μπορεί εύκολα να τραβήξει την προσοχή του κοινού.
Δημιουργία εφέ κύλισης εικόνας στο Elementor
Το Elementor δεν παρέχει γραφικό στοιχείο για την προσθήκη εφέ κύλισης εικόνας. Επομένως, πρέπει να προσθέσετε το εφέ χρησιμοποιώντας προσαρμοσμένο CSS. Η προσαρμοσμένη δυνατότητα CSS είναι διαθέσιμη μόνο με Elementor Pro. Βεβαιωθείτε λοιπόν ότι έχετε κάνει αναβάθμιση σε Elementor Pro.
Τώρα, ανοίξτε μια σελίδα με τον επεξεργαστή Elementor και κάντε κλικ στο εικονίδιο συν για να προσθέσετε μια ενότητα.
Τώρα πρέπει να επιλέξετε τη στήλη για την ενότητα σας. Εδώ επιλέγουμε την ενότητα μονής στήλης.
Τώρα κάντε κλικ στο εικονίδιο επεξεργασίας ενότητας και στην καρτέλα διάταξη ορίστε το ελάχιστο ύψος σε 500.
Τώρα από το γραφικό στοιχείο μπλοκ προσθέστε το μπλοκ εσωτερικού τμήματος στην ενότητα που δημιουργήσατε και αφαιρέστε την προεπιλεγμένη στήλη. Κάντε δεξί κλικ στο εικονίδιο επεξεργασίας στήλης και κάντε κλικ στην επιλογή διαγραφής για να διαγράψετε την κύρια στήλη.
Μεταβείτε ξανά στην επιλογή επεξεργασίας του εσωτερικού τμήματος και στην καρτέλα διάταξη ορίστε το ελάχιστο ύψος στο 500 όπως δείξαμε νωρίτερα.
Τώρα μεταβείτε στην καρτέλα στυλ του εσωτερικού τμήματος και ορίστε το φόντο ως κλασικό από την επιλογή φόντου. Στη συνέχεια, πρέπει να προσθέσετε την εικόνα φόντου σας. Από την επιλογή θέση εικόνας, ορίστε τη θέση της εικόνας κατά Κορυφαίο Κέντρο. Από την επιλογή επανάληψη, ορίστε την επιλογή χωρίς επανάληψη και το μέγεθος όπως κάλυμμα.
Τώρα μεταβείτε στην καρτέλα προηγμένες για να προσθέσετε προσαρμοσμένο CSS. Στο προσαρμοσμένο πεδίο CSS, προσθέστε τον ακόλουθο κώδικα:
επιλογέας{ -webkit-transition: ease-in-out 3s !important; μετάβαση: ease-in-out 3s !important; } selector:hover{ background-position: center bottom !important; }
Μπορείτε να αλλάξετε την τιμή μετάβασης για να αλλάξετε το εφέ κύλισης των εικόνων. Εάν θέλετε να προσθέσετε πολλές εικόνες με το ίδιο εφέ, μπορείτε να αντιγράψετε τη στήλη και στη συνέχεια να αλλάξετε την εικόνα φόντου.
Συμπέρασμα
Ακολουθώντας τη διαδικασία, θα μπορείτε να προσθέσετε ένα εφέ κύλισης εικόνας στον ιστότοπό σας χρησιμοποιώντας το εργαλείο δημιουργίας σελίδων Elementor. Μπορείτε να ανατρέξετε στα άλλα άρθρα μας για να μάθετε:
- Πώς να χρησιμοποιήσετε τα μπλοκ Elementor στο πρόγραμμα επεξεργασίας Gutenberg;
- Elementor vs Divi vs SeedProd – Ποιο είναι καλύτερο;
- Πώς να χρησιμοποιήσετε το ιστορικό για αναίρεση και επανάληψη ενεργειών στο Elementor
- Πώς να φτιάξετε έναν ιστότοπο Elementor εξαιρετικά γρήγορο
- Πώς να δημιουργήσετε έναν διαδραστικό κύκλο στο Elementor
Ελπίζουμε ότι αυτό το άρθρο θα σας φανεί χρήσιμο. Αν σας αρέσει αυτό το άρθρο, κάντε like στη σελίδα μας στο Facebook για να παραμείνετε συνδεδεμένοι.
