Divi পৃষ্ঠাগুলির মধ্যে মেনুর রঙ কিভাবে পরিবর্তন করবেন

by ব্লেয়ার Jersyer | Divi, ওয়ার্ডপ্রেস টিউটোরিয়াল

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

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

এটিই সেই অঞ্চল যেখানে আমি কথা বলছি:

এর অর্থ হ'ল এখানে যে পরিবর্তনগুলি করা হয় তা কেবলমাত্র সম্পাদনা করা পৃষ্ঠায় কার্যকর হবে। এটি একটি অবিশ্বাস্যভাবে আকর্ষণীয় এবং দরকারী বৈশিষ্ট্য!

এই টিউটোরিয়ালটির শেষে আমাদের চূড়ান্ত ফলাফল হবে। নেভিগেশন মেনুটির পটভূমি রঙ যা আপনি যে পৃষ্ঠাগুলিতে যাচ্ছেন তার উপর নির্ভর করে। অতিরিক্ত বিকল্প হিসাবে আপনি লক্ষ্য করবেন যে আইকনগুলিও রঙ পরিবর্তন করে।

আমি প্রথমে মেনুতে কীভাবে পটভূমি রঙ প্রয়োগ করতে হবে তা দেখাব show তারপরে পৃথকভাবে আমি আপনাকে দেখাব কীভাবে সামাজিক আইকনগুলি ম্যাচ করা যায়।

আপনি যদি এখনও আমাদের টিউটোরিয়ালটি না পড়েন থিম উপস্থাপনা ওয়ার্ডপ্রেস ডিভি, আমি আপনাকে এটি করতে আমন্ত্রণ জানাচ্ছি।

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

মেনুতে রঙ প্রয়োগ করুন

