হোভার বা ক্লিকে এলিমেন্টর টুলটিপ কীভাবে যোগ করবেন?

এলিমেন্টরে টুলটিটপ যোগ করুন

আপনি সর্বত্র টুলটিপ দেখেছেন। Google ডক্সে একটি টুলবার আইকনের উপর হোভার করুন এবং একটি ছোট লেবেল আপনাকে বলে যে বোতামটি কী করে। এটি একটি টুলটিপ। ওয়ার্ডপ্রেসে, টুলটিপগুলি আপনাকে ছোট ইঙ্গিত যোগ করতে দেয় যা প্রদর্শিত হয় যখন কেউ আপনার পৃষ্ঠায় একটি উপাদানের উপর ঘোরাফেরা করে (বা ক্লিক করে)। কোন অতিরিক্ত পৃষ্ঠা রিয়েল এস্টেট, কোন বিশৃঙ্খল বিন্যাস।

এলিমেন্টরের জন্য মাস্টার অ্যাডঅন আপনাকে টুলটিপ যোগ করার দুটি উপায় দেয়: টুলটিপ উপাদান, একটি স্বতন্ত্র উইজেট আপনি পৃষ্ঠায় ড্রপ, এবং টুলটিপ এক্সটেনশন, যা ইতিমধ্যেই বিদ্যমান যেকোনো এলিমেন্টর উইজেট, বিভাগ বা কন্টেইনারে একটি টুলটিপ সংযুক্ত করে। এই নির্দেশিকাটি উভয় পদ্ধতিকে কভার করে, কখন প্রতিটি ব্যবহার করতে হবে এবং কীভাবে সেগুলিকে স্টাইল করতে হবে।

টুলটিপ কি এবং কেন তারা গুরুত্বপূর্ণ?

একটি টুলটিপ হল একটি সংক্ষিপ্ত বার্তা যা প্রদর্শিত হয় যখন একজন দর্শক আপনার পৃষ্ঠার একটি নির্দিষ্ট উপাদানের উপর তাদের কার্সার ঘোরায়। ওয়ার্ডপ্রেস সাইটগুলিতে, টুলটিপগুলি কয়েকটি ব্যবহারিক উদ্দেশ্যে পরিবেশন করে:

  • প্রবাহ ভাঙ্গা ছাড়া পদ ব্যাখ্যা করুন। যদি আপনার বিষয়বস্তু জার্গন ব্যবহার করে, একটি টুলটিপ পাঠকদের অনুচ্ছেদে বাধা না দিয়ে হোভারে একটি দ্রুত সংজ্ঞা পেতে দেয়।
  • ছবি এবং আইকন প্রসঙ্গ যোগ করুন। আপনি যখন পণ্য আইকন, দলের সদস্য ফটো, বা বৈশিষ্ট্য আইকন প্রদর্শন করেন, একটি টুলটিপ ভিজ্যুয়াল স্থান গ্রহণ না করে অতিরিক্ত বিশদ প্রদান করে।
  • পাতা পরিষ্কার রাখুন। দৃশ্যমান লেআউটে তথ্যের প্রতিটি অংশকে ক্র্যাম করার পরিবর্তে, পাঠক প্রকৃতপক্ষে সেগুলি না চাওয়া পর্যন্ত টুলটিপগুলি গৌণ বিবরণ লুকিয়ে রাখে।
  • ব্যস্ততা উন্নত করুন। টুলটিপগুলির মতো ইন্টারেক্টিভ উপাদানগুলি দর্শকদের আপনার বিষয়বস্তু অন্বেষণ করতে উত্সাহিত করে৷ যে পৃষ্ঠাগুলি মিথস্ক্রিয়াকে আমন্ত্রণ জানায় সেগুলি দীর্ঘ সময় ধরে মনোযোগ ধরে রাখে।

আপনার যা প্রয়োজন হবে

মাস্টার অ্যাডনস একটি ওয়ার্ডপ্রেস প্লাগইন সহ 80+ উইজেট এবং এক্সটেনশন elementor এর জন্য, এখানে কভার করা উভয় টুলটিপ বৈশিষ্ট্য সহ।

টুলটিপ এলিমেন্ট বনাম টুলটিপ এক্সটেনশন: আপনার কোনটি ব্যবহার করা উচিত?

তারা বিভিন্ন সমস্যার সমাধান করে। সঠিকটি বাছাই করা সময় বাঁচায়।

