দ্য আইকন ক্ষেত্র আপনার উইজেটের প্যানেলে Elementor-এর সম্পূর্ণ আইকন লাইব্রেরি পিকার রাখে: Font Awesome, সাইটে নিবন্ধিত যেকোনো কাস্টম আইকন লাইব্রেরি এবং সরাসরি SVG আপলোড, আইকন চয়নকারী সম্পাদকরা ইতিমধ্যেই জানেন। মাস্টার অ্যাডঅন ভিতরে উইজেট নির্মাতা, এটি বৈশিষ্ট্য বুলেট, তথ্য বাক্স, সামাজিক সারি এবং অন্য প্রতিটি স্থানের ক্ষেত্র যেখানে একটি ছোট প্রতীক অর্থ বহন করে।
প্রতিটি উইজেট বিল্ডার ক্ষেত্রের মতো, আইকন নিয়ন্ত্রণ সমর্থন করে শর্তাবলী, শুধুমাত্র যখন একটি “enable icon” টগল চালু থাকে তখনই পিকার দেখানোর জন্য উপযোগী, এবং এর আউটপুট এর মাধ্যমে রেন্ডার হয় টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিন। উভয় গাইডই বিশদ বিবরণ এবং সীমাবদ্ধতা কভার করে।
মান দুটি কী সহ একটি অ্যারে, value এবং library। সেই আকৃতির একটি ফলাফল রয়েছে যা সামনে উল্লেখ করার মতো: ক্ষেত্রটি সরাসরি মুদ্রণ করা {{ my_icon }} কিছুই আউটপুট। ফন্ট আইকন এবং আপলোড করা SVGগুলিও বিভিন্ন মার্কআপের মাধ্যমে রেন্ডার করে, তাই টেমপ্লেটটির একটি ছোট শাখা প্রয়োজন। উভয় নিদর্শন নীচে, পেস্ট করার জন্য প্রস্তুত।
আইকন ক্ষেত্র কি করে #
- Elementor এর আইকন লাইব্রেরি পিকার খোলে font Awesome, কাস্টম লাইব্রেরি এবং SVG আপলোড সহ।
- একটি অ্যারে হিসাবে বাছাই সংরক্ষণ করে এর
valueএবংlibrary. - ফন্ট আইকনগুলির জন্য একটি ক্লাস স্ট্রিং ধারণ করে:
valueআইকনের ক্লাস, একটি জন্য প্রস্তুত<i>ট্যাগ। - SVG-এর জন্য একটি নেস্টেড ফাইল অ্যারে ধারণ করে:
valueএকটি URL এবং আইডি জোড়া হিসাবে পৌঁছেছে{{ my_icon.value.url }}. - একটি ডিফল্ট এবং একটি প্রস্তাবিত তালিকা গ্রহণ করে, তাই বাছাইকারী উইজেটের সাথে মানানসই আইকনগুলিকে পৃষ্ঠ করতে পারে।
আপনি যদি উইজেট তৈরিতে নতুন হন তবে শুরু করুন উইজেট নির্মাতা ওভারভিউ প্রথম।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
- উইজেট বিল্ডার এডিটরে একটি কাস্টম উইজেট খোলা। আমাদের উদাহরণ হল একটি বৈশিষ্ট্য তালিকা উইজেট যেখানে প্রতিটি উদাহরণ একটি আইকন দেখায়, নাম
feature_icon, একটি ছোট টেক্সট ব্লার্ব পাশে।
কিভাবে একটি আইকন ক্ষেত্র যোগ করতে হয় #
খুঁজে আইকন উইজেট বিল্ডার সম্পাদকের বাম দিকের প্যানেলে ক্ষেত্র, অন্যান্য মিডিয়া ক্ষেত্রগুলির সাথে গোষ্ঠীবদ্ধ৷।
এর অধীনে একটি বিভাগে এটি টেনে আনুন বিষয়বস্তু ট্যাব। একবার এটি অবতরণ করলে, মাঠের বিকল্পগুলি বাম দিকে খোলে।
আইকন ক্ষেত্রের বিকল্পগুলি ব্যাখ্যা করা হয়েছে #
- লেবেল: এলিমেন্টরে পিকারের উপরে দেখানো পাঠ্য, উদাহরণস্বরূপ “ Feature Icon”।
- নাম: ক্ষেত্র, অক্ষর, সংখ্যা এবং আন্ডারস্কোরগুলির জন্য অনন্য শনাক্তকারী, উদাহরণস্বরূপ
feature_icon. - ডিফল্ট: একটি হিসাবে একটি শুরু আইকন
valueএবংlibraryপেয়ার করুন, তাই উইজেট কখনই আইকনবিহীন হয় না। - প্রস্তাবিত: আইকনগুলির একটি সেট যা পিকার প্রথমে পৃষ্ঠ করে, ডিজাইনের সাথে মানানসই পছন্দগুলির দিকে সম্পাদকদের স্টিয়ারিং করে৷।
- বর্ণনা, লেবেল দেখান, বিভাজক: স্ট্যান্ডার্ড ডিসপ্লে সেটিংস, প্লাস ফিল্ড দেখানোর শর্ত শুধুমাত্র যখন অন্য নিয়ন্ত্রণের একটি নির্দিষ্ট মান থাকে।
আপনার টেমপ্লেটে আইকন ক্ষেত্র সংযুক্ত করুন #
প্রথমত, প্রায় সবাই একবার ভুল করে: {{ feature_icon }} কিছুই প্রিন্ট করে না। অ্যারের মানগুলিতে সরাসরি-প্রিন্ট শর্টকাট শুধুমাত্র একটি শীর্ষ-স্তরের আউটপুট দেয় url কী, এবং আইকন অ্যারের কোনোটি নেই, তাই টোকেনটি খালি বেরিয়ে আসে। কোন ত্রুটি নেই, কোন সতর্কতা নেই, শুধুমাত্র একটি ফাঁকা জায়গা যেখানে আইকনটি থাকা উচিত। বৈশিষ্ট্য যেখানে বিষয়বস্তু বাস করে।
ফন্ট আইকন (ফন্ট অসাধারণ এবং অন্যান্য ক্লাস-ভিত্তিক লাইব্রেরি): value ক্লাস স্ট্রিং ধরে, তাই একটি <i> ট্যাগ এটি রেন্ডার করে:
<i class="{{ feature_icon.value }}" aria-hidden="true"></i>আপলোড করা SVG: যখন বাছাই SVG লাইব্রেরি থেকে আসে, value এটি নিজেই একটি URL এবং ID সহ একটি অ্যারে, তাই আইকনটি একটি চিত্র হিসাবে রেন্ডার করে:
<img src="{{ feature_icon.value.url }}" alt="">একটি উইজেট খুব কমই আগে থেকে জানে যে সম্পাদক কোন ধরনের বাছাই করবেন, তাই নির্ভরযোগ্য প্যাটার্ন শাখায় library কী এবং হ্যান্ডেল উভয়ই:
{% if feature_icon.library == 'svg' %}
<img src="{{ feature_icon.value.url }}" alt="">
{% else %}
<i class="{{ feature_icon.value }}"></i>
{% endif %}যেকোন মিডিয়া-টাইপ ফিল্ডের মতো পুরো জিনিসটিকে একটি খালি-স্টেট গার্ডে মুড়ে দিন, তাই একটি আনসেট আইকন কোনও বিপথগামী না করে <i class=""> পিছনে:
{% if feature_icon.value %}
...the branch above...
{% endif %}শুধুমাত্র ফন্ট আইকন দিয়ে পরীক্ষার জন্য সতর্ক থাকুন। দ্য <i>-ট্যাগ সংস্করণ সারা সপ্তাহ কাজ করে, তারপর একটি ক্লায়েন্ট একটি ব্র্যান্ড SVG আপলোড করে এবং আইকনটি অদৃশ্য হয়ে যায়, কারণ একটি ক্লাস অ্যাট্রিবিউট একটি ফাইল অ্যারে ধরে রাখতে পারে না। আপনি যদি ক্ষেত্রটি চালান তবে শাখাটি পাঠান।
Elementor এ আইকন নিয়ন্ত্রণ ব্যবহার করুন #
এলিমেন্টরের একটি পৃষ্ঠায় আপনার কাস্টম উইজেট যোগ করুন, পৃষ্ঠাটি ইতিমধ্যে খোলা থাকলে সম্পাদকটি পুনরায় লোড করুন। ক্ষেত্রটি আপনার লেবেলের অধীনে এলিমেন্টরের আইকন চয়নকারী হিসাবে রেন্ডার করে, বর্তমান আইকনটি দেখায়।
এটিতে ক্লিক করুন এবং আইকন লাইব্রেরি খোলে। অসাধারন ফন্ট অনুসন্ধান করুন, যেকোনো কাস্টম লাইব্রেরি ব্রাউজ করুন বা একটি SVG-এর জন্য আপলোড ট্যাবে স্যুইচ করুন। আপনার টেমপ্লেটের যে কোনো শাখা লাইব্রেরির সাথে মেলে তা দিয়ে চলমান বাছাই এবং পূর্বরূপ আপডেট নিশ্চিত করুন।
সাধারণ ব্যবহারের ক্ষেত্রে #
- বৈশিষ্ট্য এবং সুবিধা তালিকা প্রতি পয়েন্টে একটি চিহ্ন সহ।
- তথ্য এবং আইকন বক্স যেখানে আইকন কার্ডের বিষয় অ্যাঙ্কর করে।
- সামাজিক লিঙ্ক সারি, প্রতিটি উদাহরণ একটি URL ক্ষেত্রের সাথে একটি আইকন যুক্ত করে।
- বোতাম এবং কল টু অ্যাকশন যে একটি ছোট নেতৃস্থানীয় আইকন বহন।
- ধাপ এবং প্রক্রিয়া উইজেট যেখানে সংখ্যাযুক্ত পর্যায়গুলি প্রতিটি একটি মিলে যাওয়া প্রতীক পায়।
আইকন ক্ষেত্রের সাথে কাজ করার জন্য টিপস #
- ক্ষেত্রটি কখনই খালি মুদ্রণ করবেন না।
{{ feature_icon }}কিছুই আউটপুট; আইকন বাস করে{{ feature_icon.value }}এবং, SVG-এর জন্য,{{ feature_icon.value.url }}. - লাইব্রেরি শাখা পাঠান। দ্য
{% if feature_icon.library == 'svg' %}প্যাটার্ন হল একমাত্র সংস্করণ যা একজন সম্পাদক তৈরি করতে পারে এমন প্রতিটি বাছাই বেঁচে থাকে। - খালি অবস্থা পাহারা।
{% if feature_icon.value %}খালি ট্যাগ রেন্ডার করা থেকে আনসেট আইকন রাখে। - যোগ করুন
aria-hidden="true"আলংকারিক ফন্ট আইকন। স্ক্রীন রিডাররা প্রতীকটি এড়িয়ে যান এবং পরিবর্তে এটির পাশের পাঠ্যটি পড়েন। - বাছাই গাইড করতে প্রস্তাবিত ব্যবহার করুন। একটি কিউরেটেড সেট সারফেস করা একটি উইজেটের আইকনগুলিকে একটি সাইট জুড়ে দৃশ্যত সামঞ্জস্যপূর্ণ রাখে।
- আপনার CSS ট্যাবে SVG এর আকার দিন। আপলোড করা SVGগুলি ছবি হিসাবে আসে, তাই উভয় শাখাকে একই স্কেলে রেন্ডারিং রাখতে img শাখাকে একটি প্রস্থ দিন।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডনস উইজেট বিল্ডারে আইকন ক্ষেত্র কী?
আইকন ক্ষেত্রটি একটি কাস্টম উইজেটে এলিমেন্টরের আইকন লাইব্রেরি পিকার, ফন্ট অসাধারন, কাস্টম লাইব্রেরি এবং SVG আপলোড যোগ করে। বাছাই একটি অ্যারে হিসাবে সংরক্ষণ করা হয় value এবং library, যা আপনার টেমপ্লেট একটি হিসাবে রেন্ডার করে <i> ফন্ট আইকন বা একটি জন্য ট্যাগ <img> SVG-এর জন্য ট্যাগ করুন।
কেন {{my_icon }} কিছুই প্রিন্ট করে না?
ডাইরেক্ট-প্রিন্ট শর্টকাট শুধুমাত্র একটি অ্যারের টপ-লেভেল আউটপুট করে url কী, এবং আইকন মান নেই, তাই টোকেন খালি রেন্ডার করে। পরিবর্তে বৈশিষ্ট্য ব্যবহার করুন: {{ my_icon.value }} একটি ফন্ট আইকন ক্লাসের জন্য, {{ my_icon.value.url }} একটি আপলোড করা SVG-এর জন্য।
আমি কিভাবে একটি ফন্ট অসাধারণ আইকন রেন্ডার করব?
সঙ্গে একটি <i> ক্ষেত্র থেকে ক্লাস বহনকারী ট্যাগ: <i class="{{ my_icon.value }}" aria-hidden="true"></i>. দ্য value কী ক্লাস-ভিত্তিক লাইব্রেরির জন্য সম্পূর্ণ ক্লাস স্ট্রিং ধারণ করে।
আমি কিভাবে একটি আপলোড করা SVG আইকন রেন্ডার করব?
একটি চিত্র হিসাবে। SVG বাছাইয়ের জন্য, value ফাইলের URL এবং ID সহ একটি নেস্টেড অ্যারে, তাই মার্কআপ <img src="{{ my_icon.value.url }}" alt="">। একটি ক্লাস অ্যাট্রিবিউট এটি রেন্ডার করতে পারে না।
আমি কিভাবে একটি উইজেটে ফন্ট আইকন এবং SVG উভয় সমর্থন করব?
গ্রন্থাগারের শাখা: {% if my_icon.library == 'svg' %} img ট্যাগ রেন্ডার করে, {% else %} আমি ট্যাগ। সম্পাদকরা তখন লাইব্রেরির যেকোনো ট্যাব থেকে বাছাই করতে পারেন এবং উইজেটটি যেকোনো উপায়ে সঠিক মার্কআপ রেন্ডার করে।
আমি কি একটি আইকন পূর্বনির্বাচন করতে পারি বা একটি সেট প্রস্তাব করতে পারি?
হ্যাঁ। ডিফল্ট বিকল্প একটি শুরু সেট করে value এবং library পেয়ার, এবং প্রস্তাবিত বিকল্পটি বাছাইকারীর শীর্ষে একটি নির্বাচিত সেটকে ব্র্যান্ডে নির্বাচন রাখতে পারে।
মোড়ানো #
উইজেট বিল্ডার আইকন ক্ষেত্রটি একটি ছোট শাখার মূল্যের জন্য পুরো এলিমেন্টর আইকন লাইব্রেরিটিকে একটি কাস্টম উইজেটে নিয়ে আসে: value ফন্ট আইকন জন্য একটি ক্লাস হিসাবে, value.url SVG-এর জন্য একটি ফাইল হিসাবে, এবং উভয়ের চারপাশে একটি গার্ড। এর সাথে এটি জুড়ুন মিডিয়া ক্ষেত্র যখন একটি স্লট একটি প্রতীকের পরিবর্তে একটি সম্পূর্ণ চিত্রের জন্য কল করে। বাকি অন্বেষণ মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং দেখুন মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।
