কীভাবে এলিমেন্টরে মাল্টিকালার গ্রেডিয়েন্ট বোতাম তৈরি করবেন

আপনি কি এলিমেন্টরে একটি বহু রঙের গ্রেডিয়েন্ট বোতাম তৈরি করতে চান?

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

আপনার বোতামে একটি বহু রঙের গ্রেডিয়েন্ট যোগ করলে আপনার বোতামটি আকর্ষণীয় হয়ে উঠতে পারে এবং একটি প্রাকৃতিক অনুভূতি পেতে পারে। আপনি হয়তো ভাবছেন, "আপনার ওয়েবসাইটে কি বহু রঙের গ্রেডিয়েন্ট বোতাম তৈরি করা সম্ভব?"। আচ্ছা, এলিমেন্টরের সাহায্যে সবকিছুই সম্ভব এবং আপনি সহজেই একটি বহু রঙের গ্রেডিয়েন্ট বোতাম তৈরি করতে পারেন।

কীভাবে এলিমেন্টরে মাল্টিকালার গ্রেডিয়েন্ট বোতাম তৈরি করবেন

টিউটোরিয়াল শুরু করার আগে, আমরা আপনাকে জানাতে চাই যে এই টিউটোরিয়ালটি কাস্টম CSS এর সাথে কাজ করবে। কাস্টম CSS বৈশিষ্ট্য শুধুমাত্র উপলব্ধ এলিমেন্টোর প্রো; তাই প্রো সংস্করণে আপগ্রেড করতে ভুলবেন না।

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

উইজেট সেটিংসে, ট্যাবে নেভিগেট করুন অগ্রসর -> কাস্টম সিএসএস. নিচের CSS স্নিপেটটি কপি করুন, তারপর কাস্টম CSS ক্ষেত্রে পেস্ট করুন।

selector .elementor-button {
  background: linear-gradient(121.28deg, #A4006C 0%, #FFECA8 100%), linear-gradient(121.28deg, #69003F 0%, #FFF8F8 100%), linear-gradient(238.72deg, #00FFFF 0%, #0212A4 100%), radial-gradient(67.16% 100% at 50% 0%, #FF00B8 0%, #FFFFFF 100%), linear-gradient(140.54deg, #7000FF 0%, #001AFF 72.37%), linear-gradient(307.43deg, #FFE927 0%, #00114D 100%), radial-gradient(107% 142.8% at 15.71% 104.5%, #FFFFFF 0%, #A7AA00 100%), #FFFFFF;
background-blend-mode: overlay, difference, difference, overlay, difference, difference, difference, normal;
}

আপনি যদি মাল্টিকালার গ্রেডিয়েন্টের সাথে সন্তুষ্ট হন যা প্রয়োগ করা হয়েছে (উপরের চিত্রের মতো), আপনি এটিকে সেভাবেই রাখতে পারেন এবং আপনি চাইলে আপনার প্রকল্পটি সংরক্ষণ করতে পারেন। কিন্তু, আপনি যদি এটি কাস্টমাইজ করতে চান, আপনি CSS ঘোষণা ব্লকে আরও নির্দিষ্টভাবে CSS স্নিপেট পরিবর্তন করে তা করতে পারেন।

CSS ঘোষণা ব্লক একটি খোলার বন্ধনী দিয়ে শুরু হয় ( {'' ) এবং ক্লোজিং ডান ব্রেস ('') দিয়ে শেষ হয়} ).

ডিক্লারেশন ব্লক অর্জন করতে, আপনি CSS গ্রেডিয়েন্ট ইনলাইন টুল ব্যবহার করে একটি গ্রেডিয়েন্ট তৈরি করতে পারেন। এখানে ক্লিক করুন কিছু CSS গ্রেডিয়েন্ট টুল দেখতে। গ্রেডিয়েন্ট তৈরি করা শেষ হলে, CSS কপি করুন এবং CSS পেস্ট করে বিদ্যমান ডিক্লারেশন ব্লকটি নতুন দিয়ে প্রতিস্থাপন করুন।

Remarque: আপনি এটিও করতে পারেন এলিমেন্টরে গ্রেডিয়েন্ট শিরোনাম তৈরি করুন .

এলিমেন্টর প্রো এখনই পান!!!

উপসংহার

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

এক রঙের বা দুই রঙের বোতাম দেখতে সহজ এবং বিরক্তিকর হতে পারে। কিন্তু আপনার বোতামে বহু রঙের গ্রেডিয়েন্ট তৈরি করার বিষয়ে সতর্ক থাকুন। অনুগ্রহ করে আপনার ব্যবহার করা টোন এবং রঙের মিশ্রণের দিকে মনোযোগ দিন যাতে আপনার বোতামগুলি অদ্ভুত এবং বিরক্তিকর না দেখায়।

এখানে ! এটি এই নিবন্ধের জন্য যা আপনাকে দেখায় যে এলিমেন্টরে মাল্টিকালার গ্রেডিয়েন্ট বোতাম তৈরি করুন. কিভাবে সেখানে যেতে হবে সে সম্পর্কে আপনার কোন উদ্বেগ থাকলে আমাদের জানান commentaires.

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

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

...