টাইপোগ্রাফি

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

প্রতিটি উইজেট বিল্ডার নিয়ন্ত্রণের মতো, টাইপোগ্রাফি সমর্থন করে শর্তাবলী, তাই একটি কাস্টম-স্টাইলিং টগল চালু না হওয়া পর্যন্ত আপনি এটি লুকিয়ে রাখতে পারেন। বিল্ডার জুড়ে টোকেন আউটপুট মাধ্যমে সঞ্চালিত হয় টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিন; উভয় গাইড বিবরণ এবং সীমাবদ্ধতা কভার।

পাঠ্য বা রঙের ক্ষেত্রের বিপরীতে, টাইপোগ্রাফি ক্ষেত্রটি আপনার CSS-এ একটি শর্টকোড ব্যবহার করে না। আপনি ক্ষেত্রটি বলুন যে এটি কোন নির্বাচককে নিয়ন্ত্রণ করে এবং এলিমেন্টর টাইপোগ্রাফি শৈলীগুলি নিজেই সেই নির্বাচককে লেখে। একটি ক্ষেত্র, একটি নির্বাচক, সম্পন্ন।

টাইপোগ্রাফি ক্ষেত্র কি করে #

একটি টাইপোগ্রাফি ক্ষেত্র আপনার উইজেটের বিকল্প প্যানেলে এলিমেন্টরের টাইপোগ্রাফি গ্রুপ নিয়ন্ত্রণ রেন্ডার করে। যখন কেউ উইজেট নির্বাচন করে এবং ক্ষেত্রের লেবেলের পাশে পেন্সিল আইকনে ক্লিক করে, তখন পাঠ্য নিয়ন্ত্রণের সম্পূর্ণ সেট সহ একটি পপওভার খোলে:

• ফন্ট পরিবার: সিস্টেম ফন্ট, Google ফন্ট এবং সাইটে নিবন্ধিত যেকোনো কাস্টম ফন্ট সহ একটি অনুসন্ধানযোগ্য ড্রপডাউন।
• হরফের আকার: px, em, rem, এবং vw ইউনিট সহ একটি স্লাইডার এবং ইনপুট, প্রতি ডিভাইসে প্রতিক্রিয়াশীল।
• হরফের ওজন: 100 থেকে 900 প্লাস নরমাল এবং বোল্ড।
• রূপান্তর, শৈলী, এবং সজ্জা: বড় হাতের এবং ছোট হাতের, তির্যক এবং তির্যক, আন্ডারলাইন এবং লাইন-থ্রু।
• লাইনের উচ্চতা, অক্ষরের ব্যবধান এবং শব্দের ব্যবধান: প্রতিটি তার নিজস্ব প্রতিক্রিয়াশীল ইনপুট সঙ্গে।

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

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

• ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
• এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
• উইজেট বিল্ডার এডিটরে একটি কাস্টম উইজেট খোলা। আমাদের উদাহরণ হল একটি রেস্টুরেন্ট হিরো উইজেট সহ একটি <h1 class="bfh-title"> শিরোনাম এবং ক <p class="bfh-lede"> এর HTML-এ ভূমিকা অনুচ্ছেদ।

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

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

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

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

এর সেটিংস খুলতে টাইপোগ্রাফি ক্ষেত্রটি নির্বাচন করুন।

