Delete/Hide Element আপনাকে মাত্র এক ক্লিকে ওয়েবপৃষ্ঠার যেকোনো এলিমেন্ট মুছে ফেলতে বা সাময়িকভাবে লুকিয়ে রাখতে দেয়। স্ক্রিনশটের জন্য পেজটি পরিষ্কার করুন, বিভ্রান্তিকর বিজ্ঞাপন এবং কুকি ব্যানার সরিয়ে ফেলুন অথবা কিছু সেকশন ছাড়াই লেআউট কেমন দেখাবে তা পরীক্ষা করুন — সবই কোনো ক্ষতি ছাড়াই (non-destructively)।
আপনি আপনার পোর্টফোলিও-র জন্য একটি পরিষ্কার স্ক্রিনশট নিচ্ছেন, কোনো সেকশন সরিয়ে ফেললে পেজ লেআউট কীভাবে নতুন করে সাজানো হয় তা পরীক্ষা করছেন অথবা নিচের কন্টেন্ট পড়ার জন্য বিরক্তিকর পপআপ ওভারলেগুলো লুকাতে চাইছেন — এই সবকিছুর জন্যই 'Delete/Hide Element' হলো আদর্শ টুল। এটি দুটি মোড অফার করে: ডিলিট (DOM থেকে এলিমেন্টটিকে সম্পূর্ণ সরিয়ে ফেলে, ফলে আশেপাশের কন্টেন্ট সেই ফাঁকা জায়গায় পুনরায় সাজানো হয়) এবং হাইড (দৃশ্যমানতা হিডেন (hidden) করে দেয়, কিন্তু লেআউটে এলিমেন্টটির জায়গা সংরক্ষিত থাকে)। উভয় অপারেশনই আনডু (Undo) এর মাধ্যমে রিভার্স করা সম্ভব। আপনি ক্লিক করার আগে ঠিক কোন এলিমেন্টটি প্রভাবিত হবে তা একটি লাল হোভার ওভারলে দিয়ে দেখানো হয়, তাই কোনো অনুমানের প্রয়োজন নেই। টুলটি মুছে ফেলা এবং লুকানো এলিমেন্টগুলোর সংখ্যা ট্র্যাক করে এবং আপনি সেগুলোকে একে একে বা একসাথে আনডু করতে পারেন। সমস্ত DevSuite টুলের মতো পরিবর্তনগুলো অস্থায়ী — পেজ রিফ্রেশ করলেই সবকিছু আগের মতো ফিরে আসবে।
ডিলিট (Delete) মোডে, যেকোনো এলিমেন্টকে পেজ থেকে সম্পূর্ণ সরিয়ে ফেলতে সেটিতে ক্লিক করুন। এলিমেন্টটি DOM থেকে সরিয়ে নেওয়া হয় এবং আশেপাশের কন্টেন্ট সেই জায়গা পূরণ করতে নতুন করে সাজানো হয় — ঠিক যেমনটা হতো যদি HTML-টির অস্তিত্বই না থাকতো। কোনো নির্দিষ্ট সেকশন ছাড়াই পেজটি কেমন দেখাবে তা দেখার জন্য এটি চমৎকার।
হাইড (Hide) মোডে, লেআউটে এলিমেন্টটির জায়গা ঠিক রেখে সেটিকে অদৃশ্য করতে ক্লিক করুন। এলিমেন্টটি স্বচ্ছ হয়ে যায় কিন্তু এর বক্স ডাইমেনশন বজায় থাকে, ফলে পেজের বাকি লেআউট একদম একই থাকে। লেআউটে কোনো পরিবর্তন ছাড়াই ভিজ্যুয়াল ওয়েট (visual weight) পরীক্ষার জন্য এটি কার্যকর।
আপনি ক্লিক করার আগে মাউস মুভ করলে এলিমেন্টটির ওপর একটি লাল রঙের সেমি-ট্রান্সপারেন্ট ওভারলে প্রদর্শিত হয়। এই প্রিভিউ ভুলবশত ভুল এলিমেন্ট মুছে ফেলা প্রতিরোধ করে — আপনি সব সময় ঠিক দেখতে পারেন আপনি কী রিমুভ করতে যাচ্ছেন।
প্রতিটি ডিলিট এবং হাইড অ্যাকশন একটি আনডু হিস্ট্রিতে ট্র্যাক করা হয়। শেষ অ্যাকশনটি রিভার্স করতে এবং এলিমেন্টটিকে ফিরিয়ে আনতে Undo বোতামে ক্লিক করুন। আপনি ধাপে ধাপে আপনার পরিবর্তনগুলো বাতিলের জন্য ধারাবাহিকভাবে একাধিক অ্যাকশন আনডু করতে পারেন।
একটি লাইভ কাউন্টার দেখায় আপনি বর্তমান সেশনে কতগুলো এলিমেন্ট মুছেছেন এবং কতগুলো লুকিয়েছেন। এক নজরে আপনি জানতে পারেন কতগুলো পরিবর্তন করেছেন এবং কতগুলো আনডু করা সম্ভব।
সমস্ত পরিবর্তন নিছক ভিজ্যুয়াল এবং কেবল ব্রাউজারের মেমরিতে থাকে। পেজের আসল কোড কখনই পরিবর্তিত হয় না। প্রতিটি মুছে ফেলা এবং লুকানো এলিমেন্টকে তাৎক্ষণিকভাবে তাদের আসল অবস্থায় ফিরিয়ে নিতে যেকোনো সময় পেজটি রিফ্রেশ করুন।
স্ক্রিনশট নেওয়ার আগে কুকি কনসেন্ট ব্যানার, চ্যাট উইজেট, প্রোমোশনাল পপআপ, স্টিকি হেডার এবং নিউজলেটার ওভারলেগুলো সরিয়ে ফেলুন। পেজ কন্টেন্টের একটি পরিষ্কার ও প্রফেশনাল ক্যাপচার পান।
প্রশংসাপত্র (testimonials) সেকশন ছাড়াই পেজটি কেমন দেখাবে? সাইডবারটি সরিয়ে ফেললে কী হবে? সেকশনটি ডিলিট করুন এবং সাথে সাথে লেআউটের রিলফ্লো দেখুন — কোনো কোড পরিবর্তনের প্রয়োজন নেই।
বিরক্তিকর বিজ্ঞাপনে ভরা পেজগুলোতে বিজ্ঞাপনের এলিমেন্টগুলো লুকিয়ে ফেলুন যাতে আপনি কোনো বিভ্রান্তি ছাড়াই আর্টিকেল এবং ডকুমেন্টেশন পড়তে পারেন। ফাঁকা জায়গা পূরণে কন্টেন্ট নতুন করে সাজানো হবে।
একটি জটিল ওয়েবপৃষ্ঠা ব্যবহার করে প্রেজেন্টেশন তৈরি করছেন? আপনার প্রাসঙ্গিক নয় এমন এলিমেন্টগুলো সরিয়ে ফেলুন এবং কেবল আলোচনা করতে চান এমন সেকশনগুলো রাখুন। তারপর সেই সহজ করা ভিউটির স্ক্রিনশট নিন।
যদি এলিমেন্টগুলো ওভারল্যাপ করে বা একে অপরকে ঢেকে ফেলে, তবে নিচে কী আছে তা দেখতে উপরের এলিমেন্টটি ডিলিট করুন। এটি প্রায়শই ডেভ-টুলে z-index বা ডিসপ্লে প্রপার্টি পরিবর্তনের চেয়েও দ্রুত কাজ করে।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং Delete/Hide Element আইকনে ক্লিক করুন। ডিলিট মোড (এলিমেন্ট সরিয়ে ফেলে এবং লেআউট রিফ্লো করে) অথবা হাইড মোড (অদৃশ্য করে কিন্তু জায়গা সংরক্ষিত রাখে)-এর মধ্যে বেছে নিন।
পেজের ওপর মাউস মুভ করুন। আপনার কার্সারের নিচে থাকা এলিমেন্টটিকে একটি লাল সেমি-ট্রান্সপারেন্ট ওভারলে দিয়ে হাইলাইট করা হবে, যা ক্লিক করলে কী প্রভাবিত হবে তা দেখায়।
হাইলাইট করা এলিমেন্টে ক্লিক করুন। ডিলিট মোডে এটি রিমুভ হয়ে যাবে এবং আশেপাশের কন্টেন্ট নতুন করে সাজানো হবে। হাইড মোডে এটি অদৃশ্য হয়ে যাবে কিন্তু এর জায়গা সংরক্ষিত থাকবে।
আরও এলিমেন্ট মুছতে ক্লিক করতে থাকুন অথবা শেষ রিমুভ/হাইড করা এলিমেন্ট ফিরিয়ে আনতে Undo-তে ক্লিক করুন। অ্যাকশন কাউন্টার আপনার বর্তমান পরিবর্তনগুলো দেখাবে।
পরীক্ষা শেষ? প্রতিটি এলিমেন্টকে তাদের আগের অবস্থায় তাৎক্ষণিক ফিরিয়ে নিতে পেজ রিফ্রেশ করুন।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।
