اثر اختلاف منظر چیست؟ نحوه استفاده از آن برای وردپرس

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

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

اثر اختلاف منظر چیست؟

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

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

مزایای استفاده از اثر اختلاف منظر چیست؟

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

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

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

ملاحظات هنگام استفاده از Parallax

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

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

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

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

Parallax در موبایل

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

پارالکس و دسترسی

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

یک تم با جلوه اختلاف منظر انتخاب کنید

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

موضوعاتی مانند Divi from Elegant Themes، Parallax توسط Themify، و تم چند منظوره وردپرس کل، همه شامل سازندگان صفحه هستند که ابزارهای جلوه منظر ارائه می دهند.

پس زمینه های Parallax را با Total اضافه کنید

برای اینکه به شما ایده بدهیم که چگونه اختلاف منظر می‌تواند با تم‌ها کار کند، در زیر راهنمای نحوه افزودن پس‌زمینه اختلاف منظر به یک ردیف با تم Total آورده شده است. Total از WPBakery برای ساخت صفحه‌های ظاهری استفاده می‌کند، اما بسیاری دیگر از صفحه‌سازهای WordPress گزینه‌های مشابهی دارند.

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

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

Total همچنین یک گزینه اختلاف منظر پیشرفته با تنظیمات بیشتر برای فعال/غیرفعال کردن جلوه در تلفن همراه، انتخاب سبک تصویر (پوشش، ثابت یا تکرار)، تعیین جهت افکت و البته سرعت ارائه می‌دهد.

همچنین می‌توانید از تنظیمات Overlay یک برگه استفاده کنید تا مطمئن شوید که کنتراست کافی بین پس‌زمینه ردیف و محتوا دارید (ما یک پوشش سفید به تصویر خود اضافه کردیم). پس از اتمام کار، مطمئن شوید که تغییرات ردیف خود و همچنین صفحه خود را ذخیره کرده اید.

افزودن لغزنده Parallax با Slider Revolution

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

Slider Revolution Parallax را فعال کنید

ابتدا افزونه را نصب کنید، سپس یک الگوی اسلایدر را وارد کنید یا از ابتدا شروع به ساختن نوار لغزنده خود کنید (می‌توانید راهنمای Slider Revolution برای جزئیات بیشتر).

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

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

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

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

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

نصب AWB

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

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

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

• پس‌زمینه رسانه رنگ، تصویر یا ویدیو
• اندازه نمایش رسانه (جلد، حاوی یا الگو)
• موقعیت رسانه پس‌زمینه، با درصدهایی برای تراز کردن پس‌زمینه شما (به عنوان مثال: 50% 50% در مرکز)
• انتخاب کننده رنگ روکش، با استفاده از انتخابگر آلفا برای شفاف‌تر کردن رنگ شما
• Parallax Scroll، Scale و Opacity با سرعت و گزینه برای فعال کردن در تلفن همراه
• اختلاف منظر ماوس (که باعث می‌شود پس‌زمینه کمی مطابق با حرکات ماوس روی آن جابه‌جا شود)

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

AWB گوتنبرگ

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

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

وقتی کارتان تمام شد، روی بلوک AWB کلیک کنید و سپس روی برگه «Block» در منوی سمت راست کلیک کنید. اینجاست که می‌توانید گزینه‌های پس‌زمینه بلوک خود را اضافه و ویرایش کنید.

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

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

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

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

[nk_awb awb_type="image" awb_image="1234" awb_image_size="full" awb_image_background_size="cover" awb_image_background_position="50% 50%" awb_parallax="scroll" awbpe_paralla. پس زمینه اختلاف منظر شما می رود.[/nk_awb]

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

AWB با WPBakery

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

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

نظرات نهایی در مورد اثرات اختلاف منظر

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

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

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