Πώς να προσθέσετε εφέ αιώρησης εικόνας στο WordPress (5 εύκολοι τρόποι)

Η προσθήκη ενός εφέ αιώρησης στον ιστότοπό σας μπορεί να φαίνεται σαν μια μικρή λεπτομέρεια, αλλά μπορεί να βελτιώσει την εμφάνιση και τη χρηστικότητα του ιστότοπου. Όταν οι επισκέπτες τοποθετούν το ποντίκι τους πάνω από μια εικόνα ή ένα κουμπί και το βλέπουν να αλλάζει ελαφρώς, αυτό σηματοδοτεί ότι το στοιχείο είναι διαδραστικό. 

Αυτή η διακριτική κίνηση θα βελτιώσει την αλληλεπίδραση και θα βοηθήσει στη μείωση των ποσοστών εγκατάλειψης. Τα εφέ κατάδειξης είναι ιδιαίτερα χρήσιμα στο ηλεκτρονικό εμπόριο. Επιτρέπουν στους αγοραστές να κάνουν μια πιο προσεκτική προεπισκόπηση των προϊόντων, ενθαρρύνοντάς τους να εξερευνήσουν περαιτέρω και να προχωρήσουν στην ολοκλήρωση της αγοράς.

Υπάρχουν πολλοί τρόποι για να προσθέσετε εφέ κατάδειξης εικόνας στο WordPress, από απλά fades μέχρι εντυπωσιακά flip animations. Παρακάτω, θα βρείτε αρκετές μεθόδους για να ξεκινήσετε!

Πώς να προσθέσετε εφέ αιώρησης εικόνας στο WordPress

Σε αυτό το άρθρο, έχουμε συγκεντρώσει πέντε εύκολους τρόπους για να προσθέσετε εφέ τοποθέτησης του δείκτη του ποντικιού στον ιστότοπό σας. Επιλέξτε αυτόν που σας ταιριάζει καλύτερα!

Μέθοδος 1: Χρήση πρόσθετου (plugin)

Ένα πρόσθετο (plugin) θα σας εξοικονομήσει πολύ χρόνο και προσπάθεια, ειδικά αν θέλετε να χρησιμοποιήσετε πολλά εφέ τοποθέτησης του δείκτη του ποντικιού στον ίδιο ιστότοπο.

Για παράδειγμα, αν έχετε πολλές συλλογές εικόνων, μπορείτε να εφαρμόσετε διαφορετικά κινούμενα σχέδια σε κάθε μία, όπως ένα απλό ζουμ για μικρογραφίες ιστολογίου ή ένα εφέ αναστροφής για εικόνες προϊόντων.

Η χρήση ενός πρόσθετου όπως το Image Hover Effects Ultimate κάνει αυτή τη διαδικασία πολύ πιο εύκολη. Αυτό το πρόσθετο είναι δωρεάν για όλους και προσφέρει ένα ευρύ φάσμα εφέ για κάθε στοιχείο. Για να ξεκινήσετε, απλώς εγκαταστήστε το ακολουθώντας τον παρακάτω οδηγό: 

Εγκατάσταση ενός πρόσθετου (plugin)

• Ανοίξτε την περιοχή διαχείρισης του WordPress.
• Κάντε κλικ στην επιλογή Προσθήκη πρόσθετου από το Πρόσθετα στην πλαϊνή γραμμή.

• Πληκτρολογήστε Image Hover Effects Ultimate στη γραμμή αναζήτησης.

• Επιλέξτε το πρώτο αποτέλεσμα και κάντε κλικ στην επιλογή Εγκατάσταση τώρα για να ξεκινήσει η λήψη.
• Μόλις ολοκληρωθεί η εγκατάσταση, κάντε κλικ στο Ενεργοποίηση για να ξεκινήσετε να χρησιμοποιείτε το πρόσθετο.

Χρήση του πρόσθετου Image Hover Effects WordPress

