Divi: কিভাবে একটি স্বচ্ছ এবং স্টিকি গ্লোবাল হেডার তৈরি করবেন

আপনি কি Divi এর সাথে একটি সুন্দর স্বচ্ছ এবং স্টিকি হেডার তৈরি করতে চান?

যখন আপনার ওয়েবসাইটের জন্য একটি গ্লোবাল হেডার সেট আপ করার কথা আসে, তখন এটি করার অনেক উপায় রয়েছে। আরও সূক্ষ্ম পদ্ধতিগুলির মধ্যে একটি হল একটি স্বচ্ছ হেডার। 

আপনি যদি একটি স্বচ্ছ শিরোনাম নিয়ে যাওয়ার সিদ্ধান্ত নেন কিন্তু স্ক্রল করার সময় এটি স্টিকি হওয়া প্রয়োজন, তাহলে আপনি এই টিউটোরিয়ালটি পছন্দ করবেন। স্বচ্ছ এবং চটচটে মধ্যে পরিবর্তন অনায়াসে!

চলো যাওয়া যাক।

জরিপ

টিউটোরিয়ালে ডাইভিং করার আগে, আসুন ফলাফলটি দ্রুত দেখে নেওয়া যাক।

একটি নতুন গ্লোবাল হেডার টেমপ্লেট তৈরি করুন

Divi > থিম বিল্ডার-এ যান।

বিভাগ #1 সেটিংস

পেছনের রঙ

একবার টেমপ্লেট সম্পাদকে, আপনি একটি বিভাগ লক্ষ্য করবেন। এই বিভাগটি শীর্ষ শিরোনাম বারে নিবেদিত হবে যা আপনি এই নিবন্ধের পূর্বরূপ লক্ষ্য করতে পারেন। বিভাগ সেটিংস খুলুন এবং একটি কালো পটভূমি রঙ যোগ করুন।

• পটভূমি: #000000

ব্যবধান

বিভাগ শৈলী ট্যাবে স্যুইচ করুন এবং ডিফল্টরূপে সমস্ত অভ্যন্তরীণ মার্জিন (শীর্ষ এবং নীচে) সরান।

• ইনার মার্জিন ভার্টেক্স: 0px
• নিচের অভ্যন্তরীণ মার্জিন: 0px

একটি নতুন লাইন যোগ করুন

কলাম গঠন

নিম্নলিখিত কলাম কাঠামো ব্যবহার করে একটি নতুন সারি যোগ করে চালিয়ে যান:

কলামে একটি পাঠ্য মডিউল যোগ করুন

সারি কলামে একটি পাঠ্য মডিউল যোগ করুন এবং আপনার পছন্দের একটি বার্তা লিখুন।

পাঠ্য সেটিংস

মডিউল স্টাইল ট্যাবে স্যুইচ করুন এবং সেই অনুযায়ী পাঠ্য সেটিংস পরিবর্তন করুন:

• টেক্সট ফন্ট: Oswald
• পাঠ্য অনুলিপি শৈলী: TT
• পাঠ্যের রঙ পাঠ্য: #ffffff
• পাঠ্য পাঠের আকার:
  • ডেস্কটপ: 19px
  • ট্যাবলেট: 18px
  • ফোন: 16px
• পাঠ্য প্রান্তিককরণ: কেন্দ্রীভূত

বিভাগ 2 যোগ করুন

ব্যবধান

প্রথম বিভাগের ঠিক নীচে, আরেকটি নিয়মিত বিভাগ যোগ করুন। এই বিভাগটি আমাদের স্বচ্ছ মেনুতে উৎসর্গ করা হবে যা স্ক্রল করার সময় স্টিকি হয়ে যাবে।

বিভাগ সেটিংস খুলুন এবং স্টাইল ট্যাবে ডিফল্টরূপে সমস্ত অভ্যন্তরীণ মার্জিন (শীর্ষ এবং নীচে) সরান।

• ইনার মার্জিন ভার্টেক্স: 0px
• নিচের অভ্যন্তরীণ মার্জিন: 0px

একটি নতুন লাইন যোগ করুন

কলাম গঠন

নিম্নলিখিত কলাম কাঠামো ব্যবহার করে একটি নতুন সারি যোগ করে চালিয়ে যান:

স্বচ্ছ পটভূমির রঙ

লাইন সেটিংস খুলুন এবং লাইনে একটি সম্পূর্ণ স্বচ্ছ পটভূমির রঙ প্রয়োগ করুন।

• পটভূমি: rgba (255,255,255,0)

আয়তন-অনুযায়ী বাছাই

লাইন স্টাইল ট্যাবে স্যুইচ করুন এবং সাইজিং সেটিংস পরিবর্তন করুন।

• কাস্টম গাটার প্রস্থ ব্যবহার করুন: হ্যাঁ
• কলাম ব্যবধান: 1
• সর্বোচ্চ প্রস্থ: 100%
• সর্বোচ্চ প্রস্থ: 100%

ব্যবধান

তারপর কাস্টম অভ্যন্তরীণ (বাম এবং ডান) মার্জিন যোগ করুন।

• বাম অভ্যন্তরীণ মার্জিন: 10%
• অভ্যন্তরীণ মার্জিন আইন: 10%

ছায়া বাক্স

এর পরে, একটি স্বচ্ছ বাক্সের ছায়া প্রয়োগ করুন। পরবর্তীতে টিউটোরিয়ালে আমরা এই বক্স শ্যাডোটিকে স্টিকি অবস্থায় একটি ভিন্ন ছায়ার রঙের সাথে ব্যবহার করব।

• বক্স শ্যাডো ব্লার শক্তি: 50px
• সাবটাইটেল ফন্টের রঙ: rgba (0,0,0,0)

অবস্থান

একটি স্বচ্ছ ব্যাকগ্রাউন্ড সহ, পৃষ্ঠার বিষয়বস্তুর শীর্ষে লাইনটি উপস্থিত হয় তা নিশ্চিত করতে, আমরা উন্নত ট্যাবে আমাদের লাইনের জন্য একটি পরম অবস্থান ব্যবহার করব।

• অবস্থান: পরম
• অবস্থান: উপরে বাম

কলাম 2 দৃশ্যমানতা

ছোট পর্দার আকারে কম জটিল হেডার ডিজাইনের জন্য আমরা ট্যাবলেট এবং ফোনে আমাদের সারির দ্বিতীয় কলামটিও লুকিয়ে রাখি।

কলাম 1 এ মেনু মডিউল যোগ করুন

একটি মেনু নির্বাচন করুন

এখন যেহেতু আমাদের সারি সেটিংস ঠিক আছে, এখন কলাম 1 এ একটি মেনু মডিউল দিয়ে শুরু করে মডিউল যোগ করার সময়। আপনার পছন্দের মেনুটি নির্বাচন করুন।

লোগো ডাউনলোড করুন

তারপরে একটি লোগো আপলোড করুন।

পটভূমির রঙ সরান

এছাড়াও মডিউল থেকে ব্যাকগ্রাউন্ড কালার মুছে ফেলুন।

মেনু পাঠ্য সেটিংস

মডিউল স্টাইল ট্যাবে স্যুইচ করুন এবং সেই অনুযায়ী মেনু পাঠ্য সেটিংস পরিবর্তন করুন:

• ফন্ট মেনু: Oswald
• সফট লাইট মেনু: বোল্ড
• কপি স্টাইল মেনু: TT
• মেনু পাঠ্যের রঙ: #efefef
• মেনু পাঠ্যের আকার: 18px
• পাঠ্য সারিবদ্ধকরণ: ডান

ড্রপ-ডাউন মেনু সেটিংস

এছাড়াও ড্রপ-ডাউন মেনু সেটিংস পরিবর্তন করুন।

• ড্রপডাউন সারি রঙ: rgba(0,0,0,0)
• মোবাইল মেনু পটভূমির রঙ: rgba (0,0,0,0,95)

আইকন সেটিংস

এরপরে, আইকন সেটিংসে আইকনের রঙ পরিবর্তন করুন।

• কার্ট আইকনের রঙ: #ffffff
• অনুসন্ধান আইকনের রঙ: #ffffff
• হ্যামবার্গার মেনু আইকনের রঙ: #ffffff

লোগো সেটিংস

আমরা ইমেজ ইনভার্সন ফিল্টার পরিবর্তন করে লোগো সেটিংসে আমাদের লোগোর রঙও পরিবর্তন করি।

