در این آموزش عملی به شما آموزش می دهیم که چگونه موج متحرکی که در صفحه اصلی مدیر سبز رنگ است را با المنتور به سایت خود اضافه کنید. در این آموزش، نحوه کدنویسی را به شما نمی گوییم. بلکه کدها آماده هستند و ما فقط به شما آموزش می دهیم که کجا آنها را اضافه کنید. توجه داشته باشید که فیلم نحوه ساخت موج متحرک مدیر سبز نیز به صورت کامل قابل مشاهده است. اگر تمام مراحل را به درستی انجام دهید، آنچه می خواهید اتفاق می افتد. 😉
بخش های موج متحرک مدیر سبز
به طور کلی این اثر از دو قسمت اصلی تشکیل شده است. قسمت اول مربوط به کدهای HTML است که از قبل آماده هستند و باید آنها را در جای مناسب قرار دهید و قسمت دوم مربوط به کدهای CSS است. کدهای CSS این امواج متحرک را هم برای شما آماده کرده ایم و نیازی به نوشتن ندارند. شما فقط از جایی که ما می گوییم کپی و پیست کنید. توجه داشته باشید که در این آموزش می خواهیم این کارها را با Elementor انجام دهیم. اما این بدان معنا نیست که اگر صفحه ساز دیگری غیر از صفحه ساز Elementor داشته باشیم، کار نخواهد کرد. ما می خواهیم آموزش را با ایجاد یک صفحه جدید و اضافه کردن موج متحرک به آن صفحه شروع کنیم. اما می توانید آن را در هر جایی از وب سایت خود قرار دهید.
کدهای HTML را اضافه کنید
1. در داشبورد وردپرس، تب Sections، روی تب Add کلیک کنید. سپس روی Edit with Elementor کلیک کنید تا وارد محیط Elementor شوید.
2. عنصر html را از عناصر موجود در Elementor انتخاب کنید، آن را با ماوس بگیرید و در صفحه رها کنید. (مانند تصویر زیر)
3. می بینید که عنصر html داخل صفحه اضافه شده است. روی عنصر html اضافه شده به صفحه کلیک کنید تا تنظیمات مربوط به آن بخش در ستون سمت راست فعال شود. حالا کدهای html که در زیر چسبانده ایم را کپی کرده و در قسمت کد html اضافه کنید. همانند تصویر زیر عمل کنید.
کدهای CSS را اضافه کنید
برای افزودن کدهای CSS، عنصر خاصی را به صفحه اضافه نمی‌کنم و از تب advanced برای سفارشی کردن عنصر HTML و افزودن مقادیر CSS در آنجا استفاده می‌کنم.
1. روی عنصر HTML کلیک کنید تا تنظیمات آن در ستون سمت راست فعال شود. سپس روی تب Advanced کلیک کرده و گزینه Custom CSS را انتخاب کنید. (همان تصویر زیر)
2. کدهای CSS زیر را کپی کرده و در کادر CSS قرار دهید.
.waves {
position:relative;
width: 100%;
height:15vh;
margin-bottom:-7px; /*Fix for safari gap*/
min-height:100px;
max-height:150px;
}
.content {
position:relative;
height:20vh;
text-align:center;
background-color: white;
}
/* Animation */
.parallax > use {
animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px,0,0);
}
100% {
transform: translate3d(85px,0,0);
}
}
همه چیز آماده است و اگر مراحل HTML و CSS را به درستی دنبال کرده باشید، موج متحرک ادمین سبز رنگ نمایش داده می شود و به درستی حرکت می کند.
نویسنده: محمدرضا عابدینی – تحریریه مدیری سبز
