এলিমেন্টরে ইমেজ হটস্পট কিভাবে যোগ করবেন: যেকোনো ছবিতে মার্কার পিন করুন

এলিমেন্টর ইমেজ হটস্পট উইজেট নির্দেশিকা

কী টেকঅ্যাওয়ে

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

একটি এলিমেন্টর ইমেজ হটস্পট হল একটি ফটোতে পিন করা একটি ছোট মার্কার যা একটি ছোট লেবেল দেখায় যখন একজন দর্শক এটিকে ঘোরায় বা ট্যাপ করে। ফ্রি এলিমেন্টরের এর জন্য কোন উইজেট নেই, তাই এই গাইডটি ব্যবহার করে মাস্টার অ্যাডঅন ইমেজ হটস্পট উইজেট, যা কোনো কাস্টম কোড ছাড়াই এলিমেন্টর প্যানেল থেকে যেকোনো ছবিতে মার্কার যোগ করে। এর জন্য আপনার মাস্টার অ্যাডঅন প্রো দরকার।

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

Elementor এ কি একটি ইমেজ হটস্পট আছে

একটি ইমেজ হটস্পট হল একটি মার্কার যা একটি ছবির একটি সেট পয়েন্টে স্থাপন করা হয়। প্রতিটি মার্কার তার নিজস্ব ছোট লেবেল বহন করে এবং, যদি আপনি চান, একটি লিঙ্ক। একটি ডেস্কটপে লেবেলটি হোভারে প্রদর্শিত হয়। একটি ফোনে দর্শক মার্কার ট্যাপ করে।

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

ফ্রি এলিমেন্টরের কোনো হটস্পট উইজেট নেই। Elementor Pro এর একটি হটস্পট আছে, এবং Master Addons Pro ইমেজ হটস্পট যোগ করে, যা একটি মার্কার হিসাবে একটি ছোট ছবিও ব্যবহার করতে পারে। এই গাইডটি মাস্টার অ্যাডঅন উইজেটকে কভার করে।

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

আপনি নির্মাণ করার আগে এটি কাজ দেখতে চান? দ্য ছবি হটস্পট উইজেট পৃষ্ঠা লাইভ ডেমো, সম্পূর্ণ সেটিংস তালিকা এবং Elementor Pro Hotspot-এর পাশাপাশি রয়েছে।

এলিমেন্টরে কীভাবে একটি ইমেজ হটস্পট যোগ করবেন

চার বা পাঁচটি মার্কার সহ একটি চিত্রের জন্য সেটআপটি প্রায় পাঁচ মিনিট সময় নেয়।

ধাপ 1: মাস্টার অ্যাডঅন ইনস্টল করুন এবং প্রো সক্রিয় করুন

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

ধাপ 2: ইমেজ হটস্পট উইজেটটি পৃষ্ঠায় টেনে আনুন

Elementor এডিটরে পৃষ্ঠাটি খুলুন এবং “Hotspot” এর জন্য এলিমেন্টস প্যানেল অনুসন্ধান করুন। MA ব্যাজ সহ ফলাফল হল ইমেজ হটস্পট। আপনি যদি এটির পাশে একটি প্যাডলক করা হটস্পট উইজেটও দেখতে পান তবে সেটি এলিমেন্টর প্রো-এর অন্তর্গত। একটি পাত্রে ইমেজ হটস্পট টেনে আনুন।

এলিমেন্টর এলিমেন্টস প্যানেলে এমএ ব্যাজ সহ ইমেজ হটস্পট উইজেট
ইমেজ হটস্পট এলিমেন্ট প্যানেলে অন্যান্য মাস্টার অ্যাডঅন ইমেজ উইজেটের সাথে বসে।

ধাপ 3: আপনার ছবি চয়ন করুন

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

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

ধাপ 4: হটস্পট যোগ করুন এবং তাদের অবস্থান সেট করুন

হটস্পট বিভাগ খুলুন। তালিকার প্রতিটি আইটেম একটি মার্কার, তাই আপনি চিহ্নিত করতে চান এমন প্রতিটি স্থানের জন্য একবার আইটেম যোগ করুন ক্লিক করুন। আইটেম সংখ্যা কোন সীমা নেই।

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

প্রতিটি স্ক্রিনের আকারে একটি অবস্থান প্রযোজ্য। 22% জুড়ে এবং 52% নিচে একটি মার্কার একটি ল্যাপটপে এবং একটি ফোনে ছবির একই অংশে বসে।

তালিকার অধীনে, পালস প্রভাব নিষ্ক্রিয়? উইজেটের প্রতিটি মার্কারের চারপাশে স্পন্দন রিং বন্ধ করে দেয়।

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

ধাপ 5: মার্কার টাইপ চয়ন করুন এবং লেবেল লিখুন

