Τι είναι το Call to Action;
Η παρότρυνση για δράση σε έναν ιστότοπο είναι ένα στοιχείο που έχει σχεδιαστεί ειδικά για να δελεάσει έναν επισκέπτη του ιστότοπου να προβεί σε μια συγκεκριμένη ενέργεια ή να επισκεφθεί μια συγκεκριμένη σελίδα. Η ιδέα είναι ότι η σελίδα φαίνεται πιο δελεαστική επειδή ξεχωρίζει από άλλες στο μενού.
Αν πάρουμε για παράδειγμα τον ιστότοπο της DuoTones, θα δείτε ότι υπάρχει μια παρότρυνση για δράση κράτησης στη γραμμή μενού. Όταν κάνετε κλικ σε αυτόν τον σύνδεσμο, φορτώνεται μια φόρμα επικοινωνίας, ζητώντας όλες τις απαραίτητες λεπτομέρειες για την προσφορά μιας τιμής προβολής για μια ιδιωτική εκδήλωση.
Πώς να δημιουργήσετε ένα κουμπί παρότρυνσης για δράση στο μενού του ιστότοπού σας
Εάν χρησιμοποιείτε ένα θέμα από το AudioTheme, η διαδικασία για τη δημιουργία ενός κουμπιού παρότρυνσης για δράση στην κεφαλίδα σας είναι πολύ απλή. Τα περισσότερα από τα θέματά μας διαθέτουν ενσωματωμένα στυλ κουμπιών, καθώς χρησιμοποιούνται για άλλες πτυχές του θέματος.
Ας χρησιμοποιήσουμε Καλώ πάλι ως παράδειγμα και κάντε μια βήμα προς βήμα περπάτημα χρησιμοποιώντας τα υπάρχοντα στυλ κουμπιών.
Βήμα 1
Αρχικά, θα επισκεφτούμε τις ρυθμίσεις του κύριου μενού κάτω από το Προσαρμογή → Μενού → Κύριο μενού.
Βήμα 2
Θα προσθέσουμε το κουμπί παρότρυνσης για δράση στη σελίδα επαφής μας σε αυτό το παράδειγμα, επομένως θα χρειαστεί να επεκτείνουμε τις επιλογές που σχετίζονται με αυτό το στοιχείο μενού. Αυτό μπορεί να γίνει κάνοντας κλικ στο τρίγωνο στη δεξιά πλευρά του στοιχείου μενού.
Βήμα 3
Μόλις επεκταθούν οι επιλογές, θα προσθέσουμε το button τάξη στο Τάξεις CSS πεδίο για το στοιχείο μενού.
Βήμα 4
Φροντίστε να αποθηκεύσετε τις αλλαγές σας!
Θα παρατηρήσετε ότι αυτό αλλάζει τη σελίδα επαφής στο μενού ώστε να εμφανίζεται ως κουμπί.
Εάν προτιμάτε άλλο τύπο κουμπιού, μπορείτε να χρησιμοποιήσετε το εναλλακτικό στυλ κουμπιών του θέματος αλλάζοντας το Τάξεις CSS προς την button-alt. Αυτό θα εμφανίσει ένα ελαφρώς πιο διακριτικό στυλ κουμπιών.
Τι γίνεται αν δεν δω το „Πεδίο CSS Classes στο Customizer;
ο Τάξεις CSS Το πεδίο ενδέχεται να μην εμφανίζεται στο πρόγραμμα προσαρμογής σας από προεπιλογή. Ωστόσο, μπορείτε να το ενεργοποιήσετε σε αυτό το πεδίο μέσω του πίνακα ελέγχου του WordPress. Πλοηγηθείτε στο Εμφάνιση → Μενού. Στην επάνω δεξιά γωνία της οθόνης, θα πρέπει να δείτε μια καρτέλα με την ένδειξη „Επιλογές οθόνης“.
Όταν επεκτείνετε αυτό το μενού, θα δείτε την επιλογή να επιλέξετε το Τάξεις CSS επιλογή κάτω από το Εμφάνιση ιδιοτήτων μενού για προχωρημένους περιοχή του αναπτυσσόμενου μενού.
Κάνοντας κλικ σε αυτήν την καρτέλα θα σας επιτρέψει να προσθέσετε κλάσεις CSS σε κάθε μεμονωμένο στοιχείο μενού.
Τι γίνεται αν θέλω να δημιουργήσω το δικό μου στυλ παρότρυνσης για δράση;
Ίσως θέλετε το κουμπί παρότρυνσης για δράση στο μενού σας να ξεχωρίζει λίγο περισσότερο από τα προεπιλεγμένα στυλ. Εάν συμβαίνει αυτό, μπορείτε να δημιουργήσετε ένα προσαρμοσμένο στυλ κουμπιού παρότρυνσης για δράση χρησιμοποιώντας κάποιο CSS. Να πώς.
Βήμα 1
Όπως και πριν, θα επισκεφτούμε τις ρυθμίσεις του κύριου μενού κάτω από το Προσαρμογή → Μενού → Κύριο μενού.
Βήμα 2
Θα συνεχίσουμε να προσθέτουμε το κουμπί παρότρυνσης για δράση στη σελίδα επαφής μας σε αυτό το παράδειγμα, επομένως θα χρειαστεί να επεκτείνουμε τις επιλογές που σχετίζονται με αυτό το στοιχείο μενού. Αυτό μπορεί να γίνει κάνοντας κλικ στο τρίγωνο στη δεξιά πλευρά του στοιχείου μενού.
Βήμα 3
Μόλις επεκταθούν οι επιλογές, θα προσθέσουμε το custom-button τάξη στο Τάξεις CSS πεδίο για το στοιχείο μενού.
Θα παρατηρήσετε ότι το στοιχείο μενού επαφών δεν φαίνεται διαφορετικό σε αυτό το σημείο. Αυτό συμβαίνει επειδή πρέπει να ορίσουμε τα στυλ CSS για το κουμπί.
Βήμα 4
Για να το custom-button κλάση για να επηρεάσει το στοιχείο μενού επαφής, πρέπει να οριστούν τα στυλ CSS του. Εάν είστε νέοι στα κουμπιά CSS, μια χρήσιμη συμβουλή είναι απλώς να αντιγράψετε το προεπιλεγμένο κουμπί του θέματος ως σημείο εκκίνησης. Μπορεί επίσης να βρείτε το primer μας στο CSS ως χρήσιμο.
Θα θέλετε να προσθέσετε τα προσαρμοσμένα στυλ σας στο Πρόσθετο CSS περιοχή του προγράμματος προσαρμογής. Εάν θέλουμε να προσθέσουμε μερικά ενδιαφέροντα στοιχεία στην κατηγορία κουμπιών μας, μπορούμε να προσθέσουμε ένα νέο χρώμα φόντου, βάρος γραμματοσειράς και χρώμα γραμματοσειράς.
.custom-button a {
background-color: #c8596e;
color:#ffffff;
font-weight:600;
border-radius: 3px;
}
Μπορείτε να πείτε ότι ακόμα και με λίγες μόνο ιδιότητες που προστέθηκαν, το κουμπί αρχίζει πραγματικά να ξεχωρίζει.
Μπορείτε φυσικά να προσθέσετε εφέ αιώρησης στο κουμπί σας χρησιμοποιώντας επίσης CSS. Για παράδειγμα:
.custom-button a:hover {
background-color: #333333;
color:#ffffff;
font-weight:600;
border-radius: 3px;
}
Αυτό θα είχε ως αποτέλεσμα το ακόλουθο στυλ αιώρησης:
Αυτό είναι! Αυτό είναι το μόνο που υπάρχει για τη δημιουργία προσαρμοσμένων κουμπιών παρότρυνσης για δράση στη γραμμή μενού του ιστότοπού σας.
Ποιες είναι μερικές πιθανές χρήσεις
Με απλά λόγια, οτιδήποτε θέλετε να προσέξουν οι επισκέπτες του ιστότοπου θα ήταν μια εξαιρετική περίπτωση χρήσης για ένα κουμπί παρότρυνσης για δράση. Μερικές ιδέες που πρέπει να λάβετε υπόψη είναι:
- Καροτσάκια αγορών
- Νέα ρεκόρ
- Ημερομηνίες περιοδείας
- Φόρμες κρατήσεων
- Ηλεκτρονικά κιτ τύπου
- Αναρτήσεις ιστολογίου
- Εγγραφή στη λίστα αλληλογραφίας
Τυλίγοντας
Η προσθήκη ενός κουμπιού παρότρυνσης για δράση στο μενού του ιστότοπού σας είναι ένας εύκολος τρόπος για να τραβήξετε επιπλέον προσοχή σε μια συγκεκριμένη σελίδα στον ιστότοπό σας. Υπάρχουν πολλές πιθανές χρήσεις για αυτήν την απλή προσαρμογή. Έχετε επιπλέον ιδέες; Παρακαλώ μοιραστείτε τα στα σχόλια!
