এলিমেন্টর (উইজেট + শর্টকোড) দিয়ে টেবিলপ্রেস কীভাবে ব্যবহার করবেন

কী টেকঅ্যাওয়ে

• TablePress Elementor এর সাথে দুটি উপায়ে কাজ করে: TablePress টেবিল নামে একটি উইজেট যা TablePress 3.4 এলিমেন্টর প্যানেলে যোগ করে এবং শর্টকোড উইজেটে রাখা শর্টকোড [টেবিল আইডি=1 /]।
• এলিমেন্টরের টেবিলপ্রেস টেবিল উইজেটে একটি টেবিল ড্রপডাউন এবং একটি কনফিগারেশন প্যারামিটার ক্ষেত্র রয়েছে এবং এতে কোনো স্টাইল ট্যাব নেই।
• টেবিলপ্রেস প্রতি পৃষ্ঠায় 10টি সারি সহ ডিফল্টরূপে দর্শকদের জন্য বাছাই, অনুসন্ধান এবং পৃষ্ঠা সংখ্যা চালু করে।
• টেবিলপ্রেসে অনুভূমিক স্ক্রোলিং ডিফল্টরূপে বন্ধ থাকে, তাই একটি 390px ফোনে একটি পাঁচ-কলামের টেবিল ওভারফ্লো হয় যতক্ষণ না আপনি টেবিলের সেটিংসে টিক দেন।
• একটি ছোট টেবিলের জন্য যা এলিমেন্টরের ভিতরে সম্পাদনা এবং স্টাইল করা উচিত, একটি টেবিল উইজেট যেমন মাস্টার অ্যাডনস ডায়নামিক টেবিল টেবিলপ্রেসের চেয়ে কম কাজ করে।

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

এই নির্দেশিকাটি পদ্ধতি, স্টাইলিং এবং সেটিং উভয়ই কভার করে যা ফোনে প্রশস্ত টেবিল ঠিক করে। এটি আরও বলে যে কখন একটি প্লেইন টেবিল উইজেট ভাল পছন্দ। এখানে সবকিছু টেবিলপ্রেস 3.4 এবং এলিমেন্টর 4.3 দিয়ে পরীক্ষা করা হয়েছিল।

ধাপ 1: টেবিলপ্রেসে টেবিল তৈরি বা আমদানি করুন

ওয়ার্ডপ্রেস ড্যাশবোর্ডের টেবিলপ্রেস স্ক্রিনে টেবিলটি নিজেই এলিমেন্টরের বাইরে তৈরি করা হয়েছে।

1. ইনস্টল করুন এবং সক্রিয় করুন টেবিলপ্রেস প্লাগইন থেকে, নতুন যোগ করুন।
2. খোলা টেবিলপ্রেস ড্যাশবোর্ড মেনুতে।
3. একটি টেবিল টাইপ করতে, ক্লিক করুন নতুন যোগ করুন, একটি নাম লিখুন, সারি এবং কলামের সংখ্যা সেট করুন এবং ঘরগুলি পূরণ করুন।
4. একটি স্প্রেডশীট আনতে, ক্লিক করুন আমদানি, চয়ন করুন ফাইল আপলোড, ফাইল নির্বাচন করুন, রাখুন নতুন টেবিল হিসাবে যোগ করুন এবং ক্লিক করুন আমদানি.
5. টেবিলের আইডি নোট করুন। প্রথম টেবিলটি আইডি 1।

টেবিলপ্রেস এক্সেল, CSV, HTML এবং JSON ফাইল আমদানি করে। আমরা শিপিং রেটগুলির একটি ছয়-সারির CSV আমদানি করেছি, এবং এটি শিরোনাম হিসাবে ইতিমধ্যে সেট করা প্রথম সারির সাথে পৌঁছেছে।

ধাপ 2: টেবিলপ্রেস টেবিল উইজেটের সাথে এটি যোগ করুন

টেবিলপ্রেস তার নিজস্ব এলিমেন্টর উইজেট নিবন্ধন করে, তাই এই পদ্ধতিতে কোনো শর্টকোডের প্রয়োজন নেই।

1. Elementor দিয়ে আপনার পৃষ্ঠা সম্পাদনা করুন।
2. এর জন্য উইজেট প্যানেল অনুসন্ধান করুন টেবিলপ্রেস টেবিল.
3. উইজেটটিকে একটি পাত্রে টেনে আনুন।
4. খোলা টেবিল ড্রপডাউন এবং আপনার টেবিল বাছাই। টেবিল আইডি এবং নাম দ্বারা তালিকাভুক্ত করা হয়।
5. পাতাটি প্রকাশ করুন।

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

অথবা একটি শর্টকোড দিয়ে যোগ করুন

