طراحی واکنشگرا یا ریسپانسیو(Responsive) یعنی ظاهر صفحات سایت در دستگاه های مختلف(مانند لپتاپ، تبلت، موبایل) که کاربر با آن ها از سایت بازدید میکند مناسب باشد.
با توجه به گسترش استفاده از موبایل، امروزه بیشتر کاربران، سایت های اینترنتی را با موبایل مشاهده میکنند و نمایش صحیح سایت در موبایل برای تجربه کاربری و در ادامه موفقیت وبسایت تاثیر زیادی دارد.
طراحی واکنشگرا در سئو سایت نیز از اهمیت بالایی برخوردار است. یکی از فاکتورهای گوگل برای رتبه بندی سایتها، طراحی واکنشگرا بوده و ارزشی که سایت ها برای راحتی کاربران خود قائل میشوند.
برای مشاهده صفحات سایت در حالت موبایل، با کلیک راست روی صفحه مرورگر و انتخاب گزینه Inspect، امکاناتی مانند مشاهده کدهای html،css، حالت موبایل و … در اختیار شما قرار داده خواهد شد. برای دیدن سایت در حالت موبایل روی آیکون موبایل کلیک نمایید. همچنین با تغییر اندازه های صفحه نمایش، امکان مشاهده سایت با اندازه های مختلف، متناسب با نوع دستگاه تلفن همراه و تبلت نیز وجود دارد.
با توجه به اندازه صفحه نمایش موبایل، فهرست سایت ها معمولاً به صورت منو همبرگری نمایش داده میشود و با کلیک روی دکمه سه خطی در حالت موبایل منو باز شده و با کلیک علامت ضربدر منو بسته می شود.
طراحی هدر واکنشگرا
برای طراحی ریسپانسیو هدر، در پیشخوان وردپرس، زیرگروه زفایر> هدرهای سایت را انتخاب کرده و هدر سایت را در حالت ویرایش باز کنید.
طراحی هدر در قالب زفایر در 3 حالت پیشفرض، تبلت و موبایل امکانپذیر است. شما میتوانید هدر سایتتان را برای این سه حالت تنظیم کنید.
مکان قرارگیری المان ها با دراگ و دراپ کردن در یک حالت تغییر میکند و تأثیری روی نمایش المان ها در حالت های دیگر ندارد. توجه داشته باشید حذف المان در یک حالت، باعث حذف آن المان در حالت های دیگر نیز خواهد شد. این قابلیت هنوز در قالب زفایر وجود ندارد. در صورت نیاز به حذف یک المان مثلاً در حالت موبایل میبایست از کدهایcss استفاده کنید.
هدری که در آموزش های قبل برای سایتتان ایجاد کردید را به یاد دارید؟ میخواهیم این هدر را برای نمایش درست در حالت موبایل تنظیم کنیم. در صورتی که از سایتتان Inspect گرفته و در اندازه موبایل سایت را مشاهده کنید خواهید دید نوار بالا که شامل شماره تلفن، ایمیل و شبکه های اجتماعی بود نمایش داده نمی شود.
برای فعال کردن نوار بالا ، هدر سایتتان را برای ویرایش باز کرده و بر روی حالت موبایل کلیک و دکمه نمایش ناحیه را روشن کنید.
گفتیم برای حذف المان ها باید از css استفاده کنید. برای المان مورد نظر یک کلاس تعریف کنید. به طور مثال برای حذف المان ایمیل روی این المان کلیک کرده و ویرایش المان را انتخاب کنید. در تب طراحی یک کلاس برای این المان در نظر بگیرید و تغییرات را ذخیره کنید. ما در اینجا به این المان کلاسی به نام header_none1 اختصاص می دهیم.
کد css
حال باید کد css مورد نظر را بنویسیم. برای این کار مسیر زفایر > تنظیمات پوسته > کد دلخواه را طی کنید.
با استفاده از @media، میتوان به المان ها، در هر سایز از صفحه مرورگر استایل های مختلف اعمال نمود. در مثال ما برای عدم نمایش المانی با کلاس header_none1 در حالت موبایل با حداکثر اندازه آن 600 پیکسل، از کد زیر استفاده کنید.
@media (max-width:600px){
.header_none1{
display:none !important;
}}
پس از اعمال تغییرات، ظاهر هدر سایت در حالت موبایل به این شکل است. منوها با ظاهری مناسب و ب هدرستی نشان داده میشوند.
190 دیدگاه. Leave new
سلام وقتتون بخیر. من میخواسم هدری که قبلا ساختم رو توی صفحات جدیدی که ساختم نمایش بدم. ممکنه راهنمایی کنین
سلام وقت شما بخیر،
در این خصوص کافیست شرط هدر را روی برگه مربوطه تنظیم نمایید.
با تشکر.
خیلی ممنونم
پیروز باشید
سلام وقت بخیر
لینک این دوره رو بفرستید
ممنون
سلام وقت شما بخیر،
در این خصوص پیشنهاد می کنم از آپدیت جدید دوره دیدن فرمایید.
آموزش طراحی سایت صفر تا صد بصورت کامل و پروژه محور (رایگان و ویدئویی)
با تشکر.
سلام . چرا در رسپانسیو موبایل گوشه صفحه موبایل سفید و خالی می مونه ؟؟
سلام وقت شما بخیر،
منظورتان را بصورت کامل متوجه نشدم ، خواهشمند است تصویری از مورد ارسال فرمایید.
با تشکر.
سلام وقت بخیر
من قالبم زفایره و صفحه سازم ویژوال هستش. میخوام کلا هدرم فقط در موبایل نمایش داده بشه و در هیچ حالت دیگه ایی نمایش داده نشه چکار باید بکنم لطفا راهنمایی بفرمایید.
ممنون
سلام وقت شما بخیر،
در این خصوص اگر قصد مخفی سازی عناصر هدر در دستگاه های مختلف را دارید می توانید در هدر ساز و تب هر کدام از دستگاه ها، المان ها را به بخش غیرفعال منتقل کنید تا در آن دستگاه این موارد نمایش داده نشود.
با تشکر.
با سلام و خسته نباشید من فهرست را که طراحی کردم و برای هر قسمت آیکون گذاشتم وقتی از گوشی سایتم رو دیدم متوجه شدم که فهرست به طور کامل در صفحه نمایش گوشی وجود نداره یعنی باید روی هر قسمت کلیک می کردم تا اسم اون قسمت فهرست میومد و آیکون هایی که گذاشته بودم در آنجا وجود نداشت
در صورتی که همه ی اینا در صفحه نمایش کامپیوتر وجود داشت
لطفا راهنماییم کنید
سلام وقت شما بخیر،
منظورتان این است که هدر در موبایل بخوبی نمایش نمی‌یابد یا تنها بخش فهرست چنین حالتی را دارد؟
با تشکر.
در موبایل به مشکل میخورد وگرنه فهرست در کامپیوتر درسته
سلام برشما وقت بخیر
در صورتی که محصولی از ما تهیه کرده اید ، تیکت ارسال نمایید تا بررسی شود.
اینجا پاسخ بدژن شاید سوال بقیه هم بود
در این مورد ابتدا نیاز است سایت شما و تنظیمات انجام شده بررسی گردد.
باتشکر
ضمنا عرض سلام و خسته نباشید خدمت شما ….من در بخش ناحیه بالا سه المان که شامل شماره تماس و ایمیل و ایکون شبکه های اجتماعی بوده را قرار داده ام ولی متاسفانه آیکون های اجتماعی را نشان نمیدهد(نوع چیدمان این المان هایم هم مثل استاد جبین پور است.)…ممنون میشم راهنمایی ام کنید
سلام وقت شما بخیر،
در این خصوص پیشنهاد میشود در ابتدا از بروز بودن قالب و افزونه های سایتتان اطمینان حاصل فرمایید.
با تشکر.
اگه بخوایم برای لپتاپ هم کد بنویسیم، اندازه چند میشه؟
سلام وقت شما بخیر،
بصورت کلی عرض یک لپ تاپ میتواند از 1024 تا 1920 پیکسل باشد.
با تشکر.
در بخش کد CSS برای قسمت لپتاپ چی بزنم؟
همین که بزنم min 1024 کافیه؟
می توانید به اینصورت اقدام کنید که در ابتدا برای لپ تاپ کدها را وارد کنید مانند زیر
@media only screen
and (min-width : 1024px) {
/* Styles here */
}
و سپس برای دسکتاپ بصورت زیر
@media only screen
and (min-width : 1600px) {
/* Styles here */
}
در واقع نقاط شکست خود را به اینصورت تعریف و استایل دهی نمایید.
باتشکر از شما
چرا حالت تغییرات تبلت با موبایل تفاوت داره؟
جفتشون که اندرویدن دیگه!
سلام وقت شما بخیر،
تفاوت موجود بابت ابعاد دستگاه ها هست که بایستی نحوه نمایش المان ها را در هر دستگاه سازماندهی کنید
با تشکر.
سلام
خسته نباشید
چرا وقتی فونت یا رنگ یا اندازه نوشته ها و آیکون هارو در حالت موبایل تغییر میدم، در حالت دکستاپ هم تغییر میکنه
مگه نگفتید فقط حذف یک المان در هردو حالت اعمال میشه؟
سلام بر شما وقت بخیر
این مشکل بخاطر روش اجرای کار است. در کل این کار ممکن است و می توانید در موبایل تغییرات خاص دهید .
با تشکر.
چطور
من هرکار کردم در هردو دستگاه تغییرات اعمال میشه
تنظیمات خاصی داره؟
وقت شما بخیر
لطفاً تیکت ارسال نمایید تا طراحی شما بررسی و راهنمایی شوید.
سلام وقت بخیر تمام کارهایی که داخل ویدئو گفته شد را انجام دادم ولی المان برای حالت موبایل حذف نمیشه دلیلش چیه ؟ کش صفحه رو هم خالی کردم
سلام بر شما وقت بخیر
مشکلی نباید در تنظیمات باشد ، مجدد بررسی کنید که کامل انجام شده باشد.
سلام
خیلی ممنون ار اموزش هایی که گذاشتید
من وقتی با گوشی وارد سایتی که درست کردم میشم میگه :اتصال شما خصوصی نیست باید چکار کنم
سلام بر شما وقت بخیر
مشکل اس اس ال وجود دارد. از اس اس ال رایگان هاست استفاده نمایید و یا می توانید از خرید اس اس ال ( ssl ) – گواهینامه ssl برای وردپرس استفاده نمایید تا ما برای شما نصب کامل را انجام دهیم.
سلام من کدی که استاد تو ویدیو گفتن رو وارد میکنم و نوشته کلاس رو هم بار ها چک کردم درست بود ولی المان تو حالت موبایل حذف نمیشه!
سلام وقت شما بخیر،
اگر مانند آموزش اقدام کردید ممکن است کش در مرورگر رخ داده باشد که پیشنهاد میشود کش مرورگر خود را خالی کنید
با تشکر.
چجوری میتونم کش مرورگر رو خالی کنم ؟؟
سلام بر شما وقت بخیر
کش مرورگر با کلید های کنترل + F5 خالی می شود.
با تشکر.
عالیه استاد
پیروز و سربلند باشید
سلام ، چرا من المان ها رو جابجا میکنم ولی تغییری ایجاد نمیشه
سلام وقت شما بخیر،
در این خصوص دقت کنید که تغییرات در دستگاه مرتبط که درحال مشاهده سایت با آن هستید انجام شده باشد
با تشکر.
سلام وقتتون بخیر
من تمام مراحلی که استاد رفتن رو انجام دادم و کد رو به طور صحیح وارد میکنم ولی المان برای حالت موبایل حذف نمیشه میشه راهنماییم کنین
ممنون
سلام وقت شما بخیر،
در این خصوص دقت داشته باشید که کلاس ها را برای المانهای مورد نظر بخوبی تعریف کرده باشید
با تشکر.
سلام و خسته نباشید ببخشید من همه مراحلی که گفتید انجام دادم ولی در حالت موبایل در حالت افقی اسکرول میخوره چرا؟
سلام وقت شما بخیر،
گاهی اوقات نحوه طراحی محتوای صفحه نیز بر این مورد تاثیر گذار است آیا شما در همه صفحات خود چنین موردی را مشاهده میکنید یا تنها در صفحه خاصی این حالت وجود دارد. اگر در صفحه خاصی است بایستی طراحی آن صفحه را بررسی فرمایید
با تشکر.
سلام و عرض ادب. متاسفانه فهرست من توی منوی همبرگری نرفته. چطوری میتونم این مشکلو برطرف کنم؟
سلام وقت شما بخیر،
منظورتان این است که بصورت همبرگری نمایش داده نمیشود ؟
با تشکر.
سلام من درقسمت ویرایش سربرگ و تغییر یا حذف قسمتی از ناحیه در موبایل درقسمت طراحی چیزی بنام کلاس اضافی ندارم ک بتونم کد وارد کنم چه کنم؟ چرا ندارم؟ مداد زرد ندارم
سلام وقت شما بخیر،
در نسخه های جدید این بخش به انتهای صفحه در تب طراحی منتقل شده است که می توانید بررسی فرمایید
با تشکر.
سلام وقتتون بخیر
ببخشید من در حالت موبایل، فقط یکی از ایتم های فهرستم نشون داده میشه و وقتی ابعاد موبایل رو زیاد می کنم، تک تک اضافه میشن. باید چکار کنم که همشو نشون بده؟
سلام وقت شما بخیر،
در این خصوص میتوانید در تنظیمات المان منو حالت تمام عرض را فعال کرده و تست کنید
با تشکر.
سلام.ببخشید کجا میتونم کدهایی که استاد فرمودن رو کپی یا دانلود کنم؟
سلام وقت شما بخیر،
درحال حاضر میتوانید کدها را مانند ویدیو در سایت خود بنویسید ، این مورد جهت درج کدها در زیر ویدیو به بخش مربوطه گزارش شده است.
با تشکر.
آیا برای واکنشگرایی در حالت موبایل نمیشه به اون گزینه المنتور که در پایین سمت رست میزنیم و بعد از بالا سه حالت ویندوز-تبلت- موبایل میاد و بعد مثلا موبایل رو میزنیم اعتماد کرد؟ اون کم کننده عرض – واقعی نیست؟ چون راه دومی رو بیان کردید برام سوال شد. از پاسخ شما پیشاپیش ممنونم
سلام وقت شما بخیر،
این حالات استانداردهایی است که بیشتر دستگاه ها از آن پشتیبانی میکنند و معمولا مشکلی ندارد.
با تشکر.
سلام وقت بخیر
من تمام مراحل رو انجام دادم و چندبار ویدیو رو دیدم که اشتباه انجام ندم اما برای من اون دکمه که ایجاد کردم از دسکتاپ حذف نمیشه
الان که پنجره کدها رو بستم که با inspect اومده بود، درست شد و از دسکتاپ دکمه پاک شد
اما چرا وقتی پنجره کدها بازه در هر دو حالت دسکتاپ و موبایل دکمه دیده میشه؟
سلام وقت شما بخیر،
در این خصوص دقت داشته باشید که در تنظیمات هدر ساز در تب های موبایل و… این المان حذف یا در ناحیه غیرفعال قرار گرفته باشد.
با تشکر.
سلام خسته نباشید
قسمتی که دکمه در موبایل هست و در دسکتاپ نیست دکمه در حالت موبایل خیلی بزرگه و کل ناحیه اصلی رو گرفته ولی در فیلم اندازه هست در ویرایش آلمان رفتم اندازه فونت رو 0.7 rem کردم درست شد ولی سایز موبایل عوض بشه باز اندازه نیست چی کار باید کرد اندازه دکمه در حالت موبایل درست باشه ؟
سلام وقت شما بخیر،
شما میتوانید المان ها را برای دستگاه های مختلف استایل دهی کنید. در ادامه دوره جلساتی درخصوص طراحی واکنشگرا ارایه شده است که می توانید مشاهده فرمایید.
با تشکر.
سلام وقت شما بخیر،
در این خصوص دقت داشته باشید که در تب دسکتاپ دکمه را در بخش غیرفعال قرار داده باشید.
با تشکر.
سلام و خسته نباشید.کد های css که در فیلم فرموده بودید قرار میدین رو من فقط اولی رو میبینم. در حالت عدم نمایش روی هر دو حالت و عدم نمایش فقط روی دسکتاپ قرار داده نشده…
باسلام خدمت شما
برخی از کدها در محتوای جلسه ذکر شده است که می توانید استفاده فرمایید و برخی را نیز میتوانید همانند ویدیو خودتان در سایت اضافه کنید.
از حضور شما ممنونیم.
سلام خسته نباشید من یک مشکلی داشتیم اینکه وقتی یک دکمه میزارم و اون رو به اندازه دلخواهم میزارم اندازه دکمه عوض میشه ولی انددازه فونت لیبل دکمه عوض نمیشه و همون اندازه میمونه میتونید کمکم کنید؟
باسلام خدمت شما
سایز فونت و دکمه جدای از هم هستند ، با افزایش سایز دکمه، فونت تغییری نمی کند. باید آن را جداگانه در تنظیمات تغییر دهید(اگر وجود دارد) و در غیر این صورت با css می توانید انجام دهید.
از حضور شما ممنونیم.
سلام وقت بخیر خسته نباشید.
من می خوام به یکی از آیکون هام برای این که در صفحم ثابت بمونه کد position fixed بدم امکانش هست راهنماییم کنید؟ (قالب سایتم زفایر هست)
باسلام خدمت شما
در این خصوص پیشنهاد میشود از افزونه مداد زرد برای استایل دهی به المان های خاصی از سایت استفاده فرمایید.
از حضور شما ممنونیم.
با سلام مجدد. برای آیکون هایی که تو درس های قبلی فرمودید من همون سایتی که استاد فرمودند رفتم آیکون هم پیدا کردم . اول اینکه کد مخصوص آیکون قسمت پایین صفحه بود و اینکه وقتی روی کد زدم کپی شد اما بعد از قراردادن در محل مورد نظر در کنار فهرست ،به شکل یک مستطیل کوچیک نمایش میده . باید چیکار کنم؟ با تشکر
سلام و عرض ادب،
مشکل آیکون به چند دلیل می تواند باشد.
1 – نصب ناقص Ssl یا کانفیگ نبودن آن در سایت که باعث مربعی نمایش داده شدن آیکون ها می شود.
2- تنظیمات مربوط به کش قالب و یا افزونه کش مورد استفاده در سایت. که اگر اینمورد باشد، با تغییر تنظیمات افزونه کش مشکل حل می شود.
3- استفاده از ورژن 6 فونت آسوم. (در ورژن 6 فونت آسوم تغیراتی رخ داده است که به خوبی در قالب ها نمایش داده نمی شود و این مورد باید از سمت سازنده های قالبی که از فونت آسوم استفاده می کنند بروزرسانی شود. در ورژن 5 این مشکل وجود ندارد و به خوبی آیکون ها نمایش داده میشوند.) <a href=”https://screen.center/s/LnWGJ”> راهنمای تصویری </a>
تقریباً بیشتر مواقع بدلیل گزینه 1 و یا 3 می باشد. در صورتی که مشکل شما حل نشد، به پشتیبانی محصول خود تیکت ارسال نمایید.
در صورت تهیه از ابزار وردپرس ، از بخش ناحیه کاربری > تیکت ارسال نمایید تا ما بررسی نماییم.
با تشکر.
با سلام خدمت تمامی عوامل سایت بسیار بسیار خوب و عالی ابزار وردپرس.
با عرض تشکر ویژه از جناب استاد جبین پور . واقعا دستتون درد نکنه من که تو جملات نمیتونم از استادتشکر کنم . فقط از خدا میخوام تو هر مسیری که هستید تا خود خدا پیش برید تا نهایت موفقیت پیش برید. از اینکه طولانی شد عذرخواهی میکنم . ممنون که وقت میزارید و دیدگاهم رو میخونید.
سلام و خسته نباشید .
در ابتدا تشکر می کنم بابت آموزش های خیلی خوبتون و اینکه داخل همین ویدِئو گفته بودید که کد css رو می گذارید واسه دانلود و لی گویا فراموش کردید ممنون میشم کد رو بذارید.
سپاس
از حضور شما ممنونیم.
به همکار اطلاع داده شده است که قرار دهند.
سپاس
سلام
منو همبرگری را آموزش ندادین من متوجه نشدم چجوری توی حالت موبال ایجاد شد و دستکتاپ نبود؟”
سلام و عرض ادب
در آموزش ها هم موارد مربوط به منو موبایل و هم هدر عادی در حالت دسکتاپ آموزش شده است.
سلام خسته نباشید
من در تنظیمات پوسته گزینه ی کدهای دلخواه رو ندارم
چیکار باید بکنم؟
درود بر شما وقت بخیر
برای این مورد خواهشمند است بررسی فرمایید که قالب و افزونه های سایت شما بخوبی نصب و آپدیت بوده باشند.
باتشکر
ببخشید چجوری باید قالبم رو آپدیت کنم؟
در قسمت منو برای من هدر های سایت در زفایر نیست و در قالب ها است
از همراهی شما بسیار ممنونیم ، این مورد در نسخه های جدید به قسمت قالب ها منتقل شده که میتوانید از آن استفاده کنید.
باتشکر
برای این مورد پیشنهاد میشود از آموزش نصب محصولات سایت ، توضیح فایل ها ، آموزش خرید از سایت و … دیدن فرمایید.
از همراهی شما بسیار ممنونیم
سلام ممنون از آموزش هاي خوبتون
سايت من به زبان انگيليسيه در حالت موبايل ايتم هاي منو من از پايين به بالا نمايش داده ميشوند بايد چيكار كنم كه مثلاhome , projectsو…. به ترتيب در حالت موبايل از بالا به پايين نمايش داداه شوند؟
سلام و وقت بخیر.
در این رابطه از بخش پشتیبانی قالب خود سوال نمایید.
با آرزوی موفقیت برای شما .
سلام
ممنون از راهنماییهاتون خیلی ممنون واقعا کمکی که میکنین بی نظیره و تا آخر عمرم سپاسگزارتونم
سلام..ممنون از اموزش های باکیفتتون.. یه سوال داشتم..چرا سایز آیکون کلیک کنید توی موبایل کوچیک نمیشه؟ اندازش بزرگه بر اصفحه موبایل
سلام و عرض ادب
در صورتی که در این خصوص مشکلی وجود دارد ، تیکت ارسال نمایید تا بررسی وراهنمایی شوید.
با تشکر.
سلام وقت بخیر مننون از توضیحات خوبتون اقای جبین پور عزیز
یک سوال در این بخش داشتم
وقتی هدر در موبایل به علت تعداد زیادبودن ایتمها در بخشهای هدر بد نشون داده میشه
ما بخایم بدون حذف یک یا چند ایتم اونرو ریسپانسیو کنیم که خوب در موبایل دیده بشه برای این کار چه کاری باید انجام بدیم
سلام بر شما ، وقت بخیر از حضور شما ممنونیم.
برای راهنمایی دقیق تر ، لطفاً یک تیکت ارسال نمایید تا سایت شما مشاهده شود و ایده لازم به شما داده شود.
آرزوی موفقیت برای شما داریم.
دمت گرم دکتر
سلام و عرض ادب
من نمیتونم ویدئو رو دانلود کنم و فکر میکنم خودتون امکان دانلود رو برداشتید اگر امکانش هست یک بخش تغییر سرعت اضافه کنید که بشه کمی سریع تر آموزش هارو دید
خیلی ممنونم از آموزش های عالی و سایت بسیار خوبتون
سلام و عرض ادب
در پلیر ویدئو امکان پخش با سرعت بالاتر وجود دارد.
با تشکر.
سلام وقتتون بخیر
در قالب جدید زفایر نیازی به انجام هدر واکنشگرا نیست چون با تغییر یک المان در تبلت همان المان در موبایل تغییر نمیکند
سلام و عرض ادب ،
شما همین که بصورت عادی طراحی نمایید، طراحی ریسپانسیو می شود.
با تشکر
سلام وقتتون بخیر
همون طور که گفته شده توی ویدیو من کد نویسی رو دقیقا به همون شکل و حتی با همون اسامی انجام میدم ولی کد ها اعمال نمیشن
ممکنه به خاطر افزونه های امنیتی باشه؟
سلام و عرض ادب ،
خیر، اگر از سمت افزونه های امنیتی باشد، کلاً اجازه قرار دادن نمی دهد، البته افزونه امنیتی مشکلی با کد css ندارد.
با تشکر.
بسیار عالی پس به نظرتون مشکل چیه ؟
وقت بخیر
مورد را بصورت تیکت ارسال نمایید تا بررسی شود.
تبلت تنظیم هدرش لازمه
سلام و عرض ادب
طراحی بصورت عادی ریسپانسیو است ، شما بررسی کنید ، اگر لازم بود برای شما انجام دهید.
با تشکر.
سلام وقت بخیر
اولا واقعا ممنونم بابت اموزش های درجه یک تون
ولی یه سوال داشتم این آموزشات بر روی قالب زفایر هستش و ممکنه بعدا با یک قالب دیگه کار کنیم
ایا با این اموزش ها می تونیم با قالب های دیگه هم سایت طراحی کنیم
سلام و درود آقای عزیزی گرامی
خواهش می کنم. مواردی که مربوط به قالب می باشد برای سایر قالب ها مناسب نیست اما بسیاری از موارد دوره را می توانید در قالب های دیگر نیز استفاده نمایید.
سلام ، یک سوال من تو فتوشاپ یک بگراند موج مانند طراحی کردم و میخوام اون بگراند هدرم باشه و اگ دقت کرده باشید بعضی از سایت های اینجورین که هدرشون یا عکسه یا یک موج پی ان جی هستش ، میشه بفرمایید چطوری میتونم بگراند عکسی بدم به هدرم ، تشکر
سلام بر شما
بسته به نوع قالب شما ، می توانید در هدر تصویر را قرار دهید .
در این مورد باید از پشتیبان قالب خود سوال نمایید. هر قالب متفاوت است.
سلام چرامال من نمیشه
سلام بر شما
لطفاً در مورد مشکل خود دقیق تر توضیح بفرمایید.
با تشکر.
سلام وقت بخیر من متنی در قسمت نوار بالا نوشتم که در حالت موبایل مثل ویدیو اموزشی شما کامل نمیاد،میشه راهنمایی کنید اون قسمت و چیکار کنم که در حالت موبایل هم کامل بیاد؟
سلام و عرض ادب
لطفاً این مورد را در تیکت ارسال نمایید تا هم سایت شما مشاهده شود و هم روش طراحی شما، به شما در این مورد توضیح می دهیم.
با تشکر.
سلام من میخوام در موبایل منو همبگری نباشه و مثلا لب تاپ باشه میشه راهنمایی کنید
سلام بر شما
از نظر اصول طراحی و سئو، باید به همین صورت باشد. در غیر این صورت ممکن است افزونه هایی باشند، که منو را مانند منو دسکتاپ به شما نمایش دهند.
این مورد پیشنهاد نمی شود.
الان درست شد ممنونم
موفق و باشید.
من از قالب زفایر استفاده می کنم و همین روشی که شما گفتید +98 رو وارد میکنم ولی درست نمیشه. میشه یکم توضیح بدید این لینک رو کجا باید قرار بدم؟ اصلا درسته لینکم؟
متن دلخواهتون
سلام و عرض ادب،
اگر می خواهید با کلیک بر روی شماره تلفن، مستقیماً به بخش تماس برود، در یک بلاک متنی می توانید ایجاد نمایید.
اگر موفق نشدید، تیکت ارسال نمایید تا همکاران فنی شما را راهنمایی و از روی سایت شما به شما آموزش دهند.
سلام و ارادت وقتتون بخیر
من میخواستم در حالت موبایل وقتی روی شماره تلفن کلیک می کنم مستقیم بره برای تماس، کد مربوطه رو دیدم داخل سایت ولی نمیدونم داخل وردپرس چطوری اعمال میشه؟ چون میخوام در این رابطه به دلیل حجم کدنویسی از افزونه استفاده نکنم. لطفا نحوه انجامش رو بفرمایید. با تشکر
سلام بر شما،
شماره موبایل را به این صورت وارد کنید.
tel:+989123456789
سلام . من هم خواستم این مورد رو انجام بدم، اما متاسفانه با این روش انجام نشد.
وقت بخیر
تیکت ارسال نمایید تا شما را راهنمای کنیم.
سلام استاد وقتتون بخیر من وقتی میخوام کلاس برای المان دسکتاپ انتخاب کنم به طور خودکار برای موبایل هم انتخاب میشه . چجوری از حالت خودکار برش دارم
سلام و درود، وقت شما بخیر.
بصورت دقیق متوجه منطور شما نشدم، لطفاً در این مورد دقیق تر توضیح دهید و یا با شرکت در تماس باشید.
با تشکر.
سلام وقتتون بخیر .. ممنون از آموزش خوبتون … من با قالب ایمپرزا روی لوکال هاست کار میکنم .. اما لوگو سایتم روی گوشی رسپانسیو نمیشه و قسمتی از لوگو روی top bar قرار میگیره .. اگر ارتفاع لوگو رو هم کم کنم در این صورت لوگو داخل دسکتاپ کوچیک میشه … ارتفاع لوگو همونطور که فرمودین 100px هست … ارتفاع main bar دسکتاپ هم 100 px و لی ارتفاع main bar گوشی 60px که اگر بخوام 100 تا کنم خیلی بزرگ میشه main bar گوشی …
ممنون میشم راهنماییم کنید من هر کاری میکنم نمیتونم درست کنم
سلام بر شما وقت بخیر،
مواردی که در آموزش ها بیان شده است را انجام داده اید و ظاهراً مشکل دارد. در این رابطه بهتر است از بخش ناحیه کاربری، مشکل خود را بصورت تیکت ارسال نمایید تا همکاران فنی این مورد را بررسی کرده و به شما راهنمایی کنند.
موفق و پیروز باشید.
سلام و خسته نباشید سوالی داشتم سایت فلت ایکون که استاد معرفی کردن هم ایران رو تحریم کرده هم هرچی گشتم ابعاد دلخواه توش نیست که 24*24انتخاب کنیم میخواستم بدونم از نظر امنیتی میشه از سایت های دیگه ایکون دانلود کرد مثل سایت **
سلام و درود آقای عباسپور
آیکون PNG را می توانید از هر سایتی دریافت کنید و مشکلی وجود ندارد.
با تشکر
سلام، بسیار ممنون از توضیحات عالی. من یک راهی کشف کردم که خواستم در میون بذارم. در قسمت هدرهای سایت زیر قسمت های مربوط به سه ردیف تنظیمات هدرها، بک نوار خاکستری هست که ظاهرا محل المان های مخفی هست. میشه بعنوان مثال المانی رو که نمی خوایم در حالت موبایل نشون داده بشه رو بکشیم و بندازیم روی اون نوار خاکستری. اینجوری دیگه کد نوشتن لازم نیست. ممنون میشم راهنمایی کنید که آیا این کار درسته یا نه
سلام بر شما ، وقت بخیر،
بله این یک راهکار است، مشکلی ندارد.
موفق و پیروز باشید.
سلام مرسی که این ترفند رو به اشتراک گذاشتید .. واقعا کارساز بود ممنون از شما
درود. آفرین خیلی راهکار عالی ای بود ممنون
سلام.کد رو میزنم اما در هر دو حالت دکستاپ و موبایل فعال میشه خودش
سلام آقای شفیعی
لطفاً تیکت بزنید تا بررسی داشته باشیم. برای این مورد نیاز به کد نمی باشد.
با تشکر
سلام خسته نباشید یه سوال داشتم اینکه میشه در حالت گوشی با کمک ترفندی رنگ ها با در حالت دسکتاپ فرق داشته باشه ؟
سلام آقای نافعی بزرگوار
بله. این کار امکان پذیر است. با استفاده از مداد زرد می توانید این تغییرات را اعمال نمایید.
با تشکر
ممنون از شما
سلام ببخشید در قسمت نواحی موبایل(ناحیه بالا وسط و پایین در رسپانسیو) تنظیم رنگ نداره.در فرضی که که بگیم مثلا تاپ بار موبایل در داشتن رنگ از تاپ بار PC الگو بگیره بازم واسه من نمیشه چون من در طراحی هدر PC ناحیه بالارو ندارم ولی در رسپانسیو بخاطر خلاقیت طراحی که خواستم داشته باشم تاپ بار رو دارم و گزینه تنظیم رنگ نداره.
سلام و احترام آقای سرطاوی
در تنظیمات قالب در حال حاضر تنظیمی برای اعمال رنگ در هنگام ریسپانسیو وجود ندارد.
با تشکر
دلم نمیاد بعد از تماشای هر جلسه نیام و تشکر نکنم. واقعاً دست مریزاد 🙂
سلام وقت بخیر
ببخشید من یک برگه طراحی کردم و در منو اصلی قرار دارم چرا در حالت موبایل محتویات برگه را نمایش نمی دهد؟
سلام و احترام خانم محمدی
لطفاً از ناحیه کاربری یک تیکت ارسال کنید تا بررسی داشته باشیم.
با تشکر
سلام و تشکر از اموزش عالی تون
ببخشید وقتی روی موبایل انتهای نوار رو نشون نمیده باید چیکار کنیم؟ مثلا ایکون واتساپ که گوشه هدر هست دیده نمیشه
سلام خانم عجمی اول بزرگوار
خواهش می کنم. متأسفانه متوجه مشکلتان نشدم. لطفاٌ تصویری از مشکلتان در تیکت ارسال نمایید تا کارشناسان بخش فنی راهنماییتان کنند.
با تشکر
سلام
خیلی ممنونم بابت آموزش خوبتون
خواستم بپرسم اگه بخام توی حالت موبایل رنگ هدر رو عوض کنم باید چیکار کنم؟یا اگه کدی باید بزنم خواهشا کدش رو بهم بگید
مثلا توی دکستاپ هدرم بنفشه ولی توی موبایل صورتی شده میخام رنگشو توی موبایل هم عوض کنم و بنفشش کنم
سلام آقای محمدي گرامی
خواهش می کنم. لطفاٌ از ناحیه کاربری تیکت ارسال نمایید تا راهنماییتان کنیم.
با تشکر از حضور شما
سوال منم هست این مسئله
باید کلاس بدیم؟
سلام خانم کرمانی عزیز
برای این مورد نیاز می باشد یک کد css در حالت موبایل اعمال شود. می بایست از کد زیر استفاده کنید و استایل ها را درون آن قرار دهید.
@media screen and (max-width: 480px) {
}
با تشکر
وقت بخیر…چطور میتونم مثلا اندازه یه جمله رو تو حالت ریسپانسیو موبایل کوچیک تر کنم و اندازش تو حالت دسک تاپ تغیری نکنه..ایا این امکان در حال حاضر وجود داره؟
سلام خانم درستکار گرامی
بله این امکان وجود دارد و می توانید از طریق افزونه مداد زرد این کار را انجام دهید.
با تشکر
با سلام.. خیلی ممنونم
سلام و عرض ادب
چطور میشه تغییراتی که در قسمت inspect اعمال میشه رو ذخیره کرد؟
سلام خانم یوسفی عزیز
کدهایی که برای تغییرات در این قسمت ایجاد می کنید را می بایست به قسمت نمایش > سفارشی سازی > css سفارشی اضافه کنید.
با تشکر
سلام و عرض ادب برای عدم نمایش یک آیتم در دسکتاب یا موبایل نیاز به کد نویسی نیست با قرار دادن آن آیتم در قسمت المان های سربرگ با درگ دراپ( دقیقا زیر باکس باتن بار) آن آیتم در موبایل یا دسکتاپ یا تبلت قرار نمی گیرد.
با تشکر از تدریس شما استاد
سلام آقای نوری عزیز و گرامی
هنگام ظبط آموزش این قابلیت در قالب وجود نداشت و در نسخه های بعدی این امکان ایجاد گردیده است.
با تشکر
با عرض سلام و خسته نباشید.
در هدر من در حالت موبایل آیکون های شبکه اجتماعی، سبدخرید و پیغامی که در تاپ بار نوشته ایم نمایش داده نمیشوند با اینکه در قسمت تنظیمات هدر موبایل وجود دارند.
ممنون میشم راهنمایی بفرمایید.
سلام و احترام خدمت شما
از شما خواهشمندیم سوالات پس از خرید را ( در رابطه با محصول خریداری شده از سایت ما ) در بخش تیکت پشتیبانی ( ناحیه کاربری ) ارسال فرمایید ، سوالات شما به سرعت توسط همکاران متخصص ما پاسخ داده خواهد شد.
با تشکر
خیلی هم راحت و عالی دستت درد نکنه استاد
سلام
من هرکاری میکنم به طور دقیق همه موارد را رفتم ولی نمیشه
راهی غیر از کد نویسی هست؟
لطفا راهنمایی کنید
ویدئو رو 4 بار دیدم
سلام خانم مهربان عزیز
ممکن است کدها را به درستی وارد نکرده باشید. از ناحیه کاربری یک تیکت ارسال کنید تا همکاران ما شما را راهنمایی کنند.
با تشکر
سلام
با تشکر از آموزش های خوبتون
دلیل اینکه منوی همبرگری توی حالت موبایل فعال نمیشه چیه؟؟
سلام با تشکر از آموزش خوبتون
ولی این کد نیاز نیست میتونین هر چیزی که میخواین نمایش نده تو موبایل رو در قسمت hidden elements بزارینش اون قسمتی که پایننه، حالت هاشور زده داره زیر نوشته المان های سربرگ
سلام بر شما، این امکان در ورژن جدید ایجاد شده و در زمان ضبط ویدئو میسر نبوده است. ما نیز ویدئو را بزودی تغییر خواهیم داد. باتشکر
با سلام خدمت شما و تشکر از آموزشهای خوبی که ارائه می کنید،
وقتی که از گوشی وارد سایتم می شوم المان فهرست در سربرگ نمایش داده نمی شود در صورتی که در بخش موبایل سربرگ قرار دارد حتی در کامپیوتر وقتی مرورگر بحالت نمایش بر روی موبایل تنظیم شود این المان دیده می شود. البته قبلا خوب بود اخیرا این مشکل پیش آمده است. بنظر شما علت آن چیست؟
ممنون از شما
سلام و احترام خدمت شما کاربر ارجمند ، از شما خواهشمندیم سوالات پس از خرید را ( در رابطه با محصول خریداری شده از سایت ما ) در بخش تیکت پشتیبانی ( ناحیه کاربری ) ارسال فرمایید ، سوالات شما به سرعت توسط همکاران متخصص ما پاسخ داده خواهد شد.
سلام افزونه رایگان مناسبی برای چت روم که افراد در یک باکس مخصوص باهم چت کنن میشناسید؟
وهمچنین بتونن پیام خصوصی بدن مثل تلگرام
با سلام و احترام ، خیر متاسفانه چنین افزونه ای در این رابطه نمیشناسم. باتشکر
دوستان به جای کد نویسی می تونید المان مورد نظر رو در قسمت المان های سربرگ مخفی کنید.
سلام!
ممکنه دقیق بفرمایید کجا؟ من هرچی می کردم نیست! توی تب طراحی در المان هاست؟ یا تنظیمات عمومی سربرگ؟ ممنون میشم راهنمایی کنید
با سلام
در همان قسمتی که کلاس اضافی ایتم را قرار میدهید پایین تر دو گزینه<> و <> هست که با توجه به سربرگ چسبان میتوانید از یکی از این دو گزینه استفاده کنید برای نمایش دادن یا ندادن گزینه
با تشکر!
ضمن سلام و خسته نباشید خدمت شما
میخواستم بدونم
1. اگه این کد رو بعد از مدتی در قسمت تنظیمات قالب پاک کنیم دوباره به حالت اولیه برمیگردن؟
2.و اینکه اگه ما در اینده خواستیم css دیگه ای اضافه کنیم باید این رو پاک کنیم یا اگه همینجوری اضافه کنیم مشکلی پیش نمیاد؟
3.و اینکه کلا میتونیم چه تعدادی css به تنظیمات اضافه کنیم؟
سلام جناب فتاحی
1- بله به حالت قبل برمیگردد.
2- سی اس اس های دیگر را در ادامه این کد بنویسید.
3- بی نهایت …
سلام ممنون از آموزش هاي عاليتون
سايت من به زبان انگيليسيه در حالت موبايل ايتم هاي منو من از پايين به بالا نمايش داده ميشوند بايد چيكار كنم كه مثلاhome , projectsو…. به ترتيب در حالت موبايل از بالا به پايين نمايش داداه شوند؟
بايد منوهاي جداگانه اي براي حالت دسكتاپ و موبايل طراحي كنم ؟اصلا يه همچين چيزي امكان داره؟
خيلي ممنون
سلام و احترام خدمت شما کاربر ارجمند ، از شما خواهشمندیم سوالات پس از خرید را ( در رابطه با محصول خریداری شده از سایت ما ) در بخش تیکت پشتیبانی ( ناحیه کاربری ) ارسال فرمایید ، سوالات شما به سرعت توسط همکاران متخصص ما پاسخ داده خواهد شد.
با سلام در کدام سمت میتونم هدینگ یا همان تگ های صفحه اول سایت رو ویرایش کنم اگه براتون مقدوره کامل توضیح بدید
سلام ، متاسفانه متوجه منظور شما نشدیم. باتشکر
سلام و تشکر از آموزشهای بی‌نظیرتون
آیا در قالب فلت سام هم این مدل کدنویسی لازمه؟
راستش من با اون قالب زمانی‌که Duplicate میکنم در صفحه دوم روی حالت موبایل و در صفحه اول روی حال دسکتاپ تنظیماتی انجام میدم انتشار هم میزنم اوکی هست.
اما وقتی صفحه را Refresh میکنم هر دو هدر مثل هم میشود. البته گفتم کدنویسی نمی‌کنم چون قالبم فلت سامه. مثلا لوگو را در حالت موبایل وسط می‌گذارم و در حالت دسکتاپ سمت راست. با رفرش هر دو هدر یکی میشود.
ممنون از پاسخ‌گویی
سلام ، در هر قالبی متفاوت می باشد ولی بطور کلی با استفاده از افزونه مداد زرد در هرقالبی می توانید تغییرات مناسبی لحاظ نمایید. باتشکر
من طبق ویدئو کار رو انجام دادم و اوکی شد، ولی وقتی اسم فایل کلاس اضافی در هرکدوم از قسمت ها عوض بشه، در قسمت های دیگرهم همون اسم میشه!
سلام، کلمه ی important که جلوی کد مینویسه برای چیه؟
سلام وقت شما بخیر ، Important یعنی اولویت بیشتری نسبت به این کد لحاظ شود. باتشکر
استاد گفتند اینجا کد رو میذارند. نیست؟
سلام بر شما، زیر ویدیو لینک دانلود کد قرار داده شده است. با احترام
یه دفعه وسط ویدیو فکر کنم میکروفون خراب شد
چون صدا برای من یکم خش خشی شد
بله درسته جناب پوردهقان ، از بابت این مشکل از شما عذرخواهی میکنیم 🙂
سلام. این کد رو من با دقت وارد کردم ولی برای حالت دسکتاپ جواب نداد بعدش فایل رو دانلود کردم و قسمت دسکتاپ رو کپی پیست کردم بازم المان دکمه در حالت دسکتاپ هست. حواسمم به اسم کلاسی که توی تنظیمات المان وارد کردم هست و دقیقا اسم مربوطه رو کپی میکنم.
دیگه چه دلیلی میتونه داشته باشه که در حالت دسکتاپ حذف نمیشه؟
سلام ، لطفاً ویدئو ها را مجدد به دقت مشاهده فرمایید فکر میکنم مشکل مرتفع شود. باتشکر
بخش css خیلی جذاب بود ولی کاش راه حل اسون تر یعنی drag &drop رو هم می گفتید
سلام ، جناب حسنی ، کمی بیشتر ویدئو ها را ملاحظه فرمایید با این امکان هم آشنا خواهید شد. باتشکر
سلام بر شما کابر گرامی، در حال تست کامنت هستیم.