লুপ ক্যারোজেল হল এলিমেন্টর প্রো এর গতিশীল ক্যারোজেল। হাত দ্বারা স্লাইড যোগ করার পরিবর্তে, আপনি একটি টেমপ্লেট হিসাবে একটি স্লাইড তৈরি করেন এবং একটি ক্যোয়ারী (পোস্ট, পণ্য, বা যেকোনো কাস্টম পোস্টের ধরন) উইজেটটি নির্দেশ করেন এবং এটি নিজেই পূরণ করে। একটি পোস্ট যোগ করুন, ক্যারোজেল আপডেট। কোন সম্পাদনা প্রয়োজন।
এটি Elementor 3.11 এ এসেছে এবং এটি এলিমেন্টর ক্যারোজেল উইজেট বেশিরভাগ লোকেরা আসলে খুঁজছেন যখন তারা একটি পোস্ট ক্যারোজেল বা একটি পণ্য স্লাইডার অনুসন্ধান করে। এটি শুধুমাত্র প্রো-ই, এলিমেন্টর কোরে কোন বিনামূল্যের সমতুল্য নেই, তাই এই পোস্টের দ্বিতীয়ার্ধটি কভার করে বিনামূল্যে ক্যারোজেল উইজেট আপনার লাইসেন্স না থাকলে এটি আপনাকে কাছে নিয়ে যায়।
এই নির্দেশিকা কি কভার করে
- লুপ ক্যারোজেল বনাম লুপ গ্রিড: কোনটি ব্যবহার করবেন
- আপনি শুরু করার আগে আপনার যা প্রয়োজন
- এলিমেন্টরে লুপ ক্যারোজেল কীভাবে তৈরি করবেন
- সেটিংস যা মানুষকে ট্রিপ করে
- WooCommerce পণ্যের জন্য লুপ ক্যারোজেল
- কোন এলিমেন্টর প্রো? মুক্ত পথ
- যখন একটি লুপ ক্যারোজেল ভুল পছন্দ
- প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
লুপ ক্যারোজেল বনাম লুপ গ্রিড: কোনটি
একই ইঞ্জিন, একই লুপ আইটেম টেমপ্লেট, ভিন্ন উপস্থাপনা। গ্রিড উল্লম্বভাবে সারি স্ট্যাক। ক্যারোজেল একই আইটেমগুলিকে একটি অনুভূমিক ট্র্যাকে রাখে।
আইটেমগুলি ঐচ্ছিক হলে ক্যারোজেলটি বেছে নিন: একটি "আপনি" স্ট্রিপ, সম্পর্কিত পোস্ট, বৈশিষ্ট্যযুক্ত পণ্যগুলিও পছন্দ করতে পারেন৷ পৃষ্ঠাটি বোঝার জন্য কাউকে আইটেম সাতটি দেখতে হবে না।
আইটেম পৃষ্ঠা হলে গ্রিড চয়ন করুন। একটি সংরক্ষণাগার, একটি দোকান বিভাগ, একটি ব্লগ সূচক। একটি তীরের পিছনে একটি বিভাগের তালিকার দুই তৃতীয়াংশ লুকিয়ে রাখলে আপনার রূপান্তর খরচ হয়, কারণ একজন ক্রেতা যাকে আরও পণ্য দেখতে ক্লিক করতে হয় সে সাধারণত তা করে না।
আমি একজন ক্লায়েন্টকে যে নিয়মটি দেব: যদি বিভাগে একটি শিরোনাম থাকে যেমন “ ব্লগ থেকে আরও, ” ক্যারোজেল। শিরোনাম যদি পৃষ্ঠার শিরোনাম হয়, গ্রিড।
আপনি শুরু করার আগে আপনার যা প্রয়োজন
- এলিমেন্টর প্রো। লুপ ক্যারোজেল ফ্রি প্লাগইনে নেই এবং এর কোনো আংশিক সংস্করণ নেই।
- একটি লুপ আইটেম টেমপ্লেট। এটি একক স্লাইড ডিজাইন: বৈশিষ্ট্যযুক্ত চিত্র, শিরোনাম, উদ্ধৃতি, বোতাম। থিম বিল্ডারে একবার নির্মিত, সর্বত্র পুনরায় ব্যবহার করা হয়েছে।
- প্রশ্ন করার বিষয়বস্তু। পোস্ট, পণ্য, বা একটি নিবন্ধিত কাস্টম পোস্ট প্রকার।
পুরানো ইনস্টলে আপনাকে এলিমেন্টর → সেটিংস → বৈশিষ্ট্যের অধীনে এটি সক্ষম করতে হতে পারে। এটি একটি পরীক্ষামূলক পতাকার পিছনে পাঠানো হয়েছিল এবং স্থিতিশীল হওয়ার আগে কয়েকটি রিলিজের জন্য সেখানে অবস্থান করেছিল।
এলিমেন্টরে লুপ ক্যারোজেল কীভাবে তৈরি করবেন
প্রথমে স্লাইড তৈরি করুন, তারপর ক্যারোজেল। এটিকে অন্যভাবে করা মানে একটি সঙ্কুচিত পূর্বরূপের ভিতরে ডিজাইন করা।
- লুপ আইটেম টেমপ্লেট তৈরি করুন। টেমপ্লেট → থিম বিল্ডার → লুপ আইটেম → নতুন যোগ করুন। এটি রেন্ডার করা পোস্টের ধরনটি বেছে নিন। আপনি একটি কার্ড ডিজাইন করছেন, একটি তালিকা নয়, এবং এলিমেন্টর একটি একক আইটেম দেখায় এবং পরে এটি পুনরাবৃত্তি করে।
- ডায়নামিক ট্যাগ দিয়ে কার্ড তৈরি করুন। একটি ইমেজ উইজেট যোগ করুন এবং এর উৎস ডায়নামিক → বৈশিষ্ট্যযুক্ত ছবিতে সেট করুন। শিরোনাম উইজেট → গতিশীল → পোস্ট শিরোনাম। পাঠ্য সম্পাদক → পোস্ট উদ্ধৃতি। বোতাম → গতিশীল → পোস্ট URL। এখানে কিছুই হার্ডকোড করা নেই; প্রতিটি ক্ষেত্র সেই স্লটে যে পোস্ট ল্যান্ড করে তা থেকে টানে।
- টেমপ্লেট প্রকাশ করুন এবং প্রদর্শন শর্ত প্রম্পট এড়িয়ে যান। লুপ আইটেমগুলির শর্তগুলির প্রয়োজন নেই, কারণ সেগুলিকে একটি অবস্থানে বরাদ্দ না করে একটি উইজেট দ্বারা কল করা হয়৷।
- লুপ ক্যারোজেল উইজেট ড্রপ করুন আপনার পৃষ্ঠায় এবং একটি টেমপ্লেট চয়ন করুন এর অধীনে আপনি যে টেমপ্লেটটি তৈরি করেছেন তা চয়ন করুন৷।
- ক্যোয়ারী সেট করুন। উত্স (পোস্ট, পণ্য, বা আপনার CPT), তারপর এটিকে সংকুচিত করুন: শ্রেণীবিন্যাস দ্বারা অন্তর্ভুক্ত করুন, বর্তমান পোস্টটি বাদ দিন, প্রতি পৃষ্ঠায় পোস্ট সেট করুন। একই পৃষ্ঠায় অন্য লুপ থাকলে "ডুপ্লিকেট এড়িয়ে চলুন" চালু করুন, অন্যথায় আপনার সম্পর্কিত-পোস্ট স্ট্রিপ সাইডবারে ইতিমধ্যে যা আছে তা পুনরাবৃত্তি করবে।
- ক্যারোজেল কনফিগার করুন। প্রতি ভিউ স্লাইড, স্ক্রোল করার জন্য স্লাইড, অটোপ্লে, অসীম লুপ, গতি, হোভারে বিরতি। প্যানেলের শীর্ষে ডিভাইস আইকন ব্যবহার করে ডেস্কটপ, ট্যাবলেট এবং মোবাইলের জন্য আলাদাভাবে স্লাইড-প্রতি-ভিউ সেট করুন।
- নেভিগেশন শৈলী। তীর, বিন্দু বা ভগ্নাংশ। আকার, রঙ, অবস্থান এবং হোভার স্টেট সবই স্টাইল ট্যাবে বসে।
সেটিংস যা মানুষকে ট্রিপ করে
অসীম লুপ যথেষ্ট আইটেম প্রয়োজন। এলিমেন্টর ক্লোন স্লাইডগুলিকে মোড়ানো জাল করতে, এবং এটি অদৃশ্যভাবে করতে আপনার স্লাইড-প্রতি-ভিউ-এর অন্তত দ্বিগুণ প্রয়োজন। তিন-প্রতি-ভিউতে চারটি পোস্ট দৃশ্যত লাফিয়ে উঠবে যখন এটি মোড়ানো হবে। হয় প্রতি পৃষ্ঠায় পোস্ট বাড়ান বা লুপ বন্ধ করুন।
পোস্ট-প্রতি-পৃষ্ঠা একটি ক্যোয়ারী সীমা, একটি প্রদর্শন সীমা নয়। এটিকে 6 এ সেট করুন এবং ক্যারোজেলটিতে মোট ছয়টি আইটেম রয়েছে, যদিও অনেকগুলি দৃশ্যমান। স্লাইড-প্রতি-ভিউ মেলানোর জন্য লোকেরা এটিকে 3 এ সেট করে এবং তারপর আশ্চর্য হয় কেন স্ক্রোল করার কিছু নেই।
প্রান্ত ফাঁক ইঙ্গিত পরিবর্তন। একটি ক্যারোজেল যা কন্টেইনার প্রান্তে ফ্লাশ শেষ করে তা সমাপ্ত দেখায়। একটি ছোট প্রান্তের ফাঁক যোগ করুন যাতে পরবর্তী স্লাইডটি উঁকি দেয় এবং লোকেরা সোয়াইপ করতে জানে৷ এটি কয়েক পিক্সেল এবং এটি পরিমাপযোগ্যভাবে মিথস্ক্রিয়া হার পরিবর্তন করে।
অটোপ্লে প্লাস লিঙ্ক একটি খারাপ জোড়া। যদি আপনার স্লাইডগুলি ক্লিকযোগ্য হয় এবং ক্যারোজেলটি একটি টাইমারে চলে যায়, তাহলে কেউ একটি কার্ডের জন্য পৌঁছাবে এবং এটি প্রতিস্থাপনকারীটিতে ক্লিক করবে৷ পজ-অন-হোভার ডেস্কটপ কেস ঠিক করে। স্পর্শে কোন হোভার নেই, তাই এর জন্য ক্লিকযোগ্য কার্ড আমি সম্পূর্ণরূপে অটোপ্লে বন্ধ করব।
WooCommerce পণ্যের জন্য লুপ ক্যারোজেল
একই প্রক্রিয়া, একটি পার্থক্য: পণ্যগুলিতে উত্স সেট করুন এবং আপনি WooCommerce-নির্দিষ্ট ক্যোয়ারী নিয়ন্ত্রণ পাবেন। বিভাগ, ট্যাগ বা বৈশিষ্ট্য দ্বারা ফিল্টার করুন, মূল্য, জনপ্রিয়তা বা তারিখ অনুসারে সাজান এবং স্টক-বহির্ভূত আইটেমগুলি বাদ দিন।
পণ্যগুলির জন্য লুপ আইটেম টেমপ্লেটে মূল্য এবং একটি অ্যাড-টু-কার্ট বোতাম গতিশীল উপাদান হিসাবে বহন করা উচিত, স্ট্যাটিক পাঠ্য নয়। মিস করুন এবং ক্যারোজেলের প্রতিটি কার্ড একই দাম দেখায়, যা ঠিক সেই ধরনের বাগ যা উৎপাদনে টিকে থাকে কারণ এটি সম্পাদকের পূর্বরূপ দেখতে সূক্ষ্ম দেখায়।
সম্পর্কিত পণ্য, সম্প্রতি দেখা হয়েছে, এবং "লুক সম্পূর্ণ করুন" স্ট্রিপগুলি একটি ভিন্ন প্রশ্নের সাথে একই উইজেট। এবং যদি আপনার একটি স্ট্রিপের পরিবর্তে শুধুমাত্র একটি পণ্যের প্রয়োজন হয়, তাহলে বৈশিষ্ট্যযুক্ত পণ্য উইজেট কোন প্রশ্ন ছাড়াই যে করে। এটি একটি প্রো উইজেট, এবং এটি একমাত্র WooCommerce পণ্য উইজেট মাস্টার অ্যাডনস জাহাজ।
কোন এলিমেন্টর প্রো? এখানে বিনামূল্যে পথ
লুপ ক্যারোজেল প্রো। আপনি যদি ফ্রি এলিমেন্টরে থাকেন, আপনি এটি পাচ্ছেন না এবং কোনো ফ্রি অ্যাডন লুপ আইটেম টেমপ্লেট সিস্টেমকে পুনরায় প্রয়োগ করে না।
আপনি বিনামূল্যে যা পেতে পারেন তা হল ফলাফল: একটি গতিশীল ক্যারোজেল যা পোস্ট বা পণ্য টানে এবং নিজেই আপডেট করে। মাস্টার অ্যাডঅনস' ব্লগ উইজেট ফ্রি প্লাগইনে একটি ক্যারোজেল মোড আছে। পোস্টের ধরন, বিভাগ, ট্যাগ বা লেখক দ্বারা ক্যোয়ারী করুন, একটি লেআউট চয়ন করুন, ডিসপ্লেটিকে ক্যারোসেলে স্যুইচ করুন এবং একই তীর, বিন্দু, অটোপ্লে এবং প্রতি-ব্রেকপয়েন্ট নিয়ন্ত্রণগুলি কনফিগার করুন৷।
ট্রেড-অফ সৎ: আপনি কার্ড ডিজাইন করবেন না। ব্লগ উইজেট আপনাকে একটি ফাঁকা লুপ আইটেম ক্যানভাসের পরিবর্তে লেআউট প্রিসেট এবং একটি স্টাইল ট্যাব দেয়। আপনার যদি স্লাইডের উপর পিক্সেল নিয়ন্ত্রণের প্রয়োজন হয়, এলিমেন্টর প্রো-এর পদ্ধতি আরও ভাল। আপনার যদি একটি স্লাইডারে "সর্বশেষ ছয়টি পোস্টের প্রয়োজন হয় যা শালীন দেখায়," তাহলে বিনামূল্যের উইজেটটি দ্রুত সেখানে পৌঁছে যাবে।
পণ্যগুলি পাতলা, এবং এটি স্পষ্টভাবে বলা মূল্যবান: কোনও বিনামূল্যের পণ্য ক্যারোজেল উইজেট নেই৷ একটি স্লাইডিং, স্ব-আপডেট করা পণ্য স্ট্রিপের জন্য এলিমেন্টর প্রো-এর লুপ ক্যারোজেল বা নীচের মতো একটি হাতে ভরা লেআউট প্রয়োজন। দ্য পণ্য ক্যারোজেল গাইড উভয় মাধ্যমে কাজ করে। এবং যদি আপনার স্লাইডগুলি একটি প্রশ্নের পরিবর্তে স্থির চিত্র হয় তবে বিনামূল্যে ইমেজ ক্যারোজেল উইজেট এটি সংক্ষিপ্ত রুট, যদিও সেই সময়ে আপনি একটি স্লাইডার তৈরি করছেন, লুপ নয়।
জানার মতো একটি তৃতীয় বিনামূল্যের বিকল্প রয়েছে। মাস্টার অ্যাডনস জাহাজ 20টি নামযুক্ত ক্যারোজেল এবং স্লাইডার ডিজাইন আমদানিযোগ্য হিসাবে উইজেট নির্মাতা ফাইল, এবং তাদের মধ্যে 8 বিনামূল্যে আমদানি। এগুলি ক্যোয়ারী-চালিত নয়, তাই আপনি আইটেমগুলি হাতে পূরণ করেন, তবে দুটি লুপ ক্যারোজেল যা তৈরি করে তার কাছাকাছি বসে। চতুর্ভুজ পৃষ্ঠাযুক্ত ক্যাটালগ পৃষ্ঠাগুলি একবারে তিনটি আইটেম বাক্সের একটি গ্রিড, প্রতিটিতে একটি চিত্র, বিভাগ, শিরোনাম এবং অনুলিপি রয়েছে, যা একটি পৃষ্ঠাযুক্ত পণ্য লুপের নিকটতম বিনামূল্যের জিনিস। লেজার ইনডেক্স স্লাইডার একটি ডিসপ্লে প্লেটের পাশে এন্ট্রিগুলির একটি ক্লিকযোগ্য সূচক রাখে, আর্কাইভ এবং কাজের তালিকার জন্য নির্মিত। সব 20 সংগ্রহ করা হয় ক্যারোজেল উইজেট হাব.
যখন একটি লুপ ক্যারোজেল ভুল পছন্দ
তিনটি ক্ষেত্রে, এবং আমি তিনটিই ক্লায়েন্ট সাইটে ভুল হতে দেখেছি।
আপনার সংরক্ষণাগার পৃষ্ঠা। একটি ক্যারোজেলে একটি বিভাগ তালিকা মানে Google এর ক্রলার ছয়টি পণ্য দেখে যেখানে আপনার ষাটটি আছে। বাকিগুলি DOM-এ রয়েছে, তবে ব্যবহারকারীর জন্য এবং পৃষ্ঠার গভীরতা বিচারকারী যে কেউ এই বিভাগটি পাতলা।
মোবাইলে ভাঁজের উপরে। একটি গতিশীল ক্যারোজেল হল একটি প্রশ্ন, একটি টেমপ্লেট রেন্ডার এবং একটি স্লাইডার আরম্ভ কিছু পেইন্ট করার আগে। এটি একটি ফোন পৃষ্ঠার শীর্ষে রাখুন এবং আপনার সবচেয়ে বড় কন্টেন্টফুল পেইন্ট হল একটি স্পিনার।
পাঁচটিরও কম আইটেম। তিনটি স্লাইড সহ একটি ক্যারোজেল একটি গ্রিড যা মানুষকে কাজ করে। শুধু তিনটি দেখান।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
এলিমেন্টর লুপ ক্যারোজেল কি বিনামূল্যে?
নং লুপ ক্যারোজেলের জন্য এলিমেন্টর প্রো প্রয়োজন, এবং কোন কম ফ্রি সংস্করণ নেই। বিনামূল্যের বিকল্প হল একটি অ্যাডন থেকে একটি ক্যোয়ারী-চালিত ক্যারোজেল উইজেট, এবং মাস্টার অ্যাডনস ব্লগ উইজেটের ফ্রি স্তরে একটি ক্যারোজেল মোড রয়েছে যা পোস্টগুলিকে গতিশীলভাবে টানে। হাতে ভরা লেআউটের জন্য, মাস্টার অ্যাডনসের 20টি আমদানিযোগ্য ক্যারোজেল ডিজাইনের মধ্যে 8টিও বিনামূল্যে।
লুপ গ্রিড এবং লুপ ক্যারোজেলের মধ্যে পার্থক্য কী?
তারা একই লুপ আইটেম টেমপ্লেট এবং ক্যোয়ারী নিয়ন্ত্রণ শেয়ার করে। লুপ গ্রিড সারি এবং কলামে ফলাফল সাজায়; লুপ ক্যারোজেল তাদের তীর এবং বিন্দু সহ একটি অনুভূমিক স্লাইডিং ট্র্যাকে রাখে। সংরক্ষণাগার এবং তালিকার জন্য গ্রিড ব্যবহার করুন, ঐচ্ছিক “related” বা “featured” স্ট্রিপগুলির জন্য ক্যারোজেল ব্যবহার করুন৷।
আমি কিভাবে এলিমেন্টরে একটি লুপ ক্যারোজেল যোগ করব?
চিত্র, শিরোনাম এবং উদ্ধৃতির জন্য গতিশীল ট্যাগ ব্যবহার করে প্রথমে থিম বিল্ডারে একটি লুপ আইটেম টেমপ্লেট তৈরি করুন। এটি প্রকাশ করুন, তারপর আপনার পৃষ্ঠায় লুপ ক্যারোজেল উইজেটটি টেনে আনুন, সেই টেমপ্লেটটি নির্বাচন করুন, ক্যোয়ারী উত্স এবং ফিল্টার সেট করুন এবং ক্যারোজেল সেটিংসের অধীনে স্লাইড-প্রতি-ভিউ এবং অটোপ্লে কনফিগার করুন।
কেন আমার লুপ ক্যারোজেল পোস্ট দেখাচ্ছে না?
সাধারণত প্রশ্ন। লুপ আইটেম টেমপ্লেটের পোস্টের ধরন উইজেটের ক্যোয়ারী সোর্সের সাথে মেলে কিনা তা পরীক্ষা করুন, কারণ পোস্টের জন্য তৈরি একটি টেমপ্লেট পণ্য রেন্ডার করবে না। দ্বিতীয় সবচেয়ে সাধারণ কারণ হল একটি শ্রেণীবিন্যাস ফিল্টার যার কোনো মিল নেই। তৃতীয়টি হল পোস্ট-প্রতি-পৃষ্ঠা সেট আপনার ধারণার চেয়ে কম।
লুপ ক্যারোজেল কাস্টম পোস্টের ধরন দেখাতে পারে?
হ্যাঁ। যেকোন নিবন্ধিত পাবলিক পোস্টের ধরন ক্যোয়ারী সোর্স ড্রপডাউনে প্রদর্শিত হয় এবং আপনি যদি ACF, মেটা বক্স বা পড ব্যবহার করেন তবে এর কাস্টম ক্ষেত্রগুলি গতিশীল ট্যাগ হিসাবে উপলব্ধ। সেই পোস্টের প্রকারের বিপরীতে লুপ আইটেম টেমপ্লেট তৈরি করুন এবং ক্যারোজেল বাকিগুলি পরিচালনা করে।
আমি কিভাবে একটি লুপ ক্যারোজেল প্রতিক্রিয়াশীল করতে পারি?
সেটিং এর শীর্ষে ডিভাইস আইকন ব্যবহার করে প্রতিটি ব্রেকপয়েন্টে আলাদাভাবে স্লাইড-প্রতি-ভিউ সেট করুন। ডেস্কটপে তিনটি, ট্যাবলেটে দুটি, মোবাইলে একটি নিরাপদ ডিফল্ট। এছাড়াও মোবাইলে তীরের আকার পরীক্ষা করুন, কারণ ডেস্কটপ ডিফল্ট প্রায়শই একটি আরামদায়ক ট্যাপ লক্ষ্য হতে খুব ছোট হয়।
এখান থেকে কোথায় যাবেন
আপনার যদি প্রো থাকে, প্রথমে লুপ আইটেম টেমপ্লেটটি তৈরি করুন এবং এটিকে একটি ডিজাইন সম্পদ হিসাবে বিবেচনা করুন যা আপনি বাকি সাইটের জন্য গ্রিড এবং ক্যারোসেল জুড়ে পুনরায় ব্যবহার করবেন। এটা ফেরত দিতে যে টুকরা।
আপনি যদি কার্ডটিকে একটি টেমপ্লেটের পরিবর্তে একটি পুনঃব্যবহারযোগ্য উইজেট হিসাবে তৈরি করতে চান তবে এটিই আপনার নিজের উইজেট রচনা জন্য, এবং মূল্য পৃষ্ঠা এটি যে স্তরে বসে তা কভার করে।
আপনি যদি তা না করেন, তাহলে বিনামূল্যের ক্যোয়ারী-চালিত উইজেটগুলি দিয়ে শুরু করুন এবং লেআউট প্রিসেটগুলি আপনাকে যথেষ্ট কাছাকাছি নিয়ে আসে কিনা তা দেখুন৷ উভয় পাথ কভার করা হয় এলিমেন্টর ক্যারোজেল উইজেট পৃষ্ঠা, বাকি ক্যারোজেল বিকল্পগুলির সাথে। এখনও বিন্যাস সিদ্ধান্ত? ক্যারোজেল বনাম স্লাইডার আপনার বিভাগের প্রকৃতপক্ষে কোন আকৃতির প্রয়োজন তা নিষ্পত্তি করে এবং স্লাইডার প্লাগইন রাউন্ডআপ এটি তৈরি করে এমন প্লাগইনগুলিকে কভার করে৷।