শর্টকোড একই কাজ করে এবং শর্টকোড যে কোনো জায়গায় কাজ করে।

1. এলিমেন্টর টেনে আনুন শর্টকোড একটি পাত্রে উইজেট।
2. টাইপ করা [table id=1 /], আপনার টেবিলের আইডি দিয়ে 1 প্রতিস্থাপন করা হচ্ছে।
3. ক্লিক করুন আবেদন করা পূর্বরূপ লোড করতে।

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

বাছাই, অনুসন্ধান এবং পৃষ্ঠা সংখ্যা

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

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

এলিমেন্টরে একটি টেবিলপ্রেস টেবিল স্টাইল করা

টেবিলপ্রেস টেবিল উইজেটে এলিমেন্টরে কোনো টেবিল স্টাইলিং নিয়ন্ত্রণ নেই, তাই লুকটি অন্য তিনটি জায়গায় সেট করা আছে।

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

একটি সংক্ষিপ্ত CSS উদাহরণ যা টেবিল 1 এর শিরোনামকে পুনরায় স্টাইল করে:

.tablepress-id-1 thead th {
  background: #101223;
  color: #ffffff;
}
.tablepress-id-1 tbody td {
  padding: 12px 16px;
}

এটিকে চেহারা, কাস্টমাইজ, অতিরিক্ত CSS বা আপনার সেটআপের যেকোনো কাস্টম CSS বক্সে পেস্ট করুন। Elementor Pro-এর প্রতি এলিমেন্টে একটি এবং মাস্টার অ্যাডঅন রয়েছে কাস্টম CSS এক্সটেনশন পাশাপাশি একটি যোগ করে।

ফোনে টেবিল ঠিক করুন

একটি 390px চওড়া ফোনে আমাদের পাঁচ-কলামের টেবিলটি স্ক্রিনের ডান প্রান্ত অতিক্রম করেছে এবং শেষ কলামটি পড়া যায়নি।

1. টেবিলপ্রেসে টেবিলটি সম্পাদনা করুন।
2. অধীন সাইট ভিজিটরদের জন্য টেবিল বৈশিষ্ট্য, টিক অনুভূমিক স্ক্রোলিং.
3. ক্লিক করুন পরিবর্তন সংরক্ষণ করুন এবং আপনার ফোনে পৃষ্ঠাটি পুনরায় লোড করুন।

টেবিলপ্রেস তার প্রো প্ল্যানে একটি প্রতিক্রিয়াশীল টেবিল বৈশিষ্ট্যও বিক্রি করে (যখন আমরা চেক করি তখন বছরে $89), মোডগুলি যা ছোট স্ক্রিনে সারি স্ট্যাক বা ভেঙে দেয়। প্রশস্ত টেবিল পরিচালনা করার অন্যান্য উপায় আমাদের গাইডে রয়েছে এলিমেন্টরে প্রতিক্রিয়াশীল টেবিল.

যখন একটি টেবিল উইজেট ভাল পছন্দ হয়

টেবিলপ্রেস ডেটার জন্য নির্মিত। একটি ছোট টেবিলের জন্য যা সত্যিই পৃষ্ঠা ডিজাইনের অংশ, এটি ধাপগুলি যোগ করে: একটি দ্বিতীয় অ্যাডমিন স্ক্রীন, অন্য জায়গায় CSS এবং আপডেট রাখার জন্য একটি প্লাগইন৷।

শুধুমাত্র একটি ছোট টেবিল প্রয়োজন? দ্য ডায়নামিক টেবিল উইজেট এটিকে এলিমেন্টর প্যানেলে তৈরি করে, একটি স্টাইল ট্যাব এবং সারি যা ফোনে স্ট্যাক করে।

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

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

চূড়ান্ত চিন্তা

টেবিলপ্রেস এবং এলিমেন্টর ডেটা টেবিলের জন্য একসাথে ভালভাবে ফিট করে: ফাইলটি আমদানি করুন, টেবিলপ্রেস টেবিল উইজেটে ড্রপ করুন এবং ফোনের জন্য অনুভূমিক স্ক্রোলিং চালু করতে ভুলবেন না। স্টাইলিং একটু CSS নেয় কারণ উইজেটে কোনো স্টাইল ট্যাব নেই।

ছোট টেবিলের জন্য যা পৃষ্ঠার অংশের মতো দেখতে হবে, ডায়নামিক টেবিল এলিমেন্টরের ভিতরে কোষ এবং স্টাইলিং রাখে।

সম্পর্কিত পড়া

• কিভাবে এলিমেন্টরে একটি টেবিল তৈরি করবেন (4 উপায়)
• ওয়ার্ডপ্রেসের জন্য বিষয়বস্তুর সেরা সারণী প্লাগইন