تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده


تبلیغات
تبلیغات تبلیغات

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

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

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

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

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

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

 

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

 

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

در این روش نیازی به افزودن کدهای وردپرس به قالب سایت نمی باشد. می توان گفت ساده ترین روش است که به کاربران وردپرسی توصیه می شود. پیش از هر چیزی شما باید افزونه 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;
}
  • توجه: در کد بالا باید آدرس تصویر پس زمینه مورد نظرتان را جایگزین کنید.

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

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
ثبت نام در بروکر فارکس با قابلیت واریز و برداشت به صورت ریالی کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=43075
کلمات کلیدی پست :
مطالب مرتبط
3,116آموزش سفارشی سازی پیشخوان وردپرس تاریخ : 2019/08/31
2,268راهنمای انتخاب قالب وردپرس مناسب تاریخ : 2021/02/1
4,648آموزش ساخت صفحه ابر برچسب ها در وردپرس تاریخ : 2018/06/2
4,628اضافه کردن منو دلخواه به پنل مدیریت وردپرس تاریخ : 2019/03/10
30,110کد نمایش لینک کوتاه مطالب در وردپرس تاریخ : 2016/08/4
4,763نحوه نمایش متفاوت هر پست در وردپرس تاریخ : 2018/01/25
3,640۳ روش برای مبارزه با دیدگاه های اسپم در وردپرس تاریخ : 2018/10/7
9,537ایجاد ماشین حساب داینامیک در وردپرس با افزونه Calculated Fields Form تاریخ : 2017/11/28
6,516افزودن فونت به ویرایشگر وردپرس تاریخ : 2018/10/28
2,856افزودن دکمه اشتراک گذاری به RSS وردپرس تاریخ : 2019/03/19
2,532آموزش افزودن قابلیت ویرایش نظرات در وردپرس تاریخ : 2019/08/18
2,452آموزش اضافه کردن استایل دلخواه به ابزارک ها در وردپرس تاریخ : 2019/11/4
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
شرکت سئو سایت
شرکت سئو سایت
تبلیغات
تبلیغات
تبلیغات