শীঘ্রই বা পরে প্রতিটি এলিমেন্টর বিল্ড এমন একটি দেয়ালে আঘাত করে যা প্যানেল নিয়ন্ত্রণগুলি আরোহণ করতে পারে না: একটি হোভার প্রভাব যা স্টাইল ট্যাব অফার করে না, বা একটি কীফ্রেম অ্যানিমেশন যা আপনি একটি টিউটোরিয়ালে পেয়েছেন৷ Elementor একটি প্রো লাইসেন্সের পিছনে প্রতি-এলিমেন্ট কাস্টম CSS রাখে। দ্য কাস্টম সিএসএস মধ্যে এক্সটেনশন এলিমেন্টরের জন্য মাস্টার অ্যাডঅন সেই প্রাচীরটি সরিয়ে দেয়: বিনামূল্যে সম্পাদকে প্রতিটি বিভাগে, ধারক, কলাম এবং উইজেটে একটি CSS সম্পাদক।
এখানে এটি সম্পাদকে রয়েছে। CSS বাক্সে অবতরণ করে, এবং প্রশংসাপত্র কার্ডগুলি একই সেকেন্ডে ক্যানভাস জুড়ে স্লাইড করা শুরু করে:
কাস্টম CSS এক্সটেনশন কি করে #
একবার সক্রিয় হয়ে গেলে, এলিমেন্টর সম্পাদকের প্রতিটি উপাদান একটি পায় কাস্টম সিএসএস এর অধীনে ধারা উন্নত ট্যাব। ভিতরে সিনট্যাক্স হাইলাইটিং এবং লাইন নম্বর সহ একটি কোড সম্পাদক বসে। আপনি সেখানে যা লিখবেন তা শুধুমাত্র সেই উপাদানটির জন্য প্রযোজ্য, এবং ক্যানভাস এটির পূর্বরূপ লাইভ করে, তাই আপনি টাইপ করার সাথে সাথে নিয়মটি কার্যকর হতে দেখেন।
সম্পাদক সমর্থন করে নির্বাচক কীওয়ার্ড, যা উপাদানের নিজস্ব মোড়কের জন্য দাঁড়িয়েছে। লিখুন selector { } এবং নিয়মটি ঠিক এই বিভাগ বা উইজেটকে লক্ষ্য করে, এলিমেন্টরের তৈরি করা ক্লাসের নামগুলির জন্য কোনও শিকার নয়। শিশু নির্বাচকরাও কাজ করে: selector .some-class উপাদানের ভিতরে পৌঁছায়।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়। বিনামূল্যে সংস্করণ যথেষ্ট।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? অনুসরণ কর ইনস্টলেশন গাইড প্রথম।
- কাস্টম CSS একটি বিনামূল্যের এক্সটেনশন, তাই কোনো প্রো লাইসেন্সের প্রয়োজন নেই।
- কিছু CSS। এমনকি কপি-পেস্ট করা স্নিপেটগুলিও কাজ করে, যেহেতু নির্বাচক কীওয়ার্ড শক্ত অংশটি সরিয়ে দেয়।
কাস্টম CSS এক্সটেনশন কিভাবে সক্ষম করবেন #
আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে, যান মাস্টার অ্যাডনস এবং খুলুন এক্সটেনশন ট্যাব। কাস্টম CSS বসে ইউটিলিটি উইজেট কাস্টম JS এর পাশে একটি জনপ্রিয় ব্যাজ সহ গ্রুপ করুন এবং পোস্ট/পেজ ডুপ্লিকেটর। এর টগলে ক্লিক করুন যাতে এটি বেগুনি হয়ে যায়, তারপর আঘাত করুন পরিবর্তন সংরক্ষণ করুন এবং সবুজ “Settings সফলভাবে সংরক্ষিত" নোটিশের জন্য অপেক্ষা করুন।
একটি উপাদানে কাস্টম CSS সম্পাদক খুলুন #
এলিমেন্টর এডিটরে যেকোন উপাদান নির্বাচন করুন, ডেমোতে একটি সম্পূর্ণ ধারক, এবং খুলুন উন্নত ট্যাব। স্ক্রোল করুন কাস্টম সিএসএস বেগুনি MA ব্যাজ সহ বিভাগ এবং এটি প্রসারিত করুন। একটি খালি কোড এডিটর প্রদর্শিত হবে, যার নীচে একটি ইঙ্গিত রয়েছে: মোড়ক উপাদানটিকে লক্ষ্য করতে "নির্বাচনকারী" কীওয়ার্ড ব্যবহার করুন৷।
CSS লিখুন বা পেস্ট করুন #
ডেমো একটি কীফ্রেম অ্যানিমেশন সহ প্রশংসাপত্র কার্ডের একটি স্ট্যাটিক সারিকে একটি চলমান মার্কিতে পরিণত করে:
selector {
animation: testimonial 5s linear infinite alternate;
}
@keyframes testimonial {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(calc(-100% + 100vw));
}
}এটিকে পেস্ট করুন এবং ক্যানভাস অবিলম্বে মেনে চলে: কার্ডগুলি ডান থেকে বামে স্লাইড করা শুরু করে, শেষে বিপরীত হয় এবং লুপ হয়, ঠিক যেমন এই পৃষ্ঠার শীর্ষে থাকা GIF দেখায়৷ প্রথমে সংরক্ষণ বা রিফ্রেশ করার কিছু নেই। দ্য selector কীওয়ার্ড এই একটি পাত্রে অ্যানিমেশন পিন করে, তাই পৃষ্ঠায় অন্য কিছুই স্পর্শ করা হয় না।
পৃষ্ঠায় ফলাফল #
আঘাত করা প্রকাশ করুন এবং সামনের প্রান্তটি একই অ্যানিমেশন চালায়: প্রশংসাসূচক সারিটি ভিউপোর্ট জুড়ে চলে যায়, প্রতিটি প্রান্তে দিক বিরতি দেয় এবং নিজে থেকে সাইকেল চালাতে থাকে।
একটি অভ্যাস রাখা মূল্যবান: CSS উপাদানের উপর বাস করে, বিশ্বব্যাপী স্টাইলশীটে নয়। বিভাগটিকে অন্য পৃষ্ঠায় নকল করুন এবং অ্যানিমেশন এটির সাথে ভ্রমণ করে।
যেখানে প্রতি-উপাদান কাস্টম CSS সাহায্য করে #
- কীফ্রেম অ্যানিমেশন। মার্কি, স্পন্দিত বোতাম, ভাসমান ব্যাজ, প্যানেল নিয়ন্ত্রণ করে এমন কিছু প্রকাশ করতে পারে না।
- হোভার স্টেটস।
selector:hoverকার্ডে লিফট, ছায়া এবং রঙ পরিবর্তনের নিয়ম। - স্নিপেট ফিক্স। সেই একটি স্ট্যাক ওভারফ্লো উত্তর যা আপনার লেআউট বাগ সমাধান করে, বাগটি যেখানে থাকে ঠিক সেখানে প্রয়োগ করা হয়।
- প্রতিক্রিয়াশীল tweaks। সাইট-ওয়াইড স্টাইলশীট সম্পাদনার পরিবর্তে একটি বিভাগে একটি মিডিয়া ক্যোয়ারী।
- নকশা পরীক্ষা। আপনার থিমের CSS-এ প্রচার করার আগে ক্যানভাসে একটি নিয়ম লাইভ পরীক্ষা করুন।
ভিডিও টিউটোরিয়াল #
প্রকাশিত পৃষ্ঠায় চলমান অ্যানিমেটেড কার্ডগুলিতে এক্সটেনশন সক্ষম করা থেকে পুরো প্রবাহটি দেখুন।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
আমি কিভাবে Pro ছাড়া Elementor এ কাস্টম CSS যোগ করব?
মাস্টার অ্যাডঅন এক্সটেনশন ট্যাবে কাস্টম সিএসএস এক্সটেনশন সক্ষম করুন, সম্পাদকের যেকোনো উপাদান নির্বাচন করুন এবং উন্নত ট্যাবের অধীনে কাস্টম সিএসএস খুলুন। কোড এডিটরে CSS লিখুন বা পেস্ট করুন এবং এটি একটি লাইভ প্রিভিউ সহ সেই উপাদানটিতে প্রযোজ্য, কোনো প্রো লাইসেন্সের প্রয়োজন নেই।
নির্বাচক কীওয়ার্ড কি করে?
এটি আপনি যে উপাদানটি সম্পাদনা করছেন তার মোড়কের জন্য দাঁড়িয়েছে। নির্বাচকের মত একটি নিয়ম {রঙ: লাল; } এলিমেন্টরের জেনারেট করা ক্লাসের নাম না জেনেই ঠিক এই বিভাগ বা উইজেটকে লক্ষ্য করে এবং নির্বাচক ।child এর ভিতরের উপাদানগুলিতে পৌঁছায়।
CSS কি পুরো সাইটে প্রযোজ্য নাকি শুধুমাত্র একটি উপাদানে?
শুধু এটি বহনকারী উপাদান। প্রতিটি বিভাগ, কলাম বা উইজেটের নিজস্ব কাস্টম CSS বক্স রয়েছে, তাই নিয়মগুলি স্কোপ করা থাকে। উপাদানটির নকল করা তার সাথে তার CSS অনুলিপি করে, যা পৃষ্ঠাগুলির মধ্যে প্রভাব বহনযোগ্য রাখে।
আমি কি এই এক্সটেনশনের সাথে CSS অ্যানিমেশন চালাতে পারি?
হ্যাঁ। সম্পাদক @keyframes, মিডিয়া কোয়েরি এবং হোভারের মতো ছদ্ম-ক্লাস সহ সম্পূর্ণ CSS গ্রহণ করেন। এই পৃষ্ঠার ডেমো একটি প্রশংসাপত্র সারিতে একটি কীফ্রেম মার্কি অ্যানিমেশন চালায়, প্রকাশের আগে সম্পাদকে লাইভ প্রিভিউ করা হয়।
কাস্টম CSS এক্সটেনশন কি বিনামূল্যে?
হ্যাঁ। এক্সটেনশন ট্যাবের ইউটিলিটি উইজেট গ্রুপে এলিমেন্টরের জন্য মাস্টার অ্যাডঅন-এর বিনামূল্যের সংস্করণ সহ কাস্টম সিএসএস পাঠানো হয়। প্রো প্ল্যানগুলি কী যোগ করে তা মূল্যের পৃষ্ঠাটি কভার করে।
মোড়ানো #
কাস্টম CSS এক্সটেনশন বিনামূল্যে এলিমেন্টরকে প্রতিটি বাস্তব প্রজেক্টের শেষ পর্যন্ত প্রয়োজনীয় এস্কেপ হ্যাচ দেয়: যেকোন এলিমেন্টে একটি স্কোপড CSS এডিটর, লাইভ প্রিভিউ এবং একটি সিলেক্টর কীওয়ার্ড যা আপনাকে ক্লাস-নেম আর্কিওলজি থেকে রেহাই দেয়। এর সাথে পেয়ার করুন অ্যানিমেটেড গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড এক্সটেনশন মোটেও কীফ্রেম না লিখে গতির জন্য, এবং এর সম্পূর্ণ সেট ব্রাউজ করুন মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন টুলবক্স বাকি জন্য।
