ভিজিটর স্ক্রোল করার সময় একটি স্টিকি হেডার স্ক্রিনের শীর্ষে পিন করা থাকে। আপনার লোগো, মেনু এবং কল-টু-অ্যাকশন বোতামটি কেউ যতই নিচে যান না কেন পৌঁছানো যায়, যে কারণে প্রায় প্রতিটি SaaS এবং এজেন্সি সাইট একটি করে।
এই নির্দেশিকাটি দেখায় কিভাবে বিনামূল্যে ব্যবহার করে এলিমেন্টরে একটি স্টিকি হেডার তৈরি করতে হয় মাস্টার অ্যাডঅন থিম বিল্ডার, তাই আপনার Elementor Pro এর প্রয়োজন হবে না। এবং যখন আমি এখানে মাস্টার অ্যাডঅন ব্যবহার করছি, পদ্ধতিটি সর্বজনীন: একটি টেমপ্লেট হিসাবে হেডার তৈরি করুন, তারপর এটির ধারক অবস্থান স্থির করুন। যেকোন হেডার বিল্ডার যা আপনাকে এলিমেন্টরে হেডার সম্পাদনা করতে দেয় একই তিনটি ক্লিক অনুসরণ করে।
এই পোস্টের 2020 সংস্করণ আপনাকে একটি বিভাগে একটি CSS আইডি ড্রপ করতে এবং নেভিগেশন মেনু উইজেটে পেস্ট করতে বলেছে। এটি ছিল বিভাগ যুগ। Elementor 3.6 থেকে তার ডিফল্ট লেআউট হিসাবে ফ্লেক্সবক্স কন্টেইনার ব্যবহার করেছে, এবং অবস্থান নিয়ন্ত্রণ এখন প্যানেলে বসে আছে, তাই পুরো CSS আইডি নাচ চলে গেছে।
একটি স্টিকি হেডার আসলে কি
দুটি ভিন্ন আচরণ একই নামে ডাকা হয়, এবং সেগুলিকে মিশ্রিত করার কারণেই লোকেরা এমন একটি সেটিংয়ের জন্য শিকার করে যা বিদ্যমান নেই।
ক স্থির হেডার পৃষ্ঠাটি লোড হওয়ার মুহূর্ত থেকে স্ক্রিনে রয়েছে এবং কখনই ছেড়ে যায় না। এটাই position: fixed করে, এবং যে আমরা এখানে নির্মাণ করছি কি।
ক স্টিকি-অন-স্ক্রোল হেডার সাধারণত শীর্ষে বসে, দূরে স্ক্রোল করে, তারপর ভিজিটর স্ক্রোল করলে আবার স্লাইড করে। আপনি এটিকে স্মার্ট স্ক্রোল বা হাইড-অন-স্ক্রোল বলে দেখতে পাবেন। এটির একটি স্ক্রোল প্রভাব প্রয়োজন, এবং এলিমেন্টর সেগুলিকে প্রো-তে রাখে।
বেশিরভাগ সাইটের জন্য স্থির শিরোনামটি আপনি আসলে চান এবং এটি এমন একটি যা আপনি বিনামূল্যে তৈরি করতে পারেন।
সমস্যা: আপনার হেডার দূরে স্ক্রোল
এখানে শুরু বিন্দু। একটি সাধারণ এলিমেন্টর হেডার অন্য যেকোনো কন্টেইনারের মতো পৃষ্ঠার শীর্ষে বসে।
একটু নিচে স্ক্রোল করুন এবং এটি চলে গেছে। লোগো, মেনু, রিকোয়েস্ট ফ্রি ডেমো বোতাম, সবই স্ক্রিনের উপরের অংশে। তাই একজন দর্শক যিনি আপনার মূল্য বিভাগে যান এবং যোগাযোগে ক্লিক করতে চান তাকে আবার মেনু খুঁজতে ব্যাক আপ স্ক্রোল করতে হবে।
এটি একটি স্টিকি হেডার সমাধান করে পুরো সমস্যা।
আপনি শুরু করার আগে
আপনার বিনামূল্যে এলিমেন্টর, সংস্করণ 3.6 বা নতুন প্রয়োজন, যাতে কন্টেইনারগুলি চালু থাকে।
সেটিং প্রয়োগ করার জন্য আপনার একটি হেডার টেমপ্লেটও প্রয়োজন। এলিমেন্টরের নিজস্ব থিম বিল্ডার শুধুমাত্র প্রো-, তাই একটি বিনামূল্যে নিন: মাস্টার অ্যাডনস একটি বিনামূল্যে অন্তর্ভুক্ত হেডার নির্মাতা, এবং এর থিম বিল্ডার ফুটার, 404, আর্কাইভ এবং একক টেমপ্লেটও পরিচালনা করে।
ইতিমধ্যে অন্য প্লাগইন থেকে একটি হেডার টেমপ্লেট আছে? ধাপ 2 এ যান। অবস্থান সেটিং নেটিভ এলিমেন্টর, তাই আপনার হেডার যেখান থেকে এসেছে সেখানে এটি একই আচরণ করে।
ধাপ 1: এলিমেন্টরে আপনার হেডার টেমপ্লেট খুলুন
যাও মাস্টার অ্যাডঅন > থিম বিল্ডার। আপনার টেমপ্লেট টাইপ দ্বারা তালিকাভুক্ত করা হয়। আমার একটি শিরোনাম এবং একটি ফুটার আছে, উভয়ই সক্রিয়, উভয়ই সমগ্র সাইট জুড়ে প্রদর্শনের জন্য সেট করা আছে।
এখনো কোন হেডার নেই? ক্লিক করুন নতুন টেমপ্লেট যোগ করুন, হেডারে টাইপ সেট করুন, অ্যাক্টিভেশন চালু করুন এবং পুরো সাইটে শর্ত সেট করুন। দ্য হেডার নির্মাতা ডক্স এটি আবরণ, এবং প্রবাহ একই এক আমি মাধ্যমে হাঁটা এলিমেন্টরে ফুটার সম্পাদনা করার জন্য গাইড.
হেডার টেমপ্লেট ঘোরান এবং আঘাত করুন Elementor দিয়ে সম্পাদনা করুন। হেডারটি তার নিজস্ব ক্যানভাসে খোলে।
ধাপ 2: হেডার ধারক নির্বাচন করুন
লোকেরা ক্রমাগত এটি একটি ভুল পায়, তাই এখানে সুনির্দিষ্ট হন: আপনি চান বাইরের পাত্র হেডার এর। লোগো নয়, নেভি মেনু উইজেট নয়, এবং এটির ভিতরে আটকানো একটি নেস্টেড কন্টেইনার নয়।
নিশ্চিত হওয়ার নির্ভরযোগ্য উপায় হল গঠন প্যানেল, উপরের বারে স্তর আইকন। সেই গাছের শীর্ষ-স্তরের পাত্রে ক্লিক করুন এবং পুরো শিরোনামটি হাইলাইট করা উচিত। যদি শুধুমাত্র লোগো বা মেনু আলোকিত হয়, আপনি একটি শিশু উপাদান ধরেছেন, এবং এটিতে অবস্থান সেট করলে আপনার হেডারের পরিবর্তে সেই একটি উইজেটটি স্ক্রিনে পিন হবে। এটি উদ্ভট দেখায়, এবং আপনার ফলাফল অদ্ভুত কিনা তা পরীক্ষা করা প্রথম জিনিস।
ধাপ 3: ধারক অবস্থান স্থির সেট করুন
হেডার ধারক নির্বাচন করে, খুলুন উন্নত ট্যাব এবং প্রসারিত বিন্যাস বিভাগ অবস্থান ড্রপডাউনের তিনটি বিকল্প রয়েছে।
ডিফল্ট হল আপনার এখন যা আছে: হেডারটি পৃষ্ঠার সাথে স্ক্রোল করে। অ্যাবসলিউট স্ক্রিনের পরিবর্তে পৃষ্ঠায় হেডারটিকে পিন করে, তাই এটি এখনও স্ক্রোল করে, যা ওভারলে হেডারের জন্য, স্টিকি নয়। ফিক্সড এটিকে ভিউপোর্টে পিন করে এবং এটিই আপনি চান।
বাছাই করা স্থির, এবং প্যানেলটি ওরিয়েন্টেশন নিয়ন্ত্রণের সাথে প্রসারিত হয়।
এর অফসেট সহ বাম দিকে অনুভূমিক অভিযোজন সেট করুন 0, এবং একটি অফসেট সহ শীর্ষে উল্লম্ব অভিযোজন 0। উভয় দিকেই শূন্য হেডারটিকে ভিউপোর্টের একেবারে উপরের-বাম দিকে আঠালো করে। উল্লম্ব অফসেট বাড়ান যদি আপনি চান শিরোনামটি উপরের প্রান্তের একটু নীচে ভাসছে।
এলিমেন্টরও আপনার দিকে একটি সতর্কবার্তা নিক্ষেপ করবে: "কাস্টম পজিশনিং প্রতিক্রিয়াশীল ওয়েব ডিজাইনের জন্য সর্বোত্তম অনুশীলন হিসাবে বিবেচিত হয় না এবং খুব ঘন ঘন ব্যবহার করা উচিত নয়৷”৷ উপেক্ষা কর। এটি একটি লেআউটের মাধ্যমে স্থির এবং পরম উপাদানগুলিকে ছড়িয়ে দেওয়ার বিরুদ্ধে একটি সাধারণ সতর্কতা, এবং একটি নির্দিষ্ট শিরোনাম হল পাঠ্যপুস্তকের ক্ষেত্রে যেখানে এটি সঠিক কল। আপনার কাজ শেষ হলে শুধু মোবাইল ভিউ চেক করুন, যেটিতে আমি ফিরে আসব।
ধাপ 4: z-সূচক বাড়ান
এখনও লেআউট বিভাগে, খুঁজুন জেড-সূচক ক্ষেত্র এবং আরামদায়ক উচ্চ কিছু এটি সেট। আমি 99 ব্যবহার করি।
Z-সূচক সিদ্ধান্ত নেয় কোন উপাদানটি উপরে বসে যখন দুটি ওভারল্যাপ হয়। ভিজিটর স্ক্রোল করার সাথে সাথে একটি নির্দিষ্ট শিরোনাম আপনার পৃষ্ঠার বিষয়বস্তুকে ওভারল্যাপ করার গ্যারান্টিযুক্ত, এবং যদি এর z-সূচক খুব কম হয়, তাহলে বিষয়বস্তু সরাসরি এটির উপরে স্ক্রোল করে। এটি হল ক্লাসিক বাগ যেখানে শিরোনামটি প্রযুক্তিগতভাবে স্টিকি কিন্তু স্লাইডার, পপআপ এবং চিত্রগুলি এটির মধ্য দিয়ে চলে।
যদি কিছু এখনও শিরোনাম কভার করে, সংখ্যাটি বাম্প করুন। এটি যা হারায় তা কেবলমাত্র হারাতে হবে এবং প্রচুর স্লাইডার এবং পপআপ প্লাগইন হাজার হাজারে তাদের নিজস্ব জেড-সূচক সেট করে।
ধাপ 5: প্রকাশ করুন
আঘাত করা প্রকাশ করুন.
লাইভ সাইট খুলুন এবং স্ক্রোল করুন। শিরোনামটি পুরো নিচের দিকে স্ক্রিনের শীর্ষে লক থাকে।
যদি এটি এখনও সামনের প্রান্তে স্ক্রোল করে কিন্তু ঠিক সম্পাদকে দেখায়, তাহলে ডিবাগ করা শুরু করার আগে আপনার ক্যাশে সাফ করুন। একটি ক্যাশিং প্লাগইন আনন্দের সাথে কিছু সময়ের জন্য পুরানো হেডার CSS পরিবেশন করবে।
তিনটি জিনিস যা একটি নির্দিষ্ট শিরোনাম ভেঙে দেয় এবং সংশোধন করে
উপরের ধাপগুলি হেডার পিন করা হয়েছে। নিম্নলিখিতটি হল একটি স্টিকি হেডারকে আলাদা করে যা একটি বাস্তব সাইটের সাথে যোগাযোগ থেকে বেঁচে থাকে যা আপনি এক সপ্তাহ পরে আবার ছিঁড়ে ফেলেন।
1। শিরোনামটি স্বচ্ছ হয় এবং বিষয়বস্তু দেখায়
একটি নির্দিষ্ট উপাদান স্বাভাবিক পৃষ্ঠা প্রবাহ থেকে উত্তোলন করা হয়, তাই এটি যেকোনো কিছু থেকে একটি পটভূমি উত্তরাধিকারসূত্রে পাওয়া বন্ধ করে দেয়। আপনি যদি হেডারে কোনো পটভূমির রঙ সেট না করেন, তাহলে আপনার পৃষ্ঠার বিষয়বস্তু স্ক্রোল করে নিচে এটি এবং সরাসরি দেখায়, এবং আপনার মেনু পাঠ্যটি অপঠনযোগ্য স্যুপে পরিণত হয় যখন একটি চিত্র এটির পিছনে চলে যায়।
হেডার ধারক নির্বাচন করুন, যান শৈলী > পটভূমি, এবং এটি একটি কঠিন রঙ দিন। আপনি যদি সত্যিকার অর্থে একটি স্বচ্ছ শিরোনাম চান তবে এটি একটি বৈধ চেহারা, তবে এটির পিছনে কাজ করার জন্য প্রথম বিভাগটি ডিজাইন করুন।
2। প্রথম বিভাগটি হেডারের পিছনে লুকিয়ে থাকে
একই মূল কারণ। একটি স্থির শিরোনাম আর লেআউটে স্থান নেয় না, তাই প্রথম বিভাগটি বাম শূন্যস্থান পূরণ করতে স্লাইড করে এবং এর কিছু অংশ হেডারের পিছনে আটকে যায়।
আপনার প্রথম বিভাগে শীর্ষ প্যাডিং যোগ করুন, মোটামুটি হেডারের উচ্চতার সাথে মিলে যায়। হেডারটি 80px লম্বা হলে, নায়ককে টপ প্যাডিংয়ের 80px দিন। আপনি যদি নিশ্চিত না হন যে এটি কতটা লম্বা, সামনের প্রান্তে হেডারে ডান-ক্লিক করুন এবং এটি পরিদর্শন করুন; ব্রাউজার টুলে উচ্চতা ঠিক আছে।
3। এটি মোবাইলের স্ক্রীন খায়
ফোনের স্ক্রিন ছোট। একটি শিরোনাম যা একটি ডেস্কটপ মনিটরে সূক্ষ্ম বোধ করে একটি ফোনের ভিউপোর্টের একটি গুরুতর অংশ গ্রাস করতে পারে এবং তারপরে প্রতিটি পৃষ্ঠায় দর্শককে অনুসরণ করতে পারে।
Elementor এর প্রতিক্রিয়াশীল মোডে মোবাইল ভিউতে স্যুইচ করুন এবং হেডারের উল্লম্ব প্যাডিং কেটে দিন। পজিশন কন্ট্রোলগুলিও প্রতি-ডিভাইস, তাই আপনি পজিশন সেট করতে পারেন ডিফল্ট শুধুমাত্র মোবাইলে এবং হেডারটি সেখানে স্ক্রোল করতে দিন। একটি দীর্ঘ নিবন্ধ পৃষ্ঠায় যে সাধারণত ভাল কল। আপনি কাস্টম ব্রেকপয়েন্ট চালান, কাস্টম ব্রেকপয়েন্ট এক্সটেনশন আপনাকে এটিকে আপনার আসল ডিভাইসের প্রস্থে টিউন করতে দেয়।
এটি কি অন্যান্য হেডার প্লাগইনগুলির সাথে কাজ করে?
হ্যাঁ, এবং এই অংশ বোঝার মূল্য। অবস্থান: স্থির একটি নেটিভ এলিমেন্টর নিয়ন্ত্রণ, একটি মাস্টার অ্যাডঅন বৈশিষ্ট্য নয়। মাস্টার অ্যাডঅন এখানে ঠিক একটি কাজ করছে: আপনাকে একটি বিনামূল্যের হেডার টেমপ্লেট দিচ্ছে যা এলিমেন্টরে খোলে। একবার আপনি সম্পাদকে গেলে, স্টিকি অংশটি প্লেইন এলিমেন্টর।
সুতরাং আপনি যদি একটি ভিন্ন থিম নির্মাতার সাথে শিরোনাম তৈরি করেন, বা আপনার থিম তার নিজস্ব একটি এলিমেন্টর-সম্পাদনাযোগ্য শিরোনাম পাঠায়, একই উন্নত > লেআউট > অবস্থান > স্থির পথ প্রযোজ্য। আপনি সম্পাদনার জন্য হেডার খুলতে কোথায় যান তা পরিবর্তন হয়।
একটি নো-জাম্প বিকল্প: বিনামূল্যে কাস্টম CSS সহ অবস্থান স্টিকি
ফিক্সড পজিশনিং হেডারটিকে পৃষ্ঠার প্রবাহের বাইরে নিয়ে যায়, তাই আপনাকে প্রথম বিভাগটি প্যাড করতে হবে যাতে এর পিছনে কিছুই লুকিয়ে না থাকে। আপনি যদি সেই ধাপটি এড়িয়ে যেতে চান, CSS position: sticky বিকল্প হয়। এটি শিরোনামটিকে প্রবাহে রাখে এবং এটি শীর্ষে পৌঁছানোর পরেই এটিকে পিন করে, তাই ঠিক করার জন্য কোনও বিষয়বস্তু জাম্প নেই৷।
ক্যাচ যেখানে আপনি CSS যোগ করুন। Elementor এর প্রতি-উপাদান কাস্টম CSS বক্স একটি প্রো বৈশিষ্ট্য, কিন্তু বিনামূল্যে মাস্টার অ্যাডঅন কাস্টম CSS এক্সটেনশন আপনাকে বিনা খরচে একই বাক্স দেয়। হেডার ধারক নির্বাচন করুন, এর কাস্টম CSS ক্ষেত্র খুলুন এবং এটি পেস্ট করুন:
selector {
position: sticky;
top: 0;
z-index: 99;
}selector আপনি যে উপাদানটি সম্পাদনা করছেন তার জন্য এলিমেন্টর শর্টহ্যান্ড, তাই আপনার আইডি বা ক্লাসের প্রয়োজন নেই। একটি গোটচা: যদি কোনো অভিভাবক ধারক থাকে overflow: hidden, স্টিকি নীরবে কাজ করা বন্ধ করে দেয়, এত স্পষ্ট যে পূর্বপুরুষ থেকে যদি হেডার পিন করতে অস্বীকার করে। সম্পূর্ণ আচরণ নথিভুক্ত করা হয় CSS অবস্থানে MDN রেফারেন্স.
বিনামূল্যে স্টিকি হেডার পদ্ধতি তুলনা
এই রুটগুলির মধ্যে তিনটি বিনামূল্যে, এবং প্রতিটি আলাদা প্রয়োজনের সাথে খাপ খায়। এলিমেন্টরের নিজস্ব অবস্থান নিয়ন্ত্রণে স্থায়ী জীবন। মাস্টার অ্যাডঅন পজিশনিং এক্সটেনশন কোন স্থির বিকল্প নেই, তবে এটি শিরোনামের ভিতরে সাহায্য করে: প্রতি ডিভাইসে পৃথক মান সহ আপেক্ষিক বা পরম অফসেট সহ একটি লোগো বা ব্যাজ নাজ করুন।
| পদ্ধতি | কোড প্রয়োজন | খরচ | বিষয়বস্তু লাফানো | জন্য সেরা |
|---|---|---|---|---|
| অবস্থান স্থির (এলিমেন্টর অ্যাডভান্সড ট্যাব) | না | বিনামূল্যে | একটি প্যাডিং ফিক্স প্রয়োজন | সর্বদা-দৃশ্যমান হেডার |
| অবস্থান: স্টিকি (কাস্টম সিএসএস) | একটি স্নিপেট | বিনামূল্যে | কোনোটিই নয় | পরিষ্কার বিন্যাস, কোন লাফ |
| Elementor Pro স্টিকি স্ক্রোল প্রভাব | না | পরিশোধিত | হাতল | লুকান-অন-স্ক্রোল এবং সঙ্কুচিত করুন |
| ডেডিকেটেড স্টিকি-হেডার প্লাগইন | না | বিনামূল্যে | হাতল | পূর্বনির্মাণ স্ক্রোল প্রভাব |
স্ক্রলে সঙ্কুচিত বা রঙ পরিবর্তন যোগ করা হচ্ছে
ভিজিটর স্ক্রোল করার পরে হেডারটি সঙ্কুচিত বা রঙ অদলবদল করতে চান? এটি স্ক্রোল দূরত্ব পড়ে, যা CSS নিজে থেকে করতে পারে না। এর মাধ্যমে জাভাস্ক্রিপ্টের কয়েকটি লাইন কাস্টম জেএস এক্সটেনশন মাস্টার অ্যাডনস প্রো-তে একটি স্ক্রোল থ্রেশহোল্ড অতিক্রম করে হেডারে একটি ক্লাস টগল করতে পারেন, তারপর আপনি কাস্টম সিএসএস-এ সেই ক্লাসটি স্টাইল করুন। এটি একটি প্লাগইনের চেয়ে বেশি কাজ যা প্রভাবটি প্রেরণ করে, তাই আপনি এটি হাতে তৈরি করার আগে প্রচেষ্টাটি ওজন করুন।
হেডারটিকে আটকে রাখার মতো করে তোলা
একবার এটি স্ক্রিনে আঠালো হয়ে গেলে, হেডারটি 100% সময় দৃশ্যমান হয়, তাই এটি একটি দ্বিতীয় পাসের মূল্য।
প্রথমে উচ্চতা ছাঁটাই করুন। একটি লম্বা শিরোনাম যা কখনই দূরে যায় না তা দ্রুত বিরক্তিকর হয়ে ওঠে এবং আপনার সংরক্ষণ করা প্রতিটি পিক্সেল হল একটি পিক্সেল সামগ্রী যা দর্শক দেখতে পারে৷ তারপরে এতে কী আছে তা দেখুন: স্ক্রিনে একটি স্থায়ী স্লট আপনার সেরা লিঙ্কের জন্য একটি ভাল বাড়ি, তা ডেমো, মূল্য বা যোগাযোগের বোতামই হোক না কেন।
বড় সাইট? মাস্টার অ্যাডনস নেভিগেশন মেনু উইজেট মেগা মেনু তৈরি করে, যাতে আপনি হেডার না বাড়িয়ে পুরো কাঠামোটিকে এক ক্লিকে দূরে রাখতে পারেন। এবং ওজনের উপর নজর রাখুন, যেহেতু হেডার এখন প্রতিটি পৃষ্ঠায় লোড হয় এবং কখনই আনলোড হয় না। দ্য এলিমেন্টর স্পিড গাইড আপনার লোড সময় ইতিমধ্যে টাইট হলে একটি পড়ার মূল্য।
আপনি যদি স্ক্র্যাচ থেকে একটি শিরোনাম তৈরি না করতে চান, তাহলে মাস্টার অ্যাডঅন টেমপ্লেট লাইব্রেরি রেডিমেড হেডার আছে যা আপনি আমদানি করতে পারেন এবং তারপর একই ধাপে স্টিকি করতে পারেন, এবং টেমপ্লেট কিট একটি সম্পূর্ণ সাইটের জন্য শিপ ম্যাচিং হেডার এবং ফুটার।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
আমি কি এলিমেন্টর ফ্রিতে একটি স্টিকি হেডার তৈরি করতে পারি?
হ্যাঁ। অবস্থান: স্থির নিয়ন্ত্রণ বিনামূল্যে এলিমেন্টরের অংশ। এটি প্রয়োগ করার জন্য আপনার শুধুমাত্র একটি হেডার টেমপ্লেট প্রয়োজন, এবং মাস্টার অ্যাডঅন থিম বিল্ডার আপনাকে বিনামূল্যে একটি দেয়। এলিমেন্টরের নিজস্ব থিম বিল্ডার এবং এর স্টিকি স্ক্রোল ইফেক্ট হল প্রো-অনলি অংশ।
একটি স্থির এবং একটি স্টিকি হেডারের মধ্যে পার্থক্য কী?
একটি নির্দিষ্ট শিরোনাম সর্বদা পৃষ্ঠা লোড থেকে দৃশ্যমান হয় এবং কখনও দূরে স্ক্রোল করে না। একটি স্টিকি-অন-স্ক্রোল হেডার স্ক্রোল বন্ধ করে, তারপর ভিজিটর স্ক্রোল করলে আবার স্লাইড করে। অবস্থান: ফিক্সড আপনাকে প্রথমটি দেয়। দ্বিতীয়টির জন্য Elementor Pro এর স্ক্রোল প্রভাব প্রয়োজন।
কেন আমার বিষয়বস্তু স্টিকি হেডারের পিছনে লুকিয়ে আছে?
একটি নির্দিষ্ট শিরোনাম স্বাভাবিক পৃষ্ঠা প্রবাহ থেকে সরানো হয়, তাই নীচের অংশটি এটির নীচে স্লাইড করে। আপনার প্রথম বিভাগে শীর্ষ প্যাডিং যোগ করুন, মোটামুটি হেডারের উচ্চতার সাথে মেলে এবং হেডার কন্টেইনারে একটি কঠিন পটভূমির রঙ সেট করুন।
কেন আমার পৃষ্ঠার বিষয়বস্তু আমার শিরোনামের উপরে স্ক্রোল করে?
z-সূচক খুবই কম। লেআউটের অধীনে উন্নত ট্যাবে, হেডার কন্টেইনারে Z-সূচক 99 (বা উচ্চতর) সেট করুন যাতে এটি পৃষ্ঠার অন্য সবকিছুর উপরে স্ট্যাক করে।
আমার কি মোবাইলে স্টিকি হেডার ব্যবহার করা উচিত?
প্রায়ই না। একটি স্থির শিরোনাম একটি ফোনে দুষ্প্রাপ্য উল্লম্ব স্থান খায়। এলিমেন্টরের অবস্থান নিয়ন্ত্রণগুলি প্রতি-ডিভাইস, তাই মোবাইল ভিউতে স্যুইচ করুন এবং পজিশনকে ডিফল্টে সেট করুন, অথবা অন্তত হেডারের প্যাডিং কেটে দিন।
মোড়ানো
Elementor-এ একটি স্টিকি হেডার তৈরি করা একটি উপাদানের তিনটি সেটিংস। হেডার কন্টেইনার নির্বাচন করুন, শূন্য অফসেট সহ স্থির অবস্থান সেট করুন, z-সূচক বাড়ান। এর পরে সবকিছুই পরিষ্কার: হেডারটিকে একটি শক্ত পটভূমি দিন, প্রথম বিভাগটি প্যাড করুন যাতে এর পিছনে কিছুই লুকিয়ে না থাকে এবং এটি সম্পন্ন করার আগে আপনি ফোনে কেমন অনুভব করেন তা পরীক্ষা করুন।
এর সবগুলোই ফ্রি এলিমেন্টরে চলে। আপনার শুধুমাত্র একটি হেডার টেমপ্লেট সম্পাদনা করতে হবে, যা বিনামূল্যে মাস্টার অ্যাডঅনগুলিতে থিম নির্মাতা ফুটার, 404, সংরক্ষণাগার এবং একক টেমপ্লেট সহ প্রদান করে। আপনি যদি পরে বাকি টুলকিট চান, তাহলে সেটাই প্রো পরিকল্পনা কভার, কিন্তু এই টিউটোরিয়ালের কিছুই এর প্রয়োজন নেই।
সম্পর্কিত পড়া: এলিমেন্টর দিয়ে ওয়ার্ডপ্রেসে ফুটার কিভাবে এডিট করবেন, এলিমেন্টরে কীভাবে একটি তির্যক পটভূমি তৈরি করবেন, এবং কিভাবে Elementor দিয়ে এক পৃষ্ঠার ওয়েবসাইট তৈরি করবেন.
