গ্রিড লেআউট পরিপাটি, এবং পরিপাটি বিরক্তিকর হতে পারে। একটি চিত্র যা তার কলামের বাইরে ঝুঁকে পড়ে, বা একটি কার্ড যা কার্সারের নীচে সামান্য বৃদ্ধি পায়: এই ধরনের ছোট রূপান্তরগুলি একটি স্ট্যাক করা পৃষ্ঠা থেকে একটি ডিজাইন করা পৃষ্ঠাকে আলাদা করে। দ্য রূপান্তর এক্সটেনশন মধ্যে মাস্টার অ্যাডনস প্রো প্রতিটি উপাদানে একটি রূপান্তর প্যানেল যোগ করে: অনুবাদ করুন, ঘোরান, স্কেল করুন, তির্যক করুন এবং ফ্লিপ করুন, স্বাভাবিক এবং হোভার অবস্থার জন্য পৃথক সেটিংস সহ।
ট্রান্সফর্ম এক্সটেনশন কি করে #
একবার সক্রিয় হয়ে গেলে, প্রতিটি এলিমেন্টর উপাদান একটি পায় রূপান্তরিত করে এর অধীনে ধারা উন্নত ট্যাব। উল্টানো সক্রিয় রূপান্তর হ্যাঁ এবং ছয়টি নিয়ন্ত্রণ উপস্থিত হয়, প্রতিটি প্রকৃত লেআউট প্রবাহকে স্পর্শ না করেই উপাদানটিতে একটি CSS রূপান্তর প্রয়োগ করে:
- অনুবাদ: x এবং Y অক্ষ বরাবর উপাদানটিকে পিক্সেলে -1000 থেকে 1000 পর্যন্ত সরান।
- ঘোরানো: এটিকে X, Y বা Z অক্ষে চালু করুন, -180 থেকে 180 ডিগ্রি পর্যন্ত।
- স্কেল: প্রতিটি অক্ষে এটিকে 0 থেকে 5 পর্যন্ত স্বাধীনভাবে বড় করুন বা সঙ্কুচিত করুন।
- তির্যক: একটি তির্যক, গতিশীল চেহারা জন্য এটি তির্যক।
- ফ্লিপ অনুভূমিক /উল্টা উল্লম্ব: এক ক্লিকে মিরর করুন।
দ্য স্বাভাবিক এবং ঘোরাঘুরি করা ট্যাবগুলি পৃথক মান ধারণ করে, তাই একটি উপাদান বিশ্রামে একভাবে বসতে পারে এবং কার্সারটি এটিতে অবতরণ করলে রূপান্তর করতে পারে, আপনার নিয়ন্ত্রণে একটি ট্রানজিশন সময়কাল সহ।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? অনুসরণ কর ইনস্টলেশন গাইড প্রথম।
- ক মাস্টার অ্যাডনস প্রো লাইসেন্স, কারণ ট্রান্সফর্মস একটি প্রো এক্সটেনশন।
ট্রান্সফর্ম এক্সটেনশন কীভাবে সক্ষম করবেন #
আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে, যান মাস্টার অ্যাডনস এবং খুলুন এক্সটেনশন ট্যাব। রূপান্তর বসে অ্যানিমেশন উইজেট একটি হট ব্যাজ সঙ্গে গ্রুপ, মধ্যে প্রবেশ অ্যানিমেশন এবং প্রকাশ করুন। এর টগল ক্লিক করুন যাতে এটি বেগুনি হয়ে যায়, তারপর আঘাত করুন পরিবর্তন সংরক্ষণ করুন এবং সবুজ “Settings সফলভাবে সংরক্ষিত" নোটিশের জন্য অপেক্ষা করুন।
একটি উপাদানে ট্রান্সফর্ম প্যানেল খুলুন #
এলিমেন্টর এডিটরে এলিমেন্ট নির্বাচন করুন, ডেমোতে একটি ইমেজ উইজেট, এবং খুলুন উন্নত ট্যাব। প্রসারিত করুন রূপান্তরিত করে বেগুনি MA ব্যাজ এবং সুইচ সহ বিভাগ সক্রিয় রূপান্তর হ্যাঁ। ছয়টি ট্রান্সফর্ম কন্ট্রোল নরমাল এবং হোভার ট্যাবের অধীনে প্রদর্শিত হয়, প্রতিটি তার পেন্সিল আইকন দিয়ে খোলা থাকে।
উপাদানটি সরান এবং স্কেল করুন #
পাশের পেন্সিলটিতে ক্লিক করুন অনুবাদ করা এবং দুটি স্লাইডার খোলা: X অনুবাদ করুন এবং Y অনুবাদ করুন। ডেমোটি X অক্ষের উপর চিত্র 71 ঠেলে দেয় এবং স্লাইডারটি সরানোর সাথে সাথে এটি ক্যানভাসের অংশের প্রান্তের দিকে স্লাইড করে। মানগুলি পিক্সেলে রয়েছে এবং প্রতিটি অক্ষের প্রতি ডিভাইসের নিজস্ব প্রতিক্রিয়াশীল সেটিং রয়েছে৷।
দ্য স্কেল নিয়ন্ত্রণ একই ভাবে কাজ করে। ডেমোতে স্কেল X-কে 1.4-এ সেট করা চিত্রটিকে তার কলামের বাইরে বড় করে, একটি প্লেইন গ্রিড ফ্রেমিং ব্রেকআউটের জন্য বিভাগের সীমানাকে ওভারল্যাপ করে। স্কেল Y এর ডিফল্ট 1 এ থাকে যদি না আপনি এটি পরিবর্তন করেন, তাই উভয়কে সমান বৃদ্ধির জন্য সেট করুন।
ঘোরান এবং তির্যক একই ভাবে কাজ করুন। কন্ট্রোল খুলুন, স্লাইডারটি টেনে আনুন এবং ক্যানভাসটি আপনার যাওয়ার সাথে সাথে কোণটি দেখায়।
একটি হোভার রূপান্তর যোগ করুন #
সুইচ ঘোরাঘুরি করা ট্যাব এবং একই নিয়ন্ত্রণগুলি শুধুমাত্র কার্সারটি উপাদানটিতে থাকাকালীন প্রযোজ্য, এছাড়াও দুটি অতিরিক্ত: অনুভূমিক উল্টান এবং উল্লম্ব উল্টানো হ্যাঁ/না সুইচ হয়ে যান এবং ক ট্রানজিশন ডিউরেশন (ms) স্লাইডার নিয়ন্ত্রণ করে যে পরিবর্তনটি কত দ্রুত অ্যানিমেট হয়। ডেমোটি 400ms ট্রানজিশনের সাথে ফ্লিপ হরাইজন্টাল চালু করে, তাই ছবিটি হোভারে মসৃণভাবে মিরর করে এবং কার্সার চলে গেলে ফিরে আসে।
পৃষ্ঠায় ফলাফল #
প্রকাশ করুন এবং সামনের প্রান্তটি পরীক্ষা করুন। চিত্রটি ঠিক সম্পাদকে সাজানো হিসাবে তার কলামের পাশ দিয়ে স্থানান্তরিত এবং বড় করা হয়েছে এবং এটি ঘোরানো 400ms সহজে ফ্লিপ চালায়। রূপান্তরগুলি একটি ছোট স্টাইলশীট সহ প্লেইন CSS, এবং উপাদানটির চারপাশের বিন্যাস কখনই পুনরায় প্রবাহিত হয় না।
একটি জিনিস মনে রাখবেন: রূপান্তরগুলি শুধুমাত্র চাক্ষুষ। উপাদানটি এখনও লেআউটে তার আসল স্থান দখল করে আছে, তাই একটি ভারী অনুবাদ করা উপাদান তার প্রতিবেশীদের ওভারল্যাপ করতে পারে। এটি সাধারণত বিন্দু, কিন্তু ট্যাবলেট এবং মোবাইল চেক করুন, যেখানে একই অফসেট স্ক্রীনের বেশি কভার করে।
যেখানে রূপান্তর তাদের জায়গা অর্জন করে #
- ব্রেকআউট ছবি। একটি ফটো স্কেল করা হয়েছে এবং এর কলামের প্রান্ত অতিক্রম করেছে একটি হিরো বিভাগের গভীরতা দেয়।
- হোভার ফিডব্যাক। যে কার্ডগুলি কার্সারের নীচে উত্তোলন, কাত বা সামান্য বৃদ্ধি পায় সেগুলি ক্লিকযোগ্য হিসাবে পড়ে।
- ঘোরানো উচ্চারণ। ব্যাজ, স্ট্যাম্প এবং লেবেলগুলি সামান্য কোণে আরও স্বাভাবিকভাবে বসে।
- তির্যক বিভাগ। একটি বিভাজক বা বোতামে কয়েক ডিগ্রি তির্যক আয়তক্ষেত্রের একঘেয়েমি ভেঙে দেয়।
- মিরর করা সম্পদ। একটি দ্বিতীয় চিত্র রপ্তানি করার পরিবর্তে একটি তীর বা চিত্রণ উল্টান৷।
ভিডিও টিউটোরিয়াল #
প্রকাশিত পৃষ্ঠায় এক্সটেনশন সক্ষম করা থেকে হোভার ফ্লিপ পর্যন্ত প্রতিটি নিয়ন্ত্রণ কর্মে দেখুন।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
আমি কিভাবে এলিমেন্টরে একটি উপাদান ঘোরাতে বা স্কেল করব?
মাস্টার অ্যাডঅন এক্সটেনশন ট্যাবে ট্রান্সফর্ম এক্সটেনশন সক্ষম করুন, উপাদান নির্বাচন করুন এবং উন্নত ট্যাবের অধীনে ট্রান্সফর্ম খুলুন। সক্রিয় রূপান্তরগুলি চালু করুন, তারপরে ঘোরান বা স্কেল নিয়ন্ত্রণ ব্যবহার করুন; আপনি স্লাইডার টেনে আনলে ক্যানভাস লাইভ পরিবর্তনের পূর্বরূপ দেখায়। অ্যাডভান্সড ট্যাবে এলিমেন্টরের নিজস্ব ট্রান্সফর্ম বিভাগ বিনামূল্যে অনুরূপ নিয়ন্ত্রণ অফার করে।
আমি কি হোভারে একটি ভিন্ন রূপান্তর প্রয়োগ করতে পারি?
হ্যাঁ। প্যানেলে আলাদা নরমাল এবং হোভার ট্যাব আছে। সাধারন বিশ্রামের মান সেট করুন, হোভারে হোভার মান সেট করুন এবং দুটি অবস্থার মধ্যে উপাদানটি কত দ্রুত অ্যানিমেট হয় তা নিয়ন্ত্রণ করতে ট্রানজিশন ডিউরেশন স্লাইডার ব্যবহার করুন।
রূপান্তর কি আমার পৃষ্ঠার বিন্যাস ভেঙে দেয়?
না। CSS রূপান্তরগুলি শুধুমাত্র ভিজ্যুয়াল, তাই উপাদানটি লেআউটে তার আসল স্থান রাখে এবং আশেপাশের বিষয়বস্তু কখনই রিফ্লো করে না। একটি রূপান্তরিত উপাদান ডিজাইনের মাধ্যমে প্রতিবেশীদের ওভারল্যাপ করতে পারে, তাই অফসেটগুলি এখনও সঠিক দেখাচ্ছে তা নিশ্চিত করতে ট্যাবলেট এবং মোবাইলের পূর্বরূপ দেখুন।
এক্সটেনশন কোন রূপান্তর অন্তর্ভুক্ত করে?
X এবং Y অনুবাদ করুন, X, Y এবং Z ঘোরান, স্কেল X এবং Y, Skew X এবং Y, ফ্লিপ অনুভূমিক, এবং ফ্লিপ উল্লম্ব, প্রতিটি স্বাভাবিক এবং হোভার উভয় অবস্থায় উপলব্ধ। স্লাইডারগুলি প্রতিক্রিয়াশীল, তাই প্রতি ডিভাইসে মান আলাদা হতে পারে।
ট্রান্সফর্ম এক্সটেনশন কি বিনামূল্যে?
নং ট্রান্সফর্মস মাস্টার অ্যাডঅন-এ একটি প্রো এক্সটেনশন। এলিমেন্টরেরও একই ধরনের নিয়ন্ত্রণ সহ অ্যাডভান্সড ট্যাবে একটি বিনামূল্যের ট্রান্সফর্ম বিভাগ রয়েছে এবং ট্রান্সফর্মস এক্সটেনশন পৃষ্ঠা দুটির তুলনা করে।
মোড়ানো #
দ্য রূপান্তর এক্সটেনশন এলিমেন্টর প্যানেলের ভিতরে আপনাকে CSS ট্রান্সফর্ম টুলকিট দেয়: হোভার স্টেট এবং মসৃণ ট্রানজিশন সহ যেকোন কিছু সরান, ঘোরান, স্কেল করুন, তির্যক করুন এবং ফ্লিপ করুন। একটি ব্রেকআউট ইমেজ বা একটি হোভার লিফট দিয়ে শুরু করুন এবং সেখান থেকে তৈরি করুন। এটি স্বাভাবিকভাবেই এর সাথে যুক্ত হয় এন্ট্রান্স অ্যানিমেশন এক্সটেনশন গতিতে আসা উপাদানগুলির জন্য, এবং এর সম্পূর্ণ লাইনআপ মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন বাকিগুলো ঢেকে দেয়।