প্রতিটি আইটেমের বিষয়বস্তু ট্যাবে, মার্কারের ভিতরে যা প্রদর্শিত হবে তা টাইপ সেট করে: কোনটি নয় (একটি প্লেইন ডট), পাঠ্য (ডিফল্টরূপে একটি প্লাস চিহ্ন, বা একটি সংখ্যা বা একটি শব্দ যা আপনি টাইপ করেন), আইকন (যেকোন ফন্ট অসাধারণ আইকন) বা চিত্র (একটি ছোট ছবি)। একটি ছবিতে ধরনের মেশানো ভাল কাজ করে।

চারটি ইমেজ হটস্পট মার্কার ধরনের অফিস ফটো: একটি ডেস্ক টেক্সট মার্কার, একটি আইকন মার্কার যার টুলটিপ খোলা, একটি ছোট ইমেজ মার্কার এবং একটি প্লেইন ডট
একটি ফটোতে চারটি মার্কার প্রকার: পাঠ্য, আইকন, চিত্র এবং একটি প্লেইন ডট।

লিঙ্ক ফিল্ড ভিজিটরকে অন্য পৃষ্ঠায় পাঠায় যখন তারা মার্কারে ক্লিক করে। হোভারে টুলটিপ খুললে এটি অনুসরণ করা হয়। ট্রিগার অন ক্লিক চালু হলে (ধাপ 6), একটি ক্লিক টুলটিপ খোলে এবং লিঙ্কটি উপেক্ষা করা হয়।

টুলটিপ বিষয়বস্তু হটস্পট টুলটিপে প্রদর্শিত লাইন। বাক্সটি একটি সম্পূর্ণ পাঠ্য সম্পাদকের মতো দেখায়, তবে টুলটিপে প্লেইন টেক্সট দেখায়: পৃষ্ঠাটি রেন্ডার করার সময় বোল্ড, তির্যক, লিঙ্ক, ছবি এবং শর্টকোডগুলি সরানো হয়। একটি ছোট লাইন লিখুন।

একক হটস্পট বিষয়বস্তু ট্যাব প্রকার, পাঠ্য, লিঙ্ক এবং টুলটিপ বিষয়বস্তু ক্ষেত্র দেখাচ্ছে
একটি মার্কারের জন্য টাইপ, টেক্সট, লিঙ্ক এবং টুলটিপ কন্টেন্ট।
ইমেজ হটস্পট টুলটিপ বোল্ড টেক্সট এবং এডিটর থেকে একটি লিঙ্ক সামনের প্রান্তে প্লেইন টেক্সট হিসেবে দেখাচ্ছে
বোল্ড টেক্সট এবং এডিটরে টাইপ করা একটি লিঙ্ক টুলটিপে প্লেইন টেক্সট হিসেবে বেরিয়ে আসে।

ধাপ 6: মার্কারগুলি কীভাবে খুলবে তা চয়ন করুন

বিষয়বস্তু ট্যাবে ফিরে, টুলটিপ বিভাগটি উইজেটের প্রতিটি মার্কারকে একবারে নিয়ন্ত্রণ করে।

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

ধাপ 7: পূর্বরূপ এবং প্রকাশ

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

চার নম্বরযুক্ত ইমেজ হটস্পট মার্কার সহ অফিসের ছবি এবং মিটিং টেবিলের টুলটিপ খোলা
সমাপ্ত উইজেট: হোভারে খোলা একটি টুলটিপ সহ সংখ্যাযুক্ত পাঠ্য চিহ্নিতকারী।

মার্কার এবং ইমেজ শৈলী

স্টাইলিং দুটি জায়গায় ঘটে: প্রতিটি মার্কারের নিজস্ব স্টাইল ট্যাব এবং উইজেটের প্রধান স্টাইল ট্যাব।

প্রতি-মার্কার শৈলী

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

ডিফল্ট এবং হোভার রঙ, পটভূমি এবং অস্বচ্ছতা নিয়ন্ত্রণ সহ একক হটস্পট স্টাইল ট্যাব
প্রতি-মার্কার রং উইজেট-ওয়াইড মার্কার শৈলীকে ওভাররাইড করে।

একটি মার্কার রঙ চয়ন করুন যা এটির পিছনের ছবির সাথে বৈপরীত্য। একটি ব্যস্ত ফটোতে একটি নিঃশব্দ মার্কার হারিয়ে যায়, এবং দর্শকরা লক্ষ্য করবেন না যে ঘোরাঘুরি করার কিছু আছে৷।

ছবি

প্রধান স্টাইল ট্যাবের চিত্র বিভাগটি ফটো নিয়ন্ত্রণ করে: অস্বচ্ছতা, সীমানা, সীমানা ব্যাসার্ধ, বক্স ছায়া এবং CSS ফিল্টার। একটি ব্যাসার্ধ এবং একটি নরম ছায়া ছবিটিকে একটি কার্ড লেআউটের ভিতরে বসতে সাহায্য করে।

