ফন্ট

ফন্ট ক্ষেত্রটি একটি কাস্টম উইজেটে একটি ফন্ট ফ্যামিলি ড্রপডাউন যোগ করে যা আপনি মাস্টার অ্যাডঅনগুলির সাথে তৈরি করেন উইজেট নির্মাতা। সম্পাদকরা এলিমেন্টরে একটি সিস্টেম ফন্ট বা একটি Google ফন্ট বাছাই করে এবং উইজেটটি আপনার চয়ন করা উপাদানটিতে এটি প্রয়োগ করে৷ এটি শুধুমাত্র টাইপফেস পরিবর্তন করে। আকার, ওজন এবং লাইনের উচ্চতা আপনার CSS এ থাকে।

ফন্ট হল একটি ক্ষেত্র যা আপনি বিনামূল্যে সংস্করণের উইজেট বিল্ডারে ব্যবহার করতে পারেন। বিনামূল্যের প্লাগইনটিতে একটি সীমিত উইজেট বিল্ডার রয়েছে এবং ক্ষেত্রগুলির সম্পূর্ণ সেট সহ আসে মাস্টার অ্যাডনস প্রো.

ফন্ট ফিল্ড কি করে #

• এলিমেন্টরে আপনার উইজেটের প্যানেলে একটি অনুসন্ধানযোগ্য ড্রপডাউন যোগ করে। তালিকা একটি আছে ডিফল্ট বিকল্প, ক পদ্ধতি গ্রুপ (আরিয়াল, তাহোমা ইত্যাদি) এবং ক গুগল দল।
• উদাহরণস্বরূপ, পাঠ্য হিসাবে পরিবারের নাম সংরক্ষণ করে Playfair Display.
• লিখেছেন ক font-family আপনার অধীনে তালিকাভুক্ত উপাদানগুলির জন্য নিয়ম সিএসএস নির্বাচক। যখন বাছাইটি একটি Google ফন্ট হয়, তখন Elementor আপনার জন্য পৃষ্ঠায় সেই ফন্টটি লোড করে।
• এছাড়াও আপনি একটি টোকেন দেয়, মত {{ quote_font }}, যে পরিবারের নাম প্রিন্ট।

নির্মাতার কাছে নতুন? পড়ুন উইজেট নির্মাতা ওভারভিউ প্রথমে, তারপর একটি উইজেট খোলা নিয়ে ফিরে আসুন।

আপনি শুরু করার আগে #

• এলিমেন্টর ইনস্টল এবং সক্রিয় সহ ওয়ার্ডপ্রেস।
• এলিমেন্টর ইনস্টল এবং সক্রিয় জন্য মাস্টার অ্যাডঅন। দ্য ইনস্টলেশন গাইড সেটআপ কভার করে।
• উইজেট বিল্ডারে একটি উইজেট খোলা। এই গাইডের উদাহরণ হল একটি “Pull Quote” উইজেট: একটি Textarea নামে quote_text, একটি টেক্সট ফিল্ড নামে quote_author, এবং একটি ফন্ট ক্ষেত্র নামে quote_font এটি উদ্ধৃতির টাইপফেস সেট করে।

কিভাবে একটি ফন্ট ক্ষেত্র যোগ করতে হয় #

1. যাও মাস্টার অ্যাডঅন > উইজেট নির্মাতা এবং আপনার উইজেট খুলুন।
2. ক্লিক করুন শৈলী ট্যাব করুন এবং একটি বিভাগ যোগ করুন, উদাহরণস্বরূপ “উদ্ধৃতি শৈলী”।
3. টাইপ করা font বাম দিকে ফিল্ড সার্চ বক্সে।
4. টেনে আনুন ফন্ট বিভাগে। সেটিংস খুলতে মাঠের পেন্সিলটিতে ক্লিক করুন।

শৈলী হল যেখানে সম্পাদকরা টাইপফেস বিকল্পগুলি খুঁজে পাওয়ার আশা করেন, তবে ক্ষেত্রটি একটি বিষয়বস্তু বা উন্নত বিভাগেও কাজ করে।

