Πώς να προσθέσετε ένα εφέ hover στο divi builder

Wordpress

Υπάρχουν πολλοί τρόποι για να κάνετε μια ιστοσελίδα στον ιστότοπό σας να φαίνεται πιο ελκυστική. Ένας από αυτούς είναι ότι μπορείτε να προσθέσετε ένα εφέ αιώρησης σε ένα συγκεκριμένο στοιχείο της σελίδας. Εάν έχετε έναν ιστότοπο βασισμένο στο WordPress που έχει κατασκευαστεί με το Divi Builder , μπορείτε να προσθέσετε αβίαστα ένα εφέ hover σε ένα στοιχείο της σελίδας σας. Τι είναι το Divi Builder, παρεμπιπτόντως;

Σε περίπτωση που δεν έχετε μάθει για το Divi Builder. Πρόκειται για ένα plugin κατασκευής σελίδων για το WordPress, όπως ακριβώς και το Elementor (το Elementor είναι ο πιο δημοφιλής κατασκευαστής σελίδων WordPress). Έρχεται επίσης με έναν οπτικό επεξεργαστή για να σας διευκολύνει στη δημιουργία της σελίδας. Το Divi Builder διαθέτει κάποιες ενσωματωμένες δυνατότητες για την προσθήκη εφέ κίνησης, συμπεριλαμβανομένων αυτών που μπορείτε να προσθέσετε όταν ο επισκέπτης αιωρείται πάνω σε ένα συγκεκριμένο στοιχείο της σελίδας σας. Ρίξτε μια ματιά στο παρακάτω screencast.

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

Στο Divi Builder, το στοιχείο σχεδιασμού χωρίζεται σε τρεις τύπους: τμήμα, γραμμή και ενότητα. Μπορείτε να προσθέσετε ένα εφέ hover σε αυτούς τους τρεις τύπους στοιχείων. Σε αυτό το παράδειγμα, θα σας δείξουμε πώς να προσθέσετε ένα hover σε μια ενότητα εικόνας (όπως μπορείτε να δείτε στο screencast παραπάνω).

Πώς να προσθέσετε ένα εφέ hover στο Divi Builder

Πρώτα, πρέπει να προετοιμάσετε μια ενότητα καθώς και μια γραμμή στην περιοχή καμβά του Divi Builder. Για να το κάνετε αυτό, κάντε κλικ στο μπλε κουμπί συν για να προσθέσετε ένα νέο τμήμα (μπορείτε να προσθέσετε ένα κανονικό τμήμα για αυτό το παράδειγμα). Εισάγετε μια γραμμή και επιλέξτε τη δομή των στηλών σύμφωνα με τις ανάγκες σας. Σε αυτό το παράδειγμα, επιλέγουμε τη δομή τριών στηλών.

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

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

Μόλις προστεθεί η εικόνα, μεταβείτε στην καρτέλα Σχεδιασμός και ανοίξτε το μπλοκ Μετασχηματισμός . Στο μπλοκ Transform , κάντε κλικ στο εικονίδιο του δρομέα και, στη συνέχεια, κάντε κλικ στην καρτέλα hover (η οποία απεικονίζεται επίσης με το εικονίδιο του δρομέα).

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

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

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

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

YouTube video: Πώς να προσθέσετε ένα εφέ Hover στο Divi Builder


Rate article