প্রথমত, আমি ডিফল্ট হেডার বিন্যাস ব্যবহার করি। আপনি যদি অন্য ফরম্যাট ব্যবহার করেন তবে এই টিউটোরিয়ালটি এখনও কার্যকর হওয়া উচিত কারণ Divi-তে "divs"-এর জেনেরিক আইডি সব ফরম্যাটের জন্য একই (#main-header), যতদূর আমি জানি। অন্য ফরম্যাটে সমস্যা থাকলে।

আমাদের লিঙ্কগুলি নীচে প্রদর্শিত হবে তা নিশ্চিত করা দরকার। আমি যে রঙগুলি বেছে নিয়েছি, আপনি যদি সেগুলি ব্যবহার করতে চান তবে আপনি কুলারস.কম-তে খুঁজে পাবেন, আরও গা dark় দিকে রয়েছে, তাই আমাকে পাঠ্যের লিঙ্কটিকে হালকা রঙ করতে হবে। আমি রঙ সাদা জন্য বেছে নিয়েছি।

আমি আরজিবিএ (255,255,255,0.6) ব্যবহার করছি যা সক্রিয় লিঙ্ক রঙ হিসাবে লিঙ্ক রঙ এবং গা dark় সাদা হবে (পছন্দসই ভিজ্যুয়াল এফেক্টের জন্য)

তারপরে আপনি যে পৃষ্ঠায় প্রথম পরিবর্তনটি প্রয়োগ করতে চান সেখানে যান (আপনি মেনু লিঙ্ক সেট আপ দেখতে হবে)। "3 লাইন" আইকনে ক্লিক করুন এবং একটি বিকল্প বাক্স উপস্থিত হবে।

এখন এই বাক্সে নিম্নলিখিত সিএসএস যুক্ত করুন:

# হেডার-হেডার {ব্যাকগ্রাউন্ড: #474f61; }

আপনার এর মতো কিছু থাকতে হবে, হেক্স কোডটি যে রঙে চান তা পরিবর্তন করতে ভুলবেন না:

ক্লিক করুন সংরক্ষণ করুন এবং আপডেট করুন এবং এটি কোডের এক লাইনে মূল মেনুতে প্রযোজ্য।

এখন আপনাকে কেবলমাত্র আপনার সমস্ত পৃষ্ঠাগুলির জন্য এই একই কোড যুক্ত করতে হবে এবং প্রতিবার হেক্স কোড পরিবর্তন করতে হবে।

সামাজিক নেটওয়ার্ক আইকন (ptionচ্ছিক)

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

সুতরাং প্রথমে আপনাকে নিশ্চিত করতে হবে যে আপনি নিজের সামাজিক লিঙ্কগুলি সেট আপ করেছেন। "যান ডিভি বিকল্পসমূহ> সাধারণ থিম এবং আপনার ইউআরএলগুলি আপনার সামাজিক মিডিয়া পৃষ্ঠাগুলিতে যুক্ত করুন।

তারপরে মাধ্যমিক মেনু বারে আপনার সেটিংসে যান এবং পটভূমি এবং পাঠ্য রঙ সেট করুন। আমি পাঠ্যের রঙ হিসাবে 'সাদা' বেছে নিচ্ছি কারণ আমি প্রতিটি মেন্যুতে একটি নতুন রঙিন পটভূমি যুক্ত করতে যাচ্ছি নতুন মেনু রঙের সাথে মেলে যাতে আইকনটি উপস্থিত হতে পারে।

"যান শিরোনাম এবং নেভিগেশন> শিরোনাম উপাদানসমূহ এবং বাক্সটি টিক দিন " সামাজিক আইকন দেখান ».

আপনার কী মনে আছে কীভাবে আমরা প্রতিটি পৃষ্ঠায় সিএসএস যুক্ত করেছি? আমরা ফিরে যাব এবং আগে যা লিখেছিলাম তা সম্পাদনা করব। নীচের সিএসএসের সাহায্যে আপনার যা আছে তা প্রতিস্থাপন করুন বা আপনি যা আলাদা তা স্বীকৃতি দিলে আপনি কেবল অতিরিক্ত কোড যুক্ত করতে পারেন।

# হেডার-হেডার, # শীর্ষ-শিরোনাম। এবং সামাজিক-আইকন একটি {ব্যাকগ্রাউন্ড: #474f61; }

এই কোডটি আমাদের ওয়েবসাইটকে কেবল এই পৃষ্ঠার মেনুটির জন্য পটভূমির রঙ পরিবর্তন করতে সহায়তা করবে না, তবে আমাদের সামাজিক আইকনগুলির পটভূমিও পরিবর্তন করবে। আমরা মিক্সটিতে আরও একটি উপাদান যুক্ত করেছি। আপনার নীচের মতো দেখতে এমন কিছু হওয়া উচিত:

আপনাকে প্রতিটি পৃষ্ঠায় হেক্সের রঙগুলি সঠিক কিনা তা পরীক্ষা করতে হবে।

জেনারেল সিএসএস

নিম্নলিখিত কোডটি আপনার " থিম বিকল্প> সিএসএস বক্স বা শিশু থিমের স্টাইল ফাইলটিতে।

# শীর্ষ শীর্ষচরণ। এবং সামাজিক-আইকন লি {মার্জিন-বাম: 5px; } # শীর্ষ-শিরোনাম। এবং সামাজিক-আইকন একটি {প্যাডিং: 4px; মার্জিন-নীচে: 8px; প্রস্থ: 30px; উচ্চতা: 30px; সীমান্ত-ব্যাসার্ধ: 50%; লাইন-উচ্চতা: 24px; }

আপনি ভাবতে পারেন যে পৃষ্ঠার সিএসএস বাক্সে এটি কেন এমন নয়। কারণটি হ'ল এই নির্দিষ্ট কোডের অংশটি সমস্ত লক্ষ্যযুক্ত উপাদানগুলিকে প্রভাবিত করে তাই একাধিক জায়গায় হুবহু একই কোডটি স্থাপন করা অক্ষম। প্রতি পৃষ্ঠায় কেবল পটভূমির রঙ পরিবর্তন হয় তবে এই কোডটি প্রতি পৃষ্ঠায় পরিবর্তন হয় না। আপনার সাইটে ওজন যোগ করা এড়াতে এটি একটি সেরা অনুশীলন।

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

[vc_row center_row = "হ্যাঁ"] [vc_column width = "1/2″] [vcex_button টার্গেট =" blank "layout =" প্রসারিত "align =" center "font_family =" Raleway "font_weight =" 700″ স্টাইল = "ফ্ল্যাট" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DIVI থিম ডাউনলোড করুন [/ vcex_button] [wcex_button] [vcex_button] » 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" লক্ষ্য = "খালি" লেআউট = "প্রসারিত" সারিবদ্ধ = "কেন্দ্র" font_family = "Raleway" font_weight = "700″ স্টাইল =" ফ্ল্যাট "কাস্টম_ব্যাকগ্রাউন্ড =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "custom_hover_color =" #fffffff" কাস্টম_হওভার_color =" #FLOff-এটি-ডাউন DIVI [/ vcex_button][/ vc_column][/ vc_row]

অন্যান্য ডিভি টিউটোরিয়াল

3 মন্তব্য

কোকোস ৩১ জানুয়ারী, ২০২৫ তারিখে বিকাল ৩:১৩ মিনিটে

সুপ্রভাত,

আপনার সমস্ত টিউটোরিয়াল জন্য ধন্যবাদ।
আপনি কি জানেন যে আমরা ডিভিআই সাবমেনু (ড্রপডাউন নীচে দ্বিতীয় স্তর) পূরণের প্রস্থে রাখতে পারি কিনা? যা পৃষ্ঠার সম্পূর্ণ প্রস্থ গ্রহণ করে
উত্তর
জার্মান জং ৩০শে অক্টোবর, ২০২০ বিকাল ৩:৩০ মিনিটে।

সুপ্রভাত,

মূল শিরোনামে আপনি কীভাবে পাঠ্যের রঙ পরিবর্তন করবেন? স্বচ্ছ পটভূমি (আমার প্রধান শিরোনামে) থাকা, ডিভি কাস্টমাইজেশন ইন্টারফেসের মাধ্যমে আমি বেছে নেওয়া ফন্টের রঙ (আমার প্রধান শিরোনামে, যা আমার বিভিন্ন বিভাগ উপস্থাপন করে) কালো is তবে, আমি এটি কিছু পৃষ্ঠাতে সাদা হতে চাই কারণ নীচের ফটোটি খুব গা dark়।

কিভাবে?

আগাম আপনাকে ধন্যবাদ
উত্তর
- থিয়েরি বারট্রান্ড ৩০শে অক্টোবর, ২০২০ বিকাল ৩:৩০ মিনিটে।
  
  হ্যালো জার্মেইন,
  
  আপনি কি চান যে এটি সমস্ত পৃষ্ঠায় বা কেবল কয়েকটি পৃষ্ঠায় সাদা হতে পারে?
  উত্তর