• ইমেজ ইনভার্ট: 90%

আয়তন-অনুযায়ী বাছাই

এর পরে, আমরা আমাদের লোগোতে সর্বোচ্চ উচ্চতা নির্ধারণ করব।

• লোগো সর্বোচ্চ প্রস্থ: 40 পিক্সেল

ব্যবধান

এর পরে, আমরা ছোট পর্দার আকারে শীর্ষ এবং নীচের প্যাডিং যুক্ত করব।

• সর্বোচ্চ অভ্যন্তরীণ মার্জিন:
  • ট্যাবলেট এবং ফোন: 10px
• নীচের অভ্যন্তরীণ মার্জিন:
  • ট্যাবলেট এবং ফোন: 10px

কলাম 2 এ বোতাম মডিউল যোগ করুন

টেক্সট যোগ করুন বোতামে

কলাম 2 এ, আমাদের একমাত্র মডিউলটি একটি বোতাম মডিউল প্রয়োজন। আপনার পছন্দের একটি পাঠ্য যোগ করুন।

বোতাম প্রান্তিককরণ

মডিউল স্টাইল ট্যাবে স্যুইচ করুন এবং বোতামের প্রান্তিককরণ পরিবর্তন করুন।

• বোতাম প্রান্তিককরণ: ডান

বোতাম সেটিংস

পরবর্তী বোতামটি কাস্টমাইজ করুন।

• বোতামের জন্য কাস্টম শৈলী ব্যবহার করুন: হ্যাঁ
• বোতাম পাঠ্যের আকার: 16px
• বোতাম পাঠ্য রঙ: #ffffff
• পটভূমি বোতাম: #ed4441
• বোতামের সীমানার রঙ: #ed4441

• সীমানা ব্যাসার্ধ বোতাম: 0 পিক্সেল
• বোতাম অক্ষর ব্যবধান: 4px
• বোতাম ফন্ট: Oswald
• সফট লাইট বোতাম: বোল্ড টেক্সট
• অনুলিপি শৈলী বোতাম: TT
• বোতাম আইকন দেখান: হ্যাঁ

• বোতাম আইকনের রঙ: #1a1a1a

ব্যবধান

এবং কাস্টম স্পেসিং মান যোগ করে মডিউল প্যারামিটারগুলি সম্পূর্ণ করুন।

• শীর্ষ মার্জিন: -70px
• উপরে এবং নীচের অভ্যন্তরীণ মার্জিন: 25 পিক্সেল

কাস্টম স্টিকি প্রভাব প্রয়োগ করুন

বিভাগ #2 স্টিকি করুন

এখন যেহেতু আমরা আমাদের হেডারের ভিত্তি স্থাপন করেছি, এটি স্টিকি প্রভাব প্রয়োগ করার সময়! এটি করার জন্য, দ্বিতীয় বিভাগে সেটিংস খুলে শুরু করুন এবং উন্নত ট্যাবে নিম্নলিখিত স্টিকি সেটিংস প্রয়োগ করুন:

• স্টিকি অবস্থান: উপরে লেগে থাকুন
• স্টিক টপ অফসেট: 0px
• বটম স্টিকি মিমিট: কোনটিই নয়
• আশেপাশের স্টিকি উপাদান থেকে অফসেট: হ্যাঁ
• ট্রানজিশন ডিফল্ট এবং স্টিকি শৈলী: হ্যাঁ

স্টিক লাইনের পটভূমির রঙ

এখন যেহেতু স্টিকি বিকল্পটি সক্রিয় করা হয়েছে, আমরা বিভাগের সমস্ত উপাদানগুলিতে স্টিকি বিকল্প পরিবর্তন করতে পারি। আমরা আমাদের মেনু সম্বলিত সারিটি খোলার মাধ্যমে শুরু করব এবং স্টিকি বিকল্পে একটি সাদা পটভূমির রঙ প্রয়োগ করব।

• পটভূমির রঙ: #FFFFFF

স্টিকি সারি ব্যবধান

এর পরে, আমরা লাইনের স্টিকি ফাংশনের ব্যবধানের মানগুলি পরিবর্তন করতে যাচ্ছি।

