افکت پارالاکس (Parallax Effect) چیست و چگونه از پارالاکس در وردپرس استفاده کنیم؟

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

افکت پارالاکس چیست؟

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

اکثر تم های برتر وردپرس اکنون با افکت پارالاکس داخلی در صفحه اصلی خود ارائه می شوند. حتی قالب پیش فرض رایگان وردپرس Twenty Seventeen نیز با یک ویژگی افکت پارالاکس ارائه می شود. اکثر صفحه سازها همچنین از یک ابزار افکت پارالاکس استفاده می کنند که به شما امکان می دهد افکت را به هر صفحه یا پستی در وب سایت خود اضافه کنید و البته افزونه های وردپرس بی شماری وجود دارد که می توانید با نصب آنها عناصر افکت پارالاکس را به وب سایت خود اضافه کنید.

مزایای استفاده از افکت پارالاکس چیست؟

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

یکی دیگر از دلایل اصلی استفاده از افکت پارالاکس در سایت شما کمک به تجزیه یک صفحه ، به ویژه یک صفحه اصلی ، به قطعات قابل خواندن است. از این افکت برای تأکید بر بخشها و انواع مختلف محتوایی که می خواهید به نمایش بگذارید استفاده کنید. این می تواند به ارتقا جنبه های مختلف وب سایت شما کمک کند ، اطلاعات مهم را روشن کند و کاربران را ترغیب کند تا به سایت شما دسترسی پیدا کنند و به محتوایی دسترسی پیدا کنند.

افکت پارالاکس را می توان در هر صفحه یا پست وب سایت استفاده کرد ، اما بیشتر اوقات در صفحه های اصلی ، صفحه های فرود یا سایت های یک صفحه ای مشاهده می شود. افکت پارالاکس جلوه بصری خیره کننده ایجاد می کند و تأثیر مثبتی که بر روی تجربه کاربر می گذارد ، می تواند منجر به ماندگاری بیشتر بازدیدکنندگان در سایت شما شود و به بهبود اهداف نرخ تبدیل سایت شما کمک کند.

ملاحظات هنگام استفاده از افکت پارالاکس

گرچه مزایایی وجود دارد ، اما چند نکته اساسی وجود دارد که باید هنگام افزودن بخشهای افکت پارالاکس به وب سایت خود به خاطر بسپارید.

انتخاب تصاویر پس زمینه

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

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

افکت پارالاکس در تلفن همراه
در حالی که افکت پارالاکس برای افزودن علاقه بصری عالی است ، اما همیشه در دستگاه های تلفن همراه به خوبی کار نمی کند. از آنجا که تلفن ها و تبلت ها معمولاً از پیمایش تند کش استفاده می کنند (به جای پیمایش مانند دسک تاپ) ، اثرات افکت پارالاکس ممکن است به درستی ارائه نشوند. البته ، این به روش و انیمیشن هایی که برای بخش افکت پارالاکس خود استفاده می کنید بستگی دارد. اما برای کاربرد ممکن است بخواهید افکت پارالاکس را در دستگاهها غیرفعال کنید.

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

تم های دارای افکت پارالاکس انتخاب کنید

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

لغزنده های Parallax را به وسیله Slider Revolution اضافه کنید

اگر می خواهید یک نوار لغزنده برجسته با افکت پارالاکس داشته باشید ، انتخاب برتر ما افزونه Slider Revolution است. این افزونه برتر شامل صدها گزینه و ویژگی داخلی برای قلم ها ، لایه ها ، افکت های کشویی ، طرح ها و البته افکت پارالاکس است.

چگونه افکت پارالاکس افکت لغزان را فعال کنید

ابتدا افزونه را نصب کنید ، سپس یا یک الگوی کشویی را وارد کنید یا شروع به ساختن اسلایدر خود کنید.

سپس ، اسلاید Main Background را ویرایش کنید تا تصویر پس زمینه Source اضافه شود و برای تعیین سطح افکت پارالاکس ابتدا گزینه On Scroll را زده و بعد زبانه Parallax / 3D را انتخاب کنید. سپس هنگام افزودن لایه ها ، گزینه Parallax / 3D layer را برای عمق افکت پارالاکس انتخاب کنید تا حرکت به متن ، تصویر ، دکمه و سایر لایه ها اضافه شود. به همین راحتی!

پس از پایان کار ، اسلایدر خود را ذخیره کرده و از کد کوتاه برای قرار دادن آن در هر پست یا صفحه استفاده کنید. یا اگر از سازنده صفحه ای مانند WPBakery استفاده می کنید می توانید از عنصر صفحه ساز Slider Revolution برای انتخاب سریع و درج اسلایدر خود استفاده کنید.

