কাস্টম আইকন তৈরি করতে Divi Icon মডিউল কীভাবে ব্যবহার করবেন তা জানতে চান?
আইকন বোতামগুলি ওয়েব ডিজাইনের জগতে একটি প্রধান জিনিস হয়ে উঠেছে। আইকনগুলি অ্যাকশনের জন্য সংক্ষিপ্ত ভিজ্যুয়াল কল সরবরাহ করে যা মোবাইল ডিভাইসের জন্য দুর্দান্ত কাজ করে কারণ তারা বেশি জায়গা নেয় না। এগুলি টগল বা পপআপ বোতাম হিসাবে ভাল কাজ করে যা ব্যবহারকারীরা পাঠ্যের প্রয়োজন ছাড়াই স্বজ্ঞাতভাবে চিনতে পারে।
আজকের টিউটোরিয়ালে আমরা আপনাকে দেখাব কিভাবে আইকন বোতাম ডিজাইন করতে হয় Divi। Divi তে একটি আইকন বোতাম তৈরি করা বেশ সহজ এবং মজাদার।
আইকন মডিউল ব্যবহার করে, আমরা শত শত আইকন থেকে বেছে নিতে পারি এবং ডিভি বিল্ডারের অগণিত বিল্ট-ইন ডিজাইনের বিকল্পগুলি ব্যবহার করতে পারি যা আপনি ভাবতে পারেন এমন যেকোনো ধরনের আইকন বোতাম তৈরি করতে।
আমরা আশা করি এই নিবন্ধটি আপনাকে আপনার পরবর্তী প্রকল্পের জন্য আশ্চর্যজনক আইকন বোতাম তৈরি করতে সাহায্য করবে।
এর শুরু করা যাক!
জরিপ
এই টিউটোরিয়ালে আমরা যে আইকন বোতামগুলি তৈরি করব তার একটি দ্রুত ওভারভিউ এখানে।
ডিভি বিল্ডারের সাথে একটি নতুন পৃষ্ঠা তৈরি করুন
আরো দেখুন: ডিভি: "ফুল প্রস্থ মেনু" মডিউলের ঝুড়ি এবং অনুসন্ধান আইকনগুলি কীভাবে কাস্টমাইজ করবেন
ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে, যান পৃষ্ঠাগুলি> নতুন যুক্ত করুন একটি নতুন পৃষ্ঠা তৈরি করতে।
এটিকে একটি শিরোনাম দিন যা আপনার কাছে বোধগম্য হয় এবং ক্লিক করুন Divi বিল্ডার ব্যবহার করুন
তারপর ক্লিক করুন বিল্ডিং শুরু করুন (স্ক্র্যাচ থেকে বিল্ড)
এর পরে, ডিভিতে ডিজাইনিং শুরু করার জন্য আপনার কাছে একটি ফাঁকা ক্যানভাস থাকবে।
Divi আইকন মডিউল দিয়ে আইকন বোতাম তৈরি করুন
পার্ট 1: একটি আইকন বোতাম তৈরি করা
শুরু করতে, ডিফল্ট নিয়মিত বিভাগে একটি এক-কলাম সারি যোগ করা যাক।
তারপর একটি নতুন মডিউল যোগ করুন আইকন কলামে
আইকন, লিঙ্ক URL এবং পটভূমির রঙ
ট্যাবের নীচে সন্তুষ্ট আইকন মডিউল সেটিংস, নিম্নলিখিত আপডেট করুন:
- আইকন: ডান তীর (স্ক্রিনশট দেখুন)
- আইকন লিঙ্ক URL: # (এখন শুধু একটি ফিলার)
- পটভূমি: #3e22ff
সীমানা এবং সীমানা ব্যাসার্ধ
ট্যাবের নীচে নকশা, নিম্নলিখিত আপডেট করুন:
- গোলাকার কোণ: 10px
- সীমানা প্রস্থ: 2px
- সীমানার রঙ: #7272ff
ছায়া বাক্স
- বক্স শ্যাডো: স্ক্রিনশট দেখুন
- ছায়ার রঙ: rgba(62,34,255,0.48)
আইকন বোতামের আকারের সাথে ক্লিকযোগ্য স্থানের মিল
বর্তমানে, আইকন মডিউলটি মূল কন্টেইনার (বা কলাম) এর সম্পূর্ণ প্রস্থ জুড়ে থাকবে। এর অর্থ হল ক্লিকযোগ্য স্থান প্রকৃত আইকন বোতামের চেয়ে বড়।
আইকন বোতামের আকারের সাথে ক্লিকযোগ্য স্থান মেলাতে, আমরা মডিউলটিকে সর্বাধিক প্রস্থ দিতে পারি যা আইকন বোতামের প্রস্থের সমান।
এই উদাহরণে, বোতামটির মোট প্রস্থ হল 94 পিক্সেল।
উন্নত ট্যাবের অধীনে, প্রধান উপাদানে নিম্নলিখিত কাস্টম CSS যোগ করুন:
max-width: 94px
এখানে ফলাফল.
পার্ট 2: একটি বর্গাকার আইকন বোতাম তৈরি করুন
আমাদের বর্গাকার আইকন বোতাম তৈরি করতে, আমাদের তৈরি করা প্রথম আইকন বোতামটি সম্বলিত সারিটি নকল করুন। এটি আমাদের সাথে কাজ করার জন্য সারিতে একটি ডুপ্লিকেট বোতাম দেবে।
আইকনটিকে কেন্দ্রে রেখে একই উচ্চতা এবং প্রস্থ দিন
আইকন মডিউলে ব্যবহার করার জন্য উপলব্ধ আইকনগুলির বৃহৎ সংগ্রহের মধ্যে Divi আইকন এবং Fontawesome আইকন উভয়ই রয়েছে। যাইহোক, সমস্ত আইকনের উচ্চতা এবং প্রস্থ একই হবে না। এটি আইকন বোতামের সঠিক প্রস্থ এবং উচ্চতা নির্ধারণ করা একটু বেশি কঠিন করে তোলে।
একটি নিখুঁতভাবে বর্গাকার বোতাম তৈরি করতে যা হোভারে আইকনটিকে নিযুক্ত করে, আমরা আইকনের জন্য একটি উচ্চতা এবং প্রস্থ সেট করার পাশাপাশি CSS ফ্লেক্স বৈশিষ্ট্য ব্যবহার করে আইকনটিকে কেন্দ্রীভূত করতে কাস্টম CSS যোগ করতে পারি।
এখানে কিভাবে।
প্রথমে ডুপ্লিকেট আইকন সেটিংস খুলুন। তারপর আইকন পিকার থেকে একটি নতুন দিয়ে আইকনটি আপডেট করুন।
আইকন মডিউল থেকে প্যাডিং সরান। এটি প্রয়োজনীয় হবে না যেহেতু আমরা আইকনের জন্য একটি উচ্চতা এবং একটি প্রস্থ সেট করতে যাচ্ছি।
উন্নত ট্যাবের অধীনে, নিম্নলিখিত কাস্টম CSS যোগ করুন আইকন উপাদান :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
এখন আইকন বোতামটির উচ্চতা এবং প্রস্থ 90 পিক্সেলের সমান হবে, এটি একটি নিখুঁত বর্গক্ষেত্র তৈরি করবে। এছাড়াও, ফ্লেক্স সম্পত্তি মডিউলের কেন্দ্রে আইকনটিকে সারিবদ্ধ করে। এটি আপনাকে সহজেই আইকন মডিউলে আইকনের আকার আপডেট করতে দেয়।
এই বোতামটি সম্পূর্ণ করতে, আসুন এটিকে একটি পটভূমি গ্রেডিয়েন্ট এবং একটি সাদা বর্ডার রঙ নিম্নরূপ দিন:
- গ্রেডিয়েন্ট স্টপস:
- 0%: #3e22ff
- 100%: #ff2000
- সীমানার রঙ: #fff
এখানেই চূড়ান্ত ফলাফল।
বৃত্তাকার আইকন বোতাম তৈরি করুন
একবার আইকন বোতামটি একটি নিখুঁত বর্গক্ষেত্র হয়ে গেলে, এটিকে বৃত্তাকার করা সহজ। কিন্তু আপনাকে এই সহজ কৌশলটি দেখানোর আগে, আমাদের বৃত্তাকার আইকন বোতাম তৈরি করতে আগের লাইনটি নকল করা যাক।
এখন আমাদের নতুন ডুপ্লিকেট আইকনের জন্য এবং ট্যাবের নিচে সেটিংস খুলুন নকশা, নিম্নরূপ সীমানা ব্যাসার্ধ (বা গোলাকার কোণগুলি) আপডেট করুন:
- গোলাকার কোণ: ৫০%
এবং ঠিক যে মত, আমরা একটি বৃত্তাকার আইকন বোতাম আছে!
ডিজাইনটি কিছুটা পরিবর্তন করতে, আসুন আইকন মডিউলটিকে একটি ভিন্ন আইকন এবং পটভূমির রঙ নিম্নরূপ দেওয়া যাক:
- আইকন: স্ক্রিনশট দেখুন
- পটভূমি: #121212
এখানে ফলাফল.
একটি আইকন বোতাম অনুভূমিক মেনু তৈরি করুন
একটি জনপ্রিয় প্রবণতা হল একটি আইকন মেনু তৈরি করতে আইকন ব্যবহার করা যা সাধারণত পাশাপাশি রাখা বেশ কয়েকটি বোতাম থাকে। এটি করার জন্য, আমরা ফ্লেক্স সম্পত্তি ব্যবহার করতে পারি।
এখানে কিভাবে এটা করা হয়।
প্রথমে, পৃষ্ঠার একটি কলামে একটি নতুন সারি যোগ করুন।
লাইন সেটিংস খুলুন এবং নর্দমার প্রস্থ 1 এ আপডেট করুন।
- নর্দমার প্রস্থ: 1
এরপর, সারির ভিতরে কলাম সেটিংস খুলুন এবং প্রধান কলাম উপাদানে নিম্নলিখিত কাস্টম CSS যোগ করুন:
display:flex;
align-items:center;
একটি নতুন মডিউল যোগ করুন আইকন কলামে
ট্যাবের নীচে সন্তুষ্ট আইকন সেটিংস, একটি আইকন নির্বাচন করুন এবং আইকন লিঙ্ক URL যোগ করুন।
ট্যাবের নীচে নকশা, নিম্নলিখিত আপডেট করুন:
- আইকনের রঙ: #3e22ff
- আইকনের আকার: 40px
- মার্জিন (বাম এবং ডান): 10px
- সীমানা প্রস্থ: 2px
- সীমানার রঙ: #3e22ff
মন্তব্য: আমরা পরে আরো যোগ করার পরে মার্জিন সন্নিহিত বোতামগুলির মধ্যে স্থান তৈরি করবে।
ট্যাবের নীচে অগ্রসর, ক্ষেত্রে নিম্নলিখিত কাস্টম CSS যোগ করুন আইকন উপাদান (যেমন আমরা আগে বর্গাকার আইকন বোতামের জন্য করেছি):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
এখন যখনই আমরা নতুন আইকন বোতাম যোগ করি, তারা পাশাপাশি প্রদর্শিত হবে। এটি ব্যাখ্যা করার জন্য, আসুন অনুভূমিক মেনুতে মোট চারটি আইকন বোতাম তৈরি করতে বিদ্যমান আইকন বোতামটিকে তিনবার নকল করি।
এর পরে, আমরা ফিরে যেতে পারি এবং প্রয়োজন অনুসারে আইকনগুলি আপডেট করতে পারি।
এখানে ফলাফল.
আইকন বোতামে হোভার প্রভাব যুক্ত করা হয়েছে
হোভার প্রভাব উল্লেখ না করে আইকন বোতাম ডিজাইন সম্পর্কে কথা বলা কঠিন। তারা উপেক্ষা করতে খুব মজা.
হোভারে পটভূমির রঙ এবং আইকনের রঙ পরিবর্তন করা হচ্ছে
বোতামের রঙ পরিবর্তন করা একটি জনপ্রিয় এবং কার্যকর হোভার প্রভাব। উদাহরণস্বরূপ, যখন ব্যবহারকারী বোতামের উপর ঘোরায় তখন আমরা পটভূমির রঙ এবং আইকনের রঙ একই সাথে পরিবর্তন করতে পারি।
এটি করার জন্য, আইকন মডিউল সেটিংস খুলুন এবং পটভূমির রঙের জন্য হোভার বিকল্পগুলি সক্ষম করুন এবং হোভার অবস্থার জন্য একটি ভিন্ন রঙ চয়ন করুন। তারপর আপনি আইকন জন্য একই করতে পারেন.
এই উদাহরণে, আমরা সাদা থেকে নীল এবং আইকনটি নীল থেকে সাদাতে পটভূমির রঙ পরিবর্তন করি।
হোভারে আইকন পরিবর্তন করুন
আরেকটি হোভার ইফেক্ট যা আপনি পছন্দ করতে পারেন তা হল আইকন সম্পূর্ণভাবে পরিবর্তন করা। এটি করার জন্য, আপনি আইকন সেটিংসে একটি আইকন নির্বাচন করার সময় হোভার স্টেটের জন্য একটি ভিন্ন আইকন বেছে নিতে পারেন।
হোভারে আইকন বোতাম স্কেল
একটি হার্ড-টু-অ্যাগনোর হোভার এফেক্ট হল স্কেলিং হোভার এফেক্ট। এটি আইকন বোতামকে বড় করে বা বড় করে। এই ধরনের হোভার ইফেক্ট যোগ করার সর্বোত্তম উপায় হল Divi-এর রূপান্তর বিকল্পগুলি ব্যবহার করা। এটি চারপাশের উপাদানগুলিকে প্রভাবিত না করে বোতামটিকে বাড়তে দেবে।
আইকন বোতামে একটি স্কেল হোভার প্রভাব যুক্ত করতে, আইকন সেটিংস খুলুন এবং এর ট্যাবের নীচে নকশা, রূপান্তর বিকল্পগুলি সন্ধান করুন৷ হোভার বিকল্পগুলি সক্ষম করুন, তারপরে হোভার অবস্থায় নিম্নলিখিত রূপান্তর স্কেলটি বরাদ্দ করুন:
- রূপান্তর Y: 118%
- ট্রান্সফর্ম এক্স: 118%
এটি আইকন বোতামের আকার 18% বৃদ্ধি করবে যখন ব্যবহারকারী এটির উপর ঘোরায়।
হোভারে আইকন বোতাম ঘোরান
ঘূর্ণায়মান ঘোরানো বস্তু সবসময় একটি মজার মাইক্রো ইন্টারঅ্যাকশন। হোভারে একটি আইকন বোতাম ঘোরাতে, আমরা রূপান্তর ঘোরান বিকল্পটি ব্যবহার করতে পারি। কিন্তু তার আগে, আসুন বোতামটিকে বৃত্তাকার করি যাতে শুধুমাত্র আইকনটি ঘুরতে দেখা যায়।
আইকনটিকে বৃত্তাকার করতে, বোতামটি একটি বর্গাকার অনুমান করে, কেবল চারটি কোণে 50% বৃত্তাকার কোণার সেটিং আপডেট করুন।
তারপরে হোভার অবস্থায় নিম্নলিখিত রূপান্তর ঘূর্ণন মান অন্তর্ভুক্ত করতে রূপান্তর বিকল্পগুলি আপডেট করুন:
- ট্রান্সফর্ম রোটেট Z: 180deg
চলুন এক নজরে দেখে নেওয়া যাক আমাদের 4টি হোভার ইফেক্ট ইন অ্যাকশন।
চূড়ান্ত ফলাফল
আমাদের টিউটোরিয়ালের চূড়ান্ত ফলাফল দেখে নেওয়া যাক।
আরও পড়ুন: Divi: হোভারে একটি "ব্লার্ব" মডিউল কীভাবে হাইলাইট করবেন এবং অন্যগুলিকে ব্লার করবেন
এখানে আমাদের তিনটি আইকন বোতাম রয়েছে (স্ট্যান্ডার্ড, বর্গাকার এবং বৃত্তাকার)।
এবং এখানে হোভার প্রভাব সহ অনুভূমিক আইকন বোতাম মেনু রয়েছে।
এখনই ডিভিআই ডাউনলোড করুন!!!
উপসংহার
ওয়েবসাইটের জন্য আইকন বোতাম ডিজাইন করার পদ্ধতি জানা অত্যন্ত গুরুত্বপূর্ণ। এবং, যেমনটি আমরা এই টিউটোরিয়ালে দেখেছি, Divi-এর ক্ষেত্রে এটি তেমন কঠিন নয়। Divi-এর আইকন মডিউলে অনেকগুলি অন্তর্নির্মিত বিকল্প রয়েছে যা সৃজনশীল আইকন বোতাম ডিজাইনের দরজা খুলে দেয়।
আশা করি এই নিবন্ধের কৌশলগুলি আপনাকে আপনার নিজের আইকন বোতাম ডিজাইনের কিছু জাদু আনলক করতে সাহায্য করবে।
আপনার যদি কোন উদ্বেগ বা পরামর্শ থাকে, তাহলে আমাদের খুঁজুন মন্তব্য বিভাগ এটি আলোচনা করার জন্য।
আপনিও পরামর্শ করতে পারেন আমাদের সংস্থান, আপনার যদি ইন্টারনেট সাইট তৈরির প্রকল্পগুলি পরিচালনা করতে আরও উপাদানগুলির প্রয়োজন হয়, তবে আমাদের গাইডের সাথে পরামর্শ করে ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.
কিন্তু ইতিমধ্যে, আপনার বিভিন্ন সামাজিক নেটওয়ার্কে এই নিবন্ধটি ভাগ করুন.
...