বৈশিষ্ট্যটুলটিপ উপাদানটুলটিপ এক্সটেনশন
এটা কিএকটি স্বতন্ত্র এলিমেন্টর উইজেটএকটি এক্সটেনশন যা যেকোনো উইজেটে কাজ করে
কাজ করেপাঠ্য, ছবি এবং আইকন (টুলটিপ উইজেটের মধ্যে)কোনো এলিমেন্টর ধারক, বিভাগ, বা উপাদান
জন্য সেরাডেডিকেটেড টুলটিপ কন্টেন্ট ব্লক তৈরি করা হচ্ছেবিদ্যমান পৃষ্ঠা উপাদানগুলিতে টুলটিপ যোগ করা হচ্ছে
কিভাবে অ্যাক্সেস করতে হয়Elementor উইজেট প্যানেল থেকে টেনে আনুন এবং ড্রপ করুনযেকোনো উইজেটের উন্নত ট্যাব থেকে সক্ষম করুন
বিষয়বস্তুর প্রকারটেক্সট টুলটিপ, ইমেজ টুলটিপ, আইকন টুলটিপযেকোনো উপাদানে পাঠ্য-ভিত্তিক টুলটিপ
ব্যবহারের ক্ষেত্রেআপনি টুলটিপগুলির চারপাশে বিশেষভাবে ডিজাইন করা একটি বিভাগ তৈরি করতে চানআপনি একটি বোতাম, শিরোনাম, চিত্র বা আপনার পৃষ্ঠায় ইতিমধ্যেই থাকা যেকোনো উইজেটে একটি দ্রুত টুলটিপ যোগ করতে চান৷

সংক্ষিপ্ত সংস্করণ:

  • আপনার পৃষ্ঠায় ইতিমধ্যেই একটি শিরোনাম, বোতাম বা যেকোনো উইজেটে একটি টুলটিপ যোগ করতে হবে? ব্যবহার কর টুলটিপ এক্সটেনশন.
  • একটি ডেডিকেটেড কন্টেন্ট ব্লক প্রয়োজন যেখানে ব্যবহারকারীরা টুলটিপ কন্টেন্ট দেখতে নির্দিষ্ট টেক্সট, ইমেজ বা আইকনগুলির উপর ঘোরাফেরা করে? ব্যবহার কর টুলটিপ উপাদান.

আপনি একই পৃষ্ঠায় উভয় ব্যবহার করতে পারেন। তারা একে অপরের সাথে বিরোধ করে না।

পদ্ধতি 1: টুলটিপ এলিমেন্ট ব্যবহার করে এলিমেন্টরে টুলটিপ কিভাবে যোগ করবেন

দ্য টুলটিপ উপাদান একটি স্বতন্ত্র উইজেট। আপনি এটিকে আপনার পৃষ্ঠায় টেনে আনুন এবং ব্যবহারকারীরা একটি টুলটিপ বার্তা প্রকাশ করতে পাঠ্য, একটি চিত্র বা একটি আইকনের উপর হোভার করে।

আপনি যখন আপনার পৃষ্ঠার একটি উত্সর্গীকৃত বিভাগ হিসাবে চিত্র টুলটিপ, পাঠ্য টুলটিপ বা আইকন টুলটিপ তৈরি করতে চান তখন এটি ব্যবহার করুন৷।

ধাপ 1: Elementor এ আপনার পৃষ্ঠা খুলুন

আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে, আপনি যে পৃষ্ঠাটি সম্পাদনা করতে চান এবং ক্লিক করতে চান সেখানে নেভিগেট করুন Elementor দিয়ে সম্পাদনা করুন.

ধাপ 2: টুলটিপ উইজেট অনুসন্ধান করুন

বাম দিকে Elementor উইজেট প্যানেলে, অনুসন্ধান বারে "Tooltip”" টাইপ করুন। দ্য এমএ টুলটিপ উইজেট মাস্টার অ্যাডঅন বিভাগের অধীনে প্রদর্শিত হয়। এটিকে আপনার পৃষ্ঠায় টেনে আনুন যেখানে আপনি টুলটিপটি উপস্থিত হতে চান।

Elementor-এর Master Addons বিভাগ থেকে টুলটিপ উইজেটটি টেনে আনুন এবং ফেলে দিন

ধাপ 3: আপনার বিষয়বস্তুর ধরন নির্বাচন করুন

এর সেটিংস খুলতে উইজেটে ক্লিক করুন। অধীনে বিষয়বস্তু ট্যাব, দ বিষয়বস্তুর প্রকার বিকল্প আপনাকে তিনটি পছন্দ দেয়:

  • টেক্সট। টুলটিপ বার্তা দেখতে দর্শকরা আপনার পাঠ্যের উপর ঘোরাফেরা করে।
  • ছবি। টুলটিপ দেখতে দর্শকরা একটি চিত্রের উপর ঘোরাফেরা করে।
  • আইকন। দর্শকরা অতিরিক্ত তথ্য প্রকাশ করতে একটি আইকনের উপর ঘোরাফেরা করে।

আপনার ব্যবহারের ক্ষেত্রে মানানসই বিষয়বস্তুর ধরন বেছে নিন।

টুলটিপ উপাদানের জন্য বিষয়বস্তুর ধরন, প্রান্তিককরণ এবং বসানো সেটিংস

ধাপ 4: টুলটিপ বিষয়বস্তু সেট আপ করুন

আপনার বিষয়বস্তুর ধরন নির্বাচন করার পরে, উভয় অংশ কনফিগার করুন:

ট্রিগার বিষয়বস্তু (দর্শকরা পৃষ্ঠায় যা দেখেন):

  • পাঠ্যের জন্য: শব্দ বা বাক্যাংশ লিখুন দর্শকরা ঘুরে বেড়াবে
  • ছবির জন্য: আপনার ওয়ার্ডপ্রেস মিডিয়া লাইব্রেরি থেকে একটি ছবি আপলোড করুন
  • আইকনের জন্য: আইকন লাইব্রেরি থেকে একটি আইকন বেছে নিন

টুলটিপ বিষয়বস্তু (হোভারে যা দেখা যাচ্ছে):

  • যাও টুলটিপ সেটিংস বিভাগ
  • অন্তর্নির্মিত সম্পাদকে আপনার টুলটিপ পাঠ্য লিখুন
  • আপনি বোল্ড, তির্যক, লিঙ্ক এবং আরও অনেক কিছু দিয়ে পাঠ্য বিন্যাস করতে পারেন

ধাপ 5: টুলটিপ দিক এবং গতি কনফিগার করুন

টুলটিপ সেটিংসে, টুলটিপটি কীভাবে প্রদর্শিত হবে তা সেট করুন:

  • টুলটিপ দিকনির্দেশ। ট্রিগারের সাপেক্ষে টুলটিপটি কোথায় পপ আপ হবে তা চয়ন করুন: উপরে, নীচে, বাম বা ডান।
  • টুলটিপ গতি। মিলিসেকেন্ডে অ্যানিমেশন গতি সেট করুন। নিম্ন মান এটি দ্রুত প্রদর্শিত করে তোলে।

টিপ: টুলটিপ গতি 300-500m এর মধ্যে রাখুন। খুব দ্রুত আকস্মিক মনে হয়, খুব ধীর প্রতিক্রিয়াহীন বোধ করে।

টুলটিপ বিকল্প প্যানেল অনুসরণ কার্সার, বসানো, অ্যানিমেশন, ট্রিগার, এবং অফসেট সেটিংস দেখাচ্ছে

ধাপ 6: আপনার টুলটিপ স্টাইল করুন

সুইচ শৈলী আপনার Elementor টুলটিপ উইজেটের চেহারা কাস্টমাইজ করতে ট্যাব:

  • বিষয়বস্তু সর্বোচ্চ প্রস্থ। টুলটিপ বক্স কতটা প্রশস্ত হতে পারে তা নিয়ন্ত্রণ করে।
  • পটভূমির রঙ। টুলটিপ ব্যাকগ্রাউন্ড সেট করুন।
  • টেক্সট কালার। টুলটিপ ফন্টের রঙ পরিবর্তন করুন।
  • টাইপোগ্রাফি। ফন্ট পরিবার, আকার, ওজন এবং ব্যবধান সামঞ্জস্য করুন।
  • বক্স ছায়া। একটি ছায়া প্রভাব সঙ্গে গভীরতা যোগ করুন।
  • বর্ডার। সীমানা যোগ করুন এবং বৃত্তাকার কোণগুলির জন্য সীমানা ব্যাসার্ধ সেট করুন।
  • প্যাডিং। পাঠ্য এবং টুলটিপ প্রান্তের মধ্যে স্থান নিয়ন্ত্রণ করুন।

আপনি জন্য বিভিন্ন শৈলী সেট করতে পারেন স্বাভাবিক এবং ঘোরাঘুরি করা রাজ্যগুলি চাক্ষুষ প্রতিক্রিয়া যোগ করতে।

রঙ, টাইপোগ্রাফি এবং সীমানা সহ টুলটিপের জন্য সাধারণ শৈলী সেটিংস

সাধারণ শৈলী নীচে, টুলটিপ শৈলী বিভাগ আপনাকে বুদবুদের উপর নিয়ন্ত্রণ দেয়। টুলটিপ প্রস্থ পিক্সেলে সেট করুন, ব্যাকগ্রাউন্ড এবং টেক্সট রঙ বাছাই করুন, টাইপোগ্রাফি সামঞ্জস্য করুন, চার দিকে প্যাডিং কনফিগার করুন, একটি বর্ডার টাইপ চয়ন করুন, বৃত্তাকার কোণগুলির জন্য সীমানা ব্যাসার্ধ সেট করুন, ট্রিগার এবং বুদবুদের মধ্যে দূরত্ব নিয়ন্ত্রণ করুন, টুলটিপের ভিতরে পাঠ্য সারিবদ্ধ করুন, এবং গভীরতার জন্য একটি বক্স ছায়া যোগ করুন।

টুলটিপ স্টাইল প্যানেল প্রস্থ, পটভূমির রঙ, পাঠ্যের রঙ, টাইপোগ্রাফি, প্যাডিং, সীমানা, ব্যাসার্ধ, দূরত্ব, পাঠ্য প্রান্তিককরণ এবং বক্স ছায়া নিয়ন্ত্রণ দেখাচ্ছে

প্রতিটি সেটিং একটি সম্পূর্ণ ওয়াকথ্রু জন্য, চেক করুন টুলটিপ উপাদান ডকুমেন্টেশন অথবা দেখুন ভিডিও টিউটোরিয়াল.

