Divi: কিভাবে একটি উল্লম্ব নেভিগেশন মেনু তৈরি করবেন

আপনি কি একটি উল্লম্ব নেভিগেশন মেনু তৈরি করতে চান যাতে এটি DIVI-তে সামনে এবং কেন্দ্রে আরও আইটেম উপস্থাপন করে?

উল্লম্ব নেভিগেশন মেনু কিছু ওয়েবসাইটের জন্য উপযোগী হতে পারে যেগুলির অগ্রভাগে আরও মেনু আইটেম প্রয়োজন। অনুভূমিক মেনুগুলি প্রয়োজনীয় সমস্ত মেনু লিঙ্কগুলি ফিট করা কঠিন হতে পারে, বিশেষত ছোট ব্রাউজার প্রস্থে। 

এই টিউটোরিয়ালে, আমরা আপনাকে দেখাব কিভাবে Divi থিম বিল্ডার ব্যবহার করে একটি উল্লম্ব নেভিগেশন মেনু তৈরি করতে হয়। 

এটি আপনাকে আপনার ওয়ার্ডপ্রেস মেনু আইটেমগুলি প্রদর্শন করার জন্য আরও জায়গা দেবে।

শুরু করা যাক!

জরিপ

এই টিউটোরিয়ালে আমরা যে ডিজাইনটি তৈরি করব তা এখানে একটি দ্রুত দেখুন।

চলুন টিউটোরিয়ালে যাই।

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

এই টিউটোরিয়ালের জন্য, আমরা Divi এর থিম বিল্ডার ব্যবহার করে একটি গ্লোবাল হেডারে উল্লম্ব নেভিগেশন মেনু তৈরি করব

শুরু করতে, ওয়ার্ডপ্রেস ড্যাশবোর্ডে যান এবং Divi > থিম বিল্ডার-এ নেভিগেট করুন।

তারপর ডিফল্ট ওয়েবসাইট টেমপ্লেটের “Add Global Header” এলাকায় ক্লিক করুন এবং ড্রপ-ডাউন তালিকা থেকে “Build Global Header” নির্বাচন করুন।

আরও পড়ুন: ডিভিআই-তে থিম বিল্ডারের সাথে কীভাবে একটি গ্লোবাল হেডার তৈরি করবেন

উল্লম্ব অধ্যায় বিন্যাস নকশা

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

• সর্বাধিক প্রস্থ: 300px
• উচ্চতা: 100vh

• অভ্যন্তরীণ মার্জিন: 4vh শীর্ষ, 0px নীচে

নিম্নরূপ একটি ছায়া বাক্স যোগ করে কাস্টমাইজেশন চালিয়ে যান:

• শ্যাডো বক্স: স্ক্রিনশট দেখুন
• বক্সের ছায়ার উল্লম্ব অবস্থান: 0px
• বক্স শ্যাডো ব্লার শক্তি: 20px
• বক্স শ্যাডো স্প্রেড স্ট্রেন্থ: -10px
• ছায়ার রঙ: rgba(0,0,0,0.3)

ব্যবহারকারী স্ক্রোল করার সাথে সাথে উল্লম্ব নেভিগেশন মেনুটি বাম দিকে দৃশ্যমান থাকে তা নিশ্চিত করতে, উন্নত ট্যাবটিকে স্থির অবস্থানে আপডেট করুন এবং নিম্নরূপ z-সূচক আপডেট করুন:

• স্থায়ী স্টেশন
• Z-সূচক: 9999

আমরা নিশ্চিত করতে যে সাবমেনু নেভিগেশন দেখতে পাচ্ছি যা বিভাগের বাইরে প্রসারিত হবে, প্রধান উপাদানটিতে নিম্নলিখিত কাস্টম CSS যোগ করুন:

overflow: visible !important;

আপনার বিভাগটি এখন টেমপ্লেটের বাম দিকে একটি উল্লম্ব বিন্যাসে থাকবে।

উল্লম্ব মেনু ডিজাইন করুন

