In this video I will show you something fun!
I will show how to add an interactive Easter Egg to your Elementor website.
In this tutorial I will show 2 different ways to add a secret code to your Elementor website.
To follow this tutorial it will require Elementor Pro.
Use our affiliate link below if you’d like to support this YouTube channel.
Elementor Pro:
https://trk.elementor.com/4776
Konami Code CodePen:
https://codepen.io/cferdinandi/pen/qBWVPqL
Timestamps:
- 0:00 Introduction
- 2:50 Easter Egg Section Example
- 11:21 Easter Egg Pop-Up Example
Example #1 Code:
<script>
var pattern = ['w', 'i', 'c', 'k', 'y'];
var current = 0;
var keyHandler = function (event) {
// If the key isn't in the pattern, or isn't the current key in the pattern, reset
if (pattern.indexOf(event.key) < 0 || event.key !== pattern[current]) {
current = 0;
return;
}
// Update how much of the pattern is complete
current++;
// If complete, alert and reset
if (pattern.length === current) {
current = 0;
document.getElementById("easteregg").style.display = 'block';
}
};
// Listen for keydown events
document.addEventListener('keydown', keyHandler, false);
</script>
HTML Close Button
<div style="text-align:center"><button onclick="myFunction()">Close Me</button></div>
<script>
function myFunction() {
var x = document.getElementById("easteregg");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
Example #2 Code:
<script>
var pattern = ['w', 'i', 'c', 'k', 'y'];
var current = 0;
var keyHandler = function (event) {
// If the key isn't in the pattern, or isn't the current key in the pattern, reset
if (pattern.indexOf(event.key) < 0 || event.key !== pattern[current]) {
current = 0;
return;
}
// Update how much of the pattern is complete
current++;
// If complete, alert and reset
if (pattern.length === current) {
current = 0;
elementorProFrontend.modules.popup.showPopup( { id: 20012 } );
}
};
// Listen for keydown events
document.addEventListener('keydown', keyHandler, false);
</script>
