Live Text Editor ওয়েবপেজের প্রতিটি টেক্সট এলিমেন্টকে এক ক্লিকেই এডিটযোগ্য করে তোলে। হেডলাইন, প্যারাগ্রাফ, বাটন লেবেল, নেভিগেশন আইটেম বা যেকোনো টেক্সট কন্টেন্ট সরাসরি লাইভ পেজেই পরিবর্তন করুন — এডিট করা টেক্সটটি পেজের আসল ফন্ট, কালার এবং লেআউট ঠিক রেখেই রিয়েল-টাইমে রেন্ডার হবে। কপির ভিন্ন ভিন্ন ভার্সন টেস্ট করা, মকআপ তৈরি করা এবং কাস্টম কন্টেন্টসহ স্ক্রিনশট নেওয়ার জন্য এটি উপযুক্ত।
আপনি কি কখনো ভেবেছেন "এই হেডলাইনটির শব্দগুলো অন্যরকম হলে কেমন দেখাতো" অথবা "আমার এই পেজটির একটি স্ক্রিনশট প্রয়োজন যেখানে প্লেসহোল্ডারের বদলে আমাদের ক্লায়েন্টের নাম থাকবে"? সাধারণত এর জন্য কোড এডিট করা, রিবিল্ড করা অথবা ইমেজ এডিটর ব্যবহার করে টেক্সট বসাতে হয়। Live Text Editor এই সব ঝামেলার অবসান ঘটায় — কেবল পেজের যেকোনো টেক্সটের ওপর ক্লিক করুন এবং টাইপ শুরু করুন। 'contentEditable' ব্যবহারের ফলে টেক্সটটি যথা স্থানেই এডিট করা যায়, যার ফলে এলিমেন্টের সব আসল CSS স্টাইলিং অপরিবর্তিত থাকে: যেমন ফন্ট ফ্যামিলি, ফন্ট সাইজ, ফন্ট ওয়েট, কালার, লেটার-স্পেসিং, লাইন-হাইট, টেক্সট-ট্রান্সফর্ম এবং অন্যান্য টেক্সট প্রোপার্টি। আপনার টাইপ করার সাথে সাথে লেআউটটিও রিয়েল-টাইমে আপডেট হয় — যদি নতুন টেক্সটটি লম্বা হয় তবে এলিমেন্টটি স্বাভাবিকভাবেই বড় হয়ে যায়। এক সেশনে যত খুশি টেক্সট এলিমেন্ট এডিট করুন। একটি এডিট কাউন্টার আপনার করা পরিবর্তনের সংখ্যা ট্র্যাক করে এবং "Undo All" বাটনটি তাৎক্ষণিকভাবে সবকিছু আগের অবস্থায় ফিরিয়ে আনে। সমস্ত পরিবর্তন কেবল ভিজ্যুয়াল এবং পেজ রিফ্রেশ করলেই তা মুছে যায়।
পেজের যেকোনো টেক্সট এলিমেন্টে — যেমন হেডিং, প্যারাগ্রাফ, স্প্যান, বাটন লেবেল, লিঙ্ক টেক্সট, লিস্ট আইটেম, টেবিল সেল — ক্লিক করলেই তা সাথে সাথে এডিটযোগ্য হয়ে যায়। একটি ব্লিঙ্কিং কার্সার আসবে এবং আপনি টাইপ শুরু করতে পারবেন। কোনো সিলেকশন মোড বা বাড়তি ক্লিকের প্রয়োজন নেই।
এডিট করা টেক্সট প্রতিটি আসল CSS প্রোপার্টি বজায় রাখে: যেমন font-family, font-size, font-weight, color, line-height, letter-spacing, text-transform এবং লেআউট প্রোপার্টি। টেক্সটটি দেখে মনে হবে এটি পেজেরই অংশ — কোনো আলগা ওভারলে নয়।
আপনি ছোট বা বড় টেক্সট টাইপ করার সাথে সাথে এলিমেন্টটি স্বাভাবিকভাবে তার সাইজ পরিবর্তন করে এবং চারপাশের লেআউটটিও আসল কন্টেন্টের মতোই বিন্যস্ত হয়। ভিন্ন ভিন্ন টেক্সট দৈর্ঘ্য লেআউটকে কীভাবে প্রভাবিত করে তা সুস্পষ্টভাবে দেখুন।
এক সেশনে যত খুশি টেক্সট এলিমেন্ট এডিট করুন। হেডলাইন পরিবর্তন করুন, তারপর সাবটাইটেল, তারপর বাটন লেবেল এবং তারপর ফুটার টেক্সট — পেজ রিফ্রেশ না করা পর্যন্ত প্রতিটি পরিবর্তন বজায় থাকবে।
একটি ছোট কাউন্টার দেখায় আপনি কতগুলো এলিমেন্ট এডিট করেছেন। "Undo All" এক ক্লিকেই প্রতিটি এডিট করা এলিমেন্টকে তার আসল টেক্সট কন্টেন্টে ফিরিয়ে আনে। ব্যক্তিগত প্রতিটি পরিবর্তন "was: original text" হিন্ট-এর মাধ্যমে ট্র্যাক করা হয়।
সমস্ত এডিট কেবল ব্রাউজারের DOM-এ থাকে এবং কখনোই সার্ভারে সেভ হয় না। পেজ রিফ্রেশ করলেই প্রতিটি টেক্সট এলিমেন্ট তার আসল কন্টেন্টে ফিরে আসে। যেকোনো ওয়েবসাইটে — এমনকি প্রোডাকশন সাইটেও এটি ব্যবহার করা নিরাপদ।
কোন শব্দগুলো সবচেয়ে বেশি কার্যকর তা দেখতে লাইভ পেজে হেডলাইনের ভিন্ন ভিন্ন ভার্সন ট্রাই করুন। যেমন "Get Started Free" বনাম "Start Your Free Trial" বনাম "Create Your Account" — আসল পেজ ডিজাইনের সাথে প্রতিটি ভার্সন কেমন দেখায় তা দেখুন।
কোনো প্রেজেন্টেশনের সময় প্লেসহোল্ডার টেক্সটের ("Lorem ipsum") বদলে ক্লায়েন্টের আসল কন্টেন্ট বসিয়ে দেখান। তাদের কোম্পানির নাম, প্রোডাক্ট ডেসক্রিপশন এবং CTA কপি আসল ডিজাইনে রেন্ডার করে দেখান — যা একটি স্ট্যাটিক মকআপের তুলনায় অনেক বেশি জোরালো হবে।
ডকুমেন্টেশন, ব্লগ পোস্ট বা প্রেজেন্টেশন স্লাইডের জন্য নির্দিষ্ট টেক্সটসহ একটি স্ক্রিনশট প্রয়োজন? সরাসরি টেক্সটটি এডিট করুন এবং তারপর আপনার কাস্টম কন্টেন্টসহ একটি পরিষ্কার ছবি নিতে 'Screenshot tool' ব্যবহার করুন।
কোনো প্রোডাক্টের নাম ১৫টির বদলে ৪০ ক্যারেক্টার হলে কী ঘটবে? অথবা ডেসক্রিপশন ১ লাইনের বদলে ৩ লাইন হলে? লেআউটটি কীভাবে এটি হ্যান্ডেল করছে তা দেখতে লম্বা টেক্সট টাইপ করুন — আসল কন্টেন্ট আসার আগেই ওভারফ্লো বাগগুলো খুঁজে বের করুন।
ভিন্ন ভিন্ন ভাষা ডিজাইনে কীভাবে প্রভাব ফেলে তা দেখতে এলিমেন্টগুলোতে অনুবাদ করা টেক্সট পেস্ট করুন। জার্মান টেক্সট প্রায়ই ইংরেজি টেক্সটের তুলনায় ৩০% বেশি লম্বা হয় — তখন কি লেআউটটি ঠিক থাকে? বাটন টেক্সট কি তখনো ভেতরে আঁটবে? তা যাচাই করুন।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং Live Text Editor আইকনে ক্লিক করুন। টুলটি সক্রিয় হবে এবং পেজের প্রতিটি টেক্সট এলিমেন্ট এডিট করার জন্য ক্লিকেবল হয়ে যাবে।
একটি হেডিং, প্যারাগ্রাফ, বাটন লেবেল বা যেকোনো টেক্সট কন্টেন্টে ক্লিক করুন। টেক্সটের ভেতর একটি কার্সার আসবে এবং এলিমেন্টের ওপরে একটি "editing" ব্যাজ প্রদর্শিত হবে।
টেক্সট পরিবর্তন বা পরিমার্জন করতে টাইপ করা শুরু করুন। আপনার নতুন কন্টেন্টটি আসল স্টাইলিং বজায় রেখেই রিয়েল-টাইমে রেন্ডার হবে। নতুন টেক্সটের দৈর্ঘ্যের সাথে সামঞ্জস্য রেখে লেআউটটি স্বাভাবিকভাবেই অ্যাডজাস্ট হয়ে যাবে।
বর্তমান এলিমেন্টটি এডিট করা শেষ করতে এর বাইরে ক্লিক করুন, তারপর অন্য একটি টেক্সট এলিমেন্ট এডিট করতে সেটিতে ক্লিক করুন। এডিট কাউন্টার সমস্ত পরিবর্তন ট্র্যাক করবে।
প্রতিটি এডিট করা এলিমেন্ট আগের অবস্থায় ফেরাতে "Undo All" ক্লিক করুন, অথবা সবকিছু পুরোপুরি রিসেট করতে পেজটি রিফ্রেশ করুন।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।