• ইনার মার্জিন ভার্টেক্স: 0px
• নিচের অভ্যন্তরীণ মার্জিন: 0px

স্টিকি সারি ছায়া বাক্স

আমরা আঠালো অবস্থায় বক্সের ছায়ার রঙও পরিবর্তন করছি।

• সাবটাইটেল ফন্টের রঙ: rgba(0,0,0,0.08)

স্টিকি লাইন পজিশনিং

এর পরে, আমরা সারির অবস্থানকে স্টিকি অবস্থায় আপেক্ষিক হিসাবে ফিরিয়ে দেব।

• পদ: আত্মীয়
• অফসেট মূল: উপরে বাম

স্টিকি স্টেট মেনু টেক্সট সেটিংস

এর পরে, আমরা মেনু টেক্সটের রঙ স্টিকি অবস্থায় পরিবর্তন করব।

• মেনু পাঠ্যের রঙ: #000000

স্টিকি অবস্থায় মেনু ড্রপ-ডাউন সেটিংস

ড্রপ-ডাউন মেনু সেটিংসে মোবাইল মেনু ব্যাকগ্রাউন্ড কালার সহ।

• মোবাইল মেনু, পটভূমির রঙ: #ffffff

স্টিকি অবস্থায় মেনু আইকনের রং

এছাড়াও একটি স্টিকি অবস্থায় আইকনের রং পরিবর্তন করুন।

• কার্ট আইকনের রঙ: #000000
• অনুসন্ধান আইকনের রঙ: #000000
• হ্যামবার্গার মেনু আইকনের রঙ: #000000

লোগো ফিল্টার স্টিকি অবস্থায়

এর পরে, একটি স্টিকি অবস্থায় লোগো চিত্র থেকে ইনভার্ট ফিল্টারটি সরান।

• ছবির বিপরীত: 0%

স্টিকি অবস্থায় বোতামের ব্যবধান

এবং স্টিকি অবস্থায় থাকা অবস্থায় বোতাম থেকে নেতিবাচক শীর্ষ মার্জিনটি সরিয়ে টিউটোরিয়ালটি শেষ করুন।

• শীর্ষ মার্জিন: 0px

জরিপ

এখন যেহেতু আমরা সমস্ত পদক্ষেপের মধ্য দিয়ে চলেছি, আসুন শেষ ফলাফলটি শেষ করে দেখি।

এখনই ডিভিআই ডাউনলোড করুন!!!

উপসংহার

এই প্রবন্ধে, আমরা আপনাকে দেখিয়েছি কিভাবে Divi-এর থিম বিল্ডারকে নতুন স্টিকি অপশনের সাথে একত্রিত করতে হয়। বিশেষ করে, আমরা আপনাকে দেখিয়েছি কিভাবে স্ক্রোল করার সময় একটি স্বচ্ছ হেডার এবং একটি ভিন্ন স্টাইলের স্টিকি হেডারের মধ্যে স্যুইচ করতে হয়। 

এই পদ্ধতিটি আপনাকে স্ক্রল করার সময় একটি সুন্দর স্টিকি হেডার বজায় রেখে আপনার মেনুর সাথে আপনার পৃষ্ঠার নকশা একত্রিত করতে দেয়।

আপনি Divi সম্পর্কে আরও জানতে চান, আমাদের ক্যাটালগ পরিদর্শন করতে দ্বিধা করবেন না Divi টিউটোরিয়াল। আপনিও পরামর্শ করতে পারেন কিভাবে Divi ব্লগ মডিউল দিয়ে ব্লগ পেজ তৈরি করবেন 

আপনার যদি কোনও প্রশ্ন বা পরামর্শ থাকে তবে নিচে মন্তব্য বিভাগে বিনা দ্বিধায় মন্তব্য করুন।

তবে আপনি পরামর্শ নিতে পারেন আমাদের সংস্থান, আপনার যদি ইন্টারনেট সাইট তৈরির প্রকল্পগুলি চালিত করার জন্য আরও উপাদানগুলির প্রয়োজন হয় তবে আমাদের গাইডের সাথে পরামর্শ করে ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.

কিন্তু এদিকে, আপনার বিভিন্ন সামাজিক নেটওয়ার্কে এই নিবন্ধটি ভাগ করুন.

...