ক্রিয়েটিভ বোতাম উইজেট সেটিংস

একটি ডিফল্ট বোতাম ক্লিক পায়; সামান্য গতি সহ একটি বোতাম তাদের আরও বেশি পায়। বিনামূল্যে ক্রিয়েটিভ বোতাম উইজেট মধ্যে এলিমেন্টরের জন্য মাস্টার অ্যাডঅন সূক্ষ্ম ব্যাকগ্রাউন্ড সুইপ থেকে টেক্সট-সোয়াপ অ্যানিমেশন পর্যন্ত হোভার ইফেক্ট প্রিসেটের একটি লাইব্রেরি পাঠায়, যাতে আপনি CSS-এর একটি লাইন না লিখেই কল টু অ্যাকশন যেতে পারে।

আপনি একটি প্রিসেট বাছাই করুন, পাঠ্য টাইপ করুন, আপনি চাইলে একটি আইকন যোগ করুন এবং স্বাভাবিক এবং হোভার স্টেট স্টাইল করুন। এই নির্দেশিকাটি পুরো উইজেটকে কভার করে, সমাপ্ত বোতামে টেনে আনুন।

ক্রিয়েটিভ বোতাম উইজেট কি করে #

উইজেট একটি প্রি-বিল্ট হোভার অ্যানিমেশন সহ একটি কল-টু-অ্যাকশন বোতাম রেন্ডার করে। অ্যানিমেশনগুলি 21টি নামযুক্ত প্রিসেট হিসাবে আসে, 6টি বিনামূল্যে এবং 15টি মাস্টার অ্যাডনস প্রো সহ, প্রতিটির নিজস্ব গতিবিধি রয়েছে: ব্যাকগ্রাউন্ড যা স্লাইড করে, সীমানা যা নিজেদের আঁকে, পাঠ্য যা একটি বিকল্প বার্তায় উল্টে যায়৷ অন্য সবকিছু একটি সাধারণ এলিমেন্টর বোতামের মতো কাজ করে: পাঠ্য, লিঙ্ক, আইকন, প্রান্তিককরণ, এবং প্রতি রাজ্যে সম্পূর্ণ রঙ নিয়ন্ত্রণ।

আপনি শুরু করার আগে #

• ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
• এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
• বেসিক উইজেটের অধীনে মাস্টার অ্যাডঅন বিকল্প প্যানেলে ক্রিয়েটিভ বোতাম উইজেট সক্রিয় করা হয়েছে।

কিভাবে ক্রিয়েটিভ বোতাম উইজেট যোগ করবেন #

Elementor সম্পাদকে, অনুসন্ধান করুন উপাদান জন্য প্যানেল সৃজনশীল বোতাম এবং পৃষ্ঠায় উইজেট টেনে আনুন। "আপনার CTA বিষয়বস্তু যোগ করুন" পড়ার একটি অন্ধকার বোতাম প্রদর্শিত হবে, ইতিমধ্যেই ডিফল্ট প্রভাবের সাথে তারযুক্ত।

একটি বোতাম প্রভাব প্রিসেট চয়ন করুন #

খোলা বোতাম প্রিসেট এবং নিয়ন্ত্রণ বিষয়বস্তু ট্যাবে। দ্য বোতাম প্রভাব ড্রপডাউন হল উইজেটের মূল: ডিফল্ট, উইনোনা, উজারাক, ওয়াইরা, তামায়া এবং রায়েন বিনামূল্যে। পিপালুক, মোয়েমা, আইসি, আইলেন, সাকি, ওয়াপাশা, নিনা, নানুক, নুকা, অ্যান্টিম্যান, ইটজেল, নাইরা, কুইডেল, স্যাকনাইট এবং শিকোবা প্রয়োজন মাস্টার অ্যাডনস প্রো.

প্রতিটি নাম একটি ভিন্ন হোভার অ্যানিমেশন। প্রতিটি বাছাইয়ের পরে ক্যানভাসে বোতামটি ঘোরান এবং সম্পাদক প্রভাবটি লাইভ প্লে করেন, তাই অডিশন প্রিসেট করতে সেকেন্ড সময় লাগে। নামগুলি তারা কী করে তার ইঙ্গিত দেয় না, তাই চার বা পাঁচটি চেষ্টা করা সঠিকটি খুঁজে পাওয়ার দ্রুততম উপায়। বোতাম প্রান্তিককরণ এবং বোতাম পাঠ্য প্রান্তিককরণ প্রতি-ডিভাইস সেটিংসের জন্য একটি প্রতিক্রিয়াশীল টগল সহ, ঠিক নীচে বসুন।

পাঠ্য, লিঙ্ক এবং বিকল্প পাঠ্য সেট করুন #

দ্য বোতাম নিয়ন্ত্রণ গ্রুপ বিষয়বস্তু কভার। বোতাম পাঠ্য লেবেল হয়, এবং লিঙ্ক URL নতুন-ট্যাব এবং nofollow বিকল্পগুলির জন্য গিয়ার আইকন সহ বোতামটিকে কোথাও নির্দেশ করে৷।

