আপনি কি হোভার এফেক্ট সহ আপনার দলের সদস্যদের ডিভিআইয়ের সাথে একটি জীবনী তৈরি করতে চান?
এটা কোন গোপন যে পাতা প্রায় আপনার ওয়েবসাইটে ইন্টারঅ্যাকশন তৈরির জন্য আদর্শ। এই ধরণের পৃষ্ঠাটি ওয়েবসাইটের পিছনে ব্যবসার মানবিক দিকটিও তুলে ধরবে।
আপনি উন্নতি করতে পারেন জিনিস এক অভিজ্ঞতা পৃষ্ঠার প্রায় দলের সদস্যদের একটি বিভাগ প্রদান করা যা আপনার কর্মীদের স্পটলাইটে রাখে।
আরও পড়ুন: Divi: কিভাবে একটি স্বচ্ছ এবং স্টিকি গ্লোবাল হেডার তৈরি করবেন
এই টিউটোরিয়ালে, আমরা আপনাকে ধাপে ধাপে দেখাব কিভাবে এটি করতে হয়। একবার আপনি পদ্ধতিটি বুঝতে পারলে, আপনি এটিকে আপনার নিজের প্রয়োজন অনুসারে কাস্টমাইজ করতে পারেন।
চল যাই!
জরিপ
টিউটোরিয়ালটিতে ডুব দেওয়ার আগে আসুন আমরা বিভিন্ন পর্দার আকারের ফলাফলটি একবার দেখে নিই।
ডেস্কটপ কম্পিউটার
মোবাইল
একটি নতুন অধ্যায় যোগ করুন
ব্যবধান
একটি নতুন পৃষ্ঠা তৈরি করুন বা একটি বিদ্যমান একটি খুলুন এবং নিম্নলিখিত কাস্টম প্যাডিং মানগুলি ব্যবহার করে একটি নতুন বিভাগ যুক্ত করুন:
- অভ্যন্তরীণ মার্জিন (শীর্ষ এবং নীচে): 100px
লাইন # 1 যোগ করুন
কলাম গঠন
একবার আপনি আপনার বিভাগে কাস্টম প্যাডিংগুলি যোগ করার কাজ শেষ করলে, আপনি বিভাগ সেটিংস বন্ধ করতে পারেন এবং একটি একক কলাম ব্যবহার করে একটি নতুন লাইন যোগ করতে পারেন।
একটি পাঠ্য মডিউল যোগ করুন
আপনার পছন্দের H2 আকারের শিরোনাম সহ কলামে একটি পাঠ্য মডিউল যোগ করুন।
H2 পাঠ্য সেটিংস
এর পরে, H2 পাঠ্য সেটিংসে যান এবং কিছু পরিবর্তন করুন।
- হেডার ফন্ট: Cinzel
- হেডার কপি স্টাইল: Tt (ক্যাপচার দেখুন)
- পাঠ্য প্রান্তিককরণ: কেন্দ্রীভূত
- হেডার টেক্সট সাইজ: 70px
একটি বিভাজক মডিউল যোগ করুন
দৃষ্টিপাত
টেক্সট মডিউলের ঠিক নীচে একটি নতুন বিভাজক মডিউল যোগ করে চালিয়ে যান।
- শো ডিভাইডার: হ্যাঁ
বিভাজক রঙ
স্টাইল ট্যাবে যান, রঙের সেটিংস খুলুন এবং সেই অনুযায়ী আপনার বিভাজকের রঙ পরিবর্তন করুন:
- লেবেলের রঙ: #333333
আয়তন-অনুযায়ী বাছাই
তারপরে আমরা ডিভাইডারের আকার কমিয়ে এটিকে কেন্দ্র করব।
- সর্বোচ্চ প্রস্থ: 26%
- পাঠ্য প্রান্তিককরণ: কেন্দ্র
লাইন 2 যোগ করুন
কলাম গঠন
পূর্ববর্তী লাইনের ঠিক নীচে আপনি যুক্ত করেছেন, চালিয়ে যান এবং সমান আকারের তিনটি কলাম ব্যবহার করে একটি নতুন সারি যুক্ত করুন।
আয়তন-অনুযায়ী বাছাই
কোনো মডিউল যোগ না করে, লাইন সেটিংস খুলুন এবং সাইজিং সেটিংসে কিছু পরিবর্তন করুন।
- কাস্টম গাটার প্রস্থ ব্যবহার করুন: হ্যাঁ
- কলাম ব্যবধান: 1
- সর্বাধিক প্রস্থ: 2 পিক্সেল
- কলামের উচ্চতা সমন্বয় করুন: হ্যাঁ
ব্যবধান
এরপরে, স্পেসিং সেটিংসে যান এবং কাস্টম মার্জিন মান যোগ করুন।
- মার্জিন (শীর্ষ এবং নীচে): 50 পিক্সেল
- অভ্যন্তরীণ মার্জিন: (উপর এবং নীচে: 10px), (বাম এবং ডান: 5px)
প্রতিটি কলামের পরামিতি লিখুন এবং নিম্নরূপ অভ্যন্তরীণ মার্জিনের মানগুলিও সংশোধন করুন:
- অভ্যন্তরীণ মার্জিন (বাম এবং ডান): 5px
ছায়া বাক্স
আমরা নিম্নলিখিত সেটিংস সহ এটিতে একটি বক্স শ্যাডো যুক্ত করে আমাদের লাইনটিকে কিছুটা গভীরতাও দিয়ে থাকি:
- বক্স শ্যাডো ব্লার শক্তি: 80px
- বক্স শ্যাডো স্প্রেড শক্তি: -14px
- সাবটাইটেল ফন্টের রঙ: rgba(0,0,0,0.3)
কলাম 1 এ একটি চিত্র মডিউল যোগ করুন
ইমেজ মডিউলে একটি ছবি লোড করুন
এটি মডিউল যোগ করা শুরু করার সময়!
বায়ো হোভার প্রভাব অর্জন করতে, আমাদের মোট দুটি মডিউল প্রয়োজন হবে; একটি চিত্র মডিউল এবং একটি সারাংশ মডিউল।
আরও দেখুন: Divi: লিঙ্ক এবং হোভার ইফেক্ট সহ একটি প্রতিক্রিয়াশীল ইমেজ গ্রিড কিভাবে তৈরি করবেন
ইমেজ মডিউলটিতে আপনি যে দলের সদস্যকে ফিচার করতে চান তার ছবি থাকবে। অন্যদিকে, সারাংশ মডিউলটি নিচের বাম কোণে আইকন এবং হোভারে বায়ো যোগ করতে ব্যবহার করা হবে।
একটি বর্গ আকারের চিত্র ব্যবহার করে প্রথম কলামে একটি চিত্র মডিউল যোগ করুন।
ফিল্টার
আমরা যে নকশা তৈরি করি তা সম্পূর্ণ গ্রেস্কেল। আমাদের ছবিতে এই গ্রেস্কেল যোগ করতে, ফিল্টার সেটিংসে যান এবং সমস্ত স্যাচুরেশন মুছে ফেলুন।
- স্যাচুরেশন: 0%
কলাম 1 এ সারাংশ মডিউল যোগ করুন
কলাম ১-এ Image মডিউলের ঠিক নীচে একটি নতুন Summary মডিউল যোগ করে এগিয়ে যান। শিরোনাম ক্ষেত্রে দলের সদস্যের নাম যোগ করুন এবং বিষয়বস্তু ক্ষেত্রে দলের সদস্য সম্পর্কে কিছু অতিরিক্ত তথ্য লিখুন।
আইকন চয়ন করুন
আমরা পরবর্তী কাজটি করব এমন একটি প্রিমিয়াম আইকন নির্বাচন করা যা দর্শকদের দেখাবে যে এটি কেবল একটি ছবির চেয়েও বেশি কিছু।
ডিফল্ট পটভূমির রঙ
এর পরে, আমরা একটি সম্পূর্ণ স্বচ্ছ ব্যাকগ্রাউন্ড কালার বেছে নেব।
- পটভূমি: rgba (255,255,255,0)
হোভারে পটভূমির রঙ
এবং আমরা হোভার যে রঙ পরিবর্তন করতে যাচ্ছি.
- পটভূমির রঙ: rgba (255,255,255,0.88)
ডিফল্ট আইকন সেটিংস
আমরা এমন একটি দৃশ্যমান আইকন চাই যা দর্শকদের বুঝতে সাহায্য করবে যে তারা এর উপর ঘোরাফেরা করতে পারে। এই ধরণের আইকন পেতে আইকন সেটিংস পরিবর্তন করুন।
- আইকনের রঙ: #ffffff
- ছবি/আইকন পটভূমির রঙ: #000000
- ছবি/আইকন বসানো: বাম
- ছবি/আইকন প্রস্থ: 50px
- ছবি/আইকন গোলাকার আয়তক্ষেত্র: 100px
হোভার আইকন সেটিংস
যাইহোক, আমরা আইকনটি হোভারে উপস্থিত হতে চাই না। তাই আমরা পরিবর্তে একটি সম্পূর্ণ স্বচ্ছ রঙ ব্যবহার করব।
- আইকনের রঙ: rgba (255,255,255,0)
- ছবি/আইকন পটভূমির রঙ: rgba(255,255,255,0)
ডিফল্ট শিরোনাম পাঠ্য সেটিংস
এরপরে, শিরোনাম পাঠ্য সেটিংসে যান এবং কিছু পরিবর্তন করুন।
- ফন্ট শিরোনাম: Cinzel
- সফট লাইট টেক্সট: বোল্ড টেক্সট
- শিরোনাম অনুলিপি শৈলী: Tt
- শিরোনাম পাঠ্যের রঙ: #000000
- শিরোনাম পাঠ্যের আকার: 0px
শিরোনাম সেটিংস হোভার করুন
হোভারে পাঠ্যের আকার পরিবর্তন করুন।
- শিরোনাম পাঠ্যের আকার: 30px
উপস্থাপনা পাঠ্য ডিফল্ট
এছাড়াও ব্লার্ব সেটিংস পরিবর্তন করুন।
- ফন্টের বডি: ওপেন সানস
- বডি টেক্সটের রঙ: #000000
- বডি টেক্সট সাইজ: 0px
বডি টেক্সট হোভার সেটিংস
এবং, আবার, হোভারে বডি টেক্সটের আকার পরিবর্তন করুন।
- বডি টেক্সট সাইজ: 14px
ডিফল্ট ব্যবধান
অবশেষে, আমাদের একটি নেতিবাচক শীর্ষ মার্জিন ব্যবহার করে সারাংশ মডিউল এবং চিত্র মডিউলের মধ্যে একটি ওভারল্যাপ তৈরি করতে হবে।
- শীর্ষ মার্জিন: -3,7 vw (ডেস্কটপ), -9 vw (ট্যাবলেট এবং ফোন)
- নীচের মার্জিন: 1,5 vw (ট্যাবলেট), 2 vw (ফোন)
ঘোরাঘুরি করার সময় ব্যবধান
হোভারে মার্জিন মান পরিবর্তন করুন।
- মার্জিন (শীর্ষ): -11,38 vw
- অভ্যন্তরীণ মার্জিন: (শীর্ষ এবং নীচে: 20px), (ডান: 50px)
ক্লোন কলাম 1 দুবার
আমরা আমাদের প্রথম বায়ো হোভার ইফেক্ট তৈরি করা শেষ করেছি। সময় বাঁচাতে, আমরা সারি প্যারামিটার থেকে দুবার কলাম 1 ক্লোন করতে পারি। প্রথমে অন্য দুটি কলাম মুছুন, তারপর কলাম 1 ক্লোন করতে ডাবল ক্লিক করুন
ক্লোন করা কলামে সামারি মডিউলের ছবি এবং বিষয়বস্তু পরিবর্তন করুন
শেষ করতে ইমেজ মডিউলে ইমেজ এবং সারাংশ মডিউলে বর্ণনা পরিবর্তন করতে ভুলবেন না!
জরিপ
এখন যেহেতু আমরা সমস্ত পদক্ষেপের মধ্য দিয়ে চলেছি, আসুন এটি বিভিন্ন পর্দার আকারে কীভাবে প্রদর্শিত হয় তার একটি চূড়ান্ত নজর দেওয়া যাক।
ডেস্কটপ কম্পিউটার
মোবাইল
এখনই ডিভিআই ডাউনলোড করুন!!!
উপসংহার
এই নিবন্ধে, আমরা আপনাকে দেখিয়েছি কিভাবে শুধুমাত্র ডিভির অন্তর্নির্মিত বিকল্পগুলি ব্যবহার করে দলের সদস্যদের ফটোগুলিতে একটি হোভার প্রভাব তৈরি করতে হয়। আমরা উল্লেখ করেছি ভাল 'সম্পর্কে' পৃষ্ঠাগুলি তৈরি করা কতটা গুরুত্বপূর্ণ, কারণ এটি সবচেয়ে বেশি পরিদর্শন করা ওয়েব পৃষ্ঠাগুলির মধ্যে একটি৷
দলের সদস্যদের ফটোগুলির জন্য হোভার ইফেক্ট ব্যবহার করা শুধুমাত্র আপনার সম্পর্কে পৃষ্ঠাটিকে পরবর্তী স্তরে নিয়ে যাবে না, তবে আপনার দর্শকদের সাথে মিথস্ক্রিয়াও তৈরি করবে৷ আপনার যদি কোন উদ্বেগ বা পরামর্শ থাকে, তাহলে আমাদের খুঁজুন মন্তব্য বিভাগ এটি আলোচনা করার জন্য।
তবে আপনি পরামর্শ নিতে পারেন আমাদের সংস্থান, আপনার যদি ইন্টারনেট সাইট তৈরির প্রকল্পগুলি পরিচালনা করতে আরও উপাদানগুলির প্রয়োজন হয়, তবে আমাদের গাইডের সাথে পরামর্শ করে ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.
কিন্তু ইতিমধ্যে, আপনার বিভিন্ন সামাজিক নেটওয়ার্কে এই নিবন্ধটি ভাগ করুন.
...