Divi: উপাদানগুলির মধ্যে পটভূমি রূপান্তর কিভাবে তৈরি করা যায়

আপনি কি Divi উপাদানগুলির মধ্যে ব্যাকগ্রাউন্ড ট্রানজিশন তৈরি করতে চান?

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

এটি আপনাকে একটি সৃজনশীল উপায়ে একটি লাইন এবং একটি বিভাগের মধ্যে একটি গ্রেডিয়েন্ট, প্যাটার্ন এবং ব্যাকগ্রাউন্ড মাস্ককে নির্বিঘ্নে স্থানান্তর করতে দেয়।

উদাহরণস্বরূপ, আপনি নকশার সামগ্রিক প্রান্তিককরণ এবং প্রতিসম চেহারা না হারিয়ে বিভিন্ন রঙে একটি প্যাটার্ন বা মাস্ক রূপান্তর করতে পারেন।

এই টিউটোরিয়ালে, আমরা Divi-এর অন্তর্নির্মিত ব্যাকগ্রাউন্ড ডিজাইন বিকল্পগুলি ব্যবহার করব যাতে Divi বিভাগ এবং লাইনের মধ্যে একটি বিরামহীন ব্যাকগ্রাউন্ড ডিজাইন ট্রানজিশন তৈরি করা যায়। এই ডিজাইনের প্রয়োগ এবং বহুমুখিতা অসীম, ডিভির ব্যাকগ্রাউন্ড ডিজাইনের বিকল্পগুলিকে সম্পূর্ণ নতুন স্তরে নিয়ে যাচ্ছে!

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

জরিপ

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

এখানে কিছু অন্যান্য নমুনা ডিজাইন রয়েছে যা মুখোশ এবং ব্যাকগ্রাউন্ড প্যাটার্নে কয়েকটি সাধারণ পরিবর্তনের মাধ্যমে সম্ভব।

ডিভি বিল্ডারের সাথে একটি নতুন পৃষ্ঠা তৈরি করুন

শুরু করার জন্য, আপনাকে নিম্নলিখিতগুলি করতে হবে:

ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে, যান পৃষ্ঠাগুলি> নতুন যুক্ত করুন একটি নতুন পৃষ্ঠা তৈরি করতে।

এটিকে একটি শিরোনাম দিন যা আপনার কাছে বোধগম্য হয় এবং ক্লিক করুন Divi বিল্ডার ব্যবহার করুন

তারপর ক্লিক করুন বিল্ডিং শুরু করুন (স্ক্র্যাচ থেকে বিল্ড)

এর পরে, ডিভিতে ডিজাইনিং শুরু করার জন্য আপনার কাছে একটি ফাঁকা ক্যানভাস থাকবে।

একটি Divi বিভাগ এবং একটি লাইনের মধ্যে পটভূমিতে একটি বিরামবিহীন রূপান্তর তৈরি করা

স্থানধারক সামগ্রী হিসাবে একটি শিরোনাম তৈরি করা

আরও পড়ুন: Divi: কিভাবে লাইন থেকে হোভার ইফেক্ট দিয়ে ট্যাব তৈরি করবেন

আমরা শুরু করার আগে, আমাদের স্থানধারক সামগ্রী হিসাবে একটি শিরোনাম যোগ করতে হবে। শুরু করতে, পৃষ্ঠার ডিফল্ট বিভাগে একটি এক-কলাম সারি যোগ করুন।

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

H1 আকারের পাঠ্য যোগ করুন।

ট্যাবের নীচে নকশা, পছন্দ অনুযায়ী হেডার টেক্সট ডিজাইন আপডেট করুন।

• হরফ: রোবোটো ঘনীভূত
• হরফের ওজন: বোল্ড
• শৈলী: টিটি
• পাঠ্য প্রান্তিককরণ: কেন্দ্রীভূত
• পাঠ্যের রঙ: #000000
• শিরোনাম পাঠ্য আকার: 4vw
• অক্ষর ব্যবধান: 0.1em
• লাইনের উচ্চতা: 1.3em

অধ্যায় পটভূমি নকশা

বিভাগে প্যাডিং যোগ করা হয়েছে

জাল শিরোনামটি জায়গায় হয়ে গেলে, বিভাগ সেটিংস খুলুন এবং নিম্নরূপ ব্যবধান আপডেট করুন:

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

বিভাগে পটভূমি গ্রেডিয়েন্ট যোগ করা হয়েছে

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

• গ্রেডিয়েন্ট স্টপস:
  • 0%: #4f0f75 (0% এ)
  • 25%: #2843c9 (25% এ)
  • 50%: #4ae2e0 (50% এ)
  • 75%: #3881ff (75% এ)
  • 100%: #4f0f75 (100% এ)

বিভাগে একটি পটভূমি প্যাটার্ন যোগ করা হচ্ছে

ট্যাবের নীচে পৃষ্ঠভূমি প্যাটার্ন, নিম্নলিখিত আপডেট করুন:

• প্যাটার্ন: তির্যক স্ট্রাইপ
• প্যাটার্নের রঙ: rgba(79,15,117,0.23)
• রূপান্তর: ঘোরান
• প্যাটার্ন সাইজ: কাস্টম সাইজ
• প্রস্থ: 7vw
• উচ্চতা: 5vw
• প্যাটার্ন পুনরাবৃত্তি মূল: কেন্দ্র

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

বিভাগে একটি ব্যাকগ্রাউন্ড মাস্ক যোগ করা হচ্ছে

ট্যাবের নীচে ব্যাকগ্রাউন্ড মাস্ক, নিম্নলিখিত যোগ করুন:

• ব্যাকগ্রাউন্ড মাস্ক: লেয়ার ব্লব
• মুখোশের রঙ: rgba(0,0,0,0.7)
• মাস্ক প্রস্থ: 100vw
• অবস্থান: কেন্দ্র

দ্রষ্টব্য: প্যাটার্নের মতোই, আমাদের VW দৈর্ঘ্য ইউনিট ব্যবহার করে মাস্কের আকার দিতে হবে। আমাদের মুখোশকে একটি কেন্দ্রীয় অবস্থানও দিতে হবে।

লাইন ব্যাকগ্রাউন্ড ডিজাইন

সারি ব্যাকগ্রাউন্ডে বিভাগের ব্যাকগ্রাউন্ড কপি এবং পেস্ট করুন

লাইন ব্যাকগ্রাউন্ড ডিজাইন প্রসেসকে ত্বরান্বিত করতে, সেকশন ব্যাকগ্রাউন্ড সেটিংস কপি করুন।

তারপর বিদ্যমান লাইনে ব্যাকগ্রাউন্ড পেস্ট করুন।

এই মুহুর্তে আপনি ইতিমধ্যে দেখতে পাচ্ছেন যে কীভাবে পটভূমির প্যাটার্ন এবং লাইনের মুখোশটি বিভাগের পটভূমিতে একটি বিরামবিহীন রূপান্তর করে।

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

VW ব্যবহার করে সারি আকার এবং প্যাডিং সামঞ্জস্য করুন

এর পরে, আমাদের সারিটিকে VW দৈর্ঘ্য ইউনিট ব্যবহার করে একটি কাস্টম প্রস্থ দিতে হবে। নিম্নলিখিত আপডেট করুন:

• প্রস্থ: 75vw
• সর্বোচ্চ প্রস্থ: 75vw

• প্যাডিং (শীর্ষ, নীচে, বাম এবং ডান): 10vw

লাইনে গ্রেডিয়েন্ট স্টপ সামঞ্জস্য করুন

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

ট্যাবের নীচে ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট, আমরা বিভাগ পটভূমি থেকে উত্তরাধিকারসূত্রে পাওয়া তিনটি মধ্যম গ্রেডিয়েন্ট পয়েন্ট রাখব) এবং প্রথম এবং শেষ গ্রেডিয়েন্ট স্টপগুলি সরিয়ে ফেলব।

তারপর প্রথম স্টপ 0% এবং তৃতীয় স্টপ 100% সেট করুন। একবার হয়ে গেলে, আপনার নিম্নলিখিত গ্রেডিয়েন্টগুলি থাকা উচিত।

• গ্রেডিয়েন্ট স্টপ
  • 0%: #2843c9
  • 50%: #4ae2e0
  • 100%: #3881ff

লাইনে বক্সের ছায়া যোগ করুন

নকশাটিকে একটু উত্তোলন করতে এবং পটভূমির বিরামহীন রূপান্তরকে জোর দিতে, আমরা সারিতে একটি বাক্সের ছায়া যোগ করতে পারি।

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

লাইন পটভূমি প্যাটার্ন রঙ সামঞ্জস্য করুন

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

বিকল্পের অধীনে পৃষ্ঠভূমি প্যাটার্ন সারি, নিম্নলিখিত আপডেট করুন:

• প্যাটার্নের রঙ: rgba(255,255,255,0.23)

লাইন পটভূমি মাস্ক রঙ সামঞ্জস্য করুন

আমরা লাইনের জন্য মুখোশের রঙটিও আপডেট করতে পারি যাতে সত্যিই নকশাটিকে আলাদা করে তোলা যায়।

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

• মুখোশের রঙ: #ffffff
• মুখোশ রূপান্তর: উল্টানো

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

চূড়ান্ত ফলাফল দেখুন।

এখন DIVI ডাউনলোড করুন!!!

আরও সম্ভাবনা

এখানে কিছু অন্যান্য নমুনা ডিজাইন রয়েছে যা মুখোশ এবং ব্যাকগ্রাউন্ড প্যাটার্নে কয়েকটি সাধারণ পরিবর্তনের মাধ্যমে সম্ভব।

আরো দেখুন: Divi: কিভাবে আপনার ছবি সুন্দর করতে "গ্রেডিয়েন্ট বিল্ডার" ব্যবহার করবেন

এখন DIVI ডাউনলোড করুন!!!

উপসংহার

Divi-এ বিরামহীন ব্যাকগ্রাউন্ড ডিজাইন ট্রানজিশন তৈরি করার চাবিকাঠি হল এই VW দৈর্ঘ্যের ইউনিটগুলিকে বুদ্ধিমানের সাথে ব্যবহার করা।

প্রথমত, আমাদের একটি সেকশন ব্যাকগ্রাউন্ড ডিজাইন তৈরি করতে হবে যা ব্রাউজার ভিউপোর্টের প্রস্থের সাথে খাপ খায় (পৃষ্ঠায় কেন্দ্রীভূত অবস্থান থেকে)। একবার হয়ে গেলে, আমরা একই এক-লাইন ব্যাকগ্রাউন্ড ডিজাইন ব্যবহার করতে পারি। এর পরে, আমরা একটি আশ্চর্যজনক ডিজাইনের জন্য গ্রেডিয়েন্ট এবং রঙে কিছু পরিবর্তন করেছি।

আশা করি এই কৌশলটি ভবিষ্যতের প্রকল্পগুলির জন্য আরেকটি দরকারী নকশা দক্ষতা যোগ করবে।

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

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

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

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

...