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

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

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

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

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

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

Μέθοδος 1: Χρήση Πρόσθετου

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

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

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

Εγκατάσταση ενός Πρόσθετου

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

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

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

Χρήση του Πρόσθετου Εφέ Αιώρησης Εικόνας WordPress

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body { εμφάνιση: flex; δικαιολογήστε-περιεχόμενο: κέντρο; ευθυγράμμιση-στοιχεία: κέντρο; ύψος: 100vh; φόντο: #0f0f0f; περιθώριο: 0; οικογένεια-γραμματοσειράς: Arial, sans-serif; } .hover-underline { μέγεθος-γραμματοσειράς: 2rem; χρώμα: #ffffff; θέση: σχετική; εμφάνιση: inline-block; } .hover-underline::after, .hover-underline::before { περιεχόμενο: ''; θέση: απόλυτη; πλάτος: 100%; ύψος: 2px; φόντο: γραμμική-κλίση(δεξιά, #ff0000, #00ffff); κάτω: -5px; αριστερά: 0; μετασχηματισμός: scaleX(0); προέλευση-μετασχηματισμού: δεξιά; μετάβαση: μετασχηματισμός 0.4s ease-out; } .hover-underline::before { πάνω: -5px; προέλευση-μετασχηματισμού: αριστερά; } .hover-underline:hover::after, .hover-underline:hover::before { μετασχηματισμός: scaleX(1); }
 

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

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

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

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

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

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

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

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

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

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

• Στο μενού αναδυόμενης επιλογής Κίνηση Hover. Θα βρείτε μια ποικιλία από έτοιμα εφέ.

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

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

Μέθοδος 4: Χρήση Προσθέτων Flipbox

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

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

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

• Κάντε κλικ Εγκατάσταση τώρα, έπειτα Ενεργοποίηση

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

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

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

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

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

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

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

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

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

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

Ως παράδειγμα, ας κάνουμε ένα απλό εφέ εξασθένισης κατά το hover. Εδώ είναι το βήμα προς βήμα σεμινάριο:

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

• Μέσα στο μπλοκ Εξώφυλλο, προσθέστε ένα μπλοκ Παράγραφος.

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

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

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

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

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

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

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

Η Χρήση Πολλών Εφέ Επηρεάζει την Απόδοση;

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

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

Σύνοψη

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

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