পদ্ধতি 2: টুলটিপ এক্সটেনশন ব্যবহার করে যেকোন এলিমেন্টর উইজেটে টুলটিপ কীভাবে যোগ করবেন

দ্য টুলটিপ এক্সটেনশন উপাদান থেকে ভিন্নভাবে কাজ করে। একটি স্বতন্ত্র উইজেট হওয়ার পরিবর্তে, এটি একটি যোগ করে টুলটিপ প্রতিটি এলিমেন্টর উপাদানের উন্নত ট্যাবের বিভাগ। আপনার পৃষ্ঠায় ইতিমধ্যে বিদ্যমান যেকোনো উইজেট, ধারক, কলাম বা বিভাগ নির্বাচন করুন, সুইচটি ফ্লিপ করুন, আপনার পাঠ্য টাইপ করুন এবং দর্শকরা যখন সেই উপাদানটির উপর ঘোরাফেরা করে তখন একটি ছোট বুদবুদ দেখতে পান। প্রতিটি উপাদান তার নিজস্ব টুলটিপ বহন করে, তাই একটি সারিতে তিনটি কার্ড প্রতিটি ভিন্ন পাঠ্য দিয়ে নিজেদের ব্যাখ্যা করতে পারে।

এক্সটেনশনটি দুটি উপ-ট্যাবে বিভক্ত: সেটিংস আচরণের জন্য (টেক্সট, প্লেসমেন্ট, অ্যানিমেশন, ট্রিগার, টাইমিং) এবং শৈলী চেহারার জন্য (রঙ, প্রস্থ, প্যাডিং, টাইপোগ্রাফি)।

ধাপ 1: টুলটিপ এক্সটেনশন সক্ষম করুন

আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে, যান মাস্টার অ্যাডনস এবং খুলুন এক্সটেনশন ট্যাব। টুলটিপ বসে ডায়নামিক উইজেট দল। এর টগলে ক্লিক করুন যাতে এটি বেগুনি হয়ে যায়, তারপর আঘাত করুন পরিবর্তন সংরক্ষণ করুন শীর্ষে এবং সবুজ “Settings সফলভাবে সংরক্ষিত" নোটিশের জন্য অপেক্ষা করুন।

মাস্টার অ্যাডঅন এক্সটেনশন ট্যাবের ডায়নামিক উইজেট বিভাগে টুলটিপস এক্সটেনশন টগল সক্ষম করা হয়েছে

ধাপ 2: Elementor এ আপনার পৃষ্ঠা খুলুন

আপনি যে পৃষ্ঠাটি সম্পাদনা করতে চান সেখানে নেভিগেট করুন এবং ক্লিক করুন Elementor দিয়ে সম্পাদনা করুন.

ধাপ 3: যেকোনো উপাদান নির্বাচন করুন

আপনি একটি টুলটিপ যোগ করতে চান যেখানে বিদ্যমান কোনো উপাদান ক্লিক করুন। এটি শিরোনাম, বোতাম, ছবি, আইকন, মূল্য সারণী, পাত্রে, কলাম, বিভাগ এবং যেকোনো এলিমেন্টর উইজেট বা মাস্টার অ্যাডঅন উপাদানের সাথে কাজ করে। টুলটিপ বিভাগটি প্রতিটি উপাদানের উন্নত ট্যাবে প্রদর্শিত হয়।

ধাপ 4: অ্যাডভান্সড ট্যাবে যান এবং টুলটিপ সক্রিয় করুন

আপনার উপাদান নির্বাচন করে, ক্লিক করুন উন্নত সেটিংস প্যানেলে ট্যাব। আপনি খুঁজে না পাওয়া পর্যন্ত নিচে স্ক্রোল করুন টুলটিপ বেগুনি MA ব্যাজ সহ বিভাগ। এটি প্রসারিত করুন এবং ফ্লিপ করুন টুলটিপ হ্যাঁ এ স্যুইচ করুন। সেটিংস সাব-ট্যাব প্রথমে খোলে।

এলিমেন্টর অ্যাডভান্সড ট্যাবে টুলটিপ সেটিংস কন্টেন্ট, প্লেসমেন্ট, অ্যানিমেশন, ট্রিগার, সময়কাল, বিলম্ব, অফসেট এবং অ্যারো বিকল্পগুলি দেখাচ্ছে

ধাপ 5: টুলটিপ সেটিংস কনফিগার করুন

