ডিভি: "ফুল প্রস্থ মেনু" মডিউলের ঝুড়ি এবং অনুসন্ধান আইকনগুলি কীভাবে কাস্টমাইজ করবেন

আপনি কি ডিভি ফুলউইথ মেনু মডিউলের কার্ট এবং অনুসন্ধান আইকনগুলি কীভাবে কাস্টমাইজ করবেন তা জানতে চান?

আপনার ওয়েবসাইট মেনু আপনার ওয়েবসাইটের সবচেয়ে গুরুত্বপূর্ণ উপাদানগুলির মধ্যে একটি কারণ ব্যবহারকারীরা আপনার সামগ্রী কীভাবে নেভিগেট করে তার উপর এর সরাসরি প্রভাব পড়তে পারে। 

একটি ভাল-ডিজাইন করা মেনু বার নেভিগেশন সহজ করে, মূল পৃষ্ঠাগুলি হাইলাইট করে এবং সামগ্রিক ব্যবহারকারীর অভিজ্ঞতা উন্নত করে একটি বড় পার্থক্য করতে পারে। 

Divi এর "Fullwidth Menu" মডিউল আপনাকে শপিং কার্ট এবং সার্চ আইকনগুলিকে কাস্টমাইজ করার অনুমতি দিয়ে দারুণ নমনীয়তা প্রদান করে যেটি আপনি উপযুক্ত মনে করেন৷ 

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

এর শুরু করা যাক!

জরিপ

এখানে আমরা কি ডিজাইন করব তার একটি পূর্বরূপ।

প্রথম নকশা

প্রথম ডিজাইনের জন্য, আমরা একটি কেন্দ্রীভূত মেনু কাঠামো নির্বাচন করে একটি আইকন বাম দিকে এবং অন্যটি ডানদিকে রাখি। আমরা হোভারে রঙও পরিবর্তন করব।

দ্বিতীয় নকশা

দ্বিতীয় ডিজাইনের জন্য, আমরা দুটি আইকন ডান পাশে রাখি এবং হোভারে রঙ পরিবর্তন করি।

তৃতীয় নকশা

তৃতীয় ডিজাইনের জন্য, আমরা আইকন কাস্টমাইজ করতে অতিরিক্ত CSS ব্যবহার করি।

আরও পড়ুন: Divi: কিভাবে একটি GIF দিয়ে "কাউন্টডাউন টাইমার" মডিউল কাস্টমাইজ করবেন

শপিং কার্টের কাস্টমাইজেশন এবং ডিভির "ফুলউইথ মেনু" মডিউলের অনুসন্ধান আইকনগুলি

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

তিনটি মেনু ডিজাইনের প্রতিটির জন্য, আমরা Divi-এর থিম বিল্ডার খোলার মাধ্যমে শুরু করব।

এটি করতে, ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে, যান Divi > থিম নির্মাতা

তারপর ক্লিক করুন গ্লোবাল হেডার যোগ করুন

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

একটি নতুন পূর্ণ-প্রস্থ বিভাগ সন্নিবেশ করুন।

তারপর আগের বিভাগটি মুছে দিন।

মডিউল ঢোকান সম্পূর্ণ প্রস্থ মেনু.

মেনু থেকে আপনার লোগো আপলোড করুন.

আমরা এখন চালিয়ে যাওয়ার জন্য প্রস্তুত।

প্রথম নকশা

আমাদের প্রথম ডিজাইনে Divi-এর অন্তর্নির্মিত হোভার ইফেক্টগুলি অন্তর্ভুক্ত করা হবে যাতে হোভারে টেক্সট এবং আইকনগুলির রঙ পরিবর্তন করা যায়। চল শুরু করি.

আরো দেখুন: Divi: কিভাবে মেনু মডিউলে একটি হ্যামবার্গার আইকন যোগ করবেন

মডিউল সেটিংস খুলুন এবং একটি পটভূমি যোগ করে শুরু করুন।

• পটভূমি: #fbf9f4

ট্যাবে যান নকশা এবং লোগো লেআউট নির্বাচন করুন।

• শৈলী: ইনলাইন কেন্দ্রীভূত লোগো

এখন কিছু মেনু টেক্সট সেটিংস পরিবর্তন করা যাক।

• সক্রিয় লিঙ্ক রঙ: #09148c
• মেনু ফন্ট: রুবি
• মেনু ফন্ট ওজন: গাঢ়
• ফন্ট শৈলী: TT এবং U (ক্যাপিটালাইজড এবং আন্ডারলাইনড)

এর পরে, মেনু পাঠ্যের রঙ, পাঠ্যের আকার এবং অক্ষর ব্যবধান সেট করুন।

• মেনু পাঠ্যের রঙ: #000000
• মেনু পাঠ্যের আকার: 21px
• অক্ষর ব্যবধান: 1px

