আপনি কি Divi এর মাস্ক এবং ব্যাকগ্রাউন্ড প্যাটার্ন ওভারলে ব্যবহার করতে চান?
শেষের সাথে পটভূমি মাস্ক এবং পটভূমি প্যাটার্ন বৈশিষ্ট্য সংস্করণ Divi-এর সাহায্যে, আপনি আপনার ওয়েবসাইটের জন্য অনন্য হিরো বিভাগ তৈরি করতে পারেন। একটি হিরো বিভাগ হল আপনার ওয়েবসাইটের প্রথম বিভাগ এবং আপনার ওয়েবসাইটটি স্ক্রোল করার আগে আপনার দর্শকরা এটিই প্রথম দেখতে পান, তাই এটি নজরকাড়া হওয়া গুরুত্বপূর্ণ!
এই নিবন্ধটি আপনাকে দেখাবে কীভাবে পাঁচটি অনন্য ব্যাকগ্রাউন্ড মাস্ক এবং প্যাটার্ন ওভারলে তৈরি করতে হয় যা আপনি সত্যিকারের অত্যাশ্চর্য হিরো বিভাগ তৈরি করতে একটি পটভূমি ছবিতে প্রয়োগ করতে পারেন।
এই টিউটোরিয়ালটি প্রতিটি হিরো বিভাগ তৈরি করার জন্য প্রয়োজনীয় প্রয়োজনীয় পদক্ষেপগুলি কভার করবে এবং মিনিটের মধ্যে আপনার ওয়েবসাইটের জন্য একটি আকর্ষণীয় হিরো বিভাগ তৈরি করতে আপনাকে প্রয়োজনীয় সরঞ্জামগুলি দেবে৷
শুরু করা যাক!
জরিপ
আজ এই নিবন্ধে আমরা যে পাঁচটি হিরো বিভাগ তৈরি করব তার একটি দ্রুত ওভারভিউ এখানে।
এখন DIVI ডাউনলোড করুন!!!
নকশা সূক্ষ্ম, সহজ এবং এখনও প্রভাবশালী.
আরও পড়ুন: Divi: কিভাবে আপনার ছবি সুন্দর করতে "গ্রেডিয়েন্ট বিল্ডার" ব্যবহার করবেন
ডিভি বিল্ডারের সাথে একটি নতুন পৃষ্ঠা তৈরি করুন
শুরু করার জন্য, আপনাকে নিম্নলিখিতগুলি করতে হবে:
ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে, যান পৃষ্ঠাগুলি> নতুন যুক্ত করুন একটি নতুন পৃষ্ঠা তৈরি করতে।
এটিকে একটি শিরোনাম দিন যা আপনার কাছে বোধগম্য হয় এবং ক্লিক করুন Divi বিল্ডার ব্যবহার করুন
তারপর ক্লিক করুন বিল্ডিং শুরু করুন (স্ক্র্যাচ থেকে বিল্ড)
এর পরে, ডিভিতে ডিজাইনিং শুরু করার জন্য আপনার কাছে একটি ফাঁকা ক্যানভাস থাকবে।
ব্যাকগ্রাউন্ড ইমেজে প্রয়োগ করার জন্য ব্যাকগ্রাউন্ড মাস্ক এবং প্যাটার্ন ওভারলে এর পাঁচটি উদাহরণ
প্রথমে হিরো বিভাগ তৈরি করা যাক
আমাদের সমস্ত নমুনা ডিজাইন একই বিভাগ, সারি এবং কলামের কাঠামো ব্যবহার করে, তাই এখন সেগুলি সেট আপ করা যাক।
1. একটি লেআউট কাঠামো তৈরি করুন
আপনার পৃষ্ঠায় একটি সারি যোগ করুন, তারপর কলামের গঠন দেখাতে সবুজ "+" আইকনে ক্লিক করুন এবং প্রথম কলাম, পূর্ণ-প্রস্থ কলামটি নির্বাচন করুন।
2. বিভাগ ব্যবধান যোগ করুন
এখন যেহেতু আমরা আমাদের সারি এবং কলাম সংজ্ঞায়িত করেছি, এটি বিভাগে কিছু ব্যবধান যোগ করার সময়।
স্পেসিং ট্যাবে, নিম্নলিখিত আপডেট করুন:
- ডেস্কটপ: 400 পিক্সেল (শীর্ষ এবং নীচে)
- ট্যাবলেট: 200 পিক্সেল (শীর্ষ এবং নীচে); 25px (বাম এবং ডান)
- ফোন: 50 পিক্সেল (শীর্ষ এবং নীচে); 25px (বাম এবং ডান)
হিরো সেকশন ডিজাইন #1
আসুন প্রথম হিরো সেকশন ডিজাইন করি।
এখন DIVI ডাউনলোড করুন!!!
1. হেডার টেক্সট যোগ করুন
মডিউল লাইব্রেরি আনতে ধূসর "+" আইকনে ক্লিক করুন। পাঠ্যে স্ক্রোল করুন এবং লোড করতে ক্লিক করুন।
শিরোনাম পাঠ্য লিখুন, তারপর ট্যাবের নীচে শিরোনাম টেক্সট, এই সেটিংস কনফিগার করুন:
- শিরোনাম ফন্ট: কাজ ছাড়া
- পাঠ্যের রঙ: সাদা #ffffff
- শিরোনাম পাঠ্য আকার:
- ডেস্কটপ: 3 এম
- ট্যাবলেট: 2,2 এম
- ফোন: ০১৭১৩৩৩৩৩৩৩ইএম
2. বোতাম মডিউল যোগ করুন
একটি বোতাম যোগ করুন এবং এই সেটিংস কনফিগার করুন:
- ট্যাবের নীচে সন্তুষ্টs: আরও জানুন
- ট্যাবের নীচে শ্রেণীবিন্যাস, নির্বাচন করুন: কেন্দ্র
- দেখার জন্য ক্লিক করুন বোতামের জন্য কাস্টম শৈলী ব্যবহার করুন তারপর কনফিগার করুন:
- বোতাম পাঠ্য আকার:
- ডেস্কটপ: 20px
- ট্যাবলেট: 16px
- ফোন: 14px
- বোতাম পাঠ্য রঙ: #ffffff
- পটভূমি: #1d1d1d
- বোতাম সীমানা প্রস্থ: 0
- সীমানা ব্যাসার্ধ: 0
- অক্ষর ব্যবধান: 3 পয়েন্ট
- বোতাম ফন্ট: কাজ ছাড়া
- ফন্ট শৈলী: TT
- বোতাম পাঠ্য আকার:
3. একটি পটভূমি ছবি যোগ করুন
এখন যেহেতু আমরা আমাদের বিষয়বস্তু সেট আপ করেছি, এটি বিভাগের জন্য পটভূমি ডিজাইন করা শুরু করার সময়।
- ব্যাকগ্রাউন্ড টগল এ যান এবং ৩য় ট্যাবে, ইমেজ ট্যাবে ক্লিক করুন, তারপর "অ্যাড ব্যাকগ্রাউন্ড ইমেজ" এ ক্লিক করুন।
- এটি আপনার মিডিয়া লাইব্রেরি নিয়ে আসবে, যেখানে আপনি একটি ফটো নির্বাচন করতে বা একটি নতুন আপলোড করতে পারেন৷
- একবার আপনি আপনার ছবি নির্বাচন করলে, নীচের ডানদিকে কোণায় "একটি ছবি আপলোড করুন" বোতামে ক্লিক করুন৷
4. একটি পটভূমি প্যাটার্ন যোগ করুন
এখন আমরা আমাদের ব্যাকগ্রাউন্ড ইমেজ সেট আপ করেছি, আসুন একটি প্যাটার্ন যোগ করি।
- ট্যাবে পটভূমি, 5ম ট্যাবে নেভিগেট করুন, ট্যাবে৷ পৃষ্ঠভূমি প্যাটার্ন, তারপর "ব্যাকগ্রাউন্ড প্যাটার্ন যোগ করুন" এ ক্লিক করুন।
- নির্বাচন করা গুচ্ছবদ্ধ ড্রপ-ডাউন মেনু থেকে এবং এই সেটিংস কনফিগার করুন:
- প্যাটার্নের রঙ – rgba(255,255,255,0.31)
- প্যাটার্ন ট্রান্সফর্ম: কোনোটিই নয়
- আকার: প্রকৃত আকার
- প্যাটার্ন পুনরাবৃত্তি মূল: উপরে নীচে
- প্যাটার্ন পুনরাবৃত্তি: পুনরাবৃত্তি
- ব্লেন্ড মোড: স্বাভাবিক
5. ব্যাকগ্রাউন্ড মাস্ক যোগ করুন
এখন আমরা আমাদের ব্যাকগ্রাউন্ড ইমেজ এবং প্যাটার্ন সেট আপ করেছি, আসুন একটি ব্যাকগ্রাউন্ড মাস্ক যোগ করি।
- ট্যাবে পটভূমি, 6 তম ট্যাবে নেভিগেট করুন, ট্যাবে৷ ব্যাকগ্রাউন্ড মাস্ক, তারপর "Add a Background Mask" এ ক্লিক করুন।
- নির্বাচন করা শিম ড্রপ-ডাউন মেনু থেকে এবং এই সেটিংস কনফিগার করুন:
- মুখোশের রঙ: rgba(0,0,0,0.36)
- মাস্ক আকৃতির অনুপাত: অনুভূমিক আয়তক্ষেত্র
- আকার: পূরণ করতে প্রসারিত
তাই! আপনার কাছে এখন একটি সুন্দর ডিজাইন করা হিরো বিভাগ আছে।
সেকশন হিরো #2 ডিজাইন
এখন দ্বিতীয় নায়ক বিভাগের ডিজাইন করা যাক।
1. একটি ব্যাকগ্রাউন্ড ইমেজ যোগ করুন এবং ওভারলেতে মিশ্রন মোড সেট করুন
আপনার ব্যাকগ্রাউন্ড ইমেজ সিলেক্ট করুন, ব্লেন্ডিং মোড ওভারলে সেট করুন এবং rgba (10,10,10,0.64) এর ওভারলে কালার যোগ করুন।
2. একটি পটভূমি প্যাটার্ন যোগ করুন
এখন যেহেতু আমরা ব্যাকগ্রাউন্ড ইমেজ সেট আপ করেছি, আসুন একটি ব্যাকগ্রাউন্ড প্যাটার্ন যোগ করি।
- ব্যাকগ্রাউন্ড ট্যাবে, ৫ম ট্যাবে, ট্যাবে যান পৃষ্ঠভূমি প্যাটার্ন, তারপর "ব্যাকগ্রাউন্ড প্যাটার্ন যোগ করুন" এ ক্লিক করুন।
- নির্বাচন করা গুচ্ছবদ্ধ ড্রপ-ডাউন মেনু থেকে এবং এই সেটিংস কনফিগার করুন:
- প্যাটার্নের রঙ – rgba(255,255,255,0.09)
- প্যাটার্ন ট্রান্সফর্ম: কোনোটিই নয়
- আকার: কভার
- প্যাটার্ন পুনরাবৃত্তি মূল: উপরের বাম
- প্যাটার্ন পুনরাবৃত্তি: পুনরাবৃত্তি
- ব্লেন্ড মোড: স্বাভাবিক
3. ব্যাকগ্রাউন্ড মাস্ক যোগ করুন
এখন আমরা আমাদের ব্যাকগ্রাউন্ড ইমেজ এবং প্যাটার্ন সেট আপ করেছি, আসুন একটি ব্যাকগ্রাউন্ড মাস্ক যোগ করি।
- ট্যাবে পটভূমি, 6 তম ট্যাবে নেভিগেট করুন, ট্যাবে৷ ব্যাকগ্রাউন্ড মাস্ক, তারপর "ব্যাকগ্রাউন্ড মাস্ক যোগ করুন" এ ক্লিক করুন।
- নির্বাচন করা কাকপদ ড্রপ-ডাউন মেনু থেকে এবং এই সেটিংস কনফিগার করুন:
- মুখোশের রঙ: rgba(0,0,0,0.36)
- মাস্ক ট্রান্সফর্ম: কোনোটিই নয়
- আকৃতির অনুপাত: অনুভূমিক আয়তক্ষেত্র
- মুখোশের আকার: পূরণ করার জন্য প্রসারিত করুন
- মাস্ক ব্লেন্ড মোড: স্বাভাবিক
সেকশন হিরো #3 ডিজাইন
এখন তৃতীয় হিরো সেকশন ডিজাইন করা যাক।
1. একটি ব্যাকগ্রাউন্ড ইমেজ যোগ করুন এবং ওভারলেতে মিশ্রন মোড সেট করুন
আপনার ব্যাকগ্রাউন্ড ইমেজ সিলেক্ট করুন, ব্লেন্ডিং মোড ওভারলে সেট করুন এবং rgba (10,10,10,0.39) এর ওভারলে কালার যোগ করুন।
2. একটি পটভূমি প্যাটার্ন যোগ করুন
এখন আমরা আমাদের ব্যাকগ্রাউন্ড ইমেজ সেট আপ করেছি, আসুন একটি ব্যাকগ্রাউন্ড প্যাটার্ন যোগ করি।
- ট্যাবে পটভূমি, 5 তম ট্যাবে নেভিগেট করুন, ট্যাবে৷ পৃষ্ঠভূমি প্যাটার্ন, তারপর "ব্যাকগ্রাউন্ড প্যাটার্ন যোগ করুন" এ ক্লিক করুন।
- নির্বাচন করা তির্যক স্ট্রাইপ 2 ড্রপ-ডাউন মেনু থেকে এবং এই সেটিংস কনফিগার করুন:
- প্যাটার্নের রঙ – rgba(0,0,0,0.06)
- প্যাটার্ন ট্রান্সফর্ম: কোনোটিই নয়
- আকার: প্রকৃত আকার
- প্যাটার্ন পুনরাবৃত্তি মূল: উপরের বাম
- প্যাটার্ন পুনরাবৃত্তি: পুনরাবৃত্তি
- ব্লেন্ড মোড: স্বাভাবিক
3. ব্যাকগ্রাউন্ড মাস্ক যোগ করুন
এখন আমরা একটি ব্যাকগ্রাউন্ড ইমেজ এবং একটি প্যাটার্ন যোগ করেছি, আসুন একটি ব্যাকগ্রাউন্ড মাস্ক যোগ করি।
- ট্যাবে পটভূমি, 6 তম ট্যাবে নেভিগেট করুন, ট্যাবে৷ ব্যাকগ্রাউন্ড মাস্ক, তারপর "ব্যাকগ্রাউন্ড মাস্ক যোগ করুন" এ ক্লিক করুন।
- নির্বাচন করা ত্রিভুজ ড্রপ-ডাউন মেনু থেকে এবং এই সেটিংস কনফিগার করুন:
- মুখোশের রঙ: rgba(10, 10, 10, 0,61)
- মাস্ক ট্রান্সফর্ম: কোনোটিই নয়
- আকৃতির অনুপাত: অনুভূমিক আয়তক্ষেত্র
- মুখোশের আকার: পূরণ করার জন্য প্রসারিত করুন
- মাস্ক ব্লেন্ড মোড: স্বাভাবিক
সেকশন হিরো #4 ডিজাইন
এবার Hero এর চতুর্থ সেকশন ডিজাইন করা যাক।
1. একটি পটভূমি ছবি যোগ করুন
আপনার ব্যাকগ্রাউন্ড ইমেজ নির্বাচন করুন.
2. একটি পটভূমি প্যাটার্ন যোগ করুন
এখন যেহেতু আমরা আমাদের ব্যাকগ্রাউন্ড ইমেজ যোগ করেছি, আসুন একটি ব্যাকগ্রাউন্ড প্যাটার্ন যোগ করি।
- ট্যাবে পটভূমি, 5 তম ট্যাবে নেভিগেট করুন, ট্যাবে৷ পৃষ্ঠভূমি প্যাটার্ন, তারপর "ব্যাকগ্রাউন্ড প্যাটার্ন যোগ করুন" এ ক্লিক করুন।
- নির্বাচন করা হাসি ড্রপ-ডাউন মেনু থেকে এবং এই সেটিংস কনফিগার করুন:
- প্যাটার্নের রঙ – rgba(0,0,0,0.2)
- প্যাটার্ন ট্রান্সফর্ম: কোনোটিই নয়
- আকার: কভার
- পুনরাবৃত্তি মূল: উপরের বাম
- প্যাটার্ন পুনরাবৃত্তি: পুনরাবৃত্তি
- প্যাটার্ন ব্লেন্ড মোড: স্বাভাবিক
3. ব্যাকগ্রাউন্ড মাস্ক যোগ করুন
এখন যেহেতু আমরা আমাদের ব্যাকগ্রাউন্ড ইমেজ এবং প্যাটার্ন প্রয়োগ করেছি, আসুন একটি ব্যাকগ্রাউন্ড মাস্ক যোগ করি।
- ট্যাবে পটভূমি, 6 তম ট্যাবে নেভিগেট করুন, ট্যাবে৷ ব্যাকগ্রাউন্ড মাস্ক, তারপর "ব্যাকগ্রাউন্ড মাস্ক যোগ করুন" এ ক্লিক করুন।
- নির্বাচন করা কর্নার লেক ড্রপ-ডাউন মেনু থেকে এবং এই সেটিংস কনফিগার করুন:
- মুখোশের রঙ: rgba(10, 10, 10, 0,61)
- মাস্ক ট্রান্সফর্ম: অনুভূমিক
- আকৃতির অনুপাত: অনুভূমিক আয়তক্ষেত্র
- আকার: কভার
- মুখোশের অবস্থান: কেন্দ্রে বাম
- মাস্ক ব্লেন্ডার মোড: সাধারণ
3. লাইন প্যারামিটার কনফিগার করুন
আমরা যাওয়ার আগে, এই হিরো বিভাগে অনন্য লাইন শৈলী রয়েছে। এর এটা সেট আপ করা যাক.
- সাইজিং:
- প্রস্থ: 80%
- সর্বোচ্চ প্রস্থ: 800px
- সারি সারিবদ্ধকরণ:
- ডেস্কটপ: ডিফল্ট
- ট্যাবলেট: কেন্দ্র
- ফোন: কেন্দ্র
- মার্জিন:
- বাম: 20vw
সেকশন হিরো #5 ডিজাইন
এখন পঞ্চম হিরো সেকশন ডিজাইন করা যাক।
এখন DIVI ডাউনলোড করুন!!!
1. একটি পটভূমি ছবি যোগ করুন
আপনার ব্যাকগ্রাউন্ড ইমেজ নির্বাচন করুন.
2. একটি প্যাটার্ন যোগ করুন
এখন যেহেতু আমরা আমাদের ব্যাকগ্রাউন্ড ইমেজ সেট আপ করেছি, আসুন একটি ব্যাকগ্রাউন্ড প্যাটার্ন প্রয়োগ করি।
- ট্যাবে পটভূমি, 5 তম ট্যাবে নেভিগেট করুন, ট্যাবে৷ পৃষ্ঠভূমি প্যাটার্ন, তারপর "ব্যাকগ্রাউন্ড প্যাটার্ন যোগ করুন" এ ক্লিক করুন।
- নির্বাচন করা ক্রস ড্রপ-ডাউন মেনু থেকে এবং এই সেটিংস কনফিগার করুন:
- প্যাটার্নের রঙ - #ffffff
- প্যাটার্ন ট্রান্সফর্ম: কোনোটিই নয়
- আকার: কাস্টম আকার
- প্যাটার্ন প্রস্থ: 10px
- প্যাটার্ন উচ্চতা: 10px
- পুনরাবৃত্তি মূল: উপরে নীচে
- প্যাটার্ন পুনরাবৃত্তি: পুনরাবৃত্তি
- প্যাটার্ন ব্লেন্ড মোড: স্বাভাবিক
3. ব্যাকগ্রাউন্ড মাস্ক যোগ করুন
এখন আমরা একটি ব্যাকগ্রাউন্ড ইমেজ এবং প্যাটার্ন প্রয়োগ করেছি, আসুন একটি ব্যাকগ্রাউন্ড মাস্ক যোগ করি।
- ট্যাবে পটভূমি, 6 তম ট্যাবে নেভিগেট করুন, ট্যাবে৷ ব্যাকগ্রাউন্ড মাস্ক, তারপর "ব্যাকগ্রাউন্ড মাস্ক যোগ করুন" এ ক্লিক করুন।
- নির্বাচন করা তির্যক বড়ি ড্রপ-ডাউন মেনু থেকে এবং এই সেটিংস কনফিগার করুন:
- মুখোশের রঙ: rgba(10, 10, 10, 0,61)
- মাস্ক ট্রান্সফর্ম: অনুভূমিক
- আকৃতির অনুপাত: অনুভূমিক আয়তক্ষেত্র
- আকার: কভার
- মুখোশের অবস্থান: কেন্দ্রে বাম
- মাস্ক ব্লেন্ড মোড: স্বাভাবিক
3. লাইন প্যারামিটার কনফিগার করুন
আমরা যাওয়ার আগে, এই হিরো বিভাগে অনন্য লাইন শৈলী রয়েছে। এর এটা সেট আপ করা যাক.
- সাইজিং:
- প্রস্থ: 80%
- সর্বোচ্চ প্রস্থ: 800px
- সারি সারিবদ্ধকরণ:
- ডেস্কটপ: ডিফল্ট
- ট্যাবলেট: কেন্দ্র
- ফোন: কেন্দ্র
- ব্যবধান:
- মার্জিন (ডান): 18vw
আরো দেখুন: Divi: কিভাবে একটি হেডারে মুখোশ এবং ব্যাকগ্রাউন্ড প্যাটার্ন যোগ করবেন
উপসংহার
আপনার ওয়েবসাইটের জন্য একটি অনন্য এবং নজরকাড়া হিরো বিভাগ ডিজাইন করা নতুন বিকল্পগুলির সাথে সহজ ব্যাকগ্রাউন্ড এবং প্যাটার্ন মাস্ক Divi দ্বারা। প্রতিটি বৈশিষ্ট্যের অনেকগুলি বিকল্প রয়েছে যা আপনাকে সত্যিকারের সৃজনশীল পটভূমি তৈরি করতে দেয়৷
এছাড়াও, আপনি যেকোনো ডিভি বিল্ডার আইটেমে ব্যাকগ্রাউন্ড প্যাটার্ন এবং মাস্ক যোগ করতে পারেন! ডিজাইনের বিকল্পগুলি অন্তহীন।
আশা করি এই কৌশলটি ভবিষ্যতের প্রকল্পগুলির জন্য আরেকটি দরকারী নকশা দক্ষতা যোগ করবে।
আমরা আশা করি এই টিউটোরিয়ালটি আপনাকে আপনার পরবর্তী ডিভি প্রকল্পগুলির জন্য অনুপ্রাণিত করবে। আপনার যদি কোন উদ্বেগ বা পরামর্শ থাকে, তাহলে আমাদের খুঁজুন মন্তব্য বিভাগ এটি আলোচনা করার জন্য।
আপনিও পরামর্শ করতে পারেন আমাদের সংস্থান, আপনার যদি ইন্টারনেট সাইট তৈরির প্রকল্পগুলি চালিত করার জন্য আরও উপাদানের প্রয়োজন হয়।
এছাড়াও আমাদের গাইড সঙ্গে পরামর্শ করতে দ্বিধা করবেন না ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.
কিন্তু ইতিমধ্যে, আপনার বিভিন্ন সামাজিক নেটওয়ার্কে এই নিবন্ধটি ভাগ করুন.
...