একটি ইমেজ স্ক্রোলিং প্রভাব তৈরি করার একটি উপায় প্রয়োজন Elementor ? এই নিবন্ধে, আমরা আপনার ওয়েব পৃষ্ঠাগুলিতে Elementor ব্যবহার করে একটি চিত্র স্ক্রলিং প্রভাব তৈরি করতে আপনাকে গাইড করব।
ইমেজ স্ক্রোল ইফেক্ট আপনাকে পূর্ণ ইমেজ প্রকাশ করার অনুমতি দেবে যখন ব্যবহারকারী ইমেজগুলোর উপর ঘোরাফেরা করে। আপনি যখন ওয়েবসাইট টেমপ্লেট বিক্রি করে এমন একটি ওয়েবসাইটে যান, আপনি ইমেজ স্ক্রোল প্রভাব বৈশিষ্ট্য সহ টেমপ্লেটগুলির সম্পূর্ণ পূর্বরূপ দেখতে পারেন।
এই বৈশিষ্ট্যগুলির সাহায্যে, আপনি সহজেই আপনার ব্যবহারকারীদের একটি ছোট জায়গায় ওয়েবসাইটের সম্পূর্ণ দৃশ্য দেখাতে পারেন। সাধারণত, আপনি যদি কোনও ওয়েবসাইটের একটি সম্পূর্ণ চিত্র প্রদর্শন করতে চান তবে এটি আপনার ওয়েব পৃষ্ঠাগুলিতে অনেক জায়গা নেয়। তাছাড়া, এটি আপনার ওয়েবসাইটের ডিজাইনকে প্রভাবিত করে।
কিন্তু পিকচার স্ক্রোল ইফেক্টের সাহায্যে আপনি আকর্ষণীয় উপায়ে আরও ছবি যোগ করতে পারেন যা সহজেই দর্শকদের মনোযোগ আকর্ষণ করতে পারে।
এলিমেন্টরে ইমেজ স্ক্রোল ইফেক্ট তৈরি করুন
এলিমেন্টর ইমেজ স্ক্রোল প্রভাব যোগ করার জন্য একটি উইজেট প্রদান করে না। তাই আপনাকে কাস্টম সিএসএস ব্যবহার করে প্রভাব যুক্ত করতে হবে। কাস্টম CSS বৈশিষ্ট্য শুধুমাত্র সঙ্গে উপলব্ধ Elementor প্রো. তাই নিশ্চিত করুন যে আপনি আপগ্রেড করেছেন Elementor প্রো।
এখন Elementor সম্পাদকের সাথে একটি পৃষ্ঠা খুলুন এবং একটি বিভাগ যোগ করতে প্লাস আইকনে ক্লিক করুন।
এখন আপনাকে আপনার বিভাগের জন্য কলাম নির্বাচন করতে হবে। এখানে আমরা একক কলাম বিভাগ নির্বাচন করি।
এখন বিভাগ সম্পাদনা আইকনে ক্লিক করুন এবং লেআউট ট্যাবে সর্বনিম্ন উচ্চতা 500 সেট করুন।
এখন ব্লক উইজেট থেকে আপনার তৈরি সেকশনে অভ্যন্তরীণ সেকশন ব্লক যোগ করুন এবং ডিফল্ট কলামটি সরিয়ে দিন। কলাম সম্পাদনা আইকনে ডান-ক্লিক করুন এবং মূল কলামটি মুছে ফেলতে মুছুন বিকল্পটি ক্লিক করুন।
আবার ভিতরের অংশের সম্পাদনা বিকল্পে যান এবং লেআউট ট্যাবে সর্বনিম্ন উচ্চতা 500 সেট করুন যেমন আমরা আগে দেখিয়েছি।
এখন অভ্যন্তরীণ বিভাগের স্টাইল ট্যাবে স্যুইচ করুন এবং ব্যাকগ্রাউন্ড বিকল্প থেকে পটভূমিটিকে ক্লাসিক হিসাবে সেট করুন। এর পরে, আপনাকে আপনার ব্যাকগ্রাউন্ড ইমেজ যোগ করতে হবে। ইমেজ পজিশন অপশন থেকে ছবির পজিশন নির্ধারণ করুন শীর্ষ কেন্দ্র. রিপিট অপশন থেকে অপশন সেট করুন no-পুনরাবৃত্তি এবং আকার মত আবরণ.
এখন ট্যাবে স্যুইচ করুন অগ্রসর কাস্টম সিএসএস যোগ করতে। কাস্টম CSS ক্ষেত্রে, নিম্নলিখিত কোড যোগ করুন:
নির্বাচক{ -ওয়েবকিট-ট্রানজিশন: সহজ-ইন-আউট 3s !গুরুত্বপূর্ণ; ট্রানজিশন: ইজ-ইন-আউট 3s !গুরুত্বপূর্ণ; } নির্বাচক: হোভার{ ব্যাকগ্রাউন্ড-অবস্থান: কেন্দ্র নীচে ! গুরুত্বপূর্ণ; }
আপনি চিত্রের স্ক্রোলিং প্রভাব পরিবর্তন করতে রূপান্তর মান পরিবর্তন করতে পারেন। আপনি যদি একই প্রভাবের সাথে একাধিক ছবি যুক্ত করতে চান তবে আপনি কলামটি নকল করতে পারেন এবং তারপরে পটভূমি চিত্র পরিবর্তন করতে পারেন।
উপসংহার
প্রক্রিয়াটি অনুসরণ করে, আপনি পৃষ্ঠা নির্মাতা ব্যবহার করে আপনার ওয়েবসাইটে একটি চিত্র স্ক্রোল প্রভাব যুক্ত করতে সক্ষম হবেন Elementor. আপনি শিখতে আমাদের অন্যান্য নিবন্ধগুলি পরীক্ষা করতে পারেন:
- গুটেনবার্গ সম্পাদকে এলিমেন্টর ব্লকগুলি কীভাবে ব্যবহার করবেন?
- এলিমেন্টর বনাম ডিভি বনাম সিডপ্রোড - কোনটি ভাল?
- এলিমেন্টরে ক্রিয়াগুলি পূর্বাবস্থায় ফেরাতে এবং পুনরায় করতে ইতিহাস কীভাবে ব্যবহার করবেন
- কিভাবে একটি এলিমেন্টর ওয়েবসাইট সুপার ফাস্ট করা যায়
- কীভাবে এলিমেন্টরে একটি ইন্টারেক্টিভ সার্কেল তৈরি করবেন
আমরা এই নিবন্ধটি আপনার জন্য দরকারী হবে আশা করি. আপনি যদি এই নিবন্ধটি পছন্দ করেন তবে অনুগ্রহ করে আমাদের ফেসবুক পেজে লাইক দিয়ে সংযুক্ত থাকতে পারেন।
