কিছু ইমেজ একটু ব্যাখ্যা করা প্রয়োজন, যেমন একটি পণ্য শট, একটি মেঝে পরিকল্পনা, বা একটি মানচিত্র। দ্য ইমেজ হটস্পট উইজেট মধ্যে এলিমেন্টরের জন্য মাস্টার অ্যাডঅন এটি একটি প্রো উইজেট যা একটি চিত্রের যেকোনো জায়গায় ক্লিকযোগ্য মার্কার পিন করে। প্রতিটি একটি ছোট টেক্সট টুলটিপ দেখায়, এবং অন্য পৃষ্ঠার সাথে লিঙ্ক করতে পারে, যখন একজন দর্শক এটিকে ঘোরায় বা ট্যাপ করে।
আপনি একটি ছবি লোড করুন, হটস্পটগুলি যেখানে আপনি চান সেখানে ফেলে দিন, টুলটিপ পাঠ্য যোগ করুন, তারপর মার্কারগুলিকে স্টাইল করুন এবং টুলটিপগুলি কীভাবে আচরণ করে তা সেট করুন৷ এই নির্দেশিকাটি উইজেটের প্রতিটি সেটিং কভার করে।
ইমেজ হটস্পট উইজেট কি করে #
উইজেট একটি একক চিত্রের উপরে মার্কার রাখে। প্রতিটি হটস্পটের নিজস্ব অবস্থান, আইকন এবং টুলটিপ রয়েছে, যাতে আপনি একটি ছবির অংশগুলিকে লেবেল করতে পারেন বা অন্য পৃষ্ঠাগুলির সাথে লিঙ্ক করতে পারেন৷ একটি মার্কার হোভার করুন বা ক্লিক করুন এবং এর টুলটিপ এটির পাশে পপ আপ হয়।
তিনটি ট্যাব এটি চালায়। বিষয়বস্তু ইমেজ, হটস্পট এবং টুলটিপ আচরণ ধারণ করে। শৈলী ছবি, মার্কার রং এবং টুলটিপ লুক পরিচালনা করে। উন্নত সাধারণ এলিমেন্টর ব্যবধান এবং দৃশ্যমানতা।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- মাস্টার অ্যাডনস প্রো একটি সক্রিয় লাইসেন্স সহ ইনস্টল করা হয়েছে, যেহেতু ইমেজ হটস্পট একটি প্রো উইজেট। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
- একটি ছবি, এবং লেবেল বা লিঙ্কগুলি আপনি প্রতিটি হটস্পট দেখাতে চান৷।
কিভাবে ইমেজ হটস্পট উইজেট যোগ করবেন #
Elementor এডিটরে, খুলুন উপাদান প্যানেল এবং অনুসন্ধান করুন ইমেজ হটস্পট, অথবা মাস্টার অ্যাডঅন বিভাগে স্ক্রোল করুন (উইজেটগুলি একটি বেগুনি MA ব্যাজ বহন করে)। এটিকে পৃষ্ঠায় টেনে আনুন এবং এটি একটি নমুনা চিত্র এবং মার্কার দিয়ে লোড হয় যা আপনি সম্পাদনা করতে পারেন৷।
ছবিটি নির্বাচন করুন #
খোলা বিষয়বস্তু ট্যাব। দ্য ছবি বিভাগ হল যেখানে আপনি হটস্পটগুলি বসে থাকা বেস ছবি লোড করেন।
- ছবি নির্বাচন করুন: মিডিয়া লাইব্রেরি থেকে ছবি বাছাই করুন।
- ইমেজ রেজোলিউশন: আকার পরিবেশিত, বড় বা পূর্ণ মত।
- প্রান্তিককরণ: এর কলামের মধ্যে বাম, কেন্দ্র বা ডান।
হটস্পট যোগ করুন #
খোলা হটস্পট বিভাগ। এটি একটি রিপিটার, তাই প্রতিটি মার্কার তার নিজস্ব আইটেম। মার্কার যোগ করতে আইটেম যোগ করুন ব্যবহার করুন, তারপর প্রতিটিকে তার অবস্থান ট্যাবে স্লাইডার সহ রাখুন।
- আইটেম যোগ করুন: ছবির প্রয়োজন অনুযায়ী অনেক হটস্পট যোগ করুন।
- পালস প্রভাব অক্ষম করুন: মার্কারগুলিতে স্পন্দিত অ্যানিমেশন বন্ধ করুন।
- অবস্থান ট্যাব: প্রতিটি মার্কারের জন্য শতাংশে অনুভূমিক এবং উল্লম্ব অবস্থান।
প্রতিটি হটস্পট সেট আপ করুন #
একটি হটস্পটের সেটিংস খুলতে ক্লিক করুন। দ্য বিষয়বস্তু ট্যাব মার্কার টাইপ, এর টুলটিপ টেক্সট এবং একটি ঐচ্ছিক লিঙ্ক সেট করে।
- প্রকার: মার্কারের ভিতরে কিছুই, ছোট পাঠ্য, একটি আইকন বা একটি চিত্র দেখান না।
- পাঠ্য এবং লিঙ্ক: মার্কারের ভিতরের পাঠ্য এবং একটি URL, যা কাজ করে যখন টুলটিপগুলি হোভারে খোলে বা সেই স্ক্রিনে নিষ্ক্রিয় থাকে৷।
- টুলটিপ বিষয়বস্তু: টুলটিপ পাঠ্য। এটি একটি WYSIWYG বক্সে সম্পাদনা করা হয়, কিন্তু টুলটিপ শুধুমাত্র প্লেইন টেক্সট দেখায়।
প্রতিটি হটস্পট শৈলী #
দ্য শৈলী একটি হটস্পটে ট্যাব তার রং সেট করে। আপনি স্বাভাবিক অবস্থার জন্য একটি রঙ এবং পটভূমি এবং হোভারের জন্য একটি পৃথক সেট এবং একটি অস্বচ্ছতা স্লাইডার পাবেন।
- ডিফল্ট রঙ এবং পটভূমি: বিশ্রামে মার্কার।
- হোভার রঙ এবং পটভূমি: এটি হোভারে কীভাবে পরিবর্তিত হয়।
- অস্বচ্ছতা: মার্কার দেখতে কতটা শক্ত।
টুলটিপ নিয়ন্ত্রণ করুন #
মূল বিষয়বস্তু ট্যাবে ফিরে, টুলটিপস প্রতিটি টুলটিপ কীভাবে আচরণ করে তা বিভাগ নিয়ন্ত্রণ করে: এটি কোথায় বসে, কীভাবে এটি অ্যানিমেট করে এবং এটি হোভার বা ক্লিকে খোলে কিনা।
- অবস্থান এবং তীর দেখান: টুলটিপটি কোন দিকে খোলে এবং এতে একটি পয়েন্টার আছে কিনা।
- অ্যানিমেশন: শিফট-টুওয়ার্ডের মতো প্রকাশের প্রভাব।
- ক্লিক এ ট্রিগার করুন: হোভারের পরিবর্তে ক্লিকে টুলটিপ খুলুন, স্পর্শের জন্য ভাল। চালু অক্ষম ট্যাবলেট এবং মোবাইল বা মোবাইলে টুলটিপ লুকিয়ে রাখে।
ইমেজ এবং টুলটিপ স্টাইল করুন #
খোলা শৈলী উইজেটে ট্যাব। দ্য ছবি বিভাগটি ছবির অস্বচ্ছতা, সীমানা এবং ফিল্টার এবং আলাদা করে সেট করে হটস্পট এবং টুলটিপস বিভাগগুলি মার্কার এবং টুলটিপ বাক্সগুলিকে স্টাইল করে।
- ছবি: অস্বচ্ছতা, সীমানা ব্যাসার্ধ, বক্স ছায়া, এবং CSS ফিল্টার।
- হটস্পট: মার্কারগুলির জন্য বিশ্বব্যাপী আকার এবং রঙ।
- টুলটিপস: টুলটিপ ব্যাকগ্রাউন্ড, টেক্সট কালার এবং টাইপোগ্রাফি।
সাধারণ ব্যবহারের ক্ষেত্রে #
- পণ্য ইমেজ ছবির কিছু অংশে বৈশিষ্ট্য বা চশমা পিন করা।
- মানচিত্র এবং মেঝে পরিকল্পনা রুম, বুথ বা অবস্থান চিহ্নিত করা।
- ইনফোগ্রাফিক্স ইমেজ বিশৃঙ্খল ছাড়া বিস্তারিত যোগ করা।
- দল বা অফিসের ছবি মানুষ বা এলাকা লেবেল।
- টিউটোরিয়াল একটি স্ক্রিনশটে পদক্ষেপ বা অংশগুলি নির্দেশ করা।
ইমেজ হটস্পট উইজেটের সাথে কাজ করার জন্য টিপস #
- হটস্পট পঠনযোগ্য রাখুন। মার্কার এবং টুলটিপগুলি ছোট স্ক্রিনে ওভারল্যাপ না করার জন্য সেগুলিকে স্পেস করুন।
- মোবাইলে ক্লিক ব্যবহার করুন। ক্লিকে ট্রিগার চালু করুন যাতে স্পর্শ ব্যবহারকারীরা টুলটিপ খুলতে পারে, যেহেতু ফোনে কোনো হোভার নেই।
- মার্কার বৈসাদৃশ্য। একটি মার্কার রঙ চয়ন করুন যা এটির পিছনের চিত্র থেকে আলাদা, নতুবা একটি ব্যস্ত ফটো এটিকে গ্রাস করবে।
- টুলটিপ টেক্সট ছোট রাখুন। একটি ভাসমান বাক্সে স্টাফ করা একটি অনুচ্ছেদের চেয়ে একটি বা দুটি লাইন ভাল পড়ে।
- সঠিক অবস্থান সেট করুন। অবস্থান ট্যাব স্লাইডার ব্যবহার করুন, তারপর প্রতিটি মার্কার চেক করতে একটি ফোনে পূর্বরূপ দেখুন।
ভিডিও টিউটোরিয়াল দেখুন #
পর্দায় বরাবর অনুসরণ করতে পছন্দ করেন? নীচের ভিডিও টিউটোরিয়ালটি ইমেজ হটস্পট উপাদানের মধ্য দিয়ে শুরু থেকে শেষ পর্যন্ত চলে, এটি দেখায় যে কীভাবে এলিমেন্টর এডিটরে ছবি, হটস্পট, টুলটিপ এবং স্টাইলিং কাজ করে।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডঅনগুলিতে ইমেজ হটস্পট উইজেট কী?
এটি এলিমেন্টরের জন্য একটি মাস্টার অ্যাডনস প্রো উইজেট যা একটি ছবিতে ইন্টারেক্টিভ মার্কার পিন করে। প্রতিটি হটস্পটের নিজস্ব অবস্থান, মার্কার টাইপ, প্লেইন টেক্সট টুলটিপ এবং ঐচ্ছিক লিঙ্ক রয়েছে, হোভার বা ক্লিকে দেখানো হয়েছে। সবকিছু এলিমেন্টর প্যানেল থেকে কোনো কোড ছাড়াই সেট করা আছে।
আমি কিভাবে একটি ছবিতে আরো হটস্পট যোগ করব?
বিষয়বস্তু ট্যাবে হটস্পট বিভাগটি খুলুন এবং অন্য মার্কার তৈরি করতে আইটেম যোগ করুন ব্যবহার করুন। প্রতিটি নতুন হটস্পট তার নিজস্ব বিষয়বস্তু, শৈলী এবং অবস্থান পায় এবং আপনি এটিকে তার অবস্থান ট্যাবে স্লাইডারের সাথে রাখেন।
আমি কি একটি হটস্পটে একটি লিঙ্ক যোগ করতে পারি?
হ্যাঁ। প্রতিটি হটস্পটের বিষয়বস্তু ট্যাবে একটি লিঙ্ক ক্ষেত্র থাকে, তাই একটি মার্কার যেকোনো URL নির্দেশ করতে পারে। লিঙ্কটি কাজ করে যখন টুলটিপগুলি হোভারে খোলে বা সেই স্ক্রিনে অক্ষম থাকে। এটি একটি চিত্রকে একটি ক্লিকযোগ্য মানচিত্র হিসাবে কাজ করতে দেয়, ফটোতে একটি পিন থেকে একটি পণ্য পৃষ্ঠা, একটি বিভাগ বা একটি বহিরাগত সাইটে দর্শকদের পাঠায়৷।
ইমেজ হটস্পট মোবাইলে কাজ করে?
হ্যাঁ, কিন্তু স্পর্শে হোভার বিদ্যমান নেই। টুলটিপ বিভাগে ক্লিক করুন ট্রিগার চালু করুন যাতে মোবাইল ব্যবহারকারীরা একটি মার্কারকে তার টুলটিপ খুলতে ট্যাপ করতে পারে। এছাড়াও আপনি একটি ব্রেকপয়েন্টের নিচে টুলটিপ লুকাতে পারেন এবং পরিবর্তে মার্কার লিঙ্ক ব্যবহার করতে পারেন।
আমি কি মার্কার হিসাবে একটি কাস্টম আইকন বা চিত্র ব্যবহার করতে পারি?
হ্যাঁ। প্রতিটি হটস্পটের বিষয়বস্তু ট্যাবে একটি টাইপ বিকল্প রয়েছে যেখানে আপনি ডিফল্টের পরিবর্তে মার্কারের ভিতরে একটি আইকন বা একটি চিত্র দেখাতে পারেন। এইভাবে মার্কারগুলি আপনার ব্র্যান্ড বা ছবির বিষয়ের সাথে মেলে।
মোড়ানো #
ইমেজ হটস্পট উইজেট একটি ফ্ল্যাট ইমেজকে একটি ইন্টারেক্টিভ ছবিতে পরিণত করে: ছবি লোড করুন, মার্কার পিন করুন, টুলটিপ যোগ করুন, তারপর মার্কার স্টাইল করুন এবং টুলটিপ আচরণ সেট করুন। উদাহরণ এবং Elementor Pro এর হটস্পটের সাথে তুলনা করার জন্য, দেখুন এলিমেন্টর ইমেজ হটস্পট উইজেট পৃষ্ঠা। সম্পর্কিত উইজেটগুলির জন্য, দেখুন চিত্র তুলনা উইজেট এবং ইমেজ হোভার ইফেক্ট উইজেট, সম্পূর্ণ ব্রাউজ করুন মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং চেক করুন মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।
