Η διαδραστικότητα είναι η «γλώσσα» της ιστοσελίδας σας με τον χρήστη. Όταν ένας επισκέπτης περνάει το ποντίκι (hover) πάνω από ένα στοιχείο και αυτό αντιδρά, λαμβάνει μια άμεση επιβεβαίωση ότι το στοιχείο αυτό είναι ενεργό και σημαντικό. Τα Hover Effects δεν είναι μόνο διακοσμητικά· λειτουργούν ως οπτικά ερεθίσματα που παροτρύνουν τον χρήστη να κάνει κλικ. Με το Divi, μπορείτε να δημιουργήσετε εξαιρετικά προχωρημένα εφέ που αλλάζουν το σχήμα, το χρώμα, τη σκιά ή ακόμα και τη θέση των στοιχείων σας στιγμιαία.
Η Δύναμη των Transforms
Η καρδιά των προχωρημένων εφέ βρίσκεται στην καρτέλα Design > Transform. Εκεί μπορείτε να ορίσετε πώς θα αλλάζει ένα στοιχείο όταν ο χρήστης αλληλεπιδρά μαζί του.
- Transform Scale (Μεγέθυνση): Μια κλασική αλλά αποτελεσματική τεχνική είναι η ελαφριά μεγέθυνση (π.χ. κατά 5%) μιας εικόνας ή ενός κουμπιού. Αυτό δίνει την αίσθηση ότι το στοιχείο «έρχεται προς τον χρήστη».
- Transform Rotate (Περιστροφή): Μια ανεπαίσθητη περιστροφή (1-2 μοίρες) μπορεί να δώσει έναν πιο παιχνιδιάρικο και μοντέρνο τόνο σε κάρτες υπηρεσιών ή εικονίδια.
- Αλλαγή Χρώματος και Σκιάς: Στο Divi, κάθε ρύθμιση έχει ένα εικονίδιο βέλους για το Hover. Μπορείτε να αλλάξετε το χρώμα του φόντου, το χρώμα του κειμένου ή να προσθέσετε μια έντονη σκιά (Box Shadow) μόνο κατά το hover, κάνοντας το στοιχείο να φαίνεται ότι «ξεκολλάει» από την οθόνη.
- Φίλτρα Εικόνας: Μπορείτε να ξεκινήσετε με μια ασπρόμαυρη εικόνα (Grayscale) και να την κάνετε έγχρωμη μόνο όταν ο χρήστης περνάει το ποντίκι από πάνω. Αυτό είναι εξαιρετικό για σελίδες "Η Ομάδα μας" ή Portfolio.
UX και Προσβασιμότητα
Ενώ τα hover effects είναι εντυπωσιακά, πρέπει να θυμάστε ότι δεν λειτουργούν σε κινητά και tablet (αφού δεν υπάρχει ποντίκι). Επομένως, το site σας πρέπει να είναι εξίσου όμορφο και λειτουργικό ακόμα και χωρίς αυτά. Επίσης, η μετάβαση (transition) πρέπει να είναι ομαλή. Στο Divi, μπορείτε να ρυθμίσετε το "Transition Duration" (συνήθως 300ms είναι το ιδανικό) ώστε η αλλαγή να μην είναι απότομη αλλά «γλυκιά».
Τα hover effects προσθέτουν ένα επίπεδο φινιρίσματος που κάνει τη διαφορά ανάμεσα σε ένα ερασιτεχνικό και ένα premium site. Είναι ο τρόπος σας να πείτε στον χρήστη: «Πρόσεξε αυτό το σημείο, είναι σημαντικό». Με το Divi, οι συνδυασμοί είναι αμέτρητοι και το αποτέλεσμα πάντα εντυπωσιακό.
