| Landing Page with Elementor | Attractive Christmas |
| Free + link | codes and files for a fast setup |
Attractive Christmas Landing Page with Elementor
Tutorial on building a Christmas landing page with Elementor Pro using ready-to-use codes and files for a fast setup
Step 1:
Download the ready-made files from the link below
Click the “Download” icon in the top left corner of the image
Extract or unzip the main folder! Do not change the names of the files inside
Create a page with Elementor and a separate container
Step 2:
Place the codes separately into the Elementor Pro HTML widget
Widget 1 Codes: Red background, Santa Claus, and images
Christmas Animation Code
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.5.0/remixicon.css">
<link rel="stylesheet" href="/wp-content/uploads/Christmas Animation/assets/css/styles.css">
<style>
/* محدود کردن scope به داخل widget */
.elementor-widget-html .home {
width: 100%;
min-height: 100vh;
position: relative;
overflow: hidden;
}
.elementor-widget-html .home__container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
@media screen and (max-width: 768px) {
.elementor-widget-html .home__container {
max-width: 540px;
}
.elementor-widget-html .home__title {
font-size: 3rem !important;
}
}
@media screen and (max-width: 576px) {
.elementor-widget-html .home__container {
max-width: 100%;
padding: 0;
}
.elementor-widget-html .home__title {
font-size: 2rem !important;
}
.elementor-widget-html .home__bg {
height: 45vh !important;
object-fit: cover;
object-position: center top;
}
}
</style>
<section class="home">
<div class="home__container">
<img src="/wp-content/uploads/Christmas Animation/assets/img/img-bg.svg" alt="image" class="home__bg">
<img src="/wp-content/uploads/Christmas Animation/assets/img/cloud-1.svg" alt="image" class="home__cloud-1">
<img src="/wp-content/uploads/Christmas Animation/assets/img/cloud-2.svg" alt="image" class="home__cloud-2">
<img src="/wp-content/uploads/Christmas Animation/assets/img/sled.svg" alt="image" class="home__sled">
<div class="home__images">
<img src="/wp-content/uploads/Christmas Animation/assets/img/img-1.svg" alt="image" class="home__img-1">
<img src="/wp-content/uploads/Christmas Animation/assets/img/img-2.svg" alt="image" class="home__img-2">
<img src="/wp-content/uploads/Christmas Animation/assets/img/img-3.svg" alt="image" class="home__img-3">
<img src="/wp-content/uploads/Christmas Animation/assets/img/img-4.svg" alt="image" class="home__img-4">
<img src="/wp-content/uploads/Christmas Animation/assets/img/img-5.svg" alt="image" class="home__img-5">
<img src="/wp-content/uploads/Christmas Animation/assets/img/img-6.svg" alt="image" class="home__img-6">
<img src="/wp-content/uploads/Christmas Animation/assets/img/img-7.svg" alt="image" class="home__img-7">
<img src="/wp-content/uploads/Christmas Animation/assets/img/img-8.svg" alt="image" class="home__img-8">
<img src="/wp-content/uploads/Christmas Animation/assets/img/img-9.svg" alt="image" class="home__img-9">
<img src="/wp-content/uploads/Christmas Animation/assets/img/img-10.svg" alt="image" class="home__img-10">
<img src="/wp-content/uploads/Christmas Animation/assets/img/img-11.svg" alt="image" class="home__img-11">
<img src="/wp-content/uploads/Christmas Animation/assets/img/img-12.svg" alt="image" class="home__img-12">
<img src="/wp-content/uploads/Christmas Animation/assets/img/img-13.svg" alt="image" class="home__img-13">
<img src="/wp-content/uploads/Christmas Animation/assets/img/img-14.svg" alt="image" class="home__img-14">
<img src="/wp-content/uploads/Christmas Animation/assets/img/img-15.svg" alt="image" class="home__img-15">
<img src="/wp-content/uploads/Christmas Animation/assets/img/img-16.svg" alt="image" class="home__img-16">
</div>
<h1 class="home__title">Merry <br> Christmas</h1>
</div>
</section>
<script src="/wp-content/uploads/Christmas Animation/assets/js/gsap.min.js"></script>
<script src="https://app.embed.im/snow.js" defer></script>
<script src="/wp-content/uploads/Christmas Animation/assets/js/main.js"></script>
Music Audio Code
<div id="xmasPlayer" class="music-player-wrapper">
<audio id="xmasAudio" preload="auto">
<source src="/wp-content/uploads/christmas-music.mp3" type="audio/mpeg">
</audio>
<button id="xmasBtn" class="music-btn">
<svg class="play-icon" viewBox="0 0 24 24" fill="white">
<path d="M8 5v14l11-7z"/>
</svg>
<svg class="pause-icon" viewBox="0 0 24 24" fill="white" style="display:none;">
<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
</svg>
</button>
</div>
<style>
.music-player-wrapper {
position: fixed;
bottom: 100px;
right: 20px;
z-index: 99999;
}
.music-btn {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #c41e3a 0%, #8b0000 100%);
border: 3px solid rgba(255,255,255,0.3);
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.music-btn:hover {
transform: scale(1.1);
}
.music-btn:active {
transform: scale(0.95);
}
.music-btn svg {
width: 28px;
height: 28px;
}
.music-btn.playing {
background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
animation: pulse-effect 2s infinite;
}
@keyframes pulse-effect {
۰%, ۱۰۰% {
box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
}
۵۰% {
box-shadow: 0 0 0 15px rgba(46, 204, 113, 0);
}
}
/* موبایل */
@media screen and (max-width: 768px) {
.music-player-wrapper {
bottom: 80px;
right: 15px;
}
.music-btn {
width: 55;
height: 55px;
}
.music-btn svg {
width: 24px;
height: 24px;
}
}
</style>
<script>
(function() {
'use strict';
const audio = document.getElementById('xmasAudio');
const btn = document.getElementById('xmasBtn');
const playIcon = btn.querySelector('.play-icon');
const pauseIcon = btn.querySelector('.pause-icon');
if (!audio || !btn) {
console.error('عناصر پیدا نشد!');
return;
}
// تست مسیر فایل
console.log('مسیر فایل:', audio.querySelector('source').src);
// کلیک روی دکمه
btn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
if (audio.paused) {
// پخش
audio.play()
.then(function() {
console.log('پخش شروع شد');
btn.classList.add('playing');
playIcon.style.display = 'none';
pauseIcon.style.display = 'block';
audio.loop = true;
})
.catch(function(error) {
console.error('خطا در پخش:', error);
alert('خطا در پخش موزیک! فایل را چک کنید.');
});
} else {
// توقف
audio.pause();
console.log('پخش متوقف شد');
btn.classList.remove('playing');
playIcon.style.display = 'block';
pauseIcon.style.display = 'none';
}
});
// لود شدن فایل
audio.addEventListener('loadeddata', function() {
console.log('فایل لود شد - مدت زمان:', audio.duration);
});
// خطا در لود
audio.addEventListener('error', function(e) {
console.error('خطا در لود فایل:', e);
alert('فایل موزیک پیدا نشد! مسیر را چک کنید.');
});
})();
</script>