আমরা এই মেনুতে হোভার প্রভাব যুক্ত করতে চাই, তাই হোভারে মেনু পাঠ্যের রঙ পরিবর্তন করুন। হোভারে একটি ভিন্ন মেনু পাঠ্যের রঙ সেট করুন।

• মেনু পাঠ্যের রঙ (হোভার): #b70018

তারপর সেটিংসে যান ড্রপডাউন মেনু ট্যাব অধীনে নকশা.

• ড্রপডাউন মেনু পটভূমির রঙ: #fbf9f4
• ড্রপডাউন মেনু লাইনের রঙ: #b70018
• মেনু পাঠ্যের রঙ: #000000

আমরা চাই ড্রপডাউন মেনুর পাঠ্যের রঙও হোভারে পরিবর্তিত হোক, তাই এই সেটিংসের জন্য হোভার বিকল্পগুলি নির্বাচন করুন এবং একটি ভিন্ন পাঠ্য রঙ সেট করুন।

• ড্রপডাউন মেনু টেক্সট কালার (হোভার): #b70018

• ড্রপডাউন মেনু সক্রিয় লিঙ্ক রঙ: #b70018
• মোবাইল মেনু পটভূমির রঙ: #fbf9f4
• মোবাইল মেনু পাঠ্যের রঙ: #000000

আবার, আমরা মোবাইল মেনুর পাঠ্যের রঙটি হোভারে পরিবর্তন করতে চাই। এই সেটিংসের জন্য হোভার বিকল্পগুলি নির্বাচন করুন, তারপরে হোভারে একটি ভিন্ন পাঠ্য রঙ সেট করুন৷

• মোবাইল মেনু টেক্সট কালার (হোভার): #b70018

শপিং কার্ট এবং অনুসন্ধান আইকন কাস্টমাইজেশন

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

• শপিং কার্ট আইকন দেখান: হ্যাঁ৷
• অনুসন্ধান আইকন দেখান: হ্যাঁ৷

ট্যাবে ফিরে যান নকশা এবং আইকন সেটিংস খুলুন। হোভারে আমাদের প্রতিটি আইকন কালো এবং লাল হবে। প্রথমে কালো রঙ সেট করুন।

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

এরপরে, হোভার আইকন নির্বাচন করুন এবং হোভারে রঙ যোগ করুন।

• শপিং কার্ট আইকনের রঙ (হোভার): #b70018
• অনুসন্ধান আইকনের রঙ (হোভার): #b70018
• হ্যামবার্গার মেনু আইকনের রঙ (হোভার): #b70018

আইকনের আকার সেট করুন।

• শপিং কার্ট আইকন ফন্ট সাইজ: 25 পিক্সেল
• অনুসন্ধান আইকন ফন্ট সাইজ: 25 পিক্সেল

বিভাগে যান ব্যবধান, তারপর উপরের এবং নীচের প্যাডিং সেট করুন।

• প্যাডিং (শীর্ষ এবং নীচে): 5px

অবশেষে, আমরা মেনু মডিউলের উপরে এবং নীচে একটি বর্ডার যোগ করব। সীমানা সেটিংস খুলুন।

• শীর্ষ সীমানা প্রস্থ: 3px

• নীচের সীমানা প্রস্থ: 3px

চূড়ান্ত নকশা

এবং এখানে আমাদের চূড়ান্ত নকশা.

দ্বিতীয় নকশা

আমাদের দ্বিতীয় ডিজাইনটি হোভারে মেনু আইকন এবং পাঠ্যের আকার পরিবর্তন করতে Divi-এর অন্তর্নির্মিত হোভার প্রভাবগুলি ব্যবহার করবে। চল শুরু করি.

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

• গ্রেডিয়েন্ট স্টপস:
  • 0%: rgba(255,255,255,0)
  • 23%: rgba(252,199,76,0.65)
  • 82%: rgba(232,119,255,0.32)

গ্রেডিয়েন্ট টাইপ এবং গ্রেডিয়েন্ট পজিশন সেট করুন।

• গ্রেডিয়েন্ট টাইপ: শঙ্কুযুক্ত
• গ্রেডিয়েন্ট অবস্থান: নীচে

তারপরে ট্যাবে যান নকশা এবং লেআউট সেট করুন (বিন্যাস).

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

বিভাগে যান মেনু পাঠ্য মেনু টেক্সট ডিজাইন কাস্টমাইজ করতে।

• সক্রিয় লিঙ্ক রঙ: #FFFFFF
• ফন্ট মেনু: Syne
• হরফের ওজন: বোল্ড
• মেনু ফন্ট স্টাইল: TT (বড় হাতের)
• টেক্সট কালার মেনু: #FFFFFF