همچنین برای یک متن نیز به همین شکل می توانید پارالاکس افکت را فعال نمایید.

با افزونه رایگان پیشرفته پس زمینه وردپرس ، بخشهای افکت پارالاکس را اضافه کنید

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

بیایید اکنون به نحوه نصب و شروع استفاده از زمینه های پیشرفته وردپرس با افکت پارالاکس نگاهی بیندازیم.

نصب AWB
برای نصب افزونه ، به عنوان ادمین وارد پیشخوان وردپرس خود شوید و از منوی افزونه ها> افزودن را انتخاب کنید.

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

با استفاده از AWB ، نحوه افزودن پس زمینه افکت پارالاکس به اینکه از ویرایشگر وردپرس استفاده می کنید بستگی دارد - گوتنبرگ ، کلاسیک یا سازنده صفحه شخص ثالث مانند WPBakery. مهم نیست که از کدام یک استفاده می کنید ، AWB گزینه های آسان زیادی را برای:

1. زمینه ، رنگ ، تصویر یا رسانه ویدیویی
2. اندازه نمایشگر رسانه (جلد ، حاوی یا الگو)
3. موقعیت رسانه پس زمینه ، با درصدهای هم ترازی پس زمینه شما (به عنوان مثال: 50٪ 50٪ به مرکز)
4. انتخابگر رنگ را روی هم قرار دهید ، با استفاده از انتخابگر آلفا رنگ شما کم و بیش شفاف شود
5. Parallax Scroll ، Scale و Opacity با سرعت و گزینه ای برای فعال کردن در تلفن همراه
6. افکت پارالاکس موش (که باعث می شود پس زمینه با توجه به حرکات ماوس کمی تغییر کند)

علاوه بر این ، همچنین خواهید دید که یک برگه AWB به منوی تنظیمات وردپرس شما اضافه شده است. اینجاست که می توانید برای غیرفعال کردن افکت های افکت پارالاکس (و فیلم ها) برای تلفن همراه و همچنین مرورگرهای خاص ، یک تنظیم کلی برای مشاهده انتخاب کنید.

AWB گوتنبرگ

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

برای شروع ، باید بلوک AWB را وارد کنید. سپس کلیک کنید تا بلوک های دیگری را برای محتوای خود در AWB اضافه کنید.

بعد از اتمام کار ، روی بلوک AWB کلیک کنید و سپس روی برگه "بلوک" در منوی سمت راست کلیک کنید. اینجاست که می توانید گزینه های پس زمینه بلوک خود را اضافه و ویرایش کنید.

ویرایشگر کلاسیک AWB

با ویرایشگر Classic ، AWB از کد کوتاه برای افزودن پس زمینه افکت پارالاکس استفاده می کند. بنابراین شما باید ابتدا محتوای خود را ایجاد کنید ، سپس بخشی را که می خواهید پس زمینه داشته باشید برجسته کنید و روی نماد AWB در ویرایشگر کلیک کنید.

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

کد کوتاه چیزی شبیه به این خواهد بود:

[nk_awb awb_type="image" awb_image="behsazanhost" awb_image_size="full" awb_image_background_size="cover" awb_image_background_position="30% 70%" awb_parallax="scroll" awb_parallax_speed="0.7"]matn inja neveshte mishavad.[/nk_awb]

ویرایشگر کلاسیک در این مورد می تواند کمی کاربر پسند باشد. از آنجا که AWB کد کوتاه است ، نمی توانید تنظیمات پس زمینه خود را از طریق ویرایشگر مشاهده کنید.

AWB با WPBakery

در آخر - زمینه های پیشرفته وردپرس نیز با سازنده صفحه WPBakery کار می کند. استفاده از آن در اینجا ساده است ، زیرا آنها یک برگه را به تنظیمات ردیف اضافه کرده اند.

فقط کافیست روی برگه "Backgrounds (AWB)" کلیک کنید تا پس زمینه افکت پارالاکس خود را در هر ردیف ایجاد و سفارشی کنید.

نتیجه گیری درباره اثرات افکت پارالاکس

اگر قالب وردپرس شما از ویژگی افکت پارالاکس داخلی برخوردار نیست ، یا اگر می خواهید افکتی بیش از صفحه اصلی خود اضافه کنید ، یک افزونه را امتحان کنید. Slider Revolution یا پس زمینه های پیشرفته وردپرس رایگان عالی هستند. در هر دو صورت شما قادر خواهید بود تا به سرعت بخشهای افکت پارالاکس را برای افزودن به صفحات یا پستهای خود ایجاد کنید.

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

امیدوارم این مقاله درباره استفاده از افکت پارالاکس در وردپرس اطلاعات کاملی در اختیار شما قرار داده باشد و بتوانید وب سایت های زیبایی طراحی نمایید.