ইমেজ হোভার প্রভাব

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

এই পৃষ্ঠাটি সেটিংস রেফারেন্স। প্রভাবের লাইভ ডেমোর জন্য এবং বিনামূল্যে বা প্রো কী, দেখুন এলিমেন্টর ইমেজ হোভার ইফেক্ট উইজেট পৃষ্ঠা।

আপনি নামযুক্ত প্রভাবগুলির মধ্যে একটি বেছে নিন, একটি চিত্র ড্রপ করুন, ওভারলে পাঠ্য যোগ করুন, তারপর রঙ এবং ফিল্টার স্টাইল করুন। কোন কাস্টম CSS প্রয়োজন নেই। এই গাইড উইজেটের প্রতিটি সেটিং কভার করে।

ইমেজ হোভার ইফেক্ট উইজেট কি করে #

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

তিনটি ট্যাব এটি চালায়। বিষয়বস্তু প্রভাব, চিত্র এবং ওভারলে পাঠ্য ধারণ করে। শৈলী ছবির অস্বচ্ছতা, ফিল্টার, সীমানা এবং শিরোনাম এবং বর্ণনার রঙগুলি পরিচালনা করে। উন্নত সাধারণ এলিমেন্টর ব্যবধান এবং দৃশ্যমানতা।

আপনি শুরু করার আগে #

• ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
• এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
• একটি ছবি, এছাড়াও শিরোনাম এবং ক্যাপশন পাঠ্য আপনি হোভারে দেখাতে চান৷।

কিভাবে ইমেজ হোভার ইফেক্ট উইজেট যোগ করবেন #

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

প্রভাব এবং চিত্র চয়ন করুন #

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

• হোভার ইফেক্ট: হোভারে ব্যবহৃত নামযুক্ত অ্যানিমেশন (এর পরে আরও)।
• ছবি আপলোড করুন: মিডিয়া লাইব্রেরি থেকে ছবিটি বেছে নিন।
• ছবির আকার এবং ছবির রেজোলিউশন: ফসল এবং রেজোলিউশন পরিবেশিত।
• লিঙ্ক বা পপআপ?: পুরো ছবিটিকে একটি লিঙ্ক করুন, অথবা একটি পপআপ খুলুন (পপআপ সামগ্রীর প্রো প্রয়োজন)৷।

একটি হোভার প্রভাব চয়ন করুন #

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

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

ছবিটি নির্বাচন করুন #

ক্লিক করুন ছবি আপলোড করুন মিডিয়া লাইব্রেরি খুলতে, তারপর আপনার ছবি বাছাই বা আপলোড করুন। আপনি যে প্রভাব বেছে নিয়েছেন তা এই ছবির উপরে চলে।

শিরোনাম যোগ করুন #

খোলা শিরোনাম শিরোনামের জন্য বিভাগ যা হোভারে দেখায়। টেক্সট টাইপ করুন এবং HTML ট্যাগ সেট করুন যাতে এটি SEO এর জন্য সঠিকভাবে পড়ে।

• শিরোনাম: শিরোনাম পাঠ্য। যদি আপনার সাইট Elementor AI ব্যবহার করে, Elementor এর নিজস্ব Write with AI লিঙ্কও এখানে দেখায়।
• HTML ট্যাগ: শিরোনাম স্তর, H1 থেকে H6।

বর্ণনা এবং লিঙ্ক যোগ করুন #

খোলা বর্ণনা হোভার শিরোনামের অধীনে দেখানো ক্যাপশন যোগ করার জন্য বিভাগ। ফিরে প্রভাব এবং চিত্র, যদি আপনি সেট লিঙ্ক বা পপআপ? পপআপ করতে, বিষয়বস্তুর প্রকার এবং বিষয়বস্তু ক্ষেত্রগুলি পপআপ কী দেখায় তা নির্ধারণ করে৷ পপআপ সামগ্রী প্রো প্রয়োজন।

• বিষয়বস্তুর প্রকার: পপআপ যা দেখায়: একটি চিত্র, পাঠ্য, একটি সংরক্ষিত বিভাগ, একটি সংরক্ষিত উইজেট বা একটি সংরক্ষিত পৃষ্ঠা টেমপ্লেট (প্রো)৷।
• বিষয়বস্তু: পপআপ পাঠ্য, একটি সম্পূর্ণ WYSIWYG বক্সে সম্পাদিত।
• লিঙ্ক বা পপআপ?: একটি URL এ ছবিটি নির্দেশ করুন বা একটি পপআপে এটি খুলুন৷।

ইমেজ এবং ওভারলে শৈলী #

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

• ইমেজ অস্বচ্ছতা এবং হোভার অস্বচ্ছতা: বিশ্রামে এবং ঘোরাঘুরিতে ছবিটি কতটা দৃশ্যমান।
• ইমেজ ফিল্টার এবং হোভার ইমেজ ফিল্টার: প্রতিটি রাজ্যের জন্য অস্পষ্টতা, উজ্জ্বলতা এবং বৈসাদৃশ্য।
• বর্ডার, বর্ডার রেডিয়াস (প্রো), বক্স শ্যাডো: ছবির চারপাশে ফ্রেম।

ইমেজ বিভাগের অধীনে, পৃথক শিরোনাম এবং বর্ণনা বিভাগগুলি ওভারলে পাঠ্যের রঙ এবং টাইপোগ্রাফি পরিচালনা করে।

সাধারণ ব্যবহারের ক্ষেত্রে #

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

ইমেজ হোভার ইফেক্ট উইজেটের সাথে কাজ করার জন্য টিপস #

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

ভিডিও টিউটোরিয়াল দেখুন #

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

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

মোড়ানো #

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