বিভাগটি জায়গায় রেখে, আমরা উল্লম্ব মেনু ডিজাইন করতে প্রস্তুত। এটি করার জন্য, আমরা উল্লম্বভাবে প্রদর্শনের জন্য নেভিগেশন কাস্টমাইজ করতে কাস্টম CSS সহ একটি মেনু মডিউল ব্যবহার করব।

আমরা ভিএইচ দৈর্ঘ্য ইউনিটও ব্যবহার করব যাতে মেনুটি বিভিন্ন ব্রাউজার উচ্চতায় ভালভাবে মানিয়ে নেয়।

লাইন যোগ করা হচ্ছে

শুরু করতে, বিভাগে একটি কলামে একটি সারি যোগ করুন।

পরবর্তী, নিম্নরূপ লাইন পরামিতি আপডেট করুন:

সাইজিং এবং স্পেসিং

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

• অভ্যন্তরীণ মার্জিন: 3vh শীর্ষ, 3vh নীচে

সীমান্ত

• সীমানা প্রস্থ: 1px
• সীমানার রঙ: #eeeeee

মেনু মডিউল যোগ করা হয়েছে

এক-কলাম সারির ভিতরে, একটি নতুন মেনু মডিউল যোগ করুন।

বিষয়বস্তু ট্যাবে প্রদর্শনের জন্য একটি মেনু নির্বাচন করুন।

তারপর লোগো বোতামের নিচে আপনার ওয়েবসাইটের লোগোটি গতিশীল সামগ্রী হিসেবে যুক্ত করুন।

স্টাইল ট্যাবের অধীনে নিম্নলিখিত আপডেট করুন:

• শৈলী: কেন্দ্রীভূত

• ফন্ট মেনু: নুনিটো সানস
• মেনু পাঠ্যের রঙ: #535b7c

• মেনু পাঠ্যের আকার: 18px (ডেস্কটপ), 14px (ট্যাবলেট এবং ফোন)
• মেনু সারি উচ্চতা: 2 এম

• ড্রপডাউন সারি রঙ: #535b7c
• সক্রিয় লিঙ্ক রঙ ড্রপ-ডাউন মেনু: #535b7c

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

• অভ্যন্তরীণ মার্জিন: 2vh শীর্ষ, 2vh নীচে

মেনুর জন্য কাস্টম CSS যোগ করা হয়েছে

আমরা যে উল্লম্ব নেভিগেশন অর্জন করতে চাই তা অর্জন করতে মেনুটির কাস্টম CSS প্রয়োজন। শুরু করতে, উন্নত ট্যাবে যান এবং মেনু লিঙ্ক এবং মেনু লোগোতে নিম্নলিখিত কাস্টম CSS যোগ করুন।

CSS মেনু লিঙ্ক (ডেস্কটপ):

width: 100%;

padding: 1vh 15px;

background: #f8f8f8;

border-radius: 3px;

border: 1px solid #eeeeee;

CSS মেনু লিঙ্ক (ট্যাবলেট):

width: auto;

border:none;

মেনু CSS লোগো:

margin-bottom: 20px;

এর পরে, নিম্নলিখিত হিসাবে মেনু মডিউলে একটি কাস্টম CSS ক্লাস যুক্ত করুন:

CSS ক্লাস: et-vert-menu

এই ক্লাসটি আমাদের বাহ্যিক কাস্টম CSS-এ এই নির্দিষ্ট মেনুটিকে লক্ষ্য করার জন্য ব্যবহার করা হবে যা আমরা একটি কোড মডিউল ব্যবহার করে যুক্ত করব।

কোড মডিউলের সাথে কাস্টম CSS যোগ করা হচ্ছে

মেনু মডিউলের অধীনে, একটি কোড মডিউল যোগ করুন।

তারপর কোড বক্সে নিম্নলিখিত কোডটি পেস্ট করুন (স্টাইল ট্যাগের মধ্যে এটি রাখতে ভুলবেন না):

/* Menu de Navigation Style Vertical*/

.et-vert-menu .et_pb_menu__menu>nav>ul {

  flex-direction: column;

  margin-left: 0px!important;

  margin-right: 0px!important;

  width: 100%;

  }

