Elementor হল একটি শক্তিশালী পৃষ্ঠা নির্মাতা যা ব্যবহারকারীদের সহজেই অত্যাশ্চর্য ওয়েবসাইট তৈরি করতে দেয়। যাইহোক, যারা আরও উন্নত বৈশিষ্ট্য যোগ করতে চান তাদের জন্য, Master Addons হল একটি চমৎকার এক্সটেনশন যা Elementor এর ক্ষমতা বাড়ায়।
এর স্ট্যান্ডআউট বৈশিষ্ট্যগুলির মধ্যে একটি হল ক্রিয়েটিভ বোতাম অ্যাডন, যা আপনাকে মাত্র কয়েকটি ক্লিকে নজরকাড়া, এলিমেন্টর অ্যানিমেটেড বোতাম ডিজাইন করতে দেয়।
এই টিউটোরিয়ালে, আমরা আপনাকে দেখাব কিভাবে ক্রিয়েটিভ বোতাম অ্যাডন ব্যবহার করে অন্যান্য মাস্টার অ্যাডঅন উপাদানগুলির সাথে একত্রে গতিশীল, ইন্টারেক্টিভ বোতাম তৈরি করতে হয়, আপনার ওয়েবসাইটের নান্দনিকতা এবং ব্যবহারকারীর ব্যস্ততা উভয়ই বাড়িয়ে তোলে।
এলিমেন্টর অ্যানিমেটেড বোতামের গুরুত্ব
অ্যানিমেটেড বোতামগুলি কেবল দৃষ্টিকটু নয় বরং ব্যবহারকারীর মিথস্ক্রিয়া বাড়ানো এবং ওয়েবসাইটের কার্যকারিতা উন্নত করতে গুরুত্বপূর্ণ ভূমিকা পালন করে। সূক্ষ্ম নড়াচড়া বা প্রভাব যোগ করার মাধ্যমে, অ্যানিমেটেড বোতামগুলি দর্শকদের মনোযোগ আকর্ষণ করে, তাদের জন্য কী কল টু অ্যাকশন সনাক্ত করা সহজ করে তোলে যা আপনার পুরো ওয়েবসাইট জুড়ে ব্যবহারকারীদের গাইড করে। ব্যবহারকারীর যাত্রা কারুকাজ করার জন্য এগুলি খুবই নিফটি টুল। হাইওয়েতে আপনি যে ভাল আলোকিত রাস্তার চিহ্নগুলির মুখোমুখি হন সেগুলি সম্পর্কে চিন্তা করুন।
সর্বোপরি, এটি ব্যবহারকারীদের গুরুত্বপূর্ণ পৃষ্ঠাগুলিতে গাইড করা, সাইন-আপগুলিকে উত্সাহিত করা বা রূপান্তরগুলিকে উত্সাহিত করা হোক না কেন, এই বোতামগুলি আরও গতিশীল এবং আকর্ষক অভিজ্ঞতা প্রদান করে৷ অ্যানিমেশন ইন্টারঅ্যাক্টিভিটির একটি স্তর যুক্ত করে, ব্যবহারকারীদের ক্লিক করতে, অন্বেষণ করতে এবং পদক্ষেপ নিতে আমন্ত্রণ জানায়, যা শেষ পর্যন্ত ব্যস্ততাকে চালিত করে এবং উচ্চতর রূপান্তর হারের দিকে নিয়ে যেতে পারে।
কিভাবে এলিমেন্টর অ্যানিমেটেড বোতাম তৈরি করবেন
এখন যেহেতু আমরা ওয়েবসাইট ডিজাইনের জন্য এলিমেন্টর অ্যানিমেটেড বোতামগুলির গুরুত্ব জানি, সেগুলি কীভাবে ব্যবহার করে তৈরি করা যায় তা জানতে দিন মাস্টার অ্যাডনস ক্রিয়েটিভ বোতাম অ্যাডঅন:
ধাপ 1: ক্রিয়েটিভ বোতাম অ্যাডন সক্ষম করা
আপনি অ্যানিমেটেড বোতাম তৈরি করা শুরু করার আগে, আপনাকে সক্ষম করতে হবে ক্রিয়েটিভ বোতাম অ্যাডন মাস্টার অ্যাডঅনসে। এখানে কিভাবে:
1। আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ডে নেভিগেট করুন
আপনার ওয়ার্ডপ্রেস অ্যাডমিন ড্যাশবোর্ডে যান।
2। মাস্টার অ্যাডঅন সেটিংস অ্যাক্সেস করুন
সাইডবার থেকে, মাস্টার অ্যাডঅনগুলি খুঁজুন এবং ক্লিক করুন।
3। সৃজনশীল বোতাম সক্ষম করুন
অ্যাডঅন বিভাগে, ক্রিয়েটিভ বোতামগুলি সনাক্ত করুন এবং সেটিংটিকে "On।”" এ টগল করুন
একবার সক্ষম হয়ে গেলে, আপনি অনন্য অ্যানিমেটেড বোতাম তৈরি করতে কাস্টমাইজেশন বিকল্পগুলির একটি পরিসর আনলক করে আপনার এলিমেন্টর সম্পাদকে ক্রিয়েটিভ বোতাম উইজেট ব্যবহার করা শুরু করতে পারেন।
ধাপ 2: আপনার পৃষ্ঠায় একটি সৃজনশীল বোতাম যোগ করা
এখন যেহেতু ক্রিয়েটিভ বোতাম অ্যাডন সক্ষম করা হয়েছে, এটি পৃষ্ঠায় আপনার প্রথম অ্যানিমেটেড বোতাম যোগ করার সময়। এই সহজ পদক্ষেপগুলি অনুসরণ করুন:
1। এলিমেন্টর এডিটর খুলুন
আপনি যেখানে বোতাম যোগ করতে চান সেই পৃষ্ঠা বা পোস্টে নেভিগেট করুন এবং Elementor দিয়ে সম্পাদনা ক্লিক করুন।
2। ক্রিয়েটিভ বোতাম উইজেট টেনে আনুন এবং ফেলে দিন
এলিমেন্টর এডিটরে, বাম প্যানেলে ক্রিয়েটিভ বোতাম উইজেট অনুসন্ধান করুন। এটিকে আপনার পৃষ্ঠার বিভাগে টেনে আনুন যেখানে আপনি বোতামটি প্রদর্শিত হতে চান।
3। সৃজনশীল বোতাম বিকল্পগুলি অন্বেষণ করুন৷
বোতামটি যোগ করা হলে, আপনি বাম হাতের প্যানেলে তিনটি প্রধান ট্যাব দেখতে পাবেন: বিষয়বস্তু, শৈলী এবং উন্নত। এই ট্যাবগুলি আপনাকে বোতামের চেহারা এবং কার্যকারিতার উপর সম্পূর্ণ নিয়ন্ত্রণ দেয়, আপনাকে এটিকে আপনার ডিজাইনের সাথে মেলে কাস্টমাইজ করার অনুমতি দেয়।
এখন আপনি বোতামের সেটিংস কনফিগার করা শুরু করতে প্রস্তুত!
ধাপ 3: বিষয়বস্তু ট্যাব ব্যবহার করে বোতাম সেটিংস কনফিগার করা
দ্য বিষয়বস্তু ট্যাব আপনাকে পাঠ্য থেকে লিঙ্ক এবং আইকন পর্যন্ত আপনার বোতামের প্রয়োজনীয় উপাদানগুলিকে সংজ্ঞায়িত করতে দেয়৷ এটি কীভাবে সেট আপ করবেন তা এখানে:
শৈলী প্রিসেট
বোতাম প্রভাব: স্টাইল প্রিসেটের অধীনে, আপনি 20 টিরও বেশি অ্যানিমেশন প্রভাবের বিস্তৃত বৈচিত্র্য পাবেন যা আপনি আপনার বোতামে প্রয়োগ করতে পারেন। এই প্রভাবগুলি হোভার বা ক্লিকে বোতামটিকে অ্যানিমেট করবে, আপনার ডিজাইনে একটি গতিশীল স্পর্শ যোগ করবে।
বোতাম প্রান্তিককরণ: আপনার লেআউটের মধ্যে নির্বিঘ্নে ফিট করার জন্য আপনার বোতামটি বাম, কেন্দ্রে বা ডানদিকে সারিবদ্ধকরণ চয়ন করুন।
বোতাম নিয়ন্ত্রণ
বোতাম পাঠ্য: বোতামে প্রদর্শিত প্রধান পাঠ্য লিখুন।
বিকল্প বোতাম পাঠ্য: কাস্টমাইজ করুন বিকল্প বোতাম পাঠ্য, ব্যবহারকারীরা বোতামের উপর ঘোরাঘুরি করলে যা প্রদর্শিত হবে। এটি একটি ভিন্ন বার্তা যোগ করার বা হোভারে কল টু অ্যাকশন করার একটি দুর্দান্ত উপায়।
বোতাম লিঙ্ক: আপনার বোতামের জন্য একটি লিঙ্ক সেট করুন। ব্যবহারকারীরা যখন এটিতে ক্লিক করবে তখন আপনার নির্দিষ্ট করা URL-এ পুনঃনির্দেশিত হবে।
একটি আইকন যোগ করুন: আপনি আইকন লাইব্রেরি থেকে একটি নির্বাচন করে বোতামে একটি আইকন যোগ করতে পারেন। আপনার নকশা অনুসারে আইকনের অবস্থান এবং ব্যবধান কাস্টমাইজ করুন।
এই সেটিংস আপনাকে একটি বোতাম তৈরি করার নমনীয়তা প্রদান করে যা কার্যকরী এবং আপনার ওয়েবসাইটের প্রয়োজন অনুসারে তৈরি।
ধাপ 4: স্টাইল ট্যাবের সাথে বোতামের চেহারা কাস্টমাইজ করা
দ্য শৈলী ট্যাব আপনার বোতামের চেহারা ব্যক্তিগতকৃত করার জন্য বিস্তৃত বিকল্প সরবরাহ করে। এটির চেহারাটি কীভাবে সূক্ষ্ম-টিউন করবেন তা এখানে:
বোতাম শৈলী
বোতাম প্রস্থ: বোতামটির প্রস্থ সামঞ্জস্য করুন যাতে এটি আপনার লেআউটের মধ্যে ফিট করে, তা পূর্ণ-প্রস্থ বা কাস্টম-আকারের হোক না কেন।
টাইপোগ্রাফি: আপনার সাইটের ডিজাইনের সাথে মেলে বোতামের ফন্ট শৈলী, আকার, ওজন এবং অক্ষরের ব্যবধান কাস্টমাইজ করুন।
প্যাডিং: বোতামের ভিতরে স্থান নিয়ন্ত্রণ করতে প্যাডিং সেট করুন, নিশ্চিত করুন যে পাঠ্য এবং আইকনটি নিখুঁতভাবে অবস্থান করছে।
সাধারণ এবং হোভার সেটিংস
আপনি বোতামটির স্বাভাবিক এবং হোভার উভয় অবস্থার জন্য এর চেহারা কাস্টমাইজ করতে পারেন:
পাঠ্যের রঙ: স্বাভাবিক এবং হোভার অবস্থার জন্য বিভিন্ন পাঠ্য রং চয়ন করুন।
আইকনের রঙ এবং আকার: স্বাভাবিক এবং হোভার উভয় প্রভাবের জন্য আইকনের রঙ এবং আকার সামঞ্জস্য করুন।
পটভূমির রঙ: স্বাভাবিক এবং হোভার অবস্থার জন্য বোতামের পটভূমির রঙ সেট করুন। আপনি আরও গতিশীল চেহারার জন্য গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড প্রয়োগ করতে পারেন।
বর্ডার টাইপ, প্রস্থ এবং রঙ: বোতামের চারপাশে একটি সীমানা যোগ করুন, সাধারণ এবং হোভার উভয় অবস্থার জন্য সীমানার ধরন (কঠিন, ড্যাশড, ইত্যাদি), প্রস্থ এবং রঙ নির্বাচন করুন।
সীমানা ব্যাসার্ধ: সীমানা ব্যাসার্ধ সামঞ্জস্য করে বৃত্তাকার প্রান্ত সহ বোতামের কোণগুলি কাস্টমাইজ করুন৷।
বক্স ছায়া: স্বাভাবিক এবং হোভার অবস্থার জন্য একটি বক্স ছায়া প্রয়োগ করে বোতামে গভীরতা যোগ করুন। এই প্রভাবটি বোতামটিকে পৃষ্ঠায় আলাদা করে তোলে।
স্টাইল ট্যাব ব্যবহার করে, আপনি নিশ্চিত করতে পারেন যে আপনার বোতামটি কেবল ভালভাবে কাজ করে না বরং আপনার সাইটের সামগ্রিক ডিজাইনের নান্দনিকতার মধ্যেও পুরোপুরি ফিট করে।
উপরে উল্লিখিত প্রতিটি সেটিং কীভাবে কাজ করে সে সম্পর্কে গভীরভাবে বোঝার জন্য আমরা আপনাকে আমাদের সম্পূর্ণ ডকুমেন্টেশন পরীক্ষা করার পরামর্শ দিই কিভাবে ক্রিয়েটিভ বোতাম তৈরি করবেন যার মধ্যে আরও গভীর ব্যাখ্যা এবং ভিডিও টিউটোরিয়াল রয়েছে।
উন্নত ট্যাবে আরও কাস্টমাইজেশন অ্যাক্সেস করুন
দ্য উন্নত ট্যাব আপনাকে অতিরিক্ত প্রভাব এবং কাস্টমাইজেশন বিকল্পগুলিতে অ্যাক্সেস দেয় যা আপনার বোতামের কার্যকারিতা এবং ইন্টারঅ্যাক্টিভিটি আরও উন্নত করতে পারে। আপনি কি করতে পারেন তা এখানে দেখুন:
অন্যান্য মাস্টার অ্যাডঅন এক্সটেনশনের সাথে বৃহত্তর কাস্টমাইজেশন
অন্যান্য মাস্টার অ্যাডঅন বৈশিষ্ট্যগুলির সাথে এটিকে একত্রিত করে আপনার বোতাম ডিজাইনটিকে আরও এগিয়ে নিয়ে যান। আপনি মত এক্সটেনশন ব্যবহার করতে পারেন ভাসমান প্রভাব এবং প্যারালাক্স অতিরিক্ত ভিজ্যুয়াল প্রভাবের জন্য আপনার ক্রিয়েটিভ বোতামের পাশাপাশি।
ট্রান্সফর্ম ইফেক্ট প্রয়োগ করুন (সাধারণ এবং হোভার স্টেট)
যোগ করুন রূপান্তর প্রভাব, যেমন স্কেলিং বা ঘোরানো, এর স্বাভাবিক এবং হোভার উভয় অবস্থায় বোতামে। এই বৈশিষ্ট্যটি আপনাকে আকর্ষক অ্যানিমেশন তৈরি করতে দেয় যা আপনার বোতামটিকে আরও ইন্টারেক্টিভ এবং গতিশীল করে তোলে।
রেলাক্স (প্যারালাক্স প্রভাব)
পরিচয় করিয়ে দিন ক প্যারালাক্স স্ক্রলিং প্রভাব, যেখানে ব্যবহারকারী স্ক্রোল করার সময় বোতামটি বাকি পৃষ্ঠার চেয়ে ভিন্ন গতিতে চলে। এটি বোতামের গতিবিধিতে একটি অনন্য, নিমজ্জিত স্পর্শ যোগ করে।
অ্যানিমেশন প্রকাশ করুন
ব্যবহার ক অ্যানিমেশন প্রকাশ ব্যবহারকারী পৃষ্ঠার নিচে স্ক্রোল করার সাথে সাথে আপনার বোতামটি ধীরে ধীরে প্রদর্শিত হতে, ইন্টারঅ্যাক্টিভিটি এবং ষড়যন্ত্রের একটি অতিরিক্ত স্তর যুক্ত করে।
প্রদর্শন শর্তাবলী
আপনার বোতাম কখন এবং কোথায় প্রদর্শিত হবে তা নিয়ন্ত্রণ করুন প্রদর্শন শর্ত ব্যবহার করে। আপনি এমন নিয়ম সেট করতে পারেন যা নির্দিষ্ট ব্যবহারকারীর ক্রিয়া বা শর্তের উপর ভিত্তি করে বোতামের দৃশ্যমানতা নির্ধারণ করে, যেমন নির্দিষ্ট ডিভাইসে বা একটি নির্দিষ্ট সময়সীমার মধ্যে।
ভাসমান প্রভাব
আপনার বোতামটিকে পৃষ্ঠার উপরে ভাসিয়ে দিন, এটিকে আরও গতিশীল, ইন্টারেক্টিভ অনুভূতি দিন। ভাসমান প্রভাব ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতিক্রিয়ায় বোতামটিকে বিষয়বস্তুর উপর ঘোরাঘুরি করার অনুমতি দিন, সামান্য বা আলতোভাবে সরানো।
টুলটিপস
যোগ করুন টুলটিপ অতিরিক্ত তথ্যের জন্য আপনার বোতামে। যখন একজন ব্যবহারকারী বোতামের উপর ঘোরাফেরা করে, একটি ছোট টেক্সট বক্স আরো বিস্তারিত সহ প্রদর্শিত হতে পারে অথবা একটি সহায়ক বিবরণ।
এই উন্নত বৈশিষ্ট্যগুলি অফুরন্ত সৃজনশীল সম্ভাবনা প্রদান করে, আপনাকে এমন বোতামগুলি তৈরি করতে সক্ষম করে যা কেবল দুর্দান্ত দেখায় না বরং আপনার ব্যবহারকারীদের সাথে অর্থপূর্ণভাবে যোগাযোগ করে।
চূড়ান্ত চিন্তা
এলিমেন্টর অ্যানিমেটেড বোতামগুলি ব্যবহারকারীর ব্যস্ততা বাড়াতে এবং আপনার ওয়েবসাইটকে আরও ইন্টারেক্টিভ করার একটি সহজ কিন্তু শক্তিশালী উপায়। সঙ্গে মাস্টার অ্যাডঅন ক্রিয়েটিভ বোতাম অ্যাডন, আপনি সূক্ষ্ম অ্যানিমেশন থেকে গতিশীল মিথস্ক্রিয়া পর্যন্ত বিভিন্ন প্রভাব সহ সহজেই নজরকাড়া বোতাম তৈরি করতে পারেন।
এই নির্দেশিকায় বর্ণিত পদক্ষেপগুলি অনুসরণ করে, আপনি আপনার সাইটের সাথে মেলে আপনার বোতামগুলি কাস্টমাইজ করতে পারেন৷ ব্র্যান্ড, ক্লিক উত্সাহিত করুন, এবং সামগ্রিক ব্যবহারকারীর অভিজ্ঞতা উন্নত করুন। আপনার ওয়েবসাইটের লক্ষ্যগুলির সাথে উপযুক্ত নিখুঁত সমন্বয় খুঁজে পেতে বিভিন্ন শৈলী, প্রভাব এবং বৈশিষ্ট্যগুলির সাথে পরীক্ষা করতে ভয় পাবেন না৷।
