ارزدیجیتال
حراجی دامنه های ویژهمشاهده
تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

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

مقالات,آموزش,ترفند , وردپرس

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

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

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

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

 

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

 

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

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

 

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

 

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

 

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

[nk_awb awb_type=”image” awb_stretch=”true” awb_image=”22″ awb_image_size=”full” awb_parallax=”scroll” awb_parallax_speed=”0.5″ awb_mouse_parallax=”true” awb_mouse_parallax_size=”30″ awb_mouse_parallax_speed=”10000″]
 
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;
}
  • توجه: در کد بالا باید آدرس تصویر پس زمینه مورد نظرتان را جایگزین کنید.

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

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=43075
کلمات کلیدی پست :
مطالب مرتبط
5,792ایندکس نشدن سایت در گوگل تاریخ : 2019/05/30
7,088فعال کردن بروزرسانی خودکار وردپرس تاریخ : 2019/04/22
5,428آموزش مخفی کردن مطالب وردپرس از نتایج گوگل تاریخ : 2019/06/19
6,928پیوند یکتا فارسی یا انگلیسی در وردپرس بهتر است؟ تاریخ : 2019/11/3
11,266جستجوگر تمام صفحه برای وردپرس با افزونه Full Screen Search Overlay تاریخ : 2017/04/30
4,696مدیریت آسان دیدگاه با شورت کات نظرات در وردپرس تاریخ : 2019/06/30
6,040ایجاد خودکار پست وردپرس از یوتیوب تاریخ : 2019/03/9
8,620آموزش ساخت صفحه ابر برچسب ها در وردپرس تاریخ : 2018/06/2
7,944نمایش محبوب ترین مطالب وردپرس بر اساس تعداد دیدگاه تاریخ : 2018/07/28
7,469ایجاد محدودیت طول عنوان نوشته ها در وردپرس Limit Post Titles تاریخ : 2018/01/17
11,740قرار دادن پروفایل شبکه های اجتماعی در گوگل تاریخ : 2018/04/20
5,072ارسال ایمیل به کاربر هنگام تغییر نقش کاربری در وردپرس تاریخ : 2019/04/27
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file