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

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

একটি বিভাগে গ্রেডিয়েন্ট সেট আপ করুন #
এলিমেন্টর এডিটরে ধারক বা বিভাগ নির্বাচন করুন এবং খুলুন শৈলী ট্যাব। দ্য অ্যানিমেটেড গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড বেগুনি MA ব্যাজ সহ বিভাগটি পটভূমির ঠিক নীচে বসে। উল্টানো অ্যানিমেটেড গ্রেডিয়েন্ট সক্ষম করুন হ্যাঁ, এবং ক্যানভাস প্রভাব লাইভ প্রিভিউ করার সময় নিয়ন্ত্রণগুলি উপস্থিত হয়৷।

- অ্যানিমেশন প্রভাব: রঙ আন্দোলনের সহজীকরণ, ডেমোতে সহজ করুন।
- কোণ: গ্রেডিয়েন্টের দিক, -45 একটি তির্যক ঝাড়ু দেওয়ার জন্য ডেমোতে।
- মোট অ্যানিমেশন সময়কাল (সেকেন্ড): গ্রেডিয়েন্টটি জুড়ে এবং পিছনে প্রবাহিত হতে যে সময় নেয়। ডেমো 6 সেকেন্ড ব্যবহার করে।
- ট্রানজিশন মসৃণতা (সেকেন্ড): 3 এর ডিফল্ট সহ প্যানেলে দেখানো হয়েছে, কিন্তু বর্তমান সংস্করণে এটি অ্যানিমেশন পরিবর্তন করে না। পরিবর্তে অনুভূতি সামঞ্জস্য করতে সময়কাল এবং অ্যানিমেশন প্রভাব ব্যবহার করুন।
- রঙ: গ্রেডিয়েন্ট ধরে থাকা একটি রিপিটার থেমে যায়। ক্লিক করুন আইটেম যোগ করুন অন্য রঙের জন্য, অথবা X একটি ড্রপ করার জন্য।
রং বাছাই #
রঙ তালিকার প্রতিটি সারি একটি আদর্শ পিকার খোলে। ডেমোটি একটি সায়ান, বেগুনি এবং কমলা সেট দিয়ে শুরু হয়, তারপরে অদলবদল করা বন্ধ হয়ে যায়: একটি সরান এবং লুপটি শক্ত হয়ে যায়, একটি গভীর নীল (#3D6CD6) যোগ করুন এবং চক্রটি অবিলম্বে এটি তুলে নেয়। লাইভ প্রিভিউ এটিকে মজাদার অংশ করে তোলে; আপনি স্পর্শ করা প্রতিটি স্টপে বিভাগের মেজাজ পরিবর্তন দেখতে পান।

একই তাপমাত্রা পরিসরে দুই বা তিনটি রঙ মার্জিত হিসাবে পড়া। পুরো চাকা জুড়ে পাঁচটি রঙ স্ক্রিনসেভার হিসাবে পড়া। ছোট শুরু করুন।
পৃষ্ঠায় ফলাফল #
এই পৃষ্ঠার শীর্ষে জিআইএফ-এর মতো বিভাগটিকে এর রঙের মাধ্যমে শ্বাস নেওয়া বিভাগটি প্রকাশ করুন এবং দেখুন। সম্পূর্ণ চক্রটি আপনি সময়কাল হিসাবে সেট করুন না কেন, তারপর লুপ করে। বোতাম, শিরোনাম এবং চিত্রগুলি প্রভাবিত না হয়ে উপরে বসে।
একটি ব্যবহারিক নোট: অন্ধকার পাঠ্য হালকা গ্রেডিয়েন্ট স্টপে পাঠযোগ্য থাকে তবে স্যাচুরেটেডগুলিতে অদৃশ্য হয়ে যেতে পারে। সেটের প্রতিটি রঙের বিপরীতে আপনার শিরোনাম পরীক্ষা করুন, শুধুমাত্র প্রথম ফ্রেমে নয়।
যেখানে অ্যানিমেটেড গ্রেডিয়েন্ট ভালো কাজ করে #
- হিরো বিভাগ। একটি ভারী ব্যাকগ্রাউন্ড ভিডিও ছাড়া ভাঁজ উপরে গতি।
- কল-টু-অ্যাকশন ব্যান্ড। একটি স্থানান্তরিত ব্যাকড্রপ এটির উপর চড়ে থাকা বোতামের দিকে চোখ টানে।
- শীঘ্রই আসছে এবং ল্যান্ডিং পেজ। একটি পূর্ণ-স্ক্রীন গ্রেডিয়েন্ট নিজেই একটি বিক্ষিপ্ত পৃষ্ঠা বহন করে।
- পোর্টফোলিও এবং এজেন্সি সাইট। ব্র্যান্ডের রঙগুলি হেডারের মাধ্যমে সাইকেল চালাচ্ছে, স্টক ভিডিওর জন্য অর্থ প্রদান ছাড়াই৷।
- মূল্য বিভাগ। হাইলাইট করা পরিকল্পনার পিছনে একটি সূক্ষ্ম গ্রেডিয়েন্ট এটিকে বাকি থেকে আলাদা করে।
ভিডিও টিউটোরিয়াল #
স্ক্র্যাচ থেকে নির্মিত গ্রেডিয়েন্ট দেখুন, এক্সটেনশন সক্ষম করা থেকে সমাপ্ত চলমান পটভূমিতে।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
আমি কিভাবে এলিমেন্টরে একটি অ্যানিমেটেড গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড যোগ করব?
মাস্টার অ্যাডঅন এক্সটেনশন ট্যাবে অ্যানিমেটেড গ্রেডিয়েন্ট বিজি এক্সটেনশন সক্ষম করুন, একটি ধারক, বিভাগ বা কলাম নির্বাচন করুন এবং স্টাইল ট্যাব খুলুন। অ্যানিমেটেড গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড প্যানেলে অ্যানিমেটেড গ্রেডিয়েন্ট সক্ষম করুন চালু করুন, দুই বা ততোধিক রঙ যোগ করুন এবং ব্যাকগ্রাউন্ড অবিলম্বে সাইকেল চালানো শুরু করে।
গ্রেডিয়েন্ট কত রং ব্যবহার করতে পারে?
আপনি কালার রিপিটারে যতগুলি যোগ করবেন। প্রতিটি অ্যাড আইটেম ক্লিক আরেকটি গ্রেডিয়েন্ট স্টপ তৈরি করে, এবং আপনার সেট করা মোট সময়কালের মধ্যে তাদের সকলের মাধ্যমে অ্যানিমেশন চক্র। দুই থেকে চারটি রঙ বেশিরভাগ ডিজাইন কভার করে।
আমি কি গ্রেডিয়েন্ট অ্যানিমেশনের গতি নিয়ন্ত্রণ করতে পারি?
হ্যাঁ। মোট অ্যানিমেশনের সময়কাল 1 থেকে 20 পর্যন্ত একটি পূর্ণ চক্রে কত সেকেন্ড সময় লাগে তা নির্ধারণ করে এবং অ্যানিমেশন প্রভাব সহজীকরণ সেট করে। ট্রানজিশন স্মুথনেস স্লাইডার বর্তমান সংস্করণে অ্যানিমেশনকে প্রভাবিত করে না।
অ্যানিমেটেড গ্রেডিয়েন্ট কি আমার পৃষ্ঠাকে ধীর করে দেয়?
প্রভাবটি একটি ভিডিও বা চিত্র ফাইলের পরিবর্তে একটি ছোট স্ক্রিপ্ট দ্বারা সেট আপ করা একটি CSS অ্যানিমেশন, তাই ডাউনলোড করার জন্য খুব কম অতিরিক্ত রয়েছে৷ এটি একটি হিরো বিভাগে গতি রাখার হালকা উপায়গুলির মধ্যে একটি।
অ্যানিমেটেড গ্রেডিয়েন্ট বিজি এক্সটেনশন কি বিনামূল্যে?
নং অ্যানিমেটেড গ্রেডিয়েন্ট বিজি মাস্টার অ্যাডঅনসে একটি প্রো এক্সটেনশন। Elementor একটি বিনামূল্যে গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড টাইপ আছে, কিন্তু যে গ্রেডিয়েন্ট সরানো হয় না।
মোড়ানো #
দ্য অ্যানিমেটেড গ্রেডিয়েন্ট বিজি এক্সটেনশন একটি বিভাগের পটভূমিকে ধীর গতির রঙে পরিণত করে: একটি রঙের তালিকা, একটি কোণ, একটি সময়কাল এবং একটি সহজীকরণ৷ প্যালেটটি শক্ত রাখুন, প্রতিটি স্টপের বিপরীতে পাঠ্যের বৈসাদৃশ্য পরীক্ষা করুন এবং বিভাগটি শূন্য সম্পদ ওজন সহ গতি বহন করে। এটা সঙ্গে ভাল জোড়া এন্ট্রান্স অ্যানিমেশন এক্সটেনশন চলমান পটভূমিতে আসা সামগ্রীর জন্য, বিনামূল্যে গ্রেডিয়েন্ট হেডলাইন উইজেট গ্রেডিয়েন্ট টেক্সট কভার করে, এবং এর সম্পূর্ণ সেট মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন এক পৃষ্ঠা দূরে।