آموزش طراحی هدر واکنشگرا

( )

حق کپی ویدئو

مجاز نمی باشد.

شما اینجا هستید :

جلسه سی و هشت

آموزگار :

مهدی جبین پور

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

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

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

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

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

اورجینال

کیفیت

پشتیبانی

آپدیت

مهدی جبین پور

مـهـدی جـبین پـور

دانشجوی دکتری تجارت الکترونیک ، امیدوارم بتوانم خدمتگزار خوبی برای مردم کشورم باشم.

مهدی جبین پور

مـهـدی جـبین پـور

دانشجوی دکتری تجارت الکترونیک ، امیدوارم بتوانم خدمتگزار خوبی برای مردم کشورم باشم.

آموزش طراحی هدر واکنشگرا

( )

طراحی واکنش­گرا یا ریسپانسیو(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

  • مهسا قربانیان
    2025-02-27 18:33

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

  • جواد صادقی
    2025-01-22 21:59

    سلام وقت بخیر
    لینک این دوره رو بفرستید
    ممنون

  • زهرا سادات هاشمی
    2024-12-09 02:14

    سلام . چرا در رسپانسیو موبایل گوشه صفحه موبایل سفید و خالی می مونه ؟؟

  • میثم خداآبادیان
    2024-11-28 04:37

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

    • محمد قاسمی
      2024-11-28 09:54

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

       

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

      با تشکر.

  • مبین اسدی
    2024-03-02 16:29

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

  • محمدرضا حیدری
    2024-02-29 19:05

    ضمنا عرض سلام و خسته نباشید خدمت شما ….من در بخش ناحیه بالا سه المان که شامل شماره تماس و ایمیل و ایکون شبکه های اجتماعی بوده را قرار داده ام ولی متاسفانه آیکون های اجتماعی را نشان نمیدهد(نوع چیدمان این المان هایم هم مثل استاد جبین پور است.)…ممنون میشم راهنمایی ام کنید

    • محمد قاسمی
      2024-03-01 19:43

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

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

      با تشکر.

  • الف طاهری
    2024-02-13 22:29

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

    • محمد قاسمی
      2024-02-14 09:10

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

      بصورت کلی عرض یک لپ تاپ میتواند از 1024 تا 1920 پیکسل باشد.

      با تشکر.

      • الف طاهری
        2024-02-14 20:06

        در بخش کد CSS برای قسمت لپتاپ چی بزنم؟
        همین که بزنم min 1024 کافیه؟

        • محمد قاسمی
          2024-02-17 16:27

          می توانید به اینصورت اقدام کنید که در ابتدا برای لپ تاپ کدها را وارد کنید مانند زیر
          @media only screen
          and (min-width : 1024px) {
          /* Styles here */
          }
          و سپس برای دسکتاپ بصورت زیر
          @media only screen
          and (min-width : 1600px) {
          /* Styles here */
          }
          در واقع نقاط شکست خود را به اینصورت تعریف و استایل دهی نمایید.
          باتشکر از شما

  • الف طاهری
    2024-02-11 15:57

    چرا حالت تغییرات تبلت با موبایل تفاوت داره؟
    جفتشون که اندرویدن دیگه!

    • محمد قاسمی
      2024-02-12 07:50

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

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

      با تشکر.

  • امیررضا آناهید
    2024-02-11 15:34

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

  • حمی لریجانی
    2024-01-20 17:22

    سلام وقت بخیر تمام کارهایی که داخل ویدئو گفته شد را انجام دادم ولی المان برای حالت موبایل حذف نمیشه دلیلش چیه ؟ کش صفحه رو هم خالی کردم

  • آرمان طلائی
    2024-01-11 16:50

    سلام
    خیلی ممنون ار اموزش هایی که گذاشتید
    من وقتی با گوشی وارد سایتی که درست کردم میشم میگه :اتصال شما خصوصی نیست باید چکار کنم

  • محمدصالح کیانی
    2024-01-10 14:45

    سلام من کدی که استاد تو ویدیو گفتن رو وارد میکنم و نوشته کلاس رو هم بار ها چک کردم درست بود ولی المان تو حالت موبایل حذف نمیشه!

  • بیتا یاراحمدی
    2023-12-30 14:47

    عالیه استاد

  • مرتضی فریدی
    2023-12-22 11:56

    سلام ، چرا من المان ها رو جابجا میکنم ولی تغییری ایجاد نمیشه

    • کامران قائمی
      2023-12-23 00:50

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

      در این خصوص دقت کنید که تغییرات در دستگاه مرتبط که درحال مشاهده سایت با آن هستید انجام شده باشد

      با تشکر.

  • نرگس شکوهی
    2023-10-17 20:29

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

  • سحر محمدیان
    2023-10-17 00:09

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

    • کامران قائمی
      2023-10-17 12:59

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

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

      با تشکر.

  • دانیال عزیزیان
    2023-10-14 21:10

    سلام و عرض ادب. متاسفانه فهرست من توی منوی همبرگری نرفته. چطوری میتونم این مشکلو برطرف کنم؟

  • سعیده آیین
    2023-10-10 22:30

    سلام من درقسمت ویرایش سربرگ و تغییر یا حذف قسمتی از ناحیه در موبایل درقسمت طراحی چیزی بنام کلاس اضافی ندارم ک بتونم کد وارد کنم چه کنم؟ چرا ندارم؟ مداد زرد ندارم

  • پریسا ملاحسینی
    2023-10-09 20:42

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

  • سعیده آیین
    2023-10-03 23:48

    سلام.ببخشید کجا میتونم کدهایی که استاد فرمودن رو کپی یا دانلود کنم؟

    • کامران قائمی
      2023-10-06 12:06

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

      درحال حاضر میتوانید کدها را مانند ویدیو در سایت خود بنویسید ، این مورد جهت درج کدها در زیر ویدیو به بخش مربوطه گزارش شده است.

      با تشکر.

  • خانم خانمی
    2023-08-20 14:59

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

  • مبینا اسدی
    2023-08-20 12:54

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

    • مبینا اسدی
      2023-08-20 13:00

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

      • کامران قائمی
        2023-08-21 18:56

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

        در این خصوص دقت داشته باشید که در تنظیمات هدر ساز در تب های موبایل و… این المان حذف یا در ناحیه غیرفعال قرار گرفته باشد‌.

        با تشکر.

      • اشکان سلطانی
        2023-09-03 12:20

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

        • کامران قائمی
          2023-09-04 15:20

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

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

          با تشکر.

    • کامران قائمی
      2023-08-21 18:54

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

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

      با تشکر.

  • رضا رضایی
    2023-08-04 12:07

    سلام و خسته نباشید.کد های css که در فیلم فرموده بودید قرار میدین رو من فقط اولی رو میبینم. در حالت عدم نمایش روی هر دو حالت و عدم نمایش فقط روی دسکتاپ قرار داده نشده…

    • کامران قائمی
      2023-08-05 18:06

      باسلام خدمت شما

      برخی از کدها در محتوای جلسه ذکر شده است که می توانید استفاده فرمایید و برخی را نیز میتوانید همانند ویدیو خودتان در سایت اضافه کنید.

      از حضور شما ممنونیم.

  • محمدرضا موسی پور
    2023-07-30 11:11

    سلام خسته نباشید من یک مشکلی داشتیم اینکه وقتی یک دکمه میزارم و اون رو به اندازه دلخواهم میزارم اندازه دکمه عوض میشه ولی انددازه فونت لیبل دکمه عوض نمیشه و همون اندازه میمونه میتونید کمکم کنید؟

    • علی حیدری
      2023-07-30 17:09

      باسلام خدمت شما

      سایز فونت و دکمه جدای از هم هستند ، با افزایش سایز دکمه، فونت تغییری نمی کند. باید آن را جداگانه در تنظیمات تغییر دهید(اگر وجود دارد) و در غیر این صورت با css می توانید انجام دهید.

      از حضور شما ممنونیم.

  • ابوالفضل بیکدلی
    2023-07-22 15:45

    سلام وقت بخیر خسته نباشید.
    من می خوام به یکی از آیکون هام برای این که در صفحم ثابت بمونه کد position fixed بدم امکانش هست راهنماییم کنید؟ (قالب سایتم زفایر هست)

    • کامران قائمی
      2023-07-24 01:02

      باسلام خدمت شما

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

      از حضور شما ممنونیم.

  • امیر مشیر
    2023-07-16 01:33

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

    • کامران قائمی
      2023-07-16 02:00

      سلام و عرض ادب،

      مشکل آیکون به چند دلیل می تواند باشد.

      1 – نصب ناقص Ssl یا کانفیگ نبودن آن در سایت که باعث مربعی نمایش داده شدن آیکون ها می شود.

      2- تنظیمات مربوط به کش قالب و یا افزونه کش مورد استفاده در سایت. که اگر اینمورد باشد، با تغییر تنظیمات افزونه کش مشکل حل می شود.

      3- استفاده از ورژن 6 فونت آسوم. (در ورژن 6 فونت آسوم تغیراتی رخ داده است که به خوبی در قالب ها نمایش داده نمی شود و این مورد باید از سمت سازنده های قالبی که از فونت آسوم استفاده می کنند بروزرسانی شود.  در ورژن 5 این مشکل وجود ندارد و به خوبی آیکون ها نمایش داده میشوند.) <a href=”https://screen.center/s/LnWGJ”> راهنمای تصویری </a>

      تقریباً بیشتر مواقع بدلیل گزینه 1 و یا 3 می باشد. در صورتی که مشکل شما حل نشد، به پشتیبانی محصول خود تیکت ارسال نمایید.

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

      با تشکر.

  • امیر مشیر
    2023-07-16 01:28

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

  • فرشته زارعی
    2023-04-22 17:57

    سلام و خسته نباشید .
    در ابتدا تشکر می کنم بابت آموزش های خیلی خوبتون و اینکه داخل همین ویدِئو گفته بودید که کد css رو می گذارید واسه دانلود و لی گویا فراموش کردید ممنون میشم کد رو بذارید.
    سپاس

  • علیرضا نعیم آبادی
    2023-02-18 13:40

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

  • مریم بلجلان
    2022-12-19 17:21

    سلام ممنون از آموزش هاي خوبتون
    سايت من به زبان انگيليسيه در حالت موبايل ايتم هاي منو من از پايين به بالا نمايش داده ميشوند بايد چيكار كنم كه مثلاhome , projectsو…. به ترتيب در حالت موبايل از بالا به پايين نمايش داداه شوند؟

  • حبیب سلمانی
    2022-11-07 21:26

    سلام
    ممنون از راهنماییهاتون خیلی ممنون واقعا کمکی که میکنین بی نظیره و تا آخر عمرم سپاسگزارتونم

  • نازنین حسینی
    2022-09-27 14:57

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

  • مهرشاد مهری
    2022-09-19 15:56

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

    • علی حیدری
      2022-09-19 16:17

      سلام بر شما ، وقت بخیر از حضور شما ممنونیم.

      برای راهنمایی دقیق تر ، لطفاً یک تیکت ارسال نمایید تا سایت شما مشاهده شود و ایده لازم به شما داده شود.

      آرزوی موفقیت برای شما داریم.

  • مهدی علی سنجی نسب
    2022-09-11 18:50

    دمت گرم دکتر

  • علی چشمه
    2022-08-11 02:47

    سلام و عرض ادب
    من نمیتونم ویدئو رو دانلود کنم و فکر می‌کنم خودتون امکان دانلود رو برداشتید اگر امکانش هست یک بخش تغییر سرعت اضافه کنید که بشه کمی سریع تر آموزش هارو دید

    خیلی ممنونم از آموزش های عالی و سایت بسیار خوبتون

  • سارا اعتدال پور
    2022-08-05 15:54

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

  • مهدی معمارنژادیان
    2022-06-14 20:48

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

  • بهنام حیدری
    2022-05-23 08:59

    تبلت تنظیم هدرش لازمه

  • سید رامان عزیزی
    2022-05-11 21:33

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

    • محمدرضا خرسند
      2022-05-12 13:15

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

  • امیر عرفانی
    2022-04-29 16:29

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

    • علی حیدری
      2022-04-29 17:28

      سلام بر شما
      بسته به نوع قالب شما ، می توانید در هدر تصویر را قرار دهید .
      در این مورد باید از پشتیبان قالب خود سوال نمایید. هر قالب متفاوت است.

  • عباس رشیدی
    2022-04-09 14:12

    سلام چرامال من نمیشه

  • مهدیه ابراهیمی
    2022-04-05 13:21

    سلام وقت بخیر من متنی در قسمت نوار بالا نوشتم که در حالت موبایل مثل ویدیو اموزشی شما کامل نمیاد،میشه راهنمایی کنید اون قسمت و چیکار کنم که در حالت موبایل هم کامل بیاد؟

    • علی حیدری
      2022-04-05 13:38

      سلام و عرض ادب
      لطفاً این مورد را در تیکت ارسال نمایید تا هم سایت شما مشاهده شود و هم روش طراحی شما، به شما در این مورد توضیح می دهیم.
      با تشکر.

  • محمد حسین محمدی
    2022-03-31 20:23

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

    • علی حیدری
      2022-04-01 11:07

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

  • امیر میرزایی
    2022-03-24 14:35

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

  • امیر میرزایی
    2022-03-24 14:17

    من از قالب زفایر استفاده می کنم و همین روشی که شما گفتید +98 رو وارد میکنم ولی درست نمیشه. میشه یکم توضیح بدید این لینک رو کجا باید قرار بدم؟ اصلا درسته لینکم؟

    متن دلخواهتون

    • علی حیدری
      2022-03-24 14:38

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

  • امیر میرزایی
    2022-03-24 02:37

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

  • علی‌رضا زربافی
    2022-01-26 13:21

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

    • کارشناس پشتیبانی شماره دو
      2022-01-27 09:33

      سلام و درود، وقت شما بخیر.
      بصورت دقیق متوجه منطور شما نشدم، لطفاً در این مورد دقیق تر توضیح دهید و یا با شرکت در تماس باشید.
      با تشکر.

  • سمیه خو
    2022-01-21 19:12

    سلام وقتتون بخیر .. ممنون از آموزش خوبتون … من با قالب ایمپرزا روی لوکال هاست کار میکنم .. اما لوگو سایتم روی گوشی رسپانسیو نمیشه و قسمتی از لوگو روی top bar قرار میگیره .. اگر ارتفاع لوگو رو هم کم کنم در این صورت لوگو داخل دسکتاپ کوچیک میشه … ارتفاع لوگو همونطور که فرمودین 100px هست … ارتفاع main bar دسکتاپ هم 100 px و لی ارتفاع main bar گوشی 60px که اگر بخوام 100 تا کنم خیلی بزرگ میشه main bar گوشی …
    ممنون میشم راهنماییم کنید من هر کاری میکنم نمیتونم درست کنم

    • کارشناس پشتیبانی شماره دو
      2022-01-22 08:56

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

  • رضاعباسپور
    2022-01-03 22:07

    سلام و خسته نباشید سوالی داشتم سایت فلت ایکون که استاد معرفی کردن هم ایران رو تحریم کرده هم هرچی گشتم ابعاد دلخواه توش نیست که 24*24انتخاب کنیم می‌خواستم بدونم از نظر امنیتی میشه از سایت های دیگه ایکون دانلود کرد مثل سایت **

  • فرشید فرداد
    2021-12-29 15:50

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

  • آرین شفیعی
    2021-12-25 19:01

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

  • محمد مهدی نافعی
    2021-12-18 21:50

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

  • مرتضی سرطاوی
    2021-12-07 15:11

    سلام ببخشید در قسمت نواحی موبایل(ناحیه بالا وسط و پایین در رسپانسیو) تنظیم رنگ نداره.در فرضی که که بگیم مثلا تاپ بار موبایل در داشتن رنگ از تاپ بار PC الگو بگیره بازم واسه من نمیشه چون من در طراحی هدر PC ناحیه بالارو ندارم ولی در رسپانسیو بخاطر خلاقیت طراحی که خواستم داشته باشم تاپ بار رو دارم و گزینه تنظیم رنگ نداره.

    • کارشناس پشتیبانی شماره چهار
      2021-12-07 15:32

      سلام و احترام آقای سرطاوی
      در تنظیمات قالب در حال حاضر تنظیمی برای اعمال رنگ در هنگام ریسپانسیو وجود ندارد.
      با تشکر

  • شیما محمدی
    2021-12-03 22:55

    دلم نمیاد بعد از تماشای هر جلسه نیام و تشکر نکنم. واقعاً دست مریزاد 🙂

  • مرضیه محمدی
    2021-12-03 16:57

    سلام وقت بخیر

    ببخشید من یک برگه طراحی کردم و در منو اصلی قرار دارم چرا در حالت موبایل محتویات برگه را نمایش نمی دهد؟

  • اکرم عجمی اول
    2021-10-31 16:08

    سلام و تشکر از اموزش عالی تون
    ببخشید وقتی روی موبایل انتهای نوار رو نشون نمیده باید چیکار کنیم؟ مثلا ایکون واتساپ که گوشه هدر هست دیده نمیشه

    • کارشناس پشتیبانی شماره چهار
      2021-11-01 08:27

      سلام خانم عجمی اول بزرگوار
      خواهش می کنم. متأسفانه متوجه مشکلتان نشدم. لطفاٌ تصویری از مشکلتان در تیکت ارسال نمایید تا کارشناسان بخش فنی راهنماییتان کنند.
      با تشکر

  • سعید محمدي
    2021-10-25 16:32

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

    مثلا توی دکستاپ هدرم بنفشه ولی توی موبایل صورتی شده میخام رنگشو توی موبایل هم عوض کنم و بنفشش کنم

    • کارشناس پشتیبانی شماره چهار
      2021-10-26 08:24

      سلام آقای محمدي گرامی
      خواهش می کنم. لطفاٌ از ناحیه کاربری تیکت ارسال نمایید تا راهنماییتان کنیم.
      با تشکر از حضور شما

    • فاطمه کرمانی
      2021-12-14 11:51

      سوال منم هست این مسئله
      باید کلاس بدیم؟

      • کارشناس پشتیبانی شماره چهار
        2021-12-14 11:56

        سلام خانم کرمانی عزیز
        برای این مورد نیاز می باشد یک کد css در حالت موبایل اعمال شود. می بایست از کد زیر استفاده کنید و استایل ها را درون آن قرار دهید.
        @media screen and (max-width: 480px) {
        }
        با تشکر

  • فاطمه درستکار
    2021-10-07 22:30

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

  • یاسمین یوسفی
    2021-08-09 10:45

    سلام و عرض ادب
    چطور میشه تغییراتی که در قسمت inspect اعمال میشه رو ذخیره کرد؟

    • کارشناس پشتیبانی شماره چهار
      2021-08-09 11:12

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

  • احسان نوری
    2021-08-04 10:59

    سلام و عرض ادب برای عدم نمایش یک آیتم در دسکتاب یا موبایل نیاز به کد نویسی نیست با قرار دادن آن آیتم در قسمت المان های سربرگ با درگ دراپ( دقیقا زیر باکس باتن بار) آن آیتم در موبایل یا دسکتاپ یا تبلت قرار نمی گیرد.
    با تشکر از تدریس شما استاد

    • کارشناس پشتیبانی شماره چهار
      2021-08-04 13:41

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

  • سپیده رضایی
    2021-07-27 13:45

    با عرض سلام و خسته نباشید.
    در هدر من در حالت موبایل آیکون های شبکه اجتماعی، سبدخرید و پیغامی که در تاپ بار نوشته ایم نمایش داده نمیشوند با اینکه در قسمت تنظیمات هدر موبایل وجود دارند.
    ممنون میشم راهنمایی بفرمایید.

  • اکبر رحیمی
    2021-07-26 01:10

    خیلی هم راحت و عالی دستت درد نکنه استاد

  • رها مهربان
    2021-05-31 14:35

    سلام
    من هرکاری میکنم به طور دقیق همه موارد را رفتم ولی نمیشه
    راهی غیر از کد نویسی هست؟
    لطفا راهنمایی کنید
    ویدئو رو 4 بار دیدم

    • کارشناس پشتیبانی شماره چهار
      2021-06-01 13:43

      سلام خانم مهربان عزیز
      ممکن است کدها را به درستی وارد نکرده باشید. از ناحیه کاربری یک تیکت ارسال کنید تا همکاران ما شما را راهنمایی کنند.
      با تشکر

  • محمد خسروی
    2021-05-06 11:37

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

  • مهران کولابادی
    2021-02-01 20:30

    سلام با تشکر از آموزش خوبتون

    ولی این کد نیاز نیست میتونین هر چیزی که میخواین نمایش نده تو موبایل رو در قسمت hidden elements بزارینش اون قسمتی که پایننه، حالت هاشور زده داره زیر نوشته المان های سربرگ

    • تیم پشتیبانی
      2021-02-06 14:39

      سلام بر شما، این امکان در ورژن جدید ایجاد شده و در زمان ضبط ویدئو میسر نبوده است. ما نیز ویدئو را بزودی تغییر خواهیم داد. باتشکر

  • علیرضا محمدزاده
    2021-01-31 14:33

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

  • سید امین علوی
    2021-01-07 01:12

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

  • جمشید زینلی
    2020-11-28 13:10

    دوستان به جای کد نویسی می تونید المان مورد نظر رو در قسمت المان های سربرگ مخفی کنید.

    • آرسته
      2021-02-06 19:22

      سلام!
      ممکنه دقیق بفرمایید کجا؟ من هرچی می کردم نیست! توی تب طراحی در المان هاست؟ یا تنظیمات عمومی سربرگ؟ ممنون میشم راهنمایی کنید

      • امیرحسین زارعان
        2021-08-18 16:53

        با سلام
        در همان قسمتی که کلاس اضافی ایتم را قرار میدهید پایین تر دو گزینه<> و <> هست که با توجه به سربرگ چسبان میتوانید از یکی از این دو گزینه استفاده کنید برای نمایش دادن یا ندادن گزینه
        با تشکر!

  • علی فتاحی
    2020-11-21 00:20

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

  • مريم مقدم
    2020-11-16 01:47

    سلام ممنون از آموزش هاي عاليتون
    سايت من به زبان انگيليسيه در حالت موبايل ايتم هاي منو من از پايين به بالا نمايش داده ميشوند بايد چيكار كنم كه مثلاhome , projectsو…. به ترتيب در حالت موبايل از بالا به پايين نمايش داداه شوند؟
    بايد منوهاي جداگانه اي براي حالت دسكتاپ و موبايل طراحي كنم ؟اصلا يه همچين چيزي امكان داره؟
    خيلي ممنون

  • با سلام در کدام سمت میتونم هدینگ یا همان تگ های صفحه اول سایت رو ویرایش کنم اگه براتون مقدوره کامل توضیح بدید

  • قاسمی
    2020-11-13 09:01

    سلام و تشکر از آموزش‌های بی‌نظیرتون

    آیا در قالب فلت سام هم این مدل کدنویسی لازمه؟
    راستش من با اون قالب زمانی‌که Duplicate می‌کنم در صفحه دوم روی حالت موبایل و در صفحه اول روی حال دسکتاپ تنظیماتی انجام می‌دم انتشار هم می‌زنم اوکی هست.
    اما وقتی صفحه را Refresh می‌کنم هر دو هدر مثل هم می‌شود. البته گفتم کدنویسی نمی‌کنم چون قالبم فلت سامه. مثلا لوگو را در حالت موبایل وسط می‌گذارم و در حالت دسکتاپ سمت راست. با رفرش هر دو هدر یکی می‌شود.

    ممنون از پاسخ‌گویی

    • تیم پشتیبانی
      2020-11-14 02:41

      سلام ، در هر قالبی متفاوت می باشد ولی بطور کلی با استفاده از افزونه مداد زرد در هرقالبی می توانید تغییرات مناسبی لحاظ نمایید. باتشکر

  • من طبق ویدئو کار رو انجام دادم و اوکی شد، ولی وقتی اسم فایل کلاس اضافی در هرکدوم از قسمت ها عوض بشه، در قسمت های دیگرهم همون اسم میشه!

  • حانیه رحیم
    2020-10-27 11:29

    سلام، کلمه ی important که جلوی کد مینویسه برای چیه؟

  • استاد گفتند اینجا کد رو میذارند. نیست؟

  • محسن پوردهقان
    2020-10-14 16:59

    یه دفعه وسط ویدیو فکر کنم میکروفون خراب شد
    چون صدا برای من یکم خش خشی شد

  • مائده
    2020-10-14 15:33

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

  • علیرضا حسنی
    2020-10-07 02:07

    بخش css خیلی جذاب بود ولی کاش راه حل اسون تر یعنی drag &drop رو هم می گفتید

  • کارشناس پشتیبانی شماره سه
    2020-10-03 19:23

    سلام بر شما کابر گرامی، در حال تست کامنت هستیم.

فهرست