اخبار سایت

کامل‌ترین آموزش استفاده از تصاویر پارالاکس در وردپرس


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

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

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

آنچه در این مقاله به اختصار خواهید خواند:

  • افکت پارالاکس چیست؟
  • مزایای استفاده از افکت پارالاکس در وردپرس
  • هنگام استفاده از افکت پارالاکس باید به چه مواردی دقت کنیم؟
  • انتخاب قالب­‌هایی با افکت پارالاکس
  • افزودن پارالاکس با Slider Revolution
  • افزودن پارالاکس با استفاده از افزونه

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

تصاویر پارالاکس در وردپرس چیست؟

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

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

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

هنگام استفاده از افکت پارالاکس باید به چه مواردی دقت کنیم؟

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

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

  • افکت پارالاکس در تلفن همراه

افکت پارالاکس گرچه مزایای بسیاری دارد اما همیشه در دستگاه­‌های به خوبی نمایش داده نمی­‌شود، البته به روش‌­ها و انیمیشن­‌هایی که در بخش پارالاکس به کار برده می­‌شود نیز بستگی دارد، در صورت تمایل می‌­توانید این قابلیت را در دستگاه­‌های موبایل غیرفعال کنید.

  • دسترسی به محتوا

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

انتخاب قالب­­‌هایی با افکت پارالاکس

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

افزودن پارالاکس با Slider Revolution

چنانچه قصد استفاده از پارالاکس اسلایدر را دارید توصیه می‌کنیم از پلاگین Slider Revolution استفاده کنید. این پلاگین قدرتمند شامل صدها قابلیت و ویژگی داخلی برای قلم‌ها، لایه‌ها، جلوه‌های کشویی، طرح‌ها و پارالاکس می‌باشد. برای این کار باید پس از ساختن اسلایدر خود، گزینه Parallax & 3D را از سربرگ Slider Setting فعال کنید.

  بهترین روش سفارشی‌ سازی ویرایشگر گوتنبرگ با Atomic Blocks

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

پس از فعالسازی گزینه Parallax & 3D تنظیمات را ذخیره و به سربرگ Slide Editor وارد شوید، در این صفحه مانند تصویر زیر به سربرگ Parallax/3D مراجعه و با گزینه Parallax Level به هر لایه بصورت مجزا می‌توانید یک Level نسبت بدهید. (تا ۱۰ level متفاوت می‌توانید تعریف کنید.) و Parallax Depth عمق افکت پارالاکس را مشخص می‌کند.

بخش Slide Editor در اسلایدر رولوشن

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

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

افزونه AMB برای افزودن تصاویر پارالاکس در وردپرس

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

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

تنظیمات افزونه AWB در پیشخوان وردپرس

AWB در ویرایشگر گوتنبرگ

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

AWB در ویرایشگر گوتنبرگ

سپس بر روی بلوک AWB کلیک کنید تا تنظیمات و گزینه‌های پس زمینه آن را مانند تصویر زیر در ه “بلوک” در فهرست سمت چپ مشاهده کنید.

مشاهده تصویر در بلوک سمت چپ

پس از اعمال تغییرات و بارگذاری تصویر تنظیمات را ذخیره و نتیجه را مشاهده نمایید.

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

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

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

با کلیک بر روی دکمه مربوطه صفحه زیر نمایان خواهد شد.

با تنظیم Background Type بر روی گزینه Image، گزینه‌های بیشتری قابل مشاهده خواهد شد، سپس گزینه Stretch را فعال کرده و عکس موردنظر خود را بارگذاری نمایید و رنگ و نوع پارالاکس (متداول‌ترین نوع آن اسکرول می‌باشد) را نیز مشخص کنید و سپس بر روی دکمه “گذاشتن” کلیک کنید. پس از ذخیره تغییرات یک قطعه کد کوتاه مانند کد زیر به ویرایشگر شما افزوده خواهد شد.

[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" awb_parallax_speed="0.5"] Your Content Here [/nk_awb

در قسمت Your Content Here می‌بایست محتوای مورد نظر خود را قرار دهید، سپس تنظیمات را ذخیره و نتیجه را مشاهده کنید.

AWB در ویژوال کامپوزر

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

AWB در ویژوال کامپوزر
AWB در ویژوال کامپوزر

پس از افزودن این المان صفحه جدیدی مانند تصویر زیر برای شما نمایان خواهد شد که با قرار دادن گزینه Background Type بر روی حالت Image گزینه‌های بیشتری از قبیل حالت Stretch، انتخاب تصویر، سایز و موقعیت تصویر، رنگ، نوع پارالاکس و غیره قابل مشاهده خواهد شد.

تنظیمات AWB در ویژوال کامپوزر
تنظیمات AWB در ویژوال کامپوزر

پس از اعمال تغییرات، تنظیمات را ذخیره و نتیجه را مشاهده کنید.

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

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

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

دانلود افزونه Advanced WordPress Backgrounds

دانلود افزونه Advanced WordPress Backgrounds
صفحه افزونه

منبع: wpexplorer.com

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

 
مشاوران آموزشی
همیار آکادمی
پاسخگوی شما هستند
آیا این مقاله برای شما مفید بود؟
تقریبا
خیر




با چند ترفند ساده بلاک‌های گوتنبرگ را برون‌بری و در سایت دیگر درون‌ریزی کنید!
تبدیل پست‌های ویرایشگر کلاسیک به گوتنبرگ فرآیندی است که هم بصورت دستی و هم به کمک افزونه امکان‌پذیر است.
با بروزرسانی وردپرس خود به نسخه ۵.۳ می‌توانید از امکانات و ویژگی‌های جدیدی در آن بهره‌مند شوید.





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

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

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

سیزده − 3 =

دکمه بازگشت به بالا