• Μόλις εγκατασταθεί το πρόσθετο, θα δείτε ένα νέο Image Hover στον πίνακα ελέγχου σας.

• Κάντε κλικ στο μενού για να ανοίξετε τις ρυθμίσεις του πρόσθετου. 

• Επιλέξτε τυχόν εφέ που θέλετε να χρησιμοποιήσετε. Σε αυτό το σεμινάριο, θα πειραματιστούμε με το Image Magnifier .
• Αφού επιλέξετε το εφέ, θα δείτε μια ποικιλία στυλ κινούμενης εικόνας.

Όταν βρείτε ένα που σας αρέσει, κάντε κλικ στην επιλογή Δημιουργία στυλ .

• Θα εμφανιστεί ένα αναδυόμενο παράθυρο. Εισαγάγετε έναν τίτλο στο Όνομα και επιλέξτε ένα εφέ από τη διάταξη (1ο, 2ο ή 3ο). Στη συνέχεια, κάντε κλικ στην επιλογή Αποθήκευση για να συνεχίσετε.
• Θα μεταφερθείτε σε μια νέα σελίδα όπου μπορείτε να προσαρμόσετε τις ρυθμίσεις, όπως το ύψος, το πλάτος και την αδιαφάνεια. Δοκιμάστε λίγο για να δείτε τι φαίνεται καλύτερο.

• Μόλις είστε ικανοποιημένοι με τις ρυθμίσεις, κάντε κλικ στην επιλογή Επεξεργασία για να προσαρμόσετε την εικόνα σας.

• Θα εμφανιστεί ένα άλλο αναδυόμενο παράθυρο. Εδώ μπορείτε να προσαρμόσετε τη θέση μεγέθυνσης. 

• Μπορείτε επίσης να αντικαταστήσετε την εικόνα πατώντας το Επιλογή εικόνας .
• Αφού ρυθμίσετε τα πάντα, κάντε κλικ στην επιλογή Υποβολή για να αποθηκεύσετε το εφέ τοποθέτησης του δείκτη του ποντικιού.

• Για να εφαρμόσετε το εφέ στον ιστότοπό σας, αντιγράψτε και επικολλήστε το shortcode στην ανάρτηση ή τη σελίδα σας. 

• Τώρα, το απλό εφέ τοποθέτησης του δείκτη του ποντικιού στην εικόνα είναι έτοιμο για χρήση σε οποιοδήποτε μέρος του ιστότοπού σας. 

Μέθοδος 2: Χρήση CSS

Δεν χρειάζεται να εγκαταστήσετε κανένα πρόσθετο (plugins) για αυτήν τη μέθοδο. Χρησιμοποιώντας προσαρμοσμένο CSS, μπορείτε να προσθέσετε διάφορα εφέ κατάδειξης στο θέμα σας.

Θα ξεκινήσουμε με κάτι απλό, όπως ένα υπογραμμισμένο εφέ τοποθέτησης του δείκτη του ποντικιού. Αν θέλετε να προσθέσετε αυτό το εφέ στο θέμα σας, ακολουθήστε τα εύκολα βήματα παρακάτω:

• Μεταβείτε στην ανάρτηση όπου θέλετε να προσθέσετε ένα εφέ κατάδειξης.
• Προσθέστε μια εικόνα κάνοντας κλικ στο Εξώφυλλο από το + .

• Εισαγάγετε το περιεχόμενό σας στο Εξώφυλλο . Εδώ θα προσθέσουμε έναν τίτλο και ένα κουμπί.

• Ορίστε τη γραμματοσειρά και τα στυλ σύμφωνα με τις προτιμήσεις σας.
• Αποθηκεύστε τη σελίδα ως πρόχειρο.
• Στη συνέχεια, μεταβείτε στο Εμφάνιση στον πίνακα ελέγχου σας.

• Στη συνέχεια, κάντε κλικ στην επιλογή Προσαρμογή και μεταβείτε στην επιλογή Πρόσθετο CSS . Προσθέστε τον ακόλουθο κώδικα:

σώμα { εμφάνιση: flex; justify-content: center; align-items: center; height: 100vh; background: #0f0f0f; margin: 0; font-family: Arial, sans-serif; } .hover-underline { font-size: 2rem; color: #ffffff; position: relative; display: inline-block; } .hover-underline::after, .hover-underline::before { content: ''; position: absolute; width: 100%; height: 2px; background: linear-gradient(to right, #ff0000, #00ffff); bottom: -5px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease-out; } .hover-underline::before { top: -5px; transform-origin: left; } .hover-underline:hover::after, .hover-underline:hover::before { μετασχηματισμός: scaleX(1); }
 

• Κάντε κλικ στην επιλογή Δημοσίευση για να αποθηκεύσετε τον κώδικα.

• Τώρα επιστρέψτε στην ανάρτησή σας και επιλέξτε το κείμενο στο οποίο θέλετε να εφαρμόσετε το εφέ υπογράμμισης.
• Ανοίξτε την Για προχωρημένους στην πλαϊνή γραμμή μπλοκ και εισαγάγετε underline-hover στο Πρόσθετες κλάσεις CSS .

• Αποθηκεύστε τη σελίδα και κάντε προεπισκόπηση για να δείτε το αποτέλεσμα. 

Υπάρχουν τόσα πολλά εφέ τοποθέτησης του δείκτη του ποντικιού για να διαλέξετε, οπότε επιλέξτε αυτό που ταιριάζει καλύτερα στο στυλ σας. Μπορείτε είτε να μάθετε να γράφετε μόνοι σας το CSS είτε να βρείτε παραδείγματα από την κοινότητα του WordPress. Υπάρχουν όλα εκεί έξω!

Μέθοδος 3: Χρήση Εργαλείων Δημιουργίας Σελίδων (π.χ., Elementor)

Ένα εργαλείο δημιουργίας σελίδων όπως το Elementor σάς επιτρέπει να δημιουργήσετε τον ιστότοπό σας με πολλή δημιουργικότητα. Διαθέτει ενσωματωμένα εφέ τοποθέτησης του δείκτη του ποντικιού, όλα έτοιμα για χρήση για να ζωντανέψετε τον ιστότοπό σας χωρίς να απαιτείται κωδικοποίηση.

Μπορείτε επίσης να το χρησιμοποιήσετε για να δημιουργήσετε εφέ κατάδειξης εικόνας στο WordPress. Σε αυτήν την ενότητα, θα πειραματιστούμε με τα ενσωματωμένα εφέ κατάδειξης μέσα στο ίδιο το εργαλείο δημιουργίας σελίδων.

Για να ρυθμίσετε τα εφέ:

• Ανοίξτε τον Elementor από τον πίνακα ελέγχου διαχειριστή.
• Προσθέστε την εικόνα σας.

• Επιλέξτε την εικόνα σας και, στη συνέχεια, μεταβείτε στην Στυλ .
• Κάντε κύλιση προς τα κάτω και κάντε κλικ στο εικονίδιο "Τοποθέτηση δείκτη" .

• Στο "Κινούμενη εικόνα με αιώρηση" , θα βρείτε μια ποικιλία από έτοιμα προς χρήση εφέ.

• Εδώ έχουμε επιλέξει το Ανάπτυξης ως παράδειγμα. Στη συνέχεια, μπορείτε να προσαρμόσετε τη διάρκεια μετάβασης, την αδιαφάνεια και άλλες ρυθμίσεις ώστε να ταιριάζουν με το σχεδιασμό του ιστότοπού σας.

• Αφού τελειώσετε, θα μπορείτε να δείτε το αποτέλεσμα αμέσως χωρίς να χρειάζεται να το δείτε σε προεπισκόπηση. 

Μέθοδος 4: Χρήση πρόσθετων του Flipbox

Αν ψάχνετε για μια συντόμευση, μπορείτε να εγκαταστήσετε το πρόσθετο flipbox. Ένα εφέ flipbox είναι όταν μια εικόνα αναστρέφεται για να αποκαλύψει περιεχόμενο στο μπροστινό ή στο πίσω μέρος όταν τοποθετείτε τον δείκτη του ποντικιού πάνω από αυτήν.

Αυτό το εφέ είναι ιδανικό για φωτογραφικές εικόνες, όπου μπορείτε να εμφανίσετε τη φωτογραφία στο μπροστινό μέρος και τις λεπτομέρειες της κάμερας στο πίσω μέρος. Αλλά οι δυνατότητες είναι ατελείωτες.

• Από τον πίνακα ελέγχου του WordPress, κάντε κλικ στο Πρόσθετα . Στη συνέχεια, επιλέξτε Προσθήκη Πρόσθετου .
• Πληκτρολογήστε Flipbox - Awesome Flip Boxes Image Overlay στη γραμμή αναζήτησης.

• Κάντε κλικ στην επιλογή Εγκατάσταση τώρα και, στη συνέχεια, Ενεργοποιήστε την προσθήκη.

• Για να δημιουργήσετε ένα flipbox, μεταβείτε στο Flip Box και κάντε κλικ στην επιλογή Create New (Δημιουργία νέου) .
• Επιλέξτε όποιες κινούμενες εικόνες θέλετε. Μόλις βρείτε μία, κάντε κλικ στην επιλογή Δημιουργία στυλ .

• Θα εμφανιστεί ένα αναδυόμενο παράθυρο. Επιλέξτε την επιθυμητή διάταξη (1η, 2η ή 3η) και εισαγάγετε έναν τίτλο. 

• Κάντε κλικ στην επιλογή Αποθήκευση για να συνεχίσετε.
• Στη συνέχεια, θα μεταφερθείτε στο μενού προσαρμογής όπου μπορείτε να ορίσετε τα εφέ και να προσθέσετε το περιεχόμενό σας.

• Κάντε κύλιση προς τα κάτω για να βρείτε την Προεπισκόπηση . Κάντε κλικ στην επιλογή Επεξεργασία για να προσαρμόσετε το περιεχόμενο τόσο για το μπροστινό όσο και για το πίσω μέρος του πλαισίου αναστροφής.

• Μόλις τελειώσετε, κάντε κλικ στην επιλογή Υποβολή για να το αποθηκεύσετε.

• Για να προσθέσετε αυτό το flipbox στη σελίδα σας, απλώς αντιγράψτε και επικολλήστε το δημιουργημένο shortcode σε οποιαδήποτε ενότητα του ιστότοπού σας. 

• Και αυτό είναι όλο, ιδού το τελικό προϊόν! 

Μέθοδος 5: Χρήση μπλοκ Gutenberg

Το Gutenberg είναι ο προεπιλεγμένος επεξεργαστής μπλοκ του WordPress που σας επιτρέπει να προσθέσετε εφέ τοποθέτησης του δείκτη του ποντικιού απευθείας μέσα στον επεξεργαστή.

Παρόλο που μπορεί να μην προσφέρει προηγμένα εφέ αιώρησης, μπορείτε να βελτιώσετε τις κινούμενες εικόνες χρησιμοποιώντας προσαρμοσμένο CSS.

Για παράδειγμα, ας δημιουργήσουμε ένα απλό εφέ fade με την τοποθέτηση του δείκτη του ποντικιού. Ακολουθεί το αναλυτικό σεμινάριο:

• Μεταβείτε στην ανάρτηση ή τη σελίδα όπου θέλετε να προσθέσετε το εφέ τοποθέτησης του δείκτη του ποντικιού.
• Κάντε κλικ στο + για να προσθέσετε ένα νέο μπλοκ και, στη συνέχεια, επιλέξτε το Cover .

• Μέσα στο Εξωφύλλου , προσθέστε ένα Παραγράφου .

• Εισαγάγετε τον τίτλο σας και μια σύντομη περιγραφή.
• Προσαρμόστε το μέγεθος της γραμματοσειράς, την αδιαφάνεια, την ευθυγράμμιση και το χρώμα όπως απαιτείται.

• Στη συνέχεια, επιλέξτε το Cover για να προσθέσετε μια προσαρμοσμένη κλάση CSS.
• Ανοίξτε την Για προχωρημένους στη δεξιά πλαϊνή μπάρα.
• Εισαγάγετε fade-hover-effect στο πεδίο Additional CSS Class .

• Στη συνέχεια, αποθηκεύστε τη σελίδα ως προσχέδιο.

• Μεταβείτε στο Πρόσθετα (Plugins) και επιλέξτε το πρόσθετο αποσπάσματος κώδικα (code snippet plugin). Σε αυτό το παράδειγμα, χρησιμοποιούμε το WPCode .
• Δημιουργήστε ένα νέο απόσπασμα CSS και, στη συνέχεια, επικολλήστε τον ακόλουθο κώδικα:

.fade-hover-effect { αδιαφάνεια: 0; μετασχηματισμός: translateY(10px); μετάβαση: αδιαφάνεια 0.4s ευκολία, μετασχηματισμός 0.4s ευκολία; } .fade-hover-effect:hover { αδιαφάνεια: 1; μετασχηματισμός: translateY(0); } 

• Αποθηκεύστε το απόσπασμα και ενεργοποιήστε το.
• Τώρα, κάντε προεπισκόπηση της σελίδας σας για να δείτε το εφέ σταδιακής μείωσης της διάρκειας του αιωρούμενου ποντικιού σε δράση.

Μπορείτε να επαναχρησιμοποιήσετε αυτό το εφέ προσθέτοντας την κλάση fade-hover-effect σε οποιοδήποτε μπλοκ ή εικόνα. Αλλά αν έχετε να κάνετε με πολλές εικόνες, σκεφτείτε να χρησιμοποιήσετε ένα πρόσθετο όπως WP Media Folder για να οργανώσετε τη βιβλιοθήκη πολυμέσων σας σε φακέλους. Αυτό διευκολύνει την εύρεση και την επαναχρησιμοποίηση σχετικού περιεχομένου.

Μήπως η χρήση πολλών εφέ επηρεάζει την απόδοση;

Ναι, η χρήση πολλών εφέ κατάδειξης στον ιστότοπό σας μπορεί ενδεχομένως να επηρεάσει την απόδοση, ειδικά αν δεν βελτιστοποιηθεί σωστά. Αυτό συμβαίνει επειδή ορισμένα εφέ κατάδειξης απαιτούν επιπλέον CSS. Το μέγεθος του CSS του ιστότοπού σας μπορεί να αυξήσει τον χρόνο φόρτωσης της σελίδας και να επιβραδύνει τους χρόνους φόρτωσης.

Είναι καλύτερο να χρησιμοποιείτε μόνο τα απαραίτητα εφέ τοποθέτησης του δείκτη του ποντικιού για να βελτιώσετε την εμπειρία χρήστη χωρίς να υπερφορτώνετε τον ιστότοπό σας.

Σύνοψη

Η εκμάθηση του τρόπου προσθήκης εφέ αιώρησης εικόνας στο WordPress μπορεί να βοηθήσει στην ενίσχυση του ιστότοπού σας, βελτιώνοντας την αλληλεπίδραση των χρηστών και διατηρώντας την εμπλοκή τους.

Με πολλαπλούς τρόπους για να προσθέσετε εφέ κατάδειξης, είτε μέσω πρόσθετων, προσαρμοσμένου CSS είτε μέσω δημιουργών σελίδων, έχετε την ελευθερία να επιλέξετε τι σας ταιριάζει καλύτερα. Πειραματιστείτε με διαφορετικά στυλ για να βρείτε αυτό που ταιριάζει καλύτερα στον ιστότοπό σας!