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

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

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

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

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

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

در این روش نیازی به افزودن کدهای وردپرس به قالب سایت نمی باشد. می توان گفت ساده ترین روش است که به کاربران وردپرسی توصیه می شود. پیش از هر چیزی شما باید افزونه 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 قرار دهید و تغییرات را ذخیره نمایید. حال به وب سایت مراجعه کنید و نتیجه را مشاهده نمایید.

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

این روش نیاز به دانش کافی از کدهای 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/2019/02/my-background-image.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}
  
.parallax-content {
width:50%;
margin:۰ auto;
color:#FFF;
padding-top:50px;
}

• توجه: در کد بالا باید آدرس تصویر پس زمینه مورد نظرتان را جایگزین کنید.

با ذخیره سازی تغییرات می توانید نتیجه را در سایت خود مشاهده کنید.
موفق و پیروز باشید

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