বোলা যায়, কন্টেন্ট ইচ্ছে রাজা, কিন্তু চেহারা হলো রানী। আজকের ওয়েব প্রপার্টির অবস্থায় এটি একদম সঠিক। একটি আকর্ষণীয় ডিজাইন ওয়েব মালিকদের দর্শকদের توجه আকর্ষণ করতে সাহায্য করে। ভালো লেআউট, সুসঙ্গত রঙ সংমিশ্রণ এবং সুন্দর ফন্ট ছাড়াও, ভিজিটারের তাৎক্ষণিক লক্ষ্য আকর্ষণের উপায়ের একটি হলো টাইপরাইটারের মত চালমান টেক্সট ব্যবহার করা। আপনি যদি ওয়ার্ডপ্রেস ব্যবহারকারী হন, তবে Typed Js নামক প্লাগইন ব্যবহার করে সহজেই এই ইফেক্ট যোগ করতে পারেন।
নোট: যেহেতু ইফেক্টটি হলো চালমান টেক্সট, এবং শব্দ বা স্ট্যাটিক ছবির মাধ্যমে এর 'কুলনেস' বর্ণনা করা কঠিন, তাই আমি আমার পারসোনাল ওয়েবসাইট প্রজেক্টে এটি ব্যবহার করেছি, আপনি সেখানে ফলাফল দেখতে পারেন।
প্লাগইন ইনস্টল এবং সেটআপ
ওয়ার্ডপ্রেসে প্লাগইন ইনস্টল করা খুব সহজ, বিশেষ করে তাদের জন্য যারা কিছুক্ষণ প্ল্যাটফর্মের সাথে কাজ করেছেন। আপনাকে শুধু অ্যাডমিন এরিয়াতে লগইন করে বাম সাইডবারের 'Plugins → Add New' মেনু ব্যবহার করতে হবে। প্লাগইন রিপোজিটরি থেকে 'Typed Js' সার্চ করুন, তারপর ইনস্টল এবং এক্টিভেট করুন।
এখন আপনি নতুন Typed Js ইফেক্ট যোগ করার জন্য প্রস্তুত। প্রক্রিয়াটি কম বেশি নতুন পোস্ট যোগ করার মতো। প্রথমে বাম সাইডবারের 'Typed → Add New' মেনুতে যান, তারপর আপনার নতুন Typed ইফেক্টের একটি নাম দিন।
গুরুত্বপূর্ণ! 'Generated Shortcode'-এ ফোকাস করুন। এটি '[' এবং ']' ব্র্যাকেটের মধ্যবর্তী স্ট্রিং। ব্র্যাকেটসহ পুরো স্ট্রিং কপি করুন এবং যেখানে দেখাতে চান সেখানে শর্টকোড বসান। ভিন্ন স্ট্রিং সেটের জন্য ভিন্ন শর্টকোড থাকবে।
'Typed Options'- থেকে আপনি যে শব্দ/ফ্রেজ/বাক্যগুলো দেখাতে চান সেগুলো পছন্দমত ক্রমে যোগ করতে পারেন। নতুন স্ট্রিং যোগ করতে 'Plus (+)' বাটন এবং এন্ট্রি ডিলিট করতে 'Minus (-)' বাটন ব্যবহার করুন।
স্ট্রিংগুলোর নিচে ইফেক্টের চেহারা কাস্টমাইজ করার জন্য বিভিন্ন সেটিং রয়েছে। আপনি টাইপিং স্পিড, স্টার্ট ডিলে, ব্যাক স্পিড এবং ব্যাক ডিলে কাস্টমাইজ করতে পারেন। সব সংখ্যা মিলিসেকেন্ডে। আপনি স্ট্রিংগুলো লুপে দেখাতে পারেন, কার্সর দেখাতে পারেন, কার্সর হিসেবে কোনো ক্যারেক্টার বেছে নিতে পারেন এবং এটি ব্লিংক করাতে পারেন।
আপনি যা আর কাস্টমাইজ করতে পারেন তা হলো ডিসপ্লে, যেমন ফন্ট এবং রঙ।
সব সেটিং সম্পন্ন হলে 'Publish' বা 'Update' বাটন চাপুন।
ওয়ার্ডপ্রেসে ইফেক্ট ব্যবহার করা
আগে বলা মতে, Typed ইফেক্ট ব্যবহার করতে শর্টকোড কপি করে যেখানে দেখাতে চান সেখানে পেস্ট করুন। আমার ওয়েবসাইটের জন্য, আমি SiteOrigin Page Builder-এ তৈরি করা ল্যান্ডিং পেজে এটি ব্যবহার করব।
প্রথমে 'Pages → Add New' দিয়ে একটি নতুন পেজ তৈরি করুন। তারপর 'Page Builder' ট্যাবে স্যুইচ করুন, একটি নতুন 'Row' যোগ করুন, এক কলাম সেট করুন, এবং সেরোতে 'SiteOrigin Hero' উইজেট যোগ করুন।
তারপর ফ্রেমটি খুলুন এবং সাধারণ ওয়ার্ডপ্রেস পোস্টের মতো কন্টেন্ট এডিট করুন। আগের পোস্টে জেনারেট করা শর্টকোডটি বসান।
ডিজাইন সম্পূর্ণ করতে, আগে সেটআপ করা 'Contact Me' পেজে লিংক করা একটি 'button' যোগ এবং কাস্টমাইজ করুন যাতে আমার সার্ভিস চাইলে দর্শক যোগাযোগ করতে পারে।
এখানে চূড়ান্ত ফলাফল। ইফেক্ট রিয়েল টাইমে একশনে দেখতে চাইলে আমার সাইট ভিজিট করুন।
আপনি যেকোনো সংখ্যক Typed Js আইটেম তৈরি করতে পারেন, তারপর শর্টকোড কপি-পেস্ট করে পোস্ট বা পেজের যেকোনো জায়গায় ইফেক্ট বসাতে পারেন। যদিও খুব কুল হতো, কিন্তু টাইটেলে এই ইফেক্ট ব্যবহার করা যায় না। আমি চেষ্টা করেছিলাম।
আপনি Typed Js ইফেক্ট সম্পর্কে কী ভাবেন? আপনার ওয়ার্ডপ্রেস সাইটে এটি ব্যবহার করতে পারেন কি? কমেন্টে আপনার মতামত শেয়ার করুন।
