ساخت پارالکس با المنتور

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

مراحل ساخت پارالکس با المنتور

1. نصب و فعال‌سازی المنتور

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

دانلود المنتور

2. ایجاد یک صفحه جدید یا ویرایش صفحه موجود

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

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

3. افزودن یک سکشن (Section) به صفحه

برای شروع، یک سکشن جدید به صفحه اضافه کنید.

• روی دکمه “+” کلیک کنید تا یک سکشن جدید اضافه کنید.
• می‌توانید تعداد ستون‌های مورد نیاز خود را انتخاب کنید، اما برای افکت پارالکس معمولاً یک سکشن تک‌ستونه کافی است.

4. تنظیم پس‌زمینه سکشن برای پارالکس

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

• روی آیکون “ویرایش سکشن” (Edit Section) کلیک کنید.
• به بخش “استایل” (Style) بروید.
• در قسمت “پس‌زمینه” (Background)، نوع پس‌زمینه را روی “کلاسیک” (Classic) تنظیم کنید.
• یک تصویر را از کتابخانه رسانه‌ای انتخاب کنید یا تصویر جدیدی آپلود کنید.

5. فعالسازی افکت پارالکس

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

• در همان بخش “استایل”، به بخش “ضمیمه” (Attachment) بروید.
• حالت “پیوست پس‌زمینه” را روی “ثابت” (Fixed) تنظیم کنید. این باعث می‌شود که تصویر هنگام اسکرول صفحه ثابت بماند و افکت پارالکس ایجاد شود.
• اگر می‌خواهید افکت پارالکس پیشرفته‌تری داشته باشید، به بخش “حرکت پس‌زمینه” (Background Motion) یا “جلوه‌ها” (Effects) بروید (این ویژگی ممکن است فقط در نسخه Pro موجود باشد) و تنظیمات پارالکس را از آنجا پیکربندی کنید.

6. تنظیمات پیشرفته (اختیاری)

می‌توانید با استفاده از گزینه‌های پیشرفته المنتور، پارالکس را سفارشی‌تر کنید. به عنوان مثال:

• افکت‌های حرکتی: در بخش “پیشرفته” (Advanced)، می‌توانید افکت‌های حرکتی بیشتری مانند “Scroll Effects” اضافه کنید.
• اضافه کردن محتوای روی سکشن: می‌توانید روی سکشن خود متن، دکمه یا هر نوع محتوای دیگری قرار دهید. این محتوا نیز می‌تواند با پارالکس هماهنگ شود.

7. پیش‌نمایش و انتشار

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

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

هر آنچه باید در ساخت پارالکس با المنتور بدانیم

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

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

1. آیا برای استفاده از افکت پارالکس در المنتور نیاز به نسخه Pro دارم؟

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

2. آیا استفاده از افکت پارالکس باعث کند شدن وب‌سایت می‌شود؟

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

3. آیا افکت پارالکس روی دستگاه‌های موبایل نیز کار می‌کند؟

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

4. چگونه می‌توانم تصاویر پس‌زمینه مناسب برای پارالکس انتخاب کنم؟

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

5. آیا می‌توان چندین افکت پارالکس در یک صفحه استفاده کرد؟

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