.et-vert-menu .et_pb_menu__menu>nav>ul>li {

  margin: 10px0!important;

  }

.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {

  display:block!important;

  padding: 0px!important;

  }

  .et-vert-menu .et_pb_menu__menu>nav>ul ul {

    padding: 0px!important;

    top: 0px!important;

  }

.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {

  left:calc(100%- 1px) !important;

  top:0px!important;

  }

.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {

  content: "5"!important; /*change arrow icon for submenu*/

  right: 20px!important;

  }

.et-vert-menu .nav li ul {

    left: calc(100%- 1px) !important; /*align submenu to the right of menu link*/

  }

@media alland (min-width: 981px) {

.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {

    width: 100%; /*width of the vertical navigation menu*/

  }

/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/

#et-main-area {

  width: calc(100%- 300px);

  margin-left: 300px;

}

}

ডিজাইন সোশ্যাল মিডিয়া অনুসরণ বোতাম এবং আইকন

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

লাইন যোগ করা হচ্ছে

বর্তমান সারির নিচে একটি নতুন সারি এক কলাম যোগ করুন।

একটি বোতাম যোগ করুন

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

নিম্নরূপ বোতাম সেটিংস আপডেট করুন:

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

• বোতামের জন্য কাস্টম শৈলী ব্যবহার করুন: হ্যাঁ
• বোতাম পাঠ্য আকার: 18px (ডেস্কটপ), 14px (ট্যাবলেট এবং ফোন)
• বোতাম পাঠ্য রঙ: #ffffff
• বোতামের পটভূমির রঙ: #535b7c
• বোতাম সীমানা প্রস্থ: 0 পিক্সেল

এরপরে, উন্নত ট্যাবে যান এবং নিম্নলিখিত কাস্টম CSSটিকে প্রধান উপাদানে আটকান:

CSS প্রধান উপাদান (ডেস্কটপ)

display:block;

width: 100%;

CSS প্রধান উপাদান (ট্যাবলেট)

display:inherit;

যোগ করা হয়েছে সামাজিক মিডিয়া অনুসরণ আইকন

বোতামের নীচে, একটি সামাজিক মিডিয়া মডিউলে আমাদের অনুসরণ করুন যুক্ত করুন।

সামগ্রী ট্যাবের অধীনে আপনি যে সামাজিক নেটওয়ার্কগুলি চান তা যুক্ত করুন৷

স্টাইল ট্যাবে, নিম্নলিখিত আপডেট করুন:

• মডিউল প্রান্তিককরণ: কেন্দ্র

• আইকনের রঙ: #535b7c

তারপরে প্রতিটি সামাজিক নেটওয়ার্কের জন্য সেটিংস খুলুন এবং পটভূমির রঙ সরান।

তারপর নিম্নরূপ একটি ছোট শীর্ষ মার্জিন যোগ করুন:

• মার্জিন: 3vh পিক

লাইন পরামিতি আপডেট করুন

সোশ্যাল মিডিয়া ফলো আইকনগুলি হয়ে গেলে, লাইন সেটিংস খুলুন এবং নিম্নলিখিতগুলি সামঞ্জস্য করুন:

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

• অভ্যন্তরীণ মার্জিন: 3vh শীর্ষ, 0px নীচে

বিন্যাস এবং টেমপ্লেট সংরক্ষণ করুন

একবার সম্পন্ন হলে, লেআউট এবং টেমপ্লেট সংরক্ষণ করুন।

চূড়ান্ত ফলাফল

এখানে একটি লাইভ পৃষ্ঠার শেষ ফলাফল আছে.

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

উপসংহার

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

উল্লম্ব বিভাগ সেটআপ কাস্টম সাইডবার তৈরির দরজাও খুলে দেয়। 

আপনি যদি কোনো উদ্বেগ বা পরামর্শের সম্মুখীন হন তবে আসুন আমাদের খুঁজে বের করুন মন্তব্য বিভাগ এটি আলোচনা করার জন্য।

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

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

...