Δημιουργήστε αναδυόμενα στοιχεία Elementor στο WooCommerce

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

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

• Διαμόρφωση του αναδυόμενου παραθύρου
• Μπορείτε επίσης να δημιουργήσετε αναδυόμενα παράθυρα χρησιμοποιώντας το οπτικό εργαλείο δημιουργίας στο Elementor
• Δημοσίευση προτιμήσεων

Παρόλο που το WooCommerce δημιουργεί το καλάθι αγορών και τη σελίδα αγοράς για εσάς όταν δημιουργείτε τον ιστότοπό σας, η Elementor τα κάνει πιο ελκυστικά προσαρμόζοντάς τα.

Έχετε την επιλογή είτε να τα επανασχεδιάσετε είτε να ξεκινήσετε από την αρχή. Μπορείτε να επαναλάβετε τη διαδικασία για όλες τις άλλες σελίδες του ιστότοπού σας.

Δημιουργώντας μια ζεστή σελίδα "Ευχαριστώ" και ενημερώνοντας τις σελίδες Ο λογαριασμός μου και οι Όροι Παροχής Υπηρεσιών, μπορείτε να κερδίσετε τις καρδιές και τα μυαλά των πελατών σας.

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

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

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

Μόλις κάνετε κλικ στο ADD NEW POPUP (το οποίο είναι αρκετά αυτονόητο), θα σας ζητηθεί να του δώσετε ένα όνομα και, στη συνέχεια, να επιλέξετε ένα πρότυπο από τα προεπιλεγμένα ex amp les που εμφανίζονται. Διατίθενται διάφορα πρότυπα για πολλαπλούς σκοπούς. μερικά είναι κατάλληλα για ανακοινώσεις, άλλα για προώθηση έκπτωσης, άλλα είναι ιδανικά για να ενθαρρύνουν τους χρήστες να εγγραφούν για κάτι. Υπάρχουν ακόμη και πρώην amp les για την προειδοποίηση των χρηστών της χρήσης μπισκότο ή άλλες ειδοποιήσεις ΑΕγχΠΠ. Μόλις βρείτε κάτι που σας αρέσει, κάντε κλικ σε αυτό για να δείτε μια μεγαλύτερη προεπισκόπηση και, στη συνέχεια, πατήστε το κουμπί Εισαγωγή.

Θα μεταφερθείτε στο παράθυρο δημιουργίας στο backend του WordPress αφού κάνετε κλικ σε αυτό το κουμπί.

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

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

Διαμόρφωση του αναδυόμενου παραθύρου

 Αυτό είναι όταν θα πρέπει να δείτε μια προεπισκόπηση του αναδυόμενου παραθύρου σας - είτε ένα κενό φύλλο είτε το πρότυπο που επιλέξατε.

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

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

• Τα αναδυόμενα παράθυρα Modal είναι ένας τύπος παραθύρου modal.
• Διαφάνειες, γραμμές ειδοποιήσεων και ούτω καθεξής.

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

Οι ακόλουθες επιλογές είναι διαθέσιμες στην καρτέλα Ρυθμίσεις :

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

Μπορείτε να κάνετε τα ακόλουθα στην καρτέλα " Στυλ ":

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

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

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

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

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

Ρίξτε μια ματιά στον τρόπο με τον οποίο το αναδυόμενο παράθυρο είναι σταθερά σταθερό στην κάτω δεξιά γωνία. Χρησιμοποιώντας μια σκανδάλη κύλισης σε συνδυασμό με μια κινούμενη εικόνα εισόδου, μπορείτε να επιτύχετε ένα ωραίο, διακριτικό εφέ slide-in.

Μπορείτε επίσης να δημιουργήσετε αναδυόμενα παράθυρα χρησιμοποιώντας το οπτικό εργαλείο δημιουργίας στο Elementor

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

