اصول طراحی ریسپانسیو در طراحی سایت ( کامل )

جلسه

بیست و هفتم

دوره

ندارد

زمان ویدئو

23 دقیقه

محتوای این جلسه

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

سوالی داری؟ در دیدگاه های این ویدئو میتونی سوالت رو مطرح کنی

در بخش نظرات مطرحش کن! ما به همه سوالات جواب میدیم


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

Views 0
تجربه کاربران

دیدگاه‌ها و پرسش‌ها

214 دیدگاه

دیدگاه یا پرسش خود را بنویسید

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

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

       

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

      با تشکر.

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

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

       

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

      با تشکر.

  6. نیلوفر پرزین
    z - index رو روی 999قرار دادم قبلا ولی فایده ای نداشت
    1. محمد قاسمی
      درود بر شما ، خواهشمند است از ناحیه کاربری خود اقدام به ارسال تیکت فرمایید تا سایت شما بررسی شود. باتشکر
  7. نیلوفر پرزین
    عرض ادب و احترام خدمت تیم خوب ابزار وردپرس من هدر شفاف رو داخل دسکتاپ طراحی کردم و عالی شده اما در حالت موبایل هر کار میکنم روی عکس پس زمینه فراخوانی نمیشه و پشت عکس قرار میگیره در حالی که هم روی حالت موبایل تنطیم هست هم حالت دسکتاپ و میخوام این صفحه به عنوان صفحه اصلی سایتم قرار بگیره. ممنون میشم اگه راهنمایی بفرمایید.
    1. محمد قاسمی

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

       

      در این خصوص میتوانید مقدار z-index هدر خود را روی 999 قرار داده و سپس تست کنید.

      با تشکر.

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

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

       

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

      با تشکر.

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

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

           

          برای داشتن همه ویژگی ها فعال بودن المنتور پرو توصیه می‌شود. المنتور پرو در شرایط فعلی نیز بایستی فعال شود. با چه خطایی مواجه میشوید ؟

          با تشکر.

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