جلسه ۱۷

ریسپانسیو در المنتور ( واکنشگرا)

مسعود قربان خانی

مدرس : مسعود قربان خانی

فایل های ضروری و مورد نیاز

پخش ویدیو

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

تخفیف ویژه دانشجویان دوره رایگان المنتور

علاوه بر تخفیف همیشگی المنتور پرو 20% بیشتر تخفیف بگیرید

کد تخفیف : off-elementor

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

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

 

سوالات و مشکلات شما در این جلسه

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

82 پاسخ

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

    1. سلام در واکنش گرا این یک چیز طبیعی هستش و شما میتوانید نقاط بیشتری ایجاد کنید و مدیریت کنید کافیه وارد تنظیمات نقاط شکست شوید .

  2. سلام ممنونم از اموزش خوبتون ولی من وقتی میزارمش روی موبایل بعد که با موبایل وارد سایتم میشم سایت کل صفحه رو نمیگیره نصفه صفحه سفیده نصفه بعدش سایت لود میشه باید چیکار کنم؟

  3. باسلام و خسته نباشید
    یه سوال داشتم شما تو این صفحه تون یه بخش ارسال تیکت گذاشتین یا اون زنگوله که تو کل صفحه ثابته میشه بگین با چه افزونه اون رو درست کردین؟

  4. سلام وقتتون بخیر چندتا سوال داشتم
    1.طراحی صفحات من جوریه کار با تغییر همون طرح برای تبلت و موبایل جمع نمیشه و باید جدا طراحی بشن و من این کارو کردم، او هر صفحه حالت دسکتاپ و موبایل رو طراحی کردم و با واکنشگرا ست کردم که کجا نمایش داده بشن ولی یه سئو کار بهم گفت کار اشتباهیه( چک کردم گوگل هم مثلا میاد هدینگ های هر دو بخش رو میخونه و تشخیص میده) و باید با قالب جدا طراحیشون کنم( فک کنم منظورش بهش قالب تو المنتوره ولی نمیدونم چطوری)

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

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

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

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

  6. سلام
    من هم در قسمت ریسپانسیو موبایل تغییر میدم در قسمت دسکتاپ و تبلت هم تغییر میکنه . این درحالتی است که موردی که میخوام تغییر بدم کنارش آیکن موبایل و تبلت و دسکتاپ داره آیکن موبایل انتخاب می‌کنم اما بازهم تو دسکتاپ تغییر میکنه .

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

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

    1. سلام باید از قسمت پیشخوان > المنتور > ابزار ها بازسازی css را بزنید و مجدد کش را پاک کنید و چک نمایید .

  8. سلام خیلی ممنون بابت آموزش کاملتون فقط یه سوال من تو موبایل نمیتونم تصویر پاراکس یا همون پشت زمینه ثابت رو تو موبایل ریسپانسیو کنم تو المنتور راهش رو میفرمایید؟

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

    1. سلام وقت بخیر
      اگر همه چی اوکی باشه و تداخل نداشته باشید در قسمت ابزار ها بازسازی css را بزنید شاید مشکل css باشه و تست کنید

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

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

      1. سلام استاد من وقتی برای موبایل ریسمانسیو میکنم دکستاپ هم بهم میریزه و متصله اینو چیکار کنم اینطوری نشه؟

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

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

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

      1. سلام. ادامه کامنت ریسپانسیو/
        من ریسپانسیو در موبایل گفتم خدممتون.
        تو تبلت و دسکتاپ مشکل ندارم.
        ریپانسیو تو الممنتور چک میکنم تنظیمات موبایلش اوکی و لی با گوشی که چک میکنم اوکی اولش و لی بعد از چند بار جستجو دوباره بهم میریزه.تو المتور هم بهم میریزه.
        پاسخ شما گفتید مرورگر عوض کنم ولی تو چندتا گوشی امتحان کردم به این شکل بود.
        ممکنه برای نسخه المتور باشه؟

        1. سلام پس مشکل از سمت css شماست در پیشخوان > المنتور > ابزار ها لطفا بازسازی css را بزنید و چک نمایید .

          1. سلام
            میشود برای حالت تلویزیون های هوشمند و دستگاه های بزرگتر از کامپیوتر حالت واکنش گرا کرد؟

  12. من می خواهم در وردپرس یک هدر در المنتور طراحی کنم
    در یک ردیف ۵ ستون ایجاد کرده ام.
    ستون اول:لوگو،
    ستون دوم:فهرست،
    ستون سوم:آیکون جستجو،
    ستون چهارم:دکمه حساب کاربری،
    ستون پنجم:سبد خرید،

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

    1. سلام برای این کار باید ستون اول و دوم را در یک ستون قرار دهید به این صورت که به جای 5 ستون 4 ستون بسازی در ستون اول یک بخش 2 ستونه ایجاد کنید تا در حالت موبایل و تبلت در قسمت واکنش گرا بتوانید بخشی که ایجاد کردید را معکوس کنید .

  13. سلام
    چطوری باید ستون‌ها زیر هم قرار بگیرن نه کنار هم؟
    داخل ریسپانسیو المنتور خوبه ولی توی گوشی کنار همن و به هم ریخته می‌شن.

    1. سلام وقت بخیر
      اگر از بخش داخلی استفاده میکنید باید در حالت دسکتاپ 2 بخش داخلی در ستون قرار دهید . در حالت موبایل هم بخواهید باید به ستون آن درصد 50 را بدهید .
      اگر انجام دادید به هم ریخت احتمالا مشکل از فایل های css شماست باید در پیشخوان – المنتور – ابزار ها وارد شوید و روی بازسازی css کلیک کنید و چک کنید .

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

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

  15. سلام و عرض ادب

    حالت واکنشگرا یا همون ریسپانسیو المنتور، چرا همش باهم لینکه ؟
    من تو قسمت ریسپانس موبایل تغییرات میدم تو قسمتای تبلت و دسکتاپ تغییر میکنه، مگه نباید هرکدوم تغییراته مجزایی داشته باشه ؟؟

    1. سلام
      دقت کنید موردی که شما تغییر می دهید باید کنارش آیکون دسکتاپ و موبایل و تبلت باشد و قالب انتخاب باشد تا آن فیلد در قسمت های مختلف مستقل عمل کنند و اگر ندارد در هر 3 یکسان می باشد .
      مثال : کنار رنگ این آیکون وجود ندارد اما کنار تایپوگرافی قرار دارد پس تایپوگرافی تغییر می کند اما رنگ در هر 3 یکسان است .

  16. با سلام
    من در قسمت فوتر درسیستم خودم تمام حالت های واکنشگرا برای کامپیوتر و موبایل و تبلت تنظیم کردم و بدرستی کار میکنن. اما هنگامی که با موبایل یا تبلت به سایت مراجعه میکنم تنظیمات کاملا ب هم ریخته هستند چکار میشه کرد مشکل کجاست؟

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

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

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

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

  19. سلام روز بخیر
    من هدر سایت رو برای حالتهای مختلف تنظیم کردم ولی برای لپ تاپ های با طول 1440 هدر به صورت نا مرتب نمایش داده میشه. من نقطه شکست لپ تاپ هم روی 1440 تنظیم کردم اما باز هم حالت ریسپانسیو نداره. ممکنه راهنمایی کنید چطور میتونم این مشکل رو حل کنم؟

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

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

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

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

  22. سلام استاد وقت شما بخییر من دارم با قالب جوپیتر ایکس یک سایت درست میکنم در حالت موبایل به موشکل خوردم و رسپانسیو نمیشه هرچقدر تنظیماتی رو انجام میدم راه حلی وجود داره بابت این موضوع؟

  23. سلام وقتتون بخیر
    من وقتی تنظیمات واکنشگر را برای حالت موبایل تغییر میدم تو حالت دسکتاپ و تبلت و… هم تغییر میکنه میشه بهم بگید مشکل از کجا هست😢؟؟

    1. سلام
      مشکل اینه که اون ویجت قابلیت تغییر در حالت هاب مختلف را ندارد اگر داشته باشد کنارش آیکون موبایل و تبلت و دسکتاپ نمایش داده می‌شود

  24. سلام استاد
    من وقتی میخوام عرض ستون هارو تقسیم کنم مثل ویدیو مثلا 80 و 20 اصلا برای گزینه عرض ستون توی المنتور نیست و مشکل دیگم اینه که ستون ها کنار هم قرار نمیگیرن توی حالت موبایل

    1. سلام وقت بخیر
      برای این منظور روی هر ستون کلیک کنید و تب طرح بندی عرض ستون را به دلخواه تغییر بدید و در حالت موبایل نیز به همین صورت تغییر بدید

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

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

      1. سلام
        من هم در قسمت ریسپانسیو موبایل تغییر میدم در قسمت دسکتاپ و تبلت هم تغییر میکنه . این درحالتی است که موردی که میخوام تغییر بدم کنارش آیکن موبایل و تبلت و دسکتاپ داره آیکن موبایل انتخاب می‌کنم اما بازهم تو دسکتاپ تغییر میکنه .

  26. سلام وقت شما بخیر

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

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

      1. سلام مجدد خدمت شما جناب مهندس

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

        1. سلام مجدد
          پس سایت شما کلا مشکل دارد باید بررسی شود
          با قالب وودمارت هیچ تداخلی ندارد و همچین باگی اصلا نداریم .

  27. سلام و عرض ادب
    من مشکلی دارم که داغونم کرده…
    در حالت موبایل وقتی روی منوی همبرگری کلیک میکنم منو باز نمیشه اما توی دسکتاپ منو کار میکنه
    دلیلش چیه؟؟؟؟ باید چه کار انجام بدم؟؟
    ممنون میشم راهنمایی کنید

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

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

    1. سلام درود برشما
      مشکل شما کش مرورگرتون هستش یا با یک مرورگر دیگه لاگین و تست کنید و یا کش مرورگر را پاک کنید
      موفق باشید

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

    1. سلام درود بر شما
      مشکلی که شما دارید بعضی مواقع در المنتور پیش میاد که با ریلود کردن ویرایشکر همان صفحه حل می شود در صورت عدم حل شدن این موضوع باید یک سکشن و ستون های جدید برای آن قسمت ایجاد کنید .
      موفق باشید

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آپدیت های جدید محصولات

جدیدترین محصولات آپدیت شده