এখন মেনু টেক্সট সাইজ এবং লেটার স্পেসিং সেট করুন।

• মেনু পাঠ্যের আকার: 20px
• মেনু অক্ষর ব্যবধান: 2px

যেহেতু আমরা হোভারে আমাদের মেনু টেক্সটের আকার বাড়াতে চাই, হোভার বিকল্পটি নির্বাচন করুন।

• মেনু পাঠ্যের আকার: 22px

এরপরে, ড্রপ-ডাউন মেনু থেকে ডিজাইন সেটিংস পরিবর্তন করুন।

• ড্রপডাউন মেনু পটভূমির রঙ: #fcda90
• ড্রপডাউন মেনু লাইনের রঙ: #FFFFFF
• টেক্সট কালার মেনু: #FFFFFF
• ড্রপডাউন মেনু সক্রিয় লিঙ্ক রঙ: #FFFFFF

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

• মোবাইল মেনু পটভূমির রঙ: #fcda90
• মোবাইল মেনু পাঠ্যের রঙ: #FFFFFF

শপিং কার্ট এবং অনুসন্ধান আইকন কাস্টমাইজেশন

এখন আমাদের মেনু আইকন কাস্টমাইজ করা শুরু করা যাক. যাও উপাদানসমূহ ট্যাব অধীনে সন্তুষ্ট এবং শপিং কার্ট আইকন এবং অনুসন্ধান আইকন সক্ষম করুন।

• শপিং কার্ট আইকন বপন: হ্যাঁ
• অনুসন্ধান আইকন দেখান: হ্যাঁ৷

ট্যাবে ফিরে যান নকশা এবং আইকন সেটিংস খুলুন।

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

হোভারে আইকনগুলির একটি গাঢ় কমলা রঙ থাকবে। কভার বিকল্পটি নির্বাচন করুন এবং রঙ সেট করুন।

• শপিং কার্ট আইকনের রঙ (হোভার): #fcac00
• অনুসন্ধান আইকনের রঙ (হোভার): #fcac00
• হ্যামবার্গার মেনু আইকনের রঙ (হোভার): #fcac00

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

• শপপিন কার্ট আইকন ফন্ট সাইজ: 25 পিক্সেল
• অনুসন্ধান আইকন ফন্ট সাইজ: 25 পিক্সেল

হোভারে আইকনের আকার বাড়াতে, হোভার বিকল্পটি নির্বাচন করুন।

• শপিং কার্ট আইকন ফন্ট সাইজ (হোভার): 30 পিক্সেল
• অনুসন্ধান আইকন ফন্ট সাইজ (হোভার): 30 পিক্সেল

অবশেষে, বিভাগে যান ব্যবধান এবং উপরের এবং নীচের প্যাডিং সেট করুন।

• প্যাডিং (শীর্ষ এবং নীচে): 5px

চূড়ান্ত নকশা

এখানে আমাদের দ্বিতীয় মেনু লেআউটের চূড়ান্ত নকশা।

তৃতীয় নকশা

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

আরও পড়ুন: Divi: কিভাবে একটি স্টিকি এবং প্রসারণযোগ্য হোভার মেনু তৈরি করবেন

এর শুরু করা যাক।

প্রথমে, মডিউলটিতে একটি পটভূমির রঙ যোগ করুন।

• পটভূমি: #efb6ac

তারপরে ট্যাবে যান নকশা এবং বিকল্পটি খুলুন মেনু পাঠ্য.

• সক্রিয় লিঙ্কের রঙ: #e84322
• মেনু ফন্ট: Cinzel
• ফন্ট ওজন মেনু: আল্ট্রা বোল্ড

আমরা হোভারে মেনু পাঠ্যের রঙ পরিবর্তন করতে চাই। প্রথমে মেনু টেক্সট কালার সেট করুন।

• টেক্সট কালার মেনু (ডেস্কটপ): #e7644a

হোভার আইকনে ক্লিক করুন এবং হোভার টেক্সট রঙ সেট করুন।

• মেনু পাঠ্যের রঙ (হোভার): #e84322

এর পরে, মেনু পাঠ্যের আকার এবং অক্ষর ব্যবধান সেট করুন।

• মেনু পাঠ্যের আকার: 21px
• মেনু অক্ষর ব্যবধান: 1px

আমরাও চাই যে অক্ষরের ব্যবধানটি হোভারে প্রসারিত হোক, তাই সেটিংসের জন্য হোভার বিকল্পটি নির্বাচন করুন।

• মেনু অক্ষর ব্যবধান: 2px

বাম দিকে পাঠ্য প্রান্তিককরণ সেট করুন।

• পাঠ্য প্রান্তিককরণ: বাম

এরপরে, ড্রপ-ডাউন মেনু থেকে নিম্নলিখিত সেটিংস পরিবর্তন করুন।

