ডিভিতে কীভাবে গ্রেডিয়েন্ট ব্লেন্ডেড প্যারালাক্স ইমেজ পটভূমি তৈরি করবেন

Rifat Divi Tutorials Aug 31, 2022

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

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

ডিজাইন প্রিভিউ

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

এটি একটি গ্রেডিয়েন্ট ওভারলে এবং ব্যাকগ্রাউন্ড ইমেজে কালার ব্লেন্ড মোড সহ ট্রু প্যারালাক্স পদ্ধতি ব্যবহার করে।

আশ্চর্যজনক ওয়েবসাইট তৈরি করুন

সেরা বিনামূল্যে পৃষ্ঠা নির্মাতা Elementor সঙ্গে

এখুনি শুরু করুন

ডিভিতে একটি গ্রেডিয়েন্ট ব্লেন্ডেড প্যারালাক্স ইমেজ পটভূমি তৈরি করুন

ফিল-ইন সারি এবং শিরোনাম পাঠ্য তৈরি করুন

যদিও আমরা এই পাঠের জন্য সেকশন ব্যাকড্রপ ডিজাইনের উপর ফোকাস করব, তবে একটি সাধারণ ব্যবহারের ক্ষেত্রে ডিজাইনটি কেমন হবে তা আরও ভালভাবে বোঝার জন্য একটি ফিল-ইন সারি এবং হেডার অন্তর্ভুক্ত করা দরকারী।

শুরু করতে, নির্মাতার বিদ্যমান বিভাগে একটি এক-কলাম সারি যোগ করুন।

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

টেক্সট সেটিংস

টেক্সট মডিউলের সেটিংস খুলুন। বিষয়বস্তু ট্যাবের অধীনে বডি কন্টেন্টে একটি H2 হেডার যোগ করুন।

<h2>Say Hello to Divi</h2>

ডিজাইন ট্যাবের অধীনে শিরোনাম সেটিংস এবং সর্বাধিক প্রস্থ আপডেট করুন:

  • শিরোনাম 2 ফন্ট: ইন্টার
  • শিরোনাম 2 ফন্ট ওজন: গাঢ়
  • শিরোনাম 2 পাঠ্যের রঙ: #fff
  • শিরোনাম 2 পাঠ্যের আকার: 8vw
  • শিরোনাম 2 লাইন উচ্চতা: 1.2em
  • শিরোনাম 2 পাঠ্য ছায়া: স্ক্রিনশট দেখুন
  • শিরোনাম 2 টেক্সট শ্যাডো ব্লার স্ট্রেন্থ: 0.28em
  • শিরোনাম 2 পাঠ্য ছায়ার রঙ: #10076d
  • সর্বোচ্চ প্রস্থ: 50%

সারি সেটিংস

এখন সারির আকার এবং ব্যবধান পরিবর্তন করা যাক যে শিরোনামটি এটিকে আরও প্রতিক্রিয়াশীল করতে স্থানটিতে রয়েছে।

সারি সেটিংসে নেভিগেট করুন। ডিজাইন ট্যাবের অধীনে নিম্নলিখিত আপডেট করুন:

  • প্রস্থ: 100%
  • সর্বোচ্চ প্রস্থ: 80vw

এছাড়াও, সারিতে কিছু প্যাডিং যোগ করুন।

  • প্যাডিং: 15vw উপরে, 15vw নীচে

বিভাগের জন্য গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড ডিজাইন করুন

ফিল-ইন বিষয়বস্তু সম্পূর্ণ হওয়ায় আমরা এখন আমাদের বিভাগ গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড তৈরি করা শুরু করতে পারি। বিভাগের সেটিংস খুলুন। বিষয়বস্তু ট্যাবের অধীনে ব্যাকড্রপ পছন্দগুলির অধীনে গ্রেডিয়েন্ট ট্যাবটি নির্বাচন করুন এবং নিম্নরূপ গ্রেডিয়েন্ট বিকল্পগুলি সম্পাদনা করুন:

  • গ্রেডিয়েন্ট স্টপ 1: #0094ff (0% এ)
  • গ্রেডিয়েন্ট স্টপ 2: #ff00c7 (25% এ)
  • গ্রেডিয়েন্ট স্টপ 3: #0094ff (50% এ)
  • গ্রেডিয়েন্ট স্টপ 4: #ff00c7 (75% এ)
  • গ্রেডিয়েন্ট স্টপ 5: #0094ff (100% এ)
  • গ্রেডিয়েন্ট টাইপ: সার্কুলার
  • গ্রেডিয়েন্ট অবস্থান: নীচে বাম
  • পটভূমি চিত্রের উপরে গ্রেডিয়েন্ট রাখুন: হ্যাঁ

কালার ব্লেন্ড মোড সহ প্যারালাক্স ব্যাকগ্রাউন্ড ইমেজ

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

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

  • প্যারালাক্স ইফেক্ট ব্যবহার করুন: হ্যাঁ
  • প্যারালাক্স পদ্ধতি: সত্য প্যারালাক্স
  • ব্যাকগ্রাউন্ড ইমেজ ব্লেন্ড: কালার

কালার ব্লেন্ড মোড ইমেজের একটি গ্রেস্কেল ভার্সনকে গ্রেডিয়েন্টের রঙের (হিউ এবং স্যাচুরেশন) সাথে একত্রিত করে। এটি একটি সম্পূর্ণ নতুন রঙের স্কিম প্রবর্তন করার সময় ছবিটির ভিজ্যুয়াল গুণমান বজায় রাখে।

ব্যাকগ্রাউন্ড মাস্ক সেটিংস

বিভাগের পটভূমি সেটিংসে থাকাকালীন ব্যাকগ্রাউন্ড মাস্ক ট্যাবটি নির্বাচন করুন এবং নিম্নলিখিতগুলি পরিবর্তন করুন:

  • মুখোশ: ব্লেড
  • মুখোশ রূপান্তর: অনুভূমিক উল্টানো, উল্টানো
  • মাস্ক সাইজ: কাস্টম সাইজ
  • মাস্ক প্রস্থ: 72vw
  • মুখোশের অবস্থান: উপরের ডানদিকে

কিছু অস্থায়ী স্ক্রোলিং স্থান যোগ করুন

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

  • মার্জিন: 80vh উপরে, 80vh নীচে

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

এখন দেখুন, লাইভ পেজে এটি কেমন দেখায়।

চূড়ান্ত শব্দ

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

Divi WordPress Theme