نحوه اضافه کردن جلوه پارالاکس به هر تم وردپرس

سلام خدمت شما دوستان عزیز

با آموزش نحوه اضافه کردن جلوه پارالاکس به هر تم وردپرس در خدمت شما هستم

با ای تاتس همراه باشید 🙂

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


این روش نیازی به افزودن هر کد به تم وردپرس شما ندارد. این ساده تر است و برای اکثر کاربران توصیه می شود.

اولین چیزی که باید انجام دهید این است که Plugin Advanced Backgrounds WordPress را نصب و فعال کنید.

Advanced Backgrounds WordPress را دریافت کن

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

با کلیک بر روی آن یک پنجره باز می شود که در آن شما می توانید تنظیمات مختلف برای پس زمینه ای که می خواهید اضافه کنید را تغییر دهید.

اول، شما باید یک تصویر را به عنوان نوع پس زمینه خود انتخاب کنید و سپس گزینه ‘stretch’ را بررسی کنید

بعد، شما باید بر روی دکمه Select Image کلیک کنید تا تصویری را که می خواهید استفاده کنید آپلود کرده یا انتخاب کنید. اطمینان حاصل کنید که از یک تصویر بزرگ استفاده می کنید در غیر اینصورت پیکسل بندی ظاهر می شود.

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

برای ادامه کلیک کنید روی دکمه 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]

اکنون می توانید از وبسایت خود دیدن کنید تا آن را در عمل مشاهده کنید.

Parallax effect preview

قدم دوم : اضافه کردن جلوه پارالاکس به هر تم وردپرس با Css


این روش نیاز به درک منصفانه از HTML / CSS و نیز نحوه کارکرد تم وردپرس دارد.

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

پس از آپلود تصویر، شما باید تصویر را با ویرایش تصویر در کتابخانه رسانه وردپرس کپی کنید.

بعد، شما باید HTML زیر را به صفحه یا پست اضافه کنید که در آنجا ک شما می خواهید اثر پارالاکس را نشان دهید. شما همچنین می توانید این HTML را به تم وردپرس یا تم Child خود اضافه کنید.

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

شما باید CSS سفارشی زیر را به تم وردپرس خود اضافه کنید.

.parallax {  
background-image: url("http://example.com/wp-content/uploads/2017/08/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:0 auto;
color:#FFF;
padding-top:50px; 
} 

فراموش نکنید که URL تصویر پس زمینه را با تصویر پس زمینه خود جایگزین کنید.

شما هم اکنون می توانید تغییرات خود را ذخیره کنید و از وب سایت خود بازدید کنید تا آن را در عمل ببینید.

Parallax effect added with CSS

توجه: شما ممکن است نیاز به تنظیم CSS برای کار با طرح سایت خود داشته باشید.

امیدوارم بهره کافی را برده باشید 🙂

مطالب مرتبط

نحوه اضافه کردن LiveChat به فروشگاه WooCommerce شما و افزایش فروش

چگونه 502 Bad Gateway Error را در وردپرس حل کنیم

آموزش ثبت و تائید وبسایت وردپرس شما در Pinterest

ترفندهای جستجو در گوگل

تبدیل PDF و عکس به Word بدون نرم افزار!

تشخیص فونت به کار رفته در سایت ها

نحوه اضافه کردن جلوه پارالاکس به هر تم وردپرس

محتوای مطلب

کامنت ها

لطفا اگر سوالی نامرتبط با این مطلب دارید، از تب «پرسیدن سوال» استفاده کنید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.