নীচে চশমাগুলির একটি অনুচ্ছেদ সহ একটি পণ্যের ফটো খুব কমই পড়া হয়। পাশে একটি কিংবদন্তি সহ একটি মেঝে পরিকল্পনা উপেক্ষা করা হয়। সমস্যাটি সর্বদা একই: চিত্র এবং তথ্য দুটি ভিন্ন জায়গায় বাস করে এবং বেশিরভাগ দর্শক তাদের সংযোগ করার জন্য যথেষ্ট দূরে স্ক্রোল করে না।
একটি ইমেজ হটস্পট ঠিক করে। আপনি ফটোতে সরাসরি ছোট মার্কার পিন করেন এবং কেউ ঘোরাঘুরি করলে বা ট্যাপ করলে প্রতিটি একটি ছোট লেবেল প্রকাশ করে। দ্য ইমেজ হটস্পট উইজেট মাস্টার অ্যাডনস থেকে এলিমেন্টর সম্পাদকের ভিতরে এটি করে। একটি ছবি আপলোড করুন, মার্কারগুলি যেখানে আপনি চান সেখানে ড্রপ করুন, প্রতিটির জন্য একটি লেবেল লিখুন এবং আপনার কাজ শেষ। কোন CSS, কোন কাস্টম কোড নেই।
এলিমেন্টরে একটি ইমেজ হটস্পট কি?
একটি ইমেজ হটস্পট হল একটি ছোট ইন্টারেক্টিভ মার্কার যা একটি ছবির একটি নির্দিষ্ট অবস্থানে পিন করা হয়। প্রতিটি মার্কারের নিজস্ব লেবেল, আইকন বা লিঙ্ক রয়েছে। ডেস্কটপে, মার্কারের উপর ঘোরাফেরা করা বিষয়বস্তু সহ একটি ভাসমান প্যানেল দেখায়। মোবাইলে, ট্যাপ করা একই কাজ করে।
একটি পণ্য ছবির প্রতিটি বৈশিষ্ট্য একটি মার্কার থাকতে পারে। একটি ফ্লোর প্ল্যান পৃথক কক্ষ চিহ্নিত করতে পারে। একটি স্ক্রিনশট একটি সংক্ষিপ্ত ব্যাখ্যা সহ বোতাম বা সেটিংস নির্দেশ করতে পারে। ইমেজ নিজেই পরিবর্তন হয় না। মার্কারগুলি দর্শকদের এটি অন্বেষণ করার একটি উপায় দেয়।
Elementor একটি অন্তর্নির্মিত হটস্পট উইজেট নেই। মাস্টার অ্যাডঅন সংস্করণ উইজেট প্যানেল থেকে সবকিছু পরিচালনা করে: মার্কার বসানো, লেবেল সামগ্রী, আইকন, অ্যানিমেশন এবং স্টাইলিং। আপনি রিপিটারের মাধ্যমে প্রতিটি হটস্পট পৃথকভাবে কনফিগার করেন এবং উইজেট অবস্থান এবং প্রতিক্রিয়াশীলতার যত্ন নেয়।
কেন আপনার ওয়েবসাইটে ইমেজ হটস্পট ব্যবহার করবেন?
স্ট্যাটিক ইমেজ দর্শক যা দেখে এবং তাদের যা জানা দরকার তার মধ্যে একটি ব্যবধান তৈরি করে। হটস্পট সেই ফাঁক বন্ধ করে।
একটি পণ্যের ফটোতে, প্রতিটি বৈশিষ্ট্যে একটি মার্কার পিন করুন যাতে দর্শকরা একটি পৃথক তালিকায় স্ক্রোল না করেই চশমা দেখতে পান। একটি ফ্লোর প্ল্যানে, রুম বা বুথ চিহ্নিত করুন যাতে প্রতিটি অবস্থান তার নাম এবং বিবরণ দিয়ে খোলে। একটি ইনফোগ্রাফিকে, ভিজ্যুয়াল পরিষ্কার রাখুন এবং মার্কারগুলিকে অতিরিক্ত প্রসঙ্গ বহন করতে দিন। একটি স্ক্রিনশটে, একটি টিউটোরিয়াল বা অনবোর্ডিং প্রবাহের জন্য নির্দিষ্ট বোতাম বা সেটিংস নির্দেশ করুন। একটি দলের ফটোতে, লোক বা বিভাগকে লেবেল করুন।
গঠন সবসময় একই: একটি চিত্র, একাধিক মার্কার, প্রতিটির সাথে ইন্টারঅ্যাক্ট করার সময় বিষয়বস্তু প্রকাশ করে। ভিজিটর ইমেজ এবং এর নিচে একটি টেক্সট ব্লকের মধ্যে বাউন্স করার পরিবর্তে ইমেজে থাকে।
এলিমেন্টরে (ধাপে ধাপে) একটি ইমেজ হটস্পট কিভাবে যোগ করবেন
পুরো সেটআপটি প্রায় পাঁচ মিনিট সময় নেয়।
ধাপ 1: মাস্টার অ্যাডঅন ইনস্টল করুন এবং প্রো সক্রিয় করুন
প্লাগইনগুলিতে যান, আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ডে নতুন যোগ করুন এবং "মাস্টার অ্যাডনস" অনুসন্ধান করুন। আপনার যদি একটি থাকে প্রো লাইসেন্স, মাস্টার অ্যাডঅন, লাইসেন্সের অধীনে এটি লিখুন। ইমেজ হটস্পট উইজেট শুধুমাত্র প্রো সক্রিয় হওয়ার পরে প্রদর্শিত হবে।
ধাপ 2: আপনার পৃষ্ঠায় ইমেজ হটস্পট উইজেট টেনে আনুন
Elementor এডিটরে যেকোনো পৃষ্ঠা খুলুন। বাম দিকের এলিমেন্টস প্যানেলে, ইমেজ হটস্পট অনুসন্ধান করুন বা মাস্টার অ্যাডঅন বিভাগে স্ক্রোল করুন (উইজেটগুলি একটি বেগুনি MA ব্যাজ বহন করে)। পৃষ্ঠায় এটি টেনে আনুন। এটি একটি নমুনা চিত্র এবং কয়েকটি স্থানধারক মার্কার সহ লোড হয় যা আপনি সম্পাদনা করতে পারেন৷।
ধাপ 3: আপনার ছবি আপলোড করুন
বিষয়বস্তু ট্যাবে, চিত্র বিভাগটি খুলুন। ছবি চয়ন করুন ক্লিক করুন এবং মিডিয়া লাইব্রেরি থেকে একটি ছবি চয়ন করুন। একটি তীক্ষ্ণ রেন্ডারের জন্য চিত্র রেজোলিউশন সম্পূর্ণ বা বড় সেট করুন। প্রান্তিককরণ বিকল্পটি চিত্রটিকে তার কলামের মধ্যে অবস্থান করে: বাম, কেন্দ্র বা ডান।
ধাপ 4: ছবিতে হটস্পট যোগ করুন
হটস্পট বিভাগ খুলুন। রিপিটারের প্রতিটি আইটেম একটি মার্কার। একটি নতুন তৈরি করতে আইটেম যোগ করুন ক্লিক করুন। আপনি ইমেজ প্রয়োজন হিসাবে অনেক যোগ করতে পারেন। ইমেজটির অবস্থানের জন্য প্রতিটি মার্কারকে টেনে আনুন, অথবা সুনির্দিষ্ট স্থাপনের জন্য সঠিক অনুভূমিক এবং উল্লম্ব স্থানাঙ্ক সেট করুন।
আপনি যদি ডিফল্ট পালসিং অ্যানিমেশনের পরিবর্তে স্ট্যাটিক মার্কার চান তবে একটি নিষ্ক্রিয় পালস প্রভাব টগল রয়েছে।
ধাপ 5: মার্কার টাইপ এবং লেবেল বিষয়বস্তু সেট করুন
একটি হটস্পট আইটেম এর সেটিংস খুলতে ক্লিক করুন। টাইপের অধীনে, মার্কারের ভিতরে যা প্রদর্শিত হবে তা চয়ন করুন: কিছুই (শুধু একটি বিন্দু), একটি আইকন বা একটি ছোট চিত্র। টেক্সট ফিল্ডে ছোট লেবেল থাকে যা ভাসমান প্যানেলে দেখায়। লিঙ্ক ক্ষেত্রটি একটি URL যোগ করে যাতে মার্কারটি ক্লিকে কোথাও নেভিগেট করে।
টুলটিপ বিষয়বস্তু সম্পাদক সম্পূর্ণ লেবেল পাঠ্যের জন্য একটি WYSIWYG বক্স। আপনি সেখানে বিন্যাস, ছবি বা শর্টকোড ব্যবহার করতে পারেন।
ধাপ 6: মার্কার আচরণ কনফিগার করুন
মূল বিষয়বস্তু ট্যাবে ফিরে, টুলটিপ বিভাগটি নিয়ন্ত্রণ করে কিভাবে লেবেলগুলি সমস্ত মার্কার জুড়ে আচরণ করে:
- অবস্থান দেখান: মার্কারের কোন দিকে লেবেলটি খোলে (উপরে, নীচে, বাম, ডান)।
- তীর: মার্কার এবং লেবেলের মধ্যে একটি পয়েন্টার টগল করুন।
- অ্যানিমেশন: লেবেল প্রদর্শিত হলে প্রকাশ প্রভাব, যেমন Shift-Toward।
- ক্লিকে ট্রিগার করুন: হোভার-টু-রিভিল থেকে ক্লিক-টু-রিভিলে স্যুইচ করে। এটি আপনি মোবাইলের জন্য চান, যেহেতু টাচস্ক্রিনে হোভার নেই।
মার্কার স্টাইলিং বিকল্প
মার্কারের উপস্থিতির জন্য প্রতিটি হটস্পটের নিজস্ব স্টাইল ট্যাব রয়েছে:
- ডিফল্ট রঙ এবং ডিফল্ট পটভূমি: বিশ্রামে চিহ্নিতকারী।
- হোভার কালার এবং হোভার ব্যাকগ্রাউন্ড: হোভারে এটি কীভাবে পরিবর্তিত হয়।
- অস্বচ্ছতা: চিত্রের বিপরীতে মার্কারটি কতটা শক্ত দেখাচ্ছে। নিম্ন মান এটি আরো সূক্ষ্ম করে তোলে।
একটি মার্কার রঙ চয়ন করুন যা এটির পিছনের চিত্র থেকে আলাদা। একটি ব্যস্ত ফটো একটি কম-কনট্রাস্ট মার্কার গ্রাস করবে এবং দর্শকরা হটস্পটগুলি লক্ষ্য করবে না।
ইমেজ এবং লেবেল স্টাইলিং
উইজেটের প্রধান স্টাইল ট্যাবে তিনটি বিভাগ রয়েছে।
ইমেজ প্যানেল
ইমেজ নিজেই নিয়ন্ত্রণ করে: অস্বচ্ছতা, সীমানা ব্যাসার্ধ, বক্স ছায়া, এবং CSS ফিল্টার। একটি সীমানা ব্যাসার্ধ বা ছায়া ছবিটিকে কার্ড-স্টাইল লেআউটের ভিতরে বসতে সাহায্য করে। CSS ফিল্টার আপনাকে ইমেজ পুনরায় রপ্তানি না করেই উজ্জ্বলতা, বৈসাদৃশ্য বা স্যাচুরেশন পরিবর্তন করতে দেয়।
মার্কার প্যানেল
সমস্ত মার্কারের জন্য বিশ্বব্যাপী সেটিংস: আকার এবং ডিফল্ট রঙ। স্বতন্ত্র হটস্পট শৈলী এগুলিকে ওভাররাইড করে।
লেবেল প্যানেল
ভাসমান প্যানেল নিয়ন্ত্রণ করে যা একটি মার্কারের সাথে ইন্টারঅ্যাক্ট করার সময় প্রদর্শিত হয়: পটভূমির রঙ, পাঠ্যের রঙ, টাইপোগ্রাফি, প্যাডিং, সীমানা ব্যাসার্ধ এবং ছায়া।
মোবাইলে প্রতিক্রিয়াশীল আচরণ
মার্কাররা শতাংশ-ভিত্তিক পজিশনিং ব্যবহার করে, তাই তারা স্ক্রিনের আকার নির্বিশেষে চিত্রের একই জায়গায় পিন থাকে। ভিউপোর্টের মধ্যে থাকার জন্য লেবেলগুলির আকার পরিবর্তন এবং পুনঃস্থাপন।
টাচ ডিভাইসে হোভার নেই, তাই টুলটিপস বিভাগে ট্রিগার অন ক্লিক টগল পুরো উইজেটটিকে ট্যাপ-টু-রিভেলে স্যুইচ করে। দর্শকরা লেবেলটি খুলতে একটি মার্কার ট্যাপ করে এবং এটি বন্ধ করতে অন্য কোথাও ট্যাপ করে। আপনার শ্রোতারা বেশিরভাগই মোবাইলে থাকলে, শুরু থেকেই এটি চালু করুন।
খুব ছোট স্ক্রিনে যেখানে লেবেলগুলি ওভারল্যাপ হতে শুরু করে, আপনি একটি নির্দিষ্ট ব্রেকপয়েন্টের নীচে সেগুলিকে নিষ্ক্রিয় করতে পারেন এবং পরিবর্তে মার্কার লিঙ্কগুলিকে কাজ করতে দিতে পারেন৷ প্রতিটি মার্কার এখনও ট্যাপে তার URL-এ নেভিগেট করে৷।
ইমেজ হটস্পট বনাম টুলটিপ উইজেট: পার্থক্য কি?
মাস্টার অ্যাডনসের দুটি বৈশিষ্ট্য রয়েছে যা হোভার লেবেল তৈরি করে এবং লোকেরা সেগুলিকে মিশ্রিত করে:
| বৈশিষ্ট্য | এটা কি করে | জন্য সেরা |
|---|---|---|
| ইমেজ হটস্পট উইজেট | একটি ছবিতে নির্দিষ্ট x/y অবস্থানে ইন্টারেক্টিভ মার্কার পিন করে। প্রতিটি মার্কার হোভার বা ক্লিকে একটি লেবেল খোলে। | টীকাযুক্ত ফটো, পণ্য কলআউট, ফ্লোর প্ল্যান, ইন্টারেক্টিভ মানচিত্র। |
| টুলটিপ উইজেট | যেকোনো এলিমেন্টর এলিমেন্টে একটি হোভার লেবেল সংযুক্ত করে: একটি বোতাম, আইকন, টেক্সট ব্লক, বিভাগ বা উইজেট। | বোতামগুলিতে ইঙ্গিতগুলি হোভার করুন, ফর্ম ক্ষেত্রগুলিতে পাঠ্যকে সহায়তা করুন, যে কোনও পৃষ্ঠার উপাদানে অতিরিক্ত প্রসঙ্গ। |
ইমেজ হটস্পট ইমেজ-নির্দিষ্ট এবং অবস্থান-ভিত্তিক। টুলটিপ যেকোনো এলিমেন্টর উইজেটে কাজ করে। আপনার যদি একটি ফটোতে মার্কার প্রয়োজন হয়, ইমেজ হটস্পট ব্যবহার করুন। আপনার যদি একটি বোতাম বা টেক্সট ব্লকে একটি হোভার লেবেল প্রয়োজন হয়, ব্যবহার করুন টুলটিপ উইজেট.
উভয়ই মাস্টার অ্যাডনস প্রো নিয়ে আসে। তারা বিভিন্ন উপাদানে কাজ করে এবং নির্বাচক বা ইভেন্ট হ্যান্ডলার ভাগ করে না, তাই আপনি সমস্যা ছাড়াই একই পৃষ্ঠায় তাদের ব্যবহার করতে পারেন।
ইমেজ হটস্পট সঙ্গে কাজ করার জন্য টিপস
- স্পেস মার্কার আউট. ওভারল্যাপিং মার্কার ইমেজ ব্যবহার করা কঠিন করে তোলে। যদি দুটি হটস্পট একসাথে বসে থাকে, তাদের লেবেলগুলিকে বিপরীত দিকে ঠেলে দিন বা তাদের একটি ফেলে দিন।
- লেবেল ছোট রাখুন। একটি ফ্লোটিং প্যানেলের ভিতরে একটি অনুচ্ছেদের চেয়ে একটি বা দুটি লাইন ভাল পড়ে। একটি দ্রুত সারাংশের জন্য লেবেলটি ব্যবহার করুন এবং সম্পূর্ণ বিবরণের জন্য লিঙ্ক আউট করুন।
- মোবাইলের জন্য ক্লিক অন ট্রিগার চালু করুন। এমনকি যদি হোভার ডেস্কটপে কাজ করে, স্পর্শ ব্যবহারকারীদের একটি ট্যাপ লক্ষ্য প্রয়োজন। উইজেট একই সময়ে উভয় মোড পরিচালনা করে।
- বিভিন্ন স্ক্রিনে পরীক্ষা করুন। একটি ডেস্কটপে ভাল স্পেসযুক্ত মার্কারগুলি একটি ফোনে গুচ্ছ হতে পারে। প্রকাশ করার আগে একটি ফোন, একটি ট্যাবলেট এবং একটি প্রশস্ত মনিটর পরীক্ষা করুন৷।
- চিত্রের বিপরীতে মার্কারগুলিকে বৈসাদৃশ্য করুন। একটি অন্ধকার ছবির উপর একটি উজ্জ্বল মার্কার কাজ করে। একটি ব্যস্ত পটভূমিতে একটি নিঃশব্দ মার্কার অদৃশ্য হয়ে যায়। কেউ যখন মার্কারে ফোকাস করে তখন জোর যোগ করতে হোভার স্টেট ব্যবহার করুন।
- সারিবদ্ধকরণ গুরুত্বপূর্ণ হলে অবস্থান ট্যাব ব্যবহার করুন। রুক্ষ বসানোর জন্য টেনে আনা দ্রুত। সঠিক শতাংশ মান সহ অবস্থান ট্যাবটি আরও ভাল হয় যখন আপনার একটি ডায়াগ্রাম বা স্ক্রিনশটের নির্দিষ্ট অংশগুলির সাথে লাইন আপ করার জন্য মার্কারগুলির প্রয়োজন হয়৷।
বিনামূল্যে বনাম প্রো: আপনি যা পান
| পরিকল্পনা | ইমেজ হটস্পট | অন্যান্য উইজেট |
|---|---|---|
| বিনামূল্যে | অন্তর্ভুক্ত না | শিরোনাম, বোতাম, তথ্য বাক্স, অ্যাকর্ডিয়ন এবং আরও অনেক কিছু সহ 40+ উইজেট। |
| প্রো | অন্তর্ভুক্ত | সমস্ত বিনামূল্যের উইজেট প্লাস ইমেজ হটস্পট, টুলটিপ, মেগা মেনু এবং 76+ মোট উইজেট এবং এক্সটেনশন। |
বেস প্লাগইন থেকে ইনস্টল করার জন্য বিনামূল্যে ওয়ার্ডপ্রেস রিপোজিটরি। ইমেজ হটস্পট উইজেট বিশেষভাবে একটি প্রয়োজন প্রো লাইসেন্স.
Elementor একটি ইমেজ হটস্পট কি?
একটি ইমেজ হটস্পট হল একটি ছোট ইন্টারেক্টিভ মার্কার যা একটি ছবির উপরে রাখা হয়। যখন একজন দর্শক এটিকে ঘোরান বা ট্যাপ করেন, তখন ছবির সেই নির্দিষ্ট এলাকার জন্য পাঠ্য, একটি বিবরণ বা একটি লিঙ্ক সহ একটি লেবেল প্রদর্শিত হয়। Elementor একটি অন্তর্নির্মিত হটস্পট উইজেট অন্তর্ভুক্ত করে না, তাই এই বৈশিষ্ট্যটি যোগ করতে আপনার মাস্টার অ্যাডনসের মতো একটি অ্যাডন প্রয়োজন৷।
আমি একটি একক ছবিতে কতগুলি হটস্পট যোগ করতে পারি?
কোন কঠিন সীমা নেই। কার্যত, প্রতি ছবিতে 5 থেকে 7টি হটস্পট জিনিসগুলিকে পাঠযোগ্য রাখে। এর বাইরে, মার্কারগুলি ওভারল্যাপ করা শুরু করে। আপনি যদি আরও এলাকা টীকা করতে চান, একাধিক ছবিতে বিষয়বস্তু বিভক্ত করুন।
ইমেজ হটস্পট মোবাইলে কাজ করে?
হ্যাঁ। টাচ ডিভাইসে উইজেট হোভার থেকে ট্যাপ-টু-রিভেলে স্যুইচ করে। আপনি ক্লিকে ট্রিগার সক্ষম করতে পারেন যাতে মোবাইল দর্শকরা এটির লেবেল খুলতে একটি মার্কার ট্যাপ করে। শতাংশ-ভিত্তিক পজিশনিং হটস্পটগুলিকে স্ক্রিনের আকার জুড়ে সঠিকভাবে পিন করে রাখে।
আমি কি একটি হটস্পটকে অন্য পৃষ্ঠায় লিঙ্ক করতে পারি?
হ্যাঁ। প্রতিটি হটস্পটে একটি লিঙ্ক ক্ষেত্র আছে। লিঙ্কটি ক্লিকে ফায়ার হয়, তাই একটি মার্কার উভয়ই তার লেবেলে তথ্য দেখাতে পারে এবং দর্শককে একটি পণ্য পৃষ্ঠা, ডকুমেন্টেশন বিভাগ বা বাহ্যিক URL-এ নেভিগেট করতে পারে।
ইমেজ হটস্পট উইজেট বিনামূল্যে নাকি প্রো?
ইমেজ হটস্পট উইজেট একটি প্রো বৈশিষ্ট্য। বেস মাস্টার অ্যাডঅন প্লাগইনটি বিনামূল্যে এবং এতে 40টিরও বেশি উইজেট রয়েছে, তবে হটস্পট উইজেটের জন্য একটি প্রয়োজন প্রো লাইসেন্স.
ইমেজ হটস্পট উইজেট এবং টুলটিপ উইজেটের মধ্যে পার্থক্য কী?
ইমেজ হটস্পট উইজেট একটি ইমেজের নির্দিষ্ট অবস্থানে ইন্টারেক্টিভ মার্কার পিন করে, প্রতিটি হোভার বা ক্লিকে একটি লেবেল দেখায়। দ্য টুলটিপ উইজেট যেকোনো এলিমেন্টর এলিমেন্টে (বোতাম, টেক্সট, আইকন) একটি হোভার লেবেল সংযুক্ত করে। টীকাযুক্ত ছবির জন্য ইমেজ হটস্পট ব্যবহার করুন; অন্যান্য পৃষ্ঠা উপাদানগুলিতে হোভার ইঙ্গিতগুলির জন্য টুলটিপ ব্যবহার করুন।
মোড়ানো
ইমেজ হটস্পট উইজেট একটি ফ্ল্যাট ইমেজ নেয় এবং মার্কার যোগ করে যা হোভার বা ক্লিকের তথ্য প্রকাশ করে। ইমেজ আপলোড করুন, যে এলাকায় ব্যাখ্যা প্রয়োজন সেখানে মার্কার ড্রপ করুন, প্রতিটির জন্য একটি ছোট লেবেল লিখুন এবং আপনার ডিজাইনের সাথে মেলে মার্কার স্টাইল করুন। এলিমেন্টর এডিটরের ভিতরে সবকিছু ঘটে।
Elementor-এ ইমেজ সম্পর্কে আরও জানতে, দেখুন চিত্র তুলনা উইজেট এবং ইমেজ হোভার ইফেক্ট উইজেট। আপনার যদি ছবির পরিবর্তে বোতাম বা টেক্সটে লেবেল হোভার করার প্রয়োজন হয়, টুলটিপ উইজেট টিউটোরিয়াল যে কভার। এবং সম্পূর্ণ তালিকা মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন আপনি যদি আর কি পাওয়া যায় তা দেখতে চাইলে ব্রাউজ করা মূল্যবান।
মাস্টার অ্যাডঅন প্রো পান এলিমেন্টরের জন্য ইমেজ হটস্পট উইজেট এবং 76+ অন্যান্য উইজেট এবং এক্সটেনশন আনলক করতে।
