تبلیغات
حراجی دامنه های ویژهمشاهده
آخرین ارسال های تالار مشاهده انجمن
مشکل درخروجی گرفتن اکسل در فرم ساز machform 3 پاسخ 1197 بازدید اسکریپت مشابه ویرگول 0 پاسخ 33 بازدید سئو سایت 2 پاسخ 249 بازدید پشتیبانی افزونه Rankie فارسی 1 پاسخ 263 بازدید مشکل اسلایدر وردپرس 2 پاسخ 518 بازدید کار با api و درون ریزی محصولات در ووکامرس 1 پاسخ 473 بازدید خرید خودکار و اتوماتیک تتر 0 پاسخ 242 بازدید مزایای مستر کارت طلایی 0 پاسخ 259 بازدید کاربرد سرور مجازی میکروتیک و مزیت های آن 1 پاسخ 834 بازدید پراجکت سرور ها 0 پاسخ 462 بازدید
تبلیغات

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

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

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

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

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

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

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

 

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

 

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

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

 

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

 

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

 

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

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

 

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

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

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

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

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


دانلود


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

درخواست نصب

نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=43075
کلمات کلیدی پست :
تبلیغات تبلیغات
تبلیغات تبلیغات
مطالب مرتبط
1,316آموزش مدیریت فایل کانفیگ وردپرس تاریخ : 2019/08/15
1,248خصوصی کردن پست ها در وردپرس تاریخ : 2019/09/22
2,064حذف more# از لینک ادامه مطلب وردپرس تاریخ : 2019/02/17
1,252آموزش افزودن دکمه گوگل پلاس به وردپرس تاریخ : 2019/10/2
1,036نمایش خطا هنگام نصب بسته های نصبی تاریخ : 2019/09/1
3,484حذف ادرس وبسایت از نظرات در وردپرس تاریخ : 2013/10/27
4,0008 روش برای ترویج خواندن مقالات قدیمی سایت تاریخ : 2016/12/2
1,384پنهان سازی از جستجوی وردپرس بدون استفاده از افزونه تاریخ : 2019/11/7
1,692تعیین استایل دلخواه نوشته ها برای نویسندگان تاریخ : 2019/04/12
1,584نمایش خلاصه مطالب در برگه وردپرس تاریخ : 2019/04/28
4,669نحوه تغییر تنظیمات فشرده‌سازی تصاویر در وردپرس تاریخ : 2016/05/2
1,100تغییر خودکار نام عکس ها در وردپرس تاریخ : 2019/11/22
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
تبلیغات
تبلیغات
تبلیغات
تبلیغات