সেটিংস সাব-ট্যাব আপনাকে টুলটিপ কীভাবে আচরণ করে তার উপর নিয়ন্ত্রণ দেয়:

  • বিষয়বস্তু: টুলটিপ টেক্সট। এটি টাইপ করুন, অথবা আপনি যদি একটি সূচনা বিন্দু চান তাহলে AI লিঙ্ক দিয়ে লিখুন ব্যবহার করুন।
  • বসানো: বুদবুদ উপাদানটির কোন দিকটি পছন্দ করে: শীর্ষ (ডিফল্ট), নীচে, বাম বা ডান।
  • কার্সার অনুসরণ করুন: স্থির বসে থাকার পরিবর্তে টুলটিপটিকে মাউসের পথ তৈরি করে। মানচিত্র, চার্ট এবং ডায়াগ্রামের জন্য দরকারী যেখানে কার্সারের অধীনে প্রতিটি এলাকার নিজস্ব লেবেল প্রয়োজন।
  • অ্যানিমেশন: কিভাবে বুদবুদ প্রবেশ করে। সাতটি পছন্দ: কোনটিই নয়, ফেইড, শিফট-অ্যাওয়ে, শিফট-টুওয়ার্ড, স্কেল, দৃষ্টিকোণ এবং ফিল ইফেক্ট।
  • ট্রিগার: কি টুলটিপ খোলে। ডিফল্টরূপে হোভার করুন, অথবা টাচ-স্ক্রিন-বান্ধব ক্রমাগত ইঙ্গিতগুলির জন্য ক্লিক করুন।
  • সময়কাল এবং বিলম্ব আউট: মিলিসেকেন্ডে অ্যানিমেশনের গতি এবং বন্ধ হওয়ার আগে বুদবুদ কতক্ষণ স্থির থাকে।
  • X এবং Y অফসেট: একটি নির্দিষ্ট সংখ্যক পিক্সেল দ্বারা বুদবুদটিকে তার ডিফল্ট স্পট থেকে দূরে সরিয়ে দিন।
  • তীর এবং তীর প্রকার: তীক্ষ্ণ বা বৃত্তাকার শৈলী বিকল্পগুলির সাথে উপাদানের সাথে বুদবুদ সংযোগকারী ছোট পয়েন্টার যোগ করুন।
এলিমেন্টরে টুলটিপ অ্যানিমেশন ড্রপডাউন যার সাথে নেই, ফেইড, শিফট-অ্যাওয়ে, শিফট-টুওয়ার্ড, স্কেল, দৃষ্টিকোণ এবং ফিল ইফেক্ট বিকল্প

ধাপ 6: টুলটিপ স্টাইল করুন

সুইচ শৈলী সাব-ট্যাব ব্রাউজার ডিফল্টের মতো না দেখে বুদবুদটিকে আপনার ডিজাইনের সাথে মেলে।

সর্বোচ্চ প্রস্থ, টেক্সট কালার, ব্যাকগ্রাউন্ড কালার, অ্যারো কালার, প্যাডিং, বর্ডার এবং টাইপোগ্রাফি কন্ট্রোল সহ এলিমেন্টরে টুলটিপ স্টাইল ট্যাব
  • সর্বোচ্চ প্রস্থ: বুদবুদটি কতটা চওড়া হয় তা ক্যাপ করে এত লম্বা টেক্সট স্ক্রীন জুড়ে প্রসারিত করার পরিবর্তে মোড়ানো হয়।
  • পাঠ্য, পটভূমি এবং তীর রঙ: পয়েন্টার সহ সম্পূর্ণ রঙ নিয়ন্ত্রণ।
  • প্যাডিং, বর্ডার টাইপ এবং বর্ডার ব্যাসার্ধ: বুদবুদের আকৃতি।
  • টেক্সট অ্যালাইনমেন্ট, বক্স শ্যাডো এবং টাইপোগ্রাফি: আপনার নিজস্ব ফন্ট এবং গভীরতা দিয়ে চেহারা শেষ করুন।

ধাপ 7: ফলাফল পরীক্ষা করুন

পৃষ্ঠাটি সংরক্ষণ করুন এবং দেখুন। আপনার সেট করা অ্যানিমেশন, রঙ এবং প্রস্থ ব্যবহার করে উপাদানটির উপর হোভার করুন এবং টুলটিপটি আপনার লেখা পাঠ্যের সাথে বিবর্ণ হয়ে যায়। কার্সারটি দূরে সরান এবং বিলম্বের পরে এটি বন্ধ হয়ে যায়। পৃষ্ঠার অন্যান্য উপাদানগুলির জন্য পুনরাবৃত্তি করুন।

সামনের প্রান্তে একটি ইনফো বক্স কার্ডের উপর হোভারে দৃশ্যমান টুলটিপ একটি বুদ্বুদে অতিরিক্ত বর্ণনামূলক পাঠ্য দেখাচ্ছে

সম্পূর্ণ কনফিগারেশন বিশদ বিবরণের জন্য, দেখুন টুলটিপ এক্সটেনশন ডকুমেন্টেশন অথবা দেখুন ভিডিও টিউটোরিয়াল.

প্রতিটি পদ্ধতির জন্য ব্যবহারিক ব্যবহারের ক্ষেত্রে

টুলটিপ এলিমেন্ট কখন ব্যবহার করবেন

