কী টেকঅ্যাওয়ে
- একটি 1,200px ডেস্কটপ কলামের সাথে মানানসই চারটি ট্যাব শিরোনাম একটি ফোনে প্রায় 390px থাকে, তাই তারা মোড়ানো, স্কোয়াশ বা ওভারফ্লো করে।
- এলিমেন্টরের ট্যাব উইজেটে একটি ব্রেকপয়েন্ট কন্ট্রোল রয়েছে যা আপনার পছন্দের প্রস্থের নীচে স্ট্রিপটিকে একটি উল্লম্ব অ্যাকর্ডিয়নে স্যুইচ করে। মোবাইল ডিফল্ট।
- অনুভূমিক স্ক্রোল হল অন্য বিকল্প: শিরোনামগুলি এক সারিতে থাকে এবং দর্শকরা সেগুলির মাধ্যমে সোয়াইপ করে৷।
- দ্য মাস্টার অ্যাডঅন ট্যাব উইজেট এটির শিরোনামগুলিকে একটি ফোনে একটি পূর্ণ-প্রস্থ কলামে স্ট্যাক করে, নীচে খোলা প্যানেল সহ। এটি পাঠযোগ্য, তবে এটি অ্যাকর্ডিয়ন নয়।
- তিন বা তার কম ছোট শিরোনাম সাধারণত একটি ফোন অস্পর্শিত বেঁচে থাকে। এর আগে, অ্যাকর্ডিয়ন বাছাই করুন বা ইচ্ছাকৃতভাবে স্ক্রোল করুন।
ট্যাব একটি ডেস্কটপ প্যাটার্ন। তারা বেশ কয়েকটি শিরোনাম এবং একটি প্যানেলের জন্য অনুভূমিক রুম ধরে নেয় এবং একটি ফোনের প্রস্থের প্রায় এক তৃতীয়াংশ থাকে।
Elementor আপনাকে দুটি উপায় দেয়, এবং অ্যাডন উইজেটগুলি আবার ভিন্নভাবে আচরণ করে। নীচের ফোনের স্ক্রিনশটগুলি হল একটি বাস্তব পরীক্ষার পৃষ্ঠার 390px ক্যাপচার, তাই আপনি যা দেখছেন তা হল সেটিংটি কী করে৷।
বিষয়বস্তুর সারণী
কি ভুল হয়
একটি ট্যাব স্ট্রিপ একটি লাইন চায়। শিরোনাম প্রয়োজনের তুলনায় এটি কম প্রস্থ দিন এবং আপনি তিনটি ফলাফলের একটি পাবেন, তাদের কোনটিই ভাল নয়:
- শিরোনামগুলি একটি দ্বিতীয় এবং তৃতীয় সারিতে মোড়ানো হয় এবং স্ট্রিপটি একটি স্ট্রিপ হিসাবে পড়া বন্ধ করে দেয়।
- তারা পরিবর্তে স্কোয়াশ করে, যতক্ষণ না প্রতিটি লেবেল অপঠনযোগ্য পাঠ্যের কয়েক পিক্সেল হয়।
- অথবা শেষটি প্রান্ত থেকে উপচে পড়ে, সাধারণত এটির সাথে একটি অনুভূমিক পৃষ্ঠা স্ক্রলবার নিয়ে আসে।
ট্যাপ টার্গেট এটা খারাপ করে তোলে। স্পর্শ নির্দেশিকাগুলি প্রায় 44px এ একটি আরামদায়ক লক্ষ্য রাখে এবং একটি স্কোয়াশ করা শিরোনাম এর নীচে ভাল, তাই লোকেরা মিস করে এবং প্রতিবেশীকে আঘাত করে।
বিকল্প 1: অ্যাকর্ডিয়নে স্যুইচ করুন
এটি এমন আচরণ যা বেশিরভাগ লোকেরা চায় এবং ট্যাব উইজেট এটি CSS ছাড়াই করে।
- ট্যাব উইজেট নির্বাচন করুন এবং বিষয়বস্তু ট্যাবে অতিরিক্ত সেটিংস খুলুন।
- ব্রেকপয়েন্টকে প্রস্থে সেট করুন যেখানে স্ট্রিপটি ছেড়ে দেওয়া উচিত। মোবাইল ডিফল্ট এবং সাধারণত সঠিক উত্তর; শিরোনাম দীর্ঘ হলে ট্যাবলেট অর্থপূর্ণ হয়।
সেই প্রস্থের নীচে, প্রতিটি শিরোনাম সরাসরি তার নিজস্ব প্যানেলের উপরে বসে এবং একটি ট্যাপ করলে এটি খোলে। প্রতি সারিতে একটি শিরোনাম মানে একটি পূর্ণ-প্রস্থ ট্যাপ লক্ষ্য, এবং বিষয়বস্তুটি ভেঙে পড়ে থাকে যাতে পৃষ্ঠাটি দীর্ঘ না হয়।
বিকল্প 2: স্ট্রিপ স্ক্রোল করা যাক
অনুভূমিক স্ক্রোল চালু করুন এবং শিরোনামগুলি যে কোনও প্রস্থে এক সারিতে থাকে, সারিটি পাশে স্ক্রোল করে। দর্শকরা এটি বরাবর সোয়াইপ করে পর্দার বাইরে পৌঁছাতে।
এটি এমন একটি স্ট্রিপের জন্য উপযুক্ত যা একটি ক্রম হিসাবে পড়ে, যেমন মাস বা আকার, যেখানে প্রতিটি বিকল্প একবারে দেখার চেয়ে অর্ডারটি দৃশ্যমান রাখা বেশি গুরুত্বপূর্ণ। এর দুর্বলতা হল আবিষ্কার: একজন দর্শক যিনি লক্ষ্য করেন না যে সারি স্ক্রোলগুলি কখনই পরবর্তী ট্যাবগুলি খুঁজে পায় না। পরবর্তী শিরোনামটি প্রান্তে অর্ধেক দৃশ্যমান রেখে যাওয়া সাহায্য করে, কারণ একটি কাট-অফ লেবেল সোয়াইপ করার একটি সুস্পষ্ট আমন্ত্রণ।
স্ক্রোল এবং অ্যাকর্ডিয়ন ব্রেকপয়েন্ট পারস্পরিকভাবে একচেটিয়া নয়, তাই আপনি যদি উভয়ই সেট করেন, তাহলে ব্রেকপয়েন্টের নীচে আপনি আসলে কোনটি চান তা নির্ধারণ করুন এবং একটি ফোনে ফলাফল পরীক্ষা করুন।
অ্যাডন ট্যাবগুলি ফোনে কী করে
মাস্টার অ্যাডনস উইজেট স্ট্যাকিংয়ের মাধ্যমে সরু স্ক্রিনগুলি পরিচালনা করে: শিরোনামগুলি একটি পূর্ণ-প্রস্থ কলামে পরিণত হয় এবং খোলা প্যানেলটি পুরো তালিকার নীচে বসে।
প্রতিটি শিরোনাম একটি পূর্ণ-প্রস্থ ট্যাপ লক্ষ্য পায়, যা স্কোয়াশিং সমাধান করে। এটি প্রতিটি শিরোনামকে তার নিজস্ব প্যানেলের সাথে যুক্ত করে না, তাই ছয় বা সাতটি ট্যাবের সাহায্যে একজন দর্শক কোনো বিষয়বস্তুতে পৌঁছানোর আগে পুরো তালিকাটি স্ক্রোল করে।
ব্যবহারিক নিয়ম: তিন বা চারটি ট্যাব সহ একটি ফোনে অ্যাডন ঠিক থাকে এবং আরও বেশি থাকলে ব্রেকপয়েন্ট সহ মূল উইজেটটি আরও ভাল।
কোন পৃষ্ঠার জন্য কোন বিকল্প
| পরিস্থিতি | সেটিং |
|---|---|
| তিন বা চারটি ছোট শিরোনাম, বেশিরভাগই ডেস্কটপ ট্রাফিক | ছেড়ে দিন, তারপর ফোনে চেক করুন |
| পাঁচ বা তার বেশি ট্যাব | ব্রেকপয়েন্ট সহ কোর ট্যাব মোবাইলে সেট করা আছে |
| দীর্ঘ শিরোনাম যেমন "শিপিং এবং রিটার্নস" | ব্রেকপয়েন্ট সহ কোর ট্যাব ট্যাবলেটে সেট করা আছে |
| শিরোনাম যা একটি ক্রম হিসাবে পড়ে, যেমন মাস বা আকার | অনুভূমিক স্ক্রোল |
| বেশিরভাগই ফোন ট্রাফিক এবং দীর্ঘ প্যানেল | ট্যাবের পরিবর্তে একটি অ্যাকর্ডিয়ন উইজেট |
| আইকন শিরোনাম, তিন বা চারটি ট্যাব | অ্যাডন উইজেট, স্ট্যাক করা কলাম ঠিক আছে |
যখন ট্যাব মোবাইলে কাজ করা বন্ধ করে দেয়
"ট্যাবগুলি মোবাইলে কাজ করে না" সাধারণত চারটি জিনিসের মধ্যে একটি হতে দেখা যায়:
- একটি হোভার প্রভাব। হোভার একটি টাচ স্ক্রিনে বিদ্যমান নেই, তাই হোভার চালু করার জন্য একটি ট্যাব সেটের জন্য একটি ট্যাপ প্রয়োজন, কখনও কখনও দুটি। ফোন ট্র্যাফিক সহ যেকোনো পৃষ্ঠায় ক্লিক করতে প্রভাব সেট করুন।
- ক্যাশে CSS। ব্রেকপয়েন্ট পরিবর্তন করার পরে, এলিমেন্টরের CSS পুনরায় তৈরি করুন এবং পৃষ্ঠার ক্যাশে সাফ করুন, অথবা ফোনটি পুরানো স্টাইলশীট পরিবেশন করতে থাকে।
- একটি বিলম্বিত স্ক্রিপ্ট। আক্রমনাত্মক জাভাস্ক্রিপ্ট ডিফারাল ট্যাব স্ক্রিপ্টটিকে ধরে রাখে যতক্ষণ না দর্শক পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করে, তাই প্রথম ট্যাপ কিছুই করে না। অপ্টিমাইজেশান প্লাগইনে উইজেটের স্ক্রিপ্টটি বাদ দিন।
- একটি ট্যাপ লক্ষ্য যা খুব ছোট। কিছুই ভাঙ্গা হয় না, শিরোনামটি একটি থাম্বের চেয়ে ছোট, এবং অ্যাকর্ডিয়ন ব্রেকপয়েন্ট এটি ঠিক করে।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
আমি কিভাবে এলিমেন্টর ট্যাবগুলিকে মোবাইলে অ্যাকর্ডিয়নে পরিণত করব?
ট্যাব উইজেট নির্বাচন করুন, অতিরিক্ত সেটিংস খুলুন এবং ব্রেকপয়েন্ট সেট করুন। সেই প্রস্থের নীচে স্ট্রিপটি একটি উল্লম্ব অ্যাকর্ডিয়ন লেআউটে স্যুইচ করে, ডিফল্ট হিসাবে মোবাইল সহ।
কেন আমার ট্যাব শিরোনাম একটি ফোনে ওভারল্যাপ?
স্ট্রিপ শিরোনাম প্রয়োজন তুলনায় কম প্রস্থ আছে। একটি অ্যাকর্ডিয়ন ব্রেকপয়েন্ট সেট করুন, অনুভূমিক স্ক্রোল চালু করুন বা শিরোনামগুলি ছোট করুন।
ট্যাব কি মোবাইল এসইও ক্ষতি করে?
না। একটি ট্যাবের ভিতরের বিষয়বস্তু HTML-এ থাকে এবং প্যানেল খোলা থাকুক বা না থাকুক তা সূচিত করা হয়।
আমার কি মোবাইলে ট্যাব বা অ্যাকর্ডিয়ন ব্যবহার করা উচিত?
যদি আপনার বেশিরভাগ ট্র্যাফিক ফোন হয় এবং প্যানেলগুলি দীর্ঘ হয় তবে এটিকে শুরু থেকেই অ্যাকর্ডিয়ন হিসাবে তৈরি করুন। ডেস্কটপ যখন প্রাথমিক দৃশ্য হয় তখন ব্রেকপয়েন্ট সহ ট্যাবগুলিই ভাল কল।
কেন আমার প্রথম ট্যাপ কিছুই করে না?
সাধারণত একটি হোভার প্রভাব বা একটি বিলম্বিত স্ক্রিপ্ট। ক্লিক করার জন্য ট্যাব প্রভাব সেট করুন এবং জাভাস্ক্রিপ্ট ডিফারাল থেকে ট্যাব স্ক্রিপ্ট বাদ দিন।
চূড়ান্ত চিন্তা
এর কোনটিরই CSS প্রয়োজন নেই। এলিমেন্টরের ব্রেকপয়েন্ট কন্ট্রোল সাধারণ কেস কভার করে, অনুভূমিক স্ক্রোল সিকোয়েন্স কভার করে এবং অ্যাডন উইজেটগুলি একটি পঠনযোগ্য কলামে স্ট্যাক করে। তারপরে একটি প্রকৃত ফোনে পৃষ্ঠাটি খুলুন এবং প্রতিটি শিরোনামে আলতো চাপুন, কারণ এটিই পদক্ষেপ যা লোকেরা এড়িয়ে যায়।
সম্পর্কিত পড়া
