আপনি কি DIVI এর সাথে একটি স্টিকি ফুটার তৈরি করতে চান যা নীচে স্ক্রোল করার সময় সম্পূর্ণরূপে প্রকাশ করে?
আপনার ওয়েবসাইটে একটি স্টিকি ফুটার যোগ করলে আপনি যে অতিরিক্ত স্পর্শ খুঁজছিলেন তা যোগ করতে পারেন। "প্রকাশ করুন" প্রভাব, যা আপনাকে নীচে স্ক্রোল করার সাথে সাথে ফুটারটি প্রকাশ করতে দেয়, আপনার ওয়েব পৃষ্ঠাগুলিকে সত্যিই একটি মনোমুগ্ধকর নকশা দেবে।
সাধারণত এই প্রভাবের জন্য কাস্টম CSS প্রয়োজন যা সীমিত এবং ব্যবহার করা কঠিন। কিন্তু ডিভিআইকে ধন্যবাদ, আপনি সহজেই এটি অর্জন করতে পারেন।
এই টিউটোরিয়ালে, আমরা আপনাকে দেখাব কিভাবে আপনার স্টিকি ফুটারে একটি প্রকাশ প্রভাব তৈরি করতে হয়। এটি যা লাগে তা হল কয়েকটি সহজ পদক্ষেপ।
এর শুরু করা যাক!
জরিপ
এখানে Reveal প্রভাব সহ স্টিকি ফুটারের একটি সংক্ষিপ্ত বিবরণ রয়েছে যা আমরা এই টিউটোরিয়ালে তৈরি করব।
একটি নতুন ফুটার টেমপ্লেট তৈরি করুন
রেন্ডেজ-উস অন Divi >> থিম নির্মাতা ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে।
সেখানে, ক্লিক করুন "একটি গ্লোবাল ফুটার যোগ করুন"
তাহলে বেছে নাও "একটি গ্লোবাল ফুটার তৈরি করা"
এই টিউটোরিয়ালে, আমরা তৈরির প্রক্রিয়াটিকে দ্রুততর করার জন্য একটি পূর্ব-তৈরি বিন্যাস ব্যবহার করব, তবে আপনি এটি স্ক্র্যাচ থেকেও করতে পারেন। এটি করতে, ক্লিক করুন "লাইব্রেরি থেকে লোড করুন".
পপ-আপ উইন্ডোর নীচে লাইব্রেরি থেকে লোড করুন, লেআউট খুঁজুন এবং ব্যবহার করুন " মেরিনা পৃষ্ঠা সম্পর্কে » মেরিনা লেআউট প্যাক থেকে।
লেআউট লোড হয়ে গেলে, পাদচরণ বিভাগ ব্যতীত সমস্ত বিভাগ মুছুন। রিভিল ইফেক্ট যোগ করতে আমরা এই ফুটার সেকশনটি ব্যবহার করব।
রিভিল ইফেক্ট যোগ করুন এবং ফুটার স্টিকি করুন
ফুটার স্টিকি করুন
আরও দেখুন: ডিভিআই-তে কীভাবে স্লাইডিং এবং পুশ মেনু তৈরি করবেন?
প্রথমত, আমাদের ফুটারটিকে স্টিকি করতে হবে। এটি করতে, বিভাগ সেটিংস খুলুন এবং ট্যাবে ক্লিক করুন অগ্রসর. অধীন "স্ক্রোল প্রভাব", নিম্নরূপ সেটিংস পরিবর্তন করুন:
- স্টিকি পজিশন: নিচের দিকে লেগে থাকুন
স্টিকি অবস্থার জন্য Z সূচক আপডেট করুন
এরপরে, বিভাগটি স্টিকি অবস্থায় থাকা অবস্থায় আমাদের ফুটার বিভাগটিকে 0-এর একটি z-সূচক দিতে হবে। এটি স্ক্রল করার সময় পৃষ্ঠার মূল অংশে অন্যান্য বিভাগ বা উপাদানগুলির পিছনে থাকা বিভাগটিকে অনুমতি দেবে৷
এটি করার জন্য, Z সূচক বিকল্পের পাশের স্টিকি আইকনে ক্লিক করে Z সূচকের অবস্থান আপডেট করুন। তারপর Z সূচকটি 0 এ আপডেট করুন।
- Z সূচক (স্টিকি): 0
স্টিকি ফুটার প্লেসহোল্ডার Z সূচক আপডেট করুন
যখন একটি উপাদানকে ডিভিতে একটি স্টিকি অবস্থান বরাদ্দ করা হয়, তখন একটি ডুপ্লিকেট স্থানধারক উপাদানও স্বয়ংক্রিয়ভাবে তৈরি হয়। এটি ডিভি বিল্ডার ব্যবহার করে স্টিকি উপাদানগুলির অবস্থান এবং ডিজাইন করার জন্য প্রয়োজনীয় কার্যকারিতা প্রদান করে।
আরও দেখুন: ডিভির থিম বিল্ডারের সাথে কীভাবে একটি গ্লোবাল হেডার তৈরি করবেন
এই ক্ষেত্রে, 1-এর ডিফল্ট z-সূচী দিয়ে একটি ফুটার সেকশন প্লেসহোল্ডার তৈরি করা হয়। আমরা প্লেসহোল্ডার বিভাগের পিছনে আমাদের আসল স্টিকি ফুটার সেকশন (এখন একটি Z-ইনডেক্স 0 সহ) চাই না, তাই আমাদের আপডেট করতে হবে স্থানধারকের Z সূচক -1।
এটি করার জন্য, প্রথমে নিম্নরূপ ফুটার বিভাগে একটি কাস্টম CSS ক্লাস যুক্ত করুন:
- CSS ক্লাস: স্টিকি-ফুটার-প্রকাশ
তারপর সেটিংস মেনু ব্যবহার করে পেজ সেটিংস খুলুন থিম নির্মাতা.
"এ যান উন্নত" এবং বক্সে নিম্নলিখিত CSS লিখুন CSS কাস্টমাইজ করুন :
.sticky-footer-reveal.et_pb_sticky_placeholder {
z-index:-1;
}
এটি স্থানধারক বিভাগটিকে স্টিকি ফুটারের পিছনে থাকতে বাধ্য করবে।
পরিবর্তনগুলি সংরক্ষণ করুন
একবার হয়ে গেলে, ফুটার টেমপ্লেটে করা পরিবর্তনগুলি সংরক্ষণ করুন।
এছাড়াও Divi থিম বিল্ডার পরিবর্তনগুলি সংরক্ষণ করুন।
চূড়ান্ত ফলাফল
চূড়ান্ত ফলাফল দেখতে, একটি পৃষ্ঠা দেখুন এবং স্ক্রোল করুন।
এখন DIVI ডাউনলোড করুন!!!
উপসংহার
ডিভিতে, আপনার ওয়েবসাইটে একটি স্টিকি ফুটার যোগ করার জন্য কোনও প্লাগইন বা জটিল কাস্টম সিএসএসের প্রয়োজন হয় না। থিম বিল্ডার ব্যবহার করে, আপনি সহজেই একটি ফুটার টেমপ্লেট তৈরি করতে পারেন প্রভাব প্রকাশ করুন কয়েক মিনিটের মধ্যে।
আশা করি এটি আপনার ফুটার ডিজাইনকে একটি আকর্ষণীয় ইন্টারঅ্যাকশনের মাধ্যমে আরও সূক্ষ্মভাবে উৎসাহিত করবে যা দর্শকরা উপভোগ করবে। যদি আপনার কোন উদ্বেগ বা পরামর্শ থাকে, তাহলে আসুন আমরা এখানে দেখা করি। মন্তব্য বিভাগ এটি আলোচনা করার জন্য।
এছাড়াও দেখুন আমাদের সংস্থান, আপনার যদি ইন্টারনেট সাইট তৈরির প্রকল্পগুলি পরিচালনা করতে আরও উপাদানগুলির প্রয়োজন হয়, তবে আমাদের গাইডের সাথে পরামর্শ করে ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.
কিন্তু ইতিমধ্যে, আপনার বিভিন্ন সামাজিক নেটওয়ার্কে এই নিবন্ধটি ভাগ করুন.
...