দ্য মাস্টার অ্যাডঅন উইজেট নির্মাতা এলিমেন্টর প্যানেলে সম্পাদনাযোগ্য নিয়ন্ত্রণ সহ আপনার নিজস্ব HTML, CSS এবং JavaScript কে একটি বাস্তব এলিমেন্টর উইজেটে পরিণত করে। আপনি বিকল্প প্যানেল ডিজাইন করেন, শর্টকোড সহ আপনার কোডের সাথে এটি সংযুক্ত করুন এবং উইজেটটি যেকোনো নেটিভ এলিমেন্টর উপাদানের মতো আচরণ করে। কোন পিএইচপি নেই, কোন প্লাগইন বয়লারপ্লেট নেই, জাগল করার জন্য কোন আলাদা কোড এডিটর নেই।
এখানে বর্ণিত সবকিছুর নিচে দুটি সিস্টেম চলে: শর্তাবলী অন্য ক্ষেত্রের মানের উপর ভিত্তি করে কোনো নিয়ন্ত্রণ দেখান বা লুকান, এবং টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিন আপনার ক্ষেত্রের নামগুলিকে টোকেনে পরিণত করে, {% if %} চেক, এবং {% for %} HTML, CSS, এবং JS ট্যাবে লুপ। উভয় গাইড সেটআপ এবং সীমাবদ্ধতা কভার করে।
এই নির্দেশিকাটি উইজেট বিল্ডার বিকল্প প্যানেলের মধ্য দিয়ে চলে ঠিক যেমনটি স্ক্রিনে প্রদর্শিত হয়: একটি নতুন উইজেট যোগ করা, বিষয়বস্তু, শৈলী এবং উন্নত ট্যাবে ক্ষেত্রগুলি টেনে আনা, কোড লেখা, গতিশীল শর্টকোড ব্যবহার করা, CDN লাইব্রেরি লোড করা এবং অবশেষে রপ্তানি বা আমদানি করা একটি JSON ফাইল হিসাবে একটি উইজেট। আপনি বৈশিষ্ট্য খুঁজে পেতে পারেন উইজেট নির্মাতা পৃষ্ঠা এবং সম্পূর্ণ ভিতরে উইজেট এবং এক্সটেনশন তালিকা।
উইজেট নির্মাতা কি করে #
বেশিরভাগ অ্যাডঅন আপনাকে উইজেটগুলির একটি নির্দিষ্ট সেট দেয়। এটি আপনাকে আপনার নিজের তৈরি করার সরঞ্জাম দেয়। আপনি রেডিমেড ফিল্ড টাইপ (শিরোনাম, পাঠ্য, রঙ, সংখ্যা, মাত্রা, সুইচার এবং আরও অনেক কিছু) থেকে একটি বিকল্প প্যানেল একত্রিত করেন, আপনার কোডটি ড্রপ করেন এবং সাধারণ শর্টকোড টোকেনগুলির সাথে সেই কোডের সাথে ক্ষেত্রগুলিকে আবদ্ধ করুন৷ উইজেট সংরক্ষণ করুন এবং মাস্টার অ্যাডঅন একটি শর্টকোড এবং একটি এলিমেন্টর উইজেট উভয়ই নিবন্ধন করে যা আপনি যেকোনো পৃষ্ঠায় টেনে আনতে পারেন।
এটিকে একটি কোডপেন-স্টাইলের স্নিপেট এবং একটি সম্পূর্ণ সম্পাদনাযোগ্য এলিমেন্টর উইজেটের মধ্যে সেতু হিসাবে ভাবুন৷ একবার এটি তৈরি হয়ে গেলে, আপনার দলের যে কেউ উত্সটি না খুলেই এলিমেন্টর সম্পাদক থেকে রঙ, ব্যবধান এবং পাঠ্য পরিবর্তন করতে পারে।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর পৃষ্ঠা নির্মাতা ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? অনুসরণ কর ইনস্টলেশন গাইড প্রথম।
- বেসিক এইচটিএমএল এবং সিএসএস। জাভাস্ক্রিপ্ট ঐচ্ছিক এবং শুধুমাত্র ইন্টারেক্টিভ উইজেটের জন্য প্রয়োজন।
উইজেট বিল্ডার খুলুন এবং একটি নতুন উইজেট যোগ করুন #
ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে, যান মাস্টার অ্যাডঅন → উইজেট নির্মাতা. এই খোলে মাস্টার অ্যাডঅন উইজেট স্ক্রীন, যা আপনার তৈরি করা প্রতিটি কাস্টম উইজেটের বিভাগ, লেখক এবং জেনারেট করা শর্টকোড সহ তালিকাভুক্ত করে। শীর্ষে আপনি তিনটি বোতাম দেখতে পাবেন: নতুন উইজেট যোগ করুন, উইজেট আমদানি করুন, এবং ভিডিও টিউটোরিয়াল.
ক্লিক করুন নতুন উইজেট যোগ করুন. ক নতুন উইজেট তৈরি করুন ডায়ালগ দুটি ক্ষেত্র সহ প্রদর্শিত হয়:
- উইজেট শিরোনাম (প্রয়োজনীয়): আপনার উইজেটের জন্য একটি বর্ণনামূলক নাম, উদাহরণস্বরূপ “ Section”। আপনি পরে এলিমেন্টর প্যানেলে এটিই অনুসন্ধান করবেন, তাই এটিকে এমন কিছু করুন যা আপনি চিনতে পারবেন।
- উইজেট বিভাগ: এলিমেন্টর ক্যাটাগরির অধীনে উইজেটটি গোষ্ঠীভুক্ত করা হয়েছে (ডিফল্টরূপে প্রিয়)। বিভাগগুলি আপনার কাস্টম উইজেটগুলিকে সম্পাদকে সংগঠিত রাখে।
একটি শিরোনাম লিখুন, একটি বিভাগ চয়ন করুন এবং ক্লিক করুন পরিবর্তন সংরক্ষণ করুন। মাস্টার অ্যাডনস আপনার নতুন উইজেটের জন্য উইজেট বিল্ডার সম্পাদক খোলে।
উইজেট বিল্ডার ইন্টারফেসের ভিতরে #
নির্মাতাকে তিনটি কাজের ক্ষেত্রে বিভক্ত করা হয়েছে, বাম থেকে ডানে:
- ক্ষেত্র প্যানেল (বাম): আপনি আপনার উইজেটে টেনে আনেন নিয়ন্ত্রণের ধরনগুলির একটি অনুসন্ধানযোগ্য লাইব্রেরি, যেমন শিরোনাম, পাঠ্য, পাঠ্যেরিয়া, URL, রঙ, নম্বর, সুইচার, নির্বাচন করুন, চয়ন করুন, WYSIWYG, কোড এবং তারিখ সময়৷।
- সেটিংস প্যানেল (কেন্দ্র): দ্য বিষয়বস্তু, শৈলী, এবং উন্নত ট্যাব যেখানে আপনি সেই ক্ষেত্রগুলিকে বিভাগে সাজান। এটি হল আসল বিকল্প প্যানেল যা আপনার ব্যবহারকারীরা এলিমেন্টরে দেখতে পাবেন।
- কোড প্যানেল (ডানে): দ্য এইচটিএমএল, সিএসএস, জেএস, এবং অন্তর্ভুক্ত করা ট্যাব যেখানে আপনি মার্কআপ, শৈলী, স্ক্রিপ্ট এবং লাইব্রেরি রেফারেন্স লেখেন।
উপরের বারটির পাশে একটি সেটিংস গিয়ার আইকন সহ উইজেটের নাম রয়েছে, প্লাস পূর্বরূপ এবং সেটিংস সংরক্ষণ করুন বোতাম।
বিকল্প প্যানেল তৈরি করুন: বিষয়বস্তু, শৈলী এবং উন্নত ট্যাব #
এখানেই আপনি নিয়ন্ত্রণগুলি ডিজাইন করেন। বাম প্যানেল থেকে একটি ক্ষেত্র বাছাই করুন এবং এটির অধীনে একটি বিভাগে টেনে আনুন বিষয়বস্তু, শৈলী, বা উন্নত ট্যাব। এলিমেন্টর ব্যবহার করে একই যুক্তি অনুসরণ করুন: বিষয়বস্তুর অধীনে পাঠ্য এবং লিঙ্ক, শৈলীর অধীনে রঙ এবং টাইপোগ্রাফি, উন্নত অধীনে ব্যবধান এবং বিন্যাস।
প্রতিটি বিভাগে একটি আছে বিভাগের শিরোনাম (বিভাগের শিরোনামে দেখানো লেবেল) এবং ক বিভাগের নাম, একটি অনন্য শনাক্তকারী যা আপনি আপনার কোডে উল্লেখ করবেন। উইজেটের প্রয়োজন অনুযায়ী অনেকগুলি বিভাগ এবং ক্ষেত্র যোগ করুন।
উদাহরণস্বরূপ, একটি ড্রপ রঙের ক্ষেত্র ব্যবহারকারীদের উইজেট পুনরায় রঙ করতে দিতে স্টাইল ট্যাবে, এবং ক মাত্রা ক্ষেত্র চার দিকে প্যাডিং নিয়ন্ত্রণ করতে উন্নত ট্যাবে প্রবেশ করুন। আপনি যদি বিকল্পগুলির সম্পূর্ণ তালিকা চান তবে প্রতিটি ক্ষেত্রের প্রকারের নিজস্ব ডকুমেন্টেশন রয়েছে।
ডায়নামিক শর্টকোড: আপনার কোডের সাথে ক্ষেত্র সংযুক্ত করুন #
এই অংশ যে সবকিছু একসঙ্গে বন্ধন। আপনার যোগ করা প্রতিটি ক্ষেত্র একটি উৎপন্ন করে শর্টকোড টোকেন, এবং যারা টোকেন প্রদর্শিত ডকুমেন্টেশন কোড এডিটরের পাশে সাইডবার। একটি রঙ ক্ষেত্র যোগ করুন এবং আপনি পাবেন {{color}}। একটি মাত্রা ক্ষেত্র যোগ করুন এবং আপনি পাবেন {{dimensions}}.
এই টোকেনগুলিকে আপনার HTML, CSS, বা JS-এ ড্রপ করুন যেখানে আপনি ফিল্ডের মান ল্যান্ড করতে চান। যখন একজন ব্যবহারকারী এলিমেন্টরে সেই নিয়ন্ত্রণ পরিবর্তন করে, তখন মাস্টার অ্যাডনস লাইভ মানের জন্য টোকেন অদলবদল করে, যাতে আপনার কোড গতিশীল থাকে। মনে রাখার একটি জিনিস: টোকেনটি শুধুমাত্র একবার বিদ্যমান থাকে যখন ম্যাচিং ফিল্ডটি প্যানেলে থাকে, তাই প্রথমে ক্ষেত্রটি তৈরি করুন, তারপর এর শর্টকোড উল্লেখ করুন।
আপনার HTML, CSS, এবং JS যোগ করুন #
প্যানেল এবং শর্টকোড প্রস্তুত থাকায়, ডানদিকের কোড ট্যাবে স্যুইচ করুন এবং আপনার মার্কআপ, শৈলী এবং স্ক্রিপ্ট পেস্ট করুন।
HTML ট্যাব: উইজেট গঠন লিখুন এবং শর্টকোড টোকেন রাখুন যেখানে গতিশীল মান রয়েছে।
CSS ট্যাব: মার্কআপ স্টাইল করুন। প্যানেলে নির্বাচিত রং এবং মাত্রা টানতে একই শর্টকোড টোকেন উল্লেখ করুন।
জেএস ট্যাব: যেকোনো ইন্টারেক্টিভ আচরণের জন্য জাভাস্ক্রিপ্ট যোগ করুন, যেমন হোভার ইফেক্ট বা স্লাইডার। প্লেইন ভ্যানিলা JS কাজ করে, এবং jQuery একবার আপনি এটিকে অন্তর্ভুক্ত করে লোড করলে।
আপনার যদি প্রধান সম্পাদকের পরিবর্তে প্যানেলের ভিতরে একটি কোড ক্ষেত্রের প্রয়োজন হয়, কোড ক্ষেত্র আপনার নিয়ন্ত্রণে একটি সিনট্যাক্স-হাইলাইট করা ইনপুট ড্রপ করে।
অন্তর্ভুক্ত: CDN CSS এবং JS লাইব্রেরি লোড করুন #
খোলা অন্তর্ভুক্ত করা বহিরাগত লাইব্রেরি সংযুক্ত করার জন্য ট্যাব আপনার উইজেট নির্ভর করে। দুটি তালিকা আছে: সিএসএস লাইব্রেরি এবং জেএস লাইব্রেরি. প্রতিটির জন্য আপনি একটি যোগ করুন হাতল (একটি অনন্য নাম) এবং ক উৎস URL বা নিবন্ধিত হ্যান্ডেল, তারপর ক্লিক করুন Css যোগ করুন বা জেএস যোগ করুন.
এইভাবে আপনি আপনার থিম সম্পাদনা না করেই একটি CDN বা jQuery থেকে Font Awesome-এর মতো কিছু টানবেন। উইজেটটি আসলে পৃষ্ঠায় থাকলেই মাস্টার অ্যাডঅন লাইব্রেরি সারিবদ্ধ করে, যাতে আপনার অন্যান্য পৃষ্ঠাগুলি পরিষ্কার থাকে।
উইজেটের ভিতরে আইকন প্রয়োজন? মাস্টার অ্যাডনস আটটি বান্ডিলও পাঠায় আইকন লাইব্রেরি আপনি একটি বহিরাগত CDN কল ছাড়া ব্যবহার করতে পারেন।
উইজেট সেটিংস: শিরোনাম, আইকন, বিভাগ এবং রপ্তানি #
ক্লিক করুন গিয়ার আইকন খোলার জন্য উপরের বারে উইজেটের নামের পাশে উইজেট সেটিংস বাম প্যানেলে। এখান থেকে আপনি নিয়ন্ত্রণ করেন কিভাবে উইজেট নিজেকে এলিমেন্টরের ভিতরে উপস্থাপন করে:
- উইজেট শিরোনাম: উইজেটের নাম পরিবর্তন করুন। এই শিরোনামটি এলিমেন্টর উইজেট তালিকায় দেখায়।
- উইজেট আইকন: ক্লিক আইকন পরিবর্তন করুন মাস্টার অ্যাডঅন আইকন পিকার থেকে একটি আইকন বাছাই করতে। আপনি যেকোনো অন্তর্ভুক্ত আইকন বা একটি ফন্ট অসাধারণ ক্লাস ব্যবহার করতে পারেন।
- উইজেট বিভাগ: উইজেটটি যে এলিমেন্টর বিভাগের অধীনে প্রদর্শিত হবে সেটি বেছে নিন, তাই এটি সম্পর্কিত উইজেটগুলির সাথে গোষ্ঠীবদ্ধ হয়।
- রপ্তানি উইজেট: পুরো উইজেট কনফিগারেশনটিকে একটি JSON ফাইল হিসাবে রপ্তানি করুন যা আপনি সংরক্ষণ করতে, ব্যাক আপ করতে বা কারও সাথে ভাগ করতে পারেন।
আইকন পিকার হাজার হাজার আইকনকে অল আইকন, এলিমেন্টর আইকন, সিম্পল লাইন আইকন, আইকনিক ফন্ট আইকন, লিনিয়ার আইকন এবং ম্যাটেরিয়াল আইকন-এর মতো বিভাগে গোষ্ঠীভুক্ত করে। নাম অনুসারে ফিল্টার করুন, একটি নির্বাচন করুন এবং ক্লিক করুন ঢোকান.
একটি JSON ফাইল থেকে একটি উইজেট আমদানি করুন #
শেয়ারিং উভয় উপায়ে কাজ করে। ফিরে মাস্টার অ্যাডঅন উইজেট স্ক্রীন, ক্লিক করুন উইজেট আমদানি করুন বোতাম। ডায়ালগ আপনাকে একটি টেনে আনতে এবং ড্রপ করতে দেয় .json ফাইল, বা এটির জন্য ব্রাউজ করুন। কেবল .json উইজেট বিল্ডার থেকে রপ্তানি করা ফাইলগুলি সমর্থিত।
উইজেটের JSON ফাইল সহ যে কেউ এটি আমদানি করতে পারে, প্যানেল, কোড, অন্তর্ভুক্ত এবং সমস্ত, তারপর সেকেন্ডের মধ্যে তাদের নিজস্ব সাইটে এটি ব্যবহার করতে পারে। এটি উইজেট নির্মাতাকে প্রকল্প জুড়ে উইজেটগুলি পুনরায় ব্যবহার করার বা ক্লায়েন্টের কাছে হস্তান্তর করার একটি পরিপাটি উপায় করে তোলে।
নির্ভরযোগ্য কাস্টম উইজেট নির্মাণের জন্য টিপস #
- নাম বিভাগ পরিষ্কারভাবে। বিভাগের নামটি আপনার কোডে শেষ হয়, তাই এটিকে সংক্ষিপ্ত এবং অর্থপূর্ণ রাখুন।
- আপনি এর শর্টকোড উল্লেখ করার আগে একটি ক্ষেত্র যোগ করুন। টোকেনগুলি শুধুমাত্র ম্যাচিং ফিল্ড প্যানেলে থাকার পরেই বিদ্যমান।
- প্রায়ই পূর্বরূপ ব্যবহার করুন। সংরক্ষণ করার আগে লাইভ প্রিভিউ চেক করুন যাতে আপনি লাইভ পৃষ্ঠার পরিবর্তে একটি অনুপস্থিত টোকেন তাড়াতাড়ি ধরতে পারেন।
- ইনক্লুডের মাধ্যমে লাইব্রেরি লোড করুন, ইনলাইন নয়। এটি আপনার কোড পরিষ্কার রাখে এবং স্ক্রিপ্টগুলি যেখানে প্রয়োজন সেখানে লোড করে।
- আপনি যেতে হিসাবে রপ্তানি। একটি JSON এক্সপোর্ট আপনার ব্যাকআপ এবং আপনার শেয়ার ফাইল হিসাবে দ্বিগুণ হয়।
- Elementor এ আপনার উইজেট দেখছেন না? চেক করুন সমস্যা সমাধানের নির্দেশিকা দৃশ্যমানতা সংশোধনের জন্য।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডনস উইজেট নির্মাতা কি?
উইজেট বিল্ডার হল এলিমেন্টরের জন্য মাস্টার অ্যাডঅন-এর একটি টুল যা আপনার নিজস্ব HTML, CSS এবং JavaScriptকে একটি সম্পাদনাযোগ্য এলিমেন্টর উইজেটে পরিণত করে। আপনি ড্র্যাগ-এন্ড-ড্রপ ক্ষেত্রগুলি থেকে একটি বিকল্প প্যানেল ডিজাইন করেন এবং শর্টকোড টোকেনগুলির সাথে এটিকে আপনার কোডের সাথে সংযুক্ত করেন, কোন PHP প্রয়োজন নেই৷।
কিভাবে {{color}} এবং {{dimensions}} শর্টকোড কাজ করে?
বিকল্প প্যানেলে আপনি যোগ করা প্রতিটি ক্ষেত্র একটি শর্টকোড টোকেন তৈরি করে, যেমন {{color}} বা {{dimensions}}। আপনি আপনার HTML, CSS, বা JS-এ টোকেন রাখেন এবং মাস্টার অ্যাডঅন এটিকে এলিমেন্টরে ব্যবহারকারীর সেট করা মান দিয়ে প্রতিস্থাপন করে, যা উইজেটকে গতিশীল করে তোলে।
আমি কি একটি কাস্টম উইজেটে বহিরাগত CSS এবং JS লাইব্রেরি যোগ করতে পারি?
হ্যাঁ। অন্তর্ভুক্ত ট্যাবটি খুলুন, CSS লাইব্রেরি বা JS লাইব্রেরির অধীনে একটি হ্যান্ডেল এবং একটি CDN উত্স URL যোগ করুন, তারপর যোগ করুন ক্লিক করুন৷ মাস্টার অ্যাডঅনগুলি শুধুমাত্র উইজেট ব্যবহার করে এমন পৃষ্ঠাগুলিতে লাইব্রেরি লোড করে, তাই এটি আপনার সাইটের বাকি অংশকে ধীর করে না।
আমি কিভাবে একটি কাস্টম এলিমেন্টর উইজেট শেয়ার করব?
গিয়ার আইকন থেকে উইজেট সেটিংস খুলুন এবং একটি JSON ফাইল ডাউনলোড করতে এক্সপোর্ট উইজেটে ক্লিক করুন। যে কেউ তারপর সেই JSON ফাইলটিতে টেনে আনতে এবং তাদের নিজস্ব সাইটে উইজেট ব্যবহার করতে উইজেট বিল্ডার স্ক্রিনে আমদানি উইজেট বোতামটি ব্যবহার করতে পারে।
উইজেট নির্মাতা কি বিনামূল্যে অন্তর্ভুক্ত?
উইজেট বিল্ডার এলিমেন্টরের জন্য মাস্টার অ্যাডঅনগুলির অংশ। দেখা মূল্য পৃষ্ঠা বর্তমান প্ল্যান ব্রেকডাউনের জন্য এবং প্রতিটি স্তরে কোন বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করা হয়েছে।
মোড়ানো #
মাস্টার অ্যাডনস উইজেট বিল্ডার একটি কোড স্নিপেট এবং একটি প্রোডাকশন এলিমেন্টর উইজেটের মধ্যে ব্যবধান বন্ধ করে। প্যানেল তৈরি করুন, আপনার HTML, CSS, এবং JS লিখুন, এটিকে শর্টকোড টোকেন দিয়ে ওয়্যার আপ করুন, আপনার প্রয়োজনীয় যেকোন লাইব্রেরি লোড করুন, তারপর JSON হিসাবে ফলাফল রপ্তানি বা আমদানি করুন। বাকিগুলো দেখে নিন মাস্টার অ্যাডঅন উইজেট লাইব্রেরি আপনি আর কি নির্মাণ করতে পারেন দেখতে।