টুলটিপ উপাদান একটি উত্সর্গীকৃত বিষয়বস্তু ব্লক। যখন টুলটিপগুলি বিভাগের প্রধান পয়েন্ট হয় তখন এটি ব্যবহার করুন:

  • বৈশিষ্ট্য শোকেস পাতা। টুলটিপ বর্ণনা সহ আইকন বা ছবি হিসাবে পণ্য বৈশিষ্ট্য প্রদর্শন করুন।
  • শব্দকোষ বিভাগ। একটি ইনলাইন শব্দকোষ তৈরি করুন যেখানে পাঠকরা সংজ্ঞা দেখতে পদের উপর ঘোরাফেরা করে।
  • পোর্টফোলিও আইটেম। পোর্টফোলিও থাম্বনেইলে ইমেজ টুলটিপ যোগ করুন যা প্রকল্পের বিবরণ দেখাচ্ছে।
  • টিম পেজ। দলের ভূমিকা সম্পর্কে টুলটিপ বিবরণ সহ আইকন বা ফটো রাখুন।
  • শিক্ষামূলক বিষয়বস্তু। পৃষ্ঠা ছাড়াই ব্যাখ্যা দেখতে শিক্ষার্থীদের কীওয়ার্ডের উপর ঘোরাফেরা করতে দিন।

টুলটিপ এক্সটেনশন কখন ব্যবহার করবেন

টুলটিপ এক্সটেনশন আপনার পৃষ্ঠায় ইতিমধ্যে বিদ্যমান উপাদানগুলির প্রসঙ্গ যোগ করে:

  • ফিচার কার্ড। কার্ড লম্বা না করে অতিরিক্ত বিস্তারিত একটি বাক্য।
  • মূল্য টেবিল। ব্যাখ্যা করুন যে "অগ্রাধিকার সমর্থন" আসলে কী কভার করে, ঠিক যেখানে লোকেরা অবাক হয়। আমাদের দেখুন মূল্য নির্ধারণ টেবিল উইজেট আরো বেশী।
  • বোতাম এবং আইকন। লেবেল আইকন-শুধু নিয়ন্ত্রণ তাই কেউ অনুমান না।
  • দলের সদস্যরা। প্রতিটি ছবির উপর হোভারে একটি মজার ঘটনা বা ভূমিকা নোট।
  • প্রযুক্তিগত পদ। জার্গনে সংক্ষিপ্ত সংজ্ঞা, একটি শব্দকোষ পৃষ্ঠার চেয়ে সস্তা।

উভয় পদ্ধতি একত্রিত করা

আপনি একই পৃষ্ঠায় উভয় ব্যবহার করতে পারেন। উদাহরণস্বরূপ, একটি বৈশিষ্ট্য তুলনা বিভাগ তৈরি করতে টুলটিপ উপাদানটি ব্যবহার করুন যেখানে দর্শকরা প্রতিটি বৈশিষ্ট্য সম্পর্কে জানতে আইকনগুলির উপর ঘোরাফেরা করে, তারপর একটি "ফ্রি 14-দিনের ট্রায়াল, কোনও ক্রেডিট কার্ডের প্রয়োজন নেই" যোগ করতে নীচে আপনার CTA বোতামে টুলটিপ এক্সটেনশন ব্যবহার করুন " টুলটিপ।

উভয়ের মধ্যে কোন বিরোধ নেই। তারা বিভিন্ন উদ্দেশ্যে পরিবেশন করে এবং যেকোনো পৃষ্ঠায় সহাবস্থান করতে পারে।

ওয়ার্ডপ্রেসের জন্য টুলটিপ সেরা অনুশীলন

  • টুলটিপ টেক্সট ছোট রাখুন। 1-2 বাক্য লক্ষ্য করুন। আপনার যদি এর চেয়ে বেশি প্রয়োজন হয়, তথ্যটি সম্ভবত পৃষ্ঠারই অন্তর্গত, একটি টুলটিপে লুকানো নয়।
  • সামঞ্জস্যপূর্ণ অবস্থান ব্যবহার করুন। একটি দিক বেছে নিন (বেশিরভাগ ক্ষেত্রে উপরে বা নীচে সবচেয়ে ভাল কাজ করে) এবং আপনার সাইট জুড়ে এটির সাথে লেগে থাকুন। মিশ্রিত অবস্থান এলোমেলো মনে হয়।
  • টুলটিপ অতিরিক্ত ব্যবহার করবেন না। যদি আপনার পৃষ্ঠার প্রতিটি উপাদানের একটি টুলটিপ থাকে, তাহলে দর্শকরা তাদের কোনোটির উপর ঘোরাফেরা করতে বিরক্ত করবে না। যেখানে তারা প্রকৃত মূল্য যোগ করে সেখানে তাদের ব্যবহার করুন।
  • নিশ্চিত করুন যে টুলটিপ মোবাইলে কাজ করে। টাচস্ক্রিনে হোভার নেই। টুলটিপ এক্সটেনশন ক্লিক ট্রিগার সমর্থন করে, যা মোবাইল ব্যবহারকারীদের জন্য আরও ভাল কাজ করে। প্রকাশ করার আগে একটি ফোনে আপনার টুলটিপ পরীক্ষা করুন।
  • আপনার সাইটের নকশা মেলে। আপনার বিদ্যমান থিমের সাথে মেলে টুলটিপ রঙ, ফন্ট এবং সীমানা কাস্টমাইজ করুন। ডিফল্ট টুলটিপ স্টাইলিং একটি পালিশ সাইটে স্থানের বাইরে দেখতে পারে।

