আপনি কি আপনার বৈশিষ্ট্য বা পণ্যগুলিকে হোভার এফেক্ট সহ একটি ডিভি ট্যাব হিসাবে প্রদর্শন করতে চান?
আপনি কি আপনার ওয়েব পৃষ্ঠাগুলিতে বৈশিষ্ট্য এবং/অথবা পণ্যগুলি প্রদর্শন করার জন্য নতুন সৃজনশীল উপায় খুঁজছেন?
যদি তাই হয়, তাহলে পড়তে থাকুন কারণ এই প্রবন্ধে, আমরা আপনাকে দেখাবো কিভাবে শুধুমাত্র Divi-এর অন্তর্নির্মিত বিকল্পগুলি ব্যবহার করে hover-এ ট্যাবগুলিতে বৈশিষ্ট্যগুলি প্রদর্শন করতে হয়। এই পদ্ধতির সাথে আপনার সম্ভাবনাগুলি অফুরন্ত, এবং তারা অবশ্যই আপনাকে Divi কে আরও গভীরভাবে বুঝতে সাহায্য করবে।
ট্যাব হোভার প্রভাব শুধুমাত্র ডেস্কটপে ঘটবে। ছোট পর্দার আকারে, তারা তাদের স্বাভাবিক আকারে প্রদর্শিত হবে।
চল যাই!
জরিপ
এই টিউটোরিয়ালে ডাইভিং করার আগে, আসুন আমরা যে ফলাফল অর্জন করতে চাই তা দেখে নেওয়া যাক।
চলুন Divi দিয়ে সৃষ্টি প্রক্রিয়া শুরু করি
একটি নতুন অধ্যায় যোগ করুন
গ্রেডিয়েন্ট পটভূমি
একটি নতুন পৃষ্ঠা যোগ করুন বা একটি বিদ্যমান পৃষ্ঠা খুলুন এবং একটি নতুন বিভাগ যোগ করুন। বিভাগ সেটিংস খুলুন এবং বিভাগে একটি গ্রেডিয়েন্ট পটভূমি যোগ করুন।
- বাম রঙ: #f2f2f2
- ডান রঙ: #ffffff
- গ্রেডিয়েন্ট দিক: 87 ডিগ্রী
- বাম অবস্থান: 20%
- সঠিক অবস্থান: 80%
ব্যবধান
পরবর্তী, নিম্নলিখিত ব্যবধান সেটিংস পরিবর্তন করুন:
- প্যাডিং (শীর্ষ এবং নীচে): 0px
একটি নতুন লাইন যোগ করুন
কলাম গঠন
নিম্নলিখিত কলাম কাঠামো ব্যবহার করে বিভাগে একটি নতুন সারি যোগ করে চালিয়ে যান:
পেছনের রঙ
এখনও কোনো মডিউল যোগ না করে, সারি সেটিংস খুলুন এবং পটভূমির রঙ পরিবর্তন করুন।
- পটভূমির রঙ: #ffffff
সাইজিং এবং সারিবদ্ধকরণ
ট্যাবে নকশা, বিকল্পটি টানুন মাপবদল এবং নিম্নলিখিত সেটিংস পরিবর্তন করুন:
- কাস্টম গটার প্রস্থ ব্যবহার করুন: হ্যাঁ
- নর্দমার প্রস্থ: 1
- প্রস্থ: 400px
- সারি সারিবদ্ধকরণ: বাম
হোভার সাইজিং
বিকল্প পরিবর্তন করুন প্রস্থ হোভার সাইজিং সেটিংসে। এটি হোভার করার সময় লাইনটিকে প্রসারিত করার অনুমতি দেবে।
- প্রস্থ (হোভার): 2 পিক্সেল
ব্যবধান
তারপর অপশনে স্পেসিং সেটিংসে যান ব্যবধান
- প্যাডিং (শীর্ষ এবং নীচে): 0px
সীমানা (ডেস্কটপ)
লাইনের উপরের ডানদিকে '20px' যোগ করুন এবং লাইনে একটি বাম সীমানা যোগ করুন।
- গোলাকার কোণ (ডেস্কটপ): 20px (উপরের ডান কোণ)
- বাম সীমানা প্রস্থ: 20px
- বাম সীমানার রঙ: #6d44ff
হোভার উপর সীমানা
পরিবর্তে '20px' যোগ করে হোভারে '0px'-এর উপরের ডানদিকে গোলাকার কোণটি সরান।
বক্স শ্যাডো (ডেস্কটপ)
অবশেষে, একটি সূক্ষ্ম ছায়া যোগ করুন।
- বক্স শ্যাডো ব্লার শক্তি: 80px
- বক্স শ্যাডো স্প্রেড স্ট্রেন্থ: -10px
- ছায়ার রঙ: rgba(0,0,0,0.11)
হোভার শ্যাডো
এবং হোভারে ছায়ার রঙ সম্পূর্ণ স্বচ্ছ রঙে পরিবর্তন করুন।
- বক্স শ্যাডো: rgba(255,255,255,0)
সারিতে ব্লার্ব মডিউল যোগ করুন
কন্টেন্ট যোগ করুন
এখন যেহেতু আমরা সমস্ত সারি সেটিংস পরিবর্তন করে ফেলেছি, আমরা এগিয়ে যেতে পারি এবং কলামে একটি ব্লার্ব মডিউল যোগ করতে পারি। আপনার পছন্দের অন্য কোন মডিউল ব্যবহার করতে দ্বিধা বোধ করুন।
একবার আপনি মডিউল যোগ করলে, আপনার পছন্দের বিষয়বস্তু যোগ করুন।
আইকনটি নির্বাচন করুন
তারপর আপনার পছন্দের একটি আইকন নির্বাচন করুন।
আইকন সেটিংস
এবং আইকন সেটিংসে আইকনের চেহারা পরিবর্তন করুন। ট্যাবে যান নকশা
- আইকনের রঙ: #5323ff
- ছবি/আইকন বসানো: শীর্ষ
- ছবি/আইকন প্রস্থ: 50px
পাঠ্য শিরোনাম সেটিংস (ডেস্কটপ)
তারপর শিরোনাম সেটিংস পরিবর্তন করুন।
- শিরোনাম ফন্ট: Poppins
- পাঠ্য প্রান্তিককরণ: কেন্দ্রীভূত
- শিরোনাম পাঠ্যের রঙ: #5323ff
- শিরোনাম পাঠ্যের আকার: 25px
- অক্ষর ব্যবধান: -1px
- লাইনের উচ্চতা: 1 এম
টেক্সট শিরোনাম সেটিংস হোভার করুন
এবং হোভারে শিরোনাম সারির উচ্চতা পরিবর্তন করুন।
- শিরোনাম লাইন উচ্চতা: 1,5 এম
বডি টেক্সট সেটিংস (ডেস্কটপ)
এরপরে, বডি টেক্সট সেটিংসে যান এবং কিছু পরিবর্তন করুন। এর মধ্যে পাঠ্যের আকার '0px'-এ পরিবর্তন করা অন্তর্ভুক্ত। এটি আমাদেরকে শুধুমাত্র হোভারে বডি টেক্সট দেখাতে সাহায্য করবে।
- বডি ফন্ট: পপিনস
- শরীরের হরফ ওজন: হালকা
- পাঠ্য প্রান্তিককরণ: কেন্দ্রীভূত
- বডি টেক্সটের রঙ: #000000
- বডি টেক্সট সাইজ: 0px (ডেস্কটপ), 15px (ট্যাবলেট এবং ফোন)
- লাইনের উচ্চতা: 2,2 এম
হোভারে বডি টেক্সট সেটিংস
হোভারে বডি টেক্সট দেখা যাচ্ছে তা নিশ্চিত করতে, হোভার টেক্সট সাইজ পরিবর্তন করুন।
- বডি টেক্সট সাইজ: 15px
ব্যবধান (ডেস্কটপ)
মডিউলটিকে কিছু স্থান দিতে, আমরা নিম্নলিখিত ব্যবধানের পরামিতিগুলি পরিবর্তন করি:
- প্যাডিং (শীর্ষ এবং নীচে): 80px
হোভার স্পেসিং
আমরা হোভার স্পেসিং সেটিংস পরিবর্তন করতে যাচ্ছি।
- প্যাডিং (শীর্ষ এবং নীচে): 80px
- প্যাডিং (বাম এবং ডান): 20vw
ক্লোন সারি 3 বার
একবার আপনি প্রথম সারি এবং এর ব্লার্ব মডিউল সম্পাদনা করার পরে, আপনি এগিয়ে যেতে পারেন এবং যতবার চান সারিটি ক্লোন করতে পারেন।
লাইন এবং ব্লার্ব মডিউল #2 সম্পাদনা করুন
লাইনের সীমানার রঙ পরিবর্তন করুন
লাইনের বাম সীমানার রঙ পরিবর্তন করে শুরু করা যাক।
- বাম সীমানার রঙ: #00ffcc
Blurb বিষয়বস্তু এবং আইকন সম্পাদনা করুন
এরপরে, Blurb মডিউল সেটিংস খুলুন এবং আইকন পরিবর্তন করুন।
ব্লার্ব মডিউল আইকনের রঙ পরিবর্তন করুন
আইকন রঙ সহ।
- আইকনের রঙ: #00eda6
শিরোনামের রঙ পরিবর্তন করুন
এবং শিরোনাম লেখার রঙ।
- শিরোনাম পাঠ্যের রঙ: #00eda6
লাইন এবং Burb #3 মডিউল সম্পাদনা করুন
লাইন বর্ডার রঙ
বাম লাইনের বর্ডার কালার পরিবর্তন করা যাক।
- বাম সীমানার রঙ: #afebff
Blurb বিষয়বস্তু এবং আইকন সম্পাদনা করুন
এর ব্লার্ব আইকন এবং বিষয়বস্তু পরিবর্তন করা যাক.
ব্লার্ব মডিউল আইকনের রঙ পরিবর্তন করুন
এছাড়াও আইকনের রঙ পরিবর্তন করুন।
- আইকনের রঙ: #68d9ff
শিরোনাম পাঠ্যের রঙ পরিবর্তন করুন
এবং শিরোনাম পাঠ্যের রঙও।
- শিরোনাম পাঠ্যের রঙ: #68d9ff
লাইন এবং ব্লার্ব মডিউল #4 সম্পাদনা করুন
লাইনের সীমানার রঙ পরিবর্তন করুন
পরবর্তী এবং শেষ মডিউলে, লাইনের বাম সীমানার রঙও পরিবর্তন করুন।
- বাম সীমানার রঙ: #dd87cf
Blurb বিষয়বস্তু এবং আইকন সম্পাদনা করুন
Blurb মডিউল ইনলাইন খুলুন এবং মডিউল আইকন এবং বিষয়বস্তু সম্পাদনা করুন।
ব্লার্ব মডিউল আইকনের রঙ পরিবর্তন করুন
আইকন রঙ সহ।
- আইকনের রঙ: #dd6aca
শিরোনাম পাঠ্যের রঙ পরিবর্তন করুন
এবং শিরোনাম পাঠ্যের রঙও।
- শিরোনাম পাঠ্যের রঙ: #dd6aca
জরিপ
এখন যেহেতু আমরা টিউটোরিয়ালটি দেখেছি, আসুন ফলাফলটি শেষ দেখে নেওয়া যাক।
এখনই ডিভিআই ডাউনলোড করুন!!!
উপসংহার
এই নিবন্ধে, আমরা আপনাকে দেখিয়েছি কিভাবে ডিভির অন্তর্নির্মিত বিকল্পগুলি ব্যবহার করতে হয় শুধুমাত্র হোভারে উপলব্ধ ট্যাব তৈরি করতে।
এই পদ্ধতিটি আপনাকে বৈশিষ্ট্য বা পণ্য সম্পর্কে ইন্টারেক্টিভভাবে বিষয়বস্তু শেয়ার করতে সাহায্য করবে।
আমরা আশা করি এই টিউটোরিয়ালটি আপনাকে আপনার পরবর্তী ডিভি প্রকল্পগুলির জন্য অনুপ্রাণিত করবে। আপনার যদি কোন উদ্বেগ বা পরামর্শ থাকে, তাহলে আমাদের খুঁজুন মন্তব্য বিভাগ এটি আলোচনা করার জন্য।
আপনিও পরামর্শ করতে পারেন আমাদের সংস্থান, আপনার যদি ইন্টারনেট সাইট তৈরির প্রকল্পগুলি পরিচালনা করতে আরও উপাদানগুলির প্রয়োজন হয়, তবে আমাদের গাইডের সাথে পরামর্শ করে ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.
কিন্তু ইতিমধ্যে, আপনার বিভিন্ন সামাজিক নেটওয়ার্কে এই নিবন্ধটি ভাগ করুন.
...