ফন্ট ক্ষেত্রের বিকল্পগুলি ব্যাখ্যা করা হয়েছে #

• লেবেল: এলিমেন্টরে ড্রপডাউনের উপরের পাঠ্য, উদাহরণস্বরূপ “ ফন্ট উদ্ধৃতি"৷।
• নাম: ক্ষেত্রের অনন্য আইডি এবং এর টোকেনের নাম। উদাহরণস্বরূপ, শুধুমাত্র অক্ষর, সংখ্যা এবং আন্ডারস্কোর ব্যবহার করুন quote_font.
• বর্ণনা: এলিমেন্টরে ড্রপডাউনের অধীনে দেখানো একটি ইঙ্গিত।
• ডিফল্ট মান: পরিবার উইজেটের একটি নতুন কপি দিয়ে শুরু হয়। এলিমেন্টরের তালিকায় যেমন দেখা যাচ্ছে ঠিক তেমনই নামটি টাইপ করুন, উদাহরণস্বরূপ Playfair Display.

সাধারণ সেটিংসের অধীনে আপনি পাবেন লেবেল দেখান, লেবেল ব্লক, বিভাজক এবং শর্তাবলী, যা অন্যান্য ক্ষেত্রের মতো একই কাজ করে। সেটিং যে এই ক্ষেত্রের কাজ করে তোলে সিএসএস নির্বাচক.

CSS নির্বাচকদের সাথে ফন্ট প্রয়োগ করুন #

নিচে স্ক্রোল করুন সিএসএস নির্বাচক এবং ক্লিক করুন আইটেম যোগ করুন. প্রতিটি সারিতে দুটি বাক্স রয়েছে:

• সিএসএস নির্বাচক: যে উপাদানটি ফন্ট পায়। টান উদ্ধৃতি জন্য এটা .pq-quote. আপনাকে টাইপ করার দরকার নেই {{WRAPPER}}, কারণ নির্মাতা আপনার জন্য এটি যোগ করে এবং এই উইজেটের ভিতরে নিয়ম রাখে।
• CSS বৈশিষ্ট্য: লেখার নিয়ম। {{VALUE}} বাছাই করা পরিবারের সাথে প্রতিস্থাপিত হয়।

font-family: "{{VALUE}}", Georgia, serif;

একটি নতুন সারি উদাহরণ টেক্সট দিয়ে ভরা আসে, .text-1, .text-2 এবং color: {{VALUE}};. উভয় প্রতিস্থাপন করুন. চলে গেলে color বৈশিষ্ট্য বাক্সে, ফন্টের নামটি একটি রঙের মান হিসাবে শেষ হয় এবং টাইপফেস পরিবর্তন হয় না।

চারপাশে উদ্ধৃতি {{VALUE}} প্লেফেয়ার ডিসপ্লের মতো স্পেস সহ নাম রাখুন, কাজ করুন। Georgia, serif ফন্ট লোড হওয়ার সময় ফলব্যাক হয়। আরও উপাদান স্টাইল করতে, আবার আইটেম যোগ করুন ক্লিক করুন এবং অন্য সারি যোগ করুন।

সমতল ত্যাগ করুন নির্বাচক নীচে বাক্স খালি। আমাদের পরীক্ষায় এটি লিখেছে color: Lora; এই ক্ষেত্রের জন্য, যা একটি ফন্ট সেট করে না।

ক্লিক করুন সেটিংস সংরক্ষণ করুন আপনার কাজ শেষ হলে।

কেন CSS প্যানেলে টোকেন রাখবেন না? #