টুলটিপ এলিমেন্ট বনাম টুলটিপ এক্সটেনশন: দ্রুত তুলনা

বৈশিষ্ট্যটুলটিপ উপাদানটুলটিপ এক্সটেনশন
সেটআপএকটি নতুন উইজেট টেনে আনুনযেকোনো বিদ্যমান উইজেটের উন্নত ট্যাবে সক্ষম করুন
ট্রিগার সামগ্রীপাঠ্য, ছবি, আইকন (উইজেটে নির্মিত)যেকোনো উপাদান উপাদান: শিরোনাম, বোতাম, ছবি, বিভাগ, পাত্রে
জন্য সেরাডেডিকেটেড টুলটিপ কন্টেন্ট ব্লকবিদ্যমান ডিজাইনে টুলটিপ যোগ করা হচ্ছে
অ্যানিমেশনবিবর্ণ, স্কেল, স্থানান্তর7 বিকল্প: কোনটিই নয়, ফেইড, শিফট-অ্যাওয়ে, শিফট-টুওয়ার্ড, স্কেল, দৃষ্টিকোণ, ফিল ইফেক্ট
কার্সার অনুসরণ করুননাহ্যাঁ
AI দিয়ে লিখুননাহ্যাঁ (টুলটিপ পাঠ্যের জন্য)
তীর কাস্টমাইজেশননাহ্যাঁ (তীক্ষ্ণ বা গোলাকার)
কাস্টমাইজেশনসম্পূর্ণ স্টাইলিং নিয়ন্ত্রণসম্পূর্ণ স্টাইলিং নিয়ন্ত্রণ (স্টাইল সাব-ট্যাব)
প্রতি পৃষ্ঠায় একাধিক টুলটিপহ্যাঁহ্যাঁ (প্রতিটি উপাদান তার নিজস্ব বহন করে)
শেখার বক্ররেখান্যূনতমন্যূনতম

উভয় বৈশিষ্ট্য উপলব্ধ এলিমেন্টরের জন্য মাস্টার অ্যাডঅন। আপনি বিনামূল্যে সংস্করণ দিয়ে শুরু করতে পারেন এবং আপগ্রেড করতে পারেন৷ প্রো উন্নত স্টাইলিং বিকল্প এবং অতিরিক্ত উইজেট জন্য।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী

প্লাগইন ছাড়া ওয়ার্ডপ্রেসে আমি কিভাবে একটি টুলটিপ যোগ করব?

আপনি একটি যোগ করে HTML ব্যবহার করে মৌলিক টুলটিপ যোগ করতে পারেন title যেকোনো উপাদানের বৈশিষ্ট্য (যেমন, <span title="Your tooltip text">Hover here</span>)। কিন্তু এই পদ্ধতিটি শূন্য স্টাইলিং নিয়ন্ত্রণ অফার করে এবং ব্রাউজার জুড়ে ভিন্ন দেখায়। ওয়ার্ডপ্রেসে কাস্টম, স্টাইল করা টুলটিপগুলির জন্য, মাস্টার অ্যাডনসের মতো একটি প্লাগইন আপনাকে ডিজাইন, অ্যানিমেশন এবং অবস্থানের উপর সম্পূর্ণ নিয়ন্ত্রণ দেয়।

আমি কি এলিমেন্টরের একটি ছবিতে একটি টুলটিপ যোগ করতে পারি?

হ্যাঁ। মাস্টার অ্যাডঅন দুটি উপায় অফার করে। একটি ডেডিকেটেড ইমেজ টুলটিপ তৈরি করতে টুলটিপ এলিমেন্ট ব্যবহার করুন এবং কন্টেন্ট টাইপ হিসেবে “” নির্বাচন করুন। অথবা আপনার পৃষ্ঠায় বিদ্যমান ছবিতে একটি টুলটিপ যোগ করতে যেকোনো এলিমেন্টর ইমেজ উইজেটে টুলটিপ এক্সটেনশন ব্যবহার করুন।

টুলটিপ কি মোবাইল ডিভাইসে কাজ করে?

স্ট্যান্ডার্ড হোভার-ভিত্তিক টুলটিপ টাচস্ক্রিনে কাজ করে না যেহেতু হোভার করার জন্য কোন কার্সার নেই। মাস্টার অ্যাডনস টুলটিপ এক্সটেনশন একটি ক্লিক ট্রিগার বিকল্প সমর্থন করে, যা ব্যবহারকারীরা মোবাইলে উপাদানটি ট্যাপ করলে টুলটিপ প্রদর্শন করে। এটি আপনার টুলটিপগুলিকে সমস্ত ডিভাইসে অ্যাক্সেসযোগ্য করে তোলে।

একটি টুলটিপ এবং একটি পপওভারের মধ্যে পার্থক্য কী?

