Elementor- এ, ওভারল্যাপিং উপাদানগুলি তাদের একটি স্বতন্ত্র, বিশেষজ্ঞ এবং ফ্যাশনেবল চেহারা দিতে পারে। অতিরিক্তভাবে, এটি আপনাকে জীবাণুমুক্ত বা আগ্রহহীন বলে মনে না করে একটি কম্প্যাক্ট স্পেসে আরও তথ্য ক্র্যাম করতে সক্ষম করে।
ভাল খবর হল যে এলিমেন্টর ব্যবহার করা ছবি, পাঠ্য এবং অন্যান্য উপাদানগুলিকে ওভারল্যাপ করার মতো সহজ করে তোলে। আজকের টিউটোরিয়ালে আমরা আপনাকে দেখাব কিভাবে Elementor-এ একটি ওভারল্যাপিং বিভাগ তৈরি করতে হয়।
ওভারল্যাপিং এলিমেন্টর বিভাগ তৈরি করুন
আপনার ড্যাশবোর্ডের পৃষ্ঠাগুলিতে যান এবং Elementor ব্যবহার করে যেকোনো পৃষ্ঠা চালু করুন। তারপর Edit With Elementor নির্বাচন করুন।
আপনার পৃষ্ঠা লোড হয়ে গেলে পৃষ্ঠা সেটিংসের অধীনে পৃষ্ঠা বিন্যাসকে এলিমেন্টর ক্যানভাসে সেট করুন। তারপর একটি একক কলাম সহ একটি নতুন বিভাগ যোগ করতে প্লাস চিহ্ন (+) টিপুন।
আশ্চর্যজনক ওয়েবসাইট তৈরি করুন
সেরা বিনামূল্যে পৃষ্ঠা নির্মাতা Elementor সঙ্গে
এখুনি শুরু করুন
আপনার নতুন বিভাগে, একটি উইজেট যোগ করুন; widget’s আইকনে ক্লিক করুন এবং অনুসন্ধানে, ডিভাইডার উইজেট পেতে ডিভাইডার টাইপ করুন, এটিকে আপনার বিভাগে টেনে আনুন।
বিভাগটি নির্বাচন করার পরে ডানদিকে সম্পাদনা বিভাগ উইন্ডোতে উচ্চতা থেকে 400 পিক্সেলের সর্বনিম্ন উচ্চতা সেট করুন। স্টাইলের অধীনে এটিকে একটি ব্যাকড্রপ রঙ দিন (আমার পছন্দ লাল)। ডিভাইডার বেছে নেওয়ার পর স্টাইলের অধীনে একটি সাদা ব্যাকগ্রাউন্ড দিন।
এখন বিভাগটি নির্বাচন করুন এবং এটি নকল করুন।
এখন ক্লোন বিভাগটিকে আগেরটির চেয়ে আলাদাভাবে স্টাইল করুন এবং এটিকে একটি ভিন্ন পটভূমির রঙ দিন।
পরবর্তী ধাপ হল আপনার দুটি অংশ ওভারল্যাপ করা।
আমি কীভাবে নীল এবং লাল বিভাগগুলি স্ট্যাক করতে হয় তা প্রদর্শন করে শুরু করব।
এর জন্য আপনাকে এলিমেন্টর নেভিগেটর প্রয়োজন হবে। নেভিগেশন চিহ্নটি আপনার সম্পাদনা বিভাগের নীচের দিকে বাম দিকে রয়েছে৷
আপনি যখন নেভিগেশন আইকনে ক্লিক করেন তখন আপনার নেভিগেটর উপস্থিত হয়। আপনি ন্যাভিগেটর দিয়ে আপনার বিভাগগুলি দ্রুত অ্যাক্সেস করতে পারেন, যা তাদের মাধ্যমে নেভিগেট করতে সহায়তা করে। উপরন্তু, আপনি যখন এটির পাশে "চোখ" ক্লিক করেন তখন একটি অংশ লুকিয়ে থাকে।
নীল অংশটি নির্বাচন করুন, বাম দিকের সম্পাদনা বিভাগ মেনু থেকে উন্নত নির্বাচন করুন, তারপর মার্জিনের অধীনে, এটিকে -100 পিক্সেলের একটি শীর্ষ মার্জিন দিন। এটি নীল বিভাগটিকে প্রথম বিভাগে (উপরে) নিয়ে আসবে।
লাল অংশটি বেছে নিন, উন্নত নির্বাচন করুন, Z-সূচক নির্বাচন করুন এবং লাল অংশটি নীল অংশের উপরে প্রদর্শিত হওয়ার জন্য এটিকে 10 এ সামঞ্জস্য করুন। ফলস্বরূপ, লাল অংশটি স্বয়ংক্রিয়ভাবে নীল অংশের উপরে অবস্থান করে।
প্রাথমিকভাবে, নীল অংশটি লালের চেয়ে বড় কারণ এটিকে অগ্রাধিকার দেওয়া হয়। যদি নীল অংশের Z-সূচক 1 থাকে, তাহলে লাল অংশের Z-সূচক 0 থাকলে এটি উপরে থাকে। মোটকথা, উচ্চতর Z-সূচকের অংশটি স্বয়ংক্রিয়ভাবে নীচের অংশের উপরে স্লাইড হয়ে যায়।
আসুন কল্পনা করুন যে আপনার কাছে দুটির চেয়ে বেশি বিভাগ রয়েছে।
এটি কীভাবে কাজ করে তা দেখতে আপনাকে অবশ্যই অন্য একটি বিভাগ তৈরি করতে হবে।
নীল বিভাগ নির্বাচন করুন এবং এটি নকল করুন। তারপর ক্লোন করা বিভাগটি বেছে নিন এবং এর জেড-ইনডেক্স এবং মার্জিনগুলিকে অ্যাডভান্সডের অধীনে 0 পিক্সেলে সেট করুন। আপনি স্টাইলের অধীনে এটির রঙ পরিবর্তন করতে পারেন।
উদাহরণস্বরূপ, আপনাকে নীল অংশটিকে একটি Z-সূচক দিতে হবে যা লাল এবং সবুজ উভয় অংশের চেয়ে বেশি যদি আপনি এটি উভয় বিভাগের উপরে থাকতে চান।
উদাহরণস্বরূপ, সবুজ এলাকা এবং লাল অংশ উভয়েরই 1-এর Z-সূচক রয়েছে (ডিফল্ট)। নীল অংশটিকে 3-এর একটি Z-সূচক দেওয়ার সিদ্ধান্ত নিন এবং তারপরে এটি বেছে নিন।
সবুজ অংশটি নির্বাচন করুন এবং এটিকে অ্যাডভান্সডের অধীনে -20 এর একটি মার্জিন দিন যাতে এটি এই পরিবর্তনটি স্পষ্টভাবে দেখতে উপরের বিভাগে যেতে পারে। নীল অংশটি তখন উভয় ক্ষেত্রের উপরে হওয়ায় দৃশ্যমান হয়।
এমনকি প্রতিক্রিয়াশীল সেটিংসেও, এই ওভারল্যাপিং প্রভাব কাজ করে। উদাহরণস্বরূপ, আপনি প্রতিক্রিয়াশীল মোড মেনু থেকে মোবাইল ডিভাইসটি নির্বাচন করতে পারেন এবং আপনি প্রথমে যে অংশটি দেখতে চান তার Z-সূচক বাড়ানোর সিদ্ধান্ত নিতে পারেন।
মোড়ক উম্মচন
Elementor এ, আপনি এলাকাগুলিকে ওভারল্যাপ করতে এটি করতে পারেন এবং ওভারল্যাপ এমনকি বিভিন্ন ডিভাইসে কাজ করবে।
যেকোনো মন্তব্য বা প্রশ্নের জন্য নিচের বিভাগটি ব্যবহার করুন। এছাড়াও, আপনার পরিচিতদের কাছে শব্দটি ছড়িয়ে দিন এবং CodeWatchers অনুসরণ করা চালিয়ে যান।
