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

আপনি কি Divi দিয়ে একটি স্টিকি হেডার তৈরি করতে চান?

থিম বিল্ডার চালু হওয়ার পর থেকে স্টিকি হেডার তৈরি করা বেশ সহজ হয়ে উঠেছে, কিন্তু আমরা দেখতে পাচ্ছি যে অনেকেই অতিরিক্ত কোড ব্যবহার না করে কীভাবে এগুলি তৈরি করতে হয় তা জানেন না। তবে, Divi-এর স্টিকি অপশনগুলির জন্য এটি করাও বেশ সহজ।

আসলে, এটি কেবল সহজ নয়, তবে এই পদ্ধতিটি ডিজাইনটি কাস্টমাইজ করার জন্য আরও সম্ভাবনা সরবরাহ করে।

তাই ডিভি সেটিংস ব্যবহার করে কিভাবে একটি অতি-কাস্টম স্টিকি হেডার তৈরি করা যায় তা দেখাতে আমরা এই টিউটোরিয়ালে সময় নেব।

জরিপ

আমরা এই টিউটোরিয়ালে ডুব দেওয়ার আগে, আসুন আমরা যে ফলাফলটি অর্জন করতে চাই তা একবার দেখে নেওয়া যাক।

হেডার এলিমেন্ট স্ট্রাকচার তৈরি করুন

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

Divi থিম বিল্ডার অ্যাক্সেস করুন এবং একটি নতুন গ্লোবাল বা কাস্টম হেডার তৈরি করা শুরু করুন।

বিভাগ 1 পরামিতি

গ্রেডিয়েন্ট পটভূমি

একবার টেমপ্লেট সম্পাদকে, আমরা আমাদের শিরোনাম উপাদানগুলির কাঠামো তৈরি করে শুরু করব। এই টিউটোরিয়ালের দ্বিতীয় অংশে, আমরা স্টিকি হেডার ডিজাইন সম্পূর্ণ করার জন্য বিভিন্ন স্টিকি সেটিংস প্রয়োগ করার উপর ফোকাস করব।

আরও পড়ুন: ডিভিআইতে কীভাবে স্লাইডিং এবং পুশ মেনু তৈরি করবেন

টেমপ্লেট সম্পাদকে, আপনি একটি বিভাগ লক্ষ্য করবেন। এই বিভাগটি খুলুন এবং একটি গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড প্রয়োগ করুন।

রঙ 1: #ffba60
রঙ 2: #ffd6a0
গ্রেডিয়েন্ট দিক: 90 ডিগ্রী
প্রারম্ভিক অবস্থান: 50%
চূড়ান্ত অবস্থান: 50%

ব্যবধান

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

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

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

কলাম গঠন

আমাদের শীর্ষ শিরোনাম বার তৈরি করতে, আমরা নিম্নলিখিত কলাম কাঠামো ব্যবহার করে আমাদের বিভাগে একটি নতুন সারি যোগ করব:

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

এখনো কোন মডিউল যোগ না করে, সারি সেটিংস খুলুন এবং নিম্নরূপ আকারের সেটিংস পরিবর্তন করুন:

কাস্টম গাটার প্রস্থ ব্যবহার করুন: হ্যাঁ
কলাম ব্যবধান: 1
সর্বোচ্চ প্রস্থ: 95%
সর্বাধিক প্রস্থ: 2 পিক্সেল

ব্যবধান

এছাড়াও কাস্টম অভ্যন্তরীণ (শীর্ষ এবং নীচে) মার্জিন যোগ করুন।

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

সিএসএস প্রধান উপাদান

এবং কলামগুলি ছোট স্ক্রীনের আকারে একে অপরের পাশে থাকে তা নিশ্চিত করতে, আমরা উন্নত ট্যাবে প্রধান সারির উপাদানটিতে CSS কোডের একটি লাইন যুক্ত করব।

display: flex;

কলাম 1 এ 'সামাজিক মিডিয়াতে আমাদের অনুসরণ করুন' মডিউল যোগ করুন

পছন্দের সামাজিক নেটওয়ার্ক যোগ করুন

এটি মডিউল যোগ করার সময়, কলাম 1-এ একটি 'সামাজিক মিডিয়াতে আমাদের অনুসরণ করুন' মডিউল দিয়ে শুরু করে৷ আপনার পছন্দের সামাজিক নেটওয়ার্কগুলিকে তাদের সংশ্লিষ্ট লিঙ্কগুলির সাথে যুক্ত করুন৷

প্রতিটি সামাজিক নেটওয়ার্ক থেকে পটভূমির রঙ সরান

সোশ্যাল নেটওয়ার্ক থেকে প্রতিটি ব্যাকগ্রাউন্ডের রঙ পৃথকভাবে সরিয়ে দিয়ে চালিয়ে যান।

আইকন সেটিংস

তারপরে সাধারণ মডিউল সেটিংসে ফিরে যান এবং ডিজাইন ট্যাবে আইকনের রঙ পরিবর্তন করুন।

আইকনের রঙ: #26333a

ব্যবধান

একটি শীর্ষ মার্জিন যুক্ত করুন।

শীর্ষ মার্জিন: 5 পিক্স

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

বোতামে পাঠ্য যোগ করুন

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

একটি লিঙ্ক যোগ করুন

তারপর একটি লিঙ্ক যোগ করুন.

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

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

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

বোতাম সেটিংস

আমরা বোতামটিও কাস্টমাইজ করি।

বোতামের জন্য কাস্টম শৈলী ব্যবহার করুন: হ্যাঁ
বোতাম পাঠ্যের আকার: 14px
বোতাম পাঠ্য রঙ: #26333a
বোতাম সীমানা প্রস্থ: 2px
বোতামের সীমানার রঙ: #26333a
বোতাম সীমানা ব্যাসার্ধ: 0 পিক্সেল

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

ব্যবধান

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

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