Divi-এর ব্যাকগ্রাউন্ড মাস্ক এবং প্যাটার্ন ব্যবহার করে একটি অনন্য এবং অত্যাশ্চর্য ব্যাকগ্রাউন্ড তৈরি করতে চান?
ডিভির নতুন ব্যাকগ্রাউন্ড মাস্ক এবং প্যাটার্ন বৈশিষ্ট্যটি সাধারণত পৃষ্ঠার বিভাগগুলির জন্য ব্যবহৃত হয়। তবে আমরা এগুলি হেডারেও যুক্ত করতে পারি!
এই টিউটোরিয়ালে, আমরা আপনাকে দেখাবো কিভাবে থিম বিল্ডার ব্যবহার করে একটি Divi হেডার টেমপ্লেটে ব্যাকগ্রাউন্ড মাস্ক এবং প্যাটার্ন যোগ করতে হয়।
এটি আপনার ওয়েবসাইটের জন্য সম্পূর্ণ অনন্য হেডার ডিজাইন তৈরি করার একটি দুর্দান্ত উপায়।
এর শুরু করা যাক।
জরিপ
এই টিউটোরিয়ালে আমরা যে ডিজাইনটি তৈরি করব তা এখানে একটি দ্রুত দেখুন।
Divi এর থিম বিল্ডারে যান এবং একটি গ্লোবাল হেডার তৈরি করা শুরু করুন
ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে, যান Divi > থিম নির্মাতা
দেখার জন্য ক্লিক করুন "গ্লোবাল হেডার যোগ করুন"
নির্বাচন করা "গ্লোবাল হেডার তৈরি করুন".
এর পরে, আপনি Divi বিল্ডার ব্যবহার করে একটি নতুন হেডার ডিজাইন করা শুরু করতে পারেন।
কীভাবে একটি ডিভি হেডারে পটভূমির মুখোশ এবং নিদর্শন যুক্ত করবেন
একটি ব্যাকগ্রাউন্ড কালার এবং প্যাটার্ন দিয়ে সেকশন ব্যাকগ্রাউন্ড তৈরি করা
আরও পড়ুন: Divi: কিভাবে একটি গ্রিড আকারে একটি প্রশংসাপত্র বিভাগ তৈরি করতে হয়
শুরু করতে, বিদ্যমান বিভাগের সেটিংস খুলুন।
ট্যাবের নীচে সন্তুষ্ট, নিম্নলিখিত সেটিংস সহ পটভূমি বিকল্পগুলি আপডেট করুন:
পেছনের রঙ:
- পটভূমি: #262d3f
পৃষ্ঠভূমি প্যাটার্ন:
- মডেল: বড়ি
- প্যাটার্নের রঙ: rgba(255,255,255,0.1)
- প্যাটার্ন আকার: কাস্টম আকার।
- প্যাটার্ন প্রস্থ: 1px
প্যাডিং
ট্যাবের নীচে নকশা, নিম্নরূপ বিভাগ প্যাডিং আপডেট করুন:
- প্যাডিং (শীর্ষ এবং নীচে): 0px
এটি হেডারের উল্লম্ব স্থান কিছুটা কমিয়ে দেবে।
নিম্নলিখিত কলাম লেআউট সহ একটি সারি যোগ করুন
স্থানধারক শিরোনাম সামগ্রী যোগ করা হয়েছে (একটি মেনু এবং একটি বোতাম)
সারির বাম কলামে, একটি নতুন মেনু যোগ করুন।
একটি মেনু নির্বাচন করুন.
তারপরে একটি লোগো যোগ করুন এবং মেনু এবং লোগো পছন্দসই কাস্টমাইজ করতে সেটিংস ব্যবহার করুন।
ডান কলামে, একটি বোতাম মডিউল যোগ করুন এবং এটি আপনার পছন্দ অনুযায়ী কাস্টমাইজ করুন।
গ্রেডিয়েন্ট, মাস্ক এবং প্যাটার্ন সহ লাইন ব্যাকগ্রাউন্ড তৈরি করা
গ্রেডিয়েন্ট
আপনার মেনু এবং বোতাম সহ সারি সেটিংস খুলুন। তারপরে নিম্নলিখিত পটভূমি সেটিংস সহ পটভূমি বিকল্পগুলি আপডেট করুন:
পটভূমি গ্রেডিয়েন্ট:
- গ্রেডিয়েন্ট স্টপস 1 (50%): পরিষ্কার
- গ্রেডিয়েন্ট স্টপস 2 (75%): #ff4c00
- স্টিয়ারিং: 90 ডিগ্রী
প্যাটার্ন
- মডেল: বড়ি
- প্যাটার্নের রঙ: rgba(38,45,63,0.48)
- প্যাটার্ন সাইজ: 1 পিক্সেল
- উল্লম্ব অফসেট: 20px
দ্রষ্টব্য: প্যাটার্নের উল্লম্ব অফসেট 20px এ সেট করা হয়েছে কারণ লাইনের উপরের অংশে 20px শীর্ষ প্যাডিং রয়েছে। এটি নিশ্চিত করে যে বিভাগ প্যাটার্নটি সারি প্যাটার্নের সাথে সারিবদ্ধ হয়েছে।
ব্যাকগ্রাউন্ড মাস্ক
- মুখোশ: হেরিংবোন
- মুখোশের রঙ: #262d3f
দ্রষ্টব্য: শিরোনামগুলির জন্য, মাস্কের আকার "ভর্তি করার জন্য প্রসারিত করুন" এ সেট রাখা ভাল যাতে এটি মুখোশের নকশার সাথে আপোস না করে অনুভূমিক স্থানকে কভার করে।
লাইনে চূড়ান্ত স্পর্শ
আরো দেখুন: Divi: কিভাবে আপনার ছবি সুন্দর করতে "গ্রেডিয়েন্ট বিল্ডার" ব্যবহার করবেন
নকশাটি সম্পূর্ণ করতে, আমরা লাইনটিতে একটি সীমানা ব্যাসার্ধ এবং আরও কয়েকটি সম্পাদনা যোগ করব।
ব্যাসার্ধ, সীমানা এবং সীমানা ব্যবধান
ট্যাবের নীচে নকশা, নিম্নরূপ প্যাডিং আপডেট করুন:
- প্যাডিং (শীর্ষ এবং নীচে): 5px
তারপরে একটি অতিরিক্ত নকশা উপাদানের জন্য সারিটিকে একটি সুন্দর গোলাকার কোণ দিন।
- গোলাকার কোণ: 50px
- বাম সীমানা প্রস্থ: 50px
- বাম সীমানার রঙ: #262d3f
আমাদের সারির বাম দিকে একটি সীমানা দিতে হবে কারণ মাস্কের বর্গাকার প্রান্তটি বৃত্তাকার কোণ থাকা সত্ত্বেও সারিতে উপচে পড়বে।
চূড়ান্ত ফলাফল
চূড়ান্ত ফলাফল দেখুন।
গ্রেডিয়েন্ট একটু সূক্ষ্ম, তাই এটি দেখতে কেমন তা এখানে দেখুন।
এবং এখানে ডেস্কটপ এবং মোবাইল হেডার ডিজাইন।
এখনই ডিভিআই ডাউনলোড করুন!!!
উপসংহার
হেডার ব্যাকগ্রাউন্ড ডিজাইন আইসবার্গের টিপ মাত্র। ডিভিতে উপলব্ধ ব্যাকগ্রাউন্ড বিকল্পগুলির সাথে অনেক কিছু অন্বেষণ করার আছে।
আমরা আশা করি এই টিউটোরিয়ালটি আপনাকে বুঝতে সাহায্য করেছে কিভাবে Divi এর ব্যাকগ্রাউন্ড মাস্ক এবং প্যাটার্ন একসাথে কাজ করে আপনার হেডারের জন্য একটি অনন্য ব্যাকগ্রাউন্ড ডিজাইন তৈরি করতে পারে।
আপনার নিজস্ব ওয়েবসাইট ডিজাইন বা আসন্ন প্রকল্পের সাথে মানানসই আরও ব্যাকগ্রাউন্ড ডিজাইনের সমন্বয় নিয়ে পরীক্ষা-নিরীক্ষা করতে দ্বিধা করবেন না।
আপনিও পরামর্শ করতে পারেন আমাদের সংস্থান, আপনার যদি ইন্টারনেট সাইট তৈরির প্রকল্পগুলি চালিত করার জন্য আরও উপাদানের প্রয়োজন হয়।
এছাড়াও আমাদের গাইড সঙ্গে পরামর্শ করতে দ্বিধা করবেন না ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.
কিন্তু ইতিমধ্যে, আপনার বিভিন্ন সামাজিক নেটওয়ার্কে এই নিবন্ধটি ভাগ করুন.
...