Inspect Element ব্যবহার করে সহজেই ডিজাইন করুন নিজের সাইট !! 

আমরা যখন বিভিন্ন ওয়েবসাইটে ভিজিট করি তখন নিজের সাইট এর জন্য অনেক কিছুই ভাল লাগে। কিন্তু কোড না জানার  জন্য আমরা তা করতে পারিনা।
আমরা চাইলে আমাদের সাইট এর জন্য এমন অনেক কিছু করতে পারি সহজেই। CSS কোড কপি করে একই ডিজাইন প্রয়োগ করতে পারেন আপনার সাইটে।
Mozilla Firefox(version ১৩.0.2থেকে ১৬.০.২) এ Inspect Element কাজ করে। তাই আপনার ব্রাউজার যদি অন্য কোনটা হয়ে থাকে তাহলে আগে লেটেষ্ট ভারশান ডাউনলোড করে নিন।
এরপর  নিচের নিয়মগুলো অনুসরন করুন(এটি একটি উদাহরণ) :-
১.  এই  সাইটটি ভিজিট করুন। একই্সাথে নিজের সাইটটি new tab এ open করুন।
2. আপনার tourist-spots এর হেডার ইমেজটি ভাল লেগে থাকে তাহলে হেডার ইমেজ এর উপর কার্সর রেখে ডান বাটনে ক্লিক করে view ইমেজ দিয়ে ইমেজটি সেভ করুন। তারপর আপনার মিডিয়া লাইব্রেরীতে এটি যোগ করুন।
৩. এরপর ইমেজটির উপর কারসর রেখে ডান বাটনে কি্লিক করে inspect element কি্লিক করুন।আপনি দেখতে পাবেন সাইটির ডানে Style. CSS সেখানে ক্লিক করুন। দেখতে পাবেন Mozilla editor window টি ওপেন হয়েছে।সেখানে হেডার অংশের CSS কোড টুকু কপি করে আপনার Style.css এর হেডার অংশে কপি করুন। তারপর…

৪.মিডিয়া লাইব্রেরী ওপেন করে এডিট (Edit)এ কিল্ক করুন।লিঙ্কটি কপি করে হেডার কোডে background url টি যোগ করুন।সেভ বাটনে ক্লিক  করুন।
৫. header.php ফাইল ওপেন করে wrapper অংশে নিচের কোড পেস্ট করুন।<div>
<div id=”header” onclick=”location.href='<?php bloginfo(‘url’); ?>';” style=”cursor: pointer;”>
</div>
৬. সেভ করে নিজের সাইট রিলোড করুন দেখতে পাবেন আপনার কাঙ্খিত হেডার ইমেজটি যোগ হয়েছে।
৭.এটি একটি উদাহরন ছিল।চাইলে আপনি এই পদ্ধতি ব্যবহার করে আপনার হেডার ইমেজটি যোগ করার জন্য Inspect element করে কোড কপি করে আপনার ইমেজ height,width,background url যোগ করে এবং header.php তে wrapper অংশে কোডটি যোগ করে আপনার সাইট রিলোড দেওয়ার মাধ্যমে যোগ করুন আপনার কাঙ্খিত হেডার ইমেজ।