طراحی ریسپانسیو(واکنشگرا) به تغییر نمایش ظاهر سایت در اندازه های مختلف مرورگر و دستگاه های متفاوت مربوط می شود. یعنی صفحات سایت در همه دستگاه های هوشمند(موبایل، لپ تاپ، تبلت و …) که کاربر از آن ها استفاده می کند نمایش مناسب و صحیحی داشته باشد.
طراحی ریسپانسیو صفحه ساز
در ابتدا باید بگوییم، در صفحه ساز ویژوال کامپوزر، تغییرات ریسپانسیو فقط روی ستون های موجود در ردیف وجود دارد. بنابراین برای مشاهده امکانات ریسپانسیو صفحه ساز روی آیکون (مداد) روی ستون کلیک کنید.
در ادامه تعدادی از تغییرات که در دستگاه های مختلف نمایش در طراحی واکنشگرای سایت کاربرد دارند، توضیح می دهیم.
پنهان کردن المان ها در طراحی ریسپاسیو
برای عدم نمایش بعضی المان ها در دستگاه های مختلف (مثلاً پنهان کردن المان تصویر در حالت موبایل ) ، ستون مربوط به المان را در حالت ویرایش باز کنید . در صفحه “ستون تنظیمات”، سربرگ “تنظیمات ریسپانسیو”، گزینه پنهان کردن در دستگاه های همراه را برای دستگاه موردنظرتان انتخاب کنید.
پس از ذخیره تغییرات، درصورتیکه سایت را در دستگاه موردنظر(برای مثال موبایل) مشاهده کنید، المانی که در طراحی ریسپانسیو پنهان کرده اید نمایش داده نخواهد شد.
ستون بندی در طراحی ریسپانسیو
همان طور که میدانید عناصر سایت در دستگاه هایی با اندازه کوچکتر از معمول، به صورت عمودی و پشت سر هم نمایش داده میشوند. حال برای قرار دادن المان ها در ستون های کنار هم، در صفحه “ستون تنظیمات”، سربرگ “تنظیمات ریسپانسیو”، عرض ستون را در دستگاه موردنظر تغییر دهید.
برای مثال، اگر بخواهید المان ها در دستگاه موبایل در دو ستون کنار هم نمایش داده شوند، برای هر یک از ستون ها در صفحه ستون تنظیمات، عرض ستون را برای نمایش در دستگاه موبایل روی ½ قرار دهید.
نمایش ردیف های متفاوت در طراحی ریسپانسیو
یکی دیگر از طراحی های کاربردی ریسپانسیو، متفاوت بودن نمایش ردیف در دستگاه های مختلف میباشد. برای تنظیم این مورد، در صفحه ساز ویژوال کامپوزر دو ردیف طراحی کرده و ستون های ردیف را در دستگاه های متفاوت پنهان کنید. ( ستون های یک ردیف را برای یکی دستگاه و ستون های ردیف دیگر را در دستگاه دیگر پنهان نمایید). با این کار هر دستگاه ردیف مخصوص خود را نمایش می دهد.
53 دیدگاه. Leave new
سلام خسته نباشین حالتی که 1/2 که داخل فیلم گفتین مخصوص همین قالب یا صفحه ساز هست داخل المنتور همچین گزینه داره ؟؟؟من پیدا نکردم که بخوام مثلا داخل دکستاپ یک مدل باشه داخل گوشی بخوام ستون رو تغییر بدم مثل فیلم 1/2 بکنم
سلام وقت شما بخیر،
این مورد مربوط به صفحه ساز ویژوال کامپوزر است و در هر قالبی این صفحه ساز تنظیمات ذکر شده را ارایه میکند.
با تشکر.
سلام من ریسپانسیو رو فعال کردم حالا تو قسمت برگه ها که میام کامپوزر رو نشون نمیده و برام غیر فعاله چطوری درستش کنم
سلام بر شما ، وقت بخیر از حضور شما ممنونیم.
عدم نمایش ویژوال کامپوسر در نوشته ها را مشاهده نمایید.
آرزوی موفقیت برای شما داریم.
سلام خسته نباشید
گزینه ریسپانسیو فعال نیست
وقتی پوسته زفایر آپدیت کردم این اتفاق افتاد
گزینه layout via css هم غیر فعال است
ضمن عرض سلام و وقت بخیر به شما کاربر گرامی ،
احتراماً برای فعال سازی حالت ریسپانسیو در ستون ها باید این گزینه را در قالب غیر فعال نمایید > https://screen.center/s/4Gjak
با آرزوی موفقیت برای شما
با سلام من هم همین مشکل رو دارم ولی رو لینک میزنم میزنه screenshotnot found ممنون میشم کمکم کنید.با تشکر.
سلام و عرض ادب
از این تصویر استفاده نمایید.
با تشکر.
با سلامی دوباره ممنون بابت پاسخگویی سریع شما من این گزینه رو خاموش کردم اما باز هم فعال نشد ممنون از شما.
وقت شما بخیر
با پشتیبانی قالب خود در ارتباط باشید.
سلام وقتتون بخیر میخواستم بدونم که سایز معمول برای موبایل چند در چند هستش؟ چون من سایتی که طراحی کردم روی ی سری گوشی ها کامل نشون داده میشه ولی روی ی سری گوشی های دیگه قسمتی از اطراف سایتم دیده نمیشه. ممنون میشم راهنمایی کنید.
با سلام و احترام ، از اینکه با تیم پشتیبانی ابزار وردپرس تماس گرفته اید از شما متشکریم.
احتراماً قالب ها بصورت پیشفرض ریسپانسیو هستند. یعنی همین که شما بصورت عادی طراحی خود را انجام دهید، قالب ها ریسپانسیو بر روی دستگاه های مختلف هستند . در زیر دو آموزش هم برای شما ارسال می کنم که ممکن است برای شما مناسب باشد.
آموزش طراحی ریسپانسیو صفحه ساز
آموزش طراحی ریسپانسیو صفحه ساز 2
باتشکر از حضور شما کاربر محترم
با سلام و خسته نباشید خدمت تیم ابزار ورد پرس
وقتی صفحه نمایشگر رو از حالت ماکسیمایز خارج میکنم و صفحه ام کوچک تر میشه نوشته ها رو همدیگه میوفتن چطور این مشکل رو حل کنم؟ تنظیمات ریسپانسیوم درسته و تو گوشی درست نمایش میده.
با تشکر
سلام بر شما،
بهتر است این مورد را در تیکت مطرح نمایید تا سایت شما هم بررسی شود و مشکل و تنظیمات اشتباه و یا هر مورد دیگری بوده است را متوجه شده و حل نماییم.
البته به شما پیشنهاد می کنم دستورات آموزش های زیر را هم نادیده نگیرید.
آموزش طراحی ریسپانسیو صفحه ساز
آموزش طراحی ریسپانسیو صفحه ساز 2
باتشکر از حضور شما کاربر محترم
سلام
شما تو این قسمت که اومدی دوتا ردیف گذاشتی (یکی برا موبایل و یکی برا دستکاپ) و اون ردیف پاینی که برای موبایل هتسو توی حالت دستکاپ مخفی کردی, جاش مونده تو حالت دستکاپ و یه فضای خالی زیادی مونده:
https://s6.uupload.ir/files/ww_jd72.jpg
سلام و عرض ادب،
ویدئو برای آموزش است و امکان دارد که این فضارا نیز با تنظیمات و یا دادن مارجین منفی به یکی از المان ها حل کرد. اصل موضوع برای آموزش شما بوده است.
با تشکر از حضور شما.
سلام خسته نباشید
تو ریسپانسیو موبایل 4تا آیکون باکس کنار هم قرار میدم نوشته ها میاد زیر هم
چکاری باید انجام بدم
سلام وقت شما بخیر،
بنظر می رسد آموزش های زیر برای شما مناسب باشد. آنها را مشاهده نمایید.
دریافت ویدیو از سرور 1:
5aa.ir/9nCwZ
دریافت ویدیو از سرور 2:
5aa.ir/sc3fi
با نوشته باشه
4تا ستون با آیکون عکس و نوشته
سلام بر شما،
ویدئو ارسالی + کمی خلاقیت و تلاش این مورد را ممکن می کند.
روش های طراحی بسیار زیاد است که با در نظر گرفتن خلاقیت ، می توانید بسیار زیبا طراحی نمایید.
سلام خسته نباشید
ببخشید گزینه ریسپانسیو رو چطور باید باید تو ویرایش ستون ها فعال کنم؟
ضمن عرض سلام و وقت بخیر به شما کاربر گرامی ،
احتراماً برای فعال سازی حالت ریسپانسیو در ستون ها باید این گزینه را در قالب غیر فعال نمایید > https://screen.center/s/4Gjak
با آرزوی موفقیت برای شما
تشکر از شما
سلام
چرا از من قسمت ریسپانسیو نداره؟
ضمن عرض سلام و وقت بخیر به شما کاربر گرامی ،
احتراماً برای فعال سازی حالت ریسپانسیو در ستون ها باید این گزینه را در قالب غیر فعال نمایید.
شما می توانید برای دریافت سریع تر پاسخ سوالات خود، تیکت ارسال نمایید.
با آرزوی موفقیت برای شما
سلام و عرض احترام
ببخشید چرا سایتی که در حال طراحی بودم طبق آموزش شما، از دسترس خارج شده و نمی تونم وارد بشم میگه دسترسی به این سایت امکان پذیر نمی باشد
سلام و احترام خانم عجمی اول
در صورتی که از نت افراز استفاده می کنید به دلیل تعییراتی که در حال اعمال کردن هستند سایت ها برای مدت کوتاهی در دسترس نیستتند.
با تشکر
سلام من تازه قالب زفایر و خریدم اما تنظیمات نصبت اندازه داخل تنظیمات ستون نیست اگه میشه راهنمایی کنید ممنون
سلام و احترام
در قسمت زفایر > تنظیمات پوسته > تنظیمات پیشرفته، گزینه columns layout via css grid را غیر فعال کنید.
با تشکر
سلام وقت بخیر
من ویزوال کامپوزر و زفایر نصب کردم ولی منوی ریسپانسیو در گزینه های تنظیمات ویژوال کامپوسر نمایش داده نمیشه. مشکل از کجاست؟
سلام و احترام
در قسمت زفایر > تنظیمات پوسته > تنظیمات پیشرفته، گزینه columns layout via css grid را غیر فعال کنید.
با تشکر
سلام و احترام
میخواستم بدونم آیا این امکان وجود داره که من بعضی از المان های سایتم رو برای تلفن همراه غیرفعال بکنم؟
یعنی المان هام توی دسکتاپ وجود داشته باشند ولی توی تلفن همراه نمایش داده نشه؟؟؟
اگه ممکنه چطور باید این کار رو انجام بدیم؟
ممنون از سایت خوبتون
سلام آقای امینی بزرگوار
در تیکت به شما پاسخ دادیم.
با تشکر
سلام وقت بخیر
توی تنظیمات ستون ، تنظیمات ریسپانسیو نشان داده نمیشود . چطوری این مشکل رو حل کنم؟
یک نفر این مشکل رو پرسیده بود و شما با لینک راهنمایی کردین ولی لینک کار نمیکنه الان .
سلام و احترام
در قسمت زفایر > تنظیمات پوسته > تنظیمات پیشرفته، گزینه columns layout via css grid را غیر فعال کنید.
با تشکر
خیلی ممنون
سلام وقت بخیر
ببخشید پس چرا تو تنظیمات ستون من فقط عمومی و طراحی رو میاره و تنظیمات ریسپانسیو رو نمیاره؟..
و فقط تو قسمت طراحی پایین تر چنتا گذینه هست که با انتخابشون فقط میشه برگه رو تو حالت های مختلف نشون نداد و اصلا نمیشه که تعداد ستون ها رو کنار هم تنظیم کرد.؟
سلام آقای خدابنده لو عزیز
در این قسمت گزینه مشخص شده را غیر فعال کنید.
با تشکر
سلام خسته نباشید
من از ردیف اول که مال دسکتاپ بود کپی گرفتم و از طریق ستون ها تنظیمات ریسپانسیو رو اعمال کردم
ردیف اول نسخه موبایل رو خاموش کردم که فقط برای دسکتاپ نشون بده
ردیف دوم نسخه دسکتاپ رو خاموش کردم که فقط برای موبایل نشون بده
در نهایت دو تا ردیف رو برای دسکتاپ و موبایل نشون میده
مشکل از کجاست ؟
سلام آقای فیضی عزیز ، از شما خواهشمندیم سوالات پس از خرید را ( در رابطه با محصول خریداری شده از سایت ما ) در بخش تیکت پشتیبانی ( ناحیه کاربری ) ارسال فرمایید ، سوالات شما به سرعت توسط همکاران متخصص ما پاسخ داده خواهد شد.
سلام و احترام
بسیار سپاسگزارم بابت اموزش های عالی شما .
من تو گوگل سرچ میزدم ریسپاسیو کردن صفحات سایت وردپرسی و ..چیزای مشابه این سایت شما بالا نیومد . اگرچه اموزش ویدیویی در این رابطه فقط یکی یا دوتا بیشتر نیست .
باز هم ممنونم از زحمات شما
با سلام و احترام،
متوجه اشکال یا سوال شما نشدم، هر موردی است بفرمایید تا راهنمایی کنیم.
با تشکر از حضور شما.
سوالی ندارم .فقط خواستم بگم که برای جمله ریسپانسیو صفحه وردپرس سایت شما سئو نشده که اگر برا این جمله سئو بشه تعداد بازدید از سایت شما خیلی بیشتر میشه .
ارادتمندم
سلام وقت شما بخیر،من برای کل فهرستم ایکون قرار دادم در دسکتاپ نمایش داده میشن ولی در موبایل ایکون ها نیستن در تنظیمات سفارشی سازی هم رفتم گزینه ای براش نبود،راهی هست بتونم تنظیمش کنم؟قالبم جی نیوز هست.
سلام و احترام خدمت شما کاربر ارجمند ، از شما خواهشمندیم سوالات پس از خرید را ( در رابطه با محصول خریداری شده از سایت ما ) در بخش تیکت پشتیبانی ( ناحیه کاربری ) ارسال فرمایید ، سوالات شما به سرعت توسط همکاران متخصص ما پاسخ داده خواهد شد.
وقت شما بخیر پشتیبان محترم،
پشتیبانی شما قبل و بعد از خرید خیلی عالی و کاربردی هست و همکاران با صبوری فراوان پاسخ میدهند ولی در رابطه با این مشکلم متاسفانه نتوانستم پاسخی دریافت کنم واین موضوع را به هر شکلی در گوگل سرچ میکنم به جواب نمیرسم.اگر مقدوره لطفا راهنمایی بفرمایین
سلام خانم احمدی عزیز ، با این ایمیلی که دیدگاه ارسال نموده اید ، تیکتی ارسال نشده است. لطفاً شماره تیکتتان را بفرمایید تا بررسی نمایم.
سلام وقت شما بخیر پشتیبان مهربان،به دلیل ایجاد مشکلی در سایتم با کمک و راهنمایی همکاران شما سایتم را حذف و مجدد شروع ب طراحی کردم و همکار شما گفتن در همان تیکتی که در رابطه با مشکل سایت صحبت شده مجددا مشکلات مربوط به بعد از نصب را در میان بگذارم.دلیل نبودن تیکت با این موضوع همین هست.بفرمایین شماره تیکت:۱۹۴۷۶۲۵ با موضوع حالت شب،
خیلی متشکرم از پشتیبانی عالی و صبوری همه ی مهربان های ابزار وردپرس❤
تیکت شما پیگیری شد. به زودی پاسخ جدیدی از سمت کارشناس مربوطه دریافت خواهید کرد.
با سلام
چرا در تنظیمات ریسپانسو با اینکه من افست را برای تنها موبایل تغییر داده م در حالت دسکتاپ هم تغییر میکند ؟
سلام چرا لینک دانلود نداره؟ چطور باید دانلود کرد؟؟؟
سلام ، با توجه به حقوق کپی رایت ویدئو ها فقط بصورت آنلاین قابل مشاهده می باشند. باتشکر
ممنونم بهترین استاد