آموزش inspect element

قصد دارم به روان ترین روش ممکن، به آموزش inspect element بپردازم

خیلی سریع میریم سراغ آموزش

برای این کار ابتدا صفحه اول سایت ما را باز کنید

هر قسمتی از صفحه که می خواهید کلیک راست کنید

آخرین گزینه که همان inspect element می باشد را انتخاب کنید

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

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

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

با یک مثال کاربردی دیگر این قسمت را آموزش می دهیم.

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

جواب: بر روی لوگو رفته و کلیک راست می کنیم  سپس inspect element را انتخاب می کنیم.

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

در همین حال به قسمت سمت راست نگاه کنید، متوجه می شوید که کد های مربوط به جزئیات لوگو نمایان شده و شما به راحتی می توانید آن ها را تغییر دهید.

برای جواب دادن به مثال می بایست در سطر سوم کد margin-top: -50px; را تغییر دهید.

مثلا آن را به margin-top: 10px; تغییر دهید، مشاهده می کنید که لوگوی سایت پایین آمد.

اکنون اگر صفحه را reload نمایید می بینید که تغییر اعمال شده از بین خواهد رفت.

چه کنیم که این تغییرات در سایت ذخیره شود و برای همه قابل مشاهده شود.

روش ذخیره تغییرات در inspect element:

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

این همان کدی است که ما تغییر داده ایم و برای اعمال تغییرات در سایت به آن احتیاج داریم.

آن را کپی نمایید.

محل قرار دادن تغییرات در inspect element:

اگر سایت شما با وردپرس ، جوملا ، دروپال ، پرستا شاپ و یا دیگر سیستم های مدیریت محتوا ساخته شده می بایست به قسمت CSS در تنظیمات قالب رفته و این سطر کد  را در آنجا paste و سپس ذخیره نمایید.

اما اگر سایت شما با هر روشی غیر از این ساخته شده باشد، می بایست به فایل Style.css رفته و این خط کد را در آنجا paste و سپس ذخیره نمایید.

امیدوارم مفید بوده باشد

نمونه ای از آخرین کارهای ما

آموزش inspect elementReviewed by Goolexacom on Oct 24Rating: 5.0آموزش inspect elementآموزش inspect element

10 دیدگاه ها

  1. kimia seo گفت:

    اولین جاییه که تو ۱۰ دقیقه inspect element رو آموزش دادی
    ممنون از آموزش مفیدتون

  2. امیر باحال گفت:

    من که نفهمیدم چی شد چه جوری سیو شد؟

    • goolexacom گفت:

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

      • fatima گفت:

        سلا وقتتون بخیر من یه تغییراتی با inspect element رو سایتم دادم حالا اگه بخام برگشت بدم به تغییرات قبلی چکار کنم؟
        سایتم وردپرسه. ممنون میشم جواب بدین.

        • goolexacom گفت:

          سلام
          خوب شما به دو صورت می تونید تغییراتی که در inspect element دادید رو ذخیره کنید، که با پاک کردن بخش جدید به حالت قبل از تغییرات بر می گردید. در صورتی که به مشکل خوردید از طریق ایمیل درخواست راهنمایی کنید تا اصلاح کنیم

  3. حافظ گفت:

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

  4. edressyousofi گفت:

    سلام : من یک مشکلی دارم از طریق element inspect تغیر میتم و save کرده نمتوانم اما چطور میتونم save کنم
    مشکل سایت به من این استه باید باز کنم سایت را اما باز نمیشه
    ۱جهانگردی
    ۲ افغانستان
    ۳ عادی
    ۴ قنسلگری مزار شریف را میزنم اما ظرفیت میگه
    این هم سایت اش :evisatraveller.mfa.ir/fa/request/apply/

    • goolexacom گفت:

      ذخیره تغییرات در inspect element نیازمند دسترسی به هاست می باشد
      با تیم پشتیبانی ارتباط برقرار کنید

  5. saeed گفت:

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

    • goolexacom گفت:

      بله اگر مدیز سایت یا طراح سایت باشید با تغییر css می توانید ظاهر سایت را تغییر دهید نه قیمت دیتا بیس را

پاسخ دهید

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

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

پشتیبانی سایت سئو سایت

خدمات سایت

سئو

خدمات سایت

پشتیبانی سایت سئو سایت خدمات سایت