এলিমেন্টরে ক্লিক করলে কীভাবে একটি বিভাগ দেখাবেন বা লুকাবেন

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

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

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

নীচের প্রতিটি পদ্ধতি এলিমেন্টর 4.3-এ নির্মিত এবং পরীক্ষা করা হয়েছিল। ট্রিগারটি কেমন হওয়া উচিত তা বেছে নিন: একটি শিরোনাম বার, একটি সুইচ বা একটি বোতাম৷।

কোন পদ্ধতি আপনার পৃষ্ঠার সাথে খাপ খায়

তিনটি পদ্ধতিই একটি ক্লিক না হওয়া পর্যন্ত একটি বিভাগ লুকিয়ে রাখে। ভিজিটর কী ক্লিক করে এবং তাদের কতটা সেটআপ প্রয়োজন তার মধ্যে তাদের পার্থক্য রয়েছে।

পদ্ধতি 1: অ্যাকর্ডিয়ন উইজেট

অ্যাকর্ডিয়ন উইজেট হল ক্লিকে একটি বিভাগ দেখানোর দ্রুততম উপায়, কারণ প্রতিটি আইটেম একটি ধারক যা যেকোনো উইজেট গ্রহণ করে। আপনি ভিতরে যা কিছু রাখেন তা শিরোনাম ক্লিক না হওয়া পর্যন্ত লুকিয়ে থাকে।

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

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

পদ্ধতি 2: একটি খালি বিকল্পের সাথে একটি বিষয়বস্তু টগল করুন

একটি বিষয়বস্তু টগল সাধারণত দুটি ব্লকের মধ্যে স্যুইচ করে। একটি ব্লক খালি রাখুন এবং এটি একটি শো এবং লুকান সুইচ হয়ে যায়: একটি লেবেল কিছুই দেখায় না, অন্যটি আপনার বিভাগটি দেখায়।

এই পদক্ষেপগুলি ব্যবহার করে কন্টেন্ট টগল করুন মাস্টার অ্যাডনস প্রো থেকে। আমরা Elementor 4.3-এ খালি বিকল্পটি পরীক্ষা করেছি এবং এটি কোনও ফাঁক বা স্থানধারক রাখে না।

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

সুইচটি রাষ্ট্রকে সুস্পষ্ট করে তোলে, যা ঐচ্ছিক বিবরণ যেমন পুষ্টির তথ্য, প্রযুক্তিগত চশমা বা শর্তাবলীর জন্য উপযুক্ত। এটিকে অন্যভাবে ফ্লিপ করতে, বিভাগটি প্রথমে দৃশ্যমান সহ, সক্রিয় সূচক 2 এ সেট করুন।

দুটি বিভাগের মধ্যে স্যুইচিং? দ্য কন্টেন্ট উইজেট পৃষ্ঠা টগল করুন বিলিং সুইচ, স্পেক টেবিল এবং আরও আটটি লাইভ ডেমো রয়েছে।

পদ্ধতি 3: একটি বোতাম এবং একটি ছোট স্ক্রিপ্ট

একটি স্ক্রিপ্ট ব্যবহার করুন যখন ট্রিগারটি একটি সাধারণ বোতাম হতে হবে, বা যখন বোতাম এবং বিভাগটি বিভিন্ন জায়গায় থাকে। আপনি বোতামে একটি CSS ক্লাস যোগ করুন, একটি বিভাগে, এবং একটি HTML উইজেটে একটি ছোট স্নিপেট পেস্ট করুন।

1. যোগ ক বোতাম উইজেট। ভিতরে উন্নত > CSS ক্লাস, প্রকার show-hide-button. বোতামের লিঙ্ক ক্ষেত্রটি খালি রাখুন।
2. আপনি যে ধারকটি লুকাতে চান সেটি নির্বাচন করুন। ভিতরে উন্নত > CSS ক্লাস, প্রকার show-hide-target.
3. একটি টানুন এইচটিএমএল পৃষ্ঠার যেকোনো জায়গায় উইজেট করুন এবং নীচের কোডটি পেস্ট করুন।
4. পৃষ্ঠাটি আপডেট করুন এবং সামনের প্রান্তে এটি পরীক্ষা করুন।

<style>
.show-hide-target { display: none; }
.show-hide-target.is-open { display: flex; }
.elementor-editor-active .show-hide-target { display: flex; }
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".show-hide-button a, .show-hide-button button").forEach(function (button) {
    button.addEventListener("click", function (event) {
      event.preventDefault();
      document.querySelectorAll(".show-hide-target").forEach(function (target) {
        target.classList.toggle("is-open");
      });
    });
  });
});
</script>

প্রথম শৈলী নিয়ম ধারক লুকিয়ে। স্ক্রিপ্ট যোগ করার পরে দ্বিতীয়টি এটি দেখায় is-open শ্রেণী। তৃতীয়টি এলিমেন্টর এডিটরের ভিতরে ধারকটিকে দৃশ্যমান রাখে, যাতে আপনি এখনও এটি সম্পাদনা করতে পারেন। বোতামে প্রতিটি ক্লিক ক্লাস যোগ করে বা সরিয়ে দেয়।

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

যদি বিভাগটি পৃষ্ঠায় খোলা উচিত, একটি পপআপ ব্যবহার করুন। দেখা এলিমেন্টরে কীভাবে একটি পপআপ যোগ করবেন.

কি কাজ করে না: প্রদর্শন শর্ত এবং প্রতিক্রিয়াশীল সেটিংস

দুটি এলিমেন্টর বৈশিষ্ট্য শোনাচ্ছে যে তাদের এটি করা উচিত এবং করা উচিত নয়। উভয়ই বিষয়বস্তু লুকিয়ে রাখে, কিন্তু একটি ক্লিকে প্রতিক্রিয়া জানায় না।

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

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

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

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

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

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

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

• এলিমেন্টর ডিসপ্লে শর্ত: নিয়ম অনুসারে বিষয়বস্তু দেখান এবং লুকান
• এলিমেন্টরে কীভাবে একটি পপআপ যোগ করবেন
• এলিমেন্টর স্ক্রোল প্রভাব
• কিভাবে Elementor এ একটি টগল বোতাম তৈরি করবেন (3 উপায়)
• এলিমেন্টর টগল বনাম অ্যাকর্ডিয়ন বনাম ট্যাব বনাম কন্টেন্ট সুইচার