দরকার ডিভিতে একটি স্বচ্ছ ভাসমান মেনু তৈরি করতে?
আপনি কি আপনার পৃষ্ঠাগুলির প্রধান বিভাগগুলির উপরে আপনার সামগ্রিক শিরোনাম রাখার উপায় খুঁজছেন? আজকের ডিভি টিউটোরিয়ালে, আমরা আপনাকে দেখাব কিভাবে এটি করতে হয়।
আমরা শুরু থেকেই (Divi-এর থিম বিল্ডার ব্যবহার করে) একটি অত্যাশ্চর্য গ্লোবাল হেডার তৈরি করব এবং মেনু বারে একটি ভাসমান প্রভাব প্রয়োগ করব।
চলো যাওয়া যাক।
জরিপ
এই টিউটোরিয়ালে ডাইভিং করার আগে, আসুন আমরা যে ফলাফল অর্জন করতে চাই তা দ্রুত দেখে নেওয়া যাক।
Divi এর থিম বিল্ডারে যান এবং একটি নতুন টেমপ্লেট যোগ করুন
আসুন Divi > থিম বিল্ডারে।
গ্লোবাল হেডার তৈরি করুন ডিভি থিম বিল্ডারের সাথে
'গ্লোবাল হেডার যোগ করুন' এ ক্লিক করুন এবং 'বিল্ড গ্লোবাল হেডার' নির্বাচন করে চালিয়ে যান।
বিভাগ সেটিংস
পেছনের রঙ
একবার টেমপ্লেট সম্পাদকে, আপনি পৃষ্ঠায় একটি বিভাগ লক্ষ্য করবেন। এই বিভাগটি খুলুন এবং একটি সম্পূর্ণ স্বচ্ছ রঙে পটভূমির রঙ পরিবর্তন করুন। এটি বিভাগের নীচের সমস্ত কিছু দেখানোর অনুমতি দেবে।
- পটভূমি: rgba(0,0,0,0)
আয়তন-অনুযায়ী বাছাই
তারপরে বিভাগ শৈলী ট্যাবে যান এবং সর্বাধিক প্রস্থ পরিবর্তন করুন।
- সর্বাধিক প্রস্থ (স্ক্রিনশট দেখুন): 100%
ব্যবধান
এছাড়াও সমস্ত ডিফল্ট শীর্ষ এবং নীচের অভ্যন্তরীণ মার্জিনগুলি সরান৷
- ইনার মার্জিন ভার্টেক্স: 0px
- নিচের অভ্যন্তরীণ মার্জিন: 0px
Z-সূচক
এবং নিশ্চিত করতে যে বিভাগটি হিরো বিভাগের সমস্ত বিষয়বস্তুর উপরে থাকে, আমাদের দৃশ্যমানতা সেটিংসে z-সূচক বাড়াতে হবে।
- Z-সূচক: 99999
একটি নতুন লাইন যোগ করুন
কলাম গঠন
আপনি বিভাগ সেটিংস সম্পন্ন করার পরে, আপনি নিম্নলিখিত কলাম কাঠামো ব্যবহার করে একটি নতুন সারি যোগ করতে পারেন:
আয়তন-অনুযায়ী বাছাই
কোন মডিউল যোগ না করে, সারি সেটিংস খুলুন এবং নিম্নরূপ আকারের সেটিংস পরিবর্তন করুন:
- কলামের উচ্চতা হারমোনাইজ করুন: হ্যাঁ
- সর্বোচ্চ প্রস্থ: 100%
- সর্বোচ্চ প্রস্থ: 100%
ব্যবধান
তারপর কাস্টম অভ্যন্তরীণ মার্জিন যোগ করুন (শীর্ষ এবং নীচে)।
- সর্বোচ্চ অভ্যন্তরীণ মার্জিন: 2vw
- নীচের ভিতরের মার্জিন: 0vw
প্রধান উপাদান
এরপর, অ্যাডভান্সড ট্যাবে যান এবং নিশ্চিত করুন যে কলামগুলি ছোট স্ক্রীনের আকারে একে অপরের পাশে থাকে প্রধান সারির উপাদানটিতে সিএসএস কোডের একটি লাইন যোগ করে।
display: flex;
কলাম ঘ
পেছনের রঙ
কলাম 2 সেটিংস খোলার মাধ্যমে চালিয়ে যান এবং পটভূমির রঙ একটি আধা-স্বচ্ছ রঙে পরিবর্তন করুন।
- পটভূমির রঙ: rgba (255,255,255,0.71)
সীমান্ত
এছাড়াও কলামে একটি নীচের সীমানা যোগ করুন।
- নীচের সীমানা প্রস্থ: 2px
- বোতাম এবং নীচের সীমানার রঙ: #f4583f
ছায়া বাক্স
এবং একটি সূক্ষ্ম বক্স ছায়া যোগ করে একটি ভাসমান প্রভাব তৈরি করুন।
- ছায়া বাক্স: [ক্যাপচার দেখুন]
- শুরুর অবস্থান: 20px
- বো শ্যাডো ব্লার শক্তি: 50px
- বক্স শ্যাডো স্প্রেড শক্তি: -20px
- সাবটাইটেল ফন্টের রঙ: rgba(0,0,0,0.23)
কলাম 1 এ একটি চিত্র মডিউল যোগ করুন
লোগো ডাউনলোড করুন
একবার আপনি সারি এবং কলাম সেটিংস সম্পূর্ণ করলে, কলাম 1-এ একটি চিত্র মডিউল দিয়ে শুরু করে মডিউলগুলি যোগ করার সময়। একটি স্বচ্ছ ব্যাকগ্রাউন্ড সহ একটি লোগো আপলোড করুন।
শ্রেণীবিন্যাস
মডিউল স্টাইল ট্যাবে স্যুইচ করুন এবং প্রান্তিককরণ পরিবর্তন করুন।
- চিত্র প্রান্তিককরণ: কেন্দ্রীভূত
আয়তন-অনুযায়ী বাছাই
এছাড়াও সাইজিং সেটিংসে মডিউলের প্রস্থ পরিবর্তন করুন।
- সর্বাধিক প্রস্থ: 8 vw (ডেস্কটপ), 14 vw (ট্যাবলেট), 21 vw (ফোন)
কলাম 2 এ মেনু মডিউল যোগ করুন
একটি মেনু নির্বাচন করুন
চলুন পরবর্তী কলামে যাই। সেখানে, আমাদের শুধুমাত্র একটি মেনু মডিউল প্রয়োজন। আপনার পছন্দের একটি মেনু নির্বাচন করুন।
পটভূমির রঙ সরান
তারপর ব্যাকগ্রাউন্ড সেটিংস এ যান এবং ব্যাকগ্রাউন্ড কালার রিমুভ করুন।
স্বভাব
মডিউল স্টাইল ট্যাবে স্যুইচ করুন এবং লেআউট সম্পাদনা করুন।
- শৈলী: কেন্দ্রীভূত
- ড্রপ-ডাউন মেনু: নিচে
মেনু পাঠ্য
এছাড়াও মেনু টেক্সট সেটিংস স্টাইল করুন।
- মেনু ফন্ট: মুলিশ
- মেনু পাঠ্যের রঙ: #6f6666
- টেক্সট সাইজ মেনু: 1vw (ডেস্কটপ), 2vw (ট্যাবলেট), 3vw (ফোন)
ড্রপ-ডাউন মেনু
তারপর ড্রপ-ডাউন মেনু থেকে সেটিংস পরিবর্তন করুন।
- ড্রপডাউন সারি রঙ: #f4583f
আইকন
আইকন সেটিংসে হ্যামবার্গার মেনু আইকন রঙের জন্য একই রঙ ব্যবহার করুন।
- হ্যামবার্গার মেনু আইকনের রঙ: #f4583f
ব্যবধান
স্পেসিং সেটিংসে টপ এবং বটম প্যাডিং যোগ করে মডিউল সেটিংস সম্পূর্ণ করুন।
- পিক অভ্যন্তরীণ মার্জিন: 1,5 vw
- নীচের অভ্যন্তরীণ মার্জিন: 1,5 vw
কলাম 3 এ বোতাম মডিউল যোগ করুন
বোতামে পাঠ্য যোগ করুন
চলুন পরবর্তী এবং শেষ কলামে চলে যাই। আপনার পছন্দের একটি পাঠ্য সহ একটি বোতাম মডিউল যোগ করুন।
শ্রেণীবিন্যাস
তারপরে মডিউলটির প্রান্তিককরণটি পরিবর্তন করুন।
- বোতাম প্রান্তিককরণ: কেন্দ্রীভূত
বোতাম সেটিংস
সেই অনুযায়ী বোতামটি কাস্টমাইজ করে চালিয়ে যান:
- বোতামের জন্য কাস্টম শৈলী ব্যবহার করুন: হ্যাঁ
- বোতাম টেক্সট সাইজ: 0,9 vw (ডেস্কটপ), 1,5 vw (ট্যাবলেট), 2,5 vw (ফোন)
- বোতাম পাঠ্য রঙ: #ffffff
- পটভূমি বোতাম: #f4583f
- বোতাম সীমানা প্রস্থ: 0 পিক্সেল
- বোতাম বর্ডার রঙ: #f4583f
- সীমানা ব্যাসার্ধ বোতাম: 0 পিক্সেল
- বোতাম ফন্ট: মুলিশ
- হালকা হালকা বোতাম: বোল্ড টেক্সট
ব্যবধান
বিভিন্ন স্ক্রিনের আকারে কাস্টম প্যাডিং যোগ করে মডিউল সেটিংস সম্পূর্ণ করুন।
- উপরের এবং নীচের অভ্যন্তরীণ মার্জিন: 1vw (ডেস্কটপ), 2vw (ট্যাবলেট), 3vw (ফোন)
- বাম এবং ডান অভ্যন্তরীণ মার্জিন: 2vw (ডেস্কটপ), 3vw (ট্যাবলেট), 4vw (ফোন)
অতিরিক্ত বিভাগ পরামিতি
ডিফল্ট প্রধান আইটেম
আপনি সাধারণ কাস্টমাইজেশন সম্পন্ন করার পরে, আরও একটি জিনিস করতে হবে; আপনার পৃষ্ঠার বিষয়বস্তুর উপরে বিভাগটি রাখুন। এটি করার জন্য, আমাদের সেকশনের প্রধান উপাদানে CSS কোডের দুটি লাইন যোগ করতে হবে।
position: absolute;
top: 0;
হোভারে প্রধান উপাদান
মূল উপাদানের হোভার বিকল্পে CSS-এর একই লাইন যোগ করতে ভুলবেন না। আপনি একবার এটির উপর ঘোরার সাথে সাথে এটি বিভাগটিকে ঝিকিমিকি হতে বাধা দেবে।
position: absolute;
top: 0;
কনস্ট্রাক্টর পরিবর্তনগুলি সংরক্ষণ করুন এবং ফলাফল দেখুন
একবার আপনি বিভাগটি সম্পূর্ণ করলে, আপনি গ্লোবাল হেডার সংরক্ষণ করতে পারেন এবং আপনার সাইটে ফলাফল প্রদর্শন করতে পারেন!
জরিপ
এখন যেহেতু আমরা সমস্ত পদক্ষেপের মধ্য দিয়ে চলেছি, আসুন ফলাফলটি শেষ দেখে নেওয়া যাক।
এখনই ডিভিআই ডাউনলোড করুন!!!
উপসংহার
তাই! এই নিবন্ধের জন্য যে সব. আমরা আপনাকে দেখিয়েছি কিভাবে ডিভি থিম বিল্ডারের সাথে একটি ভাসমান এবং স্বচ্ছ মেনু বার তৈরি করতে হয়। শিরোনামটি আপনার পৃষ্ঠা বা পোস্টের প্রথম বিভাগের উপরে স্থাপন করা হয়েছে।
Divi এর থিম নির্মাতার সাথে নিজেকে পরিচিত করতে, আপনি আমাদের নিবন্ধটি পড়তে পারেন ডিভির থিম বিল্ডারের সাথে কীভাবে একটি গ্লোবাল হেডার তৈরি করবেন
আপনিও পরামর্শ করতে পারেন আমাদের সংস্থান, আপনার যদি ইন্টারনেট সাইট তৈরির প্রকল্পগুলি পরিচালনা করতে আরও উপাদানগুলির প্রয়োজন হয়, তবে আমাদের গাইডের সাথে পরামর্শ করে ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.
কিন্তু ইতিমধ্যে, আপনার বিভিন্ন সামাজিক নেটওয়ার্কে এই নিবন্ধটি ভাগ করুন.
...