ইমেজ অস্বচ্ছতা, সীমানা, সীমানা ব্যাসার্ধ, বক্স ছায়া এবং CSS ফিল্টার নিয়ন্ত্রণ সহ ইমেজ হটস্পট স্টাইল ট্যাব
স্টাইল ট্যাবের চিত্র বিভাগ, এর নীচে হটস্পট এবং টুলটিপ রয়েছে।

হটস্পট

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

টুলটিপস

টুলটিপস বিভাগটি হটস্পট টুলটিপকে স্টাইল করে: টেক্সট অ্যালাইনমেন্ট, প্যাডিং, বর্ডার ব্যাসার্ধ, ব্যাকগ্রাউন্ড, টেক্সট কালার, অ্যারো কালার এবং টাইপোগ্রাফি।

Elementor এ একটি ইন্টারেক্টিভ ইমেজ তৈরি করুন

একটি ইন্টারেক্টিভ ইমেজ হল একটি ফটো যা একজন দর্শক যখন এটিকে নির্দেশ করে তখন প্রশ্নের উত্তর দেয়। Elementor-এ আপনি উপরের ধাপগুলি অনুসরণ করে ইমেজ হটস্পট দিয়ে একটি তৈরি করেন: প্রতি স্পটে একটি মার্কার, প্রতিটিতে একটি এক-লাইন টুলটিপ এবং আপনার ট্রাফিক বেশিরভাগ মোবাইল হলে ক্লিক অন ট্রিগার করুন।

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

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

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

একটি সাধারণ চিত্র মানচিত্র হিসাবে ইমেজ হটস্পট ব্যবহার করুন

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

ক্যাম্পাস ম্যাপে পিনের জন্য, একটি স্টোর লেআউট বা একটি জিমের মেঝে, মার্কারগুলি সেট আপ করার জন্য যথেষ্ট এবং দ্রুত। দ্য জিম জোন ম্যাপ ডেমো একটি ফটোতে পাঁচটি জোন চিহ্নিত করে এবং প্রতিটি মার্কার সেই জোনের বুকিং পৃষ্ঠার সাথে লিঙ্ক করে।

পাঁচটি নম্বরযুক্ত ইমেজ হটস্পট জোন মার্কার এবং এর পাশে একটি জোন তালিকা সহ জিমের ফ্লোর ফটো
পয়েন্ট মার্কার থেকে নির্মিত একটি জোন মানচিত্র। প্রতিটি মার্কার একটি বুকিং পৃষ্ঠার সাথে লিঙ্ক করে।

ফোন এবং ট্যাবলেটে ছবির হটস্পট

মার্কার অবস্থানগুলি চিত্রের একটি শতাংশ, তাই প্রতিটি মার্কার প্রতিটি স্ক্রিনের আকারে ছবির একই অংশে থাকে৷ ট্যাবলেট বা ফোনের জন্য আলাদা কোনো অবস্থান নেই।

ছবি সঙ্কুচিত হওয়ার সাথে সাথে মার্কাররা তাদের আকার রাখে, ডিফল্টরূপে প্রায় 40px। একটি ফোনে, অনেক মার্কার সহ একটি চিত্র ভিড় করে। কম মার্কার ব্যবহার করুন, স্টাইলের অধীনে কম আকার, হটস্পট, বা ফোন দর্শকদের একটি সহজ ছবি দিন।

ফোনের প্রস্থে ছবি হটস্পট ফ্লোর ফটো চারটি নম্বরযুক্ত মার্কার সহ ছবির বেশিরভাগ অংশ গ্রহণ করে
ফোনের প্রস্থে একই চারটি মার্কার অনেক বেশি ছবি তোলে।

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

ইমেজ হটস্পট ব্যবহার করার জন্য আপনার যা দরকার

সেটআপহটস্পট উইজেট আপনি পাবেন
ফ্রি এলিমেন্টর নিজেইকোনোটিই নয়। কোর এলিমেন্টরের কোনো হটস্পট উইজেট নেই।
এলিমেন্টর প্রোএলিমেন্টরের নিজস্ব হটস্পট উইজেট, ফরম্যাট করা টুলটিপ সামগ্রী এবং নিজস্ব মার্কার অ্যানিমেশন সহ।
প্রো ছাড়া মাস্টার অ্যাডঅনকোন ইমেজ হটস্পট। অন্যান্য অনেক উইজেট অন্তর্ভুক্ত করা হয়।
মাস্টার অ্যাডনস প্রো সহইমেজ হটস্পট, টুলটিপস এক্সটেনশন এবং বাকি 80+ উইজেট এবং এক্সটেনশন।