Μπορείτε να χρησιμοποιήσετε οποιοδήποτε widget Elementor που θέλετε, το οποίο σας δίνει μεγάλο έλεγχο στον τελικό σχεδιασμό. Το γραφικό στοιχείο φόρμας είναι το μόνο πράγμα που πρέπει οπωσδήποτε να συμπεριλάβετε γιατί είναι το μόνο που σας επιτρέπει να δημιουργήσετε τη φόρμα συμμετοχής στο email σας.

Με το γραφικό στοιχείο φόρμας, έχετε τον πλήρη έλεγχο των πεδίων που θέλετε να προσφέρετε, καθώς και του κειμένου και της εμφάνισης του κουμπιού υποβολής. Για ex amp le:

Από εκεί και πέρα, σας συνιστώ ανεπιφύλακτα να εξοικειωθείτε με όλα τα widget και τις επιλογές σχεδίασης της Elementor.

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

Δημοσίευση προτιμήσεων

Όταν είστε ικανοποιημένοι με αυτό που δημιουργήσατε, θα θελήσετε να το μοιραστείτε με τον κόσμο. Μετά το πάτημα του κουμπιού PUBLISH, θα σας παρουσιαστούν μια σειρά ερωτήσεων. Ενδεικτικά:

Είναι δυνατόν να καθορίσετε τις συνθήκες υπό τις οποίες θέλετε να εμφανιστεί το αναδυόμενο παράθυρο; Μπορείτε να επιλέξετε ποιες σελίδες θα συμπεριλάβετε ή θα εξαιρέσετε από τα αποτελέσματα αναζήτησης. Μπορείτε να έχετε όσες προϋποθέσεις θέλετε.

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

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

Ολοκληρώστε τις ρυθμίσεις με τον τρόπο που επιθυμείτε και, στη συνέχεια, κάντε κλικ στην επιλογή ΑΠΟΘΗΚΕΥΣΗ & ΚΛΕΙΣΙΜΟ. Θα πρέπει να ληφθούν ως amp le τι αναδυόμενο παράθυρο σας θα μοιάζουν πατώντας αυτό το κουμπί.

Τα αναδυόμενα παράθυρα μπορούν να προσαρμοστούν και να προστεθεί δυναμικό περιεχόμενο σε αυτά.

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

Βρισκόμαστε ξανά στο στάδιο ADD NEW POPUP της διαδικασίας, όπου μπορούμε να καθορίσουμε έναν τίτλο και να επιλέξουμε ένα πρότυπο για άλλη μια φορά.

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

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

Εξετάστε το ακόλουθο σενάριο: τρέχουμε το WooCommerce και θέλουμε να ενημερώσουμε έναν χρήστη ότι υπάρχει διαθέσιμη έκπτωση για το συγκεκριμένο προϊόν που βλέπουν αυτήν τη στιγμή. Για να ξεκινήσετε, επιλέξτε μια ενότητα κειμένου από το πρότυπο και, στη συνέχεια, κάντε κλικ στο Δυναμικό στην πλαϊνή γραμμή:

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

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

Ας αντιγράψουμε λοιπόν αυτήν τη διαδικασία για το κουμπί, το οποίο θα εμφανίζει την τιμή του προϊόντος. Μπορούμε να φράσουμε το προηγούμενο κείμενο ως ΑΓΟΡΑ ΤΩΡΑ ΓΙΑ να μας παρέχει μια συναρπαστική παρότρυνση για δράση:

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

Όταν πατάμε PUBLISH, μας παρουσιάζονται για άλλη μια φορά οι ρυθμίσεις δημοσίευσης, επιτρέποντάς μας να καθορίσουμε ότι θέλουμε το αναδυόμενο παράθυρο να εμφανίζεται μόνο στις σελίδες του WooCommerce. Θα θέσουμε το χρονόμετρο σε 15 δευτερόλεπτα αδράνειας για να είναι το έναυσμα. Δείτε πώς έγινε τελικά:

Παρόλο που ο σχεδιασμός θα μπορούσε να βελτιωθεί, μπορείτε να δείτε ότι εμφανίζουμε το όνομα του προϊόντος, την τιμή του και μια εικόνα του προϊόντος ως φόντο του αναδυόμενου παραθύρου. Λαμπρός!