Looking for a way to create a full screen popup for your WordPress site?
A full screen popup can be incredibly effective for capturing leads. They’re designed to convince and convert by pulling the visitor’s entire focus on themselves.
But having to code one from scratch is a real pain. For one thing, you’d have to know enough HTML, CSS, and Javascript to create the popup along with trigger rules for when to show it. Then, you’d have to create a manual integration with your email service provider. And finally, you’d have to deal with any privacy and security issues.
Good news: there’s a much simpler way.
In this article, we’re going to show you how to launch a full screen popup in WordPress with zero coding in less than 10 minutes.
Ας ξεκινήσουμε.
What is a Full Screen Popup in WordPress?
A full screen popup is an opt-in form that popups up with a full screen cinematic effect. Think of it as watching a movie on Netflix in full-screen mode. When a full screen optin form pops up, you can’t see the rest of the WordPress site. This way, your entire focus is on the popup.
Ακολουθεί ένα παράδειγμα:
You can use full screen popups to:
- Welcome new visitors
- Offer a discount coupon
- Point visitors to their best content
- Send visitors to their social media profiles
And more. You can even create popup contact forms. Popups are super flexible and as long as you’re creative, you can set up high-converting ones easily.
How to Create a Full Screen Popup in WordPress
Now that you understand what a full screen popup is and why you’d want to create one, how do you create a full screen popup? We recommend using OptinMonster to create all your popups.
Το OptinMonster είναι το #1 εργαλείο μετατροπών στον κόσμο και το έχουμε χρησιμοποιήσει οι ίδιοι. Το OptinMonster καθιστά εξαιρετικά απλή τη δημιουργία ισχυρών popups που μετατρέπουν. Και δεν θα χρειαστεί ποτέ να χρησιμοποιήσετε καθόλου κώδικα.
We even wrote a full review of OptinMonster.
You can check that out, or get started with your campaign right now. All you have to do is signup for OptinMonster and follow along with the rest of this article.
Step #1: Create a Campaign
Μεταβείτε στον πίνακα ελέγχου του OptinMonster και πατήστε το κουμπί Δημιουργία:
Επιλέξτε την επιλογή Πρότυπο για να ξεκινήσετε τη δημιουργία ενός optin χρησιμοποιώντας ένα προ-σχεδιασμένο πρότυπο:
Select the Fullscreen to get started with full screen popup templates:
Then, choose a campaign template. You can choose whatever template you like, but we’re going with the Product Recommendation (Gamified) campaign template for this tutorial.
Αφού επιλέξετε το πρότυπό σας, δώστε ένα όνομα στην καμπάνια σας. Θυμηθείτε, αυτό το όνομα καμπάνιας είναι για εσάς και πιθανότατα θα δημιουργήσετε πολλές από αυτές τις popups με διαφορετικές επιλογές στόχευσης. Έτσι, δώστε ένα ουσιαστικό όνομα στην καμπάνια ή θα καταλήξετε πραγματικά μπερδεμένοι αργότερα.
Also, depending on your plan, you can also use OptinMonster on multiple sites. So, select the website where you want to display your campaign as well.
Press Start Building when you’re done.
Step #2: Edit Your Popup
With OptinMonster, you’ll get a visual drag and drop popup builder. Once you’re done creating your campaign, you’ll be able to edit even the tiniest details about your popup. Start by editing your popup headline:
Το πιο εκπληκτικό μέρος εδώ είναι ότι απλά κάνετε κλικ σε οποιοδήποτε κείμενο θέλετε να επεξεργαστείτε και το αλλάζετε απευθείας. Δεν υπάρχει ανάγκη να συμπληρώσετε μια φόρμα ή να επεξεργαστείτε οποιονδήποτε κώδικα HTML στο popup.
You can edit everything you want about your full screen popup. When you’re happy with the optin’s appearance, you can move on to more advanced settings.
Step #3: Set Full Screen Popup Display Rules
Display rules are meant to define when your campaign shows up on your site and who sees it.
Our recommendation is that you change the trigger condition to exit-intent:
Click Next Step to choose the Action. Here, we recommend that you set Show the campaign view to Optin View, set the show with MonsterEffect to any entry animation you like, and play sound effect to any sound effect for your popup.
And then, click the Next Step button. You can see the full extent of your settings in the Summary tab.
Βήμα #4: Προσθέστε ένα Κουμπί Κλικ για Εγγραφή στο Αναδυόμενο Παράθυρό σας
Οι ειδοποιήσεις push σας βοηθούν να αυξήσετε την επισκεψιμότητα του ιστότοπού σας και την αλληλεπίδραση σε αυτόματο πιλότο. Και αν διαχειρίζεστε ένα online κατάστημα, το PushEngage σας βοηθά επίσης να αυξήσετε τις πωλήσεις σας, βοηθώντας σας να δημιουργήσετε αυτοματοποιημένες ειδοποιήσεις push eCommerce.
Μπορείτε να ξεκινήσετε δωρεάν, αλλά αν σοβαρά θέλετε να αναπτύξετε την επιχείρησή σας, θα πρέπει να αγοράσετε ένα επί πληρωμή πρόγραμμα. Επίσης, πριν αγοράσετε οποιαδήποτε υπηρεσία ειδοποιήσεων push, θα πρέπει να δείτε αυτόν τον οδηγό για το κόστος ειδοποιήσεων push.
Ακολουθεί μια γρήγορη επισκόπηση του τι παίρνετε με το PushEngage:
- Αυτοματοποιημένες καμπάνιες υψηλής μετατροπής
- Πολλαπλές επιλογές στόχευσης και προγραμματισμού καμπάνιας
- Παρακολούθηση στόχων και προηγμένη ανάλυση
- Έξυπνες δοκιμές A/B
- Ένας Αφοσιωμένος Διαχειριστής Επιτυχίας
Θα δείτε ότι η PushEngage είναι μακράν η καλύτερη επιλογή αν θέλετε να αυξήσετε την επισκεψιμότητα, την αφοσίωση και τις πωλήσεις για την επιχείρησή σας. Και αν έχετε περιορισμένο προϋπολογισμό, μπορείτε πάντα να γίνετε λίγο δημιουργικοί με τις ειδοποιήσεις push σας.
Πρώτα, προσθέστε ένα μπλοκ HTML στο αναδυόμενο παράθυρό σας από την πλαϊνή μπάρα στο OptinMonster.
Εδώ θα προσθέσουμε τον κώδικα για τη συλλογή συνδρομητών ειδοποιήσεων push. Πρώτα, επικολλήστε τον παρακάτω κώδικα για να δημιουργήσετε ένα κλικ κουμπί:
<button onclick="subscribeOnClickButton()" style="border: none; width: 100%; padding-left: 15%; padding-right:15%; text-align: center; display: inline-block; color: white;">Get Updates via Push Notifications</button>Επικολλήστε τον κώδικα εκεί που λέει ότι μπορείτε να προσθέσετε HTML:
Φυσικά, μπορείτε να πειραματιστείτε με τα στυλ για να το κάνετε να φαίνεται πιο ελκυστικό. Στη συνέχεια, θα κάνουμε το κουμπί να συλλέγει συνδρομητές ειδοποιήσεων push όταν κάνετε κλικ.
Μεταβείτε στην αρχική σελίδα του PushEngage και κάντε κλικ στο κουμπί Έναρξη:
Στη συνέχεια, θα θέλετε να επιλέξετε το δωρεάν πρόγραμμα για να δοκιμάσετε το PushEngage ή να επιλέξετε ένα επί πληρωμή πρόγραμμα αν είστε σοβαροί σχετικά με την ανάπτυξη της επιχείρησής σας. Τα επί πληρωμή προγράμματα έρχονται με περισσότερες επιλογές καμπάνιας και τη δυνατότητα δημιουργίας ακόμη μεγαλύτερων λιστών συνδρομητών.
Στον πίνακα ελέγχου του PushEngage, μεταβείτε στις Ρυθμίσεις Ιστότοπου » Λεπτομέρειες Ιστότοπου και κάντε κλικ στο κουμπί Κάντε κλικ εδώ για οδηγίες εγκατάστασης. Κάτω από το πεδίο Οποιοσδήποτε Ιστότοπος, θα λάβετε τον κωδικό εγκατάστασής σας:
ΠΡΟΕΙΔΟΠΟΙΗΣΗ: Πρέπει να αντιγράψετε τον κωδικό που λαμβάνετε από τον πίνακα ελέγχου σας. Ο κωδικός είναι μοναδικός για κάθε χρήστη του PushEngage. Δεν θα μπορείτε να αντιγράψετε τον κωδικό στην εικόνα και να συλλέξετε συνδρομητές ειδοποιήσεων push.
Μόλις έχετε τον κωδικό στον πίνακα ελέγχου του PushEngage, πάρτε το δεύτερο script και προσθέστε του επιπλέον κώδικα. Ο τελικός σας κώδικας θα πρέπει να μοιάζει κάπως έτσι:
<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
}]);
}
</script>Προσθέστε αυτόν τον κώδικα στο μπλοκ HTML στο OptinMonster ακριβώς μετά τον κώδικα για το κουμπί σας και ανάμεσα στο μπλοκ κώδικα <div></div> και τελειώσατε!
Step #5: Setup Your Email Integration
The next step is to set up your email integration. Click Add New Integration from the Integrations tab and select your email service provider:
We recommend using Drip for your email marketing if you don’t already have an email service provider.
Step #6: Publish Your Full Screen Popup in WordPress
Όταν δημιουργείτε μια νέα καμπάνια, είναι Σε παύση εξ ορισμού.
Μεταβείτε στην καρτέλα Δημοσίευση από το επάνω μενού για να δείτε τις Επιλογές Δημοσίευσης. Στη συνέχεια, ορίστε την κατάσταση σε Δημοσίευση και επιλέξτε την πλατφόρμα του ιστότοπου:
Αν διαχειρίζεστε έναν ιστότοπο WordPress, το πρόσθετο OptinMonster χειρίζεται αυτόματα την υπόλοιπη ρύθμιση. Το ίδιο ισχύει για Shopify και BigCommerce. Για οποιονδήποτε άλλο ιστότοπο, κάντε κλικ στο Οποιοσδήποτε Ιστότοπος και επικολλήστε τον κώδικα ενσωμάτωσης στο κεφάλι του ιστότοπού σας:
Και τελειώσατε!
What to do After Creating a Full Screen Popup in WordPress
Αυτό ήταν για αυτό το θέμα, φίλοι!
Let us know if this article helped. Creating popups on your site can help you convert your traffic into email subscribers and genuine business leads. And we highly recommend that you start creating full screen popups right away.
Και αν ψάχνετε για έναν προσιτό τρόπο να αυξήσετε την επισκεψιμότητά σας, σας προτείνουμε να χρησιμοποιήσετε ειδοποιήσεις push. Οι ειδοποιήσεις push μπορούν να σας βοηθήσουν να προσελκύσετε περισσότερη επαναλαμβανόμενη επισκεψιμότητα και αλληλεπίδραση με τον ιστότοπο. Μπορείτε επίσης να δημιουργήσετε αυτοματοποιημένες καμπάνιες ειδοποιήσεων push που παράγουν πωλήσεις.
Δεν πειστήκατε; Ελέγξτε αυτούς τους πόρους:
- 7 Έξυπνες Στρατηγικές για την Ενίσχυση της Αφοσίωσης Πελατών
- Είναι Αποτελεσματικές οι Ειδοποιήσεις Push; 7 Στατιστικά + 3 Συμβουλές Ειδικών
- Πώς να Ρυθμίσετε Ειδοποιήσεις Push για Εγκαταλελειμμένα Καλάθια (Εύκολο Οδηγός)
- Πώς να προσθέσετε ένα πρόσθετο WordPress για ειδοποιήσεις ιστού στον ιστότοπό σας
Συνιστούμε τη χρήση του PushEngage για τη δημιουργία των καμπανιών ειδοποιήσεων push. Το PushEngage είναι το λογισμικό ειδοποιήσεων push #1 στον κόσμο. Έτσι, αν δεν το έχετε κάνει ήδη, ξεκινήστε με το PushEngage σήμερα!
