آموزش ایجاد قابلیت پارالکس در قالب های وردپرس

ادامه مطلب

zip

سپتامبر 30, 2017

آموزش ایجاد قابلیت پارالکس در قالب های وردپرس

تا چه میزان با قابلیت پارالکس آشنا هستید؟ پارالکس یک روند طراحی سایت است که تصاویر پس زمینه نسبت به محتوای آن حرکت آهسته تری دارند. در این مقاله شما می آموزید که چگونه این قابلیت زیبا را به قالب وردپرس وب سایت خود اضافه کنید. با آموزش ایجاد پارالکس در قالب های وردپرس با ما همراه باشید.

آموزش ایجاد قابلیت پارالکس در قالب های وردپرس

پارالکس یک تکنیک مدرن طراحی سایت می باشد که المان های پس زمینه نسبت به محتوای آن حرکت آهسته ای دارند، در واقع کندتر اسکرول می شوند. این قابلیت به تصاویر پس زمینه عمق می دهد و باعث می شود آنها به صورت تعاملی به نظر آیند. از پارالکس می توانید در صفحات فرود، محتواهای طولانی، صفحات فروش و یا صفحه اصلی وب سایت های تجاری استفاده کنید. پارالکس یک روش عالی برای برجسته کردن بخش های مختلف در یک صفحه طولانی می باشد.

در صفحه اصلی بسیاری از قالب های پرمیوم وردپرس از قابلیت پارالکس استفاده شده است. همچنین شما می توانید از پارالکس در بسیاری از افزونه های صفحه ساز وردپرس برای ایجاد وب سایت تان استفاده کنید. اما برای دوستانی که این قابلیت در قالب سایت شان وجود ندارد، روش هایی را در ادامه ارائه می دهیم و توصیه می کنیم از این روش ها جهت ایجاد پارالکس در قالب های وردپرس استفاده کنند.

پیشنهاد بعدی پخش موسیقی در وردپرس بدون نیاز به افزونه

ایجاد پارالکس در قالب های وردپرس با استفاده از افزونه

در این روش نیازی به افزودن کدهای وردپرس به قالب سایت نمی باشد. می توان گفت ساده ترین روش است که به کاربران وردپرسی توصیه می شود. پیش از هر چیزی شما باید افزونه Advanced WordPress Backgrounds را دانلود کنید و در وب سایت تان نصب و فعال نمایید.

حال پس از فعالسازی باید به برگه و یا مطلبی که می خواهید قابلیت پارالکس را به آن اضافه کنید، بروید. با انتخاب ویرایش برگه موردنظر مشاهده می کنید که گزینه ی جدیدی با عنوان Advanced WordPress Backgrounds به بخش ویرایشگر تصویری اضافه شده است. با کلیک بر روی این دکمه، پنجره جدیدی باز می شود. شما می توانید از این بخش تنظیمات مربوط به پس زمینه ای که می خواهید، اضافه کنید را تغییر دهید.

پیشنهاد بعدی نحوه غیر فعال کردن لینک ها در نظرات

ابتدا شما باید از منوی کشویی background type، حالت image را انتخاب کنید و سپس تیک گزینه stretch را بزنید. در ادامه با کلیک بر روی دکمه Select Image، یک تصویر مناسب برای پس زمینه بارگذاری نمایید. دقت داشته باشید که این تصویر به اندازه کافی بزرگ باشد، زیرا در غیر این صورت تصویر به طور پیکسل پیکسل نمایش داده می شود.

سپس با انتخاب نوع پارالکس، این قابلیت را فعال نمایید. حالت های مختلفی وجود دارد که شما می توانید هر کدام یک از آنها ا انتخاب کنید. در این بین رایج ترین اثر پارالکس، حالت اسکرول می باشد. سپس بر روی دکمه Insert برای ادامه تنظیمات کلیک کنید. حال این افزونه کد کوتاهی را به مطلب شما اضافه خواهد کرد. این کد به صورت زیر می باشد:

۱
۲
۳
۴
۵

[nk_awb awb_type=”image” awb_stretch=”true” awb_image=”۲۲″ awb_image_size=”full” awb_parallax=”scroll” awb_parallax_speed=”۰.۵″ awb_mouse_parallax=”true” awb_mouse_parallax_size=”۳۰″ awb_mouse_parallax_speed=”۱۰۰۰۰″]
Your Content Here
[/nk_awb]

سپس شما باید مطلب خودتان را به جای Your content here قرار دهید و تغییرات را ذخیره نمایید. حال به وب سایت مراجعه کنید و نتیجه را مشاهده نمایید.

پیشنهاد بعدی لود مرحله ای نظرات وردپرس با Lazy Load for Comments

ایجاد پارالکس در قالب های وردپرس با کدنویسی

این روش نیاز به دانش کافی از کدهای HTML ، CSS و همچنین اطلاعاتی در مورد نحوه کار کردن قالب های وردپرس دارد. ابتدا باید تصویر مورد نظر خود را از طریق کتابخانه چندرسانه ای آپلود کنید و سپس در بخش ویرایشگر آدرس عکس را کپی کنید. در نهایت به صفحه یا برگه ای که می خواهید قابلیت پارالکس را به آن اضافه کنید، بروید و کد HTML زیر را در این صفحه کپی نمایید. همچنین شما می توانید این کد HTML را به قالب وردپرس یا فرزند قالب اضافه کنید.

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳

<div class="parallax">
<div class="parallax-content">
 
Your content goes here...
 
</div>
</div>

سپس باید کد CSS سفارشی را که در ادامه مشاهده می کنید، به قالب سایت اضافه نمایید.

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

.parallax { 
background-image: url("http://example.com/wp-content/uploads/۲۰۱۷/۰۸/my-background-image.jpg");
height: ۱۰۰%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-۴۱۰px;
margin-right:-۴۱۰px;
}
 
.parallax-content {
width:۵۰%;
margin:۰ auto;
color:#FFF;
padding-top:۵۰px;
}