Δημιουργήστε αναδυόμενα παράθυρα Elementor στο WooCommerce

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

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

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

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

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

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

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

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

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

Μόλις κάνετε κλικ στο ΠΡΟΣΘΗΚΗ ΝΕΟΥ POPUP (το οποίο είναι αρκετά αυτονόητο), θα σας ζητηθεί να του δώσετε ένα όνομα και στη συνέχεια να επιλέξετε ένα πρότυπο από τα προκατασκευασμένα ex amp les που εμφανίζονται. Διάφορα πρότυπα είναι διαθέσιμα για πολλαπλούς σκοπούς. Μερικά είναι κατάλληλα για ανακοινώσεις, άλλα για προώθηση έκπτωσης, άλλα είναι ιδανικά για να ενθαρρύνουν τους χρήστες να εγγραφούν σε κάτι. Υπάρχουν ακόμη και amp για την προειδοποίηση των χρηστών σχετικά με τη χρήση cookie ή άλλες ειδοποιήσεις GDPR. Μόλις βρείτε κάτι που σας αρέσει, κάντε κλικ σε αυτό για να δείτε μια μεγαλύτερη προεπισκόπηση και, στη συνέχεια, πατήστε το κουμπί Εισαγωγή.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Όταν είστε ικανοποιημένοι με αυτό που έχετε δημιουργήσει, θα θέλετε να το μοιραστείτε με τον κόσμο. Μετά το πάτημα του κουμπιού ΔΗΜΟΣΙΕΥΣΗ, θα εμφανιστεί μια σειρά από ερωτήσεις. Ενδεικτικά:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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