একটি ডিফল্ট বোতাম ক্লিক পায়; সামান্য গতি সহ একটি বোতাম তাদের আরও বেশি পায়। দ্য সৃজনশীল বোতাম উইজেট ইন এলিমেন্টরের জন্য মাস্টার অ্যাডঅন সূক্ষ্ম ব্যাকগ্রাউন্ড সুইপ থেকে টেক্সট-সোয়াপ অ্যানিমেশন পর্যন্ত হোভার ইফেক্ট প্রিসেটের একটি লাইব্রেরি পাঠায়, যাতে আপনি CSS-এর একটি লাইন না লিখেই কল টু অ্যাকশন যেতে পারে।
আপনি একটি প্রিসেট বাছাই করুন, পাঠ্য টাইপ করুন, আপনি চাইলে একটি আইকন যোগ করুন এবং স্বাভাবিক এবং হোভার স্টেট স্টাইল করুন। এই নির্দেশিকাটি পুরো উইজেটকে কভার করে, সমাপ্ত বোতামে টেনে আনুন।
ক্রিয়েটিভ বোতাম উইজেট কি করে #
উইজেট একটি পূর্বনির্মাণ হোভার অ্যানিমেশন সহ একটি কল-টু-অ্যাকশন বোতাম রেন্ডার করে। অ্যানিমেশনগুলি নামযুক্ত প্রিসেট হিসাবে আসে, তাদের মধ্যে বিশটিরও বেশি, প্রতিটির নিজস্ব গতিবিধি রয়েছে: ব্যাকগ্রাউন্ড যা স্লাইড করে, সীমানা যা নিজেদের আঁকে, পাঠ্য যা একটি বিকল্প বার্তায় উল্টে যায়। অন্য সবকিছু একটি সাধারণ এলিমেন্টর বোতামের মতো কাজ করে: পাঠ্য, লিঙ্ক, আইকন, প্রান্তিককরণ, এবং প্রতি রাজ্যে সম্পূর্ণ রঙ নিয়ন্ত্রণ।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
- বেসিক উইজেটের অধীনে মাস্টার অ্যাডঅন বিকল্প প্যানেলে ক্রিয়েটিভ বোতাম উইজেট সক্রিয় করা হয়েছে।
কিভাবে ক্রিয়েটিভ বোতাম উইজেট যোগ করবেন #
Elementor সম্পাদকে, অনুসন্ধান করুন উপাদান জন্য প্যানেল সৃজনশীল বোতাম এবং পৃষ্ঠায় উইজেট টেনে আনুন। "আপনার CTA বিষয়বস্তু যোগ করুন" পড়ার একটি অন্ধকার বোতাম প্রদর্শিত হবে, ইতিমধ্যেই ডিফল্ট প্রভাবের সাথে তারযুক্ত।
একটি বোতাম প্রভাব প্রিসেট চয়ন করুন #
খোলা বোতাম প্রিসেট এবং নিয়ন্ত্রণ বিষয়বস্তু ট্যাবে। দ্য বোতাম প্রভাব ড্রপডাউন হল উইজেটের মূল: ডিফল্ট, উইনোনা, উজারাক, ওয়াইরা, তামায়া, রায়েন, পিপালুক, মোয়েমা, আইসি, আইলেন, সাকি, ওয়াপাশা, নিনা, নানুক, নুকা, অ্যান্টিমান, ইটজেল, নাইরা, কুইডেল, স্যাকনাইট, শিকোবা, এবং আরো।
প্রতিটি নাম একটি ভিন্ন হোভার অ্যানিমেশন। প্রতিটি বাছাইয়ের পরে ক্যানভাসে বোতামটি ঘোরান এবং সম্পাদক প্রভাবটি লাইভ প্লে করেন, তাই অডিশন প্রিসেট করতে সেকেন্ড সময় লাগে। নামগুলি তারা কী করে তার ইঙ্গিত দেয় না, তাই চার বা পাঁচটি চেষ্টা করা সঠিকটি খুঁজে পাওয়ার দ্রুততম উপায়। বোতাম প্রান্তিককরণ এবং বোতাম পাঠ্য প্রান্তিককরণ প্রতি-ডিভাইস সেটিংসের জন্য একটি প্রতিক্রিয়াশীল টগল সহ, ঠিক নীচে বসুন।
পাঠ্য, লিঙ্ক এবং বিকল্প পাঠ্য সেট করুন #
দ্য বোতাম নিয়ন্ত্রণ গ্রুপ বিষয়বস্তু কভার। বোতাম পাঠ্য লেবেল হয়, এবং লিঙ্ক URL নতুন-ট্যাব এবং nofollow বিকল্পগুলির জন্য গিয়ার আইকন সহ বোতামটিকে কোথাও নির্দেশ করে৷।
কিছু প্রিসেট, যেমন উইনোনা এবং রায়েন, হোভারে দ্বিতীয় বার্তার জন্য লেবেলটি অদলবদল করে। তাদের মধ্যে একটি এবং একটি চয়ন করুন বিকল্প বোতাম পাঠ্য ক্ষেত্র উপস্থিত হয়; ডেমো এটিকে "এখনই ক্লিক করুন!" এ সেট করে তাই বোতামটি পড়ে “আপনার CTA বিষয়বস্তু যোগ করুন" বিশ্রামে এবং হোভারে ফ্লিপ করে।
একটি আইকন যোগ করুন #
দ্য আইকন কন্ট্রোল এলিমেন্টর আইকন লাইব্রেরি খোলে, ফন্ট অসাধারণ এবং আপনার ইনস্টল করা প্রতিটি আইকন সেট সহ।
একটি বাছাই করার পর, আইকন অবস্থান লেবেলের আগে বা পরে এটি রাখে, এবং আইকন ব্যবধান ফাঁক সেট করে; ডেমো এটিকে 12 পিক্সেলে বাম্প করে যাতে আইকন এবং পাঠ্য শ্বাস নেয়।
বোতাম স্টাইল করুন #
সুইচ শৈলী ট্যাব এবং খুলুন বোতাম শৈলী। শীর্ষ গ্রুপ আকৃতি পরিচালনা করে: প্রস্থ, টাইপোগ্রাফি, বোতাম প্যাডিং, বর্ডার টাইপ, সীমানা ব্যাসার্ধ (ডেমোতে 8, নরমভাবে গোলাকার কোণগুলির জন্য), বক্স ছায়া, এবং আইকনের আকার.
তার নিচে, স্বাভাবিক এবং ঘোরাঘুরি করা ট্যাব প্রতিটি তিনটি রং বহন করে: টেক্সট কালার, পটভূমির রঙ, এবং আইকনের রঙ। ডেমো নীলের উপর স্বাভাবিক অবস্থার সাদা টেক্সট দেয়:
তারপরে হোভার স্টেটটিকে সবুজের উপর গাঢ় টেক্সটে ফ্লিপ করে, তাই প্রভাব দুটি স্পষ্টভাবে ভিন্ন চেহারার মধ্যে অ্যানিমেট করে:
ক নিদর্শন নীচের অংশটি আলংকারিক বোতামের ব্যাকগ্রাউন্ডের জন্য একটি প্রো অতিরিক্ত।
পৃষ্ঠায় ফলাফল #
লাইভ পৃষ্ঠায়, কার্সার না আসা পর্যন্ত বোতামটি তার স্বাভাবিক রঙে বসে থাকে। তারপর প্রিসেট বাজবে: ব্যাকগ্রাউন্ডটি হোভার কালারে সুইপ করে, আইকন এবং টেক্সট শিফট করে এবং প্রিসেটটি ব্যবহার করলে বিকল্প টেক্সট দেখা যায়।
সাধারণ ব্যবহারের ক্ষেত্রে #
- হিরো সেকশন সিটিএ যেখানে অ্যানিমেশন মূল অ্যাকশনের দিকে নজর দেয়।
- মূল্য পৃষ্ঠা বোতাম হোভারে "এটি ফ্রি!" থেকে "শুরু করুন" এর মতো একটি পাঠ্য অদলবদল সহ।
- ডাউনলোড এবং সাইন আপ বোতাম তাত্ক্ষণিক স্বীকৃতির জন্য একটি আইকনের সাথে যুক্ত।
- ল্যান্ডিং পৃষ্ঠা বিভাগ থিমের ডিফল্টগুলি থেকে আলাদা থাকার জন্য এটির একটি বোতাম প্রয়োজন৷।
আরও ভাল সৃজনশীল বোতামের জন্য টিপস #
- ক্যানভাসে অডিশন প্রিসেট। প্রতিটি প্রভাব বাছাই করার পরে বোতামটি ঘোরান; অ্যানিমেশন সম্পাদকে চলে, কোনো পূর্বরূপের প্রয়োজন নেই।
- হোভার স্টেট কনট্রাস্ট করুন। নীল থেকে সবুজ ডেমোর মতো স্বাভাবিক এবং হোভার রঙগুলি স্পষ্টভাবে আলাদা হলে অ্যানিমেশনটি সবচেয়ে ভাল পড়ে।
- বিকল্প পাঠ্য সংক্ষিপ্ত রাখুন। উভয় বার্তা প্রায় একই দৈর্ঘ্যের হলে পাঠ্য-অদলবদল প্রিসেটগুলি পরিষ্কার দেখায়।
- প্রতি বিভাগে একটি সৃজনশীল বোতাম। গতি মনোযোগ অর্জন করে; একটি সারিতে তিনটি চলমান বোতাম একে অপরের সাথে প্রতিযোগিতা করে।
- মোবাইলে ট্যাপ আচরণ পরীক্ষা করুন। টাচ স্ক্রিনগুলির কোনও হোভার নেই, তাই নিশ্চিত করুন যে স্বাভাবিক অবস্থাটি নিজে থেকে ক্লিকযোগ্য হিসাবে পড়ে।
ভিডিও টিউটোরিয়াল #
আপনি যদি লাইভ পৃষ্ঠায় একটি ইফেক্ট প্রিসেট বাছাই থেকে সমাপ্ত হোভার অ্যানিমেশন পর্যন্ত ক্রিয়েটিভ বোতামটি কার্যকর দেখতে চান তবে আপনি নীচের ভিডিওটিও দেখতে পারেন।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডঅনগুলিতে ক্রিয়েটিভ বোতাম উইজেট কী?
এটি প্রি-বিল্ট হোভার অ্যানিমেশন সহ কল-টু-অ্যাকশন বোতামগুলির জন্য একটি এলিমেন্টর উইজেট। আপনি বিশটিরও বেশি নামযুক্ত প্রভাব প্রিসেট থেকে বাছাই করুন, পাঠ্য, লিঙ্ক এবং আইকন সেট করুন এবং এলিমেন্টর প্যানেল থেকে আলাদাভাবে স্বাভাবিক এবং হোভার স্টেট স্টাইল করুন।
কয়টি বোতাম প্রভাব অন্তর্ভুক্ত করা হয়?
বোতাম ইফেক্ট ড্রপডাউন উইনোনা, উজারক, ওয়াইরা, তামায়া, রায়েন, মোয়েমা, নাইরা এবং শিকোবা সহ বিশটিরও বেশি প্রিসেট তালিকাভুক্ত করে। প্রতিটি একটি ভিন্ন হোভার অ্যানিমেশন প্রয়োগ করে, এবং আপনি বোতামটি ঘোরানোর সময় সম্পাদক ক্যানভাস প্রভাবটি লাইভ চালায়।
বিকল্প বোতাম পাঠ্য ক্ষেত্র কি?
কিছু প্রিসেট হোভারে দ্বিতীয় বার্তার জন্য বোতাম লেবেল অদলবদল করে। আপনি যখন সেই প্রভাবগুলির মধ্যে একটি বেছে নেন, তখন বিকল্প বোতাম পাঠ্য ক্ষেত্রটি উপস্থিত হয় যাতে আপনি হোভার বার্তাটি সেট করতে পারেন, যেমন "শুরু করুন" থেকে "এটি বিনামূল্যে!" এ স্যুইচ করা।
আমি কি সৃজনশীল বোতামে একটি আইকন যোগ করতে পারি?
হ্যাঁ। আইকন নিয়ন্ত্রণ এলিমেন্টর আইকন লাইব্রেরি খোলে। একটি আইকন বেছে নেওয়ার পরে, আইকন অবস্থান এটিকে পাঠ্যের আগে বা পরে রাখে, আইকন ব্যবধান ফাঁক সেট করে এবং আইকন আকার এবং আইকন রঙ স্টাইল ট্যাবে থাকে।
আমি কি আলাদাভাবে হোভার স্টেট স্টাইল করতে পারি?
হ্যাঁ। বোতাম শৈলীতে সাধারণ এবং হোভার ট্যাব রয়েছে, প্রতিটির নিজস্ব পাঠ্য রঙ, পটভূমির রঙ এবং আইকন রঙ রয়েছে। প্রিসেট দুটি অবস্থার মধ্যে অ্যানিমেট করে, তাই বিপরীত রঙগুলি প্রভাবটিকে আরও দৃশ্যমান করে তোলে।
মোড়ানো #
ক্রিয়েটিভ বোতাম উইজেটটি কাস্টম কোড ছাড়াই একটি সাধারণ CTA-কে অ্যানিমেটেডে পরিণত করে: ইফেক্ট ড্রপডাউন থেকে একটি প্রিসেট বাছাই করুন, পাঠ্য এবং আইকন সেট করুন এবং এর মধ্যে অ্যানিমেটিং করার মতো সাধারণ এবং হোভার স্টেটের রঙ দিন। এটি ক্রিয়েটিভ লিঙ্ক উইজেটের সাথে ভালভাবে যুক্ত হয় অ্যানিমেটেড টেক্সট লিঙ্কের জন্য। এর সম্পূর্ণ সেট ব্রাউজ করুন মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং দেখুন মূল্য পৃষ্ঠা বোতাম প্যাটার্নের মতো প্রো অতিরিক্তগুলির জন্য।