• ড্রপডাউন মেনু পটভূমির রঙ: #efb6ac
• ড্রপডাউন মেনু লাইনের রঙ: #e7644a

আরও পড়ুন: Divi: কিভাবে একটি গ্রিড আকারে একটি প্রশংসাপত্র বিভাগ তৈরি করতে হয়

• ড্রপডাউন মেনু পাঠ্যের রঙ
  • ডেস্কটপ: #e7644a
  • হোভার করুন: #e84322
• ড্রপডাউন মেনু সক্রিয় লিঙ্ক রঙ: #e84322

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

• মোবাইল মেনু পটভূমির রঙ: #efb6ac
• মোবাইল মেনু পাঠ্য রঙ:
  • ডেস্কটপ: #e7644a
  • হোভার করুন: #e84322

শপিং কার্ট এবং অনুসন্ধান আইকন কাস্টমাইজেশন

প্রথমে যান উপাদানসমূহ ট্যাব অধীনে সন্তুষ্ট এবং শপিং কার্ট আইকন এবং অনুসন্ধান আইকন সক্ষম করুন।

• শপিং কার্ট আইকন দেখান: হ্যাঁ৷
• শপিং আইকন দেখান: হ্যাঁ৷

তারপর ট্যাবে ফিরে যান নকশা এবং আইকন সেটিংস খুলুন। আইকনের রঙ সেট করুন।

• শপিং কার্ট আইকন রঙ: #e7644a
• অনুসন্ধান আইকন রঙ: #e7644a
• হ্যামবার্গার মেনু আইকনের রঙ: #e7644a

হোভারে এই আইকনগুলির রঙ পরিবর্তন হবে। হোভার বিকল্পগুলি সক্ষম করুন এবং রঙ সেট করুন।

• শপিং কার্ট আইকনের রঙ (হোভার): #e84322
• অনুসন্ধান আইকনের রঙ (হোভার): #e84322
• হ্যামবার্গার মেনু আইকনের রঙ (হোভার): #e84322

আমরা হোভারে আইকনের আকার বাড়াতে চাই। প্রথমে আইকন ফন্ট সাইজ সেট করুন।

• শপিং কার্ট আইকন ফন্ট সাইজ: 22 পিক্সেল
• অনুসন্ধান আইকন ফন্ট সাইজ: 22 পিক্সেল

এরপরে, হোভারে আইকনের ফন্টের আকার সেট করুন।

• শপিং কার্ট আইকন ফন্ট সাইজ (হোভার): 26 পিক্সেল
• অনুসন্ধান আইকন ফন্ট সাইজ (হোভার): 26 পিক্সেল

তারপর বিভাগে যান ব্যবধান এবং উপরের এবং নীচের প্যাডিং যোগ করুন।

• প্যাডিং (শীর্ষ এবং নীচে): 5px

অবশেষে, আমরা শপিং কার্ট এবং সার্চ আইকনের পিছনে চেনাশোনা যোগ করতে গ্লোবাল হেডারে কাস্টম CSS যোগ করতে পারি। 

আপনি আপনার মেনু মডিউল ডিজাইনের সাথে মেলে এই CSS কাস্টমাইজ করতে পারেন।

হেডার টেমপ্লেট সেটিংস খুলুন, তারপর ট্যাবে যান অগ্রসর এবং নিম্নলিখিত কাস্টম CSS সন্নিবেশ করুন।

.et_pb_menu__icon.et_pb_menu__cart-button,
.et_pb_menu__icon.et_pb_menu__search-button {
padding: 2% 2% 2% 2%;
background-color:#F7D5C2;
border-radius: 50%;
}

চূড়ান্ত নকশা

এটি আমাদের তৃতীয় এবং চূড়ান্ত মেনু বিন্যাসের নকশা সম্পূর্ণ করে।

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

এখন আসুন তিনটি ভিন্ন মেনুর চূড়ান্ত নকশা দেখে নেওয়া যাক।

প্রথম নকশা

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

দ্বিতীয় নকশা

তৃতীয় নকশা

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

উপসংহার

Divi এর মেনু মডিউল এবং শপিং কার্ট এবং অনুসন্ধান আইকনগুলি আপনার ওয়েবসাইটের জন্য অনন্য লেআউট এবং ডিজাইন তৈরি করতে কাস্টমাইজ করা সহজ। 

বিল্ট-ইন ডিভি সেটিংস যেমন হোভার ইফেক্ট এবং কাস্টম CSS ব্যবহার করে আপনি সহজেই আপনার মেনু মডিউলের চেহারা উন্নত করতে পারেন। 

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

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

এছাড়াও আমাদের গাইড সঙ্গে পরামর্শ করতে দ্বিধা করবেন না ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.

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

...