দুটি সম্পর্কিত কাজ। একটি ভিডিও ক্যারোজেল একটি অনুভূমিক ট্র্যাকে ভিডিওগুলির মাধ্যমে স্লাইড করে৷ ক গ্যালারি স্লাইডার নীচে একটি থাম্বনেইল স্ট্রিপ সহ একটি বড় প্রিভিউ দেখায়, যেটি লেআউটটি লোকেরা আসলে চায় যখন তারা বলে “ভিডিও ক্যারোজেল,” কারণ সমান আকারের ভিডিও থাম্বনেইলের সারি যেকোনো কিছু দেখার একটি খারাপ উপায়।
নীচে উভয়ই, প্লাস এম্বেড সমস্যা যা ভিডিও ক্যারোসেলগুলিকে আপনি একটি পৃষ্ঠায় রাখতে পারেন এমন সবচেয়ে ধীর উইজেট করে তোলে এবং এটির জন্য এক-লাইন সমাধান করে৷ উভয় উইজেট এর অংশ সম্পূর্ণ ক্যারোজেল উইজেট সংগ্রহ.
পৃষ্ঠার গতির সমস্যা দিয়ে শুরু করুন
একটি পৃষ্ঠায় ছয়টি YouTube এম্বেড একটি একক ভিডিও চালানোর আগে তৃতীয় পক্ষের জাভাস্ক্রিপ্টের প্রায় 3MB। প্রতিটি আইফ্রেম YouTube প্লেয়ার, এর বিশ্লেষণ এবং এর কুকি অবকাঠামো লোড করে যে কেউ ক্লিক করুক বা না করুক।
এই ছয়টি একটি ক্যারোসেলে রাখুন এবং এটি আরও খারাপ হয়ে যায়, কারণ একটি ক্যারোজেল তার সমস্ত স্লাইড রেন্ডার করে, অফ-স্ক্রিন সহ, তাই সমস্ত ছয়টি আইফ্রেম একবারে শুরু হয়।
ফিক্স হল a সম্মুখভাগ: একটি প্লে বোতাম দিয়ে ভিডিওর পোস্টার ইমেজ দেখান, এবং কেউ ক্লিক করলেই আসল এম্বেড লোড করুন। ছয় প্লেয়ারের পরিবর্তে একটি ছবি। বেশিরভাগ ভিডিও উইজেটের একটি "অলস লোড" বা "প্লেতে ক্লিক করুন" বিকল্প রয়েছে যা এটি করে; এটি চালু করুন এবং পৃষ্ঠাটি মোবাইলে কয়েক সেকেন্ড দ্রুত হয়ে যায়।
যদি আপনার উইজেট এটি অফার না করে, ইনলাইন এম্বেডের পরিবর্তে একটি লাইটবক্স সহ পোস্টার চিত্রগুলি ব্যবহার করুন৷ একই চাক্ষুষ ফলাফল, ওজন একটি ভগ্নাংশ।
পদ্ধতি 1: গ্যালারি স্লাইডার, প্রিভিউ প্লাস থাম্বনেল
দ্য গ্যালারি স্লাইডার উইজেট বেশিরভাগ ভিডিও এবং ফটো গ্যালারীগুলি যে লেআউটটি চায় তা আপনাকে দেয়: একটি স্ক্রোলযোগ্য থাম্বনেইল স্ট্রিপ সহ একটি বড় প্রিভিউ ফলক৷ এটি একটি প্রো উইজেট, এবং এটি একটি ইমেজ উইজেট, তাই এটি প্লেব্যাকের পরিবর্তে লেআউট তৈরি করে। যদি আপনার গ্যালারি শুধুমাত্র ছবি হয়, কোন ভিডিও ছাড়া, ভিট্রিন প্লেট গ্যালারি একই প্লেট-প্লাস-থাম্বনেল লেআউট সহ একটি বিনামূল্যে আমদানিযোগ্য নকশা, কিন্তু এটি ভিডিও পরিচালনা করে না।
- গ্যালারি স্লাইডারে টেনে আনুন এবং কন্টেন্ট ট্যাব খুলুন।
- আপনার গ্যালারি তৈরি করুন মিডিয়া লাইব্রেরি থেকে। একটি ভিডিও সেটের জন্য যার অর্থ এখানে পোস্টার ফ্রেম, প্লেব্যাক পদ্ধতি 2 বা 3 দ্বারা পরিচালিত।
- থাম্বনেল চালু করুন এবং থাম্বনেইল স্ট্রিপটিকে ক্যারোজেল মোডে সেট করুন যাতে এটি মূল পূর্বরূপ থেকে স্বাধীনভাবে স্ক্রোল করে।
- পূর্বরূপ অবস্থান সেট করুন: নীচে, উপরে, বাম বা ডানে থাম্বনেইল। নীচে নিরাপদ ডিফল্ট; বাম বা ডান স্যুট প্রতিকৃতি বিষয়বস্তু।
- পূর্বরূপ প্রস্থ সেট করুন তাই প্রধান ফলক ট্যাবলেটে থাম্বনেইল অফ-স্ক্রীনে ধাক্কা দেয় না।
উইজেটের প্রতিটি ক্ষেত্র তালিকাভুক্ত করা হয়েছে গ্যালারি স্লাইডার ডকুমেন্টেশন আপনি যদি সংক্ষিপ্ত পথের পরিবর্তে সম্পূর্ণ রেফারেন্স চান।
থাম্বনেইল ক্যারোজেল মোড হল সেটিং যা এই স্কেল তৈরি করে। এটি ছাড়া, বিশটি থাম্বনেইল চারটি সারিতে মোড়ানো এবং পুরো ভিউপোর্ট খায়। এটির সাথে, তারা একটি স্ক্রোলযোগ্য লাইনে থাকে।
মোবাইলে, প্রিভিউয়ের নীচে থাম্বনেইল তিন বা চারটি দৃশ্যমান। বাম এবং ডান অবস্থানগুলি স্বয়ংক্রিয়ভাবে নীচে ভেঙে যায়, যা ডান, কারণ একটি 390px স্ক্রিনে একটি পাশের স্ট্রিপ পূর্বরূপের জন্য কিছুই রাখে না।
পদ্ধতি 2: মিডিয়া ক্যারোজেল, ভিডিও যা ট্র্যাকে চলে
যদি ভিডিওগুলিকে একটি ক্লিকের পিছনে না করে ক্যারোজেলের ভিতরে চালাতে হয়, এলিমেন্টর প্রো-এর মিডিয়া ক্যারোজেল হল উইজেট যা এটি করে। প্রতিটি স্লাইড ইমেজ বা ভিডিওতে সেট করা হয় এবং একটি ভিডিও স্লাইড একটি YouTube, Vimeo বা নিজস্ব স্ব-হোস্ট করা URL নেয়, তাই মিশ্র সেটগুলি একটি ট্র্যাকে কাজ করে৷।
যদি সেটটি সত্যিই একটি স্ট্রিপের পরিবর্তে একটি লাইব্রেরি হয়, যেমন একটি কোর্স, একটি টিউটোরিয়াল সিরিজ বা একটি চ্যানেল সংরক্ষণাগার, এলিমেন্টর প্রো-এর ভিডিও প্লেলিস্টটি আরও ভাল আকার। প্লেয়ারের পাশে তালিকাভুক্ত ভিডিওগুলি, প্রতিটিতে একটি শিরোনাম এবং একটি সময়কাল রয়েছে এবং প্লেয়ারটি একটি পৃষ্ঠা লোড ছাড়াই অদলবদল করে৷ এটি একটি ক্যারোজেলের পরিবর্তে একটি তালিকা, এবং এটিই এটির পক্ষে যুক্তি: শিরোনামগুলি হল লোকেরা কীভাবে কী দেখতে হবে তা নির্ধারণ করে এবং থাম্বনেইলের একটি সারি তাদের অনুমান করে।
ক্যারোসেলে ফিরে যান। মিডিয়া ক্যারোজেল এখানে একমাত্র উইজেট যা ভিডিও ইনলাইন চালায়, এবং এটির খরচও, যা নীচের সেটিংসের জন্য।
- লাইটবক্স মোড চালু করুন। ইনলাইন প্লেব্যাক মানে প্রতিটি স্লাইড একজন প্লেয়ার বহন করে। লাইটবক্স মোড পোস্টার দেখায় এবং ক্লিকে প্লেয়ার লোড করে, যা উইজেটে তৈরি এই পোস্টের উপরের দিকের প্যাটার্ন।
- প্রথম ভিডিওটি অটোপ্লে করবেন না। কাউকে হারানোর দ্রুততম উপায় হল সাউন্ড ফায়ারিং আনপ্রম্পটেড। আপনি যদি অটোপ্লে করতেই চান তবে এটি নিঃশব্দ করুন।
- ক্যাপশনে রানটাইম রাখুন। "এটি কতক্ষণ?"" হল প্রথম প্রশ্ন যা কেউ একটি ভিডিও সম্পর্কে জিজ্ঞাসা করে এবং ক্লিক করার আগে এটির উত্তর দিলে সমাপ্তির হার বেড়ে যায়৷।
পদ্ধতি 3: ক্লিকের পিছনে ভিডিও সহ বিনামূল্যে, পোস্টার ক্যারোজেল
কোন লাইসেন্স নেই এবং আপনি এখনও একটি ভিডিও ক্যারোজেল চান? দুটি বিনামূল্যের রুট, এবং উভয়ই পৃষ্ঠাটি দ্রুত রাখে কারণ কেউ এটির জন্য জিজ্ঞাসা না করা পর্যন্ত কিছুই লোড হয় না।
- প্রতিটি ভিডিওর জন্য একটি পোস্টার ফ্রেম রপ্তানি করুন এবং ছবি হিসাবে আপলোড করুন।
- বিনামূল্যে ইমেজ Carousel গ্যালারী তাদের যোগ করুন।
- লাইটবক্সটি চালু করুন যাতে একটি ক্লিক দূরে নেভিগেট করার পরিবর্তে পৃষ্ঠার উপর ফ্রেমটি খোলে।
- স্টাইল ট্যাবে একটি প্লে-বোতাম ওভারলে যুক্ত করুন যাতে স্লাইডগুলি ফটোগ্রাফের পরিবর্তে ভিডিও হিসাবে পড়ে। এটি ছাড়া, কেউ ক্লিক করে না।
যে আপনি চেহারা পায়। এটি আপনাকে প্রতি স্লাইডে একটি ভিন্ন গন্তব্য পায় না, কারণ একটি গ্যালারি-ভিত্তিক ক্যারোজেল প্রতিটি স্লাইডকে একই লিঙ্ক দেয়। প্রতিটি ভিডিওর নিজস্ব পৃষ্ঠার প্রয়োজন হলে, প্রতিটিকে একটি পোস্ট দিন এবং বিনামূল্যে ব্যবহার করুন৷ ব্লগ উইজেট পরিবর্তে ক্যারোজেল মোডে: এটি থাম্বনেইল, শিরোনাম এবং ভিডিওটি যে পোস্টে বসে তার একটি লিঙ্ক টানে। প্রো-তে, লুপ ক্যারোজেল একটি ক্যোয়ারী থেকে একই জিনিস করে, তাই আপনি পৃষ্ঠাটি সম্পাদনা না করেই নতুন ভিডিওগুলি উপস্থিত হয়৷।
এটি পোস্টের শীর্ষ থেকে সম্মুখের প্যাটার্ন, হাত দ্বারা নির্মিত। এটি একটি ভিডিও ক্যারোজেলের দ্রুততম সংস্করণ যা বিদ্যমান, কারণ কেউ এটির জন্য জিজ্ঞাসা না করা পর্যন্ত কিছুই লোড হয় না। ইমেজ ক্যারোজেল ওয়াকথ্রু উইজেটটি সম্পূর্ণভাবে কভার করে।
আকৃতির অনুপাত, এবং জিনিস যা এটি ভেঙে দেয়
16:9 সেট করুন এবং প্রতিটি স্লাইডে এটি সেট করুন। একটি ভিডিও ক্যারোজেলে মিশ্র অনুপাত বিভিন্ন উচ্চতার কার্ড তৈরি করে এবং একটি গ্রিডের বিপরীতে, যেখানে একটি ছিদ্রযুক্ত নীচের প্রান্তটি ক্ষমাযোগ্য, একটি অনুভূমিক স্ট্রিপ প্রতিটি অমিলকে সরাসরি তার প্রতিবেশীর পাশে রাখে।
পণ্য কার্ড একই কারণে একই জিনিস মধ্যে রান, এবং WooCommerce পণ্য ক্যারোজেল গাইড কিভাবে তাদের সমতল করতে হয় তা কভার করে।
স্বাভাবিক অপরাধী হল অন্যথায় ল্যান্ডস্কেপ সেটে একটি উল্লম্ব ক্লিপ। হয় এটিকে তার নিজস্ব ক্যারোজেল দিন বা লেটারবক্স করুন এটি একটি ম্যাচিং ব্যাকগ্রাউন্ড সহ 16:9 এ। একটি 9:16 ভিডিও এগারোটি ল্যান্ডস্কেপের জন্য উচ্চতা সেট করতে দেবেন না।
ভিডিও স্কিমা
যদি ভিডিওগুলি আপনার নিজস্ব বিষয়বস্তু হয় এবং সেগুলি অনুসন্ধানের জন্য গুরুত্বপূর্ণ, যোগ করুন৷ VideoObject স্কিমা: নাম, বিবরণ, থাম্বনেইল URL, আপলোডের তারিখ এবং সময়কাল। এটি ভিডিও সমৃদ্ধ ফলাফল সম্ভব করে তোলে।
দুটি শর্ত মানুষ মিস করে: ভিডিওটি পৃষ্ঠার প্রধান বিষয়বস্তু হতে হবে, সাজসজ্জা নয়, এবং থাম্বনেইল URL অবশ্যই সর্বজনীনভাবে ক্রলযোগ্য হতে হবে। একটি পৃষ্ঠায় ছয়টি এমবেডেড ভিডিওর একটি গ্যালারি ভিডিও সমৃদ্ধ ফলাফলের জন্য যোগ্য নয় তবে আপনি এটি চিহ্নিত করুন, কারণ পৃষ্ঠার মূল বিষয়বস্তু ভিডিও নয়৷।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
Elementor একটি ভিডিও ক্যারোজেল উইজেট আছে?
Elementor Pro এর মিডিয়া ক্যারোজেল একটি ক্যারোসেলে ছবি এবং ভিডিও পরিচালনা করে। এলিমেন্টর ফ্রি এটি অন্তর্ভুক্ত করে না। মাস্টার অ্যাডনস প্রিভিউ-প্লাস-থাম্বনেল লেআউটের জন্য তার প্রো স্তরে একটি গ্যালারি স্লাইডার যোগ করে এবং এটি একটি ভিডিও প্লেয়ারের পরিবর্তে একটি ইমেজ উইজেট। ফ্রি ইমেজ ক্যারোজেল একটি লাইটবক্স সহ পোস্টার ইমেজ ব্যবহার করে একটি ভিডিও ক্যারোজেলের জন্য দাঁড়াতে পারে।
আমি কিভাবে এলিমেন্টরে একটি YouTube ক্যারোজেল যোগ করব?
লাইভ এম্বেডের পরিবর্তে পোস্টার ইমেজ ব্যবহার করুন। প্রতিটি ভিডিওর থাম্বনেইল একটি ক্যারোসেলে যোগ করুন, ভিডিও URL-এ স্লাইড লিঙ্ক করুন এবং লাইটবক্সটি সক্ষম করুন যাতে এটি পৃষ্ঠার উপরে খোলে। এক পৃষ্ঠায় ছয়টি লাইভ ইউটিউব আইফ্রেম তৃতীয় পক্ষের জাভাস্ক্রিপ্টের প্রায় 3MB; ছয়টি পোস্টার ইমেজ এর একটি ভগ্নাংশ।
একটি ভিডিও ক্যারোজেল যোগ করার পরে কেন আমার পৃষ্ঠা ধীর?
ক্যারোজেলের প্রতিটি এম্বেড অবিলম্বে তার প্লেয়ার লোড করে, যার মধ্যে স্লাইডগুলি অফ-স্ক্রীন রয়েছে, কারণ একটি ক্যারোজেল তার সমস্ত স্লাইড রেন্ডার করে। উইজেটের অলস-লোড বা ক্লিক-টু-প্লে বিকল্পটি চালু করুন যাতে কেউ ক্লিক না করা পর্যন্ত শুধুমাত্র পোস্টার ইমেজ লোড হয়, অথবা লাইটবক্সের সাহায্যে পোস্টার ইমেজে স্যুইচ করুন।
একটি গ্যালারি স্লাইডার এবং একটি ইমেজ ক্যারোজেল মধ্যে পার্থক্য কি?
একটি গ্যালারি স্লাইডারের দুটি সংযুক্ত অংশ রয়েছে: একটি বড় প্রিভিউ ফলক এবং একটি থাম্বনেইল স্ট্রিপ যা এটি নেভিগেট করে। একটি ইমেজ ক্যারোজেল হল সমান আকারের স্লাইডগুলির একটি একক সারি। গ্যালারি স্লাইডার ব্যবহার করুন যখন আইটেমগুলি একবারে একটি সঠিক চেহারার যোগ্য হয়; আপনি যখন একটি সেট দেখাচ্ছেন তখন ক্যারোজেল ব্যবহার করুন।
আমি কিভাবে একটি এলিমেন্টর স্লাইডারে থাম্বনেইল যোগ করব?
গ্যালারি স্লাইডার উইজেট ব্যবহার করুন, বিষয়বস্তু ট্যাবে থাম্বনেইল সক্ষম করুন এবং থাম্বনেইল স্ট্রিপটিকে ক্যারোজেল মোডে স্যুইচ করুন যাতে একটি দীর্ঘ সেট সারিতে মোড়ানোর পরিবর্তে একটি স্ক্রোলযোগ্য লাইনে থাকে। লেআউটের অধীনে, নীচে, উপরে, বাম বা ডানে পূর্বরূপ অবস্থান সেট করুন।
আমি কি একটি এলিমেন্টর ক্যারোসেলে ছবি এবং ভিডিও মিশ্রিত করতে পারি?
হ্যাঁ। Elementor Pro এর মিডিয়া ক্যারোজেল স্থানীয়ভাবে মিশ্র ধরনের সমর্থন করে। ফ্রি ইমেজ ক্যারোজেলের সাথে, ভিডিওগুলির জন্য পোস্টার ইমেজ ব্যবহার করুন এবং সেই স্লাইডগুলিকে ভিডিও URL-এর সাথে লিঙ্ক করুন, তাই ছবি এবং ভিডিও উভয়ই স্লাইড হিসাবে আচরণ করে এবং ক্লিকে শুধুমাত্র ভিডিও লোড হয়৷।
কোনটি নির্মাণ করতে হবে
কোর্স বা টিউটোরিয়াল সিরিজ: এলিমেন্টর প্রো এর ভিডিও প্লেলিস্ট, কারণ শিরোনাম এবং সময়কাল কাজ করে। যে ভিডিওগুলি একটি ক্যারোজেল ট্র্যাকে চালাতে হবে: মিডিয়া ক্যারোজেল, লাইটবক্স মোড চালু আছে৷ পোর্টফোলিও রিল বা পণ্যের ডেমো: থাম্বনেইল সহ গ্যালারি স্লাইডার। একটি বিপণন পৃষ্ঠায় মুষ্টিমেয় ভিডিও এবং লাইসেন্স নেই: পোস্টার চিত্র এবং একটি লাইটবক্স সহ বিনামূল্যের চিত্র ক্যারোজেল, যা তিনটির মধ্যে দ্রুততম। এবং যদি ভিডিওটি শুধুমাত্র একটি হিরো বিভাগের জন্য ব্যাকগ্রাউন্ড টেক্সচার হয়, বিনামূল্যে ব্যাকগ্রাউন্ড স্লাইডার এক্সটেনশন একটি লুপিং ভিডিওর ওজনের একটি ভগ্নাংশে পরিবর্তে স্থির চিত্রগুলি ঘোরায়৷।
বিশের কেউ নয় উইজেট নির্মাতা ডিজাইন ভিডিও পরিচালনা করে, তাই এটি এমন একটি কাজ যেখানে স্টক উইজেটগুলি উত্তর। সেটের অন্য সবকিছুর জন্য, মূল্য পৃষ্ঠা কোন স্তর প্রযোজ্য তা দেখায়, এবং ক্যারোজেল বনাম স্লাইডার প্রথমে বিন্যাস প্রশ্ন নিষ্পত্তি করে।
তাদের সব আছে এলিমেন্টর ক্যারোজেল উইজেট পৃষ্ঠা, এবং বিনামূল্যে বনাম প্রো ব্রেকডাউন প্রতিটি কোন স্তরে বসে তা কভার করে।