টোকেন সেখানে কাজ করে। font-family: "{{ quote_font }}", Georgia, serif; সঠিক নাম প্রিন্ট করে। সমস্যা লোড হচ্ছে। আমাদের পরীক্ষায়, শুধুমাত্র টোকেনের মাধ্যমে ব্যবহৃত একটি Google ফন্ট সামনের প্রান্তে লোড করা হয়নি, তাই দর্শকরা ফলব্যাক ফন্টটি দেখেছেন। একটি CSS নির্বাচক সারি এলিমেন্টরকে ফন্ট লোড করার জন্য প্রয়োজনীয় তথ্য দেয় এবং একই বাছাই সঠিকভাবে এসেছে।

যে জায়গাগুলিতে আপনার টেক্সট হিসাবে নাম প্রয়োজন, যেমন একটি ক্লাস বা HTML-এ একটি লেবেল আছে সেগুলির জন্য টোকেন রাখুন৷।

এলিমেন্টরে ফন্ট কন্ট্রোল ব্যবহার করুন #

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

একটি পরিবার এবং পূর্বরূপ আপডেট চয়ন করুন। প্রকাশিত পৃষ্ঠায়, Elementor উইজেটের শৈলী সহ Google ফন্ট লোড করে।

নির্বাচন করছে ডিফল্ট বাছাই সাফ করে। উইজেটটি তারপরে আপনার CSS প্যানেল বা থিম যে উপাদানটির জন্য সেট করা হোক না কেন ফন্টে ফিরে আসে, তাই উপাদানটিকে CSS প্যানেলে একটি সংবেদনশীল ফন্ট দিন।

সাধারণ ব্যবহারের ক্ষেত্রে #

• উদ্ধৃতি এবং প্রশংসাপত্র টানুন যেখানে শুধুমাত্র উদ্ধৃতি পাঠ্য টাইপফেস পরিবর্তন করে।
• হিরো বা ব্যানার উইজেটে শিরোনাম প্রদর্শন করুন, বডি টেক্সট একা রেখে দিন।
• মূল্য নম্বর, ব্যাজ বা লেবেল যা একটি ব্র্যান্ড প্রদর্শন ফন্ট ব্যবহার করে।
• ক্লায়েন্ট সাইট যেখানে সম্পাদকদের একটি ফন্ট বাছাই করা উচিত কিন্তু আকার এবং ব্যবধান স্পর্শ করা উচিত নয়।

ফন্ট ক্ষেত্রের সাথে কাজ করার জন্য টিপস #

• স্টাইলিং এর জন্য টোকেনের পরিবর্তে CSS নির্বাচক ব্যবহার করুন। এটিই গুগল ফন্ট লোড করে।
• সর্বদা একটি ফলব্যাক স্ট্যাক যোগ করুন পরে {{VALUE}}, যেমন Georgia, serif বা Arial, sans-serif.
• CSS প্যানেলে আকার এবং ওজন রাখুন। ফন্ট ক্ষেত্র শুধুমাত্র পরিবার সেট করে।
• আকার, ওজন এবং ব্যবধান নিয়ন্ত্রণও প্রয়োজন? দ্য টাইপোগ্রাফি ক্ষেত্র একটি প্রো ক্ষেত্র যা তাদের সকলকে বান্ডিল করে।
• প্রতিটি Google ফন্ট একটি ডাউনলোড যোগ করে। প্রতি পৃষ্ঠায় দুই বা তিনটি পরিবার একটি যুক্তিসঙ্গত সীমা।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #

মোড়ানো #

একটি স্টাইল বিভাগে ফন্ট ক্ষেত্র যোগ করুন, একটি ডিফল্ট পরিবার সেট করুন এবং একটি CSS নির্বাচক সারি যোগ করুন যা নির্দেশ করে font-family: "{{VALUE}}" আপনার উপাদান এ। সম্পাদকরা Elementor-এ একটি অনুসন্ধানযোগ্য ফন্ট তালিকা পান এবং Google ফন্টগুলি অতিরিক্ত কোড ছাড়াই পৃষ্ঠায় লোড হয়। সম্পূর্ণ পাঠ্য স্টাইলিং জন্য, দেখুন টাইপোগ্রাফি ক্ষেত্র, এবং চেক মূল্য প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।