প্রিসেটগুলি হোভারে একটি দ্বিতীয় বার্তার জন্য লেবেলটি অদলবদল করতে পারে। ডিফল্ট এবং একটি ছাড়া অন্য কোনো প্রভাব চয়ন করুন বিকল্প বোতাম পাঠ্য ক্ষেত্র উপস্থিত হয়; ডেমো এটিকে "এখনই ক্লিক করুন!" এ সেট করে তাই বোতামটি পড়ে “আপনার CTA বিষয়বস্তু যোগ করুন" বিশ্রামে এবং হোভারে ফ্লিপ করে।

একটি আইকন যোগ করুন #

দ্য আইকন কন্ট্রোল এলিমেন্টর আইকন লাইব্রেরি খোলে, ফন্ট অসাধারণ এবং আপনার ইনস্টল করা প্রতিটি আইকন সেট সহ।

একটি বাছাই করার পর, আইকন অবস্থান লেবেলের আগে বা পরে এটি রাখে, এবং আইকন ব্যবধান ফাঁক সেট করে; ডেমো এটিকে 12 পিক্সেলে বাম্প করে যাতে আইকন এবং পাঠ্য শ্বাস নেয়।

বোতাম স্টাইল করুন #

সুইচ শৈলী ট্যাব এবং খুলুন বোতাম শৈলী। শীর্ষ গ্রুপ আকৃতি পরিচালনা করে: প্রস্থ, টাইপোগ্রাফি, বোতাম প্যাডিং, বর্ডার টাইপ, সীমানা ব্যাসার্ধ (ডেমোতে 8, নরমভাবে গোলাকার কোণগুলির জন্য), বক্স ছায়া, এবং আইকনের আকার.

তার নিচে, স্বাভাবিক এবং ঘোরাঘুরি করা ট্যাব প্রতিটি তিনটি রং বহন করে: টেক্সট কালার, পটভূমির রঙ, এবং আইকনের রঙ। ডেমো নীলের উপর স্বাভাবিক অবস্থার সাদা টেক্সট দেয়:

তারপরে হোভার স্টেটটিকে সবুজের উপর গাঢ় টেক্সটে ফ্লিপ করে, তাই প্রভাব দুটি স্পষ্টভাবে ভিন্ন চেহারার মধ্যে অ্যানিমেট করে:

ক নিদর্শন নীচের অংশটি বিনামূল্যে প্যাটার্ন এক্সটেনশন থেকে আসে এবং আলংকারিক পটভূমি নিদর্শন যোগ করে।

পৃষ্ঠায় ফলাফল #

লাইভ পৃষ্ঠায়, কার্সার না আসা পর্যন্ত বোতামটি তার স্বাভাবিক রঙে বসে থাকে। তারপর প্রিসেট বাজবে: ব্যাকগ্রাউন্ডটি হোভার কালারে সুইপ করে, আইকন এবং টেক্সট শিফট করে এবং প্রিসেটটি ব্যবহার করলে বিকল্প টেক্সট দেখা যায়।

সাধারণ ব্যবহারের ক্ষেত্রে #

• হিরো সেকশন সিটিএ যেখানে অ্যানিমেশন মূল অ্যাকশনের দিকে নজর দেয়।
• মূল্য পৃষ্ঠা বোতাম হোভারে "এটি ফ্রি!" থেকে "শুরু করুন" এর মতো একটি পাঠ্য অদলবদল সহ।
• ডাউনলোড এবং সাইন আপ বোতাম তাত্ক্ষণিক স্বীকৃতির জন্য একটি আইকনের সাথে যুক্ত।
• ল্যান্ডিং পৃষ্ঠা বিভাগ থিমের ডিফল্টগুলি থেকে আলাদা থাকার জন্য এটির একটি বোতাম প্রয়োজন৷।

আরও ভাল সৃজনশীল বোতামের জন্য টিপস #

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

ভিডিও টিউটোরিয়াল #

আপনি যদি লাইভ পৃষ্ঠায় একটি ইফেক্ট প্রিসেট বাছাই থেকে সমাপ্ত হোভার অ্যানিমেশন পর্যন্ত ক্রিয়েটিভ বোতামটি কার্যকর দেখতে চান তবে আপনি নীচের ভিডিওটিও দেখতে পারেন।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #

মোড়ানো #

ক্রিয়েটিভ বোতাম উইজেটটি কাস্টম কোড ছাড়াই একটি সাধারণ CTA-কে অ্যানিমেটেডে পরিণত করে: ইফেক্ট ড্রপডাউন থেকে একটি প্রিসেট বাছাই করুন, পাঠ্য এবং আইকন সেট করুন এবং এর মধ্যে অ্যানিমেটিং করার মতো সাধারণ এবং হোভার স্টেটের রঙ দিন। এটি ক্রিয়েটিভ লিঙ্ক উইজেটের সাথে ভালভাবে যুক্ত হয় অ্যানিমেটেড টেক্সট লিঙ্কের জন্য। এর সম্পূর্ণ সেট ব্রাউজ করুন মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং দেখুন ক্রিয়েটিভ বোতাম উইজেট পৃষ্ঠা ডেমো এবং এলিমেন্টর বোতাম উইজেটের সাথে তুলনার জন্য।