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

আমরা সবাই জানি এলিমেন্টর ওয়েবসাইট বিল্ডারের সাথে কীভাবে সীমাহীন কাস্টমাইজেশন পাওয়া যায়। সেই কাস্টমাইজেশনের মাধ্যমে, আমরা ব্যবহারকারীর অভিজ্ঞতা বাড়াতে পারি এবং আমরা যা তৈরি করি তাতে সৃজনশীল হতে পারি।

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

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

আপনি ইতিমধ্যেই জানেন যে প্রভাবটি কী এবং আপনি কী তৈরি করতে চান সে সম্পর্কে আপনার মনে ধারণা রয়েছে, আসুন এগিয়ে যান এবং কীভাবে দেখুন।

শুরু করতে, উইজেটগুলির জন্য একটি অভ্যন্তরীণ বিভাগ যোগ করুন।

এরপরে, আপনাকে আপনার প্রাথমিকভাবে তৈরি করা বিভাগে একটি কলাম যোগ করতে হবে। এই টিউটোরিয়ালের জন্য, আমরা দুই-কলামের কাঠামো নিয়ে যাব।

তারপর আপনার তৈরি করা কলামে চিত্র উইজেটটি টেনে আনুন এবং ড্রপ করুন।

প্রভাব কাজ করার জন্য, আপনি দুটি ছবি প্রয়োজন হবে. একটি সাধারণভাবে দেখানো হবে, অন্যটি প্রদর্শিত হবে যখন ব্যবহারকারী তাদের কার্সার রাখে।

আপনি একই লোগোর দুটি ভিন্নতা ব্যবহার করতে পারেন বা দুটি সম্পূর্ণ ভিন্ন ছবি ব্যবহার করতে পারেন, সম্ভাবনা সীমাহীন।

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

selector img:hover{
    content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
  opacity: .50;
  transition-duration: 3s;
 }

এবং সম্পন্ন! পূর্বরূপ দেখতে আপনার পৃষ্ঠাটি প্রকাশ করুন এবং আপনার ওয়েবসাইটে প্রভাবটি কেমন দেখায় তা দেখুন৷ আপনি যদি চান কোন পরিবর্তন করতে ফিরে আসুন।

এইভাবে আপনি Elementor এর সাথে Hover এফেক্টের লোগো সোয়াপ তৈরি করতে পারেন। আমাদের পোস্ট সম্পর্কে আপডেট থাকতে আমাদের Facebook এবং Twitter- এ আমাদের সাথে যোগদান নিশ্চিত করুন।