একটি টুলটিপ হল একটি ছোট, পাঠ্য-ভিত্তিক ইঙ্গিত যা হোভারে প্রদর্শিত হয় এবং আপনি কার্সারটি সরিয়ে দিলে অদৃশ্য হয়ে যায়। একটি পপওভার সাধারণত বড় হয়, এতে ছবি, বোতাম বা ফর্মের মতো সমৃদ্ধ সামগ্রী থাকতে পারে এবং প্রায়শই খুলতে এবং বন্ধ করতে একটি ক্লিকের প্রয়োজন হয়। মাস্টার অ্যাডঅন টুলটিপ এলিমেন্টে ফরম্যাট করা টেক্সট অন্তর্ভুক্ত থাকতে পারে, এটি সহজ টুলটিপ এবং সমৃদ্ধ হোভার কন্টেন্ট উভয়ের জন্যই নমনীয় করে তোলে।

টুলটিপ কি এসইও এর জন্য ভালো?

টুলটিপ বিষয়বস্তু HTML এ রেন্ডার করা হয়, তাই সার্চ ইঞ্জিনগুলি তাদের ভিতরে পাঠ্য ক্রল করতে পারে। যাইহোক, যেহেতু টুলটিপ বিষয়বস্তু ডিফল্টরূপে লুকানো থাকে এবং শুধুমাত্র হোভারে দৃশ্যমান হয়, সার্চ ইঞ্জিন এটিকে কম ওজন দিতে পারে। টুলটিপগুলিতে গুরুত্বপূর্ণ বিষয়বস্তু লুকাবেন না। পরিপূরক তথ্যের জন্য এগুলি ব্যবহার করুন যা ব্যবহারকারীর অভিজ্ঞতায় মূল্য যোগ করে।

আমি কি একই পৃষ্ঠায় টুলটিপ এলিমেন্ট এবং টুলটিপ এক্সটেনশন উভয়ই ব্যবহার করতে পারি?

হ্যাঁ। তারা স্বাধীনভাবে কাজ করে এবং একে অপরের সাথে বিরোধ করে না। ডেডিকেটেড টুলটিপ কন্টেন্ট ব্লকের জন্য টুলটিপ এলিমেন্ট এবং একই পৃষ্ঠায় বিদ্যমান এলিমেন্টর উইজেটে দ্রুত টুলটিপ যোগ করতে টুলটিপ এক্সটেনশন ব্যবহার করুন।

আপনার ওয়ার্ডপ্রেস সাইটে টুলটিপ যোগ করা শুরু করুন

মাস্টার অ্যাডঅনগুলির সাথে, আপনি দুটি বিকল্প পাবেন: টুলটিপ উপাদান টেক্সট, ইমেজ, এবং আইকন ট্রিগার সহ ডেডিকেটেড টুলটিপ সামগ্রী তৈরি করার জন্য, এবং টুলটিপ এক্সটেনশন আপনার পৃষ্ঠায় বিদ্যমান কোনো Elementor উপাদানে টুলটিপ যোগ করার জন্য।

উভয় পদ্ধতি বাক্সের বাইরে কাজ করে। আপনি এছাড়াও চেক আউট করতে পারেন ইমেজ হটস্পট উইজেট আপনার যদি একটি চিত্রের নির্দিষ্ট অবস্থানে পিন করা ইন্টারেক্টিভ টুলটিপগুলির প্রয়োজন হয়।

এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ডাউনলোড করুন শুরু করতে।

রায় জেমির ছবি
রায় জেমি
আমি রয় জেমি, কনটেন্ট র্যাংলার এবং পিক্সার ল্যাবসের মার্কেটার, এলিমেন্টরের জন্য মাস্টার অ্যাডঅনসে কাজ করছি। আমি টিউটোরিয়াল লিখি, ভিডিও রেকর্ড করি এবং ডকুমেন্টেশন বর্তমান রাখি, তাই আপনি সর্বদা জানেন কিভাবে প্রতিটি বৈশিষ্ট্য ব্যবহার করতে হয়। আমি সমর্থনও পরিচালনা করি, তাই আপনি যদি কোনও সমস্যায় পড়েন তবে আমিই সেই ব্যক্তি যিনি আপনাকে এটি ঠিক করতে সহায়তা করেন। বাস্তব উত্তর, এমন একজনের কাছ থেকে যিনি প্রতিদিন এই সরঞ্জামগুলি ব্যবহার করেন।
সেপ্টেম্বর বিক্রয়

40% সবকিছু বন্ধ

প্রতিটি মাস্টার অ্যাডনস প্রো প্ল্যান, বার্ষিক এবং জীবনকাল। একটি কোড, আট দিন।

00দিন
00ঘন্টা
00মিনিট
00সেকেন্ড

সোমবার 14 সেপ্টেম্বর, 23:59 ET শেষ হয়৷

  • ব্যক্তিগত1 সাইট $129$77
  • ব্যবসা5 সাইট $199$119
  • বিকাশকারীসীমাহীন সাইটএজেন্সিগুলির জন্য সেরা $599$359

একবার পরিশোধ করুন। কোন পুনর্নবীকরণ, কখনও।

কুপন কোড MALIFE40
এখন 40% ছাড় পান
  • 30,000+ সক্রিয় ইনস্টল
  • 212টি পর্যালোচনা থেকে 4.5/5
  • 14 দিনের টাকা ফেরত