মাস্টার অ্যাডঅন থেকে ইনস্টল করা হয় ওয়ার্ডপ্রেস প্লাগইন ডিরেক্টরি. ইমেজ হটস্পট প্রয়োজন একটি মাস্টার অ্যাডনস প্রো লাইসেন্স এর উপরে। প্রতিটি নিয়ন্ত্রণ তালিকাভুক্ত করা হয় ইমেজ হটস্পট সেটিংস গাইড.

ইমেজ হটস্পট সঙ্গে কাজ করার জন্য টিপস

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

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

Elementor একটি ইমেজ হটস্পট কি?

একটি ইমেজ হটস্পট হল একটি ছোট মার্কার যা একটি ছবির উপরে রাখা হয়। যখন একজন দর্শক এটিকে ঘোরান বা ট্যাপ করেন, তখন ছবির সেই অংশের জন্য একটি ছোট লেবেল প্রদর্শিত হয়। Elementor Pro এর নিজস্ব হটস্পট উইজেট রয়েছে এবং মাস্টার অ্যাডনস প্রো একটি ইমেজ হটস্পট উইজেট যোগ করে যা মার্কার হিসাবে ছোট ছবিও ব্যবহার করতে পারে।

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

কোন কঠিন সীমা নেই। প্রতি ছবিতে পাঁচ থেকে সাতটি মার্কার জিনিসগুলিকে পাঠযোগ্য রাখে এবং ফোনে দেখা যায় এমন ছবিতে কম, কারণ মার্কারগুলি ছবির সাথে সঙ্কুচিত হয় না৷ আপনার যদি আরও প্রয়োজন হয়, দুটি ছবিতে বিষয়বস্তু বিভক্ত করুন।

ইমেজ হটস্পট মোবাইলে কাজ করে?

হ্যাঁ। ফোনের কোনো হোভার নেই, তাই ক্লিকে ট্রিগার চালু করুন এবং দর্শকরা এটির টুলটিপ খুলতে একটি মার্কার ট্যাপ করুন। অবস্থানগুলি চিত্রের একটি শতাংশ এবং প্রতিটি স্ক্রিনে একই, তাই পরীক্ষা করুন যে ফোনের প্রস্থে মার্কারগুলি একে অপরকে ভিড় করে না৷।

আমি কি একটি হটস্পটকে অন্য পৃষ্ঠায় লিঙ্ক করতে পারি?

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

আমি কি হটস্পট টুলটিপের ভিতরে বোল্ড টেক্সট, লিঙ্ক বা ছবি রাখতে পারি?

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

ইমেজ হটস্পটের জন্য আমার কি মাস্টার অ্যাডঅন প্রো দরকার?

হ্যাঁ। ইমেজ হটস্পট একটি মাস্টার অ্যাডনস প্রো উইজেট, এবং এটি বিনামূল্যে এলিমেন্টরের সাথে কাজ করে। এটি এলিমেন্টর প্যানেলে একবার প্রদর্শিত হয় প্রো লাইসেন্স সক্রিয়।

কিভাবে ইমেজ হটস্পট Elementor Pro হটস্পট উইজেট থেকে আলাদা?

Elementor Pro Hotspot ফরম্যাট করা টুলটিপ কন্টেন্টকে অনুমতি দেয়, এতে সফট বিট, এক্সপ্যান্ড এবং ওভারলে মার্কার অ্যানিমেশন রয়েছে এবং হোভারে খোলে, ক্লিক করলে বা একেবারেই না। মাস্টার অ্যাডনস ইমেজ হটস্পট প্লেইন টেক্সট টুলটিপ, মার্কারগুলিতে একটি পালস প্রভাব এবং পাঁচটি টুলটিপ অ্যানিমেশন ব্যবহার করে এবং এটি একটি মার্কার হিসাবে একটি ছোট ছবি ব্যবহার করতে পারে।

চূড়ান্ত চিন্তা

ইমেজ হটস্পট একটি ফ্ল্যাট ফটোকে একটি ইন্টারেক্টিভ ইমেজে পরিণত করে: চারটি মার্কার প্রকার, শতাংশে সেট করা অবস্থান, প্রতি মার্কারে একটি প্লেইন-টেক্সট লাইন এবং পাঁচটি অ্যানিমেশন প্রকাশ করে, সবই এলিমেন্টর প্যানেল থেকে। ফোনগুলি যে ছবিগুলি দেখতে পাবে তাতে মার্কারগুলিকে কম রাখুন এবং বেশিরভাগ ট্র্যাফিক মোবাইল হলে ক্লিক অন ট্রিগার চালু করুন৷।

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

মাস্টার অ্যাডঅন প্রো পান এলিমেন্টরে ইমেজ হটস্পট এবং বাকি 80+ উইজেট এবং এক্সটেনশন যোগ করতে।

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