• লেবেল: এলিমেন্টরে নিয়ন্ত্রণের পাশে দেখানো পাঠ্য, ডিফল্টরূপে "টাইপোগ্রাফি"৷ একটি উইজেটে বেশ কয়েকটি টাইপোগ্রাফি ক্ষেত্র সহ, "শিরোনাম টাইপোগ্রাফি" এবং "বাটন টাইপোগ্রাফি" এর মতো নাম ব্যবহার করুন।
• নাম: ক্ষেত্রের জন্য অনন্য শনাক্তকারী। এটিতে শুধুমাত্র অক্ষর, সংখ্যা এবং আন্ডারস্কোর থাকতে হবে, উদাহরণস্বরূপ title_typography.
• বর্ণনা: নিয়ন্ত্রণের নীচে দেখানো ঐচ্ছিক সহায়ক পাঠ্য।
• নির্বাচক: টাইপোগ্রাফি শৈলী প্রযোজ্য CSS নির্বাচক। এটি এমন একটি সেটিং যা ক্ষেত্রটিকে কাজ করে, পরবর্তী বিভাগে কভার করা হয়েছে।
• ডিফল্ট মান: ঐচ্ছিকভাবে এলিমেন্টরের গ্লোবাল ফন্ট প্রিসেটগুলির একটিতে ক্ষেত্রটিকে লিঙ্ক করুন (প্রাথমিক, মাধ্যমিক, পাঠ্য বা অ্যাকসেন্ট। উইজেটটি তখন সেই প্রিসেট প্রয়োগ করে শুরু হয় এবং সাইটের গ্লোবাল ফন্ট পরিবর্তন হলে এটি অনুসরণ করে।
• লেবেল দেখান এবং বিভাজক: স্ট্যান্ডার্ড ডিসপ্লে টগল করে, এবং ফিল্ড দেখানোর জন্য শর্তগুলি আরও নিচে শুধুমাত্র যখন অন্য নিয়ন্ত্রণের একটি নির্দিষ্ট মান থাকে।

আপনার নির্বাচকের দিকে ক্ষেত্রটি নির্দেশ করুন #

এখানে সেই অংশটি রয়েছে যা লোকেদের অন্য ক্ষেত্রে অভ্যস্ত হলে তাদের উপরে নিয়ে যায়: টাইপোগ্রাফি ক্ষেত্রের কোন নেই {{shortcode}} আপনার CSS এর জন্য। একটি টাইপোগ্রাফি মান হল বৈশিষ্ট্যগুলির একটি সম্পূর্ণ বান্ডিল, একটি একক মান নয়, তাই এটি একটি CSS ঘোষণায় মুদ্রণ করতে পারে না। পরিবর্তে, আপনি পূরণ করুন নির্বাচক বিকল্প এবং এলিমেন্টর আপনার জন্য শৈলী তৈরি করে।

নায়কের ভূমিকা অনুচ্ছেদের জন্য, নির্বাচক হল:

{{WRAPPER}} .bfh-lede

• {{WRAPPER}} উইজেটের নিজস্ব ধারকটির জন্য দাঁড়িয়েছে, তাই শৈলীগুলি শুধুমাত্র এই উইজেটটিকে আঘাত করে এবং পৃষ্ঠার বাকি অংশে কখনই ফুটো করে না। সর্বদা এটি দিয়ে নির্বাচক শুরু করুন।
• .bfh-lede আপনার উইজেট HTML এর ভিতরের উপাদান যা নিয়ন্ত্রণ শৈলী করা উচিত।
• একটি নিয়ন্ত্রণের সাথে বেশ কয়েকটি উপাদান চালাতে, কমা সহ নির্বাচকদের আলাদা করুন এবং প্রতিটিকে নিজস্ব দিন {{WRAPPER}}: {{WRAPPER}} .bfh-title, {{WRAPPER}} .bfh-lede.

আপনি যদি নির্বাচককে খালি রেখে যান, তাহলে ক্ষেত্রটি উইজেটের পুরো পাত্রে ফিরে আসে, যা উইজেটের প্রতিটি পাঠ্যকে একবারে স্টাইল করে। এটি সাধারণত আপনার চেয়ে বেশি হয়। নির্বাচক সেট করুন, তারপর ক্লিক করুন সেটিংস সংরক্ষণ করুন.

CSS ট্যাবে আপনার স্টাইলশীট উইজেটের প্রারম্ভিক চেহারা হিসাবে কাজ করে। যাই হোক font-family বা font-size আপনি লিখেছেন যে কোনও ব্যবহারকারী প্যানেলে কিছু বাছাই না করা পর্যন্ত সেখানে থাকে; নিয়ন্ত্রণের মান তারপর এটি ওভাররাইড করে।

এলিমেন্টরে টাইপোগ্রাফি নিয়ন্ত্রণ ব্যবহার করুন #

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

একটি ফন্ট পরিবার এবং আকার চয়ন করুন #

টাইপোগ্রাফি পপওভার খুলতে পেন্সিল আইকনে ক্লিক করুন। দ্য পরিবার ড্রপডাউন সিস্টেম ফন্ট এবং সম্পূর্ণ Google ফন্ট লাইব্রেরি অনুসন্ধান করে যেমন আপনি টাইপ করেন। এর নিচে, আকার px, em, rem, বা vw-এ একটি মান নেয় এবং ডিভাইস আইকন আপনাকে ব্রেকপয়েন্ট প্রতি একটি ভিন্ন আকার সেট করতে দেয় 96px ডেস্কটপ শিরোনাম একই নিয়ন্ত্রণ থেকে ফোনে 48px এ নেমে যেতে পারে।

ওজন, ব্যবধান এবং বাকি সেট করুন #

একই পপওভার ধরে ওজন, রূপান্তর, শৈলী, সজ্জা, লাইনের উচ্চতা, চিঠির ব্যবধান, এবং শব্দ ব্যবধান। প্রতিটি পরিবর্তনের ভূমি প্রিভিউতে থাকে, তাই আপনি অক্ষরের ব্যবধান নিচে টেনে নিয়ে শিরোনামটি শক্ত হতে দেখতে পারেন। যদি কিছুই পরিবর্তন হয় বলে মনে হয় না, আপনার নির্বাচক আসলে উইজেট HTML-এর একটি উপাদানের সাথে মেলে কিনা তা পরীক্ষা করুন; ক্লাসের নামের একটি টাইপো নীরবে ব্যর্থ হয়।

অথবা সাইটের গ্লোবাল ফন্ট অনুসরণ করুন #

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

আমাদের উদাহরণে শিরোনামটি 98px-এ একটি স্ক্রিপ্ট ফেসে অদলবদল করে, সরাসরি Google ফন্ট তালিকা থেকে বাছাই করা হয় এবং ফন্ট লোড হওয়ার মুহুর্তে পূর্বরূপটি পুনরায় আঁকে।

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

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

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

• নির্বাচক বিকল্প হল পুরো সংযোগ। আপনার CSS-এ পেস্ট করার জন্য কোনো টাইপোগ্রাফি শর্টকোড নেই, নির্বাচক সেট করুন এবং এলিমেন্টরকে শৈলী লিখতে দিন।
• সর্বদা নির্বাচক দিয়ে শুরু করুন {{WRAPPER}}. এটি ছাড়া শৈলীগুলি পৃষ্ঠার প্রতিটি ম্যাচের জন্য প্রযোজ্য, শুধু আপনার উইজেট নয়। একটি কমা দ্বারা পৃথক করা তালিকায়, প্রতিটি অংশের নিজস্ব প্রয়োজন {{WRAPPER}}.
• CSS ট্যাবে আপনার বেস স্টাইল রাখুন। একটি নতুন ড্রপে উইজেটটি দেখতে কেমন তা হল; নিয়ন্ত্রণ শুধুমাত্র ব্যবহারকারী আসলে কি পরিবর্তন করে তা ওভাররাইড করে।
• পাঠ্য ভূমিকা প্রতি একটি ক্ষেত্র। একটি শিরোনাম ক্ষেত্র, একটি বডি ক্ষেত্র এবং একটি বোতাম ক্ষেত্র সম্পাদকদের পরিষ্কার নিয়ন্ত্রণ দেয়। পুরো উইজেটের দিকে নির্দেশিত একটি ক্ষেত্র সবকিছুকে একক শৈলীতে সমতল করে।
• ক্লায়েন্ট সাইটের জন্য গ্লোবাল ফন্ট ডিফল্ট ব্যবহার করুন। ক্ষেত্রটিকে প্রাথমিক বা মাধ্যমিকের সাথে লিঙ্ক করা কাস্টম উইজেটগুলিকে প্রথম দিন থেকেই সাইটের ডিজাইন সিস্টেমের সাথে ধাপে ধাপে রাখে।

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

মোড়ানো #

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